@rdsaude/pulso-react-components/dist/components/input-multi-select/index.cjs.map

Biblioteca de componentes React do Pulso Design System da RD Saúde oferece componentes consistentes e de alto desempenho, alinhados com os padrões da RDSaúde. Ideal para desenvolver aplicações modernas e acessíveis.

{"version":3,"sources":["../../../src/components/input-multi-select/index.ts","../../../src/components/input-multi-select/components/input-multi-select-actions/index.tsx","../../../src/components/icon/index.tsx","../../../src/hooks/use-theme.ts","../../../src/components/theme-provider/index.tsx","../../../src/components/input-multi-select/utils/render-composition-children.tsx","../../../src/utils/tv.ts","../../../src/components/input-multi-select/components/input-multi-select-actions/index.styles.ts","../../../src/components/input-multi-select/components/input-multi-select-clear-button/index.tsx","../../../src/components/button/namespace.ts","../../../src/components/button/button-root.tsx","../../../src/hooks/use-enhanced-children.ts","../../../src/utils/inject-props-to-children.ts","../../../src/utils/cn.ts","../../../src/components/refresh/index.tsx","../../../src/components/button/button.styles.ts","../../../src/components/button/button-icon.tsx","../../../src/components/icon-dual-color/namespace.ts","../../../src/components/icon-dual-color/icon-dual-color-root.tsx","../../../src/components/icon-dual-color/icon-dual-color-top.tsx","../../../src/components/icon-dual-color/icon-dual-color-bottom.tsx","../../../src/components/button/button-icon-dual-color.tsx","../../../src/components/input-multi-select/components/input-multi-select-clear-button/index.styles.ts","../../../src/components/input-multi-select/components/input-multi-select-field/index.tsx","../../../src/components/input-multi-select/components/input-multi-select-field/index.styles.ts","../../../src/components/input-multi-select/components/input-multi-select-helpertext/index.tsx","../../../src/components/input-multi-select/components/input-multi-select-helpertext/index.styles.ts","../../../src/components/input-multi-select/components/input-multi-select-icon/index.tsx","../../../src/components/input-multi-select/components/input-multi-select-label/index.styles.ts","../../../src/components/input-multi-select/components/input-multi-select-label/index.tsx","../../../src/components/input-multi-select/components/input-multi-select-quantity/index.tsx","../../../src/components/chips/chips.tsx","../../../src/components/chips/components/chipsInput/index.tsx","../../../src/components/chips/chips.styles.ts","../../../src/components/chips/components/chipsLabel/index.tsx","../../../src/components/chips/components/chipsMultiple/index.tsx","../../../src/components/chips/hooks/use-chips.ts","../../../src/components/chips/components/chipsSingle/index.tsx","../../../src/components/input-multi-select/components/input-multi-select-quantity/index.styles.ts","../../../src/components/input-multi-select/input-multi-select.tsx","../../../src/components/input-multi-select/components/input-multi-select-dropdown/index.tsx","../../../src/components/option-menu/components/divider/index.tsx","../../../src/components/option-menu/components/footer/index.tsx","../../../src/components/option-menu/option-menu.tsx","../../../src/components/option-menu/components/group/index.tsx","../../../src/components/option-menu/components/item/index.tsx","../../../src/components/option-menu/components/item/index.styles.ts","../../../src/components/option-menu/components/list/index.tsx","../../../src/components/option-menu/utils/is-item-element.ts","../../../src/components/input-multi-select/input-multi-select.styles.tsx"],"sourcesContent":["export { InputMultiSelect } from './input-multi-select'\nexport type { InputMultiSelectProps } from './input-multi-select.types'\n","import { Children, isValidElement, useEffect, useMemo } from 'react'\nimport React from 'react'\nimport { Icon, type TIconProps } from '~/components/icon'\nimport {\n  InputMultiSelect,\n  useInputMultiSelectContext,\n} from '../../input-multi-select'\nimport type {\n  InputMultiSelectActionsProps,\n  InputMultiSelectScopedProps,\n} from '../../input-multi-select.types'\nimport { renderCompositionChildren } from '../../utils/render-composition-children'\nimport { InputMultiSelectActionsVariants } from './index.styles'\n\nexport const InputMultiSelectActions = ({\n  children,\n  __scopeInputMultiSelect,\n  ...props\n}: InputMultiSelectScopedProps<InputMultiSelectActionsProps>) => {\n  const { disabled, hasError, size, readonly, isActive, setActive } =\n    useInputMultiSelectContext(\n      'InputMultiSelectActions',\n      __scopeInputMultiSelect\n    )\n  const filled = !!(\n    props.selectedItemsQuantity && props.selectedItemsQuantity > 0\n  )\n  const hasTwoItems = !!(\n    props.selectedItemsQuantity && props.selectedItemsQuantity > 1\n  )\n\n  const iconColor = useMemo((): TIconProps['color'] => {\n    if (readonly) return 'colorTextNeutralReadonly'\n    return disabled ? 'colorTextNeutralDisabled' : 'colorTextNeutralDefault'\n  }, [disabled, readonly])\n\n  useEffect(() => {\n    setActive(!!props.isActive)\n  }, [props.isActive])\n\n  return (\n    <button\n      {...props}\n      onClick={e => {\n        setActive(!isActive)\n        if (props.onClick) props.onClick(e)\n      }}\n      className={InputMultiSelectActionsVariants({\n        active: isActive || props.isActive,\n        size,\n        disabled,\n        hasError,\n        readonly,\n        filled,\n        hasTwoItems,\n      })}\n      aria-disabled={disabled}\n    >\n      {renderCompositionChildren(\n        Children.map(children, child => {\n          if (isValidElement(child) && child.type === Icon) {\n            return React.cloneElement(child as React.ReactElement<TIconProps>, {\n              color: iconColor,\n            })\n          }\n          return child\n        }),\n        [\n          { child: InputMultiSelect.Icon, amount: 1 },\n          { child: InputMultiSelect.Field, amount: 1 },\n          { child: InputMultiSelect.Quantity, amount: 4 },\n          { child: InputMultiSelect.ClearButton, amount: 1 },\n          { child: Icon, amount: 1 },\n        ]\n      )}\n    </button>\n  )\n}\n","import * as React from 'react'\n\nimport type { RDSAUDESISTEMAS_TOKENS } from '@raiadrogasil/pulso-design-tokens'\nimport type { IconName } from '@raiadrogasil/pulso-icons'\n\nimport { useTheme } from '~/hooks/use-theme'\n\ntype IconVisualSize = 'tiny' | 'extra-small' | 'small' | 'medium'\ntype DesignTokens = typeof RDSAUDESISTEMAS_TOKENS\n\ntype TokenColorKeys = {\n  [K in keyof DesignTokens as K extends `color${string}`\n    ? K\n    : never]: DesignTokens[K]\n}\n\n/**\n * Propriedades do componente Icon.\n */\nexport type IconProps = React.ComponentProps<'i'> & {\n  /**\n   * Define o ícone a ser exibido, com base na lista de nomes disponíveis em `@raiadrogasil/pulso-icons`.\n   *\n   * @default 'rdicon-default'\n   */\n  symbol?: IconName\n\n  /**\n   * Define o tamanho visual do ícone, controlando o `font-size` com base nos tokens de espaçamento.\n   *\n   * Valores possíveis: 'tiny', 'extra-small', 'small', 'medium'.\n   *\n   * @default 'small'\n   */\n  size?: IconVisualSize\n\n  /**\n   * Define a cor do ícone usando uma chave de token de cor do design system.\n   * A cor é aplicada via `style.color`.\n   *\n   * @default 'colorActionFillBrandPrimaryEnabled'\n   */\n  color?: keyof TokenColorKeys\n}\n\nexport function Icon({\n  symbol = 'rdicon-default',\n  size = 'small',\n  color = 'colorActionFillBrandPrimaryEnabled',\n  ...props\n}: IconProps) {\n  const theme = useTheme()\n\n  const resolvedFontSizes = React.useMemo(() => {\n    return {\n      tiny: theme.sizingTiny,\n      'extra-small': theme.sizingExtrasmall,\n      small: theme.sizingSmall,\n      medium: theme.sizingMedium,\n    }\n  }, [])\n\n  return (\n    <i\n      {...props}\n      className={symbol}\n      style={{\n        fontSize: resolvedFontSizes[size],\n        color: theme[color],\n        display: 'inline-flex',\n      }}\n    />\n  )\n}\n\nIcon.displayName = 'Icon'\n\nexport * from './deprecated'\n","import * as React from 'react'\n\nimport {\n  DROGASIL_TOKENS,\n  GLOBALS_TOKENS,\n  PRIME_TOKENS,\n  RAIA_TOKENS,\n  RDSAUDESISTEMAS_TOKENS,\n  SUBSCRIPTION_TOKENS,\n} from '@raiadrogasil/pulso-design-tokens'\n\nimport { ThemeContext } from '~/components/theme-provider'\n\ntype ThemeTokens = typeof RDSAUDESISTEMAS_TOKENS & typeof GLOBALS_TOKENS\n\nexport function useTheme(): ThemeTokens {\n  const mappedTheme = React.useMemo(() => {\n    return {\n      rdsaudesistemas: RDSAUDESISTEMAS_TOKENS,\n      drogasil: DROGASIL_TOKENS,\n      raia: RAIA_TOKENS,\n      subscription: SUBSCRIPTION_TOKENS,\n      prime: PRIME_TOKENS,\n    }\n  }, [])\n\n  const context = React.useContext(ThemeContext)\n\n  if (!context) {\n    throw new Error(\n      '[Pulso] useTheme precisa estar dentro de um <ThemeProvider>. Verifique se o provedor está corretamente configurado na raiz da aplicação.'\n    )\n  }\n\n  const { currentTheme } = context\n\n  const result = {\n    ...GLOBALS_TOKENS,\n    ...mappedTheme[currentTheme],\n  } as ThemeTokens\n\n  return result\n}\n","import * as React from 'react'\n\nimport type { Themes } from '@raiadrogasil/pulso-design-tokens'\n\nexport const ThemeContext = React.createContext({\n  currentTheme: 'rdsaudesistemas',\n} as {\n  currentTheme: Themes\n})\n\ntype ThemeProviderProps = {\n  children: React.ReactNode\n  theme?: Themes\n}\n\nexport function ThemeProvider({\n  children,\n  theme = 'rdsaudesistemas',\n}: ThemeProviderProps) {\n  if (typeof window !== 'undefined') {\n    document.documentElement.setAttribute('class', theme)\n  }\n\n  return (\n    <ThemeContext.Provider\n      value={{\n        currentTheme: theme,\n      }}\n    >\n      {children}\n    </ThemeContext.Provider>\n  )\n}\n","import { Children, isValidElement } from 'react'\n\n// biome-ignore lint/suspicious/noExplicitAny:\ntype Child = React.JSXElementConstructor<any>\n\nexport type IValidChildComponents = {\n  /**\n   * Representa o filho que pode ser renderizado\n   */\n  child: Child\n  /**\n   * Representa a quantidade de vezes que esse componente pode ser renderizado\n   */\n  amount: number\n}\n\n/**\n *\n * @param children Filhos do componente a ser validado\n * @param validComponents Array com os componentes que podem serem realizados\n * @returns filhos validos\n */\nexport const renderCompositionChildren = (\n  children: React.ReactNode,\n  validComponents: IValidChildComponents[]\n) => {\n  const childrenArray = Children.toArray(children)?.filter(child =>\n    isValidElement(child)\n  )\n\n  return childrenArray.map((child, index) => {\n    const validComponent = validComponents.find(\n      component => child.type === component.child\n    )\n\n    // Representa quantos items válidos tem antes do index desse componente\n    const childAmount = childrenArray.reduce<number>((acc, c, cIndex) => {\n      if (c?.type === child.type && cIndex <= index) {\n        return acc + 1\n      }\n\n      return acc\n    }, 0)\n\n    /**\n     * Se o child for um component valido e estiver antes da quantidade\n     * permitida, deve ser renderizado.\n     */\n    if (validComponent && childAmount <= validComponent?.amount) return child\n\n    return null\n  })\n}\n","import { type VariantProps, createTV } from 'tailwind-variants'\n\nexport const tv = createTV({\n  twMerge: true,\n  twMergeConfig: {\n    extend: {\n      classGroups: {\n        'font-size': [\n          {\n            text: ['threepulse', 'threeandhalfpulse'],\n          },\n        ],\n        'border-width': [\n          {\n            border: ['quarterpulse', 'halfpulse'],\n          },\n        ],\n        '--tw-ring-inset': [\n          {\n            ring: ['none', 'quarterpulse', 'halfpulse'],\n          },\n        ],\n      },\n    },\n  },\n})\n\nexport type { VariantProps }\n","import { tv } from '~/utils/tv'\n\nexport const InputMultiSelectActionsVariants = tv({\n  base: `\n    group flex w-full items-center justify-between gap-onepulse\n    bg-forms-fill border-forms-none overflow-hidden cursor-pointer\n    min-w-[calc(var(--sizing-huge)_+_var(--sizing-tiny))] focus-visible:outline-none\n    `,\n  variants: {\n    size: {\n      md: 'min-h-medium rounded-form px-threepulse',\n      ml: 'min-h-mediumlarge rounded-form px-threepulse',\n      lg: 'min-h-large rounded-form px-threepulse',\n      xl: 'min-h-extralarge rounded-largecontainer px-threepulse',\n    },\n    hasError: {\n      true: '',\n    },\n    disabled: {\n      true: '',\n    },\n    filled: {\n      true: '',\n    },\n    readonly: {\n      true: '',\n    },\n    active: {\n      true: '',\n    },\n    hasTwoItems: {\n      true: '',\n    },\n  },\n  compoundVariants: [\n    {\n      hasError: true,\n      active: true,\n      class: `\n          border-forms-border-error bg-forms-fill-error\n          border-halfpulse\n        `,\n    },\n    {\n      hasError: true,\n      filled: true,\n      active: false,\n      class: `\n          border border-forms-border-error bg-forms-fill-error\n          hover:border-forms-border-error hover:border-halfpulse\n          focus:border-forms-border-error focus:border-halfpulse\n          active:border-forms-border-error active:border-halfpulse\n        `,\n    },\n    {\n      hasError: true,\n      filled: false,\n      active: false,\n      class: `\n          border-forms-border-error border-quarterpulse bg-forms-fill \n          hover:border-forms-border-error hover:bg-forms-fill-hovered hover:border-halfpulse\n          focus:border-forms-border-error focus:border-halfpulse\n          active:border-forms-border-error active:border-halfpulse\n        `,\n    },\n    {\n      readonly: true,\n      filled: true,\n      class: `\n          border border-forms-border-readonly bg-forms-fill-readonly\n          hover:border-forms-border-readonly hover:border-quarterpulse\n          focus:border-forms-border-readonly focus:border-quarterpulse\n          active:border-forms-border-readonly active:border-quarterpulse\n        `,\n    },\n    {\n      readonly: true,\n      filled: false,\n      class: `\n          border border-forms-border-readonly bg-forms-fill-readonly\n          hover:border-forms-border-readonly hover:border-quarterpulse\n          focus:border-forms-border-readonly focus:border-quarterpulse\n          active:border-forms-border-readonly active:border-quarterpulse\n\n        `,\n    },\n    {\n      disabled: true,\n      filled: true,\n      class: `\n          border border-forms-border-disabled bg-forms-fill-disabled\n          hover:border-forms-border-disabled hover:border-quarterpulse\n          focus:border-forms-border-disabled focus:border-quarterpulse\n          active:border-forms-border-disabled active:border-quarterpulse\n        `,\n    },\n    {\n      disabled: true,\n      filled: false,\n      class: `\n          border border-forms-border-disabled bg-forms-fill-disabled\n          hover:border-forms-border-disabled hover:border-quarterpulse\n          focus:border-forms-border-disabled focus:border-quarterpulse\n          active:border-forms-border-disabled active:border-quarterpulse\n        `,\n    },\n    {\n      active: true,\n      filled: true,\n      readonly: false,\n      disabled: false,\n      hasError: false,\n      class:\n        'cursor-pointer border-forms-border-focused border-forms-border-focused border-halfpulse bg-forms-fill-focused active:border-forms-border-focused active:border-halfpulse',\n    },\n    {\n      active: true,\n      readonly: false,\n      disabled: false,\n      hasError: false,\n      filled: false,\n      class:\n        'cursor-pointer border border-forms-border-focused border-forms-border-focused border-halfpulse bg-forms-fill-focused',\n    },\n    {\n      active: false,\n      hasError: false,\n      disabled: false,\n      readonly: false,\n      filled: true,\n      class:\n        'border border-forms-border-filled border-quarterpulse bg-forms-fill-filled hover:border-halfpulse focus:border-forms-border-focused focus:border-halfpulse focus:bg-forms-fill-focused active:border-forms-border-focused active:border-halfpulse active:bg-forms-fill-focused',\n    },\n    {\n      active: false,\n      hasError: false,\n      disabled: false,\n      readonly: false,\n      filled: false,\n      class: `\n          focus-simple:cursor-pointer\n          focus:border-halfpulse focus:border-forms-border-focused focus:cursor-pointer\n          hover:border-none hover:bg-forms-fill-hovered\n        `,\n    },\n    {\n      size: 'md',\n      hasTwoItems: false,\n      class: 'h-medium',\n    },\n    {\n      size: 'ml',\n      hasTwoItems: false,\n      class: 'h-mediumlarge',\n    },\n    {\n      size: 'lg',\n      hasTwoItems: false,\n      class: 'h-large',\n    },\n    {\n      size: 'xl',\n      hasTwoItems: false,\n      class: 'h-extralarge',\n    },\n  ],\n  defaultVariants: {\n    size: 'ml',\n    isFocused: false,\n    hasError: false,\n    readonly: false,\n    disabled: false,\n  },\n})\n","import { useMemo } from 'react'\nimport { Button } from '~/components/button'\nimport { useInputMultiSelectContext } from '../../input-multi-select'\nimport type {\n  InputMultiSelectClearButtonProps,\n  InputMultiSelectScopedProps,\n} from '../../input-multi-select.types'\nimport {\n  InputMultiSelectClearButtonContainerVariants,\n  InputMultiSelectClearButtonVariants,\n} from './index.styles'\n\nexport const InputMultiSelectClearButton = ({\n  __scopeInputMultiSelect,\n  ...props\n}: InputMultiSelectScopedProps<InputMultiSelectClearButtonProps>) => {\n  const { size, disabled, isActive, readonly } = useInputMultiSelectContext(\n    'InputMultiSelectClearButton',\n    __scopeInputMultiSelect\n  )\n\n  const buttonSize = useMemo(() => {\n    switch (size) {\n      case 'md':\n        return 'md'\n      default:\n        return 'ml'\n    }\n  }, [size])\n\n  return (\n    <div\n      className={InputMultiSelectClearButtonContainerVariants({\n        size,\n        disabled,\n        isActive,\n        readOnly: readonly,\n      })}\n      aria-disabled={disabled}\n    >\n      <Button.Root\n        {...props}\n        size={buttonSize}\n        disabled={disabled}\n        variant=\"neutral-tertiary\"\n        className={InputMultiSelectClearButtonVariants({ size: buttonSize })}\n      >\n        <Button.Icon symbol=\"rdicon-dismiss-circle-outline\" />\n      </Button.Root>\n    </div>\n  )\n}\n","export { ButtonRoot as Root } from './button-root'\nexport { ButtonIcon as Icon } from './button-icon'\nexport { ButtonIconDualColor as IconDualColor } from './button-icon-dual-color'\n","import * as React from 'react'\n\nimport type { Assign } from '@ark-ui/react'\nimport { ark } from '@ark-ui/react/factory'\n\nimport { useEnhancedChildren } from '~/hooks/use-enhanced-children'\n\nimport { cn } from '~/utils/cn'\nimport type { VariantProps } from '~/utils/tv'\n\nimport { Refresh, type RefreshColor } from '~/components/refresh'\n\nimport { root as rootStyle } from './button.styles'\n\nexport type ButtonSharedProps = Omit<\n  VariantProps<typeof rootStyle>,\n  'asIconOnly'\n> & {\n  disabled?: boolean\n}\n\nexport type ButtonRootProps = Assign<\n  React.ComponentProps<typeof ark.button>,\n  ButtonSharedProps\n> & {\n  loading?: boolean\n  full?: boolean\n}\n\nexport function ButtonRoot({\n  children,\n  className,\n  variant = 'brand-primary',\n  size,\n  disabled,\n  loading,\n  asChild,\n  full,\n  ...props\n}: ButtonRootProps) {\n  const enhancedChildrenWithInjectProps = useEnhancedChildren(children, {\n    targets: ['ButtonIcon', 'ButtonIconDualColor'],\n    props: {\n      variant,\n      size,\n      disabled,\n    },\n    asChild,\n  })\n\n  const shouldShowSpinner = !disabled && loading\n\n  const refreshColorByVariant = {\n    'brand-primary': 'white',\n    'neutral-secondary': 'black',\n    'neutral-tertiary': 'black',\n  } as Record<typeof variant, RefreshColor>\n\n  const loadingAccessibilityProps = {\n    'aria-live': 'polite',\n    'aria-busy': true,\n  } as const\n\n  const isOnlyIcon = React.useCallback(() => {\n    if (\n      React.Children.count(children) === 1 &&\n      React.isValidElement(children)\n    ) {\n      const displayName =\n        (children.type as React.ComponentType)?.displayName ?? ''\n      return ['ButtonIcon', 'ButtonIconDualColor'].includes(displayName)\n    }\n\n    return false\n  }, [children])\n\n  return (\n    <ark.button\n      {...props}\n      {...(shouldShowSpinner && loadingAccessibilityProps)}\n      className={cn(\n        rootStyle({\n          variant,\n          size,\n          asIconOnly: isOnlyIcon(),\n          className: shouldShowSpinner && 'pointer-events-none',\n        }),\n        full && 'w-full',\n        className\n      )}\n      disabled={disabled}\n      data-scope=\"button\"\n    >\n      {shouldShowSpinner ? (\n        <Refresh color={refreshColorByVariant[variant]} />\n      ) : (\n        enhancedChildrenWithInjectProps\n      )}\n    </ark.button>\n  )\n}\n\nButtonRoot.displayName = 'ButtonRoot'\n","import * as React from 'react'\n\nimport { injectPropsToChildren } from '~/utils/inject-props-to-children'\n\nexport function useEnhancedChildren<T extends object>(\n  children: React.ReactNode,\n  {\n    targets,\n    props,\n    asChild,\n  }: {\n    targets: string[]\n    props: T\n    asChild?: boolean\n  }\n) {\n  const keyPrefix = React.useId()\n\n  return injectPropsToChildren(children, {\n    targets,\n    props,\n    asChild,\n    keyPrefix,\n  })\n}\n","import * as React from 'react'\n\ntype InjectPropsToChildrenOptions<T = unknown> = {\n  /**\n   * List of component displayNames to match.\n   * Props will only be injected into components matching these names.\n   */\n  targets: string[]\n\n  /**\n   * Props to inject into the matched components.\n   */\n  props: Partial<T>\n\n  /**\n   * Optional key prefix for cloned elements.\n   */\n  keyPrefix?: string\n\n  /**\n   * Whether to return only the first child (e.g. for Slot-like behavior).\n   */\n  asChild?: boolean\n}\n\n/**\n * Recursively injects props into React children whose displayName matches a list of target names.\n *\n * This is useful for compound component patterns where parent-level props need to reach\n * specific nested children without direct prop drilling.\n *\n * @param children - The children tree to traverse.\n * @param options - Match configuration and props to inject.\n * @returns The cloned React nodes with props injected into matching components.\n */\nexport function injectPropsToChildren<T = unknown>(\n  children: React.ReactNode,\n  options: InjectPropsToChildrenOptions<T>\n): React.ReactNode {\n  const { targets, props, keyPrefix = 'inject', asChild } = options\n\n  const cloned = React.Children.map(children, (child, index) => {\n    if (!React.isValidElement(child)) return child\n\n    const displayName = (child.type as React.ComponentType)?.displayName ?? ''\n    const shouldInject = targets.includes(displayName)\n\n    const childProps = child.props as {\n      children?: React.ReactNode\n      asChild?: boolean\n    }\n\n    return React.cloneElement(\n      child,\n      {\n        ...(shouldInject ? props : {}),\n        key: `${keyPrefix}-${index.toString()}`,\n      },\n      injectPropsToChildren(childProps?.children, {\n        targets,\n        props,\n        keyPrefix,\n        asChild: childProps?.asChild,\n      })\n    )\n  })\n\n  return asChild ? cloned?.[0] : cloned\n}\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport const cn = (...input: ClassValue[]) => twMerge(clsx(...input))\n","import * as React from 'react'\n\nimport { useTheme } from '~/hooks/use-theme'\nimport { cn } from '~/utils/cn'\n\n/**\n * Conjunto de opções de cor disponíveis para o componente Refresh.\n */\nexport type RefreshColor = 'brand' | 'neutral' | 'black' | 'white'\n\n/**\n * Propriedades do componente Refresh.\n */\nexport type RefreshProps = {\n  /**\n   * Define a cor do ícone de carregamento com base nos tokens do tema.\n   * - `brand`: usa a cor primária da marca.\n   * - `neutral`: usa um tom neutro de leitura.\n   * - `black`: usa a cor padrão para texto.\n   * - `white`: usa a cor inversa (geralmente branco).\n   *\n   * @default \"brand\"\n   */\n  color?: RefreshColor\n\n  /**\n   * Texto alternativo para acessibilidade (leitores de tela).\n   * É renderizado como `aria-label` e como conteúdo do elemento `<title>` do SVG.\n   */\n  srText?: string\n}\n\n/**\n * Componente de ícone animado de carregamento, com suporte a temas e acessibilidade.\n */\nexport function Refresh({ color = 'brand', srText }: RefreshProps) {\n  const theme = useTheme()\n\n  const colorMap = React.useMemo(() => {\n    return {\n      brand: theme.colorActionFillBrandPrimaryEnabled,\n      neutral: theme.colorTextNeutralReadonly,\n      black: theme.colorTextNeutralDefault,\n      white: theme.colorTextNeutralInverse,\n    }\n  }, [theme])\n\n  const fillColor = colorMap[color]\n\n  return (\n    <div\n      role=\"status\"\n      className={cn('grid size-8 place-items-center')}\n      aria-label={srText}\n    >\n      <svg className={cn('size-6 animate-spin fill-none')} viewBox=\"0 0 24 24\">\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0v2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12H0z\"\n          fill={fillColor}\n        />\n        <title>{srText}</title>\n      </svg>\n    </div>\n  )\n}\n\nexport * from './deprecated'\n","import { tv } from '~/utils/tv'\n\nconst buttonStyles = tv({\n  slots: {\n    root: [\n      'inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap',\n      'gap-x-[var(--spacing-inline-twopulse)] rounded-full',\n      'outline-[var(--color-action-border-focused)] outline-offset-2',\n      'font-inherit font-bold tracking-[var(--letter-spacing-default)]',\n      'focus-visible:outline-2',\n      'disabled:cursor-not-allowed disabled:text-[var(--color-text-neutral-disabled)]',\n    ],\n  },\n  variants: {\n    variant: {\n      'brand-primary': {\n        root: [\n          'bg-[var(--color-action-fill-brand-primary-enabled)]',\n          'text-[var(--color-text-neutral-inverse)]',\n          'enabled:hover:bg-[var(--color-action-fill-brand-primary-hovered)]',\n          'active:bg-[var(--color-action-fill-brand-primary-pressed)]',\n          'disabled:bg-[var(--color-action-fill-brand-primary-disabled)]',\n        ],\n      },\n      'neutral-secondary': {\n        root: [\n          'ring-[var(--color-action-border-neutral-secondary-enabled)]',\n          'ring-[length:var(--border-width-quarterpulse)]',\n          'bg-[var(--color-action-fill-neutral-secondary-enabled)]',\n          'text-[var(--color-text-neutral-default)]',\n          'enabled:hover:ring-[var(--color-action-border-neutral-secondary-hovered)]',\n          'enabled:hover:bg-[var(--color-action-fill-neutral-secondary-hovered)]',\n          'active:ring-[var(--color-action-border-neutral-secondary-pressed)]',\n          'active:bg-[var(--color-action-fill-neutral-secondary-pressed)]',\n          'disabled:ring-[var(--color-action-border-neutral-secondary-disabled)]',\n          'disabled:bg-[var(--color-action-fill-neutral-secondary-disabled)]',\n        ],\n      },\n      'neutral-tertiary': {\n        root: [\n          'ring-[var(--color-action-border-neutral-tertiary-enabled)]',\n          'ring-[length:var(--border-width-quarterpulse)]',\n          'bg-[var(--color-action-fill-neutral-tertiary-enabled)]',\n          'text-[var(--color-text-neutral-default)]',\n          'enabled:hover:ring-[var(--color-action-border-neutral-tertiary-hovered)]',\n          'enabled:hover:bg-[var(--color-action-fill-neutral-tertiary-hovered)]',\n          'active:ring-[var(--color-action-border-neutral-tertiary-pressed)]',\n          'active:bg-[var(--color-action-fill-neutral-tertiary-pressed)]',\n          'disabled:ring-[var(--color-action-border-neutral-tertiary-disabled)]',\n          'disabled:bg-[var(--color-action-fill-neutral-tertiary-disabled)]',\n        ],\n      },\n    },\n    size: {\n      md: {\n        root: [\n          'h-[var(--sizing-medium)] min-w-8 px-[var(--padding-inset-fourpulse)]',\n          'text-[length:var(--font-size-threepulse)]',\n          'leading-[var(--line-height-medium)]',\n        ],\n      },\n      ml: {\n        root: [\n          'h-[var(--sizing-mediumlarge)] min-w-10 px-[var(--padding-inset-fourpulse)]',\n        ],\n      },\n      lg: {\n        root: [\n          'h-[var(--sizing-large)] min-w-12 px-[var(--padding-inset-fivepulse)]',\n        ],\n      },\n      xl: {\n        root: [\n          'h-[var(--sizing-extralarge)] min-w-14 px-[var(--padding-inset-sixpulse)]',\n        ],\n      },\n    },\n    asIconOnly: {\n      true: {\n        root: 'aspect-square px-0',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      size: ['ml', 'lg'],\n      class: {\n        root: [\n          'text-[length:var(--font-size-threeandhalfpulse)]',\n          'leading-[var(--line-height-small)]',\n        ],\n      },\n    },\n  ],\n  defaultVariants: {\n    variant: 'brand-primary',\n    size: 'ml',\n    asIconOnly: false,\n  },\n})\n\nexport const { root } = buttonStyles()\n","import { useMemo } from 'react'\nimport { Icon, type IconProps } from '~/components/icon'\nimport type { ButtonSharedProps } from './button-root'\n\ntype ButtonIconProps = Omit<ButtonSharedProps, 'asIconOnly'> & {\n  iconColor?: IconProps['color']\n  symbol?: IconProps['symbol']\n}\n\nexport function ButtonIcon({\n  variant,\n  size,\n  disabled,\n  iconColor,\n  symbol,\n}: ButtonIconProps) {\n  const sizeToIconSize: Record<\n    NonNullable<ButtonSharedProps['size']>,\n    IconProps['size']\n  > = {\n    md: 'extra-small',\n    ml: 'small',\n    lg: 'small',\n    xl: 'small',\n  }\n\n  const variantToIconColor: Record<\n    NonNullable<ButtonSharedProps['variant']>,\n    IconProps['color']\n  > = {\n    'brand-primary': 'colorTextNeutralInverse',\n    'neutral-secondary': 'colorTextNeutralDefault',\n    'neutral-tertiary': 'colorTextNeutralDefault',\n  }\n\n  const color = useMemo(() => {\n    if (disabled) return 'colorTextNeutralDisabled'\n    if (iconColor) return iconColor\n\n    return variantToIconColor[variant!]\n  }, [disabled, variant])\n\n  const iconSize = sizeToIconSize[size!]\n\n  return <Icon color={color} size={iconSize} symbol={symbol} />\n}\n\nButtonIcon.displayName = 'ButtonIcon'\n","export { IconDualColorRoot as Root } from './icon-dual-color-root'\nexport { IconDualColorTop as Top } from './icon-dual-color-top'\nexport { IconDualColorBottom as Bottom } from './icon-dual-color-bottom'\n","import { ark } from '@ark-ui/react/factory'\nimport { useEnhancedChildren } from '~/hooks/use-enhanced-children'\nimport type { IconProps } from '../icon'\n\nexport type IconDualColorRootProps = Omit<\n  React.ComponentPropsWithRef<'div'>,\n  'className'\n> &\n  Pick<IconProps, 'size'> & {\n    /**\n     * Quando `true`, renderiza o componente como um slot via `@radix-ui/react-slot`,\n     * permitindo controle externo sobre o elemento raiz.\n     */\n    asChild?: boolean\n    /**\n     * Define se o componente está desabilitado.\n     * Quando `true`, o componente não pode ser interagido.\n     */\n    disabled?: boolean\n  }\n\nexport function IconDualColorRoot({\n  children,\n  size = 'small',\n  disabled = false,\n  asChild,\n  ...props\n}: IconDualColorRootProps) {\n  const enhancedChildrenWithInjectProps = useEnhancedChildren(children, {\n    targets: ['IconDualColorTop', 'IconDualColorBottom'],\n    props: {\n      size,\n      disabled,\n    },\n    asChild,\n  })\n\n  return (\n    <ark.div\n      data-testid=\"icon-dual-color-root\"\n      aria-label=\"Ícones\"\n      aria-disabled={disabled}\n      asChild={asChild}\n      {...props}\n      className=\"relative flex [&>[data-icon=top]]:absolute\"\n    >\n      {enhancedChildrenWithInjectProps}\n    </ark.div>\n  )\n}\n\nIconDualColorRoot.displayName = 'IconDualColorRoot'\n","import { Icon, type IconProps } from '../icon'\n\ntype IconDualColorTopProps = Omit<IconProps, 'size'>\n\nexport function IconDualColorTop({\n  children,\n  color = 'colorActionTextOnbrandDefault',\n  // @ts-expect-error size prop is taken from IconDualColorRoot\n  size,\n  // @ts-expect-error disabled prop is taken from IconDualColorRoot\n  disabled,\n  ...props\n}: IconDualColorTopProps) {\n  const iconColor = disabled ? 'colorTextNeutralDisabled' : color\n\n  return (\n    <Icon\n      data-testid=\"icon-dual-color-top\"\n      data-icon=\"top\"\n      data-size={size}\n      color={iconColor}\n      size={size}\n      {...props}\n    >\n      {children}\n    </Icon>\n  )\n}\n\nIconDualColorTop.displayName = 'IconDualColorTop'\n","import { Icon, type IconProps } from '../icon'\n\ntype IconDualColorBottomProps = Omit<IconProps, 'size'>\n\nexport function IconDualColorBottom({\n  children,\n  color = 'colorTextNeutralDefault',\n  // @ts-expect-error size prop is taken from IconDualColorRoot\n  size,\n  // @ts-expect-error disabled prop is taken from IconDualColorRoot\n  disabled,\n  ...props\n}: IconDualColorBottomProps) {\n  const iconColor = disabled ? 'colorTextNeutralDisabled' : color\n\n  return (\n    <Icon\n      data-testid=\"icon-dual-color-bottom\"\n      data-icon=\"bottom\"\n      data-size={size}\n      color={iconColor}\n      size={size}\n      {...props}\n    >\n      {children}\n    </Icon>\n  )\n}\n\nIconDualColorBottom.displayName = 'IconDualColorBottom'\n","import type { Assign } from '@ark-ui/react'\nimport type { IconProps } from '../icon'\nimport { IconDualColor, type IconDualColorProps } from '../icon-dual-color'\nimport type { ButtonSharedProps } from './button-root'\n\ntype ButtonIconDualColorProps = Assign<\n  IconDualColorProps,\n  Omit<ButtonSharedProps, 'asIconOnly'>\n>\n\nexport function ButtonIconDualColor({\n  size = 'ml',\n  ...props\n}: ButtonIconDualColorProps) {\n  const sizeToIconSize: Record<\n    NonNullable<ButtonSharedProps['size']>,\n    IconProps['size']\n  > = {\n    md: 'extra-small',\n    ml: 'small',\n    lg: 'small',\n    xl: 'small',\n  }\n\n  return <IconDualColor.Root {...props} size={sizeToIconSize[size]} />\n}\n\nButtonIconDualColor.displayName = 'ButtonIconDualColor'\n","import { tv } from '~/utils/tv'\n\nexport const InputMultiSelectClearButtonContainerVariants = tv({\n  base: 'input-text-clear-button group-active:hidden',\n  variants: {\n    size: {\n      md: '-mr-[0.375rem]',\n      ml: '-mr-[0.5rem]',\n      lg: '-mr-[0.5rem]',\n      xl: '-mr-[0.5rem]',\n    },\n    readOnly: { true: 'invisible hidden' },\n    disabled: { true: 'invisible hidden' },\n    isActive: { true: '' },\n  },\n  compoundVariants: [\n    {\n      readOnly: false,\n      disabled: false,\n      isActive: true,\n      class:\n        'peer-focus/field:peer-[:not(:placeholder-shown)]/field:visible peer-focus/field:peer-[:not(:placeholder-shown)]/field:flex group-hover:peer-[:not(:placeholder-shown)]/field:flex',\n    },\n  ],\n  defaultVariants: {\n    readOnly: false,\n    disabled: false,\n  },\n})\n\nexport const InputMultiSelectClearButtonVariants = tv({\n  base: 'px-none',\n  variants: {\n    size: {\n      md: 'h-medium w-medium',\n      ml: 'h-mediumlarge w-mediumlarge',\n      lg: 'h-mediumlarge w-mediumlarge',\n      xl: 'h-mediumlarge w-mediumlarge',\n    },\n  },\n})\n","import { forwardRef } from 'react'\nimport { useInputMultiSelectContext } from '../../input-multi-select'\nimport type {\n  InputMultiSelectFieldProps,\n  InputMultiSelectScopedProps,\n} from '../../input-multi-select.types'\nimport { InputMultiSelectFieldVariants } from './index.styles'\n\nexport const InputMultiSelectField = forwardRef<\n  HTMLInputElement,\n  InputMultiSelectFieldProps\n>(\n  (\n    {\n      __scopeInputMultiSelect,\n      onFocus,\n      onBlur,\n      ...props\n    }: InputMultiSelectScopedProps<InputMultiSelectFieldProps>,\n    ref\n  ) => {\n    const { disabled, readonly, size, isActive, setActive } =\n      useInputMultiSelectContext(\n        'InputMultiSelectField',\n        __scopeInputMultiSelect\n      )\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n      setActive(true)\n      onFocus?.(event)\n    }\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n      setActive(false)\n      onBlur?.(event)\n    }\n\n    return (\n      <input\n        {...props}\n        ref={ref}\n        disabled={disabled}\n        readOnly={readonly}\n        placeholder=\"Placeholder is hidden\"\n        className={InputMultiSelectFieldVariants({\n          disabled,\n          readOnly: readonly,\n          isActive,\n          size,\n        })}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      />\n    )\n  }\n)\n\nInputMultiSelectField.displayName = 'InputMultiSelectField'\n","import { tv } from '~/utils/tv'\n\nexport const InputMultiSelectFieldVariants = tv({\n  base: `\n    peer/field h-small flex w-[100%] bg-[transparent] !font-rdmodern font-regular text-text-neutral-alternative tracking-tiny leading-small\n    placeholder:opacity-transparent focus-visible:border-none focus-visible:outline-none\n  `,\n  variants: {\n    size: {\n      md: 'text-threepulse',\n      ml: 'text-threeandhalfpulse',\n      lg: 'text-threeandhalfpulse',\n      xl: 'text-threeandhalfpulse',\n    },\n    readOnly: {\n      true: 'text-text-neutral-readonly',\n    },\n    disabled: {\n      true: 'cursor-not-allowed text-text-neutral-disabled',\n      false: '',\n    },\n    isActive: {\n      true: 'text-text-neutral',\n    },\n  },\n  compoundVariants: [\n    {\n      readOnly: true,\n      disabled: false,\n      class: 'cursor-not-allowed text-text-neutral-readonly',\n    },\n  ],\n  defaultVariants: {\n    readOnly: false,\n    disabled: false,\n  },\n})\n","import { useMemo } from 'react'\nimport { Icon, type TIconProps } from '~/components/icon'\nimport { useInputMultiSelectContext } from '../../input-multi-select'\nimport type {\n  InputMultiSelectHelperTextProps,\n  InputMultiSelectScopedProps,\n} from '../../input-multi-select.types'\nimport { InputMultiSelectHelperTextVariants } from './index.styles'\n\nexport const InputMultiSelectHelperText = ({\n  withIcon,\n  iconName = 'rdicon-warning-circle',\n  children,\n  __scopeInputMultiSelect,\n  ...props\n}: InputMultiSelectScopedProps<InputMultiSelectHelperTextProps>) => {\n  const { disabled, hasError, readonly } = useInputMultiSelectContext(\n    'InputMultiSelectHelperText',\n    __scopeInputMultiSelect\n  )\n\n  const symbol = hasError ? 'rdicon-warning-circle' : iconName\n\n  const iconColor = useMemo((): TIconProps['color'] => {\n    if (readonly) return 'colorTextNeutralReadonly'\n    if (disabled) return 'colorTextNeutralDisabled'\n    if (hasError) return 'colorTextDangerAlternative'\n    return 'colorTextNeutralAlternative'\n  }, [disabled, hasError, readonly])\n\n  if (!children) return null\n\n  return (\n    <div\n      {...props}\n      aria-disabled={disabled}\n      className={InputMultiSelectHelperTextVariants({\n        hasError,\n        disabled,\n        readOnly: readonly,\n      })}\n    >\n      {withIcon && (\n        <div className=\"flex items-center\">\n          <Icon symbol={symbol} color={iconColor} size=\"tiny\" />\n        </div>\n      )}\n      <span className=\"line-clamp-2 flex-1\">{children}</span>\n    </div>\n  )\n}\n","import { tv } from '~/utils/tv'\n\nexport const InputMultiSelectHelperTextVariants = tv({\n  base: 'flex w-full flex-wrap items-center justify-start gap-onepulse px-onepulse text-left font-rdmodern font-semibold text-text-neutral-alternative text-threepulse',\n  variants: {\n    hasError: {\n      true: 'text-text-danger-alternative',\n      false: '',\n    },\n    readOnly: {\n      true: 'cursor-not-allowed text-text-neutral-readonly',\n    },\n    disabled: {\n      true: 'cursor-not-allowed text-text-neutral-disabled',\n      false: '',\n    },\n  },\n  compoundVariants: [\n    {\n      readOnly: true,\n      disabled: false,\n      class: 'text-text-neutral-readonly',\n    },\n  ],\n  defaultVariants: {\n    error: false,\n    disabled: false,\n    readOnly: false,\n  },\n})\n","import { useMemo } from 'react'\nimport { Icon, type TIconProps } from '~/components/icon'\nimport { useInputMultiSelectContext } from '../../input-multi-select'\nimport type {\n  InputMultiSelectIconProps,\n  InputMultiSelectScopedProps,\n} from '../../input-multi-select.types'\n\nexport function InputMultiSelectIcon({\n  __scopeInputMultiSelect,\n  color = 'colorTextNeutralDefault',\n  ...props\n}: InputMultiSelectScopedProps<InputMultiSelectIconProps>) {\n  const { size, disabled, readonly } = useInputMultiSelectContext(\n    'InputMultiSelectField',\n    __scopeInputMultiSelect\n  )\n\n  const iconSize = useMemo(() => {\n    const InputMultiSelectIconSizeMapper: Record<string, TIconProps['size']> = {\n      md: 'extra-small',\n      ml: 'small',\n      lg: 'small',\n      xl: 'small',\n    }\n    return InputMultiSelectIconSizeMapper?.[size!]\n  }, [size])\n\n  const iconColorMapping = (): TIconProps['color'] => {\n    if (readonly) return 'colorTextNeutralReadonly'\n    return disabled ? 'colorTextNeutralDisabled' : 'colorTextNeutralDefault'\n  }\n\n  return (\n    <div className=\"flex items-center\">\n      <Icon {...props} color={iconColorMapping()} size={iconSize} />\n    </div>\n  )\n}\n","import { tv } from '~/utils/tv'\n\nexport const InputMultiSelectLabelVariants = tv({\n  base: `\n      w-full align-middle m-none p-none\n      text-left font-rdmodern font-regular tracking-tiny text-text-neutral text-nowrap truncate leading\n      `,\n  variants: {\n    size: {\n      md: 'text-threepulse leading-[150%]',\n      ml: 'text-threeandhalfpulse leading-[140%]',\n      lg: 'text-threeandhalfpulse leading-[140%]',\n      xl: 'text-threeandhalfpulse leading-[140%]',\n    },\n\n    readOnly: {\n      true: '',\n      false: '',\n    },\n    disabled: {\n      true: 'cursor-not-allowed text-text-neutral-disabled',\n      false: '',\n    },\n  },\n  compoundVariants: [\n    {\n      readOnly: true,\n      disabled: false,\n      class: 'cursor-not-allowed text-text-neutral-readonly',\n    },\n  ],\n  defaultVariants: {\n    disabled: false,\n    readOnly: false,\n  },\n})\n","import { useInputMultiSelectContext } from '../../input-multi-select'\nimport type {\n  InputMultiSelectLabelProps,\n  InputMultiSelectScopedProps,\n} from '../../input-multi-select.types'\nimport { InputMultiSelectLabelVariants } from './index.styles'\n\nexport const InputMultiSelectLabel = (\n  props: InputMultiSelectScopedProps<InputMultiSelectLabelProps>\n) => {\n  const { __scopeInputMultiSelect, children, ...rest } = props\n\n  const { disabled, size } = useInputMultiSelectContext(\n    'InputMultiSelectLabel',\n    __scopeInputMultiSelect\n  )\n\n  if (!children) return null\n\n  return (\n    <div className=\"flex h-extrasmall w-full items-center rounded-none border-none px-onepulse text-left\">\n      <label\n        {...rest}\n        className={InputMultiSelectLabelVariants({ disabled, size })}\n        aria-disabled={disabled}\n      >\n        {children}\n      </label>\n    </div>\n  )\n}\n","import { useCallback, useMemo } from 'react'\nimport { Chips } from '~/components/chips'\nimport { useInputMultiSelectContext } from '../../input-multi-select'\nimport type {\n  InputMultiSelectQuantityProps,\n  InputMultiSelectScopedProps,\n} from '../../input-multi-select.types'\nimport { InputMultiSelectQuantityContainerVariants } from './index.styles'\n\nexport function InputMultiSelectQuantity({\n  labels,\n  removeItem,\n  __scopeInputMultiSelect,\n}: InputMultiSelectScopedProps<InputMultiSelectQuantityProps>) {\n  const { disabled, readonly, size } = useInputMultiSelectContext(\n    'InputMultiSelectLabel',\n    __scopeInputMultiSelect\n  )\n\n  const upperFirstLetter = useCallback((label: string, oversized?: boolean) => {\n    if (oversized) return `+${label}`\n\n    return label.slice(0, 1).toUpperCase() + label.slice(1)\n  }, [])\n\n  const customSize = useMemo(\n    () => (size === 'lg' || size === 'xl' ? 'ml' : 'sm'),\n    [size]\n  )\n\n  return (\n    <div className={InputMultiSelectQuantityContainerVariants()}>\n      {labels.map(({ id, label, oversized }) => {\n        const formattedLabel = upperFirstLetter(label, oversized)\n\n        return (\n          <Chips.Root\n            key={id}\n            id={id}\n            name={formattedLabel}\n            disabled={disabled}\n            readOnly={readonly}\n            value=\"\"\n            size={customSize}\n            checked={!oversized}\n          >\n            <Chips.Input\n              id={id}\n              name={formattedLabel}\n              value=\"\"\n              onChange={() => removeItem(id)}\n            >\n              <Chips.Label>{formattedLabel}</Chips.Label>\n            </Chips.Input>\n          </Chips.Root>\n        )\n      })}\n    </div>\n  )\n}\n","import { type Scope, createContextScope } from '@radix-ui/react-context'\nimport type { ChipsContext, ChipsProps, ChipsScopedProps } from './chips.types'\n\nimport { ChipsInput } from './components/chipsInput'\nimport { ChipsLabel } from './components/chipsLabel'\nimport { ChipsMultiple } from './components/chipsMultiple'\nimport { ChipsSingle } from './components/chipsSingle'\n\nconst DISPLAY_NAME = 'Chips'\n\nconst ChipsRoot = (props: ChipsScopedProps<ChipsProps>) => {\n  const { size, children, disabled, __scopeChips, ...rest } = props\n\n  return (\n    <ChipsProvider\n      {...props}\n      size={size}\n      disabled={disabled}\n      scope={__scopeChips}\n    >\n      {children}\n    </ChipsProvider>\n  )\n}\n\nChipsRoot.displayName = DISPLAY_NAME\n\n/*\n----------------------------------------------------------------\nScope Definition\n----------------------------------------------------------------\n*/\n\nconst [createChipsContext] = createContextScope(DISPLAY_NAME)\n\nexport const [ChipsProvider, useChipsContext]: readonly [\n  ProviderType<ChipsContext>,\n  (consumerName: string, scope: Scope) => ChipsContext,\n] = createChipsContext<ChipsContext>(DISPLAY_NAME)\n\n/*\n----------------------------------------------------------------\nComposition Export\n----------------------------------------------------------------\n*/\n\nexport const Chips = {\n  Root: ChipsRoot,\n  Single: ChipsSingle,\n  Label: ChipsLabel,\n  Input: ChipsInput,\n  Multiple: ChipsMultiple,\n}\n","import { useRef } from 'react'\nimport { Icon } from '~/components/icon'\nimport { useChipsContext } from '../../chips'\nimport {\n  ChipsInputIcoChecked,\n  ChipsInputVariants,\n  RadioButtonVariants,\n} from '../../chips.styles'\nimport type { ChipsProps, ChipsScopedProps } from '../../chips.types'\n\nexport const ChipsInput = (props: ChipsScopedProps<ChipsProps>) => {\n  const { __scopeChips, id, name, value, children, onChange } = props\n  const {\n    size = 'sm',\n    disabled,\n    checked,\n    readOnly,\n  } = useChipsContext('Chips', __scopeChips)\n  const chipsRef = useRef<HTMLInputElement>(null)\n  const showIcon = disabled || readOnly\n\n  return (\n    <label\n      className={ChipsInputVariants({\n        checked,\n        disabled,\n        size,\n        readOnly,\n      })}\n      aria-disabled={disabled}\n      style={{ cursor: disabled || readOnly ? 'not-allowed' : 'pointer' }}\n    >\n      <input\n        ref={chipsRef}\n        type=\"checkbox\"\n        className={RadioButtonVariants()}\n        id={id}\n        disabled={disabled}\n        name={name}\n        value={value}\n        checked={checked}\n        onChange={onChange}\n        readOnly={readOnly}\n      />\n      {children}\n      {checked && (\n        <span className={ChipsInputIcoChecked({ size })}>\n          <Icon\n            size={'small'}\n            symbol={'rdicon-dismiss'}\n            color={\n              disabled\n                ? 'colorTextNeutralDisabled'\n                : 'colorTextDangerAlternative'\n            }\n          />\n        </span>\n      )}\n    </label>\n  )\n}\n","import { tv } from '~/utils/tv'\n\nexport const ChipsContainer = tv({\n  base: `\n    flex items-center justify-center rounded-pill min-width-size-huge p-px outline-none\n    active:border-focused focus:border-focused w-fit m-px border-halfpulse border-transparent\n    focus-visible:border-action-border-focused\n  `,\n  variants: {\n    disabled: {\n      true: 'cursor-not-allowed border-transparent',\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport const ChipsVariants = tv({\n  base: `\n    group flex items-center justify-center rounded-pill min-w-16 relative px-fourpulse gap-twopulse border-quarterpulse text-text-neutral-alternative\n    bg-action-fill-neutral-secondary-enabled border-action-border-neutral-secondary-enabled\n    hover:border-action-border-neutral-secondary-hovered hover:bg-action-fill-neutral-secondary-hovered\n    active:bg-action-fill-neutral-secondary-pressed active:border-action-border-neutral-secondary-pressed cursor:pointer\n  `,\n  variants: {\n    size: {\n      sm: '',\n      md: 'h-medium',\n      ml: 'h-mediumlarge',\n    },\n    readOnly: {\n      true: `\n          border-action-border-neutral-secondary-enabled border-quarterpulse bg-action-fill-neutral-secondary-enabled\n          hover:bg-action-fill-neutral-secondary-enabled hover:border-action-border-neutral-secondary-enabled\n          active:border-action-border-neutral-secondary-enabled active:bg-action-fill-neutral-secondary-enabled\n        `,\n    },\n    disabled: {\n      true: `\n          cursor-not-allowed border-action-border-neutral-secondary-disabled border-quarterpulse bg-action-fill-neutral-secondary-disabled\n          hover:bg-action-fill-neutral-secondary-disabled hover:border-action-border-neutral-secondary-disabled\n          a