@sixthshift/design-system 0.3.0 → 0.5.0

package/README.md

@@ -1,9 +1,11 @@
 # design-system
 
-Personal design system: design tokens, theme pipeline, and a React component library. Harvested from the Personal Assistant project; consumed as a versioned dependency (MUI-style), configured through the theme surface — never by editing component source in the consumer.
+Personal design system: design tokens, theme pipeline, and a React component library. Consumed as a versioned dependency (MUI-style), configured through the theme surface — never by editing component source in the consumer.
 
 A single package, `@sixthshift/design-system`: ~80 components (primitives, overlays, forms, pickers, charts, typography) + a JSON-driven token/theme pipeline + Tailwind config. Built on [shadcn/ui](https://ui.shadcn.com) patterns.
 
+Browse the components: **[sixthshift.github.io/design-system](https://sixthshift.github.io/design-system/)** — Storybook, rebuilt from `main` by `.github/workflows/pages.yml`.
+
 ## Orientation
 
 **Owns:** The component library — 80+ exports via subpath imports, design tokens, theme system (JSON-driven CSS generation), Tailwind config, and Storybook stories. Components span primitives, composites, typography, charts, and overlays.
@@ -22,6 +24,7 @@ npm install @sixthshift/design-system
 /* your CSS entry — Tailwind 4 is a required peer */
 @import "tailwindcss";
 @import "@sixthshift/design-system/theme.css";
+@source "../node_modules/@sixthshift/design-system";
 ```
 
 That second line is opinionated: it replaces Tailwind's default palette with this
@@ -76,14 +79,14 @@ Skip this and text falls back to the next family in the stack (`ui-sans-serif` /
 ## Available exports
 
 ```tsx
-// Primitives (Button, Badge, Card, Input, Textarea, Checkbox, Switch, Avatar, ...)
+// Primitives (Button, Badge, Card, Input, Textarea, Checkbox, Switch, ...)
 import { Button } from "@sixthshift/design-system/button";
 import { Input } from "@sixthshift/design-system/input";
 
-// Composites (FormField, NavSide, Tabs, Pagination, ...)
+// Composites (FormField, Tabs, ...)
 import { FormField } from "@sixthshift/design-system/form-field";
 
-// Charts (LineChart, BarChart, Sparkline, HeatMap)
+// Charts (LineChart, BarChart, Sparkline)
 import { LineChart } from "@sixthshift/design-system/line-chart";
 
 // Pickers (Calendar, DatePicker, TimePicker, DateTimePicker, DateRangePicker, DateTimeRangePicker)
@@ -188,22 +191,123 @@ restyle by overriding CSS variables at runtime — component source stays
 untouched. See [docs/design-tokens.md](docs/design-tokens.md) for the full token
 reference.
 
+Tokens come in three tiers, and the one you reach for depends on the *kind* of
+change you are making:
+
+| Tier | Example | Change it to | Scope |
+| --- | --- | --- | --- |
+| Palette | `--color-ocean-600` | add or alter a hue | everything downstream |
+| Semantic | `--bg-brand` | **re-skin** — brand is now purple | every surface that means "brand" |
+| Component | `--button-bg` | **re-wire** — *this* part uses a different meaning | one component, or one subtree |
+
+Re-skinning is a token *value* change and it is global by design. Re-wiring is a
+recipe change, and it is the one that used to be impossible.
+
 ### Tailwind integration
 
-The two `@import` lines above are the whole integration. That single theme import
-carries the token variables *and* the `@theme` block declaring the library's
-utilities, so `bg-bg-brand`, `z-modal`, `animate-fade-in` and `dark:*` compile in
-your build alongside your own classes — same pass, same tree-shaking, and
+The three lines above are the whole integration. The theme import carries the
+token variables *and* the `@theme` block declaring the library's utilities, so
+`bg-bg-brand`, `z-modal`, `animate-fade-in` and `dark:*` compile in your build
+alongside your own classes — same pass, same tree-shaking, and
 `className="mt-8"` on a library component works like any other Tailwind class.
 
-Add the library to your `content` sources only if you scan explicitly; automatic
-detection already covers `node_modules` imports. There is no preset, no
-`@config`, and no prebuilt stylesheet to import.
+**The `@source` line is required.** Tailwind 4's automatic content detection
+never scans `node_modules`, so without it none of this library's classes are
+found and every component renders unstyled.
+
+The path is a filesystem path resolved relative to the CSS file that declares
+it — not a package specifier, so a bare `"@sixthshift/design-system"` silently
+matches nothing. Adjust the depth to wherever your CSS entry lives; in a
+monorepo with hoisted dependencies that is often `"../../node_modules/…"`. A
+symlinked install (pnpm) needs no special handling: `@source` follows the link
+into the store.
+
+Beyond that there is no preset, no `@config`, and no prebuilt stylesheet to
+import.
 
 **Tailwind 4 is required, not optional.** Every component is a set of Tailwind
 classes, so without it they render unstyled. That is why `tailwindcss` is a
 non-optional peer dependency.
 
+### Restyling a component
+
+Every component reads its colours from its own tokens rather than naming a
+semantic token directly. `Button` resolves `--button-bg`, whose value is decided
+by a recipe in the published stylesheet:
+
+```css
+/* what ships, in @layer components */
+.btn[data-variant="solid"][data-intent="neutral"] {
+  --button-bg: var(--bg-brand);
+  --button-bg-hovered: var(--bg-brand-hovered);
+  --button-fg: var(--fg-on-brand);
+}
+```
+
+That recipe is data, not compiled-in class names, so you can re-point any cell.
+Four granularities, narrowest to broadest:
+
+```tsx
+// one instance — inline styles outrank layers and specificity both
+<Button style={{ "--button-bg": "var(--bg-strong)" } as React.CSSProperties} />
+```
+
+```css
+/* one subtree — impossible with token values, which are global */
+.checkout .btn[data-intent="neutral"] { --button-bg: var(--bg-success); }
+
+/* one cell, app-wide — reject a house opinion */
+.btn[data-variant="link"][data-intent="neutral"] { --button-fg: var(--fg-normal); }
+
+/* every button */
+.btn { --button-bg-hovered: var(--button-bg); }   /* no hover shift, anywhere */
+```
+
+**Write your overrides unlayered.** The cascade compares layers *before*
+specificity, and unlayered author CSS outranks any layered author CSS — which is
+why a bare `.btn { … }` beats the library's three-attribute selector without an
+`!important`. The corollary is the trap: wrap the same rule in
+`@layer components` (a Tailwind 3 habit) and it lands in the library's own layer,
+where specificity decides again and your override silently loses on every cell
+the library ships.
+
+#### Adding an intent the library never shipped
+
+```css
+/* 1. the semantic tokens — both modes, mirroring the library's own selectors */
+:root:not([data-theme]),
+:root[data-theme="light"] { --bg-info: var(--color-ocean-700); --fg-on-info: #fff; }
+:root[data-theme="dark"]  { --bg-info: var(--color-ocean-400); --fg-on-info: #06121f; }
+
+/* 2. the recipe cell */
+.btn[data-variant="solid"][data-intent="info"] {
+  --button-bg: var(--bg-info);
+  --button-fg: var(--fg-on-info);
+}
+```
+
+```tsx
+<Button intent="info">Details</Button>   // type-checks; no library release needed
+```
+
+`variant` and `intent` are typed as the shipped union *plus* `string`, so a value
+you invent is accepted while the built-ins still autocomplete. Note that no
+`@theme` entry is needed: recipes read `var(--bg-info)` as plain CSS, never
+through a Tailwind utility. You own the contrast of tokens you add —
+`bun run check:contrast` only sees the library's own.
+
+#### Finding the token names
+
+`bun run check:recipes --list` prints every component token grouped by
+component. The names follow `--{component}[-{part}]-{context}[-{state}]`, where
+context is `bg`/`fg`/`border`/`ring` and state is `hovered`/`pressed`/`disabled`
+— e.g. `--modal-overlay-bg`, `--input-placeholder-fg`, `--card-border-hovered`.
+
+Intent and variant never appear in a token *name*; they select via the `data-*`
+attributes. That is what lets you add one.
+
+**These names are public API** and change only under semver, like any export.
+
 ### What the theme takes over
 
 This is a design system, not a component grab-bag: importing `theme.css` adopts
@@ -327,4 +431,4 @@ git tag v0.2.0 && git push origin v0.2.0
 
 ## Docs
 
-Design-system knowledge lives in [`docs/`](docs/): [design tokens](docs/design-tokens.md), [component catalog](docs/component-catalog.md), [component authoring](docs/component-authoring.md), [component API design](docs/component-api-design.md), [composition](docs/composition.md), [visual hierarchy](docs/visual-hierarchy.md), [spacing](docs/spacing.md), [motion](docs/motion.md), [states](docs/states.md), [overlays](docs/overlay-primitives.md), [forms](docs/forms.md), [modals](docs/modals.md), [responsive](docs/responsive.md), [density](docs/density.md), [copy](docs/copy-conventions.md), [time formatting](docs/time-formatting.md), [UX principles](docs/ux-principles.md), [design philosophy](docs/design-philosophy.md).
+Design-system knowledge lives in [`docs/`](docs/): [design tokens](docs/design-tokens.md), [component catalog](docs/component-catalog.md), [component authoring](docs/component-authoring.md), [component API design](docs/component-api-design.md), [composition](docs/composition.md), [visual hierarchy](docs/visual-hierarchy.md), [spacing](docs/spacing.md), [motion](docs/motion.md), [states](docs/states.md), [overlays](docs/overlay-primitives.md), [forms](docs/forms.md), [modals](docs/modals.md), [responsive](docs/responsive.md), [density](docs/density.md), [copy](docs/copy-conventions.md), [time formatting](docs/time-formatting.md), [design philosophy](docs/design-philosophy.md).

package/dist/components/Badge/Badge.d.ts

@@ -1,13 +1,68 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
-declare const badgeVariants: (props?: ({
-    variant?: "solid" | "soft" | "outline" | null | undefined;
-    intent?: "neutral" | "primary" | "danger" | "success" | "warning" | "muted" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badgeVariants>;
-export declare const Badge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    variant?: "solid" | "soft" | "outline" | null | undefined;
-    intent?: "neutral" | "primary" | "danger" | "success" | "warning" | "muted" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * Geometry and behaviour only.
+ *
+ * Every colour reads a `--badge-*` component token whose value is decided by
+ * src/theme/recipes/badge.css. That file is the mapping from
+ * `(variant, intent)` to a semantic token — the layer that used to be
+ * `compoundVariants` here, where it was compiled into class-name literals and
+ * unreachable from outside. Nothing in this file names a colour, which is the
+ * point: the semantics are now configurable without a release.
+ */
+declare const badgeVariants: (props?: ({} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Widened deliberately. Adding a variant or an intent is a CSS change in the
+ * consuming app, not a release here — so the type has to admit values this
+ * file has never heard of, while still autocompleting the ones it ships.
+ */
+type Loose<T extends string> = T | (string & {});
+export type BadgeVariantName = "solid" | "soft" | "outline";
+/**
+ * `primary` was this component's name for the brand colour, and nothing else in
+ * the system used it — the token is `--bg-brand`, and
+ * docs/modals.md already told callers to write `intent="brand"`. It is off the
+ * closed union as of this release but still resolves, via an aliased selector in
+ * badge.css; `BadgeIntent` is widened, so it also still type-checks.
+ */
+export type BadgeIntentName = "neutral" | "brand" | "danger" | "success" | "warning" | "muted";
+export type BadgeVariant = Loose<BadgeVariantName>;
+export type BadgeIntent = Loose<BadgeIntentName>;
+export type BadgeRecipeProps = VariantProps<typeof badgeVariants> & {
+    variant?: BadgeVariant | undefined;
+    intent?: BadgeIntent | undefined;
+    className?: string | undefined;
+};
+/**
+ * The class string plus the two attributes the recipe selects on.
+ */
+export declare function badgeRecipe({ variant, intent, className }: BadgeRecipeProps): {
+    className: string;
+    "data-variant": BadgeVariant;
+    "data-intent": BadgeIntent;
+};
+export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
+    variant?: BadgeVariant | undefined;
+    intent?: BadgeIntent | undefined;
+};
+/**
+ * Small label for status, category, or count.
+ *
+ * Two independent axes, same split as Button: `variant` is the fill
+ * (`solid`, `soft`, `outline`), `intent` is what it signals (`neutral`,
+ * `brand`, `danger`, `success`, `warning`, `muted`) — `muted` has no
+ * Button equivalent, for de-emphasized metadata rather than a status.
+ * Renders a `<span>`; purely presentational, so give it visible text — it
+ * does not manage an accessible name of its own.
+ *
+ * Colour is not decided here: each `(variant, intent)` pairing resolves
+ * through a `--badge-*` component token (src/theme/recipes/badge.css), the
+ * same seam Button uses, so a consumer can re-point a cell without a
+ * release.
+ */
+export declare const Badge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    variant?: BadgeVariant | undefined;
+    intent?: BadgeIntent | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
 export { badgeVariants };
 //# sourceMappingURL=Badge.d.ts.map

package/dist/components/Badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,QAAA,MAAM,aAAa;;;8EA8ClB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAEpG,eAAO,MAAM,KAAK;;;uHAEhB,CAAC;AAGH,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,2FAOlB,CAAC;AAcF;;;;GAIG;AACH,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEjD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAC5D;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAC/F,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,eAAe,CAAC,CAAC;AAEjD,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IAClE,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,MAAM,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAAE,OAAiB,EAAE,MAAgB,EAAE,SAAS,EAAE,EAAE,gBAAgB;;;;EAM/F;AAED,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG;IAC/D,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,MAAM,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;CAClC,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK;cAnBN,YAAY,GAAG,SAAS;aACzB,WAAW,GAAG,SAAS;yCAoBhC,CAAC;AAGH,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/Badge/Badge.js

@@ -2,52 +2,60 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@sixthshift/design-system/utils";
 import { cva } from "class-variance-authority";
 import * as React from "react";
-const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-border-brand focus:ring-offset-2", {
-    variants: {
-        variant: {
-            solid: "border-transparent shadow",
-            soft: "border-transparent",
-            outline: "",
-        },
-        intent: {
-            neutral: "",
-            primary: "",
-            danger: "",
-            success: "",
-            warning: "",
-            muted: "",
-        },
-    },
-    compoundVariants: [
-        // Solid variants
-        { variant: "solid", intent: "neutral", className: "bg-bg-strong text-fg-on-strong" },
-        { variant: "solid", intent: "primary", className: "bg-bg-brand text-fg-on-brand" },
-        { variant: "solid", intent: "danger", className: "bg-bg-danger text-fg-on-danger" },
-        { variant: "solid", intent: "success", className: "bg-bg-success text-fg-on-success" },
-        { variant: "solid", intent: "warning", className: "bg-bg-warning text-fg-on-warning" },
-        { variant: "solid", intent: "muted", className: "bg-bg-subtle text-fg-subtle" },
-        // Soft variants
-        { variant: "soft", intent: "neutral", className: "bg-bg-subtle text-fg-normal" },
-        { variant: "soft", intent: "primary", className: "bg-bg-brand-subtle text-fg-on-brand-subtle" },
-        { variant: "soft", intent: "danger", className: "bg-bg-danger-subtle text-fg-on-danger-subtle" },
-        { variant: "soft", intent: "success", className: "bg-bg-success-subtle text-fg-on-success-subtle" },
-        { variant: "soft", intent: "warning", className: "bg-bg-warning-subtle text-fg-on-warning-subtle" },
-        { variant: "soft", intent: "muted", className: "bg-bg-subtle text-fg-subtle" },
-        // Outline variants
-        { variant: "outline", intent: "neutral", className: "border-border-normal bg-bg-normal text-fg-normal" },
-        { variant: "outline", intent: "primary", className: "border-border-brand bg-bg-normal text-fg-brand" },
-        { variant: "outline", intent: "danger", className: "border-border-danger bg-bg-normal text-fg-danger" },
-        { variant: "outline", intent: "success", className: "border-border-success bg-bg-normal text-fg-success" },
-        { variant: "outline", intent: "warning", className: "border-border-warning bg-bg-normal text-fg-warning" },
-        { variant: "outline", intent: "muted", className: "border-border-normal bg-bg-normal text-fg-subtle" },
-    ],
-    defaultVariants: {
-        variant: "solid",
-        intent: "primary",
-    },
-});
-export const Badge = React.forwardRef(({ className, variant, intent, ...props }, ref) => {
-    return _jsx("span", { ref: ref, className: cn(badgeVariants({ variant, intent }), className), ...props });
+/**
+ * Geometry and behaviour only.
+ *
+ * Every colour reads a `--badge-*` component token whose value is decided by
+ * src/theme/recipes/badge.css. That file is the mapping from
+ * `(variant, intent)` to a semantic token — the layer that used to be
+ * `compoundVariants` here, where it was compiled into class-name literals and
+ * unreachable from outside. Nothing in this file names a colour, which is the
+ * point: the semantics are now configurable without a release.
+ */
+const badgeVariants = cva(
+// One literal, deliberately: `useSortedClasses --unsafe` strips the trailing
+// space before a `+`, silently welding the last class of one fragment to the
+// first of the next. The screenshots catch it, but a single string means the
+// sorter has nothing to break.
+"badge border-(color:--badge-border) focus:ring-(color:--badge-ring) inline-flex items-center rounded-md border bg-(--badge-bg) px-2.5 py-0.5 font-semibold text-(--badge-fg) text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2", { variants: {} });
+/**
+ * The non-colour half of `variant` — elevation only, for Badge. A plain
+ * lookup rather than a CVA variant so an unrecognised variant stays a legal
+ * value that contributes no structure, leaving a consumer's CSS free to
+ * define it. `intent` needs no equivalent: it was never anything but colour.
+ */
+const variantStructure = {
+    solid: "shadow",
+    soft: "",
+    outline: "",
+};
+/**
+ * The class string plus the two attributes the recipe selects on.
+ */
+export function badgeRecipe({ variant = "solid", intent = "brand", className }) {
+    return {
+        className: cn(variantStructure[variant], badgeVariants({ className })),
+        "data-variant": variant,
+        "data-intent": intent,
+    };
+}
+/**
+ * Small label for status, category, or count.
+ *
+ * Two independent axes, same split as Button: `variant` is the fill
+ * (`solid`, `soft`, `outline`), `intent` is what it signals (`neutral`,
+ * `brand`, `danger`, `success`, `warning`, `muted`) — `muted` has no
+ * Button equivalent, for de-emphasized metadata rather than a status.
+ * Renders a `<span>`; purely presentational, so give it visible text — it
+ * does not manage an accessible name of its own.
+ *
+ * Colour is not decided here: each `(variant, intent)` pairing resolves
+ * through a `--badge-*` component token (src/theme/recipes/badge.css), the
+ * same seam Button uses, so a consumer can re-point a cell without a
+ * release.
+ */
+export const Badge = React.forwardRef(({ className, variant = "solid", intent = "brand", ...props }, ref) => {
+    return _jsx("span", { ref: ref, ...badgeRecipe({ variant, intent, className }), ...props });
 });
 Badge.displayName = "Badge";
 export { badgeVariants };

package/dist/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;GASG;AACH,MAAM,aAAa,GAAG,GAAG;AACvB,6EAA6E;AAC7E,6EAA6E;AAC7E,6EAA6E;AAC7E,+BAA+B;AAC/B,8PAA8P,EAC9P,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,gBAAgB,GAA2B;IAC/C,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,EAAE;IACR,OAAO,EAAE,EAAE;CACZ,CAAC;AA2BF;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,SAAS,EAAoB;IAC9F,OAAO;QACL,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;QACtE,cAAc,EAAE,OAAO;QACvB,aAAa,EAAE,MAAM;KACtB,CAAC;AACJ,CAAC;AAOD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAA8B,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACvI,OAAO,eAAM,GAAG,EAAE,GAAG,KAAM,WAAW,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,KAAM,KAAK,GAAI,CAAC;AACxF,CAAC,CAAC,CAAC;AACH,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/Badge/index.d.ts

@@ -1,2 +1,2 @@
-export { Badge, type BadgeProps, badgeVariants } from "./Badge.js";
+export { Badge, type BadgeIntent, type BadgeIntentName, type BadgeProps, type BadgeVariant, type BadgeVariantName, badgeRecipe, badgeVariants, } from "./Badge.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Badge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,WAAW,EACX,aAAa,GACd,MAAM,SAAS,CAAC"}

package/dist/components/Badge/index.js

@@ -1,2 +1,2 @@
-export { Badge, badgeVariants } from "./Badge.js";
+export { Badge, badgeRecipe, badgeVariants, } from "./Badge.js";
 //# sourceMappingURL=index.js.map

package/dist/components/Badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAmB,aAAa,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAML,WAAW,EACX,aAAa,GACd,MAAM,SAAS,CAAC"}

package/dist/components/BarChart/BarChart.d.ts

@@ -11,6 +11,18 @@ export type BarChartProps = React.HTMLAttributes<HTMLDivElement> & {
     formatValue?: (value: number) => string;
     barHeight?: number;
 };
+/**
+ * Horizontal bar chart, rendered as plain `<div>` bars rather than SVG — each
+ * row is a label, a track, and a colored fill sized to the item's percentage
+ * of `maxValue` (auto-detected from the data when omitted).
+ *
+ * Colour is per-item: pass a CSS color string via `color` on a
+ * `BarChartItem` (typically a `var(--fg-*)` token), or omit it to cycle
+ * through the built-in `DEFAULT_COLORS` list by index. There is no
+ * chart-level accessible name — the only text exposed to assistive tech is
+ * the visible label and, when `showValues` is true (the default), the
+ * formatted value next to each bar.
+ */
 export declare const BarChart: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     data: BarChartItem[];
     showValues?: boolean;

package/dist/components/BarChart/BarChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACjE,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF,eAAO,MAAM,QAAQ;UATb,YAAY,EAAE;iBACP,OAAO;eACT,MAAM;kBACH,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM;gBAC3B,MAAM;wCA8BnB,CAAC"}
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACjE,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,QAAQ;UArBb,YAAY,EAAE;iBACP,OAAO;eACT,MAAM;kBACH,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM;gBAC3B,MAAM;wCA0CnB,CAAC"}

package/dist/components/BarChart/BarChart.js

@@ -2,6 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "@sixthshift/design-system/utils";
 import * as React from "react";
 const DEFAULT_COLORS = ["var(--fg-brand)", "var(--fg-success)", "var(--fg-warning)", "var(--fg-danger)", "var(--fg-subtle)"];
+/**
+ * Horizontal bar chart, rendered as plain `<div>` bars rather than SVG — each
+ * row is a label, a track, and a colored fill sized to the item's percentage
+ * of `maxValue` (auto-detected from the data when omitted).
+ *
+ * Colour is per-item: pass a CSS color string via `color` on a
+ * `BarChartItem` (typically a `var(--fg-*)` token), or omit it to cycle
+ * through the built-in `DEFAULT_COLORS` list by index. There is no
+ * chart-level accessible name — the only text exposed to assistive tech is
+ * the visible label and, when `showValues` is true (the default), the
+ * formatted value next to each bar.
+ */
 export const BarChart = React.forwardRef(({ data, showValues = true, maxValue: maxValueProp, formatValue = (v) => String(v), barHeight = 24, className, ...rest }, ref) => {
     const maxValue = maxValueProp ?? Math.max(...data.map((d) => d.value), 1);
     return (_jsx("div", { ref: ref, ...rest, className: cn("flex flex-col gap-2", className), children: data.map((item, i) => {

package/dist/components/BarChart/BarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,MAAM,cAAc,GAAG,CAAC,iBAAiB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;AAE7H,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EAAE,IAAI,EAAE,UAAU,GAAG,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/H,MAAM,QAAQ,GAAG,YAAY,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IAE1E,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,KAAM,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,YACrE,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACpB,oEAAoE;YACpE,8CAA8C;YAC9C,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAC1E,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,cAAc,CAAC,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;YAEtE,OAAO,CACL,eAAsB,SAAS,EAAC,yBAAyB,aACvD,eAAM,SAAS,EAAC,0DAA0D,YAAE,IAAI,CAAC,KAAK,GAAQ,EAC9F,cAAK,SAAS,EAAC,gDAAgD,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,YAC1F,cAAK,SAAS,EAAC,+CAA+C,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,OAAO,GAAG,EAAE,eAAe,EAAE,KAAK,EAAE,GAAI,GACtH,EACL,UAAU,IAAI,eAAM,SAAS,EAAC,6DAA6D,YAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,GAAQ,KALrH,IAAI,CAAC,KAAK,CAMd,CACP,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AACF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}
+{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,MAAM,cAAc,GAAG,CAAC,iBAAiB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;AAE7H;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EAAE,IAAI,EAAE,UAAU,GAAG,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/H,MAAM,QAAQ,GAAG,YAAY,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IAE1E,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,KAAM,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,YACrE,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACpB,oEAAoE;YACpE,8CAA8C;YAC9C,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAC1E,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,cAAc,CAAC,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;YAEtE,OAAO,CACL,eAAsB,SAAS,EAAC,yBAAyB,aACvD,eAAM,SAAS,EAAC,0DAA0D,YAAE,IAAI,CAAC,KAAK,GAAQ,EAC9F,cAAK,SAAS,EAAC,gDAAgD,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,YAC1F,cAAK,SAAS,EAAC,+CAA+C,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,OAAO,GAAG,EAAE,eAAe,EAAE,KAAK,EAAE,GAAI,GACtH,EACL,UAAU,IAAI,eAAM,SAAS,EAAC,6DAA6D,YAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,GAAQ,KALrH,IAAI,CAAC,KAAK,CAMd,CACP,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AACF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/components/Button/Button.d.ts

@@ -1,19 +1,98 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
+/**
+ * Geometry and behaviour only.
+ *
+ * Every colour reads a `--button-*` component token whose value is decided by
+ * src/theme/recipes/button.css. That file is the mapping from
+ * `(variant, intent, state)` to a semantic token — the layer that used to be
+ * `compoundVariants` here, where it was compiled into class-name literals and
+ * unreachable from outside. Nothing in this file names a colour, which is the
+ * point: the semantics are now configurable without a release.
+ */
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "solid" | "outline" | "ghost" | null | undefined;
-    intent?: "neutral" | "danger" | "success" | "warning" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "xl" | "icon" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Widened deliberately. Adding a variant or an intent is a CSS change in the
+ * consuming app, not a release here — so the type has to admit values this file
+ * has never heard of, while still autocompleting the ones it ships.
+ *
+ * The closed unions are exported alongside, because widening a type gives up the
+ * ability to narrow it downstream: once `string` is in the union,
+ * `Exclude<ButtonVariant, "link">` can no longer remove `link`. ToggleGroup
+ * relies on exactly that exclusion, so it builds on the closed names.
+ */
+type Loose<T extends string> = T | (string & {});
+export type ButtonVariantName = "solid" | "outline" | "ghost" | "link";
+export type ButtonIntentName = "neutral" | "brand" | "danger" | "success" | "warning";
+export type ButtonVariant = Loose<ButtonVariantName>;
+export type ButtonIntent = Loose<ButtonIntentName>;
+export type ButtonRecipeProps = VariantProps<typeof buttonVariants> & {
+    variant?: ButtonVariant | undefined;
+    intent?: ButtonIntent | undefined;
+    iconOnly?: boolean | undefined;
+    className?: string | undefined;
+};
+/**
+ * The class string plus the two attributes the recipe selects on.
+ *
+ * Shared with Toggle and ToggleGroupItem, which are built on Button's look. The
+ * data attributes are half the contract now, so anything reusing that look has
+ * to emit them as well or it lands on the recipe's floor instead of a cell.
+ */
+export declare function buttonRecipe({ variant, intent, size, iconOnly, className }: ButtonRecipeProps): {
+    className: string;
+    "data-variant": ButtonVariant;
+    "data-intent": ButtonIntent;
+};
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants> & {
+    variant?: ButtonVariant | undefined;
+    intent?: ButtonIntent | undefined;
+    /** Square the button at its current size, for an icon with no label. */
+    iconOnly?: boolean;
     asChild?: boolean;
     loading?: boolean;
 };
+/**
+ * A single action the user can take.
+ *
+ * Appearance is three independent axes, so every combination is expressible:
+ * `variant` is the fill and shape (`solid`, `outline`, `ghost`, `link`),
+ * `intent` is what the action *means* (`brand` — the default — plus `neutral`,
+ * `danger`, `success`, `warning`), and `size` is the height scale. Reach for
+ * `intent="danger"` on a destructive action rather than a red `variant` — that
+ * is the distinction that keeps "outline danger" possible.
+ *
+ * `neutral` means *no colour family*: a grey button, the same thing the word
+ * means on Badge and Message. A brand-coloured button is
+ * `intent="brand"` — an affirmative choice, which is why `neutral` is the
+ * default: omitting the prop means "no particular meaning", so it should not
+ * quietly hand back the brand colour. Button used to spell brand as `neutral`
+ * for `solid` and `link` while `outline` and `ghost` were already grey, so a
+ * primary action now needs `intent="brand"` said out loud.
+ *
+ * Colour is not decided here. Each pairing resolves through a `--button-*`
+ * component token, so a consumer can re-point any cell — or add an intent this
+ * library never shipped — from their own stylesheet. See the Component tokens
+ * story below.
+ *
+ * `iconOnly` squares the box at whatever `size` is set and drops the
+ * horizontal padding, for a button whose whole content is an icon — give it an
+ * `aria-label`, since there is no text to name it. It is a separate prop rather
+ * than a size, so `size="sm" iconOnly` is expressible.
+ *
+ * `asChild` renders the child element with Button's styling instead of a
+ * `<button>`, for links that should look like buttons. `loading` shows a spinner
+ * and disables the control, so it does not need `disabled` as well.
+ */
 declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
-    variant?: "link" | "solid" | "outline" | "ghost" | null | undefined;
-    intent?: "neutral" | "danger" | "success" | "warning" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "xl" | "icon" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    variant?: ButtonVariant | undefined;
+    intent?: ButtonIntent | undefined;
+    /** Square the button at its current size, for an icon with no label. */
+    iconOnly?: boolean;
     asChild?: boolean;
     loading?: boolean;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,QAAA,MAAM,cAAc;;;;8EAqHnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GACrE,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,QAAA,MAAM,MAAM;;;;;cAJE,OAAO;cACP,OAAO;2CA0BpB,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;GASG;AACH,QAAA,MAAM,cAAc;;8EAoBnB,CAAC;AAiCF;;;;;;;;;GASG;AACH,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AACvE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AACtF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;AACrD,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;AAEnD,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpE,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACpC,MAAM,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAAE,OAAiB,EAAE,MAAkB,EAAE,IAAI,EAAE,QAAgB,EAAE,SAAS,EAAE,EAAE,iBAAiB;;;;EAU3H;AAED,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GACrE,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACpC,MAAM,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAClC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,QAAA,MAAM,MAAM;;;cAxCE,aAAa,GAAG,SAAS;aAC1B,YAAY,GAAG,SAAS;IACjC,wEAAwE;eAC7D,OAAO;cACR,OAAO;cACP,OAAO;2CA0DpB,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}