@plumile/ui 0.1.67 → 0.1.69

package/lib/esm/admin/organisms/admin_sidebar/AdminSidebar.js

@@ -0,0 +1,62 @@
+import { cx as e } from "../../../theme/tools.js";
+import { SidebarNavSection as t } from "../../../backoffice/molecules/sidebar_nav_section/SidebarNavSection.js";
+import "../../../index.js";
+import { SidebarCollapseToggle as n } from "../../../backoffice/molecules/sidebar_collapse_toggle/SidebarCollapseToggle.js";
+import { container as r, footer as i, header as a, inner as o, sections as s, widthRecipe as c } from "./adminSidebar.css.js";
+import { useCallback as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/admin/organisms/admin_sidebar/AdminSidebar.tsx
+var p = ({ header: p, search: m, footer: h, sections: g, isCollapsed: _, defaultCollapsed: v = !1, onCollapsedChange: y, collapseToggleLabel: b, collapseShortcut: x, className: S }) => {
+	let [C, w] = u(v), T = _ ?? C, E = l(() => {
+		let e = !T;
+		_ ?? w(e), y?.(e);
+	}, [
+		T,
+		_,
+		y
+	]), D = "expanded";
+	T && (D = "collapsed");
+	let O = null;
+	return h != null && (O = /* @__PURE__ */ d("div", {
+		className: i,
+		children: h
+	})), /* @__PURE__ */ d("aside", {
+		className: e(r, c({ state: D }), S),
+		children: /* @__PURE__ */ f("div", {
+			className: o,
+			children: [
+				/* @__PURE__ */ f("div", {
+					className: a,
+					children: [p, /* @__PURE__ */ d(n, {
+						isCollapsed: T,
+						onToggle: E,
+						label: b,
+						shortcut: x
+					})]
+				}),
+				m != null && /* @__PURE__ */ d("div", {
+					className: "jmrd3s7 txvbqbnuo txvbqbohx txvbqb9io txvbqbai6 txvbqbao6",
+					children: m
+				}),
+				/* @__PURE__ */ d("nav", {
+					className: s,
+					"aria-label": "Admin navigation",
+					children: g.map((e) => /* @__PURE__ */ d(t, {
+						title: e.title,
+						items: e.items,
+						collapsible: e.collapsible,
+						defaultCollapsed: e.defaultCollapsed,
+						isCollapsed: e.isCollapsed,
+						onCollapsedChange: e.onCollapsedChange,
+						collapsed: T
+					}, e.id))
+				}),
+				O
+			]
+		})
+	});
+};
+//#endregion
+export { p as AdminSidebar, p as default };
+
+//# sourceMappingURL=AdminSidebar.js.map

package/lib/esm/admin/organisms/admin_sidebar/AdminSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminSidebar.js","names":[],"sources":["../../../../../src/admin/organisms/admin_sidebar/AdminSidebar.tsx"],"sourcesContent":["import { useCallback, useState, type JSX, type ReactNode } from 'react';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { SidebarCollapseToggle } from '../../../backoffice/molecules/sidebar_collapse_toggle/SidebarCollapseToggle.js';\nimport {\n  SidebarNavSection,\n  type SidebarNavSectionItem,\n} from '../../../backoffice/molecules/sidebar_nav_section/SidebarNavSection.js';\n\nimport * as styles from './adminSidebar.css.js';\nimport { cx } from '@plumile/ui';\n\nexport type AdminSidebarSection = {\n  id: string;\n  title?: ReactNode;\n  items: readonly SidebarNavSectionItem[];\n  collapsible?: boolean;\n  defaultCollapsed?: boolean;\n  isCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n};\n\nexport type AdminSidebarProps = {\n  header?: ReactNode;\n  search?: ReactNode;\n  footer?: ReactNode;\n  sections: readonly AdminSidebarSection[];\n  isCollapsed?: boolean;\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  collapseToggleLabel?: ReactNode;\n  collapseShortcut?: readonly string[] | string;\n  className?: string;\n};\n\nexport const AdminSidebar = ({\n  header,\n  search,\n  footer,\n  sections,\n  isCollapsed,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  collapseToggleLabel,\n  collapseShortcut,\n  className,\n}: AdminSidebarProps): JSX.Element => {\n  const [uncontrolledCollapsed, setUncontrolledCollapsed] =\n    useState(defaultCollapsed);\n\n  const collapsed = isCollapsed ?? uncontrolledCollapsed;\n\n  const handleToggleCollapsed = useCallback(() => {\n    const next = !collapsed;\n    if (isCollapsed == null) {\n      setUncontrolledCollapsed(next);\n    }\n    onCollapsedChange?.(next);\n  }, [collapsed, isCollapsed, onCollapsedChange]);\n\n  let widthKey: NonNullable<\n    NonNullable<RecipeVariants<typeof styles.widthRecipe>>['state']\n  > = 'expanded';\n  if (collapsed) {\n    widthKey = 'collapsed';\n  }\n\n  let footerNode: JSX.Element | null = null;\n  if (footer != null) {\n    footerNode = <div className={styles.footer}>{footer}</div>;\n  }\n\n  return (\n    <aside\n      className={cx(\n        styles.container,\n        styles.widthRecipe({ state: widthKey }),\n        className,\n      )}\n    >\n      <div className={styles.inner}>\n        <div className={styles.header}>\n          {header}\n          <SidebarCollapseToggle\n            isCollapsed={collapsed}\n            onToggle={handleToggleCollapsed}\n            label={collapseToggleLabel}\n            shortcut={collapseShortcut}\n          />\n        </div>\n\n        {search != null && <div className={styles.search}>{search}</div>}\n        <nav className={styles.sections} aria-label=\"Admin navigation\">\n          {sections.map((section) => {\n            return (\n              <SidebarNavSection\n                key={section.id}\n                title={section.title}\n                items={section.items}\n                collapsible={section.collapsible}\n                defaultCollapsed={section.defaultCollapsed}\n                isCollapsed={section.isCollapsed}\n                onCollapsedChange={section.onCollapsedChange}\n                collapsed={collapsed}\n              />\n            );\n          })}\n        </nav>\n\n        {footerNode}\n      </div>\n    </aside>\n  );\n};\n\nexport default AdminSidebar;\n"],"mappings":";;;;;;;;AAmCA,IAAa,KAAgB,EAC3B,QAAA,GACA,QAAA,GACA,QAAA,GACA,UAAA,GACA,gBACA,sBAAmB,IACnB,sBACA,wBACA,qBACA,mBACoC;CACpC,IAAM,CAAC,GAAuB,KAC5B,EAAS,EAAiB,EAEtB,IAAY,KAAe,GAE3B,IAAwB,QAAkB;EAC9C,IAAM,IAAO,CAAC;AAId,EAHI,KACF,EAAyB,EAAK,EAEhC,IAAoB,EAAK;IACxB;EAAC;EAAW;EAAa;EAAkB,CAAC,EAE3C,IAEA;AACJ,CAAI,MACF,IAAW;CAGb,IAAI,IAAiC;AAKrC,QAJI,KAAU,SACZ,IAAa,kBAAC,OAAD;EAAK,WAAW;YAAgB;EAAa,CAAA,GAI1D,kBAAC,SAAD;EACE,WAAW,EACT,GACA,EAAmB,EAAE,OAAO,GAAU,CAAC,EACvC,EACD;YAED,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACE,kBAAC,OAAD;KAAK,WAAW;eAAhB,CACG,GACD,kBAAC,GAAD;MACE,aAAa;MACb,UAAU;MACV,OAAO;MACP,UAAU;MACV,CAAA,CACE;;IAEL,KAAU,QAAQ,kBAAC,OAAD;KAAK,WAAW;eAAgB;KAAa,CAAA;IAChE,kBAAC,OAAD;KAAK,WAAW;KAAiB,cAAW;eACzC,EAAS,KAAK,MAEX,kBAAC,GAAD;MAEE,OAAO,EAAQ;MACf,OAAO,EAAQ;MACf,aAAa,EAAQ;MACrB,kBAAkB,EAAQ;MAC1B,aAAa,EAAQ;MACrB,mBAAmB,EAAQ;MAChB;MACX,EARK,EAAQ,GAQb,CAEJ;KACE,CAAA;IAEL;IACG;;EACA,CAAA"}

package/lib/esm/admin/organisms/admin_sidebar/adminSidebar.css.js

@@ -0,0 +1,17 @@
+/* empty css                                      */
+/* empty css                            */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/admin/organisms/admin_sidebar/adminSidebar.css.ts
+var t = "jmrd3s0 txvbqb9io txvbqbai6 txvbqbcff txvbqbv2r txvbqb12f txvbqb1qf txvbqb5fx txvbqb306", n = e({
+	defaultClassName: "jmrd3s1",
+	variantClassNames: { state: {
+		expanded: "jmrd3s2",
+		collapsed: "jmrd3s3"
+	} },
+	defaultVariants: { state: "expanded" },
+	compoundVariants: []
+}), r = "jmrd3s4 txvbqb9io txvbqbai6 txvbqbaoo txvbqblaf txvbqbcff txvbqbjg6", i = "jmrd3s5 txvbqbnuo txvbqbohx txvbqb9io txvbqbco txvbqbdoo txvbqbao6", a = "jmrd3s6 txvbqb9io txvbqbai6 txvbqbaoo txvbqb9mx txvbqbjg6 txvbqbl7o", o = "jmrd3s7 txvbqbnuo txvbqbohx txvbqb9io txvbqbai6 txvbqbao6", s = "jmrd3s8 txvbqbnuo txvbqbohx txvbqb9io txvbqbai6 txvbqbao6";
+//#endregion
+export { t as container, s as footer, i as header, r as inner, o as search, a as sections, n as widthRecipe };
+
+//# sourceMappingURL=adminSidebar.css.js.map

package/lib/esm/admin/organisms/admin_sidebar/adminSidebar.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adminSidebar.css.js","names":[],"sources":["../../../../../src/admin/organisms/admin_sidebar/adminSidebar.css.ts"],"sourcesContent":["import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  height: 'full',\n  backgroundColor: 'surface',\n  borderWidth: 0,\n  borderStyle: 'solid',\n  borderRightWidth: 'px',\n  borderRightColor: 'borderSubtle',\n});\n\nexport const widthRecipe = recipe({\n  variants: {\n    state: {\n      expanded: { width: vars.width[64] },\n      collapsed: { width: vars.width[17.5] },\n    },\n  },\n  defaultVariants: {\n    state: 'expanded',\n  },\n});\n\nexport type WidthRecipeVariants = RecipeVariants<typeof widthRecipe>;\n\nexport const inner = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n  padding: 4,\n  height: 'full',\n  minHeight: 0,\n});\n\nexport const header = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: 2,\n  paddingX: 1,\n});\n\nexport const sections = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n  flex: 1,\n  minHeight: 0,\n  overflowY: 'auto',\n});\n\nexport const search = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  paddingX: 1,\n});\n\nexport const footer = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  paddingX: 1,\n});\n"],"mappings":""}

