@epilot/volt-ui-experimental-griffel 0.2.3 → 0.3.1

package/dist/components/alert-dialog/alert-dialog.js

@@ -1,13 +1,14 @@
-import { jsx as r, jsxs as y, Fragment as D } from "react/jsx-runtime";
+import { jsx as r, jsxs as D, Fragment as x } from "react/jsx-runtime";
 import * as i from "react";
-import { Root as x, Action as A, Cancel as h, Content as b, Description as R, Overlay as T, Portal as w, Title as C, Trigger as S } from "../../vendor/@radix-ui/react-alert-dialog/dist/index.js";
+import { Root as A, Action as h, Cancel as b, Content as R, Description as T, Overlay as w, Portal as C, Title as v, Trigger as S } from "../../vendor/@radix-ui/react-alert-dialog/dist/index.js";
 import { shorthands as c } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
 import { SLOT_ATTR as n } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as d } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as v } from "../../styles/make-styles.js";
-import { spacingElement2 as f, spacingGroup2 as p, grayA1 as N, radiusXl as z, grayA11 as F, leadingSm as W, textSm as O, grayA12 as H, fontWeightSemibold as P, leadingXl as X, textXl as j, containerXl as k, containerLg as _, containerMd as I, containerSm as L, body as B } from "../../tokens/index.js";
-import { Button as u } from "../button/button.js";
-const g = v({
+import { useDensity as N } from "../density-provider/density-provider.js";
+import { makeVoltStyles as z } from "../../styles/make-styles.js";
+import { spacingElement2 as p, spacingGroup2 as u, grayA1 as F, radiusXl as W, grayA11 as O, leadingSm as H, textSm as P, grayA12 as X, fontWeightSemibold as j, leadingXl as k, textXl as _, containerXl as I, containerLg as L, containerMd as B, containerSm as E, body as G } from "../../tokens/index.js";
+import { Button as y } from "../button/button.js";
+const g = z({
   overlay: {
     position: "fixed",
     top: 0,
@@ -34,7 +35,7 @@ const g = v({
     }
   },
   content: {
-    backgroundColor: B,
+    backgroundColor: G,
     position: "fixed",
     top: "50%",
     left: "50%",
@@ -43,10 +44,10 @@ const g = v({
     display: "grid",
     width: "100%",
     maxWidth: "calc(100% - 2rem)",
-    ...c.gap(p),
-    ...c.borderRadius(z),
-    ...c.border("1px", "solid", N),
-    ...c.padding(p),
+    ...c.gap(u),
+    ...c.borderRadius(W),
+    ...c.border("1px", "solid", F),
+    ...c.padding(u),
     // v1 shadow-lg
     boxShadow: "0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a",
     outlineStyle: "none",
@@ -80,46 +81,46 @@ const g = v({
     }
   },
   sm: {
-    maxWidth: L
+    maxWidth: E
   },
   md: {
-    maxWidth: I
+    maxWidth: B
   },
   lg: {
-    maxWidth: _
+    maxWidth: L
   },
   xl: {
     "@media (min-width: 640px)": {
-      maxWidth: k
+      maxWidth: I
     }
   },
   header: {
     display: "flex",
     flexDirection: "column",
-    ...c.gap(f),
+    ...c.gap(p),
     textAlign: "left"
   },
   footer: {
     display: "flex",
-    ...c.gap(f),
+    ...c.gap(p),
     justifyContent: "flex-end"
   },
   title: {
-    fontSize: j,
-    lineHeight: X,
-    fontWeight: P,
-    color: H
+    fontSize: _,
+    lineHeight: k,
+    fontWeight: j,
+    color: X
   },
   description: {
-    fontSize: O,
-    lineHeight: W,
-    color: F
+    fontSize: P,
+    lineHeight: H,
+    color: O
   }
-}), Y = i.forwardRef(
+}), tt = i.forwardRef(
   function(t, a) {
-    return /* @__PURE__ */ r(x, { "data-slot": "alert-dialog", ...t });
+    return /* @__PURE__ */ r(A, { "data-slot": "alert-dialog", ...t });
   }
-), Z = i.forwardRef(function({ className: t, ...a }, o) {
+), at = i.forwardRef(function({ className: t, ...a }, o) {
   return /* @__PURE__ */ r(
     S,
     {
@@ -130,19 +131,19 @@ const g = v({
       ...a
     }
   );
-}), $ = i.forwardRef(function(t, a) {
+}), ot = i.forwardRef(function(t, a) {
   return /* @__PURE__ */ r(
-    w,
+    C,
     {
       "data-slot": "alert-dialog-portal",
       [n]: "alert-dialog-portal",
       ...t
     }
   );
-}), E = i.forwardRef(function({ className: t, ...a }, o) {
+}), M = i.forwardRef(function({ className: t, ...a }, o) {
   const e = g();
   return /* @__PURE__ */ r(
-    T,
+    w,
     {
       ref: o,
       "data-slot": "alert-dialog-overlay",
@@ -151,23 +152,24 @@ const g = v({
       ...a
     }
   );
-}), tt = i.forwardRef(function({ className: t, size: a = "xl", children: o, ...e }, m) {
-  const s = g();
-  return /* @__PURE__ */ y(D, { children: [
-    /* @__PURE__ */ r(E, {}),
+}), et = i.forwardRef(function({ className: t, size: a = "xl", children: o, ...e }, m) {
+  const s = g(), f = N();
+  return /* @__PURE__ */ D(x, { children: [
+    /* @__PURE__ */ r(M, {}),
     /* @__PURE__ */ r(
-      b,
+      R,
       {
         ref: m,
         "data-slot": "alert-dialog-content",
         [n]: "alert-dialog-content",
+        ...f !== void 0 ? { "data-density": f } : {},
         className: d(s.content, s[a], t),
         ...e,
         children: o
       }
     )
   ] });
-}), at = i.forwardRef(function({ className: t, ...a }, o) {
+}), rt = i.forwardRef(function({ className: t, ...a }, o) {
   const e = g();
   return /* @__PURE__ */ r(
     "div",
@@ -179,7 +181,7 @@ const g = v({
       ...a
     }
   );
-}), ot = i.forwardRef(function({ className: t, ...a }, o) {
+}), it = i.forwardRef(function({ className: t, ...a }, o) {
   const e = g();
   return /* @__PURE__ */ r(
     "div",
@@ -191,10 +193,10 @@ const g = v({
       ...a
     }
   );
-}), et = i.forwardRef(function({ className: t, ...a }, o) {
+}), lt = i.forwardRef(function({ className: t, ...a }, o) {
   const e = g();
   return /* @__PURE__ */ r(
-    C,
+    v,
     {
       ref: o,
       "data-slot": "alert-dialog-title",
@@ -203,10 +205,10 @@ const g = v({
       ...a
     }
   );
-}), rt = i.forwardRef(function({ className: t, ...a }, o) {
+}), nt = i.forwardRef(function({ className: t, ...a }, o) {
   const e = g();
   return /* @__PURE__ */ r(
-    R,
+    T,
     {
       ref: o,
       "data-slot": "alert-dialog-description",
@@ -215,15 +217,15 @@ const g = v({
       ...a
     }
   );
-}), it = i.forwardRef(function({
+}), st = i.forwardRef(function({
   variant: t = "primary",
   size: a = "base",
   destructive: o = !1,
   className: e,
   ...m
 }, s) {
-  return /* @__PURE__ */ r(A, { asChild: !0, children: /* @__PURE__ */ r(
-    u,
+  return /* @__PURE__ */ r(h, { asChild: !0, children: /* @__PURE__ */ r(
+    y,
     {
       ref: s,
       "data-slot": "alert-dialog-action",
@@ -235,15 +237,15 @@ const g = v({
       ...m
     }
   ) });
-}), lt = i.forwardRef(function({
+}), ct = i.forwardRef(function({
   variant: t = "secondary",
   size: a = "base",
   destructive: o = !1,
   className: e,
   ...m
 }, s) {
-  return /* @__PURE__ */ r(h, { asChild: !0, children: /* @__PURE__ */ r(
-    u,
+  return /* @__PURE__ */ r(b, { asChild: !0, children: /* @__PURE__ */ r(
+    y,
     {
       ref: s,
       "data-slot": "alert-dialog-cancel",
@@ -257,16 +259,16 @@ const g = v({
   ) });
 });
 export {
-  Y as AlertDialog,
-  it as AlertDialogAction,
-  lt as AlertDialogCancel,
-  tt as AlertDialogContent,
-  rt as AlertDialogDescription,
-  ot as AlertDialogFooter,
-  at as AlertDialogHeader,
-  E as AlertDialogOverlay,
-  $ as AlertDialogPortal,
-  et as AlertDialogTitle,
-  Z as AlertDialogTrigger
+  tt as AlertDialog,
+  st as AlertDialogAction,
+  ct as AlertDialogCancel,
+  et as AlertDialogContent,
+  nt as AlertDialogDescription,
+  it as AlertDialogFooter,
+  rt as AlertDialogHeader,
+  M as AlertDialogOverlay,
+  ot as AlertDialogPortal,
+  lt as AlertDialogTitle,
+  at as AlertDialogTrigger
 };
 //# sourceMappingURL=alert-dialog.js.map

package/dist/components/alert-dialog/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","sources":["../../../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport {\n  Button,\n  type ButtonProps,\n  type ButtonSize,\n  type ButtonVariant,\n} from \"../button/button\"\n\nconst useStyles = makeVoltStyles({\n  overlay: {\n    position: \"fixed\",\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    zIndex: 50,\n    backgroundColor: \"rgba(0, 0, 0, 0.5)\",\n    \"&[data-state='open']\": {\n      animationName: {\n        from: { opacity: 0 },\n        to: { opacity: 1 },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: { opacity: 1 },\n        to: { opacity: 0 },\n      },\n      animationDuration: \"100ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  content: {\n    backgroundColor: tokens.body,\n    position: \"fixed\",\n    top: \"50%\",\n    left: \"50%\",\n    transform: \"translate(-50%, -50%)\",\n    zIndex: 50,\n    display: \"grid\",\n    width: \"100%\",\n    maxWidth: \"calc(100% - 2rem)\",\n    ...shorthands.gap(tokens.spacingGroup2),\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA1),\n    ...shorthands.padding(tokens.spacingGroup2),\n    // v1 shadow-lg\n    boxShadow: \"0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a\",\n    outlineStyle: \"none\",\n    \"&[data-state='open']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: \"translate(-50%, -50%) scale(0.95)\",\n        },\n        to: {\n          opacity: 1,\n          transform: \"translate(-50%, -50%) scale(1)\",\n        },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: {\n          opacity: 1,\n          transform: \"translate(-50%, -50%) scale(1)\",\n        },\n        to: {\n          opacity: 0,\n          transform: \"translate(-50%, -50%) scale(0.95)\",\n        },\n      },\n      animationDuration: \"100ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  sm: {\n    maxWidth: tokens.containerSm,\n  },\n  md: {\n    maxWidth: tokens.containerMd,\n  },\n  lg: {\n    maxWidth: tokens.containerLg,\n  },\n  xl: {\n    \"@media (min-width: 640px)\": {\n      maxWidth: tokens.containerXl,\n    },\n  },\n  header: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingElement2),\n    textAlign: \"left\",\n  },\n  footer: {\n    display: \"flex\",\n    ...shorthands.gap(tokens.spacingElement2),\n    justifyContent: \"flex-end\",\n  },\n  title: {\n    fontSize: tokens.textXl,\n    lineHeight: tokens.leadingXl,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayA12,\n  },\n  description: {\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    color: tokens.grayA11,\n  },\n})\n\nexport type AlertDialogProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Root\n>\n\nexport type AlertDialogTriggerProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Trigger\n>\n\nexport type AlertDialogPortalProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Portal\n>\n\nexport type AlertDialogOverlayProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Overlay\n>\n\nexport type AlertDialogSize = \"xl\" | \"lg\" | \"md\" | \"sm\"\n\nexport type AlertDialogContentProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Content\n> & {\n  size?: AlertDialogSize\n}\n\nexport type AlertDialogHeaderProps = React.ComponentProps<\"div\">\nexport type AlertDialogFooterProps = React.ComponentProps<\"div\">\n\nexport type AlertDialogTitleProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Title\n>\n\nexport type AlertDialogDescriptionProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Description\n>\n\nexport type AlertDialogActionProps = Omit<\n  ButtonProps,\n  \"variant\" | \"size\" | \"destructive\"\n> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  destructive?: boolean\n}\n\nexport type AlertDialogCancelProps = Omit<\n  ButtonProps,\n  \"variant\" | \"size\" | \"destructive\"\n> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  destructive?: boolean\n}\n\nexport const AlertDialog = React.forwardRef<HTMLElement, AlertDialogProps>(\n  function AlertDialog(props, _ref) {\n    return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n  }\n)\n\nexport const AlertDialogTrigger = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Trigger>,\n  AlertDialogTriggerProps\n>(function AlertDialogTrigger({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.Trigger\n      ref={ref}\n      data-slot=\"alert-dialog-trigger\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-trigger\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogPortal = React.forwardRef<\n  HTMLElement,\n  AlertDialogPortalProps\n>(function AlertDialogPortal(props, _ref) {\n  return (\n    <AlertDialogPrimitive.Portal\n      data-slot=\"alert-dialog-portal\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-portal\" }}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogOverlay = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  AlertDialogOverlayProps\n>(function AlertDialogOverlay({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AlertDialogPrimitive.Overlay\n      ref={ref}\n      data-slot=\"alert-dialog-overlay\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-overlay\" }}\n      className={mergeClasses(styles.overlay, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogContent = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Content>,\n  AlertDialogContentProps\n>(function AlertDialogContent(\n  { className, size = \"xl\", children, ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        ref={ref}\n        data-slot=\"alert-dialog-content\"\n        {...{ [SLOT_ATTR]: \"alert-dialog-content\" }}\n        className={mergeClasses(styles.content, styles[size], className)}\n        {...props}\n      >\n        {children}\n      </AlertDialogPrimitive.Content>\n    </>\n  )\n})\n\nexport const AlertDialogHeader = React.forwardRef<\n  HTMLDivElement,\n  AlertDialogHeaderProps\n>(function AlertDialogHeader({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"alert-dialog-header\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-header\" }}\n      className={mergeClasses(styles.header, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogFooter = React.forwardRef<\n  HTMLDivElement,\n  AlertDialogFooterProps\n>(function AlertDialogFooter({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"alert-dialog-footer\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-footer\" }}\n      className={mergeClasses(styles.footer, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogTitle = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Title>,\n  AlertDialogTitleProps\n>(function AlertDialogTitle({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AlertDialogPrimitive.Title\n      ref={ref}\n      data-slot=\"alert-dialog-title\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-title\" }}\n      className={mergeClasses(styles.title, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogDescription = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Description>,\n  AlertDialogDescriptionProps\n>(function AlertDialogDescription({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AlertDialogPrimitive.Description\n      ref={ref}\n      data-slot=\"alert-dialog-description\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-description\" }}\n      className={mergeClasses(styles.description, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogAction = React.forwardRef<\n  HTMLButtonElement,\n  AlertDialogActionProps\n>(function AlertDialogAction(\n  {\n    variant = \"primary\",\n    size = \"base\",\n    destructive = false,\n    className,\n    ...props\n  },\n  ref\n) {\n  return (\n    <AlertDialogPrimitive.Action asChild>\n      <Button\n        ref={ref}\n        data-slot=\"alert-dialog-action\"\n        {...{ [SLOT_ATTR]: \"alert-dialog-action\" }}\n        variant={variant}\n        size={size}\n        destructive={destructive}\n        className={className}\n        {...props}\n      />\n    </AlertDialogPrimitive.Action>\n  )\n})\n\nexport const AlertDialogCancel = React.forwardRef<\n  HTMLButtonElement,\n  AlertDialogCancelProps\n>(function AlertDialogCancel(\n  {\n    variant = \"secondary\",\n    size = \"base\",\n    destructive = false,\n    className,\n    ...props\n  },\n  ref\n) {\n  return (\n    <AlertDialogPrimitive.Cancel asChild>\n      <Button\n        ref={ref}\n        data-slot=\"alert-dialog-cancel\"\n        {...{ [SLOT_ATTR]: \"alert-dialog-cancel\" }}\n        variant={variant}\n        size={size}\n        destructive={destructive}\n        className={className}\n        {...props}\n      />\n    </AlertDialogPrimitive.Cancel>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","tokens.body","shorthands","tokens.spacingGroup2","tokens.radiusXl","tokens.grayA1","tokens.containerSm","tokens.containerMd","tokens.containerLg","tokens.containerXl","tokens.spacingElement2","tokens.textXl","tokens.leadingXl","tokens.fontWeightSemibold","tokens.grayA12","tokens.textSm","tokens.leadingSm","tokens.grayA11","AlertDialog","React","props","_ref","AlertDialogPrimitive.Root","AlertDialogTrigger","className","ref","jsx","AlertDialogPrimitive.Trigger","SLOT_ATTR","AlertDialogPortal","AlertDialogPrimitive.Portal","AlertDialogOverlay","styles","AlertDialogPrimitive.Overlay","mergeClasses","AlertDialogContent","size","children","jsxs","Fragment","AlertDialogPrimitive.Content","AlertDialogHeader","AlertDialogFooter","AlertDialogTitle","AlertDialogPrimitive.Title","AlertDialogDescription","AlertDialogPrimitive.Description","AlertDialogAction","variant","destructive","AlertDialogPrimitive.Action","Button","AlertDialogCancel","AlertDialogPrimitive.Cancel"],"mappings":";;;;;;;;;AAeA,MAAMA,IAAYC,EAAe;AAAA,EAC/B,SAAS;AAAA,IACP,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,wBAAwB;AAAA,MACtB,eAAe;AAAA,QACb,MAAM,EAAE,SAAS,EAAA;AAAA,QACjB,IAAI,EAAE,SAAS,EAAA;AAAA,MAAE;AAAA,MAEnB,mBAAmB;AAAA,MACnB,yBAAyB;AAAA,IAAA;AAAA,IAE3B,0BAA0B;AAAA,MACxB,eAAe;AAAA,QACb,MAAM,EAAE,SAAS,EAAA;AAAA,QACjB,IAAI,EAAE,SAAS,EAAA;AAAA,MAAE;AAAA,MAEnB,mBAAmB;AAAA,MACnB,yBAAyB;AAAA,IAAA;AAAA,EAC3B;AAAA,EAEF,SAAS;AAAA,IACP,iBAAiBC;AAAAA,IACjB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAGC,EAAW,IAAIC,CAAoB;AAAA,IACtC,GAAGD,EAAW,aAAaE,CAAe;AAAA,IAC1C,GAAGF,EAAW,OAAO,OAAO,SAASG,CAAa;AAAA,IAClD,GAAGH,EAAW,QAAQC,CAAoB;AAAA;AAAA,IAE1C,WAAW;AAAA,IACX,cAAc;AAAA,IACd,wBAAwB;AAAA,MACtB,eAAe;AAAA,QACb,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,WAAW;AAAA,QAAA;AAAA,QAEb,IAAI;AAAA,UACF,SAAS;AAAA,UACT,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,MAEF,mBAAmB;AAAA,MACnB,yBAAyB;AAAA,IAAA;AAAA,IAE3B,0BAA0B;AAAA,MACxB,eAAe;AAAA,QACb,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,WAAW;AAAA,QAAA;AAAA,QAEb,IAAI;AAAA,UACF,SAAS;AAAA,UACT,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,MAEF,mBAAmB;AAAA,MACnB,yBAAyB;AAAA,IAAA;AAAA,EAC3B;AAAA,EAEF,IAAI;AAAA,IACF,UAAUG;AAAAA,EAAO;AAAA,EAEnB,IAAI;AAAA,IACF,UAAUC;AAAAA,EAAO;AAAA,EAEnB,IAAI;AAAA,IACF,UAAUC;AAAAA,EAAO;AAAA,EAEnB,IAAI;AAAA,IACF,6BAA6B;AAAA,MAC3B,UAAUC;AAAAA,IAAO;AAAA,EACnB;AAAA,EAEF,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,eAAe;AAAA,IACf,GAAGP,EAAW,IAAIQ,CAAsB;AAAA,IACxC,WAAW;AAAA,EAAA;AAAA,EAEb,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,GAAGR,EAAW,IAAIQ,CAAsB;AAAA,IACxC,gBAAgB;AAAA,EAAA;AAAA,EAElB,OAAO;AAAA,IACL,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,YAAYC;AAAAA,IACZ,OAAOC;AAAAA,EAAO;AAAA,EAEhB,aAAa;AAAA,IACX,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,OAAOC;AAAAA,EAAO;AAElB,CAAC,GAuDYC,IAAcC,EAAM;AAAA,EAC/B,SAAqBC,GAAOC,GAAM;AAChC,6BAAQC,GAAA,EAA0B,aAAU,gBAAgB,GAAGF,GAAO;AAAA,EACxE;AACF,GAEaG,IAAqBJ,EAAM,WAGtC,SAA4B,EAAE,WAAAK,GAAW,GAAGJ,EAAA,GAASK,GAAK;AAC1D,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAAJ;AAAA,MACC,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAEYS,IAAoBV,EAAM,WAGrC,SAA2BC,GAAOC,GAAM;AACxC,SACE,gBAAAK;AAAA,IAACI;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACJ,CAACF,CAAS,GAAG;AAAA,MAClB,GAAGR;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAEYW,IAAqBZ,EAAM,WAGtC,SAA4B,EAAE,WAAAK,GAAW,GAAGJ,EAAA,GAASK,GAAK;AAC1D,QAAMO,IAASjC,EAAA;AAEf,SACE,gBAAA2B;AAAA,IAACO;AAAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWM,EAAaF,EAAO,SAASR,CAAS;AAAA,MAChD,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAEYe,KAAqBhB,EAAM,WAGtC,SACA,EAAE,WAAAK,GAAW,MAAAY,IAAO,MAAM,UAAAC,GAAU,GAAGjB,EAAA,GACvCK,GACA;AACA,QAAMO,IAASjC,EAAA;AAEf,SACE,gBAAAuC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAb,EAACK,GAAA,EAAmB;AAAA,IACpB,gBAAAL;AAAA,MAACc;AAAAA,MAAA;AAAA,QACC,KAAAf;AAAA,QACA,aAAU;AAAA,QACJ,CAACG,CAAS,GAAG;AAAA,QACnB,WAAWM,EAAaF,EAAO,SAASA,EAAOI,CAAI,GAAGZ,CAAS;AAAA,QAC9D,GAAGJ;AAAA,QAEH,UAAAiB;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC,GAEYI,KAAoBtB,EAAM,WAGrC,SAA2B,EAAE,WAAAK,GAAW,GAAGJ,EAAA,GAASK,GAAK;AACzD,QAAMO,IAASjC,EAAA;AAEf,SACE,gBAAA2B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWM,EAAaF,EAAO,QAAQR,CAAS;AAAA,MAC/C,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAEYsB,KAAoBvB,EAAM,WAGrC,SAA2B,EAAE,WAAAK,GAAW,GAAGJ,EAAA,GAASK,GAAK;AACzD,QAAMO,IAASjC,EAAA;AAEf,SACE,gBAAA2B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWM,EAAaF,EAAO,QAAQR,CAAS;AAAA,MAC/C,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAEYuB,KAAmBxB,EAAM,WAGpC,SAA0B,EAAE,WAAAK,GAAW,GAAGJ,EAAA,GAASK,GAAK;AACxD,QAAMO,IAASjC,EAAA;AAEf,SACE,gBAAA2B;AAAA,IAACkB;AAAAA,IAAA;AAAA,MACC,KAAAnB;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWM,EAAaF,EAAO,OAAOR,CAAS;AAAA,MAC9C,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAEYyB,KAAyB1B,EAAM,WAG1C,SAAgC,EAAE,WAAAK,GAAW,GAAGJ,EAAA,GAASK,GAAK;AAC9D,QAAMO,IAASjC,EAAA;AAEf,SACE,gBAAA2B;AAAA,IAACoB;AAAAA,IAAA;AAAA,MACC,KAAArB;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWM,EAAaF,EAAO,aAAaR,CAAS;AAAA,MACpD,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAEY2B,KAAoB5B,EAAM,WAGrC,SACA;AAAA,EACE,SAAA6B,IAAU;AAAA,EACV,MAAAZ,IAAO;AAAA,EACP,aAAAa,IAAc;AAAA,EACd,WAAAzB;AAAA,EACA,GAAGJ;AACL,GACAK,GACA;AACA,SACE,gBAAAC,EAACwB,GAAA,EAA4B,SAAO,IAClC,UAAA,gBAAAxB;AAAA,IAACyB;AAAA,IAAA;AAAA,MACC,KAAA1B;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,SAAAoB;AAAA,MACA,MAAAZ;AAAA,MACA,aAAAa;AAAA,MACA,WAAAzB;AAAA,MACC,GAAGJ;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC,GAEYgC,KAAoBjC,EAAM,WAGrC,SACA;AAAA,EACE,SAAA6B,IAAU;AAAA,EACV,MAAAZ,IAAO;AAAA,EACP,aAAAa,IAAc;AAAA,EACd,WAAAzB;AAAA,EACA,GAAGJ;AACL,GACAK,GACA;AACA,SACE,gBAAAC,EAAC2B,GAAA,EAA4B,SAAO,IAClC,UAAA,gBAAA3B;AAAA,IAACyB;AAAA,IAAA;AAAA,MACC,KAAA1B;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,SAAAoB;AAAA,MACA,MAAAZ;AAAA,MACA,aAAAa;AAAA,MACA,WAAAzB;AAAA,MACC,GAAGJ;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC;"}
+{"version":3,"file":"alert-dialog.js","sources":["../../../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { useDensity } from \"../density-provider/density-provider\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport {\n  Button,\n  type ButtonProps,\n  type ButtonSize,\n  type ButtonVariant,\n} from \"../button/button\"\n\nconst useStyles = makeVoltStyles({\n  overlay: {\n    position: \"fixed\",\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    zIndex: 50,\n    backgroundColor: \"rgba(0, 0, 0, 0.5)\",\n    \"&[data-state='open']\": {\n      animationName: {\n        from: { opacity: 0 },\n        to: { opacity: 1 },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: { opacity: 1 },\n        to: { opacity: 0 },\n      },\n      animationDuration: \"100ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  content: {\n    backgroundColor: tokens.body,\n    position: \"fixed\",\n    top: \"50%\",\n    left: \"50%\",\n    transform: \"translate(-50%, -50%)\",\n    zIndex: 50,\n    display: \"grid\",\n    width: \"100%\",\n    maxWidth: \"calc(100% - 2rem)\",\n    ...shorthands.gap(tokens.spacingGroup2),\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA1),\n    ...shorthands.padding(tokens.spacingGroup2),\n    // v1 shadow-lg\n    boxShadow: \"0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a\",\n    outlineStyle: \"none\",\n    \"&[data-state='open']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: \"translate(-50%, -50%) scale(0.95)\",\n        },\n        to: {\n          opacity: 1,\n          transform: \"translate(-50%, -50%) scale(1)\",\n        },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: {\n          opacity: 1,\n          transform: \"translate(-50%, -50%) scale(1)\",\n        },\n        to: {\n          opacity: 0,\n          transform: \"translate(-50%, -50%) scale(0.95)\",\n        },\n      },\n      animationDuration: \"100ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  sm: {\n    maxWidth: tokens.containerSm,\n  },\n  md: {\n    maxWidth: tokens.containerMd,\n  },\n  lg: {\n    maxWidth: tokens.containerLg,\n  },\n  xl: {\n    \"@media (min-width: 640px)\": {\n      maxWidth: tokens.containerXl,\n    },\n  },\n  header: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingElement2),\n    textAlign: \"left\",\n  },\n  footer: {\n    display: \"flex\",\n    ...shorthands.gap(tokens.spacingElement2),\n    justifyContent: \"flex-end\",\n  },\n  title: {\n    fontSize: tokens.textXl,\n    lineHeight: tokens.leadingXl,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayA12,\n  },\n  description: {\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    color: tokens.grayA11,\n  },\n})\n\nexport type AlertDialogProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Root\n>\n\nexport type AlertDialogTriggerProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Trigger\n>\n\nexport type AlertDialogPortalProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Portal\n>\n\nexport type AlertDialogOverlayProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Overlay\n>\n\nexport type AlertDialogSize = \"xl\" | \"lg\" | \"md\" | \"sm\"\n\nexport type AlertDialogContentProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Content\n> & {\n  size?: AlertDialogSize\n}\n\nexport type AlertDialogHeaderProps = React.ComponentProps<\"div\">\nexport type AlertDialogFooterProps = React.ComponentProps<\"div\">\n\nexport type AlertDialogTitleProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Title\n>\n\nexport type AlertDialogDescriptionProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Description\n>\n\nexport type AlertDialogActionProps = Omit<\n  ButtonProps,\n  \"variant\" | \"size\" | \"destructive\"\n> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  destructive?: boolean\n}\n\nexport type AlertDialogCancelProps = Omit<\n  ButtonProps,\n  \"variant\" | \"size\" | \"destructive\"\n> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  destructive?: boolean\n}\n\nexport const AlertDialog = React.forwardRef<HTMLElement, AlertDialogProps>(\n  function AlertDialog(props, _ref) {\n    return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n  }\n)\n\nexport const AlertDialogTrigger = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Trigger>,\n  AlertDialogTriggerProps\n>(function AlertDialogTrigger({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.Trigger\n      ref={ref}\n      data-slot=\"alert-dialog-trigger\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-trigger\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogPortal = React.forwardRef<\n  HTMLElement,\n  AlertDialogPortalProps\n>(function AlertDialogPortal(props, _ref) {\n  return (\n    <AlertDialogPrimitive.Portal\n      data-slot=\"alert-dialog-portal\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-portal\" }}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogOverlay = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  AlertDialogOverlayProps\n>(function AlertDialogOverlay({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AlertDialogPrimitive.Overlay\n      ref={ref}\n      data-slot=\"alert-dialog-overlay\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-overlay\" }}\n      className={mergeClasses(styles.overlay, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogContent = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Content>,\n  AlertDialogContentProps\n>(function AlertDialogContent(\n  { className, size = \"xl\", children, ...props },\n  ref\n) {\n  const styles = useStyles()\n  // DENSITY-SPEC.md §4.4 — portal content boundary; see dialog.tsx's identical comment.\n  const override = useDensity()\n\n  return (\n    <>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        ref={ref}\n        data-slot=\"alert-dialog-content\"\n        {...{ [SLOT_ATTR]: \"alert-dialog-content\" }}\n        {...(override !== undefined ? { \"data-density\": override } : {})}\n        className={mergeClasses(styles.content, styles[size], className)}\n        {...props}\n      >\n        {children}\n      </AlertDialogPrimitive.Content>\n    </>\n  )\n})\n\nexport const AlertDialogHeader = React.forwardRef<\n  HTMLDivElement,\n  AlertDialogHeaderProps\n>(function AlertDialogHeader({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"alert-dialog-header\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-header\" }}\n      className={mergeClasses(styles.header, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogFooter = React.forwardRef<\n  HTMLDivElement,\n  AlertDialogFooterProps\n>(function AlertDialogFooter({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"alert-dialog-footer\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-footer\" }}\n      className={mergeClasses(styles.footer, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogTitle = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Title>,\n  AlertDialogTitleProps\n>(function AlertDialogTitle({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AlertDialogPrimitive.Title\n      ref={ref}\n      data-slot=\"alert-dialog-title\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-title\" }}\n      className={mergeClasses(styles.title, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogDescription = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Description>,\n  AlertDialogDescriptionProps\n>(function AlertDialogDescription({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AlertDialogPrimitive.Description\n      ref={ref}\n      data-slot=\"alert-dialog-description\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-description\" }}\n      className={mergeClasses(styles.description, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogAction = React.forwardRef<\n  HTMLButtonElement,\n  AlertDialogActionProps\n>(function AlertDialogAction(\n  {\n    variant = \"primary\",\n    size = \"base\",\n    destructive = false,\n    className,\n    ...props\n  },\n  ref\n) {\n  return (\n    <AlertDialogPrimitive.Action asChild>\n      <Button\n        ref={ref}\n        data-slot=\"alert-dialog-action\"\n        {...{ [SLOT_ATTR]: \"alert-dialog-action\" }}\n        variant={variant}\n        size={size}\n        destructive={destructive}\n        className={className}\n        {...props}\n      />\n    </AlertDialogPrimitive.Action>\n  )\n})\n\nexport const AlertDialogCancel = React.forwardRef<\n  HTMLButtonElement,\n  AlertDialogCancelProps\n>(function AlertDialogCancel(\n  {\n    variant = \"secondary\",\n    size = \"base\",\n    destructive = false,\n    className,\n    ...props\n  },\n  ref\n) {\n  return (\n    <AlertDialogPrimitive.Cancel asChild>\n      <Button\n        ref={ref}\n        data-slot=\"alert-dialog-cancel\"\n        {...{ [SLOT_ATTR]: \"alert-dialog-cancel\" }}\n        variant={variant}\n        size={size}\n        destructive={destructive}\n        className={className}\n        {...props}\n      />\n    </AlertDialogPrimitive.Cancel>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","tokens.body","shorthands","tokens.spacingGroup2","tokens.radiusXl","tokens.grayA1","tokens.containerSm","tokens.containerMd","tokens.containerLg","tokens.containerXl","tokens.spacingElement2","tokens.textXl","tokens.leadingXl","tokens.fontWeightSemibold","tokens.grayA12","tokens.textSm","tokens.leadingSm","tokens.grayA11","AlertDialog","React","props","_ref","AlertDialogPrimitive.Root","AlertDialogTrigger","className","ref","jsx","AlertDialogPrimitive.Trigger","SLOT_ATTR","AlertDialogPortal","AlertDialogPrimitive.Portal","AlertDialogOverlay","styles","AlertDialogPrimitive.Overlay","mergeClasses","AlertDialogContent","size","children","override","useDensity","jsxs","Fragment","AlertDialogPrimitive.Content","AlertDialogHeader","AlertDialogFooter","AlertDialogTitle","AlertDialogPrimitive.Title","AlertDialogDescription","AlertDialogPrimitive.Description","AlertDialogAction","variant","destructive","AlertDialogPrimitive.Action","Button","AlertDialogCancel","AlertDialogPrimitive.Cancel"],"mappings":"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"}

package/dist/components/avatar/avatar.js

@@ -4,8 +4,8 @@ import { Root as p, Image as y, Fallback as A } from "../../vendor/@radix-ui/rea
 import { SLOT_ATTR as n } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as x } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as S } from "../../styles/make-styles.js";
-import { ensurePaletteTokensFor as w } from "../../tokens/install.js";
-import { indigoA12 as C, indigo3 as z, purpleA12 as R, purple3 as T, pinkA12 as j, pink3 as F, redA12 as O, red3 as H, bronzeA12 as I, bronze3 as N, orangeA12 as X, orange3 as B, yellowA12 as L, yellow3 as V, limeA12 as W, lime3 as _, greenA12 as G, green3 as M, mintA12 as P, mint3 as U, tealA12 as Y, teal3 as q, cyanA12 as D, cyan3 as E, skyA12 as J, sky3 as K, blueA12 as Q, blue3 as Z, grayA12 as $, gray3 as aa, leadingBase as ra, textBase as ea, leadingSm as ta, textSm as oa, leadingXs as na, textXs as ia, fontWeightMedium as la } from "../../tokens/index.js";
+import { useVoltPaletteTokensFor as w } from "../../tokens/use-palette-tokens.js";
+import { indigoA12 as C, indigo3 as z, purpleA12 as R, purple3 as T, pinkA12 as j, pink3 as F, redA12 as O, red3 as H, bronzeA12 as I, bronze3 as N, orangeA12 as V, orange3 as X, yellowA12 as B, yellow3 as L, limeA12 as W, lime3 as _, greenA12 as G, green3 as M, mintA12 as P, mint3 as U, tealA12 as Y, teal3 as q, cyanA12 as D, cyan3 as E, skyA12 as J, sky3 as K, blueA12 as Q, blue3 as Z, grayA12 as $, gray3 as aa, leadingBase as ra, textBase as ea, leadingSm as ta, textSm as oa, leadingXs as na, textXs as ia, fontWeightMedium as la } from "../../tokens/index.js";
 const c = [
   "blue",
   "sky",
@@ -58,12 +58,12 @@ const c = [
     "--avatar-foreground": W
   },
   yellow: {
-    "--avatar-background": V,
-    "--avatar-foreground": L
+    "--avatar-background": L,
+    "--avatar-foreground": B
   },
   orange: {
-    "--avatar-background": B,
-    "--avatar-foreground": X
+    "--avatar-background": X,
+    "--avatar-foreground": V
   },
   bronze: {
     "--avatar-background": N,

package/dist/components/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../src/components/avatar/avatar.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\nimport { mergeClasses } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport { ensurePaletteTokensFor } from \"../../tokens/install\"\nimport * as tokens from \"../../tokens\"\n\nexport type AvatarColor =\n  | \"gray\"\n  | \"blue\"\n  | \"sky\"\n  | \"cyan\"\n  | \"teal\"\n  | \"mint\"\n  | \"green\"\n  | \"lime\"\n  | \"yellow\"\n  | \"orange\"\n  | \"bronze\"\n  | \"red\"\n  | \"pink\"\n  | \"purple\"\n  | \"indigo\"\nexport type AvatarSize = \"sm\" | \"base\" | \"lg\"\n\nconst AUTO_COLORS: AvatarColor[] = [\n  \"blue\",\n  \"sky\",\n  \"cyan\",\n  \"teal\",\n  \"mint\",\n  \"green\",\n  \"lime\",\n  \"orange\",\n  \"bronze\",\n  \"pink\",\n  \"purple\",\n  \"indigo\",\n]\n\nconst colorForSeed = (seed: string): AvatarColor => {\n  let hash = 0\n  for (let i = 0; i < seed.length; i++) {\n    hash = (hash * 31 + seed.charCodeAt(i)) >>> 0\n  }\n  return AUTO_COLORS[hash % AUTO_COLORS.length]\n}\n\nconst colorVars: Record<AvatarColor, React.CSSProperties> = {\n  gray: {\n    \"--avatar-background\": tokens.gray3,\n    \"--avatar-foreground\": tokens.grayA12,\n  } as React.CSSProperties,\n  blue: {\n    \"--avatar-background\": tokens.blue3,\n    \"--avatar-foreground\": tokens.blueA12,\n  } as React.CSSProperties,\n  sky: {\n    \"--avatar-background\": tokens.sky3,\n    \"--avatar-foreground\": tokens.skyA12,\n  } as React.CSSProperties,\n  cyan: {\n    \"--avatar-background\": tokens.cyan3,\n    \"--avatar-foreground\": tokens.cyanA12,\n  } as React.CSSProperties,\n  teal: {\n    \"--avatar-background\": tokens.teal3,\n    \"--avatar-foreground\": tokens.tealA12,\n  } as React.CSSProperties,\n  mint: {\n    \"--avatar-background\": tokens.mint3,\n    \"--avatar-foreground\": tokens.mintA12,\n  } as React.CSSProperties,\n  green: {\n    \"--avatar-background\": tokens.green3,\n    \"--avatar-foreground\": tokens.greenA12,\n  } as React.CSSProperties,\n  lime: {\n    \"--avatar-background\": tokens.lime3,\n    \"--avatar-foreground\": tokens.limeA12,\n  } as React.CSSProperties,\n  yellow: {\n    \"--avatar-background\": tokens.yellow3,\n    \"--avatar-foreground\": tokens.yellowA12,\n  } as React.CSSProperties,\n  orange: {\n    \"--avatar-background\": tokens.orange3,\n    \"--avatar-foreground\": tokens.orangeA12,\n  } as React.CSSProperties,\n  bronze: {\n    \"--avatar-background\": tokens.bronze3,\n    \"--avatar-foreground\": tokens.bronzeA12,\n  } as React.CSSProperties,\n  red: {\n    \"--avatar-background\": tokens.red3,\n    \"--avatar-foreground\": tokens.redA12,\n  } as React.CSSProperties,\n  pink: {\n    \"--avatar-background\": tokens.pink3,\n    \"--avatar-foreground\": tokens.pinkA12,\n  } as React.CSSProperties,\n  purple: {\n    \"--avatar-background\": tokens.purple3,\n    \"--avatar-foreground\": tokens.purpleA12,\n  } as React.CSSProperties,\n  indigo: {\n    \"--avatar-background\": tokens.indigo3,\n    \"--avatar-foreground\": tokens.indigoA12,\n  } as React.CSSProperties,\n}\n\nconst AvatarGroupContext = React.createContext<{ size?: AvatarSize } | null>(\n  null\n)\n\nconst useStyles = makeVoltStyles({\n  root: {\n    position: \"relative\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flexShrink: 0,\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    borderRadius: \"9999px\",\n    backgroundColor: \"var(--avatar-background)\",\n    color: \"var(--avatar-foreground)\",\n    fontWeight: tokens.fontWeightMedium,\n    textTransform: \"uppercase\",\n  },\n  sm: {\n    width: \"1.5rem\",\n    height: \"1.5rem\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n  },\n  base: {\n    width: \"2rem\",\n    height: \"2rem\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n  },\n  lg: {\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n  },\n  image: {\n    width: \"100%\",\n    height: \"100%\",\n    objectFit: \"cover\",\n  },\n  fallback: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n})\n\nexport type AvatarProps = Omit<\n  React.ComponentProps<typeof AvatarPrimitive.Root>,\n  \"className\" | \"color\" | \"children\"\n> & {\n  className?: string\n  src?: string\n  alt?: string\n  initials?: string\n  color?: AvatarColor\n  size?: AvatarSize\n}\n\nexport const Avatar = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(function Avatar(\n  { className, src, alt, initials, color, size, style, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const group = React.useContext(AvatarGroupContext)\n  const resolvedSize = size ?? group?.size ?? \"base\"\n  const resolvedColor = color ?? colorForSeed(alt ?? initials ?? \"\")\n\n  // Was a module-scope call, so merely IMPORTING Avatar installed 63 kB of palette CSS whether one\n  // ever rendered. Now it is per-instance and keyed on the resolved family. Every auto colour is\n  // decorative, so a seeded avatar still installs the sheet; an explicit `color=\"gray\"` no longer\n  // does, and neither does an import that never renders.\n  ensurePaletteTokensFor(resolvedColor)\n\n  return (\n    <AvatarPrimitive.Root\n      ref={ref}\n      data-slot=\"avatar\"\n      {...{ [SLOT_ATTR]: \"avatar\" }}\n      className={mergeClasses(styles.root, styles[resolvedSize], className)}\n      style={{ ...colorVars[resolvedColor], ...style }}\n      {...props}\n    >\n      <AvatarPrimitive.Image\n        data-slot=\"avatar-image\"\n        {...{ [SLOT_ATTR]: \"avatar-image\" }}\n        src={src}\n        alt={alt}\n        className={styles.image}\n      />\n      <AvatarPrimitive.Fallback\n        data-slot=\"avatar-fallback\"\n        {...{ [SLOT_ATTR]: \"avatar-fallback\" }}\n        className={styles.fallback}\n        aria-hidden=\"true\"\n      >\n        {initials}\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  )\n})\n\nexport { AvatarGroupContext }\n"],"names":["AUTO_COLORS","colorForSeed","seed","hash","i","colorVars","tokens.gray3","tokens.grayA12","tokens.blue3","tokens.blueA12","tokens.sky3","tokens.skyA12","tokens.cyan3","tokens.cyanA12","tokens.teal3","tokens.tealA12","tokens.mint3","tokens.mintA12","tokens.green3","tokens.greenA12","tokens.lime3","tokens.limeA12","tokens.yellow3","tokens.yellowA12","tokens.orange3","tokens.orangeA12","tokens.bronze3","tokens.bronzeA12","tokens.red3","tokens.redA12","tokens.pink3","tokens.pinkA12","tokens.purple3","tokens.purpleA12","tokens.indigo3","tokens.indigoA12","AvatarGroupContext","React","useStyles","makeVoltStyles","tokens.fontWeightMedium","tokens.textXs","tokens.leadingXs","tokens.textSm","tokens.leadingSm","tokens.textBase","tokens.leadingBase","Avatar","className","src","alt","initials","color","size","style","props","ref","styles","group","resolvedSize","resolvedColor","ensurePaletteTokensFor","jsxs","AvatarPrimitive.Root","SLOT_ATTR","mergeClasses","jsx","AvatarPrimitive.Image","AvatarPrimitive.Fallback"],"mappings":"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"}
+{"version":3,"file":"avatar.js","sources":["../../../src/components/avatar/avatar.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\nimport { mergeClasses } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport { useVoltPaletteTokensFor } from \"../../tokens/use-palette-tokens\"\nimport * as tokens from \"../../tokens\"\n\nexport type AvatarColor =\n  | \"gray\"\n  | \"blue\"\n  | \"sky\"\n  | \"cyan\"\n  | \"teal\"\n  | \"mint\"\n  | \"green\"\n  | \"lime\"\n  | \"yellow\"\n  | \"orange\"\n  | \"bronze\"\n  | \"red\"\n  | \"pink\"\n  | \"purple\"\n  | \"indigo\"\nexport type AvatarSize = \"sm\" | \"base\" | \"lg\"\n\nconst AUTO_COLORS: AvatarColor[] = [\n  \"blue\",\n  \"sky\",\n  \"cyan\",\n  \"teal\",\n  \"mint\",\n  \"green\",\n  \"lime\",\n  \"orange\",\n  \"bronze\",\n  \"pink\",\n  \"purple\",\n  \"indigo\",\n]\n\nconst colorForSeed = (seed: string): AvatarColor => {\n  let hash = 0\n  for (let i = 0; i < seed.length; i++) {\n    hash = (hash * 31 + seed.charCodeAt(i)) >>> 0\n  }\n  return AUTO_COLORS[hash % AUTO_COLORS.length]\n}\n\nconst colorVars: Record<AvatarColor, React.CSSProperties> = {\n  gray: {\n    \"--avatar-background\": tokens.gray3,\n    \"--avatar-foreground\": tokens.grayA12,\n  } as React.CSSProperties,\n  blue: {\n    \"--avatar-background\": tokens.blue3,\n    \"--avatar-foreground\": tokens.blueA12,\n  } as React.CSSProperties,\n  sky: {\n    \"--avatar-background\": tokens.sky3,\n    \"--avatar-foreground\": tokens.skyA12,\n  } as React.CSSProperties,\n  cyan: {\n    \"--avatar-background\": tokens.cyan3,\n    \"--avatar-foreground\": tokens.cyanA12,\n  } as React.CSSProperties,\n  teal: {\n    \"--avatar-background\": tokens.teal3,\n    \"--avatar-foreground\": tokens.tealA12,\n  } as React.CSSProperties,\n  mint: {\n    \"--avatar-background\": tokens.mint3,\n    \"--avatar-foreground\": tokens.mintA12,\n  } as React.CSSProperties,\n  green: {\n    \"--avatar-background\": tokens.green3,\n    \"--avatar-foreground\": tokens.greenA12,\n  } as React.CSSProperties,\n  lime: {\n    \"--avatar-background\": tokens.lime3,\n    \"--avatar-foreground\": tokens.limeA12,\n  } as React.CSSProperties,\n  yellow: {\n    \"--avatar-background\": tokens.yellow3,\n    \"--avatar-foreground\": tokens.yellowA12,\n  } as React.CSSProperties,\n  orange: {\n    \"--avatar-background\": tokens.orange3,\n    \"--avatar-foreground\": tokens.orangeA12,\n  } as React.CSSProperties,\n  bronze: {\n    \"--avatar-background\": tokens.bronze3,\n    \"--avatar-foreground\": tokens.bronzeA12,\n  } as React.CSSProperties,\n  red: {\n    \"--avatar-background\": tokens.red3,\n    \"--avatar-foreground\": tokens.redA12,\n  } as React.CSSProperties,\n  pink: {\n    \"--avatar-background\": tokens.pink3,\n    \"--avatar-foreground\": tokens.pinkA12,\n  } as React.CSSProperties,\n  purple: {\n    \"--avatar-background\": tokens.purple3,\n    \"--avatar-foreground\": tokens.purpleA12,\n  } as React.CSSProperties,\n  indigo: {\n    \"--avatar-background\": tokens.indigo3,\n    \"--avatar-foreground\": tokens.indigoA12,\n  } as React.CSSProperties,\n}\n\nconst AvatarGroupContext = React.createContext<{ size?: AvatarSize } | null>(\n  null\n)\n\nconst useStyles = makeVoltStyles({\n  root: {\n    position: \"relative\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flexShrink: 0,\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    borderRadius: \"9999px\",\n    backgroundColor: \"var(--avatar-background)\",\n    color: \"var(--avatar-foreground)\",\n    fontWeight: tokens.fontWeightMedium,\n    textTransform: \"uppercase\",\n  },\n  sm: {\n    width: \"1.5rem\",\n    height: \"1.5rem\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n  },\n  base: {\n    width: \"2rem\",\n    height: \"2rem\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n  },\n  lg: {\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n  },\n  image: {\n    width: \"100%\",\n    height: \"100%\",\n    objectFit: \"cover\",\n  },\n  fallback: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n})\n\nexport type AvatarProps = Omit<\n  React.ComponentProps<typeof AvatarPrimitive.Root>,\n  \"className\" | \"color\" | \"children\"\n> & {\n  className?: string\n  src?: string\n  alt?: string\n  initials?: string\n  color?: AvatarColor\n  size?: AvatarSize\n}\n\nexport const Avatar = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(function Avatar(\n  { className, src, alt, initials, color, size, style, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const group = React.useContext(AvatarGroupContext)\n  const resolvedSize = size ?? group?.size ?? \"base\"\n  const resolvedColor = color ?? colorForSeed(alt ?? initials ?? \"\")\n\n  // Was a module-scope call, so merely IMPORTING Avatar installed 63 kB of palette CSS whether one\n  // ever rendered. Now it is per-instance and keyed on the resolved family, installed at commit\n  // time (WP2B2) via a hook called unconditionally every render. Every auto colour is decorative,\n  // so a seeded avatar still installs the sheet; an explicit `color=\"gray\"` no longer does, and\n  // neither does an import that never renders.\n  useVoltPaletteTokensFor(resolvedColor)\n\n  return (\n    <AvatarPrimitive.Root\n      ref={ref}\n      data-slot=\"avatar\"\n      {...{ [SLOT_ATTR]: \"avatar\" }}\n      className={mergeClasses(styles.root, styles[resolvedSize], className)}\n      style={{ ...colorVars[resolvedColor], ...style }}\n      {...props}\n    >\n      <AvatarPrimitive.Image\n        data-slot=\"avatar-image\"\n        {...{ [SLOT_ATTR]: \"avatar-image\" }}\n        src={src}\n        alt={alt}\n        className={styles.image}\n      />\n      <AvatarPrimitive.Fallback\n        data-slot=\"avatar-fallback\"\n        {...{ [SLOT_ATTR]: \"avatar-fallback\" }}\n        className={styles.fallback}\n        aria-hidden=\"true\"\n      >\n        {initials}\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  )\n})\n\nexport { AvatarGroupContext }\n"],"names":["AUTO_COLORS","colorForSeed","seed","hash","i","colorVars","tokens.gray3","tokens.grayA12","tokens.blue3","tokens.blueA12","tokens.sky3","tokens.skyA12","tokens.cyan3","tokens.cyanA12","tokens.teal3","tokens.tealA12","tokens.mint3","tokens.mintA12","tokens.green3","tokens.greenA12","tokens.lime3","tokens.limeA12","tokens.yellow3","tokens.yellowA12","tokens.orange3","tokens.orangeA12","tokens.bronze3","tokens.bronzeA12","tokens.red3","tokens.redA12","tokens.pink3","tokens.pinkA12","tokens.purple3","tokens.purpleA12","tokens.indigo3","tokens.indigoA12","AvatarGroupContext","React","useStyles","makeVoltStyles","tokens.fontWeightMedium","tokens.textXs","tokens.leadingXs","tokens.textSm","tokens.leadingSm","tokens.textBase","tokens.leadingBase","Avatar","className","src","alt","initials","color","size","style","props","ref","styles","group","resolvedSize","resolvedColor","useVoltPaletteTokensFor","jsxs","AvatarPrimitive.Root","SLOT_ATTR","mergeClasses","jsx","AvatarPrimitive.Image","AvatarPrimitive.Fallback"],"mappings":"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"}

package/dist/components/badge/badge.js

@@ -1,13 +1,15 @@
 import { jsx as h } from "react/jsx-runtime";
 import * as v from "react";
-import { shorthands as b } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as S } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { shorthands as S } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as b } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as y } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as x } from "../../styles/make-styles.js";
-import { radiusMd as w, spacingElement3 as R, spacingElement1 as r, textBase as $, radiusSm as C, spacingElement2 as O, textSm as k, textXs as A, errorA8 as B, accentA8 as T, fontWeightNormal as W } from "../../tokens/index.js";
-import { ensurePaletteTokensFor as E } from "../../tokens/install.js";
-import { NS as d } from "../../tokens/core.generated.js";
-const V = [
+import { radiusMd as w, spacingElement3 as $, spacingElement1 as n, textBase as C, radiusSm as R, spacingElement2 as O, textSm as k, textXs as A, errorA8 as B, accentA8 as N, fontWeightNormal as T } from "../../tokens/index.js";
+import { isCoreFamily as W } from "../../tokens/install.js";
+import { useVoltPaletteTokensFor as E } from "../../tokens/use-palette-tokens.js";
+import { NS as I } from "../../tokens/core.generated.js";
+import { NS as z } from "../../tokens/palette.generated.js";
+const J = [
   "accent",
   "neutral",
   "gray",
@@ -29,23 +31,29 @@ const V = [
   "orange",
   "yellow",
   "bronze"
-], n = "--volt2-badge-bg", i = "--volt2-badge-fg", a = "--volt2-badge-bd", m = (e) => e === "neutral" ? "gray" : e, t = (e, o) => `var(--volt2-${d}-sem-${m(e)}-${o})`, I = (e, o) => `var(--volt2-${d}-${m(e)}-${o})`, z = {
+], i = "--volt2-badge-bg", a = "--volt2-badge-fg", s = "--volt2-badge-bd", m = (e) => e === "neutral" ? "gray" : e, d = (e) => W(e) ? I : z, o = (e, r) => {
+  const t = m(e);
+  return `var(--volt2-${d(t)}-sem-${t}-${r})`;
+}, F = (e, r) => {
+  const t = m(e);
+  return `var(--volt2-${d(t)}-${t}-${r})`;
+}, L = {
   soft: (e) => ({
-    [n]: t(e, "soft"),
-    [i]: t(e, "default"),
-    [a]: "transparent"
+    [i]: o(e, "soft"),
+    [a]: o(e, "default"),
+    [s]: "transparent"
   }),
   solid: (e) => ({
-    [n]: t(e, "solid"),
-    [i]: t(e, "contrast"),
-    [a]: "transparent"
+    [i]: o(e, "solid"),
+    [a]: o(e, "contrast"),
+    [s]: "transparent"
   }),
   surface: (e) => ({
-    [n]: t(e, "surface"),
-    [i]: t(e, "default"),
-    [a]: I(e, "a6")
+    [i]: o(e, "surface"),
+    [a]: o(e, "default"),
+    [s]: F(e, "a6")
   })
-}, L = x({
+}, G = x({
   root: {
     display: "inline-flex",
     alignItems: "center",
@@ -54,22 +62,22 @@ const V = [
     whiteSpace: "nowrap",
     flexShrink: 0,
     overflow: "hidden",
-    fontWeight: W,
+    fontWeight: T,
     // NEVER write a CSS shorthand in a Griffel style object. Atoms are one declaration each, so a
     // shorthand cannot be resolved against a longhand — `border` and a later `borderColor` would
     // both survive with the winner decided by insertion order. Griffel warns at runtime, which
     // means the mistake ships silently in production where nobody reads the console.
     // `shorthands.*` expands to the individual longhands.
-    ...b.border("1px", "solid", `var(${a})`),
+    ...S.border("1px", "solid", `var(${s})`),
     // The whole point: one rule each, colour supplied per instance.
-    backgroundColor: `var(${n})`,
-    color: `var(${i})`,
+    backgroundColor: `var(${i})`,
+    color: `var(${a})`,
     transitionProperty: "color, box-shadow",
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: T
+      outlineColor: N
     },
     // v1 `aria-invalid:outline-error-a8`. Declared after the focus ring so an invalid focused
     // badge paints the error ring, matching v1's variant ordering.
@@ -82,8 +90,8 @@ const V = [
     fontSize: A,
     lineHeight: "1rem",
     letterSpacing: "0.04px",
-    gap: r,
-    paddingInline: r,
+    gap: n,
+    paddingInline: n,
     minWidth: "1rem",
     borderRadius: "3px",
     "& > svg": { width: "0.75rem", height: "0.75rem" }
@@ -91,47 +99,47 @@ const V = [
   base: {
     fontSize: k,
     lineHeight: "1.25rem",
-    gap: r,
+    gap: n,
     paddingInline: O,
     minWidth: "1.25rem",
-    borderRadius: C,
+    borderRadius: R,
     "& > svg": { width: "1rem", height: "1rem" }
   },
   lg: {
-    fontSize: $,
+    fontSize: C,
     lineHeight: "1.5rem",
-    gap: r,
-    paddingInline: R,
+    gap: n,
+    paddingInline: $,
     minWidth: "1.5rem",
     borderRadius: w,
     "& > svg": { width: "1rem", height: "1rem" }
   }
-}), M = v.forwardRef(
+}), K = v.forwardRef(
   function({
-    className: o,
-    color: s = "accent",
+    className: r,
+    color: t = "accent",
     variant: g = "soft",
     size: p = "base",
     style: f,
     ...c
   }, u) {
-    E(s);
-    const l = L();
+    E(t);
+    const l = G();
     return /* @__PURE__ */ h(
       "span",
       {
         ref: u,
         "data-slot": "badge",
-        [S]: "badge",
-        className: y(l.root, l[p], o),
-        style: { ...z[g](s), ...f },
+        [b]: "badge",
+        className: y(l.root, l[p], r),
+        style: { ...L[g](t), ...f },
         ...c
       }
     );
   }
 );
 export {
-  V as BADGE_COLORS,
-  M as Badge
+  J as BADGE_COLORS,
+  K as Badge
 };
 //# sourceMappingURL=badge.js.map