@plumile/ui 0.1.62 → 0.1.64

package/lib/esm/atomic/molecules/markdown/components/MarkdownArticleContainer.css.js

@@ -1,4 +1,5 @@
 /* empty css                                         */
+/* empty css                             */
 /* empty css                                        */
 //#region src/atomic/molecules/markdown/components/MarkdownArticleContainer.css.ts
 var e = "_7ez1431 _7ez1430 txvbqb9io txvbqbai6 txvbqbaoo";

package/lib/esm/atomic/molecules/markdown/components/MarkdownDelete.css.js

@@ -1,5 +1,4 @@
 /* empty css                                         */
-/* empty css                             */
 /* empty css                              */
 //#region src/atomic/molecules/markdown/components/MarkdownDelete.css.ts
 var e = "_1gyncxq1 _1gyncxq0 txvbqb3c txvbqb3g";

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

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

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

@@ -0,0 +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, useLocation } from '@plumile/router';\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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"}

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

@@ -0,0 +1,2 @@
+import { SidebarContainer as e } from "./SidebarContainer.js";
+export { e as Sidebar };

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

@@ -0,0 +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";
+//#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", {
+			className: t,
+			children: [m && /* @__PURE__ */ o("div", {
+				className: "_1cyd4aw6 txvbqb9io txvbqbu6f txvbqbdof txvbqbao6 txvbqbfzo",
+				children: p
+			}), /* @__PURE__ */ o("nav", {
+				className: e(n, { [r]: f }),
+				children: c
+			})]
+		}), u != null && /* @__PURE__ */ o("div", {
+			className: e("_1cyd4aw9 txvbqbhxo", { "_1cyd4awa txvbqb9io txvbqbdnx": f }),
+			children: u
+		})]
+	});
+};
+//#endregion
+export { c as SidebarContainer };
+
+//# sourceMappingURL=SidebarContainer.js.map

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

@@ -0,0 +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;AACrC,CAAK,MACH,IAAe;CAGjB,IAAM,IAAqB,CAAC,KAAc,KAAgB,MAEtD,IAEA;AAKJ,QAJI,MACF,IAAa,cAIb,kBAAC,SAAD;EACE,WAAW,EACT,GACA,EAA0B,EAAE,OAAO,GAAY,CAAC,CACjD;YAJH,CAME,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,KACC,kBAAC,OAAD;IAAK,WAAW;cAAuB;IAAmB,CAAA,EAE5D,kBAAC,OAAD;IACE,WAAW,EAAG,GAAY,GACvB,IAAsB,GACxB,CAAC;IAED;IACG,CAAA,CACF;MACL,KAAc,QACb,kBAAC,OAAD;GACE,WAAW,EAAG,uBAAe,EAC1B,iCAAyB,GAC3B,CAAC;aAED;GACG,CAAA,CAEF"}

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

