@mastra/playground-ui 61.0.0 → 62.0.0-alpha.0

package/dist/attachment-card-DCw9QEa3.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { T as Txt } from './Txt-BuzYj7Vy.js';
+import { messageSurfaceStyle } from './primitives/message-surface.es.js';
+import { c as cn } from './cn-coERSHz5.js';
+
+function AttachmentPreview({ children }) {
+  return /* @__PURE__ */ jsxs("span", { className: "relative block h-44 mask-b-from-45% mask-b-to-95%", children: [
+    children,
+    /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-0 bottom-0 h-28", children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent,black_15%,black_30%,transparent_45%)] backdrop-blur-[2px]" }),
+      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_15%,black_30%,black_45%,transparent_60%)] backdrop-blur-xs" }),
+      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_30%,black_45%,black_60%,transparent_75%)] backdrop-blur-sm" }),
+      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_45%,black_60%,black_75%,transparent_90%)] backdrop-blur-lg" }),
+      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_60%,black_75%)] backdrop-blur-[32px]" })
+    ] })
+  ] });
+}
+
+function AttachmentCard({ name, typeLabel, icon, preview, onClick, href, buttonRef }) {
+  const className = cn(
+    messageSurfaceStyle,
+    "relative isolate block w-64 max-w-full min-w-0 overflow-hidden text-left",
+    preview && "after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-[inherit] after:inset-ring-1 after:inset-ring-white/15",
+    (onClick || href) && "cursor-pointer hover:bg-fill-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus motion-safe:transition-colors"
+  );
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    preview && /* @__PURE__ */ jsx(AttachmentPreview, { children: preview }),
+    /* @__PURE__ */ jsxs("span", { className: cn("flex min-w-0 items-center gap-2.5 px-3 py-2.5", preview && "absolute inset-x-0 bottom-0"), children: [
+      !preview && /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center text-muted-foreground", "aria-hidden": "true", children: icon }),
+      /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx(Txt, { as: "span", variant: "body-sm", className: "block truncate", title: name, children: name }),
+        /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", tone: "muted", className: "block truncate", children: typeLabel })
+      ] })
+    ] })
+  ] });
+  if (onClick) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: buttonRef,
+        type: "button",
+        className,
+        onClick,
+        "aria-label": `Preview ${name}`,
+        title: name,
+        children: content
+      }
+    );
+  }
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        className,
+        href,
+        target: "_blank",
+        rel: "noreferrer noopener",
+        "aria-label": `Open ${name}`,
+        title: name,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className, title: name, children: content });
+}
+
+export { AttachmentCard as A };
+//# sourceMappingURL=attachment-card-DCw9QEa3.js.map

