@uniai-fe/uds-primitives 0.1.13 → 0.2.0

package/dist/styles.css

@@ -11,123 +11,136 @@
   --theme-badge-line-height: var(--font-caption-medium-line-height, 1.5);
   --theme-badge-letter-spacing: var(--font-caption-medium-letter-spacing, 0);
   --theme-badge-dot-size: var(--spacing-gap-3, 8px);
-  /* spacing */
-  --theme-button-gap-1: var(--spacing-gap-1);
-  --theme-button-gap-2: var(--spacing-gap-2);
-  --theme-button-gap-3: var(--spacing-gap-3);
-  --theme-button-padding-1: var(--spacing-padding-1);
-  --theme-button-padding-2: var(--spacing-padding-2);
-  --theme-button-padding-3: var(--spacing-padding-3);
-  --theme-button-padding-4: var(--spacing-padding-4);
-  --theme-button-padding-5: var(--spacing-padding-5);
-  --theme-button-padding-6: var(--spacing-padding-6);
-  --theme-button-padding-7: var(--spacing-padding-7);
-  --theme-button-padding-9: var(--spacing-padding-9);
-  --theme-button-min-width: var(--theme-size-small-2);
-  --theme-button-text-padding-block: var(--spacing-padding-4, 8px);
-  --theme-button-text-padding-inline-small: var(--spacing-padding-4, 8px);
-  --theme-button-text-padding-inline-medium: var(--spacing-padding-5, 12px);
-  --theme-button-text-padding-inline-large: var(--spacing-padding-5, 12px);
-  --theme-button-text-min-height-small: var(--theme-size-small-1, 20px);
-  --theme-button-text-min-height-medium: var(--theme-size-small-2, 24px);
-  --theme-button-text-min-height-large: var(--theme-size-small-3, 32px);
-  --theme-button-text-radius: var(--theme-radius-small, 4px);
-  --theme-button-round-padding-inline-small: var(--spacing-padding-5, 12px);
-  --theme-button-round-padding-inline-medium: var(--spacing-padding-6, 16px);
-  --theme-button-round-padding-inline-large: var(--spacing-padding-7, 20px);
-  --theme-button-round-padding-block: var(--spacing-padding-2, 4px);
-  --theme-button-round-min-height-small: var(--theme-size-small-2, 24px);
-  --theme-button-round-min-height-medium: var(--theme-size-small-3, 32px);
-  --theme-button-round-min-height-large: var(--theme-size-medium-1, 40px);
-  --theme-button-round-radius-small: var(--theme-radius-xlarge-2, 16px);
-  --theme-button-round-radius-medium: var(--theme-radius-xlarge-2, 16px);
-  --theme-button-round-radius-large: 30px;
-  /* size/radius */
-  --theme-button-size-small-1: var(--theme-size-small-1);
-  --theme-button-size-small-2: var(--theme-size-small-2);
-  --theme-button-size-small-3: var(--theme-size-small-3);
-  --theme-button-size-medium-1: var(--theme-size-medium-1);
-  --theme-button-size-medium-2: var(--theme-size-medium-2);
-  --theme-button-size-medium-3: var(--theme-size-medium-3);
-  --theme-button-radius-medium-1: var(--theme-radius-medium-1);
-  --theme-button-radius-medium-3: var(--theme-radius-medium-3);
-  --theme-button-radius-large-1: var(--theme-radius-large-1);
-  --theme-button-radius-large-2: var(--theme-radius-large-2);
-  --theme-button-radius-small: var(--theme-radius-small);
-  --theme-button-radius-xlarge: var(--theme-radius-xlarge);
+  /* default button spacing (size 기반) */
+  --button-default-gap-small: var(--spacing-gap-1);
+  --button-default-gap-medium: var(--spacing-gap-2);
+  --button-default-gap-large: var(--spacing-gap-3);
+  --button-default-padding-inline-base: var(--spacing-padding-4);
+  --button-default-padding-inline-small: var(--spacing-padding-6);
+  --button-default-padding-inline-medium: var(--spacing-padding-7);
+  --button-default-padding-inline-large: var(--spacing-padding-9);
+  --button-default-padding-block-base: 0px;
+  --button-default-padding-block-small: 0px;
+  --button-default-padding-block-medium: 0px;
+  --button-default-padding-block-large: 0px;
+  /* default button sizing */
+  --button-default-width-min-base: var(--theme-size-small-2);
+  --button-default-height-small: var(--theme-size-small-3, 32px);
+  --button-default-height-medium: var(--theme-size-medium-1, 40px);
+  --button-default-height-large: var(--theme-size-medium-2, 48px);
+  --button-default-height-xlarge: var(--theme-size-medium-3, 56px);
+  --button-default-radius-small: var(--theme-radius-medium-3);
+  --button-default-radius-medium: var(--theme-radius-medium-3);
+  --button-default-radius-large: var(--theme-radius-large-1);
+  --button-default-radius-xlarge: var(--theme-radius-large-2);
+  /* text buttons */
+  --button-text-padding-block-base: var(--spacing-padding-4, 8px);
+  --button-text-padding-inline-small: var(--spacing-padding-4, 8px);
+  --button-text-padding-inline-medium: var(--spacing-padding-5, 12px);
+  --button-text-padding-inline-large: var(--spacing-padding-5, 12px);
+  --button-text-height-small: var(--theme-size-small-1, 20px);
+  --button-text-height-medium: var(--theme-size-small-2, 24px);
+  --button-text-height-large: var(--theme-size-small-3, 32px);
+  --button-text-radius-base: var(--theme-radius-small, 4px);
+  /* round buttons */
+  --button-round-padding-inline-small: var(--spacing-padding-5, 12px);
+  --button-round-padding-inline-medium: var(--spacing-padding-6, 16px);
+  --button-round-padding-inline-large: var(--spacing-padding-7, 20px);
+  --button-round-padding-block-base: var(--spacing-padding-2, 4px);
+  --button-round-height-small: var(--theme-size-small-2, 24px);
+  --button-round-height-medium: var(--theme-size-small-3, 32px);
+  --button-round-height-large: var(--theme-size-medium-1, 40px);
+  --button-round-radius-small: var(--theme-radius-xlarge-2, 16px);
+  --button-round-radius-medium: var(--theme-radius-xlarge-2, 16px);
+  --button-round-radius-large: 30px;
   /* typography */
