@plumile/ui 0.1.63 → 0.1.65

package/lib/esm/atomic/molecules/empty-state/EmptyState.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                          */
+//#region src/atomic/molecules/empty-state/EmptyState.css.ts
+var e = "_1lrdacm0 txvbqbu6f txvbqb9io txvbqbai6 txvbqbco txvbqbdnx txvbqbao6 txvbqbt5x", t = "_1lrdacm1 txvbqb9o", n = "_1lrdacm2 txvbqbfbo txvbqb9f txvbqbamo txvbqbv8p", r = "_1lrdacm3 txvbqbfbo txvbqb8x txvbqbv8r txvbqbjef", i = "_1lrdacm4 txvbqb9io txvbqbajx txvbqbao6 txvbqbdnx";
+//#endregion
+export { i as actions, e as content, r as description, t as icon, n as title };
+
+//# sourceMappingURL=EmptyState.css.js.map

package/lib/esm/atomic/molecules/empty-state/EmptyState.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.css.js","names":[],"sources":["../../../../../src/atomic/molecules/empty-state/EmptyState.css.ts"],"sourcesContent":["import { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const content = sprinkles({\n  width: 'full',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  gap: 2,\n  textAlign: 'center',\n});\n\nexport const icon = sprinkles({\n  fontSize: 'xl',\n});\n\nexport const title = sprinkles({\n  margin: 0,\n  fontSize: 'lg',\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const description = sprinkles({\n  margin: 0,\n  fontSize: 'sm',\n  color: 'textSecondary',\n  maxWidth: 'md',\n});\n\nexport const actions = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n  justifyContent: 'center',\n});\n"],"mappings":""}

package/lib/esm/atomic/molecules/empty-state/EmptyState.js

@@ -0,0 +1,35 @@
+import { Card as e } from "../card/Card.js";
+import { actions as t, content as n, description as r, icon as i, title as a } from "./EmptyState.css.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/atomic/molecules/empty-state/EmptyState.tsx
+var c = ({ title: c, description: l, icon: u, actions: d, className: f }) => {
+	let p = null;
+	u != null && (p = /* @__PURE__ */ o("div", {
+		className: i,
+		children: u
+	}));
+	let m = null;
+	return d != null && (m = /* @__PURE__ */ o("div", {
+		className: t,
+		children: d
+	})), /* @__PURE__ */ s(e, {
+		className: f,
+		contentClassName: n,
+		children: [
+			p,
+			/* @__PURE__ */ o("h2", {
+				className: a,
+				children: c
+			}),
+			/* @__PURE__ */ o("p", {
+				className: r,
+				children: l
+			}),
+			m
+		]
+	});
+};
+//#endregion
+export { c as EmptyState, c as default };
+
+//# sourceMappingURL=EmptyState.js.map

package/lib/esm/atomic/molecules/empty-state/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","names":[],"sources":["../../../../../src/atomic/molecules/empty-state/EmptyState.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { Card } from '../card/Card.js';\nimport * as styles from './EmptyState.css.js';\n\ntype Props = {\n  title: string;\n  description: ReactNode;\n  icon?: ReactNode;\n  actions?: ReactNode;\n  className?: string;\n};\n\nexport const EmptyState = ({\n  title,\n  description,\n  icon,\n  actions,\n  className,\n}: Props): JSX.Element => {\n  let iconElement: JSX.Element | null = null;\n  if (icon != null) {\n    iconElement = <div className={styles.icon}>{icon}</div>;\n  }\n\n  let actionsElement: JSX.Element | null = null;\n  if (actions != null) {\n    actionsElement = <div className={styles.actions}>{actions}</div>;\n  }\n\n  return (\n    <Card className={className} contentClassName={styles.content}>\n      {iconElement}\n      <h2 className={styles.title}>{title}</h2>\n      <p className={styles.description}>{description}</p>\n      {actionsElement}\n    </Card>\n  );\n};\n\nexport default EmptyState;\n"],"mappings":";;;;AAaA,IAAa,KAAc,EACzB,OAAA,GACA,aAAA,GACA,MAAA,GACA,SAAA,GACA,mBACwB;CACxB,IAAI,IAAkC;AACtC,CAAI,KAAQ,SACV,IAAc,kBAAC,OAAD;EAAK,WAAW;YAAc;EAAW,CAAA;CAGzD,IAAI,IAAqC;AAKzC,QAJI,KAAW,SACb,IAAiB,kBAAC,OAAD;EAAK,WAAW;YAAiB;EAAc,CAAA,GAIhE,kBAAC,GAAD;EAAiB;EAAW,kBAAkB;YAA9C;GACG;GACD,kBAAC,MAAD;IAAI,WAAW;cAAe;IAAW,CAAA;GACzC,kBAAC,KAAD;IAAG,WAAW;cAAqB;IAAgB,CAAA;GAClD;GACI"}

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

@@ -1,5 +1,4 @@
 /* empty css                                         */
-/* empty css                             */
 /* empty css                                         */
 //#region src/atomic/molecules/markdown/components/MarkdownFootnoteReference.css.ts
 var e = "_1p5id9v1 _1p5id9v0 txvbqb8o txvbqb9jf txvbqbamo txvbqb7s";

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

@@ -1,4 +1,5 @@
 /* empty css                                         */
+/* empty css                             */
 /* empty css                            */
 //#region src/atomic/molecules/markdown/components/MarkdownLink.css.ts
 var e = "xtwkbg1 xtwkbg0 txvbqb3d txvbqb6b txvbqb78 txvbqb6x txvbqb7m txvbqbut6", t = "xtwkbg3 xtwkbg1 xtwkbg0 txvbqb3d txvbqb6b txvbqb78 txvbqb6x txvbqb7m txvbqbut6 xtwkbg2 txvbqbco txvbqb9jf txvbqbanx", n = "xtwkbg5 xtwkbg4 txvbqb9jf", r = "xtwkbg7 xtwkbg6 txvbqbf txvbqb3b";

package/lib/esm/atomic/molecules/profile_dropdown/ProfileDropdown.js

@@ -0,0 +1,119 @@
+import { cx as e } from "../../../theme/tools.js";
+import { ChevronDownSvg as t } from "../../../icons/ChevronDownSvg.js";
+import { ProfileDropdownLogoutSvg as n } from "../../../icons/ProfileDropdownLogoutSvg.js";
+import { ProfileDropdownOrganizationSvg as r } from "../../../icons/ProfileDropdownOrganizationSvg.js";
+import { avatar as i, chevron as a, chevronOpen as o, container as s, dropdown as c, menuIcon as l, menuItem as u, menuLabel as d, organizationName as f, selectButton as p, selectContent as m, selectText as h, userName as g } from "./profileDropdown.css.js";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { useEffect as y, useRef as b, useState as x } from "react";
+import { Link as S } from "@plumile/router";
+//#region src/atomic/molecules/profile_dropdown/ProfileDropdown.tsx
+var C = {
+	menuAriaLabel: "User menu",
+	profileSecurity: "Profile & Security",
+	switchOrganizations: "Switch Organizations",
+	signOut: "Sign Out"
+}, w = (w) => {
+	let [T, E] = x(!1), D = b(null), { viewer: O, organization: k, labels: A = C } = w, j = () => {
+		E((e) => !e);
+	}, M = () => {
+		E(!1);
+	};
+	y(() => {
+		let e = (e) => {
+			D.current != null && !D.current.contains(e.target) && E(!1);
+		};
+		return document.addEventListener("mousedown", e), () => {
+			document.removeEventListener("mousedown", e);
+		};
+	}, []);
+	let N = [O.firstName, O.lastName].filter((e) => e.trim().length > 0).join(" "), P = null;
+	return T && (P = /* @__PURE__ */ v("div", {
+		className: c,
+		role: "menu",
+		children: [
+			/* @__PURE__ */ v(S, {
+				to: w.profilePath,
+				className: u,
+				onClick: M,
+				children: [/* @__PURE__ */ _("span", {
+					className: l,
+					children: /* @__PURE__ */ _(r, {
+						width: 16,
+						height: 16
+					})
+				}), /* @__PURE__ */ _("span", {
+					className: d,
+					children: A.profileSecurity
+				})]
+			}),
+			/* @__PURE__ */ v(S, {
+				to: k.switchPath,
+				className: u,
+				onClick: M,
+				children: [/* @__PURE__ */ _("span", {
+					className: l,
+					children: /* @__PURE__ */ _(r, {
+						width: 16,
+						height: 16
+					})
+				}), /* @__PURE__ */ _("span", {
+					className: d,
+					children: A.switchOrganizations
+				})]
+			}),
+			/* @__PURE__ */ v("button", {
+				className: u,
+				onClick: () => {
+					w.onSignOut?.(), M();
+				},
+				type: "button",
+				role: "menuitem",
+				children: [/* @__PURE__ */ _("span", {
+					className: l,
+					children: /* @__PURE__ */ _(n, {
+						width: 16,
+						height: 16
+					})
+				}), /* @__PURE__ */ _("span", {
+					className: d,
+					children: A.signOut
+				})]
+			})
+		]
+	})), /* @__PURE__ */ v("div", {
+		className: e(s, w.className),
+		ref: D,
+		children: [/* @__PURE__ */ v("button", {
+			className: p,
+			onClick: j,
+			"aria-expanded": T,
+			"aria-haspopup": "menu",
+			"aria-label": A.menuAriaLabel,
+			type: "button",
+			children: [/* @__PURE__ */ v("span", {
+				className: m,
+				children: [/* @__PURE__ */ _("span", {
+					className: i,
+					children: O.initials
+				}), /* @__PURE__ */ v("span", {
+					className: h,
+					children: [/* @__PURE__ */ _("span", {
+						className: g,
+						children: N
+					}), /* @__PURE__ */ _("span", {
+						className: f,
+						children: k.name
+					})]
+				})]
+			}), /* @__PURE__ */ _(t, {
+				width: 16,
+				height: 16,
+				className: e(a, { [o]: T })
+			})]
+		}), P]
+	});
+};
+//#endregion
+export { w as ProfileDropdown, w as default };
+
+//# sourceMappingURL=ProfileDropdown.js.map

package/lib/esm/atomic/molecules/profile_dropdown/ProfileDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileDropdown.js","names":[],"sources":["../../../../../src/atomic/molecules/profile_dropdown/ProfileDropdown.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type JSX } from 'react';\nimport { Link } from '@plumile/router';\n\nimport { ChevronDownSvg } from '../../../icons/ChevronDownSvg.js';\nimport { ProfileDropdownLogoutSvg } from '../../../icons/ProfileDropdownLogoutSvg.js';\nimport { ProfileDropdownOrganizationSvg } from '../../../icons/ProfileDropdownOrganizationSvg.js';\nimport { cx } from '../../../theme/tools.js';\nimport * as classes from './profileDropdown.css.js';\n\ntype Props = {\n  viewer: {\n    firstName: string;\n    lastName: string;\n    initials: string;\n  };\n  profilePath: string;\n  organization: {\n    name: string;\n    switchPath: string;\n  };\n  labels?: {\n    menuAriaLabel: string;\n    profileSecurity: string;\n    switchOrganizations: string;\n    signOut: string;\n  };\n  className?: string;\n  onSignOut?: () => void;\n};\n\nconst DEFAULT_LABELS = {\n  menuAriaLabel: 'User menu',\n  profileSecurity: 'Profile & Security',\n  switchOrganizations: 'Switch Organizations',\n  signOut: 'Sign Out',\n};\n\nexport const ProfileDropdown = (props: Props): JSX.Element | null => {\n  const [isOpen, setIsOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  const { viewer, organization, labels = DEFAULT_LABELS } = props;\n\n  const toggleDropdown = (): void => {\n    setIsOpen((prev) => {\n      return !prev;\n    });\n  };\n\n  const closeDropdown = (): void => {\n    setIsOpen(false);\n  };\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent): void => {\n      if (\n        dropdownRef.current != null &&\n        !dropdownRef.current.contains(event.target as Node)\n      ) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, []);\n\n  const displayNameParts = [viewer.firstName, viewer.lastName].filter(\n    (part) => {\n      return part.trim().length > 0;\n    },\n  );\n  const userDisplayName = displayNameParts.join(' ');\n\n  let dropdownMenu: JSX.Element | null = null;\n  if (isOpen) {\n    dropdownMenu = (\n      <div className={classes.dropdown} role=\"menu\">\n        <Link\n          to={props.profilePath}\n          className={classes.menuItem}\n          onClick={closeDropdown}\n        >\n          <span className={classes.menuIcon}>\n            <ProfileDropdownOrganizationSvg width={16} height={16} />\n          </span>\n          <span className={classes.menuLabel}>{labels.profileSecurity}</span>\n        </Link>\n        <Link\n          to={organization.switchPath}\n          className={classes.menuItem}\n          onClick={closeDropdown}\n        >\n          <span className={classes.menuIcon}>\n            <ProfileDropdownOrganizationSvg width={16} height={16} />\n          </span>\n          <span className={classes.menuLabel}>\n            {labels.switchOrganizations}\n          </span>\n        </Link>\n\n        <button\n          className={classes.menuItem}\n          onClick={() => {\n            props.onSignOut?.();\n            closeDropdown();\n          }}\n          type=\"button\"\n          role=\"menuitem\"\n        >\n          <span className={classes.menuIcon}>\n            <ProfileDropdownLogoutSvg width={16} height={16} />\n          </span>\n          <span className={classes.menuLabel}>{labels.signOut}</span>\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(classes.container, props.className)} ref={dropdownRef}>\n      <button\n        className={classes.selectButton}\n        onClick={toggleDropdown}\n        aria-expanded={isOpen}\n        aria-haspopup=\"menu\"\n        aria-label={labels.menuAriaLabel}\n        type=\"button\"\n      >\n        <span className={classes.selectContent}>\n          <span className={classes.avatar}>{viewer.initials}</span>\n          <span className={classes.selectText}>\n            <span className={classes.userName}>{userDisplayName}</span>\n            <span className={classes.organizationName}>\n              {organization.name}\n            </span>\n          </span>\n        </span>\n        <ChevronDownSvg\n          width={16}\n          height={16}\n          className={cx(classes.chevron, {\n            [classes.chevronOpen]: isOpen,\n          })}\n        />\n      </button>\n\n      {dropdownMenu}\n    </div>\n  );\n};\n\nexport default ProfileDropdown;\n"],"mappings":";;;;;;;;;AA8BA,IAAM,IAAiB;CACrB,eAAe;CACf,iBAAiB;CACjB,qBAAqB;CACrB,SAAS;CACV,EAEY,KAAmB,MAAqC;CACnE,IAAM,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,IAAc,EAAuB,KAAK,EAE1C,EAAE,WAAQ,iBAAc,YAAS,MAAmB,GAEpD,UAA6B;AACjC,KAAW,MACF,CAAC,EACR;IAGE,UAA4B;AAChC,IAAU,GAAM;;AAGlB,SAAgB;EACd,IAAM,KAAsB,MAA4B;AACtD,GACE,EAAY,WAAW,QACvB,CAAC,EAAY,QAAQ,SAAS,EAAM,OAAe,IAEnD,EAAU,GAAM;;AAKpB,SADA,SAAS,iBAAiB,aAAa,EAAmB,QAC7C;AACX,YAAS,oBAAoB,aAAa,EAAmB;;IAE9D,EAAE,CAAC;CAON,IAAM,IALmB,CAAC,EAAO,WAAW,EAAO,SAAS,CAAC,QAC1D,MACQ,EAAK,MAAM,CAAC,SAAS,EAE/B,CACwC,KAAK,IAAI,EAE9C,IAAmC;AA6CvC,QA5CI,MACF,IACE,kBAAC,OAAD;EAAK,WAAW;EAAkB,MAAK;YAAvC;GACE,kBAAC,GAAD;IACE,IAAI,EAAM;IACV,WAAW;IACX,SAAS;cAHX,CAKE,kBAAC,QAAD;KAAM,WAAW;eACf,kBAAC,GAAD;MAAgC,OAAO;MAAI,QAAQ;MAAM,CAAA;KACpD,CAAA,EACP,kBAAC,QAAD;KAAM,WAAW;eAAoB,EAAO;KAAuB,CAAA,CAC9D;;GACP,kBAAC,GAAD;IACE,IAAI,EAAa;IACjB,WAAW;IACX,SAAS;cAHX,CAKE,kBAAC,QAAD;KAAM,WAAW;eACf,kBAAC,GAAD;MAAgC,OAAO;MAAI,QAAQ;MAAM,CAAA;KACpD,CAAA,EACP,kBAAC,QAAD;KAAM,WAAW;eACd,EAAO;KACH,CAAA,CACF;;GAEP,kBAAC,UAAD;IACE,WAAW;IACX,eAAe;AAEb,KADA,EAAM,aAAa,EACnB,GAAe;;IAEjB,MAAK;IACL,MAAK;cAPP,CASE,kBAAC,QAAD;KAAM,WAAW;eACf,kBAAC,GAAD;MAA0B,OAAO;MAAI,QAAQ;MAAM,CAAA;KAC9C,CAAA,EACP,kBAAC,QAAD;KAAM,WAAW;eAAoB,EAAO;KAAe,CAAA,CACpD;;GACL;MAKR,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAmB,EAAM,UAAU;EAAE,KAAK;YAA7D,CACE,kBAAC,UAAD;GACE,WAAW;GACX,SAAS;GACT,iBAAe;GACf,iBAAc;GACd,cAAY,EAAO;GACnB,MAAK;aANP,CAQE,kBAAC,QAAD;IAAM,WAAW;cAAjB,CACE,kBAAC,QAAD;KAAM,WAAW;eAAiB,EAAO;KAAgB,CAAA,EACzD,kBAAC,QAAD;KAAM,WAAW;eAAjB,CACE,kBAAC,QAAD;MAAM,WAAW;gBAAmB;MAAuB,CAAA,EAC3D,kBAAC,QAAD;MAAM,WAAW;gBACd,EAAa;MACT,CAAA,CACF;OACF;OACP,kBAAC,GAAD;IACE,OAAO;IACP,QAAQ;IACR,WAAW,EAAG,GAAiB,GAC5B,IAAsB,GACxB,CAAC;IACF,CAAA,CACK;MAER,EACG"}

package/lib/esm/atomic/molecules/profile_dropdown/profileDropdown.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                               */
+//#region src/atomic/molecules/profile_dropdown/profileDropdown.css.ts
+var e = "_1vukrf60 txvbqbpsf txvbqbu6f", t = "_1vukrf61 txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb9io txvbqbco txvbqbdoo txvbqbu6f txvbqb1rx txvbqbv4h txvbqbv txvbqbt5o txvbqb1co txvbqb1qf txvbqbwo", n = "_1vukrf62 txvbqb9io txvbqbco txvbqbaof txvbqb9mx txvbqbk4x", r = "_1vukrf63 txvbqb9io txvbqbco txvbqbdnx txvbqbtx6 txvbqbc6o txvbqb1sx txvbqbuy6 txvbqbv9z txvbqb8o txvbqbamo txvbqb66", i = "_1vukrf64 txvbqb9io txvbqbai6 txvbqbk4x", a = "_1vukrf65 txvbqbps6 txvbqbthf txvbqbdpf txvbqbiio txvbqbuso txvbqbkgo txvbqbv4h txvbqb1ro txvbqb1co txvbqb1qf txvbqb106 txvbqbuux txvbqbl9x txvbqb8s6", o = "_1vukrf66 txvbqb8x txvbqbamo txvbqbv53 txvbqbuw6 txvbqbl6f txvbqbt6f", s = "_1vukrf67 txvbqb8o txvbqbamo txvbqbv53 txvbqbvar txvbqbuw6 txvbqbl6f txvbqbt6f", c = "_1vukrf69 _1vukrf68 txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb77 txvbqb6x txvbqb7k txvbqb9io txvbqbco txvbqbu6f txvbqb12f txvbqb1px txvbqbuzj txvbqb1rf txvbqbv txvbqbt5o txvbqb3b txvbqbva3 txvbqb8x txvbqbamo", l = "_1vukrf6a txvbqb9io txvbqbco txvbqbdnx txvbqbha6 txvbqbv4z", u = "_1vukrf6b txvbqb9mx txvbqbuw6", d = "_1vukrf6c txvbqbv9p txvbqb7g txvbqb6x txvbqb7k", f = "_1vukrf6d txvbqb2w";
+//#endregion
+export { r as avatar, d as chevron, f as chevronOpen, e as container, a as dropdown, l as menuIcon, c as menuItem, u as menuLabel, s as organizationName, t as selectButton, n as selectContent, i as selectText, o as userName };
+
+//# sourceMappingURL=profileDropdown.css.js.map

package/lib/esm/atomic/molecules/profile_dropdown/profileDropdown.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"profileDropdown.css.js","names":[],"sources":["../../../../../src/atomic/molecules/profile_dropdown/profileDropdown.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const container = sprinkles({\n  position: 'relative',\n  width: 'full',\n});\n\nexport const selectButton = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  width: 'full',\n  paddingY: 2,\n  paddingX: 3,\n  borderRadius: 'xl',\n  backgroundColor: 'brandWhite',\n  cursor: 'pointer',\n  textAlign: 'left',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n});\n\nexport const selectContent = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 3,\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const avatar = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 8,\n  height: 8,\n  borderRadius: '1/2',\n  backgroundImage: 'brandDiagonal',\n  color: 'brandWhite',\n  fontSize: 'xs',\n  fontWeight: 'semibold',\n  textTransform: 'uppercase',\n});\n\nexport const selectText = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  minWidth: 0,\n});\n\nexport const dropdown = sprinkles({\n  position: 'absolute',\n  top: 'full',\n  left: 0,\n  marginTop: 1.5,\n  width: 'max',\n  minWidth: 'full',\n  backgroundColor: 'brandWhite',\n  borderRadius: 'lg',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'brandPrimaryRed',\n  zIndex: 30,\n  padding: 2,\n  boxShadow: 'profileDropdownShadow',\n});\n\nexport const userName = sprinkles({\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n  color: 'black',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const organizationName = sprinkles({\n  fontSize: 'xs',\n  fontWeight: 'semibold',\n  color: 'black',\n  opacity: 50,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const menuItem = style([\n  sprinkles({\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n    display: 'flex',\n    alignItems: 'center',\n    width: 'full',\n    paddingY: 2,\n    paddingX: 3,\n    borderWidth: 0,\n    borderStyle: 'none',\n    backgroundColor: 'transparent',\n    borderRadius: 'md',\n    cursor: 'pointer',\n    textAlign: 'left',\n    textDecoration: 'none',\n    color: 'brandDarkGray',\n    fontSize: 'sm',\n    fontWeight: 'semibold',\n  }),\n  {\n    selectors: {\n      '& + &': {\n        marginTop: vars.spacing[1],\n      },\n    },\n    ':hover': {\n      backgroundColor: vars.colors.brandLightGray,\n      color: vars.colors.brandPrimaryRed,\n      textDecoration: 'none',\n    },\n    ':focus-visible': {\n      outline: 'none',\n      boxShadow: `0 0 0 2px ${vars.colors.brandPrimaryRed}`,\n    },\n  },\n]);\n\nexport const menuIcon = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  marginRight: 3,\n  color: 'current',\n});\n\nexport const menuLabel = sprinkles({\n  flex: 1,\n  whiteSpace: 'nowrap',\n});\n\nexport const chevron = sprinkles({\n  color: 'brandPrimaryRed',\n  transitionProperty: 'transform',\n  transitionDuration: 150,\n  transitionTimingFunction: 'ease',\n});\n\nexport const chevronOpen = sprinkles({\n  rotate: 180,\n});\n"],"mappings":""}

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/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/components/agent/AgentMarkdownCard.css.js

