From ae7b2b719e237dcdb38e0d1a29708fbb2589307c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Mon, 9 Mar 2026 15:13:25 +0100
Subject: [PATCH] nicolium: style migrations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../nicolium/src/components/ui/checkbox.tsx   |   7 +-
 .../nicolium/src/components/ui/file-input.tsx |   7 +-
 .../nicolium/src/components/ui/form-group.tsx |  23 +-
 .../src/components/ui/icon-button.tsx         |  14 +-
 .../nicolium/src/components/ui/indicator.tsx  |  10 +-
 packages/nicolium/src/components/ui/input.tsx |  52 +-
 .../nicolium/src/components/ui/tag-input.tsx  |  12 +-
 packages/nicolium/src/components/ui/tag.tsx   |   2 +-
 .../nicolium/src/components/ui/toggle.tsx     |  42 +-
 .../nicolium/src/components/ui/tooltip.tsx    |   8 +-
 .../nicolium/src/styles/new/components.scss   | 156 ++++++
 packages/nicolium/src/styles/new/forms.scss   | 493 ++++++++++++++++++
 12 files changed, 683 insertions(+), 143 deletions(-)

diff --git a/packages/nicolium/src/components/ui/checkbox.tsx b/packages/nicolium/src/components/ui/checkbox.tsx
index 252928cbe..14d84f664 100644
--- a/packages/nicolium/src/components/ui/checkbox.tsx
+++ b/packages/nicolium/src/components/ui/checkbox.tsx
@@ -7,12 +7,7 @@ interface ICheckbox extends Pick<
 
 /** A pretty checkbox input. */
 const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => (
-  <input
-    {...props}
-    ref={ref}
-    type='checkbox'
-    className='size-4 rounded border-2 border-gray-300 text-primary-600 focus:ring-primary-500 black:bg-black dark:border-gray-800 dark:bg-gray-900'
-  />
+  <input {...props} ref={ref} type='checkbox' className='⁂-checkbox' />
 ));
 
 Checkbox.displayName = 'Checkbox';
diff --git a/packages/nicolium/src/components/ui/file-input.tsx b/packages/nicolium/src/components/ui/file-input.tsx
index ee09d2b34..21eeeafdc 100644
--- a/packages/nicolium/src/components/ui/file-input.tsx
+++ b/packages/nicolium/src/components/ui/file-input.tsx
@@ -6,12 +6,7 @@ interface IFileInput extends Pick<
 > {}
 
 const FileInput = forwardRef<HTMLInputElement, IFileInput>((props, ref) => (
-  <input
-    {...props}
-    ref={ref}
-    type='file'
-    className='block w-full text-sm text-gray-800 file:mr-2 file:cursor-pointer file:rounded-full file:border file:border-solid file:border-gray-200 file:bg-white file:px-3 file:py-1.5 file:text-xs file:font-medium file:leading-4 file:text-gray-700 hover:file:bg-gray-100 dark:text-gray-200 dark:file:border-gray-800 dark:file:bg-gray-900 dark:file:text-gray-500 dark:file:hover:bg-gray-800'
-  />
+  <input {...props} ref={ref} type='file' className='⁂-file-input' />
 ));
 
 FileInput.displayName = 'FileInput';
diff --git a/packages/nicolium/src/components/ui/form-group.tsx b/packages/nicolium/src/components/ui/form-group.tsx
index b983ad80c..847b429c3 100644
--- a/packages/nicolium/src/components/ui/form-group.tsx
+++ b/packages/nicolium/src/components/ui/form-group.tsx
@@ -46,7 +46,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
             <label
               htmlFor={formFieldId}
               data-testid='form-group-label'
-              className='-mt-0.5 block text-sm font-medium text-gray-900 dark:text-gray-100'
+              className='⁂-form-group__label ⁂-form-group__label--checkbox'
               title={labelTitle}
             >
               {labelText}