-  --theme-button-font-body-medium-family: var(--font-body-medium-family);
-  --theme-button-font-body-medium-size: var(--font-body-medium-size);
-  --theme-button-font-body-medium-weight: var(--font-body-medium-weight);
-  --theme-button-font-body-medium-line-height: var(
+  --button-default-font-body-medium-family: var(--font-body-medium-family);
+  --button-default-font-body-medium-size: var(--font-body-medium-size);
+  --button-default-font-body-medium-weight: var(--font-body-medium-weight);
+  --button-default-font-body-medium-line-height: var(
   --font-body-medium-line-height
   );
-  --theme-button-font-body-medium-letter-spacing: var(
+  --button-default-font-body-medium-letter-spacing: var(
   --font-body-medium-letter-spacing
   );
-  --theme-button-font-label-medium-size: var(--font-label-medium-size);
-  --theme-button-font-label-medium-weight: var(--font-label-medium-weight);
-  --theme-button-font-label-medium-line-height: var(
+  --button-default-font-label-medium-size: var(--font-label-medium-size);
+  --button-default-font-label-medium-weight: var(--font-label-medium-weight);
+  --button-default-font-label-medium-line-height: var(
   --font-label-medium-line-height
   );
-  --theme-button-font-label-medium-letter-spacing: var(
+  --button-default-font-label-medium-letter-spacing: var(
   --font-label-medium-letter-spacing
   );
-  --theme-button-font-label-large-size: var(--font-label-large-size);
-  --theme-button-font-label-large-weight: var(--font-label-large-weight);
-  --theme-button-font-label-large-line-height: var(
+  --button-default-font-label-large-size: var(--font-label-large-size);
+  --button-default-font-label-large-weight: var(--font-label-large-weight);
+  --button-default-font-label-large-line-height: var(
   --font-label-large-line-height
   );
-  --theme-button-font-label-large-letter-spacing: var(
+  --button-default-font-label-large-letter-spacing: var(
   --font-label-large-letter-spacing
   );
-  --theme-button-font-body-large-size: var(--font-body-large-size);
-  --theme-button-font-body-large-weight: var(--font-body-large-weight);
-  --theme-button-font-body-large-line-height: var(
+  --button-default-font-body-large-size: var(--font-body-large-size);
+  --button-default-font-body-large-weight: var(--font-body-large-weight);
+  --button-default-font-body-large-line-height: var(
   --font-body-large-line-height
   );
-  --theme-button-font-body-large-letter-spacing: var(
+  --button-default-font-body-large-letter-spacing: var(
   --font-body-large-letter-spacing
   );
-  --theme-button-font-weight: 400;
-  /* colors */
-  --theme-button-color-neutral-base: var(--color-neutral-20);
-  --theme-button-color-common-100: var(--color-common-100);
-  --theme-button-color-primary-default: var(--color-primary-default);
-  --theme-button-color-primary-strong: var(--color-primary-strong);
-  --theme-button-color-primary-heavy: var(--color-primary-heavy);
-  --theme-button-color-secondary-default: var(--color-secondary-default);
-  --theme-button-color-secondary-strong: var(--color-secondary-strong);
-  --theme-button-color-secondary-heavy: var(--color-secondary-heavy);
-  --theme-button-color-tertiary-default: var(--color-tertiary-default);
-  --theme-button-color-tertiary-strong: var(--color-tertiary-strong);
-  --theme-button-color-tertiary-heavy: var(--color-tertiary-heavy);
-  --theme-button-color-blue-90: var(--color-blue-90);
-  --theme-button-color-blue-50: var(--color-blue-50);
-  --theme-button-color-blue-45: var(--color-blue-45);
-  --theme-button-overlay-solid-tertiary-bg: var(--color-surface-strong);
-  /* Confirm dialog cancel 버튼을 위한 solid tertiary 색상 정의 */
-  --theme-button-tertiary-solid-bg: var(--color-surface-neutral);
-  --theme-button-tertiary-solid-hover-bg: var(--color-surface-strong);
-  --theme-button-tertiary-solid-pressed-bg: var(--color-surface-strong);
-  --theme-button-tertiary-solid-foreground: var(--color-label-neutral);
-  --theme-button-secondary-solid-bg: var(--color-blue-95, #e5eeff);
-  --theme-button-secondary-solid-hover-bg: #dbe9ff;
-  --theme-button-secondary-solid-pressed-bg: #ccdeff;
-  --theme-button-color-cool-gray-90: var(--color-cool-gray-90);
-  --theme-button-color-cool-gray-95: var(--color-cool-gray-95);
-  --theme-button-color-cool-gray-10: var(--color-cool-gray-10);
-  --theme-button-color-bg-surface-standard: var(--color-surface-standard);
-  --theme-button-color-bg-alternative-cool-gray: var(
-  --color-bg-alternative-cool-gray
+  --button-default-font-weight: 400;
+  /* default button colors (priority 기반) */
+  --button-default-neutral-foreground: var(--color-neutral-20);
+  --button-default-neutral-disabled-bg: var(--color-surface-standard);
+  --button-default-neutral-disabled-foreground: var(--color-label-disabled);
+  --button-default-primary-solid-bg: var(--color-primary-default);
+  --button-default-primary-solid-hover-bg: var(--color-blue-50);
+  --button-default-primary-solid-active-bg: var(--color-blue-45);
+  --button-default-primary-solid-foreground: var(--color-common-100);
+  --button-default-primary-outline-border: var(--color-primary-default);
+  --button-default-primary-outline-foreground: var(--color-primary-default);
+  --button-default-primary-outline-hover-bg: var(--color-primary-default);
+  --button-default-primary-outline-hover-foreground: var(--color-common-100);
+  --button-default-primary-overlay-outlined-bg: var(--color-blue-90);
+  --button-default-secondary-solid-bg: var(--color-blue-95, #e5eeff);
+  --button-default-secondary-solid-hover-bg: #dbe9ff;
+  --button-default-secondary-solid-active-bg: #ccdeff;
+  --button-default-secondary-solid-foreground: var(--color-primary-default);
+  --button-default-secondary-outline-border: var(--color-cool-gray-90);
+  --button-default-secondary-outline-foreground: var(--color-primary-default);
+  --button-default-secondary-outline-hover-bg: var(--color-blue-90);
+  --button-default-secondary-outline-hover-foreground: var(
+  --color-primary-heavy
+  );
+  --button-default-secondary-overlay-outlined-bg: var(--color-cool-gray-95);
+  --button-default-tertiary-solid-bg: var(--color-surface-neutral);
+  --button-default-tertiary-solid-hover-bg: var(--color-surface-strong);
+  --button-default-tertiary-solid-active-bg: var(--color-surface-strong);
+  --button-default-tertiary-solid-foreground: var(--color-label-neutral);
+  --button-default-tertiary-outline-border: var(--color-cool-gray-90);
+  --button-default-tertiary-outline-foreground: var(--color-cool-gray-10);
+  --button-default-tertiary-outline-hover-bg: var(--color-cool-gray-95);
+  --button-default-tertiary-outline-hover-foreground: var(--color-neutral-20);
+  --button-default-tertiary-overlay-outlined-bg: var(--color-cool-gray-95);
+  --button-default-tertiary-overlay-solid-bg: var(--color-surface-strong);
+  /* text button colors */
+  --button-text-secondary-foreground: var(--color-primary-default);
+  --button-text-secondary-hover-bg: var(
+  --color-bg-alternative-cool-gray,
+  var(--color-cool-gray-95)
+  );
+  --button-text-secondary-pressed-bg: var(
+  --color-secondary-strong,
+  var(--color-blue-90)
+  );
+  --button-text-tertiary-foreground: var(--color-cool-gray-10);
+  --button-text-tertiary-hover-bg: var(
+  --color-bg-alternative-cool-gray,
+  var(--color-cool-gray-95)
+  );
+  --button-text-tertiary-pressed-bg: var(
+  --color-surface-strong,
+  var(--color-cool-gray-20)
   );
-  --theme-button-color-bg-surface-strong: var(--color-surface-strong);
-  --theme-button-color-label-disabled: var(--color-label-disabled);
-  /* overlays */
-  --theme-button-overlay-solid-secondary-bg: var(--color-blue-90);
-  --theme-button-overlay-outlined-primary-bg: var(--color-blue-90);
-  --theme-button-overlay-outlined-secondary-bg: var(--color-cool-gray-95);
-  --theme-button-overlay-outlined-tertiary-bg: var(--color-cool-gray-95);
   --theme-checkbox-frame-size-medium: 20px;
   --theme-checkbox-frame-size-large: 24px;
   --theme-checkbox-indicator-size-medium: 16px;
@@ -177,35 +190,169 @@
   --drawer-handle-bg: var(--color-border-standard-cool-gray);
   --drawer-close-size: 36px;
   --drawer-drag-offset: 0px;
-  --theme-input-height-small: var(--theme-size-medium-1);
-  --theme-input-height-medium: var(--theme-size-medium-2);
-  --theme-input-height-large: var(--theme-size-medium-3);
-  --theme-input-height-tertiary: calc(var(--theme-size-medium-2) + 24px);
-  --theme-input-padding-x: var(--spacing-padding-6);
-  --theme-input-padding-y: var(--spacing-padding-4);
-  --theme-input-gap: var(--spacing-gap-4);
-  --theme-input-radius-default: var(--theme-radius-large-1);
-  --theme-input-radius-tertiary: var(--theme-radius-large-2);
-  --theme-input-label-color: var(--color-label-standard);
-  --theme-input-helper-color: var(--color-label-neutral);
-  --theme-input-helper-success-color: var(--color-success);
-  --theme-input-helper-error-color: var(--color-error);
-  --theme-input-helper-disabled-color: var(--color-label-disabled);
-  --theme-input-label-accent-color: var(--color-primary-default);
-  --theme-input-label-error-color: var(--color-error);
-  --theme-input-placeholder-color: var(--color-label-alternative);
-  --theme-input-text-color: var(--color-label-strong);
-  --theme-input-border-color: var(--color-border-standard-cool-gray);
-  --theme-input-border-width-default: 1px;
-  --theme-input-border-width-emphasis: 1.4px;
-  --theme-input-border-active: #99bdff;
-  --theme-input-border-success: #99bdff;
-  --theme-input-border-error: rgba(218, 29, 11, 0.44);
-  --theme-input-border-disabled: var(--color-border-standard-cool-gray);
-  --theme-input-border-underline-disabled: var(--color-border-assistive);
-  --theme-input-surface: var(--color-common-100);
-  --theme-input-surface-muted: var(--color-neutral-99);
-  --theme-input-surface-disabled: var(--color-neutral-95);
+  --dropdown-panel-background: var(--color-common-100);
+  --dropdown-panel-border-color: var(--color-border-standard-cool-gray);
+  --dropdown-panel-radius: var(--theme-radius-large-1);
+  --dropdown-panel-shadow: 0px 4px 22px rgba(19, 22, 32, 0.12);
+  --dropdown-panel-padding: var(--spacing-padding-3);
+  --dropdown-panel-gap: var(--spacing-gap-2);
+  --dropdown-panel-max-height: 32rem;
+  --dropdown-option-radius: var(--theme-radius-medium-1);
+  --dropdown-option-gap-inline: var(--spacing-gap-3);
+  --dropdown-option-padding-inline: var(--spacing-padding-6);
+  --dropdown-option-padding-block: var(--spacing-padding-2);
+  --dropdown-option-color: var(--color-label-standard);
+  --dropdown-option-color-hover: var(--color-label-strong);
+  --dropdown-option-color-selected: var(--color-primary-default);
+  --dropdown-option-color-disabled: var(--color-label-disabled);
+  --dropdown-option-bg-hover: var(--color-surface-standard);
+  --dropdown-option-bg-selected: var(--color-surface-static-blue);
+  --dropdown-option-bg-disabled: transparent;
+  --dropdown-text-small-size: 15px;
+  --dropdown-text-small-line-height: 24px;
+  --dropdown-text-small-letter-spacing: 0;
+  --dropdown-text-medium-size: 16px;
+  --dropdown-text-medium-line-height: 24px;
+  --dropdown-text-medium-letter-spacing: 0;
+  --dropdown-text-large-size: 17px;
+  --dropdown-text-large-line-height: 26px;
+  --dropdown-text-large-letter-spacing: 0;
+  --dropdown-text-weight: 400;
+  --dropdown-text-weight-selected: 600;
+  --dropdown-description-color: var(--color-label-neutral);
+  --dropdown-description-size: 14px;
+  --dropdown-description-line-height: 22px;
+  --dropdown-option-height-small: 32px;
+  --dropdown-option-height-medium: 40px;
+  --dropdown-option-height-large: 48px;
+  /* Input sizing tokens; Button 변수 규칙과 동일한 prefix 패턴을 맞춘다. */
+  --input-default-height-small: var(--theme-size-medium-1);
+  --input-default-height-medium: var(--theme-size-medium-2);
+  --input-default-height-large: var(--theme-size-medium-3);
+  --input-tertiary-height-base: calc(var(--theme-size-medium-2) + 24px);
+  --input-default-padding-inline: var(--spacing-padding-6);
+  --input-default-padding-block: var(--spacing-padding-4);
+  --input-default-gap: var(--spacing-gap-4);
+  --input-default-radius-base: var(--theme-radius-large-1);
+  --input-tertiary-radius-base: var(--theme-radius-large-2);
+  /* Label/helper colors */
+  --input-label-color: var(--color-label-standard);
+  --input-label-accent-color: var(--color-primary-default);
+  --input-label-error-color: var(--color-error);
+  --input-helper-color: var(--color-label-neutral);
+  --input-helper-success-color: var(--color-success);
+  --input-helper-error-color: var(--color-error);
+  --input-helper-disabled-color: var(--color-label-disabled);
+  /* Text & placeholder colors */
+  --input-text-color: var(--color-label-strong);
+  --input-placeholder-color: var(--color-label-alternative);
+  /* Border tokens */
+  --input-border-color: var(--color-border-standard-cool-gray);
+  --input-border-width-default: 1px;
+  --input-border-width-emphasis: 1.4px;
+  --input-border-active-color: var(--color-blue-80);
+  --input-border-success-color: var(--color-blue-80);
+  /* error는 Figma 44% alpha */
+  --input-border-error-color: rgba(218, 29, 11, 0.44);
+  --input-border-disabled-color: var(--color-border-standard-cool-gray);
+  --input-border-underline-disabled-color: var(--color-border-assistive);
+  /* Surface tokens */
+  --input-surface-color: var(--color-common-100);
+  --input-surface-muted-color: var(--color-neutral-99);
+  --input-surface-disabled-color: var(--color-neutral-95);
+  --select-primary-height-small: var(--input-default-height-small);
+  --select-primary-height-medium: var(--input-default-height-medium);
+  --select-primary-height-large: var(--input-default-height-large);
+  --select-primary-radius-small: var(--input-default-radius-base);
+  --select-primary-radius-medium: var(--input-default-radius-base);
+  --select-primary-radius-large: var(--input-default-radius-base);
+  --select-primary-padding-inline: var(--input-default-padding-inline);
+  --select-primary-padding-block: var(--input-default-padding-block);
+  --select-primary-gap-inline: var(--input-default-gap);
+  --select-primary-border-width-default: var(--input-border-width-default);
+  --select-primary-border-width-focus: var(--input-border-width-emphasis);
+  --select-secondary-radius: var(--theme-radius-medium-1);
+  --select-secondary-padding-inline: var(--spacing-padding-4);
+  --select-secondary-padding-block: var(--spacing-padding-2);
+  --select-secondary-gap: var(--spacing-gap-2);
+  --select-secondary-underline-width-default: 1px;
+  --select-secondary-underline-width-focus: 1.4px;
+  --select-text-small-size: 15px;
+  --select-text-small-line-height: 1.4;
+  --select-text-small-letter-spacing: 0.2px;
+  --select-text-small-weight: 400;
+  --select-text-medium-size: var(--font-body-medium-size);
+  --select-text-medium-line-height: var(--font-body-medium-line-height);
+  --select-text-medium-letter-spacing: 0;
+  --select-text-medium-weight: 400;
+  --select-text-large-size: var(--font-body-large-size);
+  --select-text-large-line-height: var(--font-body-large-line-height);
+  --select-text-large-letter-spacing: 0;
+  --select-text-large-weight: 400;
+  --select-icon-size-small: 1.6rem;
+  --select-icon-size-medium: 2rem;
+  --select-icon-size-large: 2rem;
+  --select-primary-color-placeholder: var(--input-placeholder-color);
+  --select-primary-color-text: var(--color-label-alternative);
+  --select-primary-color-text-focused: var(--color-label-strong);
+  --select-primary-color-text-disabled: var(--color-label-disabled);
+  --select-primary-color-border: var(--input-border-color);
+  --select-primary-color-border-focused: var(--input-border-active-color);
+  --select-primary-color-border-disabled: var(--input-border-disabled-color);
+  --select-color-border-secondary: var(--input-border-color);
+  --select-color-border-secondary-hover: var(--input-border-active-color);
+  --select-color-border-secondary-focused: var(--input-border-active-color);
+  --select-color-border-secondary-disabled: var(
+  --input-border-underline-disabled-color
+  );
+  --select-primary-color-surface-disabled: var(--input-surface-disabled-color);
+  --select-secondary-color-text: var(--color-label-standard);
+  --select-secondary-color-placeholder: var(--color-label-alternative);
+  --select-color-surface-secondary: transparent;
+  --select-color-surface-secondary-hover: var(--color-surface-static-cool-gray);
+  --select-color-surface-secondary-active: var(--color-surface-standard);
+  --select-color-surface-secondary-disabled: var(--color-surface-neutral);
+  --select-icon-color-default: var(--color-cool-gray-75);
+  --select-icon-color-focused: var(--color-cool-gray-20);
+  --select-icon-color-disabled: var(--color-cool-gray-85);
+  /* Multi select chip */
+  --select-multiple-chip-gap: var(--spacing-gap-2);
+  --select-multiple-chip-padding-inline: var(--spacing-padding-4);
+  --select-multiple-chip-padding-block: 0px;
+  --select-multiple-chip-radius: var(--theme-radius-medium-2);
+  --select-multiple-chip-font-size: var(--font-body-small-size);
+  --select-multiple-chip-line-height: var(--font-body-small-line-height);
+  --select-multiple-chip-font-weight: 400;
+  --select-multiple-chip-height: 29px;
+  --select-multiple-chip-color: var(--color-primary-default);
+  --select-multiple-chip-suffix-color: var(--color-label-alternative);
+  --select-multiple-chip-surface: var(--color-surface-static-blue);
+  --select-multiple-chip-border-color: transparent;
+  --select-multiple-chip-remove-color: var(--color-label-strong);
+  --select-multiple-chip-remove-hover-color: var(--color-label-strong);
+  --select-multiple-chip-summary-color: var(--color-label-standard);
+  --select-multiple-chip-summary-surface: var(--color-surface-standard);
+  --select-multiple-chip-summary-border-color: transparent;
+  --select-multiple-chip-summary-padding-inline: var(--spacing-padding-4);
+  --select-multiple-chip-summary-padding-block: var(--spacing-padding-2);
+  --select-multiple-chip-summary-radius: var(--theme-radius-medium-1);
+  --select-multiple-chip-summary-font-size: var(--font-body-medium-size);
+  --select-multiple-chip-summary-line-height: var(
+  --font-body-medium-line-height
+  );
+  --select-multiple-chip-summary-font-weight: 400;
+  --form-field-width: auto;
+  --form-field-flex: 0 0 auto;
+  --form-field-gap-x: var(--spacing-gap-5, 12px);
+  --form-field-gap-y: var(--spacing-gap-3, 6px);
+  --form-field-label-font-size: var(--font-label-small-size);
+  --form-field-label-font-weight: 400;
+  --form-field-label-line-height: var(--font-label-small-line-height);
+  --form-field-label-color: var(--color-label-standard);
+  --form-field-helper-font-size: var(--font-caption-medium-size);
+  --form-field-helper-font-weight: 400;
+  --form-field-helper-line-height: var(--font-caption-medium-line-height);
+  --form-field-helper-color: var(--color-label-neutral);
   --theme-navigation-height: 86px;
   --theme-navigation-padding-inline: 32px;
   --theme-navigation-padding-block-start: 8px;
@@ -485,34 +632,37 @@
   --badge-dot-color: var(--color-red-55, #f43625);
 }
 
-/* 버튼 전용 토큰은 theme root에서 한 번만 정의한다. */
+/* 버튼 전용 토큰은 theme root에서 한 번만 정의하며, size 기반 규칙(--button-{type}-{property}-{size})을 따른다. */
 
 
+/* 버튼 변수 로딩 */
+/* 버튼 관련 CSS 변수는 variables.scss에서 주입된다. */
+/* priority 토큰은 --button-default-{priority}-* 컬러 변수와 연결된다. */
 /* Primitives 버튼 공통 스타일 */
 .button {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px));
+  gap: var(--button-default-gap-medium, var(--spacing-gap-2, 8px));
   width: fit-content;
-  min-width: var(--theme-button-min-width, var(--theme-size-small-2, 24px));
+  min-width: var(--button-default-width-min-base, var(--theme-size-small-2, 24px));
   min-height: var(--button-min-height, auto);
-  padding-inline: var(--button-padding-inline, var(--theme-button-padding-4, var(--spacing-padding-4, 16px)));
-  padding-block: var(--button-padding-block, var(--theme-button-padding-2, var(--spacing-padding-2, 4px)));
-  border-radius: var(--button-border-radius, var(--theme-button-radius-medium-1, var(--theme-radius-medium-1, 8px)));
+  padding-inline: var(--button-padding-inline, var(--button-default-padding-inline-base, var(--spacing-padding-4, 16px)));
+  padding-block: 0;
+  border-radius: var(--button-border-radius, var(--button-default-radius-medium, var(--theme-radius-medium-1, 8px)));
   border: 1px solid transparent;
   background-color: transparent;
-  color: var(--theme-button-color-neutral-base, var(--color-neutral-20));
+  color: var(--button-default-neutral-foreground, var(--color-neutral-20));
   box-shadow: none;
   filter: none;
   cursor: pointer;
 }
 .button span {
-  font-family: var(--font-caption-medium-family, var(--theme-button-font-body-medium-family, var(--font-body-medium-family, "Pretendard")));
-  font-size: var(--font-caption-medium-size, var(--theme-button-font-body-medium-size, var(--font-body-medium-size, 16px)));
-  font-weight: var(--font-caption-medium-weight, var(--theme-button-font-weight, 400));
-  line-height: var(--font-caption-medium-line-height, var(--theme-button-font-body-medium-line-height, var(--font-body-medium-line-height, 24px)));
-  letter-spacing: var(--font-caption-medium-letter-spacing, var(--theme-button-font-body-medium-letter-spacing, var(--font-body-medium-letter-spacing, 0px)));
+  font-family: var(--font-caption-medium-family, var(--button-default-font-body-medium-family, var(--font-body-medium-family, "Pretendard")));
+  font-size: var(--font-caption-medium-size, var(--button-default-font-body-medium-size, var(--font-body-medium-size, 16px)));
+  font-weight: var(--font-caption-medium-weight, var(--button-default-font-weight, 400));
+  line-height: var(--font-caption-medium-line-height, var(--button-default-font-body-medium-line-height, var(--font-body-medium-line-height, 24px)));
+  letter-spacing: var(--font-caption-medium-letter-spacing, var(--button-default-font-body-medium-letter-spacing, var(--font-body-medium-letter-spacing, 0px)));
 }
 .button .button-icon,
 .button .button-label,
@@ -527,312 +677,312 @@
 }
 .button:not(.button-fill-solid):not(.button-fill-outlined) {
   background-color: transparent;
-  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
-  color: var(--theme-button-color-cool-gray-10, var(--color-cool-gray-10));
+  border-color: var(--button-default-tertiary-outline-border, var(--color-cool-gray-90));
+  color: var(--button-default-tertiary-outline-foreground, var(--color-cool-gray-10));
 }
 .button:not(.button-fill-solid):not(.button-fill-outlined):hover:not(:disabled):not([aria-disabled=true]), .button:not(.button-fill-solid):not(.button-fill-outlined)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-color-cool-gray-95, var(--color-cool-gray-95));
-  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
+  background-color: var(--button-default-tertiary-outline-hover-bg, var(--color-cool-gray-95));
+  border-color: var(--button-default-tertiary-outline-border, var(--color-cool-gray-90));
 }
 .button:not(.button-fill-solid):not(.button-fill-outlined):active:not(:disabled):not([aria-disabled=true]), .button:not(.button-fill-solid):not(.button-fill-outlined)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
-  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
+  background-color: var(--button-default-tertiary-solid-bg, var(--color-surface-neutral));
+  border-color: var(--button-default-tertiary-outline-border, var(--color-cool-gray-90));
 }
 .button:where([aria-busy=true]) {
   pointer-events: none;
   cursor: progress;
 }
 .button:where(.button-fill-solid.button-priority-primary) {
-  background-color: var(--theme-button-color-primary-default, var(--color-primary-default));
-  border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
-  color: var(--theme-button-color-common-100, var(--color-common-100));
+  background-color: var(--button-default-primary-solid-bg, var(--color-primary-default));
+  border-color: var(--button-default-primary-solid-bg, var(--color-primary-default));
+  color: var(--button-default-primary-solid-foreground, var(--color-common-100));
 }
 .button:where(.button-fill-solid.button-priority-primary):disabled, .button:where(.button-fill-solid.button-priority-primary)[aria-disabled=true] {
-  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
-  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
-  color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
+  background-color: var(--button-default-neutral-disabled-bg, var(--color-surface-standard));
+  border-color: var(--button-default-neutral-disabled-bg, var(--color-surface-standard));
+  color: var(--button-default-neutral-disabled-foreground, var(--color-label-disabled));
 }
 .button:where(.button-fill-solid.button-priority-primary):hover:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-solid.button-priority-primary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-color-blue-50, var(--color-blue-50));
-  border-color: var(--theme-button-color-blue-50, var(--color-blue-50));
+  background-color: var(--button-default-primary-solid-hover-bg, var(--color-blue-50));
+  border-color: var(--button-default-primary-solid-hover-bg, var(--color-blue-50));
 }
 .button:where(.button-fill-solid.button-priority-primary):active:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-solid.button-priority-primary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-color-blue-45, var(--color-blue-45));
-  border-color: var(--theme-button-color-blue-45, var(--color-blue-45));
+  background-color: var(--button-default-primary-solid-active-bg, var(--color-blue-45));
+  border-color: var(--button-default-primary-solid-active-bg, var(--color-blue-45));
 }
 .button:where(.button-fill-outlined.button-priority-primary) {
   background-color: transparent;
-  color: var(--theme-button-color-primary-default, var(--color-primary-default));
-  border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
+  color: var(--button-default-primary-outline-foreground, var(--color-primary-default));
+  border-color: var(--button-default-primary-outline-border, var(--color-primary-default));
 }
 .button:where(.button-fill-outlined.button-priority-primary):disabled, .button:where(.button-fill-outlined.button-priority-primary)[aria-disabled=true] {
-  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
-  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
-  color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
+  background-color: var(--button-default-neutral-disabled-bg, var(--color-surface-standard));
+  border-color: var(--button-default-neutral-disabled-bg, var(--color-surface-standard));
+  color: var(--button-default-neutral-disabled-foreground, var(--color-label-disabled));
 }
 .button:where(.button-fill-outlined.button-priority-primary):hover:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-primary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-color-primary-default, var(--color-primary-default));
