@alfadocs/ui-kit-debug 0.1.8

package/dist/_chunks/alert-BlOUMkXj.js

@@ -0,0 +1,188 @@
+import { jsxs as D, jsx as t } from "react/jsx-runtime";
+import { forwardRef as a, useState as p, useRef as R, useCallback as B } from "react";
+import { c as E } from "./index-D2ZczOXr.js";
+import { useTranslation as V } from "react-i18next";
+import { X as F } from "./x-CCcI3eJp.js";
+import { C as L } from "./circle-x-Du2CmjaU.js";
+import { T as O } from "./triangle-alert-CBPUIzQo.js";
+import { C as X } from "./circle-check-9AeSgJD_.js";
+import { I as G } from "./info-B9XNKn05.js";
+const M = E(
+  [
+    "ds:flex ds:items-start ds:gap-[var(--spacing-md)]",
+    "ds:rounded-[var(--radius-md)]",
+    "ds:border ds:border-[length:var(--border-width-sm)]",
+    "ds:p-[var(--spacing-md)]",
+    "ds:break-words"
+  ].join(" "),
+  {
+    variants: {
+      // Each variant paints `<Button intent="tonal">` descendants via a
+      // child selector — the button carries `data-intent="tonal"`, the
+      // Alert applies the matching tint (`*-foreground` for bg + the
+      // surface `--background` for fg). Descendant selectors sidestep
+      // custom-property inheritance and are rock-solid across themes.
+      variant: {
+        info: [
+          "ds:border-[color:var(--info)]",
+          "ds:bg-[color-mix(in_srgb,var(--info)_10%,transparent)]",
+          "ds:text-[var(--info-foreground)]",
+          "ds:[&_[data-intent=tonal]]:bg-[color:var(--info-foreground)]",
+          "ds:[&_[data-intent=tonal]]:text-[color:var(--background)]"
+        ].join(" "),
+        success: [
+          "ds:border-[color:var(--success)]",
+          "ds:bg-[color-mix(in_srgb,var(--success)_10%,transparent)]",
+          "ds:text-[var(--success-foreground)]",
+          "ds:[&_[data-intent=tonal]]:bg-[color:var(--success-foreground)]",
+          "ds:[&_[data-intent=tonal]]:text-[color:var(--background)]"
+        ].join(" "),
+        warning: [
+          "ds:border-[color:var(--warning)]",
+          "ds:bg-[color-mix(in_srgb,var(--warning)_10%,transparent)]",
+          "ds:text-[var(--warning-foreground)]",
+          "ds:[&_[data-intent=tonal]]:bg-[color:var(--warning-foreground)]",
+          "ds:[&_[data-intent=tonal]]:text-[color:var(--background)]"
+        ].join(" "),
+        error: [
+          "ds:border-[color:var(--error)]",
+          "ds:bg-[color-mix(in_srgb,var(--error)_10%,transparent)]",
+          "ds:text-[var(--error-foreground)]",
+          "ds:[&_[data-intent=tonal]]:bg-[color:var(--error-foreground)]",
+          "ds:[&_[data-intent=tonal]]:text-[color:var(--background)]"
+        ].join(" ")
+      }
+    },
+    defaultVariants: {
+      variant: "info"
+    }
+  }
+), P = "ds:shrink-0 ds:size-5 ds:mt-0.5", U = [
+  "ds:ms-auto ds:shrink-0 ds:inline-flex ds:items-center ds:justify-center",
+  "ds:rounded-[var(--radius-sm)]",
+  "ds:min-h-[var(--min-target-size)] ds:min-w-[var(--min-target-size)]",
+  "ds:-mt-[var(--spacing-xs)] ds:-me-[var(--spacing-xs)]",
+  "ds:text-current ds:opacity-70",
+  "ds:hover:opacity-100",
+  "ds:transition-opacity ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:forced-colors:focus-visible:outline-[CanvasText]"
+].join(" "), W = {
+  info: { icon: /* @__PURE__ */ t(G, { "aria-hidden": "true" }), role: "status", live: "polite" },
+  success: { icon: /* @__PURE__ */ t(X, { "aria-hidden": "true" }), role: "status", live: "polite" },
+  warning: { icon: /* @__PURE__ */ t(O, { "aria-hidden": "true" }), role: "alert", live: "assertive" },
+  error: { icon: /* @__PURE__ */ t(L, { "aria-hidden": "true" }), role: "alert", live: "assertive" }
+}, b = a(
+  ({ as: s = "h5", className: r, ...o }, e) => /* @__PURE__ */ t(
+    s,
+    {
+      ref: e,
+      className: ["type-title-item", r].filter(Boolean).join(" "),
+      ...o
+    }
+  )
+);
+b.displayName = "Alert.Title";
+const x = a(
+  ({ className: s, ...r }, o) => /* @__PURE__ */ t(
+    "p",
+    {
+      ref: o,
+      className: ["ds:mt-[var(--spacing-xs)] type-body-sm", s].filter(Boolean).join(" "),
+      ...r
+    }
+  )
+);
+x.displayName = "Alert.Description";
+const _ = a(
+  ({ className: s, ...r }, o) => /* @__PURE__ */ t(
+    "div",
+    {
+      ref: o,
+      className: [
+        "ds:mt-[var(--spacing-sm)] ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-sm)]",
+        s
+      ].filter(Boolean).join(" "),
+      ...r
+    }
+  )
+);
+_.displayName = "Alert.Action";
+const w = a(
+  ({
+    variant: s = "info",
+    dismissible: r = !1,
+    open: o,
+    onOpenChange: e,
+    icon: l,
+    live: A,
+    className: h,
+    children: N,
+    ...y
+  }, j) => {
+    const { t: C } = V(), [T, k] = p(!0), [c, m] = p(!1), n = R(null), u = o !== void 0, S = u ? o : T, I = B(() => {
+      if (typeof window > "u") return 200;
+      const v = window.getComputedStyle(document.documentElement).getPropertyValue("--animation-duration");
+      if (!v) return 200;
+      const g = v.trim(), d = parseFloat(g);
+      return Number.isFinite(d) ? g.endsWith("ms") ? d : d * 1e3 : 200;
+    }, []);
+    if (!S) return null;
+    const i = W[s], f = l !== void 0 ? l : i.icon, z = () => {
+      c || (m(!0), n.current && clearTimeout(n.current), n.current = setTimeout(() => {
+        m(!1), u || k(!1), e == null || e(!1);
+      }, I()));
+    };
+    return /* @__PURE__ */ D(
+      "div",
+      {
+        ref: j,
+        role: i.role,
+        "aria-live": A ?? i.live,
+        "data-component": "alert",
+        "data-state": c ? "closing" : "open",
+        className: [
+          M({ variant: s, className: h }),
+          // Entry: fade + slide-down on mount. Exit: fade + slide-up + slight
+          // scale when dismissed. Driven by `tw-animate-css`. Respects
+          // `prefers-reduced-motion` via `motion-safe:` and zeroes under the
+          // accessible theme (`--animation-duration: 0ms`).
+          "ds:motion-safe:animate-in ds:motion-safe:fade-in-0 ds:motion-safe:slide-in-from-top-2",
+          "ds:motion-safe:data-[state=closing]:animate-out ds:motion-safe:data-[state=closing]:fade-out-0",
+          "ds:motion-safe:data-[state=closing]:slide-out-to-top-2 ds:motion-safe:data-[state=closing]:zoom-out-95",
+          // Pin the exit's end-state until React unmounts. Without
+          // `fill-mode-forwards` the element snaps back to opacity:1 for one
+          // paint frame after the animation ends.
+          "ds:motion-safe:data-[state=closing]:fill-mode-forwards",
+          "ds:motion-safe:duration-[var(--animation-duration)]"
+        ].join(" "),
+        ...y,
+        children: [
+          f ? /* @__PURE__ */ t("span", { className: P, children: f }) : null,
+          /* @__PURE__ */ t("div", { className: "ds:flex-1 ds:min-w-0", children: N }),
+          r ? /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              "aria-label": C("ui.common.close", "Close"),
+              onClick: z,
+              className: U,
+              children: /* @__PURE__ */ t(F, { "aria-hidden": "true", className: "ds:size-4" })
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+w.displayName = "Alert";
+const st = Object.assign(w, {
+  Title: b,
+  Description: x,
+  Action: _
+});
+export {
+  st as A
+};
+//# sourceMappingURL=alert-BlOUMkXj.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert-BlOUMkXj.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 {\n  Info,\n  CircleCheck,\n  TriangleAlert,\n  CircleX,\n  X,\n} 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: { icon: <CircleCheck aria-hidden=\"true\" />,   role: 'status', live: 'polite' },\n  warning: { icon: <TriangleAlert aria-hidden=\"true\" />, role: 'alert',  live: 'assertive' },\n  error:   { icon: <CircleX aria-hidden=\"true\" />,       role: 'alert',  live: 'assertive' },\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<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, ...props }, ref) => (\n    <p\n      ref={ref}\n      className={['ds:mt-[var(--spacing-xs)] type-body-sm', className].filter(Boolean).join(' ')}\n      {...props}\n    />\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      ].filter(Boolean).join(' ')}\n      {...props}\n    />\n  ),\n);\nAlertAction.displayName = 'Alert.Action';\n\nexport interface AlertProps\n  extends 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

@@ -0,0 +1,48 @@
+import { useEffect as a } from "react";
+const i = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function c(t) {
+  a(() => {
+    const e = t.current;
+    if (!e) return;
+    const o = () => {
+      e.querySelectorAll('[aria-hidden="true"]').forEach((n) => {
+        n.querySelectorAll(i).forEach((s) => {
+          s.setAttribute("tabindex", "-1");
+        });
+      });
+    };
+    o();
+    const r = new MutationObserver(o);
+    return r.observe(e, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: ["aria-hidden", "tabindex"]
+    }), () => r.disconnect();
+  }, [t]);
+}
+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")],
+    chart: {
+      background: e("--background"),
+      foreColor: e("--foreground"),
+      fontFamily: e("--font-sans")
+    },
+    grid: { borderColor: e("--border") }
+  };
+}
+export {
+  d as g,
+  c as u
+};
+//# sourceMappingURL=apexcharts-theme-BkSShpEy.js.map

package/dist/_chunks/apexcharts-theme-BkSShpEy.js.map

@@ -0,0 +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;"}

package/dist/_chunks/app-frame-6d7Lu4ea.js

@@ -0,0 +1,130 @@
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import { forwardRef as N, useState as S, useCallback as V } from "react";
+import { c as a } from "./index-D2ZczOXr.js";
+import { useTranslation as _ } from "react-i18next";
+const T = a(
+  [
+    "ds:h-dvh ds:w-full",
+    "ds:flex ds:flex-col",
+    "ds:overflow-hidden",
+    "ds:bg-[var(--background)] ds:text-[color:var(--foreground)]",
+    // Elevation cascade driven by main's scrollTop (data-app-scrolled).
+    // Mirrors the Header's native scroll-linked recipe (see `Brand/Shadows`
+    // — one tier up from rest, never two) so the banner looks identical
+    // whether it's in a viewport-scroll context (sticky) or slotted into
+    // AppFrame where <main> owns the scroll.
+    "ds:data-[app-scrolled=true]:[&_[role=banner]]:shadow-[var(--shadow-md)]",
+    "ds:data-[app-scrolled=true]:[&_[role=banner]]:[border-block-end-color:var(--border)]",
+    // Forced-colors: UA strips box-shadow, so the border is the only
+    // separation cue. Always render it.
+    "ds:forced-colors:[&_[role=banner]]:[border-block-end-color:CanvasText]",
+    // Print: strip shadow, keep border so the banner still reads on paper.
+    "ds:print:[&_[role=banner]]:shadow-none",
+    "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(" ")
+), M = a(
+  [
+    // Hidden in the inline flow on mobile — consumers should flip their
+    // Sidebar into overlay mode at narrow viewports, where it portals via
+    // Radix Dialog and therefore renders outside AppFrame entirely.
+    "ds:hidden ds:md:flex",
+    "ds:shrink-0",
+    // The rail fills the row's full height because the row is `flex
+    // items-stretch`. No sticky needed — the row itself never scrolls.
+    "ds:h-full"
+  ].join(" ")
+), C = a(
+  [
+    "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
+    // element does. That keeps the header + sidebar pinned as chrome.
+    "ds:flex-1 ds:min-w-0 ds:overflow-auto",
+    // Focusable via the header's SkipLink — tabIndex={-1} is on the
+    // element itself so keyboard users land inside the main region.
+    "ds:focus:outline-none"
+  ].join(" "),
+  {
+    variants: {
+      padded: {
+        true: [
+          "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
+          "ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]"
+        ].join(" "),
+        false: ""
+      }
+    },
+    defaultVariants: { padded: !0 }
+  }
+), y = a("ds:shrink-0"), I = N(
+  ({
+    header: l,
+    sidebar: t,
+    children: i,
+    endSidebar: r,
+    footer: d,
+    mainId: c = "main-content",
+    mainAriaLabel: m,
+    padded: p = !0,
+    className: f,
+    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);
+      },
+      []
+    );
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        ref: h,
+        "data-app-scrolled": w ? "true" : void 0,
+        "data-component": "app-frame",
+        className: T({ className: f }),
+        ...u,
+        children: [
+          l,
+          /* @__PURE__ */ n("div", { className: A(), "data-app-frame-slot": "row", children: [
+            /* @__PURE__ */ s("div", { className: M(), "data-app-frame-slot": "sidebar", children: t }),
+            /* @__PURE__ */ s(
+              "main",
+              {
+                id: c,
+                tabIndex: -1,
+                "aria-label": x,
+                onScroll: j,
+                className: F({ padded: p, className: b }),
+                children: i
+              }
+            ),
+            r ? /* @__PURE__ */ s(
+              "div",
+              {
+                className: C(),
+                "data-app-frame-slot": "end-sidebar",
+                children: r
+              }
+            ) : null
+          ] }),
+          d ? /* @__PURE__ */ s("div", { className: y(), "data-app-frame-slot": "footer", children: d }) : null
+        ]
+      }
+    );
+  }
+);
+I.displayName = "AppFrame";
+export {
+  I as A
+};
+//# sourceMappingURL=app-frame-6d7Lu4ea.js.map

