@plumile/ui 0.1.132 → 0.1.140

package/lib/esm/atomic/molecules/form_error/formError.css.js

@@ -1,7 +1,7 @@
 /* empty css                                      */
 /* empty css                         */
 //#region src/atomic/molecules/form_error/formError.css.ts
-var e = "jc43j0 txvbqbey txvbqb2g9 txvbqb19cn txvbqbdr8 txvbqb9j txvbqbfcn txvbqbn97 txvbqbuyj txvbqb1979", t = "jc43j1 txvbqbp2x txvbqbf7y", n = "jc43j2 txvbqbf7l";
+var e = "jc43j0 txvbqbey txvbqb2g9 txvbqb19cn txvbqbdr8 txvbqbff6 txvbqbf91 txvbqb9j txvbqbfcn txvbqbn97 txvbqbuyj txvbqb1979", t = "jc43j1 txvbqbf7y", n = "jc43j2 txvbqbf7l txvbqbt9i";
 //#endregion
 export { e as formError, t as icon, n as message };
 

package/lib/esm/atomic/molecules/form_error/formError.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"formError.css.js","names":[],"sources":["../../../../../src/atomic/molecules/form_error/formError.css.ts"],"sourcesContent":["import { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const formError = sprinkles({\n  alignItems: 'center',\n  borderRadius: 'md',\n  color: 'error',\n  display: 'flex',\n  fontSize: 'sm',\n  fontWeight: 'medium',\n  marginBottom: 6,\n  padding: 4,\n  backgroundColor: 'error-10',\n});\n\nexport const icon = sprinkles({\n  marginRight: 2,\n  flexShrink: 0,\n});\n\nexport const message = sprinkles({\n  flexGrow: 'default',\n});\n"],"mappings":""}
+{"version":3,"file":"formError.css.js","names":[],"sources":["../../../../../src/atomic/molecules/form_error/formError.css.ts"],"sourcesContent":["import { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const formError = sprinkles({\n  alignItems: 'center',\n  borderRadius: 'md',\n  color: 'error',\n  display: 'flex',\n  gap: 2,\n  flexWrap: 'wrap',\n  fontSize: 'sm',\n  fontWeight: 'medium',\n  marginBottom: 6,\n  padding: 4,\n  backgroundColor: 'error-10',\n});\n\nexport const icon = sprinkles({\n  flexShrink: 0,\n});\n\nexport const message = sprinkles({\n  flexGrow: 'default',\n  minWidth: 0,\n});\n"],"mappings":""}

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

@@ -1,4 +1,5 @@
 /* empty css                                         */
+/* empty css                             */
 /* empty css                                         */
 //#region src/atomic/molecules/markdown/components/MarkdownFootnoteReference.css.ts
 var e = "_1p5id9v1 _1p5id9v0 txvbqb96 txvbqbdsb txvbqbfd0 txvbqb81";

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

@@ -1,6 +1,5 @@
 /* empty css                                         */
 /* empty css                             */
-/* empty css                             */
 //#region src/atomic/molecules/markdown/components/MarkdownTable.css.ts
 var e = "tr18yy0 txvbqb196b txvbqb17h txvbqb2gm txvbqb2et txvbqb1uy txvbqbn8h txvbqbusr txvbqbuvn", t = "tr18yy2 tr18yy1 txvbqbbl8 txvbqbana txvbqbtqh txvbqb17w0";
 //#endregion

package/lib/esm/atomic/molecules/tabs/Tabs.js

@@ -1,35 +1,89 @@
-import { container as e, tabRecipe as t } from "./tabs.css.js";
-import { jsx as n } from "react/jsx-runtime";
-import r from "@plumile/router/routing/Link.js";
-import i from "@plumile/router/routing/useLocation.js";
+import { cx as e } from "../../../theme/tools.js";
+import { panel as t, panels as n, tabRecipe as r, tabsBar as i, tabsInner as a, tabsRecipe as o, wrapper as s } from "./tabs.css.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import u from "@plumile/router/routing/Link.js";
+import d from "@plumile/router/routing/useLocation.js";
 //#region src/atomic/molecules/tabs/Tabs.tsx
