@rdsaude/pulso-react-components/dist/components/product-card/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/product-card/index.ts","../../../src/components/product-card/product-card.tsx","../../../src/components/product-card/components/action/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/hooks/use-theme.ts","../../../src/components/theme-provider/index.tsx","../../../src/utils/tv.ts","../../../src/components/button/button.styles.ts","../../../src/components/button/button-icon.tsx","../../../src/components/icon/index.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-counter/input-counter.tsx","../../../src/components/input-counter/components/input-counter-button/index.tsx","../../../src/components/input-counter/components/input-counter-control/input-counter-control.styles.ts","../../../src/components/input-counter/components/input-counter-control/index.tsx","../../../src/components/input-counter/components/input-counter-helpertext/index.tsx","../../../src/components/input-counter/components/input-counter-helpertext/input-counter-helpertext.styles.ts","../../../src/components/input-counter/components/input-counter-input/index.tsx","../../../src/components/input-counter/components/input-counter-input/input-counter-input.styles.ts","../../../src/components/input-counter/components/input-counter-label/input-counter-label.styles.ts","../../../src/components/input-counter/components/input-counter-label/index.tsx","../../../src/components/input-counter/input-counter.styles.ts","../../../src/components/input-text/utils/render-composition-children.tsx","../../../src/components/input-text/components/input-text-actions/index.styles.ts","../../../src/components/input-text/components/input-text-actions/index.tsx","../../../src/components/input-text/components/input-text-clear-button/index.styles.ts","../../../src/components/input-text/components/input-text-clear-button/index.tsx","../../../src/components/input-text/components/input-text-field/index.tsx","../../../src/components/input-text/components/input-text-field/index.styles.ts","../../../src/components/input-text/components/input-text-helpertext/index.tsx","../../../src/components/input-text/components/input-text-helpertext/index.styles.ts","../../../src/components/input-text/components/input-text-icon/index.tsx","../../../src/components/input-text/components/input-text-label/index.styles.ts","../../../src/components/input-text/components/input-text-label/index.tsx","../../../src/components/input-text/input-text.tsx","../../../src/components/product-card/components/card/index.tsx","../../../src/components/product-card/product-card.styles.ts","../../../src/components/product-card/components/tag-desconto/index.tsx","../../../src/components/tag/tag.tsx","../../../src/components/tag/components/tag-icon/index.tsx","../../../src/components/tag/components/tag-label/tag-label.styles.ts","../../../src/components/tag/components/tag-label/index.tsx","../../../src/components/tag/tag.styles.ts","../../../src/components/product-card/components/container/index.tsx","../../../src/components/rating/index.tsx","../../../src/components/rating/index.styles.ts","../../../src/components/product-card/components/fare/index.tsx","../../../src/components/product-card/components/image/index.tsx","../../../src/components/product-card/components/tag-patrocinado/index.tsx","../../../src/components/product-card/components/info/index.tsx","../../../src/components/product-card/components/tag-mkt/index.tsx","../../../src/components/product-card/components/tag-pim/index.tsx","../../../src/components/product-card/components/price/index.tsx","../../../src/components/product-card/components/trade/index.tsx","../../../src/components/product-card/components/validate/index.tsx"],"sourcesContent":["export * from './product-card'\nexport type { ProductCardProps } from './product-card.types'\n","import { type Scope, createContextScope } from '@radix-ui/react-context'\nimport { Action } from './components/action'\nimport { Card } from './components/card'\nimport { Container } from './components/container'\nimport { Fare } from './components/fare'\nimport { Image } from './components/image'\nimport { ProductInfo } from './components/info'\nimport { ProductPrice } from './components/price'\nimport { Trade } from './components/trade'\nimport { Validate } from './components/validate'\nimport type {\n  ActionProps,\n  ProductCardContext,\n  ProductCardProps,\n  ProductCardScopedProps,\n} from './product-card.types'\n\nexport const DISPLAY_NAME = 'ProductCard'\n\nconst ProductCardRoot = (props: ProductCardScopedProps<ProductCardProps>) => {\n  const {\n    variantCard,\n    id,\n    sponsored,\n    onSale,\n    subscriptionText,\n    handleClick,\n    children,\n    slotTrade,\n    __scopeProductCard,\n    testId,\n    ...rest\n  } = props\n\n  return (\n    <ProductCardProvider\n      scope={__scopeProductCard}\n      onSale={onSale}\n      sponsored={sponsored}\n      slotTrade={slotTrade}\n      variantCard={variantCard}\n      subscriptionText={subscriptionText}\n      {...rest}\n    >\n      <Card\n        id={id}\n        variantCard={variantCard}\n        sponsored={sponsored}\n        onSale={onSale}\n        handleClick={handleClick}\n        testId={testId}\n        {...rest}\n      >\n        {children}\n      </Card>\n    </ProductCardProvider>\n  )\n}\n\nProductCardRoot.displayName = DISPLAY_NAME\n\n/*\nScope Definition\n*/\n\nconst [createProductCardContext] = createContextScope(DISPLAY_NAME)\n\nexport const [ProductCardProvider, useProductCardContext]: readonly [\n  ProviderType<ProductCardContext>,\n  (consumerName: string, scope: Scope) => ProductCardContext,\n] = createProductCardContext<ProductCardContext>(DISPLAY_NAME)\n\nexport const ProductCard = {\n  Root: ProductCardRoot,\n  Action: Action,\n  Rating: Container,\n  Trade: Trade,\n  Shipping: Fare,\n  Image: Image,\n  Info: ProductInfo,\n  Price: ProductPrice,\n  Validate: Validate,\n}\nexport type { ActionProps }\n","import { forwardRef } from 'react'\nimport { Button } from '~/components/button'\nimport { InputCounter } from '~/components/input-counter'\nimport { InputText } from '~/components/input-text'\nimport { Refresh } from '~/components/refresh'\nimport type { ActionProps } from '../../product-card.types'\n\nexport const Action = forwardRef<HTMLDivElement, ActionProps>(\n  (\n    {\n      variantAction,\n      actionType = 'button',\n      inputCounterProps,\n      inputTextProps,\n      buttonProps,\n      ...rest\n    },\n    ref\n  ) => {\n    const getButtonLabel = () => {\n      switch (variantAction) {\n        case 'nostock':\n          return 'Avise-me'\n        case 'availability':\n          return 'Consultar'\n        case 'ofex':\n          return 'Ativar oferta'\n        default:\n          return 'Comprar'\n      }\n    }\n\n    if (actionType === 'button') {\n      return (\n        <div ref={ref} {...rest}>\n          <Button.Root\n            variant={\n              variantAction === 'ofex' ? 'neutral-secondary' : 'brand-primary'\n            }\n            size=\"lg\"\n            full\n            {...buttonProps}\n          >\n            {getButtonLabel()}\n          </Button.Root>\n        </div>\n      )\n    }\n\n    if (actionType === 'loading') {\n      return (\n        <div ref={ref} {...rest} className=\"mr-auto ml-auto\">\n          <Refresh color=\"black\" />\n        </div>\n      )\n    }\n\n    if (actionType === 'input-text') {\n      return (\n        <div ref={ref} {...rest}>\n          <InputText.Root size=\"lg\" {...inputTextProps?.root}>\n            <InputText.Actions>\n              <InputText.Field {...inputTextProps?.field} />\n              <InputText.ClearButton {...inputTextProps?.clearButton} />\n            </InputText.Actions>\n            <InputText.HelperText withIcon iconName=\"rdicon-location\">\n              Insira seu CEP\n            </InputText.HelperText>\n          </InputText.Root>\n        </div>\n      )\n    }\n\n    if (\n      actionType === 'input-counter' &&\n      typeof inputCounterProps?.value === 'number'\n    ) {\n      return (\n        <div ref={ref} {...rest}>\n          <InputCounter.Root size=\"lg\" {...inputCounterProps}>\n            <InputCounter.Control>\n              <InputCounter.Decrement />\n              <InputCounter.Input />\n              <InputCounter.Increment />\n            </InputCounter.Control>\n          </InputCounter.Root>\n        </div>\n      )\n    }\n\n    return null\n  }\n)\nexport type { ActionProps }\n\nAction.displayName = 'Action'\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 * 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 { 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\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","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","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 { useState } from 'react'\n\nimport { type Scope, createContextScope } from '@radix-ui/react-context'\nimport {\n  InputCounterDecrement,\n  InputCounterIncrement,\n} from './components/input-counter-button'\nimport { InputCounterControl } from './components/input-counter-control'\nimport { InputCounterHelperText } from './components/input-counter-helpertext'\nimport { InputCounterInput } from './components/input-counter-input'\nimport { InputCounterLabel } from './components/input-counter-label'\nimport { InputCounterRootVariants } from './input-counter.styles'\nimport type {\n  InputCounterContext,\n  InputCounterScopedProps,\n  TInputCounterProps,\n} from './input-counter.types'\n\nconst DISPLAY_NAME = 'InputCounterRoot'\n\nconst InputCounterRoot = (\n  props: InputCounterScopedProps<TInputCounterProps>\n) => {\n  const {\n    size = 'ml',\n    children,\n    value,\n    onValueChange,\n    disabled,\n    hasError,\n    readOnly,\n    __scopeInputCounter,\n  } = props\n  const [currentValue, setCurrentValue] = useState(value ?? 0)\n\n  const componentsProps = {\n    size: size,\n    scope: __scopeInputCounter,\n    setCurrentValue,\n    currentValue,\n    value,\n    onValueChange,\n    disabled,\n    readOnly,\n    hasError,\n  }\n\n  return (\n    <InputCounterProvider {...componentsProps}>\n      <div className={InputCounterRootVariants({})}>{children}</div>\n    </InputCounterProvider>\n  )\n}\n\nInputCounterRoot.displayName = DISPLAY_NAME\n\n/*\n----------------------------------------------------------------\nScope Definition\n----------------------------------------------------------------\n*/\n\nconst [createInputCounterContext] = createContextScope(DISPLAY_NAME)\n\nexport const [InputCounterProvider, useInputCounterContext]: readonly [\n  ProviderType<InputCounterContext>,\n  (consumerName: string, scope: Scope) => InputCounterContext,\n] = createInputCounterContext<InputCounterContext>(DISPLAY_NAME)\n\n/*\n----------------------------------------------------------------\nComposition Export\n----------------------------------------------------------------\n*/\n\nexport const InputCounter = {\n  Root: InputCounterRoot,\n  Decrement: InputCounterDecrement,\n  Increment: InputCounterIncrement,\n  Control: InputCounterControl,\n  Input: InputCounterInput,\n  Label: InputCounterLabel,\n  HelperText: InputCounterHelperText,\n}\n","import type { IconName } from '@raiadrogasil/pulso-icons'\nimport { Button, type ButtonProps } from '~/components/button'\nimport { useInputCounterContext } from '../../input-counter'\nimport type {\n  InputCounterScopedProps,\n  TInputCounterProps,\n} from '../../input-counter.types'\n\ntype InputCounterButtonProps = Omit<\n  ButtonProps,\n  'variant' | 'size' | 'children'\n> & {\n  symbol?: IconName\n}\nconst InputCounterButton = (props: InputCounterButtonProps) => {\n  const { symbol, __scopeInputCounter } =\n    props as InputCounterScopedProps<InputCounterButtonProps>\n\n  const { size } = useInputCounterContext(\n    'InputCounterButton',\n    __scopeInputCounter\n  )\n\n  const mapSizeToButtonSize = (size: TInputCounterProps['size']) => {\n    const sizeMap: Record<\n      NonNullable<ButtonProps['size']>,\n      'md' | 'ml' | 'lg' | 'xl'\n    > = {\n      md: 'md',\n      ml: 'md',\n      lg: 'ml',\n      xl: 'ml',\n    }\n\n    return sizeMap[size]\n  }\n\n  return (\n    <Button.Root\n      {...props}\n      variant=\"neutral-tertiary\"\n      size={mapSizeToButtonSize(size || 'md')}\n    >\n      <Button.Icon symbol={symbol} />\n    </Button.Root>\n  )\n}\n\nexport const InputCounterDecrement = (props: InputCounterButtonProps) => {\n  const { __scopeInputCounter, onClick } =\n    props as InputCounterScopedProps<InputCounterButtonProps>\n\n  const { setCurrentValue, currentValue, disabled, readOnly } =\n    useInputCounterContext('InputCounterButton', __scopeInputCounter)\n\n  return (\n    <InputCounterButton\n      {...props}\n      symbol={currentValue === 1 ? 'rdicon-delete' : 'rdicon-minus'}\n      tabIndex={0}\n      onClick={event => {\n        if (currentValue > 0) {\n          setCurrentValue(currentValue - 1)\n        }\n        onClick?.(event)\n      }}\n      disabled={disabled || readOnly || currentValue === 0}\n    />\n  )\n}\nexport const InputCounterIncrement = (props: InputCounterButtonProps) => {\n  const { __scopeInputCounter, onClick } =\n    props as InputCounterScopedProps<InputCounterButtonProps>\n\n  const { setCurrentValue, currentValue, disabled, readOnly } =\n    useInputCounterContext('InputCounterButton', __scopeInputCounter)\n\n  return (\n    <InputCounterButton\n      {...props}\n      symbol={'rdicon-plus'}\n      tabIndex={0}\n      onClick={event => {\n        if (currentValue >= 0 && currentValue < 999) {\n          setCurrentValue(currentValue + 1)\n        }\n        onClick?.(event)\n      }}\n      disabled={disabled || readOnly || currentValue === 999}\n    />\n  )\n}\n","import { tv } from '~/utils/tv'\n\nexport const InputCounterControlVariants = tv({\n  base: [\n    `grid grid-cols-[auto_1fr_auto] place-content-center w-full gap-onepulse duration-100 ease-in overflow-hidden\n    bg-[var(--color-forms-fill-default)]\n    has-[:placeholder-shown]:bg-forms-fill\n    has-[:placeholder-shown]:border-transparent\n    has-[:placeholder-shown]:border-none\n    has-[:focus-within]:has-[:placeholder-shown]:bg-forms-fill-focused\n  `,\n  ],\n  variants: {\n    size: {\n      md: 'h-medium rounded-form px-threepulse',\n      ml: 'h-mediumlarge rounded-form px-threepulse',\n      lg: 'h-large rounded-form px-threepulse',\n      xl: 'h-extralarge rounded-largecontainer px-threepulse',\n    },\n    readOnly: {\n      true: `\n      cursor-not-allowed\n      has-[:placeholder-shown]:bg-forms-fill-readonly\n      has-[:placeholder-shown]:ring-forms-border-readonly\n      has-[:placeholder-shown]:ring-quarterpulse\n      `,\n    },\n    disabled: {\n      true: `\n      cursor-not-allowed\n      has-[:placeholder-shown]:bg-forms-fill-disabled\n      has-[:placeholder-shown]:ring-forms-border-disabled\n      has-[:placeholder-shown]:ring-quarterpulse\n      `,\n    },\n    hasFilled: {\n      true: '',\n    },\n    hasError: {\n      true: `\n      has-[:placeholder-shown]:ring-forms-border-error\n      has-[:placeholder-shown]:ring-quarterpulse\n      has-[:placeholder-shown]:hover:ring-halfpulse\n      `,\n    },\n  },\n  compoundVariants: [\n    {\n      hasError: false,\n      hasFilled: true,\n      readOnly: false,\n      disabled: false,\n      class: `\n        [&:not(:focus-within)]:bg-forms-fill-filled\n        [&:not(:focus-within)]:border-forms-border-filled\n        [&:not(:focus-within)]:border-quarterpulse\n        [&:not(:focus-within)]:hover:border-halfpulse\n      `,\n    },\n    {\n      hasError: false,\n      readOnly: false,\n      disabled: false,\n      class: `\n        has-[:focus-within]:ring-action-border-focused\n        has-[:focus-within]:ring-halfpulse\n        has-[:focus-within]:bg-forms-fill-focused\n        [&:not(:focus-within)]:has-[:placeholder-shown]:hover:bg-forms-fill-hovered\n        [&:not(:focus-within)]:has-[:placeholder-shown]:hover:border-forms-border-hovered\n\n      `,\n    },\n    {\n      hasError: true,\n      hasFilled: true,\n      readOnly: false,\n      disabled: false,\n      class: `\n      has-[:not(:placeholder-shown)]:ring-forms-border-error\n      has-[:not(:placeholder-shown)]:bg-forms-fill-error\n      has-[:not(:placeholder-shown)]:ring-quarterpulse\n      has-[:not(:placeholder-shown)]:hover:ring-halfpulse\n      has-[:not(:placeholder-shown)]:border-none\n      `,\n    },\n    {\n      hasError: false,\n      hasFilled: true,\n      readOnly: false,\n      disabled: true,\n      class: `\n      has-[:not(:placeholder-shown)]:ring-forms-border-disabled\n      has-[:not(:placeholder-shown)]:bg-forms-fill-disabled\n      has-[:not(:placeholder-shown)]:ring-quarterpulse\n      has-[:not(:placeholder-shown)]:border-none\n      `,\n    },\n    {\n      hasError: false,\n      hasFilled: true,\n      readOnly: true,\n      disabled: false,\n      class: `\n        has-[:not(:placeholder-shown)]:ring-forms-border-readonly\n        has-[:not(:placeholder-shown)]:bg-forms-fill-readonly\n        has-[:not(:placeholder-shown)]:ring-quarterpulse\n        has-[:not(:placeholder-shown)]:border-none\n      `,\n    },\n  ],\n  defaultVariants: {\n    size: 'md',\n    isFocused: false,\n    hasError: false,\n    readOnly: false,\n    disabled: false,\n  },\n})\n","import { useInputCounterContext } from '../../input-counter'\nimport type { InputCounterScopedProps } from '../../input-counter.types'\nimport { InputCounterControlVariants } from './input-counter-control.styles'\n\ntype InputCounterControlProps = {\n  children: React.ReactNode\n}\n\nexport const InputCounterControl = (props: InputCounterControlProps) => {\n  const { children, __scopeInputCounter } =\n    props as InputCounterScopedProps<InputCounterControlProps>\n\n  const { size, disabled, hasError, readOnly, currentValue } =\n    useInputCounterContext('InputCounterControl', __scopeInputCounter)\n\n  const hasFilled = currentValue >= 1\n  return (\n    <div\n      className={InputCounterControlVariants({\n        size,\n        disabled,\n        hasError,\n        readOnly,\n        hasFilled,\n      })}\n    >\n      {children}\n    </div>\n  )\n}\n","import type { IconName } from '@raiadrogasil/pulso-icons'\nimport { useMemo } from 'react'\nimport { Icon, type TIconProps } from '~/components/icon'\nimport { useInputCounterContext } from '../../input-counter'\nimport type { InputCounterScopedProps } from '../../input-counter.types'\nimport {\n  inputCounterHelperTextContainerVariants,\n  inputCounterHelperTextMessageVariants,\n} from './input-counter-helpertext.styles'\n\ntype InputCounterHelperTextProps = {\n  iconName?: IconName\n  children: React.ReactNode\n}\n\nexport const InputCounterHelperText = (props: InputCounterHelperTextProps) => {\n  const {\n    children,\n    iconName = '',\n    __scopeInputCounter,\n  } = props as InputCounterScopedProps<InputCounterHelperTextProps>\n\n  const { hasError, disabled, readOnly } = useInputCounterContext(\n    'InputCounterHelperText',\n    __scopeInputCounter\n  )\n  const symbol = hasError ? 'rdicon-warning-circle' : iconName\n\n  const iconColor = useMemo((): TIconProps['color'] => {\n    if (disabled) return 'colorTextNeutralDisabled'\n    if (readOnly) return 'colorTextNeutralReadonly'\n    if (hasError) return 'colorTextDangerAlternative'\n    return 'colorTextNeutralAlternative'\n  }, [disabled, hasError, readOnly])\n\n  if (!children) return null\n\n  const displayIcon = hasError || iconName !== ''\n\n  return (\n    <div\n      {...props}\n      aria-disabled={disabled}\n      className={inputCounterHelperTextContainerVariants({})}\n    >\n      {displayIcon && (\n        <div className=\"mr-onepulse flex items-center\">\n          <Icon\n            symbol={symbol as TIconProps['symbol']}\n            color={iconColor}\n            size=\"tiny\"\n          />\n        </div>\n      )}\n      <span\n        className={inputCounterHelperTextMessageVariants({\n          hasError,\n          disabled,\n          readOnly,\n        })}\n      >\n        {children}\n      </span>\n    </div>\n  )\n}\n","import { tv } from '~/utils/tv'\n\nexport const inputCounterHelperTextContainerVariants = tv({\n  base: `flex flex-row justify-star w-[100%] items-center px-onepulse\n         `,\n  variants: {},\n})\n\nexport const inputCounterHelperTextMessageVariants = tv({\n  base: `\n         flex text-left font-rdmodern font-semibold text-text-neutral-alternative text-threepulse\n         line-clamp-2\n  `,\n  variants: {\n    hasError: {\n      true: 'text-text-danger-alternative',\n      false: '',\n    },\n    readOnly: {\n      true: 'cursor-not-allowed',\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    hasError: false,\n    disabled: false,\n    readOnly: false,\n  },\n})\n","import { forwardRef, useEffect, useRef } from 'react'\nimport { InputCounterinputVariants } from './input-counter-input.styles'\n\nimport { useInputCounterContext } from '../../input-counter'\nimport type { InputCounterScopedProps } from '../../input-counter.types'\n\ntype InputCounterInputProps = Omit<React.ComponentProps<'input'>, 'value'> & {}\n\nconst MIN_VALUE_LIMIT = 0\nconst MAX_VALUE_LIMIT = 999\n\nexport const InputCounterInput = forwardRef<\n  HTMLInputElement,\n  InputCounterInputProps\n>(({ ...props }, ref) => {\n  const { __scopeInputCounter } =\n    props as InputCounterScopedProps<InputCounterInputProps>\n\n  const {\n    currentValue,\n    setCurrentValue,\n    disabled,\n    readOnly,\n    hasError,\n    onValueChange,\n  } = useInputCounterContext('InputCounterInput', __scopeInputCounter)\n\n  const inputRef = useRef<HTMLInputElement | null>(null)\n\n  function ensureValueIsNumeric(value: string) {\n    const regexForValidadeNumber = /[^0-9]/g\n    const numbersEntered = value.replace(regexForValidadeNumber, '').trim()\n\n    const _currentValue = Math.min(\n      MAX_VALUE_LIMIT,\n      Math.max(\n        MIN_VALUE_LIMIT,\n        Number.parseInt(numbersEntered) || MIN_VALUE_LIMIT\n      )\n    )\n\n    setCurrentValue(Number(_currentValue))\n  }\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.value = currentValue > 0 ? String(currentValue) : ''\n      onValueChange(currentValue)\n    }\n  }, [currentValue])\n\n  return (\n    <input\n      {...props}\n      ref={node => {\n        if (typeof ref === 'function') {\n          ref(node)\n        }\n\n        inputRef.current = node\n      }}\n      inputMode=\"numeric\"\n      type=\"tel\"\n      pattern=\"[0-9]*\"\n      className={InputCounterinputVariants({ hasError })}\n      maxLength={3}\n      onChange={event => {\n        ensureValueIsNumeric(event.target.value)\n        onValueChange(Number(event.target.value))\n      }}\n      value={currentValue}\n      disabled={disabled}\n      readOnly={readOnly}\n      placeholder=\"0\"\n    />\n  )\n})\n\nInputCounterInput.displayName = 'InputCounterInput'\n","import { tv } from '~/utils/tv'\n\nexport const InputCounterinputVariants = tv({\n  base: [\n    'w-full bg-transparent text-center text-text-neutral-alternative tabular-nums outline-none placeholder:invisible focus-within:text-text-neutral',\n    'disabled:cursor-not-allowed disabled:text-text-neutral-disabled',\n    'read-only:pointer-events-none read-only:cursor-not-allowed read-only:text-text-neutral-readonly',\n  ],\n  variants: {\n    hasError: {\n      true: 'text-text-neutral-alternative',\n    },\n  },\n})\n","import { tv } from '~/utils/tv'\n\nexport const InputCounterLabelVariants = tv({\n  base: 'line-clamp-1 rounded-none px-onepulse font-rdmodern font-regular text-text-neutral',\n  variants: {\n    size: {\n      md: 'text-threepulse',\n      ml: 'text-threeandhalfpulse',\n      lg: 'text-threeandhalfpulse',\n      xl: 'text-threeandhalfpulse',\n    },\n    disabled: {\n      true: 'cursor-not-allowed text-text-neutral-disabled',\n      false: '',\n    },\n    readOnly: {\n      true: 'cursor-not-allowed text-text-neutral-readonly',\n      false: '',\n    },\n  },\n})\n","import { useInputCounterContext } from '../../input-counter'\nimport type { InputCounterScopedProps } from '../../input-counter.types'\nimport { InputCounterLabelVariants } from './input-counter-label.styles'\n\ntype InputCounterLabelProps = React.ComponentProps<'label'> & {\n  children: React.ReactNode\n}\n\nexport const InputCounterLabel = (props: InputCounterLabelProps) => {\n  const { children, __scopeInputCounter } =\n    props as InputCounterScopedProps<InputCounterLabelProps>\n\n  const { disabled, readOnly, size } = useInputCounterContext(\n    'InputCounterControl',\n    __scopeInputCounter\n  )\n  return (\n    <label\n      className={InputCounterLabelVariants({\n        disabled,\n        readOnly,\n        size,\n      })}\n    >\n      {children}\n    </label>\n  )\n}\n","import { tv } from '~/utils/tv'\n\nexport const InputCounterRootVariants = tv({\n  base: 'flex w-full min-w-[calc(var(--sizing-colossal)_+_var(--sizing-micro))] flex-col gap-halfpulse ',\n  variants: {},\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 { tv } from '~/utils/tv'\n\nexport const inputTextActionsVariants = tv({\n  base: `\n    group flex w-[100%] items-center justify-between gap-onepulse py-threepulse duration-100 ease-in\n    bg-forms-filled ring-forms-border-filled ring-quarterpulse overflow-hidden\n    focus-within:ring-halfpulse focus-within:bg-forms-fill-focused min-w-[calc(var(--sizing-huge)_+_var(--sizing-tiny))]\n    `,\n  variants: {\n    size: {\n      md: 'h-medium rounded-form px-twopulse',\n      ml: 'h-mediumlarge rounded-form px-threepulse',\n      lg: 'h-large rounded-form px-threepulse',\n      xl: 'h-extralarge rounded-largecontainer px-threepulse',\n    },\n    readOnly: {\n      true: '',\n    },\n    hasError: {\n      true: '',\n    },\n    filled: {\n      true: '',\n    },\n    active: {\n      true: '',\n    },\n    disabled: {\n      true: 'cursor-not-allowed ring-forms-border-disabled ring-quarterpulse',\n    },\n  },\n  compoundVariants: [\n    {\n      readOnly: false,\n      disabled: false,\n      hasError: false,\n      class: `\n        [&:not(:focus-within)]:has-[:placeholder-shown]:bg-forms-fill\n        [&:not(:focus-within)]:has-[:placeholder-shown]:hover:bg-forms-fill-hovered\n      `,\n    },\n    {\n      hasError: false,\n      readOnly: false,\n      disabled: false,\n      class: `\n          focus-within:ring-action-border-focused hover:ring-halfpulse\n          [&:not(:focus-within)]:has-[:placeholder-shown]:ring-forms-border\n          [&:not(:focus-within)]:has-[:placeholder-shown]:hover:ring-forms-border-hovered\n          [&:not(:focus-within)]:has-[:placeholder-shown]:ring-none\n        `,\n    },\n    {\n      readOnly: true,\n      disabled: false,\n      class:\n        'cursor-not-allowed bg-forms-fill-readonly ring-forms-border-readonly ring-quarterpulse',\n    },\n    {\n      hasError: true,\n      filled: true,\n      active: false,\n      class: 'bg-forms-fill-error ring-forms-border-error hover:ring-halfpulse',\n    },\n    {\n      hasError: true,\n      active: true,\n      class:\n        'bg-forms-fill-error ring-forms-border-error ring-halfpulse hover:bg-forms-fill-error hover:ring-halfpulse',\n    },\n    {\n      hasError: true,\n      filled: false,\n      active: false,\n      class:\n        'bg-forms-fill ring-forms-border-error hover:bg-forms-fill-hovered hover:ring-bg-forms-hovered hover:ring-halfpulse',\n    },\n  ],\n  defaultVariants: {\n    size: 'ml',\n    isFocused: false,\n    hasError: false,\n    readOnly: false,\n    disabled: false,\n  },\n})\n","import { InputText, useInputTextContext } from '../../input-text'\nimport type {\n  InputTextActionsProps,\n  InputTextScopedProps,\n} from '..