package/lib/esm/{backoffice/organisms/backoffice_topbar/BackofficeTopbar.js → admin/organisms/admin_topbar/AdminTopbar.js}

@@ -1,8 +1,8 @@
 import { cx as e } from "../../../theme/tools.js";
-import { container as t, left as n, right as r, row as i } from "./backofficeTopbar.css.js";
+import { container as t, left as n, right as r, row as i } from "./adminTopbar.css.js";
 import "../../../index.js";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
-//#region src/backoffice/organisms/backoffice_topbar/BackofficeTopbar.tsx
+//#region src/admin/organisms/admin_topbar/AdminTopbar.tsx
 var s = ({ breadcrumb: s, leftSlot: c, rightSlot: l, className: u }) => /* @__PURE__ */ a("div", {
 	className: e(t, u),
 	children: /* @__PURE__ */ o("div", {
@@ -17,6 +17,6 @@ var s = ({ breadcrumb: s, leftSlot: c, rightSlot: l, className: u }) => /* @__PU
 	})
 });
 //#endregion
-export { s as BackofficeTopbar, s as default };
+export { s as AdminTopbar, s as default };
 
-//# sourceMappingURL=BackofficeTopbar.js.map
+//# sourceMappingURL=AdminTopbar.js.map

package/lib/esm/admin/organisms/admin_topbar/AdminTopbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminTopbar.js","names":[],"sources":["../../../../../src/admin/organisms/admin_topbar/AdminTopbar.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport * as styles from './adminTopbar.css.js';\nimport { cx } from '@plumile/ui';\n\nexport type AdminTopbarProps = {\n  breadcrumb?: ReactNode;\n  leftSlot?: ReactNode;\n  rightSlot?: ReactNode;\n  className?: string;\n};\n\nexport const AdminTopbar = ({\n  breadcrumb,\n  leftSlot,\n  rightSlot,\n  className,\n}: AdminTopbarProps): JSX.Element => {\n  return (\n    <div className={cx(styles.container, className)}>\n      <div className={styles.row}>\n        <div className={styles.left}>\n          {breadcrumb}\n          {leftSlot}\n        </div>\n        <div className={styles.right}>{rightSlot}</div>\n      </div>\n    </div>\n  );\n};\n\nexport default AdminTopbar;\n"],"mappings":";;;;;AAYA,IAAa,KAAe,EAC1B,eACA,aACA,cACA,mBAGE,kBAAC,OAAD;CAAK,WAAW,EAAG,GAAkB,EAAU;WAC7C,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,GACA,EACG;MACN,kBAAC,OAAD;GAAK,WAAW;aAAe;GAAgB,CAAA,CAC3C;;CACF,CAAA"}

package/lib/esm/admin/organisms/admin_topbar/adminTopbar.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                           */
+//#region src/admin/organisms/admin_topbar/adminTopbar.css.ts
+var e = "_1lo5q0p0 txvbqb9io txvbqbai6 txvbqbaof txvbqbk4x txvbqbu6f", t = "_1lo5q0p1 txvbqb9io txvbqbco txvbqbaoo txvbqbajx txvbqbk4x", n = "_1lo5q0p2 txvbqb9io txvbqbco txvbqbaof txvbqb9mx txvbqbk4x", r = "_1lo5q0p3 txvbqb9jf txvbqbco txvbqbao6 txvbqbdo6 txvbqbaj6", i = "_1lo5q0p4 txvbqb9jf txvbqbco txvbqbc66 txvbqbuho txvbqbv3d";
+//#endregion
+export { e as container, i as divider, n as left, r as right, t as row };
+
+//# sourceMappingURL=adminTopbar.css.js.map

package/lib/esm/admin/organisms/admin_topbar/adminTopbar.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adminTopbar.css.js","names":[],"sources":["../../../../../src/admin/organisms/admin_topbar/adminTopbar.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n  minWidth: 0,\n  width: 'full',\n});\n\nexport const row = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 4,\n  flexWrap: 'wrap',\n  minWidth: 0,\n});\n\nexport const left = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 3,\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const right = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 2,\n  justifyContent: 'flex-end',\n  flexShrink: 0,\n});\n\nexport const divider = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  height: 6,\n  width: 0.5,\n  backgroundColor: 'border',\n});\n"],"mappings":""}

