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

package/dist/components/checkbox/checkbox.js

@@ -1,82 +1,109 @@
-import { jsx as o } from "react/jsx-runtime";
-import * as c from "react";
-import { Checkbox as m, CheckboxIndicator as x } 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 b } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as p } from "../../styles/make-styles.js";
-import { errorA8 as s, grayA4 as u, accentA7 as d, semAccentContrast as f, semAccentSolid as k, accentA12 as g, accentA8 as w, radiusSm as C, semAccentSoft as v } from "../../tokens/index.js";
-const y = c.forwardRef(function(r, t) {
-  return /* @__PURE__ */ o(
+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 { 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(
     "svg",
     {
-      ref: t,
+      ref: o,
       "data-slot": "checkbox-check-icon",
-      [i]: "checkbox-check-icon",
+      [t]: "checkbox-check-icon",
       xmlns: "http://www.w3.org/2000/svg",
       height: "24px",
       viewBox: "0 -960 960 960",
       width: "24px",
       fill: "currentColor",
       ...r,
-      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" })
-    }
+      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
   );
-}), S = c.forwardRef(function(r, t) {
-  return /* @__PURE__ */ o(
+}), y = s.forwardRef(function(r, o) {
+  return /* @__PURE__ */ e.jsxDEV(
     "svg",
     {
-      ref: t,
+      ref: o,
       "data-slot": "checkbox-minus-icon",
-      [i]: "checkbox-minus-icon",
+      [t]: "checkbox-minus-icon",
       xmlns: "http://www.w3.org/2000/svg",
       height: "24px",
       viewBox: "0 -960 960 960",
       width: "24px",
       fill: "currentColor",
       ...r,
-      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" })
-    }
+      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
   );
-}), T = p({
+}), D = b({
   root: {
-    ...e.border("1px", "solid", d),
-    backgroundColor: v,
+    ...i.border("1px", "solid", n),
+    backgroundColor: N,
     display: "inline-block",
     boxSizing: "border-box",
     width: "1rem",
     height: "1rem",
     flexShrink: 0,
-    borderRadius: C,
+    borderRadius: v,
     // v1 `shadow-xs` — elevation comes from Tailwind's shadow scale, which has no token (B7).
     boxShadow: "0 1px 2px 0 #0000000d",
     transitionProperty: "box-shadow",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
     transitionDuration: "150ms",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms"
+    },
     ":focus-visible": {
       outlineOffset: "2px",
       outlineWidth: "2px",
       outlineStyle: "solid",
-      outlineColor: w
+      outlineColor: a
     },
     "&[data-disabled]": {
       cursor: "not-allowed",
       opacity: 0.5,
-      ...e.borderColor(u)
+      ...i.borderColor(f)
     },
     "&[aria-invalid='true']": {
-      outlineColor: s,
-      ...e.borderColor(s)
+      outlineColor: a,
+      ...i.borderColor(p)
     },
     "&[data-state='indeterminate']": {
-      backgroundColor: d,
-      ...e.borderColor("transparent"),
-      color: g
+      backgroundColor: n,
+      ...i.borderColor("transparent"),
+      color: w
     },
     "&[data-state='checked']": {
-      backgroundColor: k,
-      ...e.borderWidth("0px"),
-      color: f
+      backgroundColor: g,
+      ...i.borderWidth("0px"),
+      color: k
     },
     "&[data-state='checked'] svg, &[data-state='indeterminate'] svg": {
       width: "0.875rem",
@@ -94,30 +121,54 @@ const y = c.forwardRef(function(r, t) {
       height: "0.875rem"
     }
   }
-}), B = c.forwardRef(function({ className: r, checked: t, ...l }, h) {
-  const a = T();
-  return /* @__PURE__ */ o(
-    m,
+}), R = s.forwardRef(function({ className: r, checked: o, ...m }, h) {
+  const l = D();
+  return /* @__PURE__ */ e.jsxDEV(
+    u,
     {
       ref: h,
-      checked: t,
+      checked: o,
       "data-slot": "checkbox",
-      [i]: "checkbox",
-      className: b(a.root, r),
-      ...l,
-      children: /* @__PURE__ */ o(
+      [t]: "checkbox",
+      className: d(l.root, r),
+      ...m,
+      children: /* @__PURE__ */ e.jsxDEV(
         x,
         {
           "data-slot": "checkbox-indicator",
-          [i]: "checkbox-indicator",
-          className: a.indicator,
-          children: t === "indeterminate" ? /* @__PURE__ */ o(S, {}) : /* @__PURE__ */ o(y, {})
-        }
+          [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
       )
-    }
+    },
+    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 {
-  B as Checkbox
+  R 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    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.accentA8,\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.errorA8,\n      ...shorthands.borderColor(tokens.errorA8),\n    },\n    \"&[data-state='indeterminate']\": {\n      backgroundColor: tokens.accentA7,\n      ...shorthands.borderColor(\"transparent\"),\n      color: tokens.accentA12,\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.accentA8","tokens.grayA4","tokens.errorA8","tokens.accentA12","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","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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"}

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

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