@utk09/finra-ui 0.0.7 → 0.0.8

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/components/Button/Button.module.scss","../src/components/Button/Button.tsx","../src/components/IconButton/IconButton.module.scss","../src/components/IconButton/IconButton.tsx","../src/components/ButtonGroup/ButtonGroup.module.scss","../src/components/ButtonGroup/ButtonGroup.tsx","../src/assets/icons/CloseIcon.tsx","../src/assets/icons/DashIcon.tsx","../src/assets/icons/MinusIcon.tsx","../src/assets/icons/PlusIcon.tsx","../src/assets/icons/UploadIcon.tsx","../src/components/Input/Input.module.scss","../src/components/Input/Input.tsx","../src/components/Textarea/Textarea.module.scss","../src/components/Textarea/Textarea.tsx","../src/components/NumberInput/NumberInput.module.scss","../src/components/NumberInput/NumberInput.tsx","../src/components/FormField/FormField.module.scss","../src/components/FormField/FormField.tsx","../src/components/Checkbox/Checkbox.module.scss","../src/components/Checkbox/Checkbox.tsx","../src/components/Switch/Switch.module.scss","../src/components/Switch/Switch.tsx","../src/components/RadioButton/RadioButton.module.scss","../src/components/RadioButton/RadioButton.tsx","../src/components/Slider/Slider.module.scss","../src/components/Slider/Slider.tsx","../src/components/PillInput/PillInput.module.scss","../src/components/PillInput/PillInput.tsx","../src/components/FileDropZone/FileDropZone.module.scss","../src/components/FileDropZone/FileDropZone.tsx","../src/components/Calendar/Calendar.tsx","../src/components/DateInput/DateInput.module.scss","../src/components/DateInput/DateInput.tsx","../src/components/Badge/Badge.module.scss","../src/components/Badge/Badge.tsx","../src/components/Divider/Divider.module.scss","../src/components/Divider/Divider.tsx"],"sourcesContent":[".button {\n  //  Internal custom properties (set by variant + sentiment)\n  --_btn-accent: var(--finra-color-primary-600);\n  --_btn-accent-hover: var(--finra-color-primary-700);\n  --_btn-accent-active: var(--finra-color-primary-800);\n  --_btn-accent-subtle: var(--finra-color-primary-50);\n  --_btn-on-accent: var(--finra-color-white);\n\n  //  Dark mode: inverted primary scale is too light for white text\n  :where([data-theme=\"dark\"]) & {\n    --_btn-on-accent: var(--finra-color-neutral-900);\n  }\n\n  //  Base styles\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--finra-density-gap);\n  font-family: var(--finra-font-sans);\n  font-weight: var(--finra-font-medium);\n  font-size: var(--finra-density-button-font-size);\n  line-height: var(--finra-leading-tight);\n  border-radius: var(--finra-radius-md);\n  transition: all var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  cursor: var(--finra-cursor-pointer);\n  border: var(--finra-border-thin) solid var(--finra-color-transparent);\n  outline: none;\n  text-decoration: none;\n  position: relative;\n  white-space: nowrap;\n  height: var(--finra-density-size-base);\n  padding: 0 var(--finra-density-button-padding-x);\n\n  //  States\n  &:disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n  }\n\n  &:focus-visible {\n    outline: var(--finra-focus-width) solid var(--finra-focus-color);\n    outline-offset: var(--finra-focus-offset);\n  }\n\n  //  Variant: primary (filled)\n  &.variantPrimary {\n    background-color: var(--_btn-accent);\n    color: var(--_btn-on-accent);\n    border-color: var(--_btn-accent);\n\n    &:hover:not(:disabled) {\n      background-color: var(--_btn-accent-hover);\n      border-color: var(--_btn-accent-hover);\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--_btn-accent-active);\n      border-color: var(--_btn-accent-active);\n    }\n  }\n\n  //  Variant: secondary (bordered)\n  &.variantSecondary {\n    background-color: var(--finra-color-transparent);\n    color: var(--_btn-accent);\n    border-color: var(--_btn-accent);\n\n    &:hover:not(:disabled) {\n      background-color: var(--_btn-accent-subtle);\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--_btn-accent-subtle);\n      border-color: var(--_btn-accent-hover);\n      color: var(--_btn-accent-hover);\n    }\n  }\n\n  //  Variant: tertiary (minimal)\n  &.variantTertiary {\n    background-color: var(--finra-color-transparent);\n    color: var(--_btn-accent);\n    border-color: var(--finra-color-transparent);\n\n    &:hover:not(:disabled) {\n      background-color: var(--_btn-accent-subtle);\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--_btn-accent-subtle);\n      color: var(--_btn-accent-hover);\n    }\n  }\n\n  //  Sentiment overrides\n  &.sentimentDanger {\n    --_btn-accent: var(--finra-color-error);\n    --_btn-accent-hover: var(--finra-color-error-hover);\n    --_btn-accent-active: var(--finra-color-error-active);\n    --_btn-accent-subtle: var(--finra-color-error-subtle);\n    --_btn-on-accent: var(--finra-color-white);\n  }\n\n  &.sentimentSuccess {\n    --_btn-accent: var(--finra-color-success);\n    --_btn-accent-hover: var(--finra-color-success-hover);\n    --_btn-accent-active: var(--finra-color-success-active);\n    --_btn-accent-subtle: var(--finra-color-success-subtle);\n    --_btn-on-accent: var(--finra-color-white);\n  }\n\n  &.sentimentWarning {\n    --_btn-accent: var(--finra-color-warning);\n    --_btn-accent-hover: var(--finra-color-warning-hover);\n    --_btn-accent-active: var(--finra-color-warning-active);\n    --_btn-accent-subtle: var(--finra-color-warning-subtle);\n    --_btn-on-accent: var(--finra-color-white);\n  }\n\n  &.sentimentInfo {\n    --_btn-accent: var(--finra-color-info);\n    --_btn-accent-hover: var(--finra-color-info-hover);\n    --_btn-accent-active: var(--finra-color-info-active);\n    --_btn-accent-subtle: var(--finra-color-info-subtle);\n    --_btn-on-accent: var(--finra-color-white);\n  }\n\n  //  Full width\n  &.fullWidth {\n    width: 100%;\n  }\n}\n\n//  Icon container\n.icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: var(--finra-density-icon-size);\n  block-size: var(--finra-density-icon-size);\n  flex-shrink: 0;\n\n  > svg {\n    inline-size: 100%;\n    block-size: 100%;\n  }\n}\n","import { cva, type VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nimport type { Sentiment } from \"../../types/variants\";\nimport { ButtonBase, type ButtonBaseProps } from \"../../unstyled/Button/Button\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./Button.module.scss\";\n\nexport type ButtonSentiment = Sentiment;\n\nconst sentimentClasses: Record<ButtonSentiment, string> = {\n  danger: styles.sentimentDanger,\n  success: styles.sentimentSuccess,\n  warning: styles.sentimentWarning,\n  info: styles.sentimentInfo,\n};\n\nconst buttonVariants = cva(styles.button, {\n  variants: {\n    variant: {\n      primary: styles.variantPrimary,\n      secondary: styles.variantSecondary,\n      tertiary: styles.variantTertiary,\n    },\n    fullWidth: {\n      true: styles.fullWidth,\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n  },\n});\n\nexport interface ButtonProps extends ButtonBaseProps, VariantProps<typeof buttonVariants> {\n  sentiment?: ButtonSentiment;\n  startIcon?: ReactNode;\n  endIcon?: ReactNode;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, fullWidth, sentiment, startIcon, endIcon, children, ...props }, ref) => {\n    return (\n      <ButtonBase\n        ref={ref}\n        type=\"button\"\n        {...{ [FINRA_UI_ATTR]: componentIds.button }}\n        className={clsx(\n          buttonVariants({ variant, fullWidth }),\n          sentiment && sentimentClasses[sentiment],\n          className,\n        )}\n        {...props}>\n        {startIcon ? <span className={styles.icon}>{startIcon}</span> : null}\n        {children}\n        {endIcon ? <span className={styles.icon}>{endIcon}</span> : null}\n      </ButtonBase>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n",".iconButton {\n  //  Internal custom properties\n  --_btn-accent: var(--finra-color-primary-600);\n  --_btn-accent-hover: var(--finra-color-primary-700);\n  --_btn-accent-active: var(--finra-color-primary-800);\n  --_btn-accent-subtle: var(--finra-color-primary-50);\n  --_btn-on-accent: var(--finra-color-white);\n\n  //  Dark mode: inverted primary scale is too light for white text\n  :where([data-theme=\"dark\"]) & {\n    --_btn-on-accent: var(--finra-color-neutral-900);\n  }\n\n  //  Base styles\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--finra-font-sans);\n  border-radius: var(--finra-radius-md);\n  transition: all var(--finra-duration-fast) ease-in-out;\n  cursor: var(--finra-cursor-pointer);\n  border: var(--finra-border-thin) solid var(--finra-color-transparent);\n  outline: none;\n  padding: 0;\n  inline-size: var(--finra-density-size-base);\n  block-size: var(--finra-density-size-base);\n  flex-shrink: 0;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  //  Icon sizing\n  > svg {\n    inline-size: var(--finra-density-icon-size);\n    block-size: var(--finra-density-icon-size);\n  }\n\n  //  States\n  &:disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n  }\n\n  &:focus-visible {\n    outline: var(--finra-focus-width) solid var(--finra-focus-color);\n    outline-offset: var(--finra-focus-offset);\n  }\n\n  //  Variant: primary (filled)\n  &.variantPrimary {\n    background-color: var(--_btn-accent);\n    color: var(--_btn-on-accent);\n    border-color: var(--_btn-accent);\n\n    &:hover:not(:disabled) {\n      background-color: var(--_btn-accent-hover);\n      border-color: var(--_btn-accent-hover);\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--_btn-accent-active);\n      border-color: var(--_btn-accent-active);\n    }\n  }\n\n  //  Variant: secondary (bordered)\n  &.variantSecondary {\n    background-color: var(--finra-color-transparent);\n    color: var(--_btn-accent);\n    border-color: var(--_btn-accent);\n\n    &:hover:not(:disabled) {\n      background-color: var(--_btn-accent-subtle);\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--_btn-accent-subtle);\n      border-color: var(--_btn-accent-hover);\n      color: var(--_btn-accent-hover);\n    }\n  }\n\n  //  Variant: tertiary (minimal)\n  &.variantTertiary {\n    background-color: var(--finra-color-transparent);\n    color: var(--_btn-accent);\n    border-color: var(--finra-color-transparent);\n\n    &:hover:not(:disabled) {\n      background-color: var(--_btn-accent-subtle);\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--_btn-accent-subtle);\n      color: var(--_btn-accent-hover);\n    }\n  }\n\n  //  Sentiment overrides\n  &.sentimentDanger {\n    --_btn-accent: var(--finra-color-error);\n    --_btn-accent-hover: var(--finra-color-error-hover);\n    --_btn-accent-active: var(--finra-color-error-active);\n    --_btn-accent-subtle: var(--finra-color-error-subtle);\n    --_btn-on-accent: var(--finra-color-white);\n  }\n\n  &.sentimentSuccess {\n    --_btn-accent: var(--finra-color-success);\n    --_btn-accent-hover: var(--finra-color-success-hover);\n    --_btn-accent-active: var(--finra-color-success-active);\n    --_btn-accent-subtle: var(--finra-color-success-subtle);\n    --_btn-on-accent: var(--finra-color-white);\n  }\n\n  &.sentimentWarning {\n    --_btn-accent: var(--finra-color-warning);\n    --_btn-accent-hover: var(--finra-color-warning-hover);\n    --_btn-accent-active: var(--finra-color-warning-active);\n    --_btn-accent-subtle: var(--finra-color-warning-subtle);\n    --_btn-on-accent: var(--finra-color-white);\n  }\n\n  &.sentimentInfo {\n    --_btn-accent: var(--finra-color-info);\n    --_btn-accent-hover: var(--finra-color-info-hover);\n    --_btn-accent-active: var(--finra-color-info-active);\n    --_btn-accent-subtle: var(--finra-color-info-subtle);\n    --_btn-on-accent: var(--finra-color-white);\n  }\n}\n","import { cva, type VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport type { Sentiment } from \"../../types/variants\";\nimport { IconButtonBase, type IconButtonBaseProps } from \"../../unstyled/IconButton/IconButton\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./IconButton.module.scss\";\n\nexport type IconButtonSentiment = Sentiment;\n\nconst sentimentClasses: Record<IconButtonSentiment, string> = {\n  danger: styles.sentimentDanger,\n  success: styles.sentimentSuccess,\n  warning: styles.sentimentWarning,\n  info: styles.sentimentInfo,\n};\n\nconst iconButtonVariants = cva(styles.iconButton, {\n  variants: {\n    variant: {\n      primary: styles.variantPrimary,\n      secondary: styles.variantSecondary,\n      tertiary: styles.variantTertiary,\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n  },\n});\n\nexport interface IconButtonProps\n  extends IconButtonBaseProps, VariantProps<typeof iconButtonVariants> {\n  sentiment?: IconButtonSentiment;\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ className, variant, sentiment, ...props }, ref) => {\n    return (\n      <IconButtonBase\n        ref={ref}\n        type=\"button\"\n        {...{ [FINRA_UI_ATTR]: componentIds.iconButton }}\n        className={clsx(\n          iconButtonVariants({ variant }),\n          sentiment && sentimentClasses[sentiment],\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n",".buttonGroup {\n  display: inline-flex;\n  flex-direction: row;\n\n  // Connected borders: remove inner radii, collapse borders\n  > * {\n    border-radius: 0;\n\n    &:not(:first-child) {\n      margin-inline-start: calc(var(--finra-border-thin) * -1);\n    }\n\n    &:first-child {\n      border-start-start-radius: var(--finra-radius-md);\n      border-end-start-radius: var(--finra-radius-md);\n    }\n\n    &:last-child {\n      border-start-end-radius: var(--finra-radius-md);\n      border-end-end-radius: var(--finra-radius-md);\n    }\n\n    // Ensure hovered/focused button appears above siblings\n    &:hover,\n    &:focus-visible {\n      z-index: 1;\n    }\n  }\n\n  //  Vertical orientation\n  &.vertical {\n    flex-direction: column;\n\n    > * {\n      &:not(:first-child) {\n        margin-inline-start: 0;\n        margin-block-start: calc(var(--finra-border-thin) * -1);\n      }\n\n      &:first-child {\n        border-radius: 0;\n        border-start-start-radius: var(--finra-radius-md);\n        border-start-end-radius: var(--finra-radius-md);\n      }\n\n      &:last-child {\n        border-radius: 0;\n        border-end-start-radius: var(--finra-radius-md);\n        border-end-end-radius: var(--finra-radius-md);\n      }\n    }\n  }\n}\n","import { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\n\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./ButtonGroup.module.scss\";\n\nexport interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(\n  ({ className, orientation = \"horizontal\", children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        {...{ [FINRA_UI_ATTR]: componentIds.buttonGroup }}\n        className={clsx(\n          styles.buttonGroup,\n          orientation === \"vertical\" && styles.vertical,\n          className,\n        )}\n        {...props}>\n        {children}\n      </div>\n    );\n  },\n);\n\nButtonGroup.displayName = \"ButtonGroup\";\n","import type { SVGProps } from \"react\";\n\nexport function CloseIcon(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}>\n      <path d=\"M18 6 6 18M6 6l12 12\" />\n    </svg>\n  );\n}\n","import type { SVGProps } from \"react\";\n\nexport function DashIcon(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      viewBox=\"0 0 12 12\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      {...props}>\n      <path d=\"M2.5 6h7\" />\n    </svg>\n  );\n}\n","import type { SVGProps } from \"react\";\n\nexport function MinusIcon(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      {...props}>\n      <path d=\"M5 12h14\" />\n    </svg>\n  );\n}\n","import type { SVGProps } from \"react\";\n\nexport function PlusIcon(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      {...props}>\n      <path d=\"M12 5v14M5 12h14\" />\n    </svg>\n  );\n}\n","import type { SVGProps } from \"react\";\n\nexport function UploadIcon(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}>\n      <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n      <polyline points=\"17 8 12 3 7 8\" />\n      <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\" />\n    </svg>\n  );\n}\n",".wrapper {\n  --_input-border-color: var(--finra-color-border);\n\n  display: inline-flex;\n  align-items: center;\n  gap: var(--finra-density-gap);\n  block-size: var(--finra-density-size-base);\n  padding-inline: var(--finra-density-input-padding-x);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  line-height: var(--finra-leading-normal);\n  background-color: var(--finra-color-background);\n  border: var(--finra-border-thin) solid var(--_input-border-color);\n  border-radius: var(--finra-radius-md);\n  transition: border-color var(--finra-duration-fast) ease-in-out;\n  cursor: var(--finra-cursor-text);\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  &:focus-within {\n    --_input-border-color: var(--finra-color-primary-500);\n  }\n\n  //  Disabled\n  &.disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n    background-color: var(--finra-color-neutral-50);\n  }\n\n  //  Full width\n  &.fullWidth {\n    inline-size: 100%;\n  }\n\n  //  Variants\n  &.variantPrimary {\n    border-width: var(--finra-border-thin);\n  }\n\n  &.variantSecondary {\n    border-width: var(--finra-border-thin);\n    background-color: var(--finra-color-neutral-50);\n  }\n\n  &.variantTertiary {\n    border-color: var(--finra-color-transparent);\n    border-block-end-color: var(--_input-border-color);\n    border-radius: 0;\n\n    &:focus-within {\n      border-block-end-color: var(--finra-color-primary-500);\n      box-shadow: none;\n    }\n  }\n\n  //  Validation status\n  &.statusError {\n    --_input-border-color: var(--finra-color-error);\n  }\n\n  &.statusWarning {\n    --_input-border-color: var(--finra-color-warning);\n  }\n\n  &.statusSuccess {\n    --_input-border-color: var(--finra-color-success);\n  }\n}\n\n//  Input field\n.field {\n  flex: 1;\n  min-inline-size: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  font: inherit;\n  color: var(--finra-color-foreground);\n  padding: 0;\n\n  // Override global :focus-visible - wrapper handles focus indication\n  &:focus-visible {\n    outline: none;\n  }\n\n  &::placeholder {\n    color: var(--finra-color-neutral-400);\n  }\n\n  &:disabled {\n    cursor: var(--finra-cursor-disabled);\n  }\n}\n\n//  Adornments\n.adornment {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--finra-color-neutral-500);\n  flex-shrink: 0;\n\n  > svg {\n    inline-size: var(--finra-density-icon-size);\n    block-size: var(--finra-density-icon-size);\n  }\n}\n\n//  Clear button\n.clearButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--finra-color-neutral-400);\n  cursor: var(--finra-cursor-pointer);\n  border-radius: var(--finra-radius-full);\n  flex-shrink: 0;\n\n  &:hover {\n    color: var(--finra-color-foreground);\n  }\n\n  > svg {\n    inline-size: var(--finra-density-icon-size);\n    block-size: var(--finra-density-icon-size);\n  }\n}\n","import { cva, type VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  type InputHTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport { CloseIcon } from \"../../assets/icons\";\nimport type { ValidationStatus as _ValidationStatus } from \"../../types/variants\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./Input.module.scss\";\n\nexport type ValidationStatus = _ValidationStatus;\n\nconst inputVariants = cva(styles.wrapper, {\n  variants: {\n    variant: {\n      primary: styles.variantPrimary,\n      secondary: styles.variantSecondary,\n      tertiary: styles.variantTertiary,\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n  },\n});\n\nconst validationClasses: Record<ValidationStatus, string> = {\n  error: styles.statusError,\n  warning: styles.statusWarning,\n  success: styles.statusSuccess,\n};\n\nexport interface InputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\">, VariantProps<typeof inputVariants> {\n  validationStatus?: ValidationStatus;\n  startAdornment?: ReactNode;\n  endAdornment?: ReactNode;\n  clearable?: boolean;\n  onClear?: () => void;\n  fullWidth?: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      variant,\n      validationStatus,\n      startAdornment,\n      endAdornment,\n      clearable,\n      onClear,\n      fullWidth,\n      disabled,\n      readOnly,\n      value,\n      defaultValue,\n      onChange,\n      ...props\n    },\n    ref,\n  ) => {\n    const internalRef = useRef<HTMLInputElement>(null);\n    const inputRef = (ref as React.RefObject<HTMLInputElement>) || internalRef;\n\n    const handleClear = useCallback(\n      (e: MouseEvent<HTMLButtonElement>) => {\n        e.preventDefault();\n        if (onClear) {\n          onClear();\n        } else if (inputRef.current) {\n          const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n            HTMLInputElement.prototype,\n            \"value\",\n          )?.set;\n          nativeInputValueSetter?.call(inputRef.current, \"\");\n          inputRef.current.dispatchEvent(new Event(\"input\", { bubbles: true }));\n        }\n        inputRef.current?.focus();\n      },\n      [onClear, inputRef],\n    );\n\n    const showClear = clearable && !disabled && !readOnly && (value ?? defaultValue ?? \"\") !== \"\";\n\n    return (\n      <div\n        {...{ [FINRA_UI_ATTR]: componentIds.input }}\n        className={clsx(\n          inputVariants({ variant }),\n          validationStatus && validationClasses[validationStatus],\n          disabled && styles.disabled,\n          fullWidth && styles.fullWidth,\n          className,\n        )}>\n        {startAdornment ? <span className={styles.adornment}>{startAdornment}</span> : null}\n        <input\n          ref={inputRef}\n          {...{ [FINRA_UI_ATTR]: componentIds.inputField }}\n          className={styles.field}\n          disabled={disabled}\n          readOnly={readOnly}\n          value={value}\n          defaultValue={defaultValue}\n          onChange={onChange}\n          {...props}\n        />\n        {showClear ? (\n          <button\n            type=\"button\"\n            className={styles.clearButton}\n            onClick={handleClear}\n            aria-label=\"Clear input\"\n            tabIndex={-1}>\n            <CloseIcon />\n          </button>\n        ) : null}\n        {endAdornment ? <span className={styles.adornment}>{endAdornment}</span> : null}\n      </div>\n    );\n  },\n);\n\nInput.displayName = \"Input\";\n",".wrapper {\n  --_input-border-color: var(--finra-color-border);\n\n  display: inline-flex;\n  flex-direction: column;\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  line-height: var(--finra-leading-normal);\n  background-color: var(--finra-color-background);\n  border: var(--finra-border-thin) solid var(--_input-border-color);\n  border-radius: var(--finra-radius-md);\n  transition: border-color var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  &:focus-within {\n    --_input-border-color: var(--finra-color-primary-500);\n  }\n\n  &.disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n    background-color: var(--finra-color-neutral-50);\n  }\n\n  &.fullWidth {\n    inline-size: 100%;\n  }\n\n  //  Variants\n  &.variantPrimary {\n    border-width: var(--finra-border-thin);\n  }\n\n  &.variantSecondary {\n    border-width: var(--finra-border-thin);\n    background-color: var(--finra-color-neutral-50);\n  }\n\n  &.variantTertiary {\n    border-color: var(--finra-color-transparent);\n    border-block-end-color: var(--_input-border-color);\n    border-radius: 0;\n\n    &:focus-within {\n      border-block-end-color: var(--finra-color-primary-500);\n      box-shadow: none;\n    }\n  }\n\n  //  Validation status\n  &.statusError {\n    --_input-border-color: var(--finra-color-error);\n  }\n\n  &.statusWarning {\n    --_input-border-color: var(--finra-color-warning);\n  }\n\n  &.statusSuccess {\n    --_input-border-color: var(--finra-color-success);\n  }\n}\n\n.field {\n  flex: 1;\n  min-inline-size: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  font: inherit;\n  color: var(--finra-color-foreground);\n  padding: var(--finra-density-input-padding-x);\n  resize: vertical;\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &::placeholder {\n    color: var(--finra-color-neutral-400);\n  }\n\n  &:disabled {\n    cursor: var(--finra-cursor-disabled);\n    resize: none;\n  }\n}\n\n.charCount {\n  display: block;\n  text-align: end;\n  padding-inline: var(--finra-density-input-padding-x);\n  padding-block-end: var(--finra-density-gap);\n  font-size: var(--finra-text-xs);\n  color: var(--finra-color-neutral-500);\n  font-variant-numeric: var(--finra-font-tabular-nums);\n}\n\n.charCountWarning {\n  color: var(--finra-color-warning);\n}\n\n.charCountError {\n  color: var(--finra-color-error);\n}\n","import { cva, type VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  forwardRef,\n  type TextareaHTMLAttributes,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport type { ValidationStatus } from \"../Input/Input\";\nimport styles from \"./Textarea.module.scss\";\n\nconst textareaVariants = cva(styles.wrapper, {\n  variants: {\n    variant: {\n      primary: styles.variantPrimary,\n      secondary: styles.variantSecondary,\n      tertiary: styles.variantTertiary,\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n  },\n});\n\nconst validationClasses: Record<ValidationStatus, string> = {\n  error: styles.statusError,\n  warning: styles.statusWarning,\n  success: styles.statusSuccess,\n};\n\nexport interface TextareaProps\n  extends\n    Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\">,\n    VariantProps<typeof textareaVariants> {\n  validationStatus?: ValidationStatus;\n  showCharCount?: boolean;\n  warningThreshold?: number;\n  autoResize?: boolean;\n  minRows?: number;\n  maxRows?: number;\n  fullWidth?: boolean;\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (\n    {\n      className,\n      variant,\n      validationStatus,\n      showCharCount,\n      warningThreshold,\n      autoResize,\n      minRows = 3,\n      maxRows,\n      fullWidth,\n      maxLength,\n      disabled,\n      readOnly,\n      value,\n      defaultValue,\n      onChange,\n      ...props\n    },\n    ref,\n  ) => {\n    const internalRef = useRef<HTMLTextAreaElement>(null);\n    const textareaRef = (ref as React.RefObject<HTMLTextAreaElement>) || internalRef;\n\n    const [charCount, setCharCount] = useState(() => {\n      const initial = (value ?? defaultValue ?? \"\") as string;\n      return initial.length;\n    });\n\n    // Sync charCount when controlled value changes\n    useEffect(() => {\n      if (value !== undefined) {\n        setCharCount((value as string).length);\n      }\n    }, [value]);\n\n    const adjustHeight = useCallback(() => {\n      const textarea = textareaRef.current;\n      if (!textarea || !autoResize) return;\n\n      textarea.style.height = \"auto\";\n      const lineHeight = parseFloat(getComputedStyle(textarea).lineHeight);\n      const minHeight = lineHeight * minRows;\n      const maxHeight = maxRows ? lineHeight * maxRows : Infinity;\n      const scrollHeight = textarea.scrollHeight;\n\n      textarea.style.height = `${Math.min(Math.max(scrollHeight, minHeight), maxHeight)}px`;\n      textarea.style.overflowY = scrollHeight > maxHeight ? \"auto\" : \"hidden\";\n    }, [autoResize, minRows, maxRows, textareaRef]);\n\n    useEffect(() => {\n      adjustHeight();\n    }, [value, adjustHeight]);\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        setCharCount(e.target.value.length);\n        adjustHeight();\n        onChange?.(e);\n      },\n      [onChange, adjustHeight],\n    );\n\n    const isOverWarning =\n      warningThreshold !== undefined && maxLength !== undefined && charCount >= warningThreshold;\n    const isAtLimit = maxLength !== undefined && charCount >= maxLength;\n\n    const countStatus: ValidationStatus | undefined = isAtLimit\n      ? \"error\"\n      : isOverWarning\n        ? \"warning\"\n        : undefined;\n\n    const effectiveValidation = validationStatus ?? countStatus;\n\n    return (\n      <div\n        {...{ [FINRA_UI_ATTR]: componentIds.textarea }}\n        className={clsx(\n          textareaVariants({ variant }),\n          effectiveValidation && validationClasses[effectiveValidation],\n          disabled && styles.disabled,\n          fullWidth && styles.fullWidth,\n          className,\n        )}>\n        <textarea\n          ref={textareaRef}\n          {...{ [FINRA_UI_ATTR]: componentIds.textareaField }}\n          className={styles.field}\n          rows={minRows}\n          maxLength={maxLength}\n          disabled={disabled}\n          readOnly={readOnly}\n          value={value}\n          defaultValue={defaultValue}\n          onChange={handleChange}\n          {...props}\n        />\n        {showCharCount && maxLength !== undefined ? (\n          <span\n            {...{ [FINRA_UI_ATTR]: componentIds.textareaCount }}\n            className={clsx(\n              styles.charCount,\n              countStatus === \"warning\" && styles.charCountWarning,\n              countStatus === \"error\" && styles.charCountError,\n            )}>\n            {charCount}/{maxLength}\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nTextarea.displayName = \"Textarea\";\n",".wrapper {\n  --_input-border-color: var(--finra-color-border);\n\n  display: inline-flex;\n  align-items: center;\n  block-size: var(--finra-density-size-base);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  line-height: var(--finra-leading-normal);\n  background-color: var(--finra-color-background);\n  border: var(--finra-border-thin) solid var(--_input-border-color);\n  border-radius: var(--finra-radius-md);\n  transition: border-color var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  &:focus-within {\n    --_input-border-color: var(--finra-color-primary-500);\n  }\n\n  &.disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n    background-color: var(--finra-color-neutral-50);\n  }\n\n  &.fullWidth {\n    inline-size: 100%;\n  }\n\n  //  Variants\n  &.variantPrimary {\n    border-width: var(--finra-border-thin);\n  }\n\n  &.variantSecondary {\n    border-width: var(--finra-border-thin);\n    background-color: var(--finra-color-neutral-50);\n  }\n\n  &.variantTertiary {\n    border-color: var(--finra-color-transparent);\n    border-block-end-color: var(--_input-border-color);\n    border-radius: 0;\n\n    &:focus-within {\n      border-block-end-color: var(--finra-color-primary-500);\n      box-shadow: none;\n    }\n  }\n\n  //  Validation status\n  &.statusError {\n    --_input-border-color: var(--finra-color-error);\n  }\n\n  &.statusWarning {\n    --_input-border-color: var(--finra-color-warning);\n  }\n\n  &.statusSuccess {\n    --_input-border-color: var(--finra-color-success);\n  }\n}\n\n.field {\n  flex: 1;\n  min-inline-size: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  font: inherit;\n  color: var(--finra-color-foreground);\n  text-align: center;\n  font-variant-numeric: var(--finra-font-tabular-nums);\n  padding: 0;\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  // Hide native number spinners\n  &::-webkit-inner-spin-button,\n  &::-webkit-outer-spin-button {\n    appearance: none;\n    margin: 0;\n  }\n\n  &::placeholder {\n    color: var(--finra-color-neutral-400);\n  }\n\n  &:disabled {\n    cursor: var(--finra-cursor-disabled);\n  }\n}\n\n.stepButton {\n  --_step-color: var(--finra-color-neutral-600);\n  --_step-hover-bg: var(--finra-color-neutral-100);\n  --_step-hover-color: var(--finra-color-foreground);\n  --_step-active-bg: var(--finra-color-neutral-200);\n\n  :where([data-theme=\"dark\"]) & {\n    --_step-color: var(--finra-color-neutral-400);\n    --_step-hover-bg: var(--finra-color-neutral-700);\n    --_step-active-bg: var(--finra-color-neutral-600);\n  }\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--_step-color);\n  cursor: var(--finra-cursor-pointer);\n  inline-size: var(--finra-density-size-base);\n  block-size: 100%;\n  flex-shrink: 0;\n  transition:\n    background-color var(--finra-duration-fast) ease-in-out,\n    color var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  &:hover:not(:disabled) {\n    background-color: var(--_step-hover-bg);\n    color: var(--_step-hover-color);\n  }\n\n  &:active:not(:disabled) {\n    background-color: var(--_step-active-bg);\n  }\n\n  &:disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n  }\n\n  > svg {\n    inline-size: var(--finra-density-icon-size);\n    block-size: var(--finra-density-icon-size);\n  }\n\n  // Round the outer corners to match wrapper\n  &:first-child {\n    border-start-start-radius: var(--finra-radius-md);\n    border-end-start-radius: var(--finra-radius-md);\n  }\n\n  &:last-child {\n    border-start-end-radius: var(--finra-radius-md);\n    border-end-end-radius: var(--finra-radius-md);\n  }\n}\n","import { cva, type VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  forwardRef,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { MinusIcon, PlusIcon } from \"../../assets/icons\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport type { ValidationStatus } from \"../Input/Input\";\nimport styles from \"./NumberInput.module.scss\";\n\nconst numberInputVariants = cva(styles.wrapper, {\n  variants: {\n    variant: {\n      primary: styles.variantPrimary,\n      secondary: styles.variantSecondary,\n      tertiary: styles.variantTertiary,\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n  },\n});\n\nconst validationClasses: Record<ValidationStatus, string> = {\n  error: styles.statusError,\n  warning: styles.statusWarning,\n  success: styles.statusSuccess,\n};\n\nexport interface NumberInputProps\n  extends\n    Omit<\n      InputHTMLAttributes<HTMLInputElement>,\n      \"type\" | \"size\" | \"onChange\" | \"value\" | \"defaultValue\" | \"min\" | \"max\" | \"step\"\n    >,\n    VariantProps<typeof numberInputVariants> {\n  validationStatus?: ValidationStatus;\n  value?: number | \"\";\n  defaultValue?: number;\n  min?: number;\n  max?: number;\n  step?: number;\n  precision?: number;\n  onChange?: (value: number | undefined) => void;\n  fullWidth?: boolean;\n}\n\nfunction clampValue(val: number, min?: number, max?: number): number {\n  let result = val;\n  if (min !== undefined) result = Math.max(result, min);\n  if (max !== undefined) result = Math.min(result, max);\n  return result;\n}\n\nfunction formatValue(val: number, precision?: number): string {\n  if (precision !== undefined) return val.toFixed(precision);\n  return String(val);\n}\n\nexport const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      className,\n      variant,\n      validationStatus,\n      value: controlledValue,\n      defaultValue,\n      min,\n      max,\n      step = 1,\n      precision,\n      onChange,\n      fullWidth,\n      disabled,\n      readOnly,\n      ...props\n    },\n    ref,\n  ) => {\n    const internalRef = useRef<HTMLInputElement>(null);\n    const inputRef = (ref as React.RefObject<HTMLInputElement>) || internalRef;\n\n    const isControlled = controlledValue !== undefined;\n    const [internalValue, setInternalValue] = useState<string>(() =>\n      defaultValue !== undefined ? formatValue(defaultValue, precision) : \"\",\n    );\n\n    const displayValue = isControlled\n      ? controlledValue === \"\"\n        ? \"\"\n        : formatValue(controlledValue as number, precision)\n      : internalValue;\n\n    // Sync display when controlled value changes\n    useEffect(() => {\n      if (isControlled && controlledValue !== \"\") {\n        setInternalValue(formatValue(controlledValue as number, precision));\n      }\n    }, [controlledValue, precision, isControlled]);\n\n    const commitValue = useCallback(\n      (raw: number) => {\n        const clamped = clampValue(raw, min, max);\n        const display = formatValue(clamped, precision);\n        if (!isControlled) setInternalValue(display);\n        onChange?.(clamped);\n      },\n      [min, max, precision, isControlled, onChange],\n    );\n\n    const stepValue = useCallback(\n      (direction: 1 | -1) => {\n        const current = parseFloat(displayValue as string) || 0;\n        commitValue(current + step * direction);\n      },\n      [displayValue, step, commitValue],\n    );\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        const raw = e.target.value;\n        // Allow empty, minus sign, or valid partial numbers while typing\n        if (raw === \"\" || raw === \"-\" || raw === \".\") {\n          if (!isControlled) setInternalValue(raw);\n          if (raw === \"\") onChange?.(undefined);\n          return;\n        }\n        const num = parseFloat(raw);\n        if (!isNaN(num)) {\n          if (!isControlled) setInternalValue(raw);\n          onChange?.(num);\n        }\n      },\n      [isControlled, onChange],\n    );\n\n    const handleBlur = useCallback(() => {\n      const num = parseFloat(displayValue as string);\n      if (isNaN(num)) {\n        if (!isControlled) setInternalValue(\"\");\n        onChange?.(undefined);\n      } else {\n        commitValue(num);\n      }\n    }, [displayValue, isControlled, onChange, commitValue]);\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === \"ArrowUp\") {\n          e.preventDefault();\n          stepValue(1);\n        } else if (e.key === \"ArrowDown\") {\n          e.preventDefault();\n          stepValue(-1);\n        }\n      },\n      [stepValue],\n    );\n\n    return (\n      <div\n        {...{ [FINRA_UI_ATTR]: componentIds.numberInput }}\n        className={clsx(\n          numberInputVariants({ variant }),\n          validationStatus && validationClasses[validationStatus],\n          disabled && styles.disabled,\n          fullWidth && styles.fullWidth,\n          className,\n        )}>\n        <button\n          type=\"button\"\n          {...{ [FINRA_UI_ATTR]: componentIds.numberInputDecrement }}\n          className={styles.stepButton}\n          onClick={() => stepValue(-1)}\n          disabled={\n            disabled ||\n            readOnly ||\n            (min !== undefined && (parseFloat(displayValue as string) || 0) <= min)\n          }\n          aria-label=\"Decrement\"\n          tabIndex={-1}>\n          <MinusIcon />\n        </button>\n        <input\n          ref={inputRef}\n          {...{ [FINRA_UI_ATTR]: componentIds.numberInputField }}\n          className={styles.field}\n          inputMode=\"decimal\"\n          value={displayValue}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n          disabled={disabled}\n          readOnly={readOnly}\n          role=\"spinbutton\"\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-valuenow={\n            typeof displayValue === \"string\" ? parseFloat(displayValue) || undefined : displayValue\n          }\n          {...props}\n        />\n        <button\n          type=\"button\"\n          {...{ [FINRA_UI_ATTR]: componentIds.numberInputIncrement }}\n          className={styles.stepButton}\n          onClick={() => stepValue(1)}\n          disabled={\n            disabled ||\n            readOnly ||\n            (max !== undefined && (parseFloat(displayValue as string) || 0) >= max)\n          }\n          aria-label=\"Increment\"\n          tabIndex={-1}>\n          <PlusIcon />\n        </button>\n      </div>\n    );\n  },\n);\n\nNumberInput.displayName = \"NumberInput\";\n",".formField {\n  display: flex;\n  flex-direction: column;\n  gap: calc(var(--finra-density-gap) * 0.5);\n\n  &.fullWidth {\n    inline-size: 100%;\n\n    // Make child inputs stretch\n    > [data-finra-ui] {\n      inline-size: 100%;\n    }\n  }\n\n  &.disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n  }\n}\n\n.label {\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-text-sm);\n  font-weight: var(--finra-font-medium);\n  color: var(--finra-color-foreground);\n  line-height: var(--finra-leading-normal);\n\n  &.required::after {\n    content: \" *\";\n    color: var(--finra-color-error);\n  }\n}\n\n.helperText {\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-text-xs);\n  color: var(--finra-color-neutral-500);\n  line-height: var(--finra-leading-normal);\n  margin: 0;\n}\n\n.errorMessage {\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-text-xs);\n  color: var(--finra-color-error);\n  line-height: var(--finra-leading-normal);\n  margin: 0;\n}\n","import { clsx } from \"clsx\";\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  useId,\n} from \"react\";\n\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport type { ValidationStatus } from \"../Input/Input\";\nimport styles from \"./FormField.module.scss\";\n\nexport interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {\n  label: string;\n  helperText?: string;\n  errorMessage?: string;\n  validationStatus?: ValidationStatus;\n  required?: boolean;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  /** Explicit id for the input element. Auto-generated if omitted. */\n  htmlFor?: string;\n  children: ReactNode;\n  className?: string;\n}\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n  (\n    {\n      className,\n      label,\n      helperText,\n      errorMessage,\n      validationStatus,\n      required,\n      fullWidth,\n      disabled,\n      htmlFor,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const autoId = useId();\n    const fieldId = htmlFor ?? autoId;\n    const helperId = `${fieldId}-helper`;\n    const errorId = `${fieldId}-error`;\n\n    const showError = validationStatus === \"error\" && errorMessage;\n\n    // Build aria-describedby from present elements\n    const describedBy =\n      [showError ? errorId : undefined, helperText ? helperId : undefined]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n\n    // Clone children to inject a11y props\n    const enhancedChildren = Children.map(children, (child) => {\n      if (!isValidElement(child)) return child;\n      return cloneElement(child as React.ReactElement<Record<string, unknown>>, {\n        id: fieldId,\n        \"aria-describedby\": describedBy,\n        \"aria-invalid\": validationStatus === \"error\" ? true : undefined,\n        disabled: disabled || undefined,\n      });\n    });\n\n    return (\n      <div\n        ref={ref}\n        {...{ [FINRA_UI_ATTR]: componentIds.formField }}\n        className={clsx(\n          styles.formField,\n          fullWidth && styles.fullWidth,\n          disabled && styles.disabled,\n          className,\n        )}\n        {...props}>\n        <label\n          {...{ [FINRA_UI_ATTR]: componentIds.formFieldLabel }}\n          htmlFor={fieldId}\n          className={clsx(styles.label, required && styles.required)}>\n          {label}\n        </label>\n\n        {enhancedChildren}\n\n        {showError ? (\n          <p\n            {...{ [FINRA_UI_ATTR]: componentIds.formFieldError }}\n            id={errorId}\n            className={styles.errorMessage}\n            role=\"alert\">\n            {errorMessage}\n          </p>\n        ) : null}\n\n        {helperText ? (\n          <p\n            {...{ [FINRA_UI_ATTR]: componentIds.formFieldHelper }}\n            id={helperId}\n            className={styles.helperText}>\n            {helperText}\n          </p>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nFormField.displayName = \"FormField\";\n",".checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--finra-density-gap);\n  cursor: var(--finra-cursor-pointer);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  line-height: var(--finra-leading-normal);\n  color: var(--finra-color-foreground);\n\n  &.disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n  }\n}\n\n.input {\n  position: absolute;\n  opacity: 0;\n  inline-size: 0;\n  block-size: 0;\n  margin: 0;\n  padding: 0;\n  pointer-events: none;\n\n  &:checked + .indicator {\n    background-color: var(--finra-color-primary-600);\n    border-color: var(--finra-color-primary-600);\n    color: var(--finra-color-white);\n\n    > svg {\n      opacity: 1;\n    }\n  }\n\n  &:focus-visible + .indicator {\n    outline: var(--finra-focus-width) solid var(--finra-focus-color);\n    outline-offset: var(--finra-focus-offset);\n  }\n\n  &[data-indeterminate] + .indicator {\n    background-color: var(--finra-color-primary-600);\n    border-color: var(--finra-color-primary-600);\n    color: var(--finra-color-white);\n\n    > svg {\n      opacity: 1;\n    }\n  }\n}\n\n.indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: var(--finra-density-checkbox-size);\n  block-size: var(--finra-density-checkbox-size);\n  border: var(--finra-border-thin) solid var(--finra-color-border);\n  border-radius: var(--finra-radius-md);\n  background-color: var(--finra-color-background);\n  color: var(--finra-color-white);\n  flex-shrink: 0;\n  transition:\n    background-color var(--finra-duration-fast) ease-in-out,\n    border-color var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  > svg {\n    inline-size: 70%;\n    block-size: 70%;\n    opacity: 0;\n  }\n}\n\n.label {\n  user-select: none;\n}\n","import { clsx } from \"clsx\";\nimport { forwardRef, useEffect, useRef } from \"react\";\n\nimport { CheckIcon, DashIcon } from \"../../assets/icons\";\nimport { CheckboxBase, type CheckboxBaseProps } from \"../../unstyled/Checkbox/Checkbox\";\nimport { mergeRefs } from \"../../utils/mergeRefs\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./Checkbox.module.scss\";\n\nexport interface CheckboxProps extends Omit<CheckboxBaseProps, \"className\"> {\n  label?: string;\n  className?: string;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, label, indeterminate, disabled, ...props }, forwardedRef) => {\n    const internalRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (internalRef.current) {\n        internalRef.current.indeterminate = indeterminate ?? false;\n      }\n    }, [indeterminate]);\n\n    return (\n      <label\n        {...{ [FINRA_UI_ATTR]: componentIds.checkbox }}\n        className={clsx(styles.checkbox, disabled && styles.disabled, className)}>\n        <CheckboxBase\n          ref={mergeRefs(forwardedRef, internalRef)}\n          className={styles.input}\n          disabled={disabled}\n          data-indeterminate={indeterminate || undefined}\n          {...props}\n        />\n        <span\n          className={styles.indicator}\n          aria-hidden=\"true\"\n          {...{ [FINRA_UI_ATTR]: componentIds.checkboxIndicator }}>\n          {indeterminate ? <DashIcon /> : <CheckIcon />}\n        </span>\n        {label ? (\n          <span className={styles.label} {...{ [FINRA_UI_ATTR]: componentIds.checkboxLabel }}>\n            {label}\n          </span>\n        ) : null}\n      </label>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n",".switch {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--finra-density-gap);\n  cursor: var(--finra-cursor-pointer);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  line-height: var(--finra-leading-normal);\n  color: var(--finra-color-foreground);\n\n  &.disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n  }\n}\n\n.input {\n  position: absolute;\n  opacity: 0;\n  inline-size: 0;\n  block-size: 0;\n  margin: 0;\n  padding: 0;\n  pointer-events: none;\n\n  &:checked + .track {\n    background-color: var(--finra-color-primary-600);\n    border-color: var(--finra-color-primary-600);\n\n    > .thumb {\n      inset-inline-start: calc(\n        var(--finra-density-switch-track-width) - var(--finra-density-switch-thumb-size) - 2px\n      );\n    }\n  }\n\n  &:focus-visible + .track {\n    outline: var(--finra-focus-width) solid var(--finra-focus-color);\n    outline-offset: var(--finra-focus-offset);\n  }\n}\n\n.track {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  inline-size: var(--finra-density-switch-track-width);\n  block-size: var(--finra-density-switch-track-height);\n  border-radius: var(--finra-radius-full);\n  background-color: var(--finra-color-neutral-300);\n  border: var(--finra-border-thin) solid var(--finra-color-border);\n  flex-shrink: 0;\n  transition:\n    background-color var(--finra-duration-fast) ease-in-out,\n    border-color var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n}\n\n.thumb {\n  position: absolute;\n  inset-inline-start: 2px;\n  inline-size: var(--finra-density-switch-thumb-size);\n  block-size: var(--finra-density-switch-thumb-size);\n  border-radius: var(--finra-radius-full);\n  background-color: var(--finra-color-white);\n  box-shadow: var(--finra-shadow-sm);\n  transition: inset-inline-start var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n}\n\n.label {\n  user-select: none;\n}\n","import { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport { SwitchBase, type SwitchBaseProps } from \"../../unstyled/Switch/Switch\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./Switch.module.scss\";\n\nexport interface SwitchProps extends Omit<SwitchBaseProps, \"className\"> {\n  label?: string;\n  className?: string;\n}\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n  ({ className, label, disabled, ...props }, ref) => {\n    return (\n      <label\n        {...{ [FINRA_UI_ATTR]: componentIds.switch }}\n        className={clsx(styles.switch, disabled && styles.disabled, className)}>\n        <SwitchBase ref={ref} className={styles.input} disabled={disabled} {...props} />\n        <span\n          className={styles.track}\n          aria-hidden=\"true\"\n          {...{ [FINRA_UI_ATTR]: componentIds.switchTrack }}>\n          <span className={styles.thumb} {...{ [FINRA_UI_ATTR]: componentIds.switchThumb }} />\n        </span>\n        {label ? (\n          <span className={styles.label} {...{ [FINRA_UI_ATTR]: componentIds.switchLabel }}>\n            {label}\n          </span>\n        ) : null}\n      </label>\n    );\n  },\n);\n\nSwitch.displayName = \"Switch\";\n",".radio {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--finra-density-gap);\n  cursor: var(--finra-cursor-pointer);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  line-height: var(--finra-leading-normal);\n  color: var(--finra-color-foreground);\n\n  &.disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n  }\n}\n\n.input {\n  position: absolute;\n  opacity: 0;\n  inline-size: 0;\n  block-size: 0;\n  margin: 0;\n  padding: 0;\n  pointer-events: none;\n\n  &:checked + .indicator {\n    border-color: var(--finra-color-primary-600);\n\n    > .dot {\n      transform: scale(1);\n    }\n  }\n\n  &:focus-visible + .indicator {\n    outline: var(--finra-focus-width) solid var(--finra-focus-color);\n    outline-offset: var(--finra-focus-offset);\n  }\n}\n\n.indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: var(--finra-density-checkbox-size);\n  block-size: var(--finra-density-checkbox-size);\n  border: var(--finra-border-thin) solid var(--finra-color-border);\n  border-radius: var(--finra-radius-full);\n  background-color: var(--finra-color-background);\n  flex-shrink: 0;\n  transition: border-color var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n}\n\n.dot {\n  inline-size: 50%;\n  block-size: 50%;\n  border-radius: var(--finra-radius-full);\n  background-color: var(--finra-color-primary-600);\n  transform: scale(0);\n  transition: transform var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n}\n\n.label {\n  user-select: none;\n}\n","import { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport { RadioButtonBase, type RadioButtonBaseProps } from \"../../unstyled/RadioButton/RadioButton\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./RadioButton.module.scss\";\n\nexport interface RadioButtonProps extends Omit<RadioButtonBaseProps, \"className\"> {\n  label?: string;\n  className?: string;\n}\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\n  ({ className, label, disabled, ...props }, ref) => {\n    return (\n      <label\n        {...{ [FINRA_UI_ATTR]: componentIds.radioButton }}\n        className={clsx(styles.radio, disabled && styles.disabled, className)}>\n        <RadioButtonBase ref={ref} className={styles.input} disabled={disabled} {...props} />\n        <span\n          className={styles.indicator}\n          aria-hidden=\"true\"\n          {...{ [FINRA_UI_ATTR]: componentIds.radioButtonIndicator }}>\n          <span className={styles.dot} />\n        </span>\n        {label ? (\n          <span className={styles.label} {...{ [FINRA_UI_ATTR]: componentIds.radioButtonLabel }}>\n            {label}\n          </span>\n        ) : null}\n      </label>\n    );\n  },\n);\n\nRadioButton.displayName = \"RadioButton\";\n",".slider {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--finra-density-gap);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  line-height: var(--finra-leading-normal);\n  color: var(--finra-color-foreground);\n  cursor: var(--finra-cursor-pointer);\n\n  &.disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n  }\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--finra-density-gap);\n}\n\n.label {\n  user-select: none;\n}\n\n.value {\n  font-variant-numeric: var(--finra-font-tabular-nums);\n  color: var(--finra-color-neutral-500);\n  font-size: var(--finra-text-xs);\n}\n\n.input {\n  appearance: none;\n  inline-size: 100%;\n  block-size: 4px;\n  border-radius: var(--finra-radius-full);\n  background-color: var(--finra-color-neutral-200);\n  outline: none;\n  cursor: inherit;\n  transition: background-color var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  //  Thumb - WebKit\n  &::-webkit-slider-thumb {\n    appearance: none;\n    inline-size: var(--finra-density-slider-thumb-size);\n    block-size: var(--finra-density-slider-thumb-size);\n    border-radius: var(--finra-radius-full);\n    background-color: var(--finra-color-primary-600);\n    border: var(--finra-border-medium) solid var(--finra-color-white);\n    box-shadow: var(--finra-shadow-sm);\n    cursor: inherit;\n    transition: background-color var(--finra-duration-fast) ease-in-out;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &::-webkit-slider-thumb:hover {\n    background-color: var(--finra-color-primary-700);\n  }\n\n  //  Thumb - Firefox\n  &::-moz-range-thumb {\n    inline-size: var(--finra-density-slider-thumb-size);\n    block-size: var(--finra-density-slider-thumb-size);\n    border-radius: var(--finra-radius-full);\n    background-color: var(--finra-color-primary-600);\n    border: var(--finra-border-medium) solid var(--finra-color-white);\n    box-shadow: var(--finra-shadow-sm);\n    cursor: inherit;\n    transition: background-color var(--finra-duration-fast) ease-in-out;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &::-moz-range-thumb:hover {\n    background-color: var(--finra-color-primary-700);\n  }\n\n  //  Track - Firefox\n  &::-moz-range-track {\n    background-color: var(--finra-color-neutral-200);\n    block-size: 4px;\n    border-radius: var(--finra-radius-full);\n  }\n\n  //  Focus\n  &:focus-visible {\n    &::-webkit-slider-thumb {\n      outline: var(--finra-focus-width) solid var(--finra-focus-color);\n      outline-offset: var(--finra-focus-offset);\n    }\n\n    &::-moz-range-thumb {\n      outline: var(--finra-focus-width) solid var(--finra-focus-color);\n      outline-offset: var(--finra-focus-offset);\n    }\n  }\n\n  //  Disabled\n  &:disabled {\n    &::-webkit-slider-thumb {\n      background-color: var(--finra-color-neutral-400);\n    }\n\n    &::-moz-range-thumb {\n      background-color: var(--finra-color-neutral-400);\n    }\n  }\n}\n","import { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport { SliderBase, type SliderBaseProps } from \"../../unstyled/Slider/Slider\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./Slider.module.scss\";\n\nexport interface SliderProps extends Omit<SliderBaseProps, \"className\"> {\n  label?: string;\n  showValue?: boolean;\n  className?: string;\n}\n\nexport const Slider = forwardRef<HTMLInputElement, SliderProps>(\n  ({ className, label, showValue, disabled, value, defaultValue, ...props }, ref) => {\n    const displayValue = value ?? defaultValue ?? \"\";\n\n    return (\n      <label\n        {...{ [FINRA_UI_ATTR]: componentIds.slider }}\n        className={clsx(styles.slider, disabled && styles.disabled, className)}>\n        {label || showValue ? (\n          <span className={styles.header} {...{ [FINRA_UI_ATTR]: componentIds.sliderHeader }}>\n            {label ? <span className={styles.label}>{label}</span> : null}\n            {showValue ? <span className={styles.value}>{displayValue}</span> : null}\n          </span>\n        ) : null}\n        <SliderBase\n          ref={ref}\n          className={styles.input}\n          disabled={disabled}\n          value={value}\n          defaultValue={defaultValue}\n          {...props}\n        />\n      </label>\n    );\n  },\n);\n\nSlider.displayName = \"Slider\";\n",".pillInput {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: calc(var(--finra-density-gap) * 0.5);\n  min-block-size: var(--finra-density-size-base);\n  padding-inline: var(--finra-density-input-padding-x);\n  padding-block: calc(var(--finra-density-gap) * 0.25);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  line-height: var(--finra-leading-normal);\n  background-color: var(--finra-color-background);\n  border: var(--finra-border-thin) solid var(--finra-color-border);\n  border-radius: var(--finra-radius-md);\n  cursor: var(--finra-cursor-text);\n  transition: border-color var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  &:focus-within {\n    border-color: var(--finra-color-primary-500);\n  }\n\n  &.disabled {\n    cursor: var(--finra-cursor-disabled);\n    background-color: var(--finra-color-neutral-50);\n    color: var(--finra-color-neutral-500);\n    border-color: var(--finra-color-neutral-200);\n  }\n}\n\n.pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.125rem;\n  block-size: var(--finra-density-size-compact);\n  padding-inline: var(--finra-density-gap);\n  background-color: var(--finra-color-neutral-100);\n  border: var(--finra-border-thin) solid var(--finra-color-neutral-200);\n  border-radius: var(--finra-radius-full);\n  font-size: var(--finra-text-xs);\n  color: var(--finra-color-neutral-900);\n  user-select: none;\n  flex-shrink: 0;\n}\n\n.pillText {\n  max-inline-size: 10rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pillRemove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--finra-color-neutral-400);\n  cursor: var(--finra-cursor-pointer);\n  border-radius: var(--finra-radius-full);\n  flex-shrink: 0;\n\n  &:hover {\n    color: var(--finra-color-foreground);\n  }\n\n  > svg {\n    inline-size: 0.75rem;\n    block-size: 0.75rem;\n  }\n}\n\n.input {\n  flex: 1;\n  min-inline-size: 4rem;\n  border: none;\n  outline: none;\n  background: transparent;\n  font: inherit;\n  color: var(--finra-color-foreground);\n  padding: 0;\n\n  // Override global :focus-visible - wrapper handles focus indication\n  &:focus-visible {\n    outline: none;\n  }\n\n  &::placeholder {\n    color: var(--finra-color-neutral-400);\n  }\n\n  &:disabled {\n    cursor: var(--finra-cursor-disabled);\n  }\n}\n","import { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { CloseSmallIcon } from \"../../assets/icons\";\nimport { mergeRefs } from \"../../utils/mergeRefs\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./PillInput.module.scss\";\n\nexport interface PillInputProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Current list of pills (controlled). */\n  values?: string[];\n  /** Called when the pill list changes. */\n  onChange?: (values: string[]) => void;\n  /** Placeholder shown when no pills and input is empty. */\n  placeholder?: string;\n  /** Disable the entire component. */\n  disabled?: boolean;\n  /** Maximum number of pills allowed. */\n  maxPills?: number;\n  /** Characters that trigger pill creation (default: Enter). */\n  delimiters?: string[];\n}\n\nexport const PillInput = forwardRef<HTMLInputElement, PillInputProps>(\n  (\n    {\n      className,\n      values: controlledValues,\n      onChange,\n      placeholder,\n      disabled,\n      maxPills,\n      delimiters = [],\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const [internalValues, setInternalValues] = useState<string[]>([]);\n    const [inputValue, setInputValue] = useState(\"\");\n    const internalRef = useRef<HTMLInputElement>(null);\n\n    const values = controlledValues ?? internalValues;\n\n    const updateValues = useCallback(\n      (next: string[]) => {\n        if (!controlledValues) {\n          setInternalValues(next);\n        }\n        onChange?.(next);\n      },\n      [controlledValues, onChange],\n    );\n\n    const addPill = useCallback(\n      (text: string) => {\n        const trimmed = text.trim();\n        if (!trimmed) return;\n        if (values.includes(trimmed)) return;\n        if (maxPills != null && values.length >= maxPills) return;\n        updateValues([...values, trimmed]);\n        setInputValue(\"\");\n      },\n      [values, maxPills, updateValues],\n    );\n\n    const removePill = useCallback(\n      (index: number) => {\n        updateValues(values.filter((_, i) => i !== index));\n        internalRef.current?.focus();\n      },\n      [values, updateValues],\n    );\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === \"Enter\") {\n          e.preventDefault();\n          addPill(inputValue);\n          return;\n        }\n        if (e.key === \"Backspace\" && inputValue === \"\" && values.length > 0) {\n          removePill(values.length - 1);\n          return;\n        }\n        if (delimiters.includes(e.key)) {\n          e.preventDefault();\n          addPill(inputValue);\n        }\n      },\n      [inputValue, values, delimiters, addPill, removePill],\n    );\n\n    const handleContainerClick = useCallback(() => {\n      if (!disabled) {\n        internalRef.current?.focus();\n      }\n    }, [disabled]);\n\n    const handleContainerKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!disabled && (e.key === \"Enter\" || e.key === \" \")) {\n          internalRef.current?.focus();\n        }\n      },\n      [disabled],\n    );\n\n    return (\n      <div\n        {...{ [FINRA_UI_ATTR]: componentIds.pillInput }}\n        role=\"toolbar\"\n        className={clsx(styles.pillInput, disabled && styles.disabled, className)}\n        onClick={handleContainerClick}\n        onKeyDown={handleContainerKeyDown}\n        {...props}>\n        {values.map((pill) => (\n          <span key={pill} className={styles.pill}>\n            <span className={styles.pillText}>{pill}</span>\n            {!disabled ? (\n              <button\n                type=\"button\"\n                className={styles.pillRemove}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  removePill(values.indexOf(pill));\n                }}\n                aria-label={`Remove ${pill}`}\n                tabIndex={-1}>\n                <CloseSmallIcon />\n              </button>\n            ) : null}\n          </span>\n        ))}\n        <input\n          ref={mergeRefs(forwardedRef, internalRef)}\n          className={styles.input}\n          type=\"text\"\n          value={inputValue}\n          onChange={(e) => setInputValue(e.target.value)}\n          onKeyDown={handleKeyDown}\n          placeholder={values.length === 0 ? placeholder : undefined}\n          disabled={disabled}\n          aria-label={props[\"aria-label\"]}\n          aria-labelledby={props[\"aria-labelledby\"]}\n        />\n      </div>\n    );\n  },\n);\n\nPillInput.displayName = \"PillInput\";\n",".dropZone {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-block-size: 8rem;\n  padding: var(--finra-spacing-6);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  line-height: var(--finra-leading-normal);\n  color: var(--finra-color-neutral-500);\n  background-color: var(--finra-color-background);\n  border: var(--finra-border-medium) dashed var(--finra-color-border);\n  border-radius: var(--finra-radius-lg);\n  cursor: var(--finra-cursor-pointer);\n  transition:\n    border-color var(--finra-duration-fast) ease-in-out,\n    background-color var(--finra-duration-fast) ease-in-out;\n  user-select: none;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  &:hover {\n    border-color: var(--finra-color-primary-400);\n    background-color: var(--finra-color-primary-50);\n  }\n\n  &:focus-visible {\n    outline: var(--finra-focus-width) solid var(--finra-focus-color);\n    outline-offset: var(--finra-focus-offset);\n  }\n\n  &.dragOver {\n    border-color: var(--finra-color-primary-500);\n    background-color: var(--finra-color-primary-50);\n  }\n\n  &.disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n\n    &:hover {\n      border-color: var(--finra-color-border);\n      background-color: var(--finra-color-background);\n    }\n  }\n}\n\n.input {\n  position: absolute;\n  inline-size: 0;\n  block-size: 0;\n  overflow: hidden;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--finra-density-gap);\n  text-align: center;\n}\n\n.icon {\n  inline-size: 2rem;\n  block-size: 2rem;\n  color: var(--finra-color-neutral-400);\n}\n\n.text {\n  color: var(--finra-color-neutral-500);\n}\n","import { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type DragEvent,\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { UploadIcon } from \"../../assets/icons\";\nimport { mergeRefs } from \"../../utils/mergeRefs\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./FileDropZone.module.scss\";\n\nexport interface FileDropZoneProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Called with selected files. */\n  onChange?: (files: File[]) => void;\n  /** Accepted file types (e.g. \".pdf,.csv\" or \"image/*\"). */\n  accept?: string;\n  /** Allow multiple file selection. */\n  multiple?: boolean;\n  /** Disable the component. */\n  disabled?: boolean;\n  /** Custom content inside the drop zone. */\n  children?: ReactNode;\n}\n\nexport const FileDropZone = forwardRef<HTMLInputElement, FileDropZoneProps>(\n  ({ className, onChange, accept, multiple, disabled, children, ...props }, forwardedRef) => {\n    const [isDragOver, setIsDragOver] = useState(false);\n    const internalRef = useRef<HTMLInputElement>(null);\n\n    const handleFiles = useCallback(\n      (fileList: FileList | null) => {\n        if (!fileList || fileList.length === 0) return;\n        onChange?.(Array.from(fileList));\n      },\n      [onChange],\n    );\n\n    const handleDragOver = useCallback(\n      (e: DragEvent<HTMLDivElement>) => {\n        e.preventDefault();\n        if (!disabled) {\n          setIsDragOver(true);\n        }\n      },\n      [disabled],\n    );\n\n    const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      setIsDragOver(false);\n    }, []);\n\n    const handleDrop = useCallback(\n      (e: DragEvent<HTMLDivElement>) => {\n        e.preventDefault();\n        setIsDragOver(false);\n        if (!disabled) {\n          handleFiles(e.dataTransfer.files);\n        }\n      },\n      [disabled, handleFiles],\n    );\n\n    const handleInputChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        handleFiles(e.target.files);\n        // Reset so the same file can be selected again\n        e.target.value = \"\";\n      },\n      [handleFiles],\n    );\n\n    const handleClick = useCallback(() => {\n      if (!disabled) {\n        internalRef.current?.click();\n      }\n    }, [disabled]);\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!disabled && (e.key === \"Enter\" || e.key === \" \")) {\n          e.preventDefault();\n          internalRef.current?.click();\n        }\n      },\n      [disabled],\n    );\n\n    return (\n      <>\n        <input\n          ref={mergeRefs(forwardedRef, internalRef)}\n          type=\"file\"\n          className={styles.input}\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          onChange={handleInputChange}\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          {...{ [FINRA_UI_ATTR]: componentIds.fileDropZoneInput }}\n        />\n        <div\n          {...{ [FINRA_UI_ATTR]: componentIds.fileDropZone }}\n          role=\"button\"\n          tabIndex={disabled ? -1 : 0}\n          aria-disabled={disabled || undefined}\n          className={clsx(\n            styles.dropZone,\n            isDragOver && styles.dragOver,\n            disabled && styles.disabled,\n            className,\n          )}\n          onClick={handleClick}\n          onKeyDown={handleKeyDown}\n          onDragOver={handleDragOver}\n          onDragLeave={handleDragLeave}\n          onDrop={handleDrop}\n          {...props}>\n          {children ?? (\n            <div className={styles.content}>\n              <UploadIcon className={styles.icon} aria-hidden=\"true\" />\n              <span className={styles.text}>Drop files here or click to browse</span>\n            </div>\n          )}\n        </div>\n      </>\n    );\n  },\n);\n\nFileDropZone.displayName = \"FileDropZone\";\n","import { clsx } from \"clsx\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport type { CalendarBaseProps, CalendarClassNames } from \"../../unstyled/Calendar/Calendar\";\nimport { CalendarBase } from \"../../unstyled/Calendar/Calendar\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./Calendar.module.scss\";\n\nexport interface CalendarProps extends CalendarBaseProps {\n  /** Additional CSS class on the root element. */\n  className?: string;\n}\n\nconst defaultClassNames: CalendarClassNames = {\n  root: styles.root,\n  header: styles.header,\n  navButton: styles.navButton,\n  title: styles.title,\n  weekdayRow: styles.row,\n  weekday: styles.weekday,\n  grid: styles.grid,\n  row: styles.row,\n  day: styles.day,\n  dayToday: styles.dayToday,\n  daySelected: styles.daySelected,\n  dayDisabled: styles.dayDisabled,\n  dayOutside: styles.dayOutside,\n  footer: styles.footer,\n};\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(\n  ({ className, classNames: userClassNames, ...props }, ref) => {\n    const mergedClassNames = useMemo<CalendarClassNames>(() => {\n      if (!userClassNames)\n        return { ...defaultClassNames, root: clsx(defaultClassNames.root, className) };\n\n      const merged: CalendarClassNames = {};\n      for (const key of Object.keys(defaultClassNames) as (keyof CalendarClassNames)[]) {\n        merged[key] = clsx(defaultClassNames[key], userClassNames[key]);\n      }\n      merged.root = clsx(merged.root, className);\n      return merged;\n    }, [className, userClassNames]);\n\n    return (\n      <CalendarBase\n        ref={ref}\n        classNames={mergedClassNames}\n        dataAttributes={{ [FINRA_UI_ATTR]: componentIds.calendar }}\n        {...props}\n      />\n    );\n  },\n);\n\nCalendar.displayName = \"Calendar\";\n",".wrapper {\n  --_input-border-color: var(--finra-color-border);\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--finra-density-gap);\n  block-size: var(--finra-density-size-base);\n  padding-inline: var(--finra-density-input-padding-x);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  line-height: var(--finra-leading-normal);\n  background-color: var(--finra-color-background);\n  border: var(--finra-border-thin) solid var(--_input-border-color);\n  border-radius: var(--finra-radius-md);\n  transition: border-color var(--finra-duration-fast) ease-in-out;\n  cursor: var(--finra-cursor-text);\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  &:focus-within {\n    --_input-border-color: var(--finra-color-primary-500);\n  }\n\n  //  Disabled\n  &.disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n    background-color: var(--finra-color-neutral-50);\n  }\n\n  //  Full width\n  &.fullWidth {\n    inline-size: 100%;\n  }\n\n  //  Calendar open\n  &.calendarOpen {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  //  Variants\n  &.variantPrimary {\n    border-width: var(--finra-border-thin);\n  }\n\n  &.variantSecondary {\n    border-width: var(--finra-border-thin);\n    background-color: var(--finra-color-neutral-50);\n  }\n\n  &.variantTertiary {\n    border-color: var(--finra-color-transparent);\n    border-block-end-color: var(--_input-border-color);\n    border-radius: 0;\n\n    &:focus-within {\n      border-block-end-color: var(--finra-color-primary-500);\n      box-shadow: none;\n    }\n  }\n\n  //  Validation status\n  &.statusError {\n    --_input-border-color: var(--finra-color-error);\n  }\n\n  &.statusWarning {\n    --_input-border-color: var(--finra-color-warning);\n  }\n\n  &.statusSuccess {\n    --_input-border-color: var(--finra-color-success);\n  }\n}\n\n//  Input field\n.field {\n  flex: 1;\n  min-inline-size: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  font: inherit;\n  color: var(--finra-color-foreground);\n  padding: 0;\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &::placeholder {\n    color: var(--finra-color-neutral-400);\n  }\n\n  &:disabled {\n    cursor: var(--finra-cursor-disabled);\n  }\n}\n\n//  Adornment (calendar icon button)\n.adornment {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--finra-color-neutral-500);\n  cursor: var(--finra-cursor-pointer);\n  flex-shrink: 0;\n  border-radius: var(--finra-radius-sm);\n  transition: color var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  &:hover:not(:disabled) {\n    color: var(--finra-color-foreground);\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--finra-color-primary-500);\n    outline-offset: -2px;\n  }\n\n  &:disabled {\n    cursor: var(--finra-cursor-disabled);\n  }\n\n  > svg {\n    inline-size: var(--finra-density-icon-size);\n    block-size: var(--finra-density-icon-size);\n  }\n}\n\n//  Calendar popup\n// The popup is at least as wide as the trigger (`100%`) but grows to\n// fit the calendar grid (`18rem`).  Consumers who want the popup\n// clamped to exactly the input width can override via:\n//   [data-finra-ui=\"date-input\"] .popup { inline-size: 100%; min-inline-size: 0; }\n.popup {\n  position: absolute;\n  z-index: 50;\n  inset-inline-start: 0;\n  inset-block-start: 100%;\n  min-inline-size: max(100%, 18rem);\n  background-color: var(--finra-color-background);\n  border: var(--finra-border-thin) solid var(--finra-color-border);\n  border-block-start: none;\n  border-end-start-radius: var(--finra-radius-md);\n  border-end-end-radius: var(--finra-radius-md);\n  box-shadow: var(--finra-shadow-lg);\n}\n","import { cva, type VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from \"../../assets/icons\";\nimport type { DateInputBaseProps, DateInputClassNames } from \"../../unstyled/DateInput/DateInput\";\nimport { DateInputBase } from \"../../unstyled/DateInput/DateInput\";\nimport calendarStyles from \"../Calendar/Calendar.module.scss\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport type { ValidationStatus } from \"../Input/Input\";\nimport styles from \"./DateInput.module.scss\";\n\nconst dateInputVariants = cva(styles.wrapper, {\n  variants: {\n    variant: {\n      primary: styles.variantPrimary,\n      secondary: styles.variantSecondary,\n      tertiary: styles.variantTertiary,\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n  },\n});\n\nconst validationClasses: Record<ValidationStatus, string> = {\n  error: styles.statusError,\n  warning: styles.statusWarning,\n  success: styles.statusSuccess,\n};\n\nexport interface DateInputProps\n  extends\n    Omit<\n      DateInputBaseProps,\n      | \"classNames\"\n      | \"dataAttributes\"\n      | \"renderCalendarIcon\"\n      | \"renderCalendarNavPrev\"\n      | \"renderCalendarNavNext\"\n    >,\n    VariantProps<typeof dateInputVariants> {\n  /** Visual validation status. */\n  validationStatus?: ValidationStatus;\n  /** Stretch to fill container width. */\n  fullWidth?: boolean;\n  /** Additional CSS class for the wrapper. */\n  className?: string;\n}\n\nfunction styledCalendarIcon() {\n  return <CalendarIcon aria-hidden=\"true\" {...{ [FINRA_UI_ATTR]: componentIds.calendarIcon }} />;\n}\n\nfunction styledNavPrev() {\n  return <ChevronLeftIcon aria-hidden=\"true\" />;\n}\n\nfunction styledNavNext() {\n  return <ChevronRightIcon aria-hidden=\"true\" />;\n}\n\nexport const DateInput = forwardRef<HTMLInputElement, DateInputProps>(\n  ({ className, variant, validationStatus, fullWidth, disabled, ...props }, ref) => {\n    const classNames = useMemo<DateInputClassNames>(\n      () => ({\n        root: clsx(\n          dateInputVariants({ variant }),\n          validationStatus && validationClasses[validationStatus],\n          disabled && styles.disabled,\n          fullWidth && styles.fullWidth,\n          className,\n        ),\n        calendarOpen: styles.calendarOpen,\n        input: styles.field,\n        adornment: styles.adornment,\n        popup: styles.popup,\n        calendar: {\n          root: calendarStyles.root,\n          header: calendarStyles.header,\n          navButton: calendarStyles.navButton,\n          title: calendarStyles.title,\n          weekdayRow: calendarStyles.weekdayRow,\n          weekday: calendarStyles.weekday,\n          grid: calendarStyles.grid,\n          row: calendarStyles.row,\n          day: calendarStyles.day,\n          dayToday: calendarStyles.dayToday,\n          daySelected: calendarStyles.daySelected,\n          dayDisabled: calendarStyles.dayDisabled,\n          dayOutside: calendarStyles.dayOutside,\n          footer: calendarStyles.footer,\n        },\n      }),\n      [className, variant, validationStatus, fullWidth, disabled],\n    );\n\n    return (\n      <DateInputBase\n        ref={ref}\n        disabled={disabled}\n        classNames={classNames}\n        dataAttributes={{\n          [FINRA_UI_ATTR]: componentIds.dateInput,\n        }}\n        renderCalendarIcon={styledCalendarIcon}\n        renderCalendarNavPrev={styledNavPrev}\n        renderCalendarNavNext={styledNavNext}\n        {...props}\n      />\n    );\n  },\n);\n\nDateInput.displayName = \"DateInput\";\n",".badge {\n  --_badge-accent: var(--finra-color-primary-600);\n  --_badge-accent-subtle: var(--finra-color-primary-50);\n  --_badge-on-accent: var(--finra-color-white);\n\n  //  Dark mode: inverted primary scale is too light for white text\n  :where([data-theme=\"dark\"]) & {\n    --_badge-on-accent: var(--finra-color-neutral-900);\n  }\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-text-xs);\n  font-weight: var(--finra-font-medium);\n  line-height: var(--finra-leading-tight);\n  border-radius: var(--finra-radius-full);\n  white-space: nowrap;\n  padding-inline: var(--finra-density-gap);\n  padding-block: calc(var(--finra-density-gap) * 0.25);\n  border: var(--finra-border-thin) solid var(--finra-color-transparent);\n\n  //  Variants\n\n  &.variantPrimary {\n    background-color: var(--_badge-accent);\n    color: var(--_badge-on-accent);\n    border-color: var(--_badge-accent);\n  }\n\n  &.variantSecondary {\n    background-color: var(--finra-color-transparent);\n    color: var(--_badge-accent);\n    border-color: var(--_badge-accent);\n  }\n\n  &.variantTertiary {\n    background-color: var(--_badge-accent-subtle);\n    color: var(--_badge-accent-text, var(--_badge-accent));\n    border-color: var(--finra-color-transparent);\n  }\n\n  //  Sentiments\n\n  &.sentimentDanger {\n    --_badge-accent: var(--finra-color-error);\n    --_badge-accent-subtle: var(--finra-color-error-subtle);\n    --_badge-accent-text: var(--finra-color-error-hover);\n    --_badge-on-accent: var(--finra-color-white);\n  }\n\n  &.sentimentSuccess {\n    --_badge-accent: var(--finra-color-success);\n    --_badge-accent-subtle: var(--finra-color-success-subtle);\n    --_badge-on-accent: var(--finra-color-white);\n  }\n\n  &.sentimentWarning {\n    --_badge-accent: var(--finra-color-warning);\n    --_badge-accent-subtle: var(--finra-color-warning-subtle);\n    --_badge-on-accent: var(--finra-color-white);\n  }\n\n  &.sentimentInfo {\n    --_badge-accent: var(--finra-color-info);\n    --_badge-accent-subtle: var(--finra-color-info-subtle);\n    --_badge-on-accent: var(--finra-color-white);\n  }\n}\n","import { cva, type VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport type { Sentiment } from \"../../types/variants\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./Badge.module.scss\";\n\nexport type BadgeSentiment = Sentiment;\n\nconst sentimentClasses: Record<BadgeSentiment, string> = {\n  danger: styles.sentimentDanger,\n  success: styles.sentimentSuccess,\n  warning: styles.sentimentWarning,\n  info: styles.sentimentInfo,\n};\n\nconst badgeVariants = cva(styles.badge, {\n  variants: {\n    variant: {\n      primary: styles.variantPrimary,\n      secondary: styles.variantSecondary,\n      tertiary: styles.variantTertiary,\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n  },\n});\n\nexport interface BadgeProps\n  extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {\n  sentiment?: BadgeSentiment;\n  children: ReactNode;\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, variant, sentiment, children, ...props }, ref) => {\n    return (\n      <span\n        ref={ref}\n        {...{ [FINRA_UI_ATTR]: componentIds.badge }}\n        className={clsx(\n          badgeVariants({ variant }),\n          sentiment && sentimentClasses[sentiment],\n          className,\n        )}\n        {...props}>\n        {children}\n      </span>\n    );\n  },\n);\n\nBadge.displayName = \"Badge\";\n",".divider {\n  border: none;\n  margin: 0;\n  flex-shrink: 0;\n  background-color: var(--finra-color-border);\n\n  &.horizontal {\n    inline-size: 100%;\n    block-size: var(--finra-border-thin);\n  }\n\n  &.vertical {\n    block-size: 100%;\n    inline-size: var(--finra-border-thin);\n    align-self: stretch;\n  }\n}\n","import { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\n\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./Divider.module.scss\";\n\nexport interface DividerProps extends HTMLAttributes<HTMLHRElement> {\n  orientation?: \"horizontal\" | \"vertical\";\n  decorative?: boolean;\n  className?: string;\n}\n\nexport const Divider = forwardRef<HTMLHRElement, DividerProps>(\n  ({ className, orientation = \"horizontal\", decorative = false, ...props }, ref) => {\n    return (\n      <hr\n        ref={ref}\n        {...{ [FINRA_UI_ATTR]: componentIds.divider }}\n        className={clsx(\n          styles.divider,\n          orientation === \"vertical\" ? styles.vertical : styles.horizontal,\n          className,\n        )}\n        {...(decorative\n          ? { \"aria-hidden\": true }\n          : { role: \"separator\", \"aria-orientation\": orientation })}\n        {...props}\n      />\n    );\n  },\n);\n\nDivider.displayName = \"Divider\";\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/components/componentIds.ts","../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs","../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.mjs","../src/components/Button/Button.module.scss","../src/components/Button/Button.tsx","../src/components/IconButton/IconButton.module.scss","../src/components/IconButton/IconButton.tsx","../src/components/ButtonGroup/ButtonGroup.module.scss","../src/components/ButtonGroup/ButtonGroup.tsx","../src/components/Input/Input.module.scss","../src/components/Input/Input.tsx","../src/components/Textarea/Textarea.module.scss","../src/components/Textarea/Textarea.tsx","../src/components/NumberInput/NumberInput.module.scss","../src/components/NumberInput/NumberInput.tsx","../src/components/FormField/FormField.module.scss","../src/components/FormField/FormField.tsx","../src/components/Checkbox/Checkbox.module.scss","../src/components/Checkbox/Checkbox.tsx","../src/components/Switch/Switch.module.scss","../src/components/Switch/Switch.tsx","../src/components/RadioButton/RadioButton.module.scss","../src/components/RadioButton/RadioButton.tsx","../src/components/Slider/Slider.module.scss","../src/components/Slider/Slider.tsx","../src/components/PillInput/PillInput.module.scss","../src/components/PillInput/PillInput.tsx","../src/components/FileDropZone/FileDropZone.module.scss","../src/components/FileDropZone/FileDropZone.tsx","../src/components/ComboBox/ComboBox.module.scss","../src/components/ComboBox/ComboBox.tsx","../src/components/Badge/Badge.module.scss","../src/components/Badge/Badge.tsx","../src/components/Divider/Divider.module.scss","../src/components/Divider/Divider.tsx"],"sourcesContent":["export const FINRA_UI_ATTR = \"data-finra-ui\" as const;\n\nexport const componentIds = {\n  // Button family\n  button: \"button\",\n  iconButton: \"icon-button\",\n  buttonGroup: \"button-group\",\n\n  // Input\n  input: \"input\",\n  inputField: \"input-field\",\n\n  // Textarea\n  textarea: \"textarea\",\n  textareaField: \"textarea-field\",\n  textareaCount: \"textarea-count\",\n\n  // NumberInput\n  numberInput: \"number-input\",\n  numberInputField: \"number-input-field\",\n  numberInputIncrement: \"number-input-increment\",\n  numberInputDecrement: \"number-input-decrement\",\n\n  // FormField\n  formField: \"form-field\",\n  formFieldLabel: \"form-field-label\",\n  formFieldHelper: \"form-field-helper\",\n  formFieldError: \"form-field-error\",\n\n  // Checkbox\n  checkbox: \"checkbox\",\n  checkboxIndicator: \"checkbox-indicator\",\n  checkboxLabel: \"checkbox-label\",\n\n  // Switch\n  switch: \"switch\",\n  switchTrack: \"switch-track\",\n  switchThumb: \"switch-thumb\",\n  switchLabel: \"switch-label\",\n\n  // RadioButton\n  radioButton: \"radio-button\",\n  radioButtonIndicator: \"radio-button-indicator\",\n  radioButtonLabel: \"radio-button-label\",\n\n  // Slider\n  slider: \"slider\",\n  sliderHeader: \"slider-header\",\n\n  // PillInput\n  pillInput: \"pill-input\",\n\n  // FileDropZone\n  fileDropZone: \"file-drop-zone\",\n  fileDropZoneInput: \"file-drop-zone-input\",\n\n  // Badge\n  badge: \"badge\",\n\n  // ComboBox\n  comboBox: \"combo-box\",\n\n  // Divider\n  divider: \"divider\",\n} as const;\n\nexport type ComponentId = (typeof componentIds)[keyof typeof componentIds];\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","/**\n * Copyright 2022 Joe Bell. All rights reserved.\n *\n * This file is licensed to you under the Apache License, Version 2.0\n * (the \"License\"); you may not use this file except in compliance with the\n * License. You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the\n * License for the specific language governing permissions and limitations under\n * the License.\n */ import { clsx } from \"clsx\";\nconst falsyToString = (value)=>typeof value === \"boolean\" ? `${value}` : value === 0 ? \"0\" : value;\nexport const cx = clsx;\nexport const cva = (base, config)=>(props)=>{\n        var _config_compoundVariants;\n        if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);\n        const { variants, defaultVariants } = config;\n        const getVariantClassNames = Object.keys(variants).map((variant)=>{\n            const variantProp = props === null || props === void 0 ? void 0 : props[variant];\n            const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];\n            if (variantProp === null) return null;\n            const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);\n            return variants[variant][variantKey];\n        });\n        const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param)=>{\n            let [key, value] = param;\n            if (value === undefined) {\n                return acc;\n            }\n            acc[key] = value;\n            return acc;\n        }, {});\n        const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param)=>{\n            let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;\n            return Object.entries(compoundVariantOptions).every((param)=>{\n                let [key, value] = param;\n                return Array.isArray(value) ? value.includes({\n                    ...defaultVariants,\n                    ...propsWithoutUndefined\n                }[key]) : ({\n                    ...defaultVariants,\n                    ...propsWithoutUndefined\n                })[key] === value;\n            }) ? [\n                ...acc,\n                cvClass,\n                cvClassName\n            ] : acc;\n        }, []);\n        return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);\n    };\n\n",".button {\n  //  Internal custom properties (set by variant + sentiment)\n  --_btn-accent: var(--finra-color-primary-600);\n  --_btn-accent-hover: var(--finra-color-primary-700);\n  --_btn-accent-active: var(--finra-color-primary-800);\n  --_btn-accent-subtle: var(--finra-color-primary-50);\n  --_btn-on-accent: var(--finra-color-white);\n\n  //  Dark mode: inverted primary scale is too light for white text\n  :where([data-theme=\"dark\"]) & {\n    --_btn-on-accent: var(--finra-color-neutral-900);\n  }\n\n  //  Base styles\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--finra-density-gap);\n  font-family: var(--finra-font-sans);\n  font-weight: var(--finra-font-medium);\n  font-size: var(--finra-density-button-font-size);\n  line-height: var(--finra-leading-tight);\n  border-radius: var(--finra-radius-md);\n  transition: all var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  cursor: var(--finra-cursor-pointer);\n  border: var(--finra-border-thin) solid var(--finra-color-transparent);\n  outline: none;\n  text-decoration: none;\n  position: relative;\n  white-space: nowrap;\n  height: var(--finra-density-size-base);\n  padding: 0 var(--finra-density-button-padding-x);\n\n  //  States\n  &:disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n  }\n\n  &:focus-visible {\n    outline: var(--finra-focus-width) solid var(--finra-focus-color);\n    outline-offset: var(--finra-focus-offset);\n  }\n\n  //  Variant: primary (filled)\n  &.variantPrimary {\n    background-color: var(--_btn-accent);\n    color: var(--_btn-on-accent);\n    border-color: var(--_btn-accent);\n\n    &:hover:not(:disabled) {\n      background-color: var(--_btn-accent-hover);\n      border-color: var(--_btn-accent-hover);\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--_btn-accent-active);\n      border-color: var(--_btn-accent-active);\n    }\n  }\n\n  //  Variant: secondary (bordered)\n  &.variantSecondary {\n    background-color: var(--finra-color-transparent);\n    color: var(--_btn-accent);\n    border-color: var(--_btn-accent);\n\n    &:hover:not(:disabled) {\n      background-color: var(--_btn-accent-subtle);\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--_btn-accent-subtle);\n      border-color: var(--_btn-accent-hover);\n      color: var(--_btn-accent-hover);\n    }\n  }\n\n  //  Variant: tertiary (minimal)\n  &.variantTertiary {\n    background-color: var(--finra-color-transparent);\n    color: var(--_btn-accent);\n    border-color: var(--finra-color-transparent);\n\n    &:hover:not(:disabled) {\n      background-color: var(--_btn-accent-subtle);\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--_btn-accent-subtle);\n      color: var(--_btn-accent-hover);\n    }\n  }\n\n  //  Sentiment overrides\n  &.sentimentDanger {\n    --_btn-accent: var(--finra-color-error);\n    --_btn-accent-hover: var(--finra-color-error-hover);\n    --_btn-accent-active: var(--finra-color-error-active);\n    --_btn-accent-subtle: var(--finra-color-error-subtle);\n    --_btn-on-accent: var(--finra-color-white);\n  }\n\n  &.sentimentSuccess {\n    --_btn-accent: var(--finra-color-success);\n    --_btn-accent-hover: var(--finra-color-success-hover);\n    --_btn-accent-active: var(--finra-color-success-active);\n    --_btn-accent-subtle: var(--finra-color-success-subtle);\n    --_btn-on-accent: var(--finra-color-white);\n  }\n\n  &.sentimentWarning {\n    --_btn-accent: var(--finra-color-warning);\n    --_btn-accent-hover: var(--finra-color-warning-hover);\n    --_btn-accent-active: var(--finra-color-warning-active);\n    --_btn-accent-subtle: var(--finra-color-warning-subtle);\n    --_btn-on-accent: var(--finra-color-white);\n  }\n\n  &.sentimentInfo {\n    --_btn-accent: var(--finra-color-info);\n    --_btn-accent-hover: var(--finra-color-info-hover);\n    --_btn-accent-active: var(--finra-color-info-active);\n    --_btn-accent-subtle: var(--finra-color-info-subtle);\n    --_btn-on-accent: var(--finra-color-white);\n  }\n\n  //  Full width\n  &.fullWidth {\n    width: 100%;\n  }\n}\n\n//  Icon container\n.icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: var(--finra-density-icon-size);\n  block-size: var(--finra-density-icon-size);\n  flex-shrink: 0;\n\n  > svg {\n    inline-size: 100%;\n    block-size: 100%;\n  }\n}\n","import { cva, type VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nimport type { Sentiment } from \"../../types/variants\";\nimport { ButtonBase, type ButtonBaseProps } from \"../../unstyled/Button/Button\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./Button.module.scss\";\n\nexport type ButtonSentiment = Sentiment;\n\nconst sentimentClasses: Record<ButtonSentiment, string> = {\n  danger: styles.sentimentDanger,\n  success: styles.sentimentSuccess,\n  warning: styles.sentimentWarning,\n  info: styles.sentimentInfo,\n};\n\nconst buttonVariants = cva(styles.button, {\n  variants: {\n    variant: {\n      primary: styles.variantPrimary,\n      secondary: styles.variantSecondary,\n      tertiary: styles.variantTertiary,\n    },\n    fullWidth: {\n      true: styles.fullWidth,\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n  },\n});\n\nexport interface ButtonProps extends ButtonBaseProps, VariantProps<typeof buttonVariants> {\n  sentiment?: ButtonSentiment;\n  startIcon?: ReactNode;\n  endIcon?: ReactNode;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, fullWidth, sentiment, startIcon, endIcon, children, ...props }, ref) => {\n    return (\n      <ButtonBase\n        ref={ref}\n        type=\"button\"\n        {...{ [FINRA_UI_ATTR]: componentIds.button }}\n        className={clsx(\n          buttonVariants({ variant, fullWidth }),\n          sentiment && sentimentClasses[sentiment],\n          className,\n        )}\n        {...props}>\n        {startIcon ? <span className={styles.icon}>{startIcon}</span> : null}\n        {children}\n        {endIcon ? <span className={styles.icon}>{endIcon}</span> : null}\n      </ButtonBase>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n",".iconButton {\n  //  Internal custom properties\n  --_btn-accent: var(--finra-color-primary-600);\n  --_btn-accent-hover: var(--finra-color-primary-700);\n  --_btn-accent-active: var(--finra-color-primary-800);\n  --_btn-accent-subtle: var(--finra-color-primary-50);\n  --_btn-on-accent: var(--finra-color-white);\n\n  //  Dark mode: inverted primary scale is too light for white text\n  :where([data-theme=\"dark\"]) & {\n    --_btn-on-accent: var(--finra-color-neutral-900);\n  }\n\n  //  Base styles\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--finra-font-sans);\n  border-radius: var(--finra-radius-md);\n  transition: all var(--finra-duration-fast) ease-in-out;\n  cursor: var(--finra-cursor-pointer);\n  border: var(--finra-border-thin) solid var(--finra-color-transparent);\n  outline: none;\n  padding: 0;\n  inline-size: var(--finra-density-size-base);\n  block-size: var(--finra-density-size-base);\n  flex-shrink: 0;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  //  Icon sizing\n  > svg {\n    inline-size: var(--finra-density-icon-size);\n    block-size: var(--finra-density-icon-size);\n  }\n\n  //  States\n  &:disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n  }\n\n  &:focus-visible {\n    outline: var(--finra-focus-width) solid var(--finra-focus-color);\n    outline-offset: var(--finra-focus-offset);\n  }\n\n  //  Variant: primary (filled)\n  &.variantPrimary {\n    background-color: var(--_btn-accent);\n    color: var(--_btn-on-accent);\n    border-color: var(--_btn-accent);\n\n    &:hover:not(:disabled) {\n      background-color: var(--_btn-accent-hover);\n      border-color: var(--_btn-accent-hover);\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--_btn-accent-active);\n      border-color: var(--_btn-accent-active);\n    }\n  }\n\n  //  Variant: secondary (bordered)\n  &.variantSecondary {\n    background-color: var(--finra-color-transparent);\n    color: var(--_btn-accent);\n    border-color: var(--_btn-accent);\n\n    &:hover:not(:disabled) {\n      background-color: var(--_btn-accent-subtle);\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--_btn-accent-subtle);\n      border-color: var(--_btn-accent-hover);\n      color: var(--_btn-accent-hover);\n    }\n  }\n\n  //  Variant: tertiary (minimal)\n  &.variantTertiary {\n    background-color: var(--finra-color-transparent);\n    color: var(--_btn-accent);\n    border-color: var(--finra-color-transparent);\n\n    &:hover:not(:disabled) {\n      background-color: var(--_btn-accent-subtle);\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--_btn-accent-subtle);\n      color: var(--_btn-accent-hover);\n    }\n  }\n\n  //  Sentiment overrides\n  &.sentimentDanger {\n    --_btn-accent: var(--finra-color-error);\n    --_btn-accent-hover: var(--finra-color-error-hover);\n    --_btn-accent-active: var(--finra-color-error-active);\n    --_btn-accent-subtle: var(--finra-color-error-subtle);\n    --_btn-on-accent: var(--finra-color-white);\n  }\n\n  &.sentimentSuccess {\n    --_btn-accent: var(--finra-color-success);\n    --_btn-accent-hover: var(--finra-color-success-hover);\n    --_btn-accent-active: var(--finra-color-success-active);\n    --_btn-accent-subtle: var(--finra-color-success-subtle);\n    --_btn-on-accent: var(--finra-color-white);\n  }\n\n  &.sentimentWarning {\n    --_btn-accent: var(--finra-color-warning);\n    --_btn-accent-hover: var(--finra-color-warning-hover);\n    --_btn-accent-active: var(--finra-color-warning-active);\n    --_btn-accent-subtle: var(--finra-color-warning-subtle);\n    --_btn-on-accent: var(--finra-color-white);\n  }\n\n  &.sentimentInfo {\n    --_btn-accent: var(--finra-color-info);\n    --_btn-accent-hover: var(--finra-color-info-hover);\n    --_btn-accent-active: var(--finra-color-info-active);\n    --_btn-accent-subtle: var(--finra-color-info-subtle);\n    --_btn-on-accent: var(--finra-color-white);\n  }\n}\n","import { cva, type VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport type { Sentiment } from \"../../types/variants\";\nimport { IconButtonBase, type IconButtonBaseProps } from \"../../unstyled/IconButton/IconButton\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./IconButton.module.scss\";\n\nexport type IconButtonSentiment = Sentiment;\n\nconst sentimentClasses: Record<IconButtonSentiment, string> = {\n  danger: styles.sentimentDanger,\n  success: styles.sentimentSuccess,\n  warning: styles.sentimentWarning,\n  info: styles.sentimentInfo,\n};\n\nconst iconButtonVariants = cva(styles.iconButton, {\n  variants: {\n    variant: {\n      primary: styles.variantPrimary,\n      secondary: styles.variantSecondary,\n      tertiary: styles.variantTertiary,\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n  },\n});\n\nexport interface IconButtonProps\n  extends IconButtonBaseProps, VariantProps<typeof iconButtonVariants> {\n  sentiment?: IconButtonSentiment;\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ className, variant, sentiment, ...props }, ref) => {\n    return (\n      <IconButtonBase\n        ref={ref}\n        type=\"button\"\n        {...{ [FINRA_UI_ATTR]: componentIds.iconButton }}\n        className={clsx(\n          iconButtonVariants({ variant }),\n          sentiment && sentimentClasses[sentiment],\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n",".buttonGroup {\n  display: inline-flex;\n  flex-direction: row;\n\n  // Connected borders: remove inner radii, collapse borders\n  > * {\n    border-radius: 0;\n\n    &:not(:first-child) {\n      margin-inline-start: calc(var(--finra-border-thin) * -1);\n    }\n\n    &:first-child {\n      border-start-start-radius: var(--finra-radius-md);\n      border-end-start-radius: var(--finra-radius-md);\n    }\n\n    &:last-child {\n      border-start-end-radius: var(--finra-radius-md);\n      border-end-end-radius: var(--finra-radius-md);\n    }\n\n    // Ensure hovered/focused button appears above siblings\n    &:hover,\n    &:focus-visible {\n      z-index: 1;\n    }\n  }\n\n  //  Vertical orientation\n  &.vertical {\n    flex-direction: column;\n\n    > * {\n      &:not(:first-child) {\n        margin-inline-start: 0;\n        margin-block-start: calc(var(--finra-border-thin) * -1);\n      }\n\n      &:first-child {\n        border-radius: 0;\n        border-start-start-radius: var(--finra-radius-md);\n        border-start-end-radius: var(--finra-radius-md);\n      }\n\n      &:last-child {\n        border-radius: 0;\n        border-end-start-radius: var(--finra-radius-md);\n        border-end-end-radius: var(--finra-radius-md);\n      }\n    }\n  }\n}\n","import { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\n\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./ButtonGroup.module.scss\";\n\nexport interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(\n  ({ className, orientation = \"horizontal\", children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        {...{ [FINRA_UI_ATTR]: componentIds.buttonGroup }}\n        className={clsx(\n          styles.buttonGroup,\n          orientation === \"vertical\" && styles.vertical,\n          className,\n        )}\n        {...props}>\n        {children}\n      </div>\n    );\n  },\n);\n\nButtonGroup.displayName = \"ButtonGroup\";\n",".wrapper {\n  --_input-border-color: var(--finra-color-border);\n\n  display: inline-flex;\n  align-items: center;\n  gap: var(--finra-density-gap);\n  block-size: var(--finra-density-size-base);\n  padding-inline: var(--finra-density-input-padding-x);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  line-height: var(--finra-leading-normal);\n  background-color: var(--finra-color-background);\n  border: var(--finra-border-thin) solid var(--_input-border-color);\n  border-radius: var(--finra-radius-md);\n  transition: border-color var(--finra-duration-fast) ease-in-out;\n  cursor: var(--finra-cursor-text);\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  &:focus-within {\n    --_input-border-color: var(--finra-color-primary-500);\n  }\n\n  //  Disabled\n  &.disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n    background-color: var(--finra-color-neutral-50);\n  }\n\n  //  Full width\n  &.fullWidth {\n    inline-size: 100%;\n  }\n\n  //  Variants\n  &.variantPrimary {\n    border-width: var(--finra-border-thin);\n  }\n\n  &.variantSecondary {\n    border-width: var(--finra-border-thin);\n    background-color: var(--finra-color-neutral-50);\n  }\n\n  &.variantTertiary {\n    border-color: var(--finra-color-transparent);\n    border-block-end-color: var(--_input-border-color);\n    border-radius: 0;\n\n    &:focus-within {\n      border-block-end-color: var(--finra-color-primary-500);\n      box-shadow: none;\n    }\n  }\n\n  //  Validation status\n  &.statusError {\n    --_input-border-color: var(--finra-color-error);\n  }\n\n  &.statusWarning {\n    --_input-border-color: var(--finra-color-warning);\n  }\n\n  &.statusSuccess {\n    --_input-border-color: var(--finra-color-success);\n  }\n}\n\n//  Input field\n.field {\n  flex: 1;\n  min-inline-size: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  font: inherit;\n  color: var(--finra-color-foreground);\n  padding: 0;\n\n  // Override global :focus-visible - wrapper handles focus indication\n  &:focus-visible {\n    outline: none;\n  }\n\n  &::placeholder {\n    color: var(--finra-color-neutral-400);\n  }\n\n  &:disabled {\n    cursor: var(--finra-cursor-disabled);\n  }\n}\n\n//  Adornments\n.adornment {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--finra-color-neutral-500);\n  flex-shrink: 0;\n\n  > svg {\n    inline-size: var(--finra-density-icon-size);\n    block-size: var(--finra-density-icon-size);\n  }\n}\n\n//  Clear button\n.clearButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--finra-color-neutral-400);\n  cursor: var(--finra-cursor-pointer);\n  border-radius: var(--finra-radius-full);\n  flex-shrink: 0;\n\n  &:hover {\n    color: var(--finra-color-foreground);\n  }\n\n  > svg {\n    inline-size: var(--finra-density-icon-size);\n    block-size: var(--finra-density-icon-size);\n  }\n}\n","import { CloseIcon } from \"@utk09/finra-ui-icons/react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  type InputHTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport type { ValidationStatus as _ValidationStatus } from \"../../types/variants\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./Input.module.scss\";\n\nexport type ValidationStatus = _ValidationStatus;\n\nconst inputVariants = cva(styles.wrapper, {\n  variants: {\n    variant: {\n      primary: styles.variantPrimary,\n      secondary: styles.variantSecondary,\n      tertiary: styles.variantTertiary,\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n  },\n});\n\nconst validationClasses: Record<ValidationStatus, string> = {\n  error: styles.statusError,\n  warning: styles.statusWarning,\n  success: styles.statusSuccess,\n};\n\nexport interface InputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\">, VariantProps<typeof inputVariants> {\n  validationStatus?: ValidationStatus;\n  startAdornment?: ReactNode;\n  endAdornment?: ReactNode;\n  clearable?: boolean;\n  onClear?: () => void;\n  fullWidth?: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      variant,\n      validationStatus,\n      startAdornment,\n      endAdornment,\n      clearable,\n      onClear,\n      fullWidth,\n      disabled,\n      readOnly,\n      value,\n      defaultValue,\n      onChange,\n      ...props\n    },\n    ref,\n  ) => {\n    const internalRef = useRef<HTMLInputElement>(null);\n    const inputRef = (ref as React.RefObject<HTMLInputElement>) || internalRef;\n\n    const handleClear = useCallback(\n      (e: MouseEvent<HTMLButtonElement>) => {\n        e.preventDefault();\n        if (onClear) {\n          onClear();\n        } else if (inputRef.current) {\n          const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n            HTMLInputElement.prototype,\n            \"value\",\n          )?.set;\n          nativeInputValueSetter?.call(inputRef.current, \"\");\n          inputRef.current.dispatchEvent(new Event(\"input\", { bubbles: true }));\n        }\n        inputRef.current?.focus();\n      },\n      [onClear, inputRef],\n    );\n\n    const showClear = clearable && !disabled && !readOnly && (value ?? defaultValue ?? \"\") !== \"\";\n\n    return (\n      <div\n        {...{ [FINRA_UI_ATTR]: componentIds.input }}\n        className={clsx(\n          inputVariants({ variant }),\n          validationStatus && validationClasses[validationStatus],\n          disabled && styles.disabled,\n          fullWidth && styles.fullWidth,\n          className,\n        )}>\n        {startAdornment ? <span className={styles.adornment}>{startAdornment}</span> : null}\n        <input\n          ref={inputRef}\n          {...{ [FINRA_UI_ATTR]: componentIds.inputField }}\n          className={styles.field}\n          disabled={disabled}\n          readOnly={readOnly}\n          value={value}\n          defaultValue={defaultValue}\n          onChange={onChange}\n          {...props}\n        />\n        {showClear ? (\n          <button\n            type=\"button\"\n            className={styles.clearButton}\n            onClick={handleClear}\n            aria-label=\"Clear input\"\n            tabIndex={-1}>\n            <CloseIcon />\n          </button>\n        ) : null}\n        {endAdornment ? <span className={styles.adornment}>{endAdornment}</span> : null}\n      </div>\n    );\n  },\n);\n\nInput.displayName = \"Input\";\n",".wrapper {\n  --_input-border-color: var(--finra-color-border);\n\n  display: inline-flex;\n  flex-direction: column;\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  line-height: var(--finra-leading-normal);\n  background-color: var(--finra-color-background);\n  border: var(--finra-border-thin) solid var(--_input-border-color);\n  border-radius: var(--finra-radius-md);\n  transition: border-color var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  &:focus-within {\n    --_input-border-color: var(--finra-color-primary-500);\n  }\n\n  &.disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n    background-color: var(--finra-color-neutral-50);\n  }\n\n  &.fullWidth {\n    inline-size: 100%;\n  }\n\n  //  Variants\n  &.variantPrimary {\n    border-width: var(--finra-border-thin);\n  }\n\n  &.variantSecondary {\n    border-width: var(--finra-border-thin);\n    background-color: var(--finra-color-neutral-50);\n  }\n\n  &.variantTertiary {\n    border-color: var(--finra-color-transparent);\n    border-block-end-color: var(--_input-border-color);\n    border-radius: 0;\n\n    &:focus-within {\n      border-block-end-color: var(--finra-color-primary-500);\n      box-shadow: none;\n    }\n  }\n\n  //  Validation status\n  &.statusError {\n    --_input-border-color: var(--finra-color-error);\n  }\n\n  &.statusWarning {\n    --_input-border-color: var(--finra-color-warning);\n  }\n\n  &.statusSuccess {\n    --_input-border-color: var(--finra-color-success);\n  }\n}\n\n.field {\n  flex: 1;\n  min-inline-size: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  font: inherit;\n  color: var(--finra-color-foreground);\n  padding: var(--finra-density-input-padding-x);\n  resize: vertical;\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &::placeholder {\n    color: var(--finra-color-neutral-400);\n  }\n\n  &:disabled {\n    cursor: var(--finra-cursor-disabled);\n    resize: none;\n  }\n}\n\n.charCount {\n  display: block;\n  text-align: end;\n  padding-inline: var(--finra-density-input-padding-x);\n  padding-block-end: var(--finra-density-gap);\n  font-size: var(--finra-text-xs);\n  color: var(--finra-color-neutral-500);\n  font-variant-numeric: var(--finra-font-tabular-nums);\n}\n\n.charCountWarning {\n  color: var(--finra-color-warning);\n}\n\n.charCountError {\n  color: var(--finra-color-error);\n}\n","import { cva, type VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  forwardRef,\n  type TextareaHTMLAttributes,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport type { ValidationStatus } from \"../Input/Input\";\nimport styles from \"./Textarea.module.scss\";\n\nconst textareaVariants = cva(styles.wrapper, {\n  variants: {\n    variant: {\n      primary: styles.variantPrimary,\n      secondary: styles.variantSecondary,\n      tertiary: styles.variantTertiary,\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n  },\n});\n\nconst validationClasses: Record<ValidationStatus, string> = {\n  error: styles.statusError,\n  warning: styles.statusWarning,\n  success: styles.statusSuccess,\n};\n\nexport interface TextareaProps\n  extends\n    Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\">,\n    VariantProps<typeof textareaVariants> {\n  validationStatus?: ValidationStatus;\n  showCharCount?: boolean;\n  warningThreshold?: number;\n  autoResize?: boolean;\n  minRows?: number;\n  maxRows?: number;\n  fullWidth?: boolean;\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (\n    {\n      className,\n      variant,\n      validationStatus,\n      showCharCount,\n      warningThreshold,\n      autoResize,\n      minRows = 3,\n      maxRows,\n      fullWidth,\n      maxLength,\n      disabled,\n      readOnly,\n      value,\n      defaultValue,\n      onChange,\n      ...props\n    },\n    ref,\n  ) => {\n    const internalRef = useRef<HTMLTextAreaElement>(null);\n    const textareaRef = (ref as React.RefObject<HTMLTextAreaElement>) || internalRef;\n\n    const [charCount, setCharCount] = useState(() => {\n      const initial = (value ?? defaultValue ?? \"\") as string;\n      return initial.length;\n    });\n\n    // Sync charCount when controlled value changes\n    useEffect(() => {\n      if (value !== undefined) {\n        setCharCount((value as string).length);\n      }\n    }, [value]);\n\n    const adjustHeight = useCallback(() => {\n      const textarea = textareaRef.current;\n      if (!textarea || !autoResize) return;\n\n      textarea.style.height = \"auto\";\n      const lineHeight = parseFloat(getComputedStyle(textarea).lineHeight);\n      const minHeight = lineHeight * minRows;\n      const maxHeight = maxRows ? lineHeight * maxRows : Infinity;\n      const scrollHeight = textarea.scrollHeight;\n\n      textarea.style.height = `${Math.min(Math.max(scrollHeight, minHeight), maxHeight)}px`;\n      textarea.style.overflowY = scrollHeight > maxHeight ? \"auto\" : \"hidden\";\n    }, [autoResize, minRows, maxRows, textareaRef]);\n\n    useEffect(() => {\n      adjustHeight();\n    }, [value, adjustHeight]);\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        setCharCount(e.target.value.length);\n        adjustHeight();\n        onChange?.(e);\n      },\n      [onChange, adjustHeight],\n    );\n\n    const isOverWarning =\n      warningThreshold !== undefined && maxLength !== undefined && charCount >= warningThreshold;\n    const isAtLimit = maxLength !== undefined && charCount >= maxLength;\n\n    const countStatus: ValidationStatus | undefined = isAtLimit\n      ? \"error\"\n      : isOverWarning\n        ? \"warning\"\n        : undefined;\n\n    const effectiveValidation = validationStatus ?? countStatus;\n\n    return (\n      <div\n        {...{ [FINRA_UI_ATTR]: componentIds.textarea }}\n        className={clsx(\n          textareaVariants({ variant }),\n          effectiveValidation && validationClasses[effectiveValidation],\n          disabled && styles.disabled,\n          fullWidth && styles.fullWidth,\n          className,\n        )}>\n        <textarea\n          ref={textareaRef}\n          {...{ [FINRA_UI_ATTR]: componentIds.textareaField }}\n          className={styles.field}\n          rows={minRows}\n          maxLength={maxLength}\n          disabled={disabled}\n          readOnly={readOnly}\n          value={value}\n          defaultValue={defaultValue}\n          onChange={handleChange}\n          {...props}\n        />\n        {showCharCount && maxLength !== undefined ? (\n          <span\n            {...{ [FINRA_UI_ATTR]: componentIds.textareaCount }}\n            className={clsx(\n              styles.charCount,\n              countStatus === \"warning\" && styles.charCountWarning,\n              countStatus === \"error\" && styles.charCountError,\n            )}>\n            {charCount}/{maxLength}\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nTextarea.displayName = \"Textarea\";\n",".wrapper {\n  --_input-border-color: var(--finra-color-border);\n\n  display: inline-flex;\n  align-items: center;\n  block-size: var(--finra-density-size-base);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  line-height: var(--finra-leading-normal);\n  background-color: var(--finra-color-background);\n  border: var(--finra-border-thin) solid var(--_input-border-color);\n  border-radius: var(--finra-radius-md);\n  transition: border-color var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  &:focus-within {\n    --_input-border-color: var(--finra-color-primary-500);\n  }\n\n  &.disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n    background-color: var(--finra-color-neutral-50);\n  }\n\n  &.fullWidth {\n    inline-size: 100%;\n  }\n\n  //  Variants\n  &.variantPrimary {\n    border-width: var(--finra-border-thin);\n  }\n\n  &.variantSecondary {\n    border-width: var(--finra-border-thin);\n    background-color: var(--finra-color-neutral-50);\n  }\n\n  &.variantTertiary {\n    border-color: var(--finra-color-transparent);\n    border-block-end-color: var(--_input-border-color);\n    border-radius: 0;\n\n    &:focus-within {\n      border-block-end-color: var(--finra-color-primary-500);\n      box-shadow: none;\n    }\n  }\n\n  //  Validation status\n  &.statusError {\n    --_input-border-color: var(--finra-color-error);\n  }\n\n  &.statusWarning {\n    --_input-border-color: var(--finra-color-warning);\n  }\n\n  &.statusSuccess {\n    --_input-border-color: var(--finra-color-success);\n  }\n}\n\n.field {\n  flex: 1;\n  min-inline-size: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  font: inherit;\n  color: var(--finra-color-foreground);\n  text-align: center;\n  font-variant-numeric: var(--finra-font-tabular-nums);\n  padding: 0;\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  // Hide native number spinners\n  &::-webkit-inner-spin-button,\n  &::-webkit-outer-spin-button {\n    appearance: none;\n    margin: 0;\n  }\n\n  &::placeholder {\n    color: var(--finra-color-neutral-400);\n  }\n\n  &:disabled {\n    cursor: var(--finra-cursor-disabled);\n  }\n}\n\n.stepButton {\n  --_step-color: var(--finra-color-neutral-600);\n  --_step-hover-bg: var(--finra-color-neutral-100);\n  --_step-hover-color: var(--finra-color-foreground);\n  --_step-active-bg: var(--finra-color-neutral-200);\n\n  :where([data-theme=\"dark\"]) & {\n    --_step-color: var(--finra-color-neutral-400);\n    --_step-hover-bg: var(--finra-color-neutral-700);\n    --_step-active-bg: var(--finra-color-neutral-600);\n  }\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--_step-color);\n  cursor: var(--finra-cursor-pointer);\n  inline-size: var(--finra-density-size-base);\n  block-size: 100%;\n  flex-shrink: 0;\n  transition:\n    background-color var(--finra-duration-fast) ease-in-out,\n    color var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  &:hover:not(:disabled) {\n    background-color: var(--_step-hover-bg);\n    color: var(--_step-hover-color);\n  }\n\n  &:active:not(:disabled) {\n    background-color: var(--_step-active-bg);\n  }\n\n  &:disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n  }\n\n  > svg {\n    inline-size: var(--finra-density-icon-size);\n    block-size: var(--finra-density-icon-size);\n  }\n\n  // Round the outer corners to match wrapper\n  &:first-child {\n    border-start-start-radius: var(--finra-radius-md);\n    border-end-start-radius: var(--finra-radius-md);\n  }\n\n  &:last-child {\n    border-start-end-radius: var(--finra-radius-md);\n    border-end-end-radius: var(--finra-radius-md);\n  }\n}\n","import { MinusIcon, PlusIcon } from \"@utk09/finra-ui-icons/react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  forwardRef,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport type { ValidationStatus } from \"../Input/Input\";\nimport styles from \"./NumberInput.module.scss\";\n\nconst numberInputVariants = cva(styles.wrapper, {\n  variants: {\n    variant: {\n      primary: styles.variantPrimary,\n      secondary: styles.variantSecondary,\n      tertiary: styles.variantTertiary,\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n  },\n});\n\nconst validationClasses: Record<ValidationStatus, string> = {\n  error: styles.statusError,\n  warning: styles.statusWarning,\n  success: styles.statusSuccess,\n};\n\nexport interface NumberInputProps\n  extends\n    Omit<\n      InputHTMLAttributes<HTMLInputElement>,\n      \"type\" | \"size\" | \"onChange\" | \"value\" | \"defaultValue\" | \"min\" | \"max\" | \"step\"\n    >,\n    VariantProps<typeof numberInputVariants> {\n  validationStatus?: ValidationStatus;\n  value?: number | \"\";\n  defaultValue?: number;\n  min?: number;\n  max?: number;\n  step?: number;\n  precision?: number;\n  onChange?: (value: number | undefined) => void;\n  fullWidth?: boolean;\n}\n\nfunction clampValue(val: number, min?: number, max?: number): number {\n  let result = val;\n  if (min !== undefined) result = Math.max(result, min);\n  if (max !== undefined) result = Math.min(result, max);\n  return result;\n}\n\nfunction formatValue(val: number, precision?: number): string {\n  if (precision !== undefined) return val.toFixed(precision);\n  return String(val);\n}\n\nexport const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      className,\n      variant,\n      validationStatus,\n      value: controlledValue,\n      defaultValue,\n      min,\n      max,\n      step = 1,\n      precision,\n      onChange,\n      fullWidth,\n      disabled,\n      readOnly,\n      ...props\n    },\n    ref,\n  ) => {\n    const internalRef = useRef<HTMLInputElement>(null);\n    const inputRef = (ref as React.RefObject<HTMLInputElement>) || internalRef;\n\n    const isControlled = controlledValue !== undefined;\n    const [internalValue, setInternalValue] = useState<string>(() =>\n      defaultValue !== undefined ? formatValue(defaultValue, precision) : \"\",\n    );\n\n    const displayValue = isControlled\n      ? controlledValue === \"\"\n        ? \"\"\n        : formatValue(controlledValue as number, precision)\n      : internalValue;\n\n    // Sync display when controlled value changes\n    useEffect(() => {\n      if (isControlled && controlledValue !== \"\") {\n        setInternalValue(formatValue(controlledValue as number, precision));\n      }\n    }, [controlledValue, precision, isControlled]);\n\n    const commitValue = useCallback(\n      (raw: number) => {\n        const clamped = clampValue(raw, min, max);\n        const display = formatValue(clamped, precision);\n        if (!isControlled) setInternalValue(display);\n        onChange?.(clamped);\n      },\n      [min, max, precision, isControlled, onChange],\n    );\n\n    const stepValue = useCallback(\n      (direction: 1 | -1) => {\n        const current = parseFloat(displayValue as string) || 0;\n        commitValue(current + step * direction);\n      },\n      [displayValue, step, commitValue],\n    );\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        const raw = e.target.value;\n        // Allow empty, minus sign, or valid partial numbers while typing\n        if (raw === \"\" || raw === \"-\" || raw === \".\") {\n          if (!isControlled) setInternalValue(raw);\n          if (raw === \"\") onChange?.(undefined);\n          return;\n        }\n        const num = parseFloat(raw);\n        if (!isNaN(num)) {\n          if (!isControlled) setInternalValue(raw);\n          onChange?.(num);\n        }\n      },\n      [isControlled, onChange],\n    );\n\n    const handleBlur = useCallback(() => {\n      const num = parseFloat(displayValue as string);\n      if (isNaN(num)) {\n        if (!isControlled) setInternalValue(\"\");\n        onChange?.(undefined);\n      } else {\n        commitValue(num);\n      }\n    }, [displayValue, isControlled, onChange, commitValue]);\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === \"ArrowUp\") {\n          e.preventDefault();\n          stepValue(1);\n        } else if (e.key === \"ArrowDown\") {\n          e.preventDefault();\n          stepValue(-1);\n        }\n      },\n      [stepValue],\n    );\n\n    return (\n      <div\n        {...{ [FINRA_UI_ATTR]: componentIds.numberInput }}\n        className={clsx(\n          numberInputVariants({ variant }),\n          validationStatus && validationClasses[validationStatus],\n          disabled && styles.disabled,\n          fullWidth && styles.fullWidth,\n          className,\n        )}>\n        <button\n          type=\"button\"\n          {...{ [FINRA_UI_ATTR]: componentIds.numberInputDecrement }}\n          className={styles.stepButton}\n          onClick={() => stepValue(-1)}\n          disabled={\n            disabled ||\n            readOnly ||\n            (min !== undefined && (parseFloat(displayValue as string) || 0) <= min)\n          }\n          aria-label=\"Decrement\"\n          tabIndex={-1}>\n          <MinusIcon />\n        </button>\n        <input\n          ref={inputRef}\n          {...{ [FINRA_UI_ATTR]: componentIds.numberInputField }}\n          className={styles.field}\n          inputMode=\"decimal\"\n          value={displayValue}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n          disabled={disabled}\n          readOnly={readOnly}\n          role=\"spinbutton\"\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-valuenow={\n            typeof displayValue === \"string\" ? parseFloat(displayValue) || undefined : displayValue\n          }\n          {...props}\n        />\n        <button\n          type=\"button\"\n          {...{ [FINRA_UI_ATTR]: componentIds.numberInputIncrement }}\n          className={styles.stepButton}\n          onClick={() => stepValue(1)}\n          disabled={\n            disabled ||\n            readOnly ||\n            (max !== undefined && (parseFloat(displayValue as string) || 0) >= max)\n          }\n          aria-label=\"Increment\"\n          tabIndex={-1}>\n          <PlusIcon />\n        </button>\n      </div>\n    );\n  },\n);\n\nNumberInput.displayName = \"NumberInput\";\n",".formField {\n  display: flex;\n  flex-direction: column;\n  gap: calc(var(--finra-density-gap) * 0.5);\n\n  &.fullWidth {\n    inline-size: 100%;\n\n    // Make child inputs stretch\n    > [data-finra-ui] {\n      inline-size: 100%;\n    }\n  }\n\n  &.disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n  }\n}\n\n.label {\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-text-sm);\n  font-weight: var(--finra-font-medium);\n  color: var(--finra-color-foreground);\n  line-height: var(--finra-leading-normal);\n\n  &.required::after {\n    content: \" *\";\n    color: var(--finra-color-error);\n  }\n}\n\n.helperText {\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-text-xs);\n  color: var(--finra-color-neutral-500);\n  line-height: var(--finra-leading-normal);\n  margin: 0;\n}\n\n.errorMessage {\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-text-xs);\n  color: var(--finra-color-error);\n  line-height: var(--finra-leading-normal);\n  margin: 0;\n}\n","import { clsx } from \"clsx\";\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  useId,\n} from \"react\";\n\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport type { ValidationStatus } from \"../Input/Input\";\nimport styles from \"./FormField.module.scss\";\n\nexport interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {\n  label: string;\n  helperText?: string;\n  errorMessage?: string;\n  validationStatus?: ValidationStatus;\n  required?: boolean;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  /** Explicit id for the input element. Auto-generated if omitted. */\n  htmlFor?: string;\n  children: ReactNode;\n  className?: string;\n}\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n  (\n    {\n      className,\n      label,\n      helperText,\n      errorMessage,\n      validationStatus,\n      required,\n      fullWidth,\n      disabled,\n      htmlFor,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const autoId = useId();\n    const fieldId = htmlFor ?? autoId;\n    const helperId = `${fieldId}-helper`;\n    const errorId = `${fieldId}-error`;\n\n    const showError = validationStatus === \"error\" && errorMessage;\n\n    // Build aria-describedby from present elements\n    const describedBy =\n      [showError ? errorId : undefined, helperText ? helperId : undefined]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n\n    // Clone children to inject a11y props\n    const enhancedChildren = Children.map(children, (child) => {\n      if (!isValidElement(child)) return child;\n      return cloneElement(child as React.ReactElement<Record<string, unknown>>, {\n        id: fieldId,\n        \"aria-describedby\": describedBy,\n        \"aria-invalid\": validationStatus === \"error\" ? true : undefined,\n        disabled: disabled || undefined,\n      });\n    });\n\n    return (\n      <div\n        ref={ref}\n        {...{ [FINRA_UI_ATTR]: componentIds.formField }}\n        className={clsx(\n          styles.formField,\n          fullWidth && styles.fullWidth,\n          disabled && styles.disabled,\n          className,\n        )}\n        {...props}>\n        <label\n          {...{ [FINRA_UI_ATTR]: componentIds.formFieldLabel }}\n          htmlFor={fieldId}\n          className={clsx(styles.label, required && styles.required)}>\n          {label}\n        </label>\n\n        {enhancedChildren}\n\n        {showError ? (\n          <p\n            {...{ [FINRA_UI_ATTR]: componentIds.formFieldError }}\n            id={errorId}\n            className={styles.errorMessage}\n            role=\"alert\">\n            {errorMessage}\n          </p>\n        ) : null}\n\n        {helperText ? (\n          <p\n            {...{ [FINRA_UI_ATTR]: componentIds.formFieldHelper }}\n            id={helperId}\n            className={styles.helperText}>\n            {helperText}\n          </p>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nFormField.displayName = \"FormField\";\n",".checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--finra-density-gap);\n  cursor: var(--finra-cursor-pointer);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  line-height: var(--finra-leading-normal);\n  color: var(--finra-color-foreground);\n\n  &.disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n  }\n}\n\n.input {\n  position: absolute;\n  opacity: 0;\n  inline-size: 0;\n  block-size: 0;\n  margin: 0;\n  padding: 0;\n  pointer-events: none;\n\n  &:checked + .indicator {\n    background-color: var(--finra-color-primary-600);\n    border-color: var(--finra-color-primary-600);\n    color: var(--finra-color-white);\n\n    > svg {\n      opacity: 1;\n    }\n  }\n\n  &:focus-visible + .indicator {\n    outline: var(--finra-focus-width) solid var(--finra-focus-color);\n    outline-offset: var(--finra-focus-offset);\n  }\n\n  &[data-indeterminate] + .indicator {\n    background-color: var(--finra-color-primary-600);\n    border-color: var(--finra-color-primary-600);\n    color: var(--finra-color-white);\n\n    > svg {\n      opacity: 1;\n    }\n  }\n}\n\n.indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: var(--finra-density-checkbox-size);\n  block-size: var(--finra-density-checkbox-size);\n  border: var(--finra-border-thin) solid var(--finra-color-border);\n  border-radius: var(--finra-radius-md);\n  background-color: var(--finra-color-background);\n  color: var(--finra-color-white);\n  flex-shrink: 0;\n  transition:\n    background-color var(--finra-duration-fast) ease-in-out,\n    border-color var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  > svg {\n    inline-size: 70%;\n    block-size: 70%;\n    opacity: 0;\n  }\n}\n\n.label {\n  user-select: none;\n}\n","import { CheckIcon, DashIcon } from \"@utk09/finra-ui-icons/react\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, useEffect, useRef } from \"react\";\n\nimport { CheckboxBase, type CheckboxBaseProps } from \"../../unstyled/Checkbox/Checkbox\";\nimport { mergeRefs } from \"../../utils/mergeRefs\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./Checkbox.module.scss\";\n\nexport interface CheckboxProps extends Omit<CheckboxBaseProps, \"className\"> {\n  label?: string;\n  className?: string;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, label, indeterminate, disabled, ...props }, forwardedRef) => {\n    const internalRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (internalRef.current) {\n        internalRef.current.indeterminate = indeterminate ?? false;\n      }\n    }, [indeterminate]);\n\n    return (\n      <label\n        {...{ [FINRA_UI_ATTR]: componentIds.checkbox }}\n        className={clsx(styles.checkbox, disabled && styles.disabled, className)}>\n        <CheckboxBase\n          ref={mergeRefs(forwardedRef, internalRef)}\n          className={styles.input}\n          disabled={disabled}\n          data-indeterminate={indeterminate || undefined}\n          {...props}\n        />\n        <span\n          className={styles.indicator}\n          aria-hidden=\"true\"\n          {...{ [FINRA_UI_ATTR]: componentIds.checkboxIndicator }}>\n          {indeterminate ? <DashIcon /> : <CheckIcon />}\n        </span>\n        {label ? (\n          <span className={styles.label} {...{ [FINRA_UI_ATTR]: componentIds.checkboxLabel }}>\n            {label}\n          </span>\n        ) : null}\n      </label>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n",".switch {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--finra-density-gap);\n  cursor: var(--finra-cursor-pointer);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  line-height: var(--finra-leading-normal);\n  color: var(--finra-color-foreground);\n\n  &.disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n  }\n}\n\n.input {\n  position: absolute;\n  opacity: 0;\n  inline-size: 0;\n  block-size: 0;\n  margin: 0;\n  padding: 0;\n  pointer-events: none;\n\n  &:checked + .track {\n    background-color: var(--finra-color-primary-600);\n    border-color: var(--finra-color-primary-600);\n\n    > .thumb {\n      inset-inline-start: calc(\n        var(--finra-density-switch-track-width) - var(--finra-density-switch-thumb-size) - 2px\n      );\n    }\n  }\n\n  &:focus-visible + .track {\n    outline: var(--finra-focus-width) solid var(--finra-focus-color);\n    outline-offset: var(--finra-focus-offset);\n  }\n}\n\n.track {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  inline-size: var(--finra-density-switch-track-width);\n  block-size: var(--finra-density-switch-track-height);\n  border-radius: var(--finra-radius-full);\n  background-color: var(--finra-color-neutral-300);\n  border: var(--finra-border-thin) solid var(--finra-color-border);\n  flex-shrink: 0;\n  transition:\n    background-color var(--finra-duration-fast) ease-in-out,\n    border-color var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n}\n\n.thumb {\n  position: absolute;\n  inset-inline-start: 2px;\n  inline-size: var(--finra-density-switch-thumb-size);\n  block-size: var(--finra-density-switch-thumb-size);\n  border-radius: var(--finra-radius-full);\n  background-color: var(--finra-color-white);\n  box-shadow: var(--finra-shadow-sm);\n  transition: inset-inline-start var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n}\n\n.label {\n  user-select: none;\n}\n","import { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport { SwitchBase, type SwitchBaseProps } from \"../../unstyled/Switch/Switch\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./Switch.module.scss\";\n\nexport interface SwitchProps extends Omit<SwitchBaseProps, \"className\"> {\n  label?: string;\n  className?: string;\n}\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n  ({ className, label, disabled, ...props }, ref) => {\n    return (\n      <label\n        {...{ [FINRA_UI_ATTR]: componentIds.switch }}\n        className={clsx(styles.switch, disabled && styles.disabled, className)}>\n        <SwitchBase ref={ref} className={styles.input} disabled={disabled} {...props} />\n        <span\n          className={styles.track}\n          aria-hidden=\"true\"\n          {...{ [FINRA_UI_ATTR]: componentIds.switchTrack }}>\n          <span className={styles.thumb} {...{ [FINRA_UI_ATTR]: componentIds.switchThumb }} />\n        </span>\n        {label ? (\n          <span className={styles.label} {...{ [FINRA_UI_ATTR]: componentIds.switchLabel }}>\n            {label}\n          </span>\n        ) : null}\n      </label>\n    );\n  },\n);\n\nSwitch.displayName = \"Switch\";\n",".radio {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--finra-density-gap);\n  cursor: var(--finra-cursor-pointer);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  line-height: var(--finra-leading-normal);\n  color: var(--finra-color-foreground);\n\n  &.disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n  }\n}\n\n.input {\n  position: absolute;\n  opacity: 0;\n  inline-size: 0;\n  block-size: 0;\n  margin: 0;\n  padding: 0;\n  pointer-events: none;\n\n  &:checked + .indicator {\n    border-color: var(--finra-color-primary-600);\n\n    > .dot {\n      transform: scale(1);\n    }\n  }\n\n  &:focus-visible + .indicator {\n    outline: var(--finra-focus-width) solid var(--finra-focus-color);\n    outline-offset: var(--finra-focus-offset);\n  }\n}\n\n.indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: var(--finra-density-checkbox-size);\n  block-size: var(--finra-density-checkbox-size);\n  border: var(--finra-border-thin) solid var(--finra-color-border);\n  border-radius: var(--finra-radius-full);\n  background-color: var(--finra-color-background);\n  flex-shrink: 0;\n  transition: border-color var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n}\n\n.dot {\n  inline-size: 50%;\n  block-size: 50%;\n  border-radius: var(--finra-radius-full);\n  background-color: var(--finra-color-primary-600);\n  transform: scale(0);\n  transition: transform var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n}\n\n.label {\n  user-select: none;\n}\n","import { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport { RadioButtonBase, type RadioButtonBaseProps } from \"../../unstyled/RadioButton/RadioButton\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./RadioButton.module.scss\";\n\nexport interface RadioButtonProps extends Omit<RadioButtonBaseProps, \"className\"> {\n  label?: string;\n  className?: string;\n}\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\n  ({ className, label, disabled, ...props }, ref) => {\n    return (\n      <label\n        {...{ [FINRA_UI_ATTR]: componentIds.radioButton }}\n        className={clsx(styles.radio, disabled && styles.disabled, className)}>\n        <RadioButtonBase ref={ref} className={styles.input} disabled={disabled} {...props} />\n        <span\n          className={styles.indicator}\n          aria-hidden=\"true\"\n          {...{ [FINRA_UI_ATTR]: componentIds.radioButtonIndicator }}>\n          <span className={styles.dot} />\n        </span>\n        {label ? (\n          <span className={styles.label} {...{ [FINRA_UI_ATTR]: componentIds.radioButtonLabel }}>\n            {label}\n          </span>\n        ) : null}\n      </label>\n    );\n  },\n);\n\nRadioButton.displayName = \"RadioButton\";\n",".slider {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--finra-density-gap);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  line-height: var(--finra-leading-normal);\n  color: var(--finra-color-foreground);\n  cursor: var(--finra-cursor-pointer);\n\n  &.disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n  }\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--finra-density-gap);\n}\n\n.label {\n  user-select: none;\n}\n\n.value {\n  font-variant-numeric: var(--finra-font-tabular-nums);\n  color: var(--finra-color-neutral-500);\n  font-size: var(--finra-text-xs);\n}\n\n.input {\n  appearance: none;\n  inline-size: 100%;\n  block-size: 4px;\n  border-radius: var(--finra-radius-full);\n  background-color: var(--finra-color-neutral-200);\n  outline: none;\n  cursor: inherit;\n  transition: background-color var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  //  Thumb - WebKit\n  &::-webkit-slider-thumb {\n    appearance: none;\n    inline-size: var(--finra-density-slider-thumb-size);\n    block-size: var(--finra-density-slider-thumb-size);\n    border-radius: var(--finra-radius-full);\n    background-color: var(--finra-color-primary-600);\n    border: var(--finra-border-medium) solid var(--finra-color-white);\n    box-shadow: var(--finra-shadow-sm);\n    cursor: inherit;\n    transition: background-color var(--finra-duration-fast) ease-in-out;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &::-webkit-slider-thumb:hover {\n    background-color: var(--finra-color-primary-700);\n  }\n\n  //  Thumb - Firefox\n  &::-moz-range-thumb {\n    inline-size: var(--finra-density-slider-thumb-size);\n    block-size: var(--finra-density-slider-thumb-size);\n    border-radius: var(--finra-radius-full);\n    background-color: var(--finra-color-primary-600);\n    border: var(--finra-border-medium) solid var(--finra-color-white);\n    box-shadow: var(--finra-shadow-sm);\n    cursor: inherit;\n    transition: background-color var(--finra-duration-fast) ease-in-out;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &::-moz-range-thumb:hover {\n    background-color: var(--finra-color-primary-700);\n  }\n\n  //  Track - Firefox\n  &::-moz-range-track {\n    background-color: var(--finra-color-neutral-200);\n    block-size: 4px;\n    border-radius: var(--finra-radius-full);\n  }\n\n  //  Focus\n  &:focus-visible {\n    &::-webkit-slider-thumb {\n      outline: var(--finra-focus-width) solid var(--finra-focus-color);\n      outline-offset: var(--finra-focus-offset);\n    }\n\n    &::-moz-range-thumb {\n      outline: var(--finra-focus-width) solid var(--finra-focus-color);\n      outline-offset: var(--finra-focus-offset);\n    }\n  }\n\n  //  Disabled\n  &:disabled {\n    &::-webkit-slider-thumb {\n      background-color: var(--finra-color-neutral-400);\n    }\n\n    &::-moz-range-thumb {\n      background-color: var(--finra-color-neutral-400);\n    }\n  }\n}\n","import { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport { SliderBase, type SliderBaseProps } from \"../../unstyled/Slider/Slider\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./Slider.module.scss\";\n\nexport interface SliderProps extends Omit<SliderBaseProps, \"className\"> {\n  label?: string;\n  showValue?: boolean;\n  className?: string;\n}\n\nexport const Slider = forwardRef<HTMLInputElement, SliderProps>(\n  ({ className, label, showValue, disabled, value, defaultValue, ...props }, ref) => {\n    const displayValue = value ?? defaultValue ?? \"\";\n\n    return (\n      <label\n        {...{ [FINRA_UI_ATTR]: componentIds.slider }}\n        className={clsx(styles.slider, disabled && styles.disabled, className)}>\n        {label || showValue ? (\n          <span className={styles.header} {...{ [FINRA_UI_ATTR]: componentIds.sliderHeader }}>\n            {label ? <span className={styles.label}>{label}</span> : null}\n            {showValue ? <span className={styles.value}>{displayValue}</span> : null}\n          </span>\n        ) : null}\n        <SliderBase\n          ref={ref}\n          className={styles.input}\n          disabled={disabled}\n          value={value}\n          defaultValue={defaultValue}\n          {...props}\n        />\n      </label>\n    );\n  },\n);\n\nSlider.displayName = \"Slider\";\n",".pillInput {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: calc(var(--finra-density-gap) * 0.5);\n  min-block-size: var(--finra-density-size-base);\n  padding-inline: var(--finra-density-input-padding-x);\n  padding-block: calc(var(--finra-density-gap) * 0.25);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  line-height: var(--finra-leading-normal);\n  background-color: var(--finra-color-background);\n  border: var(--finra-border-thin) solid var(--finra-color-border);\n  border-radius: var(--finra-radius-md);\n  cursor: var(--finra-cursor-text);\n  transition: border-color var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  &:focus-within {\n    border-color: var(--finra-color-primary-500);\n  }\n\n  &.disabled {\n    cursor: var(--finra-cursor-disabled);\n    background-color: var(--finra-color-neutral-50);\n    color: var(--finra-color-neutral-500);\n    border-color: var(--finra-color-neutral-200);\n  }\n}\n\n.pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.125rem;\n  block-size: var(--finra-density-size-compact);\n  padding-inline: var(--finra-density-gap);\n  background-color: var(--finra-color-neutral-100);\n  border: var(--finra-border-thin) solid var(--finra-color-neutral-200);\n  border-radius: var(--finra-radius-full);\n  font-size: var(--finra-text-xs);\n  color: var(--finra-color-neutral-900);\n  user-select: none;\n  flex-shrink: 0;\n}\n\n.pillText {\n  max-inline-size: 10rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pillRemove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--finra-color-neutral-400);\n  cursor: var(--finra-cursor-pointer);\n  border-radius: var(--finra-radius-full);\n  flex-shrink: 0;\n\n  &:hover {\n    color: var(--finra-color-foreground);\n  }\n\n  > svg {\n    inline-size: 0.75rem;\n    block-size: 0.75rem;\n  }\n}\n\n.input {\n  flex: 1;\n  min-inline-size: 4rem;\n  border: none;\n  outline: none;\n  background: transparent;\n  font: inherit;\n  color: var(--finra-color-foreground);\n  padding: 0;\n\n  // Override global :focus-visible - wrapper handles focus indication\n  &:focus-visible {\n    outline: none;\n  }\n\n  &::placeholder {\n    color: var(--finra-color-neutral-400);\n  }\n\n  &:disabled {\n    cursor: var(--finra-cursor-disabled);\n  }\n}\n","import { CloseSmallIcon } from \"@utk09/finra-ui-icons/react\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { mergeRefs } from \"../../utils/mergeRefs\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./PillInput.module.scss\";\n\nexport interface PillInputProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Current list of pills (controlled). */\n  values?: string[];\n  /** Called when the pill list changes. */\n  onChange?: (values: string[]) => void;\n  /** Placeholder shown when no pills and input is empty. */\n  placeholder?: string;\n  /** Disable the entire component. */\n  disabled?: boolean;\n  /** Maximum number of pills allowed. */\n  maxPills?: number;\n  /** Characters that trigger pill creation (default: Enter). */\n  delimiters?: string[];\n}\n\nexport const PillInput = forwardRef<HTMLInputElement, PillInputProps>(\n  (\n    {\n      className,\n      values: controlledValues,\n      onChange,\n      placeholder,\n      disabled,\n      maxPills,\n      delimiters = [],\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const [internalValues, setInternalValues] = useState<string[]>([]);\n    const [inputValue, setInputValue] = useState(\"\");\n    const internalRef = useRef<HTMLInputElement>(null);\n\n    const values = controlledValues ?? internalValues;\n\n    const updateValues = useCallback(\n      (next: string[]) => {\n        if (!controlledValues) {\n          setInternalValues(next);\n        }\n        onChange?.(next);\n      },\n      [controlledValues, onChange],\n    );\n\n    const addPill = useCallback(\n      (text: string) => {\n        const trimmed = text.trim();\n        if (!trimmed) return;\n        if (values.includes(trimmed)) return;\n        if (maxPills != null && values.length >= maxPills) return;\n        updateValues([...values, trimmed]);\n        setInputValue(\"\");\n      },\n      [values, maxPills, updateValues],\n    );\n\n    const removePill = useCallback(\n      (index: number) => {\n        updateValues(values.filter((_, i) => i !== index));\n        internalRef.current?.focus();\n      },\n      [values, updateValues],\n    );\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === \"Enter\") {\n          e.preventDefault();\n          addPill(inputValue);\n          return;\n        }\n        if (e.key === \"Backspace\" && inputValue === \"\" && values.length > 0) {\n          removePill(values.length - 1);\n          return;\n        }\n        if (delimiters.includes(e.key)) {\n          e.preventDefault();\n          addPill(inputValue);\n        }\n      },\n      [inputValue, values, delimiters, addPill, removePill],\n    );\n\n    const handleContainerClick = useCallback(() => {\n      if (!disabled) {\n        internalRef.current?.focus();\n      }\n    }, [disabled]);\n\n    const handleContainerKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!disabled && (e.key === \"Enter\" || e.key === \" \")) {\n          internalRef.current?.focus();\n        }\n      },\n      [disabled],\n    );\n\n    return (\n      <div\n        {...{ [FINRA_UI_ATTR]: componentIds.pillInput }}\n        role=\"toolbar\"\n        className={clsx(styles.pillInput, disabled && styles.disabled, className)}\n        onClick={handleContainerClick}\n        onKeyDown={handleContainerKeyDown}\n        {...props}>\n        {values.map((pill) => (\n          <span key={pill} className={styles.pill}>\n            <span className={styles.pillText}>{pill}</span>\n            {!disabled ? (\n              <button\n                type=\"button\"\n                className={styles.pillRemove}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  removePill(values.indexOf(pill));\n                }}\n                aria-label={`Remove ${pill}`}\n                tabIndex={-1}>\n                <CloseSmallIcon />\n              </button>\n            ) : null}\n          </span>\n        ))}\n        <input\n          ref={mergeRefs(forwardedRef, internalRef)}\n          className={styles.input}\n          type=\"text\"\n          value={inputValue}\n          onChange={(e) => setInputValue(e.target.value)}\n          onKeyDown={handleKeyDown}\n          placeholder={values.length === 0 ? placeholder : undefined}\n          disabled={disabled}\n          aria-label={props[\"aria-label\"]}\n          aria-labelledby={props[\"aria-labelledby\"]}\n        />\n      </div>\n    );\n  },\n);\n\nPillInput.displayName = \"PillInput\";\n",".dropZone {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-block-size: 8rem;\n  padding: var(--finra-spacing-6);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  line-height: var(--finra-leading-normal);\n  color: var(--finra-color-neutral-500);\n  background-color: var(--finra-color-background);\n  border: var(--finra-border-medium) dashed var(--finra-color-border);\n  border-radius: var(--finra-radius-lg);\n  cursor: var(--finra-cursor-pointer);\n  transition:\n    border-color var(--finra-duration-fast) ease-in-out,\n    background-color var(--finra-duration-fast) ease-in-out;\n  user-select: none;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  &:hover {\n    border-color: var(--finra-color-primary-400);\n    background-color: var(--finra-color-primary-50);\n  }\n\n  &:focus-visible {\n    outline: var(--finra-focus-width) solid var(--finra-focus-color);\n    outline-offset: var(--finra-focus-offset);\n  }\n\n  &.dragOver {\n    border-color: var(--finra-color-primary-500);\n    background-color: var(--finra-color-primary-50);\n  }\n\n  &.disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n\n    &:hover {\n      border-color: var(--finra-color-border);\n      background-color: var(--finra-color-background);\n    }\n  }\n}\n\n.input {\n  position: absolute;\n  inline-size: 0;\n  block-size: 0;\n  overflow: hidden;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--finra-density-gap);\n  text-align: center;\n}\n\n.icon {\n  inline-size: 2rem;\n  block-size: 2rem;\n  color: var(--finra-color-neutral-400);\n}\n\n.text {\n  color: var(--finra-color-neutral-500);\n}\n","import { UploadIcon } from \"@utk09/finra-ui-icons/react\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type DragEvent,\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { mergeRefs } from \"../../utils/mergeRefs\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./FileDropZone.module.scss\";\n\nexport interface FileDropZoneProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Called with selected files. */\n  onChange?: (files: File[]) => void;\n  /** Accepted file types (e.g. \".pdf,.csv\" or \"image/*\"). */\n  accept?: string;\n  /** Allow multiple file selection. */\n  multiple?: boolean;\n  /** Disable the component. */\n  disabled?: boolean;\n  /** Custom content inside the drop zone. */\n  children?: ReactNode;\n}\n\nexport const FileDropZone = forwardRef<HTMLInputElement, FileDropZoneProps>(\n  ({ className, onChange, accept, multiple, disabled, children, ...props }, forwardedRef) => {\n    const [isDragOver, setIsDragOver] = useState(false);\n    const internalRef = useRef<HTMLInputElement>(null);\n\n    const handleFiles = useCallback(\n      (fileList: FileList | null) => {\n        if (!fileList || fileList.length === 0) return;\n        onChange?.(Array.from(fileList));\n      },\n      [onChange],\n    );\n\n    const handleDragOver = useCallback(\n      (e: DragEvent<HTMLDivElement>) => {\n        e.preventDefault();\n        if (!disabled) {\n          setIsDragOver(true);\n        }\n      },\n      [disabled],\n    );\n\n    const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      setIsDragOver(false);\n    }, []);\n\n    const handleDrop = useCallback(\n      (e: DragEvent<HTMLDivElement>) => {\n        e.preventDefault();\n        setIsDragOver(false);\n        if (!disabled) {\n          handleFiles(e.dataTransfer.files);\n        }\n      },\n      [disabled, handleFiles],\n    );\n\n    const handleInputChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        handleFiles(e.target.files);\n        // Reset so the same file can be selected again\n        e.target.value = \"\";\n      },\n      [handleFiles],\n    );\n\n    const handleClick = useCallback(() => {\n      if (!disabled) {\n        internalRef.current?.click();\n      }\n    }, [disabled]);\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!disabled && (e.key === \"Enter\" || e.key === \" \")) {\n          e.preventDefault();\n          internalRef.current?.click();\n        }\n      },\n      [disabled],\n    );\n\n    return (\n      <>\n        <input\n          ref={mergeRefs(forwardedRef, internalRef)}\n          type=\"file\"\n          className={styles.input}\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          onChange={handleInputChange}\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          {...{ [FINRA_UI_ATTR]: componentIds.fileDropZoneInput }}\n        />\n        <div\n          {...{ [FINRA_UI_ATTR]: componentIds.fileDropZone }}\n          role=\"button\"\n          tabIndex={disabled ? -1 : 0}\n          aria-disabled={disabled || undefined}\n          className={clsx(\n            styles.dropZone,\n            isDragOver && styles.dragOver,\n            disabled && styles.disabled,\n            className,\n          )}\n          onClick={handleClick}\n          onKeyDown={handleKeyDown}\n          onDragOver={handleDragOver}\n          onDragLeave={handleDragLeave}\n          onDrop={handleDrop}\n          {...props}>\n          {children ?? (\n            <div className={styles.content}>\n              <UploadIcon className={styles.icon} aria-hidden=\"true\" />\n              <span className={styles.text}>Drop files here or click to browse</span>\n            </div>\n          )}\n        </div>\n      </>\n    );\n  },\n);\n\nFileDropZone.displayName = \"FileDropZone\";\n","//  Root container\n.comboBox {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n\n  &.fullWidth {\n    inline-size: 100%;\n  }\n}\n\n//  Trigger wrapper\n.wrapper {\n  --_input-border-color: var(--finra-color-border);\n\n  display: inline-flex;\n  align-items: center;\n  gap: var(--finra-density-gap);\n  min-block-size: var(--finra-density-size-base);\n  padding-inline: var(--finra-density-input-padding-x);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  line-height: var(--finra-leading-normal);\n  background-color: var(--finra-color-background);\n  border: var(--finra-border-thin) solid var(--_input-border-color);\n  border-radius: var(--finra-radius-md);\n  transition: border-color var(--finra-duration-fast) ease-in-out;\n  cursor: var(--finra-cursor-text);\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  &:focus-within {\n    --_input-border-color: var(--finra-color-primary-500);\n  }\n\n  &.disabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n    background-color: var(--finra-color-neutral-50);\n  }\n\n  &.open {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  //  Variants\n  &.variantPrimary {\n    border-width: var(--finra-border-thin);\n  }\n\n  &.variantSecondary {\n    border-width: var(--finra-border-thin);\n    background-color: var(--finra-color-neutral-50);\n  }\n\n  &.variantTertiary {\n    border-color: var(--finra-color-transparent);\n    border-block-end-color: var(--_input-border-color);\n    border-radius: 0;\n\n    &:focus-within {\n      border-block-end-color: var(--finra-color-primary-500);\n    }\n  }\n\n  //  Validation\n  &.statusError {\n    --_input-border-color: var(--finra-color-error);\n  }\n\n  &.statusWarning {\n    --_input-border-color: var(--finra-color-warning);\n  }\n\n  &.statusSuccess {\n    --_input-border-color: var(--finra-color-success);\n  }\n}\n\n//  Input field\n.input {\n  flex: 1;\n  min-inline-size: 4rem;\n  border: none;\n  outline: none;\n  background: transparent;\n  font: inherit;\n  color: var(--finra-color-foreground);\n  padding: 0;\n\n  // Override global :focus-visible - wrapper handles focus indication\n  &:focus-visible {\n    outline: none;\n  }\n\n  &::placeholder {\n    color: var(--finra-color-neutral-400);\n  }\n\n  &:disabled {\n    cursor: var(--finra-cursor-disabled);\n  }\n\n  &.inputHidden {\n    position: absolute;\n    opacity: 0;\n    inline-size: 0;\n    pointer-events: none;\n  }\n}\n\n//  Single value display\n.singleValue {\n  flex: 1;\n  min-inline-size: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--finra-color-foreground);\n}\n\n//  Multi-value container\n.multiValueContainer {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: calc(var(--finra-density-gap) * 0.5);\n  flex: 1;\n  padding-block: calc(var(--finra-density-gap) * 0.25);\n}\n\n//  Pills (multi select)\n.pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.125rem;\n  block-size: var(--finra-density-size-compact);\n  padding-inline: var(--finra-density-gap);\n  background-color: var(--finra-color-neutral-100);\n  border: var(--finra-border-thin) solid var(--finra-color-neutral-200);\n  border-radius: var(--finra-radius-full);\n  font-size: var(--finra-text-xs);\n  color: var(--finra-color-neutral-900);\n  user-select: none;\n  flex-shrink: 0;\n}\n\n.pillText {\n  max-inline-size: 10rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pillRemove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--finra-color-neutral-400);\n  cursor: var(--finra-cursor-pointer);\n  border-radius: var(--finra-radius-full);\n  flex-shrink: 0;\n\n  &:hover {\n    color: var(--finra-color-foreground);\n  }\n\n  > svg {\n    inline-size: 0.75rem;\n    block-size: 0.75rem;\n  }\n}\n\n//  Chevron indicator\n.indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--finra-color-neutral-400);\n  flex-shrink: 0;\n  transition: transform var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  > svg {\n    inline-size: var(--finra-density-icon-size);\n    block-size: var(--finra-density-icon-size);\n  }\n\n  &.indicatorOpen {\n    transform: rotate(180deg);\n  }\n}\n\n//  Dropdown listbox\n.listbox {\n  position: absolute;\n  z-index: 50;\n  inset-inline-start: 0;\n  inset-inline-end: 0;\n  inset-block-start: 100%;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--finra-color-background);\n  border: var(--finra-border-thin) solid var(--finra-color-border);\n  border-block-start: none;\n  border-end-start-radius: var(--finra-radius-md);\n  border-end-end-radius: var(--finra-radius-md);\n  box-shadow: var(--finra-shadow-lg);\n  overflow: hidden;\n}\n\n//  Options scroll container\n.options {\n  max-block-size: 16rem;\n  overflow-y: auto;\n  scrollbar-gutter: stable;\n}\n\n//  Option item\n.option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--finra-density-gap);\n  padding-inline: var(--finra-density-input-padding-x);\n  padding-block: calc(var(--finra-density-gap) * 0.75);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  line-height: var(--finra-leading-normal);\n  color: var(--finra-color-foreground);\n  cursor: var(--finra-cursor-pointer);\n  user-select: none;\n  transition: background-color var(--finra-duration-fast) ease-in-out;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  &.optionHighlighted {\n    background-color: var(--finra-color-primary-50);\n  }\n\n  &.optionSelected {\n    font-weight: var(--finra-font-medium);\n  }\n\n  &.optionDisabled {\n    opacity: var(--finra-opacity-disabled);\n    cursor: var(--finra-cursor-disabled);\n  }\n\n  &.optionCreate {\n    color: var(--finra-color-primary-600);\n    font-style: italic;\n  }\n}\n\n.optionLabel {\n  flex: 1;\n  min-inline-size: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.checkIcon {\n  inline-size: var(--finra-density-icon-size);\n  block-size: var(--finra-density-icon-size);\n  flex-shrink: 0;\n  color: var(--finra-color-primary-600);\n}\n\n//  Groups\n.group {\n  &:not(:first-child) {\n    border-block-start: var(--finra-border-thin) solid var(--finra-color-neutral-100);\n  }\n}\n\n.groupLabel {\n  padding-inline: var(--finra-density-input-padding-x);\n  padding-block: calc(var(--finra-density-gap) * 0.5);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-text-xs);\n  font-weight: var(--finra-font-semibold);\n  color: var(--finra-color-neutral-500);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  user-select: none;\n}\n\n//  Header / Footer\n.header,\n.footer {\n  padding-inline: var(--finra-density-input-padding-x);\n  padding-block: calc(var(--finra-density-gap) * 0.75);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-text-xs);\n  color: var(--finra-color-neutral-500);\n  border-block-end: var(--finra-border-thin) solid var(--finra-color-neutral-100);\n}\n\n.footer {\n  border-block-start: var(--finra-border-thin) solid var(--finra-color-neutral-100);\n  border-block-end: none;\n}\n\n//  Loading\n.loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--finra-density-gap);\n  padding-block: var(--finra-density-gap);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  color: var(--finra-color-neutral-400);\n}\n\n.spinner {\n  inline-size: 1rem;\n  block-size: 1rem;\n  animation: spin 1s linear infinite;\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n//  Empty\n.empty {\n  padding-inline: var(--finra-density-input-padding-x);\n  padding-block: var(--finra-density-gap);\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-density-input-font-size);\n  color: var(--finra-color-neutral-400);\n  text-align: center;\n}\n","import {\n  CheckIcon,\n  ChevronDownIcon,\n  CloseSmallIcon,\n  SpinnerIcon,\n} from \"@utk09/finra-ui-icons/react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  useMemo,\n} from \"react\";\n\nimport {\n  ComboBoxBase,\n  type ComboBoxClassNames,\n  type ComboBoxOption,\n  type ComboBoxRenderOptionState,\n} from \"../../unstyled/ComboBox/ComboBox\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport type { ValidationStatus } from \"../Input/Input\";\nimport styles from \"./ComboBox.module.scss\";\n\n//  Re-export types from unstyled\nexport type {\n  ComboBoxGroup,\n  ComboBoxOption,\n  ComboBoxRenderOptionState,\n} from \"../../unstyled/ComboBox/ComboBox\";\n\n//  Variants\n\nconst wrapperVariants = cva(styles.wrapper, {\n  variants: {\n    variant: {\n      primary: styles.variantPrimary,\n      secondary: styles.variantSecondary,\n      tertiary: styles.variantTertiary,\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n  },\n});\n\nconst validationClasses: Record<string, string> = {\n  error: styles.statusError,\n  warning: styles.statusWarning,\n  success: styles.statusSuccess,\n};\n\n//  Props\n\nexport interface ComboBoxProps<T = string>\n  extends\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\">,\n    VariantProps<typeof wrapperVariants> {\n  options: ComboBoxOption<T>[];\n  value?: T | T[] | null;\n  onChange?: (value: T | T[] | null) => void;\n  multiple?: boolean;\n\n  inputValue?: string;\n  onInputChange?: (value: string) => void;\n  filterFn?: (option: ComboBoxOption<T>, inputValue: string) => boolean;\n\n  loading?: boolean;\n  onLoadOptions?: (inputValue: string) => void;\n\n  creatable?: boolean;\n  onCreateOption?: (inputValue: string) => void;\n  formatCreateLabel?: (inputValue: string) => string;\n\n  header?: ReactNode;\n  footer?: ReactNode;\n\n  placeholder?: string;\n  disabled?: boolean;\n  validationStatus?: ValidationStatus;\n  fullWidth?: boolean;\n  noOptionsMessage?: string | ReactNode;\n\n  renderOption?: (option: ComboBoxOption<T>, state: ComboBoxRenderOptionState) => ReactNode;\n  renderValue?: (option: ComboBoxOption<T>) => ReactNode;\n\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\n//  Module-level stable render callbacks\n\nfunction styledRenderCheckIcon(): ReactNode {\n  return <CheckIcon className={styles.checkIcon} aria-hidden=\"true\" />;\n}\n\nfunction styledRenderIndicator(isCurrentOpen: boolean): ReactNode {\n  return (\n    <span\n      className={clsx(styles.indicator, isCurrentOpen && styles.indicatorOpen)}\n      aria-hidden=\"true\">\n      <ChevronDownIcon />\n    </span>\n  );\n}\n\nfunction styledRenderPillRemoveIcon(): ReactNode {\n  return <CloseSmallIcon />;\n}\n\nfunction styledRenderLoading(): ReactNode {\n  return (\n    <>\n      <SpinnerIcon className={styles.spinner} aria-hidden=\"true\" />\n      Loading...\n    </>\n  );\n}\n\n//  Static data attribute for the root element\n\nconst comboBoxDataAttributes = { [FINRA_UI_ATTR]: componentIds.comboBox } as const;\n\n//  Component\n\nfunction ComboBoxRender<T = string>(\n  {\n    className,\n    variant,\n    validationStatus,\n    fullWidth,\n    disabled = false,\n    open,\n    ...props\n  }: ComboBoxProps<T>,\n  forwardedRef: ForwardedRef<HTMLInputElement>,\n): React.ReactElement {\n  // Build the classNames object that maps unstyled slots to SCSS module classes.\n  // The wrapper class is dynamic (depends on variant, validation, disabled, open),\n  // so we compute it inside a useMemo keyed on those values.\n  const classNames = useMemo<ComboBoxClassNames>(\n    () => ({\n      root: clsx(styles.comboBox, fullWidth && styles.fullWidth, className),\n      wrapper: clsx(\n        wrapperVariants({ variant }),\n        disabled && styles.disabled,\n        validationStatus && validationClasses[validationStatus],\n        open && styles.open,\n      ),\n      multiValueContainer: styles.multiValueContainer,\n      pill: styles.pill,\n      pillText: styles.pillText,\n      pillRemove: styles.pillRemove,\n      singleValue: styles.singleValue,\n      input: styles.input,\n      inputHidden: styles.inputHidden,\n      indicator: styles.indicator,\n      indicatorOpen: styles.indicatorOpen,\n      listbox: styles.listbox,\n      header: styles.header,\n      footer: styles.footer,\n      options: styles.options,\n      option: styles.option,\n      optionHighlighted: styles.optionHighlighted,\n      optionSelected: styles.optionSelected,\n      optionDisabled: styles.optionDisabled,\n      optionCreate: styles.optionCreate,\n      optionLabel: styles.optionLabel,\n      checkIcon: styles.checkIcon,\n      group: styles.group,\n      groupLabel: styles.groupLabel,\n      loading: styles.loading,\n      spinner: styles.spinner,\n      empty: styles.empty,\n    }),\n    [className, variant, validationStatus, fullWidth, disabled, open],\n  );\n\n  return (\n    <ComboBoxBase<T>\n      ref={forwardedRef}\n      disabled={disabled}\n      open={open}\n      classNames={classNames}\n      dataAttributes={comboBoxDataAttributes}\n      renderCheckIcon={styledRenderCheckIcon}\n      renderIndicator={styledRenderIndicator}\n      renderPillRemoveIcon={styledRenderPillRemoveIcon}\n      renderLoading={styledRenderLoading}\n      {...props}\n    />\n  );\n}\n\nexport const ComboBox = forwardRef(ComboBoxRender) as <T = string>(\n  props: ComboBoxProps<T> & { ref?: Ref<HTMLInputElement> },\n) => React.ReactElement | null;\n\n(ComboBox as { displayName?: string }).displayName = \"ComboBox\";\n",".badge {\n  --_badge-accent: var(--finra-color-primary-600);\n  --_badge-accent-subtle: var(--finra-color-primary-50);\n  --_badge-on-accent: var(--finra-color-white);\n\n  //  Dark mode: inverted primary scale is too light for white text\n  :where([data-theme=\"dark\"]) & {\n    --_badge-on-accent: var(--finra-color-neutral-900);\n  }\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--finra-font-sans);\n  font-size: var(--finra-text-xs);\n  font-weight: var(--finra-font-medium);\n  line-height: var(--finra-leading-tight);\n  border-radius: var(--finra-radius-full);\n  white-space: nowrap;\n  padding-inline: var(--finra-density-gap);\n  padding-block: calc(var(--finra-density-gap) * 0.25);\n  border: var(--finra-border-thin) solid var(--finra-color-transparent);\n\n  //  Variants\n\n  &.variantPrimary {\n    background-color: var(--_badge-accent);\n    color: var(--_badge-on-accent);\n    border-color: var(--_badge-accent);\n  }\n\n  &.variantSecondary {\n    background-color: var(--finra-color-transparent);\n    color: var(--_badge-accent);\n    border-color: var(--_badge-accent);\n  }\n\n  &.variantTertiary {\n    background-color: var(--_badge-accent-subtle);\n    color: var(--_badge-accent-text, var(--_badge-accent));\n    border-color: var(--finra-color-transparent);\n  }\n\n  //  Sentiments\n\n  &.sentimentDanger {\n    --_badge-accent: var(--finra-color-error);\n    --_badge-accent-subtle: var(--finra-color-error-subtle);\n    --_badge-accent-text: var(--finra-color-error-hover);\n    --_badge-on-accent: var(--finra-color-white);\n  }\n\n  &.sentimentSuccess {\n    --_badge-accent: var(--finra-color-success);\n    --_badge-accent-subtle: var(--finra-color-success-subtle);\n    --_badge-on-accent: var(--finra-color-white);\n  }\n\n  &.sentimentWarning {\n    --_badge-accent: var(--finra-color-warning);\n    --_badge-accent-subtle: var(--finra-color-warning-subtle);\n    --_badge-on-accent: var(--finra-color-white);\n  }\n\n  &.sentimentInfo {\n    --_badge-accent: var(--finra-color-info);\n    --_badge-accent-subtle: var(--finra-color-info-subtle);\n    --_badge-on-accent: var(--finra-color-white);\n  }\n}\n","import { cva, type VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport type { Sentiment } from \"../../types/variants\";\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./Badge.module.scss\";\n\nexport type BadgeSentiment = Sentiment;\n\nconst sentimentClasses: Record<BadgeSentiment, string> = {\n  danger: styles.sentimentDanger,\n  success: styles.sentimentSuccess,\n  warning: styles.sentimentWarning,\n  info: styles.sentimentInfo,\n};\n\nconst badgeVariants = cva(styles.badge, {\n  variants: {\n    variant: {\n      primary: styles.variantPrimary,\n      secondary: styles.variantSecondary,\n      tertiary: styles.variantTertiary,\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n  },\n});\n\nexport interface BadgeProps\n  extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {\n  sentiment?: BadgeSentiment;\n  children: ReactNode;\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, variant, sentiment, children, ...props }, ref) => {\n    return (\n      <span\n        ref={ref}\n        {...{ [FINRA_UI_ATTR]: componentIds.badge }}\n        className={clsx(\n          badgeVariants({ variant }),\n          sentiment && sentimentClasses[sentiment],\n          className,\n        )}\n        {...props}>\n        {children}\n      </span>\n    );\n  },\n);\n\nBadge.displayName = \"Badge\";\n",".divider {\n  border: none;\n  margin: 0;\n  flex-shrink: 0;\n  background-color: var(--finra-color-border);\n\n  &.horizontal {\n    inline-size: 100%;\n    block-size: var(--finra-border-thin);\n  }\n\n  &.vertical {\n    block-size: 100%;\n    inline-size: var(--finra-border-thin);\n    align-self: stretch;\n  }\n}\n","import { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\n\nimport { componentIds, FINRA_UI_ATTR } from \"../componentIds\";\nimport styles from \"./Divider.module.scss\";\n\nexport interface DividerProps extends HTMLAttributes<HTMLHRElement> {\n  orientation?: \"horizontal\" | \"vertical\";\n  decorative?: boolean;\n  className?: string;\n}\n\nexport const Divider = forwardRef<HTMLHRElement, DividerProps>(\n  ({ className, orientation = \"horizontal\", decorative = false, ...props }, ref) => {\n    return (\n      <hr\n        ref={ref}\n        {...{ [FINRA_UI_ATTR]: componentIds.divider }}\n        className={clsx(\n          styles.divider,\n          orientation === \"vertical\" ? styles.vertical : styles.horizontal,\n          className,\n        )}\n        {...(decorative\n          ? { \"aria-hidden\": true }\n          : { role: \"separator\", \"aria-orientation\": orientation })}\n        {...props}\n      />\n    );\n  },\n);\n\nDivider.displayName = \"Divider\";\n"],"x_google_ignoreList":[1,2],"mappings":"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"}