@plumile/ui 0.1.144 → 0.1.146

package/lib/esm/atomic/molecules/toast/toast.css.js

@@ -2,7 +2,7 @@
 /* empty css                     */
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/atomic/molecules/toast/toast.css.ts
-var t = "_19cwz1i0 txvbqb1344 txvbqb136n txvbqbd57 txvbqb1ah6 txvbqbfb7 txvbqbgqh txvbqbgz5", n = "_19cwz1i3 _19cwz1i2 txvbqb108u txvbqb116f txvbqb123n txvbqbxfq txvbqb1atp txvbqb1cw txvbqb2pn txvbqb25s txvbqbfb7 txvbqbgqh txvbqbgys txvbqb2rg txvbqbe2f", r = e({
+var t = "_19cwz1i0 txvbqb13ik txvbqb13l3 txvbqbdjn txvbqb1avm txvbqbfpn txvbqbh4x txvbqbhdl", n = "_19cwz1i3 _19cwz1i2 txvbqb10na txvbqb11kv txvbqb12i3 txvbqbxu6 txvbqb1b85 txvbqb1cw txvbqb2sj txvbqb28o txvbqbfpn txvbqbh4x txvbqbhd8 txvbqb2uc txvbqbegv", r = e({
 	defaultClassName: "_19cwz1i4",
 	variantClassNames: { kind: {
 		info: "_19cwz1i5",
@@ -11,7 +11,7 @@ var t = "_19cwz1i0 txvbqb1344 txvbqb136n txvbqbd57 txvbqb1ah6 txvbqbfb7 txvbqbgq
 	} },
 	defaultVariants: { kind: "info" },
 	compoundVariants: []
-}), i = "_19cwz1i8 txvbqbfb7 txvbqbel txvbqbler txvbqbgz5", a = "_19cwz1i9 txvbqbgwz", o = "_19cwz1ia txvbqb9j", s = "_19cwz1ib txvbqbfca txvbqbey txvbqbgz5 txvbqbrk4", c = "_19cwz1ic txvbqbfca txvbqbey txvbqbldo txvbqb192m txvbqbj81 txvbqb2r3 txvbqb2ox txvbqb1qz txvbqb1aqb txvbqbv", l = "_19cwz1ie _19cwz1id txvbqbrk4 txvbqb2tm", u = "_19cwz1ig";
+}), i = "_19cwz1i8 txvbqbfpn txvbqbel txvbqblt7 txvbqbhdl", a = "_19cwz1i9 txvbqbhbf", o = "_19cwz1ia txvbqb9j", s = "_19cwz1ib txvbqbfqq txvbqbey txvbqbhdl txvbqbryk", c = "_19cwz1ic txvbqbfqq txvbqbey txvbqbls4 txvbqb19h2 txvbqbjmh txvbqb2tz txvbqb2rt txvbqb1tv txvbqb1b4r txvbqbv", l = "_19cwz1ie _19cwz1id txvbqbryk txvbqb2wi", u = "_19cwz1ig";
 //#endregion
 export { s as actions, c as closeButton, i as header, r as kindRecipe, o as message, u as progressBar, l as progressTrack, a as title, n as toast, t as viewport };
 

package/lib/esm/atomic/organisms/login_form/loginForm.css.js

@@ -1,7 +1,7 @@
 /* empty css                                      */
 /* empty css                         */
 //#region src/atomic/organisms/login_form/loginForm.css.ts
-var e = "_1uxsb8v0 txvbqb19fz txvbqbfb7 txvbqbgqh txvbqbh0l", t = "_1uxsb8v1 txvbqbfb7 txvbqbler txvbqbey txvbqbotw", n = "_1uxsb8v2 txvbqb9j", r = "_1uxsb8v3 txvbqb1b2f txvbqb3f txvbqbgwm txvbqb7h txvbqb76 txvbqb7t";
+var e = "_1uxsb8v0 txvbqb19uf txvbqbfpn txvbqbh4x txvbqbhf1", t = "_1uxsb8v1 txvbqbfpn txvbqblt7 txvbqbey txvbqbp8c", n = "_1uxsb8v2 txvbqb9j", r = "_1uxsb8v3 txvbqb1bhb txvbqb3f txvbqbhb2 txvbqb7h txvbqb76 txvbqb7t";
 //#endregion
 export { n as forgotPassword, e as form, r as link, t as options };
 

package/lib/esm/atomic/organisms/sidebar/NavigationSidebar.js

@@ -1,55 +1,55 @@
 import { cx as e } from "../../../theme/tools.js";
 import { useUiTranslation as t } from "../../../i18n/useUiTranslation.js";
 import { ChevronLeftIcon as n, ChevronRightIcon as r } from "./icons.js";
-import { childIcon as i, childLabel as a, childLinkRecipe as o, collapseButton as s, collapseButtonLabel as c, collapseButtonStateRecipe as l, collapsibleContent as u, collapsibleItem as d, collapsibleSection as f, collapsibleStateRecipe as p, iconBaseLayer as m, iconHiddenOnHover as h, iconVisibleOnHover as g, iconWrapper as _, itemWrapper as v, label as y, navButton as b, navGapRecipe as x, navLinkRecipe as ee, navWithTrailingAction as S, trailingActionButton as C, trailingActionIconHidden as w, trailingActionIconVisible as T, trailingActionIconWrapper as te, trailingIconWrapper as E } from "./navigationSidebar.css.js";
-import { SidebarContainer as D } from "./SidebarContainer.js";
-import { useCallback as O, useMemo as k, useState as A } from "react";
-import { Fragment as j, jsx as M, jsxs as N } from "react/jsx-runtime";
-import P from "@plumile/router/routing/Link.js";
-import F from "@plumile/router/routing/useLocation.js";
+import { childIcon as i, childIconTheme as a, childLabel as o, childLinkRecipe as s, collapseButton as c, collapseButtonLabel as l, collapseButtonStateRecipe as u, collapsibleContent as d, collapsibleContentTheme as f, collapsibleItem as ee, collapsibleSection as p, collapsibleStateRecipe as m, iconBaseLayer as h, iconHiddenOnHover as g, iconVisibleOnHover as _, iconWrapper as v, itemWrapper as y, label as te, navButton as b, navGapRecipe as x, navLinkRecipe as S, navWithTrailingAction as C, trailingActionButton as w, trailingActionIconHidden as T, trailingActionIconVisible as E, trailingActionIconWrapper as D, trailingIconWrapper as ne } from "./navigationSidebar.css.js";
+import { SidebarContainer as O } from "./SidebarContainer.js";
+import { useCallback as k, useMemo as A, useState as j } from "react";
+import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";
+import F from "@plumile/router/routing/Link.js";
+import I from "@plumile/router/routing/useLocation.js";
 //#region src/atomic/organisms/sidebar/NavigationSidebar.tsx