-  border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
+  background-color: var(--button-default-primary-outline-hover-bg, var(--color-primary-default));
+  border-color: var(--button-default-primary-outline-border, var(--color-primary-default));
 }
 .button:where(.button-fill-outlined.button-priority-primary):active:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-primary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-color-primary-default, var(--color-primary-default));
-  border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
+  background-color: var(--button-default-primary-solid-bg, var(--color-primary-default));
+  border-color: var(--button-default-primary-outline-border, var(--color-primary-default));
 }
 .button:where(.button-fill-solid.button-priority-secondary) {
-  background-color: var(--theme-button-secondary-solid-bg, var(--color-blue-95, #e5eeff));
-  border-color: var(--theme-button-secondary-solid-bg, var(--color-blue-95, #e5eeff));
-  color: var(--theme-button-color-primary-default, var(--color-primary-default));
+  background-color: var(--button-default-secondary-solid-bg, var(--color-blue-95, #e5eeff));
+  border-color: var(--button-default-secondary-solid-bg, var(--color-blue-95, #e5eeff));
+  color: var(--button-default-secondary-solid-foreground, var(--color-primary-default));
 }
 .button:where(.button-fill-solid.button-priority-secondary):disabled, .button:where(.button-fill-solid.button-priority-secondary)[aria-disabled=true] {
-  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
-  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
-  color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
+  background-color: var(--button-default-neutral-disabled-bg, var(--color-surface-standard));
+  border-color: var(--button-default-neutral-disabled-bg, var(--color-surface-standard));
+  color: var(--button-default-neutral-disabled-foreground, var(--color-label-disabled));
 }
 .button:where(.button-fill-solid.button-priority-secondary):hover:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-solid.button-priority-secondary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-secondary-solid-hover-bg, #dbe9ff);
-  border-color: var(--theme-button-secondary-solid-hover-bg, #dbe9ff);
+  background-color: var(--button-default-secondary-solid-hover-bg, #dbe9ff);
+  border-color: var(--button-default-secondary-solid-hover-bg, #dbe9ff);
 }
 .button:where(.button-fill-solid.button-priority-secondary):active:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-solid.button-priority-secondary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-secondary-solid-pressed-bg, #ccdeff);
-  border-color: var(--theme-button-secondary-solid-pressed-bg, #ccdeff);
+  background-color: var(--button-default-secondary-solid-active-bg, #ccdeff);
+  border-color: var(--button-default-secondary-solid-active-bg, #ccdeff);
 }
 .button:where(.button-fill-outlined.button-priority-secondary) {
   background-color: transparent;
-  color: var(--theme-button-color-primary-default, var(--color-primary-default));
-  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
+  color: var(--button-default-secondary-outline-foreground, var(--color-primary-default));
+  border-color: var(--button-default-secondary-outline-border, var(--color-cool-gray-90));
 }
 .button:where(.button-fill-outlined.button-priority-secondary):disabled, .button:where(.button-fill-outlined.button-priority-secondary)[aria-disabled=true] {
-  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
-  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
-  color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
+  background-color: var(--button-default-neutral-disabled-bg, var(--color-surface-standard));
+  border-color: var(--button-default-neutral-disabled-bg, var(--color-surface-standard));
+  color: var(--button-default-neutral-disabled-foreground, var(--color-label-disabled));
 }
 .button:where(.button-fill-outlined.button-priority-secondary):hover:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-secondary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-color-blue-90, var(--color-blue-90));
-  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
+  background-color: var(--button-default-secondary-outline-hover-bg, var(--color-blue-90));
+  border-color: var(--button-default-secondary-outline-border, var(--color-cool-gray-90));
 }
 .button:where(.button-fill-outlined.button-priority-secondary):active:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-secondary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-secondary-solid-bg, var(--color-blue-95, #e5eeff));
-  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
+  background-color: var(--button-default-secondary-solid-bg, var(--color-blue-95, #e5eeff));
+  border-color: var(--button-default-secondary-outline-border, var(--color-cool-gray-90));
 }
 .button:where(.button-fill-solid.button-priority-tertiary) {
-  background-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
-  border-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
-  color: var(--theme-button-tertiary-solid-foreground, var(--color-label-neutral));
+  background-color: var(--button-default-tertiary-solid-bg, var(--color-surface-neutral));
+  border-color: var(--button-default-tertiary-solid-bg, var(--color-surface-neutral));
+  color: var(--button-default-tertiary-solid-foreground, var(--color-label-neutral));
 }
 .button:where(.button-fill-solid.button-priority-tertiary):disabled, .button:where(.button-fill-solid.button-priority-tertiary)[aria-disabled=true] {
-  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
-  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
-  color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
+  background-color: var(--button-default-neutral-disabled-bg, var(--color-surface-standard));
+  border-color: var(--button-default-neutral-disabled-bg, var(--color-surface-standard));
+  color: var(--button-default-neutral-disabled-foreground, var(--color-label-disabled));
 }
 .button:where(.button-fill-solid.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-solid.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-tertiary-solid-hover-bg, var(--color-surface-static-cool-gray));
-  border-color: var(--theme-button-tertiary-solid-hover-bg, var(--color-surface-static-cool-gray));
+  background-color: var(--button-default-tertiary-solid-hover-bg, var(--color-surface-static-cool-gray));
+  border-color: var(--button-default-tertiary-solid-hover-bg, var(--color-surface-static-cool-gray));
 }
 .button:where(.button-fill-solid.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-solid.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-tertiary-solid-pressed-bg, var(--color-surface-strong));
-  border-color: var(--theme-button-tertiary-solid-pressed-bg, var(--color-surface-strong));
+  background-color: var(--button-default-tertiary-solid-active-bg, var(--color-surface-strong));
+  border-color: var(--button-default-tertiary-solid-active-bg, var(--color-surface-strong));
 }
 .button:where(.button-fill-outlined.button-priority-tertiary) {
   background-color: transparent;
-  color: var(--theme-button-color-cool-gray-10, var(--color-cool-gray-10));
-  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
+  color: var(--button-default-tertiary-outline-foreground, var(--color-cool-gray-10));
+  border-color: var(--button-default-tertiary-outline-border, var(--color-cool-gray-90));
 }
 .button:where(.button-fill-outlined.button-priority-tertiary):disabled, .button:where(.button-fill-outlined.button-priority-tertiary)[aria-disabled=true] {
-  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
-  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
-  color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
+  background-color: var(--button-default-neutral-disabled-bg, var(--color-surface-standard));
+  border-color: var(--button-default-neutral-disabled-bg, var(--color-surface-standard));
+  color: var(--button-default-neutral-disabled-foreground, var(--color-label-disabled));
 }
 .button:where(.button-fill-outlined.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-color-cool-gray-95, var(--color-cool-gray-95));
-  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
+  background-color: var(--button-default-tertiary-outline-hover-bg, var(--color-cool-gray-95));
+  border-color: var(--button-default-tertiary-outline-border, var(--color-cool-gray-90));
 }
 .button:where(.button-fill-outlined.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
-  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
+  background-color: var(--button-default-tertiary-solid-bg, var(--color-surface-neutral));
+  border-color: var(--button-default-tertiary-outline-border, var(--color-cool-gray-90));
 }
 .button:where(.button-size-small) {
-  padding-inline: var(--theme-button-padding-6, var(--spacing-padding-6, 24px));
-  gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px));
-  padding-block: var(--theme-button-padding-2, var(--spacing-padding-2, 4px));
-  min-height: var(--theme-button-size-small-3, var(--theme-size-small-3, 32px));
-  border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
+  padding-inline: var(--button-default-padding-inline-small, var(--spacing-padding-6, 24px));
+  gap: var(--button-default-gap-medium, var(--spacing-gap-2, 8px));
+  padding-block: 0;
+  min-height: var(--button-default-height-small, var(--theme-size-small-3, 32px));
+  border-radius: var(--button-default-radius-small, var(--theme-radius-medium-3, 8px));
 }
 .button:where(.button-size-small) span {
-  font-size: var(--theme-button-font-label-medium-size, var(--font-label-medium-size, 14px));
-  font-weight: var(--theme-button-font-weight, 400);
-  line-height: var(--theme-button-font-label-medium-line-height, var(--font-label-medium-line-height, 1.5em));
-  letter-spacing: var(--theme-button-font-label-medium-letter-spacing, var(--font-label-medium-letter-spacing, 0px));
+  font-size: var(--button-default-font-label-medium-size, var(--font-label-medium-size, 14px));
+  font-weight: var(--button-default-font-weight, 400);
+  line-height: var(--button-default-font-label-medium-line-height, var(--font-label-medium-line-height, 1.5em));
+  letter-spacing: var(--button-default-font-label-medium-letter-spacing, var(--font-label-medium-letter-spacing, 0px));
 }
 .button:where(.button-size-medium) {
-  padding-inline: var(--theme-button-padding-7, var(--spacing-padding-7, 20px));
-  gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px));
-  padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px));
-  min-height: var(--theme-button-size-medium-1, var(--theme-size-medium-1, 40px));
-  border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
+  padding-inline: var(--button-default-padding-inline-medium, var(--spacing-padding-7, 20px));
+  gap: var(--button-default-gap-medium, var(--spacing-gap-2, 8px));
+  padding-block: 0;
+  min-height: var(--button-default-height-medium, var(--theme-size-medium-1, 40px));
+  border-radius: var(--button-default-radius-small, var(--theme-radius-medium-3, 8px));
 }
 .button:where(.button-size-medium) span {
-  font-size: var(--theme-button-font-label-large-size, var(--font-label-large-size, 16px));
-  font-weight: var(--theme-button-font-weight, 400);
-  line-height: var(--theme-button-font-label-large-line-height, var(--font-label-large-line-height, 1.5em));
-  letter-spacing: var(--theme-button-font-label-large-letter-spacing, var(--font-label-large-letter-spacing, 0px));
+  font-size: var(--button-default-font-label-large-size, var(--font-label-large-size, 16px));
+  font-weight: var(--button-default-font-weight, 400);
+  line-height: var(--button-default-font-label-large-line-height, var(--font-label-large-line-height, 1.5em));
+  letter-spacing: var(--button-default-font-label-large-letter-spacing, var(--font-label-large-letter-spacing, 0px));
 }
 .button:where(.button-size-large) {
-  padding-inline: var(--theme-button-padding-9, var(--spacing-padding-9, 28px));
-  gap: var(--theme-button-gap-3, var(--spacing-gap-3, 12px));
-  padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px));
-  min-height: var(--theme-button-size-medium-2, var(--theme-size-medium-2, 48px));
-  border-radius: var(--theme-button-radius-large-1, var(--theme-radius-large-1, 12px));
+  padding-inline: var(--button-default-padding-inline-large, var(--spacing-padding-9, 28px));
+  gap: var(--button-default-gap-large, var(--spacing-gap-3, 12px));
+  padding-block: 0;
+  min-height: var(--button-default-height-large, var(--theme-size-medium-2, 48px));
+  border-radius: var(--button-default-radius-large, var(--theme-radius-large-1, 12px));
 }
 .button:where(.button-size-large) span {
-  font-size: var(--theme-button-font-body-medium-size, var(--font-body-medium-size, 17px));
-  font-weight: var(--theme-button-font-weight, 400);
-  line-height: var(--theme-button-font-body-medium-line-height, var(--font-body-medium-line-height, 1.5em));
-  letter-spacing: var(--theme-button-font-body-medium-letter-spacing, var(--font-body-medium-letter-spacing, 0px));
+  font-size: var(--button-default-font-body-medium-size, var(--font-body-medium-size, 17px));
+  font-weight: var(--button-default-font-weight, 400);
+  line-height: var(--button-default-font-body-medium-line-height, var(--font-body-medium-line-height, 1.5em));
+  letter-spacing: var(--button-default-font-body-medium-letter-spacing, var(--font-body-medium-letter-spacing, 0px));
 }
 .button:where(.button-size-xlarge) {
-  padding-inline: var(--theme-button-padding-9, var(--spacing-padding-9, 28px));
-  gap: var(--theme-button-gap-3, var(--spacing-gap-3, 12px));
-  padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px));
-  min-height: var(--theme-button-size-medium-3, var(--theme-size-medium-3, 56px));
-  border-radius: var(--theme-button-radius-large-2, var(--theme-radius-large-2, 16px));
+  padding-inline: var(--button-default-padding-inline-large, var(--spacing-padding-9, 28px));
+  gap: var(--button-default-gap-large, var(--spacing-gap-3, 12px));
+  padding-block: 0;
+  min-height: var(--button-default-height-xlarge, var(--theme-size-medium-3, 56px));
+  border-radius: var(--button-default-radius-xlarge, var(--theme-radius-large-2, 16px));
 }
 .button:where(.button-size-xlarge) span {
-  font-size: var(--theme-button-font-body-large-size, var(--font-body-large-size, 19px));
-  font-weight: var(--theme-button-font-weight, 400);
-  line-height: var(--theme-button-font-body-large-line-height, var(--font-body-large-line-height, 1.5em));
-  letter-spacing: var(--theme-button-font-body-large-letter-spacing, var(--font-body-large-letter-spacing, 0px));
+  font-size: var(--button-default-font-body-large-size, var(--font-body-large-size, 19px));
+  font-weight: var(--button-default-font-weight, 400);
+  line-height: var(--button-default-font-body-large-line-height, var(--font-body-large-line-height, 1.5em));
+  letter-spacing: var(--button-default-font-body-large-letter-spacing, var(--font-body-large-letter-spacing, 0px));
 }
 .button:where(.button-fill-outlined) {
   box-shadow: none;
 }
 .button :where(.button-fill-solid.button-priority-secondary):hover:not(:disabled):not([aria-disabled=true]), .button :where(.button-fill-solid.button-priority-secondary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-secondary-solid-hover-bg, #dbe9ff);
-  border-color: var(--theme-button-secondary-solid-hover-bg, #dbe9ff);
+  background-color: var(--button-default-secondary-solid-hover-bg, #dbe9ff);
+  border-color: var(--button-default-secondary-solid-hover-bg, #dbe9ff);
   box-shadow: none;
 }
 .button :where(.button-fill-solid.button-priority-secondary):active:not(:disabled):not([aria-disabled=true]), .button :where(.button-fill-solid.button-priority-secondary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-secondary-solid-pressed-bg, #ccdeff);
-  border-color: var(--theme-button-secondary-solid-pressed-bg, #ccdeff);
+  background-color: var(--button-default-secondary-solid-active-bg, #ccdeff);
+  border-color: var(--button-default-secondary-solid-active-bg, #ccdeff);
   box-shadow: none;
 }
 .button:where(.button-fill-solid.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-solid.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--color-border-strong, var(--color-surface-strong));
-  border-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
+  background-color: var(--button-default-tertiary-overlay-solid-bg, var(--color-surface-strong));
+  border-color: var(--button-default-tertiary-solid-bg, var(--color-surface-neutral));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
 }
 .button:where(.button-fill-solid.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-solid.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--color-border-strong, var(--color-surface-strong));
-  border-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
+  background-color: var(--button-default-tertiary-overlay-solid-bg, var(--color-surface-strong));
+  border-color: var(--button-default-tertiary-solid-bg, var(--color-surface-neutral));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.48);
 }
 .button:where(.button-fill-outlined.button-priority-primary):hover:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-primary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-overlay-outlined-primary-bg, var(--color-blue-90));
-  border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
+  background-color: var(--button-default-primary-overlay-outlined-bg, var(--color-blue-90));
+  border-color: var(--button-default-primary-outline-border, var(--color-primary-default));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
 }
 .button:where(.button-fill-outlined.button-priority-primary):active:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-primary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-overlay-outlined-primary-bg, var(--color-blue-90));
