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

package/dist/components/checkbox/checkbox.js

@@ -1,77 +1,53 @@
-import { j as e } from "../../vendor/react/jsx-dev-runtime.js";
-import * as s from "react";
-import { Checkbox as u, CheckboxIndicator as x } from "../../vendor/@radix-ui/react-checkbox/dist/index.js";
-import { shorthands as i } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as t } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as d } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { jsx as o } from "react/jsx-runtime";
+import * as n from "react";
+import { Checkbox as m, CheckboxIndicator as u } from "../../vendor/@radix-ui/react-checkbox/dist/index.js";
+import { shorthands as e } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as i } 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 b } from "../../styles/make-styles.js";
-import { errorA8 as p, grayA4 as f, accentA7 as n, semAccentContrast as k, semAccentSolid as g, semAccentOnSoft as w, semFocusRing as a, radiusSm as v, semAccentSoft as N } from "../../tokens/index.js";
-const C = s.forwardRef(function(r, o) {
-  return /* @__PURE__ */ e.jsxDEV(
+import { errorA8 as p, grayA4 as f, accentA7 as s, semAccentContrast as g, semAccentSolid as k, semAccentOnSoft as w, semFocusRing as d, radiusSm as C, semAccentSoft as v } from "../../tokens/index.js";
+const y = n.forwardRef(function(r, t) {
+  return /* @__PURE__ */ o(
     "svg",
     {
-      ref: o,
+      ref: t,
       "data-slot": "checkbox-check-icon",
-      [t]: "checkbox-check-icon",
+      [i]: "checkbox-check-icon",
       xmlns: "http://www.w3.org/2000/svg",
       height: "24px",
       viewBox: "0 -960 960 960",
       width: "24px",
       fill: "currentColor",
       ...r,
-      children: /* @__PURE__ */ e.jsxDEV("path", { d: "m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z" }, void 0, !1, {
-        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/checkbox/checkbox.tsx",
-        lineNumber: 25,
-        columnNumber: 7
-      }, this)
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/checkbox/checkbox.tsx",
-      lineNumber: 14,
-      columnNumber: 5
-    },
-    this
+      children: /* @__PURE__ */ o("path", { d: "m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z" })
+    }
   );
-}), y = s.forwardRef(function(r, o) {
-  return /* @__PURE__ */ e.jsxDEV(
+}), S = n.forwardRef(function(r, t) {
+  return /* @__PURE__ */ o(
     "svg",
     {
-      ref: o,
+      ref: t,
       "data-slot": "checkbox-minus-icon",
-      [t]: "checkbox-minus-icon",
+      [i]: "checkbox-minus-icon",
       xmlns: "http://www.w3.org/2000/svg",
       height: "24px",
       viewBox: "0 -960 960 960",
       width: "24px",
       fill: "currentColor",
       ...r,
-      children: /* @__PURE__ */ e.jsxDEV("path", { d: "M280-440q-17 0-28.5-11.5T240-480q0-17 11.5-28.5T280-520h400q17 0 28.5 11.5T720-480q0 17-11.5 28.5T680-440H280Z" }, void 0, !1, {
-        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/checkbox/checkbox.tsx",
-        lineNumber: 46,
-        columnNumber: 7
-      }, this)
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/checkbox/checkbox.tsx",
-      lineNumber: 35,
-      columnNumber: 5
-    },
-    this
+      children: /* @__PURE__ */ o("path", { d: "M280-440q-17 0-28.5-11.5T240-480q0-17 11.5-28.5T280-520h400q17 0 28.5 11.5T720-480q0 17-11.5 28.5T680-440H280Z" })
+    }
   );
-}), D = b({
+}), T = b({
   root: {
-    ...i.border("1px", "solid", n),
-    backgroundColor: N,
+    ...e.border("1px", "solid", s),
+    backgroundColor: v,
     display: "inline-block",
     boxSizing: "border-box",
     width: "1rem",
     height: "1rem",
     flexShrink: 0,
-    borderRadius: v,
+    borderRadius: C,
     // v1 `shadow-xs` — elevation comes from Tailwind's shadow scale, which has no token (B7).
     boxShadow: "0 1px 2px 0 #0000000d",
     transitionProperty: "box-shadow",
@@ -84,26 +60,26 @@ const C = s.forwardRef(function(r, o) {
       outlineOffset: "2px",
       outlineWidth: "2px",
       outlineStyle: "solid",
-      outlineColor: a
+      outlineColor: d
     },
     "&[data-disabled]": {
       cursor: "not-allowed",
       opacity: 0.5,
-      ...i.borderColor(f)
+      ...e.borderColor(f)
     },
     "&[aria-invalid='true']": {
-      outlineColor: a,
-      ...i.borderColor(p)
+      outlineColor: d,
+      ...e.borderColor(p)
     },
     "&[data-state='indeterminate']": {
-      backgroundColor: n,
-      ...i.borderColor("transparent"),
+      backgroundColor: s,
+      ...e.borderColor("transparent"),
       color: w
     },
     "&[data-state='checked']": {
-      backgroundColor: g,
-      ...i.borderWidth("0px"),
-      color: k
+      backgroundColor: k,
+      ...e.borderWidth("0px"),
+      color: g
     },
     "&[data-state='checked'] svg, &[data-state='indeterminate'] svg": {
       width: "0.875rem",
@@ -121,54 +97,30 @@ const C = s.forwardRef(function(r, o) {
       height: "0.875rem"
     }
   }
-}), R = s.forwardRef(function({ className: r, checked: o, ...m }, h) {
-  const l = D();
-  return /* @__PURE__ */ e.jsxDEV(
-    u,
+}), z = n.forwardRef(function({ className: r, checked: t, ...l }, h) {
+  const a = T();
+  return /* @__PURE__ */ o(
+    m,
     {
       ref: h,
-      checked: o,
+      checked: t,
       "data-slot": "checkbox",
-      [t]: "checkbox",
-      className: d(l.root, r),
-      ...m,
-      children: /* @__PURE__ */ e.jsxDEV(
-        x,
+      [i]: "checkbox",
+      className: x(a.root, r),
+      ...l,
+      children: /* @__PURE__ */ o(
+        u,
         {
           "data-slot": "checkbox-indicator",
-          [t]: "checkbox-indicator",
-          className: l.indicator,
-          children: o === "indeterminate" ? /* @__PURE__ */ e.jsxDEV(y, {}, void 0, !1, {
-            fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/checkbox/checkbox.tsx",
-            lineNumber: 134,
-            columnNumber: 40
-          }, this) : /* @__PURE__ */ e.jsxDEV(C, {}, void 0, !1, {
-            fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/checkbox/checkbox.tsx",
-            lineNumber: 134,
-            columnNumber: 56
-          }, this)
-        },
-        void 0,
-        !1,
-        {
-          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/checkbox/checkbox.tsx",
-          lineNumber: 129,
-          columnNumber: 7
-        },
-        this
+          [i]: "checkbox-indicator",
+          className: a.indicator,
+          children: t === "indeterminate" ? /* @__PURE__ */ o(S, {}) : /* @__PURE__ */ o(y, {})
+        }
       )
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/checkbox/checkbox.tsx",
-      lineNumber: 121,
-      columnNumber: 5
-    },
-    this
+    }
   );
 });
 export {
-  R as Checkbox
+  z as Checkbox
 };
 //# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\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\nconst CheckIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function CheckIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-check-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-check-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z\" />\n    </svg>\n  )\n})\n\nconst MinusIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function MinusIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-minus-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-minus-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"M280-440q-17 0-28.5-11.5T240-480q0-17 11.5-28.5T280-520h400q17 0 28.5 11.5T720-480q0 17-11.5 28.5T680-440H280Z\" />\n    </svg>\n  )\n})\n\nconst useStyles = makeVoltStyles({\n  root: {\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.semAccentSoft,\n    display: \"inline-block\",\n    boxSizing: \"border-box\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    borderRadius: tokens.radiusSm,\n    // v1 `shadow-xs` — elevation comes from Tailwind's shadow scale, which has no token (B7).\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"box-shadow\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.semFocusRing,\n    },\n    \"&[data-disabled]\": {\n      cursor: \"not-allowed\",\n      opacity: 0.5,\n      ...shorthands.borderColor(tokens.grayA4),\n    },\n    \"&[aria-invalid='true']\": {\n      outlineColor: tokens.semFocusRing,\n      ...shorthands.borderColor(tokens.errorA8),\n    },\n    \"&[data-state='indeterminate']\": {\n      backgroundColor: tokens.accentA7,\n      ...shorthands.borderColor(\"transparent\"),\n      color: tokens.semAccentOnSoft,\n    },\n    \"&[data-state='checked']\": {\n      backgroundColor: tokens.semAccentSolid,\n      ...shorthands.borderWidth(\"0px\"),\n      color: tokens.semAccentContrast,\n    },\n    \"&[data-state='checked'] svg, &[data-state='indeterminate'] svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n  indicator: {\n    display: \"grid\",\n    placeContent: \"center\",\n    height: \"100%\",\n    color: \"currentColor\",\n    transitionProperty: \"none\",\n    \"& svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n})\n\nexport type CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root>\n\nexport const Checkbox = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(function Checkbox({ className, checked, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      checked={checked}\n      data-slot=\"checkbox\"\n      {...{ [SLOT_ATTR]: \"checkbox\" }}\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        {...{ [SLOT_ATTR]: \"checkbox-indicator\" }}\n        className={styles.indicator}\n      >\n        {checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n})\n"],"names":["CheckIcon","React","props","ref","jsxDEV","SLOT_ATTR","MinusIcon","useStyles","makeVoltStyles","shorthands","tokens.accentA7","tokens.semAccentSoft","tokens.radiusSm","tokens.semFocusRing","tokens.grayA4","tokens.errorA8","tokens.semAccentOnSoft","tokens.semAccentSolid","tokens.semAccentContrast","Checkbox","className","checked","styles","CheckboxPrimitive.Root","mergeClasses","CheckboxPrimitive.Indicator"],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\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\nconst CheckIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function CheckIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-check-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-check-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z\" />\n    </svg>\n  )\n})\n\nconst MinusIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function MinusIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-minus-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-minus-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"M280-440q-17 0-28.5-11.5T240-480q0-17 11.5-28.5T280-520h400q17 0 28.5 11.5T720-480q0 17-11.5 28.5T680-440H280Z\" />\n    </svg>\n  )\n})\n\nconst useStyles = makeVoltStyles({\n  root: {\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.semAccentSoft,\n    display: \"inline-block\",\n    boxSizing: \"border-box\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    borderRadius: tokens.radiusSm,\n    // v1 `shadow-xs` — elevation comes from Tailwind's shadow scale, which has no token (B7).\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"box-shadow\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.semFocusRing,\n    },\n    \"&[data-disabled]\": {\n      cursor: \"not-allowed\",\n      opacity: 0.5,\n      ...shorthands.borderColor(tokens.grayA4),\n    },\n    \"&[aria-invalid='true']\": {\n      outlineColor: tokens.semFocusRing,\n      ...shorthands.borderColor(tokens.errorA8),\n    },\n    \"&[data-state='indeterminate']\": {\n      backgroundColor: tokens.accentA7,\n      ...shorthands.borderColor(\"transparent\"),\n      color: tokens.semAccentOnSoft,\n    },\n    \"&[data-state='checked']\": {\n      backgroundColor: tokens.semAccentSolid,\n      ...shorthands.borderWidth(\"0px\"),\n      color: tokens.semAccentContrast,\n    },\n    \"&[data-state='checked'] svg, &[data-state='indeterminate'] svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n  indicator: {\n    display: \"grid\",\n    placeContent: \"center\",\n    height: \"100%\",\n    color: \"currentColor\",\n    transitionProperty: \"none\",\n    \"& svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n})\n\nexport type CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root>\n\nexport const Checkbox = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(function Checkbox({ className, checked, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      checked={checked}\n      data-slot=\"checkbox\"\n      {...{ [SLOT_ATTR]: \"checkbox\" }}\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        {...{ [SLOT_ATTR]: \"checkbox-indicator\" }}\n        className={styles.indicator}\n      >\n        {checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n})\n"],"names":["CheckIcon","React","props","ref","jsx","SLOT_ATTR","MinusIcon","useStyles","makeVoltStyles","shorthands","tokens.accentA7","tokens.semAccentSoft","tokens.radiusSm","tokens.semFocusRing","tokens.grayA4","tokens.errorA8","tokens.semAccentOnSoft","tokens.semAccentSolid","tokens.semAccentContrast","Checkbox","className","checked","styles","CheckboxPrimitive.Root","mergeClasses","CheckboxPrimitive.Indicator"],"mappings":"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"}

package/dist/components/collapsible-sidebar/collapsible-sidebar.js

@@ -1,20 +1,20 @@
-import { j as c } from "../../vendor/react/jsx-dev-runtime.js";
+import { jsx as f, jsxs as G, Fragment as L } from "react/jsx-runtime";
 import * as e from "react";
-import { shorthands as N } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as f } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { shorthands as y } 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 x } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as A } from "../../styles/make-styles.js";
-import { spacingGroup2 as j, spacingElement3 as G, radius2xl as L, body as P } from "../../tokens/index.js";
-const R = e.createContext(null);
+import { makeVoltStyles as P } from "../../styles/make-styles.js";
+import { spacingGroup2 as M, spacingElement3 as z, radius2xl as B, body as X } from "../../tokens/index.js";
+const D = e.createContext(null);
 function k() {
-  const u = e.useContext(R);
+  const u = e.useContext(D);
   if (!u)
     throw new Error(
       "CollapsibleSidebar sub-components must be used within CollapsibleSidebar"
     );
   return u;
 }
-const h = A({
+const S = P({
   root: {
     position: "relative",
     height: "100%",
@@ -36,8 +36,8 @@ const h = A({
     height: "100%",
     // v1 z-50; floating panel layer above collapsed sidebar.
     zIndex: 50,
-    ...N.borderRadius(L),
-    backgroundColor: P,
+    ...y.borderRadius(B),
+    backgroundColor: X,
     // v1 shadow-[0_4px_20px_rgba(0,0,0,0.15)]; no shadow token exists in this package.
     boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)",
     display: "flex",
@@ -61,9 +61,9 @@ const h = A({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    paddingTop: j,
+    paddingTop: M,
     // v1 gap-3 is 0.75rem; no spacing token for 0.75rem exists in this package.
-    ...N.gap(G),
+    ...y.gap(z),
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: "0%"
@@ -72,193 +72,145 @@ const h = A({
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-end",
-    ...N.padding(j),
+    ...y.padding(M),
     cursor: "pointer",
     backgroundColor: "transparent",
-    ...N.border("0")
+    ...y.border("0")
   }
-}), Q = e.forwardRef(function({
-  collapsed: t,
-  defaultCollapsed: o = !1,
-  onCollapsedChange: s,
-  width: r = 264,
-  collapsedWidth: n = 64,
-  expandOnHover: l = !0,
-  hoverDelay: i = 100,
+}), J = e.forwardRef(function({
+  collapsed: n,
+  defaultCollapsed: l = !1,
+  onCollapsedChange: o,
+  width: i = 264,
+  collapsedWidth: r = 64,
+  expandOnHover: t = !0,
+  hoverDelay: s = 100,
   className: a,
-  children: d,
+  children: c,
   ...g
-}, C) {
-  const y = h(), [v, U] = e.useState(o), S = t !== void 0, b = S ? t : v, [E, T] = e.useState(!1), D = e.useCallback(
-    (m) => {
-      m || T(!0), S || U(m), s == null || s(m);
+}, h) {
+  const v = S(), [C, F] = e.useState(l), T = n !== void 0, p = T ? n : C, [E, R] = e.useState(!1), N = e.useCallback(
+    (b) => {
+      b || R(!0), T || F(b), o == null || o(b);
     },
-    [S, s]
-  ), [V, w] = e.useState(!1), p = e.useRef(void 0), I = e.useCallback(() => {
-    !b || !l || (p.current && clearTimeout(p.current), p.current = setTimeout(() => w(!0), i));
-  }, [b, l, i]), M = e.useCallback(() => {
-    p.current && clearTimeout(p.current), w(!1);
+    [T, o]
+  ), [I, w] = e.useState(!1), d = e.useRef(void 0), V = e.useCallback(() => {
+    !p || !t || (d.current && clearTimeout(d.current), d.current = setTimeout(() => w(!0), s));
+  }, [p, t, s]), j = e.useCallback(() => {
+    d.current && clearTimeout(d.current), w(!1);
   }, []);
   e.useEffect(() => {
     w(!1);
-    const m = requestAnimationFrame(() => T(!1));
-    return () => cancelAnimationFrame(m);
-  }, [b]), e.useEffect(() => () => {
-    p.current && clearTimeout(p.current);
+    const b = requestAnimationFrame(() => R(!1));
+    return () => cancelAnimationFrame(b);
+  }, [p]), e.useEffect(() => () => {
+    d.current && clearTimeout(d.current);
   }, []);
-  const F = e.useMemo(
+  const A = e.useMemo(
     () => ({
-      collapsed: b,
-      onCollapsedChange: D,
-      width: r,
-      collapsedWidth: n,
-      isHovered: V,
-      expandOnHover: l,
+      collapsed: p,
+      onCollapsedChange: N,
+      width: i,
+      collapsedWidth: r,
+      isHovered: I,
+      expandOnHover: t,
       skipTransition: E
     }),
     [
-      b,
-      D,
+      p,
+      N,
+      i,
       r,
-      n,
-      V,
-      l,
+      I,
+      t,
       E
     ]
   );
-  return /* @__PURE__ */ c.jsxDEV(R.Provider, { value: F, children: /* @__PURE__ */ c.jsxDEV(
+  return /* @__PURE__ */ f(D.Provider, { value: A, children: /* @__PURE__ */ f(
     "div",
     {
-      ref: C,
+      ref: h,
       "data-slot": "collapsible-sidebar",
-      [f]: "collapsible-sidebar",
-      "data-collapsed": b ? "" : void 0,
-      className: x(y.root, a),
-      onMouseEnter: I,
-      onMouseLeave: M,
+      [m]: "collapsible-sidebar",
+      "data-collapsed": p ? "" : void 0,
+      className: x(v.root, a),
+      onMouseEnter: V,
+      onMouseLeave: j,
       ...g,
-      children: d
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/collapsible-sidebar/collapsible-sidebar.tsx",
-      lineNumber: 205,
-      columnNumber: 7
-    },
-    this
-  ) }, void 0, !1, {
-    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/collapsible-sidebar/collapsible-sidebar.tsx",
-    lineNumber: 204,
-    columnNumber: 5
-  }, this);
-}), W = e.forwardRef(function({ className: t, floatingClassName: o, children: s, style: r, ...n }, l) {
-  const i = h(), { collapsed: a, width: d, isHovered: g, expandOnHover: C, skipTransition: y } = k(), v = typeof d == "number" ? `${d}px` : d;
-  return /* @__PURE__ */ c.jsxDEV(c.Fragment, { children: [
-    !a && /* @__PURE__ */ c.jsxDEV(
+      children: c
+    }
+  ) });
+}), K = e.forwardRef(function({ className: n, floatingClassName: l, children: o, style: i, ...r }, t) {
+  const s = S(), { collapsed: a, width: c, isHovered: g, expandOnHover: h, skipTransition: v } = k(), C = typeof c == "number" ? `${c}px` : c;
+  return /* @__PURE__ */ G(L, { children: [
+    !a && /* @__PURE__ */ f(
       "aside",
       {
-        ref: l,
+        ref: t,
         "data-slot": "collapsible-sidebar-content",
-        [f]: "collapsible-sidebar-content",
-        className: x(i.content, t),
-        style: { width: v, ...r },
-        ...n,
-        children: s
-      },
-      void 0,
-      !1,
-      {
-        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/collapsible-sidebar/collapsible-sidebar.tsx",
-        lineNumber: 244,
-        columnNumber: 9
-      },
-      this
+        [m]: "collapsible-sidebar-content",
+        className: x(s.content, n),
+        style: { width: C, ...i },
+        ...r,
+        children: o
+      }
     ),
-    C && /* @__PURE__ */ c.jsxDEV(
+    h && /* @__PURE__ */ f(
       "div",
       {
         "data-slot": "collapsible-sidebar-floating",
-        [f]: "collapsible-sidebar-floating",
+        [m]: "collapsible-sidebar-floating",
         "data-visible": a && g ? "" : void 0,
         className: x(
-          i.floating,
-          y && i.transitionNone,
-          o
+          s.floating,
+          v && s.transitionNone,
+          l
         ),
-        style: { width: v },
-        children: a && g && s
-      },
-      void 0,
-      !1,
-      {
-        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/collapsible-sidebar/collapsible-sidebar.tsx",
-        lineNumber: 258,
-        columnNumber: 9
-      },
-      this
+        style: { width: C },
+        children: a && g && o
+      }
     )
-  ] }, void 0, !0, {
-    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/collapsible-sidebar/collapsible-sidebar.tsx",
-    lineNumber: 241,
-    columnNumber: 5
-  }, this);
-}), _ = e.forwardRef(function({ className: t, children: o, style: s, ...r }, n) {
-  const l = h(), { collapsed: i, collapsedWidth: a } = k();
-  if (!i) return null;
-  const d = typeof a == "number" ? `${a}px` : a;
-  return /* @__PURE__ */ c.jsxDEV(
+  ] });
+}), U = e.forwardRef(function({ className: n, children: l, style: o, ...i }, r) {
+  const t = S(), { collapsed: s, collapsedWidth: a } = k();
+  if (!s) return null;
+  const c = typeof a == "number" ? `${a}px` : a;
+  return /* @__PURE__ */ f(
     "div",
     {
-      ref: n,
+      ref: r,
       "data-slot": "collapsible-sidebar-condensed",
-      [f]: "collapsible-sidebar-condensed",
-      className: x(l.condensed, t),
-      style: { width: d, ...s },
-      ...r,
-      children: o
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/collapsible-sidebar/collapsible-sidebar.tsx",
-      lineNumber: 296,
-      columnNumber: 5
-    },
-    this
+      [m]: "collapsible-sidebar-condensed",
+      className: x(t.condensed, n),
+      style: { width: c, ...o },
+      ...i,
+      children: l
+    }
   );
-}), J = e.forwardRef(function({ className: t, children: o, ...s }, r) {
-  const n = h(), { collapsed: l, onCollapsedChange: i } = k();
-  return /* @__PURE__ */ c.jsxDEV(
+}), Y = e.forwardRef(function({ className: n, children: l, ...o }, i) {
+  const r = S(), { collapsed: t, onCollapsedChange: s } = k();
+  return /* @__PURE__ */ f(
     "button",
     {
-      ref: r,
+      ref: i,
       "data-slot": "collapsible-sidebar-toggle",
-      [f]: "collapsible-sidebar-toggle",
-      "data-collapsed": l ? "" : void 0,
+      [m]: "collapsible-sidebar-toggle",
+      "data-collapsed": t ? "" : void 0,
       type: "button",
-      "aria-expanded": !l,
-      "aria-label": l ? "Expand sidebar" : "Collapse sidebar",
-      className: x(n.toggle, t),
-      onClick: () => i(!l),
-      ...s,
-      children: typeof o == "function" ? o({ collapsed: l }) : o
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/collapsible-sidebar/collapsible-sidebar.tsx",
-      lineNumber: 328,
-      columnNumber: 5
-    },
-    this
+      "aria-expanded": !t,
+      "aria-label": t ? "Expand sidebar" : "Collapse sidebar",
+      className: x(r.toggle, n),
+      onClick: () => s(!t),
+      ...o,
+      children: typeof l == "function" ? l({ collapsed: t }) : l
+    }
   );
 });
 export {
-  Q as CollapsibleSidebar,
-  _ as CollapsibleSidebarCondensed,
-  W as CollapsibleSidebarContent,
-  J as CollapsibleSidebarToggle,
+  J as CollapsibleSidebar,
+  U as CollapsibleSidebarCondensed,
+  K as CollapsibleSidebarContent,
+  Y as CollapsibleSidebarToggle,
   k as useCollapsibleSidebar
 };
 //# sourceMappingURL=collapsible-sidebar.js.map