@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/hooks/use-theme.ts","../../../src/components/theme-provider/theme-provider.tsx","../../../src/components/icon/utils/get-icon-color.ts","../../../src/components/icon/utils/get-icon-size.ts","../../../src/components/icon/icon.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-actions/index.tsx","../../../src/components/input-multi-select/components/input-multi-select-clear-button/index.tsx","../../../src/components/button/button.tsx","../../../src/components/button/button.styles.ts","../../../src/components/button/components/button-icon.tsx","../../../src/components/refresh/utils/get-refresh-color.ts","../../../src/components/refresh/refresh.tsx","../../../src/components/button/components/button-refresh.tsx","../../../src/components/button/utils/is-icon-only.ts","../../../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 {\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 { useContext } from 'react'\n\nimport { ThemeContext } from '~/components/theme-provider/theme-provider'\n\nexport function useTheme() {\n  const { currentTheme } = useContext(ThemeContext)\n\n  const themes = {\n    rdsaudesistemas: RDSAUDESISTEMAS_TOKENS,\n    drogasil: DROGASIL_TOKENS,\n    raia: RAIA_TOKENS,\n    subscription: SUBSCRIPTION_TOKENS,\n    prime: PRIME_TOKENS,\n  }\n\n  return {\n    ...themes[currentTheme],\n    ...GLOBALS_TOKENS,\n  }\n}\n","import { createContext, useEffect } from 'react'\n\nimport type { Themes } from '@raiadrogasil/pulso-design-tokens'\n\ntype TThemeContextData = {\n  currentTheme: Themes\n}\n\ninterface IThemeProviderProps {\n  children: React.ReactNode\n  theme: Themes\n}\n\nexport const ThemeContext = createContext({} as TThemeContextData)\n\nexport function ThemeProvider({ children, theme }: IThemeProviderProps) {\n  useEffect(() => {\n    if (theme && document) {\n      document?.documentElement?.classList?.add(theme)\n    }\n\n    return () => {\n      document?.documentElement?.classList?.remove(theme)\n    }\n  }, [theme])\n\n  return (\n    <ThemeContext.Provider\n      value={{\n        currentTheme: theme,\n      }}\n    >\n      {children}\n    </ThemeContext.Provider>\n  )\n}\n","import type { TIconColors } from '../icon.types'\n\nimport { useTheme } from '~/hooks/use-theme'\n\nexport function getColorIcon(color: keyof TIconColors) {\n  const theme = useTheme()\n  const allTokens = Object.keys(theme)\n\n  const colorTokens = allTokens.reduce((acc, tokenKey) => {\n    if (tokenKey.includes('color')) {\n      const colorToken = tokenKey as keyof TIconColors\n      acc[colorToken] = theme[colorToken]\n    }\n\n    return acc\n  }, {} as TIconColors)\n\n  return colorTokens[color]\n}\n","export const getIconSize = {\n  tiny: 'var(--sizing-tiny)',\n  'extra-small': 'var(--sizing-extrasmall)',\n  small: 'var(--sizing-small)',\n  medium: 'var(--sizing-medium)',\n}\n","import type { TIconProps } from './icon.types'\n\nimport { getColorIcon } from './utils/get-icon-color'\nimport { getIconSize } from './utils/get-icon-size'\n\nexport function Icon({\n  symbol = 'rdicon-default',\n  size = 'small',\n  color = 'colorActionFillBrandPrimaryEnabled',\n  ...props\n}: TIconProps) {\n  const symbolName = symbol.replace('rdicon', '').trim()\n\n  return (\n    <i\n      {...props}\n      title={symbolName}\n      className={symbol}\n      style={{\n        fontSize: getIconSize[size],\n        color: getColorIcon(color),\n      }}\n    />\n  )\n}\n\nexport type { TIconProps }\n","import { Children, isValidElement } from 'react'\n\n//biome-ignore lint/suspicious/noExplicitAny: <explanation>\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  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 duration-100 ease-in\n    bg-forms-fill-default 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      filled: true,\n      class: `\n          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      class: `\n          border-forms-border-error bg-forms-fill-default \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-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-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-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-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 bg-forms-fill-focused hover:border-forms-border-focused hover:border-halfpulse 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-forms-border-focused bg-forms-fill-focused hover:border-forms-border-focused hover:border-halfpulse active:border-forms-border-focused active:border-halfpulse',\n    },\n    {\n      active: false,\n      hasError: false,\n      disabled: false,\n      readonly: false,\n      filled: true,\n      class:\n        'border-forms-border-filled bg-forms-fill-filled hover:border-forms-border-filled hover:border-halfpulse focus:border-forms-border-focused 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-within:border-halfpulse focus-within:bg-forms-fill-focused 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          active:border-halfpulse active:border-forms-border-focused active:cursor-pointer active:bg-forms-fill-focused\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 { Icon } 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  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,\n        size,\n        disabled,\n        hasError,\n        readonly,\n        filled,\n        hasTwoItems,\n      })}\n      aria-disabled={disabled}\n    >\n      {renderCompositionChildren(children, [\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    </button>\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","import { forwardRef } from 'react'\n\nimport { type Scope, createContextScope } from '@radix-ui/react-context'\n\nimport type { ButtonProps } from './button.types'\n\nimport { buttonVariants } from './button.styles'\n\nimport { ButtonIcon } from './components/button-icon'\nimport { ButtonRefresh } from './components/button-refresh'\n\nimport { isIconOnly } from './utils/is-icon-only'\n\ntype ButtonContext = Pick<ButtonProps, 'variant' | 'size' | 'disabled'>\n\nconst DISPLAY_NAME = 'Button'\n\nconst ButtonRoot = forwardRef<HTMLButtonElement, ButtonProps>(\n  (props: ScopedProps<ButtonProps>, ref) => {\n    const {\n      children,\n      variant = 'brand-primary',\n      size = 'ml',\n      loading = false,\n      disabled = false,\n      full,\n      className,\n      __scopeButton,\n    } = props\n\n    const isDisabled = loading || disabled\n\n    return (\n      <ButtonProvider\n        scope={__scopeButton}\n        variant={variant}\n        size={size}\n        disabled={disabled}\n      >\n        <button\n          {...props}\n          ref={ref}\n          className={buttonVariants({\n            variant,\n            size,\n            disabled,\n            full,\n            className,\n            asIconOnly: isIconOnly(children),\n          })}\n          disabled={isDisabled}\n          aria-disabled={disabled}\n        >\n          {loading ? <ButtonRefresh /> : children}\n        </button>\n      </ButtonProvider>\n    )\n  }\n)\n\nButtonRoot.displayName = DISPLAY_NAME\n\n/*\n----------------------------------------------------------------\nScope Definition\n----------------------------------------------------------------\n*/\n\nexport type ScopedProps<P> = P & {\n  __scopeButton?: Scope\n}\n\nconst [createButtonContext] = createContextScope(DISPLAY_NAME)\n\nexport const [ButtonProvider, useButtonContext]: readonly [\n  ProviderType<ButtonContext>,\n  (consumerName: string, scope: Scope) => ButtonContext,\n] = createButtonContext<ButtonContext>(DISPLAY_NAME)\n\n/*\n----------------------------------------------------------------\nComposition Export\n----------------------------------------------------------------\n*/\n\nexport const Button = {\n  Root: ButtonRoot,\n  Icon: ButtonIcon,\n}\n","import { tv } from '~/utils/tv'\n\nexport const buttonVariants = tv({\n  base: `\n    tracking inline-flex items-center justify-center gap-twopulse rounded-pill\n    border-quarterpulse border-[transparent] font-bold font-rdmodern text-threeandhalfpulse truncate`,\n  variants: {\n    variant: {\n      'brand-primary': `bg-action-fill-brand-primary-enabled text-text-neutral-inverse\n        enabled:active:bg-action-fill-brand-primary-pressed enabled:hover:bg-action-fill-brand-primary-hovered`,\n      'neutral-secondary': `border-action-border-neutral-secondary-enabled bg-action-fill-neutral-secondary-enabled text-text-neutral\n        enabled:active:border-action-border-neutral-secondary-pressed enabled:active:bg-action-fill-neutral-secondary-pressed enabled:hover:bg-action-fill-neutral-secondary-hovered`,\n      'neutral-tertiary': `border-action-border-neutral-tertiary-enabled bg-action-fill-neutral-tertiary-enabled text-text-neutral\n        enabled:active:bg-action-fill-neutral-tertiary-pressed enabled:hover:bg-action-fill-neutral-tertiary-hovered`,\n    },\n    size: {\n      md: 'h-medium min-w-medium px-fourpulse text-threepulse leading-medium',\n      ml: 'h-mediumlarge min-w-mediumlarge px-fourpulse leading-small',\n      lg: 'h-large min-w-large px-fivepulse leading-small',\n      xl: 'h-extralarge min-w-extralarge px-sixpulse leading-small',\n    },\n    disabled: {\n      true: 'cursor-not-allowed text-text-neutral-disabled outline-none',\n      false:\n        'outline-action-border-focused outline-offset-4 focus-visible:outline-1',\n    },\n    full: {\n      true: 'w-full',\n    },\n    asIconOnly: {\n      true: 'aspect-square px-none',\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'brand-primary',\n      disabled: true,\n      class:\n        'border-action-border-brand-primary-disabled bg-action-fill-brand-primary-disabled',\n    },\n    {\n      variant: 'neutral-secondary',\n      disabled: true,\n      class:\n        'border-action-border-neutral-secondary-disabled bg-action-fill-neutral-secondary-disabled',\n    },\n    {\n      variant: 'neutral-tertiary',\n      disabled: true,\n      class:\n        'border-action-fill-neutral-tertiary-disabled bg-action-fill-neutral-tertiary-enabled',\n    },\n  ],\n\n  defaultVariants: {\n    variant: 'brand-primary',\n    size: 'ml',\n  },\n})\n","import { type ScopedProps, useButtonContext } from '../button'\nimport type { ButtonSizes, ButtonVariants } from '../button.types'\n\nimport { Icon, type TIconProps } from '~/components/icon'\n\ntype ButtonIconProps = Pick<TIconProps, 'symbol'>\n\nexport function ButtonIcon(props: ButtonIconProps) {\n  const { __scopeButton, ...rest } = props as ScopedProps<ButtonIconProps>\n\n  const { variant, size, disabled } = useButtonContext(\n    'ButtonIcon',\n    __scopeButton\n  )\n\n  const iconColorMapper: Record<ButtonVariants, TIconProps['color']> = {\n    'brand-primary': 'colorTextNeutralInverse',\n    'neutral-secondary': 'colorTextNeutralDefault',\n    'neutral-tertiary': 'colorTextNeutralDefault',\n  } as const\n\n  const iconSizeMapper: Record<ButtonSizes, TIconProps['size']> = {\n    md: 'extra-small',\n    ml: 'small',\n    lg: 'small',\n    xl: 'small',\n  } as const\n\n  return (\n    <Icon\n      {...rest}\n      color={disabled ? 'colorTextNeutralDisabled' : iconColorMapper[variant!]}\n      size={iconSizeMapper[size!]}\n    />\n  )\n}\n","import { useTheme } from '~/hooks/use-theme'\n\nimport type { TRefreshColor } from '../refresh.types'\n\nexport function getRefreshColor(color: TRefreshColor) {\n  const theme = useTheme()\n\n  const colors = {\n    brand: theme.colorActionFillBrandPrimaryEnabled,\n    neutral: theme.colorTextNeutralReadonly,\n    black: theme.colorTextNeutralDefault,\n    white: theme.colorTextNeutralInverse,\n  } as Record<TRefreshColor, string>\n\n  return colors[color]\n}\n","import type { TRefreshProps } from './refresh.types'\n\nimport { getRefreshColor } from './utils/get-refresh-color'\n\nexport function Refresh({ color = 'brand', srText }: TRefreshProps) {\n  return (\n    <div\n      role=\"status\"\n      className=\"grid size-eightpulse place-items-center\"\n      aria-label={srText}\n    >\n      <svg className=\"size-sixpulse animate-spin fill-none\" viewBox=\"0 0 24 24\">\n        <path\n          fillRule=\"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          clipRule=\"evenodd\"\n          fill={getRefreshColor(color)}\n        />\n\n        <title>{srText}</title>\n      </svg>\n    </div>\n  )\n}\n\nexport type { TRefreshProps }\n","import { type ScopedProps, useButtonContext } from '../button'\n\nimport { Refresh, type TRefreshProps } from '~/components/refresh'\nimport type { ButtonVariants } from '../button.types'\n\ntype ButtonRefreshProps = Pick<TRefreshProps, 'srText'>\n\nexport function ButtonRefresh(props: ButtonRefreshProps) {\n  const { __scopeButton, ...rest } = props as ScopedProps<ButtonRefreshProps>\n\n  const { variant } = useButtonContext('ButtonRefresh', __scopeButton)\n\n  const refreshColorMapper = {\n    'brand-primary': 'white',\n    'neutral-secondary': 'neutral',\n    'neutral-tertiary': 'black',\n  } as Record<ButtonVariants, TRefreshProps['color']>\n\n  return <Refresh {...rest} color={refreshColorMapper[variant!]} />\n}\n","import React from 'react'\n\nimport { ButtonIcon } from '../components/button-icon'\n\nexport function isIconOnly(children: React.ReactNode) {\n  if (React.Children.count(children) === 1 && React.isValidElement(children)) {\n    return children.type === ButtonIcon\n  }\n\n  return false\n}\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, useEffect } 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  ChipsContainer,\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    <div className={ChipsContainer()}>\n      <label\n        className={ChipsInputVariants({\n          checked,\n          disabled,\n          size,\n          readOnly,\n        })}\n        aria-disabled={disabled}\n      >\n        <input\n          ref={chipsRef}\n          type=\"radio\"\n          className={RadioButtonVariants()}\n          id={id}\n          disabled={disabled}\n          name={name}\n          value={value}\n          checked={checked}\n          onChange={onChange}\n          onClick={() => {\n            if (!disabled && !readOnly && onChange) onChange()\n          }}\n          readOnly={readOnly}\n        />\n        {children}\n        {!showIcon && 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    </div>\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\n    active:border-focused focus:border-focused w-fit m-px border-halfpulse border-transparent\n    has-[:focus]:border-action-border-focused focus:border-action-border-focused 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          active:border-action-border-neutral-secondary-disabled active:bg-action-fill-neutral-secondary-disabled\n        `,\n    },\n    checked: {\n      true: `\n          border-action-border-neutral-secondary-enabled border-halfpulse bg-action-fill-neutral-secondary-activated pl-twopulse text-text-neutral\n          hover:text-text-neutral\n        `,\n    },\n  },\n  compoundVariants: [\n    {\n      disabled: true,\n      checked: true,\n      class: `\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        active:border-action-border-neutral-secondary-disabled active:bg-action-fill-neutral-secondary-disabled\n      `,\n    },\n  ],\n  defaultVariants: {\n    size: 'md',\n    disabled: false,\n    checked: false,\n  },\n})\n\nexport const ChipsInputVariants = tv({\n  base: `\n    group flex items-center justify-center rounded-pill min-w-10 relative px-twopulse py-onepulse gap-onepulse border-quarterpulse text-text-neutral-alternative\n    bg-action-fill-neutral-secondary-enabled border-action-border-neutral-secondary-enabled\n    active:bg-action-fill-neutral-secondary-pressed active:border-action-border-neutral-secondary-pressed cursor:pointer\n    hover:border-action-border-neutral-secondary-hovered hover:bg-action-fill-neutral-secondary-hovered\n  `,\n  variants: {\n    size: {\n      sm: 'h-small',\n      md: 'h-medium',\n      ml: 'h-medium',\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          active:border-action-border-neutral-secondary-disabled active:bg-action-fill-neutral-secondary-disabled\n        `,\n    },\n    readOnly: {\n      true: `\n          cursor-not-allowed text-text-neutral-readonly 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          active:border-action-border-neutral-secondary-disabled active:bg-action-fill-neutral-secondary-disabled\n        `,\n    },\n    checked: {\n      true: 'border-action-border-neutral-secondary-enabled border-quarterpulse',\n    },\n  },\n  compoundVariants: [\n    {\n      disabled: true,\n      checked: true,\n      class: ` \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        active:border-action-border-neutral-secondary-disabled active:bg-action-fill-neutral-secondary-disabled\n      `,\n    },\n    {\n      checked: true,\n      readOnly: true,\n      class: `\n        cursor-not-allowed text-text-neutral-readonly 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        active:border-action-border-neutral-secondary-disabled active:bg-action-fill-neutral-secondary-disabled\n      `,\n    },\n  ],\n  defaultVariants: {\n    size: 'md',\n    disabled: false,\n    checked: false,\n  },\n})\n\nexport const ChipsButtonVariants = tv({\n  base: `\n    group flex items-center justify-center rounded-pill min-w-[64px] relative px-twopulse gap-twopulse border-quarterpulse text-text-neutral-alternative\n    bg-action-fill-neutral-secondary-enabled border-action-border-neutral-secondary-enabled\n    hover:bg-action-fill-neutral-secondary-hovered hover:border-action-border-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: 'h-small',\n      md: 'h-medium',\n      ml: 'h-mediumlarge',\n    },\n    readOnly: {\n      true: `\n        cursor-not-allowed border-action-borderenatral-secondary-disabled border-quarterpulse bg-actenafill-neutral-secondary-disabled\n        hover:bg-action-fill-neutral-secondary-disableenaver:border-action-border-neutral-secondary-dienaed\n        \n    active:border-action-border-neutral-secondary-disabled active:bg-action-fill-neutral-secondary-disabled\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          active:border-action-border-neutral-secondary-disabled active:bg-action-fill-neutral-secondary-disabled\n        `,\n    },\n    count: {\n      false: '',\n      true: '',\n    },\n    hasChecked: {\n      true: `\n          border-action-border-neutral-secondary-enabled border-quarterpulse bg-action-fill-neutral-secondary-activated\n          hover:bg-action-fill-neutral-secondary-hovered hover:border-action-border-neutral-secondary-hovered\n          active:bg-action-fill-neutral-secondary-hovered active:border-action-border-neutral-secondary-activated\n      `,\n    },\n  },\n  compoundVariants: [\n    {\n      disabled: true,\n      hasChecked: true,\n      class: `\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        active:border-action-border-neutral-secondary-disabled active:bg-action-fill-neutral-secondary-disabled\n      `,\n    },\n  ],\n  defaultVariants: {\n    size: 'md',\n    disabled: false,\n    checked: false,\n  },\n})\n\nexport const ChipsLabelVariants = tv({\n  base: 'flex h-extrasmall items-center justify-center font-bold text-text-neutral-alternative leading-small',\n  variants: {\n    size: {\n      sm: 'text-threeandhalfpulse',\n      md: 'h-medium min-w-medium text-threeandhalfpulse',\n      ml: 'h-mediumlarge min-w-mediumlarge text-threeandhalfpulse',\n    },\n    disabled: {\n      true: 'cursor-not-allowed text-text-neutral-disabled',\n    },\n    readonly: {\n      true: 'cursor-not-allowed text-text-neutral-readonly',\n    },\n    checked: {\n      true: 'text-action-text-neutral',\n    },\n  },\n  compoundVariants: [\n    {\n      checked: true,\n      disabled: true,\n      class: 'cursor-not-allowed text-text-neutral-disabled',\n    },\n  ],\n  defaultVariants: {\n    disabled: false,\n    checked: false,\n  },\n})\n\nexport const RadioButtonVariants = tv({\n  base: `\n        hidden \n      `,\n})\n\nexport const ChipsIcoChecked = tv({\n  base: `\n       hidden group-has-[:checked]:block\n      `,\n  variants: {\n    size: {\n      sm: 'h-small',\n      md: 'h-tiny',\n      ml: 'h-small',\n    },\n    disabled: {\n      true: 'cursor-not-allowed',\n    },\n  },\n})\n\nexport const ChipsInputIcoChecked = tv({\n  base: '',\n  variants: {\n    size: {\n      sm: 'h-small',\n      md: 'h-small',\n      ml: 'h-small',\n    },\n    disabled: {\n      true: 'cursor-not-allowed',\n    },\n  },\n})\n\nexport const ChipsIcoMultiple = tv({\n  variants: {\n    size: {\n      sm: 'h-small',\n      md: 'h-extrasmall',\n      ml: 'h-small',\n    },\n    disabled: {\n      true: 'cursor-not-allowed',\n    },\n  },\n})\n\nexport const ChipsBadage = tv({\n  base: ` flex justify-center items-center rounded-pill border-none bg-text-neutral text-threepulse text-text-neutral-inverse\n  `,\n  variants: {\n    size: {\n      sm: 'h-extrasmall w-extrasmall',\n      md: 'h-extrasmall w-extrasmall',\n      ml: 'h-small w-small',\n    },\n    disabled: {\n      true: 'cursor-not-allowed bg-text-neutral-disabled',\n    },\n  },\n})\n","import { useChipsContext } from '../../chips'\nimport { ChipsLabelVariants } from '../../chips.styles'\nimport type { ChipsLabelProps, ChipsScopedProps } from '../../chips.types'\n\nexport const ChipsLabel = (props: ChipsScopedProps<ChipsLabelProps>) => {\n  const { __scopeChips, children } = props\n  const { size, disabled, checked } = useChipsContext('Label', __scopeChips)\n\n  return (\n    <span className={ChipsLabelVariants({ disabled, size, checked })}>\n      {children}\n    </span>\n  )\n}\n","import { useRef } from 'react'\nimport { Icon, type TIconProps } from '~/components/icon'\nimport { useChipsContext } from '../../chips'\nimport {\n  ChipsBadage,\n  ChipsButtonVariants,\n  ChipsContainer,\n  ChipsIcoMultiple,\n} from '../../chips.styles'\nimport type { ChipsMultipleProps, ChipsScopedProps } from '../../chips.types'\nimport { UseChips } from '../../hooks/use-chips'\n\nexport const ChipsMultiple = (props: ChipsScopedProps<ChipsMultipleProps>) => {\n  const { __scopeChips, children, icon, onChange = () => {}, count = 0 } = props\n  const {\n    size = 'md',\n    disabled,\n    checked,\n    readOnly,\n  } = useChipsContext('Chips', __scopeChips)\n  const { iconSizeMapping } = UseChips()\n  const chipsRef = useRef<HTMLButtonElement>(null)\n  const hasChecked = checked || count > 0\n  const iconSymbol = icon ? icon : 'rdicon-options-filter'\n\n  return (\n    <div className={ChipsContainer()}>\n      <b