@alfadocs/ui-kit-debug 0.42.0 → 0.44.0

package/dist/_chunks/gestational-age-calculator-sRmoqgVr.js

@@ -0,0 +1,190 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { forwardRef as L, useState as f, useMemo as m, useEffect as I } from "react";
+import { c as S } from "./index-D2ZczOXr.js";
+import { useTranslation as k } from "react-i18next";
+import { R as h } from "./radio-TWf9Q-mp.js";
+import { R as B } from "./radio-group-CLjK-SlK.js";
+import { F } from "./form-field-BOm9hK35.js";
+import { D as M } from "./date-picker-Bq7xhMA-.js";
+import { C as x } from "./card-DPmk26CL.js";
+import { B as A } from "./badge-zsf5i5bH.js";
+import { I as R } from "./insert-result-CoC1oo6R.js";
+import { c as _, g as j, G as H } from "./gestation-mWF4AXea.js";
+import { s as z } from "./subDays-Dv7q9S7u.js";
+import { i as O } from "./date-picker-variants-DLi1Va_e.js";
+const V = S("ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]", {
+  variants: {
+    width: { full: "ds:w-full", auto: "ds:inline-flex" }
+  },
+  defaultVariants: { width: "full" }
+}), K = {
+  preconception: "neutral",
+  first: "info",
+  second: "success",
+  third: "warning",
+  postterm: "error"
+}, P = {
+  preconception: "--muted",
+  first: "--info",
+  second: "--success",
+  third: "--warning",
+  postterm: "--destructive"
+}, Y = L(
+  ({
+    defaultMethod: v = "lmp",
+    onResultChange: d,
+    onInsert: g,
+    insertVariant: u = "insert",
+    onCopy: b,
+    onError: y,
+    insertBrand: C,
+    id: N,
+    width: D,
+    className: T
+  }, w) => {
+    const { t: e, i18n: p } = k(), [o, G] = f(v), [i, $] = f(void 0), n = m(() => /* @__PURE__ */ new Date(), []), a = m(() => {
+      if (!i) return null;
+      const s = o === "lmp" ? i : z(i, H), r = _({ method: "lmp", date: s }, n);
+      return {
+        result: {
+          gestationalAge: r.gestationalAge,
+          trimester: r.trimester,
+          dueDate: r.dueDate
+        },
+        milestones: j(r.gestationalStart)
+      };
+    }, [o, i, n]), E = m(
+      () => new Intl.DateTimeFormat(p.language, { dateStyle: "medium" }),
+      [p.language]
+    );
+    I(() => {
+      d == null || d((a == null ? void 0 : a.result) ?? null);
+    }, [a, d]);
+    const c = (s) => s ? e("gestationalAgeCalculator.gestation", {
+      weeks: s.weeks,
+      days: s.days
+    }) : "—";
+    return /* @__PURE__ */ l(
+      "div",
+      {
+        ref: w,
+        "data-component": "gestational-age-calculator",
+        "data-component-id": N,
+        className: V({ width: D, className: T }),
+        children: [
+          /* @__PURE__ */ l(
+            B,
+            {
+              label: e("gestationalAgeCalculator.method.label"),
+              variant: "horizontal",
+              value: o,
+              onValueChange: (s) => G(s),
+              children: [
+                /* @__PURE__ */ t(h, { label: e("gestationalAgeCalculator.method.lmp"), value: "lmp" }),
+                /* @__PURE__ */ t(h, { label: e("gestationalAgeCalculator.method.edd"), value: "edd" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ t(
+            F,
+            {
+              label: e(
+                o === "lmp" ? "gestationalAgeCalculator.lmpDate" : "gestationalAgeCalculator.eddDate"
+              ),
+              children: /* @__PURE__ */ t(
+                M,
+                {
+                  value: i,
+                  onChange: $,
+                  maxDate: o === "lmp" ? n : void 0
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ t("p", { className: "ds:sr-only", role: "status", "aria-live": "polite", children: a ? `${e("gestationalAgeCalculator.gestationLabel")}: ${c(
+            a.result.gestationalAge
+          )}. ${e("gestationalAgeCalculator.trimesterLabel")}: ${e(
+            `gestationalAgeCalculator.trimester.${a.result.trimester}`
+          )}.` : "" }),
+          a ? /* @__PURE__ */ t(x, { variant: "elevated", children: /* @__PURE__ */ l(x.Body, { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: [
+            /* @__PURE__ */ l("dl", { className: "ds:grid ds:grid-cols-1 ds:gap-[var(--spacing-md)] ds:sm:grid-cols-2", children: [
+              /* @__PURE__ */ l("div", { className: "ds:flex ds:flex-col ds:items-start ds:gap-[var(--spacing-xs)]", children: [
+                /* @__PURE__ */ t("dt", { className: "type-label ds:text-muted-foreground", children: e("gestationalAgeCalculator.trimesterLabel") }),
+                /* @__PURE__ */ t("dd", { children: /* @__PURE__ */ t(
+                  A,
+                  {
+                    variant: K[a.result.trimester],
+                    size: "lg",
+                    children: e(
+                      `gestationalAgeCalculator.trimester.${a.result.trimester}`
+                    )
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ l("div", { className: "ds:flex ds:flex-col ds:items-end ds:gap-[var(--spacing-xs)] ds:text-end", children: [
+                /* @__PURE__ */ t("dt", { className: "type-label ds:text-muted-foreground", children: e("gestationalAgeCalculator.gestationLabel") }),
+                /* @__PURE__ */ t("dd", { className: "type-metric ds:text-foreground", children: c(a.result.gestationalAge) })
+              ] })
+            ] }),
+            /* @__PURE__ */ l("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+              /* @__PURE__ */ t("span", { className: "type-label ds:text-muted-foreground", children: e("gestationalAgeCalculator.milestonesLabel") }),
+              /* @__PURE__ */ t("ul", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: a.milestones.map((s) => {
+                const r = O(n, s.date);
+                return /* @__PURE__ */ l(
+                  "li",
+                  {
+                    className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-md)]",
+                    children: [
+                      /* @__PURE__ */ t("span", { className: "type-body ds:text-foreground", children: e(`gestationalAgeCalculator.milestone.${s.key}`) }),
+                      /* @__PURE__ */ l("span", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]", children: [
+                        /* @__PURE__ */ t("span", { className: "type-body ds:text-muted-foreground", children: E.format(s.date) }),
+                        r ? /* @__PURE__ */ t(A, { variant: "success", children: e("gestationalAgeCalculator.reached") }) : null
+                      ] })
+                    ]
+                  },
+                  s.key
+                );
+              }) })
+            ] }),
+            u === "copy" || g ? /* @__PURE__ */ t(
+              R,
+              {
+                onInsert: g,
+                variant: u,
+                onCopy: b,
+                onError: y,
+                card: {
+                  title: e("insert.title.gestationalAge"),
+                  highlight: e(
+                    `gestationalAgeCalculator.trimester.${a.result.trimester}`
+                  ),
+                  // Chip shares the trimester's semantic token so the
+                  // inserted PNG chip matches the on-screen trimester badge.
+                  highlightToken: P[a.result.trimester],
+                  brand: C,
+                  fields: [
+                    {
+                      label: e("gestationalAgeCalculator.gestationLabel"),
+                      value: c(a.result.gestationalAge)
+                    },
+                    {
+                      label: e("gestationalAgeCalculator.trimesterLabel"),
+                      value: e(
+                        `gestationalAgeCalculator.trimester.${a.result.trimester}`
+                      )
+                    }
+                  ]
+                }
+              }
+            ) : null
+          ] }) }) : /* @__PURE__ */ t("p", { className: "type-body ds:text-muted-foreground", children: e("gestationalAgeCalculator.empty") })
+        ]
+      }
+    );
+  }
+);
+Y.displayName = "GestationalAgeCalculator";
+export {
+  Y as G
+};
+//# sourceMappingURL=gestational-age-calculator-sRmoqgVr.js.map

package/dist/_chunks/gestational-age-calculator-sRmoqgVr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gestational-age-calculator-sRmoqgVr.js","sources":["../../src/components/gestational-age-calculator/gestational-age-calculator.tsx"],"sourcesContent":["/* ------------------------------------------------------------------ */\n/* GestationalAgeCalculator — current gestational age, trimester and     */\n/* milestone dates, from either a known LMP or a known due date.         */\n/*                                                                     */\n/* Reuses the shared `gestation` maths from due-date-calculator: GA day  */\n/* 0 is the LMP; from an EDD we back out LMP = EDD − 280 days.           */\n/* ------------------------------------------------------------------ */\n\nimport { forwardRef, useEffect, useMemo, useState } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { subDays, isAfter } from 'date-fns';\nimport { RadioGroup, Radio } from '../radio-group';\nimport { FormField } from '../form-field';\nimport { DatePicker } from '../date-picker';\nimport { Card } from '../card';\nimport { Badge } from '../badge';\nimport {\n  InsertButton,\n  type InsertPayload,\n  type InsertVariant,\n  type InsertMode,\n} from '../_shared/insert-result';\nimport {\n  type Trimester,\n  type GestationalAge,\n  computeDueDate,\n  gestationalMilestones,\n  GESTATION_DAYS,\n} from '../due-date-calculator';\n\nconst rootVariants = cva('ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]', {\n  variants: {\n    width: { full: 'ds:w-full', auto: 'ds:inline-flex' },\n  },\n  defaultVariants: { width: 'full' },\n});\n\nconst TRIMESTER_BADGE: Record<\n  Trimester,\n  'neutral' | 'info' | 'success' | 'warning' | 'error'\n> = {\n  preconception: 'neutral',\n  first: 'info',\n  second: 'success',\n  third: 'warning',\n  postterm: 'error',\n};\n\n/**\n * DS token NAME backing each trimester's result-card chip — the solid-fill\n * companion of the on-screen `TRIMESTER_BADGE` variant (Badge `error` fills\n * `--destructive`; `neutral` fills `--muted`). Passed as the card's\n * `highlightToken` so the inserted PNG chip matches the on-screen trimester\n * badge; `InsertButton` resolves the name to a concrete colour at raster time.\n */\nconst TRIMESTER_HIGHLIGHT_TOKEN: Record<Trimester, string> = {\n  preconception: '--muted',\n  first: '--info',\n  second: '--success',\n  third: '--warning',\n  postterm: '--destructive',\n};\n\ntype DateMethod = 'lmp' | 'edd';\n\nexport interface GestationalAgeResult {\n  gestationalAge: GestationalAge | null;\n  trimester: Trimester;\n  dueDate: Date;\n}\n\nexport interface GestationalAgeCalculatorProps extends VariantProps<\n  typeof rootVariants\n> {\n  /** Whether the input date is the last period (`lmp`) or the due date (`edd`). */\n  defaultMethod?: DateMethod;\n  /** Fires whenever a result can be computed (and `null` when it can't). */\n  onResultChange?: (result: GestationalAgeResult | null) => void;\n  /** When provided, shows the result-action buttons that emit / copy the result. */\n  onInsert?: (payload: InsertPayload) => void;\n  /**\n   * Which verb the result button performs. Defaults to `'insert'`.\n   * Use `'copy'` in an app-shell surface (no editor to insert into) — the\n   * button writes the result to the clipboard as a multi-format `ClipboardItem`.\n   */\n  insertVariant?: InsertVariant;\n  /** `copy` variant only — fired after a successful clipboard write. */\n  onCopy?: (mode: InsertMode) => void;\n  /** `copy` variant only — fired if the clipboard write can't proceed. */\n  onError?: (error: unknown) => void;\n  /**\n   * Brand wordmark printed in the inserted/copied result-card footer.\n   * Omitted → the default `'AlfaDocs'` wordmark; a string overrides it;\n   * `false` removes the brand line.\n   */\n  insertBrand?: string | false;\n  /** Opaque instance id, emitted as `data-component-id`. */\n  id?: string;\n  /** Extra class names on the wrapper. */\n  className?: string;\n}\n\nexport const GestationalAgeCalculator = forwardRef<\n  HTMLDivElement,\n  GestationalAgeCalculatorProps\n>(\n  (\n    {\n      defaultMethod = 'lmp',\n      onResultChange,\n      onInsert,\n      insertVariant = 'insert',\n      onCopy,\n      onError,\n      insertBrand,\n      id,\n      width,\n      className,\n    },\n    ref,\n  ) => {\n    const { t, i18n } = useTranslation();\n\n    const [method, setMethod] = useState<DateMethod>(defaultMethod);\n    const [refDate, setRefDate] = useState<Date | undefined>(undefined);\n\n    const today = useMemo(() => new Date(), []);\n\n    const data = useMemo(() => {\n      if (!refDate) return null;\n      // Normalise to an LMP, then reuse the shared gestation maths.\n      const lmp = method === 'lmp' ? refDate : subDays(refDate, GESTATION_DAYS);\n      const r = computeDueDate({ method: 'lmp', date: lmp }, today);\n      return {\n        result: {\n          gestationalAge: r.gestationalAge,\n          trimester: r.trimester,\n          dueDate: r.dueDate,\n        } satisfies GestationalAgeResult,\n        milestones: gestationalMilestones(r.gestationalStart),\n      };\n    }, [method, refDate, today]);\n\n    const dateFormatter = useMemo(\n      () => new Intl.DateTimeFormat(i18n.language, { dateStyle: 'medium' }),\n      [i18n.language],\n    );\n\n    useEffect(() => {\n      onResultChange?.(data?.result ?? null);\n    }, [data, onResultChange]);\n\n    const gaText = (ga: GestationalAge | null): string =>\n      ga\n        ? t('gestationalAgeCalculator.gestation', {\n            weeks: ga.weeks,\n            days: ga.days,\n          })\n        : '—';\n\n    return (\n      <div\n        ref={ref}\n        data-component=\"gestational-age-calculator\"\n        data-component-id={id}\n        className={rootVariants({ width, className })}\n      >\n        <RadioGroup\n          label={t('gestationalAgeCalculator.method.label')}\n          variant=\"horizontal\"\n          value={method}\n          onValueChange={(next) => setMethod(next as DateMethod)}\n        >\n          <Radio label={t('gestationalAgeCalculator.method.lmp')} value=\"lmp\" />\n          <Radio label={t('gestationalAgeCalculator.method.edd')} value=\"edd\" />\n        </RadioGroup>\n\n        <FormField\n          label={t(\n            method === 'lmp'\n              ? 'gestationalAgeCalculator.lmpDate'\n              : 'gestationalAgeCalculator.eddDate',\n          )}\n        >\n          <DatePicker\n            value={refDate}\n            onChange={setRefDate}\n            maxDate={method === 'lmp' ? today : undefined}\n          />\n        </FormField>\n\n        <p className=\"ds:sr-only\" role=\"status\" aria-live=\"polite\">\n          {data\n            ? `${t('gestationalAgeCalculator.gestationLabel')}: ${gaText(\n                data.result.gestationalAge,\n              )}. ${t('gestationalAgeCalculator.trimesterLabel')}: ${t(\n                `gestationalAgeCalculator.trimester.${data.result.trimester}`,\n              )}.`\n            : ''}\n        </p>\n\n        {data ? (\n          <Card variant=\"elevated\">\n            <Card.Body className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-md)]\">\n              <dl className=\"ds:grid ds:grid-cols-1 ds:gap-[var(--spacing-md)] ds:sm:grid-cols-2\">\n                <div className=\"ds:flex ds:flex-col ds:items-start ds:gap-[var(--spacing-xs)]\">\n                  <dt className=\"type-label ds:text-muted-foreground\">\n                    {t('gestationalAgeCalculator.trimesterLabel')}\n                  </dt>\n                  <dd>\n                    <Badge\n                      variant={TRIMESTER_BADGE[data.result.trimester]}\n                      size=\"lg\"\n                    >\n                      {t(\n                        `gestationalAgeCalculator.trimester.${data.result.trimester}`,\n                      )}\n                    </Badge>\n                  </dd>\n                </div>\n                <div className=\"ds:flex ds:flex-col ds:items-end ds:gap-[var(--spacing-xs)] ds:text-end\">\n                  <dt className=\"type-label ds:text-muted-foreground\">\n                    {t('gestationalAgeCalculator.gestationLabel')}\n                  </dt>\n                  <dd className=\"type-metric ds:text-foreground\">\n                    {gaText(data.result.gestationalAge)}\n                  </dd>\n                </div>\n              </dl>\n\n              <div className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]\">\n                <span className=\"type-label ds:text-muted-foreground\">\n                  {t('gestationalAgeCalculator.milestonesLabel')}\n                </span>\n                <ul className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]\">\n                  {data.milestones.map((m) => {\n                    const reached = isAfter(today, m.date);\n                    return (\n                      <li\n                        key={m.key}\n                        className=\"ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-md)]\"\n                      >\n                        <span className=\"type-body ds:text-foreground\">\n                          {t(`gestationalAgeCalculator.milestone.${m.key}`)}\n                        </span>\n                        <span className=\"ds:flex ds:items-center ds:gap-[var(--spacing-sm)]\">\n                          <span className=\"type-body ds:text-muted-foreground\">\n                            {dateFormatter.format(m.date)}\n                          </span>\n                          {reached ? (\n                            <Badge variant=\"success\">\n                              {t('gestationalAgeCalculator.reached')}\n                            </Badge>\n                          ) : null}\n                        </span>\n                      </li>\n                    );\n                  })}\n                </ul>\n              </div>\n              {insertVariant === 'copy' || onInsert ? (\n                <InsertButton\n                  onInsert={onInsert}\n                  variant={insertVariant}\n                  onCopy={onCopy}\n                  onError={onError}\n                  card={{\n                    title: t('insert.title.gestationalAge'),\n                    highlight: t(\n                      `gestationalAgeCalculator.trimester.${data.result.trimester}`,\n                    ),\n                    // Chip shares the trimester's semantic token so the\n                    // inserted PNG chip matches the on-screen trimester badge.\n                    highlightToken:\n                      TRIMESTER_HIGHLIGHT_TOKEN[data.result.trimester],\n                    brand: insertBrand,\n                    fields: [\n                      {\n                        label: t('gestationalAgeCalculator.gestationLabel'),\n                        value: gaText(data.result.gestationalAge),\n                      },\n                      {\n                        label: t('gestationalAgeCalculator.trimesterLabel'),\n                        value: t(\n                          `gestationalAgeCalculator.trimester.${data.result.trimester}`,\n                        ),\n                      },\n                    ],\n                  }}\n                />\n              ) : null}\n            </Card.Body>\n          </Card>\n        ) : (\n          <p className=\"type-body ds:text-muted-foreground\">\n            {t('gestationalAgeCalculator.empty')}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\n\nGestationalAgeCalculator.displayName = 'GestationalAgeCalculator';\n"],"names":["rootVariants","cva","TRIMESTER_BADGE","TRIMESTER_HIGHLIGHT_TOKEN","GestationalAgeCalculator","forwardRef","defaultMethod","onResultChange","onInsert","insertVariant","onCopy","onError","insertBrand","id","width","className","ref","t","i18n","useTranslation","method","setMethod","useState","refDate","setRefDate","today","useMemo","data","lmp","subDays","GESTATION_DAYS","computeDueDate","gestationalMilestones","dateFormatter","useEffect","gaText","ga","jsxs","RadioGroup","next","jsx","Radio","FormField","DatePicker","Card","Badge","m","reached","isAfter","InsertButton"],"mappings":"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"}

package/dist/_chunks/{header-CTZWX-tm.js → header-Ce1Br27u.js}

@@ -1,10 +1,11 @@
-import { jsxs as v, Fragment as y, jsx as s } from "react/jsx-runtime";
-import { forwardRef as t, useRef as k, useState as N, useEffect as j } from "react";
+import { jsxs as g, Fragment as y, jsx as s } from "react/jsx-runtime";
+import { forwardRef as t, useRef as N, useState as k, 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-CKEOrN37.js";
-import { M as w } from "./menu-XRhW3_99.js";
-const B = o(
+import { Slot as H } from "@radix-ui/react-slot";
+import { useTranslation as u } from "react-i18next";
+import { I as w } from "./icon-button-CKEOrN37.js";
+import { M as B } from "./menu-XRhW3_99.js";
+const C = o(
   [
     "ds:w-full",
     // Fixed height — a Header is always the `lg` token (64px). Using `h-*`
@@ -96,7 +97,7 @@ const B = o(
       variant: "brand"
     }
   }
-), C = o(
+), S = o(
   [
     "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]",
     "ds:w-full ds:h-full",
@@ -104,11 +105,11 @@ const B = o(
   ].join(" ")
 ), V = o(
   "ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]"
-), S = o(
-  "ds:hidden ds:md:flex ds:flex-1 ds:min-w-0 ds:items-center ds:justify-center ds:gap-[var(--spacing-sm)]"
 ), z = o(
-  "ds:ms-auto ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]"
+  "ds:hidden ds:md:flex ds:flex-1 ds:min-w-0 ds:items-center ds:justify-center ds:gap-[var(--spacing-sm)]"
 ), I = o(
+  "ds:ms-auto ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]"
+), T = o(
   [
     "ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]",
     "ds:text-[length:var(--font-size-base)] ds:font-[var(--font-weight-semibold)]",
@@ -128,13 +129,13 @@ const B = o(
     "ds:forced-colors:focus-visible:outline-[CanvasText]",
     "ds:min-h-[var(--min-target-size)]"
   ].join(" ")
-), T = o(
+), M = o(
   [
     "ds:hidden ds:md:inline-block",
     "ds:border-inline-start ds:border-[color:var(--border)]",
     "ds:self-stretch ds:my-[var(--spacing-xs)]"
   ].join(" ")
-), M = o(
+), O = o(
   [
     "ds:sr-only ds:focus:not-sr-only",
     "ds:focus:absolute ds:focus:inset-inline-start-[var(--spacing-sm)] ds:focus:inset-block-start-[var(--spacing-sm)]",
@@ -146,7 +147,7 @@ const B = o(
     "ds:focus:outline-[length:var(--focus-ring-width)] ds:focus:outline-solid ds:focus:outline-[color:var(--ring)]",
     "ds:forced-colors:focus:outline-[CanvasText]"
   ].join(" ")
-), O = t(
+), R = t(
   ({
     variant: e = "brand",
     className: r,
@@ -154,25 +155,25 @@ const B = o(
     scrollLinkedElevation: d = !0,
     "aria-label": n,
     ...i
-  }, m) => {
-    const { t: g } = l(), h = n ?? g("navigation.header.label", "Page header"), c = k(null), [p, b] = N(!1);
+  }, l) => {
+    const { t: c } = u(), h = n ?? c("navigation.header.label", "Page header"), f = N(null), [p, b] = k(!1);
     return j(() => {
       if (!d) return;
-      const u = c.current;
-      if (!u || typeof IntersectionObserver > "u") return;
-      const f = new IntersectionObserver(
+      const v = f.current;
+      if (!v || typeof IntersectionObserver > "u") return;
+      const m = new IntersectionObserver(
         (x) => {
           const _ = x[0];
           b(!_.isIntersecting);
         },
         { threshold: 0 }
       );
-      return f.observe(u), () => f.disconnect();
-    }, [d]), /* @__PURE__ */ v(y, { children: [
+      return m.observe(v), () => m.disconnect();
+    }, [d]), /* @__PURE__ */ g(y, { children: [
       d ? /* @__PURE__ */ s(
         "div",
         {
-          ref: c,
+          ref: f,
           "aria-hidden": "true",
           className: "ds:block ds:h-px ds:w-full"
         }
@@ -180,21 +181,21 @@ const B = o(
       /* @__PURE__ */ s(
         "header",
         {
-          ref: m,
+          ref: l,
           role: "banner",
           "aria-label": h,
           "data-component": "header",
           "data-scrolled": p ? "true" : void 0,
-          className: B({ variant: e, className: r }),
+          className: C({ variant: e, className: r }),
           ...i,
-          children: /* @__PURE__ */ s("div", { className: C(), children: a })
+          children: /* @__PURE__ */ s("div", { className: S(), children: a })
         }
       )
     ] });
   }
 );
-O.displayName = "Header";
-const R = t(({ className: e, ...r }, a) => /* @__PURE__ */ s(
+R.displayName = "Header";
+const D = t(({ className: e, ...r }, a) => /* @__PURE__ */ s(
   "div",
   {
     ref: a,
@@ -203,51 +204,45 @@ const R = t(({ className: e, ...r }, a) => /* @__PURE__ */ s(
     ...r
   }
 ));
-R.displayName = "HeaderStart";
-const D = t(({ className: e, ...r }, a) => /* @__PURE__ */ s(
+D.displayName = "HeaderStart";
+const E = t(({ className: e, ...r }, a) => /* @__PURE__ */ s(
   "div",
   {
     ref: a,
     "data-header-slot": "center",
-    className: [S(), e].filter(Boolean).join(" "),
+    className: [z(), e].filter(Boolean).join(" "),
     ...r
   }
 ));
-D.displayName = "HeaderCenter";
-const E = t(({ className: e, ...r }, a) => /* @__PURE__ */ s(
+E.displayName = "HeaderCenter";
+const F = t(({ className: e, ...r }, a) => /* @__PURE__ */ s(
   "div",
   {
     ref: a,
     "data-header-slot": "end",
-    className: [z(), e].filter(Boolean).join(" "),
+    className: [I(), e].filter(Boolean).join(" "),
     ...r
   }
 ));
-E.displayName = "HeaderEnd";
-const F = t(
-  ({ logo: e, children: r, href: a = "/", className: d, ...n }, i) => /* @__PURE__ */ v(
-    "a",
-    {
-      ref: i,
-      href: a,
-      className: [I(), d].filter(Boolean).join(" "),
-      ...n,
-      children: [
-        e ? /* @__PURE__ */ s(
-          "span",
-          {
-            "aria-hidden": r ? "true" : void 0,
-            className: "ds:inline-flex ds:items-center",
-            children: e
-          }
-        ) : null,
-        r ? /* @__PURE__ */ s("span", { className: "ds:truncate", children: r }) : null
-      ]
-    }
-  )
+F.displayName = "HeaderEnd";
+const L = t(
+  ({ logo: e, children: r, href: a = "/", className: d, asChild: n = !1, ...i }, l) => {
+    const c = [T(), d].filter(Boolean).join(" ");
+    return n ? /* @__PURE__ */ s(H, { ref: l, className: c, ...i, children: r }) : /* @__PURE__ */ g("a", { ref: l, href: a, className: c, ...i, children: [
+      e ? /* @__PURE__ */ s(
+        "span",
+        {
+          "aria-hidden": r ? "true" : void 0,
+          className: "ds:inline-flex ds:items-center",
+          children: e
+        }
+      ) : null,
+      r ? /* @__PURE__ */ s("span", { className: "ds:truncate", children: r }) : null
+    ] });
+  }
 );
-F.displayName = "HeaderBrand";
-function U({
+L.displayName = "HeaderBrand";
+function X({
   className: e,
   ...r
 }) {
@@ -256,47 +251,47 @@ function U({
     {
       role: "presentation",
       "aria-hidden": "true",
-      className: [T(), e].filter(Boolean).join(" "),
+      className: [M(), e].filter(Boolean).join(" "),
       ...r
     }
   );
 }
-const L = t(({ onMenuOpen: e, "aria-label": r, className: a }, d) => {
-  const { t: n } = l();
+const P = t(({ onMenuOpen: e, "aria-label": r, className: a }, d) => {
+  const { t: n } = u();
   return /* @__PURE__ */ s(
-    H,
+    w,
     {
       ref: d,
       className: ["ds:md:hidden", a].filter(Boolean).join(" "),
-      icon: /* @__PURE__ */ s(w, { "aria-hidden": !0 }),
+      icon: /* @__PURE__ */ s(B, { "aria-hidden": !0 }),
       "aria-label": r ?? n("navigation.sidebar.open", "Open menu"),
       onClick: e
     }
   );
 });
-L.displayName = "HeaderMenuButton";
-const P = t(({ href: e, children: r, className: a, ...d }, n) => {
-  const { t: i } = l();
+P.displayName = "HeaderMenuButton";
+const q = t(({ href: e, children: r, className: a, ...d }, n) => {
+  const { t: i } = u();
   return /* @__PURE__ */ s(
     "a",
     {
       ref: n,
       href: e,
-      className: [M(), a].filter(Boolean).join(" "),
+      className: [O(), a].filter(Boolean).join(" "),
       ...d,
       children: r ?? i("navigation.nav.skipToContent", "Skip to content")
     }
   );
 });
-P.displayName = "HeaderSkipLink";
+q.displayName = "HeaderSkipLink";
 export {
-  O as H,
-  F as a,
-  U as b,
-  D as c,
-  E as d,
-  L as e,
-  P as f,
-  R as g
+  R as H,
+  L as a,
+  X as b,
+  E as c,
+  F as d,
+  P as e,
+  q as f,
+  D as g
 };
-//# sourceMappingURL=header-CTZWX-tm.js.map
+//# sourceMappingURL=header-Ce1Br27u.js.map

package/dist/_chunks/header-Ce1Br27u.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-Ce1Br27u.js","sources":["../../src/components/header/header.tsx"],"sourcesContent":["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 { Slot } from '@radix-ui/react-slot';\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(--header-foreground)]',\n          'ds:[.theme-dark_&]:bg-[var(--background)]',\n          'ds:[&_[data-header-slot=start]]:[--foreground:var(--header-foreground)]',\n          'ds:[&_[data-header-slot=start]]:[--muted-foreground:var(--header-foreground)]',\n          'ds:[&_[data-header-slot=start]]:[--border:color-mix(in_srgb,var(--header-foreground)_40%,transparent)]',\n          'ds:[&_[data-header-slot=start]]:[--muted:color-mix(in_srgb,var(--header-foreground)_16%,transparent)]',\n          'ds:[&_[data-header-slot=start]]:[--ring:var(--header-foreground)]',\n          'ds:[&_[data-header-slot=end]]:[--foreground:var(--header-foreground)]',\n          'ds:[&_[data-header-slot=end]]:[--muted-foreground:var(--header-foreground)]',\n          'ds:[&_[data-header-slot=end]]:[--border:color-mix(in_srgb,var(--header-foreground)_40%,transparent)]',\n          'ds:[&_[data-header-slot=end]]:[--muted:color-mix(in_srgb,var(--header-foreground)_16%,transparent)]',\n          'ds:[&_[data-header-slot=end]]:[--ring:var(--header-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(\n  'ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]',\n);\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(\n  'ds:ms-auto ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]',\n);\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\n    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<\n  HTMLDivElement,\n  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));\nHeaderStart.displayName = 'HeaderStart';\n\nexport const HeaderCenter = forwardRef<\n  HTMLDivElement,\n  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));\nHeaderCenter.displayName = 'HeaderCenter';\n\nexport const HeaderEnd = forwardRef<\n  HTMLDivElement,\n  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));\nHeaderEnd.displayName = 'HeaderEnd';\n\n/* ------------------------------------------------------------------ */\n/* Brand                                                                */\n/* ------------------------------------------------------------------ */\n\nexport interface HeaderBrandProps extends Omit<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  'children'\n> {\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   * Render through Radix `Slot` so a consumer's router link (`<Link>`) takes\n   * over the brand anchor while keeping the kit's `brandVariants` styling and\n   * any forwarded `aria-label`. Pass a single link element as `children` (the\n   * logo + wordmark go inside it). With `asChild` off the output is the plain\n   * `<a href>` exactly as before.\n   */\n  asChild?: boolean;\n}\n\nexport const HeaderBrand = forwardRef<HTMLAnchorElement, HeaderBrandProps>(\n  (\n    { logo, children, href = '/', className, asChild = false, ...props },\n    ref,\n  ) => {\n    if (import.meta.env.DEV && !props['aria-label'] && !children) {\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    const brandClassName = [brandVariants(), className]\n      .filter(Boolean)\n      .join(' ');\n\n    // Consumer-router mode: the consumer supplies their own link element as\n    // `children`; Slot merges the kit's brand class + forwarded props onto it\n    // so the lockup styling and any aria-label survive. The logo + wordmark\n    // live inside the consumer's element (it owns the click → client route).\n    if (asChild) {\n      return (\n        <Slot ref={ref} className={brandClassName} {...props}>\n          {children}\n        </Slot>\n      );\n    }\n\n    return (\n      <a ref={ref} href={href} className={brandClassName} {...props}>\n        {logo ? (\n          <span\n            aria-hidden={children ? 'true' : undefined}\n            className=\"ds:inline-flex ds:items-center\"\n          >\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<\n  HTMLButtonElement,\n  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});\nHeaderMenuButton.displayName = 'HeaderMenuButton';\n\n/* ------------------------------------------------------------------ */\n/* SkipLink                                                             */\n/* ------------------------------------------------------------------ */\n\nexport interface HeaderSkipLinkProps extends Omit<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  'children'\n> {\n  href: string;\n  children?: ReactNode;\n}\n\nexport const HeaderSkipLink = forwardRef<\n  HTMLAnchorElement,\n  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});\nHeaderSkipLink.displayName = 'HeaderSkipLink';\n"],"names":["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","asChild","brandClassName","Slot","HeaderBrandDivider","HeaderMenuButton","onMenuOpen","IconButton","Menu","HeaderSkipLink"],"mappings":"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"}

package/dist/_chunks/{hi-wkq_rQAh.js → hi-Dj3oYd84.js}

@@ -1,4 +1,4 @@
-import { q as o, o as s, r, v as u } from "./react-day-picker-CdtIiKjx.js";
+import { r as o, q as s, v as r, w as u } from "./date-picker-variants-DLi1Va_e.js";
 const d = {
   locale: {
     1: "१",
@@ -430,4 +430,4 @@ const y = {
 export {
   H as hi
 };
-//# sourceMappingURL=hi-wkq_rQAh.js.map
+//# sourceMappingURL=hi-Dj3oYd84.js.map