@mindlogic-ai/logician-ui 4.0.0-alpha.9 → 5.0.0-alpha.0

package/dist/components/CodeTabs/CodeTabs.styles.mjs

@@ -0,0 +1,30 @@
+"use client";
+/**
+ * The CodeTabs chrome (tab bar, copy button) and the code body under it.
+ *
+ * The code is highlighted with Shiki's `github-dark`, whose token colours are
+ * written for a dark ground in BOTH app modes, so the surface must stay dark in
+ * both too. `bg.inverse` does not: it is `tooltip.bg`, near-black in light but
+ * light sand in dark, and the `fg.muted` text on it flipped as well (~1.4:1 in
+ * light, ~1.1:1 in dark).
+ *
+ * `action.*` is the one role pair that is dark in every mode (BAZE ink:
+ * #252525 light / #38332E dark, `action.fg` 12.5–13.2:1 on it, high contrast
+ * included), so the chrome reads it. The unselected label is `action.fg` at
+ * 70% — ≥ 7.0:1 on `action.bg` and ≥ 5.6:1 on `action.bgHover`, both schemes,
+ * all four modes.
+ *
+ * Borrowed rather than owned: `action.*` is the Run button's role. A dedicated
+ * `code.*` role family (bg / fg / fgMuted / bgHover) would be the clean home.
+ */
+const CODE_CHROME = {
+    bg: 'action.bg',
+    bgHover: 'action.bgHover',
+    bgActive: 'action.bgActive',
+    fg: 'action.fg',
+    fgMuted: 'action.fg/70',
+    divider: 'action.fg/15',
+};
+
+export { CODE_CHROME };
+//# sourceMappingURL=CodeTabs.styles.mjs.map

package/dist/components/CodeTabs/CodeTabs.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeTabs.styles.mjs","sources":["../../../src/components/CodeTabs/CodeTabs.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;AAiBG;AACI,MAAM,WAAW,GAAG;AACzB,IAAA,EAAE,EAAE,WAAW;AACf,IAAA,OAAO,EAAE,gBAAgB;AACzB,IAAA,QAAQ,EAAE,iBAAiB;AAC3B,IAAA,EAAE,EAAE,WAAW;AACf,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,OAAO,EAAE,cAAc;;;;;"}

package/dist/components/CodeTabs/CopyButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../../../src/components/CodeTabs/CopyButton.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,UAAU,GAAI,kBAAkB,eAAe,4CAmD3D,CAAC"}
+{"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../../../src/components/CodeTabs/CopyButton.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,UAAU,GAAI,kBAAkB,eAAe,4CAoD3D,CAAC"}

package/dist/components/CodeTabs/CopyButton.js

@@ -8,6 +8,7 @@ var index = require('../Icon/index.js');
 var IconButton = require('../IconButton/IconButton.js');
 require('../IconButton/IconButton.styles.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
+var CodeTabs_styles = require('./CodeTabs.styles.js');
 
 const CopyButton = ({ onCopy, code }) => {
     const translate = useTranslate.useTranslate();
@@ -33,10 +34,12 @@ const CopyButton = ({ onCopy, code }) => {
             setIsTooltipOpen(undefined);
         }, 1500);
     };