@@ -0,0 +1,8 @@
+/* empty css                                   */
+/* empty css                                 */
+//#region src/components/agent/AgentMarkdownCard.css.ts
+var e = "_1dmt4ev0 txvbqb9io txvbqbunx txvbqbai6 txvbqbao6", t = "_1dmt4ev1 txvbqbfbo txvbqb9f txvbqbamo", n = "_1dmt4ev2 txvbqb8x txvbqb1o txvbqbfbo";
+//#endregion
+export { e as container, n as emptyMessage, t as title };
+
+//# sourceMappingURL=AgentMarkdownCard.css.js.map

package/lib/esm/components/agent/AgentMarkdownCard.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentMarkdownCard.css.js","names":[],"sources":["../../../../src/components/agent/AgentMarkdownCard.css.ts"],"sourcesContent":["import { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  width: '4/5',\n  flexDirection: 'column',\n  gap: 2,\n});\n\nexport const title = sprinkles({\n  margin: 0,\n  fontSize: 'lg',\n  fontWeight: 'semibold',\n});\n\nexport const emptyMessage = sprinkles({\n  fontSize: 'sm',\n  fontStyle: 'italic',\n  margin: 0,\n});\n"],"mappings":""}

package/lib/esm/components/agent/AgentMarkdownCard.js

