@fanvue/ui 3.19.0 → 3.20.0

package/dist/cjs/components/Autocomplete/Autocomplete.cjs

@@ -101,7 +101,7 @@ const Autocomplete = React__namespace.forwardRef((props, ref) => {
           "div",
           {
             className: cn.cn(
-              "flex flex-wrap items-center overflow-hidden rounded-sm border bg-neutral-alphas-100 has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors",
+              "relative flex flex-wrap items-center overflow-hidden rounded-sm border bg-neutral-alphas-100 after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] has-focus-visible:outline-none has-focus-visible:after:shadow-focus-ring motion-safe:transition-colors",
               error ? "border-error-content" : "border-transparent",
               !disabled && !error && "hover:border-neutral-alphas-400",
               ac.isOpen && !error && !disabled && "border-neutral-alphas-400",

package/dist/cjs/components/Autocomplete/Autocomplete.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.cjs","sources":["../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import * as Popover from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { FLOATING_CONTENT_COLLISION_PADDING } from \"@/utils/floatingContentCollisionPadding\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\nimport { AutocompleteDropdownContent } from \"./AutocompleteDropdownContent\";\nimport { AutocompleteTag } from \"./AutocompleteTag\";\nimport { useAutocomplete } from \"./useAutocomplete\";\n\nexport type AutocompleteSize = \"48\" | \"40\" | \"32\";\n\nexport interface AutocompleteOption {\n  /** Unique value identifying the option. Returned via `onChange`. */\n  value: string;\n  /** Visible label. Falls back to `value` when omitted. */\n  label?: string;\n  /** When `true`, the option renders but cannot be selected. @default false */\n  disabled?: boolean;\n  /**\n   * ID of the group this option belongs to. Must match an entry in the\n   * component's `groups` prop. Options without a `groupId` render in an\n   * implicit \"ungrouped\" bucket above the first declared group.\n   */\n  groupId?: string;\n  /**\n   * Pinned options bypass the search filter and stay visible at the top of\n   * the list regardless of the current query. Useful for \"+ Create new\"\n   * affordances. Pinned options ignore `groupId` and render before any\n   * grouped or ungrouped content. @default false\n   */\n  pinned?: boolean;\n}\n\n/**\n * Describes a single group rendered above its matching options.\n * Indentation of nested rows (e.g. price under product) is not built in —\n * consumers control it via `renderOption` styling.\n */\nexport interface AutocompleteGroup {\n  /** Stable identifier referenced by `option.groupId`. */\n  id: string;\n  /**\n   * Group heading text. Used as the group's accessible name and matched\n   * against the search query: when the query matches a group's `label`,\n   * every option under that group is kept regardless of whether it\n   * individually matches the per-option filter. This supports the common\n   * \"heading is the searchable label, items are sub-rows\" shape (e.g.\n   * heading = product name, items = prices).\n   */\n  label: string;\n}\n\ninterface AutocompleteBaseProps {\n  label?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  helperText?: string;\n  /** @default \"48\" */\n  size?: AutocompleteSize;\n  /** @default false */\n  error?: boolean;\n  errorMessage?: string;\n  placeholder?: string;\n  leftIcon?: React.ReactNode;\n  /** @default false */\n  fullWidth?: boolean;\n  /** @default false */\n  disabled?: boolean;\n  /** @default false */\n  clearable?: boolean;\n  clearAriaLabel?: string;\n  id?: string;\n  className?: string;\n  options: AutocompleteOption[];\n  inputValue?: string;\n  onInputChange?: (value: string) => void;\n  filterFn?: (option: AutocompleteOption, query: string) => boolean;\n  /** @default false */\n  creatable?: boolean;\n  creatableLabel?: (inputValue: string) => string;\n  onCreate?: (inputValue: string) => void;\n  /** @default false */\n  loading?: boolean;\n  loadingText?: string;\n  emptyText?: string;\n  renderOption?: (\n    option: AutocompleteOption,\n    state: { selected: boolean; active: boolean },\n  ) => React.ReactNode;\n  renderTag?: (option: AutocompleteOption, onRemove: () => void) => React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Ordered list of groups. When provided, options whose `groupId` matches\n   * an entry render under the corresponding heading. Groups with no visible\n   * (post-filter) options collapse silently. Pinned options render above\n   * everything; ungrouped options render between pinned and the first group.\n   * Only one level of grouping is supported.\n   */\n  groups?: AutocompleteGroup[];\n  /**\n   * Custom renderer for group headings. The returned node is wrapped by the\n   * component in an element carrying the `id` referenced by the surrounding\n   * `role=\"group\"` wrapper's `aria-labelledby`, so consumers only need to\n   * return visual content.\n   */\n  renderGroupHeading?: (group: AutocompleteGroup) => React.ReactNode;\n}\n\ninterface AutocompleteSingleProps extends AutocompleteBaseProps {\n  multiple?: false;\n  value?: string | null;\n  defaultValue?: string | null;\n  onChange?: (value: string | null) => void;\n}\n\ninterface AutocompleteMultiProps extends AutocompleteBaseProps {\n  multiple: true;\n  value?: string[];\n  defaultValue?: string[];\n  onChange?: (values: string[]) => void;\n}\n\nexport type AutocompleteProps = AutocompleteSingleProps | AutocompleteMultiProps;\n\nconst CONTAINER_HEIGHT: Record<AutocompleteSize, string> = {\n  \"48\": \"min-h-12\",\n  \"40\": \"min-h-10\",\n  \"32\": \"min-h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<AutocompleteSize, string> = {\n  \"48\": \"typography-body-default-16px-regular\",\n  \"40\": \"typography-body-default-16px-regular\",\n  \"32\": \"typography-body-small-14px-regular\",\n};\n\nconst PADDING_CLASSES: Record<AutocompleteSize, string> = {\n  \"48\": \"px-4 py-1.5 gap-3\",\n  \"40\": \"px-4 py-1 gap-3\",\n  \"32\": \"px-3 py-1 gap-2\",\n};\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"Autocomplete: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A combobox input with single- or multi-select, optional async loading, and\n * native support for grouped + pinned options.\n *\n * - Pass `groups` plus an `options` array whose entries reference each group\n *   via `groupId` to render hierarchical lists with proper `role=\"group\"` +\n *   `aria-labelledby` semantics. Options without a `groupId` render above\n *   the first group; options marked `pinned` render above everything and\n *   bypass the search filter.\n * - Indentation of nested rows (e.g. price under product) is controlled by\n *   the consumer via `renderOption` styling — there is no built-in indent.\n *\n * @example\n * ```tsx\n * <Autocomplete\n *   aria-label=\"Choose a product\"\n *   options={[\n *     { value: \"__new__\", label: \"+ Create new product\", pinned: true },\n *     { value: \"product:abc\", label: \"Demo Product\", groupId: \"recent\" },\n *   ]}\n *   groups={[{ id: \"recent\", label: \"Recent products\" }]}\n *   onChange={handleSelect}\n * />\n * ```\n */\n// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Conditional JSX branches in the render template\nexport const Autocomplete = React.forwardRef<HTMLInputElement, AutocompleteProps>((props, ref) => {\n  const {\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n    helperText,\n    size = \"48\",\n    error = false,\n    errorMessage,\n    placeholder,\n    leftIcon,\n    fullWidth = false,\n    disabled = false,\n    clearable = false,\n    clearAriaLabel = \"Clear\",\n    className,\n    loading = false,\n    loadingText,\n    emptyText = \"No results\",\n    renderOption,\n    renderTag,\n    renderGroupHeading,\n  } = props;\n\n  const ac = useAutocomplete(props);\n\n  React.useImperativeHandle(ref, () => ac.inputRef.current as HTMLInputElement);\n\n  warnMissingAccessibleName(label, ariaLabel, ariaLabelledby);\n\n  const bottomText = error && errorMessage ? errorMessage : helperText;\n\n  return (\n    <Popover.Root open={ac.isOpen && !disabled} onOpenChange={ac.handleOpenChange}>\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-autocomplete-root=\"\"\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={ac.inputId}\n            className=\"typography-description-12px-semibold px-1 pt-1 pb-2 text-content-primary\"\n          >\n            {label}\n          </label>\n        )}\n\n        <Popover.Anchor asChild>\n          {/* biome-ignore lint/a11y/noStaticElementInteractions: Container delegates click to the inner input */}\n          {/* biome-ignore lint/a11y/useKeyWithClickEvents: Keyboard interaction is handled by the inner combobox input */}\n          <div\n            className={cn(\n              \"flex flex-wrap items-center overflow-hidden rounded-sm border bg-neutral-alphas-100 has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors\",\n              error ? \"border-error-content\" : \"border-transparent\",\n              !disabled && !error && \"hover:border-neutral-alphas-400\",\n              ac.isOpen && !error && !disabled && \"border-neutral-alphas-400\",\n              CONTAINER_HEIGHT[size],\n              PADDING_CLASSES[size],\n              disabled && \"opacity-50\",\n            )}\n            onClick={ac.handleContainerClick}\n          >\n            {leftIcon && (\n              <div className=\"flex size-5 shrink-0 items-center justify-center text-content-secondary\">\n                {leftIcon}\n              </div>\n            )}\n\n            <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-1.5\">\n              {ac.isMulti &&\n                ac.selectedMultiOptions.map((opt) => (\n                  <AutocompleteTag\n                    key={opt.value}\n                    option={opt}\n                    disabled={disabled}\n                    onRemove={() => ac.toggleMulti(opt.value)}\n                    renderTag={renderTag}\n                  />\n                ))}\n\n              <input\n                ref={ac.inputRef}\n                id={ac.inputId}\n                role=\"combobox\"\n                type=\"text\"\n                disabled={disabled}\n                aria-expanded={ac.isOpen}\n                aria-controls={ac.isOpen ? ac.listboxId : undefined}\n                aria-activedescendant={ac.activeDescendantId}\n                aria-autocomplete=\"list\"\n                aria-describedby={bottomText ? ac.helperTextId : undefined}\n                aria-invalid={error || undefined}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledby}\n                autoComplete=\"off\"\n                placeholder={\n                  ac.isMulti && ac.selectedMultiValues.length > 0 ? undefined : placeholder\n                }\n                value={ac.displayInputValue}\n                onChange={ac.handleInputChange}\n                onKeyDown={ac.handleKeyDown}\n                onFocus={ac.handleFocus}\n                onBlur={ac.handleBlur}\n                className={cn(\n                  \"min-w-[40px] flex-1 truncate bg-transparent text-content-primary no-underline placeholder:text-content-secondary placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed\",\n                  INPUT_SIZE_CLASSES[size],\n                )}\n              />\n            </div>\n\n            <div className=\"flex shrink-0 items-center gap-1\">\n              {loading && <SpinnerIcon className=\"size-4 animate-spin text-content-secondary\" />}\n              {clearable && ac.hasClearableValue && !disabled && (\n                <button\n                  type=\"button\"\n                  tabIndex={-1}\n                  aria-label={clearAriaLabel}\n                  className=\"flex size-5 shrink-0 cursor-pointer items-center justify-center text-content-secondary hover:text-content-primary active:scale-95\"\n                  onClick={ac.handleClear}\n                >\n                  <CloseIcon className=\"size-4\" />\n                </button>\n              )}\n              <div className=\"flex size-5 shrink-0 items-center justify-center text-content-secondary\">\n                <ChevronDownIcon\n                  className={cn(\"size-5 transition-transform\", ac.isOpen && \"rotate-180\")}\n                />\n              </div>\n            </div>\n          </div>\n        </Popover.Anchor>\n\n        <Popover.Portal>\n          <Popover.Content\n            sideOffset={4}\n            collisionPadding={FLOATING_CONTENT_COLLISION_PADDING}\n            onOpenAutoFocus={(e) => e.preventDefault()}\n            onCloseAutoFocus={(e) => e.preventDefault()}\n            style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\" }}\n            className={cn(\n              \"w-max min-w-(--radix-popper-anchor-width) max-w-(--radix-popover-content-available-width) overflow-hidden rounded-sm border border-neutral-alphas-200 bg-background-primary text-content-primary shadow-[0_4px_16px_rgba(0,0,0,0.10)]\",\n              \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n              \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n              \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n              \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n            )}\n          >\n            <div\n              ref={ac.listRef}\n              id={ac.listboxId}\n              role=\"listbox\"\n              aria-label={label ?? ariaLabel ?? \"Options\"}\n              aria-multiselectable={ac.isMulti || undefined}\n              className=\"max-h-60 overflow-y-auto p-1\"\n            >\n              <AutocompleteDropdownContent\n                loading={loading}\n                loadingText={loadingText}\n                emptyText={emptyText}\n                visibleOptions={ac.visibleOptions}\n                visibleSections={ac.visibleSections}\n                createOption={ac.createOption}\n                listboxId={ac.listboxId}\n                activeIndex={ac.activeIndex}\n                isMulti={ac.isMulti}\n                selectedMultiValues={ac.selectedMultiValues}\n                selectedValue={ac.selectedValue}\n                onSelect={ac.handleSelect}\n                onMouseEnter={ac.setActiveIndex}\n                renderOption={renderOption}\n                renderGroupHeading={renderGroupHeading}\n              />\n            </div>\n          </Popover.Content>\n        </Popover.Portal>\n\n        {bottomText && (\n          <p\n            id={ac.helperTextId}\n            className={cn(\n              \"typography-description-12px-regular px-2 pt-1 pb-0.5\",\n              error ? \"text-error-content\" : \"text-content-secondary\",\n            )}\n          >\n            {bottomText}\n          </p>\n        )}\n      </div>\n    </Popover.Root>\n  );\n});\n\nAutocomplete.displayName = \"Autocomplete\";\n"],"names":["React","useAutocomplete","jsx","Popover","jsxs","cn","AutocompleteTag","SpinnerIcon","CloseIcon","ChevronDownIcon","FLOATING_CONTENT_COLLISION_PADDING","AutocompleteDropdownContent"],"mappings":"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"}
+{"version":3,"file":"Autocomplete.cjs","sources":["../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import * as Popover from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { FLOATING_CONTENT_COLLISION_PADDING } from \"@/utils/floatingContentCollisionPadding\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\nimport { AutocompleteDropdownContent } from \"./AutocompleteDropdownContent\";\nimport { AutocompleteTag } from \"./AutocompleteTag\";\nimport { useAutocomplete } from \"./useAutocomplete\";\n\nexport type AutocompleteSize = \"48\" | \"40\" | \"32\";\n\nexport interface AutocompleteOption {\n  /** Unique value identifying the option. Returned via `onChange`. */\n  value: string;\n  /** Visible label. Falls back to `value` when omitted. */\n  label?: string;\n  /** When `true`, the option renders but cannot be selected. @default false */\n  disabled?: boolean;\n  /**\n   * ID of the group this option belongs to. Must match an entry in the\n   * component's `groups` prop. Options without a `groupId` render in an\n   * implicit \"ungrouped\" bucket above the first declared group.\n   */\n  groupId?: string;\n  /**\n   * Pinned options bypass the search filter and stay visible at the top of\n   * the list regardless of the current query. Useful for \"+ Create new\"\n   * affordances. Pinned options ignore `groupId` and render before any\n   * grouped or ungrouped content. @default false\n   */\n  pinned?: boolean;\n}\n\n/**\n * Describes a single group rendered above its matching options.\n * Indentation of nested rows (e.g. price under product) is not built in —\n * consumers control it via `renderOption` styling.\n */\nexport interface AutocompleteGroup {\n  /** Stable identifier referenced by `option.groupId`. */\n  id: string;\n  /**\n   * Group heading text. Used as the group's accessible name and matched\n   * against the search query: when the query matches a group's `label`,\n   * every option under that group is kept regardless of whether it\n   * individually matches the per-option filter. This supports the common\n   * \"heading is the searchable label, items are sub-rows\" shape (e.g.\n   * heading = product name, items = prices).\n   */\n  label: string;\n}\n\ninterface AutocompleteBaseProps {\n  label?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  helperText?: string;\n  /** @default \"48\" */\n  size?: AutocompleteSize;\n  /** @default false */\n  error?: boolean;\n  errorMessage?: string;\n  placeholder?: string;\n  leftIcon?: React.ReactNode;\n  /** @default false */\n  fullWidth?: boolean;\n  /** @default false */\n  disabled?: boolean;\n  /** @default false */\n  clearable?: boolean;\n  clearAriaLabel?: string;\n  id?: string;\n  className?: string;\n  options: AutocompleteOption[];\n  inputValue?: string;\n  onInputChange?: (value: string) => void;\n  filterFn?: (option: AutocompleteOption, query: string) => boolean;\n  /** @default false */\n  creatable?: boolean;\n  creatableLabel?: (inputValue: string) => string;\n  onCreate?: (inputValue: string) => void;\n  /** @default false */\n  loading?: boolean;\n  loadingText?: string;\n  emptyText?: string;\n  renderOption?: (\n    option: AutocompleteOption,\n    state: { selected: boolean; active: boolean },\n  ) => React.ReactNode;\n  renderTag?: (option: AutocompleteOption, onRemove: () => void) => React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Ordered list of groups. When provided, options whose `groupId` matches\n   * an entry render under the corresponding heading. Groups with no visible\n   * (post-filter) options collapse silently. Pinned options render above\n   * everything; ungrouped options render between pinned and the first group.\n   * Only one level of grouping is supported.\n   */\n  groups?: AutocompleteGroup[];\n  /**\n   * Custom renderer for group headings. The returned node is wrapped by the\n   * component in an element carrying the `id` referenced by the surrounding\n   * `role=\"group\"` wrapper's `aria-labelledby`, so consumers only need to\n   * return visual content.\n   */\n  renderGroupHeading?: (group: AutocompleteGroup) => React.ReactNode;\n}\n\ninterface AutocompleteSingleProps extends AutocompleteBaseProps {\n  multiple?: false;\n  value?: string | null;\n  defaultValue?: string | null;\n  onChange?: (value: string | null) => void;\n}\n\ninterface AutocompleteMultiProps extends AutocompleteBaseProps {\n  multiple: true;\n  value?: string[];\n  defaultValue?: string[];\n  onChange?: (values: string[]) => void;\n}\n\nexport type AutocompleteProps = AutocompleteSingleProps | AutocompleteMultiProps;\n\nconst CONTAINER_HEIGHT: Record<AutocompleteSize, string> = {\n  \"48\": \"min-h-12\",\n  \"40\": \"min-h-10\",\n  \"32\": \"min-h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<AutocompleteSize, string> = {\n  \"48\": \"typography-body-default-16px-regular\",\n  \"40\": \"typography-body-default-16px-regular\",\n  \"32\": \"typography-body-small-14px-regular\",\n};\n\nconst PADDING_CLASSES: Record<AutocompleteSize, string> = {\n  \"48\": \"px-4 py-1.5 gap-3\",\n  \"40\": \"px-4 py-1 gap-3\",\n  \"32\": \"px-3 py-1 gap-2\",\n};\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"Autocomplete: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A combobox input with single- or multi-select, optional async loading, and\n * native support for grouped + pinned options.\n *\n * - Pass `groups` plus an `options` array whose entries reference each group\n *   via `groupId` to render hierarchical lists with proper `role=\"group\"` +\n *   `aria-labelledby` semantics. Options without a `groupId` render above\n *   the first group; options marked `pinned` render above everything and\n *   bypass the search filter.\n * - Indentation of nested rows (e.g. price under product) is controlled by\n *   the consumer via `renderOption` styling — there is no built-in indent.\n *\n * @example\n * ```tsx\n * <Autocomplete\n *   aria-label=\"Choose a product\"\n *   options={[\n *     { value: \"__new__\", label: \"+ Create new product\", pinned: true },\n *     { value: \"product:abc\", label: \"Demo Product\", groupId: \"recent\" },\n *   ]}\n *   groups={[{ id: \"recent\", label: \"Recent products\" }]}\n *   onChange={handleSelect}\n * />\n * ```\n */\n// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Conditional JSX branches in the render template\nexport const Autocomplete = React.forwardRef<HTMLInputElement, AutocompleteProps>((props, ref) => {\n  const {\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n    helperText,\n    size = \"48\",\n    error = false,\n    errorMessage,\n    placeholder,\n    leftIcon,\n    fullWidth = false,\n    disabled = false,\n    clearable = false,\n    clearAriaLabel = \"Clear\",\n    className,\n    loading = false,\n    loadingText,\n    emptyText = \"No results\",\n    renderOption,\n    renderTag,\n    renderGroupHeading,\n  } = props;\n\n  const ac = useAutocomplete(props);\n\n  React.useImperativeHandle(ref, () => ac.inputRef.current as HTMLInputElement);\n\n  warnMissingAccessibleName(label, ariaLabel, ariaLabelledby);\n\n  const bottomText = error && errorMessage ? errorMessage : helperText;\n\n  return (\n    <Popover.Root open={ac.isOpen && !disabled} onOpenChange={ac.handleOpenChange}>\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-autocomplete-root=\"\"\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={ac.inputId}\n            className=\"typography-description-12px-semibold px-1 pt-1 pb-2 text-content-primary\"\n          >\n            {label}\n          </label>\n        )}\n\n        <Popover.Anchor asChild>\n          {/* biome-ignore lint/a11y/noStaticElementInteractions: Container delegates click to the inner input */}\n          {/* biome-ignore lint/a11y/useKeyWithClickEvents: Keyboard interaction is handled by the inner combobox input */}\n          <div\n            className={cn(\n              \"relative flex flex-wrap items-center overflow-hidden rounded-sm border bg-neutral-alphas-100 after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] has-focus-visible:outline-none has-focus-visible:after:shadow-focus-ring motion-safe:transition-colors\",\n              error ? \"border-error-content\" : \"border-transparent\",\n              !disabled && !error && \"hover:border-neutral-alphas-400\",\n              ac.isOpen && !error && !disabled && \"border-neutral-alphas-400\",\n              CONTAINER_HEIGHT[size],\n              PADDING_CLASSES[size],\n              disabled && \"opacity-50\",\n            )}\n            onClick={ac.handleContainerClick}\n          >\n            {leftIcon && (\n              <div className=\"flex size-5 shrink-0 items-center justify-center text-content-secondary\">\n                {leftIcon}\n              </div>\n            )}\n\n            <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-1.5\">\n              {ac.isMulti &&\n                ac.selectedMultiOptions.map((opt) => (\n                  <AutocompleteTag\n                    key={opt.value}\n                    option={opt}\n                    disabled={disabled}\n                    onRemove={() => ac.toggleMulti(opt.value)}\n                    renderTag={renderTag}\n                  />\n                ))}\n\n              <input\n                ref={ac.inputRef}\n                id={ac.inputId}\n                role=\"combobox\"\n                type=\"text\"\n                disabled={disabled}\n                aria-expanded={ac.isOpen}\n                aria-controls={ac.isOpen ? ac.listboxId : undefined}\n                aria-activedescendant={ac.activeDescendantId}\n                aria-autocomplete=\"list\"\n                aria-describedby={bottomText ? ac.helperTextId : undefined}\n                aria-invalid={error || undefined}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledby}\n                autoComplete=\"off\"\n                placeholder={\n                  ac.isMulti && ac.selectedMultiValues.length > 0 ? undefined : placeholder\n                }\n                value={ac.displayInputValue}\n                onChange={ac.handleInputChange}\n                onKeyDown={ac.handleKeyDown}\n                onFocus={ac.handleFocus}\n                onBlur={ac.handleBlur}\n                className={cn(\n                  \"min-w-[40px] flex-1 truncate bg-transparent text-content-primary no-underline placeholder:text-content-secondary placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed\",\n                  INPUT_SIZE_CLASSES[size],\n                )}\n              />\n            </div>\n\n            <div className=\"flex shrink-0 items-center gap-1\">\n              {loading && <SpinnerIcon className=\"size-4 animate-spin text-content-secondary\" />}\n              {clearable && ac.hasClearableValue && !disabled && (\n                <button\n                  type=\"button\"\n                  tabIndex={-1}\n                  aria-label={clearAriaLabel}\n                  className=\"flex size-5 shrink-0 cursor-pointer items-center justify-center text-content-secondary hover:text-content-primary active:scale-95\"\n                  onClick={ac.handleClear}\n                >\n                  <CloseIcon className=\"size-4\" />\n                </button>\n              )}\n              <div className=\"flex size-5 shrink-0 items-center justify-center text-content-secondary\">\n                <ChevronDownIcon\n                  className={cn(\"size-5 transition-transform\", ac.isOpen && \"rotate-180\")}\n                />\n              </div>\n            </div>\n          </div>\n        </Popover.Anchor>\n\n        <Popover.Portal>\n          <Popover.Content\n            sideOffset={4}\n            collisionPadding={FLOATING_CONTENT_COLLISION_PADDING}\n            onOpenAutoFocus={(e) => e.preventDefault()}\n            onCloseAutoFocus={(e) => e.preventDefault()}\n            style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\" }}\n            className={cn(\n              \"w-max min-w-(--radix-popper-anchor-width) max-w-(--radix-popover-content-available-width) overflow-hidden rounded-sm border border-neutral-alphas-200 bg-background-primary text-content-primary shadow-[0_4px_16px_rgba(0,0,0,0.10)]\",\n              \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n              \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n              \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n              \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n            )}\n          >\n            <div\n              ref={ac.listRef}\n              id={ac.listboxId}\n              role=\"listbox\"\n              aria-label={label ?? ariaLabel ?? \"Options\"}\n              aria-multiselectable={ac.isMulti || undefined}\n              className=\"max-h-60 overflow-y-auto p-1\"\n            >\n              <AutocompleteDropdownContent\n                loading={loading}\n                loadingText={loadingText}\n                emptyText={emptyText}\n                visibleOptions={ac.visibleOptions}\n                visibleSections={ac.visibleSections}\n                createOption={ac.createOption}\n                listboxId={ac.listboxId}\n                activeIndex={ac.activeIndex}\n                isMulti={ac.isMulti}\n                selectedMultiValues={ac.selectedMultiValues}\n                selectedValue={ac.selectedValue}\n                onSelect={ac.handleSelect}\n                onMouseEnter={ac.setActiveIndex}\n                renderOption={renderOption}\n                renderGroupHeading={renderGroupHeading}\n              />\n            </div>\n          </Popover.Content>\n        </Popover.Portal>\n\n        {bottomText && (\n          <p\n            id={ac.helperTextId}\n            className={cn(\n              \"typography-description-12px-regular px-2 pt-1 pb-0.5\",\n              error ? \"text-error-content\" : \"text-content-secondary\",\n            )}\n          >\n            {bottomText}\n          </p>\n        )}\n      </div>\n    </Popover.Root>\n  );\n});\n\nAutocomplete.displayName = \"Autocomplete\";\n"],"names":["React","useAutocomplete","jsx","Popover","jsxs","cn","AutocompleteTag","SpinnerIcon","CloseIcon","ChevronDownIcon","FLOATING_CONTENT_COLLISION_PADDING","AutocompleteDropdownContent"],"mappings":"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"}

package/dist/cjs/components/ButtonStack/ButtonStack.cjs

@@ -0,0 +1,44 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ButtonStack = React__namespace.forwardRef(
+  ({ direction = "horizontal", className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn.cn(
+          "flex gap-2",
+          direction === "horizontal" && "flex-row [&>*]:min-w-0 [&>*]:flex-1",
+          direction === "vertical" && "flex-col [&>*]:w-full",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ButtonStack.displayName = "ButtonStack";
+exports.ButtonStack = ButtonStack;
+//# sourceMappingURL=ButtonStack.cjs.map

package/dist/cjs/components/ButtonStack/ButtonStack.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonStack.cjs","sources":["../../../../src/components/ButtonStack/ButtonStack.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Layout orientation of the buttons within a {@link ButtonStack}. */\nexport type ButtonStackDirection = \"horizontal\" | \"vertical\";\n\nexport interface ButtonStackProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Layout orientation. `horizontal` places buttons side by side with equal\n   * widths for primary + secondary action pairs; `vertical` stacks them\n   * full-width for mobile screens and narrow panels.\n   * @default \"horizontal\"\n   */\n  direction?: ButtonStackDirection;\n  /** Buttons to arrange — typically two {@link Button} elements. */\n  children: React.ReactNode;\n}\n\n/**\n * A layout helper that arranges action buttons either side by side\n * (`horizontal`) or stacked (`vertical`). Compose it with {@link Button}\n * children rather than reimplementing button styles.\n *\n * In `horizontal` mode each child stretches to an equal width; in `vertical`\n * mode each child spans the full width of the container. Buttons keep their\n * own sizing, so pass a matching `size` to each child for consistent heights.\n *\n * @example\n * ```tsx\n * <ButtonStack direction=\"horizontal\">\n *   <Button variant=\"outline\">Cancel</Button>\n *   <Button variant=\"primary\">Confirm</Button>\n * </ButtonStack>\n * ```\n */\nexport const ButtonStack = React.forwardRef<HTMLDivElement, ButtonStackProps>(\n  ({ direction = \"horizontal\", className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex gap-2\",\n          direction === \"horizontal\" && \"flex-row [&>*]:min-w-0 [&>*]:flex-1\",\n          direction === \"vertical\" && \"flex-col [&>*]:w-full\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nButtonStack.displayName = \"ButtonStack\";\n"],"names":["React","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmCO,MAAM,cAAcA,iBAAM;AAAA,EAC/B,CAAC,EAAE,YAAY,cAAc,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AACpE,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,cAAc,gBAAgB;AAAA,UAC9B,cAAc,cAAc;AAAA,UAC5B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,YAAY,cAAc;;"}

package/dist/cjs/components/Card/Card.cjs

@@ -21,35 +21,62 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const VARIANT_CLASSES = {
+const CardContext = React__namespace.createContext({
+  hierarchy: "primary",
+  type: "default"
+});
+const useCardContext = () => React__namespace.useContext(CardContext);
+const LEGACY_VARIANT_CLASSES = {
   outlined: "border border-neutral-alphas-200 bg-surface-primary shadow-sm",
   elevated: "border border-neutral-alphas-200 bg-surface-primary shadow-md",
   filled: "bg-surface-secondary",
   ghost: "bg-transparent"
 };
+const HIERARCHY_CLASSES = {
+  primary: "rounded-lg border border-border-primary bg-surface-primary",
+  secondary: "rounded-md border border-border-strong bg-surface-secondary shadow-sm"
+};
+const INTERACTIVE_CLASSES = "isolate cursor-pointer after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:bg-content-primary after:opacity-0 after:transition-opacity after:content-[''] hover:after:opacity-5";
 const Card = React__namespace.forwardRef(
-  ({ className, variant = "outlined", fullWidth = true, noPadding = false, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+  ({
+    className,
+    hierarchy = "primary",
+    type = "default",
+    interactive = false,
+    variant,
+    fullWidth = true,
+    noPadding = false,
+    children,
+    ...props
+  }, ref) => {
+    const isLegacy = variant !== void 0;
+    const padding = noPadding ? void 0 : isLegacy ? "p-4" : hierarchy === "secondary" ? "p-4" : "p-6";
+    const contextValue = React__namespace.useMemo(
+      () => ({ hierarchy, type }),
+      [hierarchy, type]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(CardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         className: cn.cn(
-          "flex flex-col overflow-hidden rounded-md",
-          !noPadding && "p-4",
+          "relative flex flex-col overflow-hidden",
+          isLegacy ? cn.cn("rounded-md", LEGACY_VARIANT_CLASSES[variant]) : HIERARCHY_CLASSES[hierarchy],
+          padding,
           fullWidth && "w-full",
-          VARIANT_CLASSES[variant],
+          interactive && INTERACTIVE_CLASSES,
           className
         ),
         ...props,
         children
       }
-    );
+    ) });
   }
 );
 Card.displayName = "Card";
 const CardHeader = React__namespace.forwardRef(
   ({ className, action, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn.cn("flex items-start gap-3", className), ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn.cn("flex min-h-8 items-center gap-2", className), ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children }),
       action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: action })
     ] });
@@ -58,11 +85,16 @@ const CardHeader = React__namespace.forwardRef(
 CardHeader.displayName = "CardHeader";
 const CardTitle = React__namespace.forwardRef(
   ({ className, children, ...props }, ref) => {
+    const { hierarchy } = useCardContext();
     return /* @__PURE__ */ jsxRuntime.jsx(
       "h3",
       {
         ref,
-        className: cn.cn("typography-body-default-16px-semibold text-content-primary", className),
+        className: cn.cn(
+          hierarchy === "secondary" ? "typography-body-small-14px-regular" : "typography-header-heading-xs",
+          "text-content-primary",
+          className
+        ),
         ...props,
         children
       }
@@ -86,13 +118,15 @@ const CardDescription = React__namespace.forwardRef(
 CardDescription.displayName = "CardDescription";
 const CardContent = React__namespace.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("flex-1 py-4", className), ...props, children });
+    const { type } = useCardContext();
+    const padding = type === "container" ? void 0 : type === "header-only" ? "pt-6" : "py-6";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("flex-1", padding, className), ...props, children });
   }
 );
 CardContent.displayName = "CardContent";
 const CardFooter = React__namespace.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("flex items-center gap-3", className), ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("flex w-full items-center gap-2", className), ...props, children });
   }
 );
 CardFooter.displayName = "CardFooter";