@@ -55,10 +55,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
 
           {hasError && (
             <div>
-              <p
-                data-testid='form-group-error'
-                className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
-              >
+              <p data-testid='form-group-error' className='⁂-form-group__error'>
                 {errors.join(', ')}
               </p>
             </div>
@@ -67,7 +64,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
           {hintText && (
             <p
               data-testid='form-group-hint'
-              className='mt-0.5 text-xs text-gray-700 dark:text-gray-600'
+              className='⁂-form-group__hint ⁂-form-group__hint--below'
             >
               {hintText}
             </p>
@@ -83,19 +80,16 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
         <label
           htmlFor={formFieldId}
           data-testid='form-group-label'
-          className='block text-sm font-medium text-gray-900 dark:text-gray-100'
+          className='⁂-form-group__label'
           title={labelTitle}
         >
           {labelText}
         </label>
       )}
 
-      <div className='mt-1 dark:text-white'>
+      <div className='⁂-form-group__content'>
         {hintText && (
-          <p
-            data-testid='form-group-hint'
-            className='mb-0.5 text-xs text-gray-700 dark:text-gray-600'
-          >
+          <p data-testid='form-group-hint' className='⁂-form-group__hint ⁂-form-group__hint--above'>
             {hintText}
           </p>
         )}
@@ -104,10 +98,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
         {inputChildren.filter((_, i) => i !== 0)}
 
         {hasError && (
-          <p
-            data-testid='form-group-error'
-            className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
-          >
+          <p data-testid='form-group-error' className='⁂-form-group__error'>
             {errors.join(', ')}
           </p>
         )}
diff --git a/packages/nicolium/src/components/ui/icon-button.tsx b/packages/nicolium/src/components/ui/icon-button.tsx
index 1b94a6731..f2bb33db8 100644
--- a/packages/nicolium/src/components/ui/icon-button.tsx
+++ b/packages/nicolium/src/components/ui/icon-button.tsx
@@ -30,19 +30,7 @@ const IconButton = React.forwardRef(
       <Component
         ref={ref}
         type='button'
-        className={clsx(
-          '⁂-icon-button flex items-center space-x-2 rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-offset-0',
-          {
-            'bg-white dark:bg-transparent': theme === 'seamless',
-            'border border-solid border-gray-400 bg-transparent text-gray-900 hover:border-primary-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-800 dark:text-gray-100 dark:hover:border-primary-700':
-              theme === 'outlined',
-            'border-transparent bg-primary-100 text-primary-500 hover:bg-primary-50 focus:bg-primary-100 dark:bg-primary-800 dark:text-primary-200 dark:hover:bg-primary-700 dark:focus:bg-primary-800':
-              theme === 'secondary',
-            'bg-gray-900 text-white': theme === 'dark',
-            'opacity-50': filteredProps.disabled,
-          },
-          className,
-        )}
+        className={clsx('⁂-icon-button', `⁂-icon-button--${theme}`, className)}
         {...filteredProps}
         data-testid={filteredProps['data-testid'] ?? 'icon-button'}
         {...(props.href ? { target: '_blank' } : {})}
diff --git a/packages/nicolium/src/components/ui/indicator.tsx b/packages/nicolium/src/components/ui/indicator.tsx
index cc9e71093..ca98566d6 100644
--- a/packages/nicolium/src/components/ui/indicator.tsx
+++ b/packages/nicolium/src/components/ui/indicator.tsx
@@ -8,15 +8,7 @@ interface IIndicator {
 
 /** Indicator dot component. */
 const Indicator: React.FC<IIndicator> = ({ state = 'inactive', size = 'sm' }) => (
-  <div
-    className={clsx('rounded-full outline-double', {
-      'h-1.5 w-1.5 shadow-sm': size === 'sm',
-      'bg-green-500 outline-green-400': state === 'active',
-      'bg-yellow-500 outline-yellow-400': state === 'pending',
-      'bg-red-500 outline-red-400': state === 'error',
-      'bg-neutral-500 outline-neutral-400': state === 'inactive',
-    })}
-  />
+  <div className={clsx('⁂-indicator', `⁂-indicator--${size}`, `⁂-indicator--${state}`)} />
 );
 
 export { Indicator as default };
diff --git a/packages/nicolium/src/components/ui/input.tsx b/packages/nicolium/src/components/ui/input.tsx
index 1bb9b3d25..71a4a85c6 100644
--- a/packages/nicolium/src/components/ui/input.tsx
+++ b/packages/nicolium/src/components/ui/input.tsx
@@ -92,45 +92,26 @@ const Input = React.forwardRef<HTMLInputElement, IInput>((props, ref) => {
   }, []);
 
   return (
-    <div
-      className={clsx('relative', {
-        'rounded-md': theme !== 'search',
-        'rounded-full': theme === 'search',
-        'mt-1': !String(outerClassName).includes('mt-'),
-        [String(outerClassName)]: typeof outerClassName !== 'undefined',
-      })}
-    >
+    <div className={clsx('⁂-input__wrapper', `⁂-input__wrapper--${theme}`, outerClassName)}>
       {icon ? (
-        <div className='pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3'>
-          <Icon src={icon} className='size-4 text-gray-700 dark:text-gray-600' aria-hidden='true' />
+        <div className='⁂-input__wrapper__icon'>
+          <Icon src={icon} aria-hidden='true' />
         </div>
       ) : null}
 
-      {prepend ? (
-        <div className='absolute inset-y-0 left-0 flex items-center'>{prepend}</div>
-      ) : null}
+      {prepend ? <div className='⁂-input__wrapper__prepend'>{prepend}</div> : null}
 
       <input
         {...filteredProps}
         type={revealed ? 'text' : type}
         ref={ref}
         className={clsx(
-          'block w-full text-base placeholder:text-gray-600 focus:border-primary-500 dark:placeholder:text-gray-600 dark:focus:border-primary-500 sm:text-sm',
+          '⁂-input',
+          `⁂-input--${theme}`,
           {
-            'ring-1 focus:ring-primary-500 dark:ring-gray-800 dark:focus:ring-primary-500': [
-              'search',
-              'normal',
-            ].includes(theme),
-            'border-none px-0 !ring-0': theme === 'transparent',
-            'text-gray-900 dark:text-gray-100': !props.disabled,
-            'text-gray-600': props.disabled,
-            'rounded-md border-gray-400 bg-white black:bg-black dark:border-gray-800 dark:bg-gray-900':
-              theme === 'normal',
-            'rounded-full border-gray-200 bg-gray-200 focus:bg-white dark:border-gray-800 dark:bg-gray-900':
-              theme === 'search',
-            'pr-10 rtl:pl-10 rtl:pr-3': isPassword || append,
-            'pl-8': typeof icon !== 'undefined',
-            'pl-16': typeof prepend !== 'undefined',
+            '⁂-input--with-icon': typeof icon !== 'undefined',
+            '⁂-input--with-prepend': typeof prepend !== 'undefined',
+            '⁂-input--with-trailing': isPassword || !!append,
           },
           className,
         )}
@@ -141,11 +122,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>((props, ref) => {
         }
       />
 
-      {append ? (
-        <div className='absolute inset-y-0 right-0 flex items-center px-3 rtl:left-0 rtl:right-auto'>
-          {append}
-        </div>
-      ) : null}
+      {append ? <div className='⁂-input__wrapper__append'>{append}</div> : null}
 
       {isPassword ? (
         <Tooltip
@@ -155,13 +132,8 @@ const Input = React.forwardRef<HTMLInputElement, IInput>((props, ref) => {
               : intl.formatMessage(messages.showPassword)
           }
         >
-          <div className='absolute inset-y-0 right-0 flex items-center rtl:left-0 rtl:right-auto'>
-            <button
-              type='button'
-              onClick={togglePassword}
-              tabIndex={-1}
-              className='h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-primary-500 dark:text-gray-600 dark:hover:text-gray-400'
-            >
+          <div className='⁂-input__wrapper__password-toggle'>
+            <button type='button' onClick={togglePassword} tabIndex={-1}>
               <SvgIcon
                 src={
                   revealed
diff --git a/packages/nicolium/src/components/ui/tag-input.tsx b/packages/nicolium/src/components/ui/tag-input.tsx
index 4bf63e95d..7afca7658 100644
--- a/packages/nicolium/src/components/ui/tag-input.tsx
+++ b/packages/nicolium/src/components/ui/tag-input.tsx
@@ -46,20 +46,16 @@ const TagInput: React.FC<ITagInput> = ({ tags, onChange, placeholder }) => {
   };
 
   return (
-    <div className='relative mt-1 grow shadow-sm'>
-      <HStack
-        className='block w-full rounded-md border-gray-400 bg-white p-2 pb-0 text-gray-900 placeholder:text-gray-600 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm'
-        space={2}
-        wrap
-      >
+    <div className='⁂-tag-input'>
+      <HStack className='⁂-tag-input__list' space={2} wrap>
         {tags.map((tag) => (
-          <div key={tag} className='mb-2'>
+          <div key={tag} className='⁂-tag-input__item'>
             <Tag tag={tag} onDelete={handleTagDelete} />
           </div>
         ))}
 
         <input
-          className='mb-2 h-8 w-32 grow bg-transparent p-1 outline-none'
+          className='⁂-tag-input__field'
           value={input}
           placeholder={placeholder}
           onChange={(e) => {
diff --git a/packages/nicolium/src/components/ui/tag.tsx b/packages/nicolium/src/components/ui/tag.tsx
index 5ee938c44..38d38c0b0 100644
--- a/packages/nicolium/src/components/ui/tag.tsx
+++ b/packages/nicolium/src/components/ui/tag.tsx
@@ -12,7 +12,7 @@ interface ITag {
 
 /** A single editable Tag (used by TagInput). */
 const Tag: React.FC<ITag> = ({ tag, onDelete }) => (
-  <div className='inline-flex items-center whitespace-nowrap rounded bg-primary-500 p-1'>
+  <div className='⁂-tag'>
     <Text theme='white'>{tag}</Text>
 
     <IconButton
diff --git a/packages/nicolium/src/components/ui/toggle.tsx b/packages/nicolium/src/components/ui/toggle.tsx
index dfe301f66..097260d55 100644
--- a/packages/nicolium/src/components/ui/toggle.tsx
+++ b/packages/nicolium/src/components/ui/toggle.tsx
@@ -29,47 +29,13 @@ const Toggle: React.FC<IToggle> = ({
 
   return (
     <button
-      className={clsx(
-        'flex-none rounded-full focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-gray-800 dark:ring-offset-0 dark:focus:ring-primary-500',
-        radio
-          ? {
-              'border-2 p-0.5': true,
-              'border-gray-500': !checked && !disabled,
-              'border-primary-600': checked && !disabled,
-              'border-gray-200': !checked && disabled,
-              'border-primary-200': checked && disabled,
-              'cursor-default': disabled,
-            }
-          : {
-              'bg-gray-500': !checked && !disabled,
-              'bg-primary-600': checked && !disabled,
-              'bg-gray-200': !checked && disabled,
-              'bg-primary-200': checked && disabled,
-              'w-9 p-0.5': size === 'sm',
-              'w-11 p-0.5': size === 'md',
-              'cursor-default': disabled,
-            },
-      )}
+      className={clsx('⁂-toggle', `⁂-toggle--${size}`, {
+        '⁂-toggle--radio': radio,
+      })}
       onClick={handleClick}
       type='button'
     >
-      <div
-        className={
-          radio
-            ? clsx('rounded-full', {
-                'h-3 w-3': size === 'sm',
-                'h-4 w-4': size === 'md',
-                'bg-primary-600': checked && !disabled,
-                'bg-primary-200': checked && disabled,
-              })
-            : clsx('rounded-full bg-white transition-transform', {
-                'h-4.5 w-4.5': size === 'sm',
-                'translate-x-3.5 rtl:-translate-x-3.5': size === 'sm' && checked,
-                'h-6 w-6': size === 'md',
-                'translate-x-4 rtl:-translate-x-4': size === 'md' && checked,
-              })
-        }
-      />
+      <div className={radio ? '⁂-toggle__knob--radio' : '⁂-toggle__knob'} />
 
       <input
         id={id}
diff --git a/packages/nicolium/src/components/ui/tooltip.tsx b/packages/nicolium/src/components/ui/tooltip.tsx
index 08b55dc74..8b147424f 100644
--- a/packages/nicolium/src/components/ui/tooltip.tsx
+++ b/packages/nicolium/src/components/ui/tooltip.tsx
@@ -78,16 +78,12 @@ const Tooltip: React.FC<ITooltip> = (props) => {
               left: x ?? 0,
               ...styles,
             }}
-            className='pointer-events-none z-[100] whitespace-nowrap rounded bg-gray-800 px-2.5 py-1.5 text-xs font-medium text-gray-100 shadow dark:bg-gray-100 dark:text-gray-900'
+            className='⁂-tooltip'
             {...getFloatingProps()}
           >
             {text}
 
-            <FloatingArrow
-              ref={arrowRef}
-              context={context}
-              className='fill-gray-800 dark:fill-gray-100'
-            />
+            <FloatingArrow ref={arrowRef} context={context} className='⁂-tooltip__arrow' />
           </div>
         </FloatingPortal>
       )}
diff --git a/packages/nicolium/src/styles/new/components.scss b/packages/nicolium/src/styles/new/components.scss
index a18f23961..7552754ce 100644
--- a/packages/nicolium/src/styles/new/components.scss
+++ b/packages/nicolium/src/styles/new/components.scss
@@ -1,6 +1,96 @@
 @use 'mixins';
 @use 'variables';
 
+.⁂-icon-button {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 0.5rem;
+  border-radius: 9999px;
+  padding: 0.25rem;
+
+  &:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 2px rgb(var(--color-primary-500)),
+      0 0 0 4px white;
+  }
+
+  &:is(.dark *):focus-visible {
+    box-shadow: 0 0 0 2px rgb(var(--color-primary-500));
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+
+  &--seamless {
+    background-color: white;
+
+    &:is(.dark *) {
+      background-color: transparent;
+    }
+  }
+
+  &--outlined {
+    border: 1px solid rgb(var(--color-gray-400));
+    background-color: transparent;
+    color: rgb(var(--color-gray-900));
+
+    &:hover {
+      border-color: rgb(var(--color-primary-300));
+    }
+
+    &:focus {
+      border-color: rgb(var(--color-primary-500));
+    }
+
+    &:is(.dark *) {
+      border-color: rgb(var(--color-gray-800));
+      color: rgb(var(--color-gray-100));
+
+      &:hover {
+        border-color: rgb(var(--color-primary-700));
+      }
+    }
+  }
+
+  &--secondary {
+    border: 1px solid transparent;
+    background-color: rgb(var(--color-primary-100));
+    color: rgb(var(--color-primary-500));
+
+    &:hover {
+      background-color: rgb(var(--color-primary-50));
+    }
+
+    &:focus {
+      background-color: rgb(var(--color-primary-100));
+    }
+
+    &:is(.dark *) {
+      background-color: rgb(var(--color-primary-800));
+      color: rgb(var(--color-primary-200));
+
+      &:hover {
+        background-color: rgb(var(--color-primary-700));
+      }
+
+      &:focus {
+        background-color: rgb(var(--color-primary-800));
+      }
+    }
+  }
+
+  &--dark {
+    background-color: rgb(var(--color-gray-900));
+    color: white;
+  }
+
+  &--transparent {
+    background-color: transparent;
+  }
+}
+
 .⁂-accordion {
   border-radius: 0.5rem;
   background: white;
@@ -589,3 +679,69 @@ div[data-viewport-type='window']:has(.⁂-empty-message) {
     width: 1rem;
   }
 }
+
+.⁂-tooltip {
+  pointer-events: none;
+  z-index: 100;
+  white-space: nowrap;
+  border-radius: 0.25rem;
+  background-color: rgb(var(--color-gray-800));
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+  color: rgb(var(--color-gray-100));
+  box-shadow:
+    0 1px 3px 0 rgb(0 0 0 / 0.1),
+    0 1px 2px -1px rgb(0 0 0 / 0.1);
+
+  &:is(.dark *) {
+    background-color: rgb(var(--color-gray-100));
+    color: rgb(var(--color-gray-900));
+  }
+
+  &__arrow {
+    fill: rgb(var(--color-gray-800));
+
+    &:is(.dark *) {
+      fill: rgb(var(--color-gray-100));
+    }
+  }
+}
+
+.⁂-indicator {
+  border-radius: 9999px;
+  outline-style: double;
+
+  &--sm {
+    width: 0.375rem;
+    height: 0.375rem;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  }
+
+  &--active {
+    @apply bg-green-500 outline-green-400;
+  }
+
+  &--pending {
+    @apply bg-yellow-500 outline-yellow-400;
+  }
+
+  &--error {
+    @apply bg-red-500 outline-red-400;
+  }
+
+  &--inactive {
+    @apply bg-neutral-500 outline-neutral-400;
+  }
+}
+
+.⁂-tag {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  border-radius: 0.25rem;
+  background-color: rgb(var(--color-primary-500));
+  padding: 0.25rem;
+  color: white;
+}
diff --git a/packages/nicolium/src/styles/new/forms.scss b/packages/nicolium/src/styles/new/forms.scss
index 93e127228..35cc4f7c6 100644
--- a/packages/nicolium/src/styles/new/forms.scss
+++ b/packages/nicolium/src/styles/new/forms.scss
@@ -1,4 +1,5 @@
 @use 'mixins';
+@use 'variables';
 
 .⁂-form {
   display: flex;
@@ -48,3 +49,495 @@
     }
   }
 }
+
+.⁂-input__wrapper {
+  position: relative;
+  margin-top: 0.25rem;
+  border-radius: 0.375rem;
+
+  &--search {
+    border-radius: 9999px;
+  }
+
+  &__icon {
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    inset-inline-start: 0;
+    display: flex;
+    align-items: center;
+    padding-inline-start: 0.75rem;
+
+    svg {
+      width: 1rem;
+      height: 1rem;
+      color: rgb(var(--color-gray-700));
+
+      &:is(.dark *) {
+        color: rgb(var(--color-gray-600));
+      }
+    }
+  }
+
+  &__prepend {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    inset-inline-start: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  &__append {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    inset-inline-end: 0;
+    display: flex;
+    align-items: center;
+    padding-inline: 0.75rem;
+  }
+
+  &__password-toggle {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    inset-inline-end: 0;
+    display: flex;
+    align-items: center;
+
+    button {
+      height: 100%;
+      padding-inline: 0.5rem;
+      color: rgb(var(--color-gray-700));
+
+      &:hover {
+        color: rgb(var(--color-gray-500));
+      }
+
+      &:focus {
+        outline: none;
+        box-shadow: inset 0 0 0 2px rgb(var(--color-primary-500));
+      }
+
+      &:is(.dark *) {
+        color: rgb(var(--color-gray-600));
+
+        &:hover {
+          color: rgb(var(--color-gray-400));
+        }
+      }
+    }
+  }
+}
+
+.⁂-input {
+  display: block;
+  width: 100%;
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+
+  @media (min-width: variables.$breakpoint-sm) {
+    font-size: 0.875rem;
+  }
+
+  &::placeholder {
+    color: rgb(var(--color-gray-600));
+  }
+
+  &:not(:disabled) {
+    color: rgb(var(--color-gray-900));
+
+    &:is(.dark *) {
+      color: rgb(var(--color-gray-100));
+    }
+  }
+
+  &:disabled {
+    color: rgb(var(--color-gray-600));
+  }
+
+  &--normal,
+  &--search {
+    &:focus {
+      border-color: rgb(var(--color-primary-500));
+      box-shadow: 0 0 0 1px rgb(var(--color-primary-500));
+      outline: none;
+    }
+
+    &:is(.dark *) {
+      box-shadow: 0 0 0 1px rgb(var(--color-gray-800));
+
+      &:focus {
+        border-color: rgb(var(--color-primary-500));
+        box-shadow: 0 0 0 1px rgb(var(--color-primary-500));
+      }
+    }
+  }
+
+  &--normal {
+    border-radius: 0.375rem;
+    border: 1px solid rgb(var(--color-gray-400));
+    background-color: white;
+
+    &:is(.dark *) {
+      border-color: rgb(var(--color-gray-800));
+      background-color: rgb(var(--color-gray-900));
+    }
+
+    &:is(.dark.black *) {
+      background-color: black;
+    }
+  }
+
+  &--search {
+    border-radius: 9999px;
+    border: 1px solid rgb(var(--color-gray-200));
+    background-color: rgb(var(--color-gray-200));
+
+    &:focus {
+      background-color: white;
+    }
+
+    &:is(.dark *) {
+      border-color: rgb(var(--color-gray-800));
+      background-color: rgb(var(--color-gray-900));
+    }
+  }
+
+  &--transparent {
+    border: none;
+    padding-inline: 0;
+    box-shadow: none !important;
+  }
+
+  &--with-icon {
+    padding-inline-start: 2rem;
+  }
+
+  &--with-prepend {
+    padding-inline-start: 4rem;
+  }
+
+  &--with-trailing {
+    padding-inline-end: 2.5rem;
+  }
+}
+
+.⁂-form-group {
+  &__label {
+    display: block;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    color: rgb(var(--color-gray-900));
+
+    &:is(.dark *) {
+      color: rgb(var(--color-gray-100));
+    }
+
+    &--checkbox {
+      margin-top: -0.125rem;
+    }
+  }
+
+  &__content {
+    margin-top: 0.25rem;
+  }
+
+  &__hint {
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: rgb(var(--color-gray-700));
+
+    &:is(.dark *) {
+      color: rgb(var(--color-gray-600));
+    }
+
+    &--above {
+      margin-bottom: 0.125rem;
+    }
+
+    &--below {
+      margin-top: 0.125rem;
+    }
+  }
+
+  &__error {
+    position: relative;
+    margin-top: 0.125rem;
+    display: inline-block;
+    border-radius: 0.375rem;
+    background-color: rgb(var(--color-danger-200));
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: rgb(var(--color-danger-900));
+
+    &::before {
+      border-style: solid;
+      border-color: transparent;
+      border-bottom-color: rgb(var(--color-danger-200));
+      border-width: 6px;
+      height: 0;
+      width: 0;
+      left: 0.625rem;
+      margin-inline-start: -1px;
+      pointer-events: none;
+      position: absolute;
+    }
+
+    &::after {
+      border-style: solid;
+      border-color: transparent;
+      height: 0;
+      width: 0;
+      left: 0.625rem;
+      pointer-events: none;
+      position: absolute;
+    }
+  }
+}
+
+.⁂-toggle {
+  flex: none;
+  border-radius: 9999px;
+  padding: 0.125rem;
+
+  &:focus {
+    outline: none;
+    box-shadow:
+      0 0 0 2px rgb(var(--color-primary-500)),
+      0 0 0 4px white;
+
+    &:is(.dark *) {
+      box-shadow: 0 0 0 2px rgb(var(--color-primary-500));
+    }
+  }
+
+  &:has(input:disabled) {
+    cursor: default;
+  }
+
+  &:not(&--radio) {
+    &:not(:has(input:checked), :has(input:disabled)) {
+      background-color: rgb(var(--color-gray-500));
+    }
+
+    &:not(:has(input:checked)):has(input:disabled) {
+      background-color: rgb(var(--color-gray-200));
+    }
+
+    &:has(input:checked):not(:has(input:disabled)) {
+      background-color: rgb(var(--color-primary-600));
+    }
+
+    &:has(input:checked):has(input:disabled) {
+      background-color: rgb(var(--color-primary-200));
+    }
+  }
+
+  &--radio {
+    border: 2px solid;
+
+    &:not(:has(input:checked), :has(input:disabled)) {
+      border-color: rgb(var(--color-gray-500));
+    }
+
+    &:not(:has(input:checked)):has(input:disabled) {
+      border-color: rgb(var(--color-gray-200));
+    }
+
+    &:has(input:checked):not(:has(input:disabled)) {
+      border-color: rgb(var(--color-primary-600));
+    }
+
+    &:has(input:checked):has(input:disabled) {
+      border-color: rgb(var(--color-primary-200));
+    }
+  }
+
+  &--sm {
+    width: 2.25rem;
+
+    .⁂-toggle__knob {
+      width: 1.125rem;
+      height: 1.125rem;
+    }
+
+    .⁂-toggle__knob--radio {
+      width: 0.75rem;
+      height: 0.75rem;
+    }
+  }
+
+  &--md {
+    width: 2.75rem;
+
+    .⁂-toggle__knob {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    .⁂-toggle__knob--radio {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+
+  &--sm:has(input:checked) .⁂-toggle__knob {
+    transform: translateX(0.875rem);
+
+    :is([dir='rtl']) & {
+      transform: translateX(-0.875rem);
+    }
+  }
+
+  &--md:has(input:checked) .⁂-toggle__knob {
+    transform: translateX(1rem);
+
+    :is([dir='rtl']) & {
+      transform: translateX(-1rem);
+    }
+  }
+
+  &__knob {
+    border-radius: 9999px;
+    background-color: white;
+    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &__knob--radio {
+    border-radius: 9999px;
+
+    .⁂-toggle:has(input:checked):not(:has(input:disabled)) & {
+      background-color: rgb(var(--color-primary-600));
+    }
+
+    .⁂-toggle:has(input:checked):has(input:disabled) & {
+      background-color: rgb(var(--color-primary-200));
+    }
+  }
+}
+
+.⁂-checkbox {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 0.25rem;
+  border: 2px solid rgb(var(--color-gray-300));
+  color: rgb(var(--color-primary-600));
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgb(var(--color-primary-500));
+  }
+
+  &:is(.dark *) {
+    border-color: rgb(var(--color-gray-800));
+    background-color: rgb(var(--color-gray-900));
+  }
+
+  &:is(.dark.black *) {
+    background-color: black;
+  }
+}
+
+.⁂-file-input {
+  display: block;
+  width: 100%;
+  font-size: 0.875rem;
+  color: rgb(var(--color-gray-800));
+
+  &:is(.dark *) {
+    color: rgb(var(--color-gray-200));
+  }
+
+  &::file-selector-button {
+    margin-inline-end: 0.5rem;
+    cursor: pointer;
+    border-radius: 9999px;
+    border: 1px solid rgb(var(--color-gray-200));
+    background-color: white;
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1rem;
+    color: rgb(var(--color-gray-700));
+
+    &:hover {
+      background-color: rgb(var(--color-gray-100));
+    }
+
+    &:is(.dark *) {
+      border-color: rgb(var(--color-gray-800));
+      background-color: rgb(var(--color-gray-900));
+      color: rgb(var(--color-gray-500));
+
+      &:hover {
+        background-color: rgb(var(--color-gray-800));
+      }
+    }
+  }
+}
+
+.⁂-tag-input {
+  position: relative;
+  margin-top: 0.25rem;
+  flex-grow: 1;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+  &__list {
+    display: block;
+    width: 100%;
+    border-radius: 0.375rem;
+    border: 1px solid rgb(var(--color-gray-400));
+    background-color: white;
+    padding: 0.5rem;
+    padding-bottom: 0;
+    color: rgb(var(--color-gray-900));
+
+    &::placeholder {
+      color: rgb(var(--color-gray-600));
+    }
+
+    &:focus {
+      border-color: rgb(var(--color-primary-500));
+      box-shadow: 0 0 0 1px rgb(var(--color-primary-500));
+    }
+
+    &:is(.dark *) {
+      border-color: rgb(var(--color-gray-800));
+      background-color: rgb(var(--color-gray-900));
+      color: rgb(var(--color-gray-100));
+      box-shadow: 0 0 0 1px rgb(var(--color-gray-800));
+
+      &::placeholder {
+        color: rgb(var(--color-gray-600));
+      }
+
+      &:focus {
+        border-color: rgb(var(--color-primary-500));
+        box-shadow: 0 0 0 1px rgb(var(--color-primary-500));
+      }
+    }
+
+    @media (min-width: variables.$breakpoint-sm) {
+      font-size: 0.875rem;
+    }
+  }
+
+  &__item {
+    margin-bottom: 0.5rem;
+  }
+
+  &__field {
+    margin-bottom: 0.5rem;
+    height: 2rem;
+    width: 8rem;
+    flex-grow: 1;
+    background-color: transparent;
+    padding: 0.25rem;
+    outline: none;
+  }
+}