@@ -0,0 +1,19 @@
+import { MarkdownRenderer as e } from "../../atomic/molecules/markdown/MarkdownRenderer.js";
+import { sanitizeAgentMarkdown as t } from "../../shared/agentText.js";
+import { container as n, emptyMessage as r } from "./AgentMarkdownCard.css.js";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/agent/AgentMarkdownCard.tsx
+var a = ({ content: a, emptyMessage: o }) => {
+	let s = t(a), c;
+	return c = s == null ? /* @__PURE__ */ i("p", {
+		className: r,
+		children: o
+	}) : /* @__PURE__ */ i(e, { content: s }), /* @__PURE__ */ i("div", {
+		className: n,
+		children: c
+	});
+};
+//#endregion
+export { a as AgentMarkdownCard, a as default };
+
+//# sourceMappingURL=AgentMarkdownCard.js.map

package/lib/esm/components/agent/AgentMarkdownCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentMarkdownCard.js","names":[],"sources":["../../../../src/components/agent/AgentMarkdownCard.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { MarkdownRenderer } from '../../atomic/molecules/markdown/MarkdownRenderer.js';\nimport { sanitizeAgentMarkdown } from '../../shared/agentText.js';\nimport * as styles from './AgentMarkdownCard.css.js';\n\ntype Props = {\n  title: string;\n  content: string;\n  emptyMessage: string;\n};\n\nexport const AgentMarkdownCard = ({\n  content,\n  emptyMessage,\n}: Props): JSX.Element => {\n  const sanitizedContent = sanitizeAgentMarkdown(content);\n\n  let body: JSX.Element;\n\n  if (sanitizedContent != null) {\n    body = <MarkdownRenderer content={sanitizedContent} />;\n  } else {\n    body = <p className={styles.emptyMessage}>{emptyMessage}</p>;\n  }\n\n  return <div className={styles.container}>{body}</div>;\n};\n\nexport default AgentMarkdownCard;\n"],"mappings":";;;;;AAYA,IAAa,KAAqB,EAChC,YACA,cAAA,QACwB;CACxB,IAAM,IAAmB,EAAsB,EAAQ,EAEnD;AAQJ,QANA,AACE,IADE,KAAoB,OAGf,kBAAC,KAAD;EAAG,WAAW;YAAsB;EAAiB,CAAA,GAFrD,kBAAC,GAAD,EAAkB,SAAS,GAAoB,CAAA,EAKjD,kBAAC,OAAD;EAAK,WAAW;YAAmB;EAAW,CAAA"}

