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

package/dist/components/toggle/toggle.js

@@ -1,17 +1,17 @@
-import { j as a } from "../../vendor/react/jsx-dev-runtime.js";
+import { jsx as s } from "react/jsx-runtime";
 import * as l from "react";
-import { Root as m } from "../../vendor/@radix-ui/react-toggle/dist/index.js";
-import { shorthands as e } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as d } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as g } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as c } from "../../styles/make-styles.js";
-import { radius2xl as u, spacingElement2 as h, radiusXl as f, radiusLg as p, spacingElement1 as b, errorA4 as v, semErrorOnSoft as k, errorA3 as x, semErrorSoft as C, semErrorLight as S, accentA4 as y, semAccentOnSoft as E, accentA3 as R, semAccentSoft as A, semAccentLight as T, semFocusRing as W, fontWeightSemibold as w } from "../../tokens/index.js";
-const j = c({
+import { Root as d } from "../../vendor/@radix-ui/react-toggle/dist/index.js";
+import { shorthands as o } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as m } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as c } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as g } from "../../styles/make-styles.js";
+import { radius2xl as u, spacingElement2 as h, radiusXl as f, radiusLg as p, spacingElement1 as b, errorA4 as v, semErrorOnSoft as C, errorA3 as S, semErrorSoft as k, semErrorLight as y, accentA4 as x, semAccentOnSoft as A, accentA3 as R, semAccentSoft as E, semAccentLight as T, semFocusRing as W, fontWeightSemibold as w } from "../../tokens/index.js";
+const I = g({
   root: {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    ...e.gap(b),
+    ...o.gap(b),
     flexShrink: 0,
     cursor: "pointer",
     fontWeight: w,
@@ -21,8 +21,8 @@ const j = c({
     "@media (prefers-reduced-motion: reduce)": {
       transitionDuration: "0.01ms"
     },
-    ...e.borderStyle("none"),
-    ...e.borderWidth(0),
+    ...o.borderStyle("none"),
+    ...o.borderWidth(0),
     ":focus-visible": {
       outlineWidth: "2px",
       outlineOffset: "2px",
@@ -44,25 +44,25 @@ const j = c({
     backgroundColor: "transparent",
     color: T,
     ":hover": {
-      backgroundColor: A
+      backgroundColor: E
     },
     "&[data-state='on']": {
       backgroundColor: R,
-      color: E
+      color: A
     },
     "&[data-state='on']:hover": {
-      backgroundColor: y
+      backgroundColor: x
     }
   },
   destructive: {
     backgroundColor: "transparent",
-    color: S,
+    color: y,
     ":hover": {
-      backgroundColor: C
+      backgroundColor: k
     },
     "&[data-state='on']": {
-      backgroundColor: x,
-      color: k
+      backgroundColor: S,
+      color: C
     },
     "&[data-state='on']:hover": {
       backgroundColor: v
@@ -72,8 +72,8 @@ const j = c({
   sm: {
     height: "1.5rem",
     minWidth: "1.5rem",
-    ...e.borderRadius(p),
-    ...e.paddingInline("0.375rem"),
+    ...o.borderRadius(p),
+    ...o.paddingInline("0.375rem"),
     "& svg": {
       width: "0.875rem",
       height: "0.875rem"
@@ -82,8 +82,8 @@ const j = c({
   base: {
     height: "2rem",
     minWidth: "2rem",
-    ...e.borderRadius(f),
-    ...e.paddingInline(h),
+    ...o.borderRadius(f),
+    ...o.paddingInline(h),
     "& svg": {
       width: "1rem",
       height: "1rem"
@@ -92,41 +92,33 @@ const j = c({
   lg: {
     height: "2.5rem",
     minWidth: "2.5rem",
-    ...e.borderRadius(u),
-    ...e.paddingInline("0.625rem"),
+    ...o.borderRadius(u),
+    ...o.paddingInline("0.625rem"),
     "& svg": {
       width: "1.25rem",
       height: "1.25rem"
     }
   }
-}), P = l.forwardRef(function({ className: r, variant: t = "default", size: i = "base", ...n }, s) {
-  const o = j();
-  return /* @__PURE__ */ a.jsxDEV(
-    m,
+}), Q = l.forwardRef(function({ className: e, variant: t = "default", size: n = "base", ...i }, a) {
+  const r = I();
+  return /* @__PURE__ */ s(
+    d,
     {
-      ref: s,
+      ref: a,
       "data-slot": "toggle",
-      [d]: "toggle",
-      className: g(
-        o.root,
-        o[t],
-        o[i],
-        r
+      [m]: "toggle",
+      className: c(
+        r.root,
+        r[t],
+        r[n],
+        e
       ),
-      ...n
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/toggle/toggle.tsx",
-      lineNumber: 122,
-      columnNumber: 5
-    },
-    this
+      ...i
+    }
   );
 });
 export {
-  P as Toggle,
-  j as useToggleStyles
+  Q as Toggle,
+  I as useToggleStyles
 };
 //# sourceMappingURL=toggle.js.map

package/dist/components/toggle/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../../src/components/toggle/toggle.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\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\"\n\nexport type ToggleVariant = \"default\" | \"destructive\"\nexport type ToggleSize = \"sm\" | \"base\" | \"lg\"\n\nexport const useToggleStyles = makeVoltStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n    flexShrink: 0,\n    cursor: \"pointer\",\n    fontWeight: tokens.fontWeightSemibold,\n    transitionProperty: \"all\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    ...shorthands.borderStyle(\"none\"),\n    ...shorthands.borderWidth(0),\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineOffset: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.semFocusRing,\n    },\n    \":disabled, &[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n    \"& svg\": {\n      flexShrink: 0,\n      pointerEvents: \"none\",\n      color: \"currentColor\",\n    },\n  },\n  // Variants\n  default: {\n    backgroundColor: \"transparent\",\n    color: tokens.semAccentLight,\n    \":hover\": {\n      backgroundColor: tokens.semAccentSoft,\n    },\n    \"&[data-state='on']\": {\n      backgroundColor: tokens.accentA3,\n      color: tokens.semAccentOnSoft,\n    },\n    \"&[data-state='on']:hover\": {\n      backgroundColor: tokens.accentA4,\n    },\n  },\n  destructive: {\n    backgroundColor: \"transparent\",\n    color: tokens.semErrorLight,\n    \":hover\": {\n      backgroundColor: tokens.semErrorSoft,\n    },\n    \"&[data-state='on']\": {\n      backgroundColor: tokens.errorA3,\n      color: tokens.semErrorOnSoft,\n    },\n    \"&[data-state='on']:hover\": {\n      backgroundColor: tokens.errorA4,\n    },\n  },\n  // Sizes\n  sm: {\n    height: \"1.5rem\",\n    minWidth: \"1.5rem\",\n    ...shorthands.borderRadius(tokens.radiusLg),\n    ...shorthands.paddingInline(\"0.375rem\"),\n    \"& svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n  base: {\n    height: \"2rem\",\n    minWidth: \"2rem\",\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.paddingInline(tokens.spacingElement2),\n    \"& svg\": {\n      width: \"1rem\",\n      height: \"1rem\",\n    },\n  },\n  lg: {\n    height: \"2.5rem\",\n    minWidth: \"2.5rem\",\n    ...shorthands.borderRadius(tokens.radius2xl),\n    ...shorthands.paddingInline(\"0.625rem\"),\n    \"& svg\": {\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n    },\n  },\n})\n\nexport type ToggleProps = React.ComponentProps<typeof TogglePrimitive.Root> & {\n  variant?: ToggleVariant\n  size?: ToggleSize\n}\n\nexport const Toggle = React.forwardRef<\n  React.ComponentRef<typeof TogglePrimitive.Root>,\n  ToggleProps\n>(function Toggle(\n  { className, variant = \"default\", size = \"base\", ...props },\n  ref\n) {\n  const styles = useToggleStyles()\n\n  return (\n    <TogglePrimitive.Root\n      ref={ref}\n      data-slot=\"toggle\"\n      {...{ [SLOT_ATTR]: \"toggle\" }}\n      className={mergeClasses(\n        styles.root,\n        styles[variant],\n        styles[size],\n        className\n      )}\n      {...props}\n    />\n  )\n})\n"],"names":["useToggleStyles","makeVoltStyles","shorthands","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.semFocusRing","tokens.semAccentLight","tokens.semAccentSoft","tokens.accentA3","tokens.semAccentOnSoft","tokens.accentA4","tokens.semErrorLight","tokens.semErrorSoft","tokens.errorA3","tokens.semErrorOnSoft","tokens.errorA4","tokens.radiusLg","tokens.radiusXl","tokens.spacingElement2","tokens.radius2xl","Toggle","React","className","variant","size","props","ref","styles","jsxDEV","TogglePrimitive.Root","SLOT_ATTR","mergeClasses"],"mappings":";;;;;;;;AAWO,MAAMA,IAAkBC,EAAe;AAAA,EAC5C,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,GAAGC,EAAW,IAAIC,CAAsB;AAAA,IACxC,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,YAAYC;AAAAA,IACZ,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,2CAA2C;AAAA,MACzC,oBAAoB;AAAA,IAAA;AAAA,IAEtB,GAAGF,EAAW,YAAY,MAAM;AAAA,IAChC,GAAGA,EAAW,YAAY,CAAC;AAAA,IAC3B,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAc;AAAA,MACd,cAAcG;AAAAA,IAAO;AAAA,IAEvB,+BAA+B;AAAA,MAC7B,eAAe;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,IAEX,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAAA;AAAA,EAGF,SAAS;AAAA,IACP,iBAAiB;AAAA,IACjB,OAAOC;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,sBAAsB;AAAA,MACpB,iBAAiBC;AAAAA,MACjB,OAAOC;AAAAA,IAAO;AAAA,IAEhB,4BAA4B;AAAA,MAC1B,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA,EAEF,aAAa;AAAA,IACX,iBAAiB;AAAA,IACjB,OAAOC;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,sBAAsB;AAAA,MACpB,iBAAiBC;AAAAA,MACjB,OAAOC;AAAAA,IAAO;AAAA,IAEhB,4BAA4B;AAAA,MAC1B,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA;AAAA,EAGF,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAGb,EAAW,aAAac,CAAe;AAAA,IAC1C,GAAGd,EAAW,cAAc,UAAU;AAAA,IACtC,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAGA,EAAW,aAAae,CAAe;AAAA,IAC1C,GAAGf,EAAW,cAAcgB,CAAsB;AAAA,IAClD,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAGhB,EAAW,aAAaiB,CAAgB;AAAA,IAC3C,GAAGjB,EAAW,cAAc,UAAU;AAAA,IACtC,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,CAAC,GAOYkB,IAASC,EAAM,WAG1B,SACA,EAAE,WAAAC,GAAW,SAAAC,IAAU,WAAW,MAAAC,IAAO,QAAQ,GAAGC,EAAA,GACpDC,GACA;AACA,QAAMC,IAAS3B,EAAA;AAEf,SACE4B,gBAAAA,EAAAA;AAAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,aAAU;AAAA,MACJ,CAACI,CAAS,GAAG;AAAA,MACnB,WAAWC;AAAAA,QACTJ,EAAO;AAAA,QACPA,EAAOJ,CAAO;AAAA,QACdI,EAAOH,CAAI;AAAA,QACXF;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,IAVN;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAA;AAAA,EAAA;AAaJ,CAAC;"}
+{"version":3,"file":"toggle.js","sources":["../../../src/components/toggle/toggle.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\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\"\n\nexport type ToggleVariant = \"default\" | \"destructive\"\nexport type ToggleSize = \"sm\" | \"base\" | \"lg\"\n\nexport const useToggleStyles = makeVoltStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n    flexShrink: 0,\n    cursor: \"pointer\",\n    fontWeight: tokens.fontWeightSemibold,\n    transitionProperty: \"all\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    ...shorthands.borderStyle(\"none\"),\n    ...shorthands.borderWidth(0),\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineOffset: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.semFocusRing,\n    },\n    \":disabled, &[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n    \"& svg\": {\n      flexShrink: 0,\n      pointerEvents: \"none\",\n      color: \"currentColor\",\n    },\n  },\n  // Variants\n  default: {\n    backgroundColor: \"transparent\",\n    color: tokens.semAccentLight,\n    \":hover\": {\n      backgroundColor: tokens.semAccentSoft,\n    },\n    \"&[data-state='on']\": {\n      backgroundColor: tokens.accentA3,\n      color: tokens.semAccentOnSoft,\n    },\n    \"&[data-state='on']:hover\": {\n      backgroundColor: tokens.accentA4,\n    },\n  },\n  destructive: {\n    backgroundColor: \"transparent\",\n    color: tokens.semErrorLight,\n    \":hover\": {\n      backgroundColor: tokens.semErrorSoft,\n    },\n    \"&[data-state='on']\": {\n      backgroundColor: tokens.errorA3,\n      color: tokens.semErrorOnSoft,\n    },\n    \"&[data-state='on']:hover\": {\n      backgroundColor: tokens.errorA4,\n    },\n  },\n  // Sizes\n  sm: {\n    height: \"1.5rem\",\n    minWidth: \"1.5rem\",\n    ...shorthands.borderRadius(tokens.radiusLg),\n    ...shorthands.paddingInline(\"0.375rem\"),\n    \"& svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n  base: {\n    height: \"2rem\",\n    minWidth: \"2rem\",\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.paddingInline(tokens.spacingElement2),\n    \"& svg\": {\n      width: \"1rem\",\n      height: \"1rem\",\n    },\n  },\n  lg: {\n    height: \"2.5rem\",\n    minWidth: \"2.5rem\",\n    ...shorthands.borderRadius(tokens.radius2xl),\n    ...shorthands.paddingInline(\"0.625rem\"),\n    \"& svg\": {\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n    },\n  },\n})\n\nexport type ToggleProps = React.ComponentProps<typeof TogglePrimitive.Root> & {\n  variant?: ToggleVariant\n  size?: ToggleSize\n}\n\nexport const Toggle = React.forwardRef<\n  React.ComponentRef<typeof TogglePrimitive.Root>,\n  ToggleProps\n>(function Toggle(\n  { className, variant = \"default\", size = \"base\", ...props },\n  ref\n) {\n  const styles = useToggleStyles()\n\n  return (\n    <TogglePrimitive.Root\n      ref={ref}\n      data-slot=\"toggle\"\n      {...{ [SLOT_ATTR]: \"toggle\" }}\n      className={mergeClasses(\n        styles.root,\n        styles[variant],\n        styles[size],\n        className\n      )}\n      {...props}\n    />\n  )\n})\n"],"names":["useToggleStyles","makeVoltStyles","shorthands","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.semFocusRing","tokens.semAccentLight","tokens.semAccentSoft","tokens.accentA3","tokens.semAccentOnSoft","tokens.accentA4","tokens.semErrorLight","tokens.semErrorSoft","tokens.errorA3","tokens.semErrorOnSoft","tokens.errorA4","tokens.radiusLg","tokens.radiusXl","tokens.spacingElement2","tokens.radius2xl","Toggle","React","className","variant","size","props","ref","styles","jsx","TogglePrimitive.Root","SLOT_ATTR","mergeClasses"],"mappings":";;;;;;;;AAWO,MAAMA,IAAkBC,EAAe;AAAA,EAC5C,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,GAAGC,EAAW,IAAIC,CAAsB;AAAA,IACxC,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,YAAYC;AAAAA,IACZ,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,2CAA2C;AAAA,MACzC,oBAAoB;AAAA,IAAA;AAAA,IAEtB,GAAGF,EAAW,YAAY,MAAM;AAAA,IAChC,GAAGA,EAAW,YAAY,CAAC;AAAA,IAC3B,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAc;AAAA,MACd,cAAcG;AAAAA,IAAO;AAAA,IAEvB,+BAA+B;AAAA,MAC7B,eAAe;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,IAEX,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAAA;AAAA,EAGF,SAAS;AAAA,IACP,iBAAiB;AAAA,IACjB,OAAOC;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,sBAAsB;AAAA,MACpB,iBAAiBC;AAAAA,MACjB,OAAOC;AAAAA,IAAO;AAAA,IAEhB,4BAA4B;AAAA,MAC1B,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA,EAEF,aAAa;AAAA,IACX,iBAAiB;AAAA,IACjB,OAAOC;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,sBAAsB;AAAA,MACpB,iBAAiBC;AAAAA,MACjB,OAAOC;AAAAA,IAAO;AAAA,IAEhB,4BAA4B;AAAA,MAC1B,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA;AAAA,EAGF,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAGb,EAAW,aAAac,CAAe;AAAA,IAC1C,GAAGd,EAAW,cAAc,UAAU;AAAA,IACtC,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAGA,EAAW,aAAae,CAAe;AAAA,IAC1C,GAAGf,EAAW,cAAcgB,CAAsB;AAAA,IAClD,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAGhB,EAAW,aAAaiB,CAAgB;AAAA,IAC3C,GAAGjB,EAAW,cAAc,UAAU;AAAA,IACtC,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,CAAC,GAOYkB,IAASC,EAAM,WAG1B,SACA,EAAE,WAAAC,GAAW,SAAAC,IAAU,WAAW,MAAAC,IAAO,QAAQ,GAAGC,EAAA,GACpDC,GACA;AACA,QAAMC,IAAS3B,EAAA;AAEf,SACE,gBAAA4B;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,aAAU;AAAA,MACJ,CAACI,CAAS,GAAG;AAAA,MACnB,WAAWC;AAAAA,QACTJ,EAAO;AAAA,QACPA,EAAOJ,CAAO;AAAA,QACdI,EAAOH,CAAI;AAAA,QACXF;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/components/tooltip/tooltip.js

@@ -1,32 +1,32 @@
-import { j as a } from "../../vendor/react/jsx-dev-runtime.js";
+import { jsx as r, jsxs as y } from "react/jsx-runtime";
 import * as e from "react";
-import { Root as x, Content as v, Arrow as N, Portal as b, Provider as w, Trigger as y } from "../../vendor/@radix-ui/react-tooltip/dist/index.js";
-import { shorthands as s } 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 T } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { useDensity as h } from "../density-provider/density-provider.js";
-import { makeVoltStyles as R } from "../../styles/make-styles.js";
-import { spacingElement2 as k, radiusLg as D, error12 as f, gray12 as m, spacingElement1 as l, error1 as C, errorA12 as E, gray1 as j, textXs as V } from "../../tokens/index.js";
-const P = R({
+import { Root as T, Content as x, Arrow as v, Portal as w, Provider as b, Trigger as R } from "../../vendor/@radix-ui/react-tooltip/dist/index.js";
+import { shorthands as l } 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 { mergeClasses as h } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { useDensity as C } from "../density-provider/density-provider.js";
+import { makeVoltStyles as N } from "../../styles/make-styles.js";
+import { spacingElement2 as P, radiusLg as k, error12 as d, gray12 as p, spacingElement1 as n, error1 as z, errorA12 as S, gray1 as X, textXs as Y } from "../../tokens/index.js";
+const A = N({
   popup: {
     width: "fit-content",
     transformOrigin: "var(--radix-tooltip-content-transform-origin)",
-    ...s.borderRadius(D),
-    ...s.padding(k),
+    ...l.borderRadius(k),
+    ...l.padding(P),
     // v1 shadow-md; elevation has no token in this package.
     boxShadow: "0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a",
-    fontSize: V,
+    fontSize: Y,
     // v1 leading-none; no line-height token exists.
     lineHeight: "1",
     textWrap: "balance",
     zIndex: 50,
     "&[data-variant='default']": {
-      backgroundColor: m,
-      color: j
+      backgroundColor: p,
+      color: X
     },
     "&[data-variant='destructive']": {
-      backgroundColor: E,
-      color: C
+      backgroundColor: S,
+      color: z
     },
     "&[data-state='open']": {
       animationName: {
@@ -40,7 +40,7 @@ const P = R({
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateY(-${l}) scale(0.95)`
+          transform: `translateY(-${n}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateY(0) scale(1)" }
       }
@@ -49,7 +49,7 @@ const P = R({
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateX(${l}) scale(0.95)`
+          transform: `translateX(${n}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateX(0) scale(1)" }
       }
@@ -58,7 +58,7 @@ const P = R({
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateX(-${l}) scale(0.95)`
+          transform: `translateX(-${n}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateX(0) scale(1)" }
       }
@@ -67,7 +67,7 @@ const P = R({
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateY(${l}) scale(0.95)`
+          transform: `translateY(${n}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateY(0) scale(1)" }
       }
@@ -87,127 +87,83 @@ const P = R({
     width: "0.625rem",
     height: "0.625rem",
     transform: "translateY(calc(-50% - 2px)) rotate(45deg)",
-    ...s.borderRadius("2px"),
+    ...l.borderRadius("2px"),
     "&[data-variant='default']": {
-      backgroundColor: m,
-      fill: m
+      backgroundColor: p,
+      fill: p
     },
     "&[data-variant='destructive']": {
-      backgroundColor: f,
-      fill: f
+      backgroundColor: d,
+      fill: d
     }
   }
-}), F = e.forwardRef(function({ delayDuration: t = 0, ...o }, r) {
-  return /* @__PURE__ */ a.jsxDEV(
-    w,
+}), O = e.forwardRef(function({ delayDuration: t = 0, ...o }, a) {
+  return /* @__PURE__ */ r(
+    b,
     {
       delayDuration: t,
       "data-slot": "tooltip-provider",
       ...o
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/tooltip/tooltip.tsx",
-      lineNumber: 112,
-      columnNumber: 5
-    },
-    this
+    }
   );
-}), I = e.forwardRef(
+}), H = e.forwardRef(
   function(t, o) {
-    return /* @__PURE__ */ a.jsxDEV(x, { "data-slot": "tooltip", ...t }, void 0, !1, {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/tooltip/tooltip.tsx",
-      lineNumber: 124,
-      columnNumber: 12
-    }, this);
+    return /* @__PURE__ */ r(T, { "data-slot": "tooltip", ...t });
   }
-), L = e.forwardRef(function({ className: t, ...o }, r) {
-  return /* @__PURE__ */ a.jsxDEV(
-    y,
+), Q = e.forwardRef(function({ className: t, ...o }, a) {
+  return /* @__PURE__ */ r(
+    R,
     {
-      ref: r,
+      ref: a,
       "data-slot": "tooltip-trigger",
-      [n]: "tooltip-trigger",
+      [s]: "tooltip-trigger",
       className: t,
       ...o
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/tooltip/tooltip.tsx",
-      lineNumber: 137,
-      columnNumber: 5
-    },
-    this
+    }
   );
-}), O = e.forwardRef(
+}), V = e.forwardRef(
   function(t, o) {
-    return /* @__PURE__ */ a.jsxDEV(
-      b,
+    return /* @__PURE__ */ r(
+      w,
       {
         "data-slot": "tooltip-portal",
-        [n]: "tooltip-portal",
+        [s]: "tooltip-portal",
         ...t
-      },
-      void 0,
-      !1,
-      {
-        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/tooltip/tooltip.tsx",
-        lineNumber: 154,
-        columnNumber: 7
-      },
-      this
+      }
     );
   }
-), H = e.forwardRef(function({ className: t, hideArrow: o = !1, variant: r = "default", children: d, ...u }, g) {
-  const p = P(), c = h();
-  return /* @__PURE__ */ a.jsxDEV(
-    v,
+), W = e.forwardRef(function({ className: t, hideArrow: o = !1, variant: a = "default", children: f, ...u }, g) {
+  const m = A(), c = C();
+  return /* @__PURE__ */ y(
+    x,
     {
       ref: g,
       "data-slot": "tooltip-content",
-      [n]: "tooltip-content",
+      [s]: "tooltip-content",
       ...c !== void 0 ? { "data-density": c } : {},
-      "data-variant": r,
-      className: T(p.popup, t),
+      "data-variant": a,
+      className: h(m.popup, t),
       ...u,
       children: [
-        d,
-        !o && /* @__PURE__ */ a.jsxDEV(
-          N,
+        f,
+        !o && /* @__PURE__ */ r(
+          v,
           {
             "data-slot": "tooltip-arrow",
-            [n]: "tooltip-arrow",
-            "data-variant": r,
-            className: p.arrow
-          },
-          void 0,
-          !1,
-          {
-            fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/tooltip/tooltip.tsx",
-            lineNumber: 195,
-            columnNumber: 9
-          },
-          this
+            [s]: "tooltip-arrow",
+            "data-variant": a,
+            className: m.arrow
+          }
         )
       ]
-    },
-    void 0,
-    !0,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/tooltip/tooltip.tsx",
-      lineNumber: 184,
-      columnNumber: 5
-    },
-    this
+    }
   );
 });
 export {
-  I as Tooltip,
-  H as TooltipContent,
-  O as TooltipPortal,
-  F as TooltipProvider,
-  L as TooltipTrigger
+  H as Tooltip,
+  W as TooltipContent,
+  V as TooltipPortal,
+  O as TooltipProvider,
+  Q as TooltipTrigger
 };
 //# sourceMappingURL=tooltip.js.map

package/dist/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\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\"\n\nconst useStyles = makeVoltStyles({\n  popup: {\n    width: \"fit-content\",\n    transformOrigin: \"var(--radix-tooltip-content-transform-origin)\",\n    ...shorthands.borderRadius(tokens.radiusLg),\n    ...shorthands.padding(tokens.spacingElement2),\n    // v1 shadow-md; elevation has no token in this package.\n    boxShadow: \"0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a\",\n    fontSize: tokens.textXs,\n    // v1 leading-none; no line-height token exists.\n    lineHeight: \"1\",\n    textWrap: \"balance\",\n    zIndex: 50,\n    \"&[data-variant='default']\": {\n      backgroundColor: tokens.gray12,\n      color: tokens.gray1,\n    },\n    \"&[data-variant='destructive']\": {\n      backgroundColor: tokens.errorA12,\n      color: tokens.error1,\n    },\n    \"&[data-state='open']\": {\n      animationName: {\n        from: { opacity: 0, transform: \"scale(0.95)\" },\n        to: { opacity: 1, transform: \"scale(1)\" },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='open'][data-side='bottom']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateY(-${tokens.spacingElement1}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateY(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='left']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateX(${tokens.spacingElement1}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateX(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='right']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateX(-${tokens.spacingElement1}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateX(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='top']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateY(${tokens.spacingElement1}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateY(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: { opacity: 1, transform: \"scale(1)\" },\n        to: { opacity: 0, transform: \"scale(0.95)\" },\n      },\n      animationDuration: \"0ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  arrow: {\n    position: \"relative\",\n    zIndex: 50,\n    width: \"0.625rem\",\n    height: \"0.625rem\",\n    transform: \"translateY(calc(-50% - 2px)) rotate(45deg)\",\n    ...shorthands.borderRadius(\"2px\"),\n    \"&[data-variant='default']\": {\n      backgroundColor: tokens.gray12,\n      fill: tokens.gray12,\n    },\n    \"&[data-variant='destructive']\": {\n      backgroundColor: tokens.error12,\n      fill: tokens.error12,\n    },\n  },\n})\n\nexport type TooltipProviderProps = React.ComponentProps<\n  typeof TooltipPrimitive.Provider\n>\n\nexport const TooltipProvider = React.forwardRef<\n  HTMLElement,\n  TooltipProviderProps\n>(function TooltipProvider({ delayDuration = 0, ...props }, _ref) {\n  return (\n    <TooltipPrimitive.Provider\n      delayDuration={delayDuration}\n      data-slot=\"tooltip-provider\"\n      {...props}\n    />\n  )\n})\n\nexport type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nexport const Tooltip = React.forwardRef<HTMLElement, TooltipProps>(\n  function Tooltip(props, _ref) {\n    return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n  }\n)\n\nexport type TooltipTriggerProps = React.ComponentProps<\n  typeof TooltipPrimitive.Trigger\n>\n\nexport const TooltipTrigger = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Trigger>,\n  TooltipTriggerProps\n>(function TooltipTrigger({ className, ...props }, ref) {\n  return (\n    <TooltipPrimitive.Trigger\n      ref={ref}\n      data-slot=\"tooltip-trigger\"\n      {...{ [SLOT_ATTR]: \"tooltip-trigger\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport type TooltipPortalProps = React.ComponentProps<\n  typeof TooltipPrimitive.Portal\n>\n\nexport const TooltipPortal = React.forwardRef<HTMLElement, TooltipPortalProps>(\n  function TooltipPortal(props, _ref) {\n    return (\n      <TooltipPrimitive.Portal\n        data-slot=\"tooltip-portal\"\n        {...{ [SLOT_ATTR]: \"tooltip-portal\" }}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type TooltipContentProps = React.ComponentProps<\n  typeof TooltipPrimitive.Content\n> & {\n  hideArrow?: boolean\n  variant?: \"default\" | \"destructive\"\n}\n\nexport const TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(function TooltipContent(\n  { className, hideArrow = false, variant = \"default\", children, ...props },\n  ref\n) {\n  const styles = useStyles()\n  // DENSITY-SPEC.md §4.4 — portal content boundary; see dialog.tsx's identical comment. Tooltip\n  // content rarely nests density-consuming children, but the mechanism is applied uniformly across\n  // every portal-content component rather than special-cased per component.\n  const override = useDensity()\n\n  return (\n    <TooltipPrimitive.Content\n      ref={ref}\n      data-slot=\"tooltip-content\"\n      {...{ [SLOT_ATTR]: \"tooltip-content\" }}\n      {...(override !== undefined ? { \"data-density\": override } : {})}\n      data-variant={variant}\n      className={mergeClasses(styles.popup, className)}\n      {...props}\n    >\n      {children}\n      {!hideArrow && (\n        <TooltipPrimitive.Arrow\n          data-slot=\"tooltip-arrow\"\n          {...{ [SLOT_ATTR]: \"tooltip-arrow\" }}\n          data-variant={variant}\n          className={styles.arrow}\n        />\n      )}\n    </TooltipPrimitive.Content>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","shorthands","tokens.radiusLg","tokens.spacingElement2","tokens.textXs","tokens.gray12","tokens.gray1","tokens.errorA12","tokens.error1","tokens.spacingElement1","tokens.error12","TooltipProvider","React","delayDuration","props","_ref","jsxDEV","TooltipPrimitive.Provider","Tooltip","TooltipPrimitive.Root","TooltipTrigger","className","ref","TooltipPrimitive.Trigger","SLOT_ATTR","TooltipPortal","TooltipPrimitive.Portal","TooltipContent","hideArrow","variant","children","styles","override","useDensity","TooltipPrimitive.Content","mergeClasses","TooltipPrimitive.Arrow"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\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\"\n\nconst useStyles = makeVoltStyles({\n  popup: {\n    width: \"fit-content\",\n    transformOrigin: \"var(--radix-tooltip-content-transform-origin)\",\n    ...shorthands.borderRadius(tokens.radiusLg),\n    ...shorthands.padding(tokens.spacingElement2),\n    // v1 shadow-md; elevation has no token in this package.\n    boxShadow: \"0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a\",\n    fontSize: tokens.textXs,\n    // v1 leading-none; no line-height token exists.\n    lineHeight: \"1\",\n    textWrap: \"balance\",\n    zIndex: 50,\n    \"&[data-variant='default']\": {\n      backgroundColor: tokens.gray12,\n      color: tokens.gray1,\n    },\n    \"&[data-variant='destructive']\": {\n      backgroundColor: tokens.errorA12,\n      color: tokens.error1,\n    },\n    \"&[data-state='open']\": {\n      animationName: {\n        from: { opacity: 0, transform: \"scale(0.95)\" },\n        to: { opacity: 1, transform: \"scale(1)\" },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='open'][data-side='bottom']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateY(-${tokens.spacingElement1}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateY(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='left']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateX(${tokens.spacingElement1}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateX(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='right']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateX(-${tokens.spacingElement1}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateX(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='top']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateY(${tokens.spacingElement1}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateY(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: { opacity: 1, transform: \"scale(1)\" },\n        to: { opacity: 0, transform: \"scale(0.95)\" },\n      },\n      animationDuration: \"0ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  arrow: {\n    position: \"relative\",\n    zIndex: 50,\n    width: \"0.625rem\",\n    height: \"0.625rem\",\n    transform: \"translateY(calc(-50% - 2px)) rotate(45deg)\",\n    ...shorthands.borderRadius(\"2px\"),\n    \"&[data-variant='default']\": {\n      backgroundColor: tokens.gray12,\n      fill: tokens.gray12,\n    },\n    \"&[data-variant='destructive']\": {\n      backgroundColor: tokens.error12,\n      fill: tokens.error12,\n    },\n  },\n})\n\nexport type TooltipProviderProps = React.ComponentProps<\n  typeof TooltipPrimitive.Provider\n>\n\nexport const TooltipProvider = React.forwardRef<\n  HTMLElement,\n  TooltipProviderProps\n>(function TooltipProvider({ delayDuration = 0, ...props }, _ref) {\n  return (\n    <TooltipPrimitive.Provider\n      delayDuration={delayDuration}\n      data-slot=\"tooltip-provider\"\n      {...props}\n    />\n  )\n})\n\nexport type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nexport const Tooltip = React.forwardRef<HTMLElement, TooltipProps>(\n  function Tooltip(props, _ref) {\n    return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n  }\n)\n\nexport type TooltipTriggerProps = React.ComponentProps<\n  typeof TooltipPrimitive.Trigger\n>\n\nexport const TooltipTrigger = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Trigger>,\n  TooltipTriggerProps\n>(function TooltipTrigger({ className, ...props }, ref) {\n  return (\n    <TooltipPrimitive.Trigger\n      ref={ref}\n      data-slot=\"tooltip-trigger\"\n      {...{ [SLOT_ATTR]: \"tooltip-trigger\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport type TooltipPortalProps = React.ComponentProps<\n  typeof TooltipPrimitive.Portal\n>\n\nexport const TooltipPortal = React.forwardRef<HTMLElement, TooltipPortalProps>(\n  function TooltipPortal(props, _ref) {\n    return (\n      <TooltipPrimitive.Portal\n        data-slot=\"tooltip-portal\"\n        {...{ [SLOT_ATTR]: \"tooltip-portal\" }}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type TooltipContentProps = React.ComponentProps<\n  typeof TooltipPrimitive.Content\n> & {\n  hideArrow?: boolean\n  variant?: \"default\" | \"destructive\"\n}\n\nexport const TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(function TooltipContent(\n  { className, hideArrow = false, variant = \"default\", children, ...props },\n  ref\n) {\n  const styles = useStyles()\n  // DENSITY-SPEC.md §4.4 — portal content boundary; see dialog.tsx's identical comment. Tooltip\n  // content rarely nests density-consuming children, but the mechanism is applied uniformly across\n  // every portal-content component rather than special-cased per component.\n  const override = useDensity()\n\n  return (\n    <TooltipPrimitive.Content\n      ref={ref}\n      data-slot=\"tooltip-content\"\n      {...{ [SLOT_ATTR]: \"tooltip-content\" }}\n      {...(override !== undefined ? { \"data-density\": override } : {})}\n      data-variant={variant}\n      className={mergeClasses(styles.popup, className)}\n      {...props}\n    >\n      {children}\n      {!hideArrow && (\n        <TooltipPrimitive.Arrow\n          data-slot=\"tooltip-arrow\"\n          {...{ [SLOT_ATTR]: \"tooltip-arrow\" }}\n          data-variant={variant}\n          className={styles.arrow}\n        />\n      )}\n    </TooltipPrimitive.Content>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","shorthands","tokens.radiusLg","tokens.spacingElement2","tokens.textXs","tokens.gray12","tokens.gray1","tokens.errorA12","tokens.error1","tokens.spacingElement1","tokens.error12","TooltipProvider","React","delayDuration","props","_ref","jsx","TooltipPrimitive.Provider","Tooltip","TooltipPrimitive.Root","TooltipTrigger","className","ref","TooltipPrimitive.Trigger","SLOT_ATTR","TooltipPortal","TooltipPrimitive.Portal","TooltipContent","hideArrow","variant","children","styles","override","useDensity","jsxs","TooltipPrimitive.Content","mergeClasses","TooltipPrimitive.Arrow"],"mappings":"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"}

package/dist/lib/clear-button.js

@@ -1,11 +1,11 @@
-import { j as o } from "../vendor/react/jsx-dev-runtime.js";
-import * as n from "react";
+import { jsx as t } from "react/jsx-runtime";
+import * as s from "react";
 import { SLOT_ATTR as a } from "../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as m } from "../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as u } from "../styles/make-styles.js";
-import { accentA8 as c } from "../tokens/index.js";
+import { makeVoltStyles as c } from "../styles/make-styles.js";
+import { accentA8 as u } from "../tokens/index.js";
 import { CloseIcon as f } from "./icons.js";
-const p = u({
+const p = c({
   root: {
     display: "inline-flex",
     alignItems: "center",
@@ -22,7 +22,7 @@ const p = u({
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "1px",
-      outlineColor: c
+      outlineColor: u
     }
   },
   icon: {
@@ -30,35 +30,23 @@ const p = u({
     width: "0.75rem",
     height: "0.75rem"
   }
-}), C = n.forwardRef(function({ className: r, label: t = "Remove", children: l, ...i }, s) {
-  const e = p();
-  return /* @__PURE__ */ o.jsxDEV(
+}), R = s.forwardRef(function({ className: e, label: r = "Remove", children: n, ...i }, l) {
+  const o = p();
+  return /* @__PURE__ */ t(
     "button",
     {
-      ref: s,
+      ref: l,
       type: "button",
       "data-slot": "clear-button",
       [a]: "clear-button",
-      "aria-label": t,
-      className: m(e.root, r),
+      "aria-label": r,
+      className: m(o.root, e),
       ...i,
-      children: l ?? /* @__PURE__ */ o.jsxDEV(f, { className: e.icon }, void 0, !1, {
-        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/lib/clear-button.tsx",
-        lineNumber: 74,
-        columnNumber: 20
-      }, this)
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/lib/clear-button.tsx",
-      lineNumber: 65,
-      columnNumber: 5
-    },
-    this
+      children: n ?? /* @__PURE__ */ t(f, { className: o.icon })
+    }
   );
 });
 export {
-  C as ClearButton
+  R as ClearButton
 };
 //# sourceMappingURL=clear-button.js.map

package/dist/lib/clear-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"clear-button.js","sources":["../../src/lib/clear-button.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../renderer/contract\"\nimport { makeVoltStyles } from \"../styles/make-styles\"\nimport * as tokens from \"../tokens\"\nimport { CloseIcon } from \"./icons\"\n\n/**\n * ClearButton — v1's shared dismiss button ported to Griffel atoms.\n *\n * v1 (`packages/react/src/lib/clear-button.tsx`) paints a round, shrink-proof, hover-tinted icon\n * button and falls back to a size-3 `CloseIcon` when no children are given. Only the mechanism\n * changes here: `rounded-full` becomes a literal fully-rounded radius and `hover:bg-current/10`\n * becomes a single `:hover` atom (`color-mix(in srgb, currentColor 10%, transparent)`) — the colour\n * comes from `currentColor`, so one rule covers every host. The focus-visible ring is 2px solid\n * `accent-a8` with a 1px offset, exactly as v1.\n *\n * Both Callout and Pill compose this instead of inlining their own approximation, so the hover,\n * focus and fallback-icon behaviour lives in one place.\n */\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    // rounded-full — no token for a fully rounded radius.\n    borderRadius: \"9999px\",\n    flexShrink: 0,\n    cursor: \"pointer\",\n    \":hover\": {\n      // v1's `hover:bg-current/10` — a literal because no token expresses a currentColor tint.\n      backgroundColor: \"color-mix(in srgb, currentColor 10%, transparent)\",\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"1px\",\n      outlineColor: tokens.accentA8,\n    },\n  },\n  icon: {\n    // size-3 — the CloseIcon fallback.\n    width: \"0.75rem\",\n    height: \"0.75rem\",\n  },\n})\n\nexport type ClearButtonProps = React.ComponentProps<\"button\"> & {\n  label?: string\n}\n\nexport const ClearButton = React.forwardRef<\n  HTMLButtonElement,\n  ClearButtonProps\n>(function ClearButton(\n  { className, label = \"Remove\", children, ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-slot=\"clear-button\"\n      {...{ [SLOT_ATTR]: \"clear-button\" }}\n      aria-label={label}\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    >\n      {children ?? <CloseIcon className={styles.icon} />}\n    </button>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","tokens.accentA8","ClearButton","React","className","label","children","props","ref","styles","jsxDEV","SLOT_ATTR","mergeClasses","CloseIcon"],"mappings":";;;;;;;AAuBA,MAAMA,IAAYC,EAAe;AAAA,EAC/B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA;AAAA,IAEhB,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,UAAU;AAAA;AAAA,MAER,iBAAiB;AAAA,IAAA;AAAA,IAEnB,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAcC;AAAAA,IAAO;AAAA,EACvB;AAAA,EAEF,MAAM;AAAA;AAAA,IAEJ,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAEZ,CAAC,GAMYC,IAAcC,EAAM,WAG/B,SACA,EAAE,WAAAC,GAAW,OAAAC,IAAQ,UAAU,UAAAC,GAAU,GAAGC,EAAA,GAC5CC,GACA;AACA,QAAMC,IAASV,EAAA;AAEf,SACEW,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,MAAK;AAAA,MACL,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,cAAYN;AAAA,MACZ,WAAWO,EAAaH,EAAO,MAAML,CAAS;AAAA,MAC7C,GAAGG;AAAA,MAEH,UAAAD,KAAYI,gBAAAA,EAAAA,OAACG,GAAA,EAAU,WAAWJ,EAAO,KAAA,GAA7B,QAAA,IAAA;AAAA,QAAA,UAAA;AAAA,QAAA,YAAA;AAAA,QAAA,cAAA;AAAA,MAAA,GAAA,IAAmC;AAAA,IAAA;AAAA,IATlD;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAA;AAAA,EAAA;AAYJ,CAAC;"}
+{"version":3,"file":"clear-button.js","sources":["../../src/lib/clear-button.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../renderer/contract\"\nimport { makeVoltStyles } from \"../styles/make-styles\"\nimport * as tokens from \"../tokens\"\nimport { CloseIcon } from \"./icons\"\n\n/**\n * ClearButton — v1's shared dismiss button ported to Griffel atoms.\n *\n * v1 (`packages/react/src/lib/clear-button.tsx`) paints a round, shrink-proof, hover-tinted icon\n * button and falls back to a size-3 `CloseIcon` when no children are given. Only the mechanism\n * changes here: `rounded-full` becomes a literal fully-rounded radius and `hover:bg-current/10`\n * becomes a single `:hover` atom (`color-mix(in srgb, currentColor 10%, transparent)`) — the colour\n * comes from `currentColor`, so one rule covers every host. The focus-visible ring is 2px solid\n * `accent-a8` with a 1px offset, exactly as v1.\n *\n * Both Callout and Pill compose this instead of inlining their own approximation, so the hover,\n * focus and fallback-icon behaviour lives in one place.\n */\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    // rounded-full — no token for a fully rounded radius.\n    borderRadius: \"9999px\",\n    flexShrink: 0,\n    cursor: \"pointer\",\n    \":hover\": {\n      // v1's `hover:bg-current/10` — a literal because no token expresses a currentColor tint.\n      backgroundColor: \"color-mix(in srgb, currentColor 10%, transparent)\",\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"1px\",\n      outlineColor: tokens.accentA8,\n    },\n  },\n  icon: {\n    // size-3 — the CloseIcon fallback.\n    width: \"0.75rem\",\n    height: \"0.75rem\",\n  },\n})\n\nexport type ClearButtonProps = React.ComponentProps<\"button\"> & {\n  label?: string\n}\n\nexport const ClearButton = React.forwardRef<\n  HTMLButtonElement,\n  ClearButtonProps\n>(function ClearButton(\n  { className, label = \"Remove\", children, ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-slot=\"clear-button\"\n      {...{ [SLOT_ATTR]: \"clear-button\" }}\n      aria-label={label}\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    >\n      {children ?? <CloseIcon className={styles.icon} />}\n    </button>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","tokens.accentA8","ClearButton","React","className","label","children","props","ref","styles","jsx","SLOT_ATTR","mergeClasses","CloseIcon"],"mappings":";;;;;;;AAuBA,MAAMA,IAAYC,EAAe;AAAA,EAC/B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA;AAAA,IAEhB,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,UAAU;AAAA;AAAA,MAER,iBAAiB;AAAA,IAAA;AAAA,IAEnB,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAcC;AAAAA,IAAO;AAAA,EACvB;AAAA,EAEF,MAAM;AAAA;AAAA,IAEJ,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAEZ,CAAC,GAMYC,IAAcC,EAAM,WAG/B,SACA,EAAE,WAAAC,GAAW,OAAAC,IAAQ,UAAU,UAAAC,GAAU,GAAGC,EAAA,GAC5CC,GACA;AACA,QAAMC,IAASV,EAAA;AAEf,SACE,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,MAAK;AAAA,MACL,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,cAAYN;AAAA,MACZ,WAAWO,EAAaH,EAAO,MAAML,CAAS;AAAA,MAC7C,GAAGG;AAAA,MAEH,UAAAD,KAAY,gBAAAI,EAACG,GAAA,EAAU,WAAWJ,EAAO,KAAA,CAAM;AAAA,IAAA;AAAA,EAAA;AAGtD,CAAC;"}

package/dist/lib/icons.js

@@ -1,27 +1,15 @@
-import { j as e } from "../vendor/react/jsx-dev-runtime.js";
-const r = (l) => /* @__PURE__ */ e.jsxDEV(
+import { jsx as C } from "react/jsx-runtime";
+const L = (o) => /* @__PURE__ */ C(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
-    ...l,
-    children: /* @__PURE__ */ e.jsxDEV("path", { d: "M12 13.4L7.10005 18.3C6.91672 18.4833 6.68338 18.575 6.40005 18.575C6.11672 18.575 5.88338 18.4833 5.70005 18.3C5.51672 18.1167 5.42505 17.8833 5.42505 17.6C5.42505 17.3167 5.51672 17.0833 5.70005 16.9L10.6 12L5.70005 7.1C5.51672 6.91667 5.42505 6.68334 5.42505 6.4C5.42505 6.11667 5.51672 5.88334 5.70005 5.7C5.88338 5.51667 6.11672 5.425 6.40005 5.425C6.68338 5.425 6.91672 5.51667 7.10005 5.7L12 10.6L16.9 5.7C17.0834 5.51667 17.3167 5.425 17.6 5.425C17.8834 5.425 18.1167 5.51667 18.3 5.7C18.4834 5.88334 18.575 6.11667 18.575 6.4C18.575 6.68334 18.4834 6.91667 18.3 7.1L13.4 12L18.3 16.9C18.4834 17.0833 18.575 17.3167 18.575 17.6C18.575 17.8833 18.4834 18.1167 18.3 18.3C18.1167 18.4833 17.8834 18.575 17.6 18.575C17.3167 18.575 17.0834 18.4833 16.9 18.3L12 13.4Z" }, void 0, !1, {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/lib/icons.tsx",
-      lineNumber: 10,
-      columnNumber: 5
-    }, void 0)
-  },
-  void 0,
-  !1,
-  {
-    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/lib/icons.tsx",
-    lineNumber: 4,
-    columnNumber: 3
-  },
-  void 0
+    ...o,
+    children: /* @__PURE__ */ C("path", { d: "M12 13.4L7.10005 18.3C6.91672 18.4833 6.68338 18.575 6.40005 18.575C6.11672 18.575 5.88338 18.4833 5.70005 18.3C5.51672 18.1167 5.42505 17.8833 5.42505 17.6C5.42505 17.3167 5.51672 17.0833 5.70005 16.9L10.6 12L5.70005 7.1C5.51672 6.91667 5.42505 6.68334 5.42505 6.4C5.42505 6.11667 5.51672 5.88334 5.70005 5.7C5.88338 5.51667 6.11672 5.425 6.40005 5.425C6.68338 5.425 6.91672 5.51667 7.10005 5.7L12 10.6L16.9 5.7C17.0834 5.51667 17.3167 5.425 17.6 5.425C17.8834 5.425 18.1167 5.51667 18.3 5.7C18.4834 5.88334 18.575 6.11667 18.575 6.4C18.575 6.68334 18.4834 6.91667 18.3 7.1L13.4 12L18.3 16.9C18.4834 17.0833 18.575 17.3167 18.575 17.6C18.575 17.8833 18.4834 18.1167 18.3 18.3C18.1167 18.4833 17.8834 18.575 17.6 18.575C17.3167 18.575 17.0834 18.4833 16.9 18.3L12 13.4Z" })
+  }
 );
 export {
-  r as CloseIcon
+  L as CloseIcon
 };
 //# sourceMappingURL=icons.js.map

package/dist/lib/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sources":["../../src/lib/icons.tsx"],"sourcesContent":["import * as React from \"react\"\n\nconst CloseIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M12 13.4L7.10005 18.3C6.91672 18.4833 6.68338 18.575 6.40005 18.575C6.11672 18.575 5.88338 18.4833 5.70005 18.3C5.51672 18.1167 5.42505 17.8833 5.42505 17.6C5.42505 17.3167 5.51672 17.0833 5.70005 16.9L10.6 12L5.70005 7.1C5.51672 6.91667 5.42505 6.68334 5.42505 6.4C5.42505 6.11667 5.51672 5.88334 5.70005 5.7C5.88338 5.51667 6.11672 5.425 6.40005 5.425C6.68338 5.425 6.91672 5.51667 7.10005 5.7L12 10.6L16.9 5.7C17.0834 5.51667 17.3167 5.425 17.6 5.425C17.8834 5.425 18.1167 5.51667 18.3 5.7C18.4834 5.88334 18.575 6.11667 18.575 6.4C18.575 6.68334 18.4834 6.91667 18.3 7.1L13.4 12L18.3 16.9C18.4834 17.0833 18.575 17.3167 18.575 17.6C18.575 17.8833 18.4834 18.1167 18.3 18.3C18.1167 18.4833 17.8834 18.575 17.6 18.575C17.3167 18.575 17.0834 18.4833 16.9 18.3L12 13.4Z\" />\n  </svg>\n)\n\nexport { CloseIcon }\n"],"names":["CloseIcon","props","jsxDEV","this"],"mappings":";AAEA,MAAMA,IAAY,CAACC,MACjBC,gBAAAA,EAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAAC,gBAAAA,EAAAA,OAAC,QAAA,EAAK,GAAE,owBAAA,GAAR,QAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA,GAAAC,MAA4wB;AAAA,EAAA;AAAA,EAN9wB;AAAA,EAAA;AAAA,EAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA;AAAA,EAAAA;AAOA;"}
+{"version":3,"file":"icons.js","sources":["../../src/lib/icons.tsx"],"sourcesContent":["import * as React from \"react\"\n\nconst CloseIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M12 13.4L7.10005 18.3C6.91672 18.4833 6.68338 18.575 6.40005 18.575C6.11672 18.575 5.88338 18.4833 5.70005 18.3C5.51672 18.1167 5.42505 17.8833 5.42505 17.6C5.42505 17.3167 5.51672 17.0833 5.70005 16.9L10.6 12L5.70005 7.1C5.51672 6.91667 5.42505 6.68334 5.42505 6.4C5.42505 6.11667 5.51672 5.88334 5.70005 5.7C5.88338 5.51667 6.11672 5.425 6.40005 5.425C6.68338 5.425 6.91672 5.51667 7.10005 5.7L12 10.6L16.9 5.7C17.0834 5.51667 17.3167 5.425 17.6 5.425C17.8834 5.425 18.1167 5.51667 18.3 5.7C18.4834 5.88334 18.575 6.11667 18.575 6.4C18.575 6.68334 18.4834 6.91667 18.3 7.1L13.4 12L18.3 16.9C18.4834 17.0833 18.575 17.3167 18.575 17.6C18.575 17.8833 18.4834 18.1167 18.3 18.3C18.1167 18.4833 17.8834 18.575 17.6 18.575C17.3167 18.575 17.0834 18.4833 16.9 18.3L12 13.4Z\" />\n  </svg>\n)\n\nexport { CloseIcon }\n"],"names":["CloseIcon","props","jsx"],"mappings":";AAEA,MAAMA,IAAY,CAACC,MACjB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,owBAAA,CAAowB;AAAA,EAAA;AAC9wB;"}