package/lib/esm/admin/templates/admin_shell_layout/AdminShellLayout.js

@@ -0,0 +1,19 @@
+import { AppShell as e } from "../../../components/layout/AppShell.js";
+import { AdminTopbar as t } from "../../organisms/admin_topbar/AdminTopbar.js";
+import { AdminSidebar as n } from "../../organisms/admin_sidebar/AdminSidebar.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/admin/templates/admin_shell_layout/AdminShellLayout.tsx
+var i = ({ children: i, sidebar: a, topbar: o, actions: s, tabs: c }) => {
+	let l = /* @__PURE__ */ r(n, { ...a }), u = null;
+	return o != null && (u = /* @__PURE__ */ r(t, { ...o })), /* @__PURE__ */ r(e, {
+		sidebar: l,
+		breadcrumbSlot: u,
+		actions: s,
+		tabs: c,
+		children: i
+	});
+};
+//#endregion
+export { i as AdminShellLayout, i as default };
+
+//# sourceMappingURL=AdminShellLayout.js.map

package/lib/esm/admin/templates/admin_shell_layout/AdminShellLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminShellLayout.js","names":[],"sources":["../../../../../src/admin/templates/admin_shell_layout/AdminShellLayout.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { AppShell } from '../../../components/layout/AppShell.js';\nimport {\n  AdminSidebar,\n  type AdminSidebarProps,\n} from '../../organisms/admin_sidebar/AdminSidebar.js';\nimport {\n  AdminTopbar,\n  type AdminTopbarProps,\n} from '../../organisms/admin_topbar/AdminTopbar.js';\nimport type { PageShellActions, PageShellTab } from '@plumile/ui';\n\nexport type AdminShellLayoutProps = {\n  children: ReactNode;\n  sidebar: AdminSidebarProps;\n  topbar?: AdminTopbarProps;\n  actions?: PageShellActions;\n  tabs?: PageShellTab[];\n};\n\nexport const AdminShellLayout = ({\n  children,\n  sidebar,\n  topbar,\n  actions,\n  tabs,\n}: AdminShellLayoutProps): JSX.Element => {\n  const sidebarNode = <AdminSidebar {...sidebar} />;\n  let topbarNode: JSX.Element | null = null;\n  if (topbar != null) {\n    topbarNode = <AdminTopbar {...topbar} />;\n  }\n\n  return (\n    <AppShell\n      sidebar={sidebarNode}\n      breadcrumbSlot={topbarNode}\n      actions={actions}\n      tabs={tabs}\n    >\n      {children}\n    </AppShell>\n  );\n};\n\nexport default AdminShellLayout;\n"],"mappings":";;;;;AAqBA,IAAa,KAAoB,EAC/B,aACA,YACA,WACA,YACA,cACwC;CACxC,IAAM,IAAc,kBAAC,GAAD,EAAc,GAAI,GAAW,CAAA,EAC7C,IAAiC;AAKrC,QAJI,KAAU,SACZ,IAAa,kBAAC,GAAD,EAAa,GAAI,GAAU,CAAA,GAIxC,kBAAC,GAAD;EACE,SAAS;EACT,gBAAgB;EACP;EACH;EAEL;EACQ,CAAA"}

