@alfadocs/ui-kit 0.1.2 → 0.1.3

package/dist/_chunks/{floating-action-button-DjRhFQdd.js → floating-action-button-Cnw-f6AG.js}

@@ -64,9 +64,9 @@ const x = g(
 ), h = u((t, o) => {
   const {
     variant: i,
-    size: r,
+    size: n,
     extended: s,
-    position: n,
+    position: r,
     className: l,
     icon: e,
     children: c,
@@ -78,7 +78,8 @@ const x = g(
     {
       ref: o,
       type: f ?? "button",
-      className: x({ variant: i, size: r, extended: s, position: n, className: l }),
+      className: x({ variant: i, size: n, extended: s, position: r, className: l }),
+      "data-component": "floating-action-button",
       ...a,
       "aria-label": p,
       children: [
@@ -92,4 +93,4 @@ h.displayName = "FloatingActionButton";
 export {
   h as F
 };
-//# sourceMappingURL=floating-action-button-DjRhFQdd.js.map
+//# sourceMappingURL=floating-action-button-Cnw-f6AG.js.map

package/dist/_chunks/{floating-action-button-DjRhFQdd.js.map → floating-action-button-Cnw-f6AG.js.map}

@@ -1 +1 @@
-{"version":3,"file":"floating-action-button-DjRhFQdd.js","sources":["../../src/components/floating-action-button/floating-action-button.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\n\nconst fabVariants = cva(\n  [\n    // `relative` anchors the `::before` hit-target expansion on `sm`.\n    'ds:relative ds:inline-flex ds:items-center ds:justify-center',\n    'ds:font-medium ds:whitespace-nowrap',\n    'ds:rounded-full',\n    'ds:shadow-[var(--shadow-lg)] ds:hover:shadow-[var(--shadow-xl)] ds:active:shadow-[var(--shadow-md)]',\n    'ds:transition-[box-shadow,background-color,transform]',\n    'ds:duration-[var(--animation-duration)]',\n    'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n    'ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n    // Under Windows High Contrast Mode the `shadow-*` affordance is stripped.\n    // Repaint a solid edge + swap the focus ring to CanvasText so the FAB\n    // remains identifiable and its focus state stays visible.\n    'ds:forced-colors:border ds:forced-colors:border-[ButtonBorder] ds:forced-colors:focus-visible:outline-[CanvasText]',\n    'ds:disabled:opacity-50 ds:disabled:cursor-not-allowed ds:disabled:shadow-[var(--shadow-md)]',\n    'ds:motion-reduce:transition-none',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        primary:\n          'ds:bg-primary ds:text-primary-foreground ds:hover:bg-primary-hover',\n        secondary:\n          'ds:bg-accent ds:text-accent-foreground ds:hover:bg-accent-hover',\n      },\n      size: {\n        // `sm` is 40x40 which sits below the 44/48 px WCAG 2.5.5 target.\n        // Mirror Button's pseudo-expansion pattern: below the `sm:` (640 px)\n        // breakpoint, a `::before` rectangle enlarges the hit area to\n        // `--min-target-size` (44 default, 48 accessible). Above the\n        // breakpoint (desktop / trackpad), the physical 40 px circle is\n        // enough — the pseudo hides.\n        sm: 'ds:h-10 ds:w-10 ds:text-[length:var(--font-size-sm)] ds:[&_svg]:size-5 ds:before:absolute ds:before:inset-x-[calc((var(--min-target-size)-100%)/-2)] ds:before:inset-y-[calc((var(--min-target-size)-100%)/-2)] ds:before:content-[\"\"] ds:sm:before:hidden',\n        md: 'ds:h-14 ds:w-14 ds:text-[length:var(--font-size-base)] ds:[&_svg]:size-6',\n        lg: 'ds:h-16 ds:w-16 ds:text-[length:var(--font-size-lg)] ds:[&_svg]:size-7',\n      },\n      extended: {\n        true: 'ds:w-auto ds:gap-[var(--spacing-sm)]',\n        false: '',\n      },\n      position: {\n        'bottom-end':\n          'ds:fixed ds:z-[var(--z-fixed)] ds:bottom-[calc(var(--spacing-lg)+env(safe-area-inset-bottom,0px))] ds:end-[var(--spacing-lg)]',\n        'bottom-start':\n          'ds:fixed ds:z-[var(--z-fixed)] ds:bottom-[calc(var(--spacing-lg)+env(safe-area-inset-bottom,0px))] ds:start-[var(--spacing-lg)]',\n        'top-end':\n          'ds:fixed ds:z-[var(--z-fixed)] ds:top-[calc(var(--spacing-lg)+env(safe-area-inset-top,0px))] ds:end-[var(--spacing-lg)]',\n        'top-start':\n          'ds:fixed ds:z-[var(--z-fixed)] ds:top-[calc(var(--spacing-lg)+env(safe-area-inset-top,0px))] ds:start-[var(--spacing-lg)]',\n        static: '',\n      },\n    },\n    compoundVariants: [\n      { extended: true, size: 'sm', class: 'ds:ps-3 ds:pe-4' },\n      { extended: true, size: 'md', class: 'ds:ps-4 ds:pe-5' },\n      { extended: true, size: 'lg', class: 'ds:ps-5 ds:pe-6' },\n    ],\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n      extended: false,\n      position: 'bottom-end',\n    },\n  },\n);\n\ntype FabBaseProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  VariantProps<typeof fabVariants>;\n\ninterface CircularFabProps extends FabBaseProps {\n  extended?: false;\n  icon: ReactNode;\n  'aria-label': string;\n  children?: never;\n}\n\ninterface ExtendedFabProps extends FabBaseProps {\n  extended: true;\n  icon?: ReactNode;\n  children: ReactNode;\n}\n\nexport type FloatingActionButtonProps = CircularFabProps | ExtendedFabProps;\n\nexport const FloatingActionButton = forwardRef<\n  HTMLButtonElement,\n  FloatingActionButtonProps\n>((props, ref) => {\n  const {\n    variant,\n    size,\n    extended,\n    position,\n    className,\n    icon,\n    children,\n    type,\n    ...rest\n  } = props;\n  const { t } = useTranslation();\n\n  const ariaLabel =\n    rest['aria-label'] ??\n    (!extended ? t('ui.common.add', { defaultValue: 'Add' }) : undefined);\n\n  return (\n    <button\n      ref={ref}\n      type={type ?? 'button'}\n      className={fabVariants({ variant, size, extended, position, className })}\n      {...rest}\n      aria-label={ariaLabel}\n    >\n      {icon ? (\n        <span aria-hidden=\"true\" className=\"ds:inline-flex ds:items-center ds:justify-center\">\n          {icon}\n        </span>\n      ) : null}\n      {extended ? <span className=\"ds:inline-flex\">{children}</span> : null}\n    </button>\n  );\n});\n\nFloatingActionButton.displayName = 'FloatingActionButton';\n"],"names":["fabVariants","cva","FloatingActionButton","forwardRef","props","ref","variant","size","extended","position","className","icon","children","type","rest","t","useTranslation","ariaLabel","jsxs","jsx"],"mappings":";;;;AAQA,MAAMA,IAAcC;AAAA,EAClB;AAAA;AAAA,IAEE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EACA,KAAK,GAAG;AAAA,EACV;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,MAAA;AAAA,MAEJ,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,MAET,UAAU;AAAA,QACR,cACE;AAAA,QACF,gBACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,IAEF,kBAAkB;AAAA,MAChB,EAAE,UAAU,IAAM,MAAM,MAAM,OAAO,kBAAA;AAAA,MACrC,EAAE,UAAU,IAAM,MAAM,MAAM,OAAO,kBAAA;AAAA,MACrC,EAAE,UAAU,IAAM,MAAM,MAAM,OAAO,kBAAA;AAAA,IAAkB;AAAA,IAEzD,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ,GAoBaC,IAAuBC,EAGlC,CAACC,GAAOC,MAAQ;AAChB,QAAM;AAAA,IACJ,SAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDV,GACE,EAAE,GAAAW,EAAA,IAAMC,EAAA,GAERC,IACJH,EAAK,YAAY,MACfN,IAAyD,SAA9CO,EAAE,iBAAiB,EAAE,cAAc,MAAA,CAAO;AAEzD,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAb;AAAA,MACA,MAAMQ,KAAQ;AAAA,MACd,WAAWb,EAAY,EAAE,SAAAM,GAAS,MAAAC,GAAM,UAAAC,GAAU,UAAAC,GAAU,WAAAC,GAAW;AAAA,MACtE,GAAGI;AAAA,MACJ,cAAYG;AAAA,MAEX,UAAA;AAAA,QAAAN,sBACE,QAAA,EAAK,eAAY,QAAO,WAAU,oDAChC,aACH,IACE;AAAA,QACHH,IAAW,gBAAAW,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAP,GAAS,IAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvE,CAAC;AAEDV,EAAqB,cAAc;"}
+{"version":3,"file":"floating-action-button-Cnw-f6AG.js","sources":["../../src/components/floating-action-button/floating-action-button.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\n\nconst fabVariants = cva(\n  [\n    // `relative` anchors the `::before` hit-target expansion on `sm`.\n    'ds:relative ds:inline-flex ds:items-center ds:justify-center',\n    'ds:font-medium ds:whitespace-nowrap',\n    'ds:rounded-full',\n    'ds:shadow-[var(--shadow-lg)] ds:hover:shadow-[var(--shadow-xl)] ds:active:shadow-[var(--shadow-md)]',\n    'ds:transition-[box-shadow,background-color,transform]',\n    'ds:duration-[var(--animation-duration)]',\n    'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n    'ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n    // Under Windows High Contrast Mode the `shadow-*` affordance is stripped.\n    // Repaint a solid edge + swap the focus ring to CanvasText so the FAB\n    // remains identifiable and its focus state stays visible.\n    'ds:forced-colors:border ds:forced-colors:border-[ButtonBorder] ds:forced-colors:focus-visible:outline-[CanvasText]',\n    'ds:disabled:opacity-50 ds:disabled:cursor-not-allowed ds:disabled:shadow-[var(--shadow-md)]',\n    'ds:motion-reduce:transition-none',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        primary:\n          'ds:bg-primary ds:text-primary-foreground ds:hover:bg-primary-hover',\n        secondary:\n          'ds:bg-accent ds:text-accent-foreground ds:hover:bg-accent-hover',\n      },\n      size: {\n        // `sm` is 40x40 which sits below the 44/48 px WCAG 2.5.5 target.\n        // Mirror Button's pseudo-expansion pattern: below the `sm:` (640 px)\n        // breakpoint, a `::before` rectangle enlarges the hit area to\n        // `--min-target-size` (44 default, 48 accessible). Above the\n        // breakpoint (desktop / trackpad), the physical 40 px circle is\n        // enough — the pseudo hides.\n        sm: 'ds:h-10 ds:w-10 ds:text-[length:var(--font-size-sm)] ds:[&_svg]:size-5 ds:before:absolute ds:before:inset-x-[calc((var(--min-target-size)-100%)/-2)] ds:before:inset-y-[calc((var(--min-target-size)-100%)/-2)] ds:before:content-[\"\"] ds:sm:before:hidden',\n        md: 'ds:h-14 ds:w-14 ds:text-[length:var(--font-size-base)] ds:[&_svg]:size-6',\n        lg: 'ds:h-16 ds:w-16 ds:text-[length:var(--font-size-lg)] ds:[&_svg]:size-7',\n      },\n      extended: {\n        true: 'ds:w-auto ds:gap-[var(--spacing-sm)]',\n        false: '',\n      },\n      position: {\n        'bottom-end':\n          'ds:fixed ds:z-[var(--z-fixed)] ds:bottom-[calc(var(--spacing-lg)+env(safe-area-inset-bottom,0px))] ds:end-[var(--spacing-lg)]',\n        'bottom-start':\n          'ds:fixed ds:z-[var(--z-fixed)] ds:bottom-[calc(var(--spacing-lg)+env(safe-area-inset-bottom,0px))] ds:start-[var(--spacing-lg)]',\n        'top-end':\n          'ds:fixed ds:z-[var(--z-fixed)] ds:top-[calc(var(--spacing-lg)+env(safe-area-inset-top,0px))] ds:end-[var(--spacing-lg)]',\n        'top-start':\n          'ds:fixed ds:z-[var(--z-fixed)] ds:top-[calc(var(--spacing-lg)+env(safe-area-inset-top,0px))] ds:start-[var(--spacing-lg)]',\n        static: '',\n      },\n    },\n    compoundVariants: [\n      { extended: true, size: 'sm', class: 'ds:ps-3 ds:pe-4' },\n      { extended: true, size: 'md', class: 'ds:ps-4 ds:pe-5' },\n      { extended: true, size: 'lg', class: 'ds:ps-5 ds:pe-6' },\n    ],\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n      extended: false,\n      position: 'bottom-end',\n    },\n  },\n);\n\ntype FabBaseProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  VariantProps<typeof fabVariants>;\n\ninterface CircularFabProps extends FabBaseProps {\n  extended?: false;\n  icon: ReactNode;\n  'aria-label': string;\n  children?: never;\n}\n\ninterface ExtendedFabProps extends FabBaseProps {\n  extended: true;\n  icon?: ReactNode;\n  children: ReactNode;\n}\n\nexport type FloatingActionButtonProps = CircularFabProps | ExtendedFabProps;\n\nexport const FloatingActionButton = forwardRef<\n  HTMLButtonElement,\n  FloatingActionButtonProps\n>((props, ref) => {\n  const {\n    variant,\n    size,\n    extended,\n    position,\n    className,\n    icon,\n    children,\n    type,\n    ...rest\n  } = props;\n  const { t } = useTranslation();\n\n  const ariaLabel =\n    rest['aria-label'] ??\n    (!extended ? t('ui.common.add', { defaultValue: 'Add' }) : undefined);\n\n  return (\n    <button\n      ref={ref}\n      type={type ?? 'button'}\n      className={fabVariants({ variant, size, extended, position, className })}\n      data-component=\"floating-action-button\"\n      {...rest}\n      aria-label={ariaLabel}\n    >\n      {icon ? (\n        <span aria-hidden=\"true\" className=\"ds:inline-flex ds:items-center ds:justify-center\">\n          {icon}\n        </span>\n      ) : null}\n      {extended ? <span className=\"ds:inline-flex\">{children}</span> : null}\n    </button>\n  );\n});\n\nFloatingActionButton.displayName = 'FloatingActionButton';\n"],"names":["fabVariants","cva","FloatingActionButton","forwardRef","props","ref","variant","size","extended","position","className","icon","children","type","rest","t","useTranslation","ariaLabel","jsxs","jsx"],"mappings":";;;;AAQA,MAAMA,IAAcC;AAAA,EAClB;AAAA;AAAA,IAEE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EACA,KAAK,GAAG;AAAA,EACV;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,MAAA;AAAA,MAEJ,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,MAET,UAAU;AAAA,QACR,cACE;AAAA,QACF,gBACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,IAEF,kBAAkB;AAAA,MAChB,EAAE,UAAU,IAAM,MAAM,MAAM,OAAO,kBAAA;AAAA,MACrC,EAAE,UAAU,IAAM,MAAM,MAAM,OAAO,kBAAA;AAAA,MACrC,EAAE,UAAU,IAAM,MAAM,MAAM,OAAO,kBAAA;AAAA,IAAkB;AAAA,IAEzD,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ,GAoBaC,IAAuBC,EAGlC,CAACC,GAAOC,MAAQ;AAChB,QAAM;AAAA,IACJ,SAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDV,GACE,EAAE,GAAAW,EAAA,IAAMC,EAAA,GAERC,IACJH,EAAK,YAAY,MACfN,IAAyD,SAA9CO,EAAE,iBAAiB,EAAE,cAAc,MAAA,CAAO;AAEzD,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAb;AAAA,MACA,MAAMQ,KAAQ;AAAA,MACd,WAAWb,EAAY,EAAE,SAAAM,GAAS,MAAAC,GAAM,UAAAC,GAAU,UAAAC,GAAU,WAAAC,GAAW;AAAA,MACvE,kBAAe;AAAA,MACd,GAAGI;AAAA,MACJ,cAAYG;AAAA,MAEX,UAAA;AAAA,QAAAN,sBACE,QAAA,EAAK,eAAY,QAAO,WAAU,oDAChC,aACH,IACE;AAAA,QACHH,IAAW,gBAAAW,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAP,GAAS,IAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvE,CAAC;AAEDV,EAAqB,cAAc;"}

package/dist/_chunks/{form-field-DI5LY5aG.js → form-field-BfsPLTSc.js}

@@ -62,6 +62,7 @@ const C = f("ds:text-start", {
       {
         ref: v,
         className: C({ orientation: n, disabled: l, className: g }),
+        "data-component": "form-field",
         ...N,
         children: [
           /* @__PURE__ */ t(
@@ -118,4 +119,4 @@ $.displayName = "FormField";
 export {
   $ as F
 };
-//# sourceMappingURL=form-field-DI5LY5aG.js.map
+//# sourceMappingURL=form-field-BfsPLTSc.js.map

package/dist/_chunks/form-field-BfsPLTSc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-BfsPLTSc.js","sources":["../../src/components/form-field/form-field.tsx"],"sourcesContent":["import { forwardRef, useId, useMemo, type HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { AlertCircle } from 'lucide-react';\nimport {\n  FormFieldContext,\n  type FormFieldContextShape,\n} from './form-field-context';\n\nconst fieldVariants = cva('ds:text-start', {\n  variants: {\n    orientation: {\n      vertical: 'ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]',\n      horizontal:\n        'ds:grid ds:grid-cols-[minmax(0,var(--form-label-inline-size))_minmax(0,1fr)] ds:items-start ds:gap-x-[var(--spacing-md)] ds:gap-y-[var(--spacing-xs)]',\n    },\n    disabled: {\n      true: 'ds:opacity-50 ds:cursor-not-allowed',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n    disabled: false,\n  },\n});\n\nconst slotsVariants = cva('ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]', {\n  variants: {\n    orientation: {\n      vertical: '',\n      horizontal: 'ds:min-w-0',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n});\n\ntype RequiredIndicator =\n  | { required?: boolean; optional?: never }\n  | { required?: never; optional?: boolean };\n\ninterface BaseFormFieldProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>,\n    Omit<VariantProps<typeof fieldVariants>, 'disabled'> {\n  label: string;\n  description?: string;\n  error?: string;\n  disabled?: boolean;\n  children: React.ReactNode;\n}\n\nexport type FormFieldProps = BaseFormFieldProps & RequiredIndicator;\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n  (props, ref) => {\n    const {\n      label,\n      description,\n      error,\n      required = false,\n      optional = false,\n      orientation = 'vertical',\n      disabled = false,\n      className,\n      children,\n      ...rest\n    } = props as BaseFormFieldProps & {\n      required?: boolean;\n      optional?: boolean;\n    };\n\n    const { t } = useTranslation();\n    const id = useId();\n    const helpId = `${id}-help`;\n    const errorId = `${id}-error`;\n    const invalid = Boolean(error);\n\n    const describedBy = useMemo(\n      () =>\n        [description ? helpId : null, error ? errorId : null]\n          .filter(Boolean)\n          .join(' '),\n      [description, error, helpId, errorId],\n    );\n\n    const ctx: FormFieldContextShape = useMemo(\n      () => ({\n        id,\n        helpId,\n        errorId,\n        describedBy,\n        invalid,\n        required,\n        disabled,\n      }),\n      [id, helpId, errorId, describedBy, invalid, required, disabled],\n    );\n\n    return (\n      <FormFieldContext.Provider value={ctx}>\n        <div\n          ref={ref}\n          className={fieldVariants({ orientation, disabled, className })}\n          data-component=\"form-field\"\n          {...rest}\n        >\n          <label\n            htmlFor={id}\n            className=\"type-label ds:text-foreground\"\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"ds:text-destructive ds:ms-[var(--spacing-xs)]\"\n              >\n                *\n              </span>\n            )}\n            {optional && (\n              <span className=\"ds:text-muted-foreground ds:ms-[var(--spacing-xs)] ds:font-normal\">\n                ({t('ui.common.optional', 'optional')})\n              </span>\n            )}\n          </label>\n          <div className={slotsVariants({ orientation })}>\n            {children}\n            {description && (\n              <p id={helpId} className=\"type-body-sm ds:text-muted-foreground\">\n                {description}\n              </p>\n            )}\n            {error && (\n              <p\n                id={errorId}\n                role=\"alert\"\n                className=\"ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] type-body-sm ds:text-destructive\"\n              >\n                <AlertCircle\n                  aria-hidden=\"true\"\n                  className=\"ds:size-4 ds:shrink-0\"\n                />\n                <span>{error}</span>\n              </p>\n            )}\n          </div>\n        </div>\n      </FormFieldContext.Provider>\n    );\n  },\n);\n\nFormField.displayName = 'FormField';\n"],"names":["fieldVariants","cva","slotsVariants","FormField","forwardRef","props","ref","label","description","error","required","optional","orientation","disabled","className","children","rest","t","useTranslation","id","useId","helpId","errorId","invalid","describedBy","useMemo","ctx","jsx","FormFieldContext","jsxs","AlertCircle"],"mappings":"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"}

package/dist/_chunks/{freemium-paywall-CCsX3GhK.js → freemium-paywall-Dr9aOtOC.js}

@@ -6,7 +6,7 @@ import { c as E } from "./index-D2ZczOXr.js";
 import { useTranslation as H } from "react-i18next";
 import { B as w } from "./button-7dTew-IV.js";
 import { P as J } from "./progress-D4ELgHG3.js";
-import { f as O } from "./payment-form-175AzK-1.js";
+import { f as O } from "./payment-form-YlxrCpZQ.js";
 import { T as Q } from "./triangle-alert-CBPUIzQo.js";
 import { C as W } from "./check-DPdL_Sm7.js";
 const X = E(
@@ -50,10 +50,10 @@ const X = E(
     className: A
   }, F) => {
     var g;
-    const { t: e, i18n: T } = H(), u = y(), v = y(), f = p !== void 0, [I, L] = q(
+    const { t: a, i18n: T } = H(), u = y(), v = y(), f = p !== void 0, [I, L] = q(
       j ?? ((g = m[0]) == null ? void 0 : g.id) ?? ""
-    ), c = f ? p ?? "" : I, P = (a) => {
-      f || L(a), l == null || l(a);
+    ), c = f ? p ?? "" : I, P = (e) => {
+      f || L(e), l == null || l(e);
     }, M = () => {
       o == null || o(), n(!1);
     }, V = () => {
@@ -78,9 +78,10 @@ const X = E(
           "aria-labelledby": u,
           "aria-describedby": v,
           className: X({ layout: K, density: R, className: A }),
+          "data-component": "freemium-paywall",
           children: [
-            /* @__PURE__ */ s(t.Title, { id: u, asChild: !0, children: /* @__PURE__ */ s("h2", { className: "type-title-card", children: z ?? e("ui.paywall.title") }) }),
-            /* @__PURE__ */ s(t.Description, { id: v, asChild: !0, children: /* @__PURE__ */ s("p", { className: "ds:mt-[var(--spacing-xs)] ds:text-[color:var(--muted-foreground)]", children: C ?? e("ui.paywall.description") }) }),
+            /* @__PURE__ */ s(t.Title, { id: u, asChild: !0, children: /* @__PURE__ */ s("h2", { className: "type-title-card", children: z ?? a("ui.paywall.title") }) }),
+            /* @__PURE__ */ s(t.Description, { id: v, asChild: !0, children: /* @__PURE__ */ s("p", { className: "ds:mt-[var(--spacing-xs)] ds:text-[color:var(--muted-foreground)]", children: C ?? a("ui.paywall.description") }) }),
             r ? /* @__PURE__ */ d("div", { className: "ds:mt-[var(--spacing-md)]", children: [
               /* @__PURE__ */ d("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)] ds:mb-[var(--spacing-xs)]", children: [
                 i ? /* @__PURE__ */ s(
@@ -97,7 +98,7 @@ const X = E(
                       "type-body-sm",
                       i ? "ds:text-[color:var(--destructive)]" : "ds:text-[color:var(--muted-foreground)]"
                     ].join(" "),
-                    children: i ? e("ui.paywall.usageFull") : e("ui.paywall.usageLabel", {
+                    children: i ? a("ui.paywall.usageFull") : a("ui.paywall.usageLabel", {
                       used: r.used,
                       limit: r.limit
                     })
@@ -109,7 +110,7 @@ const X = E(
                 {
                   value: B,
                   max: 100,
-                  ariaLabel: e("ui.paywall.usageLabel", {
+                  ariaLabel: a("ui.paywall.usageLabel", {
                     used: r.used,
                     limit: r.limit
                   }),
@@ -122,18 +123,18 @@ const X = E(
               {
                 value: c,
                 onValueChange: P,
-                "aria-label": e("ui.paywall.title"),
+                "aria-label": a("ui.paywall.title"),
                 className: "ds:mt-[var(--spacing-md)] ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
-                children: m.map((a) => {
+                children: m.map((e) => {
                   const h = O(
-                    a.priceAmount,
-                    a.currency,
+                    e.priceAmount,
+                    e.currency,
                     T.language
-                  ), x = a.perKey ? e(a.perKey) : void 0, D = x ? e("ui.paywall.pricePer", { price: h, period: x }) : h, _ = e(a.nameKey);
+                  ), x = e.perKey ? a(e.perKey) : void 0, D = x ? a("ui.paywall.pricePer", { price: h, period: x }) : h, _ = a(e.nameKey);
                   return /* @__PURE__ */ d(
                     b.Item,
                     {
-                      value: a.id,
+                      value: e.id,
                       className: [
                         "ds:group ds:relative ds:flex ds:flex-col ds:items-stretch",
                         "ds:rounded-[var(--radius-md)] ds:border ds:border-border",
@@ -149,12 +150,12 @@ const X = E(
                           /* @__PURE__ */ s("span", { className: "ds:font-semibold", children: _ }),
                           /* @__PURE__ */ s("span", { className: "ds:tabular-nums", children: D })
                         ] }),
-                        a.featuresKeys && a.featuresKeys.length > 0 ? /* @__PURE__ */ s(
+                        e.featuresKeys && e.featuresKeys.length > 0 ? /* @__PURE__ */ s(
                           "ul",
                           {
-                            "aria-label": e("ui.paywall.features"),
+                            "aria-label": a("ui.paywall.features"),
                             className: "ds:mt-[var(--spacing-xs)] ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]",
-                            children: a.featuresKeys.map((G, S) => /* @__PURE__ */ d(
+                            children: e.featuresKeys.map((G, S) => /* @__PURE__ */ d(
                               "li",
                               {
                                 className: "ds:flex ds:items-start ds:gap-[var(--spacing-xs)] type-body-sm",
@@ -166,7 +167,7 @@ const X = E(
                                       className: "ds:size-4 ds:shrink-0 ds:text-[color:var(--primary)] ds:mt-[1px]"
                                     }
                                   ),
-                                  /* @__PURE__ */ s("span", { children: e(G) })
+                                  /* @__PURE__ */ s("span", { children: a(G) })
                                 ]
                               },
                               S
@@ -175,14 +176,14 @@ const X = E(
                         ) : null
                       ]
                     },
-                    a.id
+                    e.id
                   );
                 })
               }
             ),
             /* @__PURE__ */ d("div", { className: "ds:mt-[var(--spacing-lg)] ds:flex ds:items-center ds:gap-[var(--spacing-sm)] ds:justify-end", children: [
-              /* @__PURE__ */ s(t.Cancel, { asChild: !0, children: /* @__PURE__ */ s(w, { intent: "outline", onClick: M, children: e("ui.paywall.notNow") }) }),
-              /* @__PURE__ */ s(t.Action, { asChild: !0, children: /* @__PURE__ */ s(w, { intent: "primary", onClick: V, children: e("ui.paywall.upgrade") }) })
+              /* @__PURE__ */ s(t.Cancel, { asChild: !0, children: /* @__PURE__ */ s(w, { intent: "outline", onClick: M, children: a("ui.paywall.notNow") }) }),
+              /* @__PURE__ */ s(t.Action, { asChild: !0, children: /* @__PURE__ */ s(w, { intent: "primary", onClick: V, children: a("ui.paywall.upgrade") }) })
             ] })
           ]
         }
@@ -194,4 +195,4 @@ Y.displayName = "FreemiumPaywall";
 export {
   Y as F
 };
-//# sourceMappingURL=freemium-paywall-CCsX3GhK.js.map
+//# sourceMappingURL=freemium-paywall-Dr9aOtOC.js.map

package/dist/_chunks/freemium-paywall-Dr9aOtOC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"freemium-paywall-Dr9aOtOC.js","sources":["../../src/components/freemium-paywall/freemium-paywall.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useState,\n  type ReactNode,\n} from 'react';\nimport * as RadixAlertDialog from '@radix-ui/react-alert-dialog';\nimport * as RadixRadioGroup from '@radix-ui/react-radio-group';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { AlertTriangle, Check } from 'lucide-react';\nimport { Button } from '../button';\nimport { Progress } from '../progress';\nimport { formatPaymentAmount } from '../payment-form';\n\n/* ------------------------------------------------------------------ */\n/* Types                                                                */\n/* ------------------------------------------------------------------ */\n\nexport interface FreemiumPlan {\n  id: string;\n  /** Translation key for the plan name (e.g. `app.paywall.plans.pro`). */\n  nameKey: string;\n  /** Amount in minor units (cents, centesimi). */\n  priceAmount: number;\n  /** ISO 4217 currency code. */\n  currency: string;\n  /** Translation key for the cadence suffix (e.g. `app.paywall.period.month`). */\n  perKey?: string;\n  /** Per-line feature translation keys. */\n  featuresKeys?: string[];\n}\n\nconst contentVariants = cva(\n  [\n    'ds:fixed ds:z-[var(--z-modal)] ds:overflow-auto',\n    'ds:bg-[color:var(--popover)] ds:text-[color:var(--popover-foreground)]',\n    'ds:border ds:border-border ds:shadow-[var(--shadow-lg)]',\n    // forced-colors: keep the dialog boundary visible under Windows High\n    // Contrast, where `var(--border)` may collapse to system colours.\n    'ds:forced-colors:border-[CanvasText]',\n    'ds:focus:outline-none',\n  ].join(' '),\n  {\n    variants: {\n      layout: {\n        centered:\n          'ds:start-1/2 ds:top-1/2 ds:-translate-x-1/2 ds:-translate-y-1/2 ds:rtl:translate-x-1/2 ds:rounded-[var(--radius-md)] ds:max-w-[var(--dialog-width-xl)] ds:w-[calc(100vw-2rem)] ds:max-h-[90vh]',\n        sheet:\n          'ds:inset-inline-0 ds:bottom-0 ds:w-full ds:max-h-[90vh] ds:rounded-t-[var(--radius-md)]',\n      },\n      density: {\n        compact: 'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]',\n        full: 'ds:ps-[var(--spacing-lg)] ds:pe-[var(--spacing-lg)] ds:pt-[var(--spacing-lg)] ds:pb-[var(--spacing-lg)]',\n      },\n    },\n    defaultVariants: { layout: 'centered', density: 'full' },\n  },\n);\n\nexport interface FreemiumPaywallProps\n  extends VariantProps<typeof contentVariants> {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  plans: FreemiumPlan[];\n  /** Currently-selected plan id (controlled) or default. */\n  selectedPlanId?: string;\n  defaultSelectedPlanId?: string;\n  onSelectedPlanChange?: (id: string) => void;\n  /** Usage indicator values — omit the object to hide the bar. */\n  usage?: { used: number; limit: number };\n  /** Fires on upgrade. */\n  onUpgrade: (planId: string) => void;\n  /** Fires when the user dismisses via Not Now. */\n  onCancel?: () => void;\n  /** Title override; defaults to t('ui.paywall.title'). */\n  title?: ReactNode;\n  /** Description override; defaults to t('ui.paywall.description'). */\n  description?: ReactNode;\n  className?: string;\n}\n\nexport const FreemiumPaywall = forwardRef<HTMLDivElement, FreemiumPaywallProps>(\n  (\n    {\n      open,\n      onOpenChange,\n      plans,\n      selectedPlanId,\n      defaultSelectedPlanId,\n      onSelectedPlanChange,\n      usage,\n      onUpgrade,\n      onCancel,\n      title,\n      description,\n      layout = 'centered',\n      density = 'full',\n      className,\n    },\n    ref,\n  ) => {\n    const { t, i18n } = useTranslation();\n    const titleId = useId();\n    const descId = useId();\n\n    const isControlled = selectedPlanId !== undefined;\n    const [internalSelected, setInternalSelected] = useState<string>(\n      defaultSelectedPlanId ?? plans[0]?.id ?? '',\n    );\n    const currentSelected = isControlled\n      ? selectedPlanId ?? ''\n      : internalSelected;\n\n    const handleSelectedChange = (next: string) => {\n      if (!isControlled) setInternalSelected(next);\n      onSelectedPlanChange?.(next);\n    };\n\n    const handleCancel = () => {\n      onCancel?.();\n      onOpenChange(false);\n    };\n\n    const handleUpgrade = () => {\n      if (!currentSelected) return;\n      onUpgrade(currentSelected);\n    };\n\n    const usagePercent = usage\n      ? Math.min(100, Math.max(0, (usage.used / Math.max(1, usage.limit)) * 100))\n      : 0;\n    const usageFull = usage ? usage.used >= usage.limit : false;\n\n    return (\n      <RadixAlertDialog.Root open={open} onOpenChange={onOpenChange}>\n        <RadixAlertDialog.Portal>\n          <RadixAlertDialog.Overlay\n            className={[\n              'ds:fixed ds:inset-0 ds:z-[var(--z-modal-backdrop)]',\n              'ds:bg-[color:var(--foreground)]/40',\n              'ds:motion-safe:data-[state=open]:animate-in ds:motion-safe:data-[state=closed]:animate-out',\n              'ds:[.theme-accessible_&]:animate-none',\n            ].join(' ')}\n          />\n          <RadixAlertDialog.Content\n            ref={ref}\n            aria-labelledby={titleId}\n            aria-describedby={descId}\n            className={contentVariants({ layout, density, className })}\n            data-component=\"freemium-paywall\"\n          >\n            <RadixAlertDialog.Title id={titleId} asChild>\n              <h2 className=\"type-title-card\">\n                {title ?? t('ui.paywall.title')}\n              </h2>\n            </RadixAlertDialog.Title>\n            <RadixAlertDialog.Description id={descId} asChild>\n              <p className=\"ds:mt-[var(--spacing-xs)] ds:text-[color:var(--muted-foreground)]\">\n                {description ?? t('ui.paywall.description')}\n              </p>\n            </RadixAlertDialog.Description>\n\n            {usage ? (\n              <div className=\"ds:mt-[var(--spacing-md)]\">\n                <div className=\"ds:flex ds:items-center ds:gap-[var(--spacing-xs)] ds:mb-[var(--spacing-xs)]\">\n                  {usageFull ? (\n                    <AlertTriangle\n                      aria-hidden=\"true\"\n                      className=\"ds:size-4 ds:text-[color:var(--destructive)]\"\n                    />\n                  ) : null}\n                  <span\n                    className={[\n                      'type-body-sm',\n                      usageFull\n                        ? 'ds:text-[color:var(--destructive)]'\n                        : 'ds:text-[color:var(--muted-foreground)]',\n                    ].join(' ')}\n                  >\n                    {usageFull\n                      ? t('ui.paywall.usageFull')\n                      : t('ui.paywall.usageLabel', {\n                          used: usage.used,\n                          limit: usage.limit,\n                        })}\n                  </span>\n                </div>\n                <Progress\n                  value={usagePercent}\n                  max={100}\n                  ariaLabel={t('ui.paywall.usageLabel', {\n                    used: usage.used,\n                    limit: usage.limit,\n                  })}\n                  className={usageFull ? 'ds:[&_[role=progressbar]>*]:bg-[color:var(--destructive)]' : ''}\n                />\n              </div>\n            ) : null}\n\n            <RadixRadioGroup.Root\n              value={currentSelected}\n              onValueChange={handleSelectedChange}\n              aria-label={t('ui.paywall.title')}\n              className=\"ds:mt-[var(--spacing-md)] ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]\"\n            >\n              {plans.map((plan) => {\n                // Reuse the payment-form helper — it knows about\n                // zero-decimal currencies (JPY, KRW, VND …) and applies\n                // the right divisor. Raw `/ 100` would 100× the price in\n                // those currencies.\n                const formattedPrice = formatPaymentAmount(\n                  plan.priceAmount,\n                  plan.currency,\n                  i18n.language,\n                );\n                const period = plan.perKey ? t(plan.perKey) : undefined;\n                const priceLine = period\n                  ? t('ui.paywall.pricePer', { price: formattedPrice, period })\n                  : formattedPrice;\n                const planName = t(plan.nameKey);\n                return (\n                  <RadixRadioGroup.Item\n                    key={plan.id}\n                    value={plan.id}\n                    className={[\n                      'ds:group ds:relative ds:flex ds:flex-col ds:items-stretch',\n                      'ds:rounded-[var(--radius-md)] ds:border ds:border-border',\n                      'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]',\n                      'ds:text-start ds:bg-[color:var(--card)] ds:text-[color:var(--card-foreground)]',\n                      'ds:data-[state=checked]:border-[color:var(--primary)]',\n                      'ds:data-[state=checked]:bg-[color:var(--primary)]/5',\n                      'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n                      'ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n                    ].join(' ')}\n                  >\n                    <span className=\"ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]\">\n                      <span className=\"ds:font-semibold\">{planName}</span>\n                      <span className=\"ds:tabular-nums\">{priceLine}</span>\n                    </span>\n                    {plan.featuresKeys && plan.featuresKeys.length > 0 ? (\n                      <ul\n                        aria-label={t('ui.paywall.features')}\n                        className=\"ds:mt-[var(--spacing-xs)] ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]\"\n                      >\n                        {plan.featuresKeys.map((key, i) => (\n                          <li\n                            key={i}\n                            className=\"ds:flex ds:items-start ds:gap-[var(--spacing-xs)] type-body-sm\"\n                          >\n                            <Check\n                              aria-hidden=\"true\"\n                              className=\"ds:size-4 ds:shrink-0 ds:text-[color:var(--primary)] ds:mt-[1px]\"\n                            />\n                            <span>{t(key)}</span>\n                          </li>\n                        ))}\n                      </ul>\n                    ) : null}\n                  </RadixRadioGroup.Item>\n                );\n              })}\n            </RadixRadioGroup.Root>\n\n            <div className=\"ds:mt-[var(--spacing-lg)] ds:flex ds:items-center ds:gap-[var(--spacing-sm)] ds:justify-end\">\n              <RadixAlertDialog.Cancel asChild>\n                <Button intent=\"outline\" onClick={handleCancel}>\n                  {t('ui.paywall.notNow')}\n                </Button>\n              </RadixAlertDialog.Cancel>\n              <RadixAlertDialog.Action asChild>\n                <Button intent=\"primary\" onClick={handleUpgrade}>\n                  {t('ui.paywall.upgrade')}\n                </Button>\n              </RadixAlertDialog.Action>\n            </div>\n          </RadixAlertDialog.Content>\n        </RadixAlertDialog.Portal>\n      </RadixAlertDialog.Root>\n    );\n  },\n);\n\nFreemiumPaywall.displayName = 'FreemiumPaywall';\n"],"names":["contentVariants","cva","FreemiumPaywall","forwardRef","open","onOpenChange","plans","selectedPlanId","defaultSelectedPlanId","onSelectedPlanChange","usage","onUpgrade","onCancel","title","description","layout","density","className","ref","t","i18n","useTranslation","titleId","useId","descId","isControlled","internalSelected","setInternalSelected","useState","_a","currentSelected","handleSelectedChange","next","handleCancel","handleUpgrade","usagePercent","usageFull","jsx","RadixAlertDialog","jsxs","AlertTriangle","Progress","RadixRadioGroup","plan","formattedPrice","formatPaymentAmount","period","priceLine","planName","key","i","Check","Button"],"mappings":"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"}

package/dist/_chunks/{header-CVQxeLc_.js → header-BpU9U-1X.js}

@@ -2,7 +2,7 @@ import { jsxs as m, Fragment as _, jsx as s } from "react/jsx-runtime";
 import { forwardRef as t, useRef as k, useState as N, useEffect as j } from "react";
 import { c as o } from "./index-D2ZczOXr.js";
 import { useTranslation as l } from "react-i18next";
-import { I as H } from "./icon-button-SWpSs9S6.js";
+import { I as H } from "./icon-button-CNjWCD1X.js";
 import { c as w } from "./createLucideIcon-CrFbzy84.js";
 /**
  * @license lucide-react v1.8.0 - ISC
@@ -189,6 +189,7 @@ const B = [
           ref: v,
           role: "banner",
           "aria-label": g,
+          "data-component": "header",
           "data-scrolled": b ? "true" : void 0,
           className: V({ variant: e, className: r }),
           ...i,
@@ -307,4 +308,4 @@ export {
   A as f,
   E as g
 };
-//# sourceMappingURL=header-CVQxeLc_.js.map
+//# sourceMappingURL=header-BpU9U-1X.js.map

package/dist/_chunks/{header-CVQxeLc_.js.map → header-BpU9U-1X.js.map}

@@ -1 +1 @@
-{"version":3,"file":"header-CVQxeLc_.js","sources":["../../node_modules/lucide-react/dist/esm/icons/menu.js","../../src/components/header/header.tsx"],"sourcesContent":["/**\n * @license lucide-react v1.8.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\"path\", { d: \"M4 5h16\", key: \"1tepv9\" }],\n  [\"path\", { d: \"M4 12h16\", key: \"1lakjw\" }],\n  [\"path\", { d: \"M4 19h16\", key: \"1djgab\" }]\n];\nconst Menu = createLucideIcon(\"menu\", __iconNode);\n\nexport { __iconNode, Menu as default };\n//# sourceMappingURL=menu.js.map\n","import {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  type AnchorHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { Menu } from 'lucide-react';\nimport { IconButton } from '../button/icon-button';\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                 */\n/* ------------------------------------------------------------------ */\n\nconst rootVariants = cva(\n  [\n    'ds:w-full',\n    // Fixed height — a Header is always the `lg` token (64px). Using `h-*`\n    // (not `min-h-*`) pins the row regardless of how Storybook's Canvas /\n    // docs wrapper stretches the story's layout.\n    'ds:h-[var(--header-height-lg)]',\n    // `flex items-stretch` lets the inner div fill the full cross-axis so\n    // the flex-centered content sits on the true vertical midline.\n    'ds:flex ds:items-stretch',\n    // Pin to the top of the page — `sticky` keeps the Header in normal\n    // document flow (so content below isn't occluded and the docs Canvas\n    // doesn't leak the Header over adjacent preview blocks) but stays\n    // anchored to the viewport while the nearest scroll ancestor scrolls.\n    'ds:sticky ds:inset-block-start-0 ds:z-[var(--z-sticky)]',\n    'ds:bg-[var(--background)]',\n    'ds:text-[color:var(--foreground)]',\n    // Shadow recipe follows `Brand/Shadows` — one tier between states, never\n    // two. Resting: flat, no shadow. Scrolled: --shadow-md (tooltip/menu tier)\n    // paired with a 1-px --border so elevation still reads without the shadow\n    // in forced-colors / print, where UAs strip box-shadow. Transition is\n    // gated on `motion-reduce` so users opting out of motion still get the\n    // static elevation without animated lift.\n    'ds:transition-[border-color,box-shadow] ds:motion-reduce:transition-none',\n    'ds:border-block-end ds:border-transparent',\n    'ds:data-[scrolled=true]:border-[color:var(--border)]',\n    'ds:data-[scrolled=true]:shadow-[var(--shadow-md)]',\n    // Windows HCM: always show the border — forced-colors strips box-shadow\n    // entirely, so the border is the only separation cue the user gets.\n    'ds:forced-colors:border-[color:CanvasText]',\n    // Print: strip shadow, keep border so the header still reads as a\n    // bounded surface on paper.\n    'ds:print:shadow-none ds:print:border-[color:var(--border)]',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        // Brand surface — primary-tinted background with primary-foreground\n        // ink. Token rescopes are narrowed to `start` + `end` slots so chrome\n        // (IconButton outline border, Logo monochrome, focus rings) re-tints\n        // automatically. The `center` slot is excluded because SearchBar paints\n        // its own `var(--background)` surface and must keep the document's\n        // --foreground / --muted-foreground for its icon, placeholder, border,\n        // kbd chip, and hover state.\n        //\n        // Contrast: --primary-foreground (#fff) over --primary (violet-500) is\n        // 4.6:1 — passes WCAG AA for normal text. Muted-foreground is also set\n        // to pure primary-foreground so any muted text in the header clears AA.\n        //\n        // Dark-mode override: in dark mode --primary is magenta-500 — using it\n        // as the full-width header surface puts a hot-pink bar at the top of\n        // every page, which the Apr 2026 brand guide's own dark mockups never\n        // do (fuchsia is reserved for CTAs). We shift the header bg to\n        // --background (blue-500) in dark so the header blends with the Dark\n        // Blue brand surface at the same level as the Sidebar; separation\n        // from the main canvas (which we offset to blue-700) is carried by\n        // the existing scroll-shadow + border. White --primary-foreground ink\n        // on blue-500 clears AAA (~12.8:1).\n        brand: [\n          'ds:bg-[var(--primary)] ds:text-[color:var(--primary-foreground)]',\n          'ds:[.theme-dark_&]:bg-[var(--background)]',\n          'ds:[&_[data-header-slot=start]]:[--foreground:var(--primary-foreground)]',\n          'ds:[&_[data-header-slot=start]]:[--muted-foreground:var(--primary-foreground)]',\n          'ds:[&_[data-header-slot=start]]:[--border:color-mix(in_srgb,var(--primary-foreground)_40%,transparent)]',\n          'ds:[&_[data-header-slot=start]]:[--muted:color-mix(in_srgb,var(--primary-foreground)_16%,transparent)]',\n          'ds:[&_[data-header-slot=start]]:[--ring:var(--primary-foreground)]',\n          'ds:[&_[data-header-slot=end]]:[--foreground:var(--primary-foreground)]',\n          'ds:[&_[data-header-slot=end]]:[--muted-foreground:var(--primary-foreground)]',\n          'ds:[&_[data-header-slot=end]]:[--border:color-mix(in_srgb,var(--primary-foreground)_40%,transparent)]',\n          'ds:[&_[data-header-slot=end]]:[--muted:color-mix(in_srgb,var(--primary-foreground)_16%,transparent)]',\n          'ds:[&_[data-header-slot=end]]:[--ring:var(--primary-foreground)]',\n        ].join(' '),\n        // Light surface — plain page background with primary-coloured chrome.\n        // Start + end slots rescope --foreground, --border, --ring to --primary\n        // so IconButton borders/icons render in the brand hue while the\n        // HeaderBrand wordmark keeps its bicolor artwork and the SearchBar\n        // (center slot) is untouched.\n        light: [\n          'ds:bg-[var(--background)] ds:text-[color:var(--foreground)]',\n          'ds:[&_[data-header-slot=start]]:[--foreground:var(--primary)]',\n          'ds:[&_[data-header-slot=start]]:[--border:var(--primary)]',\n          'ds:[&_[data-header-slot=start]]:[--ring:var(--primary)]',\n          'ds:[&_[data-header-slot=end]]:[--foreground:var(--primary)]',\n          'ds:[&_[data-header-slot=end]]:[--border:var(--primary)]',\n          'ds:[&_[data-header-slot=end]]:[--ring:var(--primary)]',\n        ].join(' '),\n      },\n    },\n    defaultVariants: {\n      variant: 'brand',\n    },\n  },\n);\n\nconst innerVariants = cva(\n  [\n    'ds:flex ds:items-center ds:gap-[var(--spacing-sm)]',\n    'ds:w-full ds:h-full',\n    'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n  ].join(' '),\n);\n\nconst slotStartVariants = cva('ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]');\nconst slotCenterVariants = cva(\n  'ds:hidden ds:md:flex ds:flex-1 ds:min-w-0 ds:items-center ds:justify-center ds:gap-[var(--spacing-sm)]',\n);\nconst slotEndVariants = cva('ds:ms-auto ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]');\n\nconst brandVariants = cva(\n  [\n    'ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]',\n    'ds:text-[length:var(--font-size-base)] ds:font-[var(--font-weight-semibold)]',\n    // `leading-none` zeros the anchor's line-height so the Logo SVG sits at\n    // the geometric centre of the flex cross-axis — otherwise the residual\n    // line-box above ascenders / below descenders nudges the SVG upward.\n    'ds:leading-none',\n    // Inherit foreground from the Header root so the `brand` variant's\n    // --primary-foreground ink cascades here without an override prop.\n    'ds:text-[color:currentColor]',\n    'ds:no-underline',\n    'ds:rounded-[var(--radius-sm)]',\n    'ds:focus-visible:outline-[length:var(--focus-ring-width)]',\n    'ds:focus-visible:outline-solid',\n    'ds:focus-visible:outline-[color:var(--ring)]',\n    'ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n    'ds:forced-colors:focus-visible:outline-[CanvasText]',\n    'ds:min-h-[var(--min-target-size)]',\n  ].join(' '),\n);\n\nconst brandDividerVariants = cva(\n  [\n    'ds:hidden ds:md:inline-block',\n    'ds:border-inline-start ds:border-[color:var(--border)]',\n    'ds:self-stretch ds:my-[var(--spacing-xs)]',\n  ].join(' '),\n);\n\nconst skipLinkVariants = cva(\n  [\n    'ds:sr-only ds:focus:not-sr-only',\n    'ds:focus:absolute ds:focus:inset-inline-start-[var(--spacing-sm)] ds:focus:inset-block-start-[var(--spacing-sm)]',\n    'ds:focus:z-[calc(var(--z-sticky)+1)]',\n    'ds:focus:ps-[var(--spacing-sm)] ds:focus:pe-[var(--spacing-sm)] ds:focus:pbs-[var(--spacing-xs)] ds:focus:pbe-[var(--spacing-xs)]',\n    'ds:focus:bg-[var(--background)] ds:focus:text-[color:var(--foreground)]',\n    'ds:focus:border ds:focus:border-[color:var(--border)]',\n    'ds:focus:rounded-[var(--radius-sm)]',\n    'ds:focus:outline-[length:var(--focus-ring-width)] ds:focus:outline-solid ds:focus:outline-[color:var(--ring)]',\n    'ds:forced-colors:focus:outline-[CanvasText]',\n  ].join(' '),\n);\n\n/* ------------------------------------------------------------------ */\n/* Root                                                                 */\n/* ------------------------------------------------------------------ */\n\nexport interface HeaderProps\n  extends Omit<HTMLAttributes<HTMLElement>, 'role' | 'children'>,\n    VariantProps<typeof rootVariants> {\n  children: ReactNode;\n  /** Override the default landmark name. */\n  'aria-label'?: string;\n  /** Enable the scroll-linked border + shadow (default `true`). */\n  scrollLinkedElevation?: boolean;\n}\n\nexport const Header = forwardRef<HTMLElement, HeaderProps>(\n  (\n    {\n      variant = 'brand',\n      className,\n      children,\n      scrollLinkedElevation = true,\n      'aria-label': ariaLabel,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n    const label = ariaLabel ?? t('navigation.header.label', 'Page header');\n\n    /* ---- Scroll-linked border / shadow ---------------------------- */\n    const sentinelRef = useRef<HTMLDivElement | null>(null);\n    const [scrolled, setScrolled] = useState(false);\n    useEffect(() => {\n      if (!scrollLinkedElevation) return undefined;\n      const sentinel = sentinelRef.current;\n      if (!sentinel) return undefined;\n      if (typeof IntersectionObserver === 'undefined') return undefined;\n      const io = new IntersectionObserver(\n        (entries) => {\n          const entry = entries[0];\n          // When the sentinel scrolls out of view (isIntersecting=false),\n          // the user has scrolled past the top — flip the elevation on.\n          setScrolled(!entry.isIntersecting);\n        },\n        { threshold: 0 },\n      );\n      io.observe(sentinel);\n      return () => io.disconnect();\n    }, [scrollLinkedElevation]);\n\n    return (\n      <>\n        {/* 1px sentinel above the sticky header so the IntersectionObserver\n            fires when the user scrolls past the top. Kept outside the\n            <header> so it doesn't affect landmark semantics. */}\n        {scrollLinkedElevation ? (\n          <div\n            ref={sentinelRef}\n            aria-hidden=\"true\"\n            className=\"ds:block ds:h-px ds:w-full\"\n          />\n        ) : null}\n        <header\n          ref={ref}\n          role=\"banner\"\n          aria-label={label}\n          data-scrolled={scrolled ? 'true' : undefined}\n          className={rootVariants({ variant, className })}\n          {...rest}\n        >\n          <div className={innerVariants()}>{children}</div>\n        </header>\n      </>\n    );\n  },\n);\nHeader.displayName = 'Header';\n\n/* ------------------------------------------------------------------ */\n/* Slot wrappers                                                        */\n/* ------------------------------------------------------------------ */\n\nexport const HeaderStart = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-header-slot=\"start\"\n      className={[slotStartVariants(), className].filter(Boolean).join(' ')}\n      {...props}\n    />\n  ),\n);\nHeaderStart.displayName = 'HeaderStart';\n\nexport const HeaderCenter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-header-slot=\"center\"\n      className={[slotCenterVariants(), className].filter(Boolean).join(' ')}\n      {...props}\n    />\n  ),\n);\nHeaderCenter.displayName = 'HeaderCenter';\n\nexport const HeaderEnd = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-header-slot=\"end\"\n      className={[slotEndVariants(), className].filter(Boolean).join(' ')}\n      {...props}\n    />\n  ),\n);\nHeaderEnd.displayName = 'HeaderEnd';\n\n/* ------------------------------------------------------------------ */\n/* Brand                                                                */\n/* ------------------------------------------------------------------ */\n\nexport interface HeaderBrandProps\n  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {\n  /** Logo slot — an <svg> / <img>. Must carry its own accessible name via aria-label on the wrapping component OR a visible wordmark child. */\n  logo?: ReactNode;\n  /** Visible wordmark / product name. Sits after the logo. */\n  children?: ReactNode;\n  /** Destination href. Defaults to \"/\". */\n  href?: string;\n}\n\nexport const HeaderBrand = forwardRef<HTMLAnchorElement, HeaderBrandProps>(\n  ({ logo, children, href = '/', className, ...props }, ref) => {\n    if (import.meta.env.DEV && !props['aria-label'] && !children) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'HeaderBrand: pass `aria-label` or visible children — a logo-only brand link without a name has no accessible name.',\n      );\n    }\n    return (\n      <a\n        ref={ref}\n        href={href}\n        className={[brandVariants(), className].filter(Boolean).join(' ')}\n        {...props}\n      >\n        {logo ? (\n          <span aria-hidden={children ? 'true' : undefined} className=\"ds:inline-flex ds:items-center\">\n            {logo}\n          </span>\n        ) : null}\n        {children ? <span className=\"ds:truncate\">{children}</span> : null}\n      </a>\n    );\n  },\n);\nHeaderBrand.displayName = 'HeaderBrand';\n\n/* ------------------------------------------------------------------ */\n/* Brand divider                                                        */\n/* ------------------------------------------------------------------ */\n\nexport function HeaderBrandDivider({\n  className,\n  ...props\n}: HTMLAttributes<HTMLSpanElement>): ReactNode {\n  return (\n    <span\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={[brandDividerVariants(), className].filter(Boolean).join(' ')}\n      {...props}\n    />\n  );\n}\n\n/* ------------------------------------------------------------------ */\n/* Menu button (mobile drawer trigger)                                  */\n/* ------------------------------------------------------------------ */\n\nexport interface HeaderMenuButtonProps {\n  onMenuOpen: () => void;\n  'aria-label'?: string;\n  className?: string;\n}\n\nexport const HeaderMenuButton = forwardRef<HTMLButtonElement, HeaderMenuButtonProps>(\n  ({ onMenuOpen, 'aria-label': ariaLabel, className }, ref) => {\n    const { t } = useTranslation();\n    return (\n      <IconButton\n        ref={ref}\n        // Show on mobile; hide above md breakpoint.\n        className={['ds:md:hidden', className].filter(Boolean).join(' ')}\n        icon={<Menu aria-hidden />}\n        aria-label={ariaLabel ?? t('navigation.sidebar.open', 'Open menu')}\n        onClick={onMenuOpen}\n      />\n    );\n  },\n);\nHeaderMenuButton.displayName = 'HeaderMenuButton';\n\n/* ------------------------------------------------------------------ */\n/* SkipLink                                                             */\n/* ------------------------------------------------------------------ */\n\nexport interface HeaderSkipLinkProps\n  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {\n  href: string;\n  children?: ReactNode;\n}\n\nexport const HeaderSkipLink = forwardRef<HTMLAnchorElement, HeaderSkipLinkProps>(\n  ({ href, children, className, ...props }, ref) => {\n    const { t } = useTranslation();\n    return (\n      <a\n        ref={ref}\n        href={href}\n        className={[skipLinkVariants(), className].filter(Boolean).join(' ')}\n        {...props}\n      >\n        {children ?? t('navigation.nav.skipToContent', 'Skip to content')}\n      </a>\n    );\n  },\n);\nHeaderSkipLink.displayName = 'HeaderSkipLink';\n"],"names":["__iconNode","Menu","createLucideIcon","rootVariants","cva","innerVariants","slotStartVariants","slotCenterVariants","slotEndVariants","brandVariants","brandDividerVariants","skipLinkVariants","Header","forwardRef","variant","className","children","scrollLinkedElevation","ariaLabel","rest","ref","t","useTranslation","label","sentinelRef","useRef","scrolled","setScrolled","useState","useEffect","sentinel","io","entries","entry","jsxs","Fragment","jsx","HeaderStart","props","HeaderCenter","HeaderEnd","HeaderBrand","logo","href","HeaderBrandDivider","HeaderMenuButton","onMenuOpen","IconButton","HeaderSkipLink"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"header-BpU9U-1X.js","sources":["../../node_modules/lucide-react/dist/esm/icons/menu.js","../../src/components/header/header.tsx"],"sourcesContent":["/**\n * @license lucide-react v1.8.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\"path\", { d: \"M4 5h16\", key: \"1tepv9\" }],\n  [\"path\", { d: \"M4 12h16\", key: \"1lakjw\" }],\n  [\"path\", { d: \"M4 19h16\", key: \"1djgab\" }]\n];\nconst Menu = createLucideIcon(\"menu\", __iconNode);\n\nexport { __iconNode, Menu as default };\n//# sourceMappingURL=menu.js.map\n","import {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  type AnchorHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { Menu } from 'lucide-react';\nimport { IconButton } from '../button/icon-button';\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                 */\n/* ------------------------------------------------------------------ */\n\nconst rootVariants = cva(\n  [\n    'ds:w-full',\n    // Fixed height — a Header is always the `lg` token (64px). Using `h-*`\n    // (not `min-h-*`) pins the row regardless of how Storybook's Canvas /\n    // docs wrapper stretches the story's layout.\n    'ds:h-[var(--header-height-lg)]',\n    // `flex items-stretch` lets the inner div fill the full cross-axis so\n    // the flex-centered content sits on the true vertical midline.\n    'ds:flex ds:items-stretch',\n    // Pin to the top of the page — `sticky` keeps the Header in normal\n    // document flow (so content below isn't occluded and the docs Canvas\n    // doesn't leak the Header over adjacent preview blocks) but stays\n    // anchored to the viewport while the nearest scroll ancestor scrolls.\n    'ds:sticky ds:inset-block-start-0 ds:z-[var(--z-sticky)]',\n    'ds:bg-[var(--background)]',\n    'ds:text-[color:var(--foreground)]',\n    // Shadow recipe follows `Brand/Shadows` — one tier between states, never\n    // two. Resting: flat, no shadow. Scrolled: --shadow-md (tooltip/menu tier)\n    // paired with a 1-px --border so elevation still reads without the shadow\n    // in forced-colors / print, where UAs strip box-shadow. Transition is\n    // gated on `motion-reduce` so users opting out of motion still get the\n    // static elevation without animated lift.\n    'ds:transition-[border-color,box-shadow] ds:motion-reduce:transition-none',\n    'ds:border-block-end ds:border-transparent',\n    'ds:data-[scrolled=true]:border-[color:var(--border)]',\n    'ds:data-[scrolled=true]:shadow-[var(--shadow-md)]',\n    // Windows HCM: always show the border — forced-colors strips box-shadow\n    // entirely, so the border is the only separation cue the user gets.\n    'ds:forced-colors:border-[color:CanvasText]',\n    // Print: strip shadow, keep border so the header still reads as a\n    // bounded surface on paper.\n    'ds:print:shadow-none ds:print:border-[color:var(--border)]',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        // Brand surface — primary-tinted background with primary-foreground\n        // ink. Token rescopes are narrowed to `start` + `end` slots so chrome\n        // (IconButton outline border, Logo monochrome, focus rings) re-tints\n        // automatically. The `center` slot is excluded because SearchBar paints\n        // its own `var(--background)` surface and must keep the document's\n        // --foreground / --muted-foreground for its icon, placeholder, border,\n        // kbd chip, and hover state.\n        //\n        // Contrast: --primary-foreground (#fff) over --primary (violet-500) is\n        // 4.6:1 — passes WCAG AA for normal text. Muted-foreground is also set\n        // to pure primary-foreground so any muted text in the header clears AA.\n        //\n        // Dark-mode override: in dark mode --primary is magenta-500 — using it\n        // as the full-width header surface puts a hot-pink bar at the top of\n        // every page, which the Apr 2026 brand guide's own dark mockups never\n        // do (fuchsia is reserved for CTAs). We shift the header bg to\n        // --background (blue-500) in dark so the header blends with the Dark\n        // Blue brand surface at the same level as the Sidebar; separation\n        // from the main canvas (which we offset to blue-700) is carried by\n        // the existing scroll-shadow + border. White --primary-foreground ink\n        // on blue-500 clears AAA (~12.8:1).\n        brand: [\n          'ds:bg-[var(--primary)] ds:text-[color:var(--primary-foreground)]',\n          'ds:[.theme-dark_&]:bg-[var(--background)]',\n          'ds:[&_[data-header-slot=start]]:[--foreground:var(--primary-foreground)]',\n          'ds:[&_[data-header-slot=start]]:[--muted-foreground:var(--primary-foreground)]',\n          'ds:[&_[data-header-slot=start]]:[--border:color-mix(in_srgb,var(--primary-foreground)_40%,transparent)]',\n          'ds:[&_[data-header-slot=start]]:[--muted:color-mix(in_srgb,var(--primary-foreground)_16%,transparent)]',\n          'ds:[&_[data-header-slot=start]]:[--ring:var(--primary-foreground)]',\n          'ds:[&_[data-header-slot=end]]:[--foreground:var(--primary-foreground)]',\n          'ds:[&_[data-header-slot=end]]:[--muted-foreground:var(--primary-foreground)]',\n          'ds:[&_[data-header-slot=end]]:[--border:color-mix(in_srgb,var(--primary-foreground)_40%,transparent)]',\n          'ds:[&_[data-header-slot=end]]:[--muted:color-mix(in_srgb,var(--primary-foreground)_16%,transparent)]',\n          'ds:[&_[data-header-slot=end]]:[--ring:var(--primary-foreground)]',\n        ].join(' '),\n        // Light surface — plain page background with primary-coloured chrome.\n        // Start + end slots rescope --foreground, --border, --ring to --primary\n        // so IconButton borders/icons render in the brand hue while the\n        // HeaderBrand wordmark keeps its bicolor artwork and the SearchBar\n        // (center slot) is untouched.\n        light: [\n          'ds:bg-[var(--background)] ds:text-[color:var(--foreground)]',\n          'ds:[&_[data-header-slot=start]]:[--foreground:var(--primary)]',\n          'ds:[&_[data-header-slot=start]]:[--border:var(--primary)]',\n          'ds:[&_[data-header-slot=start]]:[--ring:var(--primary)]',\n          'ds:[&_[data-header-slot=end]]:[--foreground:var(--primary)]',\n          'ds:[&_[data-header-slot=end]]:[--border:var(--primary)]',\n          'ds:[&_[data-header-slot=end]]:[--ring:var(--primary)]',\n        ].join(' '),\n      },\n    },\n    defaultVariants: {\n      variant: 'brand',\n    },\n  },\n);\n\nconst innerVariants = cva(\n  [\n    'ds:flex ds:items-center ds:gap-[var(--spacing-sm)]',\n    'ds:w-full ds:h-full',\n    'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n  ].join(' '),\n);\n\nconst slotStartVariants = cva('ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]');\nconst slotCenterVariants = cva(\n  'ds:hidden ds:md:flex ds:flex-1 ds:min-w-0 ds:items-center ds:justify-center ds:gap-[var(--spacing-sm)]',\n);\nconst slotEndVariants = cva('ds:ms-auto ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]');\n\nconst brandVariants = cva(\n  [\n    'ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]',\n    'ds:text-[length:var(--font-size-base)] ds:font-[var(--font-weight-semibold)]',\n    // `leading-none` zeros the anchor's line-height so the Logo SVG sits at\n    // the geometric centre of the flex cross-axis — otherwise the residual\n    // line-box above ascenders / below descenders nudges the SVG upward.\n    'ds:leading-none',\n    // Inherit foreground from the Header root so the `brand` variant's\n    // --primary-foreground ink cascades here without an override prop.\n    'ds:text-[color:currentColor]',\n    'ds:no-underline',\n    'ds:rounded-[var(--radius-sm)]',\n    'ds:focus-visible:outline-[length:var(--focus-ring-width)]',\n    'ds:focus-visible:outline-solid',\n    'ds:focus-visible:outline-[color:var(--ring)]',\n    'ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n    'ds:forced-colors:focus-visible:outline-[CanvasText]',\n    'ds:min-h-[var(--min-target-size)]',\n  ].join(' '),\n);\n\nconst brandDividerVariants = cva(\n  [\n    'ds:hidden ds:md:inline-block',\n    'ds:border-inline-start ds:border-[color:var(--border)]',\n    'ds:self-stretch ds:my-[var(--spacing-xs)]',\n  ].join(' '),\n);\n\nconst skipLinkVariants = cva(\n  [\n    'ds:sr-only ds:focus:not-sr-only',\n    'ds:focus:absolute ds:focus:inset-inline-start-[var(--spacing-sm)] ds:focus:inset-block-start-[var(--spacing-sm)]',\n    'ds:focus:z-[calc(var(--z-sticky)+1)]',\n    'ds:focus:ps-[var(--spacing-sm)] ds:focus:pe-[var(--spacing-sm)] ds:focus:pbs-[var(--spacing-xs)] ds:focus:pbe-[var(--spacing-xs)]',\n    'ds:focus:bg-[var(--background)] ds:focus:text-[color:var(--foreground)]',\n    'ds:focus:border ds:focus:border-[color:var(--border)]',\n    'ds:focus:rounded-[var(--radius-sm)]',\n    'ds:focus:outline-[length:var(--focus-ring-width)] ds:focus:outline-solid ds:focus:outline-[color:var(--ring)]',\n    'ds:forced-colors:focus:outline-[CanvasText]',\n  ].join(' '),\n);\n\n/* ------------------------------------------------------------------ */\n/* Root                                                                 */\n/* ------------------------------------------------------------------ */\n\nexport interface HeaderProps\n  extends Omit<HTMLAttributes<HTMLElement>, 'role' | 'children'>,\n    VariantProps<typeof rootVariants> {\n  children: ReactNode;\n  /** Override the default landmark name. */\n  'aria-label'?: string;\n  /** Enable the scroll-linked border + shadow (default `true`). */\n  scrollLinkedElevation?: boolean;\n}\n\nexport const Header = forwardRef<HTMLElement, HeaderProps>(\n  (\n    {\n      variant = 'brand',\n      className,\n      children,\n      scrollLinkedElevation = true,\n      'aria-label': ariaLabel,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n    const label = ariaLabel ?? t('navigation.header.label', 'Page header');\n\n    /* ---- Scroll-linked border / shadow ---------------------------- */\n    const sentinelRef = useRef<HTMLDivElement | null>(null);\n    const [scrolled, setScrolled] = useState(false);\n    useEffect(() => {\n      if (!scrollLinkedElevation) return undefined;\n      const sentinel = sentinelRef.current;\n      if (!sentinel) return undefined;\n      if (typeof IntersectionObserver === 'undefined') return undefined;\n      const io = new IntersectionObserver(\n        (entries) => {\n          const entry = entries[0];\n          // When the sentinel scrolls out of view (isIntersecting=false),\n          // the user has scrolled past the top — flip the elevation on.\n          setScrolled(!entry.isIntersecting);\n        },\n        { threshold: 0 },\n      );\n      io.observe(sentinel);\n      return () => io.disconnect();\n    }, [scrollLinkedElevation]);\n\n    return (\n      <>\n        {/* 1px sentinel above the sticky header so the IntersectionObserver\n            fires when the user scrolls past the top. Kept outside the\n            <header> so it doesn't affect landmark semantics. */}\n        {scrollLinkedElevation ? (\n          <div\n            ref={sentinelRef}\n            aria-hidden=\"true\"\n            className=\"ds:block ds:h-px ds:w-full\"\n          />\n        ) : null}\n        <header\n          ref={ref}\n          role=\"banner\"\n          aria-label={label}\n          data-component=\"header\"\n          data-scrolled={scrolled ? 'true' : undefined}\n          className={rootVariants({ variant, className })}\n          {...rest}\n        >\n          <div className={innerVariants()}>{children}</div>\n        </header>\n      </>\n    );\n  },\n);\nHeader.displayName = 'Header';\n\n/* ------------------------------------------------------------------ */\n/* Slot wrappers                                                        */\n/* ------------------------------------------------------------------ */\n\nexport const HeaderStart = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-header-slot=\"start\"\n      className={[slotStartVariants(), className].filter(Boolean).join(' ')}\n      {...props}\n    />\n  ),\n);\nHeaderStart.displayName = 'HeaderStart';\n\nexport const HeaderCenter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-header-slot=\"center\"\n      className={[slotCenterVariants(), className].filter(Boolean).join(' ')}\n      {...props}\n    />\n  ),\n);\nHeaderCenter.displayName = 'HeaderCenter';\n\nexport const HeaderEnd = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-header-slot=\"end\"\n      className={[slotEndVariants(), className].filter(Boolean).join(' ')}\n      {...props}\n    />\n  ),\n);\nHeaderEnd.displayName = 'HeaderEnd';\n\n/* ------------------------------------------------------------------ */\n/* Brand                                                                */\n/* ------------------------------------------------------------------ */\n\nexport interface HeaderBrandProps\n  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {\n  /** Logo slot — an <svg> / <img>. Must carry its own accessible name via aria-label on the wrapping component OR a visible wordmark child. */\n  logo?: ReactNode;\n  /** Visible wordmark / product name. Sits after the logo. */\n  children?: ReactNode;\n  /** Destination href. Defaults to \"/\". */\n  href?: string;\n}\n\nexport const HeaderBrand = forwardRef<HTMLAnchorElement, HeaderBrandProps>(\n  ({ logo, children, href = '/', className, ...props }, ref) => {\n    if (import.meta.env.DEV && !props['aria-label'] && !children) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'HeaderBrand: pass `aria-label` or visible children — a logo-only brand link without a name has no accessible name.',\n      );\n    }\n    return (\n      <a\n        ref={ref}\n        href={href}\n        className={[brandVariants(), className].filter(Boolean).join(' ')}\n        {...props}\n      >\n        {logo ? (\n          <span aria-hidden={children ? 'true' : undefined} className=\"ds:inline-flex ds:items-center\">\n            {logo}\n          </span>\n        ) : null}\n        {children ? <span className=\"ds:truncate\">{children}</span> : null}\n      </a>\n    );\n  },\n);\nHeaderBrand.displayName = 'HeaderBrand';\n\n/* ------------------------------------------------------------------ */\n/* Brand divider                                                        */\n/* ------------------------------------------------------------------ */\n\nexport function HeaderBrandDivider({\n  className,\n  ...props\n}: HTMLAttributes<HTMLSpanElement>): ReactNode {\n  return (\n    <span\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={[brandDividerVariants(), className].filter(Boolean).join(' ')}\n      {...props}\n    />\n  );\n}\n\n/* ------------------------------------------------------------------ */\n/* Menu button (mobile drawer trigger)                                  */\n/* ------------------------------------------------------------------ */\n\nexport interface HeaderMenuButtonProps {\n  onMenuOpen: () => void;\n  'aria-label'?: string;\n  className?: string;\n}\n\nexport const HeaderMenuButton = forwardRef<HTMLButtonElement, HeaderMenuButtonProps>(\n  ({ onMenuOpen, 'aria-label': ariaLabel, className }, ref) => {\n    const { t } = useTranslation();\n    return (\n      <IconButton\n        ref={ref}\n        // Show on mobile; hide above md breakpoint.\n        className={['ds:md:hidden', className].filter(Boolean).join(' ')}\n        icon={<Menu aria-hidden />}\n        aria-label={ariaLabel ?? t('navigation.sidebar.open', 'Open menu')}\n        onClick={onMenuOpen}\n      />\n    );\n  },\n);\nHeaderMenuButton.displayName = 'HeaderMenuButton';\n\n/* ------------------------------------------------------------------ */\n/* SkipLink                                                             */\n/* ------------------------------------------------------------------ */\n\nexport interface HeaderSkipLinkProps\n  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {\n  href: string;\n  children?: ReactNode;\n}\n\nexport const HeaderSkipLink = forwardRef<HTMLAnchorElement, HeaderSkipLinkProps>(\n  ({ href, children, className, ...props }, ref) => {\n    const { t } = useTranslation();\n    return (\n      <a\n        ref={ref}\n        href={href}\n        className={[skipLinkVariants(), className].filter(Boolean).join(' ')}\n        {...props}\n      >\n        {children ?? t('navigation.nav.skipToContent', 'Skip to content')}\n      </a>\n    );\n  },\n);\nHeaderSkipLink.displayName = 'HeaderSkipLink';\n"],"names":["__iconNode","Menu","createLucideIcon","rootVariants","cva","innerVariants","slotStartVariants","slotCenterVariants","slotEndVariants","brandVariants","brandDividerVariants","skipLinkVariants","Header","forwardRef","variant","className","children","scrollLinkedElevation","ariaLabel","rest","ref","t","useTranslation","label","sentinelRef","useRef","scrolled","setScrolled","useState","useEffect","sentinel","io","entries","entry","jsxs","Fragment","jsx","HeaderStart","props","HeaderCenter","HeaderEnd","HeaderBrand","logo","href","HeaderBrandDivider","HeaderMenuButton","onMenuOpen","IconButton","HeaderSkipLink"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/_chunks/{icon-button-SWpSs9S6.js → icon-button-CNjWCD1X.js}

@@ -1,8 +1,8 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as u } from "react";
 import { B as p } from "./button-7dTew-IV.js";
 import { c as h } from "./index-D2ZczOXr.js";
-import { T as b } from "./tooltip-Dp3u8jGz.js";
+import { T as b } from "./tooltip-DHik5yRI.js";
 const B = h("ds:p-0", {
   variants: {
     size: {
@@ -15,8 +15,8 @@ const B = h("ds:p-0", {
     size: "md"
   }
 }), w = u(
-  ({ icon: e, size: s, intent: i = "outline", className: o, tooltip: a, flipIconInRtl: l = !1, ...r }, c) => {
-    const d = r["aria-label"] || a, m = s === "sm" ? "size-4" : s === "lg" ? "size-5" : "size-[18px]", f = l ? "rtl:rotate-180" : "", n = /* @__PURE__ */ t(
+  ({ icon: e, size: s, intent: i = "outline", className: o, tooltip: t, flipIconInRtl: l = !1, ...n }, c) => {
+    const d = n["aria-label"] || t, m = s === "sm" ? "size-4" : s === "lg" ? "size-5" : "size-[18px]", f = l ? "rtl:rotate-180" : "", r = /* @__PURE__ */ a(
       p,
       {
         ref: c,
@@ -24,8 +24,9 @@ const B = h("ds:p-0", {
         intent: i,
         className: B({ size: s, className: o }),
         "aria-label": d,
-        ...r,
-        children: /* @__PURE__ */ t(
+        "data-component": "icon-button",
+        ...n,
+        children: /* @__PURE__ */ a(
           "span",
           {
             "aria-hidden": "true",
@@ -35,11 +36,11 @@ const B = h("ds:p-0", {
         )
       }
     );
-    return a ? /* @__PURE__ */ t(b, { label: a, children: n }) : n;
+    return t ? /* @__PURE__ */ a(b, { label: t, children: r }) : r;
   }
 );
 w.displayName = "IconButton";
 export {
   w as I
 };
-//# sourceMappingURL=icon-button-SWpSs9S6.js.map
+//# sourceMappingURL=icon-button-CNjWCD1X.js.map

package/dist/_chunks/icon-button-CNjWCD1X.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button-CNjWCD1X.js","sources":["../../src/components/button/icon-button.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { Button, type ButtonProps } from './button';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Tooltip } from '../tooltip';\n\nconst iconButtonVariants = cva('ds:p-0', {\n  variants: {\n    size: {\n      sm: 'ds:w-8 ds:h-8',\n      md: 'ds:w-10 ds:h-10',\n      lg: 'ds:w-12 ds:h-12',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nexport type IconButtonProps = Omit<\n  ButtonProps,\n  'startIcon' | 'endIcon' | 'children' | 'size' | 'flipIconInRtl'\n> &\n  VariantProps<typeof iconButtonVariants> & {\n    icon: React.ReactNode;\n    tooltip?: string;\n    'aria-label'?: string;\n    /**\n     * Mirror the icon horizontally in RTL. Default `false` — only enable\n     * for directional glyphs (arrows, chevrons). See Button.flipIconInRtl.\n     */\n    flipIconInRtl?: boolean;\n  };\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    { icon, size, intent = 'outline', className, tooltip, flipIconInRtl = false, ...props },\n    ref,\n  ) => {\n    const ariaLabel = props['aria-label'] || tooltip;\n\n    if (import.meta.env.DEV && !ariaLabel) {\n      console.warn('IconButton: aria-label or tooltip prop is required for accessibility.');\n    }\n\n    const iconSizeClass =\n      size === 'sm' ? 'size-4' : size === 'lg' ? 'size-5' : 'size-[18px]';\n    const iconFlipClass = flipIconInRtl ? 'rtl:rotate-180' : '';\n\n    const button = (\n      <Button\n        ref={ref}\n        size={size}\n        intent={intent}\n        className={iconButtonVariants({ size, className })}\n        aria-label={ariaLabel}\n        data-component=\"icon-button\"\n        {...props}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={`ds:inline-flex ds:items-center ds:justify-center ${iconSizeClass} ${iconFlipClass}`.trim()}\n        >\n          {icon}\n        </span>\n      </Button>\n    );\n\n    if (tooltip) {\n      return <Tooltip label={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n  },\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["iconButtonVariants","cva","IconButton","forwardRef","icon","size","intent","className","tooltip","flipIconInRtl","props","ref","ariaLabel","iconSizeClass","iconFlipClass","button","jsx","Button","Tooltip"],"mappings":";;;;;AAKA,MAAMA,IAAqBC,EAAI,UAAU;AAAA,EACvC,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC,GAiBYC,IAAaC;AAAA,EACxB,CACE,EAAE,MAAAC,GAAM,MAAAC,GAAM,QAAAC,IAAS,WAAW,WAAAC,GAAW,SAAAC,GAAS,eAAAC,IAAgB,IAAO,GAAGC,EAAA,GAChFC,MACG;AACH,UAAMC,IAAYF,EAAM,YAAY,KAAKF,GAMnCK,IACJR,MAAS,OAAO,WAAWA,MAAS,OAAO,WAAW,eAClDS,IAAgBL,IAAgB,mBAAmB,IAEnDM,IACJ,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAN;AAAA,QACA,MAAAN;AAAA,QACA,QAAAC;AAAA,QACA,WAAWN,EAAmB,EAAE,MAAAK,GAAM,WAAAE,GAAW;AAAA,QACjD,cAAYK;AAAA,QACZ,kBAAe;AAAA,QACd,GAAGF;AAAA,QAEJ,UAAA,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAW,oDAAoDH,CAAa,IAAIC,CAAa,GAAG,KAAA;AAAA,YAE/F,UAAAV;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAIJ,WAAII,sBACMU,GAAA,EAAQ,OAAOV,GAAU,UAAAO,GAAO,IAGnCA;AAAA,EACT;AACF;AAEAb,EAAW,cAAc;"}

package/dist/_chunks/{icon-button-group-BnhkUWUg.js → icon-button-group-DeV3FpNY.js}

@@ -1,7 +1,7 @@
 import { jsx as Z } from "react/jsx-runtime";
-import { forwardRef as _, useState as x, useCallback as D, useRef as j, useLayoutEffect as $, Children as ee, isValidElement as te, cloneElement as re } from "react";
-import { c as oe } from "./index-D2ZczOXr.js";
-const ne = oe(
+import { forwardRef as _, useState as x, useCallback as D, useRef as j, useLayoutEffect as $, Children as ee, isValidElement as te, cloneElement as oe } from "react";
+import { c as re } from "./index-D2ZczOXr.js";
+const ne = re(
   [
     "ds:inline-flex ds:isolate",
     // Hairline border around the group unifies the children into one
@@ -74,13 +74,13 @@ const ne = oe(
       return "";
     })(), y = D(
       (e) => {
-        var t, o;
+        var t, r;
         if (n === "toggle-single") {
-          const r = s;
-          r.value === void 0 && L(e), (t = r.onValueChange) == null || t.call(r, e);
+          const o = s;
+          o.value === void 0 && L(e), (t = o.onValueChange) == null || t.call(o, e);
         } else if (n === "toggle-multi") {
-          const r = s;
-          r.value === void 0 && L(e), (o = r.onValueChange) == null || o.call(r, e);
+          const o = s;
+          o.value === void 0 && L(e), (r = o.onValueChange) == null || r.call(o, e);
         }
       },
       [n, s]
@@ -103,16 +103,16 @@ const ne = oe(
         if (!h) return;
         const t = v.current.filter(Boolean).length;
         if (t === 0) return;
-        const o = u === "vertical" ? "ArrowDown" : C ? "ArrowLeft" : "ArrowRight", r = u === "vertical" ? "ArrowUp" : C ? "ArrowRight" : "ArrowLeft";
+        const r = u === "vertical" ? "ArrowDown" : C ? "ArrowLeft" : "ArrowRight", o = u === "vertical" ? "ArrowUp" : C ? "ArrowRight" : "ArrowLeft";
         let f = null;
-        if (e.key === o ? f = (w + 1) % t : e.key === r ? f = (w - 1 + t) % t : e.key === "Home" ? f = 0 : e.key === "End" && (f = t - 1), f === null) return;
+        if (e.key === r ? f = (w + 1) % t : e.key === o ? f = (w - 1 + t) % t : e.key === "Home" ? f = 0 : e.key === "End" && (f = t - 1), f === null) return;
         const V = t;
         let p = 0, a = f;
         for (; p < V; ) {
           const d = v.current[a];
           if (d && d.getAttribute("aria-disabled") !== "true" && !d.disabled)
             break;
-          a = e.key === r || e.key === "End" ? (a - 1 + t) % t : (a + 1) % t, p += 1;
+          a = e.key === o || e.key === "End" ? (a - 1 + t) % t : (a + 1) % t, p += 1;
         }
         if (e.preventDefault(), E(a), (k = v.current[a]) == null || k.focus(), l === "radiogroup" && n === "toggle-single") {
           const d = P.current[a];
@@ -128,36 +128,36 @@ const ne = oe(
     const q = K.map((e, t) => {
       if (!te(e))
         return e;
-      const o = e, r = o.props.value, { ariaPressed: f, ariaChecked: V } = se(
+      const r = e, o = r.props.value, { ariaPressed: f, ariaChecked: V } = se(
         n,
         l,
-        r,
+        o,
         A
-      ), p = T === !0, a = o.props.disabled === !0, k = (c) => {
+      ), p = T === !0, a = r.props.disabled === !0, k = (c) => {
         var i, m;
         if (p) {
           c.preventDefault(), c.stopPropagation();
           return;
         }
-        if ((m = (i = o.props).onClick) == null || m.call(i, c), !c.defaultPrevented && r) {
+        if ((m = (i = r.props).onClick) == null || m.call(i, c), !c.defaultPrevented && o) {
           if (n === "toggle-single") {
-            if (A === r) return;
-            y(r);
+            if (A === o) return;
+            y(o);
           } else if (n === "toggle-multi") {
-            const I = A, X = I.includes(r) ? I.filter((Y) => Y !== r) : [...I, r];
+            const I = A, X = I.includes(o) ? I.filter((Y) => Y !== o) : [...I, o];
             y(X);
           }
         }
       }, d = (c) => {
         O(t, c);
-        const i = o.ref;
+        const i = r.ref;
         typeof i == "function" ? i(c) : i != null && typeof i == "object" && (i.current = c);
       }, R = p && !a ? !0 : void 0, J = n !== "momentary" || p, Q = {
-        intent: o.props.intent ?? F,
-        size: o.props.size ?? b,
+        intent: r.props.intent ?? F,
+        size: r.props.size ?? b,
         disabled: a,
         "aria-disabled": R,
-        onClick: J ? k : o.props.onClick,
+        onClick: J ? k : r.props.onClick,
         "aria-pressed": f,
         "aria-checked": V,
         // When the group is a radiogroup, children must be `role="radio"`
@@ -168,11 +168,11 @@ const ne = oe(
         tabIndex: h ? t === w ? 0 : -1 : void 0,
         onFocus: (c) => {
           var i, m;
-          h && E(t), (m = (i = o.props).onFocus) == null || m.call(i, c);
+          h && E(t), (m = (i = r.props).onFocus) == null || m.call(i, c);
         },
         ref: d
       };
-      return re(o, Q);
+      return oe(r, Q);
     });
     return /* @__PURE__ */ Z(
       "div",
@@ -186,6 +186,7 @@ const ne = oe(
         "aria-orientation": l === "toolbar" ? u : void 0,
         onKeyDown: W,
         className: ne({ orientation: u, className: G }),
+        "data-component": "icon-button-group",
         ...M,
         children: q
       }
@@ -201,4 +202,4 @@ function se(s, g, b, u) {
 export {
   ie as I
 };
-//# sourceMappingURL=icon-button-group-BnhkUWUg.js.map
+//# sourceMappingURL=icon-button-group-DeV3FpNY.js.map