package/dist/_chunks/app-frame-6d7Lu4ea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-frame-6d7Lu4ea.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  [\n    'ds:flex ds:flex-1 ds:items-stretch ds:min-h-0',\n  ].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  [\n    'ds:hidden ds:md:flex',\n    'ds:shrink-0',\n    'ds:h-full',\n  ].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 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(\n      (event: UIEvent<HTMLElement>) => {\n        const next = event.currentTarget.scrollTop > 0;\n        setMainScrolled((prev) => (prev === next ? prev : next));\n      },\n      [],\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":"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"}

package/dist/_chunks/aspect-ratio-CxsdG8vk.js

@@ -0,0 +1,57 @@
+import { jsx as l } 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(
+  [
+    "ds:relative ds:inline-size-full ds:overflow-hidden",
+    "ds:[&>*]:absolute ds:[&>*]:inset-0 ds:[&>*]:inline-size-full ds:[&>*]:block-size-full",
+    "ds:[&>*]:[object-position:var(--ar-object-position,center)]"
+  ],
+  {
+    variants: {
+      ratio: {
+        "1:1": "ds:aspect-[1/1] ar-1x1",
+        "4:3": "ds:aspect-[4/3] ar-4x3",
+        "16:9": "ds:aspect-[16/9] ar-16x9",
+        "3:2": "ds:aspect-[3/2] ar-3x2",
+        "21:9": "ds:aspect-[21/9] ar-21x9"
+      },
+      fit: {
+        cover: "ds:[&>*]:object-cover",
+        contain: "ds:[&>*]:object-contain",
+        fill: "ds:[&>*]:object-fill",
+        "scale-down": "ds:[&>*]:object-scale-down",
+        none: "ds:[&>*]:object-none"
+      }
+    },
+    defaultVariants: {
+      ratio: "16:9",
+      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 ? {
+      ...o,
+      ...e ? { aspectRatio: t } : {},
+      ...s ? { "--ar-object-position": s } : {}
+    } : void 0;
+    return /* @__PURE__ */ l(
+      "div",
+      {
+        ref: d,
+        "data-component": "aspect-ratio",
+        className: v({ ratio: n, fit: a, className: i }),
+        style: p,
+        ...r,
+        children: c
+      }
+    );
+  }
+);
+b.displayName = "AspectRatio";
+export {
+  b as A
+};
+//# sourceMappingURL=aspect-ratio-CxsdG8vk.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio-CxsdG8vk.js","sources":["../../src/components/aspect-ratio/aspect-ratio.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode, type CSSProperties } 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\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\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  ({ ratio, fit, objectPosition, className, style, children, ...rest }, ref) => {\n    const isNumericRatio = typeof ratio === 'number';\n    const presetRatio = isNumericRatio ? undefined : (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: (CSSProperties & Record<string, string | number>) | undefined =\n      isNumericRatio || objectPosition || style\n        ? {\n            ...style,\n            ...(isNumericRatio ? { aspectRatio: ratio } : {}),\n            ...(objectPosition ? { '--ar-object-position': objectPosition } : {}),\n          }\n        : undefined;\n\n    return (\n      <div\n        ref={ref}\n        data-component=\"aspect-ratio\"\n        className={aspectRatioVariants({ ratio: presetRatio, fit, className })}\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":";;;;AASA,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,GAaaC,IAAcC;AAAA,EACzB,CAAC,EAAE,OAAAC,GAAO,KAAAC,GAAK,gBAAAC,GAAgB,WAAAC,GAAW,OAAAC,GAAO,UAAAC,GAAU,GAAGC,EAAA,GAAQC,MAAQ;AAC5E,UAAMC,IAAiB,OAAOR,KAAU,UAClCS,IAAcD,IAAiB,SAAaR,GAO5CU,IACJF,KAAkBN,KAAkBE,IAChC;AAAA,MACE,GAAGA;AAAA,MACH,GAAII,IAAiB,EAAE,aAAaR,EAAA,IAAU,CAAA;AAAA,MAC9C,GAAIE,IAAiB,EAAE,wBAAwBA,MAAmB,CAAA;AAAA,IAAC,IAErE;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,QACrE,OAAOO;AAAA,QACN,GAAGJ;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAP,EAAY,cAAc;"}