@@ -0,0 +1,67 @@
+import { ChevronDownSvg as e } from "../../../icons/ChevronDownSvg.js";
+import { SidebarHomeSvg as t } from "../../../icons/SidebarHomeSvg.js";
+import { ChevronLeftSvg as n } from "../../../icons/ChevronLeftSvg.js";
+import { ChevronRightSvg as r } from "../../../icons/ChevronRightSvg.js";
+import { GlobeSvg as i } from "../../../icons/GlobeSvg.js";
+import { ProjectsFolderSvg as a } from "../../../icons/ProjectsFolderSvg.js";
+import { SidebarInitiativesSvg as o } from "../../../icons/SidebarInitiativesSvg.js";
+import { SidebarPlusSvg as s } from "../../../icons/SidebarPlusSvg.js";
+import { SidebarSearchSvg as c } from "../../../icons/SidebarSearchSvg.js";
+import { SidebarSettingsSvg as l } from "../../../icons/SidebarSettingsSvg.js";
+import { SidebarTasksSvg as u } from "../../../icons/SidebarTasksSvg.js";
+import { SidebarTeamSvg as d } from "../../../icons/SidebarTeamSvg.js";
+import { jsx as f } from "react/jsx-runtime";
+//#region src/atomic/organisms/sidebar/icons.tsx
+var p = ({ size: e = 24, className: n }) => /* @__PURE__ */ f(t, {
+	width: e,
+	height: e,
+	className: n
+}), m = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(u, {
+	width: e,
+	height: e,
+	className: t
+}), h = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(o, {
+	width: e,
+	height: e,
+	className: t
+}), g = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(d, {
+	width: e,
+	height: e,
+	className: t
+}), _ = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(i, {
+	width: e,
+	height: e,
+	className: t
+}), v = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(l, {
+	width: e,
+	height: e,
+	className: t
+}), y = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(a, {
+	width: e,
+	height: e,
+	className: t
+}), b = ({ size: t = 24, className: n }) => /* @__PURE__ */ f(e, {
+	width: t,
+	height: t,
+	className: n
+}), x = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(r, {
+	width: e,
+	height: e,
+	className: t
+}), S = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(n, {
+	width: e,
+	height: e,
+	className: t
+}), C = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(c, {
+	width: e,
+	height: e,
+	className: t
+}), w = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(s, {
+	width: e,
+	height: e,
+	className: t
+});
+//#endregion
+export { b as ChevronDownIcon, S as ChevronLeftIcon, x as ChevronRightIcon, _ as DocumentationIcon, p as HomeIcon, h as InitiativesIcon, w as PlusIcon, y as ProjectsIcon, C as SearchIcon, v as SettingsIcon, m as TasksIcon, g as TeamIcon };
+
+//# sourceMappingURL=icons.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","names":[],"sources":["../../../../../src/atomic/organisms/sidebar/icons.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { ChevronDownSvg } from '../../../icons/ChevronDownSvg.js';\nimport { ChevronLeftSvg } from '../../../icons/ChevronLeftSvg.js';\nimport { ChevronRightSvg } from '../../../icons/ChevronRightSvg.js';\nimport { GlobeSvg } from '../../../icons/GlobeSvg.js';\nimport { ProjectsFolderSvg } from '../../../icons/ProjectsFolderSvg.js';\nimport { SidebarHomeSvg } from '../../../icons/SidebarHomeSvg.js';\nimport { SidebarInitiativesSvg } from '../../../icons/SidebarInitiativesSvg.js';\nimport { SidebarPlusSvg } from '../../../icons/SidebarPlusSvg.js';\nimport { SidebarSearchSvg } from '../../../icons/SidebarSearchSvg.js';\nimport { SidebarSettingsSvg } from '../../../icons/SidebarSettingsSvg.js';\nimport { SidebarTasksSvg } from '../../../icons/SidebarTasksSvg.js';\nimport { SidebarTeamSvg } from '../../../icons/SidebarTeamSvg.js';\n\ntype Props = {\n  size?: number;\n  className?: string;\n};\n\nexport const HomeIcon = ({ size = 24, className }: Props): JSX.Element => {\n  return <SidebarHomeSvg width={size} height={size} className={className} />;\n};\n\nexport const TasksIcon = ({ size = 24, className }: Props): JSX.Element => {\n  return <SidebarTasksSvg width={size} height={size} className={className} />;\n};\n\nexport const InitiativesIcon = ({\n  size = 24,\n  className,\n}: Props): JSX.Element => {\n  return (\n    <SidebarInitiativesSvg width={size} height={size} className={className} />\n  );\n};\n\nexport const TeamIcon = ({ size = 24, className }: Props): JSX.Element => {\n  return <SidebarTeamSvg width={size} height={size} className={className} />;\n};\n\nexport const DocumentationIcon = ({\n  size = 24,\n  className,\n}: Props): JSX.Element => {\n  return <GlobeSvg width={size} height={size} className={className} />;\n};\n\nexport const SettingsIcon = ({ size = 24, className }: Props): JSX.Element => {\n  return (\n    <SidebarSettingsSvg width={size} height={size} className={className} />\n  );\n};\n\nexport const ProjectsIcon = ({ size = 24, className }: Props): JSX.Element => {\n  return <ProjectsFolderSvg width={size} height={size} className={className} />;\n};\n\nexport const ChevronDownIcon = ({\n  size = 24,\n  className,\n}: Props): JSX.Element => {\n  return <ChevronDownSvg width={size} height={size} className={className} />;\n};\n\nexport const ChevronRightIcon = ({\n  size = 24,\n  className,\n}: Props): JSX.Element => {\n  return <ChevronRightSvg width={size} height={size} className={className} />;\n};\n\nexport const ChevronLeftIcon = ({\n  size = 24,\n  className,\n}: Props): JSX.Element => {\n  return <ChevronLeftSvg width={size} height={size} className={className} />;\n};\n\nexport const SearchIcon = ({ size = 24, className }: Props): JSX.Element => {\n  return <SidebarSearchSvg width={size} height={size} className={className} />;\n};\n\nexport const PlusIcon = ({ size = 24, className }: Props): JSX.Element => {\n  return <SidebarPlusSvg width={size} height={size} className={className} />;\n};\n"],"mappings":";;;;;;;;;;;;;;AAoBA,IAAa,KAAY,EAAE,UAAO,IAAI,mBAC7B,kBAAC,GAAD;CAAgB,OAAO;CAAM,QAAQ;CAAiB;CAAa,CAAA,EAG/D,KAAa,EAAE,UAAO,IAAI,mBAC9B,kBAAC,GAAD;CAAiB,OAAO;CAAM,QAAQ;CAAiB;CAAa,CAAA,EAGhE,KAAmB,EAC9B,UAAO,IACP,mBAGE,kBAAC,GAAD;CAAuB,OAAO;CAAM,QAAQ;CAAiB;CAAa,CAAA,EAIjE,KAAY,EAAE,UAAO,IAAI,mBAC7B,kBAAC,GAAD;CAAgB,OAAO;CAAM,QAAQ;CAAiB;CAAa,CAAA,EAG/D,KAAqB,EAChC,UAAO,IACP,mBAEO,kBAAC,GAAD;CAAU,OAAO;CAAM,QAAQ;CAAiB;CAAa,CAAA,EAGzD,KAAgB,EAAE,UAAO,IAAI,mBAEtC,kBAAC,GAAD;CAAoB,OAAO;CAAM,QAAQ;CAAiB;CAAa,CAAA,EAI9D,KAAgB,EAAE,UAAO,IAAI,mBACjC,kBAAC,GAAD;CAAmB,OAAO;CAAM,QAAQ;CAAiB;CAAa,CAAA,EAGlE,KAAmB,EAC9B,UAAO,IACP,mBAEO,kBAAC,GAAD;CAAgB,OAAO;CAAM,QAAQ;CAAiB;CAAa,CAAA,EAG/D,KAAoB,EAC/B,UAAO,IACP,mBAEO,kBAAC,GAAD;CAAiB,OAAO;CAAM,QAAQ;CAAiB;CAAa,CAAA,EAGhE,KAAmB,EAC9B,UAAO,IACP,mBAEO,kBAAC,GAAD;CAAgB,OAAO;CAAM,QAAQ;CAAiB;CAAa,CAAA,EAG/D,KAAc,EAAE,UAAO,IAAI,mBAC/B,kBAAC,GAAD;CAAkB,OAAO;CAAM,QAAQ;CAAiB;CAAa,CAAA,EAGjE,KAAY,EAAE,UAAO,IAAI,mBAC7B,kBAAC,GAAD;CAAgB,OAAO;CAAM,QAAQ;CAAiB;CAAa,CAAA"}

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

