@alfadocs/ui-kit-debug 0.1.8 → 0.2.0

package/dist/_chunks/alert-B1sj8Ss0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-B1sj8Ss0.js","sources":["../../src/components/alert/alert.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { Info, CircleCheck, TriangleAlert, CircleX, X } from 'lucide-react';\n\nconst alertVariants = cva(\n  [\n    'ds:flex ds:items-start ds:gap-[var(--spacing-md)]',\n    'ds:rounded-[var(--radius-md)]',\n    'ds:border ds:border-[length:var(--border-width-sm)]',\n    'ds:p-[var(--spacing-md)]',\n    'ds:break-words',\n  ].join(' '),\n  {\n    variants: {\n      // Each variant paints `<Button intent=\"tonal\">` descendants via a\n      // child selector — the button carries `data-intent=\"tonal\"`, the\n      // Alert applies the matching tint (`*-foreground` for bg + the\n      // surface `--background` for fg). Descendant selectors sidestep\n      // custom-property inheritance and are rock-solid across themes.\n      variant: {\n        info: [\n          'ds:border-[color:var(--info)]',\n          'ds:bg-[color-mix(in_srgb,var(--info)_10%,transparent)]',\n          'ds:text-[var(--info-foreground)]',\n          'ds:[&_[data-intent=tonal]]:bg-[color:var(--info-foreground)]',\n          'ds:[&_[data-intent=tonal]]:text-[color:var(--background)]',\n        ].join(' '),\n        success: [\n          'ds:border-[color:var(--success)]',\n          'ds:bg-[color-mix(in_srgb,var(--success)_10%,transparent)]',\n          'ds:text-[var(--success-foreground)]',\n          'ds:[&_[data-intent=tonal]]:bg-[color:var(--success-foreground)]',\n          'ds:[&_[data-intent=tonal]]:text-[color:var(--background)]',\n        ].join(' '),\n        warning: [\n          'ds:border-[color:var(--warning)]',\n          'ds:bg-[color-mix(in_srgb,var(--warning)_10%,transparent)]',\n          'ds:text-[var(--warning-foreground)]',\n          'ds:[&_[data-intent=tonal]]:bg-[color:var(--warning-foreground)]',\n          'ds:[&_[data-intent=tonal]]:text-[color:var(--background)]',\n        ].join(' '),\n        error: [\n          'ds:border-[color:var(--error)]',\n          'ds:bg-[color-mix(in_srgb,var(--error)_10%,transparent)]',\n          'ds:text-[var(--error-foreground)]',\n          'ds:[&_[data-intent=tonal]]:bg-[color:var(--error-foreground)]',\n          'ds:[&_[data-intent=tonal]]:text-[color:var(--background)]',\n        ].join(' '),\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  },\n);\n\nconst ICON_CLASSES = 'ds:shrink-0 ds:size-5 ds:mt-0.5';\n\nconst CLOSE_BUTTON_CLASSES = [\n  'ds:ms-auto ds:shrink-0 ds:inline-flex ds:items-center ds:justify-center',\n  'ds:rounded-[var(--radius-sm)]',\n  'ds:min-h-[var(--min-target-size)] ds:min-w-[var(--min-target-size)]',\n  'ds:-mt-[var(--spacing-xs)] ds:-me-[var(--spacing-xs)]',\n  'ds:text-current ds:opacity-70',\n  'ds:hover:opacity-100',\n  'ds:transition-opacity ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none',\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  'ds:forced-colors:focus-visible:outline-[CanvasText]',\n].join(' ');\n\nconst VARIANT_CONFIG = {\n  info: { icon: <Info aria-hidden=\"true\" />, role: 'status', live: 'polite' },\n  success: {\n    icon: <CircleCheck aria-hidden=\"true\" />,\n    role: 'status',\n    live: 'polite',\n  },\n  warning: {\n    icon: <TriangleAlert aria-hidden=\"true\" />,\n    role: 'alert',\n    live: 'assertive',\n  },\n  error: {\n    icon: <CircleX aria-hidden=\"true\" />,\n    role: 'alert',\n    live: 'assertive',\n  },\n} as const;\n\ninterface AlertTitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';\n}\n\nconst AlertTitle = forwardRef<HTMLHeadingElement, AlertTitleProps>(\n  ({ as: Tag = 'h5', className, ...props }, ref) => (\n    <Tag\n      ref={ref}\n      className={['type-title-item', className].filter(Boolean).join(' ')}\n      {...props}\n    />\n  ),\n);\nAlertTitle.displayName = 'Alert.Title';\n\nconst AlertDescription = forwardRef<\n  HTMLParagraphElement,\n  HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={['ds:mt-[var(--spacing-xs)] type-body-sm', className]\n      .filter(Boolean)\n      .join(' ')}\n    {...props}\n  />\n));\nAlertDescription.displayName = 'Alert.Description';\n\nconst AlertAction = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={[\n        'ds:mt-[var(--spacing-sm)] ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-sm)]',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    />\n  ),\n);\nAlertAction.displayName = 'Alert.Action';\n\nexport interface AlertProps\n  extends\n    Omit<HTMLAttributes<HTMLDivElement>, 'role'>,\n    VariantProps<typeof alertVariants> {\n  variant?: 'info' | 'success' | 'warning' | 'error';\n  dismissible?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  icon?: ReactNode;\n  live?: 'assertive' | 'polite' | 'off';\n}\n\nexport type { AlertTitleProps };\n\nconst AlertRoot = forwardRef<HTMLDivElement, AlertProps>(\n  (\n    {\n      variant = 'info',\n      dismissible = false,\n      open: controlledOpen,\n      onOpenChange,\n      icon,\n      live,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n    const [internalOpen, setInternalOpen] = useState(true);\n    const [isClosing, setIsClosing] = useState(false);\n    const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const isControlled = controlledOpen !== undefined;\n    const isOpen = isControlled ? controlledOpen : internalOpen;\n\n    const animationDurationMs = useCallback((): number => {\n      if (typeof window === 'undefined') return 200;\n      const raw = window\n        .getComputedStyle(document.documentElement)\n        .getPropertyValue('--animation-duration');\n      if (!raw) return 200;\n      const trimmed = raw.trim();\n      const n = parseFloat(trimmed);\n      if (!Number.isFinite(n)) return 200;\n      return trimmed.endsWith('ms') ? n : n * 1000;\n    }, []);\n\n    if (!isOpen) return null;\n\n    const config = VARIANT_CONFIG[variant];\n    const effectiveIcon = icon !== undefined ? icon : config.icon;\n\n    const handleDismiss = () => {\n      if (isClosing) return;\n      setIsClosing(true);\n      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);\n      closeTimerRef.current = setTimeout(() => {\n        setIsClosing(false);\n        if (!isControlled) setInternalOpen(false);\n        onOpenChange?.(false);\n      }, animationDurationMs());\n    };\n\n    return (\n      <div\n        ref={ref}\n        role={config.role}\n        aria-live={live ?? config.live}\n        data-component=\"alert\"\n        data-state={isClosing ? 'closing' : 'open'}\n        className={[\n          alertVariants({ variant, className }),\n          // Entry: fade + slide-down on mount. Exit: fade + slide-up + slight\n          // scale when dismissed. Driven by `tw-animate-css`. Respects\n          // `prefers-reduced-motion` via `motion-safe:` and zeroes under the\n          // accessible theme (`--animation-duration: 0ms`).\n          'ds:motion-safe:animate-in ds:motion-safe:fade-in-0 ds:motion-safe:slide-in-from-top-2',\n          'ds:motion-safe:data-[state=closing]:animate-out ds:motion-safe:data-[state=closing]:fade-out-0',\n          'ds:motion-safe:data-[state=closing]:slide-out-to-top-2 ds:motion-safe:data-[state=closing]:zoom-out-95',\n          // Pin the exit's end-state until React unmounts. Without\n          // `fill-mode-forwards` the element snaps back to opacity:1 for one\n          // paint frame after the animation ends.\n          'ds:motion-safe:data-[state=closing]:fill-mode-forwards',\n          'ds:motion-safe:duration-[var(--animation-duration)]',\n        ].join(' ')}\n        {...props}\n      >\n        {effectiveIcon ? (\n          <span className={ICON_CLASSES}>{effectiveIcon}</span>\n        ) : null}\n\n        <div className=\"ds:flex-1 ds:min-w-0\">{children}</div>\n\n        {dismissible ? (\n          <button\n            type=\"button\"\n            aria-label={t('ui.common.close', 'Close')}\n            onClick={handleDismiss}\n            className={CLOSE_BUTTON_CLASSES}\n          >\n            <X aria-hidden=\"true\" className=\"ds:size-4\" />\n          </button>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nAlertRoot.displayName = 'Alert';\n\nexport const Alert = Object.assign(AlertRoot, {\n  Title: AlertTitle,\n  Description: AlertDescription,\n  Action: AlertAction,\n});\n"],"names":["alertVariants","cva","ICON_CLASSES","CLOSE_BUTTON_CLASSES","VARIANT_CONFIG","jsx","Info","CircleCheck","TriangleAlert","CircleX","AlertTitle","forwardRef","Tag","className","props","ref","AlertDescription","AlertAction","AlertRoot","variant","dismissible","controlledOpen","onOpenChange","icon","live","children","t","useTranslation","internalOpen","setInternalOpen","useState","isClosing","setIsClosing","closeTimerRef","useRef","isControlled","isOpen","animationDurationMs","useCallback","raw","trimmed","n","config","effectiveIcon","handleDismiss","jsxs","X","Alert"],"mappings":"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"}

package/dist/_chunks/{apexcharts-theme-BkSShpEy.js → apexcharts-theme-BJigns_V.js}

@@ -32,7 +32,12 @@ function d() {
   const t = getComputedStyle(document.documentElement), e = (r) => t.getPropertyValue(r).trim();
   return {
     theme: { mode: document.documentElement.classList.contains("theme-dark") ? "dark" : "light" },
-    colors: [e("--primary"), e("--accent"), e("--success"), e("--warning")],
+    colors: [
+      e("--primary"),
+      e("--accent"),
+      e("--success"),
+      e("--warning")
+    ],
     chart: {
       background: e("--background"),
       foreColor: e("--foreground"),
@@ -45,4 +50,4 @@ export {
   d as g,
   c as u
 };
-//# sourceMappingURL=apexcharts-theme-BkSShpEy.js.map
+//# sourceMappingURL=apexcharts-theme-BJigns_V.js.map

package/dist/_chunks/{apexcharts-theme-BkSShpEy.js.map → apexcharts-theme-BJigns_V.js.map}

@@ -1 +1 @@
-{"version":3,"file":"apexcharts-theme-BkSShpEy.js","sources":["../../src/components/_shared/use-neutralize-hidden-focus.ts","../../src/tokens/apexcharts-theme.ts"],"sourcesContent":["import { useEffect, type RefObject } from 'react';\n\n/* -------------------------------------------------------------------- */\n/* useNeutraliseHiddenFocus                                             */\n/*                                                                      */\n/* axe's `aria-hidden-focus` rule (correctly) flags focusable           */\n/* descendants of `aria-hidden=\"true\"` subtrees. Several DS components  */\n/* embed third-party renders (ApexCharts, FullCalendar) that inject     */\n/* focusable elements (canvases with tabindex, anchor wrappers) inside  */\n/* a wrapper that we deliberately mark `aria-hidden` because the outer  */\n/* element carries the accessible name (`role=\"img\"` + `aria-label`).   */\n/*                                                                      */\n/* This hook walks the ref tree on mount and on subtree mutation, and   */\n/* sets `tabindex=\"-1\"` on focusable descendants of any aria-hidden     */\n/* ancestor. Cheaper than forking the third-party render and keeps the  */\n/* fix scoped to the component using it.                                */\n/* -------------------------------------------------------------------- */\n\nconst FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'button',\n  'input',\n  'select',\n  'textarea',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\nexport function useNeutraliseHiddenFocus<T extends HTMLElement>(\n  containerRef: RefObject<T | null>,\n): void {\n  useEffect(() => {\n    const root = containerRef.current;\n    if (!root) return undefined;\n\n    const neutralise = () => {\n      root\n        .querySelectorAll<HTMLElement>('[aria-hidden=\"true\"]')\n        .forEach((hidden) => {\n          hidden\n            .querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)\n            .forEach((el) => {\n              el.setAttribute('tabindex', '-1');\n            });\n        });\n    };\n\n    neutralise();\n    const observer = new MutationObserver(neutralise);\n    observer.observe(root, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['aria-hidden', 'tabindex'],\n    });\n    return () => observer.disconnect();\n  }, [containerRef]);\n}\n","import type ApexCharts from 'apexcharts';\n\nexport function getApexChartsTheme(): ApexCharts.ApexOptions {\n  const styles = getComputedStyle(document.documentElement);\n  const get = (v: string) => styles.getPropertyValue(v).trim();\n  const isDark = document.documentElement.classList.contains('theme-dark');\n  return {\n    theme: { mode: isDark ? 'dark' : 'light' },\n    colors: [get('--primary'), get('--accent'), get('--success'), get('--warning')],\n    chart: {\n      background: get('--background'),\n      foreColor: get('--foreground'),\n      fontFamily: get('--font-sans'),\n    },\n    grid: { borderColor: get('--border') },\n  };\n}\n"],"names":["FOCUSABLE_SELECTOR","useNeutraliseHiddenFocus","containerRef","useEffect","root","neutralise","hidden","el","observer","getApexChartsTheme","styles","get","v"],"mappings":";AAkBA,MAAMA,IAAqB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAEH,SAASC,EACdC,GACM;AACN,EAAAC,EAAU,MAAM;AACd,UAAMC,IAAOF,EAAa;AAC1B,QAAI,CAACE,EAAM;AAEX,UAAMC,IAAa,MAAM;AACvB,MAAAD,EACG,iBAA8B,sBAAsB,EACpD,QAAQ,CAACE,MAAW;AACnB,QAAAA,EACG,iBAA8BN,CAAkB,EAChD,QAAQ,CAACO,MAAO;AACf,UAAAA,EAAG,aAAa,YAAY,IAAI;AAAA,QAClC,CAAC;AAAA,MACL,CAAC;AAAA,IACL;AAEA,IAAAF,EAAA;AACA,UAAMG,IAAW,IAAI,iBAAiBH,CAAU;AAChD,WAAAG,EAAS,QAAQJ,GAAM;AAAA,MACrB,WAAW;AAAA,MACX,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,iBAAiB,CAAC,eAAe,UAAU;AAAA,IAAA,CAC5C,GACM,MAAMI,EAAS,WAAA;AAAA,EACxB,GAAG,CAACN,CAAY,CAAC;AACnB;ACtDO,SAASO,IAA6C;AAC3D,QAAMC,IAAS,iBAAiB,SAAS,eAAe,GAClDC,IAAM,CAACC,MAAcF,EAAO,iBAAiBE,CAAC,EAAE,KAAA;AAEtD,SAAO;AAAA,IACL,OAAO,EAAE,MAFI,SAAS,gBAAgB,UAAU,SAAS,YAAY,IAE7C,SAAS,QAAA;AAAA,IACjC,QAAQ,CAACD,EAAI,WAAW,GAAGA,EAAI,UAAU,GAAGA,EAAI,WAAW,GAAGA,EAAI,WAAW,CAAC;AAAA,IAC9E,OAAO;AAAA,MACL,YAAYA,EAAI,cAAc;AAAA,MAC9B,WAAWA,EAAI,cAAc;AAAA,MAC7B,YAAYA,EAAI,aAAa;AAAA,IAAA;AAAA,IAE/B,MAAM,EAAE,aAAaA,EAAI,UAAU,EAAA;AAAA,EAAE;AAEzC;"}
+{"version":3,"file":"apexcharts-theme-BJigns_V.js","sources":["../../src/components/_shared/use-neutralize-hidden-focus.ts","../../src/tokens/apexcharts-theme.ts"],"sourcesContent":["import { useEffect, type RefObject } from 'react';\n\n/* -------------------------------------------------------------------- */\n/* useNeutraliseHiddenFocus                                             */\n/*                                                                      */\n/* axe's `aria-hidden-focus` rule (correctly) flags focusable           */\n/* descendants of `aria-hidden=\"true\"` subtrees. Several DS components  */\n/* embed third-party renders (ApexCharts, FullCalendar) that inject     */\n/* focusable elements (canvases with tabindex, anchor wrappers) inside  */\n/* a wrapper that we deliberately mark `aria-hidden` because the outer  */\n/* element carries the accessible name (`role=\"img\"` + `aria-label`).   */\n/*                                                                      */\n/* This hook walks the ref tree on mount and on subtree mutation, and   */\n/* sets `tabindex=\"-1\"` on focusable descendants of any aria-hidden     */\n/* ancestor. Cheaper than forking the third-party render and keeps the  */\n/* fix scoped to the component using it.                                */\n/* -------------------------------------------------------------------- */\n\nconst FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'button',\n  'input',\n  'select',\n  'textarea',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\nexport function useNeutraliseHiddenFocus<T extends HTMLElement>(\n  containerRef: RefObject<T | null>,\n): void {\n  useEffect(() => {\n    const root = containerRef.current;\n    if (!root) return undefined;\n\n    const neutralise = () => {\n      root\n        .querySelectorAll<HTMLElement>('[aria-hidden=\"true\"]')\n        .forEach((hidden) => {\n          hidden\n            .querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)\n            .forEach((el) => {\n              el.setAttribute('tabindex', '-1');\n            });\n        });\n    };\n\n    neutralise();\n    const observer = new MutationObserver(neutralise);\n    observer.observe(root, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['aria-hidden', 'tabindex'],\n    });\n    return () => observer.disconnect();\n  }, [containerRef]);\n}\n","import type ApexCharts from 'apexcharts';\n\nexport function getApexChartsTheme(): ApexCharts.ApexOptions {\n  const styles = getComputedStyle(document.documentElement);\n  const get = (v: string) => styles.getPropertyValue(v).trim();\n  const isDark = document.documentElement.classList.contains('theme-dark');\n  return {\n    theme: { mode: isDark ? 'dark' : 'light' },\n    colors: [\n      get('--primary'),\n      get('--accent'),\n      get('--success'),\n      get('--warning'),\n    ],\n    chart: {\n      background: get('--background'),\n      foreColor: get('--foreground'),\n      fontFamily: get('--font-sans'),\n    },\n    grid: { borderColor: get('--border') },\n  };\n}\n"],"names":["FOCUSABLE_SELECTOR","useNeutraliseHiddenFocus","containerRef","useEffect","root","neutralise","hidden","el","observer","getApexChartsTheme","styles","get","v"],"mappings":";AAkBA,MAAMA,IAAqB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAEH,SAASC,EACdC,GACM;AACN,EAAAC,EAAU,MAAM;AACd,UAAMC,IAAOF,EAAa;AAC1B,QAAI,CAACE,EAAM;AAEX,UAAMC,IAAa,MAAM;AACvB,MAAAD,EACG,iBAA8B,sBAAsB,EACpD,QAAQ,CAACE,MAAW;AACnB,QAAAA,EACG,iBAA8BN,CAAkB,EAChD,QAAQ,CAACO,MAAO;AACf,UAAAA,EAAG,aAAa,YAAY,IAAI;AAAA,QAClC,CAAC;AAAA,MACL,CAAC;AAAA,IACL;AAEA,IAAAF,EAAA;AACA,UAAMG,IAAW,IAAI,iBAAiBH,CAAU;AAChD,WAAAG,EAAS,QAAQJ,GAAM;AAAA,MACrB,WAAW;AAAA,MACX,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,iBAAiB,CAAC,eAAe,UAAU;AAAA,IAAA,CAC5C,GACM,MAAMI,EAAS,WAAA;AAAA,EACxB,GAAG,CAACN,CAAY,CAAC;AACnB;ACtDO,SAASO,IAA6C;AAC3D,QAAMC,IAAS,iBAAiB,SAAS,eAAe,GAClDC,IAAM,CAACC,MAAcF,EAAO,iBAAiBE,CAAC,EAAE,KAAA;AAEtD,SAAO;AAAA,IACL,OAAO,EAAE,MAFI,SAAS,gBAAgB,UAAU,SAAS,YAAY,IAE7C,SAAS,QAAA;AAAA,IACjC,QAAQ;AAAA,MACND,EAAI,WAAW;AAAA,MACfA,EAAI,UAAU;AAAA,MACdA,EAAI,WAAW;AAAA,MACfA,EAAI,WAAW;AAAA,IAAA;AAAA,IAEjB,OAAO;AAAA,MACL,YAAYA,EAAI,cAAc;AAAA,MAC9B,WAAWA,EAAI,cAAc;AAAA,MAC7B,YAAYA,EAAI,aAAa;AAAA,IAAA;AAAA,IAE/B,MAAM,EAAE,aAAaA,EAAI,UAAU,EAAA;AAAA,EAAE;AAEzC;"}

package/dist/_chunks/{app-frame-6d7Lu4ea.js → app-frame-CDJOgPXe.js}

@@ -23,9 +23,7 @@ const T = a(
     "ds:print:[&_[role=banner]]:[border-block-end-color:var(--border)]"
   ].join(" ")
 ), A = a(
-  [
-    "ds:flex ds:flex-1 ds:items-stretch ds:min-h-0"
-  ].join(" ")
+  ["ds:flex ds:flex-1 ds:items-stretch ds:min-h-0"].join(" ")
 ), M = a(
   [
     // Hidden in the inline flow on mobile — consumers should flip their
@@ -38,11 +36,7 @@ const T = a(
     "ds:h-full"
   ].join(" ")
 ), C = a(
-  [
-    "ds:hidden ds:md:flex",
-    "ds:shrink-0",
-    "ds:h-full"
-  ].join(" ")
+  ["ds:hidden ds:md:flex", "ds:shrink-0", "ds:h-full"].join(" ")
 ), F = a(
   [
     // <main> owns the scroll: the viewport body never scrolls, but this
@@ -78,13 +72,10 @@ const T = a(
     mainClassName: b,
     ...u
   }, h) => {
-    const { t: v } = _(), x = m ?? v("ui.navigation.main.label", "Main content"), [w, g] = S(!1), j = V(
-      (k) => {
-        const e = k.currentTarget.scrollTop > 0;
-        g((o) => o === e ? o : e);
-      },
-      []
-    );
+    const { t: v } = _(), x = m ?? v("ui.navigation.main.label", "Main content"), [w, g] = S(!1), j = V((k) => {
+      const e = k.currentTarget.scrollTop > 0;
+      g((o) => o === e ? o : e);
+    }, []);
     return /* @__PURE__ */ n(
       "div",
       {
@@ -127,4 +118,4 @@ I.displayName = "AppFrame";
 export {
   I as A
 };
-//# sourceMappingURL=app-frame-6d7Lu4ea.js.map
+//# sourceMappingURL=app-frame-CDJOgPXe.js.map

package/dist/_chunks/app-frame-CDJOgPXe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-frame-CDJOgPXe.js","sources":["../../src/components/app-frame/app-frame.tsx"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* AppFrame — the always-present application shell.                      */\n/*                                                                       */\n/* Layout                                                                */\n/* ------                                                                */\n/*                                                                       */\n/*   ┌───────────────────────────────────────────────────────────┐       */\n/*   │  Header (100% inline-size, block-start)                    │       */\n/*   ├──────────┬──────────────────────────────────┬──────────────┤       */\n/*   │ Sidebar  │  Main (<main>)                    │ endSidebar   │       */\n/*   │          │                                   │ (optional)   │       */\n/*   │          │                                   │              │       */\n/*   ├──────────┴──────────────────────────────────┴──────────────┤       */\n/*   │  Footer (optional)                                         │       */\n/*   └───────────────────────────────────────────────────────────┘       */\n/*                                                                       */\n/* Header spans the full inline-size of the shell. Sidebar sits beneath */\n/* the header on the inline-start edge and shares the row with <main>.  */\n/* `endSidebar`, when provided, sits on the inline-end edge of the same */\n/* row — used for co-pilot / assistant panels (e.g. LeoSidebar) that    */\n/* should dock opposite the nav rail. Footer, when provided, spans the  */\n/* full inline-size at the block-end.                                   */\n/*                                                                       */\n/* Responsive behaviour                                                  */\n/* ---------------------                                                 */\n/* ≥ md viewports: the sidebar slot renders inline-start of the row      */\n/*   below the header, sticky to the header's block-end, full remaining */\n/*   viewport height.                                                   */\n/* < md viewports: the sidebar slot is hidden from the inline flow.     */\n/*   Consumers should control their sidebar's `state` to `'overlay'`    */\n/*   on small viewports (the Sidebar portals via Radix Dialog so it     */\n/*   renders outside AppFrame's subtree in that mode) and wire the       */\n/*   `<HeaderMenuButton>` to toggle it.                                 */\n/* -------------------------------------------------------------------- */\n\nimport {\n  forwardRef,\n  useCallback,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n  type UIEvent,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                 */\n/* ------------------------------------------------------------------ */\n\n// Canonical app-shell layout: the root is a VIEWPORT-SIZED flex-col with\n// its own overflow clamp. Header and the row fill it together. The only\n// element that scrolls is <main> — so the header never leaves the top\n// and the sidebar never needs position: sticky. This matches the way\n// Gmail / Linear / Notion frame their app surfaces and avoids the\n// flex-item-sticky edge cases that position: sticky has inside a\n// column-flex container.\n//\n// Because the viewport itself never scrolls in this model, the Header's\n// built-in IntersectionObserver (which watches a sentinel against the\n// viewport) cannot detect scroll. AppFrame instead tracks `<main>`'s\n// scrollTop, reflects it onto the root via `data-app-scrolled`, and the\n// descendant selectors below drive the `<header role=\"banner\">` border\n// and shadow — producing the same elevation the Header would show in a\n// viewport-scroll context.\nconst rootVariants = cva(\n  [\n    'ds:h-dvh ds:w-full',\n    'ds:flex ds:flex-col',\n    'ds:overflow-hidden',\n    'ds:bg-[var(--background)] ds:text-[color:var(--foreground)]',\n    // Elevation cascade driven by main's scrollTop (data-app-scrolled).\n    // Mirrors the Header's native scroll-linked recipe (see `Brand/Shadows`\n    // — one tier up from rest, never two) so the banner looks identical\n    // whether it's in a viewport-scroll context (sticky) or slotted into\n    // AppFrame where <main> owns the scroll.\n    'ds:data-[app-scrolled=true]:[&_[role=banner]]:shadow-[var(--shadow-md)]',\n    'ds:data-[app-scrolled=true]:[&_[role=banner]]:[border-block-end-color:var(--border)]',\n    // Forced-colors: UA strips box-shadow, so the border is the only\n    // separation cue. Always render it.\n    'ds:forced-colors:[&_[role=banner]]:[border-block-end-color:CanvasText]',\n    // Print: strip shadow, keep border so the banner still reads on paper.\n    'ds:print:[&_[role=banner]]:shadow-none',\n    'ds:print:[&_[role=banner]]:[border-block-end-color:var(--border)]',\n  ].join(' '),\n);\n\nconst rowVariants = cva(\n  ['ds:flex ds:flex-1 ds:items-stretch ds:min-h-0'].join(' '),\n);\n\nconst sidebarSlotVariants = cva(\n  [\n    // Hidden in the inline flow on mobile — consumers should flip their\n    // Sidebar into overlay mode at narrow viewports, where it portals via\n    // Radix Dialog and therefore renders outside AppFrame entirely.\n    'ds:hidden ds:md:flex',\n    'ds:shrink-0',\n    // The rail fills the row's full height because the row is `flex\n    // items-stretch`. No sticky needed — the row itself never scrolls.\n    'ds:h-full',\n  ].join(' '),\n);\n\n// Inline-end slot — same hide-on-mobile behaviour as the nav rail because\n// a 22rem co-pilot panel can't share a phone viewport. Consuming apps\n// should flip Leo (or any inline-end panel) to its overlay/popout mode\n// at narrow viewports.\nconst endSidebarSlotVariants = cva(\n  ['ds:hidden ds:md:flex', 'ds:shrink-0', 'ds:h-full'].join(' '),\n);\n\nconst mainVariants = cva(\n  [\n    // <main> owns the scroll: the viewport body never scrolls, but this\n    // element does. That keeps the header + sidebar pinned as chrome.\n    'ds:flex-1 ds:min-w-0 ds:overflow-auto',\n    // Focusable via the header's SkipLink — tabIndex={-1} is on the\n    // element itself so keyboard users land inside the main region.\n    'ds:focus:outline-none',\n  ].join(' '),\n  {\n    variants: {\n      padded: {\n        true: [\n          'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n          'ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]',\n        ].join(' '),\n        false: '',\n      },\n    },\n    defaultVariants: { padded: true },\n  },\n);\n\nconst footerSlotVariants = cva('ds:shrink-0');\n\n/* ------------------------------------------------------------------ */\n/* Root                                                                */\n/* ------------------------------------------------------------------ */\n\nexport interface AppFrameProps\n  extends\n    Omit<HTMLAttributes<HTMLDivElement>, 'children'>,\n    VariantProps<typeof mainVariants> {\n  /** `<Header>` instance rendered full-width at the block-start of the shell. */\n  header: ReactNode;\n  /** `<Sidebar>` instance rendered inline-start of the row beneath the header on ≥ md viewports. */\n  sidebar: ReactNode;\n  /** Main content — rendered inside a `<main>` landmark. */\n  children: ReactNode;\n  /** Optional inline-end docked panel (typically `<LeoSidebar />`) sharing the same row as the main region on ≥ md viewports. Hidden on narrow viewports — consumers should flip to an overlay/popout mode there. */\n  endSidebar?: ReactNode;\n  /** Optional block-end footer — renders full-width below the sidebar + main row. */\n  footer?: ReactNode;\n  /**\n   * Id applied to the `<main>` element so `<HeaderSkipLink href=\"#{mainId}\" />`\n   * can target it. Must be a valid HTML id (letters, digits, `-`, `_`, no\n   * spaces). Defaults to `'main-content'`.\n   */\n  mainId?: string;\n  /**\n   * Override the landmark's accessible name. Defaults to the i18n'd\n   * `ui.navigation.main.label` (\"Main content\").\n   */\n  mainAriaLabel?: string;\n  /** Extra classes applied to the `<main>` landmark. */\n  mainClassName?: string;\n}\n\nexport const AppFrame = forwardRef<HTMLDivElement, AppFrameProps>(\n  (\n    {\n      header,\n      sidebar,\n      children,\n      endSidebar,\n      footer,\n      mainId = 'main-content',\n      mainAriaLabel,\n      padded = true,\n      className,\n      mainClassName,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n    const mainLabel =\n      mainAriaLabel ?? t('ui.navigation.main.label', 'Main content');\n\n    const [mainScrolled, setMainScrolled] = useState(false);\n    const handleMainScroll = useCallback((event: UIEvent<HTMLElement>) => {\n      const next = event.currentTarget.scrollTop > 0;\n      setMainScrolled((prev) => (prev === next ? prev : next));\n    }, []);\n\n    return (\n      <div\n        ref={ref}\n        data-app-scrolled={mainScrolled ? 'true' : undefined}\n        data-component=\"app-frame\"\n        className={rootVariants({ className })}\n        {...rest}\n      >\n        {/* Header is rendered as a direct flex child — NOT wrapped in a slot\n            div — so it sits at the block-start of the shell. The root's\n            `overflow-hidden` keeps it pinned; no `position: sticky` needed. */}\n        {header}\n        <div className={rowVariants()} data-app-frame-slot=\"row\">\n          <div className={sidebarSlotVariants()} data-app-frame-slot=\"sidebar\">\n            {sidebar}\n          </div>\n          <main\n            id={mainId}\n            tabIndex={-1}\n            aria-label={mainLabel}\n            onScroll={handleMainScroll}\n            className={mainVariants({ padded, className: mainClassName })}\n          >\n            {children}\n          </main>\n          {endSidebar ? (\n            <div\n              className={endSidebarSlotVariants()}\n              data-app-frame-slot=\"end-sidebar\"\n            >\n              {endSidebar}\n            </div>\n          ) : null}\n        </div>\n        {footer ? (\n          <div className={footerSlotVariants()} data-app-frame-slot=\"footer\">\n            {footer}\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\nAppFrame.displayName = 'AppFrame';\n"],"names":["rootVariants","cva","rowVariants","sidebarSlotVariants","endSidebarSlotVariants","mainVariants","footerSlotVariants","AppFrame","forwardRef","header","sidebar","children","endSidebar","footer","mainId","mainAriaLabel","padded","className","mainClassName","rest","ref","t","useTranslation","mainLabel","mainScrolled","setMainScrolled","useState","handleMainScroll","useCallback","event","next","prev","jsxs","jsx"],"mappings":";;;;AAiEA,MAAMA,IAAeC;AAAA,EACnB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EAAA,EACA,KAAK,GAAG;AACZ,GAEMC,IAAcD;AAAA,EAClB,CAAC,+CAA+C,EAAE,KAAK,GAAG;AAC5D,GAEME,IAAsBF;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA,IAIE;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA,EAAA,EACA,KAAK,GAAG;AACZ,GAMMG,IAAyBH;AAAA,EAC7B,CAAC,wBAAwB,eAAe,WAAW,EAAE,KAAK,GAAG;AAC/D,GAEMI,IAAeJ;AAAA,EACnB;AAAA;AAAA;AAAA,IAGE;AAAA;AAAA;AAAA,IAGA;AAAA,EAAA,EACA,KAAK,GAAG;AAAA,EACV;AAAA,IACE,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,MAAM;AAAA,UACJ;AAAA,UACA;AAAA,QAAA,EACA,KAAK,GAAG;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB,EAAE,QAAQ,GAAA;AAAA,EAAK;AAEpC,GAEMK,IAAqBL,EAAI,aAAa,GAmC/BM,IAAWC;AAAA,EACtB,CACE;AAAA,IACE,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,eAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,WAAAC;AAAA,IACA,eAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IACJR,KAAiBM,EAAE,4BAA4B,cAAc,GAEzD,CAACG,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAChDC,IAAmBC,EAAY,CAACC,MAAgC;AACpE,YAAMC,IAAOD,EAAM,cAAc,YAAY;AAC7C,MAAAJ,EAAgB,CAACM,MAAUA,MAASD,IAAOC,IAAOD,CAAK;AAAA,IACzD,GAAG,CAAA,CAAE;AAEL,WACE,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAZ;AAAA,QACA,qBAAmBI,IAAe,SAAS;AAAA,QAC3C,kBAAe;AAAA,QACf,WAAWxB,EAAa,EAAE,WAAAiB,GAAW;AAAA,QACpC,GAAGE;AAAA,QAKH,UAAA;AAAA,UAAAV;AAAA,4BACA,OAAA,EAAI,WAAWP,EAAA,GAAe,uBAAoB,OACjD,UAAA;AAAA,YAAA,gBAAA+B,EAAC,SAAI,WAAW9B,EAAA,GAAuB,uBAAoB,WACxD,UAAAO,GACH;AAAA,YACA,gBAAAuB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAInB;AAAA,gBACJ,UAAU;AAAA,gBACV,cAAYS;AAAA,gBACZ,UAAUI;AAAA,gBACV,WAAWtB,EAAa,EAAE,QAAAW,GAAQ,WAAWE,GAAe;AAAA,gBAE3D,UAAAP;AAAA,cAAA;AAAA,YAAA;AAAA,YAEFC,IACC,gBAAAqB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW7B,EAAA;AAAA,gBACX,uBAAoB;AAAA,gBAEnB,UAAAQ;AAAA,cAAA;AAAA,YAAA,IAED;AAAA,UAAA,GACN;AAAA,UACCC,sBACE,OAAA,EAAI,WAAWP,KAAsB,uBAAoB,UACvD,UAAAO,EAAA,CACH,IACE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACAN,EAAS,cAAc;"}

package/dist/_chunks/{aspect-ratio-CxsdG8vk.js → aspect-ratio-DeSNzASA.js}

@@ -1,8 +1,8 @@
-import { jsx as l } from "react/jsx-runtime";
+import { jsx as p } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
 import "@radix-ui/react-aspect-ratio";
 import { c as m } from "./index-D2ZczOXr.js";
-const v = m(
+const u = m(
   [
     "ds:relative ds:inline-size-full ds:overflow-hidden",
     "ds:[&>*]:absolute ds:[&>*]:inset-0 ds:[&>*]:inline-size-full ds:[&>*]:block-size-full",
@@ -30,28 +30,28 @@ const v = m(
       fit: "cover"
     }
   }
-), b = f(
-  ({ ratio: t, fit: a, objectPosition: s, className: i, style: o, children: c, ...r }, d) => {
-    const e = typeof t == "number", n = e ? void 0 : t, p = e || s || o ? {
+), v = f(
+  ({ ratio: t, fit: a, objectPosition: s, className: i, style: o, children: c, ...r }, n) => {
+    const e = typeof t == "number", d = e ? null : t, l = e || s || o ? {
       ...o,
       ...e ? { aspectRatio: t } : {},
       ...s ? { "--ar-object-position": s } : {}
     } : void 0;
-    return /* @__PURE__ */ l(
+    return /* @__PURE__ */ p(
       "div",
       {
-        ref: d,
+        ref: n,
         "data-component": "aspect-ratio",
-        className: v({ ratio: n, fit: a, className: i }),
-        style: p,
+        className: u({ ratio: d, fit: a, className: i }),
+        style: l,
         ...r,
         children: c
       }
     );
   }
 );
-b.displayName = "AspectRatio";
+v.displayName = "AspectRatio";
 export {
-  b as A
+  v as A
 };
-//# sourceMappingURL=aspect-ratio-CxsdG8vk.js.map
+//# sourceMappingURL=aspect-ratio-DeSNzASA.js.map

package/dist/_chunks/aspect-ratio-DeSNzASA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio-DeSNzASA.js","sources":["../../src/components/aspect-ratio/aspect-ratio.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n  type CSSProperties,\n} from 'react';\nimport { Root as RadixAspectRatio } from '@radix-ui/react-aspect-ratio';\nimport { cva } from 'class-variance-authority';\n\nexport { RadixAspectRatio as AspectRatioPrimitive };\n\ntype PresetRatio = '1:1' | '4:3' | '16:9' | '3:2' | '21:9';\ntype FitValue = 'cover' | 'contain' | 'fill' | 'scale-down' | 'none';\n\nconst aspectRatioVariants = cva(\n  [\n    'ds:relative ds:inline-size-full ds:overflow-hidden',\n    'ds:[&>*]:absolute ds:[&>*]:inset-0 ds:[&>*]:inline-size-full ds:[&>*]:block-size-full',\n    'ds:[&>*]:[object-position:var(--ar-object-position,center)]',\n  ],\n  {\n    variants: {\n      ratio: {\n        '1:1': 'ds:aspect-[1/1] ar-1x1',\n        '4:3': 'ds:aspect-[4/3] ar-4x3',\n        '16:9': 'ds:aspect-[16/9] ar-16x9',\n        '3:2': 'ds:aspect-[3/2] ar-3x2',\n        '21:9': 'ds:aspect-[21/9] ar-21x9',\n      } satisfies Record<PresetRatio, string>,\n      fit: {\n        cover: 'ds:[&>*]:object-cover',\n        contain: 'ds:[&>*]:object-contain',\n        fill: 'ds:[&>*]:object-fill',\n        'scale-down': 'ds:[&>*]:object-scale-down',\n        none: 'ds:[&>*]:object-none',\n      } satisfies Record<FitValue, string>,\n    },\n    defaultVariants: {\n      ratio: '16:9',\n      fit: 'cover',\n    },\n  },\n);\n\nexport interface AspectRatioProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /** Preset ratio or numeric escape hatch (e.g. 2.35 for cinema). */\n  ratio?: PresetRatio | number;\n  /** object-fit applied to the direct child element. */\n  fit?: FitValue;\n  /** Forwarded to the child via `--ar-object-position` CSS variable. */\n  objectPosition?: string;\n  children: ReactNode;\n}\n\nexport const AspectRatio = forwardRef<HTMLDivElement, AspectRatioProps>(\n  (\n    { ratio, fit, objectPosition, className, style, children, ...rest },\n    ref,\n  ) => {\n    const isNumericRatio = typeof ratio === 'number';\n    // When a numeric ratio is passed we drive the layout via the inline\n    // `aspectRatio` style. We must also pass `ratio: null` to CVA so the\n    // preset (default `'16:9'`) is suppressed — `undefined` would fall back\n    // to defaultVariants and apply the 16:9 utility, conflicting with the\n    // numeric value.\n    const presetRatio: PresetRatio | null | undefined = isNumericRatio\n      ? null\n      : (ratio as PresetRatio | undefined);\n\n    // Sanctioned inline styles (constraint §4 exceptions):\n    // 1. `aspectRatio` — numeric ratio escape hatch has no Tailwind equivalent\n    // 2. `--ar-object-position` — CSS custom property forwarded to the child via var()\n    // Radix Root is NOT used as the render element: it uses padding-top + physical\n    // properties (top/right/bottom/left) which violate constraints §3 and §4.\n    const computedStyle:\n      | (CSSProperties & Record<string, string | number>)\n      | undefined =\n      isNumericRatio || objectPosition || style\n        ? {\n            ...style,\n            ...(isNumericRatio ? { aspectRatio: ratio } : {}),\n            ...(objectPosition\n              ? { '--ar-object-position': objectPosition }\n              : {}),\n          }\n        : undefined;\n\n    return (\n      <div\n        ref={ref}\n        data-component=\"aspect-ratio\"\n        className={aspectRatioVariants({ ratio: presetRatio, fit, className })}\n        // eslint-disable-next-line react/forbid-dom-props -- dynamic aspectRatio + --ar-object-position CSS variable, no static equivalent\n        style={computedStyle}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nAspectRatio.displayName = 'AspectRatio';\n"],"names":["aspectRatioVariants","cva","AspectRatio","forwardRef","ratio","fit","objectPosition","className","style","children","rest","ref","isNumericRatio","presetRatio","computedStyle","jsx"],"mappings":";;;;AAcA,MAAMA,IAAsBC;AAAA,EAC1B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,OAAO;AAAA,QACP,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA;AAAA,MAEV,KAAK;AAAA,QACH,OAAO;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,QACN,cAAc;AAAA,QACd,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,MACP,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ,GAeaC,IAAcC;AAAA,EACzB,CACE,EAAE,OAAAC,GAAO,KAAAC,GAAK,gBAAAC,GAAgB,WAAAC,GAAW,OAAAC,GAAO,UAAAC,GAAU,GAAGC,EAAA,GAC7DC,MACG;AACH,UAAMC,IAAiB,OAAOR,KAAU,UAMlCS,IAA8CD,IAChD,OACCR,GAOCU,IAGJF,KAAkBN,KAAkBE,IAChC;AAAA,MACE,GAAGA;AAAA,MACH,GAAII,IAAiB,EAAE,aAAaR,EAAA,IAAU,CAAA;AAAA,MAC9C,GAAIE,IACA,EAAE,wBAAwBA,MAC1B,CAAA;AAAA,IAAC,IAEP;AAEN,WACE,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAJ;AAAA,QACA,kBAAe;AAAA,QACf,WAAWX,EAAoB,EAAE,OAAOa,GAAa,KAAAR,GAAK,WAAAE,GAAW;AAAA,QAErE,OAAOO;AAAA,QACN,GAAGJ;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAP,EAAY,cAAc;"}