-    return (jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltipText, placement: "top", open: isTooltipOpen, children: jsxRuntime.jsx(IconButton.IconButton, { "aria-label": "Copy", borderRadius: "full", size: "sm", colorPalette: "neutral", variant: "ghost", color: "fg.muted", _hover: {
-                bgColor: 'whiteAlpha.400',
+    return (jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltipText, placement: "top", open: isTooltipOpen, children: jsxRuntime.jsx(IconButton.IconButton, { "aria-label": "Copy", borderRadius: "full", size: "sm", variant: "ghost", color: CodeTabs_styles.CODE_CHROME.fgMuted, _hover: {
+                bgColor: CodeTabs_styles.CODE_CHROME.bgHover,
+                color: CodeTabs_styles.CODE_CHROME.fg,
             }, _active: {
-                bgColor: 'whiteAlpha.400',
+                bgColor: CodeTabs_styles.CODE_CHROME.bgActive,
+                color: CodeTabs_styles.CODE_CHROME.fg,
             }, onClick: handleCopyClick, children: jsxRuntime.jsx(index.FaRegCopy, { boxSize: "xs" }) }) }));
 };
 

package/dist/components/CodeTabs/CopyButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.js","sources":["../../../src/components/CodeTabs/CopyButton.tsx"],"sourcesContent":[null],"names":["useTranslate","useState","_jsx","Tooltip","IconButton","FaRegCopy"],"mappings":";;;;;;;;;;;AAaO,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAmB,KAAI;AAC9D,IAAA,MAAM,SAAS,GAAGA,yBAAY,EAAE;AAChC,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGC,cAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IACjE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGA,cAAQ,CAChD,SAAS,CACV;AAED,IAAA,MAAM,eAAe,GAAG,YAAW;AACjC,QAAA,IAAI;YACF,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;QAC3C;AAAE,QAAA,MAAM;YACN,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC;AACnD,YAAA,QAAQ,CAAC,KAAK,GAAG,IAAI;AACrB,YAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;YACnC,QAAQ,CAAC,MAAM,EAAE;AACjB,YAAA,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC;AAC5B,YAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;QACrC;QAEA,MAAM,CAAC,IAAI,CAAC;AAEZ,QAAA,cAAc,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QACnC,gBAAgB,CAAC,IAAI,CAAC;QAEtB,UAAU,CAAC,MAAK;AACd,YAAA,cAAc,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;YACjC,gBAAgB,CAAC,SAAS,CAAC;QAC7B,CAAC,EAAE,IAAI,CAAC;AACV,IAAA,CAAC;AAED,IAAA,QACEC,cAAA,CAACC,eAAO,IAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAC,KAAK,EAAC,IAAI,EAAE,aAAa,YAChED,cAAA,CAACE,qBAAU,kBACE,MAAM,EACjB,YAAY,EAAC,MAAM,EACnB,IAAI,EAAC,IAAI,EACT,YAAY,EAAC,SAAS,EACtB,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,UAAU,EAChB,MAAM,EAAE;AACN,gBAAA,OAAO,EAAE,gBAAgB;AAC1B,aAAA,EACD,OAAO,EAAE;AACP,gBAAA,OAAO,EAAE,gBAAgB;AAC1B,aAAA,EACD,OAAO,EAAE,eAAe,EAAA,QAAA,EAExBF,eAACG,eAAS,EAAA,EAAC,OAAO,EAAC,IAAI,EAAA,CAAG,EAAA,CACf,EAAA,CACL;AAEd;;;;"}
+{"version":3,"file":"CopyButton.js","sources":["../../../src/components/CodeTabs/CopyButton.tsx"],"sourcesContent":[null],"names":["useTranslate","useState","_jsx","Tooltip","IconButton","CODE_CHROME","FaRegCopy"],"mappings":";;;;;;;;;;;;AAcO,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAmB,KAAI;AAC9D,IAAA,MAAM,SAAS,GAAGA,yBAAY,EAAE;AAChC,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGC,cAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IACjE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGA,cAAQ,CAChD,SAAS,CACV;AAED,IAAA,MAAM,eAAe,GAAG,YAAW;AACjC,QAAA,IAAI;YACF,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;QAC3C;AAAE,QAAA,MAAM;YACN,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC;AACnD,YAAA,QAAQ,CAAC,KAAK,GAAG,IAAI;AACrB,YAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;YACnC,QAAQ,CAAC,MAAM,EAAE;AACjB,YAAA,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC;AAC5B,YAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;QACrC;QAEA,MAAM,CAAC,IAAI,CAAC;AAEZ,QAAA,cAAc,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QACnC,gBAAgB,CAAC,IAAI,CAAC;QAEtB,UAAU,CAAC,MAAK;AACd,YAAA,cAAc,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;YACjC,gBAAgB,CAAC,SAAS,CAAC;QAC7B,CAAC,EAAE,IAAI,CAAC;AACV,IAAA,CAAC;AAED,IAAA,QACEC,cAAA,CAACC,eAAO,IAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAC,KAAK,EAAC,IAAI,EAAE,aAAa,EAAA,QAAA,EAChED,cAAA,CAACE,qBAAU,EAAA,EAAA,YAAA,EACE,MAAM,EACjB,YAAY,EAAC,MAAM,EACnB,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,OAAO,EACf,KAAK,EAAEC,2BAAW,CAAC,OAAO,EAC1B,MAAM,EAAE;gBACN,OAAO,EAAEA,2BAAW,CAAC,OAAO;gBAC5B,KAAK,EAAEA,2BAAW,CAAC,EAAE;AACtB,aAAA,EACD,OAAO,EAAE;gBACP,OAAO,EAAEA,2BAAW,CAAC,QAAQ;gBAC7B,KAAK,EAAEA,2BAAW,CAAC,EAAE;AACtB,aAAA,EACD,OAAO,EAAE,eAAe,EAAA,QAAA,EAExBH,eAACI,eAAS,EAAA,EAAC,OAAO,EAAC,IAAI,EAAA,CAAG,EAAA,CACf,EAAA,CACL;AAEd;;;;"}

package/dist/components/CodeTabs/CopyButton.mjs

@@ -6,6 +6,7 @@ import { FaRegCopy } from '../Icon/index.mjs';
 import { IconButton } from '../IconButton/IconButton.mjs';
 import '../IconButton/IconButton.styles.mjs';
 import { Tooltip } from '../Tooltip/Tooltip.mjs';
+import { CODE_CHROME } from './CodeTabs.styles.mjs';
 
 const CopyButton = ({ onCopy, code }) => {
     const translate = useTranslate();
@@ -31,10 +32,12 @@ const CopyButton = ({ onCopy, code }) => {
             setIsTooltipOpen(undefined);
         }, 1500);
     };