package/lib/esm/admin/theme/AdminThemeProvider.js

@@ -0,0 +1,11 @@
+import { adminThemeClass as e } from "./adminTheme.css.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/admin/theme/AdminThemeProvider.tsx
+var n = ({ children: n }) => /* @__PURE__ */ t("div", {
+	className: e,
+	children: n
+});
+//#endregion
+export { n as AdminThemeProvider, n as default };
+
+//# sourceMappingURL=AdminThemeProvider.js.map

package/lib/esm/admin/theme/AdminThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminThemeProvider.js","names":[],"sources":["../../../../src/admin/theme/AdminThemeProvider.tsx"],"sourcesContent":["import type { JSX, ReactNode } from 'react';\n\nimport { adminThemeClass } from './adminTheme.css.js';\n\nexport type AdminThemeProviderProps = {\n  children: ReactNode;\n};\n\nexport const AdminThemeProvider = ({\n  children,\n}: AdminThemeProviderProps): JSX.Element => {\n  return <div className={adminThemeClass}>{children}</div>;\n};\n\nexport default AdminThemeProvider;\n"],"mappings":";;;AAQA,IAAa,KAAsB,EACjC,kBAEO,kBAAC,OAAD;CAAK,WAAW;CAAkB;CAAe,CAAA"}

package/lib/esm/admin/theme/adminTheme.css.js