-  border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
+  background-color: var(--button-default-primary-overlay-outlined-bg, var(--color-blue-90));
+  border-color: var(--button-default-primary-outline-border, var(--color-primary-default));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.28);
 }
 .button:where(.button-fill-outlined.button-priority-secondary):hover:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-secondary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-overlay-outlined-secondary-bg, var(--color-cool-gray-95));
-  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
+  background-color: var(--button-default-secondary-overlay-outlined-bg, var(--color-cool-gray-95));
+  border-color: var(--button-default-secondary-outline-border, var(--color-cool-gray-90));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
 }
 .button:where(.button-fill-outlined.button-priority-secondary):active:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-secondary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-overlay-outlined-secondary-bg, var(--color-cool-gray-95));
-  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
+  background-color: var(--button-default-secondary-overlay-outlined-bg, var(--color-cool-gray-95));
+  border-color: var(--button-default-secondary-outline-border, var(--color-cool-gray-90));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.28);
 }
 .button:where(.button-fill-outlined.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-overlay-outlined-tertiary-bg, var(--color-cool-gray-95));
-  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
+  background-color: var(--button-default-tertiary-overlay-outlined-bg, var(--color-cool-gray-95));
+  border-color: var(--button-default-tertiary-outline-border, var(--color-cool-gray-90));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
 }
 .button:where(.button-fill-outlined.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-overlay-outlined-tertiary-bg, var(--color-cool-gray-95));
