@traefik-labs/faency 12.3.9 → 13.0.0

package/dist/components/NavigationTree/NavigationTreeContext.cjs

@@ -0,0 +1,16 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let _radix_ui_react_icons = require("@radix-ui/react-icons");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+// components/NavigationTree/NavigationTreeContext.tsx
+var NavigationTreeContext = react.default.createContext({
+	defaultExpandIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_icons.ChevronRightIcon, {}),
+	defaultCollapseIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_icons.ChevronDownIcon, {}),
+	fullWidth: false
+});
+var useNavigationTree = () => react.default.useContext(NavigationTreeContext);
+exports.NavigationTreeContext = NavigationTreeContext;
+exports.useNavigationTree = useNavigationTree;
+
+//# sourceMappingURL=NavigationTreeContext.cjs.map

package/dist/components/NavigationTree/NavigationTreeContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationTreeContext.cjs","names":["React","ChevronRightIcon","ChevronDownIcon"],"sources":["../../../components/NavigationTree/NavigationTreeContext.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from '@radix-ui/react-icons';\nimport React from 'react';\n\ninterface NavigationTreeContextValue {\n  defaultExpandIcon: React.ReactNode;\n  defaultCollapseIcon: React.ReactNode;\n  fullWidth: boolean;\n}\n\nexport const NavigationTreeContext = React.createContext<NavigationTreeContextValue>({\n  defaultExpandIcon: <ChevronRightIcon />,\n  defaultCollapseIcon: <ChevronDownIcon />,\n  fullWidth: false,\n});\n\nexport const useNavigationTree = () => React.useContext(NavigationTreeContext);\n"],"mappings":";;;;;;AASA,IAAa,wBAAwBA,MAAAA,QAAM,cAA0C;CACnF,mBAAmB,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,kBAAD,CAAmB,CAAA;CACtC,qBAAqB,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,iBAAD,CAAkB,CAAA;CACvC,WAAW;AACb,CAAC;AAED,IAAa,0BAA0BF,MAAAA,QAAM,WAAW,qBAAqB"}

package/dist/components/NavigationTree/NavigationTreeContext.js