@@ -0,0 +1,7 @@
+/* empty css                          */
+//#region src/admin/theme/adminTheme.css.ts
+var e = "lzy5640";
+//#endregion
+export { e as adminThemeClass };
+
+//# sourceMappingURL=adminTheme.css.js.map

package/lib/esm/admin/theme/adminTheme.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adminTheme.css.js","names":[],"sources":["../../../../src/admin/theme/adminTheme.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const adminThemeClass = style({\n  vars: {\n    [vars.colors.background]: '#F7F8FB',\n    [vars.colors.backgroundSecondary]: '#F2F4F8',\n    [vars.colors.backgroundTertiary]: '#EAEDF2',\n    [vars.colors.backgroundModifier]: '#E1E6EE',\n    [vars.colors.surface]: '#FFFFFF',\n    [vars.colors.surfaceSecondary]: '#F6F8FC',\n    [vars.colors.surfaceMuted]: '#F1F4F8',\n    [vars.colors.surfaceElevated]: '#FFFFFF',\n    [vars.colors.text]: '#0B111E',\n    [vars.colors.textSecondary]: '#4A5568',\n    [vars.colors.textMuted]: '#6B7280',\n    [vars.colors.border]: '#E1E6EE',\n    [vars.colors.borderSubtle]: '#E7EBF2',\n    [vars.colors.borderStrong]: '#D2D9E4',\n    [vars.colors.borderLight]: '#E1E6EE',\n    [vars.colors.primaryLight]: 'rgba(165, 2, 70, 0.08)',\n    [vars.colors.brandLightGray]: '#F5F7FB',\n  },\n  backgroundColor: vars.colors.background,\n  color: vars.colors.text,\n  minHeight: '100vh',\n});\n"],"mappings":""}

package/lib/esm/atomic/atoms/badge/Badge.js