package/dist/cjs/components/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Visual style variant of the card. */\nexport type CardVariant = \"outlined\" | \"elevated\" | \"filled\" | \"ghost\";\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual style variant of the card. @default \"outlined\" */\n  variant?: CardVariant;\n  /** When `true`, the card will take the full width of its container. @default true */\n  fullWidth?: boolean;\n  /** When `true`, removes all internal padding. @default false */\n  noPadding?: boolean;\n}\n\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Icon element displayed at the trailing end of the header. */\n  action?: React.ReactNode;\n}\n\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst VARIANT_CLASSES: Record<CardVariant, string> = {\n  outlined: \"border border-neutral-alphas-200 bg-surface-primary shadow-sm\",\n  elevated: \"border border-neutral-alphas-200 bg-surface-primary shadow-md\",\n  filled: \"bg-surface-secondary\",\n  ghost: \"bg-transparent\",\n};\n\n/**\n * A composable card component with multiple visual variants. Use with\n * {@link CardHeader}, {@link CardTitle}, {@link CardDescription},\n * {@link CardContent}, and {@link CardFooter} for structured layouts.\n *\n * @example\n * ```tsx\n * <Card variant=\"outlined\">\n *   <CardHeader action={<HomeIcon className=\"size-5\" />}>\n *     <CardTitle>Card title</CardTitle>\n *     <CardDescription>Card description text</CardDescription>\n *   </CardHeader>\n *   <CardContent>Content goes here</CardContent>\n *   <CardFooter>\n *     <Button variant=\"secondary\">Label</Button>\n *     <Button variant=\"primary\">Label</Button>\n *   </CardFooter>\n * </Card>\n * ```\n */\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    { className, variant = \"outlined\", fullWidth = true, noPadding = false, children, ...props },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-col overflow-hidden rounded-md\",\n          !noPadding && \"p-4\",\n          fullWidth && \"w-full\",\n          VARIANT_CLASSES[variant],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nCard.displayName = \"Card\";\n\n/**\n * Header section of a {@link Card}. Renders a flex row with text content\n * on the left and an optional trailing action element (e.g. icon) on the right.\n */\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  ({ className, action, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex items-start gap-3\", className)} {...props}>\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        {action && <div className=\"shrink-0\">{action}</div>}\n      </div>\n    );\n  },\n);\nCardHeader.displayName = \"CardHeader\";\n\n/** Title element rendered inside a {@link CardHeader}. */\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <h3\n        ref={ref}\n        className={cn(\"typography-body-default-16px-semibold text-content-primary\", className)}\n        {...props}\n      >\n        {children}\n      </h3>\n    );\n  },\n);\nCardTitle.displayName = \"CardTitle\";\n\n/** Description text rendered below the {@link CardTitle} inside a {@link CardHeader}. */\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <p\n        ref={ref}\n        className={cn(\"typography-description-12px-regular text-content-secondary\", className)}\n        {...props}\n      >\n        {children}\n      </p>\n    );\n  },\n);\nCardDescription.displayName = \"CardDescription\";\n\n/** Flexible content area of a {@link Card}. Adds vertical padding between header and footer. */\nexport const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex-1 py-4\", className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nCardContent.displayName = \"CardContent\";\n\n/** Footer section of a {@link Card}. Renders children in a horizontal row with a gap. */\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex items-center gap-3\", className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nCardFooter.displayName = \"CardFooter\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,kBAA+C;AAAA,EACnD,UAAU;AAAA,EACV,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AACT;AAsBO,MAAM,OAAOA,iBAAM;AAAA,EACxB,CACE,EAAE,WAAW,UAAU,YAAY,YAAY,MAAM,YAAY,OAAO,UAAU,GAAG,MAAA,GACrF,QACG;AACH,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,CAAC,aAAa;AAAA,UACd,aAAa;AAAA,UACb,gBAAgB,OAAO;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,KAAK,cAAc;AAMZ,MAAM,aAAaF,iBAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,QAAQ,UAAU,GAAG,MAAA,GAAS,QAAQ;AAClD,WACEG,gCAAC,SAAI,KAAU,WAAWD,MAAG,0BAA0B,SAAS,GAAI,GAAG,OACrE,UAAA;AAAA,MAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,kBAAkB,SAAA,CAAS;AAAA,MACzC,UAAUA,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,OAAA,CAAO;AAAA,IAAA,GAC/C;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAGlB,MAAM,YAAYD,iBAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,8DAA8D,SAAS;AAAA,QACpF,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,UAAU,cAAc;AAGjB,MAAM,kBAAkBF,iBAAM;AAAA,EACnC,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,8DAA8D,SAAS;AAAA,QACpF,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,gBAAgB,cAAc;AAGvB,MAAM,cAAcF,iBAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,+BAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,eAAe,SAAS,GAAI,GAAG,OACzD,SAAA,CACH;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAGnB,MAAM,aAAaF,iBAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,+BAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,2BAA2B,SAAS,GAAI,GAAG,OACrE,SAAA,CACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;;;;;;;"}
+{"version":3,"file":"Card.cjs","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Visual hierarchy of the card. Primary is for prominent, content-carrying cards; secondary for supporting cards within denser layouts. */\nexport type CardHierarchy = \"primary\" | \"secondary\";\n\n/** Structural type of the card. `default` has header, content and footer; `header-only` drops the footer; `container` is a bare surface. */\nexport type CardType = \"default\" | \"header-only\" | \"container\";\n\n/**\n * Legacy visual style variant.\n * @deprecated Use {@link CardHierarchy} via the `hierarchy` prop instead. Retained for backwards compatibility.\n */\nexport type CardVariant = \"outlined\" | \"elevated\" | \"filled\" | \"ghost\";\n\ninterface CardContextValue {\n  hierarchy: CardHierarchy;\n  type: CardType;\n}\n\nconst CardContext = React.createContext<CardContextValue>({\n  hierarchy: \"primary\",\n  type: \"default\",\n});\n\nconst useCardContext = () => React.useContext(CardContext);\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual hierarchy of the card. @default \"primary\" */\n  hierarchy?: CardHierarchy;\n  /** Structural type of the card. @default \"default\" */\n  type?: CardType;\n  /** When `true`, applies the hover treatment for clickable cards. @default false */\n  interactive?: boolean;\n  /**\n   * Legacy visual style variant.\n   * @deprecated Use `hierarchy` instead. When set, the card keeps its legacy V1 appearance for backwards compatibility.\n   */\n  variant?: CardVariant;\n  /** When `true`, the card will take the full width of its container. @default true */\n  fullWidth?: boolean;\n  /** When `true`, removes all internal padding. @default false */\n  noPadding?: boolean;\n}\n\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Icon element displayed at the trailing end of the header. */\n  action?: React.ReactNode;\n}\n\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst LEGACY_VARIANT_CLASSES: Record<CardVariant, string> = {\n  outlined: \"border border-neutral-alphas-200 bg-surface-primary shadow-sm\",\n  elevated: \"border border-neutral-alphas-200 bg-surface-primary shadow-md\",\n  filled: \"bg-surface-secondary\",\n  ghost: \"bg-transparent\",\n};\n\nconst HIERARCHY_CLASSES: Record<CardHierarchy, string> = {\n  primary: \"rounded-lg border border-border-primary bg-surface-primary\",\n  secondary: \"rounded-md border border-border-strong bg-surface-secondary shadow-sm\",\n};\n\nconst INTERACTIVE_CLASSES =\n  \"isolate cursor-pointer after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:bg-content-primary after:opacity-0 after:transition-opacity after:content-[''] hover:after:opacity-5\";\n\n/**\n * A composable card component built on the V2 design system. Compose it with\n * {@link CardHeader}, {@link CardTitle}, {@link CardDescription},\n * {@link CardContent}, and {@link CardFooter} for structured layouts.\n *\n * The `hierarchy` prop drives the surface treatment (Primary vs Secondary) and\n * the `type` prop drives the internal spacing (Default / Header Only / Container).\n *\n * @example\n * ```tsx\n * <Card hierarchy=\"primary\">\n *   <CardHeader action={<HomeIcon className=\"size-5\" />}>\n *     <CardTitle>Card title</CardTitle>\n *     <CardDescription>Card description text</CardDescription>\n *   </CardHeader>\n *   <CardContent>Content goes here</CardContent>\n *   <CardFooter>\n *     <Button variant=\"secondary\">Label</Button>\n *     <Button variant=\"primary\">Label</Button>\n *   </CardFooter>\n * </Card>\n * ```\n */\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      className,\n      hierarchy = \"primary\",\n      type = \"default\",\n      interactive = false,\n      variant,\n      fullWidth = true,\n      noPadding = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const isLegacy = variant !== undefined;\n    const padding = noPadding\n      ? undefined\n      : isLegacy\n        ? \"p-4\"\n        : hierarchy === \"secondary\"\n          ? \"p-4\"\n          : \"p-6\";\n\n    const contextValue = React.useMemo<CardContextValue>(\n      () => ({ hierarchy, type }),\n      [hierarchy, type],\n    );\n\n    return (\n      <CardContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          className={cn(\n            \"relative flex flex-col overflow-hidden\",\n            isLegacy\n              ? cn(\"rounded-md\", LEGACY_VARIANT_CLASSES[variant])\n              : HIERARCHY_CLASSES[hierarchy],\n            padding,\n            fullWidth && \"w-full\",\n            interactive && INTERACTIVE_CLASSES,\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </CardContext.Provider>\n    );\n  },\n);\nCard.displayName = \"Card\";\n\n/**\n * Header section of a {@link Card}. Renders a flex row with text content\n * on the left and an optional trailing action element (e.g. icon) on the right.\n */\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  ({ className, action, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex min-h-8 items-center gap-2\", className)} {...props}>\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        {action && <div className=\"shrink-0\">{action}</div>}\n      </div>\n    );\n  },\n);\nCardHeader.displayName = \"CardHeader\";\n\n/** Title element rendered inside a {@link CardHeader}. Adapts its type scale to the card `hierarchy`. */\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(\n  ({ className, children, ...props }, ref) => {\n    const { hierarchy } = useCardContext();\n    return (\n      <h3\n        ref={ref}\n        className={cn(\n          hierarchy === \"secondary\"\n            ? \"typography-body-small-14px-regular\"\n            : \"typography-header-heading-xs\",\n          \"text-content-primary\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </h3>\n    );\n  },\n);\nCardTitle.displayName = \"CardTitle\";\n\n/** Description text rendered below the {@link CardTitle} inside a {@link CardHeader}. */\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <p\n        ref={ref}\n        className={cn(\"typography-description-12px-regular text-content-secondary\", className)}\n        {...props}\n      >\n        {children}\n      </p>\n    );\n  },\n);\nCardDescription.displayName = \"CardDescription\";\n\n/**\n * Flexible content area of a {@link Card}. Its vertical padding follows the card\n * `type`: `default` pads top and bottom, `header-only` pads only the top, and\n * `container` removes the built-in padding entirely.\n */\nexport const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  ({ className, children, ...props }, ref) => {\n    const { type } = useCardContext();\n    const padding = type === \"container\" ? undefined : type === \"header-only\" ? \"pt-6\" : \"py-6\";\n    return (\n      <div ref={ref} className={cn(\"flex-1\", padding, className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nCardContent.displayName = \"CardContent\";\n\n/** Footer section of a {@link Card}. Renders children in a horizontal row with a gap. */\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex w-full items-center gap-2\", className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nCardFooter.displayName = \"CardFooter\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,cAAcA,iBAAM,cAAgC;AAAA,EACxD,WAAW;AAAA,EACX,MAAM;AACR,CAAC;AAED,MAAM,iBAAiB,MAAMA,iBAAM,WAAW,WAAW;AAiCzD,MAAM,yBAAsD;AAAA,EAC1D,UAAU;AAAA,EACV,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,MAAM,oBAAmD;AAAA,EACvD,SAAS;AAAA,EACT,WAAW;AACb;AAEA,MAAM,sBACJ;AAyBK,MAAM,OAAOA,iBAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,cAAc;AAAA,IACd;AAAA,IACA,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,WAAW,YAAY;AAC7B,UAAM,UAAU,YACZ,SACA,WACE,QACA,cAAc,cACZ,QACA;AAER,UAAM,eAAeA,iBAAM;AAAA,MACzB,OAAO,EAAE,WAAW;MACpB,CAAC,WAAW,IAAI;AAAA,IAAA;AAGlB,WACEC,2BAAAA,IAAC,YAAY,UAAZ,EAAqB,OAAO,cAC3B,UAAAA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,WACIA,GAAAA,GAAG,cAAc,uBAAuB,OAAO,CAAC,IAChD,kBAAkB,SAAS;AAAA,UAC/B;AAAA,UACA,aAAa;AAAA,UACb,eAAe;AAAA,UACf;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAMZ,MAAM,aAAaF,iBAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,QAAQ,UAAU,GAAG,MAAA,GAAS,QAAQ;AAClD,WACEG,gCAAC,SAAI,KAAU,WAAWD,MAAG,mCAAmC,SAAS,GAAI,GAAG,OAC9E,UAAA;AAAA,MAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,kBAAkB,SAAA,CAAS;AAAA,MACzC,UAAUA,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,OAAA,CAAO;AAAA,IAAA,GAC/C;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAGlB,MAAM,YAAYD,iBAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,UAAM,EAAE,UAAA,IAAc,eAAA;AACtB,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT,cAAc,cACV,uCACA;AAAA,UACJ;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,UAAU,cAAc;AAGjB,MAAM,kBAAkBF,iBAAM;AAAA,EACnC,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,8DAA8D,SAAS;AAAA,QACpF,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,gBAAgB,cAAc;AAOvB,MAAM,cAAcF,iBAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,UAAM,EAAE,KAAA,IAAS,eAAA;AACjB,UAAM,UAAU,SAAS,cAAc,SAAY,SAAS,gBAAgB,SAAS;AACrF,WACEC,2BAAAA,IAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,UAAU,SAAS,SAAS,GAAI,GAAG,OAC7D,SAAA,CACH;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAGnB,MAAM,aAAaF,iBAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,+BAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,kCAAkC,SAAS,GAAI,GAAG,OAC5E,SAAA,CACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;;;;;;;"}