-    return (jsx(Tooltip, { content: tooltipText, placement: "top", open: isTooltipOpen, children: jsx(IconButton, { "aria-label": "Copy", borderRadius: "full", size: "sm", colorPalette: "neutral", variant: "ghost", color: "fg.muted", _hover: {
-                bgColor: 'whiteAlpha.400',
+    return (jsx(Tooltip, { content: tooltipText, placement: "top", open: isTooltipOpen, children: jsx(IconButton, { "aria-label": "Copy", borderRadius: "full", size: "sm", variant: "ghost", color: CODE_CHROME.fgMuted, _hover: {
+                bgColor: CODE_CHROME.bgHover,
+                color: CODE_CHROME.fg,
             }, _active: {
-                bgColor: 'whiteAlpha.400',
+                bgColor: CODE_CHROME.bgActive,
+                color: CODE_CHROME.fg,
             }, onClick: handleCopyClick, children: jsx(FaRegCopy, { boxSize: "xs" }) }) }));
 };
 

package/dist/components/CodeTabs/CopyButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.mjs","sources":["../../../src/components/CodeTabs/CopyButton.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;;;AAaO,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAmB,KAAI;AAC9D,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAChC,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IACjE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAChD,SAAS,CACV;AAED,IAAA,MAAM,eAAe,GAAG,YAAW;AACjC,QAAA,IAAI;YACF,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;QAC3C;AAAE,QAAA,MAAM;YACN,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC;AACnD,YAAA,QAAQ,CAAC,KAAK,GAAG,IAAI;AACrB,YAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;YACnC,QAAQ,CAAC,MAAM,EAAE;AACjB,YAAA,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC;AAC5B,YAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;QACrC;QAEA,MAAM,CAAC,IAAI,CAAC;AAEZ,QAAA,cAAc,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QACnC,gBAAgB,CAAC,IAAI,CAAC;QAEtB,UAAU,CAAC,MAAK;AACd,YAAA,cAAc,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;YACjC,gBAAgB,CAAC,SAAS,CAAC;QAC7B,CAAC,EAAE,IAAI,CAAC;AACV,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAC,OAAO,IAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAC,KAAK,EAAC,IAAI,EAAE,aAAa,YAChEA,GAAA,CAAC,UAAU,kBACE,MAAM,EACjB,YAAY,EAAC,MAAM,EACnB,IAAI,EAAC,IAAI,EACT,YAAY,EAAC,SAAS,EACtB,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,UAAU,EAChB,MAAM,EAAE;AACN,gBAAA,OAAO,EAAE,gBAAgB;AAC1B,aAAA,EACD,OAAO,EAAE;AACP,gBAAA,OAAO,EAAE,gBAAgB;AAC1B,aAAA,EACD,OAAO,EAAE,eAAe,EAAA,QAAA,EAExBA,IAAC,SAAS,EAAA,EAAC,OAAO,EAAC,IAAI,EAAA,CAAG,EAAA,CACf,EAAA,CACL;AAEd;;;;"}
+{"version":3,"file":"CopyButton.mjs","sources":["../../../src/components/CodeTabs/CopyButton.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;;;;AAcO,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAmB,KAAI;AAC9D,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAChC,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IACjE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAChD,SAAS,CACV;AAED,IAAA,MAAM,eAAe,GAAG,YAAW;AACjC,QAAA,IAAI;YACF,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;QAC3C;AAAE,QAAA,MAAM;YACN,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC;AACnD,YAAA,QAAQ,CAAC,KAAK,GAAG,IAAI;AACrB,YAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;YACnC,QAAQ,CAAC,MAAM,EAAE;AACjB,YAAA,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC;AAC5B,YAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;QACrC;QAEA,MAAM,CAAC,IAAI,CAAC;AAEZ,QAAA,cAAc,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QACnC,gBAAgB,CAAC,IAAI,CAAC;QAEtB,UAAU,CAAC,MAAK;AACd,YAAA,cAAc,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;YACjC,gBAAgB,CAAC,SAAS,CAAC;QAC7B,CAAC,EAAE,IAAI,CAAC;AACV,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAC,OAAO,IAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAC,KAAK,EAAC,IAAI,EAAE,aAAa,EAAA,QAAA,EAChEA,GAAA,CAAC,UAAU,EAAA,EAAA,YAAA,EACE,MAAM,EACjB,YAAY,EAAC,MAAM,EACnB,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,OAAO,EACf,KAAK,EAAE,WAAW,CAAC,OAAO,EAC1B,MAAM,EAAE;gBACN,OAAO,EAAE,WAAW,CAAC,OAAO;gBAC5B,KAAK,EAAE,WAAW,CAAC,EAAE;AACtB,aAAA,EACD,OAAO,EAAE;gBACP,OAAO,EAAE,WAAW,CAAC,QAAQ;gBAC7B,KAAK,EAAE,WAAW,CAAC,EAAE;AACtB,aAAA,EACD,OAAO,EAAE,eAAe,EAAA,QAAA,EAExBA,IAAC,SAAS,EAAA,EAAC,OAAO,EAAC,IAAI,EAAA,CAAG,EAAA,CACf,EAAA,CACL;AAEd;;;;"}

package/dist/components/Collapsible/CollapsibleContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleContent.d.ts","sourceRoot":"","sources":["../../../src/components/Collapsible/CollapsibleContent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAIpE,eAAO,MAAM,kBAAkB,2HAK7B,CAAC"}
+{"version":3,"file":"CollapsibleContent.d.ts","sourceRoot":"","sources":["../../../src/components/Collapsible/CollapsibleContent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAIpE,eAAO,MAAM,kBAAkB,2HAiB7B,CAAC"}

package/dist/components/Collapsible/CollapsibleContent.js

@@ -6,7 +6,11 @@ var React = require('react');
 var react = require('@chakra-ui/react');
 
 const CollapsibleContent = React.forwardRef((props, ref) => {
-    return jsxRuntime.jsx(react.Collapsible.Content, { ref: ref, px: 4, py: 3, ...props });
+    // The one presence part that does not fade or scale: it interpolates the
+    // `--height` Ark measures. That is exactly why `presence` declares no
+    // `animation-name` — the recipe's `expand-height` / `collapse-height` survive
+    // and only the clock changes.
+    return (jsxRuntime.jsx(react.Collapsible.Content, { ref: ref, px: 4, py: 3, animationStyle: "presence", ...props }));
 });
 CollapsibleContent.displayName = 'CollapsibleContent';
 

package/dist/components/Collapsible/CollapsibleContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleContent.js","sources":["../../../src/components/Collapsible/CollapsibleContent.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","ChakraCollapsible"],"mappings":";;;;;;;AAKO,MAAM,kBAAkB,GAAGA,gBAAU,CAG1C,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,OAAOC,eAACC,iBAAiB,CAAC,OAAO,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAA,GAAM,KAAK,GAAI;AACzE,CAAC;AACD,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}
+{"version":3,"file":"CollapsibleContent.js","sources":["../../../src/components/Collapsible/CollapsibleContent.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","ChakraCollapsible"],"mappings":";;;;;;;AAKO,MAAM,kBAAkB,GAAGA,gBAAU,CAG1C,CAAC,KAAK,EAAE,GAAG,KAAI;;;;;IAKf,QACEC,cAAA,CAACC,iBAAiB,CAAC,OAAO,IACxB,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,CAAC,EACL,cAAc,EAAC,UAAU,EAAA,GACrB,KAAK,EAAA,CACT;AAEN,CAAC;AACD,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}

package/dist/components/Collapsible/CollapsibleContent.mjs

@@ -4,7 +4,11 @@ import { forwardRef } from 'react';
 import { Collapsible } from '@chakra-ui/react';
 
 const CollapsibleContent = forwardRef((props, ref) => {
-    return jsx(Collapsible.Content, { ref: ref, px: 4, py: 3, ...props });
+    // The one presence part that does not fade or scale: it interpolates the
+    // `--height` Ark measures. That is exactly why `presence` declares no
+    // `animation-name` — the recipe's `expand-height` / `collapse-height` survive
+    // and only the clock changes.
+    return (jsx(Collapsible.Content, { ref: ref, px: 4, py: 3, animationStyle: "presence", ...props }));
 });
 CollapsibleContent.displayName = 'CollapsibleContent';
 

package/dist/components/Collapsible/CollapsibleContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleContent.mjs","sources":["../../../src/components/Collapsible/CollapsibleContent.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraCollapsible"],"mappings":";;;;;AAKO,MAAM,kBAAkB,GAAG,UAAU,CAG1C,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,OAAOA,IAACC,WAAiB,CAAC,OAAO,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAA,GAAM,KAAK,GAAI;AACzE,CAAC;AACD,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}
+{"version":3,"file":"CollapsibleContent.mjs","sources":["../../../src/components/Collapsible/CollapsibleContent.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraCollapsible"],"mappings":";;;;;AAKO,MAAM,kBAAkB,GAAG,UAAU,CAG1C,CAAC,KAAK,EAAE,GAAG,KAAI;;;;;IAKf,QACEA,GAAA,CAACC,WAAiB,CAAC,OAAO,IACxB,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,CAAC,EACL,cAAc,EAAC,UAAU,EAAA,GACrB,KAAK,EAAA,CACT;AAEN,CAAC;AACD,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}

package/dist/components/ColorMode/ColorModeToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorModeToggle.d.ts","sourceRoot":"","sources":["../../../src/components/ColorMode/ColorModeToggle.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAIhF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,eAAe,EACf,UAAU,CACX;CAAG;AAEJ;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgB1D,CAAC"}
+{"version":3,"file":"ColorModeToggle.d.ts","sourceRoot":"","sources":["../../../src/components/ColorMode/ColorModeToggle.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAIhF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,eAAe,EACf,UAAU,CACX;CAAG;AAEJ;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA8C1D,CAAC"}

package/dist/components/ColorMode/ColorModeToggle.js

@@ -3,7 +3,8 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var lu = require('react-icons/lu');
+var react = require('@chakra-ui/react');
+var index = require('../Icon/index.js');
 var IconButton = require('../IconButton/IconButton.js');
 require('../IconButton/IconButton.styles.js');
 var useColorMode = require('./useColorMode.js');
@@ -26,7 +27,8 @@ const ColorModeToggle = ({ 'aria-label': ariaLabel = 'Toggle color mode', ...res
     React.useEffect(() => {
         setMounted(true);
     }, []);
-    return (jsxRuntime.jsx(IconButton.IconButton, { "aria-label": ariaLabel, onClick: toggleColorMode, ...rest, children: mounted && colorMode === 'dark' ? jsxRuntime.jsx(lu.LuSun, {}) : jsxRuntime.jsx(lu.LuMoon, {}) }));
+    const isDark = mounted && colorMode === 'dark';
+    return (jsxRuntime.jsx(IconButton.IconButton, { "aria-label": ariaLabel, onClick: toggleColorMode, ...rest, children: jsxRuntime.jsxs(react.Box, { display: "grid", placeItems: "center", children: [jsxRuntime.jsx(react.Box, { gridArea: "1 / 1", display: "grid", placeItems: "center", opacity: isDark ? 1 : 0, transform: isDark ? undefined : 'rotate(-90deg) scale(0.5)', animationStyle: "spring", transitionProperty: "opacity, transform", children: jsxRuntime.jsx(index.SunIcon, {}) }), jsxRuntime.jsx(react.Box, { gridArea: "1 / 1", display: "grid", placeItems: "center", opacity: isDark ? 0 : 1, transform: isDark ? 'rotate(90deg) scale(0.5)' : undefined, animationStyle: "spring", transitionProperty: "opacity, transform", children: jsxRuntime.jsx(index.MoonIcon, {}) })] }) }));
 };
 ColorModeToggle.displayName = 'ColorModeToggle';
 

package/dist/components/ColorMode/ColorModeToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorModeToggle.js","sources":["../../../src/components/ColorMode/ColorModeToggle.tsx"],"sourcesContent":[null],"names":["useColorMode","useState","useEffect","_jsx","IconButton","LuSun","LuMoon"],"mappings":";;;;;;;;;;AAcA;;;;;;;;;;;AAWG;AACI,MAAM,eAAe,GAAmC,CAAC,EAC9D,YAAY,EAAE,SAAS,GAAG,mBAAmB,EAC7C,GAAG,IAAI,EACR,KAAI;IACH,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,GAAGA,yBAAY,EAAE;IACrD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;IAE7CC,eAAS,CAAC,MAAK;QACb,UAAU,CAAC,IAAI,CAAC;IAClB,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACEC,cAAA,CAACC,qBAAU,EAAA,EAAA,YAAA,EAAa,SAAS,EAAE,OAAO,EAAE,eAAe,EAAA,GAAM,IAAI,EAAA,QAAA,EAClE,OAAO,IAAI,SAAS,KAAK,MAAM,GAAGD,cAAA,CAACE,QAAK,EAAA,EAAA,CAAG,GAAGF,cAAA,CAACG,SAAM,EAAA,EAAA,CAAG,EAAA,CAC9C;AAEjB;AAEA,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"ColorModeToggle.js","sources":["../../../src/components/ColorMode/ColorModeToggle.tsx"],"sourcesContent":[null],"names":["useColorMode","useState","useEffect","_jsx","IconButton","_jsxs","Box","SunIcon","MoonIcon"],"mappings":";;;;;;;;;;;AAeA;;;;;;;;;;;AAWG;AACI,MAAM,eAAe,GAAmC,CAAC,EAC9D,YAAY,EAAE,SAAS,GAAG,mBAAmB,EAC7C,GAAG,IAAI,EACR,KAAI;IACH,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,GAAGA,yBAAY,EAAE;IACrD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;IAE7CC,eAAS,CAAC,MAAK;QACb,UAAU,CAAC,IAAI,CAAC;IAClB,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,MAAM,GAAG,OAAO,IAAI,SAAS,KAAK,MAAM;AAE9C,IAAA,QACEC,cAAA,CAACC,qBAAU,EAAA,EAAA,YAAA,EAAa,SAAS,EAAE,OAAO,EAAE,eAAe,EAAA,GAAM,IAAI,EAAA,QAAA,EAMnEC,eAAA,CAACC,SAAG,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAA,QAAA,EAAA,CACrCH,cAAA,CAACG,SAAG,EAAA,EACF,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,QAAQ,EACnB,OAAO,EAAE,MAAM,GAAG,CAAC,GAAG,CAAC,EACvB,SAAS,EAAE,MAAM,GAAG,SAAS,GAAG,2BAA2B,EAC3D,cAAc,EAAC,QAAQ,EACvB,kBAAkB,EAAC,oBAAoB,EAAA,QAAA,EAEvCH,cAAA,CAACI,aAAO,EAAA,EAAA,CAAG,EAAA,CACP,EACNJ,cAAA,CAACG,SAAG,EAAA,EACF,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,QAAQ,EACnB,OAAO,EAAE,MAAM,GAAG,CAAC,GAAG,CAAC,EACvB,SAAS,EAAE,MAAM,GAAG,0BAA0B,GAAG,SAAS,EAC1D,cAAc,EAAC,QAAQ,EACvB,kBAAkB,EAAC,oBAAoB,EAAA,QAAA,EAEvCH,cAAA,CAACK,cAAQ,EAAA,EAAA,CAAG,EAAA,CACR,CAAA,EAAA,CACF,EAAA,CACK;AAEjB;AAEA,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/dist/components/ColorMode/ColorModeToggle.mjs

@@ -1,7 +1,8 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
-import { LuSun, LuMoon } from 'react-icons/lu';
+import { Box } from '@chakra-ui/react';
+import { SunIcon, MoonIcon } from '../Icon/index.mjs';
 import { IconButton } from '../IconButton/IconButton.mjs';
 import '../IconButton/IconButton.styles.mjs';
 import { useColorMode } from './useColorMode.mjs';
@@ -24,7 +25,8 @@ const ColorModeToggle = ({ 'aria-label': ariaLabel = 'Toggle color mode', ...res
     useEffect(() => {
         setMounted(true);
     }, []);
-    return (jsx(IconButton, { "aria-label": ariaLabel, onClick: toggleColorMode, ...rest, children: mounted && colorMode === 'dark' ? jsx(LuSun, {}) : jsx(LuMoon, {}) }));
+    const isDark = mounted && colorMode === 'dark';
+    return (jsx(IconButton, { "aria-label": ariaLabel, onClick: toggleColorMode, ...rest, children: jsxs(Box, { display: "grid", placeItems: "center", children: [jsx(Box, { gridArea: "1 / 1", display: "grid", placeItems: "center", opacity: isDark ? 1 : 0, transform: isDark ? undefined : 'rotate(-90deg) scale(0.5)', animationStyle: "spring", transitionProperty: "opacity, transform", children: jsx(SunIcon, {}) }), jsx(Box, { gridArea: "1 / 1", display: "grid", placeItems: "center", opacity: isDark ? 0 : 1, transform: isDark ? 'rotate(90deg) scale(0.5)' : undefined, animationStyle: "spring", transitionProperty: "opacity, transform", children: jsx(MoonIcon, {}) })] }) }));
 };
 ColorModeToggle.displayName = 'ColorModeToggle';
 

package/dist/components/ColorMode/ColorModeToggle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorModeToggle.mjs","sources":["../../../src/components/ColorMode/ColorModeToggle.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;;AAcA;;;;;;;;;;;AAWG;AACI,MAAM,eAAe,GAAmC,CAAC,EAC9D,YAAY,EAAE,SAAS,GAAG,mBAAmB,EAC7C,GAAG,IAAI,EACR,KAAI;IACH,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,YAAY,EAAE;IACrD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE7C,SAAS,CAAC,MAAK;QACb,UAAU,CAAC,IAAI,CAAC;IAClB,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACEA,GAAA,CAAC,UAAU,EAAA,EAAA,YAAA,EAAa,SAAS,EAAE,OAAO,EAAE,eAAe,EAAA,GAAM,IAAI,EAAA,QAAA,EAClE,OAAO,IAAI,SAAS,KAAK,MAAM,GAAGA,GAAA,CAAC,KAAK,EAAA,EAAA,CAAG,GAAGA,GAAA,CAAC,MAAM,EAAA,EAAA,CAAG,EAAA,CAC9C;AAEjB;AAEA,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"ColorModeToggle.mjs","sources":["../../../src/components/ColorMode/ColorModeToggle.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;AAeA;;;;;;;;;;;AAWG;AACI,MAAM,eAAe,GAAmC,CAAC,EAC9D,YAAY,EAAE,SAAS,GAAG,mBAAmB,EAC7C,GAAG,IAAI,EACR,KAAI;IACH,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,YAAY,EAAE;IACrD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE7C,SAAS,CAAC,MAAK;QACb,UAAU,CAAC,IAAI,CAAC;IAClB,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,MAAM,GAAG,OAAO,IAAI,SAAS,KAAK,MAAM;AAE9C,IAAA,QACEA,GAAA,CAAC,UAAU,EAAA,EAAA,YAAA,EAAa,SAAS,EAAE,OAAO,EAAE,eAAe,EAAA,GAAM,IAAI,EAAA,QAAA,EAMnEC,IAAA,CAAC,GAAG,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAA,QAAA,EAAA,CACrCD,GAAA,CAAC,GAAG,EAAA,EACF,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,QAAQ,EACnB,OAAO,EAAE,MAAM,GAAG,CAAC,GAAG,CAAC,EACvB,SAAS,EAAE,MAAM,GAAG,SAAS,GAAG,2BAA2B,EAC3D,cAAc,EAAC,QAAQ,EACvB,kBAAkB,EAAC,oBAAoB,EAAA,QAAA,EAEvCA,GAAA,CAAC,OAAO,EAAA,EAAA,CAAG,EAAA,CACP,EACNA,GAAA,CAAC,GAAG,EAAA,EACF,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,QAAQ,EACnB,OAAO,EAAE,MAAM,GAAG,CAAC,GAAG,CAAC,EACvB,SAAS,EAAE,MAAM,GAAG,0BAA0B,GAAG,SAAS,EAC1D,cAAc,EAAC,QAAQ,EACvB,kBAAkB,EAAC,oBAAoB,EAAA,QAAA,EAEvCA,GAAA,CAAC,QAAQ,EAAA,EAAA,CAAG,EAAA,CACR,CAAA,EAAA,CACF,EAAA,CACK;AAEjB;AAEA,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/dist/components/Confetti/Confetti.d.ts

@@ -0,0 +1,47 @@
+import { ConfettiProps } from './Confetti.types';
+/**
+ * A one-shot celebratory burst — the thing that plays when a reward lands or a
+ * purchase completes.
+ *
+ * Pure CSS, one class, one keyframe. Fifty pieces share `confetti-fall` and
+ * differ only in the three custom properties it reads, so the burst costs one
+ * style rule rather than fifty.
+ *
+ * **The token sets the pace; each piece scales it.** Where a piece starts, how
+ * far it drifts, which way it tumbles, what colour it is and *how fast it
+ * falls* are all per-piece — equal fall speed is the one thing debris never
+ * has, and fifty pieces at an identical rate read as one sheet. But the rate is
+ * a bounded multiple of `motion.celebrate.fall` rather than an open interval,
+ * so the burst still has a computable end. FactChat's version uses
+ * `2 + Math.random()` seconds with no ceiling, which is the part that makes a
+ * burst impossible to schedule anything after.
+ *
+ * The delay is random too, not indexed. An earlier pass here reused the
+ * `stagger` step, which was a mistake worth naming: a list has an order the eye
+ * follows, and a delay that grows with the index is a *rhythm*. Confetti has no
+ * order, so the same delay reads as a wave sweeping across the container —
+ * fifty pieces queueing rather than bursting.
+ *
+ * Under reduced motion the pieces mount and stay invisible rather than being
+ * branched away in JS — a burst carries no information, so removing it removes
+ * nothing, and doing it in CSS keeps the decision on the same media query as
+ * every other preset instead of on a hook that has to guess before hydration.
+ *
+ * **The default colours are decorative only** (`confettiColors.ts`): coral,
+ * beige and the system hues that mean nothing — red, yellow, green and blue are
+ * left out because they are the danger, warning, success and info colours, and
+ * raining error red over "payment complete" says something the screen does not.
+ * They are light-mode hex and do not flip for dark mode. `colors` is a prop for
+ * an app that needs its own.
+ *
+ * **Takes no children — it is an overlay, not a wrapper.** It renders absolutely
+ * against the nearest positioned ancestor, which is therefore the stage: give
+ * that element `position: relative`, or the burst resolves against the page and
+ * rains over everything.
+ *
+ * ```tsx
+ * {justPurchased && <Confetti />}
+ * ```
+ */
+export declare const Confetti: import("react").ForwardRefExoticComponent<ConfettiProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Confetti.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Confetti.d.ts","sourceRoot":"","sources":["../../../src/components/Confetti/Confetti.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAkBjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAO,MAAM,QAAQ,0GA6EpB,CAAC"}

package/dist/components/Confetti/Confetti.js

@@ -0,0 +1,115 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@chakra-ui/react');
+var motion = require('../../theme/motion.js');
+var Confetti_styles = require('./Confetti.styles.js');
+var confettiColors = require('./confettiColors.js');
+
+/**
+ * A seeded generator, so one burst is stable across re-renders.
+ *
+ * `Math.random()` per render would re-scatter every piece whenever the parent
+ * updated — and a parent that is showing a celebration is usually updating,
+ * because something just finished.
+ */
+const scatter = (seed) => {
+    let s = seed || 1;
+    return () => {
+        s = (s * 1664525 + 1013904223) % 4294967296;
+        return s / 4294967296;
+    };
+};
+/**
+ * A one-shot celebratory burst — the thing that plays when a reward lands or a
+ * purchase completes.
+ *
+ * Pure CSS, one class, one keyframe. Fifty pieces share `confetti-fall` and
+ * differ only in the three custom properties it reads, so the burst costs one
+ * style rule rather than fifty.
+ *
+ * **The token sets the pace; each piece scales it.** Where a piece starts, how
+ * far it drifts, which way it tumbles, what colour it is and *how fast it
+ * falls* are all per-piece — equal fall speed is the one thing debris never
+ * has, and fifty pieces at an identical rate read as one sheet. But the rate is
+ * a bounded multiple of `motion.celebrate.fall` rather than an open interval,
+ * so the burst still has a computable end. FactChat's version uses
+ * `2 + Math.random()` seconds with no ceiling, which is the part that makes a
+ * burst impossible to schedule anything after.
+ *
+ * The delay is random too, not indexed. An earlier pass here reused the
+ * `stagger` step, which was a mistake worth naming: a list has an order the eye
+ * follows, and a delay that grows with the index is a *rhythm*. Confetti has no
+ * order, so the same delay reads as a wave sweeping across the container —
+ * fifty pieces queueing rather than bursting.
+ *
+ * Under reduced motion the pieces mount and stay invisible rather than being
+ * branched away in JS — a burst carries no information, so removing it removes
+ * nothing, and doing it in CSS keeps the decision on the same media query as
+ * every other preset instead of on a hook that has to guess before hydration.
+ *
+ * **The default colours are decorative only** (`confettiColors.ts`): coral,
+ * beige and the system hues that mean nothing — red, yellow, green and blue are
+ * left out because they are the danger, warning, success and info colours, and
+ * raining error red over "payment complete" says something the screen does not.
+ * They are light-mode hex and do not flip for dark mode. `colors` is a prop for
+ * an app that needs its own.
+ *
+ * **Takes no children — it is an overlay, not a wrapper.** It renders absolutely
+ * against the nearest positioned ancestor, which is therefore the stage: give
+ * that element `position: relative`, or the burst resolves against the page and
+ * rains over everything.
+ *
+ * ```tsx
+ * {justPurchased && <Confetti />}
+ * ```
+ */
+const Confetti = React.forwardRef(({ pieceCount = 50, colors = confettiColors.DEFAULT_CONFETTI_COLORS, seed = 1, ...rest }, ref) => {
+    const pieces = React.useMemo(() => {
+        const next = scatter(seed);
+        return Array.from({ length: pieceCount }, (_, i) => ({
+            id: i,
+            left: `${next() * 100}%`,
+            color: colors[Math.floor(next() * colors.length)],
+            // ± half a container width of lateral travel.
+            drift: `${Math.round(next() * 100 - 50)}px`,
+            // Two full turns, and only the direction is random. A magnitude that
+            // varies down to near zero gives some pieces no tumble at all, which is
+            // the difference between debris and a falling rectangle.
+            spin: next() < 0.5 ? '-720deg' : '720deg',
+            // Square, near enough. The first version varied width 6–10 and height
+            // 8–14 independently, which produced pieces 2.3× taller than wide —
+            // and with `radii.xs` on top of that (4px, because this theme
+            // overrides Chakra's 2px for buttons and cards) a 6px-wide piece is
+            // two-thirds round. A rounded oblong tumbling end over end is not a
+            // fragment of paper; the team's word for it was 애벌레, caterpillar.
+            width: `${8 + Math.round(next() * 4)}px`,
+            height: `${8 + Math.round(next() * 5)}px`,
+            // 0.85–1.3× the token. Anchored to the scale, and with a ceiling: the
+            // whole burst is over by `fall × 1.3 + base`, which is knowable without
+            // running it.
+            rate: (0.85 + next() * 0.45).toFixed(2),
+            // Random within `motion.base`, not stepped by index — see the note
+            // above about why a stagger is wrong here. 300ms is wide enough that no
+            // two pieces launch together and narrow enough that the burst still
+            // reads as one event.
+            delay: `${Math.round(next() * motion.MOTION_DURATION_MS.base)}ms`,
+        }));
+    }, [pieceCount, colors, seed]);
+    return (jsxRuntime.jsx(react.Box, { ref: ref, position: "absolute", inset: "0", overflow: "hidden", pointerEvents: "none", "aria-hidden": true, 
+        // Establishes the containing block the keyframe's `cqh` resolves
+        // against. Without it `110cqh` falls back to the small viewport and
+        // every piece leaves the screen in the first few frames.
+        containerType: "size", ...rest, children: pieces.map((p) => (jsxRuntime.jsx(react.Box, { css: Confetti_styles.confettiPiece, bg: p.color, left: p.left, w: p.width, h: p.height, style: {
+                '--confetti-drift': p.drift,
+                '--confetti-spin': p.spin,
+                '--confetti-rate': p.rate,
+                animationDelay: p.delay,
+            } }, p.id))) }));
+});
+Confetti.displayName = 'Confetti';
+
+exports.Confetti = Confetti;
+//# sourceMappingURL=Confetti.js.map

package/dist/components/Confetti/Confetti.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confetti.js","sources":["../../../src/components/Confetti/Confetti.tsx"],"sourcesContent":[null],"names":["forwardRef","DEFAULT_CONFETTI_COLORS","useMemo","MOTION_DURATION_MS","_jsx","Box","confettiPiece"],"mappings":"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"}

package/dist/components/Confetti/Confetti.mjs

@@ -0,0 +1,113 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useMemo } from 'react';
+import { Box } from '@chakra-ui/react';
+import { MOTION_DURATION_MS } from '../../theme/motion.mjs';
+import { confettiPiece } from './Confetti.styles.mjs';
+import { DEFAULT_CONFETTI_COLORS } from './confettiColors.mjs';
+
+/**
+ * A seeded generator, so one burst is stable across re-renders.
+ *
+ * `Math.random()` per render would re-scatter every piece whenever the parent
+ * updated — and a parent that is showing a celebration is usually updating,
+ * because something just finished.
+ */
+const scatter = (seed) => {
+    let s = seed || 1;
+    return () => {
+        s = (s * 1664525 + 1013904223) % 4294967296;
+        return s / 4294967296;
+    };
+};
+/**
+ * A one-shot celebratory burst — the thing that plays when a reward lands or a
+ * purchase completes.
+ *
+ * Pure CSS, one class, one keyframe. Fifty pieces share `confetti-fall` and
+ * differ only in the three custom properties it reads, so the burst costs one
+ * style rule rather than fifty.
+ *
+ * **The token sets the pace; each piece scales it.** Where a piece starts, how
+ * far it drifts, which way it tumbles, what colour it is and *how fast it
+ * falls* are all per-piece — equal fall speed is the one thing debris never
+ * has, and fifty pieces at an identical rate read as one sheet. But the rate is
+ * a bounded multiple of `motion.celebrate.fall` rather than an open interval,
+ * so the burst still has a computable end. FactChat's version uses
+ * `2 + Math.random()` seconds with no ceiling, which is the part that makes a
+ * burst impossible to schedule anything after.
+ *
+ * The delay is random too, not indexed. An earlier pass here reused the
+ * `stagger` step, which was a mistake worth naming: a list has an order the eye
+ * follows, and a delay that grows with the index is a *rhythm*. Confetti has no
+ * order, so the same delay reads as a wave sweeping across the container —
+ * fifty pieces queueing rather than bursting.
+ *
+ * Under reduced motion the pieces mount and stay invisible rather than being
+ * branched away in JS — a burst carries no information, so removing it removes
+ * nothing, and doing it in CSS keeps the decision on the same media query as
+ * every other preset instead of on a hook that has to guess before hydration.
+ *
+ * **The default colours are decorative only** (`confettiColors.ts`): coral,
+ * beige and the system hues that mean nothing — red, yellow, green and blue are
+ * left out because they are the danger, warning, success and info colours, and
+ * raining error red over "payment complete" says something the screen does not.
+ * They are light-mode hex and do not flip for dark mode. `colors` is a prop for
+ * an app that needs its own.
+ *
+ * **Takes no children — it is an overlay, not a wrapper.** It renders absolutely
+ * against the nearest positioned ancestor, which is therefore the stage: give
+ * that element `position: relative`, or the burst resolves against the page and
+ * rains over everything.
+ *
+ * ```tsx
+ * {justPurchased && <Confetti />}
+ * ```
+ */
+const Confetti = forwardRef(({ pieceCount = 50, colors = DEFAULT_CONFETTI_COLORS, seed = 1, ...rest }, ref) => {
+    const pieces = useMemo(() => {
+        const next = scatter(seed);
+        return Array.from({ length: pieceCount }, (_, i) => ({
+            id: i,
+            left: `${next() * 100}%`,
+            color: colors[Math.floor(next() * colors.length)],
+            // ± half a container width of lateral travel.
+            drift: `${Math.round(next() * 100 - 50)}px`,
+            // Two full turns, and only the direction is random. A magnitude that
+            // varies down to near zero gives some pieces no tumble at all, which is
+            // the difference between debris and a falling rectangle.
+            spin: next() < 0.5 ? '-720deg' : '720deg',
+            // Square, near enough. The first version varied width 6–10 and height
+            // 8–14 independently, which produced pieces 2.3× taller than wide —
+            // and with `radii.xs` on top of that (4px, because this theme
+            // overrides Chakra's 2px for buttons and cards) a 6px-wide piece is
+            // two-thirds round. A rounded oblong tumbling end over end is not a
+            // fragment of paper; the team's word for it was 애벌레, caterpillar.
+            width: `${8 + Math.round(next() * 4)}px`,
+            height: `${8 + Math.round(next() * 5)}px`,
+            // 0.85–1.3× the token. Anchored to the scale, and with a ceiling: the
+            // whole burst is over by `fall × 1.3 + base`, which is knowable without
+            // running it.
+            rate: (0.85 + next() * 0.45).toFixed(2),
+            // Random within `motion.base`, not stepped by index — see the note
+            // above about why a stagger is wrong here. 300ms is wide enough that no
+            // two pieces launch together and narrow enough that the burst still
+            // reads as one event.
+            delay: `${Math.round(next() * MOTION_DURATION_MS.base)}ms`,
+        }));
+    }, [pieceCount, colors, seed]);
+    return (jsx(Box, { ref: ref, position: "absolute", inset: "0", overflow: "hidden", pointerEvents: "none", "aria-hidden": true, 
+        // Establishes the containing block the keyframe's `cqh` resolves
+        // against. Without it `110cqh` falls back to the small viewport and
+        // every piece leaves the screen in the first few frames.
+        containerType: "size", ...rest, children: pieces.map((p) => (jsx(Box, { css: confettiPiece, bg: p.color, left: p.left, w: p.width, h: p.height, style: {
+                '--confetti-drift': p.drift,
+                '--confetti-spin': p.spin,
+                '--confetti-rate': p.rate,
+                animationDelay: p.delay,
+            } }, p.id))) }));
+});
+Confetti.displayName = 'Confetti';
+
+export { Confetti };
+//# sourceMappingURL=Confetti.mjs.map

package/dist/components/Confetti/Confetti.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confetti.mjs","sources":["../../../src/components/Confetti/Confetti.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}

package/dist/components/Confetti/Confetti.styles.d.ts

@@ -0,0 +1,32 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
+/**
+ * One falling piece.
+ *
+ * ## Why the duration is a token *times a factor*
+ *
+ * The first pass of this pinned every piece to `motion.celebrate.fall` exactly,
+ * on the reasoning that randomising a clock leaves a burst with no known
+ * length. That reasoning was right about sequencing and wrong about confetti:
+ * fifty pieces falling at *identical* speed do not read as fifty pieces. They
+ * read as one sheet, because equal speed is the one thing debris never has —
+ * real pieces differ in mass and in how much air they catch, and that
+ * difference is most of what makes a burst look like a burst.
+ *
+ * So the rate varies, but as a bounded multiple of the token rather than an
+ * open `2 + Math.random()`. The scale still sets the pace, the burst still has
+ * a computable ceiling (`fall × 1.3`, plus the delay spread), and the pieces
+ * still fall at different speeds. What the original had that mattered is kept;
+ * what it had that made the burst unschedulable is not.
+ *
+ * `linear`, and this is one of two places in the library where the curve is not
+ * a preference. The other is the spinner, where easing would put a seam in a
+ * loop; here it is gravity — a piece that decelerates on the way down reads as
+ * being lowered rather than dropped. None of the three house curves is right,
+ * and inventing a fourth for confetti alone would be a preset with one call
+ * site.
+ *
+ * `forwards`, so a piece stays gone. Without it every piece snaps back to the
+ * top of the container on the final frame.
+ */
+export declare const confettiPiece: SystemStyleObject;
+//# sourceMappingURL=Confetti.styles.d.ts.map

package/dist/components/Confetti/Confetti.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confetti.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Confetti/Confetti.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,aAAa,EAAE,iBAyB3B,CAAC"}

package/dist/components/Confetti/Confetti.styles.js

@@ -0,0 +1,60 @@
+"use client";
+'use strict';
+
+/**
+ * One falling piece.
+ *
+ * ## Why the duration is a token *times a factor*
+ *
+ * The first pass of this pinned every piece to `motion.celebrate.fall` exactly,
+ * on the reasoning that randomising a clock leaves a burst with no known
+ * length. That reasoning was right about sequencing and wrong about confetti:
+ * fifty pieces falling at *identical* speed do not read as fifty pieces. They
+ * read as one sheet, because equal speed is the one thing debris never has —
+ * real pieces differ in mass and in how much air they catch, and that
+ * difference is most of what makes a burst look like a burst.
+ *
+ * So the rate varies, but as a bounded multiple of the token rather than an
+ * open `2 + Math.random()`. The scale still sets the pace, the burst still has
+ * a computable ceiling (`fall × 1.3`, plus the delay spread), and the pieces
+ * still fall at different speeds. What the original had that mattered is kept;
+ * what it had that made the burst unschedulable is not.
+ *
+ * `linear`, and this is one of two places in the library where the curve is not
+ * a preference. The other is the spinner, where easing would put a seam in a
+ * loop; here it is gravity — a piece that decelerates on the way down reads as
+ * being lowered rather than dropped. None of the three house curves is right,
+ * and inventing a fourth for confetti alone would be a preset with one call
+ * site.
+ *
+ * `forwards`, so a piece stays gone. Without it every piece snaps back to the
+ * top of the container on the final frame.
+ */
+const confettiPiece = {
+    position: 'absolute',
+    top: '0',
+    // No radius, and not a token. `radii.xs` is 4px in this theme — a value
+    // chosen for buttons and cards, which is most of the width of a 10px piece.
+    // The radius scale exists for things a finger touches; a fragment is not one,
+    // and a corner is what makes it read as torn paper rather than a pill.
+    borderRadius: '0',
+    animationName: 'confetti-fall',
+    animationDuration: 'calc(var(--chakra-durations-motion-celebrate-fall) * var(--confetti-rate, 1))',
+    animationTimingFunction: 'linear',
+    // `both`, not `forwards`. Each piece waits out a delay of up to
+    // `motion.base`, and with `forwards` alone the element renders in its *own*
+    // CSS state during that wait — parked at `top: 0`, which is the top edge of
+    // the container and fully visible. Forty pieces then sit in a row along the
+    // rim and drop when their delay expires: hanging, not falling. The backwards
+    // half of `both` applies the 0% frame during the delay instead, which is
+    // above the edge and clipped away.
+    animationFillMode: 'both',
+    // Nothing to soften: a burst carries no information, so under reduced motion
+    // the pieces stay where they are and invisible. Done in CSS rather than by
+    // branching in JS so the decision sits on the same media query as every
+    // preset, instead of on a hook that has to guess before hydration.
+    _motionReduce: { animationName: 'none', opacity: 0 },
+};
+
+exports.confettiPiece = confettiPiece;
+//# sourceMappingURL=Confetti.styles.js.map