-var a = r, o = (r) => {
-	let { items: o, ariaLabel: s } = r, { pathname: c } = i();
-	return /* @__PURE__ */ n("nav", {
-		"aria-label": s,
-		className: e,
-		children: o.map((e) => {
-			let { disabled: r, id: i, label: o, to: s } = e, l = c === s, u;
-			r && (u = !0);
-			let d = "default", f;
-			r ? (d = "disabled", f = -1) : l && (d = "active");
-			let p = (e) => {
-				r && e.preventDefault();
-			}, m;
-			return l && (m = "page"), /* @__PURE__ */ n(a, {
+var f = u, p = (e, t, n, r = !1) => t == null ? typeof e.isActive == "boolean" ? e.isActive : r ? !1 : e.to != null && n != null ? n === e.to : !1 : e.id === t, m = (u) => {
+	let { activeId: m, ariaLabel: h, children: g, className: _, items: v, layout: y = "nav", onChange: b, panelClassName: x, variant: S = "line" } = u, { pathname: C } = d();
+	if (v.length === 0) return null;
+	let w = v.some((e) => e.to != null), T = b != null && !w, E = v.some((e) => typeof e.isActive == "boolean"), D = o({ variant: S });
+	y === "nav" && (D = e(D, _));
+	let O = v.map((e) => {
+		let { disabled: t, id: n, label: i, to: a } = e, o = p(e, m, C, E), s = "default";
+		t ? s = "disabled" : o && (s = "active");
+		let l = r({
+			state: s,
+			variant: S
+		}), u;
+		t && (u = !0);
+		let d;
+		if (o && a != null && (d = "page"), a != null) {
+			let e;
+			return t && (e = -1), /* @__PURE__ */ c(f, {
 				exact: !0,
-				"aria-current": m,
+				"aria-current": d,
 				"aria-disabled": u,
-				className: t({ state: d }),
-				to: s,
-				tabIndex: f,
-				onClick: p,
-				children: o
-			}, i);
-		})
+				className: l,
+				to: a,
+				tabIndex: e,
+				onClick: (e) => {
+					t && e.preventDefault();
+				},
+				children: i
+			}, n);
+		}
+		if (b != null) return /* @__PURE__ */ c("button", {
+			type: "button",
+			role: "tab",
+			"aria-selected": o,
+			"aria-disabled": u,
+			className: l,
+			disabled: t,
+			onClick: () => {
+				t || b(n);
+			},
+			children: i
+		}, n);
+		let h;
+		return o && (h = "page"), /* @__PURE__ */ c("span", {
+			"aria-current": h,
+			"aria-disabled": u,
+			className: l,
+			children: i
+		}, n);
+	}), k = T ? /* @__PURE__ */ c("div", {
+		className: D,
+		role: "tablist",
+		"aria-label": h,
+		children: O
+	}) : w ? /* @__PURE__ */ c("nav", {
+		"aria-label": h,
+		className: D,
+		children: O
+	}) : /* @__PURE__ */ c("div", {
+		className: D,
+		children: O
 	});
-};
+	return y === "content" ? /* @__PURE__ */ l("div", {
+		className: e(s, _),
+		children: [/* @__PURE__ */ c("div", {
+			className: i,
+			children: /* @__PURE__ */ c("div", {
+				className: a,
+				children: k
+			})
+		}), /* @__PURE__ */ c("div", {
+			className: n,
+			children: /* @__PURE__ */ c("section", {
+				role: "tabpanel",
+				className: e(t, x),
+				children: g
+			})
+		})]
+	}) : k;
+}, h = { resolveItemIsActive: p };
 //#endregion
-export { o as Tabs };
+export { m as Tabs, h as __test };
 
 //# sourceMappingURL=Tabs.js.map

package/lib/esm/atomic/molecules/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":[],"sources":["../../../../../src/atomic/molecules/tabs/Tabs.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ComponentPropsWithoutRef,\n  type JSX,\n  type MouseEvent,\n  type ReactNode,\n} from 'react';\nimport Link from '@plumile/router/routing/Link.js';\nimport useLocation from '@plumile/router/routing/useLocation.js';\n\nimport * as styles from './tabs.css.js';\n\nexport type TabsSelectEvent = MouseEvent<HTMLButtonElement | HTMLAnchorElement>;\n\ntype LinkComponentProps = ComponentPropsWithoutRef<typeof Link>;\ntype RouterLinkProps = LinkComponentProps &\n  AnchorHTMLAttributes<HTMLAnchorElement>;\nconst RouterLink = Link as unknown as (props: RouterLinkProps) => JSX.Element;\n\ntype BaseTabItem = {\n  id: string;\n  label: ReactNode;\n  disabled?: boolean;\n};\n\ntype NavigationTabItem = BaseTabItem & {\n  to: NonNullable<LinkComponentProps['to']>;\n};\n\nexport type TabItem = NavigationTabItem;\n\nexport type TabsProps = {\n  items: TabItem[];\n  ariaLabel?: string;\n};\n\nexport const Tabs = (props: TabsProps): JSX.Element => {\n  const { items, ariaLabel } = props;\n  const { pathname } = useLocation();\n\n  return (\n    <nav aria-label={ariaLabel} className={styles.container}>\n      {items.map((item) => {\n        const { disabled, id, label, to } = item;\n        const isActive = pathname === to;\n\n        let ariaDisabled: true | undefined;\n        if (disabled) {\n          ariaDisabled = true;\n        }\n\n        type TabState = NonNullable<\n          Parameters<typeof styles.tabRecipe>[0]\n        >['state'];\n        let tabState: TabState = 'default';\n        let tabIndex: number | undefined;\n        if (disabled) {\n          tabState = 'disabled';\n          tabIndex = -1;\n        } else if (isActive) {\n          tabState = 'active';\n        }\n\n        const handleLinkClick = (event: MouseEvent<HTMLAnchorElement>) => {\n          if (disabled) {\n            event.preventDefault();\n          }\n        };\n\n        let ariaCurrent: 'page' | undefined;\n        if (isActive) {\n          ariaCurrent = 'page';\n        }\n\n        return (\n          <RouterLink\n            key={id}\n            exact\n            aria-current={ariaCurrent}\n            aria-disabled={ariaDisabled}\n            className={styles.tabRecipe({ state: tabState })}\n            to={to}\n            tabIndex={tabIndex}\n            onClick={handleLinkClick}\n          >\n            {label}\n          </RouterLink>\n        );\n      })}\n    </nav>\n  );\n};\n"],"mappings":";;;;;AAiBA,IAAM,IAAa,GAmBN,KAAQ,MAAkC;CACrD,IAAM,EAAE,UAAO,iBAAc,GACvB,EAAE,gBAAa,GAAa;CAElC,OACE,kBAAC,OAAD;EAAK,cAAY;EAAW,WAAW;YACpC,EAAM,KAAK,MAAS;GACnB,IAAM,EAAE,aAAU,OAAI,UAAO,UAAO,GAC9B,IAAW,MAAa,GAE1B;GACJ,AAAI,MACF,IAAe;GAMjB,IAAI,IAAqB,WACrB;GACJ,AAAI,KACF,IAAW,YACX,IAAW,MACF,MACT,IAAW;GAGb,IAAM,KAAmB,MAAyC;IAChE,AAAI,KACF,EAAM,gBAAgB;MAItB;GAKJ,OAJI,MACF,IAAc,SAId,kBAAC,GAAD;IAEE,OAAA;IACA,gBAAc;IACd,iBAAe;IACf,WAAW,EAAiB,EAAE,OAAO,GAAU,CAAC;IAC5C;IACM;IACV,SAAS;cAER;IACU,EAVN,EAUM;IAEf;EACE,CAAA"}
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../../../../src/atomic/molecules/tabs/Tabs.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ComponentPropsWithoutRef,\n  type HTMLAttributes,\n  type JSX,\n  type MouseEvent,\n  type ReactNode,\n} from 'react';\nimport Link from '@plumile/router/routing/Link.js';\nimport useLocation from '@plumile/router/routing/useLocation.js';\n\nimport * as styles from './tabs.css.js';\nimport { cx } from '../../../theme/tools.js';\n\nexport type TabsSelectEvent = MouseEvent<HTMLButtonElement | HTMLAnchorElement>;\n\ntype LinkComponentProps = ComponentPropsWithoutRef<typeof Link>;\ntype RouterLinkProps = LinkComponentProps &\n  AnchorHTMLAttributes<HTMLAnchorElement>;\nconst RouterLink = Link as unknown as (props: RouterLinkProps) => JSX.Element;\n\nexport type TabItem = {\n  id: string;\n  label: ReactNode;\n  to?: LinkComponentProps['to'];\n  disabled?: boolean;\n  isActive?: boolean;\n};\n\nexport type TabsVariant = 'line' | 'pill' | 'underline' | 'page';\n\nexport type TabsProps = {\n  items: readonly TabItem[];\n  activeId?: string;\n  onChange?: (id: string) => void;\n  ariaLabel?: string;\n  children?: ReactNode;\n  className?: string;\n  layout?: 'nav' | 'content';\n  panelClassName?: string;\n  variant?: TabsVariant;\n};\n\nconst resolveItemIsActive = (\n  item: TabItem,\n  activeId: string | undefined,\n  pathname: string | undefined,\n  hasExplicitActiveItem = false,\n): boolean => {\n  if (activeId != null) {\n    return item.id === activeId;\n  }\n\n  if (typeof item.isActive === 'boolean') {\n    return item.isActive;\n  }\n\n  if (hasExplicitActiveItem) {\n    return false;\n  }\n\n  if (item.to != null && pathname != null) {\n    return pathname === item.to;\n  }\n\n  return false;\n};\n\nexport const Tabs = (props: TabsProps): JSX.Element | null => {\n  const {\n    activeId,\n    ariaLabel,\n    children,\n    className,\n    items,\n    layout = 'nav',\n    onChange,\n    panelClassName,\n    variant = 'line',\n  } = props;\n  const { pathname } = useLocation();\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const hasNavigationItems = items.some((item) => {\n    return item.to != null;\n  });\n  const isControlled = onChange != null && !hasNavigationItems;\n  const hasExplicitActiveItem = items.some((item) => {\n    return typeof item.isActive === 'boolean';\n  });\n  let rootClassName = styles.tabsRecipe({ variant });\n  if (layout === 'nav') {\n    rootClassName = cx(rootClassName, className);\n  }\n\n  const content = items.map((item) => {\n    const { disabled, id, label, to } = item;\n    const isActive = resolveItemIsActive(\n      item,\n      activeId,\n      pathname,\n      hasExplicitActiveItem,\n    );\n\n    type TabState = NonNullable<\n      Parameters<typeof styles.tabRecipe>[0]\n    >['state'];\n    let tabState: TabState = 'default';\n    if (disabled) {\n      tabState = 'disabled';\n    } else if (isActive) {\n      tabState = 'active';\n    }\n\n    const tabClassName = styles.tabRecipe({ state: tabState, variant });\n    let ariaDisabled: true | undefined;\n    if (disabled) {\n      ariaDisabled = true;\n    }\n    let ariaCurrent: 'page' | undefined;\n    if (isActive && to != null) {\n      ariaCurrent = 'page';\n    }\n\n    if (to != null) {\n      let tabIndex: number | undefined;\n      if (disabled) {\n        tabIndex = -1;\n      }\n\n      const handleLinkClick = (event: MouseEvent<HTMLAnchorElement>) => {\n        if (disabled) {\n          event.preventDefault();\n        }\n      };\n\n      return (\n        <RouterLink\n          key={id}\n          exact\n          aria-current={ariaCurrent}\n          aria-disabled={ariaDisabled}\n          className={tabClassName}\n          to={to}\n          tabIndex={tabIndex}\n          onClick={handleLinkClick}\n        >\n          {label}\n        </RouterLink>\n      );\n    }\n\n    if (onChange != null) {\n      return (\n        <button\n          key={id}\n          type=\"button\"\n          role=\"tab\"\n          aria-selected={isActive}\n          aria-disabled={ariaDisabled}\n          className={tabClassName}\n          disabled={disabled}\n          onClick={() => {\n            if (!disabled) {\n              onChange(id);\n            }\n          }}\n        >\n          {label}\n        </button>\n      );\n    }\n\n    let staticAriaCurrent: 'page' | undefined;\n    if (isActive) {\n      staticAriaCurrent = 'page';\n    }\n\n    return (\n      <span\n        key={id}\n        aria-current={staticAriaCurrent}\n        aria-disabled={ariaDisabled}\n        className={tabClassName}\n      >\n        {label}\n      </span>\n    );\n  });\n\n  const renderRoot = (): JSX.Element => {\n    if (isControlled) {\n      return (\n        <div className={rootClassName} role=\"tablist\" aria-label={ariaLabel}>\n          {content}\n        </div>\n      );\n    }\n\n    if (hasNavigationItems) {\n      return (\n        <nav aria-label={ariaLabel} className={rootClassName}>\n          {content}\n        </nav>\n      );\n    }\n\n    return <div className={rootClassName}>{content}</div>;\n  };\n\n  const nav = renderRoot();\n\n  if (layout !== 'content') {\n    return nav;\n  }\n\n  const wrapperProps: HTMLAttributes<HTMLDivElement> = {\n    className: cx(styles.wrapper, className),\n  };\n\n  return (\n    <div {...wrapperProps}>\n      <div className={styles.tabsBar}>\n        <div className={styles.tabsInner}>{nav}</div>\n      </div>\n      <div className={styles.panels}>\n        <section role=\"tabpanel\" className={cx(styles.panel, panelClassName)}>\n          {children}\n        </section>\n      </div>\n    </div>\n  );\n};\n\nexport const __test = {\n  resolveItemIsActive,\n} as const;\n"],"mappings":";;;;;;AAmBA,IAAM,IAAa,GAwBb,KACJ,GACA,GACA,GACA,IAAwB,OAEpB,KAAY,OAIZ,OAAO,EAAK,YAAa,YACpB,EAAK,WAGV,IACK,KAGL,EAAK,MAAM,QAAQ,KAAY,OAC1B,MAAa,EAAK,KAGpB,KAfE,EAAK,OAAO,GAkBV,KAAQ,MAAyC;CAC5D,IAAM,EACJ,aACA,cACA,aACA,cACA,UACA,YAAS,OACT,aACA,mBACA,aAAU,WACR,GACE,EAAE,gBAAa,GAAa;CAElC,IAAI,EAAM,WAAW,GACnB,OAAO;CAGT,IAAM,IAAqB,EAAM,MAAM,MAC9B,EAAK,MAAM,KAClB,EACI,IAAe,KAAY,QAAQ,CAAC,GACpC,IAAwB,EAAM,MAAM,MACjC,OAAO,EAAK,YAAa,UAChC,EACE,IAAgB,EAAkB,EAAE,YAAS,CAAC;CAClD,AAAI,MAAW,UACb,IAAgB,EAAG,GAAe,EAAU;CAG9C,IAAM,IAAU,EAAM,KAAK,MAAS;EAClC,IAAM,EAAE,aAAU,OAAI,UAAO,UAAO,GAC9B,IAAW,EACf,GACA,GACA,GACA,EACD,EAKG,IAAqB;EACzB,AAAI,IACF,IAAW,aACF,MACT,IAAW;EAGb,IAAM,IAAe,EAAiB;GAAE,OAAO;GAAU;GAAS,CAAC,EAC/D;EACJ,AAAI,MACF,IAAe;EAEjB,IAAI;EAKJ,IAJI,KAAY,KAAM,SACpB,IAAc,SAGZ,KAAM,MAAM;GACd,IAAI;GAWJ,OAVI,MACF,IAAW,KAUX,kBAAC,GAAD;IAEE,OAAA;IACA,gBAAc;IACd,iBAAe;IACf,WAAW;IACP;IACM;IACV,UAfqB,MAAyC;KAChE,AAAI,KACF,EAAM,gBAAgB;;cAerB;IACU,EAVN,EAUM;;EAIjB,IAAI,KAAY,MACd,OACE,kBAAC,UAAD;GAEE,MAAK;GACL,MAAK;GACL,iBAAe;GACf,iBAAe;GACf,WAAW;GACD;GACV,eAAe;IACb,AAAK,KACH,EAAS,EAAG;;aAIf;GACM,EAdF,EAcE;EAIb,IAAI;EAKJ,OAJI,MACF,IAAoB,SAIpB,kBAAC,QAAD;GAEE,gBAAc;GACd,iBAAe;GACf,WAAW;aAEV;GACI,EANA,EAMA;GAET,EAsBI,IAnBA,IAEA,kBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAU,cAAY;YACvD;EACG,CAAA,GAIN,IAEA,kBAAC,OAAD;EAAK,cAAY;EAAW,WAAW;YACpC;EACG,CAAA,GAIH,kBAAC,OAAD;EAAK,WAAW;YAAgB;EAAc,CAAA;CAavD,OARI,MAAW,YASb,kBAAC,OAAD;EAJA,WAAW,EAAG,GAAgB,EAAU;YAIxC,CACE,kBAAC,OAAD;GAAK,WAAW;aACd,kBAAC,OAAD;IAAK,WAAW;cAAmB;IAAU,CAAA;GACzC,CAAA,EACN,kBAAC,OAAD;GAAK,WAAW;aACd,kBAAC,WAAD;IAAS,MAAK;IAAW,WAAW,EAAG,GAAc,EAAe;IACjE;IACO,CAAA;GACN,CAAA,CACF;MAjBC;GAqBE,IAAS,EACpB,wBACD"}

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

@@ -2,17 +2,59 @@
 /* empty css                    */
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/atomic/molecules/tabs/tabs.css.ts
-var t = "_11tf63d0 txvbqbdr8 txvbqbf91 txvbqbey txvbqbff6 txvbqbjtp", n = e({
-	defaultClassName: "_11tf63d6 _11tf63d2 _11tf63d1 txvbqbyov txvbqbzmg txvbqb10jb txvbqbvve txvbqbdsb txvbqbey txvbqbfet txvbqbacg txvbqba6o txvbqb9j txvbqb19cb txvbqb7h txvbqb76 txvbqb7t txvbqb8af txvbqb4hx txvbqbfcn txvbqb3f txvbqbunc txvbqb11js",
-	variantClassNames: { state: {
-		default: "_11tf63d7 _11tf63d3",
-		active: "_11tf63d8 _11tf63d4 txvbqb19bj txvbqb512 txvbqbfd0",
-		disabled: "_11tf63d9 _11tf63d5 txvbqb19cd txvbqb2o txvbqbr"
+var t = "_11tf63d0 txvbqbdr8 txvbqbf6i txvbqbffw txvbqb17w0", n = "_11tf63d1 txvbqb17w0 txvbqbdr8 txvbqbjtp", r = "_11tf63d2 txvbqb17w0 txvbqbdr8 txvbqbjtp", i = "_11tf63d3 txvbqb17w0", a = "_11tf63d4 txvbqb17w0", o = e({
+	defaultClassName: "_11tf63da _11tf63d5 txvbqbdr8 txvbqbey txvbqbs65",
+	variantClassNames: { variant: {
+		line: "_11tf63db _11tf63d6 txvbqbf91 txvbqbff6 txvbqbjtp",
+		pill: "_11tf63dc _11tf63d7 txvbqbdsb txvbqbf8o txvbqbfet txvbqbuvn txvbqbuxg txvbqb2is txvbqb196f txvbqb1uy txvbqb2et txvbqb17u",
+		underline: "_11tf63dd _11tf63d8 txvbqbyoi txvbqbzm3 txvbqb11ed txvbqbwqg txvbqb17w0 txvbqbf8o txvbqbff6 txvbqbuvn txvbqb1g5 txvbqb2et txvbqb8oi txvbqb577 txvbqb196b",
+		page: "_11tf63de _11tf63d9 txvbqb17w0 txvbqbf91 txvbqbff6"
 	} },
-	defaultVariants: { state: "default" },
+	defaultVariants: { variant: "line" },
 	compoundVariants: []
+}), s = e({
+	defaultClassName: "_11tf63dx _11tf63dp",
+	variantClassNames: {
+		variant: {
+			line: "_11tf63dy _11tf63dg _11tf63df txvbqbyov txvbqbzmg txvbqb10jb txvbqbvve txvbqbdsb txvbqbey txvbqbf7y txvbqbfet txvbqbacg txvbqba6o txvbqb9j txvbqb19cb txvbqb7h txvbqb76 txvbqb7t txvbqb8af txvbqb4hx txvbqb2et txvbqbfcn txvbqb3f txvbqbunc txvbqb11js txvbqb1933 txvbqbv",
+			pill: "_11tf63dz _11tf63dj _11tf63dh txvbqbyoi txvbqbzm3 txvbqb11ed txvbqbwqg txvbqbdsb txvbqbf7y txvbqbey txvbqb1uy txvbqb2et txvbqb1933 txvbqb19cb txvbqbv txvbqbfcn txvbqb2is txvbqb9j txvbqbik txvbqb3f _11tf63di txvbqb1bs9 txvbqb1aeh",
+			underline: "_11tf63d10 _11tf63dm _11tf63dk txvbqbyoi txvbqbzm3 txvbqb10jb txvbqbvve txvbqbdsb txvbqbf7y txvbqbey txvbqb2et txvbqb1933 txvbqb19cb txvbqbv txvbqbfcn txvbqb2f6 txvbqb1g5 txvbqb8oi txvbqbik txvbqb9j txvbqb3f _11tf63dl txvbqb1bs9 txvbqb1aeh",
+			page: "_11tf63d11 _11tf63do _11tf63dn txvbqbey txvbqb196f txvbqb1g5 txvbqb2et txvbqbik txvbqb2gm txvbqb19cb txvbqbv txvbqbdsb txvbqbf7y txvbqb9j txvbqbfcn txvbqbxo1 txvbqbxqx txvbqb3f txvbqb7g txvbqb76 txvbqb7t"
+		},
+		state: {
+			default: "_11tf63d12",
+			active: "_11tf63d13 _11tf63dq txvbqb19bj txvbqb512 txvbqbfd0",
+			disabled: "_11tf63d14 _11tf63dr txvbqb19cd txvbqb2o txvbqbr"
+		}
+	},
+	defaultVariants: {
+		variant: "line",
+		state: "default"
+	},
+	compoundVariants: [
+		[{
+			variant: "line",
+			state: "default"
+		}, "_11tf63ds"],
+		[{
+			variant: "pill",
+			state: "active"
+		}, "_11tf63dt txvbqb1963 txvbqb11p txvbqb19bj txvbqbcol"],
+		[{
+			variant: "underline",
+			state: "active"
+		}, "_11tf63du txvbqb19bj txvbqb512"],
+		[{
+			variant: "page",
+			state: "active"
+		}, "_11tf63dv txvbqb1959 txvbqb198p txvbqbcj6"],
+		[{
+			variant: "page",
+			state: "default"
+		}, "_11tf63dw txvbqb19cb"]
+	]
 });
 //#endregion
-export { t as container, n as tabRecipe };
+export { a as panel, i as panels, s as tabRecipe, n as tabsBar, r as tabsInner, o as tabsRecipe, t as wrapper };
 
 //# sourceMappingURL=tabs.css.js.map

package/lib/esm/atomic/molecules/tabs/tabs.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.css.js","names":[],"sources":["../../../../../src/atomic/molecules/tabs/tabs.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 container = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  gap: 2,\n  justifyContent: 'center',\n});\n\nconst tabBase = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: 1,\n    borderTopLeftRadius: 'md',\n    borderTopRightRadius: 'md',\n    paddingX: 4,\n    paddingY: 2,\n    fontSize: 'sm',\n    color: 'textSecondary',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n    borderBottomWidth: 2,\n    borderBottomColor: 'transparent',\n    fontWeight: 'medium',\n    textDecoration: 'none',\n    outline: 'none',\n    position: 'relative',\n  }),\n  {\n    marginBottom: '-1px',\n    selectors: {\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n        color: vars.colors.primary,\n        borderBottomColor: vars.colors.primary,\n      },\n    },\n  },\n]);\n\nexport const tabRecipe = recipe({\n  base: tabBase,\n  variants: {\n    state: {\n      default: style({\n        selectors: {\n          '&:hover': {\n            color: vars.colors.primary,\n            borderBottomColor: vars.colors.primaryLight,\n          },\n        },\n      }),\n      active: sprinkles({\n        color: 'primary',\n        borderBottomColor: 'primary',\n        fontWeight: 'semibold',\n      }),\n      disabled: sprinkles({\n        color: 'textMuted',\n        pointerEvents: 'none',\n        cursor: 'not-allowed',\n      }),\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n  },\n});\n\nexport type TabRecipeVariants = RecipeVariants<typeof tabRecipe>;\n"],"mappings":""}
+{"version":3,"file":"tabs.css.js","names":[],"sources":["../../../../../src/atomic/molecules/tabs/tabs.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const wrapper = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n  width: 'full',\n});\n\nexport const tabsBar = sprinkles({\n  width: 'full',\n  display: 'flex',\n  justifyContent: 'center',\n});\n\nexport const tabsInner = sprinkles({\n  width: 'full',\n  display: 'flex',\n  justifyContent: 'center',\n});\n\nexport const panels = sprinkles({\n  width: 'full',\n});\n\nexport const panel = sprinkles({\n  width: 'full',\n});\n\nexport const tabsRecipe = recipe({\n  base: sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    maxWidth: 'full',\n  }),\n  variants: {\n    variant: {\n      line: sprinkles({\n        flexWrap: 'wrap',\n        gap: 2,\n        justifyContent: 'center',\n      }),\n      pill: sprinkles({\n        display: 'inline-flex',\n        flexWrap: 'nowrap',\n        gap: 1,\n        overflowX: 'auto',\n        padding: 1,\n        borderRadius: 'full',\n        backgroundColor: 'surfaceMuted',\n        borderWidth: 'default',\n        borderStyle: 'solid',\n        borderColor: 'borderSubtle',\n      }),\n      underline: sprinkles({\n        width: 'full',\n        flexWrap: 'nowrap',\n        gap: 2,\n        overflowX: 'auto',\n        paddingX: 3,\n        paddingY: 1.5,\n        borderWidth: 0,\n        borderStyle: 'solid',\n        borderBottomWidth: 'default',\n        borderBottomColor: 'borderSubtle',\n        backgroundColor: 'surface',\n      }),\n      page: sprinkles({\n        width: 'full',\n        flexWrap: 'wrap',\n        gap: 2,\n      }),\n    },\n  },\n  defaultVariants: {\n    variant: 'line',\n  },\n});\n\nconst lineTabBase = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    flexShrink: 0,\n    gap: 1,\n    borderTopLeftRadius: 'md',\n    borderTopRightRadius: 'md',\n    paddingX: 4,\n    paddingY: 2,\n    fontSize: 'sm',\n    color: 'textSecondary',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n    borderBottomWidth: 2,\n    borderBottomColor: 'transparent',\n    borderStyle: 'solid',\n    fontWeight: 'medium',\n    textDecoration: 'none',\n    outline: 'none',\n    position: 'relative',\n    backgroundColor: 'transparent',\n    cursor: 'pointer',\n  }),\n  {\n    marginBottom: '-1px',\n    selectors: {\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n        color: vars.colors.primary,\n        borderBottomColor: vars.colors.primary,\n      },\n    },\n  },\n]);\n\nconst pillTabBase = style([\n  sprinkles({\n    display: 'inline-flex',\n    flexShrink: 0,\n    alignItems: 'center',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    backgroundColor: 'transparent',\n    color: 'textSecondary',\n    cursor: 'pointer',\n    fontWeight: 'medium',\n    paddingX: 3,\n    paddingY: 1.5,\n    borderRadius: 'full',\n    fontSize: 'sm',\n    borderColor: 'transparent',\n    textDecoration: 'none',\n  }),\n  stateSprinkles({\n    color: {\n      hover: 'text',\n    },\n    backgroundColor: {\n      hover: 'surface',\n    },\n  }),\n  {\n    ':focus-visible': {\n      outline: `2px solid ${vars.colors.primary}`,\n      outlineOffset: 2,\n    },\n  },\n]);\n\nconst underlineTabBase = style([\n  sprinkles({\n    display: 'inline-flex',\n    flexShrink: 0,\n    alignItems: 'center',\n    borderStyle: 'solid',\n    backgroundColor: 'transparent',\n    color: 'textSecondary',\n    cursor: 'pointer',\n    fontWeight: 'medium',\n    paddingX: 3,\n    paddingY: 2,\n    borderRadius: 'none',\n    borderWidth: 0,\n    borderBottomWidth: 'default',\n    borderColor: 'transparent',\n    fontSize: 'sm',\n    textDecoration: 'none',\n  }),\n  stateSprinkles({\n    color: {\n      hover: 'text',\n    },\n    backgroundColor: {\n      hover: 'surface',\n    },\n  }),\n  {\n    ':focus-visible': {\n      outline: `2px solid ${vars.colors.primary}`,\n      outlineOffset: 2,\n    },\n  },\n]);\n\nconst pageTabBase = style([\n  sprinkles({\n    alignItems: 'center',\n    backgroundColor: 'surfaceMuted',\n    borderWidth: 0,\n    borderStyle: 'solid',\n    borderColor: 'transparent',\n    borderRadius: 'lg',\n    color: 'textSecondary',\n    cursor: 'pointer',\n    display: 'inline-flex',\n    flexShrink: 0,\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    paddingBlock: 1.5,\n    paddingInline: 3,\n    textDecoration: 'none',\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        color: vars.colors.text,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: 2,\n      },\n    },\n  },\n]);\n\nexport const tabRecipe = recipe({\n  base: style({\n    appearance: 'none',\n    font: 'inherit',\n  }),\n  variants: {\n    variant: {\n      line: lineTabBase,\n      pill: pillTabBase,\n      underline: underlineTabBase,\n      page: pageTabBase,\n    },\n    state: {\n      default: {},\n      active: sprinkles({\n        color: 'primary',\n        borderBottomColor: 'primary',\n        fontWeight: 'semibold',\n      }),\n      disabled: sprinkles({\n        color: 'textMuted',\n        pointerEvents: 'none',\n        cursor: 'not-allowed',\n      }),\n    },\n  },\n  compoundVariants: [\n    {\n      variants: {\n        variant: 'line',\n        state: 'default',\n      },\n      style: style({\n        selectors: {\n          '&:hover': {\n            color: vars.colors.primary,\n            borderBottomColor: vars.colors.primaryLight,\n          },\n        },\n      }),\n    },\n    {\n      variants: {\n        variant: 'pill',\n        state: 'active',\n      },\n      style: sprinkles({\n        backgroundColor: 'primaryLight',\n        borderColor: 'primary',\n        color: 'primary',\n        boxShadow: 'primaryLightRing',\n      }),\n    },\n    {\n      variants: {\n        variant: 'underline',\n        state: 'active',\n      },\n      style: sprinkles({\n        color: 'primary',\n        borderBottomColor: 'primary',\n      }),\n    },\n    {\n      variants: {\n        variant: 'page',\n        state: 'active',\n      },\n      style: sprinkles({\n        backgroundColor: 'blue-500',\n        color: 'white',\n        boxShadow: 'sm',\n      }),\n    },\n    {\n      variants: {\n        variant: 'page',\n        state: 'default',\n      },\n      style: sprinkles({\n        color: 'textSecondary',\n      }),\n    },\n  ],\n  defaultVariants: {\n    variant: 'line',\n    state: 'default',\n  },\n});\n\nexport type TabRecipeVariants = RecipeVariants<typeof tabRecipe>;\nexport type TabsRecipeVariants = RecipeVariants<typeof tabsRecipe>;\n"],"mappings":""}

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

@@ -1,8 +1,8 @@
 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 { 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";
@@ -13,14 +13,14 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 	return n && (i = "expanded"), /* @__PURE__ */ M("div", {
 		id: t,
 		"aria-hidden": !n,
-		className: e(p, m({ state: i })),
+		className: e(f, p({ state: i })),
 		children: /* @__PURE__ */ M("div", {
-			className: d,
+			className: u,
 			children: r
 		})
 	});
-}, L = ({ items: d, headerSlot: p, isCollapsed: m, onCollapsedChange: L, showCollapseToggle: R = !0 }) => {
-	let { t: z } = t(), [B, V] = A(!1), [H, U] = A({}), W = m != null, G = m ?? B, { pathname: K } = F(), q = (e, t) => t === !0 ? K === e : K === e ? !0 : K.startsWith(`${e}/`), J = O((e, t) => {
+}, 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) => {
 		U((n) => ({
 			...n,
 			[e]: t
@@ -33,22 +33,22 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 		W,
 		L
 	]), X;
-	G || (X = p ?? void 0);
+	G || (X = f ?? void 0);
 	let Z = k(() => {
 		if (!R) return null;
-		let t = r, n = z("navigation.sidebar.actions.collapseAriaLabel");
-		G && (t = i, n = z("navigation.sidebar.actions.expandAriaLabel"));
+		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: l,
+			className: c,
 			children: z("navigation.sidebar.actions.collapse")
 		})), /* @__PURE__ */ N("button", {
 			type: "button",
 			onClick: Y,
-			className: e(c, u({ state: a })),
-			"aria-label": n,
+			className: e(s, l({ state: a })),
+			"aria-label": i,
 			children: [/* @__PURE__ */ M(t, { size: 20 }), o]
 		});
 	}, [
@@ -57,51 +57,51 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 		R,
 		z
 	]);
-	return /* @__PURE__ */ M(n, {
+	return /* @__PURE__ */ M(D, {
 		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, O = t.trailingIcon !== void 0 && t.trailingIcon !== null, k = t.trailingHoverIcon !== void 0 && t.trailingHoverIcon !== null, A = !G && !p && (O || k), F;
+		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);
+			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 = ee({ state: L }), z;
-			p && (z = C);
+			let R = x({ state: L }), z;
+			p && (z = S);
 			let B = null;
 			G || (B = /* @__PURE__ */ M("span", {
-				className: b,
+				className: y,
 				children: t.label
 			}));
 			let V = null;
-			m && (V = /* @__PURE__ */ M("span", {
-				className: _,
+			D && (V = /* @__PURE__ */ M("span", {
+				className: g,
 				children: t.hoverIcon
 			}));
 			let U = /* @__PURE__ */ N("span", {
-				className: v,
+				className: _,
 				children: [/* @__PURE__ */ M("span", {
-					className: e(h, { [g]: m }),
+					className: e(m, { [h]: D }),
 					children: t.icon
 				}), V]
 			}), W = null;
 			if (A) {
 				let n = null;
 				O && (n = /* @__PURE__ */ M("span", {
-					className: e(h, { [g]: k }),
+					className: e(m, { [h]: k }),
 					children: t.trailingIcon
 				}));
 				let r = null;
 				k && (r = /* @__PURE__ */ M("span", {
-					className: _,
+					className: g,
 					children: t.trailingHoverIcon
 				})), W = /* @__PURE__ */ N("span", {
-					className: te,
+					className: E,
 					children: [n, r]
 				});
 			}
@@ -112,16 +112,16 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 			] }), Y = () => {
 				!r || G || J(t.key, c);
 			}, X;
-			if (r) X = e(x, R, z);
+			if (r) X = e(b, R, z);
 			else {
 				let n = "default";
-				q(t.to, t.exact) && (n = "active"), X = e(S({ state: n }), R, z);
+				q(t.to, t.exact) && (n = "active"), X = e(ee({ state: n }), R, z);
 			}
 			let Z;
 			Z = r ? /* @__PURE__ */ M("button", {
 				type: "button",
 				className: X,
-				"aria-expanded": i,
+				"aria-expanded": s,
 				"aria-controls": l,
 				"aria-label": F,
 				onClick: Y,
@@ -134,23 +134,23 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 				children: K
 			});
 			let Q = null;
-			if (d != null) {
+			if (f != null) {
 				let e = (e) => {
-					e.preventDefault(), e.stopPropagation(), d.onClick();
-				}, t = d.hoverIcon, n = t != null, r = null;
+					e.preventDefault(), e.stopPropagation(), f.onClick();
+				}, t = f.hoverIcon, n = t != null, r = null;
 				n && (r = /* @__PURE__ */ M("span", {
-					className: E,
+					className: T,
 					children: t
 				})), Q = /* @__PURE__ */ M("button", {
 					type: "button",
-					"aria-label": d.label,
+					"aria-label": f.label,
 					onClick: e,
-					className: w,
+					className: C,
 					children: /* @__PURE__ */ N("span", {
-						className: D,
+						className: te,
 						children: [/* @__PURE__ */ M("span", {
-							className: T,
-							children: d.icon
+							className: w,
+							children: f.icon
 						}), r]
 					})
 				});
@@ -158,29 +158,29 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 			let $ = null;
 			return u && l != null && ($ = /* @__PURE__ */ M(I, {
 				id: l,
-				isExpanded: i,
+				isExpanded: s,
 				children: n.map((e) => {
 					let t = null;
 					e.icon != null && (t = /* @__PURE__ */ M("span", {
-						className: a,
+						className: i,
 						children: e.icon
 					}));
 					let n = "default";
 					return q(e.to) && (n = "active"), /* @__PURE__ */ M("div", {
-						className: f,
+						className: d,
 						children: /* @__PURE__ */ N(P, {
 							to: e.to,
-							className: s({ state: n }),
+							className: o({ state: n }),
 							"aria-label": e.label,
 							children: [t, /* @__PURE__ */ M("span", {
-								className: o,
+								className: a,
 								children: e.label
 							})]
 						})
 					}, e.key);
 				})
 			})), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ N("div", {
-				className: y,
+				className: v,
 				children: [Z, Q]
 			}), $] }, t.key);
 		})

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 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/backoffice/atoms/status_badge/StatusBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.js","names":[],"sources":["../../../../../src/backoffice/atoms/status_badge/StatusBadge.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { Badge } from '../../../atomic/atoms/badge/Badge.js';\n\nimport * as styles from './statusBadge.css.js';\n\nexport type StatusTone =\n  | 'active'\n  | 'disabled'\n  | 'pending'\n  | 'error'\n  | 'warning'\n  | 'info';\n\nexport type StatusBadgeProps = {\n  tone: StatusTone;\n  children: ReactNode;\n  showDot?: boolean;\n  className?: string;\n  loading?: boolean;\n};\n\ntype BadgeTone =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'accent';\n\nconst toneMap: Record<StatusTone, BadgeTone> = {\n  active: 'success',\n  disabled: 'neutral',\n  pending: 'info',\n  error: 'danger',\n  warning: 'warning',\n  info: 'info',\n};\n\nexport const StatusBadge = ({\n  tone,\n  children,\n  showDot = false,\n  className,\n  loading,\n}: StatusBadgeProps): JSX.Element => {\n  const badgeTone = toneMap[tone];\n\n  let dotNode: JSX.Element | null = null;\n  if (showDot) {\n    dotNode = <span className={styles.dot} aria-hidden=\"true\" />;\n  }\n\n  return (\n    <Badge tone={badgeTone} className={className} loading={loading}>\n      <span className={styles.content}>\n        {dotNode}\n        {children}\n      </span>\n    </Badge>\n  );\n};\n\nexport default StatusBadge;\n"],"mappings":";;;;AA8BA,IAAM,IAAyC;CAC7C,QAAQ;CACR,UAAU;CACV,SAAS;CACT,OAAO;CACP,SAAS;CACT,MAAM;CACP,EAEY,KAAe,EAC1B,SACA,aACA,aAAU,IACV,cACA,iBACmC;CACnC,IAAM,IAAY,EAAQ,IAEtB,IAA8B;CAKlC,OAJI,MACF,IAAU,kBAAC,QAAD;EAAM,WAAW;EAAY,eAAY;EAAS,CAAA,GAI5D,kBAAC,GAAD;EAAO,MAAM;EAAsB;EAAoB;YACrD,kBAAC,QAAD;GAAM,WAAW;aAAjB,CACG,GACA,EACI;;EACD,CAAA"}
+{"version":3,"file":"StatusBadge.js","names":[],"sources":["../../../../../src/backoffice/atoms/status_badge/StatusBadge.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { Badge, type BadgeTone } from '../../../atomic/atoms/badge/Badge.js';\n\nimport * as styles from './statusBadge.css.js';\n\nexport type StatusTone =\n  | 'active'\n  | 'disabled'\n  | 'pending'\n  | 'error'\n  | 'warning'\n  | 'info';\n\nexport type StatusBadgeProps = {\n  tone: StatusTone;\n  children: ReactNode;\n  showDot?: boolean;\n  className?: string;\n  loading?: boolean;\n};\n\nconst toneMap: Record<StatusTone, BadgeTone> = {\n  active: 'success',\n  disabled: 'neutral',\n  pending: 'info',\n  error: 'danger',\n  warning: 'warning',\n  info: 'info',\n};\n\nexport const StatusBadge = ({\n  tone,\n  children,\n  showDot = false,\n  className,\n  loading,\n}: StatusBadgeProps): JSX.Element => {\n  const badgeTone = toneMap[tone];\n\n  let dotNode: JSX.Element | null = null;\n  if (showDot) {\n    dotNode = <span className={styles.dot} aria-hidden=\"true\" />;\n  }\n\n  return (\n    <Badge tone={badgeTone} className={className} loading={loading}>\n      <span className={styles.content}>\n        {dotNode}\n        {children}\n      </span>\n    </Badge>\n  );\n};\n\nexport default StatusBadge;\n"],"mappings":";;;;AAsBA,IAAM,IAAyC;CAC7C,QAAQ;CACR,UAAU;CACV,SAAS;CACT,OAAO;CACP,SAAS;CACT,MAAM;CACP,EAEY,KAAe,EAC1B,SACA,aACA,aAAU,IACV,cACA,iBACmC;CACnC,IAAM,IAAY,EAAQ,IAEtB,IAA8B;CAKlC,OAJI,MACF,IAAU,kBAAC,QAAD;EAAM,WAAW;EAAY,eAAY;EAAS,CAAA,GAI5D,kBAAC,GAAD;EAAO,MAAM;EAAsB;EAAoB;YACrD,kBAAC,QAAD;GAAM,WAAW;aAAjB,CACG,GACA,EACI;;EACD,CAAA"}