package/dist/attachment-card-DCw9QEa3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment-card-DCw9QEa3.js","sources":["../src/ds/components/AttachmentCard/attachment-preview.tsx","../src/ds/components/AttachmentCard/attachment-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\n/** Crossfade between fully blurred bands, then fade the image into the message surface for its caption. */\nexport function AttachmentPreview({ children }: { children: ReactNode }) {\n  return (\n    <span className=\"relative block h-44 mask-b-from-45% mask-b-to-95%\">\n      {children}\n      {/* Fully opaque, overlapping bands replace sharp pixels as the blur radius increases.\n          Fading each layer across its entire height would leave sharp detail visible underneath. */}\n      <span aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0 bottom-0 h-28\">\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent,black_15%,black_30%,transparent_45%)] backdrop-blur-[2px]\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_15%,black_30%,black_45%,transparent_60%)] backdrop-blur-xs\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_30%,black_45%,black_60%,transparent_75%)] backdrop-blur-sm\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_45%,black_60%,black_75%,transparent_90%)] backdrop-blur-lg\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_60%,black_75%)] backdrop-blur-[32px]\" />\n      </span>\n    </span>\n  );\n}\n","import type { ReactNode, Ref } from 'react';\nimport { Txt } from '../Txt';\nimport { AttachmentPreview } from './attachment-preview';\nimport { messageSurfaceStyle } from '@/ds/primitives/message-surface';\nimport { cn } from '@/lib/utils';\n\nexport interface AttachmentCardProps {\n  name: string;\n  buttonRef?: Ref<HTMLButtonElement>;\n  typeLabel: string;\n  icon: ReactNode;\n  preview?: ReactNode;\n  onClick?: () => void;\n  href?: string;\n}\n\n/** Sent-file presentation. Upload state and removal controls belong to the composer. */\nexport function AttachmentCard({ name, typeLabel, icon, preview, onClick, href, buttonRef }: AttachmentCardProps) {\n  const className = cn(\n    messageSurfaceStyle,\n    'relative isolate block w-64 max-w-full min-w-0 overflow-hidden text-left',\n    preview &&\n      'after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-[inherit] after:inset-ring-1 after:inset-ring-white/15',\n    (onClick || href) &&\n      'cursor-pointer hover:bg-fill-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus motion-safe:transition-colors',\n  );\n  const content = (\n    <>\n      {preview && <AttachmentPreview>{preview}</AttachmentPreview>}\n      <span className={cn('flex min-w-0 items-center gap-2.5 px-3 py-2.5', preview && 'absolute inset-x-0 bottom-0')}>\n        {!preview && (\n          <span className=\"flex size-5 shrink-0 items-center justify-center text-muted-foreground\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span className=\"min-w-0 flex-1\">\n          <Txt as=\"span\" variant=\"body-sm\" className=\"block truncate\" title={name}>\n            {name}\n          </Txt>\n          <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"block truncate\">\n            {typeLabel}\n          </Txt>\n        </span>\n      </span>\n    </>\n  );\n\n  if (onClick) {\n    return (\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        className={className}\n        onClick={onClick}\n        aria-label={`Preview ${name}`}\n        title={name}\n      >\n        {content}\n      </button>\n    );\n  }\n  if (href) {\n    return (\n      <a\n        className={className}\n        href={href}\n        target=\"_blank\"\n        rel=\"noreferrer noopener\"\n        aria-label={`Open ${name}`}\n        title={name}\n      >\n        {content}\n      </a>\n    );\n  }\n  return (\n    <div className={className} title={name}>\n      {content}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/buttons-group-BU9ErJSH.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { ControlSizeContext } from './primitives/control-size.es.js';
+import { c as cn } from './cn-coERSHz5.js';
+
+import './buttons-group.css';const ButtonsGroup = React.forwardRef(
+  ({ children, className, orientation = "horizontal", size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        "data-slot": "buttons-group",
+        "data-orientation": orientation,
+        "data-size": size,
+        className: cn("flex w-fit items-stretch", orientation === "vertical" ? "flex-col" : "flex-row", className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+ButtonsGroup.displayName = "ButtonsGroup";
+const buttonsGroupTextClassName = cn(
+  "inline-flex items-center justify-center border border-border bg-card text-foreground select-none",
+  "shrink-0 gap-[.75em] rounded-full px-[1em] text-label whitespace-nowrap",
+  "[&>svg]:size-[1.1em] [&>svg]:opacity-50"
+);
+const ButtonsGroupText = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, "data-slot": "buttons-group-text", className: cn(buttonsGroupTextClassName, className), ...props });
+  }
+);
+ButtonsGroupText.displayName = "ButtonsGroupText";
+
+export { ButtonsGroup as B, ButtonsGroupText as a };
+//# sourceMappingURL=buttons-group-BU9ErJSH.js.map

package/dist/buttons-group-BU9ErJSH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttons-group-BU9ErJSH.js","sources":["../src/ds/components/ButtonsGroup/buttons-group.tsx"],"sourcesContent":["import './buttons-group.css';\nimport * as React from 'react';\n\nimport { ControlSizeContext } from '@/ds/primitives/control-size';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\ntype Orientation = 'horizontal' | 'vertical';\n\nexport type ButtonsGroupProps = React.ComponentPropsWithoutRef<'div'> & {\n  orientation?: Orientation;\n  /**\n   * The rung every segment sits on. The group owns it: a child's own `size` cannot lift a\n   * segment off the group's rung, so a group can never render with a step in it.\n   */\n  size?: ControlSize;\n};\n\n/** Joins related actions into one pill. To pick one of several options, use `SegmentedControl` instead. */\nexport const ButtonsGroup = React.forwardRef<HTMLDivElement, ButtonsGroupProps>(\n  ({ children, className, orientation = 'horizontal', size = 'md', ...props }, ref) => {\n    return (\n      <ControlSizeContext.Provider value={size}>\n        <div\n          ref={ref}\n          role=\"group\"\n          data-slot=\"buttons-group\"\n          data-orientation={orientation}\n          data-size={size}\n          className={cn('flex w-fit items-stretch', orientation === 'vertical' ? 'flex-col' : 'flex-row', className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </ControlSizeContext.Provider>\n    );\n  },\n);\nButtonsGroup.displayName = 'ButtonsGroup';\n\n// No size of its own: a text segment only exists inside a group, and the group sets the\n// height. `text-label` is the type role at every rung (see `controlSizeClasses`), so the\n// box grows and the type does not.\nconst buttonsGroupTextClassName = cn(\n  'inline-flex items-center justify-center border border-border bg-card text-foreground select-none',\n  'shrink-0 gap-[.75em] rounded-full px-[1em] text-label whitespace-nowrap',\n  '[&>svg]:size-[1.1em] [&>svg]:opacity-50',\n);\n\nexport type ButtonsGroupTextProps = React.ComponentPropsWithoutRef<'div'>;\n\nexport const ButtonsGroupText = React.forwardRef<HTMLDivElement, ButtonsGroupTextProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div ref={ref} data-slot=\"buttons-group-text\" className={cn(buttonsGroupTextClassName, className)} {...props} />\n    );\n  },\n);\nButtonsGroupText.displayName = 'ButtonsGroupText';\n"],"names":[],"mappings":";;;;;AAmBO,MAAM,eAAe,KAAA,CAAM,UAAA;AAAA,EAChC,CAAC,EAAE,QAAA,EAAU,SAAA,EAAW,WAAA,GAAc,YAAA,EAAc,IAAA,GAAO,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACnF,IAAA,uBACE,GAAA,CAAC,kBAAA,CAAmB,QAAA,EAAnB,EAA4B,OAAO,IAAA,EAClC,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACL,WAAA,EAAU,eAAA;AAAA,QACV,kBAAA,EAAkB,WAAA;AAAA,QAClB,WAAA,EAAW,IAAA;AAAA,QACX,WAAW,EAAA,CAAG,0BAAA,EAA4B,gBAAgB,UAAA,GAAa,UAAA,GAAa,YAAY,SAAS,CAAA;AAAA,QACxG,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;AACA,YAAA,CAAa,WAAA,GAAc,cAAA;AAK3B,MAAM,yBAAA,GAA4B,EAAA;AAAA,EAChC,kGAAA;AAAA,EACA,yEAAA;AAAA,EACA;AACF,CAAA;AAIO,MAAM,mBAAmB,KAAA,CAAM,UAAA;AAAA,EACpC,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAChC,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,WAAA,EAAU,oBAAA,EAAqB,SAAA,EAAW,EAAA,CAAG,yBAAA,EAA2B,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAAA,EAElH;AACF;AACA,gBAAA,CAAiB,WAAA,GAAc,kBAAA;;;;"}

package/dist/buttons-group-C2lPe7sm.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+require('./buttons-group.css');const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const primitives_controlSize = require('./primitives/control-size.cjs.js');
+const utils_cn = require('./cn-TqD01zH-.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const ButtonsGroup = React__namespace.forwardRef(
+  ({ children, className, orientation = "horizontal", size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(primitives_controlSize.ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        "data-slot": "buttons-group",
+        "data-orientation": orientation,
+        "data-size": size,
+        className: utils_cn.cn("flex w-fit items-stretch", orientation === "vertical" ? "flex-col" : "flex-row", className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+ButtonsGroup.displayName = "ButtonsGroup";
+const buttonsGroupTextClassName = utils_cn.cn(
+  "inline-flex items-center justify-center border border-border bg-card text-foreground select-none",
+  "shrink-0 gap-[.75em] rounded-full px-[1em] text-label whitespace-nowrap",
+  "[&>svg]:size-[1.1em] [&>svg]:opacity-50"
+);
+const ButtonsGroupText = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-slot": "buttons-group-text", className: utils_cn.cn(buttonsGroupTextClassName, className), ...props });
+  }
+);
+ButtonsGroupText.displayName = "ButtonsGroupText";
+
+exports.ButtonsGroup = ButtonsGroup;
+exports.ButtonsGroupText = ButtonsGroupText;
+//# sourceMappingURL=buttons-group-C2lPe7sm.cjs.map

package/dist/buttons-group-C2lPe7sm.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttons-group-C2lPe7sm.cjs","sources":["../src/ds/components/ButtonsGroup/buttons-group.tsx"],"sourcesContent":["import './buttons-group.css';\nimport * as React from 'react';\n\nimport { ControlSizeContext } from '@/ds/primitives/control-size';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\ntype Orientation = 'horizontal' | 'vertical';\n\nexport type ButtonsGroupProps = React.ComponentPropsWithoutRef<'div'> & {\n  orientation?: Orientation;\n  /**\n   * The rung every segment sits on. The group owns it: a child's own `size` cannot lift a\n   * segment off the group's rung, so a group can never render with a step in it.\n   */\n  size?: ControlSize;\n};\n\n/** Joins related actions into one pill. To pick one of several options, use `SegmentedControl` instead. */\nexport const ButtonsGroup = React.forwardRef<HTMLDivElement, ButtonsGroupProps>(\n  ({ children, className, orientation = 'horizontal', size = 'md', ...props }, ref) => {\n    return (\n      <ControlSizeContext.Provider value={size}>\n        <div\n          ref={ref}\n          role=\"group\"\n          data-slot=\"buttons-group\"\n          data-orientation={orientation}\n          data-size={size}\n          className={cn('flex w-fit items-stretch', orientation === 'vertical' ? 'flex-col' : 'flex-row', className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </ControlSizeContext.Provider>\n    );\n  },\n);\nButtonsGroup.displayName = 'ButtonsGroup';\n\n// No size of its own: a text segment only exists inside a group, and the group sets the\n// height. `text-label` is the type role at every rung (see `controlSizeClasses`), so the\n// box grows and the type does not.\nconst buttonsGroupTextClassName = cn(\n  'inline-flex items-center justify-center border border-border bg-card text-foreground select-none',\n  'shrink-0 gap-[.75em] rounded-full px-[1em] text-label whitespace-nowrap',\n  '[&>svg]:size-[1.1em] [&>svg]:opacity-50',\n);\n\nexport type ButtonsGroupTextProps = React.ComponentPropsWithoutRef<'div'>;\n\nexport const ButtonsGroupText = React.forwardRef<HTMLDivElement, ButtonsGroupTextProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div ref={ref} data-slot=\"buttons-group-text\" className={cn(buttonsGroupTextClassName, className)} {...props} />\n    );\n  },\n);\nButtonsGroupText.displayName = 'ButtonsGroupText';\n"],"names":["React","jsx","ControlSizeContext","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,eAAeA,gBAAA,CAAM,UAAA;AAAA,EAChC,CAAC,EAAE,QAAA,EAAU,SAAA,EAAW,WAAA,GAAc,YAAA,EAAc,IAAA,GAAO,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACnF,IAAA,uBACEC,cAAA,CAACC,yCAAA,CAAmB,QAAA,EAAnB,EAA4B,OAAO,IAAA,EAClC,QAAA,kBAAAD,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACL,WAAA,EAAU,eAAA;AAAA,QACV,kBAAA,EAAkB,WAAA;AAAA,QAClB,WAAA,EAAW,IAAA;AAAA,QACX,WAAWE,WAAA,CAAG,0BAAA,EAA4B,gBAAgB,UAAA,GAAa,UAAA,GAAa,YAAY,SAAS,CAAA;AAAA,QACxG,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;AACA,YAAA,CAAa,WAAA,GAAc,cAAA;AAK3B,MAAM,yBAAA,GAA4BA,WAAA;AAAA,EAChC,kGAAA;AAAA,EACA,yEAAA;AAAA,EACA;AACF,CAAA;AAIO,MAAM,mBAAmBH,gBAAA,CAAM,UAAA;AAAA,EACpC,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAChC,IAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,WAAA,EAAU,oBAAA,EAAqB,SAAA,EAAWE,WAAA,CAAG,yBAAA,EAA2B,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAAA,EAElH;AACF;AACA,gBAAA,CAAiB,WAAA,GAAc,kBAAA;;;;;"}

package/dist/chart-skeleton-C2-qELLI.js

@@ -0,0 +1,98 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import { CHART_MARGIN, X_AXIS_HEIGHT } from './primitives/chart-layout.es.js';
+import { useShimmerDelay } from './primitives/shimmer.es.js';
+import { c as cn } from './cn-coERSHz5.js';
+
+function ghostValues(count, seed) {
+  let s = seed;
+  const rand = () => {
+    s = (s * 9301 + 49297) % 233280;
+    return s / 233280;
+  };
+  let v = 0.45;
+  return Array.from({ length: count }, () => {
+    v = Math.min(0.85, Math.max(0.25, v + (rand() - 0.5) * 0.3));
+    return v;
+  });
+}
+function ChartSkeleton({ kind, height = 210, className }) {
+  const id = `ghost${useId().replace(/:/g, "")}`;
+  const delay = useShimmerDelay();
+  const values = ghostValues(kind === "bar" ? 24 : 16, kind === "bar" ? 7 : 11);
+  const { ghost, mask, peak } = kind === "bar" ? barGhost(values) : lineGhost(values);
+  const shape = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsxs("linearGradient", { id: `${id}-band`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: "var(--foreground)", stopOpacity: 0 }),
+        /* @__PURE__ */ jsx("stop", { offset: "0.5", stopColor: "var(--foreground)", stopOpacity: peak }),
+        /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "var(--foreground)", stopOpacity: 0 })
+      ] }),
+      /* @__PURE__ */ jsx("mask", { id: `${id}-mask`, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "100", height: "100", children: mask })
+    ] }),
+    ghost,
+    /* @__PURE__ */ jsx("g", { mask: `url(#${id}-mask)`, children: /* @__PURE__ */ jsx(
+      "rect",
+      {
+        width: 40,
+        height: 100,
+        fill: `url(#${id}-band)`,
+        className: "animate-[chart-ghost-sweep_2s_infinite]",
+        style: { animationDelay: delay }
+      }
+    ) })
+  ] });
+  const plot = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", style: { paddingTop: CHART_MARGIN.top }, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "block size-full", "aria-hidden": true, children: shape }) }),
+    /* @__PURE__ */ jsx("div", { style: { height: X_AXIS_HEIGHT } })
+  ] });
+  if (height === "fill") {
+    return /* @__PURE__ */ jsx("div", { role: "status", "aria-label": "Loading chart", className: cn("relative min-h-45 w-full flex-1", className), children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col", children: plot }) });
+  }
+  return /* @__PURE__ */ jsx("div", { role: "status", "aria-label": "Loading chart", className: cn("flex w-full flex-col", className), style: { height }, children: plot });
+}
+function barGhost(values) {
+  const slot = 100 / values.length;
+  const bars = values.map((v, i) => /* @__PURE__ */ jsx("rect", { x: i * slot + slot * 0.15, width: slot * 0.7, y: 100 - v * 100, height: v * 100, rx: 0.4 }, i));
+  return {
+    ghost: /* @__PURE__ */ jsx("g", { fill: "var(--foreground)", fillOpacity: 0.07, children: bars }),
+    mask: /* @__PURE__ */ jsx("g", { fill: "white", children: bars }),
+    peak: 0.09
+  };
+}
+function lineGhost(values) {
+  const step = 100 / (values.length - 1);
+  const pts = values.map((v, i) => [i * step, 100 - v * 100]);
+  const line = pts.map(([x, y], i) => {
+    const prev = pts[i - 1];
+    if (!prev) return `M${x},${y}`;
+    const [px, py] = prev;
+    const cx = (px + x) / 2;
+    return `C${cx},${py} ${cx},${y} ${x},${y}`;
+  }).join(" ");
+  const area = `${line} L100,100 L0,100 Z`;
+  return {
+    ghost: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("path", { d: area, fill: "var(--foreground)", fillOpacity: 0.025 }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: line,
+          fill: "none",
+          stroke: "var(--foreground)",
+          strokeOpacity: 0.12,
+          strokeWidth: 1.75,
+          vectorEffect: "non-scaling-stroke"
+        }
+      )
+    ] }),
+    mask: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("path", { d: area, fill: "white", fillOpacity: 0.2 }),
+      /* @__PURE__ */ jsx("path", { d: line, fill: "none", stroke: "white", strokeWidth: 1.75, vectorEffect: "non-scaling-stroke" })
+    ] }),
+    peak: 0.18
+  };
+}
+
+export { ChartSkeleton as C };
+//# sourceMappingURL=chart-skeleton-C2-qELLI.js.map