package/lib/esm/components/organization_layout/OrganizationLayout.js

@@ -0,0 +1,16 @@
+import { PageShell as e } from "../layout/PageShell.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/organization_layout/OrganizationLayout.tsx
+var n = ({ actions: n, breadcrumb: r, breadcrumbItems: i, children: a, contentClassName: o, sidebar: s, sidePanel: c }) => /* @__PURE__ */ t(e, {
+	sidebar: s,
+	breadcrumb: i,
+	breadcrumbSlot: r,
+	actions: n,
+	sidePanel: c,
+	contentClassName: o,
+	children: a
+});
+//#endregion
+export { n as OrganizationLayout, n as default };
+
+//# sourceMappingURL=OrganizationLayout.js.map

package/lib/esm/components/organization_layout/OrganizationLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationLayout.js","names":[],"sources":["../../../../src/components/organization_layout/OrganizationLayout.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport {\n  PageShell,\n  type BreadcrumbItem,\n  type PageShellActions,\n} from '../layout/PageShell.js';\n\ntype Props = {\n  children: ReactNode;\n  sidebar: ReactNode;\n  breadcrumbItems?: BreadcrumbItem[];\n  breadcrumb?: ReactNode;\n  actions?: PageShellActions;\n  sidePanel?: ReactNode;\n  contentClassName?: string;\n};\n\nconst OrganizationLayout = ({\n  actions,\n  breadcrumb,\n  breadcrumbItems,\n  children,\n  contentClassName,\n  sidebar,\n  sidePanel,\n}: Props): JSX.Element => {\n  return (\n    <PageShell\n      sidebar={sidebar}\n      breadcrumb={breadcrumbItems}\n      breadcrumbSlot={breadcrumb}\n      actions={actions}\n      sidePanel={sidePanel}\n      contentClassName={contentClassName}\n    >\n      {children}\n    </PageShell>\n  );\n};\n\nexport { OrganizationLayout };\nexport default OrganizationLayout;\n"],"mappings":";;;AAkBA,IAAM,KAAsB,EAC1B,YACA,eACA,oBACA,aACA,qBACA,YACA,mBAGE,kBAAC,GAAD;CACW;CACT,YAAY;CACZ,gBAAgB;CACP;CACE;CACO;CAEjB;CACS,CAAA"}