-  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
+  background-color: var(--button-default-tertiary-overlay-outlined-bg, var(--color-cool-gray-95));
+  border-color: var(--button-default-tertiary-outline-border, var(--color-cool-gray-90));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.28);
 }
 .button:where(:disabled), .button:where([aria-disabled=true]) {
-  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
-  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
-  color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
+  background-color: var(--button-default-neutral-disabled-bg, var(--color-surface-standard));
+  border-color: var(--button-default-neutral-disabled-bg, var(--color-surface-standard));
+  color: var(--button-default-neutral-disabled-foreground, var(--color-label-disabled));
   cursor: not-allowed;
 }
 .button:where(.button-icon-left) .button-label {
-  margin-left: var(--theme-button-gap-1, var(--spacing-gap-1, 4px));
+  margin-left: var(--button-default-gap-small, var(--spacing-gap-1, 4px));
 }
 .button:where(.button-icon-right) .button-label {
-  margin-right: var(--theme-button-gap-1, var(--spacing-gap-1, 4px));
+  margin-right: var(--button-default-gap-small, var(--spacing-gap-1, 4px));
 }
 
 .button:where(.button-template-text) {
   min-width: auto;
   border-color: transparent;
   background-color: transparent;
-  padding-block: var(--theme-button-text-padding-block, var(--spacing-padding-4, 8px));
-  padding-inline: var(--theme-button-text-padding-inline-small, var(--spacing-padding-4, 8px));
+  padding-block: var(--button-text-padding-block-base, var(--spacing-padding-4, 8px));
+  padding-inline: var(--button-text-padding-inline-small, var(--spacing-padding-4, 8px));
   border-width: 0;
   gap: var(--spacing-gap-1, 4px);
-  border-radius: var(--theme-button-text-radius, var(--theme-radius-small, 4px));
+  border-radius: var(--button-text-radius-base, var(--theme-radius-small, 4px));
 }
 .button:where(.button-template-text-size-small) {
-  min-height: var(--theme-button-text-min-height-small, var(--theme-size-small-1, 20px));
-  padding-inline: var(--theme-button-text-padding-inline-small, var(--spacing-padding-4, 8px));
+  min-height: var(--button-text-height-small, var(--theme-size-small-1, 20px));
+  padding-inline: var(--button-text-padding-inline-small, var(--spacing-padding-4, 8px));
 }
 .button:where(.button-template-text-size-medium) {
-  min-height: var(--theme-button-text-min-height-medium, var(--theme-size-small-2, 24px));
-  padding-inline: var(--theme-button-text-padding-inline-medium, var(--spacing-padding-5, 12px));
+  min-height: var(--button-text-height-medium, var(--theme-size-small-2, 24px));
+  padding-inline: var(--button-text-padding-inline-medium, var(--spacing-padding-5, 12px));
 }
 .button:where(.button-template-text-size-large) {
-  min-height: var(--theme-button-text-min-height-large, var(--theme-size-small-3, 32px));
-  padding-inline: var(--theme-button-text-padding-inline-large, var(--spacing-padding-5, 12px));
+  min-height: var(--button-text-height-large, var(--theme-size-small-3, 32px));
+  padding-inline: var(--button-text-padding-inline-large, var(--spacing-padding-5, 12px));
 }
 .button:where(.button-template-text:disabled) {
   background-color: transparent;
   border-color: transparent;
 }
 .button:where(.button-template-text.button-priority-secondary) {
-  color: var(--theme-button-color-primary-default, var(--color-primary-default));
+  color: var(--button-text-secondary-foreground, var(--color-primary-default));
 }
 .button:where(.button-template-text.button-priority-secondary):hover:not(:disabled), .button:where(.button-template-text.button-priority-secondary)[data-user-action=hover]:not(:disabled) {
-  background-color: var(--color-bg-alternative-cool-gray, var(--color-cool-gray-95));
+  background-color: var(--button-text-secondary-hover-bg, var(--color-bg-alternative-cool-gray, var(--color-cool-gray-95)));
 }
 .button:where(.button-template-text.button-priority-secondary):active:not(:disabled), .button:where(.button-template-text.button-priority-secondary)[data-user-action=pressed]:not(:disabled) {
-  background-color: var(--color-secondary-strong, var(--color-blue-90));
+  background-color: var(--button-text-secondary-pressed-bg, var(--color-secondary-strong, var(--color-blue-90)));
 }
 .button:where(.button-template-text.button-priority-tertiary) {
-  color: var(--theme-button-color-cool-gray-10, var(--color-cool-gray-10));
+  color: var(--button-text-tertiary-foreground, var(--color-cool-gray-10));
 }
 .button:where(.button-template-text.button-priority-tertiary):hover:not(:disabled), .button:where(.button-template-text.button-priority-tertiary)[data-user-action=hover]:not(:disabled) {
-  background-color: var(--color-bg-alternative-cool-gray, var(--color-cool-gray-95));
+  background-color: var(--button-text-tertiary-hover-bg, var(--color-bg-alternative-cool-gray, var(--color-cool-gray-95)));
 }
 .button:where(.button-template-text.button-priority-tertiary):active:not(:disabled), .button:where(.button-template-text.button-priority-tertiary)[data-user-action=pressed]:not(:disabled) {
-  background-color: var(--color-surface-strong, var(--color-cool-gray-20));
+  background-color: var(--button-text-tertiary-pressed-bg, var(--color-surface-strong, var(--color-cool-gray-20)));
 }
 
 .button:where(.button-template-round) {
   min-width: auto;
-  padding-block: var(--theme-button-round-padding-block, var(--spacing-padding-2, 4px));
-  padding-inline: var(--theme-button-round-padding-inline-medium, var(--spacing-padding-6, 16px));
+  padding-block: var(--button-round-padding-block-base, var(--spacing-padding-2, 4px));
+  padding-inline: var(--button-round-padding-inline-medium, var(--spacing-padding-6, 16px));
   gap: var(--spacing-gap-2, 8px);
 }
 .button:where(.button-template-round-size-small) {
-  min-height: var(--theme-button-round-min-height-small, var(--theme-size-small-2, 24px));
-  padding-inline: var(--theme-button-round-padding-inline-small, var(--spacing-padding-5, 12px));
-  border-radius: var(--theme-button-round-radius-small, var(--theme-radius-xlarge-2, 16px));
+  min-height: var(--button-round-height-small, var(--theme-size-small-2, 24px));
+  padding-inline: var(--button-round-padding-inline-small, var(--spacing-padding-5, 12px));
+  border-radius: var(--button-round-radius-small, var(--theme-radius-xlarge-2, 16px));
 }
 .button:where(.button-template-round-size-medium) {
-  min-height: var(--theme-button-round-min-height-medium, var(--theme-size-small-3, 32px));
-  padding-inline: var(--theme-button-round-padding-inline-medium, var(--spacing-padding-6, 16px));
-  border-radius: var(--theme-button-round-radius-medium, var(--theme-radius-xlarge-2, 16px));
+  min-height: var(--button-round-height-medium, var(--theme-size-small-3, 32px));
+  padding-inline: var(--button-round-padding-inline-medium, var(--spacing-padding-6, 16px));
+  border-radius: var(--button-round-radius-medium, var(--theme-radius-xlarge-2, 16px));
 }
 .button:where(.button-template-round-size-large) {
-  min-height: var(--theme-button-round-min-height-large, var(--theme-size-medium-1, 40px));
-  padding-inline: var(--theme-button-round-padding-inline-large, var(--spacing-padding-7, 20px));
-  border-radius: var(--theme-button-round-radius-large, 30px);
+  min-height: var(--button-round-height-large, var(--theme-size-medium-1, 40px));
+  padding-inline: var(--button-round-padding-inline-large, var(--spacing-padding-7, 20px));
+  border-radius: var(--button-round-radius-large, 30px);
 }
 
 