package/dist/chart-skeleton-C2-qELLI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-skeleton-C2-qELLI.js","sources":["../src/ds/components/ChartSkeleton/chart-skeleton.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { CHART_MARGIN, X_AXIS_HEIGHT } from '@/ds/primitives/chart-layout';\nimport { useShimmerDelay } from '@/ds/primitives/shimmer';\nimport { cn } from '@/lib/utils';\n\nexport type ChartSkeletonProps = {\n  /** Ghost shape: columns for bar charts, a curve for line charts. */\n  kind: 'bar' | 'line';\n  /** The chart's height, so the card doesn't change size when data lands. `fill` grows with the card. */\n  height?: number | 'fill';\n  className?: string;\n};\n\n/** Deterministic walk, so the ghost doesn't change shape between renders. */\nfunction ghostValues(count: number, seed: number) {\n  let s = seed;\n  const rand = () => {\n    s = (s * 9301 + 49297) % 233280;\n    return s / 233280;\n  };\n  let v = 0.45;\n  return Array.from({ length: count }, () => {\n    v = Math.min(0.85, Math.max(0.25, v + (rand() - 0.5) * 0.3));\n    return v;\n  });\n}\n\n/**\n * A chart while its data loads: faint ghost columns or a ghost curve with a light sweeping\n * across, in the chart's own footprint (plot plus x-axis band).\n */\nexport function ChartSkeleton({ kind, height = 210, className }: ChartSkeletonProps) {\n  const id = `ghost${useId().replace(/:/g, '')}`;\n  const delay = useShimmerDelay();\n  const values = ghostValues(kind === 'bar' ? 24 : 16, kind === 'bar' ? 7 : 11);\n\n  // Ghost shapes at a faint fill, and a 40-unit band of light that sweeps across them (masked\n  // to the shapes), on the same clock as the text skeletons.\n  const { ghost, mask, peak } = kind === 'bar' ? barGhost(values) : lineGhost(values);\n  const shape = (\n    <>\n      <defs>\n        <linearGradient id={`${id}-band`} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n          <stop offset=\"0\" stopColor=\"var(--foreground)\" stopOpacity={0} />\n          <stop offset=\"0.5\" stopColor=\"var(--foreground)\" stopOpacity={peak} />\n          <stop offset=\"1\" stopColor=\"var(--foreground)\" stopOpacity={0} />\n        </linearGradient>\n        <mask id={`${id}-mask`} maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"100\" height=\"100\">\n          {mask}\n        </mask>\n      </defs>\n      {ghost}\n      <g mask={`url(#${id}-mask)`}>\n        <rect\n          width={40}\n          height={100}\n          fill={`url(#${id}-band)`}\n          className=\"animate-[chart-ghost-sweep_2s_infinite]\"\n          style={{ animationDelay: delay }}\n        />\n      </g>\n    </>\n  );\n\n  const plot = (\n    <>\n      <div className=\"min-h-0 flex-1\" style={{ paddingTop: CHART_MARGIN.top }}>\n        <svg viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" className=\"block size-full\" aria-hidden>\n          {shape}\n        </svg>\n      </div>\n      <div style={{ height: X_AXIS_HEIGHT }} />\n    </>\n  );\n  if (height === 'fill') {\n    // The loaded chart's footprint: the free height, at least its minimum, out of flow.\n    return (\n      <div role=\"status\" aria-label=\"Loading chart\" className={cn('relative min-h-45 w-full flex-1', className)}>\n        <div className=\"absolute inset-0 flex flex-col\">{plot}</div>\n      </div>\n    );\n  }\n  return (\n    <div role=\"status\" aria-label=\"Loading chart\" className={cn('flex w-full flex-col', className)} style={{ height }}>\n      {plot}\n    </div>\n  );\n}\n\n/** Ghost bars: the shapes, the mask the light band sweeps through, and the band's peak opacity. */\nfunction barGhost(values: number[]) {\n  const slot = 100 / values.length;\n  const bars = values.map((v, i) => (\n    <rect key={i} x={i * slot + slot * 0.15} width={slot * 0.7} y={100 - v * 100} height={v * 100} rx={0.4} />\n  ));\n  return {\n    ghost: (\n      <g fill=\"var(--foreground)\" fillOpacity={0.07}>\n        {bars}\n      </g>\n    ),\n    mask: <g fill=\"white\">{bars}</g>,\n    peak: 0.09,\n  };\n}\n\n/** A ghost line with a faint area under it, as `barGhost` returns. */\nfunction lineGhost(values: number[]) {\n  const step = 100 / (values.length - 1);\n  const pts = values.map((v, i) => [i * step, 100 - v * 100] as const);\n  const line = pts\n    .map(([x, y], i) => {\n      const prev = pts[i - 1];\n      if (!prev) return `M${x},${y}`;\n      const [px, py] = prev;\n      const cx = (px + x) / 2;\n      return `C${cx},${py} ${cx},${y} ${x},${y}`;\n    })\n    .join(' ');\n  const area = `${line} L100,100 L0,100 Z`;\n  return {\n    ghost: (\n      <>\n        <path d={area} fill=\"var(--foreground)\" fillOpacity={0.025} />\n        <path\n          d={line}\n          fill=\"none\"\n          stroke=\"var(--foreground)\"\n          strokeOpacity={0.12}\n          strokeWidth={1.75}\n          vectorEffect=\"non-scaling-stroke\"\n        />\n      </>\n    ),\n    mask: (\n      <>\n        <path d={area} fill=\"white\" fillOpacity={0.2} />\n        <path d={line} fill=\"none\" stroke=\"white\" strokeWidth={1.75} vectorEffect=\"non-scaling-stroke\" />\n      </>\n    ),\n    peak: 0.18,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/chart-skeleton-PMdW3B43.cjs

@@ -0,0 +1,100 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const primitives_chartLayout = require('./primitives/chart-layout.cjs.js');
+const primitives_shimmer = require('./primitives/shimmer.cjs.js');
+const utils_cn = require('./cn-TqD01zH-.cjs');
+
+function ghostValues(count, seed) {
+  let s = seed;
+  const rand = () => {
+    s = (s * 9301 + 49297) % 233280;
+    return s / 233280;
+  };
+  let v = 0.45;
+  return Array.from({ length: count }, () => {
+    v = Math.min(0.85, Math.max(0.25, v + (rand() - 0.5) * 0.3));
+    return v;
+  });
+}
+function ChartSkeleton({ kind, height = 210, className }) {
+  const id = `ghost${React.useId().replace(/:/g, "")}`;
+  const delay = primitives_shimmer.useShimmerDelay();
+  const values = ghostValues(kind === "bar" ? 24 : 16, kind === "bar" ? 7 : 11);
+  const { ghost, mask, peak } = kind === "bar" ? barGhost(values) : lineGhost(values);
+  const shape = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: `${id}-band`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0", stopColor: "var(--foreground)", stopOpacity: 0 }),
+        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.5", stopColor: "var(--foreground)", stopOpacity: peak }),
+        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "var(--foreground)", stopOpacity: 0 })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("mask", { id: `${id}-mask`, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "100", height: "100", children: mask })
+    ] }),
+    ghost,
+    /* @__PURE__ */ jsxRuntime.jsx("g", { mask: `url(#${id}-mask)`, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        width: 40,
+        height: 100,
+        fill: `url(#${id}-band)`,
+        className: "animate-[chart-ghost-sweep_2s_infinite]",
+        style: { animationDelay: delay }
+      }
+    ) })
+  ] });
+  const plot = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1", style: { paddingTop: primitives_chartLayout.CHART_MARGIN.top }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "block size-full", "aria-hidden": true, children: shape }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: primitives_chartLayout.X_AXIS_HEIGHT } })
+  ] });
+  if (height === "fill") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-label": "Loading chart", className: utils_cn.cn("relative min-h-45 w-full flex-1", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex flex-col", children: plot }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-label": "Loading chart", className: utils_cn.cn("flex w-full flex-col", className), style: { height }, children: plot });
+}
+function barGhost(values) {
+  const slot = 100 / values.length;
+  const bars = values.map((v, i) => /* @__PURE__ */ jsxRuntime.jsx("rect", { x: i * slot + slot * 0.15, width: slot * 0.7, y: 100 - v * 100, height: v * 100, rx: 0.4 }, i));
+  return {
+    ghost: /* @__PURE__ */ jsxRuntime.jsx("g", { fill: "var(--foreground)", fillOpacity: 0.07, children: bars }),
+    mask: /* @__PURE__ */ jsxRuntime.jsx("g", { fill: "white", children: bars }),
+    peak: 0.09
+  };
+}
+function lineGhost(values) {
+  const step = 100 / (values.length - 1);
+  const pts = values.map((v, i) => [i * step, 100 - v * 100]);
+  const line = pts.map(([x, y], i) => {
+    const prev = pts[i - 1];
+    if (!prev) return `M${x},${y}`;
+    const [px, py] = prev;
+    const cx = (px + x) / 2;
+    return `C${cx},${py} ${cx},${y} ${x},${y}`;
+  }).join(" ");
+  const area = `${line} L100,100 L0,100 Z`;
+  return {
+    ghost: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: area, fill: "var(--foreground)", fillOpacity: 0.025 }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: line,
+          fill: "none",
+          stroke: "var(--foreground)",
+          strokeOpacity: 0.12,
+          strokeWidth: 1.75,
+          vectorEffect: "non-scaling-stroke"
+        }
+      )
+    ] }),
+    mask: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: area, fill: "white", fillOpacity: 0.2 }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: line, fill: "none", stroke: "white", strokeWidth: 1.75, vectorEffect: "non-scaling-stroke" })
+    ] }),
+    peak: 0.18
+  };
+}
+
+exports.ChartSkeleton = ChartSkeleton;
+//# sourceMappingURL=chart-skeleton-PMdW3B43.cjs.map

