@mastra/playground-ui 33.0.0-alpha.2 → 33.0.0-alpha.4

package/CHANGELOG.md

@@ -1,5 +1,184 @@
 # @mastra/playground-ui
 
+## 33.0.0-alpha.4
+
+### Minor Changes
+
+- Added shared chat loading and tool card components to the playground UI package. ([#17774](https://github.com/mastra-ai/mastra/pull/17774))
+
+- Added per-component entrypoints under `@mastra/playground-ui/components/*` and enabled tree-shaking via the `sideEffects` field. ([#17740](https://github.com/mastra-ai/mastra/pull/17740))
+
+  **New per-component entrypoints**
+
+  Every design-system component can now be imported directly, without going through the root barrel:
+
+  ```ts
+  import { Button } from '@mastra/playground-ui/components/Button';
+  ```
+
+  The root `@mastra/playground-ui` import keeps working unchanged — this change is purely additive. Deep imports let bundlers pull in only the components you use instead of the whole library.
+
+  **Better tree-shaking**
+
+  The package now declares `"sideEffects": ["**/*.css"]`, so bundlers can drop unused re-exports even for apps that keep importing from the root barrel. The CSS contract is unchanged: import `@mastra/playground-ui/style.css` once, then import components from any subpath.
+
+- Removed legacy raw font-name aliases from playground UI theme tokens. Consumers should use `--font-display`, `--font-body`, and `--font-mono` directly. ([#17707](https://github.com/mastra-ai/mastra/pull/17707))
+
+- Redesigned resize handles across the studio. The sidebar and panel separators now show a subtle gradient line that fades in on hover and stays visible for the whole drag — including when the sidebar is collapsed to icons and the cursor moves away from the handle (the handle now captures the pointer during the gesture). `PanelSeparator` accepts a new `variant` prop: `line` (default) fits panels with a visible container edge, `pill` shows a floating pill for panels without one. ([#17823](https://github.com/mastra-ai/mastra/pull/17823))
+
+  ```tsx
+  <PanelSeparator />            // gradient line (default)
+  <PanelSeparator variant="pill" />  // floating pill
+  ```
+
+- Added a Download trace JSON button to the trace detail panel in Studio. It saves the entire trace — every span with its full input, output, metadata, and attributes — to a `trace-<id>.json` file, so you can share a trace, attach it to a bug report, or build an eval dataset offline. Previously only individual IDs and per-section values could be copied. ([#17752](https://github.com/mastra-ai/mastra/pull/17752))
+
+- Improved code rendering in the design system so `CodeBlock` is the canonical surface for static code. ([#17430](https://github.com/mastra-ai/mastra/pull/17430))
+
+  **Fixed** syntax-highlighted code to follow light and dark mode by default. Token colors are now resolved in CSS from the active theme class instead of JavaScript, so highlighted code works without a `ThemeProvider`.
+
+  **Added** a low-level `Code` component, now shared by `CodeBlock` and `MarkdownRenderer` and exported for custom code surfaces:
+
+  ```tsx
+  import { Code } from '@mastra/playground-ui';
+
+  <Code code="pnpm dlx mastra init" lang="bash" />;
+  ```
+
+  **Added** an `overflow` prop to `CodeBlock`. Use the default `wrap` for commands and snippets, and `scroll` for source code where preserving columns matters:
+
+  ```tsx
+  <CodeBlock code={source} lang="typescript" overflow="scroll" />
+  ```
+
+  **Added** Python syntax highlighting support.
+
+- Added a new `@mastra/playground-ui/theme.css` export and made the Mastra brand green a built-in color. ([#17668](https://github.com/mastra-ai/mastra/pull/17668))
+
+  **New theme.css export**
+
+  You can now import the design tokens as raw CSS:
+
+  ```css
+  @import 'tailwindcss';
+  @import '@mastra/playground-ui/theme.css'; /* design tokens */
+  @import '@mastra/playground-ui/style.css'; /* component styles */
+  ```
+
+  Before, apps had to copy every token into their own `@theme` block so Tailwind would generate the matching utility classes (like `bg-surface1` or `text-neutral4`). Now your app's Tailwind reads the tokens from this file directly. This is the same pattern as `tailwindcss/theme.css`, and it keeps the tokens defined in one place.
+
+  **Brand green and chart colors**
+
+  The `green-*` classes now use the Mastra brand green (in both light and dark mode) instead of Tailwind's default green. New `--chart-1` through `--chart-5` colors are also available for charts. If you used the stock Tailwind green before, the new green looks a bit more vivid.
+
+- Added role-based semantic font tokens so consumers can swap fonts in one declaration. Components now reference `--font-display` (headlines, brand) and `--font-body` (UI, paragraphs) instead of type-based `--font-sans` / `--font-serif`. Existing utilities keep working through backward-compat aliases (`--font-sans` → `--font-body`, `--font-serif` → `--font-display`). ([#16265](https://github.com/mastra-ai/mastra/pull/16265))
+
+  **Override fonts in your app**
+
+  ```css
+  :root {
+    --font-display: 'Inter', system-ui, sans-serif;
+    --font-body: 'Inter', system-ui, sans-serif;
+    --font-mono: 'Commit Mono', ui-monospace, monospace;
+  }
+  ```
+
+  **Backward-compat for existing consumers** — the legacy raw font-name vars `--geist-mono`, `--font-inter`, `--tasa-explorer` continue to resolve via aliases to the semantic tokens, so any `font-family: var(--geist-mono)` keeps working without code changes. New code should reference `var(--font-mono)` directly.
+
+  The package no longer ships font files — defaults are system fonts. Bring your own fonts via `@font-face` in your app and override the tokens above.
+
+- **Added an `xs` size** to Button, Input, Select, and InputGroup for compact, dense layouts. ([#17675](https://github.com/mastra-ai/mastra/pull/17675))
+
+  ```tsx
+  <Button size="xs">Compact</Button>
+  <Input size="xs" />
+  ```
+
+  **Unified the keyboard-focus look across controls.** Buttons now show the same subtle border highlight on focus as inputs and selects, instead of a green ring, so a row of buttons, inputs, and selects feels consistent.
+
+  **Made Select and Combobox triggers match buttons.** They are now pill-shaped and reuse the Button styling, so a select reads like a button with a dropdown arrow. Their field-safe visual variants are `default` (filled, used by default), `outline`, and `ghost` — the same looks as buttons, minus the high-emphasis `primary`. Since `default` is the default, you only pass a `variant` to switch to `outline` or `ghost`. Legacy `SelectTrigger variant="primary"` and `Combobox variant="link"` are still accepted for source compatibility, but render as the closest field-safe look. MultiCombobox's `variant` now works (it previously had no effect).
+
+  **Deprecated `asChild`** on the DropdownMenu, Dialog, AlertDialog, and Popover triggers (and DialogClose). Pass your element to the `render` prop instead. `asChild` still works for now.
+
+  ```tsx
+  // Before
+  <DropdownMenu.Trigger asChild>
+    <Button>Open</Button>
+  </DropdownMenu.Trigger>
+
+  // After
+  <DropdownMenu.Trigger render={<Button>Open</Button>} />
+  ```
+
+- Added a token-usage-over-time timeline to the Studio metrics dashboard, showing input/output tokens per day and cost, filterable by agent and workflow. ([#17686](https://github.com/mastra-ai/mastra/pull/17686))
+
+### Patch Changes
+
+- Removed the generic tool card from the shared playground UI package. ([#17774](https://github.com/mastra-ai/mastra/pull/17774))
+
+- Removed an unused assistant UI dependency from the playground UI package. ([#17774](https://github.com/mastra-ai/mastra/pull/17774))
+
+- Fixed combobox keyboard selection after filtering so pressing Enter chooses the first matching option. ([#17772](https://github.com/mastra-ai/mastra/pull/17772))
+
+- Removed the `default` Button size. Buttons now use `md` when no size is provided, and the previous `default` styling is available as `lg`. ([#17778](https://github.com/mastra-ai/mastra/pull/17778))
+
+  **Migration**
+
+  Before:
+
+  ```tsx
+  <Button size="default">Save</Button>
+  ```
+
+  After:
+
+  ```tsx
+  <Button size="lg">Save</Button>
+  ```
+
+  Use `size="md"` or omit `size` for the new default Button size.
+
+- Fixed the Studio Metrics **Latency** card drilldown, which was a silent no-op on all three tabs (Agents, Workflows, Tools). The view-level click guard and the container-level navigation handler both read a `rawTimestamp` field that the hook never produces; the only timestamp on a `LatencyPoint` is `tsMs`. Clicking a chart point now correctly navigates to the Traces page filtered to the 1-hour bucket and the entity type of the active tab. ([#17704](https://github.com/mastra-ai/mastra/pull/17704))
+
+- Added an optional `data-testid` prop to the Breadcrumb `Crumb` so individual crumbs can be targeted in tests and automation. ([#17687](https://github.com/mastra-ai/mastra/pull/17687))
+
+- Improved DataList pagination controls, row and header separators, wrapped-row spacing, text truncation, horizontal overflow handling, and empty-cell rendering. ([#17718](https://github.com/mastra-ai/mastra/pull/17718))
+
+- Removed five rarely-used components from the root barrel export. `SettingsRow`, `PrevNextNav`, `MetricsKpiCard`, `SideDialog`, and `ContextMenu` must now be imported from their per-component entrypoints (added in v33.1): ([#17753](https://github.com/mastra-ai/mastra/pull/17753))
+
+  ```ts
+  // before
+  import { SettingsRow, SideDialog, type SideDialogRootProps } from '@mastra/playground-ui';
+
+  // after
+  import { SettingsRow } from '@mastra/playground-ui/components/SettingsRow';
+  import { SideDialog, type SideDialogRootProps } from '@mastra/playground-ui/components/SideDialog';
+  ```
+
+  This is the first step of gradually slimming down the root barrel so apps only load the components they use. All other root exports are unchanged.
+
+- Removed an unnecessary overflow clip on the Switch track so thumb motion effects are no longer cut off at the edges ([#17822](https://github.com/mastra-ai/mastra/pull/17822))
+
+- Removed the right padding on the agent memory sidebar so it sits flush against the panel resize handle. ([#17823](https://github.com/mastra-ai/mastra/pull/17823))
+
+- Fixed the Evaluate Trace button in Studio (Agents → Traces) doing nothing on the first click. Selecting the anchor span and opening the scoring tab now happen in a single URL update instead of two racing ones, so the scoring panel opens immediately. ([#17730](https://github.com/mastra-ai/mastra/pull/17730))
+
+- Fixed the Agent and Workflow icon not appearing in the Traces and Logs entity column. The icon now matches the stored lowercase entity types (`agent`, `workflow_run`) instead of only uppercase values, so you can tell agent runs from workflow runs at a glance. ([#17730](https://github.com/mastra-ai/mastra/pull/17730))
+
+- Updated dependencies [[`575f815`](https://github.com/mastra-ai/mastra/commit/575f815c5c3567b71c0b83cbb7fa98c8253a9d9c), [`306909a`](https://github.com/mastra-ai/mastra/commit/306909a693de77d709b38706e2673c9547d24a28), [`5191af8`](https://github.com/mastra-ai/mastra/commit/5191af80c799eea25357c545fc05d91b3883531d), [`43bd3d4`](https://github.com/mastra-ai/mastra/commit/43bd3d421987463fdf35386a45199c49499ed069), [`e6fa79e`](https://github.com/mastra-ai/mastra/commit/e6fa79ec72a2ddffdd25e85270398951e9d552a4), [`904bcdf`](https://github.com/mastra-ai/mastra/commit/904bcdf7b8004aa7be823f9f70ca63580e47e470), [`7f5ee1d`](https://github.com/mastra-ai/mastra/commit/7f5ee1dca46daee8d2817f2ebe49e6335da81956), [`1e9aab5`](https://github.com/mastra-ai/mastra/commit/1e9aab50ff11e6e88fde4d7cbf512c44a9fe8d61), [`4e790b0`](https://github.com/mastra-ai/mastra/commit/4e790b00c6d58c25922f5bbb5907204daec72e06), [`3abfa15`](https://github.com/mastra-ai/mastra/commit/3abfa158881ad3b187f69392cc64fe3a5aeed5c3), [`bf8eb6d`](https://github.com/mastra-ai/mastra/commit/bf8eb6d0ec213a403eb9265a594ad283c44ab3dc), [`493a328`](https://github.com/mastra-ai/mastra/commit/493a328f4346a1deeb9f1e2e44c8f2a3a4d7591b), [`4e790b0`](https://github.com/mastra-ai/mastra/commit/4e790b00c6d58c25922f5bbb5907204daec72e06), [`029a414`](https://github.com/mastra-ai/mastra/commit/029a4141719793bd3e898a39eb5a0466a55f5f3a), [`b147b29`](https://github.com/mastra-ai/mastra/commit/b147b2907f0cd1aa812efe6d6e3f58d22e66fc88), [`d371ac1`](https://github.com/mastra-ai/mastra/commit/d371ac1d9820afaaf7cfdbc380a475946a994d8f), [`36df947`](https://github.com/mastra-ai/mastra/commit/36df947de2603131fd24652db61af7799a790827), [`cf182b7`](https://github.com/mastra-ai/mastra/commit/cf182b7fb495767946d9840ef29f19cfa906f31f), [`a049c2a`](https://github.com/mastra-ai/mastra/commit/a049c2a9dfb41d0ee2e7a28874a88cd64fd5669f), [`b147b29`](https://github.com/mastra-ai/mastra/commit/b147b2907f0cd1aa812efe6d6e3f58d22e66fc88), [`2a96528`](https://github.com/mastra-ai/mastra/commit/2a9652848dfa3c5a2426f952e9d93554c26fd90f), [`61f5491`](https://github.com/mastra-ai/mastra/commit/61f54912e6453cc706bb5d7df9f6c7aad78d428f), [`2656d9c`](https://github.com/mastra-ai/mastra/commit/2656d9c2976d4f3354253bfbbbf9b88a1b2bbf34), [`63e3fe1`](https://github.com/mastra-ai/mastra/commit/63e3fe13cc1ea96f91d7c68aea92f400faf9e4da), [`1d4ce8d`](https://github.com/mastra-ai/mastra/commit/1d4ce8daaa54511f325c1b609d31b8e54009d677), [`8c68372`](https://github.com/mastra-ai/mastra/commit/8c68372e85fe0b066ec12c58bd29ffb93e54c552)]:
+  - @mastra/core@1.42.0-alpha.4
+  - @mastra/react@0.6.0-alpha.4
+  - @mastra/client-js@1.24.0-alpha.4
+
+## 33.0.0-alpha.3
+
+### Patch Changes
+
+- Updated dependencies [[`34839c1`](https://github.com/mastra-ai/mastra/commit/34839c1910b6964bf59ed0cee58844efebbb684e), [`053735a`](https://github.com/mastra-ai/mastra/commit/053735a75c2c18e23ce34d9468007efa4a45f4c4), [`34839c1`](https://github.com/mastra-ai/mastra/commit/34839c1910b6964bf59ed0cee58844efebbb684e), [`34839c1`](https://github.com/mastra-ai/mastra/commit/34839c1910b6964bf59ed0cee58844efebbb684e), [`a952852`](https://github.com/mastra-ai/mastra/commit/a952852c971a21fb646cd907c75fcf4443cdc963)]:
+  - @mastra/client-js@1.24.0-alpha.3
+  - @mastra/core@1.42.0-alpha.3
+  - @mastra/react@0.5.3-alpha.3
+
 ## 33.0.0-alpha.2
 
 ### Patch Changes

package/dist/Avatar-Dcmi3-pN.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { T as Txt } from './Txt-AhytBlTj.js';
+import { t as transitions } from './transitions-tFfqxz40.js';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+const sizeClasses = {
+  sm: "h-avatar-sm w-avatar-sm",
+  md: "h-avatar-md w-avatar-md",
+  lg: "h-avatar-lg w-avatar-lg"
+};
+const Avatar = ({ src, name, size = "sm", interactive = false, color, textColor }) => {
+  const [didError, setDidError] = useState(false);
+  const initial = name.trim()[0]?.toUpperCase() ?? "A";
+  const showImage = Boolean(src) && !didError;
+  const showFallbackTint = !showImage && Boolean(color);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        sizeClasses[size],
+        "border border-border1 shrink-0 overflow-hidden rounded-full flex items-center justify-center",
+        !showFallbackTint && "bg-surface3",
+        transitions.all,
+        interactive && "cursor-pointer hover:scale-105 hover:border-neutral2 hover:shadow-sm"
+      ),
+      style: showFallbackTint ? { backgroundColor: color } : void 0,
+      children: showImage ? /* @__PURE__ */ jsx("img", { src, alt: name, className: "h-full w-full object-cover", onError: () => setDidError(true) }) : /* @__PURE__ */ jsx(
+        Txt,
+        {
+          variant: "ui-md",
+          className: cn("text-center", !showFallbackTint && "text-neutral4"),
+          style: showFallbackTint && textColor ? { color: textColor } : void 0,
+          children: initial
+        }
+      )
+    }
+  );
+};
+
+export { Avatar as A };
+//# sourceMappingURL=Avatar-Dcmi3-pN.js.map

package/dist/Avatar-Dcmi3-pN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar-Dcmi3-pN.js","sources":["../src/ds/components/Avatar/Avatar.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { Txt } from '../Txt';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarSize = 'sm' | 'md' | 'lg';\n\nexport type AvatarProps = {\n  src?: string;\n  name: string;\n  size?: AvatarSize;\n  interactive?: boolean;\n  color?: string;\n  textColor?: string;\n};\n\nconst sizeClasses: Record<AvatarSize, string> = {\n  sm: 'h-avatar-sm w-avatar-sm',\n  md: 'h-avatar-md w-avatar-md',\n  lg: 'h-avatar-lg w-avatar-lg',\n};\n\nexport const Avatar = ({ src, name, size = 'sm', interactive = false, color, textColor }: AvatarProps) => {\n  const [didError, setDidError] = useState(false);\n  const initial = name.trim()[0]?.toUpperCase() ?? 'A';\n  const showImage = Boolean(src) && !didError;\n  const showFallbackTint = !showImage && Boolean(color);\n\n  return (\n    <div\n      className={cn(\n        sizeClasses[size],\n        'border border-border1 shrink-0 overflow-hidden rounded-full flex items-center justify-center',\n        !showFallbackTint && 'bg-surface3',\n        transitions.all,\n        interactive && 'cursor-pointer hover:scale-105 hover:border-neutral2 hover:shadow-sm',\n      )}\n      style={showFallbackTint ? { backgroundColor: color } : undefined}\n    >\n      {showImage ? (\n        <img src={src} alt={name} className=\"h-full w-full object-cover\" onError={() => setDidError(true)} />\n      ) : (\n        <Txt\n          variant=\"ui-md\"\n          className={cn('text-center', !showFallbackTint && 'text-neutral4')}\n          style={showFallbackTint && textColor ? { color: textColor } : undefined}\n        >\n          {initial}\n        </Txt>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAiBA,MAAM,WAAA,GAA0C;AAAA,EAC9C,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,MAAM,MAAA,GAAS,CAAC,EAAE,GAAA,EAAK,IAAA,EAAM,IAAA,GAAO,IAAA,EAAM,WAAA,GAAc,KAAA,EAAO,KAAA,EAAO,SAAA,EAAU,KAAmB;AACxG,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAC9C,EAAA,MAAM,UAAU,IAAA,CAAK,IAAA,GAAO,CAAC,CAAA,EAAG,aAAY,IAAK,GAAA;AACjD,EAAA,MAAM,SAAA,GAAY,OAAA,CAAQ,GAAG,CAAA,IAAK,CAAC,QAAA;AACnC,EAAA,MAAM,gBAAA,GAAmB,CAAC,SAAA,IAAa,OAAA,CAAQ,KAAK,CAAA;AAEpD,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,YAAY,IAAI,CAAA;AAAA,QAChB,8FAAA;AAAA,QACA,CAAC,gBAAA,IAAoB,aAAA;AAAA,QACrB,WAAA,CAAY,GAAA;AAAA,QACZ,WAAA,IAAe;AAAA,OACjB;AAAA,MACA,KAAA,EAAO,gBAAA,GAAmB,EAAE,eAAA,EAAiB,OAAM,GAAI,MAAA;AAAA,MAEtD,QAAA,EAAA,SAAA,mBACC,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,GAAA,EAAK,IAAA,EAAM,SAAA,EAAU,4BAAA,EAA6B,OAAA,EAAS,MAAM,WAAA,CAAY,IAAI,GAAG,CAAA,mBAEnG,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,OAAA;AAAA,UACR,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,CAAC,oBAAoB,eAAe,CAAA;AAAA,UACjE,OAAO,gBAAA,IAAoB,SAAA,GAAY,EAAE,KAAA,EAAO,WAAU,GAAI,MAAA;AAAA,UAE7D,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,GAEJ;AAEJ;;;;"}

package/dist/Avatar-Y-1fas25.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const Txt = require('./Txt-Cmn4ug68.cjs');
+const transitions = require('./transitions-DpczSjmD.cjs');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+const sizeClasses = {
+  sm: "h-avatar-sm w-avatar-sm",
+  md: "h-avatar-md w-avatar-md",
+  lg: "h-avatar-lg w-avatar-lg"
+};
+const Avatar = ({ src, name, size = "sm", interactive = false, color, textColor }) => {
+  const [didError, setDidError] = React.useState(false);
+  const initial = name.trim()[0]?.toUpperCase() ?? "A";
+  const showImage = Boolean(src) && !didError;
+  const showFallbackTint = !showImage && Boolean(color);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils.cn(
+        sizeClasses[size],
+        "border border-border1 shrink-0 overflow-hidden rounded-full flex items-center justify-center",
+        !showFallbackTint && "bg-surface3",
+        transitions.transitions.all,
+        interactive && "cursor-pointer hover:scale-105 hover:border-neutral2 hover:shadow-sm"
+      ),
+      style: showFallbackTint ? { backgroundColor: color } : void 0,
+      children: showImage ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: name, className: "h-full w-full object-cover", onError: () => setDidError(true) }) : /* @__PURE__ */ jsxRuntime.jsx(
+        Txt.Txt,
+        {
+          variant: "ui-md",
+          className: utils.cn("text-center", !showFallbackTint && "text-neutral4"),
+          style: showFallbackTint && textColor ? { color: textColor } : void 0,
+          children: initial
+        }
+      )
+    }
+  );
+};
+
+exports.Avatar = Avatar;
+//# sourceMappingURL=Avatar-Y-1fas25.cjs.map

package/dist/Avatar-Y-1fas25.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar-Y-1fas25.cjs","sources":["../src/ds/components/Avatar/Avatar.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { Txt } from '../Txt';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarSize = 'sm' | 'md' | 'lg';\n\nexport type AvatarProps = {\n  src?: string;\n  name: string;\n  size?: AvatarSize;\n  interactive?: boolean;\n  color?: string;\n  textColor?: string;\n};\n\nconst sizeClasses: Record<AvatarSize, string> = {\n  sm: 'h-avatar-sm w-avatar-sm',\n  md: 'h-avatar-md w-avatar-md',\n  lg: 'h-avatar-lg w-avatar-lg',\n};\n\nexport const Avatar = ({ src, name, size = 'sm', interactive = false, color, textColor }: AvatarProps) => {\n  const [didError, setDidError] = useState(false);\n  const initial = name.trim()[0]?.toUpperCase() ?? 'A';\n  const showImage = Boolean(src) && !didError;\n  const showFallbackTint = !showImage && Boolean(color);\n\n  return (\n    <div\n      className={cn(\n        sizeClasses[size],\n        'border border-border1 shrink-0 overflow-hidden rounded-full flex items-center justify-center',\n        !showFallbackTint && 'bg-surface3',\n        transitions.all,\n        interactive && 'cursor-pointer hover:scale-105 hover:border-neutral2 hover:shadow-sm',\n      )}\n      style={showFallbackTint ? { backgroundColor: color } : undefined}\n    >\n      {showImage ? (\n        <img src={src} alt={name} className=\"h-full w-full object-cover\" onError={() => setDidError(true)} />\n      ) : (\n        <Txt\n          variant=\"ui-md\"\n          className={cn('text-center', !showFallbackTint && 'text-neutral4')}\n          style={showFallbackTint && textColor ? { color: textColor } : undefined}\n        >\n          {initial}\n        </Txt>\n      )}\n    </div>\n  );\n};\n"],"names":["useState","jsx","cn","transitions","Txt"],"mappings":";;;;;;;;AAiBA,MAAM,WAAA,GAA0C;AAAA,EAC9C,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,MAAM,MAAA,GAAS,CAAC,EAAE,GAAA,EAAK,IAAA,EAAM,IAAA,GAAO,IAAA,EAAM,WAAA,GAAc,KAAA,EAAO,KAAA,EAAO,SAAA,EAAU,KAAmB;AACxG,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,eAAS,KAAK,CAAA;AAC9C,EAAA,MAAM,UAAU,IAAA,CAAK,IAAA,GAAO,CAAC,CAAA,EAAG,aAAY,IAAK,GAAA;AACjD,EAAA,MAAM,SAAA,GAAY,OAAA,CAAQ,GAAG,CAAA,IAAK,CAAC,QAAA;AACnC,EAAA,MAAM,gBAAA,GAAmB,CAAC,SAAA,IAAa,OAAA,CAAQ,KAAK,CAAA;AAEpD,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,QAAA;AAAA,QACT,YAAY,IAAI,CAAA;AAAA,QAChB,8FAAA;AAAA,QACA,CAAC,gBAAA,IAAoB,aAAA;AAAA,QACrBC,uBAAA,CAAY,GAAA;AAAA,QACZ,WAAA,IAAe;AAAA,OACjB;AAAA,MACA,KAAA,EAAO,gBAAA,GAAmB,EAAE,eAAA,EAAiB,OAAM,GAAI,MAAA;AAAA,MAEtD,QAAA,EAAA,SAAA,mBACCF,cAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,GAAA,EAAK,IAAA,EAAM,SAAA,EAAU,4BAAA,EAA6B,OAAA,EAAS,MAAM,WAAA,CAAY,IAAI,GAAG,CAAA,mBAEnGA,cAAA;AAAA,QAACG,OAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,OAAA;AAAA,UACR,SAAA,EAAWF,QAAA,CAAG,aAAA,EAAe,CAAC,oBAAoB,eAAe,CAAA;AAAA,UACjE,OAAO,gBAAA,IAAoB,SAAA,GAAY,EAAE,KAAA,EAAO,WAAU,GAAI,MAAA;AAAA,UAE7D,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,GAEJ;AAEJ;;;;"}

package/dist/Badge-C5MzMyCa.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { I as Icon } from './Icon-CJEjdbjB.js';
+import { t as transitions } from './transitions-tFfqxz40.js';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+const variantClasses = {
+  default: "text-neutral5 bg-surface4 border-border1",
+  success: "text-notice-success-fg bg-notice-success/20 border-notice-success/20",
+  error: "text-notice-destructive-fg bg-notice-destructive/20 border-notice-destructive/20",
+  info: "text-notice-info-fg bg-notice-info/20 border-notice-info/20",
+  warning: "text-notice-warning-fg bg-notice-warning/20 border-notice-warning/20"
+};
+const Badge = ({ icon, variant = "default", className, children, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "font-mono text-ui-sm gap-1 h-badge-default inline-flex items-center rounded-full border shrink-0",
+        transitions.colors,
+        icon ? "pl-2 pr-2.5" : "px-2.5",
+        variantClasses[variant],
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx(Icon, { size: "sm", children: icon }),
+        children
+      ]
+    }
+  );
+};
+
+export { Badge as B };
+//# sourceMappingURL=Badge-C5MzMyCa.js.map

package/dist/Badge-C5MzMyCa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge-C5MzMyCa.js","sources":["../src/ds/components/Badge/Badge.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface BadgeProps {\n  icon?: React.ReactNode;\n  variant?: 'default' | 'success' | 'error' | 'info' | 'warning';\n  className?: string;\n  children?: React.ReactNode;\n}\n\nconst variantClasses = {\n  default: 'text-neutral5 bg-surface4 border-border1',\n  success: 'text-notice-success-fg bg-notice-success/20 border-notice-success/20',\n  error: 'text-notice-destructive-fg bg-notice-destructive/20 border-notice-destructive/20',\n  info: 'text-notice-info-fg bg-notice-info/20 border-notice-info/20',\n  warning: 'text-notice-warning-fg bg-notice-warning/20 border-notice-warning/20',\n};\n\nexport const Badge = ({ icon, variant = 'default', className, children, ...props }: BadgeProps) => {\n  return (\n    <div\n      className={cn(\n        'font-mono text-ui-sm gap-1 h-badge-default inline-flex items-center rounded-full border shrink-0',\n        transitions.colors,\n        icon ? 'pl-2 pr-2.5' : 'px-2.5',\n        variantClasses[variant],\n        className,\n      )}\n      {...props}\n    >\n      {icon && <Icon size=\"sm\">{icon}</Icon>}\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAaA,MAAM,cAAA,GAAiB;AAAA,EACrB,OAAA,EAAS,0CAAA;AAAA,EACT,OAAA,EAAS,sEAAA;AAAA,EACT,KAAA,EAAO,kFAAA;AAAA,EACP,IAAA,EAAM,6DAAA;AAAA,EACN,OAAA,EAAS;AACX,CAAA;AAEO,MAAM,KAAA,GAAQ,CAAC,EAAE,IAAA,EAAM,OAAA,GAAU,WAAW,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,EAAM,KAAkB;AACjG,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,kGAAA;AAAA,QACA,WAAA,CAAY,MAAA;AAAA,QACZ,OAAO,aAAA,GAAgB,QAAA;AAAA,QACvB,eAAe,OAAO,CAAA;AAAA,QACtB;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAQ,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,QAC9B;AAAA;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/Badge-CQD9T1Yd.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const Icon = require('./Icon-C_Ooy-cP.cjs');
+const transitions = require('./transitions-DpczSjmD.cjs');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+const variantClasses = {
+  default: "text-neutral5 bg-surface4 border-border1",
+  success: "text-notice-success-fg bg-notice-success/20 border-notice-success/20",
+  error: "text-notice-destructive-fg bg-notice-destructive/20 border-notice-destructive/20",
+  info: "text-notice-info-fg bg-notice-info/20 border-notice-info/20",
+  warning: "text-notice-warning-fg bg-notice-warning/20 border-notice-warning/20"
+};
+const Badge = ({ icon, variant = "default", className, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "font-mono text-ui-sm gap-1 h-badge-default inline-flex items-center rounded-full border shrink-0",
+        transitions.transitions.colors,
+        icon ? "pl-2 pr-2.5" : "px-2.5",
+        variantClasses[variant],
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: "sm", children: icon }),
+        children
+      ]
+    }
+  );
+};
+
+exports.Badge = Badge;
+//# sourceMappingURL=Badge-CQD9T1Yd.cjs.map

package/dist/Badge-CQD9T1Yd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge-CQD9T1Yd.cjs","sources":["../src/ds/components/Badge/Badge.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface BadgeProps {\n  icon?: React.ReactNode;\n  variant?: 'default' | 'success' | 'error' | 'info' | 'warning';\n  className?: string;\n  children?: React.ReactNode;\n}\n\nconst variantClasses = {\n  default: 'text-neutral5 bg-surface4 border-border1',\n  success: 'text-notice-success-fg bg-notice-success/20 border-notice-success/20',\n  error: 'text-notice-destructive-fg bg-notice-destructive/20 border-notice-destructive/20',\n  info: 'text-notice-info-fg bg-notice-info/20 border-notice-info/20',\n  warning: 'text-notice-warning-fg bg-notice-warning/20 border-notice-warning/20',\n};\n\nexport const Badge = ({ icon, variant = 'default', className, children, ...props }: BadgeProps) => {\n  return (\n    <div\n      className={cn(\n        'font-mono text-ui-sm gap-1 h-badge-default inline-flex items-center rounded-full border shrink-0',\n        transitions.colors,\n        icon ? 'pl-2 pr-2.5' : 'px-2.5',\n        variantClasses[variant],\n        className,\n      )}\n      {...props}\n    >\n      {icon && <Icon size=\"sm\">{icon}</Icon>}\n      {children}\n    </div>\n  );\n};\n"],"names":["jsxs","cn","transitions","jsx","Icon"],"mappings":";;;;;;;AAaA,MAAM,cAAA,GAAiB;AAAA,EACrB,OAAA,EAAS,0CAAA;AAAA,EACT,OAAA,EAAS,sEAAA;AAAA,EACT,KAAA,EAAO,kFAAA;AAAA,EACP,IAAA,EAAM,6DAAA;AAAA,EACN,OAAA,EAAS;AACX,CAAA;AAEO,MAAM,KAAA,GAAQ,CAAC,EAAE,IAAA,EAAM,OAAA,GAAU,WAAW,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,EAAM,KAAkB;AACjG,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,QAAA;AAAA,QACT,kGAAA;AAAA,QACAC,uBAAA,CAAY,MAAA;AAAA,QACZ,OAAO,aAAA,GAAgB,QAAA;AAAA,QACvB,eAAe,OAAO,CAAA;AAAA,QACtB;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAQC,cAAA,CAACC,SAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,QAC9B;AAAA;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/Breadcrumb-BT_nzL3M.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const Icon = require('./Icon-C_Ooy-cP.cjs');
+const transitions = require('./transitions-DpczSjmD.cjs');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+const SlashIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.25684 12.6387L10.4003 3.36133H11.7432L6.5997 12.6387H5.25684Z", fill: "currentColor" }) });
+
+const Breadcrumb = ({ children, label, className, listClassName }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": label, className, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: utils.cn("gap-0.5 flex items-center", listClassName), children }) });
+};
+const Crumb = ({ className, as, isCurrent, action, ...props }) => {
+  const Root = as || "span";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("li", { className: utils.cn("flex h-full min-w-0 items-center gap-1", isCurrent ? "shrink" : "shrink-0"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Root,
+        {
+          "aria-current": isCurrent ? "page" : void 0,
+          className: utils.cn(
+            "text-ui-md leading-ui-md flex min-w-0 items-center gap-2 truncate",
+            transitions.transitions.colors,
+            isCurrent ? "text-neutral6 font-medium" : "text-neutral3 hover:text-neutral5",
+            className
+          ),
+          ...props
+        }
+      ),
+      action
+    ] }),
+    !isCurrent && /* @__PURE__ */ jsxRuntime.jsx("li", { role: "separator", className: "flex h-full items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { className: utils.cn("text-neutral2", transitions.transitions.colors), children: /* @__PURE__ */ jsxRuntime.jsx(SlashIcon, {}) }) })
+  ] });
+};
+
+exports.Breadcrumb = Breadcrumb;
+exports.Crumb = Crumb;
+exports.SlashIcon = SlashIcon;
+//# sourceMappingURL=Breadcrumb-BT_nzL3M.cjs.map

package/dist/Breadcrumb-BT_nzL3M.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb-BT_nzL3M.cjs","sources":["../src/ds/icons/SlashIcon.tsx","../src/ds/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React from 'react';\n\nexport const SlashIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n    <path d=\"M5.25684 12.6387L10.4003 3.36133H11.7432L6.5997 12.6387H5.25684Z\" fill=\"currentColor\" />\n  </svg>\n);\n","import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { SlashIcon } from '../../icons/SlashIcon';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface BreadcrumbProps {\n  children?: React.ReactNode;\n  label?: string;\n  className?: string;\n  listClassName?: string;\n}\n\nexport const Breadcrumb = ({ children, label, className, listClassName }: BreadcrumbProps) => {\n  return (\n    <nav aria-label={label} className={className}>\n      <ol className={cn('gap-0.5 flex items-center', listClassName)}>{children}</ol>\n    </nav>\n  );\n};\n\nexport interface CrumbProps {\n  isCurrent?: boolean;\n  as: React.ElementType;\n  className?: string;\n  to?: string;\n  prefetch?: boolean | null;\n  children: React.ReactNode;\n  action?: React.ReactNode;\n  'data-testid'?: string;\n}\n\nexport const Crumb = ({ className, as, isCurrent, action, ...props }: CrumbProps) => {\n  const Root = as || 'span';\n\n  return (\n    <>\n      <li className={cn('flex h-full min-w-0 items-center gap-1', isCurrent ? 'shrink' : 'shrink-0')}>\n        <Root\n          aria-current={isCurrent ? 'page' : undefined}\n          className={cn(\n            'text-ui-md leading-ui-md flex min-w-0 items-center gap-2 truncate',\n            transitions.colors,\n            isCurrent ? 'text-neutral6 font-medium' : 'text-neutral3 hover:text-neutral5',\n            className,\n          )}\n          {...props}\n        />\n        {action}\n      </li>\n      {!isCurrent && (\n        <li role=\"separator\" className=\"flex h-full items-center\">\n          <Icon className={cn('text-neutral2', transitions.colors)}>\n            <SlashIcon />\n          </Icon>\n        </li>\n      )}\n    </>\n  );\n};\n"],"names":["jsx","cn","jsxs","Fragment","transitions","Icon"],"mappings":";;;;;;;AAEO,MAAM,SAAA,GAAY,CAAC,KAAA,qBACxBA,cAAA,CAAC,SAAI,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,MAAK,MAAA,EAAO,KAAA,EAAM,4BAAA,EAA8B,GAAG,KAAA,EACjG,QAAA,kBAAAA,cAAA,CAAC,UAAK,CAAA,EAAE,kEAAA,EAAmE,IAAA,EAAK,cAAA,EAAe,CAAA,EACjG;;ACSK,MAAM,aAAa,CAAC,EAAE,UAAU,KAAA,EAAO,SAAA,EAAW,eAAc,KAAuB;AAC5F,EAAA,uBACEA,cAAA,CAAC,KAAA,EAAA,EAAI,YAAA,EAAY,KAAA,EAAO,SAAA,EACtB,QAAA,kBAAAA,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAWC,QAAA,CAAG,2BAAA,EAA6B,aAAa,CAAA,EAAI,UAAS,CAAA,EAC3E,CAAA;AAEJ;AAaO,MAAM,KAAA,GAAQ,CAAC,EAAE,SAAA,EAAW,IAAI,SAAA,EAAW,MAAA,EAAQ,GAAG,KAAA,EAAM,KAAkB;AACnF,EAAA,MAAM,OAAO,EAAA,IAAM,MAAA;AAEnB,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAD,eAAA,CAAC,QAAG,SAAA,EAAWD,QAAA,CAAG,0CAA0C,SAAA,GAAY,QAAA,GAAW,UAAU,CAAA,EAC3F,QAAA,EAAA;AAAA,sBAAAD,cAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,cAAA,EAAc,YAAY,MAAA,GAAS,MAAA;AAAA,UACnC,SAAA,EAAWC,QAAA;AAAA,YACT,mEAAA;AAAA,YACAG,uBAAA,CAAY,MAAA;AAAA,YACZ,YAAY,2BAAA,GAA8B,mCAAA;AAAA,YAC1C;AAAA,WACF;AAAA,UACC,GAAG;AAAA;AAAA,OACN;AAAA,MACC;AAAA,KAAA,EACH,CAAA;AAAA,IACC,CAAC,SAAA,oBACAJ,cAAA,CAAC,QAAG,IAAA,EAAK,WAAA,EAAY,WAAU,0BAAA,EAC7B,QAAA,kBAAAA,cAAA,CAACK,aAAK,SAAA,EAAWJ,QAAA,CAAG,iBAAiBG,uBAAA,CAAY,MAAM,GACrD,QAAA,kBAAAJ,cAAA,CAAC,SAAA,EAAA,EAAU,GACb,CAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;;;"}

package/dist/Breadcrumb-CxbCgAij.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { I as Icon } from './Icon-CJEjdbjB.js';
+import { t as transitions } from './transitions-tFfqxz40.js';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+const SlashIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M5.25684 12.6387L10.4003 3.36133H11.7432L6.5997 12.6387H5.25684Z", fill: "currentColor" }) });
+
+const Breadcrumb = ({ children, label, className, listClassName }) => {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": label, className, children: /* @__PURE__ */ jsx("ol", { className: cn("gap-0.5 flex items-center", listClassName), children }) });
+};
+const Crumb = ({ className, as, isCurrent, action, ...props }) => {
+  const Root = as || "span";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("li", { className: cn("flex h-full min-w-0 items-center gap-1", isCurrent ? "shrink" : "shrink-0"), children: [
+      /* @__PURE__ */ jsx(
+        Root,
+        {
+          "aria-current": isCurrent ? "page" : void 0,
+          className: cn(
+            "text-ui-md leading-ui-md flex min-w-0 items-center gap-2 truncate",
+            transitions.colors,
+            isCurrent ? "text-neutral6 font-medium" : "text-neutral3 hover:text-neutral5",
+            className
+          ),
+          ...props
+        }
+      ),
+      action
+    ] }),
+    !isCurrent && /* @__PURE__ */ jsx("li", { role: "separator", className: "flex h-full items-center", children: /* @__PURE__ */ jsx(Icon, { className: cn("text-neutral2", transitions.colors), children: /* @__PURE__ */ jsx(SlashIcon, {}) }) })
+  ] });
+};
+
+export { Breadcrumb as B, Crumb as C, SlashIcon as S };
+//# sourceMappingURL=Breadcrumb-CxbCgAij.js.map

package/dist/Breadcrumb-CxbCgAij.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb-CxbCgAij.js","sources":["../src/ds/icons/SlashIcon.tsx","../src/ds/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React from 'react';\n\nexport const SlashIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n    <path d=\"M5.25684 12.6387L10.4003 3.36133H11.7432L6.5997 12.6387H5.25684Z\" fill=\"currentColor\" />\n  </svg>\n);\n","import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { SlashIcon } from '../../icons/SlashIcon';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface BreadcrumbProps {\n  children?: React.ReactNode;\n  label?: string;\n  className?: string;\n  listClassName?: string;\n}\n\nexport const Breadcrumb = ({ children, label, className, listClassName }: BreadcrumbProps) => {\n  return (\n    <nav aria-label={label} className={className}>\n      <ol className={cn('gap-0.5 flex items-center', listClassName)}>{children}</ol>\n    </nav>\n  );\n};\n\nexport interface CrumbProps {\n  isCurrent?: boolean;\n  as: React.ElementType;\n  className?: string;\n  to?: string;\n  prefetch?: boolean | null;\n  children: React.ReactNode;\n  action?: React.ReactNode;\n  'data-testid'?: string;\n}\n\nexport const Crumb = ({ className, as, isCurrent, action, ...props }: CrumbProps) => {\n  const Root = as || 'span';\n\n  return (\n    <>\n      <li className={cn('flex h-full min-w-0 items-center gap-1', isCurrent ? 'shrink' : 'shrink-0')}>\n        <Root\n          aria-current={isCurrent ? 'page' : undefined}\n          className={cn(\n            'text-ui-md leading-ui-md flex min-w-0 items-center gap-2 truncate',\n            transitions.colors,\n            isCurrent ? 'text-neutral6 font-medium' : 'text-neutral3 hover:text-neutral5',\n            className,\n          )}\n          {...props}\n        />\n        {action}\n      </li>\n      {!isCurrent && (\n        <li role=\"separator\" className=\"flex h-full items-center\">\n          <Icon className={cn('text-neutral2', transitions.colors)}>\n            <SlashIcon />\n          </Icon>\n        </li>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;AAEO,MAAM,SAAA,GAAY,CAAC,KAAA,qBACxB,GAAA,CAAC,SAAI,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,MAAK,MAAA,EAAO,KAAA,EAAM,4BAAA,EAA8B,GAAG,KAAA,EACjG,QAAA,kBAAA,GAAA,CAAC,UAAK,CAAA,EAAE,kEAAA,EAAmE,IAAA,EAAK,cAAA,EAAe,CAAA,EACjG;;ACSK,MAAM,aAAa,CAAC,EAAE,UAAU,KAAA,EAAO,SAAA,EAAW,eAAc,KAAuB;AAC5F,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,YAAA,EAAY,KAAA,EAAO,SAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAW,EAAA,CAAG,2BAAA,EAA6B,aAAa,CAAA,EAAI,UAAS,CAAA,EAC3E,CAAA;AAEJ;AAaO,MAAM,KAAA,GAAQ,CAAC,EAAE,SAAA,EAAW,IAAI,SAAA,EAAW,MAAA,EAAQ,GAAG,KAAA,EAAM,KAAkB;AACnF,EAAA,MAAM,OAAO,EAAA,IAAM,MAAA;AAEnB,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,QAAG,SAAA,EAAW,EAAA,CAAG,0CAA0C,SAAA,GAAY,QAAA,GAAW,UAAU,CAAA,EAC3F,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,cAAA,EAAc,YAAY,MAAA,GAAS,MAAA;AAAA,UACnC,SAAA,EAAW,EAAA;AAAA,YACT,mEAAA;AAAA,YACA,WAAA,CAAY,MAAA;AAAA,YACZ,YAAY,2BAAA,GAA8B,mCAAA;AAAA,YAC1C;AAAA,WACF;AAAA,UACC,GAAG;AAAA;AAAA,OACN;AAAA,MACC;AAAA,KAAA,EACH,CAAA;AAAA,IACC,CAAC,SAAA,oBACA,GAAA,CAAC,QAAG,IAAA,EAAK,WAAA,EAAY,WAAU,0BAAA,EAC7B,QAAA,kBAAA,GAAA,CAAC,QAAK,SAAA,EAAW,EAAA,CAAG,iBAAiB,WAAA,CAAY,MAAM,GACrD,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,GACb,CAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/Button-DoOEJwa_.js

@@ -0,0 +1,105 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { c as cva } from './index-CsyK0ihk.js';
+import React__default from 'react';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from './tooltip-DehuxlSR.js';
+import { I as Icon } from './Icon-CJEjdbjB.js';
+import { c as controlHeight, a as controlSizeClasses } from './control-size-BdDLgGX4.js';
+import { c as controlFocusBorderVisible, s as sharedFormElementDisabledStyle } from './form-element-DUtZESwq.js';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+const TEXT_MODE_ADORNMENTS = cn(
+  "gap-[.75em] rounded-full",
+  "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:mx-[-.3em]",
+  "[&>svg]:opacity-50 [&:hover>svg]:opacity-100"
+);
+const buttonVariants = cva(
+  cn(
+    "inline-flex items-center justify-center leading-0 cursor-pointer",
+    "transition-all duration-normal ease-out-custom",
+    sharedFormElementDisabledStyle,
+    controlFocusBorderVisible
+  ),
+  {
+    variants: {
+      variant: {
+        default: "bg-surface3 border border-border2 hover:bg-surface5 hover:text-neutral6 active:bg-surface6 text-neutral6",
+        primary: "bg-neutral6 border border-transparent hover:bg-neutral6/90 active:bg-neutral6/80 text-surface1 font-medium",
+        ghost: "bg-transparent border border-transparent hover:bg-neutral6/5 hover:text-neutral6 active:bg-neutral6/10 text-neutral4",
+        outline: "bg-transparent border border-border1 hover:bg-surface3 hover:text-neutral6 active:bg-surface4 text-neutral5"
+      },
+      size: {
+        xs: cn(controlSizeClasses.xs, "px-[.8em]", TEXT_MODE_ADORNMENTS),
+        sm: cn(controlSizeClasses.sm, "px-[.9em]", TEXT_MODE_ADORNMENTS),
+        md: cn(controlSizeClasses.md, "px-[.9em]", TEXT_MODE_ADORNMENTS),
+        lg: cn(controlSizeClasses.default, "px-[1em]", TEXT_MODE_ADORNMENTS),
+        // Icon sizes: square dimensions, fully rounded → circle. Active state inherits from variant
+        // (e.g. `active:bg-surface5`) — same press feedback as text-mode for consistency.
+        "icon-xs": cn(controlHeight.xs, "w-form-xs rounded-full"),
+        "icon-sm": cn(controlHeight.sm, "w-form-sm rounded-full"),
+        "icon-md": cn(controlHeight.md, "w-form-md rounded-full"),
+        "icon-lg": cn(controlHeight.lg, "w-form-lg rounded-full")
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+const iconChildSizeMap = {
+  "icon-xs": "sm",
+  "icon-sm": "sm",
+  "icon-md": "default",
+  "icon-lg": "lg"
+};
+function flattenChildren(children) {
+  const result = [];
+  React__default.Children.forEach(children, (child) => {
+    if (React__default.isValidElement(child) && child.type === React__default.Fragment) {
+      result.push(...flattenChildren(child.props.children));
+    } else {
+      result.push(child);
+    }
+  });
+  return result;
+}
+function isIconOnly(children) {
+  const flat = flattenChildren(children);
+  return flat.length > 0 && flat.every((child) => React__default.isValidElement(child));
+}
+function isIconButtonSize(size) {
+  return typeof size === "string" && size.startsWith("icon-");
+}
+const Button = React__default.forwardRef(
+  ({ className, as, size, variant = "default", disabled, children, tooltip, "aria-label": ariaLabelProp, ...props }, ref) => {
+    const Component = as || "button";
+    const iconMode = isIconButtonSize(size);
+    const resolvedSize = size ?? "md";
+    const isLabelless = !iconMode && isIconOnly(children);
+    const ariaLabel = ariaLabelProp ?? ((iconMode || isLabelless) && typeof tooltip === "string" ? tooltip : void 0);
+    const content = iconMode ? /* @__PURE__ */ jsx(Icon, { size: iconChildSizeMap[size], children }) : children;
+    const button = /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        disabled,
+        "aria-label": ariaLabel,
+        "data-variant": variant,
+        className: cn(buttonVariants({ variant, size: resolvedSize }), isLabelless && "[&>svg]:opacity-75", className),
+        ...props,
+        children: content
+      }
+    );
+    if (tooltip) {
+      return /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+      ] });
+    }
+    return button;
+  }
+);
+Button.displayName = "Button";
+
+export { Button as B, buttonVariants as b };
+//# sourceMappingURL=Button-DoOEJwa_.js.map

package/dist/Button-DoOEJwa_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-DoOEJwa_.js","sources":["../src/ds/components/Button/Button.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport React from 'react';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Icon } from '@/ds/icons/Icon';\nimport { controlHeight, controlSizeClasses } from '@/ds/primitives/control-size';\nimport { controlFocusBorderVisible, sharedFormElementDisabledStyle } from '@/ds/primitives/form-element';\nimport { cn } from '@/lib/utils';\n\n// Adornments for text-mode buttons: gap between icon+label, larger radius, and SVG sizing for\n// inline `<svg>` children. Excluded from icon-mode because icon-mode wraps children in `<Icon>`\n// (so `[&>svg]` selectors don't match) and uses its own `rounded-full` (circle).\nconst TEXT_MODE_ADORNMENTS = cn(\n  'gap-[.75em] rounded-full',\n  '[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:mx-[-.3em]',\n  '[&>svg]:opacity-50 [&:hover>svg]:opacity-100',\n);\n\nexport const buttonVariants = cva(\n  cn(\n    'inline-flex items-center justify-center leading-0 cursor-pointer',\n    'transition-all duration-normal ease-out-custom',\n    sharedFormElementDisabledStyle,\n    controlFocusBorderVisible,\n  ),\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-surface3 border border-border2 hover:bg-surface5 hover:text-neutral6 active:bg-surface6 text-neutral6',\n        primary:\n          'bg-neutral6 border border-transparent hover:bg-neutral6/90 active:bg-neutral6/80 text-surface1 font-medium',\n        ghost:\n          'bg-transparent border border-transparent hover:bg-neutral6/5 hover:text-neutral6 active:bg-neutral6/10 text-neutral4',\n        outline:\n          'bg-transparent border border-border1 hover:bg-surface3 hover:text-neutral6 active:bg-surface4 text-neutral5',\n      },\n      size: {\n        xs: cn(controlSizeClasses.xs, 'px-[.8em]', TEXT_MODE_ADORNMENTS),\n        sm: cn(controlSizeClasses.sm, 'px-[.9em]', TEXT_MODE_ADORNMENTS),\n        md: cn(controlSizeClasses.md, 'px-[.9em]', TEXT_MODE_ADORNMENTS),\n        lg: cn(controlSizeClasses.default, 'px-[1em]', TEXT_MODE_ADORNMENTS),\n        // Icon sizes: square dimensions, fully rounded → circle. Active state inherits from variant\n        // (e.g. `active:bg-surface5`) — same press feedback as text-mode for consistency.\n        'icon-xs': cn(controlHeight.xs, 'w-form-xs rounded-full'),\n        'icon-sm': cn(controlHeight.sm, 'w-form-sm rounded-full'),\n        'icon-md': cn(controlHeight.md, 'w-form-md rounded-full'),\n        'icon-lg': cn(controlHeight.lg, 'w-form-lg rounded-full'),\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n    },\n  },\n);\n\n// Public types derived from cva — single source of truth. Adding a variant or size to\n// `buttonVariants` automatically updates these unions.\ntype ButtonVariantsProps = VariantProps<typeof buttonVariants>;\nexport type ButtonVariant = NonNullable<ButtonVariantsProps['variant']>;\nexport type ButtonSize = NonNullable<ButtonVariantsProps['size']>;\nexport type IconButtonSize = Extract<ButtonSize, `icon-${string}`>;\nexport type TextButtonSize = Exclude<ButtonSize, IconButtonSize>;\n\nexport interface ButtonProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>, ButtonVariantsProps {\n  as?: React.ElementType;\n  className?: string;\n  href?: string;\n  to?: string;\n  prefetch?: boolean | null;\n  children: React.ReactNode;\n  tooltip?: React.ReactNode;\n  target?: string;\n  type?: 'button' | 'submit' | 'reset';\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\n// Button's icon-* sizes don't match `<Icon>`'s own size scale (`sm | default | lg`).\nconst iconChildSizeMap: Record<IconButtonSize, 'sm' | 'default' | 'lg'> = {\n  'icon-xs': 'sm',\n  'icon-sm': 'sm',\n  'icon-md': 'default',\n  'icon-lg': 'lg',\n};\n\n// Walks React children, expanding `<></>` fragments so `isIconOnly` can inspect the real\n// elements inside. `<Button><><Icon/></></Button>` should still count as icon-only.\nfunction flattenChildren(children: React.ReactNode): React.ReactNode[] {\n  const result: React.ReactNode[] = [];\n  React.Children.forEach(children, child => {\n    if (React.isValidElement<{ children?: React.ReactNode }>(child) && child.type === React.Fragment) {\n      result.push(...flattenChildren(child.props.children));\n    } else {\n      result.push(child);\n    }\n  });\n  return result;\n}\n\n// True when every child is a React element (no text/label). Used in text-mode to brighten the\n// SVG of label-less buttons so the glyph reads stronger.\nfunction isIconOnly(children: React.ReactNode): boolean {\n  const flat = flattenChildren(children);\n  return flat.length > 0 && flat.every(child => React.isValidElement(child));\n}\n\n// Type guard: narrows `ButtonSize` to `IconButtonSize` so consumers (e.g. `iconChildSizeMap`)\n// can index into icon-only structures without a cast.\nfunction isIconButtonSize(size: ButtonSize | null | undefined): size is IconButtonSize {\n  return typeof size === 'string' && size.startsWith('icon-');\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    { className, as, size, variant = 'default', disabled, children, tooltip, 'aria-label': ariaLabelProp, ...props },\n    ref,\n  ) => {\n    const Component = as || 'button';\n    const iconMode = isIconButtonSize(size);\n    const resolvedSize: ButtonSize = size ?? 'md';\n    const isLabelless = !iconMode && isIconOnly(children);\n\n    // Icon-only buttons need an a11y label. If a string tooltip is provided, reuse it.\n    const ariaLabel = ariaLabelProp ?? ((iconMode || isLabelless) && typeof tooltip === 'string' ? tooltip : undefined);\n\n    const content = iconMode ? <Icon size={iconChildSizeMap[size as IconButtonSize]}>{children}</Icon> : children;\n\n    const button = (\n      <Component\n        ref={ref}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        // Expose the variant so a parent ButtonsGroup can detect FILLED segments in CSS\n        // (filled buttons have an opaque background that hides a border seam, so the group\n        // paints their divider as an inset box-shadow instead — see buttons-group.tsx).\n        data-variant={variant}\n        className={cn(buttonVariants({ variant, size: resolvedSize }), isLabelless && '[&>svg]:opacity-75', className)}\n        {...props}\n      >\n        {content}\n      </Component>\n    );\n\n    if (tooltip) {\n      return (\n        <Tooltip>\n          <TooltipTrigger asChild>{button}</TooltipTrigger>\n          <TooltipContent>{tooltip}</TooltipContent>\n        </Tooltip>\n      );\n    }\n\n    return button;\n  },\n);\n\nButton.displayName = 'Button';\n"],"names":["React"],"mappings":";;;;;;;;;AAYA,MAAM,oBAAA,GAAuB,EAAA;AAAA,EAC3B,0BAAA;AAAA,EACA,wDAAA;AAAA,EACA;AACF,CAAA;AAEO,MAAM,cAAA,GAAiB,GAAA;AAAA,EAC5B,EAAA;AAAA,IACE,kEAAA;AAAA,IACA,gDAAA;AAAA,IACA,8BAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EACE,0GAAA;AAAA,QACF,OAAA,EACE,4GAAA;AAAA,QACF,KAAA,EACE,sHAAA;AAAA,QACF,OAAA,EACE;AAAA,OACJ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,EAAA,CAAG,kBAAA,CAAmB,EAAA,EAAI,aAAa,oBAAoB,CAAA;AAAA,QAC/D,EAAA,EAAI,EAAA,CAAG,kBAAA,CAAmB,EAAA,EAAI,aAAa,oBAAoB,CAAA;AAAA,QAC/D,EAAA,EAAI,EAAA,CAAG,kBAAA,CAAmB,EAAA,EAAI,aAAa,oBAAoB,CAAA;AAAA,QAC/D,EAAA,EAAI,EAAA,CAAG,kBAAA,CAAmB,OAAA,EAAS,YAAY,oBAAoB,CAAA;AAAA;AAAA;AAAA,QAGnE,SAAA,EAAW,EAAA,CAAG,aAAA,CAAc,EAAA,EAAI,wBAAwB,CAAA;AAAA,QACxD,SAAA,EAAW,EAAA,CAAG,aAAA,CAAc,EAAA,EAAI,wBAAwB,CAAA;AAAA,QACxD,SAAA,EAAW,EAAA,CAAG,aAAA,CAAc,EAAA,EAAI,wBAAwB,CAAA;AAAA,QACxD,SAAA,EAAW,EAAA,CAAG,aAAA,CAAc,EAAA,EAAI,wBAAwB;AAAA;AAC1D,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAyBA,MAAM,gBAAA,GAAoE;AAAA,EACxE,SAAA,EAAW,IAAA;AAAA,EACX,SAAA,EAAW,IAAA;AAAA,EACX,SAAA,EAAW,SAAA;AAAA,EACX,SAAA,EAAW;AACb,CAAA;AAIA,SAAS,gBAAgB,QAAA,EAA8C;AACrE,EAAA,MAAM,SAA4B,EAAC;AACnC,EAAAA,cAAA,CAAM,QAAA,CAAS,OAAA,CAAQ,QAAA,EAAU,CAAA,KAAA,KAAS;AACxC,IAAA,IAAIA,eAAM,cAAA,CAA+C,KAAK,KAAK,KAAA,CAAM,IAAA,KAASA,eAAM,QAAA,EAAU;AAChG,MAAA,MAAA,CAAO,KAAK,GAAG,eAAA,CAAgB,KAAA,CAAM,KAAA,CAAM,QAAQ,CAAC,CAAA;AAAA,IACtD,CAAA,MAAO;AACL,MAAA,MAAA,CAAO,KAAK,KAAK,CAAA;AAAA,IACnB;AAAA,EACF,CAAC,CAAA;AACD,EAAA,OAAO,MAAA;AACT;AAIA,SAAS,WAAW,QAAA,EAAoC;AACtD,EAAA,MAAM,IAAA,GAAO,gBAAgB,QAAQ,CAAA;AACrC,EAAA,OAAO,IAAA,CAAK,SAAS,CAAA,IAAK,IAAA,CAAK,MAAM,CAAA,KAAA,KAASA,cAAA,CAAM,cAAA,CAAe,KAAK,CAAC,CAAA;AAC3E;AAIA,SAAS,iBAAiB,IAAA,EAA6D;AACrF,EAAA,OAAO,OAAO,IAAA,KAAS,QAAA,IAAY,IAAA,CAAK,WAAW,OAAO,CAAA;AAC5D;AAEO,MAAM,SAASA,cAAA,CAAM,UAAA;AAAA,EAC1B,CACE,EAAE,SAAA,EAAW,EAAA,EAAI,MAAM,OAAA,GAAU,SAAA,EAAW,QAAA,EAAU,QAAA,EAAU,SAAS,YAAA,EAAc,aAAA,EAAe,GAAG,KAAA,IACzG,GAAA,KACG;AACH,IAAA,MAAM,YAAY,EAAA,IAAM,QAAA;AACxB,IAAA,MAAM,QAAA,GAAW,iBAAiB,IAAI,CAAA;AACtC,IAAA,MAAM,eAA2B,IAAA,IAAQ,IAAA;AACzC,IAAA,MAAM,WAAA,GAAc,CAAC,QAAA,IAAY,UAAA,CAAW,QAAQ,CAAA;AAGpD,IAAA,MAAM,YAAY,aAAA,KAAA,CAAmB,QAAA,IAAY,gBAAgB,OAAO,OAAA,KAAY,WAAW,OAAA,GAAU,MAAA,CAAA;AAEzG,IAAA,MAAM,OAAA,GAAU,2BAAW,GAAA,CAAC,IAAA,EAAA,EAAK,MAAM,gBAAA,CAAiB,IAAsB,CAAA,EAAI,QAAA,EAAS,CAAA,GAAU,QAAA;AAErG,IAAA,MAAM,MAAA,mBACJ,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,QAAA;AAAA,QACA,YAAA,EAAY,SAAA;AAAA,QAIZ,cAAA,EAAc,OAAA;AAAA,QACd,SAAA,EAAW,EAAA,CAAG,cAAA,CAAe,EAAE,OAAA,EAAS,IAAA,EAAM,YAAA,EAAc,CAAA,EAAG,WAAA,IAAe,oBAAA,EAAsB,SAAS,CAAA;AAAA,QAC5G,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAGF,IAAA,IAAI,OAAA,EAAS;AACX,MAAA,4BACG,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EAAE,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,wBAChC,GAAA,CAAC,kBAAgB,QAAA,EAAA,OAAA,EAAQ;AAAA,OAAA,EAC3B,CAAA;AAAA,IAEJ;AAEA,IAAA,OAAO,MAAA;AAAA,EACT;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}