@@ -1303,6 +1453,152 @@ figure.chip {
 
 
 
+.dropdown-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dropdown-panel-gap);
+  padding: var(--dropdown-panel-padding);
+  border-radius: var(--dropdown-panel-radius);
+  border: 1px solid var(--dropdown-panel-border-color);
+  background-color: var(--dropdown-panel-background);
+  box-shadow: var(--dropdown-panel-shadow);
+  max-height: var(--dropdown-panel-max-height);
+  overflow-y: auto;
+}
+
+.dropdown-panel-small {
+  --dropdown-option-height-current: var(--dropdown-option-height-small);
+  --dropdown-text-size-current: var(--dropdown-text-small-size);
+  --dropdown-text-line-height-current: var(--dropdown-text-small-line-height);
+  --dropdown-text-letter-spacing-current: var(
+    --dropdown-text-small-letter-spacing
+  );
+}
+
+.dropdown-panel-medium {
+  --dropdown-option-height-current: var(--dropdown-option-height-medium);
+  --dropdown-text-size-current: var(--dropdown-text-medium-size);
+  --dropdown-text-line-height-current: var(--dropdown-text-medium-line-height);
+  --dropdown-text-letter-spacing-current: var(
+    --dropdown-text-medium-letter-spacing
+  );
+}
+
+.dropdown-panel-large {
+  --dropdown-option-height-current: var(--dropdown-option-height-large);
+  --dropdown-text-size-current: var(--dropdown-text-large-size);
+  --dropdown-text-line-height-current: var(--dropdown-text-large-line-height);
+  --dropdown-text-letter-spacing-current: var(
+    --dropdown-text-large-letter-spacing
+  );
+}
+
+.dropdown-menu-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dropdown-panel-gap);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.dropdown-menu-item {
+  width: 100%;
+}
+
+.dropdown-menu-item-trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--dropdown-option-gap-inline);
+  width: 100%;
+  min-height: var(--dropdown-option-height-current, var(--dropdown-option-height-medium));
+  padding: var(--dropdown-option-padding-block) var(--dropdown-option-padding-inline);
+  border-radius: var(--dropdown-option-radius);
+  background-color: transparent;
+  color: var(--dropdown-option-color);
+  cursor: pointer;
+  font-size: var(--dropdown-option-font-size, var(--dropdown-text-medium-size));
+  font-weight: var(--dropdown-option-font-weight, var(--dropdown-text-weight));
+  line-height: var(--dropdown-option-line-height, var(--dropdown-text-medium-line-height));
+}
+.dropdown-menu-item-trigger[data-state=selected] {
+  background-color: var(--dropdown-option-bg-selected);
+  color: var(--dropdown-option-color-selected);
+}
+.dropdown-menu-item-trigger[data-highlighted], .dropdown-menu-item-trigger:hover {
+  background-color: var(--dropdown-option-bg-hover);
+  color: var(--dropdown-option-color-hover);
+}
+.dropdown-menu-item-trigger[data-state=selected]:hover {
+  background-color: var(--dropdown-option-bg-selected);
+  color: var(--dropdown-option-color-selected);
+}
+.dropdown-menu-item-trigger[data-disabled], .dropdown-menu-item-trigger:disabled {
+  color: var(--dropdown-option-color-disabled);
+  cursor: not-allowed;
+  background-color: var(--dropdown-option-bg-disabled);
+}
+.dropdown-menu-item-trigger[data-disabled] .dropdown-menu-item-label, .dropdown-menu-item-trigger:disabled .dropdown-menu-item-label {
+  color: var(--dropdown-option-color-disabled);
+}
+.dropdown-menu-item-trigger[data-disabled] .dropdown-menu-item-description, .dropdown-menu-item-trigger:disabled .dropdown-menu-item-description {
+  color: var(--dropdown-option-color-disabled);
+}
+
+.dropdown-menu-item-prefix,
+.dropdown-menu-item-suffix {
+  display: inline-flex;
+  align-items: center;
+  color: inherit;
+}
+
+.dropdown-menu-item-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.dropdown-menu-item-label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  color: inherit;
+  font-size: var(--dropdown-text-size-current, var(--dropdown-text-medium-size));
+  line-height: var(--dropdown-text-line-height-current, var(--dropdown-text-medium-line-height));
+  letter-spacing: var(--dropdown-text-letter-spacing-current, var(--dropdown-text-medium-letter-spacing));
+  font-weight: var(--dropdown-text-weight);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dropdown-menu-item-description {
+  font-size: var(--dropdown-description-size);
+  line-height: var(--dropdown-description-line-height);
+  color: var(--dropdown-description-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dropdown-menu-item-trigger[data-state=selected] .dropdown-menu-item-label {
+  font-weight: var(--dropdown-text-weight-selected);
+}
+
+.dropdown-menu-item-trigger[data-multiple=true] {
+  align-items: center;
+}
+
+.dropdown-menu-item-checkbox {
+  width: var(--theme-checkbox-frame-size-medium);
+  height: var(--theme-checkbox-frame-size-medium);
+  padding: 0;
+}
+
+
+
 .input {
   display: flex;
   flex-direction: column;
@@ -1314,7 +1610,7 @@ figure.chip {
 }
 
 .input-label {
-  color: var(--theme-input-label-color);
+  color: var(--input-label-color);
   font-size: var(--font-label-small-size);
   line-height: var(--font-label-small-line-height);
   font-weight: var(--font-label-small-weight);
@@ -1341,60 +1637,60 @@ figure.chip {
   display: flex;
   align-items: center;
   width: 100%;
-  gap: var(--theme-input-gap);
-  border-radius: var(--theme-input-radius-default);
-  border: var(--theme-input-border-width-default) solid var(--theme-input-border-color);
-  background-color: var(--theme-input-surface);
-  padding: var(--theme-input-padding-y) var(--theme-input-padding-x);
-  min-height: var(--theme-input-height-medium);
+  gap: var(--input-default-gap);
+  border-radius: var(--input-default-radius-base);
+  border: var(--input-border-width-default) solid var(--input-border-color);
+  background-color: var(--input-surface-color);
+  padding: var(--input-default-padding-block) var(--input-default-padding-inline);
+  min-height: var(--input-default-height-medium);
   transition: border-color 0.15s ease, background-color 0.15s ease;
   box-sizing: border-box;
   outline: none;
   box-shadow: none;
 }
 .input-field[data-size=small] {
-  min-height: var(--theme-input-height-small);
+  min-height: var(--input-default-height-small);
 }
 .input-field[data-size=large] {
-  min-height: var(--theme-input-height-large);
+  min-height: var(--input-default-height-large);
 }
 .input-field[data-priority=secondary] {
   border: none;
-  border-bottom: var(--theme-input-border-width-default) solid var(--theme-input-border-color);
+  border-bottom: var(--input-border-width-default) solid var(--input-border-color);
   border-radius: 0;
   padding-inline: 0;
   padding-block: var(--spacing-padding-4);
   background-color: transparent;
 }
 .input-field[data-priority=secondary][data-state=active], .input-field[data-priority=secondary][data-state=focused] {
-  border-bottom-color: var(--theme-input-border-active);
-  border-bottom-width: var(--theme-input-border-width-emphasis);
+  border-bottom-color: var(--input-border-active-color);
+  border-bottom-width: var(--input-border-width-emphasis);
 }
 .input-field[data-priority=secondary][data-state=success] {
-  border-bottom-color: var(--theme-input-border-success);
-  border-bottom-width: var(--theme-input-border-width-emphasis);
+  border-bottom-color: var(--input-border-success-color);
+  border-bottom-width: var(--input-border-width-emphasis);
 }
 .input-field[data-priority=secondary][data-state=error] {
-  border-bottom-color: var(--theme-input-border-error);
-  border-bottom-width: var(--theme-input-border-width-emphasis);
+  border-bottom-color: var(--input-border-error-color);
+  border-bottom-width: var(--input-border-width-emphasis);
 }
 .input-field[data-priority=secondary][data-state=disabled] {
-  border-bottom-color: var(--theme-input-border-underline-disabled);
-  border-bottom-width: var(--theme-input-border-width-default);
+  border-bottom-color: var(--input-border-underline-disabled-color);
+  border-bottom-width: var(--input-border-width-default);
 }
 .input-field[data-priority=tertiary] {
-  border-radius: var(--theme-input-radius-tertiary);
-  background-color: var(--theme-input-surface);
-  min-height: var(--theme-input-height-tertiary);
+  border-radius: var(--input-tertiary-radius-base);
+  background-color: var(--input-surface-color);
+  min-height: var(--input-tertiary-height-base);
   row-gap: var(--spacing-gap-1);
-  column-gap: var(--theme-input-gap);
+  column-gap: var(--input-default-gap);
   flex-wrap: wrap;
   align-items: center;
 }
-.input-field[data-priority=tertiary] .input-field__control {
+.input-field[data-priority=tertiary] .input-field-control {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
-  column-gap: var(--theme-input-gap);
+  column-gap: var(--input-default-gap);
   row-gap: var(--spacing-gap-1);
   align-items: center;
   flex: 1 1 auto;
@@ -1410,26 +1706,26 @@ figure.chip {
   width: auto;
   flex: 1 1 auto;
 }
-.input-field[data-priority=tertiary] .input-field__utilities {
+.input-field[data-priority=tertiary] .input-field-utilities {
   align-self: center;
   margin-left: 0;
 }
 .input-field:not([data-priority=secondary])[data-state=active], .input-field:not([data-priority=secondary])[data-state=focused] {
-  border-color: var(--theme-input-border-active);
-  border-width: var(--theme-input-border-width-emphasis);
+  border-color: var(--input-border-active-color);
+  border-width: var(--input-border-width-emphasis);
 }
 .input-field:not([data-priority=secondary])[data-state=success] {
-  border-color: var(--theme-input-border-success);
-  border-width: var(--theme-input-border-width-emphasis);
+  border-color: var(--input-border-success-color);
+  border-width: var(--input-border-width-emphasis);
 }
 .input-field:not([data-priority=secondary])[data-state=error] {
-  border-color: var(--theme-input-border-error);
-  border-width: var(--theme-input-border-width-emphasis);
+  border-color: var(--input-border-error-color);
+  border-width: var(--input-border-width-emphasis);
 }
 .input-field:not([data-priority=secondary])[data-state=disabled] {
-  border-color: var(--theme-input-border-disabled);
-  border-width: var(--theme-input-border-width-default);
-  background-color: var(--theme-input-surface-disabled);
+  border-color: var(--input-border-disabled-color);
+  border-width: var(--input-border-width-default);
+  background-color: var(--input-surface-disabled-color); /* disabled 배경 토큰 */
 }
 
 .input-element {
@@ -1437,18 +1733,18 @@ figure.chip {
   width: 100%;
   border: none;
   background: transparent;
-  color: var(--theme-input-text-color);
-  caret-color: var(--theme-input-text-color);
+  color: var(--input-text-color);
+  caret-color: var(--input-text-color);
   font-size: var(--font-body-medium-size);
   line-height: var(--font-body-medium-line-height);
-  font-weight: var(--font-body-medium-weight);
+  font-weight: 400;
   letter-spacing: 0px;
   outline: none;
   box-shadow: none;
   min-width: 0;
 }
 .input-element::placeholder {
-  color: var(--theme-input-placeholder-color);
+  color: var(--input-placeholder-color);
 }
 .input-element:disabled {
   color: var(--color-label-disabled);
@@ -1461,22 +1757,22 @@ figure.chip {
   box-shadow: none;
 }
 
-.input-field__control {
+.input-field-control {
   display: flex;
   align-items: center;
-  gap: var(--theme-input-gap);
+  gap: var(--input-default-gap);
   flex: 1 1 auto;
   min-width: 0;
 }
 
-.input-field__utilities {
+.input-field-utilities {
   display: flex;
   align-items: center;
   gap: var(--spacing-gap-2, 8px);
   flex-shrink: 0;
   margin-left: var(--spacing-gap-3, 12px);
 }
-.input-field__utilities .input-affix {
+.input-field-utilities .input-affix {
   margin-left: 0;
 }
 
@@ -1485,7 +1781,7 @@ figure.chip {
   flex-basis: 100%;
   font-size: var(--font-label-small-size);
   line-height: var(--font-label-small-line-height);
-  color: var(--theme-input-label-color);
+  color: var(--input-label-color);
 }
 
 .input-field[data-priority=secondary] .input-element {
@@ -1497,15 +1793,15 @@ figure.chip {
 }
 
 .input-helper-text {
-  color: var(--theme-input-helper-color);
+  color: var(--input-helper-color);
   font-size: var(--font-label-small-size);
   line-height: var(--font-label-small-line-height);
 }
 [data-state=error] .input-helper-text {
-  color: var(--theme-input-border-error);
+  color: var(--input-border-error-color);
 }
 [data-state=disabled] .input-helper-text {
-  color: var(--theme-input-helper-disabled-color);
+  color: var(--input-helper-disabled-color);
 }
 
 .input-affix {
@@ -1513,43 +1809,43 @@ figure.chip {
   align-items: center;
   justify-content: center;
   min-width: 20px;
-  color: var(--theme-input-helper-color);
+  color: var(--input-helper-color);
 }
-.input-affix--left {
+.input-affix-left {
   order: -1;
   margin-right: var(--spacing-gap-3);
 }
-.input-affix--right, .input-affix--clear, .input-affix--status {
+.input-affix-right, .input-affix-clear, .input-affix-status {
   margin-left: var(--spacing-gap-3);
 }
-.input-affix--clear, .input-affix--status {
-  color: var(--theme-input-text-color);
+.input-affix-clear, .input-affix-status {
+  color: var(--input-text-color);
 }
-.input-affix--status[data-state=error] {
+.input-affix-status[data-state=error] {
   color: var(--color-error);
 }
-.input-affix--status[data-state=success] {
+.input-affix-status[data-state=success] {
   color: var(--color-primary-default);
 }
 
 .input-field[data-priority=secondary] {
-  border-bottom-width: var(--theme-input-border-width-default);
+  border-bottom-width: var(--input-border-width-default);
 }
 .input-field[data-priority=secondary][data-state=active], .input-field[data-priority=secondary][data-state=focused] {
-  border-bottom-color: var(--theme-input-border-active);
-  border-bottom-width: var(--theme-input-border-width-emphasis);
+  border-bottom-color: var(--input-border-active-color);
+  border-bottom-width: var(--input-border-width-emphasis);
 }
 .input-field[data-priority=secondary][data-state=success] {
-  border-bottom-color: var(--theme-input-border-success);
-  border-bottom-width: var(--theme-input-border-width-emphasis);
+  border-bottom-color: var(--input-border-success-color);
+  border-bottom-width: var(--input-border-width-emphasis);
 }
 .input-field[data-priority=secondary][data-state=error] {
-  border-bottom-color: var(--theme-input-border-error);
-  border-bottom-width: var(--theme-input-border-width-emphasis);
+  border-bottom-color: var(--input-border-error-color);
+  border-bottom-width: var(--input-border-width-emphasis);
 }
 .input-field[data-priority=secondary][data-state=disabled] {
-  border-bottom-color: var(--theme-input-border-underline-disabled);
-  border-bottom-width: var(--theme-input-border-width-default);
+  border-bottom-color: var(--input-border-underline-disabled-color);
+  border-bottom-width: var(--input-border-width-default);
 }
 
 .input[data-state=active] .input-label,
@@ -1558,35 +1854,42 @@ figure.chip {
 .input[data-state=focused] .input-inline-label,
 .input[data-state=success] .input-label,
 .input[data-state=success] .input-inline-label {
-  color: var(--theme-input-label-accent-color);
+  color: var(--input-label-accent-color);
 }
 
 .input[data-state=error] .input-label,
 .input[data-state=error] .input-inline-label {
-  color: var(--theme-input-label-error-color);
+  color: var(--input-label-error-color);
 }
 .input[data-state=error] .input-helper-text {
-  color: var(--theme-input-label-error-color);
+  color: var(--input-label-error-color);
 }
 
 .input[data-state=disabled] .input-label,
 .input[data-state=disabled] .input-inline-label,
 .input[data-state=disabled] .input-helper-text,
 .input[data-state=disabled] .input-affix {
-  color: var(--theme-input-helper-disabled-color);
+  color: var(--input-helper-disabled-color);
 }
 .input[data-state=disabled] .input-field {
-  border-color: var(--theme-input-border-color);
-  background-color: var(--theme-input-surface-disabled);
+  border-color: var(--input-border-color);
+  background-color: var(--input-surface-disabled-color);
 }
 .input[data-state=disabled] .input-field[data-priority=secondary] {
   background-color: transparent;
 }
 
+.input-side {
+  display: flex;
+  align-items: center;
+}
+
 .input-password-toggle {
+  width: 24px;
+  height: 24px;
   border: none;
   background: transparent;
-  color: var(--theme-input-label-accent-color);
+  color: var(--input-label-accent-color);
   font-size: var(--font-label-small-size);
   line-height: var(--font-label-small-line-height);
   font-weight: var(--font-label-small-weight);
@@ -1594,7 +1897,7 @@ figure.chip {
   cursor: pointer;
 }
 .input-password-toggle:disabled {
-  color: var(--theme-input-helper-disabled-color);
+  color: var(--input-helper-disabled-color);
   cursor: not-allowed;
 }
 
@@ -1604,52 +1907,40 @@ figure.chip {
 }
 
 .one-time-code {
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-gap-2);
 }
 
-.one-time-code__label {
+.one-time-code-label {
   font-size: var(--font-label-small-size);
-  color: var(--theme-input-label-color);
+  color: var(--input-label-color);
 }
 
-.one-time-code__fields {
+.one-time-code-fields {
   display: flex;
   gap: var(--spacing-gap-3);
 }
 
-.one-time-code__input {
-  width: 44px;
-  height: 56px;
-  border-radius: var(--theme-input-radius-default);
-  border: var(--theme-input-border-width-default) solid var(--theme-input-border-color);
-  text-align: center;
-  font-size: var(--font-heading-medium-size);
-  font-weight: var(--font-heading-medium-weight);
-  color: var(--theme-input-text-color);
-}
-.one-time-code__input:focus {
-  outline: none;
-  border-color: var(--theme-input-border-active);
-  border-width: var(--theme-input-border-width-emphasis);
+.one-time-code-input {
+  width: 100%;
 }
 
-.one-time-code__helper {
+.one-time-code-helper {
   font-size: var(--font-label-small-size);
-  color: var(--theme-input-helper-color);
+  color: var(--input-helper-color);
 }
 
 .email-verification,
 .phone-verification {
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-gap-4);
 }
 
-.auth-code-input__actions,
-.email-verification__code-actions,
-.phone-verification__code-actions {
+.auth-code-input-actions {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -1657,9 +1948,7 @@ figure.chip {
   min-width: 0;
 }
 
-.auth-code-input__countdown,
-.email-verification__countdown,
-.phone-verification__countdown {
+.auth-code-input-countdown {
   display: flex;
   align-items: center;
   font-weight: 500;
@@ -1683,6 +1972,444 @@ figure.chip {
   font-weight: var(--font-body-xxsmall-weight);
 }
 
+.input-calendar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-6, 20px);
+  width: 100%;
+}
+.input-calendar[data-disabled=true] {
+  opacity: 0.6;
+}
+
+.input-calendar-container {
+  background-color: var(--color-common-100, #fff);
+  border-radius: var(--theme-radius-large-3, 16px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16), 0 0 2px rgba(0, 0, 0, 0.12);
+  padding: var(--spacing-padding-10, 32px) var(--spacing-padding-6, 16px) var(--spacing-padding-6, 16px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-5, 16px);
+}
+
+.input-calendar-root {
+  width: 100%;
+}
+
+.input-calendar-panel {
+  width: 100%;
+  border-radius: var(--theme-radius-large-1, 12px);
+  background-color: transparent;
+}
+
+.input-calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-inline: var(--spacing-padding-6, 16px);
+  margin-bottom: var(--spacing-gap-4, 12px);
+}
+
+.input-calendar-header-control {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--color-label-strong, #18191b);
+}
+
+.input-calendar-header-level {
+  font-size: var(--font-heading-small-size, 19px);
+  font-weight: var(--font-heading-small-weight, 600);
+}
+
+.input-calendar-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  padding-bottom: var(--spacing-padding-2, 4px);
+}
+
+.input-calendar-weekday {
+  text-transform: none;
+  font-size: var(--font-heading-xxsmall-size, 15px);
+  color: var(--color-label-alternative, #afb1b6);
+  text-align: center;
+}
+
+.input-calendar-day {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--theme-radius-large-1, 12px);
+  justify-self: center;
+  font-size: var(--font-body-medium-size, 17px);
+  color: var(--color-label-strong, #3d3f43);
+}
+
+.input-calendar-footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-4, 12px);
+  width: 100%;
+}
+
+.input-calendar-footer-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-gap-3, 8px);
+}
+
+.input-calendar-action-button {
+  width: 100%;
+}
+
+.input-calendar-footer-actions > :first-child {
+  flex: 1 1 auto;
+}
+
+.input-calendar-footer-actions > :last-child {
+  flex: 1 1 auto;
+  justify-content: flex-end;
+}
+
+.input-calendar-apply {
+  width: 100%;
+}
+
+/* Select tokens mapped to Input primary tokens for visual parity */
+
+
+.select {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: var(--spacing-gap-2);
+}
+
+.select-block {
+  width: 100%;
+}
+
+.select-button {
+  --select-icon-fill: var(--select-icon-color-default);
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: var(--select-primary-gap-inline);
+  min-height: var(--select-primary-height-medium);
+  padding: var(--select-primary-padding-block) var(--select-primary-padding-inline);
+  border: var(--select-primary-border-width-default) solid var(--select-primary-color-border);
+  border-radius: var(--select-primary-radius-medium);
+  background-color: var(--input-surface-color);
+  cursor: pointer;
+  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
+  text-align: left;
+}
+.select-button[data-size=small] {
+  min-height: var(--select-primary-height-small);
+  border-radius: var(--select-primary-radius-small);
+}
+.select-button[data-size=large] {
+  min-height: var(--select-primary-height-large);
+  border-radius: var(--select-primary-radius-large);
+}
+.select-button[data-multiple=true] {
+  align-items: center;
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+.select-button[data-priority=secondary] {
+  width: fit-content;
+  max-width: 100%;
+  min-height: auto;
+  border: none;
+  border-radius: var(--select-secondary-radius);
+  padding: var(--select-secondary-padding-block) var(--select-secondary-padding-inline);
+  background-color: transparent;
+  gap: var(--select-secondary-gap);
+  position: relative;
+  --select-icon-fill: currentColor;
+  transition: background-color 150ms ease, color 150ms ease;
+}
+.select-button[data-priority=secondary]:hover:not([data-state=disabled]) {
+  background-color: var(--select-color-surface-secondary-hover);
+}
+.select-button[data-priority=secondary]:active:not([data-state=disabled]) {
+  background-color: var(--select-color-surface-secondary-active);
+}
+.select-button[data-priority=secondary][data-state=focused], .select-button[data-priority=secondary][data-open=true] {
+  background-color: var(--select-color-surface-secondary-hover);
+}
+.select-button[data-priority=secondary][data-state=focused]::after, .select-button[data-priority=secondary][data-open=true]::after {
+  height: var(--select-secondary-underline-width-focus);
+  background-color: var(--select-color-border-secondary-focused);
+}
+.select-button[data-priority=secondary][data-state=disabled], .select-button[data-priority=secondary]:disabled {
+  color: var(--color-label-disabled);
+  cursor: not-allowed;
+}
+.select-button:not([data-priority=secondary])[data-state=focused], .select-button:not([data-priority=secondary])[data-open=true], .select-button:not([data-priority=secondary]):focus-visible {
+  border-color: var(--select-primary-color-border-focused);
+  border-width: var(--select-primary-border-width-focus);
+  --select-icon-fill: var(--select-icon-color-focused);
+}
+.select-button:not([data-priority=secondary])[data-state=disabled], .select-button:not([data-priority=secondary]):disabled {
+  border-color: var(--select-primary-color-border-disabled);
+  background-color: var(--select-primary-color-surface-disabled);
+  cursor: not-allowed;
+  --select-icon-fill: var(--select-icon-color-disabled);
+}
+.select-button[data-priority=secondary][data-state=disabled], .select-button[data-priority=secondary]:disabled {
+  border-color: transparent;
+  background-color: var(--select-color-surface-secondary-disabled);
+}
+.select-button[data-priority=secondary][data-state=disabled]::after, .select-button[data-priority=secondary]:disabled::after {
+  background-color: var(--select-color-border-secondary-disabled);
+  height: var(--select-secondary-underline-width-default);
+}
+
+.select-value {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-2);
+}
+
+.select-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-family: var(--font-body-medium-family);
+  font-size: var(--select-text-medium-size);
+  font-weight: var(--select-text-medium-weight);
+  line-height: var(--select-text-medium-line-height);
+  letter-spacing: var(--select-text-medium-letter-spacing);
+  color: var(--select-primary-color-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.select-button[data-priority=secondary] .select-label {
+  color: var(--select-secondary-color-text);
+}
+.select-button[data-state=focused] .select-label, .select-button[data-open=true] .select-label {
+  color: var(--select-primary-color-text-focused);
+}
+.select-button[data-state=disabled] .select-label {
+  color: var(--select-primary-color-text-disabled);
+}
+.select-button[data-priority=secondary][data-state=disabled] .select-label {
+  color: var(--color-label-disabled);
+}
+
+.select-label-placeholder {
+  color: var(--select-primary-color-placeholder);
+}
+.select-button[data-priority=secondary] .select-label-placeholder {
+  color: var(--select-secondary-color-placeholder);
+}
+
+.select-button[data-size=small] .select-label {
+  font-size: var(--select-text-small-size);
+  line-height: var(--select-text-small-line-height);
+  letter-spacing: var(--select-text-small-letter-spacing);
+  font-weight: var(--select-text-small-weight);
+}
+
+.select-button[data-size=large] .select-label {
+  font-size: var(--select-text-large-size);
+  line-height: var(--select-text-large-line-height);
+  letter-spacing: var(--select-text-large-letter-spacing);
+  font-weight: var(--select-text-large-weight);
+}
+
+.select-button[data-priority=secondary][data-size=large] .select-label {
+  font-weight: 600;
+}
+
+.select-tags {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--select-multiple-chip-gap);
+  align-items: center;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.select-tag {
+  display: flex;
+  align-items: center;
+  gap: var(--select-multiple-chip-gap);
+  padding: var(--select-multiple-chip-padding-block) var(--select-multiple-chip-padding-inline);
+  border-radius: var(--select-multiple-chip-radius);
+  border: 1px solid var(--select-multiple-chip-border-color, var(--color-border-standard-cool-gray));
+  background-color: var(--select-multiple-chip-surface);
+  color: var(--select-multiple-chip-color);
+  font-size: var(--select-multiple-chip-font-size);
+  line-height: var(--select-multiple-chip-line-height);
+  font-weight: var(--select-multiple-chip-font-weight);
+  white-space: nowrap;
+  min-height: var(--select-multiple-chip-height);
+}
+.select-tag:focus-within {
+  border-color: var(--select-color-border-secondary-focused);
+}
+.select-tag[data-removable=true] {
+  padding-right: var(--spacing-padding-2);
+}
+
+.select-tag[data-kind=summary],
+.select-tag-summary {
+  background-color: var(--select-multiple-chip-summary-surface);
+  border-color: var(--select-multiple-chip-summary-border-color);
+  color: var(--select-multiple-chip-summary-color);
+  padding: var(--select-multiple-chip-summary-padding-block) var(--select-multiple-chip-summary-padding-inline);
+  border-radius: var(--select-multiple-chip-summary-radius);
+  font-size: var(--select-multiple-chip-summary-font-size);
+  line-height: var(--select-multiple-chip-summary-line-height);
+  font-weight: var(--select-multiple-chip-summary-font-weight);
+  min-height: auto;
+}
+
+.select-tag-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-1);
+  min-width: 0;
+}
+
+.select-tag-suffix {
+  color: var(--select-multiple-chip-suffix-color);
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.select-tag-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--select-icon-size-small);
+  height: var(--select-icon-size-small);
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  cursor: pointer;
+  color: var(--select-multiple-chip-remove-color);
+  flex-shrink: 0;
+  border-radius: 9999px;
+  transition: color 150ms ease;
+}
+.select-tag-remove:focus-visible {
+  outline: 0.2rem solid var(--color-border-strong);
+  outline-offset: 0.1rem;
+}
+.select-tag-remove:hover {
+  color: var(--select-multiple-chip-remove-hover-color);
+}
+.select-tag-remove svg {
+  width: 100%;
+  height: 100%;
+}
+.select-tag-remove svg path {
+  fill: currentColor;
+}
+
+.select-icon {
+  flex-shrink: 0;
+  width: var(--select-icon-size-medium);
+  height: var(--select-icon-size-medium);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+}
+.select-icon[data-size=small] {
+  width: var(--select-icon-size-small);
+  height: var(--select-icon-size-small);
+}
+.select-icon[data-size=large] {
+  width: var(--select-icon-size-large);
+  height: var(--select-icon-size-large);
+}
+[data-open=true] .select-icon {
+  transform: rotate(180deg);
+}
+.select-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.select-icon svg path {
+  fill: var(--select-icon-fill);
+}
+
+
+
+.form-field-container {
+  display: block;
+  width: var(--form-field-width);
+  flex: var(--form-field-flex);
+}
+.form-field-container[data-width=auto] {
+  --form-field-width: auto;
+  --form-field-flex: 0 0 auto;
+}
+.form-field-container[data-width=fill] {
+  --form-field-width: auto;
+  --form-field-flex: 1 1 0%;
+}
+.form-field-container[data-width=full] {
+  --form-field-width: 100%;
+  --form-field-flex: 0 0 100%;
+}
+.form-field-container[data-width=fit] {
+  --form-field-width: fit-content;
+  --form-field-flex: 0 0 auto;
+}
+.form-field-container[data-width=custom] {
+  --form-field-flex: 0 0 auto;
+}
+
+.form-field-header {
+  margin-bottom: var(--form-field-gap-y);
+}
+
+.form-field-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-1);
+  font-size: var(--form-field-label-font-size);
+  font-weight: var(--form-field-label-font-weight);
+  line-height: var(--form-field-label-line-height);
+}
+.form-field-label span {
+  color: var(--form-field-label-color);
+}
+
+.form-field-required {
+  color: var(--color-feedback-error);
+}
+
+.form-field-body {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--form-field-gap-x);
+  width: 100%;
+}
+
+.form-field-footer {
+  margin-top: var(--form-field-gap-y);
+  font-size: var(--form-field-helper-font-size);
+  line-height: var(--form-field-helper-line-height);
+}
+.form-field-footer p,
+.form-field-footer span {
+  color: var(--form-field-helper-color);
+}
+
 
 
 .bottom-navigation {