package/dist/chart-skeleton-PMdW3B43.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-skeleton-PMdW3B43.cjs","sources":["../src/ds/components/ChartSkeleton/chart-skeleton.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { CHART_MARGIN, X_AXIS_HEIGHT } from '@/ds/primitives/chart-layout';\nimport { useShimmerDelay } from '@/ds/primitives/shimmer';\nimport { cn } from '@/lib/utils';\n\nexport type ChartSkeletonProps = {\n  /** Ghost shape: columns for bar charts, a curve for line charts. */\n  kind: 'bar' | 'line';\n  /** The chart's height, so the card doesn't change size when data lands. `fill` grows with the card. */\n  height?: number | 'fill';\n  className?: string;\n};\n\n/** Deterministic walk, so the ghost doesn't change shape between renders. */\nfunction ghostValues(count: number, seed: number) {\n  let s = seed;\n  const rand = () => {\n    s = (s * 9301 + 49297) % 233280;\n    return s / 233280;\n  };\n  let v = 0.45;\n  return Array.from({ length: count }, () => {\n    v = Math.min(0.85, Math.max(0.25, v + (rand() - 0.5) * 0.3));\n    return v;\n  });\n}\n\n/**\n * A chart while its data loads: faint ghost columns or a ghost curve with a light sweeping\n * across, in the chart's own footprint (plot plus x-axis band).\n */\nexport function ChartSkeleton({ kind, height = 210, className }: ChartSkeletonProps) {\n  const id = `ghost${useId().replace(/:/g, '')}`;\n  const delay = useShimmerDelay();\n  const values = ghostValues(kind === 'bar' ? 24 : 16, kind === 'bar' ? 7 : 11);\n\n  // Ghost shapes at a faint fill, and a 40-unit band of light that sweeps across them (masked\n  // to the shapes), on the same clock as the text skeletons.\n  const { ghost, mask, peak } = kind === 'bar' ? barGhost(values) : lineGhost(values);\n  const shape = (\n    <>\n      <defs>\n        <linearGradient id={`${id}-band`} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n          <stop offset=\"0\" stopColor=\"var(--foreground)\" stopOpacity={0} />\n          <stop offset=\"0.5\" stopColor=\"var(--foreground)\" stopOpacity={peak} />\n          <stop offset=\"1\" stopColor=\"var(--foreground)\" stopOpacity={0} />\n        </linearGradient>\n        <mask id={`${id}-mask`} maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"100\" height=\"100\">\n          {mask}\n        </mask>\n      </defs>\n      {ghost}\n      <g mask={`url(#${id}-mask)`}>\n        <rect\n          width={40}\n          height={100}\n          fill={`url(#${id}-band)`}\n          className=\"animate-[chart-ghost-sweep_2s_infinite]\"\n          style={{ animationDelay: delay }}\n        />\n      </g>\n    </>\n  );\n\n  const plot = (\n    <>\n      <div className=\"min-h-0 flex-1\" style={{ paddingTop: CHART_MARGIN.top }}>\n        <svg viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" className=\"block size-full\" aria-hidden>\n          {shape}\n        </svg>\n      </div>\n      <div style={{ height: X_AXIS_HEIGHT }} />\n    </>\n  );\n  if (height === 'fill') {\n    // The loaded chart's footprint: the free height, at least its minimum, out of flow.\n    return (\n      <div role=\"status\" aria-label=\"Loading chart\" className={cn('relative min-h-45 w-full flex-1', className)}>\n        <div className=\"absolute inset-0 flex flex-col\">{plot}</div>\n      </div>\n    );\n  }\n  return (\n    <div role=\"status\" aria-label=\"Loading chart\" className={cn('flex w-full flex-col', className)} style={{ height }}>\n      {plot}\n    </div>\n  );\n}\n\n/** Ghost bars: the shapes, the mask the light band sweeps through, and the band's peak opacity. */\nfunction barGhost(values: number[]) {\n  const slot = 100 / values.length;\n  const bars = values.map((v, i) => (\n    <rect key={i} x={i * slot + slot * 0.15} width={slot * 0.7} y={100 - v * 100} height={v * 100} rx={0.4} />\n  ));\n  return {\n    ghost: (\n      <g fill=\"var(--foreground)\" fillOpacity={0.07}>\n        {bars}\n      </g>\n    ),\n    mask: <g fill=\"white\">{bars}</g>,\n    peak: 0.09,\n  };\n}\n\n/** A ghost line with a faint area under it, as `barGhost` returns. */\nfunction lineGhost(values: number[]) {\n  const step = 100 / (values.length - 1);\n  const pts = values.map((v, i) => [i * step, 100 - v * 100] as const);\n  const line = pts\n    .map(([x, y], i) => {\n      const prev = pts[i - 1];\n      if (!prev) return `M${x},${y}`;\n      const [px, py] = prev;\n      const cx = (px + x) / 2;\n      return `C${cx},${py} ${cx},${y} ${x},${y}`;\n    })\n    .join(' ');\n  const area = `${line} L100,100 L0,100 Z`;\n  return {\n    ghost: (\n      <>\n        <path d={area} fill=\"var(--foreground)\" fillOpacity={0.025} />\n        <path\n          d={line}\n          fill=\"none\"\n          stroke=\"var(--foreground)\"\n          strokeOpacity={0.12}\n          strokeWidth={1.75}\n          vectorEffect=\"non-scaling-stroke\"\n        />\n      </>\n    ),\n    mask: (\n      <>\n        <path d={area} fill=\"white\" fillOpacity={0.2} />\n        <path d={line} fill=\"none\" stroke=\"white\" strokeWidth={1.75} vectorEffect=\"non-scaling-stroke\" />\n      </>\n    ),\n    peak: 0.18,\n  };\n}\n"],"names":["useId","useShimmerDelay","jsxs","Fragment","jsx","CHART_MARGIN","X_AXIS_HEIGHT","cn"],"mappings":";;;;;;;;AAcA,SAAS,WAAA,CAAY,OAAe,IAAA,EAAc;AAChD,EAAA,IAAI,CAAA,GAAI,IAAA;AACR,EAAA,MAAM,OAAO,MAAM;AACjB,IAAA,CAAA,GAAA,CAAK,CAAA,GAAI,OAAO,KAAA,IAAS,MAAA;AACzB,IAAA,OAAO,CAAA,GAAI,MAAA;AAAA,EACb,CAAA;AACA,EAAA,IAAI,CAAA,GAAI,IAAA;AACR,EAAA,OAAO,MAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,KAAA,IAAS,MAAM;AACzC,IAAA,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,IAAA,EAAM,IAAA,CAAK,GAAA,CAAI,IAAA,EAAM,CAAA,GAAA,CAAK,IAAA,EAAK,GAAI,GAAA,IAAO,GAAG,CAAC,CAAA;AAC3D,IAAA,OAAO,CAAA;AAAA,EACT,CAAC,CAAA;AACH;AAMO,SAAS,cAAc,EAAE,IAAA,EAAM,MAAA,GAAS,GAAA,EAAK,WAAU,EAAuB;AACnF,EAAA,MAAM,KAAK,CAAA,KAAA,EAAQA,WAAA,GAAQ,OAAA,CAAQ,IAAA,EAAM,EAAE,CAAC,CAAA,CAAA;AAC5C,EAAA,MAAM,QAAQC,kCAAA,EAAgB;AAC9B,EAAA,MAAM,MAAA,GAAS,YAAY,IAAA,KAAS,KAAA,GAAQ,KAAK,EAAA,EAAI,IAAA,KAAS,KAAA,GAAQ,CAAA,GAAI,EAAE,CAAA;AAI5E,EAAA,MAAM,EAAE,KAAA,EAAO,IAAA,EAAM,IAAA,EAAK,GAAI,IAAA,KAAS,KAAA,GAAQ,QAAA,CAAS,MAAM,CAAA,GAAI,SAAA,CAAU,MAAM,CAAA;AAClF,EAAA,MAAM,wBACJC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAD,eAAA,CAAC,MAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAA,eAAA,CAAC,gBAAA,EAAA,EAAe,EAAA,EAAI,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA,EAAS,EAAA,EAAG,GAAA,EAAI,EAAA,EAAG,GAAA,EAAI,EAAA,EAAG,GAAA,EAAI,EAAA,EAAG,GAAA,EACxD,QAAA,EAAA;AAAA,wBAAAE,cAAA,CAAC,UAAK,MAAA,EAAO,GAAA,EAAI,SAAA,EAAU,mBAAA,EAAoB,aAAa,CAAA,EAAG,CAAA;AAAA,uCAC9D,MAAA,EAAA,EAAK,MAAA,EAAO,OAAM,SAAA,EAAU,mBAAA,EAAoB,aAAa,IAAA,EAAM,CAAA;AAAA,uCACnE,MAAA,EAAA,EAAK,MAAA,EAAO,KAAI,SAAA,EAAU,mBAAA,EAAoB,aAAa,CAAA,EAAG;AAAA,OAAA,EACjE,CAAA;AAAA,qCACC,MAAA,EAAA,EAAK,EAAA,EAAI,CAAA,EAAG,EAAE,SAAS,SAAA,EAAU,gBAAA,EAAiB,CAAA,EAAE,GAAA,EAAI,GAAE,GAAA,EAAI,KAAA,EAAM,KAAA,EAAM,MAAA,EAAO,OAC/E,QAAA,EAAA,IAAA,EACH;AAAA,KAAA,EACF,CAAA;AAAA,IACC,KAAA;AAAA,oBACDA,cAAA,CAAC,GAAA,EAAA,EAAE,IAAA,EAAM,CAAA,KAAA,EAAQ,EAAE,CAAA,MAAA,CAAA,EACjB,QAAA,kBAAAA,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,EAAA;AAAA,QACP,MAAA,EAAQ,GAAA;AAAA,QACR,IAAA,EAAM,QAAQ,EAAE,CAAA,MAAA,CAAA;AAAA,QAChB,SAAA,EAAU,yCAAA;AAAA,QACV,KAAA,EAAO,EAAE,cAAA,EAAgB,KAAA;AAAM;AAAA,KACjC,EACF;AAAA,GAAA,EACF,CAAA;AAGF,EAAA,MAAM,uBACJF,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,gBAAA,EAAiB,KAAA,EAAO,EAAE,UAAA,EAAYC,mCAAA,CAAa,KAAI,EACpE,QAAA,kBAAAD,cAAA,CAAC,SAAI,OAAA,EAAQ,aAAA,EAAc,qBAAoB,MAAA,EAAO,SAAA,EAAU,mBAAkB,aAAA,EAAW,IAAA,EAC1F,iBACH,CAAA,EACF,CAAA;AAAA,mCACC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,MAAA,EAAQE,sCAAc,EAAG;AAAA,GAAA,EACzC,CAAA;AAEF,EAAA,IAAI,WAAW,MAAA,EAAQ;AAErB,IAAA,sCACG,KAAA,EAAA,EAAI,IAAA,EAAK,QAAA,EAAS,YAAA,EAAW,iBAAgB,SAAA,EAAWC,WAAA,CAAG,iCAAA,EAAmC,SAAS,GACtG,QAAA,kBAAAH,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gCAAA,EAAkC,gBAAK,CAAA,EACxD,CAAA;AAAA,EAEJ;AACA,EAAA,uBACEA,cAAA,CAAC,KAAA,EAAA,EAAI,IAAA,EAAK,QAAA,EAAS,cAAW,eAAA,EAAgB,SAAA,EAAWG,WAAA,CAAG,sBAAA,EAAwB,SAAS,CAAA,EAAG,KAAA,EAAO,EAAE,MAAA,IACtG,QAAA,EAAA,IAAA,EACH,CAAA;AAEJ;AAGA,SAAS,SAAS,MAAA,EAAkB;AAClC,EAAA,MAAM,IAAA,GAAO,MAAM,MAAA,CAAO,MAAA;AAC1B,EAAA,MAAM,IAAA,GAAO,MAAA,CAAO,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,qBAC1BH,cAAA,CAAC,MAAA,EAAA,EAAa,CAAA,EAAG,CAAA,GAAI,IAAA,GAAO,IAAA,GAAO,IAAA,EAAM,OAAO,IAAA,GAAO,GAAA,EAAK,CAAA,EAAG,GAAA,GAAM,CAAA,GAAI,GAAA,EAAK,MAAA,EAAQ,CAAA,GAAI,GAAA,EAAK,EAAA,EAAI,GAAA,EAAA,EAAxF,CAA6F,CACzG,CAAA;AACD,EAAA,OAAO;AAAA,IACL,uBACEA,cAAA,CAAC,GAAA,EAAA,EAAE,MAAK,mBAAA,EAAoB,WAAA,EAAa,MACtC,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,IAEF,IAAA,kBAAMA,cAAA,CAAC,GAAA,EAAA,EAAE,IAAA,EAAK,SAAS,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,IAC5B,IAAA,EAAM;AAAA,GACR;AACF;AAGA,SAAS,UAAU,MAAA,EAAkB;AACnC,EAAA,MAAM,IAAA,GAAO,GAAA,IAAO,MAAA,CAAO,MAAA,GAAS,CAAA,CAAA;AACpC,EAAA,MAAM,GAAA,GAAM,MAAA,CAAO,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,KAAM,CAAC,CAAA,GAAI,IAAA,EAAM,GAAA,GAAM,CAAA,GAAI,GAAG,CAAU,CAAA;AACnE,EAAA,MAAM,IAAA,GAAO,IACV,GAAA,CAAI,CAAC,CAAC,CAAA,EAAG,CAAC,GAAG,CAAA,KAAM;AAClB,IAAA,MAAM,IAAA,GAAO,GAAA,CAAI,CAAA,GAAI,CAAC,CAAA;AACtB,IAAA,IAAI,CAAC,IAAA,EAAM,OAAO,CAAA,CAAA,EAAI,CAAC,IAAI,CAAC,CAAA,CAAA;AAC5B,IAAA,MAAM,CAAC,EAAA,EAAI,EAAE,CAAA,GAAI,IAAA;AACjB,IAAA,MAAM,EAAA,GAAA,CAAM,KAAK,CAAA,IAAK,CAAA;AACtB,IAAA,OAAO,CAAA,CAAA,EAAI,EAAE,CAAA,CAAA,EAAI,EAAE,CAAA,CAAA,EAAI,EAAE,CAAA,CAAA,EAAI,CAAC,CAAA,CAAA,EAAI,CAAC,CAAA,CAAA,EAAI,CAAC,CAAA,CAAA;AAAA,EAC1C,CAAC,CAAA,CACA,IAAA,CAAK,GAAG,CAAA;AACX,EAAA,MAAM,IAAA,GAAO,GAAG,IAAI,CAAA,kBAAA,CAAA;AACpB,EAAA,OAAO;AAAA,IACL,uBACEF,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,UAAK,CAAA,EAAG,IAAA,EAAM,IAAA,EAAK,mBAAA,EAAoB,aAAa,KAAA,EAAO,CAAA;AAAA,sBAC5DA,cAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,CAAA,EAAG,IAAA;AAAA,UACH,IAAA,EAAK,MAAA;AAAA,UACL,MAAA,EAAO,mBAAA;AAAA,UACP,aAAA,EAAe,IAAA;AAAA,UACf,WAAA,EAAa,IAAA;AAAA,UACb,YAAA,EAAa;AAAA;AAAA;AACf,KAAA,EACF,CAAA;AAAA,IAEF,sBACEF,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,UAAK,CAAA,EAAG,IAAA,EAAM,IAAA,EAAK,OAAA,EAAQ,aAAa,GAAA,EAAK,CAAA;AAAA,sBAC9CA,cAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAG,IAAA,EAAM,IAAA,EAAK,MAAA,EAAO,MAAA,EAAO,OAAA,EAAQ,WAAA,EAAa,IAAA,EAAM,YAAA,EAAa,oBAAA,EAAqB;AAAA,KAAA,EACjG,CAAA;AAAA,IAEF,IAAA,EAAM;AAAA,GACR;AACF;;;;"}

package/dist/chart-tooltip-BrGMkxJ8.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { overlaySurfaceStyle } from './primitives/raised-surface.es.js';
+import { c as cn } from './cn-coERSHz5.js';
+
+function ChartTooltip({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "chart-tooltip",
+      className: cn(overlaySurfaceStyle, "rounded-lg px-3 py-2 text-caption text-foreground", className),
+      ...props
+    }
+  );
+}
+
+export { ChartTooltip as C };
+//# sourceMappingURL=chart-tooltip-BrGMkxJ8.js.map