package/dist/cjs/components/CriticalBanner/CriticalBanner.cjs

@@ -0,0 +1,109 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const Button = require("../Button/Button.cjs");
+const WarningIcon = require("../Icons/WarningIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function CriticalBannerCta({
+  ctaLabel,
+  ctaProps
+}) {
+  const isDisabled = ctaProps?.disabled ?? false;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button.Button,
+    {
+      variant: "white",
+      size: "40",
+      ...ctaProps,
+      className: cn.cn(
+        !isDisabled && "text-alerts-critical-banner-background hover:text-alerts-critical-banner-background active:text-alerts-critical-banner-background",
+        ctaProps?.className
+      ),
+      children: ctaLabel
+    }
+  );
+}
+const CriticalBanner = React__namespace.forwardRef(
+  ({
+    className,
+    children,
+    layout = "trailing",
+    title,
+    icon,
+    ctaLabel,
+    ctaProps,
+    action,
+    role = "alert",
+    ...props
+  }, ref) => {
+    const isUnder = layout === "under";
+    const cta = action ?? (ctaLabel !== void 0 && ctaLabel !== null && ctaLabel !== false ? /* @__PURE__ */ jsxRuntime.jsx(CriticalBannerCta, { ctaLabel, ctaProps }) : null);
+    const iconNode = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-alerts-critical-banner-icons", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(WarningIcon.WarningIcon, { filled: true, size: 32 }) });
+    const textColumn = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-1 break-words pt-1 text-alerts-critical-banner-content", children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-header-heading-xs", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-body-default-16px-regular", children })
+    ] });
+    if (isUnder) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          role,
+          className: cn.cn(
+            "flex w-full min-w-[260px] items-start gap-4 rounded-md bg-alerts-critical-banner-background p-6",
+            className
+          ),
+          ...props,
+          children: [
+            iconNode,
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col items-start gap-6", children: [
+              textColumn,
+              cta !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: cta })
+            ] })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role,
+        className: cn.cn(
+          "flex w-full min-w-[260px] items-center gap-6 rounded-md bg-alerts-critical-banner-background p-6",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-4", children: [
+            iconNode,
+            textColumn
+          ] }),
+          cta !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: cta })
+        ]
+      }
+    );
+  }
+);
+CriticalBanner.displayName = "CriticalBanner";
+exports.CriticalBanner = CriticalBanner;
+//# sourceMappingURL=CriticalBanner.cjs.map