@@ -0,0 +1,49 @@
+/* empty css                                      */
+/* empty css                                 */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/atomic/organisms/sidebar/navigationSidebar.css.ts
+var t = "w6b4r71 w6b4r70 txvbqb9io txvbqbco txvbqbdnx txvbqb1ro txvbqb1co txvbqb1qf txvbqb106 txvbqbv9p txvbqbv4h txvbqbc76 txvbqb77 txvbqb6z txvbqb7k", n = e({
+	defaultClassName: "w6b4r72",
+	variantClassNames: { state: {
+		collapsed: "w6b4r73",
+		expanded: "w6b4r74"
+	} },
+	defaultVariants: { state: "expanded" },
+	compoundVariants: []
+}), r = "w6b4r75 txvbqbgmo txvbqb8x txvbqbamf", i = "w6b4r76 txvbqb9ix txvbqb7b txvbqb70 txvbqb7m", a = e({
+	defaultClassName: "w6b4r77",
+	variantClassNames: { state: {
+		expanded: "w6b4r78",
+		collapsed: "w6b4r79"
+	} },
+	defaultVariants: { state: "collapsed" },
+	compoundVariants: []
+}), o = "w6b4r7a txvbqbhwx txvbqbgnf txvbqb6gf txvbqb1qf txvbqb106 txvbqbnv6 txvbqbl6f", s = "w6b4r7b", c = "w6b4r7c txvbqbpsf", l = "w6b4r7g w6b4r7e w6b4r7d txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb9io txvbqbco txvbqbdof txvbqbu6f txvbqb1ro txvbqb8x txvbqbf3x txvbqbt5o txvbqbuzj txvbqb77 txvbqb6z txvbqb7k w6b4r7f txvbqbamx txvbqbva3", u = e({
+	defaultClassName: "w6b4r7l w6b4r7i w6b4r7e w6b4r7d txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb9io txvbqbco txvbqbdof txvbqbu6f txvbqb1ro txvbqb8x txvbqbf3x txvbqbt5o txvbqbuzj txvbqb77 txvbqb6z txvbqb7k w6b4r7h txvbqbamo txvbqb3b",
+	variantClassNames: { state: {
+		default: "w6b4r7m w6b4r7j txvbqbva3",
+		active: "w6b4r7n w6b4r7k txvbqbuy6 txvbqbv9z txvbqb106 txvbqb1rx"
+	} },
+	defaultVariants: { state: "default" },
+	compoundVariants: []
+}), d = e({
+	defaultClassName: "w6b4r7q",
+	variantClassNames: { state: {
+		collapsed: "w6b4r7r w6b4r7o txvbqb8uo",
+		expanded: "w6b4r7s w6b4r7p txvbqb8vf"
+	} },
+	defaultVariants: { state: "expanded" },
+	compoundVariants: []
+}), f = "w6b4r7t txvbqboko", p = "w6b4r7u txvbqb9mx txvbqbk4x txvbqbuw6 txvbqbl6f txvbqbt6f txvbqb7d txvbqb6z txvbqb7k", m = "w6b4r7v txvbqbpsf txvbqb9io txvbqbco txvbqbdnx txvbqbtwf txvbqbc5x txvbqbaj6", h = "w6b4r7w txvbqb7d txvbqb6z txvbqb7k", g = "w6b4r7x w6b4r7w txvbqb7d txvbqb6z txvbqb7k", _ = "w6b4r7z w6b4r7w txvbqb7d txvbqb6z txvbqb7k w6b4r7y txvbqbvab", v = "w6b4r710 txvbqbpsf txvbqbgwf txvbqb9io txvbqbco txvbqbdnx txvbqbtwf txvbqbc5x", y = "w6b4r712 w6b4r711 txvbqbps6 txvbqbtu6 txvbqbptx txvbqb9io txvbqbco txvbqbdnx txvbqbtx6 txvbqbc6o txvbqb1rf txvbqbv4h txvbqbv9p txvbqbvab txvbqb77 txvbqb6z txvbqb7k", b = "w6b4r713 txvbqbpsf txvbqb9io txvbqbco txvbqbdnx txvbqbtw6 txvbqbc5o", x = "w6b4r715 w6b4r714 txvbqb7d txvbqb6z txvbqb7k", S = "w6b4r717 w6b4r716 txvbqbvab txvbqb7d txvbqb6z txvbqb7k", C = e({
+	defaultClassName: "w6b4r71c w6b4r719 w6b4r718 txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb9io txvbqbco txvbqbao6 txvbqb1ro txvbqb8x txvbqbamf txvbqbf3x txvbqb3b txvbqb78 txvbqb6z txvbqb7k",
+	variantClassNames: { state: {
+		default: "w6b4r71d w6b4r71a txvbqbva3",
+		active: "w6b4r71e w6b4r71b txvbqbv49 txvbqbv9z txvbqbamo"
+	} },
+	defaultVariants: { state: "default" },
+	compoundVariants: []
+}), w = "w6b4r71f txvbqb9io txvbqbco txvbqbdnx txvbqbtw6 txvbqbc5o txvbqbaj6 txvbqbv9p", T = "w6b4r71g txvbqb9mx txvbqbk4x txvbqbuw6 txvbqbl6f txvbqbt6f";
+//#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 };
+
+//# sourceMappingURL=navigationSidebar.css.js.map

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