@@ -0,0 +1,13 @@
+import { ChevronDownIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+// components/NavigationTree/NavigationTreeContext.tsx
+var NavigationTreeContext = React.createContext({
+	defaultExpandIcon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+	defaultCollapseIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
+	fullWidth: false
+});
+var useNavigationTree = () => React.useContext(NavigationTreeContext);
+export { NavigationTreeContext, useNavigationTree };
+
+//# sourceMappingURL=NavigationTreeContext.js.map

package/dist/components/NavigationTree/NavigationTreeContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationTreeContext.js","names":[],"sources":["../../../components/NavigationTree/NavigationTreeContext.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from '@radix-ui/react-icons';\nimport React from 'react';\n\ninterface NavigationTreeContextValue {\n  defaultExpandIcon: React.ReactNode;\n  defaultCollapseIcon: React.ReactNode;\n  fullWidth: boolean;\n}\n\nexport const NavigationTreeContext = React.createContext<NavigationTreeContextValue>({\n  defaultExpandIcon: <ChevronRightIcon />,\n  defaultCollapseIcon: <ChevronDownIcon />,\n  fullWidth: false,\n});\n\nexport const useNavigationTree = () => React.useContext(NavigationTreeContext);\n"],"mappings":";;;;AASA,IAAa,wBAAwB,MAAM,cAA0C;CACnF,mBAAmB,oBAAC,kBAAD,CAAmB,CAAA;CACtC,qBAAqB,oBAAC,iBAAD,CAAkB,CAAA;CACvC,WAAW;AACb,CAAC;AAED,IAAa,0BAA0B,MAAM,WAAW,qBAAqB"}

package/dist/components/NavigationTree/NavigationTreeDrawer.cjs

@@ -1,20 +1,25 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_Navigation = require("../Navigation/Navigation.cjs");
+const require_NavigationTreeContext = require("./NavigationTreeContext.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region components/NavigationTree/NavigationTreeDrawer.tsx
+// components/NavigationTree/NavigationTreeDrawer.tsx
 var NavigationTreeDrawer = ({ children, fullWidth = false, ...props }) => {
-	const renderChildren = react.default.Children.map(children, (child) => {
-		return react.default.cloneElement(child, { fullWidth });
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Navigation.NavigationDrawer, {
-		fullWidth,
-		...props,
-		children: renderChildren
+	const parentCtx = require_NavigationTreeContext.useNavigationTree();
+	const contextValue = (0, react.useMemo)(() => ({
+		...parentCtx,
+		fullWidth
+	}), [parentCtx, fullWidth]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NavigationTreeContext.NavigationTreeContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Navigation.NavigationDrawer, {
+			fullWidth,
+			...props,
+			children
+		})
 	});
 };
-//#endregion
 exports.NavigationTreeDrawer = NavigationTreeDrawer;
 
 //# sourceMappingURL=NavigationTreeDrawer.cjs.map

package/dist/components/NavigationTree/NavigationTreeDrawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationTreeDrawer.cjs","names":[],"sources":["../../../components/NavigationTree/NavigationTreeDrawer.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS } from '../../stitches.config';\nimport { NavigationDrawer, NavigationDrawerProps } from '../Navigation';\n\nexport interface NavigationTreeDrawerProps {\n  children: React.ReactNode;\n  css?: CSS;\n  fullWidth?: boolean;\n}\n\nexport const NavigationTreeDrawer = ({\n  children,\n  fullWidth = false,\n  ...props\n}: NavigationTreeDrawerProps & NavigationDrawerProps) => {\n  const renderChildren = React.Children.map(children, (child) => {\n    return React.cloneElement(child as React.ReactElement, {\n      fullWidth,\n    });\n  });\n\n  return (\n    <NavigationDrawer fullWidth={fullWidth} {...props}>\n      {renderChildren}\n    </NavigationDrawer>\n  );\n};\n"],"mappings":";;;;;;AAWA,IAAa,wBAAwB,EACnC,UACA,YAAY,OACZ,GAAG,YACoD;CACvD,MAAM,iBAAiB,MAAA,QAAM,SAAS,IAAI,WAAW,UAAU;EAC7D,OAAO,MAAA,QAAM,aAAa,OAA6B,EACrD,UACF,CAAC;CACH,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAA,kBAAD;EAA6B;EAAW,GAAI;YACzC;CACe,CAAA;AAEtB"}
+{"version":3,"file":"NavigationTreeDrawer.cjs","names":["useNavigationTree","useMemo","NavigationTreeContext","NavigationDrawer"],"sources":["../../../components/NavigationTree/NavigationTreeDrawer.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { CSS } from '../../stitches.config';\nimport { NavigationDrawer, NavigationDrawerProps } from '../Navigation';\nimport { NavigationTreeContext, useNavigationTree } from './NavigationTreeContext';\n\nexport interface NavigationTreeDrawerProps {\n  children: React.ReactNode;\n  css?: CSS;\n  fullWidth?: boolean;\n}\n\nexport const NavigationTreeDrawer = ({\n  children,\n  fullWidth = false,\n  ...props\n}: NavigationTreeDrawerProps & NavigationDrawerProps) => {\n  const parentCtx = useNavigationTree();\n  const contextValue = useMemo(\n    () => ({ ...parentCtx, fullWidth }),\n    [parentCtx, fullWidth],\n  );\n\n  return (\n    <NavigationTreeContext.Provider value={contextValue}>\n      <NavigationDrawer fullWidth={fullWidth} {...props}>\n        {children}\n      </NavigationDrawer>\n    </NavigationTreeContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;AAYA,IAAa,wBAAwB,EACnC,UACA,YAAY,OACZ,GAAG,YACoD;CACvD,MAAM,YAAYA,8BAAAA,kBAAkB;CACpC,MAAM,gBAAA,GAAeC,MAAAA,QAAAA,QACZ;EAAE,GAAG;EAAW;CAAU,IACjC,CAAC,WAAW,SAAS,CACvB;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,8BAAAA,sBAAsB,UAAvB;EAAgC,OAAO;EACrC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,kBAAD;GAA6B;GAAW,GAAI;GACzC;EACe,CAAA;CACY,CAAA;AAEpC"}

package/dist/components/NavigationTree/NavigationTreeDrawer.js

@@ -1,18 +1,23 @@
 import { NavigationDrawer } from "../Navigation/Navigation.js";
-import React from "react";
+import { NavigationTreeContext, useNavigationTree } from "./NavigationTreeContext.js";
+import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region components/NavigationTree/NavigationTreeDrawer.tsx
+// components/NavigationTree/NavigationTreeDrawer.tsx
 var NavigationTreeDrawer = ({ children, fullWidth = false, ...props }) => {
-	const renderChildren = React.Children.map(children, (child) => {
-		return React.cloneElement(child, { fullWidth });
-	});
-	return /* @__PURE__ */ jsx(NavigationDrawer, {
-		fullWidth,
-		...props,
-		children: renderChildren
+	const parentCtx = useNavigationTree();
+	const contextValue = useMemo(() => ({
+		...parentCtx,
+		fullWidth
+	}), [parentCtx, fullWidth]);
+	return /* @__PURE__ */ jsx(NavigationTreeContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(NavigationDrawer, {
+			fullWidth,
+			...props,
+			children
+		})
 	});
 };
-//#endregion
 export { NavigationTreeDrawer };
 
 //# sourceMappingURL=NavigationTreeDrawer.js.map

package/dist/components/NavigationTree/NavigationTreeDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationTreeDrawer.js","names":[],"sources":["../../../components/NavigationTree/NavigationTreeDrawer.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS } from '../../stitches.config';\nimport { NavigationDrawer, NavigationDrawerProps } from '../Navigation';\n\nexport interface NavigationTreeDrawerProps {\n  children: React.ReactNode;\n  css?: CSS;\n  fullWidth?: boolean;\n}\n\nexport const NavigationTreeDrawer = ({\n  children,\n  fullWidth = false,\n  ...props\n}: NavigationTreeDrawerProps & NavigationDrawerProps) => {\n  const renderChildren = React.Children.map(children, (child) => {\n    return React.cloneElement(child as React.ReactElement, {\n      fullWidth,\n    });\n  });\n\n  return (\n    <NavigationDrawer fullWidth={fullWidth} {...props}>\n      {renderChildren}\n    </NavigationDrawer>\n  );\n};\n"],"mappings":";;;;AAWA,IAAa,wBAAwB,EACnC,UACA,YAAY,OACZ,GAAG,YACoD;CACvD,MAAM,iBAAiB,MAAM,SAAS,IAAI,WAAW,UAAU;EAC7D,OAAO,MAAM,aAAa,OAA6B,EACrD,UACF,CAAC;CACH,CAAC;CAED,OACE,oBAAC,kBAAD;EAA6B;EAAW,GAAI;YACzC;CACe,CAAA;AAEtB"}
+{"version":3,"file":"NavigationTreeDrawer.js","names":[],"sources":["../../../components/NavigationTree/NavigationTreeDrawer.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { CSS } from '../../stitches.config';\nimport { NavigationDrawer, NavigationDrawerProps } from '../Navigation';\nimport { NavigationTreeContext, useNavigationTree } from './NavigationTreeContext';\n\nexport interface NavigationTreeDrawerProps {\n  children: React.ReactNode;\n  css?: CSS;\n  fullWidth?: boolean;\n}\n\nexport const NavigationTreeDrawer = ({\n  children,\n  fullWidth = false,\n  ...props\n}: NavigationTreeDrawerProps & NavigationDrawerProps) => {\n  const parentCtx = useNavigationTree();\n  const contextValue = useMemo(\n    () => ({ ...parentCtx, fullWidth }),\n    [parentCtx, fullWidth],\n  );\n\n  return (\n    <NavigationTreeContext.Provider value={contextValue}>\n      <NavigationDrawer fullWidth={fullWidth} {...props}>\n        {children}\n      </NavigationDrawer>\n    </NavigationTreeContext.Provider>\n  );\n};\n"],"mappings":";;;;;AAYA,IAAa,wBAAwB,EACnC,UACA,YAAY,OACZ,GAAG,YACoD;CACvD,MAAM,YAAY,kBAAkB;CACpC,MAAM,eAAe,eACZ;EAAE,GAAG;EAAW;CAAU,IACjC,CAAC,WAAW,SAAS,CACvB;CAEA,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO;EACrC,UAAA,oBAAC,kBAAD;GAA6B;GAAW,GAAI;GACzC;EACe,CAAA;CACY,CAAA;AAEpC"}

package/dist/components/NavigationTree/NavigationTreeItem.cjs

@@ -3,14 +3,19 @@ const require_Box = require("../Box/Box.cjs");
 const require_Flex = require("../Flex/Flex.cjs");
 const require_Text = require("../Text/Text.cjs");
 const require_Navigation = require("../Navigation/Navigation.cjs");
+const require_NavigationTreeContext = require("./NavigationTreeContext.cjs");
 const require_NavigationTreeContainer = require("./NavigationTreeContainer.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region components/NavigationTree/NavigationTreeItem.tsx
-var NavigationTreeItem = ({ label, subtitle, children, onClick, defaultExpanded = false, defaultCollapseIcon, defaultExpandIcon, customCollapseIcon, customExpandIcon, nestedChildrenLevel = 1, fullWidth = false, ...props }) => {
+// components/NavigationTree/NavigationTreeItem.tsx
+var NavigationTreeItem = ({ label, subtitle, children, onClick, defaultExpanded = false, defaultCollapseIcon: defaultCollapseIconProp, defaultExpandIcon: defaultExpandIconProp, customCollapseIcon, customExpandIcon, nestedChildrenLevel = 1, fullWidth: fullWidthProp, ...props }) => {
+	const navigationTreeContext = require_NavigationTreeContext.useNavigationTree();
+	const defaultCollapseIcon = defaultCollapseIconProp ?? navigationTreeContext.defaultCollapseIcon;
+	const defaultExpandIcon = defaultExpandIconProp ?? navigationTreeContext.defaultExpandIcon;
+	const fullWidth = fullWidthProp ?? navigationTreeContext.fullWidth;
 	const [isExpanded, setIsExpanded] = (0, react.useState)(defaultExpanded);
-	const isExpandable = (0, react.useMemo)(() => react.default.Children.count(children) > 0, [children]);
+	const isExpandable = (0, react.useMemo)(() => react.default.Children.toArray(children).length > 0, [children]);
 	const hasStartAdornment = (0, react.useMemo)(() => !!props.startAdornment, [props.startAdornment]);
 	const usedStartAdornment = (0, react.useMemo)(() => hasStartAdornment ? props.startAdornment : isExpandable ? isExpanded ? customCollapseIcon || defaultCollapseIcon : customExpandIcon || defaultExpandIcon : null, [
 		hasStartAdornment,
@@ -29,17 +34,18 @@ var NavigationTreeItem = ({ label, subtitle, children, onClick, defaultExpanded
 			"> div > *": { "&::before, &::after": { left: fullWidth ? `calc(${nestedChildrenLevel} * -20px)` : 0 } }
 		};
 	}, [isExpandable, nestedChildrenLevel]);
+	const focusStyle = (0, react.useMemo)(() => {
+		if (!isExpandable) return {};
+		return { "&:focus": {
+			boxShadow: "none",
+			"&::before": { background: "none" },
+			"&::after": { background: "none" }
+		} };
+	}, [isExpandable]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Navigation.NavigationItem, {
 		css: {
 			width: "100%",
-			...(0, react.useMemo)(() => {
-				if (!isExpandable) return {};
-				return { "&:focus": {
-					boxShadow: "none",
-					"&::before": { background: "none" },
-					"&::after": { background: "none" }
-				} };
-			}, [isExpandable])
+			...focusStyle
 		},
 		...props,
 		startAdornment: usedStartAdornment,
@@ -73,7 +79,6 @@ var NavigationTreeItem = ({ label, subtitle, children, onClick, defaultExpanded
 		children
 	})] });
 };
-//#endregion
 exports.NavigationTreeItem = NavigationTreeItem;
 
 //# sourceMappingURL=NavigationTreeItem.cjs.map

package/dist/components/NavigationTree/NavigationTreeItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationTreeItem.cjs","names":[],"sources":["../../../components/NavigationTree/NavigationTreeItem.tsx"],"sourcesContent":["import React, { ReactNode, useMemo, useState } from 'react';\n\nimport { CSS } from '../..';\nimport { Box } from '../Box';\nimport { Flex } from '../Flex';\nimport { NavigationItem, NavigationItemProps } from '../Navigation';\nimport { Text } from '../Text';\nimport { NavigationTreeContainer } from './NavigationTreeContainer';\n\nexport interface NavigationTreeItemProps {\n  label: string | ReactNode;\n  subtitle?: string;\n  children?: React.ReactNode;\n  defaultExpanded?: boolean;\n  onClick?: () => void;\n  defaultExpandIcon?: React.ReactNode;\n  defaultCollapseIcon?: React.ReactNode;\n  customExpandIcon?: React.ReactNode;\n  customCollapseIcon?: React.ReactNode;\n  nestedChildrenLevel?: number;\n  fullWidth?: boolean;\n}\n\nexport const NavigationTreeItem = ({\n  label,\n  subtitle,\n  children,\n  onClick,\n  defaultExpanded = false,\n  defaultCollapseIcon,\n  defaultExpandIcon,\n  customCollapseIcon,\n  customExpandIcon,\n  nestedChildrenLevel = 1,\n  fullWidth = false,\n  ...props\n}: NavigationTreeItemProps & NavigationItemProps) => {\n  const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n  const isExpandable = useMemo(() => React.Children.count(children) > 0, [children]);\n  const hasStartAdornment = useMemo(() => !!props.startAdornment, [props.startAdornment]);\n  const usedStartAdornment = useMemo(\n    () =>\n      hasStartAdornment\n        ? props.startAdornment\n        : isExpandable\n          ? isExpanded\n            ? customCollapseIcon || defaultCollapseIcon\n            : customExpandIcon || defaultExpandIcon\n          : null,\n    [\n      hasStartAdornment,\n      isExpandable,\n      isExpanded,\n      defaultCollapseIcon,\n      defaultExpandIcon,\n      customCollapseIcon,\n      customExpandIcon,\n      props.startAdornment,\n    ],\n  );\n\n  const childCss = useMemo(() => {\n    if (!isExpandable) return null;\n\n    return {\n      pl: '$4',\n      '> div > *': {\n        '&::before, &::after': {\n          left: fullWidth ? `calc(${nestedChildrenLevel} * -20px)` : 0,\n        },\n      },\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isExpandable, nestedChildrenLevel]);\n\n  const focusStyle = useMemo(() => {\n    if (!isExpandable) return {};\n\n    return {\n      '&:focus': {\n        boxShadow: 'none',\n\n        '&::before': {\n          background: 'none',\n        },\n        '&::after': {\n          background: 'none',\n        },\n      },\n    };\n  }, [isExpandable]);\n\n  return (\n    <Box>\n      <NavigationItem\n        css={{ width: '100%', ...focusStyle }}\n        {...props}\n        startAdornment={usedStartAdornment}\n        onClick={isExpandable ? () => setIsExpanded(!isExpanded) : onClick}\n      >\n        <Flex\n          direction=\"column\"\n          align=\"start\"\n          gap={1}\n          css={{\n            ml: isExpandable || hasStartAdornment ? 0 : '$4',\n            color: 'inherit',\n            width: '100%',\n          }}\n        >\n          {typeof label === 'string' ? <Text css={{ color: 'inherit' }}>{label}</Text> : label}\n          {subtitle && (\n            <Text variant=\"subtle\" css={{ fontSize: '$3', opacity: 0.8 }}>\n              {subtitle}\n            </Text>\n          )}\n        </Flex>\n      </NavigationItem>\n      {isExpanded && (\n        <NavigationTreeContainer\n          defaultCollapseIcon={defaultCollapseIcon}\n          defaultExpandIcon={defaultExpandIcon}\n          fullWidth={fullWidth}\n          css={childCss as CSS}\n        >\n          {children}\n        </NavigationTreeContainer>\n      )}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;AAuBA,IAAa,sBAAsB,EACjC,OACA,UACA,UACA,SACA,kBAAkB,OAClB,qBACA,mBACA,oBACA,kBACA,sBAAsB,GACtB,YAAY,OACZ,GAAG,YACgD;CACnD,MAAM,CAAC,YAAY,kBAAA,GAAA,MAAA,SAAA,CAA0B,eAAe;CAC5D,MAAM,gBAAA,GAAA,MAAA,QAAA,OAA6B,MAAA,QAAM,SAAS,MAAM,QAAQ,IAAI,GAAG,CAAC,QAAQ,CAAC;CACjF,MAAM,qBAAA,GAAA,MAAA,QAAA,OAAkC,CAAC,CAAC,MAAM,gBAAgB,CAAC,MAAM,cAAc,CAAC;CACtF,MAAM,sBAAA,GAAA,MAAA,QAAA,OAEF,oBACI,MAAM,iBACN,eACE,aACE,sBAAsB,sBACtB,oBAAoB,oBACtB,MACR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAM;CACR,CACF;CAEA,MAAM,YAAA,GAAA,MAAA,QAAA,OAAyB;EAC7B,IAAI,CAAC,cAAc,OAAO;EAE1B,OAAO;GACL,IAAI;GACJ,aAAa,EACX,uBAAuB,EACrB,MAAM,YAAY,QAAQ,oBAAoB,aAAa,EAC7D,EACF;EACF;CAEF,GAAG,CAAC,cAAc,mBAAmB,CAAC;CAmBtC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,YAAA,KAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAA,gBAAD;EACE,KAAK;GAAE,OAAO;GAAQ,IAAA,GAAA,MAAA,QAAA,OApBK;IAC/B,IAAI,CAAC,cAAc,OAAO,CAAC;IAE3B,OAAO,EACL,WAAW;KACT,WAAW;KAEX,aAAa,EACX,YAAY,OACd;KACA,YAAY,EACV,YAAY,OACd;IACF,EACF;GACF,GAAG,CAAC,YAAY,CAKe;EAAW;EACpC,GAAI;EACJ,gBAAgB;EAChB,SAAS,qBAAqB,cAAc,CAAC,UAAU,IAAI;YAE3D,iBAAA,GAAA,kBAAA,KAAA,CAAC,aAAA,MAAD;GACE,WAAU;GACV,OAAM;GACN,KAAK;GACL,KAAK;IACH,IAAI,gBAAgB,oBAAoB,IAAI;IAC5C,OAAO;IACP,OAAO;GACT;aARF,CAUG,OAAO,UAAU,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,MAAD;IAAM,KAAK,EAAE,OAAO,UAAU;cAAI;GAAY,CAAA,IAAI,OAC9E,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,MAAD;IAAM,SAAQ;IAAS,KAAK;KAAE,UAAU;KAAM,SAAS;IAAI;cACxD;GACG,CAAA,CAEJ;;CACQ,CAAA,GACf,cACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,gCAAA,yBAAD;EACuB;EACF;EACR;EACX,KAAK;EAEJ;CACsB,CAAA,CAExB,EAAA,CAAA;AAET"}
+{"version":3,"file":"NavigationTreeItem.cjs","names":["useNavigationTree","useState","useMemo","React","Box","NavigationItem","Flex","Text","NavigationTreeContainer"],"sources":["../../../components/NavigationTree/NavigationTreeItem.tsx"],"sourcesContent":["import React, { ReactNode, useMemo, useState } from 'react';\n\nimport { CSS } from '../..';\nimport { Box } from '../Box';\nimport { Flex } from '../Flex';\nimport { NavigationItem, NavigationItemProps } from '../Navigation';\nimport { Text } from '../Text';\nimport { NavigationTreeContainer } from './NavigationTreeContainer';\nimport { useNavigationTree } from './NavigationTreeContext';\n\nexport interface NavigationTreeItemProps {\n  label: string | ReactNode;\n  subtitle?: string;\n  children?: React.ReactNode;\n  defaultExpanded?: boolean;\n  onClick?: () => void;\n  defaultExpandIcon?: React.ReactNode;\n  defaultCollapseIcon?: React.ReactNode;\n  customExpandIcon?: React.ReactNode;\n  customCollapseIcon?: React.ReactNode;\n  nestedChildrenLevel?: number;\n  fullWidth?: boolean;\n}\n\nexport const NavigationTreeItem = ({\n  label,\n  subtitle,\n  children,\n  onClick,\n  defaultExpanded = false,\n  defaultCollapseIcon: defaultCollapseIconProp,\n  defaultExpandIcon: defaultExpandIconProp,\n  customCollapseIcon,\n  customExpandIcon,\n  nestedChildrenLevel = 1,\n  fullWidth: fullWidthProp,\n  ...props\n}: NavigationTreeItemProps & NavigationItemProps) => {\n  const navigationTreeContext = useNavigationTree();\n  const defaultCollapseIcon = defaultCollapseIconProp ?? navigationTreeContext.defaultCollapseIcon;\n  const defaultExpandIcon = defaultExpandIconProp ?? navigationTreeContext.defaultExpandIcon;\n  const fullWidth = fullWidthProp ?? navigationTreeContext.fullWidth;\n  const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n  const isExpandable = useMemo(\n    // eslint-disable-next-line @eslint-react/no-children-to-array\n    () => React.Children.toArray(children).length > 0,\n    [children],\n  );\n  const hasStartAdornment = useMemo(() => !!props.startAdornment, [props.startAdornment]);\n  const usedStartAdornment = useMemo(\n    () =>\n      hasStartAdornment\n        ? props.startAdornment\n        : isExpandable\n          ? isExpanded\n            ? customCollapseIcon || defaultCollapseIcon\n            : customExpandIcon || defaultExpandIcon\n          : null,\n    [\n      hasStartAdornment,\n      isExpandable,\n      isExpanded,\n      defaultCollapseIcon,\n      defaultExpandIcon,\n      customCollapseIcon,\n      customExpandIcon,\n      props.startAdornment,\n    ],\n  );\n\n  const childCss = useMemo(() => {\n    if (!isExpandable) return null;\n\n    return {\n      pl: '$4',\n      '> div > *': {\n        '&::before, &::after': {\n          left: fullWidth ? `calc(${nestedChildrenLevel} * -20px)` : 0,\n        },\n      },\n    };\n    // eslint-disable-next-line @eslint-react/exhaustive-deps\n  }, [isExpandable, nestedChildrenLevel]);\n\n  const focusStyle = useMemo(() => {\n    if (!isExpandable) return {};\n\n    return {\n      '&:focus': {\n        boxShadow: 'none',\n\n        '&::before': {\n          background: 'none',\n        },\n        '&::after': {\n          background: 'none',\n        },\n      },\n    };\n  }, [isExpandable]);\n\n  return (\n    <Box>\n      <NavigationItem\n        css={{ width: '100%', ...focusStyle }}\n        {...props}\n        startAdornment={usedStartAdornment}\n        onClick={isExpandable ? () => setIsExpanded(!isExpanded) : onClick}\n      >\n        <Flex\n          direction=\"column\"\n          align=\"start\"\n          gap={1}\n          css={{\n            ml: isExpandable || hasStartAdornment ? 0 : '$4',\n            color: 'inherit',\n            width: '100%',\n          }}\n        >\n          {typeof label === 'string' ? <Text css={{ color: 'inherit' }}>{label}</Text> : label}\n          {subtitle && (\n            <Text variant=\"subtle\" css={{ fontSize: '$3', opacity: 0.8 }}>\n              {subtitle}\n            </Text>\n          )}\n        </Flex>\n      </NavigationItem>\n      {isExpanded && (\n        <NavigationTreeContainer\n          defaultCollapseIcon={defaultCollapseIcon}\n          defaultExpandIcon={defaultExpandIcon}\n          fullWidth={fullWidth}\n          css={childCss as CSS}\n        >\n          {children}\n        </NavigationTreeContainer>\n      )}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAwBA,IAAa,sBAAsB,EACjC,OACA,UACA,UACA,SACA,kBAAkB,OAClB,qBAAqB,yBACrB,mBAAmB,uBACnB,oBACA,kBACA,sBAAsB,GACtB,WAAW,eACX,GAAG,YACgD;CACnD,MAAM,wBAAwBA,8BAAAA,kBAAkB;CAChD,MAAM,sBAAsB,2BAA2B,sBAAsB;CAC7E,MAAM,oBAAoB,yBAAyB,sBAAsB;CACzE,MAAM,YAAY,iBAAiB,sBAAsB;CACzD,MAAM,CAAC,YAAY,kBAAA,GAAiBC,MAAAA,SAAAA,CAAS,eAAe;CAC5D,MAAM,gBAAA,GAAeC,MAAAA,QAAAA,OAEbC,MAAAA,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,SAAS,GAChD,CAAC,QAAQ,CACX;CACA,MAAM,qBAAA,GAAoBD,MAAAA,QAAAA,OAAc,CAAC,CAAC,MAAM,gBAAgB,CAAC,MAAM,cAAc,CAAC;CACtF,MAAM,sBAAA,GAAqBA,MAAAA,QAAAA,OAEvB,oBACI,MAAM,iBACN,eACE,aACE,sBAAsB,sBACtB,oBAAoB,oBACtB,MACR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAM;CACR,CACF;CAEA,MAAM,YAAA,GAAWA,MAAAA,QAAAA,OAAc;EAC7B,IAAI,CAAC,cAAc,OAAO;EAE1B,OAAO;GACL,IAAI;GACJ,aAAa,EACX,uBAAuB,EACrB,MAAM,YAAY,QAAQ,oBAAoB,aAAa,EAC7D,EACF;EACF;CAEF,GAAG,CAAC,cAAc,mBAAmB,CAAC;CAEtC,MAAM,cAAA,GAAaA,MAAAA,QAAAA,OAAc;EAC/B,IAAI,CAAC,cAAc,OAAO,CAAC;EAE3B,OAAO,EACL,WAAW;GACT,WAAW;GAEX,aAAa,EACX,YAAY,OACd;GACA,YAAY,EACV,YAAY,OACd;EACF,EACF;CACF,GAAG,CAAC,YAAY,CAAC;CAEjB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACE,YAAAA,KAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,gBAAD;EACE,KAAK;GAAE,OAAO;GAAQ,GAAG;EAAW;EACpC,GAAI;EACJ,gBAAgB;EAChB,SAAS,qBAAqB,cAAc,CAAC,UAAU,IAAI;EAE3D,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACC,aAAAA,MAAD;GACE,WAAU;GACV,OAAM;GACN,KAAK;GACL,KAAK;IACH,IAAI,gBAAgB,oBAAoB,IAAI;IAC5C,OAAO;IACP,OAAO;GACT;GARF,UAAA,CAUG,OAAO,UAAU,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,MAAD;IAAM,KAAK,EAAE,OAAO,UAAU;IAAI,UAAA;GAAY,CAAA,IAAI,OAC9E,YACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,aAAAA,MAAD;IAAM,SAAQ;IAAS,KAAK;KAAE,UAAU;KAAM,SAAS;IAAI;IACxD,UAAA;GACG,CAAA,CAEJ;;CACQ,CAAA,GACf,cACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,gCAAAA,yBAAD;EACuB;EACF;EACR;EACX,KAAK;EAEJ;CACsB,CAAA,CAExB,EAAA,CAAA;AAET"}

package/dist/components/NavigationTree/NavigationTreeItem.js

@@ -2,13 +2,18 @@ import { Box } from "../Box/Box.js";
 import { Flex } from "../Flex/Flex.js";
 import { Text } from "../Text/Text.js";
 import { NavigationItem } from "../Navigation/Navigation.js";
+import { useNavigationTree } from "./NavigationTreeContext.js";
 import { NavigationTreeContainer } from "./NavigationTreeContainer.js";
 import React, { useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region components/NavigationTree/NavigationTreeItem.tsx
-var NavigationTreeItem = ({ label, subtitle, children, onClick, defaultExpanded = false, defaultCollapseIcon, defaultExpandIcon, customCollapseIcon, customExpandIcon, nestedChildrenLevel = 1, fullWidth = false, ...props }) => {
+// components/NavigationTree/NavigationTreeItem.tsx
+var NavigationTreeItem = ({ label, subtitle, children, onClick, defaultExpanded = false, defaultCollapseIcon: defaultCollapseIconProp, defaultExpandIcon: defaultExpandIconProp, customCollapseIcon, customExpandIcon, nestedChildrenLevel = 1, fullWidth: fullWidthProp, ...props }) => {
+	const navigationTreeContext = useNavigationTree();
+	const defaultCollapseIcon = defaultCollapseIconProp ?? navigationTreeContext.defaultCollapseIcon;
+	const defaultExpandIcon = defaultExpandIconProp ?? navigationTreeContext.defaultExpandIcon;
+	const fullWidth = fullWidthProp ?? navigationTreeContext.fullWidth;
 	const [isExpanded, setIsExpanded] = useState(defaultExpanded);
-	const isExpandable = useMemo(() => React.Children.count(children) > 0, [children]);
+	const isExpandable = useMemo(() => React.Children.toArray(children).length > 0, [children]);
 	const hasStartAdornment = useMemo(() => !!props.startAdornment, [props.startAdornment]);
 	const usedStartAdornment = useMemo(() => hasStartAdornment ? props.startAdornment : isExpandable ? isExpanded ? customCollapseIcon || defaultCollapseIcon : customExpandIcon || defaultExpandIcon : null, [
 		hasStartAdornment,
@@ -27,17 +32,18 @@ var NavigationTreeItem = ({ label, subtitle, children, onClick, defaultExpanded
 			"> div > *": { "&::before, &::after": { left: fullWidth ? `calc(${nestedChildrenLevel} * -20px)` : 0 } }
 		};
 	}, [isExpandable, nestedChildrenLevel]);
+	const focusStyle = useMemo(() => {
+		if (!isExpandable) return {};
+		return { "&:focus": {
+			boxShadow: "none",
+			"&::before": { background: "none" },
+			"&::after": { background: "none" }
+		} };
+	}, [isExpandable]);
 	return /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(NavigationItem, {
 		css: {
 			width: "100%",
-			...useMemo(() => {
-				if (!isExpandable) return {};
-				return { "&:focus": {
-					boxShadow: "none",
-					"&::before": { background: "none" },
-					"&::after": { background: "none" }
-				} };
-			}, [isExpandable])
+			...focusStyle
 		},
 		...props,
 		startAdornment: usedStartAdornment,
@@ -71,7 +77,6 @@ var NavigationTreeItem = ({ label, subtitle, children, onClick, defaultExpanded
 		children
 	})] });
 };
-//#endregion
 export { NavigationTreeItem };
 
 //# sourceMappingURL=NavigationTreeItem.js.map

package/dist/components/NavigationTree/NavigationTreeItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationTreeItem.js","names":[],"sources":["../../../components/NavigationTree/NavigationTreeItem.tsx"],"sourcesContent":["import React, { ReactNode, useMemo, useState } from 'react';\n\nimport { CSS } from '../..';\nimport { Box } from '../Box';\nimport { Flex } from '../Flex';\nimport { NavigationItem, NavigationItemProps } from '../Navigation';\nimport { Text } from '../Text';\nimport { NavigationTreeContainer } from './NavigationTreeContainer';\n\nexport interface NavigationTreeItemProps {\n  label: string | ReactNode;\n  subtitle?: string;\n  children?: React.ReactNode;\n  defaultExpanded?: boolean;\n  onClick?: () => void;\n  defaultExpandIcon?: React.ReactNode;\n  defaultCollapseIcon?: React.ReactNode;\n  customExpandIcon?: React.ReactNode;\n  customCollapseIcon?: React.ReactNode;\n  nestedChildrenLevel?: number;\n  fullWidth?: boolean;\n}\n\nexport const NavigationTreeItem = ({\n  label,\n  subtitle,\n  children,\n  onClick,\n  defaultExpanded = false,\n  defaultCollapseIcon,\n  defaultExpandIcon,\n  customCollapseIcon,\n  customExpandIcon,\n  nestedChildrenLevel = 1,\n  fullWidth = false,\n  ...props\n}: NavigationTreeItemProps & NavigationItemProps) => {\n  const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n  const isExpandable = useMemo(() => React.Children.count(children) > 0, [children]);\n  const hasStartAdornment = useMemo(() => !!props.startAdornment, [props.startAdornment]);\n  const usedStartAdornment = useMemo(\n    () =>\n      hasStartAdornment\n        ? props.startAdornment\n        : isExpandable\n          ? isExpanded\n            ? customCollapseIcon || defaultCollapseIcon\n            : customExpandIcon || defaultExpandIcon\n          : null,\n    [\n      hasStartAdornment,\n      isExpandable,\n      isExpanded,\n      defaultCollapseIcon,\n      defaultExpandIcon,\n      customCollapseIcon,\n      customExpandIcon,\n      props.startAdornment,\n    ],\n  );\n\n  const childCss = useMemo(() => {\n    if (!isExpandable) return null;\n\n    return {\n      pl: '$4',\n      '> div > *': {\n        '&::before, &::after': {\n          left: fullWidth ? `calc(${nestedChildrenLevel} * -20px)` : 0,\n        },\n      },\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isExpandable, nestedChildrenLevel]);\n\n  const focusStyle = useMemo(() => {\n    if (!isExpandable) return {};\n\n    return {\n      '&:focus': {\n        boxShadow: 'none',\n\n        '&::before': {\n          background: 'none',\n        },\n        '&::after': {\n          background: 'none',\n        },\n      },\n    };\n  }, [isExpandable]);\n\n  return (\n    <Box>\n      <NavigationItem\n        css={{ width: '100%', ...focusStyle }}\n        {...props}\n        startAdornment={usedStartAdornment}\n        onClick={isExpandable ? () => setIsExpanded(!isExpanded) : onClick}\n      >\n        <Flex\n          direction=\"column\"\n          align=\"start\"\n          gap={1}\n          css={{\n            ml: isExpandable || hasStartAdornment ? 0 : '$4',\n            color: 'inherit',\n            width: '100%',\n          }}\n        >\n          {typeof label === 'string' ? <Text css={{ color: 'inherit' }}>{label}</Text> : label}\n          {subtitle && (\n            <Text variant=\"subtle\" css={{ fontSize: '$3', opacity: 0.8 }}>\n              {subtitle}\n            </Text>\n          )}\n        </Flex>\n      </NavigationItem>\n      {isExpanded && (\n        <NavigationTreeContainer\n          defaultCollapseIcon={defaultCollapseIcon}\n          defaultExpandIcon={defaultExpandIcon}\n          fullWidth={fullWidth}\n          css={childCss as CSS}\n        >\n          {children}\n        </NavigationTreeContainer>\n      )}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;AAuBA,IAAa,sBAAsB,EACjC,OACA,UACA,UACA,SACA,kBAAkB,OAClB,qBACA,mBACA,oBACA,kBACA,sBAAsB,GACtB,YAAY,OACZ,GAAG,YACgD;CACnD,MAAM,CAAC,YAAY,iBAAiB,SAAS,eAAe;CAC5D,MAAM,eAAe,cAAc,MAAM,SAAS,MAAM,QAAQ,IAAI,GAAG,CAAC,QAAQ,CAAC;CACjF,MAAM,oBAAoB,cAAc,CAAC,CAAC,MAAM,gBAAgB,CAAC,MAAM,cAAc,CAAC;CACtF,MAAM,qBAAqB,cAEvB,oBACI,MAAM,iBACN,eACE,aACE,sBAAsB,sBACtB,oBAAoB,oBACtB,MACR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAM;CACR,CACF;CAEA,MAAM,WAAW,cAAc;EAC7B,IAAI,CAAC,cAAc,OAAO;EAE1B,OAAO;GACL,IAAI;GACJ,aAAa,EACX,uBAAuB,EACrB,MAAM,YAAY,QAAQ,oBAAoB,aAAa,EAC7D,EACF;EACF;CAEF,GAAG,CAAC,cAAc,mBAAmB,CAAC;CAmBtC,OACE,qBAAC,KAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,KAAK;GAAE,OAAO;GAAQ,GApBT,cAAc;IAC/B,IAAI,CAAC,cAAc,OAAO,CAAC;IAE3B,OAAO,EACL,WAAW;KACT,WAAW;KAEX,aAAa,EACX,YAAY,OACd;KACA,YAAY,EACV,YAAY,OACd;IACF,EACF;GACF,GAAG,CAAC,YAAY,CAKe;EAAW;EACpC,GAAI;EACJ,gBAAgB;EAChB,SAAS,qBAAqB,cAAc,CAAC,UAAU,IAAI;YAE3D,qBAAC,MAAD;GACE,WAAU;GACV,OAAM;GACN,KAAK;GACL,KAAK;IACH,IAAI,gBAAgB,oBAAoB,IAAI;IAC5C,OAAO;IACP,OAAO;GACT;aARF,CAUG,OAAO,UAAU,WAAW,oBAAC,MAAD;IAAM,KAAK,EAAE,OAAO,UAAU;cAAI;GAAY,CAAA,IAAI,OAC9E,YACC,oBAAC,MAAD;IAAM,SAAQ;IAAS,KAAK;KAAE,UAAU;KAAM,SAAS;IAAI;cACxD;GACG,CAAA,CAEJ;;CACQ,CAAA,GACf,cACC,oBAAC,yBAAD;EACuB;EACF;EACR;EACX,KAAK;EAEJ;CACsB,CAAA,CAExB,EAAA,CAAA;AAET"}
+{"version":3,"file":"NavigationTreeItem.js","names":[],"sources":["../../../components/NavigationTree/NavigationTreeItem.tsx"],"sourcesContent":["import React, { ReactNode, useMemo, useState } from 'react';\n\nimport { CSS } from '../..';\nimport { Box } from '../Box';\nimport { Flex } from '../Flex';\nimport { NavigationItem, NavigationItemProps } from '../Navigation';\nimport { Text } from '../Text';\nimport { NavigationTreeContainer } from './NavigationTreeContainer';\nimport { useNavigationTree } from './NavigationTreeContext';\n\nexport interface NavigationTreeItemProps {\n  label: string | ReactNode;\n  subtitle?: string;\n  children?: React.ReactNode;\n  defaultExpanded?: boolean;\n  onClick?: () => void;\n  defaultExpandIcon?: React.ReactNode;\n  defaultCollapseIcon?: React.ReactNode;\n  customExpandIcon?: React.ReactNode;\n  customCollapseIcon?: React.ReactNode;\n  nestedChildrenLevel?: number;\n  fullWidth?: boolean;\n}\n\nexport const NavigationTreeItem = ({\n  label,\n  subtitle,\n  children,\n  onClick,\n  defaultExpanded = false,\n  defaultCollapseIcon: defaultCollapseIconProp,\n  defaultExpandIcon: defaultExpandIconProp,\n  customCollapseIcon,\n  customExpandIcon,\n  nestedChildrenLevel = 1,\n  fullWidth: fullWidthProp,\n  ...props\n}: NavigationTreeItemProps & NavigationItemProps) => {\n  const navigationTreeContext = useNavigationTree();\n  const defaultCollapseIcon = defaultCollapseIconProp ?? navigationTreeContext.defaultCollapseIcon;\n  const defaultExpandIcon = defaultExpandIconProp ?? navigationTreeContext.defaultExpandIcon;\n  const fullWidth = fullWidthProp ?? navigationTreeContext.fullWidth;\n  const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n  const isExpandable = useMemo(\n    // eslint-disable-next-line @eslint-react/no-children-to-array\n    () => React.Children.toArray(children).length > 0,\n    [children],\n  );\n  const hasStartAdornment = useMemo(() => !!props.startAdornment, [props.startAdornment]);\n  const usedStartAdornment = useMemo(\n    () =>\n      hasStartAdornment\n        ? props.startAdornment\n        : isExpandable\n          ? isExpanded\n            ? customCollapseIcon || defaultCollapseIcon\n            : customExpandIcon || defaultExpandIcon\n          : null,\n    [\n      hasStartAdornment,\n      isExpandable,\n      isExpanded,\n      defaultCollapseIcon,\n      defaultExpandIcon,\n      customCollapseIcon,\n      customExpandIcon,\n      props.startAdornment,\n    ],\n  );\n\n  const childCss = useMemo(() => {\n    if (!isExpandable) return null;\n\n    return {\n      pl: '$4',\n      '> div > *': {\n        '&::before, &::after': {\n          left: fullWidth ? `calc(${nestedChildrenLevel} * -20px)` : 0,\n        },\n      },\n    };\n    // eslint-disable-next-line @eslint-react/exhaustive-deps\n  }, [isExpandable, nestedChildrenLevel]);\n\n  const focusStyle = useMemo(() => {\n    if (!isExpandable) return {};\n\n    return {\n      '&:focus': {\n        boxShadow: 'none',\n\n        '&::before': {\n          background: 'none',\n        },\n        '&::after': {\n          background: 'none',\n        },\n      },\n    };\n  }, [isExpandable]);\n\n  return (\n    <Box>\n      <NavigationItem\n        css={{ width: '100%', ...focusStyle }}\n        {...props}\n        startAdornment={usedStartAdornment}\n        onClick={isExpandable ? () => setIsExpanded(!isExpanded) : onClick}\n      >\n        <Flex\n          direction=\"column\"\n          align=\"start\"\n          gap={1}\n          css={{\n            ml: isExpandable || hasStartAdornment ? 0 : '$4',\n            color: 'inherit',\n            width: '100%',\n          }}\n        >\n          {typeof label === 'string' ? <Text css={{ color: 'inherit' }}>{label}</Text> : label}\n          {subtitle && (\n            <Text variant=\"subtle\" css={{ fontSize: '$3', opacity: 0.8 }}>\n              {subtitle}\n            </Text>\n          )}\n        </Flex>\n      </NavigationItem>\n      {isExpanded && (\n        <NavigationTreeContainer\n          defaultCollapseIcon={defaultCollapseIcon}\n          defaultExpandIcon={defaultExpandIcon}\n          fullWidth={fullWidth}\n          css={childCss as CSS}\n        >\n          {children}\n        </NavigationTreeContainer>\n      )}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;AAwBA,IAAa,sBAAsB,EACjC,OACA,UACA,UACA,SACA,kBAAkB,OAClB,qBAAqB,yBACrB,mBAAmB,uBACnB,oBACA,kBACA,sBAAsB,GACtB,WAAW,eACX,GAAG,YACgD;CACnD,MAAM,wBAAwB,kBAAkB;CAChD,MAAM,sBAAsB,2BAA2B,sBAAsB;CAC7E,MAAM,oBAAoB,yBAAyB,sBAAsB;CACzE,MAAM,YAAY,iBAAiB,sBAAsB;CACzD,MAAM,CAAC,YAAY,iBAAiB,SAAS,eAAe;CAC5D,MAAM,eAAe,cAEb,MAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,SAAS,GAChD,CAAC,QAAQ,CACX;CACA,MAAM,oBAAoB,cAAc,CAAC,CAAC,MAAM,gBAAgB,CAAC,MAAM,cAAc,CAAC;CACtF,MAAM,qBAAqB,cAEvB,oBACI,MAAM,iBACN,eACE,aACE,sBAAsB,sBACtB,oBAAoB,oBACtB,MACR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAM;CACR,CACF;CAEA,MAAM,WAAW,cAAc;EAC7B,IAAI,CAAC,cAAc,OAAO;EAE1B,OAAO;GACL,IAAI;GACJ,aAAa,EACX,uBAAuB,EACrB,MAAM,YAAY,QAAQ,oBAAoB,aAAa,EAC7D,EACF;EACF;CAEF,GAAG,CAAC,cAAc,mBAAmB,CAAC;CAEtC,MAAM,aAAa,cAAc;EAC/B,IAAI,CAAC,cAAc,OAAO,CAAC;EAE3B,OAAO,EACL,WAAW;GACT,WAAW;GAEX,aAAa,EACX,YAAY,OACd;GACA,YAAY,EACV,YAAY,OACd;EACF,EACF;CACF,GAAG,CAAC,YAAY,CAAC;CAEjB,OACE,qBAAC,KAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,KAAK;GAAE,OAAO;GAAQ,GAAG;EAAW;EACpC,GAAI;EACJ,gBAAgB;EAChB,SAAS,qBAAqB,cAAc,CAAC,UAAU,IAAI;EAE3D,UAAA,qBAAC,MAAD;GACE,WAAU;GACV,OAAM;GACN,KAAK;GACL,KAAK;IACH,IAAI,gBAAgB,oBAAoB,IAAI;IAC5C,OAAO;IACP,OAAO;GACT;GARF,UAAA,CAUG,OAAO,UAAU,WAAW,oBAAC,MAAD;IAAM,KAAK,EAAE,OAAO,UAAU;IAAI,UAAA;GAAY,CAAA,IAAI,OAC9E,YACC,oBAAC,MAAD;IAAM,SAAQ;IAAS,KAAK;KAAE,UAAU;KAAM,SAAS;IAAI;IACxD,UAAA;GACG,CAAA,CAEJ;;CACQ,CAAA,GACf,cACC,oBAAC,yBAAD;EACuB;EACF;EACR;EACX,KAAK;EAEJ;CACsB,CAAA,CAExB,EAAA,CAAA;AAET"}

package/dist/components/Overlay.cjs

@@ -1,8 +1,7 @@
 const require_stitches_config = require("../stitches.config.cjs");
-//#region components/Overlay.tsx
+// components/Overlay.tsx
 var overlayStyles = { backgroundColor: "hsla(0, 0%, 0%, 0.7)" };
 var Overlay = require_stitches_config.styled("div", overlayStyles);
-//#endregion
 exports.Overlay = Overlay;
 exports.overlayStyles = overlayStyles;
 

package/dist/components/Overlay.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.cjs","names":[],"sources":["../../components/Overlay.tsx"],"sourcesContent":["import { CSS, styled } from '../stitches.config';\n\nexport const overlayStyles: CSS = {\n  backgroundColor: 'hsla(0, 0%, 0%, 0.7)',\n};\n\nexport const Overlay = styled('div', overlayStyles);\n"],"mappings":";;AAEA,IAAa,gBAAqB,EAChC,iBAAiB,uBACnB;AAEA,IAAa,UAAU,wBAAA,OAAO,OAAO,aAAa"}
+{"version":3,"file":"Overlay.cjs","names":["styled"],"sources":["../../components/Overlay.tsx"],"sourcesContent":["import { CSS, styled } from '../stitches.config';\n\nexport const overlayStyles: CSS = {\n  backgroundColor: 'hsla(0, 0%, 0%, 0.7)',\n};\n\nexport const Overlay = styled('div', overlayStyles);\n"],"mappings":";;AAEA,IAAa,gBAAqB,EAChC,iBAAiB,uBACnB;AAEA,IAAa,UAAUA,wBAAAA,OAAO,OAAO,aAAa"}

package/dist/components/Overlay.js

@@ -1,8 +1,7 @@
 import { styled } from "../stitches.config.js";
-//#region components/Overlay.tsx
+// components/Overlay.tsx
 var overlayStyles = { backgroundColor: "hsla(0, 0%, 0%, 0.7)" };
 var Overlay = styled("div", overlayStyles);
-//#endregion
 export { Overlay, overlayStyles };
 
 //# sourceMappingURL=Overlay.js.map

package/dist/components/Panel/Panel.cjs

@@ -1,12 +1,11 @@
 const require_stitches_config = require("../../stitches.config.cjs");
-//#region components/Panel/Panel.tsx
+// components/Panel/Panel.tsx
 var panelStyles = {
 	backgroundColor: "$deepBlue3",
 	borderRadius: "$3",
 	boxShadow: "$colors$shadowLight 0px 10px 38px -10px, $colors$deepBlue3 0px 10px 20px -15px"
 };
 var Panel = require_stitches_config.styled("div", panelStyles);
-//#endregion
 exports.Panel = Panel;
 exports.panelStyles = panelStyles;
 

package/dist/components/Panel/Panel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.cjs","names":[],"sources":["../../../components/Panel/Panel.tsx"],"sourcesContent":["import { CSS, styled } from '../../stitches.config';\n\nexport const panelStyles: CSS = {\n  backgroundColor: '$deepBlue3',\n  borderRadius: '$3',\n  boxShadow: '$colors$shadowLight 0px 10px 38px -10px, $colors$deepBlue3 0px 10px 20px -15px',\n};\n\nexport const Panel = styled('div', panelStyles);\n"],"mappings":";;AAEA,IAAa,cAAmB;CAC9B,iBAAiB;CACjB,cAAc;CACd,WAAW;AACb;AAEA,IAAa,QAAQ,wBAAA,OAAO,OAAO,WAAW"}
+{"version":3,"file":"Panel.cjs","names":["styled"],"sources":["../../../components/Panel/Panel.tsx"],"sourcesContent":["import { CSS, styled } from '../../stitches.config';\n\nexport const panelStyles: CSS = {\n  backgroundColor: '$deepBlue3',\n  borderRadius: '$3',\n  boxShadow: '$colors$shadowLight 0px 10px 38px -10px, $colors$deepBlue3 0px 10px 20px -15px',\n};\n\nexport const Panel = styled('div', panelStyles);\n"],"mappings":";;AAEA,IAAa,cAAmB;CAC9B,iBAAiB;CACjB,cAAc;CACd,WAAW;AACb;AAEA,IAAa,QAAQA,wBAAAA,OAAO,OAAO,WAAW"}

package/dist/components/Panel/Panel.js

@@ -1,12 +1,11 @@
 import { styled } from "../../stitches.config.js";
-//#region components/Panel/Panel.tsx
+// components/Panel/Panel.tsx
 var panelStyles = {
 	backgroundColor: "$deepBlue3",
 	borderRadius: "$3",
 	boxShadow: "$colors$shadowLight 0px 10px 38px -10px, $colors$deepBlue3 0px 10px 20px -15px"
 };
 var Panel = styled("div", panelStyles);
-//#endregion
 export { Panel, panelStyles };
 
 //# sourceMappingURL=Panel.js.map

package/dist/components/Panel/Panel.theme.cjs

@@ -1,7 +1,6 @@
-//#region components/Panel/Panel.theme.ts
+// components/Panel/Panel.theme.ts
 var panelLightTheme = { panelShadowLight: "rgba(0, 0, 0, 0.1)" };
 var panelDarkTheme = { panelShadowLight: "rgba(0, 0, 0, 0.3)" };
-//#endregion
 exports.panelDarkTheme = panelDarkTheme;
 exports.panelLightTheme = panelLightTheme;
 

package/dist/components/Panel/Panel.theme.js

@@ -1,7 +1,6 @@
-//#region components/Panel/Panel.theme.ts
+// components/Panel/Panel.theme.ts
 var panelLightTheme = { panelShadowLight: "rgba(0, 0, 0, 0.1)" };
 var panelDarkTheme = { panelShadowLight: "rgba(0, 0, 0, 0.3)" };
-//#endregion
 export { panelDarkTheme, panelLightTheme };
 
 //# sourceMappingURL=Panel.theme.js.map

package/dist/components/Panel/Panel.vanilla.cjs

@@ -4,7 +4,7 @@ const require_Panel_vanilla_css = require("./Panel.vanilla.css.cjs");
 let react = require("react");
 let _vanilla_extract_dynamic = require("@vanilla-extract/dynamic");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region components/Panel/Panel.vanilla.tsx
+// components/Panel/Panel.vanilla.tsx
 var PanelVanillaComponentImpl = (0, react.forwardRef)(({ as, className, css, style, ...props }, ref) => {
 	const Component = as || "div";
 	const { colors } = require_themeContext.useVanillaExtractTheme();
@@ -23,7 +23,6 @@ var PanelVanillaComponentImpl = (0, react.forwardRef)(({ as, className, css, sty
 });
 PanelVanillaComponentImpl.displayName = "PanelVanilla";
 var PanelVanilla = PanelVanillaComponentImpl;
-//#endregion
 exports.PanelVanilla = PanelVanilla;
 
 //# sourceMappingURL=Panel.vanilla.cjs.map

package/dist/components/Panel/Panel.vanilla.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.vanilla.cjs","names":[],"sources":["../../../components/Panel/Panel.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { panelStyle } from './Panel.vanilla.css';\n\nexport type PanelVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  CSSProps\n>;\n\ntype PanelVanillaComponent = PolymorphicComponent<'div', PanelVanillaProps<ElementType>>;\n\nconst PanelVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'div'>(\n    { as, className, css, style, ...props }: PanelVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'div';\n    const { colors } = useVanillaExtractTheme();\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n    const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n    return (\n      <Component\n        ref={ref}\n        className={`${panelStyle} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nPanelVanillaComponentImpl.displayName = 'PanelVanilla';\n\nexport const PanelVanilla = PanelVanillaComponentImpl as PanelVanillaComponent;\n"],"mappings":";;;;;;;AAmBA,IAAM,6BAAA,GAAA,MAAA,WAAA,EAEF,EAAE,IAAI,WAAW,KAAK,OAAO,GAAG,SAChC,QACG;CACH,MAAM,YAAY,MAAM;CACxB,MAAM,EAAE,WAAW,qBAAA,uBAAuB;CAC1C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,MAAM;CAC7D,MAAM,eAAe;EAAE,GAAG;EAAW,GAAG;EAAO,IAAA,GAAA,yBAAA,iBAAA,CAAoB,IAAI;CAAE;CAEzE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,WAAW,GAAG,0BAAA,WAAW,GAAG,aAAa,KAAK,KAAK;EACnD,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,0BAA0B,cAAc;AAExC,IAAa,eAAe"}
+{"version":3,"file":"Panel.vanilla.cjs","names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","panelStyle"],"sources":["../../../components/Panel/Panel.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { panelStyle } from './Panel.vanilla.css';\n\nexport type PanelVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  CSSProps\n>;\n\ntype PanelVanillaComponent = PolymorphicComponent<'div', PanelVanillaProps<ElementType>>;\n\nconst PanelVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'div'>(\n    { as, className, css, style, ...props }: PanelVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'div';\n    const { colors } = useVanillaExtractTheme();\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n    const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n    return (\n      <Component\n        ref={ref}\n        className={`${panelStyle} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nPanelVanillaComponentImpl.displayName = 'PanelVanilla';\n\nexport const PanelVanilla = PanelVanillaComponentImpl as PanelVanillaComponent;\n"],"mappings":";;;;;;;AAmBA,IAAM,6BAAA,GAA4BA,MAAAA,WAAAA,EAE9B,EAAE,IAAI,WAAW,KAAK,OAAO,GAAG,SAChC,QACG;CACH,MAAM,YAAY,MAAM;CACxB,MAAM,EAAE,WAAWC,qBAAAA,uBAAuB;CAC1C,MAAM,EAAE,OAAO,WAAW,SAASC,iBAAAA,eAAe,KAAK,MAAM;CAC7D,MAAM,eAAe;EAAE,GAAG;EAAW,GAAG;EAAO,IAAA,GAAGC,yBAAAA,iBAAAA,CAAiB,IAAI;CAAE;CAEzE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,WAAW,GAAGC,0BAAAA,WAAW,GAAG,aAAa,KAAK,KAAK;EACnD,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,0BAA0B,cAAc;AAExC,IAAa,eAAe"}

package/dist/components/Panel/Panel.vanilla.css.cjs

@@ -1,7 +1,6 @@
 ;/* empty css                                   */
-//#region components/Panel/Panel.vanilla.css.ts
+// components/Panel/Panel.vanilla.css.ts
 var panelStyle = "_15a4kqm0";
-//#endregion
 exports.panelStyle = panelStyle;
 
 //# sourceMappingURL=Panel.vanilla.css.cjs.map

package/dist/components/Panel/Panel.vanilla.css.js

@@ -1,7 +1,6 @@
 /* empty css                                 */
-//#region components/Panel/Panel.vanilla.css.ts
+// components/Panel/Panel.vanilla.css.ts
 var panelStyle = "_15a4kqm0";
-//#endregion
 export { panelStyle };
 
 //# sourceMappingURL=Panel.vanilla.css.js.map

package/dist/components/Panel/Panel.vanilla.js

@@ -4,7 +4,7 @@ import { panelStyle } from "./Panel.vanilla.css.js";
 import { forwardRef } from "react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx } from "react/jsx-runtime";
-//#region components/Panel/Panel.vanilla.tsx
+// components/Panel/Panel.vanilla.tsx
 var PanelVanillaComponentImpl = forwardRef(({ as, className, css, style, ...props }, ref) => {
 	const Component = as || "div";
 	const { colors } = useVanillaExtractTheme();
@@ -23,7 +23,6 @@ var PanelVanillaComponentImpl = forwardRef(({ as, className, css, style, ...prop
 });
 PanelVanillaComponentImpl.displayName = "PanelVanilla";
 var PanelVanilla = PanelVanillaComponentImpl;
-//#endregion
 export { PanelVanilla };
 
 //# sourceMappingURL=Panel.vanilla.js.map

package/dist/components/Paragraph/Paragraph.cjs

@@ -4,7 +4,7 @@ const require_Text = require("../Text/Text.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region components/Paragraph/Paragraph.tsx
+// components/Paragraph/Paragraph.tsx
 var DEFAULT_TAG = "p";
 var Paragraph = react.default.forwardRef((props, forwardedRef) => {
 	const { size = "1", ...textProps } = props;
@@ -37,7 +37,6 @@ var Paragraph = react.default.forwardRef((props, forwardedRef) => {
 		css: { ...require_deepMerge.deepMerge(textCss[size], props.css) }
 	});
 });
-//#endregion
 exports.Paragraph = Paragraph;
 
 //# sourceMappingURL=Paragraph.cjs.map

package/dist/components/Paragraph/Paragraph.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Paragraph.cjs","names":[],"sources":["../../../components/Paragraph/Paragraph.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS, VariantProps } from '../../stitches.config';\nimport { deepMerge } from '../../utils/deepMerge';\nimport { Text } from '../Text';\n\nconst DEFAULT_TAG = 'p';\n\ntype TextSizeVariants = Pick<VariantProps<typeof Text>, 'size'>;\n\ntype ParagraphSizeVariants = '1' | '2';\ntype ParagraphVariants = { size?: ParagraphSizeVariants } & Omit<VariantProps<typeof Text>, 'size'>;\ntype ParagraphProps = React.ComponentProps<typeof DEFAULT_TAG> &\n  ParagraphVariants & { css?: CSS; as?: any };\n\nexport const Paragraph = React.forwardRef<React.ElementRef<typeof DEFAULT_TAG>, ParagraphProps>(\n  (props, forwardedRef) => {\n    // '2' here is the default Paragraph size variant\n    const { size = '1', ...textProps } = props;\n\n    // This is the mapping of Paragraph Variants to Text variants\n    const textSize: Record<ParagraphSizeVariants, TextSizeVariants['size']> = {\n      1: { '@initial': '3', '@bp2': '4' },\n      2: { '@initial': '5', '@bp2': '6' },\n    };\n\n    // This is the mapping of Paragraph Variants to Text css\n    const textCss: Record<ParagraphSizeVariants, CSS> = {\n      1: { lineHeight: '25px', '@bp2': { lineHeight: '27px' } },\n      2: { color: '$slate11', lineHeight: '27px', '@bp2': { lineHeight: '30px' } },\n    };\n    return (\n      <Text\n        as={DEFAULT_TAG}\n        {...textProps}\n        ref={forwardedRef}\n        size={textSize[size]}\n        css={{\n          ...deepMerge(textCss[size], props.css),\n        }}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;AAMA,IAAM,cAAc;AASpB,IAAa,YAAY,MAAA,QAAM,YAC5B,OAAO,iBAAiB;CAEvB,MAAM,EAAE,OAAO,KAAK,GAAG,cAAc;CAGrC,MAAM,WAAoE;EACxE,GAAG;GAAE,YAAY;GAAK,QAAQ;EAAI;EAClC,GAAG;GAAE,YAAY;GAAK,QAAQ;EAAI;CACpC;CAGA,MAAM,UAA8C;EAClD,GAAG;GAAE,YAAY;GAAQ,QAAQ,EAAE,YAAY,OAAO;EAAE;EACxD,GAAG;GAAE,OAAO;GAAY,YAAY;GAAQ,QAAQ,EAAE,YAAY,OAAO;EAAE;CAC7E;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,MAAD;EACE,IAAI;EACJ,GAAI;EACJ,KAAK;EACL,MAAM,SAAS;EACf,KAAK,EACH,GAAG,kBAAA,UAAU,QAAQ,OAAO,MAAM,GAAG,EACvC;CACD,CAAA;AAEL,CACF"}
+{"version":3,"file":"Paragraph.cjs","names":["React","Text","deepMerge"],"sources":["../../../components/Paragraph/Paragraph.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS, VariantProps } from '../../stitches.config';\nimport { deepMerge } from '../../utils/deepMerge';\nimport { Text } from '../Text';\n\nconst DEFAULT_TAG = 'p';\n\ntype TextSizeVariants = Pick<VariantProps<typeof Text>, 'size'>;\n\ntype ParagraphSizeVariants = '1' | '2';\ntype ParagraphVariants = { size?: ParagraphSizeVariants } & Omit<VariantProps<typeof Text>, 'size'>;\ntype ParagraphProps = React.ComponentProps<typeof DEFAULT_TAG> &\n  ParagraphVariants & { css?: CSS; as?: any };\n\nexport const Paragraph = React.forwardRef<React.ElementRef<typeof DEFAULT_TAG>, ParagraphProps>(\n  (props, forwardedRef) => {\n    // '2' here is the default Paragraph size variant\n    const { size = '1', ...textProps } = props;\n\n    // This is the mapping of Paragraph Variants to Text variants\n    const textSize: Record<ParagraphSizeVariants, TextSizeVariants['size']> = {\n      1: { '@initial': '3', '@bp2': '4' },\n      2: { '@initial': '5', '@bp2': '6' },\n    };\n\n    // This is the mapping of Paragraph Variants to Text css\n    const textCss: Record<ParagraphSizeVariants, CSS> = {\n      1: { lineHeight: '25px', '@bp2': { lineHeight: '27px' } },\n      2: { color: '$slate11', lineHeight: '27px', '@bp2': { lineHeight: '30px' } },\n    };\n    return (\n      <Text\n        as={DEFAULT_TAG}\n        {...textProps}\n        ref={forwardedRef}\n        size={textSize[size]}\n        css={{\n          ...deepMerge(textCss[size], props.css),\n        }}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;AAMA,IAAM,cAAc;AASpB,IAAa,YAAYA,MAAAA,QAAM,YAC5B,OAAO,iBAAiB;CAEvB,MAAM,EAAE,OAAO,KAAK,GAAG,cAAc;CAGrC,MAAM,WAAoE;EACxE,GAAG;GAAE,YAAY;GAAK,QAAQ;EAAI;EAClC,GAAG;GAAE,YAAY;GAAK,QAAQ;EAAI;CACpC;CAGA,MAAM,UAA8C;EAClD,GAAG;GAAE,YAAY;GAAQ,QAAQ,EAAE,YAAY,OAAO;EAAE;EACxD,GAAG;GAAE,OAAO;GAAY,YAAY;GAAQ,QAAQ,EAAE,YAAY,OAAO;EAAE;CAC7E;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,MAAD;EACE,IAAI;EACJ,GAAI;EACJ,KAAK;EACL,MAAM,SAAS;EACf,KAAK,EACH,GAAGC,kBAAAA,UAAU,QAAQ,OAAO,MAAM,GAAG,EACvC;CACD,CAAA;AAEL,CACF"}

package/dist/components/Paragraph/Paragraph.js

@@ -2,7 +2,7 @@ import { deepMerge } from "../../utils/deepMerge.js";
 import { Text } from "../Text/Text.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
-//#region components/Paragraph/Paragraph.tsx
+// components/Paragraph/Paragraph.tsx
 var DEFAULT_TAG = "p";
 var Paragraph = React.forwardRef((props, forwardedRef) => {
 	const { size = "1", ...textProps } = props;
@@ -35,7 +35,6 @@ var Paragraph = React.forwardRef((props, forwardedRef) => {
 		css: { ...deepMerge(textCss[size], props.css) }
 	});
 });
-//#endregion
 export { Paragraph };
 
 //# sourceMappingURL=Paragraph.js.map

package/dist/components/Paragraph/Paragraph.vanilla.cjs

@@ -4,7 +4,7 @@ const require_Paragraph_vanilla_css = require("./Paragraph.vanilla.css.cjs");
 let react = require("react");
 let _vanilla_extract_dynamic = require("@vanilla-extract/dynamic");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region components/Paragraph/Paragraph.vanilla.tsx
+// components/Paragraph/Paragraph.vanilla.tsx
 var ParagraphVanillaComponentImpl = (0, react.forwardRef)(({ as, size, className, css, style, ...props }, ref) => {
 	const Component = as || "p";
 	const { colors } = require_themeContext.useVanillaExtractTheme();
@@ -14,16 +14,16 @@ var ParagraphVanillaComponentImpl = (0, react.forwardRef)(({ as, size, className
 		...style,
 		...(0, _vanilla_extract_dynamic.assignInlineVars)(vars)
 	};
+	const recipeClass = require_Paragraph_vanilla_css.paragraphRecipe({ size });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 		ref,
-		className: `${require_Paragraph_vanilla_css.paragraphRecipe({ size })} ${className || ""}`.trim(),
+		className: `${recipeClass} ${className || ""}`.trim(),
 		style: mergedStyles,
 		...props
 	});
 });
 ParagraphVanillaComponentImpl.displayName = "ParagraphVanilla";
 var ParagraphVanilla = ParagraphVanillaComponentImpl;
-//#endregion
 exports.ParagraphVanilla = ParagraphVanilla;
 
 //# sourceMappingURL=Paragraph.vanilla.cjs.map

package/dist/components/Paragraph/Paragraph.vanilla.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Paragraph.vanilla.cjs","names":[],"sources":["../../../components/Paragraph/Paragraph.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { paragraphRecipe } from './Paragraph.vanilla.css';\n\ntype ParagraphRecipeVariants = RecipeVariants<typeof paragraphRecipe>;\n\ninterface ParagraphOwnProps extends Omit<ParagraphRecipeVariants, never>, CSSProps {}\n\nexport type ParagraphVanillaProps<C extends ElementType = 'p'> = PolymorphicComponentProps<\n  C,\n  ParagraphOwnProps\n>;\n\ntype ParagraphVanillaComponent = PolymorphicComponent<'p', ParagraphVanillaProps<ElementType>>;\n\nconst ParagraphVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'p'>(\n    { as, size, className, css, style, ...props }: ParagraphVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'p';\n\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = paragraphRecipe({ size });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nParagraphVanillaComponentImpl.displayName = 'ParagraphVanilla';\n\nexport const ParagraphVanilla = ParagraphVanillaComponentImpl as ParagraphVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,iCAAA,GAAA,MAAA,WAAA,EAEF,EAAE,IAAI,MAAM,WAAW,KAAK,OAAO,GAAG,SACtC,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,qBAAA,uBAAuB;CAE1C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,MAAM;CAE7D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,iBAAA,CAAoB,IAAI;CAC1B;CAIA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,WAAW,GALK,8BAAA,gBAAgB,EAAE,KAAK,CAKzB,EAAY,GAAG,aAAa,KAAK,KAAK;EACpD,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,8BAA8B,cAAc;AAE5C,IAAa,mBAAmB"}
+{"version":3,"file":"Paragraph.vanilla.cjs","names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","paragraphRecipe"],"sources":["../../../components/Paragraph/Paragraph.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { paragraphRecipe } from './Paragraph.vanilla.css';\n\ntype ParagraphRecipeVariants = RecipeVariants<typeof paragraphRecipe>;\n\ninterface ParagraphOwnProps extends Omit<ParagraphRecipeVariants, never>, CSSProps {}\n\nexport type ParagraphVanillaProps<C extends ElementType = 'p'> = PolymorphicComponentProps<\n  C,\n  ParagraphOwnProps\n>;\n\ntype ParagraphVanillaComponent = PolymorphicComponent<'p', ParagraphVanillaProps<ElementType>>;\n\nconst ParagraphVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'p'>(\n    { as, size, className, css, style, ...props }: ParagraphVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'p';\n\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = paragraphRecipe({ size });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nParagraphVanillaComponentImpl.displayName = 'ParagraphVanilla';\n\nexport const ParagraphVanilla = ParagraphVanillaComponentImpl as ParagraphVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,iCAAA,GAAgCA,MAAAA,WAAAA,EAElC,EAAE,IAAI,MAAM,WAAW,KAAK,OAAO,GAAG,SACtC,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAWC,qBAAAA,uBAAuB;CAE1C,MAAM,EAAE,OAAO,WAAW,SAASC,iBAAAA,eAAe,KAAK,MAAM;CAE7D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAGC,yBAAAA,iBAAAA,CAAiB,IAAI;CAC1B;CAEA,MAAM,cAAcC,8BAAAA,gBAAgB,EAAE,KAAK,CAAC;CAE5C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,WAAW,GAAG,YAAY,GAAG,aAAa,KAAK,KAAK;EACpD,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,8BAA8B,cAAc;AAE5C,IAAa,mBAAmB"}

package/dist/components/Paragraph/Paragraph.vanilla.css.cjs

@@ -1,5 +1,5 @@
 ;/* empty css                                       */
-//#region components/Paragraph/Paragraph.vanilla.css.ts
+// components/Paragraph/Paragraph.vanilla.css.ts
 var paragraphRecipe = (0, require("@vanilla-extract/recipes/createRuntimeFn").createRuntimeFn)({
 	defaultClassName: "ssoibc1 ssoibc0",
 	variantClassNames: { size: {
@@ -9,7 +9,6 @@ var paragraphRecipe = (0, require("@vanilla-extract/recipes/createRuntimeFn").cr
 	defaultVariants: { size: "1" },
 	compoundVariants: []
 });
-//#endregion
 exports.paragraphRecipe = paragraphRecipe;
 
 //# sourceMappingURL=Paragraph.vanilla.css.cjs.map

package/dist/components/Paragraph/Paragraph.vanilla.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Paragraph.vanilla.css.cjs","names":[],"sources":["../../../components/Paragraph/Paragraph.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { breakpoints } from '../../styles/breakpoints.css';\nimport { tokens } from '../../styles/tokens.css';\n\n// Base text styles (from Text component)\nconst paragraphBase = style({\n  lineHeight: '1',\n  margin: '0',\n  fontFamily: tokens.fonts.rubik,\n  fontVariantNumeric: 'tabular-nums',\n  display: 'inline-block',\n});\n\nexport const paragraphRecipe = recipe({\n  base: paragraphBase,\n\n  variants: {\n    size: {\n      '1': {\n        fontSize: tokens.fontSizes['3'],\n        color: tokens.colors.textDefault,\n        lineHeight: '25px',\n        '@media': {\n          [breakpoints.bp2]: {\n            fontSize: tokens.fontSizes['4'],\n            lineHeight: '27px',\n          },\n        },\n      },\n      '2': {\n        fontSize: tokens.fontSizes['5'],\n        color: tokens.colors.slate[11],\n        lineHeight: '27px',\n        '@media': {\n          [breakpoints.bp2]: {\n            fontSize: tokens.fontSizes['6'],\n            lineHeight: '30px',\n          },\n        },\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '1',\n  },\n});\n"],"mappings":""}
+{"version":3,"file":"Paragraph.vanilla.css.cjs","names":["_7a468"],"sources":["../../../components/Paragraph/Paragraph.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { breakpoints } from '../../styles/breakpoints.css';\nimport { tokens } from '../../styles/tokens.css';\n\n// Base text styles (from Text component)\nconst paragraphBase = style({\n  lineHeight: '1',\n  margin: '0',\n  fontFamily: tokens.fonts.rubik,\n  fontVariantNumeric: 'tabular-nums',\n  display: 'inline-block',\n});\n\nexport const paragraphRecipe = recipe({\n  base: paragraphBase,\n\n  variants: {\n    size: {\n      '1': {\n        fontSize: tokens.fontSizes['3'],\n        color: tokens.colors.textDefault,\n        lineHeight: '25px',\n        '@media': {\n          [breakpoints.bp2]: {\n            fontSize: tokens.fontSizes['4'],\n            lineHeight: '27px',\n          },\n        },\n      },\n      '2': {\n        fontSize: tokens.fontSizes['5'],\n        color: tokens.colors.slate[11],\n        lineHeight: '27px',\n        '@media': {\n          [breakpoints.bp2]: {\n            fontSize: tokens.fontSizes['6'],\n            lineHeight: '30px',\n          },\n        },\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '1',\n  },\n});\n"],"mappings":""}