package/dist/cjs/components/CriticalBanner/CriticalBanner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CriticalBanner.cjs","sources":["../../../../src/components/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button, type ButtonProps } from \"../Button/Button\";\nimport { WarningIcon } from \"../Icons/WarningIcon\";\n\n/**\n * Placement of the call-to-action relative to the message.\n *\n * - `\"trailing\"` keeps the action inline, aligned to the end of the banner.\n * - `\"under\"` stacks the action beneath the message (use when the CTA label is\n *   too long to sit comfortably on the same line).\n */\nexport type CriticalBannerLayout = \"trailing\" | \"under\";\n\nexport interface CriticalBannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Body copy describing the blocking situation. */\n  children: React.ReactNode;\n  /** Placement of the call-to-action relative to the message. @default \"trailing\" */\n  layout?: CriticalBannerLayout;\n  /** Optional bold heading shown above the body copy. */\n  title?: React.ReactNode;\n  /** Leading icon. Overrides the default filled warning icon. */\n  icon?: React.ReactNode;\n  /** Label for the built-in white call-to-action button. Ignored when `action` is set. */\n  ctaLabel?: React.ReactNode;\n  /**\n   * Props forwarded to the built-in call-to-action button (e.g. `onClick`).\n   * `asChild` is intentionally excluded — the built-in CTA renders `ctaLabel`\n   * as text; for a link or fully custom element use the `action` prop instead.\n   */\n  ctaProps?: Omit<ButtonProps, \"variant\" | \"size\" | \"children\" | \"asChild\">;\n  /** Custom action node rendered in place of the built-in call-to-action button. */\n  action?: React.ReactNode;\n}\n\nfunction CriticalBannerCta({\n  ctaLabel,\n  ctaProps,\n}: {\n  ctaLabel: React.ReactNode;\n  ctaProps?: CriticalBannerProps[\"ctaProps\"];\n}) {\n  // Only tint the label red for enabled states; when disabled, let Button keep\n  // its own `text-content-disabled` treatment instead of overriding it.\n  const isDisabled = ctaProps?.disabled ?? false;\n  return (\n    <Button\n      variant=\"white\"\n      size=\"40\"\n      {...ctaProps}\n      className={cn(\n        !isDisabled &&\n          \"text-alerts-critical-banner-background hover:text-alerts-critical-banner-background active:text-alerts-critical-banner-background\",\n        ctaProps?.className,\n      )}\n    >\n      {ctaLabel}\n    </Button>\n  );\n}\n\n/**\n * A full-width, high-priority banner reserved for situations that block or\n * significantly impact a user's ability to use the platform — account\n * suspensions, blocking payment failures, identity verification requirements,\n * or critical security notices. It sits at the very top of a page and is\n * intentionally disruptive, so use it sparingly; for non-blocking messaging use\n * {@link Alert} or {@link Banner} instead.\n *\n * Renders with `role=\"alert\"` so assistive technology conveys its urgency;\n * override `role` for a less assertive treatment when appropriate.\n *\n * @example\n * ```tsx\n * <CriticalBanner\n *   title=\"Payment failed\"\n *   layout=\"trailing\"\n *   ctaLabel=\"Update payment\"\n *   ctaProps={{ onClick: handleUpdate }}\n * >\n *   We couldn't process your last payment. Update your details to keep your account active.\n * </CriticalBanner>\n * ```\n */\nexport const CriticalBanner = React.forwardRef<HTMLDivElement, CriticalBannerProps>(\n  (\n    {\n      className,\n      children,\n      layout = \"trailing\",\n      title,\n      icon,\n      ctaLabel,\n      ctaProps,\n      action,\n      role = \"alert\",\n      ...props\n    },\n    ref,\n  ) => {\n    const isUnder = layout === \"under\";\n\n    const cta =\n      action ??\n      (ctaLabel !== undefined && ctaLabel !== null && ctaLabel !== false ? (\n        <CriticalBannerCta ctaLabel={ctaLabel} ctaProps={ctaProps} />\n      ) : null);\n\n    const iconNode = (\n      <span className=\"shrink-0 text-alerts-critical-banner-icons\" aria-hidden=\"true\">\n        {icon ?? <WarningIcon filled size={32} />}\n      </span>\n    );\n\n    const textColumn = (\n      <div className=\"flex min-w-0 flex-col gap-1 break-words pt-1 text-alerts-critical-banner-content\">\n        {title && <div className=\"typography-header-heading-xs\">{title}</div>}\n        <div className=\"typography-body-default-16px-regular\">{children}</div>\n      </div>\n    );\n\n    if (isUnder) {\n      return (\n        <div\n          ref={ref}\n          role={role}\n          className={cn(\n            \"flex w-full min-w-[260px] items-start gap-4 rounded-md bg-alerts-critical-banner-background p-6\",\n            className,\n          )}\n          {...props}\n        >\n          {iconNode}\n          <div className=\"flex min-w-0 flex-1 flex-col items-start gap-6\">\n            {textColumn}\n            {cta !== null && <div className=\"shrink-0\">{cta}</div>}\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        role={role}\n        className={cn(\n          \"flex w-full min-w-[260px] items-center gap-6 rounded-md bg-alerts-critical-banner-background p-6\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex min-w-0 flex-1 items-start gap-4\">\n          {iconNode}\n          {textColumn}\n        </div>\n        {cta !== null && <div className=\"shrink-0\">{cta}</div>}\n      </div>\n    );\n  },\n);\n\nCriticalBanner.displayName = \"CriticalBanner\";\n"],"names":["jsx","Button","cn","React","WarningIcon","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AACF,GAGG;AAGD,QAAM,aAAa,UAAU,YAAY;AACzC,SACEA,2BAAAA;AAAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,WAAWC,GAAAA;AAAAA,QACT,CAAC,cACC;AAAA,QACF,UAAU;AAAA,MAAA;AAAA,MAGX,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAyBO,MAAM,iBAAiBC,iBAAM;AAAA,EAClC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,UAAU,WAAW;AAE3B,UAAM,MACJ,WACC,aAAa,UAAa,aAAa,QAAQ,aAAa,QAC3DH,2BAAAA,IAAC,mBAAA,EAAkB,UAAoB,SAAA,CAAoB,IACzD;AAEN,UAAM,WACJA,2BAAAA,IAAC,QAAA,EAAK,WAAU,8CAA6C,eAAY,QACtE,UAAA,QAAQA,2BAAAA,IAACI,YAAAA,aAAA,EAAY,QAAM,MAAC,MAAM,IAAI,GACzC;AAGF,UAAM,aACJC,2BAAAA,KAAC,OAAA,EAAI,WAAU,oFACZ,UAAA;AAAA,MAAA,SAASL,2BAAAA,IAAC,OAAA,EAAI,WAAU,gCAAgC,UAAA,OAAM;AAAA,MAC/DA,2BAAAA,IAAC,OAAA,EAAI,WAAU,wCAAwC,SAAA,CAAS;AAAA,IAAA,GAClE;AAGF,QAAI,SAAS;AACX,aACEK,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,WAAWH,GAAAA;AAAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAED,GAAG;AAAA,UAEH,UAAA;AAAA,YAAA;AAAA,YACDG,2BAAAA,KAAC,OAAA,EAAI,WAAU,kDACZ,UAAA;AAAA,cAAA;AAAA,cACA,QAAQ,QAAQL,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,IAAA,CAAI;AAAA,YAAA,EAAA,CAClD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN;AAEA,WACEK,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAWH,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAG,2BAAAA,KAAC,OAAA,EAAI,WAAU,yCACZ,UAAA;AAAA,YAAA;AAAA,YACA;AAAA,UAAA,GACH;AAAA,UACC,QAAQ,QAAQL,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,IAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGtD;AACF;AAEA,eAAe,cAAc;;"}