-var I = ({ id: t, isExpanded: n, children: r }) => {
+var L = ({ id: t, isExpanded: n, children: r }) => {
 	let i = "collapsed";
-	return n && (i = "expanded"), /* @__PURE__ */ M("div", {
+	return n && (i = "expanded"), /* @__PURE__ */ N("div", {
 		id: t,
 		"aria-hidden": !n,
-		className: e(f, p({ state: i })),
-		children: /* @__PURE__ */ M("div", {
-			className: u,
+		className: e(p, m({ state: i })),
+		children: /* @__PURE__ */ N("div", {
+			className: e(d, f),
 			children: r
 		})
 	});
-}, L = ({ items: u, headerSlot: f, isCollapsed: p, onCollapsedChange: L, showCollapseToggle: R = !0 }) => {
-	let { t: z } = t(), [B, V] = A(!1), [H, U] = A({}), W = p != null, G = p ?? B, { pathname: K } = F(), q = (e, t) => t === !0 ? K === e : K === e ? !0 : K.startsWith(`${e}/`), J = O((e, t) => {
+}, R = ({ items: d, headerSlot: f, isCollapsed: p, onCollapsedChange: m, showCollapseToggle: R = !0 }) => {
+	let { t: z } = t(), [B, V] = j(!1), [H, U] = j({}), W = p != null, G = p ?? B, { pathname: K } = I(), q = (e, t) => t === !0 ? K === e : K === e ? !0 : K.startsWith(`${e}/`), J = k((e, t) => {
 		U((n) => ({
 			...n,
 			[e]: t
 		}));
-	}, []), Y = O(() => {
+	}, []), Y = k(() => {
 		let e = !G;
-		W || V(e), L?.(e);
+		W || V(e), m?.(e);
 	}, [
 		G,
 		W,
-		L
+		m
 	]), X;
 	G || (X = f ?? void 0);
-	let Z = k(() => {
+	let Z = A(() => {
 		if (!R) return null;
 		let t = n, i = z("navigation.sidebar.actions.collapseAriaLabel");
 		G && (t = r, i = z("navigation.sidebar.actions.expandAriaLabel"));
 		let a = "expanded";
 		G && (a = "collapsed");
 		let o = null;
-		return G || (o = /* @__PURE__ */ M("span", {
-			className: c,
+		return G || (o = /* @__PURE__ */ N("span", {
+			className: l,
 			children: z("navigation.sidebar.actions.collapse")
-		})), /* @__PURE__ */ N("button", {
+		})), /* @__PURE__ */ P("button", {
 			type: "button",
 			onClick: Y,
-			className: e(s, l({ state: a })),
+			className: e(c, u({ state: a })),
 			"aria-label": i,
-			children: [/* @__PURE__ */ M(t, { size: 20 }), o]
+			children: [/* @__PURE__ */ N(t, { size: 20 }), o]
 		});
 	}, [
 		Y,
@@ -57,80 +57,80 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 		R,
 		z
 	]);
-	return /* @__PURE__ */ M(D, {
+	return /* @__PURE__ */ N(O, {
 		headerSlot: X,
 		footerSlot: Z,
 		isCollapsed: G,
 		showDefaultHeaderAction: !1,
-		children: u.map((t) => {
-			let n = t.childItems ?? null, r = n != null && n.length > 0, s = H[t.key] ?? t.defaultExpanded ?? !1, c = !s, l, u = !G && r;
-			u && (l = `navigation-sidebar-${t.key}-children`), r && n.some((e) => q(e.to)) && (s = !0);
+		children: d.map((t) => {
+			let n = t.childItems ?? null, r = n != null && n.length > 0, c = H[t.key] ?? t.defaultExpanded ?? !1, l = !c, u, d = !G && r;
+			d && (u = `navigation-sidebar-${t.key}-children`), r && n.some((e) => q(e.to)) && (c = !0);
 			let f = null;
 			!G && t.trailingAction != null && (f = t.trailingAction);
-			let p = f != null, D = t.hoverIcon !== void 0 && t.hoverIcon !== null, O = t.trailingIcon !== void 0 && t.trailingIcon !== null, k = t.trailingHoverIcon !== void 0 && t.trailingHoverIcon !== null, A = !G && !p && (O || k), F;
-			G && (F = t.label);
-			let L = "expanded";
-			G && (L = "collapsed");
-			let R = x({ state: L }), z;
-			p && (z = S);
+			let p = f != null, m = t.hoverIcon !== void 0 && t.hoverIcon !== null, O = t.trailingIcon !== void 0 && t.trailingIcon !== null, k = t.trailingHoverIcon !== void 0 && t.trailingHoverIcon !== null, A = !G && !p && (O || k), j;
+			G && (j = t.label);
+			let I = "expanded";
+			G && (I = "collapsed");
+			let R = x({ state: I }), z;
+			p && (z = C);
 			let B = null;
-			G || (B = /* @__PURE__ */ M("span", {
-				className: y,
+			G || (B = /* @__PURE__ */ N("span", {
+				className: te,
 				children: t.label
 			}));
 			let V = null;
-			D && (V = /* @__PURE__ */ M("span", {
-				className: g,
+			m && (V = /* @__PURE__ */ N("span", {
+				className: _,
 				children: t.hoverIcon
 			}));
-			let U = /* @__PURE__ */ N("span", {
-				className: _,
-				children: [/* @__PURE__ */ M("span", {
-					className: e(m, { [h]: D }),
+			let U = /* @__PURE__ */ P("span", {
+				className: v,
+				children: [/* @__PURE__ */ N("span", {
+					className: e(h, { [g]: m }),
 					children: t.icon
 				}), V]
 			}), W = null;
 			if (A) {
 				let n = null;
-				O && (n = /* @__PURE__ */ M("span", {
-					className: e(m, { [h]: k }),
+				O && (n = /* @__PURE__ */ N("span", {
+					className: e(h, { [g]: k }),
 					children: t.trailingIcon
 				}));
 				let r = null;
-				k && (r = /* @__PURE__ */ M("span", {
-					className: g,
+				k && (r = /* @__PURE__ */ N("span", {
+					className: _,
 					children: t.trailingHoverIcon
-				})), W = /* @__PURE__ */ N("span", {
-					className: E,
+				})), W = /* @__PURE__ */ P("span", {
+					className: ne,
 					children: [n, r]
 				});
 			}
-			let K = /* @__PURE__ */ N(j, { children: [
+			let K = /* @__PURE__ */ P(M, { children: [
 				U,
 				B,
 				W
 			] }), Y = () => {
-				!r || G || J(t.key, c);
+				!r || G || J(t.key, l);
 			}, X;
 			if (r) X = e(b, R, z);
 			else {
 				let n = "default";
-				q(t.to, t.exact) && (n = "active"), X = e(ee({ state: n }), R, z);
+				q(t.to, t.exact) && (n = "active"), X = e(S({ state: n }), R, z);
 			}
 			let Z;
-			Z = r ? /* @__PURE__ */ M("button", {
+			Z = r ? /* @__PURE__ */ N("button", {
 				type: "button",
 				className: X,
-				"aria-expanded": s,
-				"aria-controls": l,
-				"aria-label": F,
+				"aria-expanded": c,
+				"aria-controls": u,
+				"aria-label": j,
 				onClick: Y,
 				children: K
-			}) : /* @__PURE__ */ M(P, {
+			}) : /* @__PURE__ */ N(F, {
 				to: t.to,
 				className: X,
 				exact: t.exact,
-				"aria-label": F,
+				"aria-label": j,
 				children: K
 			});
 			let Q = null;
@@ -138,55 +138,55 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 				let e = (e) => {
 					e.preventDefault(), e.stopPropagation(), f.onClick();
 				}, t = f.hoverIcon, n = t != null, r = null;
-				n && (r = /* @__PURE__ */ M("span", {
-					className: T,
+				n && (r = /* @__PURE__ */ N("span", {
+					className: E,
 					children: t
-				})), Q = /* @__PURE__ */ M("button", {
+				})), Q = /* @__PURE__ */ N("button", {
 					type: "button",
 					"aria-label": f.label,
 					onClick: e,
-					className: C,
-					children: /* @__PURE__ */ N("span", {
-						className: te,
-						children: [/* @__PURE__ */ M("span", {
-							className: w,
+					className: w,
+					children: /* @__PURE__ */ P("span", {
+						className: D,
+						children: [/* @__PURE__ */ N("span", {
+							className: T,
 							children: f.icon
 						}), r]
 					})
 				});
 			}
 			let $ = null;
-			return u && l != null && ($ = /* @__PURE__ */ M(I, {
-				id: l,
-				isExpanded: s,
-				children: n.map((e) => {
-					let t = null;
-					e.icon != null && (t = /* @__PURE__ */ M("span", {
-						className: i,
-						children: e.icon
+			return d && u != null && ($ = /* @__PURE__ */ N(L, {
+				id: u,
+				isExpanded: c,
+				children: n.map((t) => {
+					let n = null;
+					t.icon != null && (n = /* @__PURE__ */ N("span", {
+						className: e(i, a),
+						children: t.icon
 					}));
-					let n = "default";
-					return q(e.to) && (n = "active"), /* @__PURE__ */ M("div", {
-						className: d,
-						children: /* @__PURE__ */ N(P, {
-							to: e.to,
-							className: o({ state: n }),
-							"aria-label": e.label,
-							children: [t, /* @__PURE__ */ M("span", {
-								className: a,
-								children: e.label
+					let r = "default";
+					return q(t.to) && (r = "active"), /* @__PURE__ */ N("div", {
+						className: ee,
+						children: /* @__PURE__ */ P(F, {
+							to: t.to,
+							className: s({ state: r }),
+							"aria-label": t.label,
+							children: [n, /* @__PURE__ */ N("span", {
+								className: o,
+								children: t.label
 							})]
 						})
-					}, e.key);
+					}, t.key);
 				})
-			})), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ N("div", {
-				className: v,
+			})), /* @__PURE__ */ P("div", { children: [/* @__PURE__ */ P("div", {
+				className: y,
 				children: [Z, Q]
 			}), $] }, t.key);
 		})
 	});
 };
 //#endregion
-export { L as NavigationSidebar };
+export { R as NavigationSidebar };
 
 //# sourceMappingURL=NavigationSidebar.js.map

package/lib/esm/atomic/organisms/sidebar/NavigationSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationSidebar.js","names":[],"sources":["../../../../../src/atomic/organisms/sidebar/NavigationSidebar.tsx"],"sourcesContent":["import {\n  type JSX,\n  type MouseEvent,\n  type ReactNode,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react';\nimport Link from '@plumile/router/routing/Link.js';\nimport useLocation from '@plumile/router/routing/useLocation.js';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { useUiTranslation } from '../../../i18n/useUiTranslation.js';\nimport { cx } from '../../../theme/tools.js';\nimport { ChevronLeftIcon, ChevronRightIcon } from './icons.js';\nimport * as styles from './navigationSidebar.css.js';\nimport { SidebarContainer } from './SidebarContainer.js';\n\ntype SidebarItemTrailingAction = {\n  icon: ReactNode;\n  hoverIcon?: ReactNode;\n  label: string;\n  onClick: () => void;\n};\n\ntype SidebarItem = {\n  key: string;\n  to: string;\n  label: string;\n  icon: ReactNode;\n  exact?: boolean;\n  hoverIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  trailingHoverIcon?: ReactNode;\n  trailingAction?: SidebarItemTrailingAction;\n  childItems?: SidebarChildItem[];\n  defaultExpanded?: boolean;\n};\n\ntype SidebarChildItem = {\n  key: string;\n  to: string;\n  label: string;\n  icon?: ReactNode;\n};\n\ntype NavigationSidebarProps = {\n  items: SidebarItem[];\n  headerSlot?: ReactNode;\n  isCollapsed?: boolean;\n  onCollapsedChange?: (nextCollapsed: boolean) => void;\n  showCollapseToggle?: boolean;\n};\n\nconst CollapsibleSection = ({\n  id,\n  isExpanded,\n  children,\n}: {\n  id: string;\n  isExpanded: boolean;\n  children: ReactNode;\n}): JSX.Element => {\n  let collapsibleStateKey: NonNullable<\n    NonNullable<RecipeVariants<typeof styles.collapsibleStateRecipe>>['state']\n  > = 'collapsed';\n  if (isExpanded) {\n    collapsibleStateKey = 'expanded';\n  }\n\n  return (\n    <div\n      id={id}\n      aria-hidden={!isExpanded}\n      className={cx(\n        styles.collapsibleSection,\n        styles.collapsibleStateRecipe({ state: collapsibleStateKey }),\n      )}\n    >\n      <div className={styles.collapsibleContent}>{children}</div>\n    </div>\n  );\n};\n\nconst NavigationSidebar = ({\n  items,\n  headerSlot,\n  isCollapsed: isCollapsedProp,\n  onCollapsedChange,\n  showCollapseToggle = true,\n}: NavigationSidebarProps): JSX.Element => {\n  const { t } = useUiTranslation();\n  const [internalCollapsed, setInternalCollapsed] = useState(false);\n  const [expandedState, setExpandedState] = useState<Record<string, boolean>>(\n    {},\n  );\n  const isControlled = isCollapsedProp != null;\n  const isCollapsed = isCollapsedProp ?? internalCollapsed;\n  const { pathname } = useLocation();\n\n  const isPathActive = (target: string, exact?: boolean): boolean => {\n    if (exact === true) {\n      return pathname === target;\n    }\n    if (pathname === target) {\n      return true;\n    }\n    return pathname.startsWith(`${target}/`);\n  };\n\n  const handleToggle = useCallback((key: string, nextState: boolean) => {\n    setExpandedState((prev) => {\n      return {\n        ...prev,\n        [key]: nextState,\n      };\n    });\n  }, []);\n\n  const handleCollapseToggle = useCallback(() => {\n    const nextState = !isCollapsed;\n    if (!isControlled) {\n      setInternalCollapsed(nextState);\n    }\n    onCollapsedChange?.(nextState);\n  }, [isCollapsed, isControlled, onCollapsedChange]);\n\n  let headerContent: ReactNode | undefined;\n  if (!isCollapsed) {\n    headerContent = headerSlot ?? undefined;\n  }\n\n  const collapseButton = useMemo(() => {\n    if (!showCollapseToggle) {\n      return null;\n    }\n\n    let CollapseIcon = ChevronLeftIcon;\n    let buttonLabel = t('navigation.sidebar.actions.collapseAriaLabel');\n    if (isCollapsed) {\n      CollapseIcon = ChevronRightIcon;\n      buttonLabel = t('navigation.sidebar.actions.expandAriaLabel');\n    }\n\n    let collapseState: NonNullable<\n      NonNullable<\n        RecipeVariants<typeof styles.collapseButtonStateRecipe>\n      >['state']\n    > = 'expanded';\n    if (isCollapsed) {\n      collapseState = 'collapsed';\n    }\n\n    let collapseLabel: JSX.Element | null = null;\n    if (!isCollapsed) {\n      collapseLabel = (\n        <span className={styles.collapseButtonLabel}>\n          {t('navigation.sidebar.actions.collapse')}\n        </span>\n      );\n    }\n\n    return (\n      <button\n        type=\"button\"\n        onClick={handleCollapseToggle}\n        className={cx(\n          styles.collapseButton,\n          styles.collapseButtonStateRecipe({ state: collapseState }),\n        )}\n        aria-label={buttonLabel}\n      >\n        <CollapseIcon size={20} />\n        {collapseLabel}\n      </button>\n    );\n  }, [handleCollapseToggle, isCollapsed, showCollapseToggle, t]);\n\n  return (\n    <SidebarContainer\n      headerSlot={headerContent}\n      footerSlot={collapseButton}\n      isCollapsed={isCollapsed}\n      showDefaultHeaderAction={false}\n    >\n      {items.map((item) => {\n        const childItems = item.childItems ?? null;\n        const hasChildren = childItems != null && childItems.length > 0;\n        const storedExpanded = expandedState[item.key];\n        let isExpanded = storedExpanded ?? item.defaultExpanded ?? false;\n        const nextExpanded = !isExpanded;\n        let childSectionId: string | undefined;\n        const shouldRenderChildren = !isCollapsed && hasChildren;\n        if (shouldRenderChildren) {\n          childSectionId = `navigation-sidebar-${item.key}-children`;\n        }\n\n        if (hasChildren) {\n          const hasActiveChild = childItems.some((child) => {\n            return isPathActive(child.to);\n          });\n\n          if (hasActiveChild) {\n            isExpanded = true;\n          }\n        }\n\n        let trailingAction: SidebarItemTrailingAction | null = null;\n        if (!isCollapsed && item.trailingAction != null) {\n          trailingAction = item.trailingAction;\n        }\n        const showTrailingAction = trailingAction != null;\n        const hasHoverIcon =\n          item.hoverIcon !== undefined && item.hoverIcon !== null;\n        const hasTrailingIcon =\n          item.trailingIcon !== undefined && item.trailingIcon !== null;\n        const hasTrailingHoverIcon =\n          item.trailingHoverIcon !== undefined &&\n          item.trailingHoverIcon !== null;\n        const showTrailing =\n          !isCollapsed &&\n          !showTrailingAction &&\n          (hasTrailingIcon || hasTrailingHoverIcon);\n\n        let itemAriaLabel: string | undefined;\n        if (isCollapsed) {\n          itemAriaLabel = item.label;\n        }\n\n        let gapState: NonNullable<\n          NonNullable<RecipeVariants<typeof styles.navGapRecipe>>['state']\n        > = 'expanded';\n        if (isCollapsed) {\n          gapState = 'collapsed';\n        }\n        const gapClassName = styles.navGapRecipe({ state: gapState });\n\n        let paddingClassName: string | undefined;\n        if (showTrailingAction) {\n          paddingClassName = styles.navWithTrailingAction;\n        }\n\n        let labelNode: JSX.Element | null = null;\n        if (!isCollapsed) {\n          labelNode = <span className={styles.label}>{item.label}</span>;\n        }\n\n        let hoverLayer: JSX.Element | null = null;\n        if (hasHoverIcon) {\n          hoverLayer = (\n            <span className={styles.iconVisibleOnHover}>{item.hoverIcon}</span>\n          );\n        }\n\n        const leadingIcon = (\n          <span className={styles.iconWrapper}>\n            <span\n              className={cx(styles.iconBaseLayer, {\n                [styles.iconHiddenOnHover]: hasHoverIcon,\n              })}\n            >\n              {item.icon}\n            </span>\n            {hoverLayer}\n          </span>\n        );\n\n        let trailingIcons: JSX.Element | null = null;\n        if (showTrailing) {\n          let trailingBaseLayer: JSX.Element | null = null;\n          if (hasTrailingIcon) {\n            trailingBaseLayer = (\n              <span\n                className={cx(styles.iconBaseLayer, {\n                  [styles.iconHiddenOnHover]: hasTrailingHoverIcon,\n                })}\n              >\n                {item.trailingIcon}\n              </span>\n            );\n          }\n\n          let trailingHoverLayer: JSX.Element | null = null;\n          if (hasTrailingHoverIcon) {\n            trailingHoverLayer = (\n              <span className={styles.iconVisibleOnHover}>\n                {item.trailingHoverIcon}\n              </span>\n            );\n          }\n\n          trailingIcons = (\n            <span className={styles.trailingIconWrapper}>\n              {trailingBaseLayer}\n              {trailingHoverLayer}\n            </span>\n          );\n        }\n\n        const commonContent = (\n          <>\n            {leadingIcon}\n            {labelNode}\n            {trailingIcons}\n          </>\n        );\n\n        const handleClick = (): void => {\n          if (!hasChildren || isCollapsed) {\n            return;\n          }\n          handleToggle(item.key, nextExpanded);\n        };\n\n        let interactiveClassName: string;\n        if (hasChildren) {\n          interactiveClassName = cx(\n            styles.navButton,\n            gapClassName,\n            paddingClassName,\n          );\n        } else {\n          let navState: NonNullable<\n            NonNullable<RecipeVariants<typeof styles.navLinkRecipe>>['state']\n          > = 'default';\n          if (isPathActive(item.to, item.exact)) {\n            navState = 'active';\n          }\n          interactiveClassName = cx(\n            styles.navLinkRecipe({ state: navState }),\n            gapClassName,\n            paddingClassName,\n          );\n        }\n\n        let itemNode: JSX.Element;\n        if (hasChildren) {\n          itemNode = (\n            <button\n              type=\"button\"\n              className={interactiveClassName}\n              aria-expanded={isExpanded}\n              aria-controls={childSectionId}\n              aria-label={itemAriaLabel}\n              onClick={handleClick}\n            >\n              {commonContent}\n            </button>\n          );\n        } else {\n          itemNode = (\n            <Link\n              to={item.to}\n              className={interactiveClassName}\n              exact={item.exact}\n              aria-label={itemAriaLabel}\n            >\n              {commonContent}\n            </Link>\n          );\n        }\n\n        let trailingActionNode: JSX.Element | null = null;\n        if (trailingAction != null) {\n          const handleTrailingClick = (\n            event: MouseEvent<HTMLButtonElement>,\n          ): void => {\n            event.preventDefault();\n            event.stopPropagation();\n            trailingAction.onClick();\n          };\n\n          const trailingHoverIcon = trailingAction.hoverIcon;\n          const showTrailingHoverIcon =\n            trailingHoverIcon !== undefined && trailingHoverIcon !== null;\n          let trailingHoverContent: JSX.Element | null = null;\n          if (showTrailingHoverIcon) {\n            trailingHoverContent = (\n              <span className={styles.trailingActionIconVisible}>\n                {trailingHoverIcon}\n              </span>\n            );\n          }\n\n          trailingActionNode = (\n            <button\n              type=\"button\"\n              aria-label={trailingAction.label}\n              onClick={handleTrailingClick}\n              className={styles.trailingActionButton}\n            >\n              <span className={styles.trailingActionIconWrapper}>\n                <span className={styles.trailingActionIconHidden}>\n                  {trailingAction.icon}\n                </span>\n                {trailingHoverContent}\n              </span>\n            </button>\n          );\n        }\n\n        let childList: JSX.Element | null = null;\n        if (shouldRenderChildren && childSectionId != null) {\n          childList = (\n            <CollapsibleSection id={childSectionId} isExpanded={isExpanded}>\n              {childItems.map((child) => {\n                let leading: JSX.Element | null = null;\n                if (child.icon != null) {\n                  leading = (\n                    <span className={styles.childIcon}>{child.icon}</span>\n                  );\n                }\n\n                let childState: NonNullable<\n                  NonNullable<\n                    RecipeVariants<typeof styles.childLinkRecipe>\n                  >['state']\n                > = 'default';\n                if (isPathActive(child.to)) {\n                  childState = 'active';\n                }\n\n                return (\n                  <div key={child.key} className={styles.collapsibleItem}>\n                    <Link\n                      to={child.to}\n                      className={styles.childLinkRecipe({ state: childState })}\n                      aria-label={child.label}\n                    >\n                      {leading}\n                      <span className={styles.childLabel}>{child.label}</span>\n                    </Link>\n                  </div>\n                );\n              })}\n            </CollapsibleSection>\n          );\n        }\n\n        return (\n          <div key={item.key}>\n            <div className={styles.itemWrapper}>\n              {itemNode}\n              {trailingActionNode}\n            </div>\n            {childList}\n          </div>\n        );\n      })}\n    </SidebarContainer>\n  );\n};\n\nexport { NavigationSidebar };\nexport type {\n  NavigationSidebarProps,\n  SidebarChildItem,\n  SidebarItem,\n  SidebarItemTrailingAction,\n};\n"],"mappings":"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"}
+{"version":3,"file":"NavigationSidebar.js","names":[],"sources":["../../../../../src/atomic/organisms/sidebar/NavigationSidebar.tsx"],"sourcesContent":["import {\n  type JSX,\n  type MouseEvent,\n  type ReactNode,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react';\nimport Link from '@plumile/router/routing/Link.js';\nimport useLocation from '@plumile/router/routing/useLocation.js';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { useUiTranslation } from '../../../i18n/useUiTranslation.js';\nimport { cx } from '../../../theme/tools.js';\nimport { ChevronLeftIcon, ChevronRightIcon } from './icons.js';\nimport * as styles from './navigationSidebar.css.js';\nimport { SidebarContainer } from './SidebarContainer.js';\n\ntype SidebarItemTrailingAction = {\n  icon: ReactNode;\n  hoverIcon?: ReactNode;\n  label: string;\n  onClick: () => void;\n};\n\ntype SidebarItem = {\n  key: string;\n  to: string;\n  label: string;\n  icon: ReactNode;\n  exact?: boolean;\n  hoverIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  trailingHoverIcon?: ReactNode;\n  trailingAction?: SidebarItemTrailingAction;\n  childItems?: SidebarChildItem[];\n  defaultExpanded?: boolean;\n};\n\ntype SidebarChildItem = {\n  key: string;\n  to: string;\n  label: string;\n  icon?: ReactNode;\n};\n\ntype NavigationSidebarProps = {\n  items: SidebarItem[];\n  headerSlot?: ReactNode;\n  isCollapsed?: boolean;\n  onCollapsedChange?: (nextCollapsed: boolean) => void;\n  showCollapseToggle?: boolean;\n};\n\nconst CollapsibleSection = ({\n  id,\n  isExpanded,\n  children,\n}: {\n  id: string;\n  isExpanded: boolean;\n  children: ReactNode;\n}): JSX.Element => {\n  let collapsibleStateKey: NonNullable<\n    NonNullable<RecipeVariants<typeof styles.collapsibleStateRecipe>>['state']\n  > = 'collapsed';\n  if (isExpanded) {\n    collapsibleStateKey = 'expanded';\n  }\n\n  return (\n    <div\n      id={id}\n      aria-hidden={!isExpanded}\n      className={cx(\n        styles.collapsibleSection,\n        styles.collapsibleStateRecipe({ state: collapsibleStateKey }),\n      )}\n    >\n      <div\n        className={cx(\n          styles.collapsibleContent,\n          styles.collapsibleContentTheme,\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nconst NavigationSidebar = ({\n  items,\n  headerSlot,\n  isCollapsed: isCollapsedProp,\n  onCollapsedChange,\n  showCollapseToggle = true,\n}: NavigationSidebarProps): JSX.Element => {\n  const { t } = useUiTranslation();\n  const [internalCollapsed, setInternalCollapsed] = useState(false);\n  const [expandedState, setExpandedState] = useState<Record<string, boolean>>(\n    {},\n  );\n  const isControlled = isCollapsedProp != null;\n  const isCollapsed = isCollapsedProp ?? internalCollapsed;\n  const { pathname } = useLocation();\n\n  const isPathActive = (target: string, exact?: boolean): boolean => {\n    if (exact === true) {\n      return pathname === target;\n    }\n    if (pathname === target) {\n      return true;\n    }\n    return pathname.startsWith(`${target}/`);\n  };\n\n  const handleToggle = useCallback((key: string, nextState: boolean) => {\n    setExpandedState((prev) => {\n      return {\n        ...prev,\n        [key]: nextState,\n      };\n    });\n  }, []);\n\n  const handleCollapseToggle = useCallback(() => {\n    const nextState = !isCollapsed;\n    if (!isControlled) {\n      setInternalCollapsed(nextState);\n    }\n    onCollapsedChange?.(nextState);\n  }, [isCollapsed, isControlled, onCollapsedChange]);\n\n  let headerContent: ReactNode | undefined;\n  if (!isCollapsed) {\n    headerContent = headerSlot ?? undefined;\n  }\n\n  const collapseButton = useMemo(() => {\n    if (!showCollapseToggle) {\n      return null;\n    }\n\n    let CollapseIcon = ChevronLeftIcon;\n    let buttonLabel = t('navigation.sidebar.actions.collapseAriaLabel');\n    if (isCollapsed) {\n      CollapseIcon = ChevronRightIcon;\n      buttonLabel = t('navigation.sidebar.actions.expandAriaLabel');\n    }\n\n    let collapseState: NonNullable<\n      NonNullable<\n        RecipeVariants<typeof styles.collapseButtonStateRecipe>\n      >['state']\n    > = 'expanded';\n    if (isCollapsed) {\n      collapseState = 'collapsed';\n    }\n\n    let collapseLabel: JSX.Element | null = null;\n    if (!isCollapsed) {\n      collapseLabel = (\n        <span className={styles.collapseButtonLabel}>\n          {t('navigation.sidebar.actions.collapse')}\n        </span>\n      );\n    }\n\n    return (\n      <button\n        type=\"button\"\n        onClick={handleCollapseToggle}\n        className={cx(\n          styles.collapseButton,\n          styles.collapseButtonStateRecipe({ state: collapseState }),\n        )}\n        aria-label={buttonLabel}\n      >\n        <CollapseIcon size={20} />\n        {collapseLabel}\n      </button>\n    );\n  }, [handleCollapseToggle, isCollapsed, showCollapseToggle, t]);\n\n  return (\n    <SidebarContainer\n      headerSlot={headerContent}\n      footerSlot={collapseButton}\n      isCollapsed={isCollapsed}\n      showDefaultHeaderAction={false}\n    >\n      {items.map((item) => {\n        const childItems = item.childItems ?? null;\n        const hasChildren = childItems != null && childItems.length > 0;\n        const storedExpanded = expandedState[item.key];\n        let isExpanded = storedExpanded ?? item.defaultExpanded ?? false;\n        const nextExpanded = !isExpanded;\n        let childSectionId: string | undefined;\n        const shouldRenderChildren = !isCollapsed && hasChildren;\n        if (shouldRenderChildren) {\n          childSectionId = `navigation-sidebar-${item.key}-children`;\n        }\n\n        if (hasChildren) {\n          const hasActiveChild = childItems.some((child) => {\n            return isPathActive(child.to);\n          });\n\n          if (hasActiveChild) {\n            isExpanded = true;\n          }\n        }\n\n        let trailingAction: SidebarItemTrailingAction | null = null;\n        if (!isCollapsed && item.trailingAction != null) {\n          trailingAction = item.trailingAction;\n        }\n        const showTrailingAction = trailingAction != null;\n        const hasHoverIcon =\n          item.hoverIcon !== undefined && item.hoverIcon !== null;\n        const hasTrailingIcon =\n          item.trailingIcon !== undefined && item.trailingIcon !== null;\n        const hasTrailingHoverIcon =\n          item.trailingHoverIcon !== undefined &&\n          item.trailingHoverIcon !== null;\n        const showTrailing =\n          !isCollapsed &&\n          !showTrailingAction &&\n          (hasTrailingIcon || hasTrailingHoverIcon);\n\n        let itemAriaLabel: string | undefined;\n        if (isCollapsed) {\n          itemAriaLabel = item.label;\n        }\n\n        let gapState: NonNullable<\n          NonNullable<RecipeVariants<typeof styles.navGapRecipe>>['state']\n        > = 'expanded';\n        if (isCollapsed) {\n          gapState = 'collapsed';\n        }\n        const gapClassName = styles.navGapRecipe({ state: gapState });\n\n        let paddingClassName: string | undefined;\n        if (showTrailingAction) {\n          paddingClassName = styles.navWithTrailingAction;\n        }\n\n        let labelNode: JSX.Element | null = null;\n        if (!isCollapsed) {\n          labelNode = <span className={styles.label}>{item.label}</span>;\n        }\n\n        let hoverLayer: JSX.Element | null = null;\n        if (hasHoverIcon) {\n          hoverLayer = (\n            <span className={styles.iconVisibleOnHover}>{item.hoverIcon}</span>\n          );\n        }\n\n        const leadingIcon = (\n          <span className={styles.iconWrapper}>\n            <span\n              className={cx(styles.iconBaseLayer, {\n                [styles.iconHiddenOnHover]: hasHoverIcon,\n              })}\n            >\n              {item.icon}\n            </span>\n            {hoverLayer}\n          </span>\n        );\n\n        let trailingIcons: JSX.Element | null = null;\n        if (showTrailing) {\n          let trailingBaseLayer: JSX.Element | null = null;\n          if (hasTrailingIcon) {\n            trailingBaseLayer = (\n              <span\n                className={cx(styles.iconBaseLayer, {\n                  [styles.iconHiddenOnHover]: hasTrailingHoverIcon,\n                })}\n              >\n                {item.trailingIcon}\n              </span>\n            );\n          }\n\n          let trailingHoverLayer: JSX.Element | null = null;\n          if (hasTrailingHoverIcon) {\n            trailingHoverLayer = (\n              <span className={styles.iconVisibleOnHover}>\n                {item.trailingHoverIcon}\n              </span>\n            );\n          }\n\n          trailingIcons = (\n            <span className={styles.trailingIconWrapper}>\n              {trailingBaseLayer}\n              {trailingHoverLayer}\n            </span>\n          );\n        }\n\n        const commonContent = (\n          <>\n            {leadingIcon}\n            {labelNode}\n            {trailingIcons}\n          </>\n        );\n\n        const handleClick = (): void => {\n          if (!hasChildren || isCollapsed) {\n            return;\n          }\n          handleToggle(item.key, nextExpanded);\n        };\n\n        let interactiveClassName: string;\n        if (hasChildren) {\n          interactiveClassName = cx(\n            styles.navButton,\n            gapClassName,\n            paddingClassName,\n          );\n        } else {\n          let navState: NonNullable<\n            NonNullable<RecipeVariants<typeof styles.navLinkRecipe>>['state']\n          > = 'default';\n          if (isPathActive(item.to, item.exact)) {\n            navState = 'active';\n          }\n          interactiveClassName = cx(\n            styles.navLinkRecipe({ state: navState }),\n            gapClassName,\n            paddingClassName,\n          );\n        }\n\n        let itemNode: JSX.Element;\n        if (hasChildren) {\n          itemNode = (\n            <button\n              type=\"button\"\n              className={interactiveClassName}\n              aria-expanded={isExpanded}\n              aria-controls={childSectionId}\n              aria-label={itemAriaLabel}\n              onClick={handleClick}\n            >\n              {commonContent}\n            </button>\n          );\n        } else {\n          itemNode = (\n            <Link\n              to={item.to}\n              className={interactiveClassName}\n              exact={item.exact}\n              aria-label={itemAriaLabel}\n            >\n              {commonContent}\n            </Link>\n          );\n        }\n\n        let trailingActionNode: JSX.Element | null = null;\n        if (trailingAction != null) {\n          const handleTrailingClick = (\n            event: MouseEvent<HTMLButtonElement>,\n          ): void => {\n            event.preventDefault();\n            event.stopPropagation();\n            trailingAction.onClick();\n          };\n\n          const trailingHoverIcon = trailingAction.hoverIcon;\n          const showTrailingHoverIcon =\n            trailingHoverIcon !== undefined && trailingHoverIcon !== null;\n          let trailingHoverContent: JSX.Element | null = null;\n          if (showTrailingHoverIcon) {\n            trailingHoverContent = (\n              <span className={styles.trailingActionIconVisible}>\n                {trailingHoverIcon}\n              </span>\n            );\n          }\n\n          trailingActionNode = (\n            <button\n              type=\"button\"\n              aria-label={trailingAction.label}\n              onClick={handleTrailingClick}\n              className={styles.trailingActionButton}\n            >\n              <span className={styles.trailingActionIconWrapper}>\n                <span className={styles.trailingActionIconHidden}>\n                  {trailingAction.icon}\n                </span>\n                {trailingHoverContent}\n              </span>\n            </button>\n          );\n        }\n\n        let childList: JSX.Element | null = null;\n        if (shouldRenderChildren && childSectionId != null) {\n          childList = (\n            <CollapsibleSection id={childSectionId} isExpanded={isExpanded}>\n              {childItems.map((child) => {\n                let leading: JSX.Element | null = null;\n                if (child.icon != null) {\n                  leading = (\n                    <span\n                      className={cx(styles.childIcon, styles.childIconTheme)}\n                    >\n                      {child.icon}\n                    </span>\n                  );\n                }\n\n                let childState: NonNullable<\n                  NonNullable<\n                    RecipeVariants<typeof styles.childLinkRecipe>\n                  >['state']\n                > = 'default';\n                if (isPathActive(child.to)) {\n                  childState = 'active';\n                }\n\n                return (\n                  <div key={child.key} className={styles.collapsibleItem}>\n                    <Link\n                      to={child.to}\n                      className={styles.childLinkRecipe({ state: childState })}\n                      aria-label={child.label}\n                    >\n                      {leading}\n                      <span className={styles.childLabel}>{child.label}</span>\n                    </Link>\n                  </div>\n                );\n              })}\n            </CollapsibleSection>\n          );\n        }\n\n        return (\n          <div key={item.key}>\n            <div className={styles.itemWrapper}>\n              {itemNode}\n              {trailingActionNode}\n            </div>\n            {childList}\n          </div>\n        );\n      })}\n    </SidebarContainer>\n  );\n};\n\nexport { NavigationSidebar };\nexport type {\n  NavigationSidebarProps,\n  SidebarChildItem,\n  SidebarItem,\n  SidebarItemTrailingAction,\n};\n"],"mappings":"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"}

package/lib/esm/atomic/organisms/sidebar/SidebarContainer.js

@@ -1,29 +1,29 @@
 import { cx as e } from "../../../theme/tools.js";
-import { content as t, nav as n, navCollapsed as r, sidebar as i, sidebarWidthRecipe as a } from "./sidebar.css.js";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { content as t, nav as n, navCollapsed as r, sidebar as i, sidebarTheme as a, sidebarWidthRecipe as o } from "./sidebar.css.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/atomic/organisms/sidebar/SidebarContainer.tsx
-var c = ({ children: c, headerSlot: l, footerSlot: u, hideHeader: d = !1, isCollapsed: f = !1 }) => {
-	let p = null;
-	f || (p = l);
-	let m = !d && p != null, h = "expanded";
-	return f && (h = "collapsed"), /* @__PURE__ */ s("aside", {
-		className: e(i, a({ state: h })),
-		children: [/* @__PURE__ */ s("div", {
+var l = ({ children: l, headerSlot: u, footerSlot: d, hideHeader: f = !1, isCollapsed: p = !1 }) => {
+	let m = null;
+	p || (m = u);
+	let h = !f && m != null, g = "expanded";
+	return p && (g = "collapsed"), /* @__PURE__ */ c("aside", {
+		className: e(i, a, o({ state: g })),
+		children: [/* @__PURE__ */ c("div", {
 			className: t,
-			children: [m && /* @__PURE__ */ o("div", {
-				className: "_1cyd4aw6 txvbqbfb7 txvbqb19fz txvbqblee txvbqbgz5 txvbqbos3",
-				children: p
-			}), /* @__PURE__ */ o("nav", {
-				className: e(n, { [r]: f }),
-				children: c
+			children: [h && /* @__PURE__ */ s("div", {
+				className: "_1cyd4aw7 txvbqbfpn txvbqb19uf txvbqblsu txvbqbhdl txvbqbp6j",
+				children: m
+			}), /* @__PURE__ */ s("nav", {
+				className: e(n, { [r]: p }),
+				children: l
 			})]
-		}), u != null && /* @__PURE__ */ o("div", {
-			className: e("_1cyd4aw9 txvbqbrl7", { "_1cyd4awa txvbqbfb7 txvbqbldo": f }),
-			children: u
+		}), d != null && /* @__PURE__ */ s("div", {
+			className: e("_1cyd4awa txvbqbrzn", { "_1cyd4awb txvbqbfpn txvbqbls4": p }),
+			children: d
 		})]
 	});
 };
 //#endregion
-export { c as SidebarContainer };
+export { l as SidebarContainer };
 
 //# sourceMappingURL=SidebarContainer.js.map

package/lib/esm/atomic/organisms/sidebar/SidebarContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarContainer.js","names":[],"sources":["../../../../../src/atomic/organisms/sidebar/SidebarContainer.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { cx } from '../../../theme/tools.js';\nimport * as styles from './sidebar.css.js';\n\nexport type SidebarContainerProps = {\n  children: ReactNode;\n  headerSlot?: ReactNode;\n  footerSlot?: ReactNode;\n  hideHeader?: boolean;\n  isCollapsed?: boolean;\n  showDefaultHeaderAction?: boolean;\n};\n\nexport const SidebarContainer = ({\n  children,\n  headerSlot,\n  footerSlot,\n  hideHeader = false,\n  isCollapsed = false,\n}: SidebarContainerProps): JSX.Element => {\n  let headerAction: ReactNode | null = null;\n  if (!isCollapsed) {\n    headerAction = headerSlot;\n  }\n\n  const shouldRenderHeader = !hideHeader && headerAction != null;\n\n  let widthState: NonNullable<\n    NonNullable<RecipeVariants<typeof styles.sidebarWidthRecipe>>['state']\n  > = 'expanded';\n  if (isCollapsed) {\n    widthState = 'collapsed';\n  }\n\n  return (\n    <aside\n      className={cx(\n        styles.sidebar,\n        styles.sidebarWidthRecipe({ state: widthState }),\n      )}\n    >\n      <div className={styles.content}>\n        {shouldRenderHeader && (\n          <div className={styles.headerActions}>{headerAction}</div>\n        )}\n        <nav\n          className={cx(styles.nav, {\n            [styles.navCollapsed]: isCollapsed,\n          })}\n        >\n          {children}\n        </nav>\n      </div>\n      {footerSlot != null && (\n        <div\n          className={cx(styles.footer, {\n            [styles.footerCollapsed]: isCollapsed,\n          })}\n        >\n          {footerSlot}\n        </div>\n      )}\n    </aside>\n  );\n};\n"],"mappings":";;;;AAeA,IAAa,KAAoB,EAC/B,aACA,eACA,eACA,gBAAa,IACb,iBAAc,SAC0B;CACxC,IAAI,IAAiC;CACrC,AAAK,MACH,IAAe;CAGjB,IAAM,IAAqB,CAAC,KAAc,KAAgB,MAEtD,IAEA;CAKJ,OAJI,MACF,IAAa,cAIb,kBAAC,SAAD;EACE,WAAW,EACT,GACA,EAA0B,EAAE,OAAO,EAAW,CAAC,CACjD;YAJF,CAME,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,KACC,kBAAC,OAAD;IAAK,WAAW;cAAuB;GAAkB,CAAA,GAE3D,kBAAC,OAAD;IACE,WAAW,EAAG,GAAY,GACvB,IAAsB,EACzB,CAAC;IAEA;GACE,CAAA,CACF;MACJ,KAAc,QACb,kBAAC,OAAD;GACE,WAAW,EAAG,uBAAe,EAC1B,iCAAyB,EAC5B,CAAC;aAEA;EACE,CAAA,CAEF;;AAEX"}
+{"version":3,"file":"SidebarContainer.js","names":[],"sources":["../../../../../src/atomic/organisms/sidebar/SidebarContainer.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { cx } from '../../../theme/tools.js';\nimport * as styles from './sidebar.css.js';\n\nexport type SidebarContainerProps = {\n  children: ReactNode;\n  headerSlot?: ReactNode;\n  footerSlot?: ReactNode;\n  hideHeader?: boolean;\n  isCollapsed?: boolean;\n  showDefaultHeaderAction?: boolean;\n};\n\nexport const SidebarContainer = ({\n  children,\n  headerSlot,\n  footerSlot,\n  hideHeader = false,\n  isCollapsed = false,\n}: SidebarContainerProps): JSX.Element => {\n  let headerAction: ReactNode | null = null;\n  if (!isCollapsed) {\n    headerAction = headerSlot;\n  }\n\n  const shouldRenderHeader = !hideHeader && headerAction != null;\n\n  let widthState: NonNullable<\n    NonNullable<RecipeVariants<typeof styles.sidebarWidthRecipe>>['state']\n  > = 'expanded';\n  if (isCollapsed) {\n    widthState = 'collapsed';\n  }\n\n  return (\n    <aside\n      className={cx(\n        styles.sidebar,\n        styles.sidebarTheme,\n        styles.sidebarWidthRecipe({ state: widthState }),\n      )}\n    >\n      <div className={styles.content}>\n        {shouldRenderHeader && (\n          <div className={styles.headerActions}>{headerAction}</div>\n        )}\n        <nav\n          className={cx(styles.nav, {\n            [styles.navCollapsed]: isCollapsed,\n          })}\n        >\n          {children}\n        </nav>\n      </div>\n      {footerSlot != null && (\n        <div\n          className={cx(styles.footer, {\n            [styles.footerCollapsed]: isCollapsed,\n          })}\n        >\n          {footerSlot}\n        </div>\n      )}\n    </aside>\n  );\n};\n"],"mappings":";;;;AAeA,IAAa,KAAoB,EAC/B,aACA,eACA,eACA,gBAAa,IACb,iBAAc,SAC0B;CACxC,IAAI,IAAiC;CACrC,AAAK,MACH,IAAe;CAGjB,IAAM,IAAqB,CAAC,KAAc,KAAgB,MAEtD,IAEA;CAKJ,OAJI,MACF,IAAa,cAIb,kBAAC,SAAD;EACE,WAAW,EACT,GACA,GACA,EAA0B,EAAE,OAAO,EAAW,CAAC,CACjD;YALF,CAOE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,KACC,kBAAC,OAAD;IAAK,WAAW;cAAuB;GAAkB,CAAA,GAE3D,kBAAC,OAAD;IACE,WAAW,EAAG,GAAY,GACvB,IAAsB,EACzB,CAAC;IAEA;GACE,CAAA,CACF;MACJ,KAAc,QACb,kBAAC,OAAD;GACE,WAAW,EAAG,uBAAe,EAC1B,iCAAyB,EAC5B,CAAC;aAEA;EACE,CAAA,CAEF;;AAEX"}

package/lib/esm/atomic/organisms/sidebar/navigationSidebar.css.js

@@ -2,7 +2,7 @@
 /* empty css                                 */
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/atomic/organisms/sidebar/navigationSidebar.css.ts
-var t = "w6b4r71 w6b4r70 txvbqbfb7 txvbqbey txvbqbldo txvbqb2rg txvbqb25s txvbqb2pn txvbqb1f2 txvbqb1b2f txvbqb1atp txvbqbj8r txvbqb7g txvbqb78 txvbqb7t", n = e({
+var t = "w6b4r71 w6b4r70 txvbqbfpn txvbqbey txvbqbls4 txvbqb2uc txvbqb28o txvbqb2sj txvbqbjn7 txvbqb7g txvbqb78 txvbqb7t", n = e({
 	defaultClassName: "w6b4r72",
 	variantClassNames: { state: {
 		collapsed: "w6b4r73",
@@ -10,7 +10,7 @@ var t = "w6b4r71 w6b4r70 txvbqbfb7 txvbqbey txvbqbldo txvbqb2rg txvbqb25s txvbqb
 	} },
 	defaultVariants: { state: "expanded" },
 	compoundVariants: []
-}), r = "w6b4r75 txvbqbppb txvbqb9j txvbqbgwm", i = "w6b4r76 txvbqbfbk txvbqb7k txvbqb79 txvbqb7v", a = e({
+}), r = "w6b4r75 txvbqbq3r txvbqb9j txvbqbhb2", i = "w6b4r76 txvbqbfq0 txvbqb7k txvbqb79 txvbqb7v", a = e({
 	defaultClassName: "w6b4r77",
 	variantClassNames: { state: {
 		expanded: "w6b4r78",
@@ -18,32 +18,32 @@ var t = "w6b4r71 w6b4r70 txvbqbfb7 txvbqbey txvbqbldo txvbqb2rg txvbqb25s txvbqb
 	} },
 	defaultVariants: { state: "collapsed" },
 	compoundVariants: []
-}), o = "w6b4r7a txvbqbrk4 txvbqbpqe txvbqbaqj txvbqb2pn txvbqb1nq txvbqb108h txvbqbwcq", s = "w6b4r7b", c = "w6b4r7c txvbqb133r", l = "w6b4r7g w6b4r7e w6b4r7d txvbqb108h txvbqb1162 txvbqb123a txvbqbxfd txvbqbfb7 txvbqbey txvbqblee txvbqb19fz txvbqb2rg txvbqb9j txvbqbni8 txvbqb17yw txvbqb1aqb txvbqb7g txvbqb78 txvbqb7t w6b4r7f txvbqbgxc txvbqb1b15", u = e({
-	defaultClassName: "w6b4r7l w6b4r7i w6b4r7e w6b4r7d txvbqb108h txvbqb1162 txvbqb123a txvbqbxfd txvbqbfb7 txvbqbey txvbqblee txvbqb19fz txvbqb2rg txvbqb9j txvbqbni8 txvbqb17yw txvbqb1aqb txvbqb7g txvbqb78 txvbqb7t w6b4r7h txvbqbgwz txvbqb3f",
+}), o = "w6b4r7a txvbqbryk txvbqbq4u txvbqbb4z txvbqb2sj txvbqb10mx txvbqbwr6", s = "w6b4r7b", c = "w6b4r7c", l = "w6b4r7d txvbqb13i7", u = "w6b4r7h w6b4r7f w6b4r7e txvbqb10mx txvbqb11ki txvbqb12hq txvbqbxtt txvbqbfpn txvbqbey txvbqblsu txvbqb19uf txvbqb2uc txvbqb9j txvbqbnwo txvbqb18dc txvbqb1b4r txvbqb7g txvbqb78 txvbqb7t w6b4r7g txvbqbhbs", d = e({
+	defaultClassName: "w6b4r7m w6b4r7j w6b4r7f w6b4r7e txvbqb10mx txvbqb11ki txvbqb12hq txvbqbxtt txvbqbfpn txvbqbey txvbqblsu txvbqb19uf txvbqb2uc txvbqb9j txvbqbnwo txvbqb18dc txvbqb1b4r txvbqb7g txvbqb78 txvbqb7t w6b4r7i txvbqbhbf txvbqb3f",
 	variantClassNames: { state: {
-		default: "w6b4r7m w6b4r7j txvbqb1b15",
-		active: "w6b4r7n w6b4r7k txvbqb1akf txvbqb1b43 txvbqb1nq txvbqb2rt"
+		default: "w6b4r7n w6b4r7k txvbqb1bc9",
+		active: "w6b4r7o w6b4r7l"
 	} },
 	defaultVariants: { state: "default" },
 	compoundVariants: []
-}), d = e({
-	defaultClassName: "w6b4r7q",
+}), f = e({
+	defaultClassName: "w6b4r7r",
 	variantClassNames: { state: {
-		collapsed: "w6b4r7r w6b4r7o txvbqbecj",
-		expanded: "w6b4r7s w6b4r7p txvbqbedm"
+		collapsed: "w6b4r7s w6b4r7p txvbqbeqz",
+		expanded: "w6b4r7t w6b4r7q txvbqbes2"
 	} },
 	defaultVariants: { state: "expanded" },
 	compoundVariants: []
-}), f = "w6b4r7t txvbqb119b", p = "w6b4r7u txvbqbfhc txvbqbuth txvbqb1ahj txvbqbwcq txvbqb17zz txvbqb7m txvbqb78 txvbqb7t", m = "w6b4r7v txvbqb133r txvbqbfb7 txvbqbey txvbqbldo txvbqb191j txvbqbj6y txvbqbgrx", h = "w6b4r7w txvbqb7m txvbqb78 txvbqb7t", g = "w6b4r7x w6b4r7w txvbqb7m txvbqb78 txvbqb7t", _ = "w6b4r7z w6b4r7w txvbqb7m txvbqb78 txvbqb7t w6b4r7y txvbqb1b4f", v = "w6b4r710 txvbqb133r txvbqbq3e txvbqbfb7 txvbqbey txvbqbldo txvbqb191j txvbqbj6y", y = "w6b4r712 w6b4r711 txvbqb133e txvbqb18ya txvbqb135x txvbqbfb7 txvbqbey txvbqbldo txvbqb192m txvbqbj81 txvbqb2r3 txvbqb1atp txvbqb1b2f txvbqb1b4f txvbqb7g txvbqb78 txvbqb7t", b = "w6b4r713 txvbqb133r txvbqbfb7 txvbqbey txvbqbldo txvbqb1916 txvbqbj6l", x = "w6b4r715 w6b4r714 txvbqb7m txvbqb78 txvbqb7t", S = "w6b4r717 w6b4r716 txvbqb1b4f txvbqb7m txvbqb78 txvbqb7t", C = e({
-	defaultClassName: "w6b4r71c w6b4r719 w6b4r718 txvbqb108h txvbqb1162 txvbqb123a txvbqbxfd txvbqbfb7 txvbqbey txvbqbgz5 txvbqb2rg txvbqb9j txvbqbgwm txvbqbni8 txvbqb3f txvbqb7h txvbqb78 txvbqb7t",
+}), p = "w6b4r7u txvbqb11nr", m = "w6b4r7v txvbqbfvs txvbqbv7x txvbqb1avz txvbqbwr6 txvbqb18ef txvbqb7m txvbqb78 txvbqb7t", h = "w6b4r7w txvbqb13i7 txvbqbfpn txvbqbey txvbqbls4 txvbqb19fz txvbqbjle txvbqbh6d", g = "w6b4r7x txvbqb7m txvbqb78 txvbqb7t", _ = "w6b4r7y w6b4r7x txvbqb7m txvbqb78 txvbqb7t", v = "w6b4r710 w6b4r7x txvbqb7m txvbqb78 txvbqb7t w6b4r7z txvbqb1bjr", y = "w6b4r711 txvbqb13i7 txvbqbqhu txvbqbfpn txvbqbey txvbqbls4 txvbqb19fz txvbqbjle", b = "w6b4r713 w6b4r712 txvbqb13hu txvbqb19cq txvbqb13kd txvbqbfpn txvbqbey txvbqbls4 txvbqb19h2 txvbqbjmh txvbqb2tz txvbqb1b85 txvbqb1bjr txvbqb7g txvbqb78 txvbqb7t", x = "w6b4r714 txvbqb13i7 txvbqbfpn txvbqbey txvbqbls4 txvbqb19fm txvbqbjl1", S = "w6b4r716 w6b4r715 txvbqb7m txvbqb78 txvbqb7t", C = "w6b4r718 w6b4r717 txvbqb1bjr txvbqb7m txvbqb78 txvbqb7t", w = e({
+	defaultClassName: "w6b4r71d w6b4r71a w6b4r719 txvbqb10mx txvbqb11ki txvbqb12hq txvbqbxtt txvbqbfpn txvbqbey txvbqbhdl txvbqb2uc txvbqb9j txvbqbhb2 txvbqbnwo txvbqb3f txvbqb7h txvbqb78 txvbqb7t",
 	variantClassNames: { state: {
-		default: "w6b4r71d w6b4r71a txvbqb1b15",
-		active: "w6b4r71e w6b4r71b txvbqb1awp txvbqb1b43 txvbqbgwz"
+		default: "w6b4r71e w6b4r71b txvbqb1bc9",
+		active: "w6b4r71f w6b4r71c"
 	} },
 	defaultVariants: { state: "default" },
 	compoundVariants: []
-}), w = "w6b4r71f txvbqbfb7 txvbqbey txvbqbldo txvbqb1916 txvbqbj6l txvbqbgrx txvbqb1b2f", T = "w6b4r71g txvbqbfhc txvbqbuth txvbqb1ahj txvbqbwcq txvbqb17zz";
+}), T = "w6b4r71g txvbqbfpn txvbqbey txvbqbls4 txvbqb19fm txvbqbjl1 txvbqbh6d", E = "w6b4r71h", D = "w6b4r71i txvbqbfvs txvbqbv7x txvbqb1avz txvbqbwr6 txvbqb18ef";
 //#endregion
-export { w as childIcon, T as childLabel, C as childLinkRecipe, t as collapseButton, r as collapseButtonLabel, n as collapseButtonStateRecipe, o as collapsibleContent, s as collapsibleItem, i as collapsibleSection, a as collapsibleStateRecipe, h as iconBaseLayer, g as iconHiddenOnHover, _ as iconVisibleOnHover, m as iconWrapper, c as itemWrapper, p as label, l as navButton, d as navGapRecipe, u as navLinkRecipe, f as navWithTrailingAction, y as trailingActionButton, x as trailingActionIconHidden, S as trailingActionIconVisible, b as trailingActionIconWrapper, v as trailingIconWrapper };
+export { T as childIcon, E as childIconTheme, D as childLabel, w as childLinkRecipe, t as collapseButton, r as collapseButtonLabel, n as collapseButtonStateRecipe, o as collapsibleContent, s as collapsibleContentTheme, c as collapsibleItem, i as collapsibleSection, a as collapsibleStateRecipe, g as iconBaseLayer, _ as iconHiddenOnHover, v as iconVisibleOnHover, h as iconWrapper, l as itemWrapper, m as label, u as navButton, f as navGapRecipe, d as navLinkRecipe, p as navWithTrailingAction, b as trailingActionButton, S as trailingActionIconHidden, C as trailingActionIconVisible, x as trailingActionIconWrapper, y as trailingIconWrapper };
 
 //# sourceMappingURL=navigationSidebar.css.js.map

package/lib/esm/atomic/organisms/sidebar/navigationSidebar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigationSidebar.css.js","names":[],"sources":["../../../../../src/atomic/organisms/sidebar/navigationSidebar.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const collapseButton = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: 'lg',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'tonePrimaryBorder',\n    color: 'tonePrimaryText',\n    backgroundColor: 'surfaceElevated',\n    height: 10,\n    transitionProperty: 'default',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.tonePrimarySurface,\n        color: vars.colors.tonePrimaryText,\n        boxShadow: vars.boxShadow.brandGlow,\n      },\n      '&:focus-visible': {\n        outline: 'none',\n        boxShadow: `0 0 0 2px ${vars.colors.tonePrimaryBorder}`,\n      },\n    },\n  },\n]);\n\nexport const collapseButtonStateRecipe = recipe({\n  variants: {\n    state: {\n      collapsed: {\n        width: vars.spacing[10],\n        paddingInline: 0,\n      },\n      expanded: {\n        paddingInline: vars.spacing[3],\n        width: 'auto',\n      },\n    },\n  },\n  defaultVariants: {\n    state: 'expanded',\n  },\n});\n\nexport type CollapseButtonStateVariants = RecipeVariants<\n  typeof collapseButtonStateRecipe\n>;\n\nexport const collapseButtonLabel = sprinkles({\n  marginLeft: 2,\n  fontSize: 'sm',\n  fontWeight: 'medium',\n});\n\nexport const collapsibleSection = sprinkles({\n  display: 'grid',\n  transitionProperty: 'gridTemplateRowsOpacity',\n  transitionDuration: 300,\n  transitionTimingFunction: 'ease-in-out',\n});\n\nexport const collapsibleStateRecipe = recipe({\n  variants: {\n    state: {\n      expanded: {\n        gridTemplateRows: '1fr',\n        opacity: 1,\n      },\n      collapsed: {\n        gridTemplateRows: '0fr',\n        opacity: 0,\n        pointerEvents: 'none',\n      },\n    },\n  },\n  defaultVariants: {\n    state: 'collapsed',\n  },\n});\n\nexport type CollapsibleStateVariants = RecipeVariants<\n  typeof collapsibleStateRecipe\n>;\n\nexport const collapsibleContent = sprinkles({\n  marginTop: 1,\n  marginLeft: 5,\n  borderLeftWidth: 2,\n  borderStyle: 'solid',\n  borderColor: 'brandPrimaryRed',\n  paddingLeft: 3,\n  overflow: 'hidden',\n});\n\nexport const collapsibleItem = style({\n  selectors: {\n    '&:not(:first-child)': {\n      marginTop: vars.spacing[1],\n    },\n  },\n});\n\nexport const itemWrapper = sprinkles({\n  position: 'relative',\n});\n\nconst interactiveBase = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    width: 'full',\n    borderRadius: 'lg',\n    paddingY: 2,\n    paddingX: 3,\n    fontSize: 'sm',\n    lineHeight: 1.2,\n    textAlign: 'left',\n    backgroundColor: 'transparent',\n    transitionProperty: 'default',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.surfaceMuted,\n        borderColor: vars.colors.tonePrimaryBorder,\n      },\n      '&:focus-visible': {\n        outline: 'none',\n      },\n    },\n  },\n]);\n\nexport const navButton = style([\n  interactiveBase,\n  sprinkles({ fontWeight: 'bold', color: 'text' }),\n]);\n\nconst navLinkBase = style([\n  interactiveBase,\n  sprinkles({ fontWeight: 'semibold', textDecoration: 'none' }),\n]);\n\nexport const navLinkRecipe = recipe({\n  base: navLinkBase,\n  variants: {\n    state: {\n      default: sprinkles({\n        color: 'text',\n      }),\n      active: sprinkles({\n        backgroundImage: 'brandDiagonal',\n        color: 'brandWhite',\n        borderColor: 'brandPrimaryRed',\n        borderRadius: 'xl',\n      }),\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n  },\n});\n\nexport type NavLinkVariants = RecipeVariants<typeof navLinkRecipe>;\n\nexport const navGapRecipe = recipe({\n  variants: {\n    state: {\n      collapsed: sprinkles({ columnGap: 0 }),\n      expanded: sprinkles({ columnGap: 3 }),\n    },\n  },\n  defaultVariants: {\n    state: 'expanded',\n  },\n});\n\nexport type NavGapVariants = RecipeVariants<typeof navGapRecipe>;\n\nexport const navWithTrailingAction = sprinkles({\n  paddingRight: 12,\n});\n\nexport const label = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  transitionProperty: 'opacity',\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n});\n\nexport const iconWrapper = sprinkles({\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 5,\n  height: 5,\n  flexShrink: 0,\n});\n\nconst fadingLayer = sprinkles({\n  transitionProperty: 'opacity',\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n});\n\nexport const iconBaseLayer = fadingLayer;\n\nexport const iconHiddenOnHover = style([\n  fadingLayer,\n  {\n    selectors: {\n      [`${itemWrapper}:hover &`]: { opacity: 0 },\n      [`${itemWrapper}:focus-visible &`]: { opacity: 0 },\n      [`${itemWrapper}:focus-within &`]: { opacity: 0 },\n    },\n  },\n]);\n\nexport const iconVisibleOnHover = style([\n  fadingLayer,\n  sprinkles({ opacity: 0 }),\n  {\n    selectors: {\n      [`${itemWrapper}:hover &`]: { opacity: 1 },\n      [`${itemWrapper}:focus-visible &`]: { opacity: 1 },\n      [`${itemWrapper}:focus-within &`]: { opacity: 1 },\n    },\n  },\n]);\n\nexport const trailingIconWrapper = sprinkles({\n  position: 'relative',\n  marginLeft: 'auto',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 5,\n  height: 5,\n});\n\nexport const trailingActionButton = style([\n  sprinkles({\n    position: 'absolute',\n    top: '1/2',\n    right: 2,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 8,\n    height: 8,\n    borderRadius: 'md',\n    backgroundColor: 'surfaceElevated',\n    color: 'tonePrimaryText',\n    opacity: 0,\n    transitionProperty: 'default',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    transform: 'translateY(-50%)',\n    selectors: {\n      [`${itemWrapper}:hover &`]: { opacity: 1 },\n      [`${itemWrapper}:focus-within &`]: { opacity: 1 },\n      '&:hover': {\n        backgroundColor: vars.colors.tonePrimarySurface,\n        color: vars.colors.tonePrimaryText,\n      },\n      '&:focus-visible': {\n        outline: 'none',\n        boxShadow: `0 0 0 2px ${vars.colors.tonePrimaryBorder}`,\n        opacity: 1,\n      },\n    },\n  },\n]);\n\nexport const trailingActionIconWrapper = sprinkles({\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 4,\n  height: 4,\n});\n\nexport const trailingActionIconHidden = style([\n  sprinkles({\n    transitionProperty: 'opacity',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      [`${trailingActionButton}:hover &`]: { opacity: 0 },\n      [`${trailingActionButton}:focus-visible &`]: { opacity: 0 },\n    },\n  },\n]);\n\nexport const trailingActionIconVisible = style([\n  sprinkles({\n    opacity: 0,\n    transitionProperty: 'opacity',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      [`${trailingActionButton}:hover &`]: { opacity: 1 },\n      [`${trailingActionButton}:focus-visible &`]: { opacity: 1 },\n    },\n  },\n]);\n\nconst childLinkBase = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    borderRadius: 'lg',\n    paddingY: 2,\n    paddingX: 3,\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    lineHeight: 1.2,\n    textDecoration: 'none',\n    transitionProperty: 'colors',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.surfaceMuted,\n        color: vars.colors.text,\n      },\n    },\n  },\n]);\n\nexport const childLinkRecipe = recipe({\n  base: childLinkBase,\n  variants: {\n    state: {\n      default: sprinkles({\n        color: 'text',\n      }),\n      active: sprinkles({\n        backgroundColor: 'brandSecondaryOrange',\n        color: 'brandWhite',\n        fontWeight: 'semibold',\n      }),\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n  },\n});\n\nexport type ChildLinkVariants = RecipeVariants<typeof childLinkRecipe>;\n\nexport const childIcon = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 4,\n  height: 4,\n  flexShrink: 0,\n  color: 'tonePrimaryText',\n});\n\nexport const childLabel = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n"],"mappings":""}
+{"version":3,"file":"navigationSidebar.css.js","names":[],"sources":["../../../../../src/atomic/organisms/sidebar/navigationSidebar.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const collapseButton = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: 'lg',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    height: 10,\n    transitionProperty: 'default',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    backgroundColor: vars.sidebar.collapseButtonBackground,\n    borderColor: vars.sidebar.collapseButtonBorderColor,\n    color: vars.sidebar.collapseButtonColor,\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.sidebar.collapseButtonHoverBackground,\n        color: vars.sidebar.collapseButtonHoverColor,\n        boxShadow: vars.sidebar.collapseButtonHoverShadow,\n      },\n      '&:focus-visible': {\n        outline: 'none',\n        boxShadow: vars.sidebar.collapseButtonFocusRing,\n      },\n    },\n  },\n]);\n\nexport const collapseButtonStateRecipe = recipe({\n  variants: {\n    state: {\n      collapsed: {\n        width: vars.spacing[10],\n        paddingInline: 0,\n      },\n      expanded: {\n        paddingInline: vars.spacing[3],\n        width: 'auto',\n      },\n    },\n  },\n  defaultVariants: {\n    state: 'expanded',\n  },\n});\n\nexport type CollapseButtonStateVariants = RecipeVariants<\n  typeof collapseButtonStateRecipe\n>;\n\nexport const collapseButtonLabel = sprinkles({\n  marginLeft: 2,\n  fontSize: 'sm',\n  fontWeight: 'medium',\n});\n\nexport const collapsibleSection = sprinkles({\n  display: 'grid',\n  transitionProperty: 'gridTemplateRowsOpacity',\n  transitionDuration: 300,\n  transitionTimingFunction: 'ease-in-out',\n});\n\nexport const collapsibleStateRecipe = recipe({\n  variants: {\n    state: {\n      expanded: {\n        gridTemplateRows: '1fr',\n        opacity: 1,\n      },\n      collapsed: {\n        gridTemplateRows: '0fr',\n        opacity: 0,\n        pointerEvents: 'none',\n      },\n    },\n  },\n  defaultVariants: {\n    state: 'collapsed',\n  },\n});\n\nexport type CollapsibleStateVariants = RecipeVariants<\n  typeof collapsibleStateRecipe\n>;\n\nexport const collapsibleContent = sprinkles({\n  marginTop: 1,\n  marginLeft: 5,\n  borderLeftWidth: 2,\n  borderStyle: 'solid',\n  paddingLeft: 3,\n  overflow: 'hidden',\n});\n\nexport const collapsibleContentTheme = style({\n  borderColor: vars.sidebar.nestedBorderColor,\n});\n\nexport const collapsibleItem = style({\n  selectors: {\n    '&:not(:first-child)': {\n      marginTop: vars.spacing[1],\n    },\n  },\n});\n\nexport const itemWrapper = sprinkles({\n  position: 'relative',\n});\n\nconst interactiveBase = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    width: 'full',\n    borderRadius: 'lg',\n    paddingY: 2,\n    paddingX: 3,\n    fontSize: 'sm',\n    lineHeight: 1.2,\n    textAlign: 'left',\n    backgroundColor: 'transparent',\n    transitionProperty: 'default',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.sidebar.itemHoverBackground,\n        color: vars.sidebar.itemHoverColor,\n      },\n      '&:focus-visible': {\n        outline: 'none',\n        boxShadow: vars.sidebar.itemFocusRing,\n      },\n    },\n  },\n]);\n\nexport const navButton = style([\n  interactiveBase,\n  sprinkles({ fontWeight: 'bold' }),\n  {\n    color: vars.sidebar.itemColor,\n  },\n]);\n\nconst navLinkBase = style([\n  interactiveBase,\n  sprinkles({ fontWeight: 'semibold', textDecoration: 'none' }),\n  {\n    color: vars.sidebar.itemColor,\n  },\n]);\n\nexport const navLinkRecipe = recipe({\n  base: navLinkBase,\n  variants: {\n    state: {\n      default: sprinkles({\n        color: 'inherit',\n      }),\n      active: style({\n        backgroundColor: vars.sidebar.itemActiveBackground,\n        backgroundImage: vars.sidebar.itemActiveBackgroundImage,\n        borderColor: vars.sidebar.itemActiveBorderColor,\n        color: vars.sidebar.itemActiveColor,\n        boxShadow: vars.sidebar.itemActiveShadow,\n      }),\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n  },\n});\n\nexport type NavLinkVariants = RecipeVariants<typeof navLinkRecipe>;\n\nexport const navGapRecipe = recipe({\n  variants: {\n    state: {\n      collapsed: sprinkles({ columnGap: 0 }),\n      expanded: sprinkles({ columnGap: 3 }),\n    },\n  },\n  defaultVariants: {\n    state: 'expanded',\n  },\n});\n\nexport type NavGapVariants = RecipeVariants<typeof navGapRecipe>;\n\nexport const navWithTrailingAction = sprinkles({\n  paddingRight: 12,\n});\n\nexport const label = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  transitionProperty: 'opacity',\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n});\n\nexport const iconWrapper = sprinkles({\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 5,\n  height: 5,\n  flexShrink: 0,\n});\n\nconst fadingLayer = sprinkles({\n  transitionProperty: 'opacity',\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n});\n\nexport const iconBaseLayer = fadingLayer;\n\nexport const iconHiddenOnHover = style([\n  fadingLayer,\n  {\n    selectors: {\n      [`${itemWrapper}:hover &`]: { opacity: 0 },\n      [`${itemWrapper}:focus-visible &`]: { opacity: 0 },\n      [`${itemWrapper}:focus-within &`]: { opacity: 0 },\n    },\n  },\n]);\n\nexport const iconVisibleOnHover = style([\n  fadingLayer,\n  sprinkles({ opacity: 0 }),\n  {\n    selectors: {\n      [`${itemWrapper}:hover &`]: { opacity: 1 },\n      [`${itemWrapper}:focus-visible &`]: { opacity: 1 },\n      [`${itemWrapper}:focus-within &`]: { opacity: 1 },\n    },\n  },\n]);\n\nexport const trailingIconWrapper = sprinkles({\n  position: 'relative',\n  marginLeft: 'auto',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 5,\n  height: 5,\n});\n\nexport const trailingActionButton = style([\n  sprinkles({\n    position: 'absolute',\n    top: '1/2',\n    right: 2,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 8,\n    height: 8,\n    borderRadius: 'md',\n    backgroundColor: 'surfaceElevated',\n    opacity: 0,\n    transitionProperty: 'default',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    transform: 'translateY(-50%)',\n    color: vars.sidebar.actionColor,\n    selectors: {\n      [`${itemWrapper}:hover &`]: { opacity: 1 },\n      [`${itemWrapper}:focus-within &`]: { opacity: 1 },\n      '&:hover': {\n        backgroundColor: vars.sidebar.actionHoverBackground,\n        color: vars.sidebar.actionHoverColor,\n      },\n      '&:focus-visible': {\n        outline: 'none',\n        boxShadow: vars.sidebar.actionFocusRing,\n        opacity: 1,\n      },\n    },\n  },\n]);\n\nexport const trailingActionIconWrapper = sprinkles({\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 4,\n  height: 4,\n});\n\nexport const trailingActionIconHidden = style([\n  sprinkles({\n    transitionProperty: 'opacity',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      [`${trailingActionButton}:hover &`]: { opacity: 0 },\n      [`${trailingActionButton}:focus-visible &`]: { opacity: 0 },\n    },\n  },\n]);\n\nexport const trailingActionIconVisible = style([\n  sprinkles({\n    opacity: 0,\n    transitionProperty: 'opacity',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      [`${trailingActionButton}:hover &`]: { opacity: 1 },\n      [`${trailingActionButton}:focus-visible &`]: { opacity: 1 },\n    },\n  },\n]);\n\nconst childLinkBase = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    borderRadius: 'lg',\n    paddingY: 2,\n    paddingX: 3,\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    lineHeight: 1.2,\n    textDecoration: 'none',\n    transitionProperty: 'colors',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    color: vars.sidebar.itemColor,\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.sidebar.itemHoverBackground,\n        color: vars.sidebar.itemHoverColor,\n      },\n    },\n  },\n]);\n\nexport const childLinkRecipe = recipe({\n  base: childLinkBase,\n  variants: {\n    state: {\n      default: sprinkles({\n        color: 'inherit',\n      }),\n      active: style({\n        backgroundColor: vars.sidebar.itemActiveBackground,\n        backgroundImage: vars.sidebar.itemActiveBackgroundImage,\n        borderColor: vars.sidebar.itemActiveBorderColor,\n        color: vars.sidebar.itemActiveColor,\n        boxShadow: vars.sidebar.itemActiveShadow,\n        fontWeight: vars.fontWeight.semibold,\n      }),\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n  },\n});\n\nexport type ChildLinkVariants = RecipeVariants<typeof childLinkRecipe>;\n\nexport const childIcon = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 4,\n  height: 4,\n  flexShrink: 0,\n});\n\nexport const childIconTheme = style({\n  color: vars.sidebar.itemColor,\n});\n\nexport const childLabel = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n"],"mappings":""}