@@ -1,11 +1,11 @@
-import { badge as e } from "./badge.css.js";
-import { cx as t } from "../../../theme/tools.js";
+import { cx as e } from "../../../theme/tools.js";
+import { badge as t } from "./badge.css.js";
 import { jsx as n } from "react/jsx-runtime";
 //#region src/atomic/atoms/badge/Badge.tsx
 var r = ({ children: r, tone: i, className: a, loading: o = !1 }) => {
 	let s = "off";
 	return o && (s = "on"), /* @__PURE__ */ n("span", {
-		className: t(e({
+		className: e(t({
 			tone: i,
 			loading: s
 		}), a),

package/lib/esm/atomic/atoms/button/Button.js

@@ -2,8 +2,8 @@ import { cx as e } from "../../../theme/tools.js";
 import { ButtonLoadingSpinnerSvg as t } from "../../../icons/ButtonLoadingSpinnerSvg.js";
 import { useUiTranslation as n } from "../../../i18n/useUiTranslation.js";
 import { button as r, content as i, iconLeft as a, iconRight as o, loadingIndicator as s, spinnerIcon as c } from "./button.css.js";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 import "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/atomic/atoms/button/Button.tsx
 var f = (f) => {
 	let { t: p } = n(), { children: m, className: h, disabled: g, isLoading: _ = !1, loadingLabel: v, classes: y, leftIcon: b, rightIcon: x, size: S, variant: C, width: w, ref: T, ...E } = f, D = e(r({

package/lib/esm/atomic/atoms/checkbox/Checkbox.js

@@ -1,8 +1,8 @@
 import { checkboxContainer as e, checkboxInput as t, checkboxLabel as n, customCheckbox as r } from "./checkbox.css.js";
 import { Input as i } from "../input/Input.js";
 import { Label as a } from "../label/Label.js";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/atomic/atoms/checkbox/Checkbox.tsx
 var c = (c) => {
 	let { label: l, checked: u = !1, disabled: d = !1, onChange: f, ref: p, ...m } = c, h = null;

package/lib/esm/atomic/atoms/error_message/ErrorMessage.js

@@ -1,6 +1,6 @@
 import { errorMessage as e } from "./errorMessage.css.js";
-import { jsx as t } from "react/jsx-runtime";
 import "react";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/atomic/atoms/error_message/ErrorMessage.tsx
 var n = ({ children: n, id: r, ...i }) => n == null ? null : /* @__PURE__ */ t("div", {
 	id: r,

package/lib/esm/atomic/atoms/formatted-date/FormattedDate.js

@@ -1,6 +1,6 @@
 import { useUiTranslation as e } from "../../../i18n/useUiTranslation.js";
-import { jsx as t } from "react/jsx-runtime";
-import { useMemo as n } from "react";
+import { useMemo as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
 //#region src/atomic/atoms/formatted-date/FormattedDate.tsx
 var r = {
 	year: "numeric",
@@ -8,9 +8,9 @@ var r = {
 	day: "numeric"
 }, i = ({ value: i, fallback: a, options: o = r, locale: s, className: c }) => {
 	let { t: l } = e(), u = a ?? l("common.notAvailable");
-	return /* @__PURE__ */ t("span", {
+	return /* @__PURE__ */ n("span", {
 		className: c,
-		children: n(() => {
+		children: t(() => {
 			if (i == null) return u;
 			let e = new Date(String(i));
 			if (Number.isNaN(e.getTime())) return u;

package/lib/esm/atomic/atoms/label/Label.js

@@ -1,6 +1,6 @@
 import { label as e, requiredMark as t } from "./label.css.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/atomic/atoms/label/Label.tsx
 var i = (i) => {
 	let { children: a, variant: o, size: s, required: c, ...l } = i, { className: u, ...d } = l, f = null;

package/lib/esm/atomic/atoms/modal/Modal.js

@@ -1,13 +1,13 @@
 import { ModalCloseSvg as e } from "../../../icons/ModalCloseSvg.js";
 import { Overlay as t } from "../overlay/Overlay.js";
 import { closeButton as n, modal as r, modalContainer as i, modalContent as a, modalHeader as o, modalTitle as s } from "./modal.css.js";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-import { useEffect as d, useRef as f } from "react";
+import { useEffect as c, useRef as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 import { createPortal as p } from "react-dom";
 //#region src/atomic/atoms/modal/Modal.tsx
 var m = (m) => {
-	let { isOpen: h, onClose: g, title: _, children: v, footer: y } = m, b = f(null);
-	d(() => {
+	let { isOpen: h, onClose: g, title: _, children: v, footer: y } = m, b = l(null);
+	c(() => {
 		let e = (e) => {
 			e.key === "Escape" && h && g();
 		};
@@ -19,37 +19,37 @@ var m = (m) => {
 		e.stopPropagation();
 	};
 	if (!h) return null;
-	let S = /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(t, {
+	let S = /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(t, {
 		isVisible: h,
 		onClick: g
-	}), /* @__PURE__ */ l("div", {
+	}), /* @__PURE__ */ d("div", {
 		className: i,
-		children: /* @__PURE__ */ u("div", {
+		children: /* @__PURE__ */ f("div", {
 			className: r,
 			ref: b,
 			onClick: x,
 			children: [
-				/* @__PURE__ */ u("div", {
+				/* @__PURE__ */ f("div", {
 					className: o,
-					children: [/* @__PURE__ */ l("h2", {
+					children: [/* @__PURE__ */ d("h2", {
 						className: s,
 						children: _
-					}), /* @__PURE__ */ l("button", {
+					}), /* @__PURE__ */ d("button", {
 						className: n,
 						onClick: g,
 						"aria-label": "Close",
 						type: "button",
-						children: /* @__PURE__ */ l(e, {
+						children: /* @__PURE__ */ d(e, {
 							width: 20,
 							height: 20
 						})
 					})]
 				}),
-				/* @__PURE__ */ l("div", {
+				/* @__PURE__ */ d("div", {
 					className: a,
 					children: v
 				}),
-				y != null && /* @__PURE__ */ l("div", {
+				y != null && /* @__PURE__ */ d("div", {
 					className: "_1uzccdf8 txvbqbnvx txvbqboj6 txvbqbp5x txvbqblxo txvbqb9io txvbqbdo6 txvbqbaoo txvbqb12f txvbqb1qf txvbqb4ro txvbqb2c6",
 					children: y
 				})

package/lib/esm/atomic/molecules/breadcrumb_navigation/BreadcrumbMenuDropdown.js

@@ -1,7 +1,7 @@
 import { cx as e } from "../../../theme/tools.js";
-import { ChevronDownSvg as t } from "../../../icons/ChevronDownSvg.js";
-import { Dropdown as n } from "../dropdown/Dropdown.js";
-import { breadcrumbChevron as r, breadcrumbChevronButton as i, breadcrumbChevronOpen as a, breadcrumbLink as o, breadcrumbNameRow as s, breadcrumbSection as c, popoverPanel as l } from "./breadcrumbNavigation.css.js";
+import { breadcrumbChevron as t, breadcrumbChevronButton as n, breadcrumbChevronOpen as r, breadcrumbLink as i, breadcrumbNameRow as a, breadcrumbSection as o, popoverPanel as s } from "./breadcrumbNavigation.css.js";
+import { ChevronDownSvg as c } from "../../../icons/ChevronDownSvg.js";
+import { Dropdown as l } from "../dropdown/Dropdown.js";
 import { BreadcrumbMenuPopover as u } from "./BreadcrumbMenuPopover.js";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 import { Link as p } from "@plumile/router";
@@ -9,27 +9,27 @@ import { Link as p } from "@plumile/router";
 var m = ({ node: m, menu: h, ariaLabel: g, searchPlaceholder: _, searchAriaLabel: v, emptyLabel: y, emptyMatchesLabel: b }) => {
 	let x = h?.items ?? [];
 	return /* @__PURE__ */ d("div", {
-		className: c,
+		className: o,
 		children: /* @__PURE__ */ f("div", {
-			className: s,
+			className: a,
 			children: [/* @__PURE__ */ d(p, {
 				to: m.to,
-				className: o,
+				className: i,
 				children: m.name
-			}), /* @__PURE__ */ d(n, {
-				trigger: (n) => /* @__PURE__ */ d("button", {
+			}), /* @__PURE__ */ d(l, {
+				trigger: (i) => /* @__PURE__ */ d("button", {
 					type: "button",
-					className: i,
-					children: /* @__PURE__ */ d(t, {
+					className: n,
+					children: /* @__PURE__ */ d(c, {
 						width: 14,
 						height: 14,
-						className: e(r, { [a]: n })
+						className: e(t, { [r]: i })
 					})
 				}),
 				ariaLabel: g,
 				placement: "bottom-start",
 				matchTriggerWidth: !1,
-				contentClassName: l,
+				contentClassName: s,
 				children: /* @__PURE__ */ d(u, {
 					items: x,
 					selectedId: h?.selectedId,

package/lib/esm/atomic/molecules/breadcrumb_navigation/BreadcrumbMenuPopover.js

@@ -1,18 +1,18 @@
 import { cx as e } from "../../../theme/tools.js";
 import { Input as t } from "../../atoms/input/Input.js";
-import { useDropdown as n } from "../dropdown/Dropdown.js";
-import { popoverContent as r, popoverItem as i, popoverItemActive as a, popoverItemDescription as o, popoverItemName as s, popoverList as c, popoverSearch as l } from "./breadcrumbNavigation.css.js";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { useMemo as f, useState as p } from "react";
+import { popoverContent as n, popoverItem as r, popoverItemActive as i, popoverItemDescription as a, popoverItemName as o, popoverList as s, popoverSearch as c } from "./breadcrumbNavigation.css.js";
+import { useDropdown as l } from "../dropdown/Dropdown.js";
+import { useMemo as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 import { Link as m } from "@plumile/router";
 //#region src/atomic/molecules/breadcrumb_navigation/BreadcrumbMenuPopover.tsx
 var h = ({ items: h, selectedId: g, searchPlaceholder: _, searchAriaLabel: v, emptyLabel: y, emptyMatchesLabel: b }) => {
-	let { close: x } = n(), [S, C] = p(""), w = S.trim().toLowerCase(), T = f(() => w === "" ? h : h.filter((e) => e.name.toLowerCase().includes(w)), [h, w]), E;
-	return E = w === "" ? y : b, /* @__PURE__ */ d("div", {
-		className: r,
-		children: [/* @__PURE__ */ u("div", {
-			className: l,
-			children: /* @__PURE__ */ u(t, {
+	let { close: x } = l(), [S, C] = d(""), w = S.trim().toLowerCase(), T = u(() => w === "" ? h : h.filter((e) => e.name.toLowerCase().includes(w)), [h, w]), E;
+	return E = w === "" ? y : b, /* @__PURE__ */ p("div", {
+		className: n,
+		children: [/* @__PURE__ */ f("div", {
+			className: c,
+			children: /* @__PURE__ */ f(t, {
 				type: "search",
 				size: "small",
 				fullWidth: !0,
@@ -23,26 +23,26 @@ var h = ({ items: h, selectedId: g, searchPlaceholder: _, searchAriaLabel: v, em
 				},
 				"aria-label": v
 			})
-		}), /* @__PURE__ */ d("ul", {
-			className: c,
-			children: [T.length === 0 && /* @__PURE__ */ u("li", {
+		}), /* @__PURE__ */ p("ul", {
+			className: s,
+			children: [T.length === 0 && /* @__PURE__ */ f("li", {
 				className: "_1u1q111s txvbqbl9x txvbqb8x txvbqbv8r",
 				children: E
 			}), T.map((t) => {
-				let n = e(i, { [a]: t.id === g }), r = null;
-				return t.description != null && t.description !== "" && (r = /* @__PURE__ */ u("span", {
-					className: o,
+				let n = e(r, { [i]: t.id === g }), s = null;
+				return t.description != null && t.description !== "" && (s = /* @__PURE__ */ f("span", {
+					className: a,
 					children: t.description
-				})), /* @__PURE__ */ u("li", { children: /* @__PURE__ */ d(m, {
+				})), /* @__PURE__ */ f("li", { children: /* @__PURE__ */ p(m, {
 					to: t.to,
 					className: n,
 					onClick: () => {
 						x();
 					},
-					children: [/* @__PURE__ */ u("span", {
-						className: s,
+					children: [/* @__PURE__ */ f("span", {
+						className: o,
 						children: t.name
-					}), r]
+					}), s]
 				}) }, t.id);
 			})]
 		})]

package/lib/esm/atomic/molecules/breadcrumb_navigation/BreadcrumbNavigation.js

@@ -1,28 +1,28 @@
 import { cx as e } from "../../../theme/tools.js";
 import { useUiTranslation as t } from "../../../i18n/useUiTranslation.js";
-import { breadcrumb as n, breadcrumbItem as r, breadcrumbList as i, breadcrumbSeparator as a, homeIcon as o, homeLink as s } from "./breadcrumbNavigation.css.js";
-import { BreadcrumbMenuDropdown as c } from "./BreadcrumbMenuDropdown.js";
-import { SidebarHomeSvg as l } from "../../../icons/SidebarHomeSvg.js";
+import { SidebarHomeSvg as n } from "../../../icons/SidebarHomeSvg.js";
+import { breadcrumb as r, breadcrumbItem as i, breadcrumbList as a, breadcrumbSeparator as o, homeIcon as s, homeLink as c } from "./breadcrumbNavigation.css.js";
+import { BreadcrumbMenuDropdown as l } from "./BreadcrumbMenuDropdown.js";
 import { jsx as u } from "react/jsx-runtime";
 import { Link as d } from "@plumile/router";
 //#region src/atomic/molecules/breadcrumb_navigation/BreadcrumbNavigation.tsx
 var f = (f) => {
 	let { organization: p, group: m, project: h, groupMenu: g, projectMenu: _, className: v } = f, { t: y } = t(), b = y("navigation.breadcrumb.empty.matches"), x = y("navigation.breadcrumb.search.groups"), S = y("navigation.breadcrumb.empty.groups"), C = y("navigation.breadcrumb.menu.group"), w = y("navigation.breadcrumb.search.projects"), T = y("navigation.breadcrumb.empty.projects"), E = y("navigation.breadcrumb.menu.project"), D = [];
 	D.push(/* @__PURE__ */ u("li", {
-		className: r,
+		className: i,
 		children: /* @__PURE__ */ u(d, {
 			to: p.to,
-			className: s,
+			className: c,
 			"aria-label": `Organization: ${p.name}`,
-			children: /* @__PURE__ */ u(l, {
+			children: /* @__PURE__ */ u(n, {
 				width: 16,
 				height: 16,
-				className: o
+				className: s
 			})
 		})
 	}, "home")), m != null && D.push(/* @__PURE__ */ u("li", {
-		className: r,
-		children: /* @__PURE__ */ u(c, {
+		className: i,
+		children: /* @__PURE__ */ u(l, {
 			node: m,
 			menu: g,
 			ariaLabel: C,
@@ -32,8 +32,8 @@ var f = (f) => {
 			emptyMatchesLabel: b
 		})
 	}, "group")), h != null && D.push(/* @__PURE__ */ u("li", {
-		className: r,
-		children: /* @__PURE__ */ u(c, {
+		className: i,
+		children: /* @__PURE__ */ u(l, {
 			node: h,
 			menu: _,
 			ariaLabel: E,
@@ -44,15 +44,15 @@ var f = (f) => {
 		})
 	}, "project"));
 	let O = D.flatMap((e, t) => t === 0 ? [e] : [/* @__PURE__ */ u("li", {
-		className: a,
+		className: o,
 		"aria-hidden": "true",
 		children: "/"
 	}, `separator-${t}`), e]);
 	return /* @__PURE__ */ u("nav", {
-		className: e(n, v),
+		className: e(r, v),
 		"aria-label": "Breadcrumb",
 		children: /* @__PURE__ */ u("ol", {
-			className: i,
+			className: a,
 			children: O
 		})
 	});

package/lib/esm/atomic/molecules/card/Card.js

@@ -1,19 +1,19 @@
 import { cx as e } from "../../../theme/tools.js";
 import { card as t, content as n, header as r, title as i } from "./Card.css.js";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useMemo as s } from "react";
+import { useMemo as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/atomic/molecules/card/Card.tsx
 var c = (c) => {
-	let { title: l, children: u, headerActions: d, className: f, contentClassName: p } = c, m = s(() => l == null ? null : /* @__PURE__ */ o("div", {
+	let { title: l, children: u, headerActions: d, className: f, contentClassName: p } = c, m = a(() => l == null ? null : /* @__PURE__ */ s("div", {
 		className: r,
-		children: [/* @__PURE__ */ a("span", {
+		children: [/* @__PURE__ */ o("span", {
 			className: i,
 			children: l
 		}), d]
 	}), [d, l]);
-	return /* @__PURE__ */ o("div", {
+	return /* @__PURE__ */ s("div", {
 		className: e(t, f),
-		children: [m, /* @__PURE__ */ a("div", {
+		children: [m, /* @__PURE__ */ o("div", {
 			className: e(n, p),
 			children: u
 		})]

package/lib/esm/atomic/molecules/checkbox_field/CheckboxField.js

@@ -2,8 +2,8 @@ import { Label as e } from "../../atoms/label/Label.js";
 import { Checkbox as t } from "../../atoms/checkbox/Checkbox.js";
 import { ErrorMessage as n } from "../../atoms/error_message/ErrorMessage.js";
 import { checkboxField as r, checkboxWrapper as i, helperText as a, labelWrapper as o } from "./checkboxField.css.js";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/atomic/molecules/checkbox_field/CheckboxField.tsx
 var l = (l) => {
 	let { id: u, label: d, error: f, helperText: p, ...m } = l, h = `checkbox-${Math.random().toString(36).substring(2, 9)}`;