package/dist/cjs/components/CyclingText/CyclingText.cjs

@@ -108,7 +108,10 @@ const CyclingText = React__namespace.forwardRef(
             {
               ref: sizingLabelRef,
               "aria-hidden": "true",
-              className: "pointer-events-none invisible inline-block select-none whitespace-nowrap leading-[inherit]",
+              className: cn.cn(
+                "pointer-events-none invisible inline-block select-none whitespace-nowrap leading-[inherit]",
+                labelClassName
+              ),
               children: sizingLabel
             }
           ),

package/dist/cjs/components/CyclingText/CyclingText.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CyclingText.cjs","sources":["../../../../src/components/CyclingText/CyclingText.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useCyclingCycle } from \"./useCyclingCycle\";\nimport { useCyclingTextTrackWidth } from \"./useCyclingTextTrackWidth\";\nimport { usePageVisibility } from \"./usePageVisibility\";\nimport { usePrefersReducedMotion } from \"./usePrefersReducedMotion\";\n\nconst DEFAULT_INTERVAL_MS = 2100;\nconst DEFAULT_TRANSITION_MS = 200;\n\nconst SLIDE_OFFSET_PX = 18;\n\n/** How the wrapper should be sized to accommodate variable-length items. */\nexport type CyclingTextSizing = \"longest\" | \"current\";\n\nexport interface CyclingTextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  /** Strings to cycle through, in order. Cycles back to the first after the last. */\n  items: readonly string[];\n  /**\n   * Milliseconds to wait after the previous transition finishes before starting the next one.\n   * @default 2100\n   */\n  intervalMs?: number;\n  /** Slide and cross-fade duration in milliseconds. @default 200 */\n  transitionMs?: number;\n  /** Direction the outgoing item slides. @default \"up\" */\n  direction?: \"up\" | \"down\";\n  /** When true, freezes on the current item — no further cycling until cleared. @default false */\n  paused?: boolean;\n  /**\n   * How the wrapper sizes itself horizontally.\n   * - `longest` reserves space for the longest item — no width jitter as items cycle.\n   * - `current` shrinks/grows with each item, animating width between cycles.\n   * @default \"longest\"\n   */\n  sizing?: CyclingTextSizing;\n  /**\n   * When `true`, updates are exposed to assistive technologies via `aria-live=\"polite\"`.\n   * Leave `false` for decorative or frequently changing copy so screen readers are not interrupted on every cycle.\n   * @default false\n   */\n  announceChanges?: boolean;\n  /**\n   * Class applied to each visible label span (current + incoming). Use this for\n   * effects that have to sit on the text element itself, e.g. `background-clip: text`.\n   */\n  labelClassName?: string;\n  /**\n   * Called with the index of the settled, fully-visible item — once on mount and\n   * again whenever it changes (after each transition completes). Lets a parent\n   * stay in lockstep with what is on screen (e.g. to act on the item the user is\n   * currently looking at) without running a second, drifting timer of its own.\n   */\n  onActiveIndexChange?: (index: number) => void;\n}\n\n/**\n * Cycles through a list of strings with a slide-in/slide-out animation. Lives\n * inline so it can sit inside divs, spans, buttons, or as a fake placeholder\n * overlay.\n *\n * @example\n * ```tsx\n * <CyclingText items={[\"Thinking\", \"Reading messages\", \"Drafting reply\"]} />\n * ```\n */\nexport const CyclingText = React.forwardRef<HTMLSpanElement, CyclingTextProps>(\n  (\n    {\n      items,\n      intervalMs = DEFAULT_INTERVAL_MS,\n      transitionMs = DEFAULT_TRANSITION_MS,\n      direction = \"up\",\n      paused = false,\n      sizing = \"longest\",\n      className,\n      labelClassName,\n      announceChanges = false,\n      onActiveIndexChange,\n      ...rest\n    },\n    ref,\n  ) => {\n    const docVisible = usePageVisibility();\n    const reducedMotion = usePrefersReducedMotion();\n    const { sizingLabelRef, trackWidth } = useCyclingTextTrackWidth();\n    const {\n      cycle,\n      currentIndex,\n      currentLabel,\n      incomingLabel,\n      sizingLabel,\n      onOutgoingTransitionEnd,\n    } = useCyclingCycle(items, sizing, intervalMs, paused, docVisible, transitionMs);\n\n    const itemCount = items.length;\n\n    // Notify the parent of the settled active index without re-subscribing when\n    // an inline callback identity changes each render — the latest is always\n    // read from the ref.\n    const onActiveIndexChangeRef = React.useRef(onActiveIndexChange);\n    React.useEffect(() => {\n      onActiveIndexChangeRef.current = onActiveIndexChange;\n    }, [onActiveIndexChange]);\n    React.useEffect(() => {\n      onActiveIndexChangeRef.current?.(currentIndex);\n    }, [currentIndex]);\n\n    const outgoingMotionStyle = React.useMemo((): React.CSSProperties => {\n      const durMs = reducedMotion ? 0 : transitionMs;\n      const exiting = cycle.transitioning;\n      const yExit = direction === \"up\" ? -SLIDE_OFFSET_PX : SLIDE_OFFSET_PX;\n      return {\n        opacity: exiting ? 0 : 1,\n        transform: exiting ? `translate3d(0, ${yExit}px, 0)` : \"translate3d(0, 0, 0)\",\n        transition:\n          exiting && durMs > 0\n            ? `opacity ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1)`\n            : \"none\",\n      };\n    }, [cycle.transitioning, direction, transitionMs, reducedMotion]);\n\n    const incomingMotionStyle = React.useMemo((): React.CSSProperties => {\n      const durMs = reducedMotion ? 0 : transitionMs;\n      const entered = cycle.incomingEntered;\n      const yEnter = direction === \"up\" ? SLIDE_OFFSET_PX : -SLIDE_OFFSET_PX;\n      return {\n        opacity: entered ? 1 : 0,\n        transform: entered ? \"translate3d(0, 0, 0)\" : `translate3d(0, ${yEnter}px, 0)`,\n        transition:\n          durMs > 0\n            ? `opacity ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1)`\n            : \"none\",\n      };\n    }, [cycle.incomingEntered, direction, transitionMs, reducedMotion]);\n\n    if (itemCount === 0) {\n      return null;\n    }\n\n    const wrapperStyle = {\n      ...(trackWidth !== null ? { width: `${trackWidth}px` } : {}),\n      // paddingTop: SLIDE_OFFSET_PX,\n    } as React.CSSProperties;\n\n    const showIncoming = incomingLabel !== null && cycle.transitioning;\n\n    return (\n      <span\n        ref={ref}\n        data-testid=\"cycling-text\"\n        data-paused={paused ? \"true\" : undefined}\n        className={cn(\n          \"relative inline-flex items-center overflow-hidden align-middle leading-[inherit]\",\n          \"motion-safe:transition-[width] motion-safe:duration-300 motion-safe:ease-out\",\n          className,\n        )}\n        style={wrapperStyle}\n        {...rest}\n      >\n        <span\n          ref={sizingLabelRef}\n          aria-hidden=\"true\"\n          className=\"pointer-events-none invisible inline-block select-none whitespace-nowrap leading-[inherit]\"\n        >\n          {sizingLabel}\n        </span>\n\n        <span\n          data-layer=\"current\"\n          aria-live={announceChanges ? \"polite\" : undefined}\n          aria-atomic={announceChanges ? true : undefined}\n          data-state={cycle.transitioning ? \"exit\" : \"idle\"}\n          onTransitionEnd={onOutgoingTransitionEnd}\n          className={cn(\n            \"absolute inset-0 flex items-center whitespace-nowrap leading-[inherit]\",\n            labelClassName,\n          )}\n          style={outgoingMotionStyle}\n        >\n          {currentLabel}\n        </span>\n\n        {showIncoming ? (\n          <span\n            aria-hidden=\"true\"\n            data-layer=\"incoming\"\n            data-state={cycle.incomingEntered ? \"idle\" : \"enter\"}\n            className={cn(\n              \"absolute inset-0 flex items-center whitespace-nowrap leading-[inherit]\",\n              labelClassName,\n            )}\n            style={incomingMotionStyle}\n          >\n            {incomingLabel}\n          </span>\n        ) : null}\n      </span>\n    );\n  },\n);\n\nCyclingText.displayName = \"CyclingText\";\n"],"names":["React","usePageVisibility","usePrefersReducedMotion","useCyclingTextTrackWidth","useCyclingCycle","jsxs","cn","jsx"],"mappings":"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"}
+{"version":3,"file":"CyclingText.cjs","sources":["../../../../src/components/CyclingText/CyclingText.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useCyclingCycle } from \"./useCyclingCycle\";\nimport { useCyclingTextTrackWidth } from \"./useCyclingTextTrackWidth\";\nimport { usePageVisibility } from \"./usePageVisibility\";\nimport { usePrefersReducedMotion } from \"./usePrefersReducedMotion\";\n\nconst DEFAULT_INTERVAL_MS = 2100;\nconst DEFAULT_TRANSITION_MS = 200;\n\nconst SLIDE_OFFSET_PX = 18;\n\n/** How the wrapper should be sized to accommodate variable-length items. */\nexport type CyclingTextSizing = \"longest\" | \"current\";\n\nexport interface CyclingTextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  /** Strings to cycle through, in order. Cycles back to the first after the last. */\n  items: readonly string[];\n  /**\n   * Milliseconds to wait after the previous transition finishes before starting the next one.\n   * @default 2100\n   */\n  intervalMs?: number;\n  /** Slide and cross-fade duration in milliseconds. @default 200 */\n  transitionMs?: number;\n  /** Direction the outgoing item slides. @default \"up\" */\n  direction?: \"up\" | \"down\";\n  /** When true, freezes on the current item — no further cycling until cleared. @default false */\n  paused?: boolean;\n  /**\n   * How the wrapper sizes itself horizontally.\n   * - `longest` reserves space for the longest item — no width jitter as items cycle.\n   * - `current` shrinks/grows with each item, animating width between cycles.\n   * @default \"longest\"\n   */\n  sizing?: CyclingTextSizing;\n  /**\n   * When `true`, updates are exposed to assistive technologies via `aria-live=\"polite\"`.\n   * Leave `false` for decorative or frequently changing copy so screen readers are not interrupted on every cycle.\n   * @default false\n   */\n  announceChanges?: boolean;\n  /**\n   * Class applied to each visible label span (current + incoming). Use this for\n   * effects that have to sit on the text element itself, e.g. `background-clip: text`.\n   */\n  labelClassName?: string;\n  /**\n   * Called with the index of the settled, fully-visible item — once on mount and\n   * again whenever it changes (after each transition completes). Lets a parent\n   * stay in lockstep with what is on screen (e.g. to act on the item the user is\n   * currently looking at) without running a second, drifting timer of its own.\n   */\n  onActiveIndexChange?: (index: number) => void;\n}\n\n/**\n * Cycles through a list of strings with a slide-in/slide-out animation. Lives\n * inline so it can sit inside divs, spans, buttons, or as a fake placeholder\n * overlay.\n *\n * @example\n * ```tsx\n * <CyclingText items={[\"Thinking\", \"Reading messages\", \"Drafting reply\"]} />\n * ```\n */\nexport const CyclingText = React.forwardRef<HTMLSpanElement, CyclingTextProps>(\n  (\n    {\n      items,\n      intervalMs = DEFAULT_INTERVAL_MS,\n      transitionMs = DEFAULT_TRANSITION_MS,\n      direction = \"up\",\n      paused = false,\n      sizing = \"longest\",\n      className,\n      labelClassName,\n      announceChanges = false,\n      onActiveIndexChange,\n      ...rest\n    },\n    ref,\n  ) => {\n    const docVisible = usePageVisibility();\n    const reducedMotion = usePrefersReducedMotion();\n    const { sizingLabelRef, trackWidth } = useCyclingTextTrackWidth();\n    const {\n      cycle,\n      currentIndex,\n      currentLabel,\n      incomingLabel,\n      sizingLabel,\n      onOutgoingTransitionEnd,\n    } = useCyclingCycle(items, sizing, intervalMs, paused, docVisible, transitionMs);\n\n    const itemCount = items.length;\n\n    // Notify the parent of the settled active index without re-subscribing when\n    // an inline callback identity changes each render — the latest is always\n    // read from the ref.\n    const onActiveIndexChangeRef = React.useRef(onActiveIndexChange);\n    React.useEffect(() => {\n      onActiveIndexChangeRef.current = onActiveIndexChange;\n    }, [onActiveIndexChange]);\n    React.useEffect(() => {\n      onActiveIndexChangeRef.current?.(currentIndex);\n    }, [currentIndex]);\n\n    const outgoingMotionStyle = React.useMemo((): React.CSSProperties => {\n      const durMs = reducedMotion ? 0 : transitionMs;\n      const exiting = cycle.transitioning;\n      const yExit = direction === \"up\" ? -SLIDE_OFFSET_PX : SLIDE_OFFSET_PX;\n      return {\n        opacity: exiting ? 0 : 1,\n        transform: exiting ? `translate3d(0, ${yExit}px, 0)` : \"translate3d(0, 0, 0)\",\n        transition:\n          exiting && durMs > 0\n            ? `opacity ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1)`\n            : \"none\",\n      };\n    }, [cycle.transitioning, direction, transitionMs, reducedMotion]);\n\n    const incomingMotionStyle = React.useMemo((): React.CSSProperties => {\n      const durMs = reducedMotion ? 0 : transitionMs;\n      const entered = cycle.incomingEntered;\n      const yEnter = direction === \"up\" ? SLIDE_OFFSET_PX : -SLIDE_OFFSET_PX;\n      return {\n        opacity: entered ? 1 : 0,\n        transform: entered ? \"translate3d(0, 0, 0)\" : `translate3d(0, ${yEnter}px, 0)`,\n        transition:\n          durMs > 0\n            ? `opacity ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1)`\n            : \"none\",\n      };\n    }, [cycle.incomingEntered, direction, transitionMs, reducedMotion]);\n\n    if (itemCount === 0) {\n      return null;\n    }\n\n    const wrapperStyle = {\n      ...(trackWidth !== null ? { width: `${trackWidth}px` } : {}),\n      // paddingTop: SLIDE_OFFSET_PX,\n    } as React.CSSProperties;\n\n    const showIncoming = incomingLabel !== null && cycle.transitioning;\n\n    return (\n      <span\n        ref={ref}\n        data-testid=\"cycling-text\"\n        data-paused={paused ? \"true\" : undefined}\n        className={cn(\n          \"relative inline-flex items-center overflow-hidden align-middle leading-[inherit]\",\n          \"motion-safe:transition-[width] motion-safe:duration-300 motion-safe:ease-out\",\n          className,\n        )}\n        style={wrapperStyle}\n        {...rest}\n      >\n        <span\n          ref={sizingLabelRef}\n          aria-hidden=\"true\"\n          className={cn(\n            \"pointer-events-none invisible inline-block select-none whitespace-nowrap leading-[inherit]\",\n            labelClassName,\n          )}\n        >\n          {sizingLabel}\n        </span>\n\n        <span\n          data-layer=\"current\"\n          aria-live={announceChanges ? \"polite\" : undefined}\n          aria-atomic={announceChanges ? true : undefined}\n          data-state={cycle.transitioning ? \"exit\" : \"idle\"}\n          onTransitionEnd={onOutgoingTransitionEnd}\n          className={cn(\n            \"absolute inset-0 flex items-center whitespace-nowrap leading-[inherit]\",\n            labelClassName,\n          )}\n          style={outgoingMotionStyle}\n        >\n          {currentLabel}\n        </span>\n\n        {showIncoming ? (\n          <span\n            aria-hidden=\"true\"\n            data-layer=\"incoming\"\n            data-state={cycle.incomingEntered ? \"idle\" : \"enter\"}\n            className={cn(\n              \"absolute inset-0 flex items-center whitespace-nowrap leading-[inherit]\",\n              labelClassName,\n            )}\n            style={incomingMotionStyle}\n          >\n            {incomingLabel}\n          </span>\n        ) : null}\n      </span>\n    );\n  },\n);\n\nCyclingText.displayName = \"CyclingText\";\n"],"names":["React","usePageVisibility","usePrefersReducedMotion","useCyclingTextTrackWidth","useCyclingCycle","jsxs","cn","jsx"],"mappings":"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"}