@@ -0,0 +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.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: 'brandPrimaryRed',\n    color: 'brandPrimaryRed',\n    backgroundColor: 'brandWhite',\n    height: 10,\n    transitionProperty: 'default',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.brandSecondaryOrange,\n        color: vars.colors.brandWhite,\n        boxShadow: vars.boxShadow.brandGlow,\n      },\n      '&:focus-visible': {\n        outline: 'none',\n        boxShadow: `0 0 0 2px ${vars.colors.brandSecondaryOrange}`,\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.brandLightGray,\n        borderColor: vars.colors.brandSecondaryOrange,\n      },\n      '&:focus-visible': {\n        outline: 'none',\n      },\n    },\n  },\n]);\n\nexport const navButton = style([\n  interactiveBase,\n  sprinkles({ fontWeight: 'bold', color: 'brandDarkGray' }),\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: 'brandDarkGray',\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: 'brandWhite',\n    color: 'brandPrimaryRed',\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.brandSecondaryOrange,\n        color: vars.colors.brandWhite,\n      },\n      '&:focus-visible': {\n        outline: 'none',\n        boxShadow: `0 0 0 2px ${vars.colors.brandSecondaryOrange}`,\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.brandLightGray,\n        color: vars.colors.brandDarkGray,\n      },\n    },\n  },\n]);\n\nexport const childLinkRecipe = recipe({\n  base: childLinkBase,\n  variants: {\n    state: {\n      default: sprinkles({\n        color: 'brandDarkGray',\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: 'brandPrimaryRed',\n});\n\nexport const childLabel = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n"],"mappings":""}

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

@@ -0,0 +1,17 @@
+/* empty css                                      */
+/* empty css                       */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/atomic/organisms/sidebar/sidebar.css.ts
+var t = "_1cyd4aw0 txvbqb9io txvbqbcw6 txvbqbai6 txvbqbl6f txvbqbla6 txvbqb7h txvbqb70 txvbqb7m", n = e({
+	defaultClassName: "_1cyd4aw1",
+	variantClassNames: { state: {
+		collapsed: "_1cyd4aw2",
+		expanded: "_1cyd4aw3"
+	} },
+	defaultVariants: { state: "expanded" },
+	compoundVariants: []
+}), r = "_1cyd4aw4 txvbqb9io txvbqb9mx txvbqbai6", i = "_1cyd4aw5 txvbqb9io txvbqbco txvbqbdof txvbqbao6 txvbqbfzo txvbqbhwo txvbqbl9x txvbqb1rx txvbqbuy6 txvbqb1co txvbqb1qf txvbqb106 txvbqb7d txvbqb70 txvbqb7m", a = "_1cyd4aw6 txvbqb9io txvbqbu6f txvbqbdof txvbqbao6 txvbqbfzo", o = "_1cyd4aw7 txvbqb9io txvbqb9mx txvbqbai6 txvbqbao6 txvbqb79 txvbqb70 txvbqb7m txvbqbp5x", s = "_1cyd4aw8 txvbqbanx", c = "_1cyd4aw9 txvbqbhxo", l = "_1cyd4awa txvbqb9io txvbqbdnx", u = "_1cyd4awc _1cyd4awb txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb1rf txvbqb8x txvbqbamf txvbqbv9z txvbqbuy6 txvbqb1co txvbqb1qf txvbqb106 txvbqb77 txvbqb6x txvbqb7k", d = "_1cyd4awf _1cyd4awd txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb9io txvbqbco txvbqbaof txvbqb1ro txvbqb8x txvbqbf3x txvbqb3b txvbqbuzj txvbqbva3 txvbqb77 txvbqb6x txvbqb7k _1cyd4awe txvbqbamo", f = "_1cyd4awg txvbqbuy6 txvbqbv9z txvbqb1rx", p = "_1cyd4awh txvbqb9io txvbqbco txvbqbdnx txvbqbtwf txvbqbc5x txvbqbv4x txvbqbamo txvbqb78 txvbqb6x txvbqb7k", m = "_1cyd4awi txvbqb9mx txvbqbk4x txvbqbuw6 txvbqbl6f txvbqbt6f";
+//#endregion
+export { r as content, u as defaultHeaderButton, c as footer, l as footerCollapsed, a as headerActions, i as headerRow, m as linkLabel, o as nav, s as navCollapsed, p as organizationIcon, d as organizationLink, f as organizationLinkActive, t as sidebar, n as sidebarWidthRecipe };
+
+//# sourceMappingURL=sidebar.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.css.js","names":[],"sources":["../../../../../src/atomic/organisms/sidebar/sidebar.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.js';\n\nconst EASE_IN_OUT = 'ease-in-out';\n\nexport const sidebar = sprinkles({\n  display: 'flex',\n  height: 'screen',\n  flexDirection: 'column',\n  overflow: 'hidden',\n  padding: 3,\n  transitionProperty: 'width',\n  transitionDuration: 300,\n  transitionTimingFunction: EASE_IN_OUT,\n});\n\nexport const sidebarWidthRecipe = recipe({\n  variants: {\n    state: {\n      collapsed: { width: vars.width[16] },\n      expanded: { width: vars.width[60] },\n    },\n  },\n  defaultVariants: {\n    state: 'expanded',\n  },\n});\n\nexport type SidebarWidthVariants = RecipeVariants<typeof sidebarWidthRecipe>;\n\nexport const content = sprinkles({\n  display: 'flex',\n  flex: 1,\n  flexDirection: 'column',\n});\n\nexport const headerRow = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'flex-start',\n  gap: 2,\n  marginBottom: 3,\n  marginTop: 0,\n  padding: 2,\n  borderRadius: 'xl',\n  backgroundImage: 'brandDiagonal',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'brandPrimaryRed',\n  transitionProperty: 'opacity',\n  transitionDuration: 300,\n  transitionTimingFunction: EASE_IN_OUT,\n});\n\nexport const headerActions = sprinkles({\n  display: 'flex',\n  width: 'full',\n  justifyContent: 'flex-start',\n  gap: 2,\n  marginBottom: 3,\n});\n\nexport const nav = sprinkles({\n  display: 'flex',\n  flex: 1,\n  flexDirection: 'column',\n  gap: 2,\n  transitionProperty: 'gap',\n  transitionDuration: 300,\n  transitionTimingFunction: EASE_IN_OUT,\n  paddingTop: 4,\n});\n\nexport const navCollapsed = sprinkles({\n  gap: 1,\n});\n\nexport const footer = sprinkles({\n  marginTop: 4,\n});\n\nexport const footerCollapsed = sprinkles({\n  display: 'flex',\n  justifyContent: 'center',\n});\n\nexport const defaultHeaderButton = style([\n  sprinkles({\n    borderRadius: 'md',\n    paddingY: 2,\n    paddingX: 3,\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    color: 'brandWhite',\n    backgroundImage: 'brandDiagonal',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'brandPrimaryRed',\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    boxShadow: `0 10px 20px color-mix(in srgb, ${vars.colors.black} 8%, transparent)`,\n    selectors: {\n      '&:hover': {\n        boxShadow: `0 12px 24px color-mix(in srgb, ${vars.colors.black} 12%, transparent)`,\n        transform: 'translateY(-1px)',\n      },\n      '&:focus-visible': {\n        outline: 'none',\n        boxShadow: `0 0 0 2px ${vars.colors.brandSecondaryOrange}`,\n      },\n    },\n  },\n]);\n\nconst navigationLinkBase = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 3,\n  borderRadius: 'lg',\n  paddingY: 2,\n  paddingX: 3,\n  fontSize: 'sm',\n  lineHeight: 1.2,\n  textDecoration: 'none',\n  backgroundColor: 'transparent',\n  color: 'brandDarkGray',\n  transitionProperty: 'default',\n  transitionDuration: 150,\n  transitionTimingFunction: 'ease',\n});\n\nexport const organizationLink = style([\n  navigationLinkBase,\n  sprinkles({ fontWeight: 'semibold' }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.brandLightGray,\n        borderColor: vars.colors.brandSecondaryOrange,\n      },\n    },\n  },\n]);\n\nexport const organizationLinkActive = sprinkles({\n  backgroundImage: 'brandDiagonal',\n  color: 'brandWhite',\n  borderRadius: 'xl',\n});\n\nexport const organizationIcon = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 5,\n  height: 5,\n  color: 'inherit',\n  fontWeight: 'semibold',\n  transitionProperty: 'colors',\n  transitionDuration: 150,\n  transitionTimingFunction: 'ease',\n});\n\nexport const linkLabel = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/confirm_dialog/ConfirmDialog.js

@@ -0,0 +1,62 @@
+import { Button as e } from "../../../atomic/atoms/button/Button.js";
+import { ErrorMessage as t } from "../../../atomic/atoms/error_message/ErrorMessage.js";
+import { Modal as n } from "../../../atomic/atoms/modal/Modal.js";
+import { body as r, footer as i } from "./confirmDialog.css.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useCallback as s, useState as c } from "react";
+//#region src/backoffice/molecules/confirm_dialog/ConfirmDialog.tsx
+var l = ({ isOpen: l, title: u, children: d, confirmLabel: f = "Confirm", cancelLabel: p = "Cancel", confirmTone: m = "default", onClose: h, onConfirm: g, closeOnConfirm: _ = !0 }) => {
+	let [v, y] = c(!1), [b, x] = c(null), S = s(() => {
+		v || (x(null), h());
+	}, [v, h]), C = s(async () => {
+		if (!v) {
+			x(null), y(!0);
+			try {
+				await g(), _ && h();
+			} catch (e) {
+				let t = "An unexpected error occurred.";
+				e instanceof Error && (t = e.message), x(t);
+			} finally {
+				y(!1);
+			}
+		}
+	}, [
+		_,
+		v,
+		h,
+		g
+	]), w = "primary";
+	m === "danger" && (w = "danger");
+	let T = /* @__PURE__ */ o("div", {
+		className: i,
+		children: [/* @__PURE__ */ a(e, {
+			type: "button",
+			variant: "secondary",
+			onClick: S,
+			disabled: v,
+			children: p
+		}), /* @__PURE__ */ a(e, {
+			type: "button",
+			variant: w,
+			onClick: () => {
+				C().catch(() => {});
+			},
+			isLoading: v,
+			children: f
+		})]
+	}), E = null;
+	return b != null && (E = /* @__PURE__ */ a(t, { children: b })), /* @__PURE__ */ a(n, {
+		isOpen: l,
+		onClose: S,
+		title: u,
+		footer: T,
+		children: /* @__PURE__ */ o("div", {
+			className: r,
+			children: [E, d]
+		})
+	});
+};
+//#endregion
+export { l as ConfirmDialog, l as default };
+
+//# sourceMappingURL=ConfirmDialog.js.map

package/lib/esm/backoffice/molecules/confirm_dialog/ConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.js","names":[],"sources":["../../../../../src/backoffice/molecules/confirm_dialog/ConfirmDialog.tsx"],"sourcesContent":["import { useCallback, useState, type JSX, type ReactNode } from 'react';\n\nimport { Button } from '../../../atomic/atoms/button/Button.js';\nimport { ErrorMessage } from '../../../atomic/atoms/error_message/ErrorMessage.js';\nimport { Modal } from '../../../atomic/atoms/modal/Modal.js';\n\nimport * as styles from './confirmDialog.css.js';\n\nexport type ConfirmDialogProps = {\n  isOpen: boolean;\n  title: string;\n  children: ReactNode;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  confirmTone?: 'default' | 'danger';\n  onClose: () => void;\n  onConfirm: () => Promise<void> | void;\n  closeOnConfirm?: boolean;\n};\n\nexport const ConfirmDialog = ({\n  isOpen,\n  title,\n  children,\n  confirmLabel = 'Confirm',\n  cancelLabel = 'Cancel',\n  confirmTone = 'default',\n  onClose,\n  onConfirm,\n  closeOnConfirm = true,\n}: ConfirmDialogProps): JSX.Element | null => {\n  const [isConfirming, setIsConfirming] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const handleClose = useCallback(() => {\n    if (isConfirming) {\n      return;\n    }\n    setError(null);\n    onClose();\n  }, [isConfirming, onClose]);\n\n  const handleConfirm = useCallback(async () => {\n    if (isConfirming) {\n      return;\n    }\n    setError(null);\n    setIsConfirming(true);\n    try {\n      await onConfirm();\n      if (closeOnConfirm) {\n        onClose();\n      }\n    } catch (err) {\n      let message = 'An unexpected error occurred.';\n      if (err instanceof Error) {\n        message = err.message;\n      }\n      setError(message);\n    } finally {\n      setIsConfirming(false);\n    }\n  }, [closeOnConfirm, isConfirming, onClose, onConfirm]);\n\n  let confirmVariant: 'primary' | 'danger' = 'primary';\n  if (confirmTone === 'danger') {\n    confirmVariant = 'danger';\n  }\n\n  const handleConfirmClick = () => {\n    handleConfirm().catch(() => {});\n  };\n\n  const footer = (\n    <div className={styles.footer}>\n      <Button\n        type=\"button\"\n        variant=\"secondary\"\n        onClick={handleClose}\n        disabled={isConfirming}\n      >\n        {cancelLabel}\n      </Button>\n      <Button\n        type=\"button\"\n        variant={confirmVariant}\n        onClick={handleConfirmClick}\n        isLoading={isConfirming}\n      >\n        {confirmLabel}\n      </Button>\n    </div>\n  );\n\n  let errorNode: JSX.Element | null = null;\n  if (error != null) {\n    errorNode = <ErrorMessage>{error}</ErrorMessage>;\n  }\n\n  return (\n    <Modal isOpen={isOpen} onClose={handleClose} title={title} footer={footer}>\n      <div className={styles.body}>\n        {errorNode}\n        {children}\n      </div>\n    </Modal>\n  );\n};\n\nexport default ConfirmDialog;\n"],"mappings":";;;;;;;AAoBA,IAAa,KAAiB,EAC5B,WACA,UACA,aACA,kBAAe,WACf,iBAAc,UACd,iBAAc,WACd,YACA,cACA,oBAAiB,SAC2B;CAC5C,IAAM,CAAC,GAAc,KAAmB,EAAS,GAAM,EACjD,CAAC,GAAO,KAAY,EAAwB,KAAK,EAEjD,IAAc,QAAkB;AAChC,QAGJ,EAAS,KAAK,EACd,GAAS;IACR,CAAC,GAAc,EAAQ,CAAC,EAErB,IAAgB,EAAY,YAAY;AACxC,UAIJ;GADA,EAAS,KAAK,EACd,EAAgB,GAAK;AACrB,OAAI;AAEF,IADA,MAAM,GAAW,EACb,KACF,GAAS;YAEJ,GAAK;IACZ,IAAI,IAAU;AAId,IAHI,aAAe,UACjB,IAAU,EAAI,UAEhB,EAAS,EAAQ;aACT;AACR,MAAgB,GAAM;;;IAEvB;EAAC;EAAgB;EAAc;EAAS;EAAU,CAAC,EAElD,IAAuC;AAC3C,CAAI,MAAgB,aAClB,IAAiB;CAOnB,IAAM,IACJ,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,GAAD;GACE,MAAK;GACL,SAAQ;GACR,SAAS;GACT,UAAU;aAET;GACM,CAAA,EACT,kBAAC,GAAD;GACE,MAAK;GACL,SAAS;GACT,eAjB2B;AAC/B,OAAe,CAAC,YAAY,GAAG;;GAiB3B,WAAW;aAEV;GACM,CAAA,CACL;KAGJ,IAAgC;AAKpC,QAJI,KAAS,SACX,IAAY,kBAAC,GAAD,EAAA,UAAe,GAAqB,CAAA,GAIhD,kBAAC,GAAD;EAAe;EAAQ,SAAS;EAAoB;EAAe,QAAA;YACjE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,GACA,EACG;;EACA,CAAA"}

package/lib/esm/backoffice/molecules/confirm_dialog/confirmDialog.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                             */
+//#region src/backoffice/molecules/confirm_dialog/confirmDialog.css.ts
+var e = "_1lxq4iv0 txvbqb9io txvbqbai6 txvbqbaof", t = "_1lxq4iv1 txvbqb9io txvbqbdo6 txvbqbaof";
+//#endregion
+export { e as body, t as footer };
+
+//# sourceMappingURL=confirmDialog.css.js.map

package/lib/esm/backoffice/molecules/confirm_dialog/confirmDialog.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirmDialog.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/confirm_dialog/confirmDialog.css.ts"],"sourcesContent":["import { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const body = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const footer = sprinkles({\n  display: 'flex',\n  justifyContent: 'flex-end',\n  gap: 3,\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/global_search_input/GlobalSearchInput.js

@@ -1,7 +1,7 @@
 import { Input as e } from "../../../atomic/atoms/input/Input.js";
 import { ModalCloseSvg as t } from "../../../icons/ModalCloseSvg.js";
-import { ShortcutHint as n } from "../../atoms/shortcut_hint/ShortcutHint.js";
-import { SidebarSearchSvg as r } from "../../../icons/SidebarSearchSvg.js";
+import { SidebarSearchSvg as n } from "../../../icons/SidebarSearchSvg.js";
+import { ShortcutHint as r } from "../../atoms/shortcut_hint/ShortcutHint.js";
 import { clearButton as i, container as a } from "./globalSearchInput.css.js";
 import "../../../index.js";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
@@ -22,7 +22,7 @@ var c = ({ value: c, onChange: l, placeholder: u = "Search…", ariaLabel: d, cl
 		})
 	}));
 	let y = null;
-	p != null && (y = /* @__PURE__ */ o(n, { keys: p }));
+	p != null && (y = /* @__PURE__ */ o(r, { keys: p }));
 	let b = /* @__PURE__ */ s("span", {
 		className: a,
 		children: [
@@ -41,7 +41,7 @@ var c = ({ value: c, onChange: l, placeholder: u = "Search…", ariaLabel: d, cl
 		"aria-label": _,
 		size: "small",
 		fullWidth: !0,
-		leftIcon: /* @__PURE__ */ o(r, {
+		leftIcon: /* @__PURE__ */ o(n, {
 			width: 18,
 			height: 18,
 			"aria-hidden": "true"

package/lib/esm/backoffice/molecules/sidebar_collapse_toggle/SidebarCollapseToggle.js

@@ -1,16 +1,16 @@
 import { cx as e } from "../../../theme/tools.js";
-import { ShortcutHint as t } from "../../atoms/shortcut_hint/ShortcutHint.js";
-import { ChevronLeftSvg as n } from "../../../icons/ChevronLeftSvg.js";
-import { ChevronRightSvg as r } from "../../../icons/ChevronRightSvg.js";
+import { ChevronLeftSvg as t } from "../../../icons/ChevronLeftSvg.js";
+import { ChevronRightSvg as n } from "../../../icons/ChevronRightSvg.js";
+import { ShortcutHint as r } from "../../atoms/shortcut_hint/ShortcutHint.js";
 import { button as i, icon as a, label as o } from "./sidebarCollapseToggle.css.js";
 import "../../../index.js";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/backoffice/molecules/sidebar_collapse_toggle/SidebarCollapseToggle.tsx
 var l = ({ isCollapsed: l, onToggle: u, label: d = "Collapse", shortcut: f, className: p }) => {
-	let m = n, h = d;
-	l && (m = r, h = "Expand");
+	let m = t, h = d;
+	l && (m = n, h = "Expand");
 	let g = null;
-	return f != null && (g = /* @__PURE__ */ s(t, { keys: f })), /* @__PURE__ */ c("button", {
+	return f != null && (g = /* @__PURE__ */ s(r, { keys: f })), /* @__PURE__ */ c("button", {
 		type: "button",
 		className: e(i, p),
 		onClick: u,