package/dist/chart-tooltip-BrGMkxJ8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-tooltip-BrGMkxJ8.js","sources":["../src/ds/components/ChartTooltip/chart-tooltip.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { overlaySurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\nexport type ChartTooltipProps = ComponentPropsWithoutRef<'div'>;\n\n/**\n * The floating readout a chart shows on hover — scatter points, line series,\n * sankey nodes, lifeline markers.\n *\n * It is a raised surface, so it carries no border of its own: the rim lives in\n * the `shadow-overlay` utility. Call sites pass only what is genuinely local — positioning\n * and sizing — never background, border or shadow.\n */\nexport function ChartTooltip({ className, ...props }: ChartTooltipProps) {\n  return (\n    <div\n      data-slot=\"chart-tooltip\"\n      className={cn(overlaySurfaceStyle, 'rounded-lg px-3 py-2 text-caption text-foreground', className)}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;AAeO,SAAS,YAAA,CAAa,EAAE,SAAA,EAAW,GAAG,OAAM,EAAsB;AACvE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,eAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,mBAAA,EAAqB,mDAAA,EAAqD,SAAS,CAAA;AAAA,MAChG,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/chart-tooltip-Ci8Qm5Av.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const primitives_raisedSurface = require('./primitives/raised-surface.cjs.js');
+const utils_cn = require('./cn-TqD01zH-.cjs');
+
+function ChartTooltip({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "chart-tooltip",
+      className: utils_cn.cn(primitives_raisedSurface.overlaySurfaceStyle, "rounded-lg px-3 py-2 text-caption text-foreground", className),
+      ...props
+    }
+  );
+}
+
+exports.ChartTooltip = ChartTooltip;
+//# sourceMappingURL=chart-tooltip-Ci8Qm5Av.cjs.map

package/dist/chart-tooltip-Ci8Qm5Av.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-tooltip-Ci8Qm5Av.cjs","sources":["../src/ds/components/ChartTooltip/chart-tooltip.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { overlaySurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\nexport type ChartTooltipProps = ComponentPropsWithoutRef<'div'>;\n\n/**\n * The floating readout a chart shows on hover — scatter points, line series,\n * sankey nodes, lifeline markers.\n *\n * It is a raised surface, so it carries no border of its own: the rim lives in\n * the `shadow-overlay` utility. Call sites pass only what is genuinely local — positioning\n * and sizing — never background, border or shadow.\n */\nexport function ChartTooltip({ className, ...props }: ChartTooltipProps) {\n  return (\n    <div\n      data-slot=\"chart-tooltip\"\n      className={cn(overlaySurfaceStyle, 'rounded-lg px-3 py-2 text-caption text-foreground', className)}\n      {...props}\n    />\n  );\n}\n"],"names":["jsx","cn","overlaySurfaceStyle"],"mappings":";;;;;;AAeO,SAAS,YAAA,CAAa,EAAE,SAAA,EAAW,GAAG,OAAM,EAAsB;AACvE,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,eAAA;AAAA,MACV,SAAA,EAAWC,WAAA,CAAGC,4CAAA,EAAqB,mDAAA,EAAqD,SAAS,CAAA;AAAA,MAChG,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/checkbox-DNlMGoJH.cjs

@@ -0,0 +1,102 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const checkbox = require('@base-ui/react/checkbox');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const fieldControlAria = require('./field-control-aria-WzMGs0A4.cjs');
+const primitives_selectionControl = require('./primitives/selection-control.cjs.js');
+const utils_cn = require('./cn-TqD01zH-.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Checkbox = React__namespace.forwardRef(
+  ({ className, checked, indeterminate, ...props }, ref) => {
+    const isCheckedIndeterminate = checked === "indeterminate";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      checkbox.Checkbox.Root,
+      {
+        ref,
+        checked: isCheckedIndeterminate ? false : checked,
+        indeterminate: indeterminate ?? isCheckedIndeterminate,
+        "data-slot": "checkbox",
+        render: /* @__PURE__ */ jsxRuntime.jsx("span", { ...fieldControlAria.keepOwnAccessibleName(props) }),
+        className: utils_cn.cn(
+          "peer rounded-[0.3125rem]",
+          primitives_selectionControl.selectionControlStyle,
+          // Indeterminate is checkbox-only and mirrors the checked chip.
+          "data-[indeterminate]:border-foreground data-[indeterminate]:bg-foreground data-[indeterminate]:text-background",
+          "data-[indeterminate]:hover:border-foreground/90 data-[indeterminate]:hover:bg-foreground/90",
+          "data-[indeterminate]:active:border-foreground/75 data-[indeterminate]:active:bg-foreground/75",
+          "data-[disabled]:data-[indeterminate]:border-muted-foreground data-[disabled]:data-[indeterminate]:bg-muted-foreground data-[disabled]:data-[indeterminate]:text-background",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          checkbox.Checkbox.Indicator,
+          {
+            keepMounted: true,
+            className: utils_cn.cn(
+              "group/checkbox-indicator flex items-center justify-center text-current",
+              "scale-75 opacity-0 transition-[opacity,transform] duration-200 ease-out-custom",
+              "data-[checked]:scale-100 data-[checked]:opacity-100",
+              "data-[indeterminate]:scale-100 data-[indeterminate]:opacity-100",
+              "data-[starting-style]:scale-75 data-[starting-style]:opacity-0",
+              "data-[ending-style]:scale-75 data-[ending-style]:opacity-0"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxIndicatorIcon, {})
+          }
+        )
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+function CheckboxIndicatorIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      lucideReact.Check,
+      {
+        className: utils_cn.cn(
+          "stroke-3.25 size-3 scale-95 transition-[stroke-dashoffset,transform] duration-200 ease-out-custom",
+          // Lucide's check path is ~22.6 units long. Use a longer dash so the
+          // final checked mark is never clipped.
+          "[stroke-dasharray:28] [stroke-dashoffset:28]",
+          "group-data-[checked]/checkbox-indicator:[stroke-dashoffset:0]",
+          "group-data-[checked]/checkbox-indicator:scale-100",
+          "group-data-[indeterminate]/checkbox-indicator:hidden"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      lucideReact.Minus,
+      {
+        className: utils_cn.cn(
+          "stroke-3.25 hidden size-3 scale-95 transition-transform duration-200 ease-out-custom",
+          "group-data-[indeterminate]/checkbox-indicator:block",
+          "group-data-[indeterminate]/checkbox-indicator:scale-100"
+        )
+      }
+    )
+  ] });
+}
+
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=checkbox-DNlMGoJH.cjs.map

package/dist/checkbox-DNlMGoJH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-DNlMGoJH.cjs","sources":["../src/ds/components/Checkbox/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { Check, Minus } from 'lucide-react';\nimport * as React from 'react';\n\nimport { keepOwnAccessibleName } from '@/ds/components/Field/field-control-aria';\nimport { selectionControlStyle } from '@/ds/primitives/selection-control';\nimport { cn } from '@/lib/utils';\n\n/**\n * Radix-style tri-state value for the controlled `checked` prop. Base UI splits\n * this into a strict `checked` boolean plus a separate `indeterminate` boolean —\n * we keep the Radix union here so existing consumers (which pass\n * `checked=\"indeterminate\"`) keep working without changes.\n *\n * `defaultChecked` is intentionally a plain boolean: an uncontrolled checkbox\n * cannot start \"indeterminate\" and then be toggled out of it (the indeterminate\n * state is inherently controlled), so `'indeterminate'` is not allowed there.\n */\nexport type CheckedState = boolean | 'indeterminate';\n\ntype CheckboxProps = Omit<CheckboxPrimitive.Root.Props, 'className' | 'checked'> & {\n  className?: string;\n  checked?: CheckedState;\n};\n\nconst Checkbox = React.forwardRef<HTMLSpanElement, CheckboxProps>(\n  ({ className, checked, indeterminate, ...props }, ref) => {\n    // Translate the Radix `'indeterminate'` sentinel into Base UI's dedicated\n    // `indeterminate` prop while leaving `checked` as a boolean.\n    const isCheckedIndeterminate = checked === 'indeterminate';\n\n    return (\n      <CheckboxPrimitive.Root\n        ref={ref}\n        checked={isCheckedIndeterminate ? false : checked}\n        indeterminate={indeterminate ?? isCheckedIndeterminate}\n        data-slot=\"checkbox\"\n        render={<span {...keepOwnAccessibleName(props)} />}\n        className={cn(\n          'peer rounded-[0.3125rem]',\n          selectionControlStyle,\n          // Indeterminate is checkbox-only and mirrors the checked chip.\n          'data-[indeterminate]:border-foreground data-[indeterminate]:bg-foreground data-[indeterminate]:text-background',\n          'data-[indeterminate]:hover:border-foreground/90 data-[indeterminate]:hover:bg-foreground/90',\n          'data-[indeterminate]:active:border-foreground/75 data-[indeterminate]:active:bg-foreground/75',\n          'data-[disabled]:data-[indeterminate]:border-muted-foreground data-[disabled]:data-[indeterminate]:bg-muted-foreground data-[disabled]:data-[indeterminate]:text-background',\n          className,\n        )}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator\n          keepMounted\n          className={cn(\n            'group/checkbox-indicator flex items-center justify-center text-current',\n            'scale-75 opacity-0 transition-[opacity,transform] duration-200 ease-out-custom',\n            'data-[checked]:scale-100 data-[checked]:opacity-100',\n            'data-[indeterminate]:scale-100 data-[indeterminate]:opacity-100',\n            'data-[starting-style]:scale-75 data-[starting-style]:opacity-0',\n            'data-[ending-style]:scale-75 data-[ending-style]:opacity-0',\n          )}\n        >\n          <CheckboxIndicatorIcon />\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n  },\n);\nCheckbox.displayName = 'Checkbox';\n\n/**\n * Picks the checkmark vs. the dash based on the Indicator's data attributes.\n * The Indicator stays mounted so unchecked transitions can animate out cleanly.\n */\nfunction CheckboxIndicatorIcon() {\n  return (\n    <>\n      <Check\n        className={cn(\n          'stroke-3.25 size-3 scale-95 transition-[stroke-dashoffset,transform] duration-200 ease-out-custom',\n          // Lucide's check path is ~22.6 units long. Use a longer dash so the\n          // final checked mark is never clipped.\n          '[stroke-dasharray:28] [stroke-dashoffset:28]',\n          'group-data-[checked]/checkbox-indicator:[stroke-dashoffset:0]',\n          'group-data-[checked]/checkbox-indicator:scale-100',\n          'group-data-[indeterminate]/checkbox-indicator:hidden',\n        )}\n      />\n      <Minus\n        className={cn(\n          'stroke-3.25 hidden size-3 scale-95 transition-transform duration-200 ease-out-custom',\n          'group-data-[indeterminate]/checkbox-indicator:block',\n          'group-data-[indeterminate]/checkbox-indicator:scale-100',\n        )}\n      />\n    </>\n  );\n}\n\nexport { Checkbox };\nexport type { CheckboxProps };\n"],"names":["React","jsx","CheckboxPrimitive","keepOwnAccessibleName","cn","selectionControlStyle","jsxs","Fragment","Check","Minus"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,WAAWA,gBAAA,CAAM,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,eAAe,GAAG,KAAA,IAAS,GAAA,KAAQ;AAGxD,IAAA,MAAM,yBAAyB,OAAA,KAAY,eAAA;AAE3C,IAAA,uBACEC,cAAA;AAAA,MAACC,iBAAA,CAAkB,IAAA;AAAA,MAAlB;AAAA,QACC,GAAA;AAAA,QACA,OAAA,EAAS,yBAAyB,KAAA,GAAQ,OAAA;AAAA,QAC1C,eAAe,aAAA,IAAiB,sBAAA;AAAA,QAChC,WAAA,EAAU,UAAA;AAAA,QACV,wBAAQD,cAAA,CAAC,MAAA,EAAA,EAAM,GAAGE,sCAAA,CAAsB,KAAK,CAAA,EAAG,CAAA;AAAA,QAChD,SAAA,EAAWC,WAAA;AAAA,UACT,0BAAA;AAAA,UACAC,iDAAA;AAAA;AAAA,UAEA,gHAAA;AAAA,UACA,6FAAA;AAAA,UACA,+FAAA;AAAA,UACA,4KAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAAJ,cAAA;AAAA,UAACC,iBAAA,CAAkB,SAAA;AAAA,UAAlB;AAAA,YACC,WAAA,EAAW,IAAA;AAAA,YACX,SAAA,EAAWE,WAAA;AAAA,cACT,wEAAA;AAAA,cACA,gFAAA;AAAA,cACA,qDAAA;AAAA,cACA,iEAAA;AAAA,cACA,gEAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEA,yCAAC,qBAAA,EAAA,EAAsB;AAAA;AAAA;AACzB;AAAA,KACF;AAAA,EAEJ;AACF;AACA,QAAA,CAAS,WAAA,GAAc,UAAA;AAMvB,SAAS,qBAAA,GAAwB;AAC/B,EAAA,uBACEE,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAN,cAAA;AAAA,MAACO,iBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWJ,WAAA;AAAA,UACT,mGAAA;AAAA;AAAA;AAAA,UAGA,8CAAA;AAAA,UACA,+DAAA;AAAA,UACA,mDAAA;AAAA,UACA;AAAA;AACF;AAAA,KACF;AAAA,oBACAH,cAAA;AAAA,MAACQ,iBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWL,WAAA;AAAA,UACT,sFAAA;AAAA,UACA,qDAAA;AAAA,UACA;AAAA;AACF;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;"}