package/dist/cjs/components/PhoneField/PhoneField.cjs

@@ -44,7 +44,7 @@ const PREFIX_TYPOGRAPHY = {
 };
 function getContainerClassName(size, error, disabled) {
   return cn.cn(
-    "relative flex items-center gap-2 overflow-hidden rounded-sm border bg-inputs-inputs-primary has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors",
+    "relative flex items-center gap-2 overflow-hidden rounded-sm border bg-inputs-inputs-primary after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] has-focus-visible:outline-none has-focus-visible:after:shadow-focus-ring motion-safe:transition-colors",
     CONTAINER_PADDING_X[size],
     CONTAINER_HEIGHT[size],
     error ? "border-error-content" : "border-border-primary",

package/dist/cjs/components/PhoneField/PhoneField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneField.cjs","sources":["../../../../src/components/PhoneField/PhoneField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Phone field height in pixels. */\nexport type PhoneFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface PhoneFieldProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"prefix\"> {\n  /** Label text displayed above the input. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the phone field in pixels. @default \"48\" */\n  size?: PhoneFieldSize;\n  /** Whether the field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the input. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Dial code of the selected country, shown before the number (e.g. `\"+39\"`). */\n  dialCode?: React.ReactNode;\n  /** Flag of the selected country, rendered in the country selector (e.g. an image or flag icon). */\n  flag?: React.ReactNode;\n  /** Fired when the country selector (flag + chevron) is activated. Open the country picker here. */\n  onCountrySelect?: () => void;\n  /** Accessible name for the country selector button. @default \"Select country\" */\n  countryButtonLabel?: string;\n  /** Whether the field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n}\n\nconst CONTAINER_HEIGHT: Record<PhoneFieldSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst CONTAINER_PADDING_X: Record<PhoneFieldSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst INPUT_TYPOGRAPHY: Record<PhoneFieldSize, string> = {\n  \"48\": \"typography-body-default-16px-regular autofill-body-lg\",\n  \"40\": \"typography-body-default-16px-regular autofill-body-lg\",\n  \"32\": \"typography-body-small-14px-regular autofill-body-md\",\n};\n\nconst PREFIX_TYPOGRAPHY: Record<PhoneFieldSize, string> = {\n  \"48\": \"typography-body-default-16px-regular\",\n  \"40\": \"typography-body-default-16px-regular\",\n  \"32\": \"typography-body-small-14px-regular\",\n};\n\nfunction getContainerClassName(size: PhoneFieldSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"relative flex items-center gap-2 overflow-hidden rounded-sm border bg-inputs-inputs-primary has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors\",\n    CONTAINER_PADDING_X[size],\n    CONTAINER_HEIGHT[size],\n    error ? \"border-error-content\" : \"border-border-primary\",\n    !disabled && !error && \"hover:border-neutral-alphas-400\",\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"PhoneField: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\nfunction PhoneFieldHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-description-12px-regular pt-2\",\n        error ? \"text-error-content\" : \"text-content-tertiary\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\n/**\n * A phone number input with a country selector (flag + chevron), a fixed dial\n * code prefix, and a `tel` input. The country picker itself is owned by the\n * consumer: pass the selected country's `flag` and `dialCode`, and open your\n * picker from `onCountrySelect`.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <PhoneField\n *   label=\"Phone number\"\n *   flag={<img src={italyFlag} alt=\"\" />}\n *   dialCode=\"+39\"\n *   onCountrySelect={openCountryPicker}\n *   value={number}\n *   onChange={(e) => setNumber(e.target.value)}\n * />\n * ```\n */\nexport const PhoneField = React.forwardRef<HTMLInputElement, PhoneFieldProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      dialCode,\n      flag,\n      onCountrySelect,\n      countryButtonLabel = \"Select country\",\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      type = \"tel\",\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const dialCodeId = `${inputId}-dial-code`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    const describedBy =\n      [dialCode != null ? dialCodeId : null, bottomText ? helperTextId : null]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n\n    const innerRef = React.useRef<HTMLInputElement>(null);\n    const setRefs = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        innerRef.current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) (ref as React.RefObject<HTMLInputElement | null>).current = node;\n      },\n      [ref],\n    );\n\n    const handleContainerMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      const target = event.target as HTMLElement;\n      if (target === innerRef.current) return;\n      if (target.closest(\"[data-pf-interactive]\")) return;\n      event.preventDefault();\n      innerRef.current?.focus();\n    };\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-description-12px-semibold pb-2 text-content-primary\"\n          >\n            {label}\n          </label>\n        )}\n\n        {/* biome-ignore lint/a11y/noStaticElementInteractions: focus bridge delegates pointer clicks on the padding to the input */}\n        <div\n          className={getContainerClassName(size, error, disabled)}\n          onMouseDown={handleContainerMouseDown}\n        >\n          <button\n            type=\"button\"\n            data-pf-interactive=\"\"\n            onClick={onCountrySelect}\n            disabled={disabled}\n            aria-label={countryButtonLabel}\n            className=\"flex shrink-0 items-center gap-1 rounded-2xs focus-visible:shadow-focus-ring focus-visible:outline-none disabled:cursor-not-allowed\"\n          >\n            {flag != null && (\n              <span className=\"flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-full\">\n                {flag}\n              </span>\n            )}\n            <ChevronDownIcon size={16} className=\"shrink-0 text-content-secondary\" />\n          </button>\n\n          {dialCode != null && (\n            <span\n              id={dialCodeId}\n              className={cn(\n                \"shrink-0 select-none whitespace-nowrap text-content-primary\",\n                PREFIX_TYPOGRAPHY[size],\n              )}\n            >\n              {dialCode}\n            </span>\n          )}\n\n          <input\n            ref={setRefs}\n            id={inputId}\n            type={type}\n            inputMode=\"tel\"\n            disabled={disabled}\n            aria-describedby={describedBy}\n            aria-invalid={error || undefined}\n            className={cn(\n              \"h-full min-w-0 flex-1 bg-transparent text-content-primary no-underline placeholder:text-content-tertiary focus:outline-none disabled:cursor-not-allowed\",\n              INPUT_TYPOGRAPHY[size],\n            )}\n            {...props}\n          />\n        </div>\n\n        {bottomText && (\n          <PhoneFieldHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </PhoneFieldHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nPhoneField.displayName = \"PhoneField\";\n"],"names":["cn","jsx","React","jsxs","ChevronDownIcon"],"mappings":"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"}
+{"version":3,"file":"PhoneField.cjs","sources":["../../../../src/components/PhoneField/PhoneField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Phone field height in pixels. */\nexport type PhoneFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface PhoneFieldProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"prefix\"> {\n  /** Label text displayed above the input. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the phone field in pixels. @default \"48\" */\n  size?: PhoneFieldSize;\n  /** Whether the field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the input. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Dial code of the selected country, shown before the number (e.g. `\"+39\"`). */\n  dialCode?: React.ReactNode;\n  /** Flag of the selected country, rendered in the country selector (e.g. an image or flag icon). */\n  flag?: React.ReactNode;\n  /** Fired when the country selector (flag + chevron) is activated. Open the country picker here. */\n  onCountrySelect?: () => void;\n  /** Accessible name for the country selector button. @default \"Select country\" */\n  countryButtonLabel?: string;\n  /** Whether the field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n}\n\nconst CONTAINER_HEIGHT: Record<PhoneFieldSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst CONTAINER_PADDING_X: Record<PhoneFieldSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst INPUT_TYPOGRAPHY: Record<PhoneFieldSize, string> = {\n  \"48\": \"typography-body-default-16px-regular autofill-body-lg\",\n  \"40\": \"typography-body-default-16px-regular autofill-body-lg\",\n  \"32\": \"typography-body-small-14px-regular autofill-body-md\",\n};\n\nconst PREFIX_TYPOGRAPHY: Record<PhoneFieldSize, string> = {\n  \"48\": \"typography-body-default-16px-regular\",\n  \"40\": \"typography-body-default-16px-regular\",\n  \"32\": \"typography-body-small-14px-regular\",\n};\n\nfunction getContainerClassName(size: PhoneFieldSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"relative flex items-center gap-2 overflow-hidden rounded-sm border bg-inputs-inputs-primary after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] has-focus-visible:outline-none has-focus-visible:after:shadow-focus-ring motion-safe:transition-colors\",\n    CONTAINER_PADDING_X[size],\n    CONTAINER_HEIGHT[size],\n    error ? \"border-error-content\" : \"border-border-primary\",\n    !disabled && !error && \"hover:border-neutral-alphas-400\",\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"PhoneField: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\nfunction PhoneFieldHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-description-12px-regular pt-2\",\n        error ? \"text-error-content\" : \"text-content-tertiary\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\n/**\n * A phone number input with a country selector (flag + chevron), a fixed dial\n * code prefix, and a `tel` input. The country picker itself is owned by the\n * consumer: pass the selected country's `flag` and `dialCode`, and open your\n * picker from `onCountrySelect`.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <PhoneField\n *   label=\"Phone number\"\n *   flag={<img src={italyFlag} alt=\"\" />}\n *   dialCode=\"+39\"\n *   onCountrySelect={openCountryPicker}\n *   value={number}\n *   onChange={(e) => setNumber(e.target.value)}\n * />\n * ```\n */\nexport const PhoneField = React.forwardRef<HTMLInputElement, PhoneFieldProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      dialCode,\n      flag,\n      onCountrySelect,\n      countryButtonLabel = \"Select country\",\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      type = \"tel\",\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const dialCodeId = `${inputId}-dial-code`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    const describedBy =\n      [dialCode != null ? dialCodeId : null, bottomText ? helperTextId : null]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n\n    const innerRef = React.useRef<HTMLInputElement>(null);\n    const setRefs = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        innerRef.current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) (ref as React.RefObject<HTMLInputElement | null>).current = node;\n      },\n      [ref],\n    );\n\n    const handleContainerMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      const target = event.target as HTMLElement;\n      if (target === innerRef.current) return;\n      if (target.closest(\"[data-pf-interactive]\")) return;\n      event.preventDefault();\n      innerRef.current?.focus();\n    };\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-description-12px-semibold pb-2 text-content-primary\"\n          >\n            {label}\n          </label>\n        )}\n\n        {/* biome-ignore lint/a11y/noStaticElementInteractions: focus bridge delegates pointer clicks on the padding to the input */}\n        <div\n          className={getContainerClassName(size, error, disabled)}\n          onMouseDown={handleContainerMouseDown}\n        >\n          <button\n            type=\"button\"\n            data-pf-interactive=\"\"\n            onClick={onCountrySelect}\n            disabled={disabled}\n            aria-label={countryButtonLabel}\n            className=\"flex shrink-0 items-center gap-1 rounded-2xs focus-visible:shadow-focus-ring focus-visible:outline-none disabled:cursor-not-allowed\"\n          >\n            {flag != null && (\n              <span className=\"flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-full\">\n                {flag}\n              </span>\n            )}\n            <ChevronDownIcon size={16} className=\"shrink-0 text-content-secondary\" />\n          </button>\n\n          {dialCode != null && (\n            <span\n              id={dialCodeId}\n              className={cn(\n                \"shrink-0 select-none whitespace-nowrap text-content-primary\",\n                PREFIX_TYPOGRAPHY[size],\n              )}\n            >\n              {dialCode}\n            </span>\n          )}\n\n          <input\n            ref={setRefs}\n            id={inputId}\n            type={type}\n            inputMode=\"tel\"\n            disabled={disabled}\n            aria-describedby={describedBy}\n            aria-invalid={error || undefined}\n            className={cn(\n              \"h-full min-w-0 flex-1 bg-transparent text-content-primary no-underline placeholder:text-content-tertiary focus:outline-none disabled:cursor-not-allowed\",\n              INPUT_TYPOGRAPHY[size],\n            )}\n            {...props}\n          />\n        </div>\n\n        {bottomText && (\n          <PhoneFieldHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </PhoneFieldHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nPhoneField.displayName = \"PhoneField\";\n"],"names":["cn","jsx","React","jsxs","ChevronDownIcon"],"mappings":"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"}

package/dist/cjs/components/TextArea/TextArea.cjs

@@ -51,7 +51,7 @@ const CLEAR_BUTTON_RIGHT = {
 };
 function getContainerClassName(size, error, disabled) {
   return cn.cn(
-    "relative rounded-sm border bg-inputs-inputs-primary has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors",
+    "relative rounded-sm border bg-inputs-inputs-primary after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] has-focus-visible:outline-none has-focus-visible:after:shadow-focus-ring motion-safe:transition-colors",
     error ? "border-error-content" : "border-border-primary",
     !disabled && !error && "hover:border-neutral-alphas-400",
     CONTAINER_MIN_HEIGHT[size],