@plumile/ui 0.1.68 → 0.1.70

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

@@ -4,20 +4,20 @@ import { Button as n } from "../../atoms/button/Button.js";
 import { ModalCloseSvg as r } from "../../../icons/ModalCloseSvg.js";
 import { actions as i, closeButton as a, header as o, kindRecipe as s, message as c, progressBar as l, progressTrack as u, title as d, toast as f, viewport as p } from "./toast.css.js";
 import { INFO_TOAST_DURATION_MS as m } from "./constants.js";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { useMemo as _ } from "react";
+import { useMemo as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/atomic/molecules/toast/ToastViewport.tsx
 var v = ({ toasts: v, onDismiss: y, dismissLabel: b, className: x }) => {
-	let { t: S } = t(), C = b ?? S("toast.dismissAriaLabel"), w = _(() => v.map((t) => {
-		let p = t.kind ?? "info", _ = t.actions ?? [], v = null;
-		t.message != null && (v = /* @__PURE__ */ h("div", {
+	let { t: S } = t(), C = b ?? S("toast.dismissAriaLabel"), w = h(() => v.map((t) => {
+		let p = t.kind ?? "info", h = t.actions ?? [], v = null;
+		t.message != null && (v = /* @__PURE__ */ g("div", {
 			className: c,
 			children: t.message
 		}));
 		let b = null;
-		_.length > 0 && (b = /* @__PURE__ */ h("div", {
+		h.length > 0 && (b = /* @__PURE__ */ g("div", {
 			className: i,
-			children: _.map((e) => /* @__PURE__ */ h(n, {
+			children: h.map((e) => /* @__PURE__ */ g(n, {
 				type: "button",
 				size: "small",
 				variant: "secondary",
@@ -26,29 +26,29 @@ var v = ({ toasts: v, onDismiss: y, dismissLabel: b, className: x }) => {
 			}, e.id))
 		}));
 		let x = null;
-		return p === "info" && (x = /* @__PURE__ */ h("div", {
+		return p === "info" && (x = /* @__PURE__ */ g("div", {
 			className: u,
 			"aria-hidden": "true",
-			children: /* @__PURE__ */ h("div", {
+			children: /* @__PURE__ */ g("div", {
 				className: l,
 				style: { animationDuration: `${m}ms` }
 			})
-		})), /* @__PURE__ */ g("div", {
+		})), /* @__PURE__ */ _("div", {
 			className: e(f, s({ kind: p })),
 			children: [
-				/* @__PURE__ */ g("div", {
+				/* @__PURE__ */ _("div", {
 					className: o,
-					children: [/* @__PURE__ */ h("div", {
+					children: [/* @__PURE__ */ g("div", {
 						className: d,
 						children: t.title
-					}), /* @__PURE__ */ h("button", {
+					}), /* @__PURE__ */ g("button", {
 						type: "button",
 						className: a,
 						"aria-label": C,
 						onClick: () => {
 							y(t.id);
 						},
-						children: /* @__PURE__ */ h(r, {
+						children: /* @__PURE__ */ g(r, {
 							width: 18,
 							height: 18,
 							"aria-hidden": "true"
@@ -65,7 +65,7 @@ var v = ({ toasts: v, onDismiss: y, dismissLabel: b, className: x }) => {
 		C,
 		v
 	]);
-	return v.length === 0 ? null : /* @__PURE__ */ h("div", {
+	return v.length === 0 ? null : /* @__PURE__ */ g("div", {
 		className: e(p, x),
 		children: w
 	});

package/lib/esm/atomic/organisms/login_form/LoginForm.js

@@ -4,8 +4,8 @@ import { Button as n } from "../../atoms/button/Button.js";
 import { FormError as r } from "../../molecules/form_error/FormError.js";
 import { FormField as i } from "../../molecules/form_field/FormField.js";
 import { useLoginForm as a } from "./useLoginForm.js";
-import "../../../index.js";
 import { form as o } from "./loginForm.css.js";
+import "../../../index.js";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/atomic/organisms/login_form/LoginForm.tsx
 var l = (l) => {

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

@@ -3,28 +3,28 @@ 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 { useCallback as O, useMemo as k, useState as A } from "react";
+import { Fragment as j, jsx as M, jsxs as N } from "react/jsx-runtime";
 import { 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", {
+	return n && (i = "expanded"), /* @__PURE__ */ M("div", {
 		id: t,
 		"aria-hidden": !n,
 		className: e(p, m({ state: i })),
-		children: /* @__PURE__ */ k("div", {
+		children: /* @__PURE__ */ M("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) => {
+	let { t: z } = t(), [B, V] = A(!1), [H, U] = A({}), W = m != null, G = m ?? B, { pathname: K } = F(), q = (e, t) => t === !0 ? K === e : K === e ? !0 : K.startsWith(`${e}/`), J = O((e, t) => {
 		U((n) => ({
 			...n,
 			[e]: t
 		}));
-	}, []), Y = j(() => {
+	}, []), Y = O(() => {
 		let e = !G;
 		W || V(e), L?.(e);
 	}, [
@@ -33,22 +33,22 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 		L
 	]), X;
 	G || (X = p ?? void 0);
-	let Z = M(() => {
+	let Z = k(() => {
 		if (!R) return null;
 		let t = r, n = z("navigation.sidebar.actions.collapseAriaLabel");
 		G && (t = i, n = z("navigation.sidebar.actions.expandAriaLabel"));
 		let a = "expanded";
 		G && (a = "collapsed");
 		let o = null;
-		return G || (o = /* @__PURE__ */ k("span", {
+		return G || (o = /* @__PURE__ */ M("span", {
 			className: l,
 			children: z("navigation.sidebar.actions.collapse")
-		})), /* @__PURE__ */ A("button", {
+		})), /* @__PURE__ */ N("button", {
 			type: "button",
 			onClick: Y,
 			className: e(c, u({ state: a })),
 			"aria-label": n,
-			children: [/* @__PURE__ */ k(t, { size: 20 }), o]
+			children: [/* @__PURE__ */ M(t, { size: 20 }), o]
 		});
 	}, [
 		Y,
@@ -56,7 +56,7 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 		R,
 		z
 	]);
-	return /* @__PURE__ */ k(n, {
+	return /* @__PURE__ */ M(n, {
 		headerSlot: X,
 		footerSlot: Z,
 		isCollapsed: G,
@@ -66,45 +66,45 @@ var I = ({ id: t, isExpanded: n, children: 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;
+			let p = d != null, m = t.hoverIcon !== void 0 && t.hoverIcon !== null, O = t.trailingIcon !== void 0 && t.trailingIcon !== null, k = t.trailingHoverIcon !== void 0 && t.trailingHoverIcon !== null, A = !G && !p && (O || k), F;
 			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", {
+			G || (B = /* @__PURE__ */ M("span", {
 				className: b,
 				children: t.label
 			}));
 			let V = null;
-			m && (V = /* @__PURE__ */ k("span", {
+			m && (V = /* @__PURE__ */ M("span", {
 				className: _,
 				children: t.hoverIcon
 			}));
-			let U = /* @__PURE__ */ A("span", {
+			let U = /* @__PURE__ */ N("span", {
 				className: v,
-				children: [/* @__PURE__ */ k("span", {
+				children: [/* @__PURE__ */ M("span", {
 					className: e(h, { [g]: m }),
 					children: t.icon
 				}), V]
 			}), W = null;
-			if (N) {
+			if (A) {
 				let n = null;
-				j && (n = /* @__PURE__ */ k("span", {
-					className: e(h, { [g]: M }),
+				O && (n = /* @__PURE__ */ M("span", {
+					className: e(h, { [g]: k }),
 					children: t.trailingIcon
 				}));
 				let r = null;
-				M && (r = /* @__PURE__ */ k("span", {
+				k && (r = /* @__PURE__ */ M("span", {
 					className: _,
 					children: t.trailingHoverIcon
-				})), W = /* @__PURE__ */ A("span", {
+				})), W = /* @__PURE__ */ N("span", {
 					className: te,
 					children: [n, r]
 				});
 			}
-			let K = /* @__PURE__ */ A(O, { children: [
+			let K = /* @__PURE__ */ N(j, { children: [
 				U,
 				B,
 				W
@@ -117,7 +117,7 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 				q(t.to, t.exact) && (n = "active"), X = e(S({ state: n }), R, z);
 			}
 			let Z;
-			Z = r ? /* @__PURE__ */ k("button", {
+			Z = r ? /* @__PURE__ */ M("button", {
 				type: "button",
 				className: X,
 				"aria-expanded": i,
@@ -125,7 +125,7 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 				"aria-label": F,
 				onClick: Y,
 				children: K
-			}) : /* @__PURE__ */ k(P, {
+			}) : /* @__PURE__ */ M(P, {
 				to: t.to,
 				className: X,
 				exact: t.exact,
@@ -137,17 +137,17 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 				let e = (e) => {
 					e.preventDefault(), e.stopPropagation(), d.onClick();
 				}, t = d.hoverIcon, n = t != null, r = null;
-				n && (r = /* @__PURE__ */ k("span", {
+				n && (r = /* @__PURE__ */ M("span", {
 					className: E,
 					children: t
-				})), Q = /* @__PURE__ */ k("button", {
+				})), Q = /* @__PURE__ */ M("button", {
 					type: "button",
 					"aria-label": d.label,
 					onClick: e,
 					className: w,
-					children: /* @__PURE__ */ A("span", {
+					children: /* @__PURE__ */ N("span", {
 						className: D,
-						children: [/* @__PURE__ */ k("span", {
+						children: [/* @__PURE__ */ M("span", {
 							className: T,
 							children: d.icon
 						}), r]
@@ -155,30 +155,30 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 				});
 			}
 			let $ = null;
-			return u && l != null && ($ = /* @__PURE__ */ k(I, {
+			return u && l != null && ($ = /* @__PURE__ */ M(I, {
 				id: l,
 				isExpanded: i,
 				children: n.map((e) => {
 					let t = null;
-					e.icon != null && (t = /* @__PURE__ */ k("span", {
+					e.icon != null && (t = /* @__PURE__ */ M("span", {
 						className: a,
 						children: e.icon
 					}));
 					let n = "default";
-					return q(e.to) && (n = "active"), /* @__PURE__ */ k("div", {
+					return q(e.to) && (n = "active"), /* @__PURE__ */ M("div", {
 						className: f,
-						children: /* @__PURE__ */ A(P, {
+						children: /* @__PURE__ */ N(P, {
 							to: e.to,
 							className: s({ state: n }),
 							"aria-label": e.label,
-							children: [t, /* @__PURE__ */ k("span", {
+							children: [t, /* @__PURE__ */ M("span", {
 								className: o,
 								children: e.label
 							})]
 						})
 					}, e.key);
 				})
-			})), /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ A("div", {
+			})), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ N("div", {
 				className: y,
 				children: [Z, Q]
 			}), $] }, t.key);

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

@@ -1,7 +1,7 @@
-import { ChevronDownSvg as e } from "../../../icons/ChevronDownSvg.js";
-import { SidebarHomeSvg as t } from "../../../icons/SidebarHomeSvg.js";
-import { ChevronLeftSvg as n } from "../../../icons/ChevronLeftSvg.js";
-import { ChevronRightSvg as r } from "../../../icons/ChevronRightSvg.js";
+import { ChevronLeftSvg as e } from "../../../icons/ChevronLeftSvg.js";
+import { ChevronRightSvg as t } from "../../../icons/ChevronRightSvg.js";
+import { SidebarHomeSvg as n } from "../../../icons/SidebarHomeSvg.js";
+import { ChevronDownSvg as r } from "../../../icons/ChevronDownSvg.js";
 import { GlobeSvg as i } from "../../../icons/GlobeSvg.js";
 import { ProjectsFolderSvg as a } from "../../../icons/ProjectsFolderSvg.js";
 import { SidebarInitiativesSvg as o } from "../../../icons/SidebarInitiativesSvg.js";
@@ -12,10 +12,10 @@ import { SidebarTasksSvg as u } from "../../../icons/SidebarTasksSvg.js";
 import { SidebarTeamSvg as d } from "../../../icons/SidebarTeamSvg.js";
 import { jsx as f } from "react/jsx-runtime";
 //#region src/atomic/organisms/sidebar/icons.tsx
-var p = ({ size: e = 24, className: n }) => /* @__PURE__ */ f(t, {
+var p = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(n, {
 	width: e,
 	height: e,
-	className: n
+	className: t
 }), m = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(u, {
 	width: e,
 	height: e,
@@ -40,18 +40,18 @@ var p = ({ size: e = 24, className: n }) => /* @__PURE__ */ f(t, {
 	width: e,
 	height: e,
 	className: t
-}), b = ({ size: t = 24, className: n }) => /* @__PURE__ */ f(e, {
-	width: t,
-	height: t,
-	className: n
-}), x = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(r, {
+}), b = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(r, {
 	width: e,
 	height: e,
 	className: t
-}), S = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(n, {
+}), x = ({ size: e = 24, className: n }) => /* @__PURE__ */ f(t, {
 	width: e,
 	height: e,
-	className: t
+	className: n
+}), S = ({ size: t = 24, className: n }) => /* @__PURE__ */ f(e, {
+	width: t,
+	height: t,
+	className: n
 }), C = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(c, {
 	width: e,
 	height: e,

package/lib/esm/atomic/templates/auth_layout/AuthLayout.js

@@ -1,6 +1,6 @@
 import { formCardStyle as e, headerStyle as t, mainStyle as n, subtitleStyle as r, titleStyle as i } from "./authLayout.css.js";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/atomic/templates/auth_layout/AuthLayout.tsx
 var s = (s) => {
 	let { title: c, subtitle: l, children: u } = s, d = null;

package/lib/esm/atomic/templates/detail-page/DetailPage.js

@@ -0,0 +1,49 @@
+import { cx as e } from "../../../theme/tools.js";
+import { BackofficePageHeader as t } from "../../../backoffice/molecules/backoffice_page_header/BackofficePageHeader.js";
+import { actions as n, container as r, content as i, contentSection as a } from "./detailPage.css.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/atomic/templates/detail-page/DetailPage.tsx
+var c = (e, t) => {
+	let r = t ?? [], i = r.length > 0, a = e != null;
+	return !a && !i ? null : /* @__PURE__ */ s("div", {
+		className: n,
+		children: [i && /* @__PURE__ */ o("div", {
+			className: "_8ct8xq3 txvbqb9io txvbqbco txvbqbao6 txvbqbajx",
+			children: r.map((e, t) => /* @__PURE__ */ o("div", {
+				className: "_8ct8xq4 txvbqb9io txvbqbco",
+				children: e
+			}, t))
+		}), a && /* @__PURE__ */ o("div", {
+			className: "_8ct8xq5 txvbqb9io txvbqbco",
+			children: e
+		})]
+	});
+}, l = ({ title: n, subtitle: a, primaryAction: l, secondaryActions: u, headerSupplement: d, children: f, className: p, contentClassName: m }) => /* @__PURE__ */ s("div", {
+	className: e(r, p),
+	children: [
+		/* @__PURE__ */ o(t, {
+			title: n,
+			subtitle: a,
+			actions: c(l, u)
+		}),
+		d != null && /* @__PURE__ */ o("div", {
+			className: "_8ct8xq1 txvbqb9io txvbqbai6 txvbqbaoo",
+			children: d
+		}),
+		/* @__PURE__ */ o("div", {
+			className: e(i, m),
+			children: f
+		})
+	]
+}), u = ({ children: t, className: n, withBaseStyles: r = !0, ...i }) => {
+	let s;
+	return r ? s = e(a, n) : n != null && (s = n), /* @__PURE__ */ o("div", {
+		...i,
+		className: s,
+		children: t
+	});
+};
+//#endregion
+export { l as DetailPage, l as default, u as DetailPageContent };
+
+//# sourceMappingURL=DetailPage.js.map

package/lib/esm/atomic/templates/detail-page/DetailPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailPage.js","names":[],"sources":["../../../../../src/atomic/templates/detail-page/DetailPage.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, type JSX, type ReactNode } from 'react';\n\nimport { BackofficePageHeader } from '../../../backoffice/molecules/backoffice_page_header/BackofficePageHeader.js';\nimport { cx } from '../../../theme/tools.js';\nimport * as styles from './detailPage.css.js';\n\nexport type DetailPageProps = {\n  title: string;\n  subtitle?: ReactNode;\n  primaryAction?: ReactNode;\n  secondaryActions?: readonly ReactNode[];\n  headerSupplement?: ReactNode;\n  children: ReactNode;\n  className?: string;\n  contentClassName?: string;\n};\n\nexport type DetailPageContentProps = ComponentPropsWithoutRef<'div'> & {\n  children: ReactNode;\n  withBaseStyles?: boolean;\n};\n\nconst renderActions = (\n  primaryAction?: ReactNode,\n  secondaryActions?: readonly ReactNode[],\n): ReactNode | null => {\n  const secondaryList = secondaryActions ?? [];\n  const hasSecondary = secondaryList.length > 0;\n  const hasPrimary = primaryAction != null;\n\n  if (!hasPrimary && !hasSecondary) {\n    return null;\n  }\n\n  return (\n    <div className={styles.actions}>\n      {hasSecondary && (\n        <div className={styles.secondaryActions}>\n          {secondaryList.map((action, index) => {\n            return (\n              <div key={index} className={styles.actionItem}>\n                {action}\n              </div>\n            );\n          })}\n        </div>\n      )}\n      {hasPrimary && (\n        <div className={styles.primaryAction}>{primaryAction}</div>\n      )}\n    </div>\n  );\n};\n\nexport const DetailPage = ({\n  title,\n  subtitle,\n  primaryAction,\n  secondaryActions,\n  headerSupplement,\n  children,\n  className,\n  contentClassName,\n}: DetailPageProps): JSX.Element => {\n  return (\n    <div className={cx(styles.container, className)}>\n      <BackofficePageHeader\n        title={title}\n        subtitle={subtitle}\n        actions={renderActions(primaryAction, secondaryActions)}\n      />\n      {headerSupplement != null && (\n        <div className={styles.headerSupplement}>{headerSupplement}</div>\n      )}\n      <div className={cx(styles.content, contentClassName)}>{children}</div>\n    </div>\n  );\n};\n\nexport const DetailPageContent = ({\n  children,\n  className,\n  withBaseStyles = true,\n  ...rest\n}: DetailPageContentProps): JSX.Element => {\n  let contentClassName: string | undefined;\n  if (withBaseStyles) {\n    contentClassName = cx(styles.contentSection, className);\n  } else if (className != null) {\n    contentClassName = className;\n  }\n\n  return (\n    <div {...rest} className={contentClassName}>\n      {children}\n    </div>\n  );\n};\n\nexport default DetailPage;\n"],"mappings":";;;;;AAsBA,IAAM,KACJ,GACA,MACqB;CACrB,IAAM,IAAgB,KAAoB,EAAE,EACtC,IAAe,EAAc,SAAS,GACtC,IAAa,KAAiB;AAMpC,QAJI,CAAC,KAAc,CAAC,IACX,OAIP,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACG,KACC,kBAAC,OAAD;GAAK,WAAW;aACb,EAAc,KAAK,GAAQ,MAExB,kBAAC,OAAD;IAAiB,WAAW;cACzB;IACG,EAFI,EAEJ,CAER;GACE,CAAA,EAEP,KACC,kBAAC,OAAD;GAAK,WAAW;aAAuB;GAAoB,CAAA,CAEzD;;GAIG,KAAc,EACzB,UACA,aACA,kBACA,qBACA,kBAAA,GACA,aACA,cACA,0BAGE,kBAAC,OAAD;CAAK,WAAW,EAAG,GAAkB,EAAU;WAA/C;EACE,kBAAC,GAAD;GACS;GACG;GACV,SAAS,EAAc,GAAe,EAAiB;GACvD,CAAA;EACD,KAAoB,QACnB,kBAAC,OAAD;GAAK,WAAW;aAA0B;GAAuB,CAAA;EAEnE,kBAAC,OAAD;GAAK,WAAW,EAAG,GAAgB,EAAiB;GAAG;GAAe,CAAA;EAClE;IAIG,KAAqB,EAChC,aACA,cACA,oBAAiB,IACjB,GAAG,QACsC;CACzC,IAAI;AAOJ,QANI,IACF,IAAmB,EAAG,GAAuB,EAAU,GAC9C,KAAa,SACtB,IAAmB,IAInB,kBAAC,OAAD;EAAK,GAAI;EAAM,WAAW;EACvB;EACG,CAAA"}

package/lib/esm/atomic/templates/detail-page/detailPage.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                          */
+//#region src/atomic/templates/detail-page/detailPage.css.ts
+var e = "_8ct8xq0 txvbqb9io txvbqbai6 txvbqbap6 txvbqbnvf txvbqbp5x", t = "_8ct8xq1 txvbqb9io txvbqbai6 txvbqbaoo", n = "_8ct8xq2 txvbqb9io txvbqbco txvbqbdo6 txvbqbao6 txvbqbajx", r = "_8ct8xq3 txvbqb9io txvbqbco txvbqbao6 txvbqbajx", i = "_8ct8xq4 txvbqb9io txvbqbco", a = "_8ct8xq5 txvbqb9io txvbqbco", o = "_8ct8xq6 txvbqb9io txvbqbai6 txvbqbap6", s = "_8ct8xq7 txvbqb9io txvbqbai6 txvbqbaoo";
+//#endregion
+export { i as actionItem, n as actions, e as container, o as content, s as contentSection, t as headerSupplement, a as primaryAction, r as secondaryActions };
+
+//# sourceMappingURL=detailPage.css.js.map

package/lib/esm/atomic/templates/detail-page/detailPage.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"detailPage.css.js","names":[],"sources":["../../../../../src/atomic/templates/detail-page/detailPage.css.ts"],"sourcesContent":["import { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 6,\n  paddingLeft: 4,\n  paddingTop: 4,\n});\n\nexport const headerSupplement = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n\nexport const actions = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  gap: 2,\n  flexWrap: 'wrap',\n});\n\nexport const secondaryActions = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  flexWrap: 'wrap',\n});\n\nexport const actionItem = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nexport const primaryAction = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nexport const content = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 6,\n});\n\nexport const contentSection = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n"],"mappings":""}

package/lib/esm/atomic/templates/page-container/PageContainer.js

@@ -0,0 +1,36 @@
+import { cx as e } from "../../../theme/tools.js";
+import { BackofficePageHeader as t } from "../../../backoffice/molecules/backoffice_page_header/BackofficePageHeader.js";
+import { actions as n, container as r, content as i } from "./pageContainer.css.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/atomic/templates/page-container/PageContainer.tsx
+var s = ({ title: s, subtitle: c, primaryAction: l, secondaryActions: u, leftAction: d, children: f, className: p, contentClassName: m }) => {
+	let h = u ?? [], g = l != null, _ = h.length > 0, v = null;
+	return (g || _) && (v = /* @__PURE__ */ o("div", {
+		className: n,
+		children: [_ && /* @__PURE__ */ a("div", {
+			className: "_1u2lre42 txvbqb9io txvbqbco txvbqbao6 txvbqbajx",
+			children: h.map((e, t) => /* @__PURE__ */ a("div", {
+				className: "_1u2lre43 txvbqb9io txvbqbco",
+				children: e
+			}, t))
+		}), g && /* @__PURE__ */ a("div", {
+			className: "_1u2lre44 txvbqb9io txvbqbco",
+			children: l
+		})]
+	})), /* @__PURE__ */ o("div", {
+		className: e(r, p),
+		children: [/* @__PURE__ */ a(t, {
+			title: s,
+			subtitle: c,
+			actions: v,
+			leftActions: d
+		}), /* @__PURE__ */ a("div", {
+			className: e(i, m),
+			children: f
+		})]
+	});
+};
+//#endregion
+export { s as PageContainer, s as default };
+
+//# sourceMappingURL=PageContainer.js.map

package/lib/esm/atomic/templates/page-container/PageContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageContainer.js","names":[],"sources":["../../../../../src/atomic/templates/page-container/PageContainer.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { BackofficePageHeader } from '../../../backoffice/molecules/backoffice_page_header/BackofficePageHeader.js';\nimport { cx } from '../../../theme/tools.js';\nimport * as styles from './pageContainer.css.js';\n\nexport type PageContainerProps = {\n  title: string;\n  subtitle?: ReactNode;\n  primaryAction?: ReactNode;\n  secondaryActions?: readonly ReactNode[];\n  leftAction?: ReactNode;\n  children: ReactNode;\n  className?: string;\n  contentClassName?: string;\n};\n\nexport const PageContainer = ({\n  title,\n  subtitle,\n  primaryAction,\n  secondaryActions,\n  leftAction,\n  children,\n  className,\n  contentClassName,\n}: PageContainerProps): JSX.Element => {\n  const secondary = secondaryActions ?? [];\n  const hasPrimaryAction = primaryAction != null;\n  const hasSecondaryActions = secondary.length > 0;\n\n  let actions: ReactNode | null = null;\n  if (hasPrimaryAction || hasSecondaryActions) {\n    actions = (\n      <div className={styles.actions}>\n        {hasSecondaryActions && (\n          <div className={styles.secondaryActions}>\n            {secondary.map((action, index) => {\n              return (\n                <div key={index} className={styles.actionItem}>\n                  {action}\n                </div>\n              );\n            })}\n          </div>\n        )}\n        {hasPrimaryAction && (\n          <div className={styles.primaryAction}>{primaryAction}</div>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(styles.container, className)}>\n      <BackofficePageHeader\n        title={title}\n        subtitle={subtitle}\n        actions={actions}\n        leftActions={leftAction}\n      />\n      <div className={cx(styles.content, contentClassName)}>{children}</div>\n    </div>\n  );\n};\n\nexport default PageContainer;\n"],"mappings":";;;;;AAiBA,IAAa,KAAiB,EAC5B,UACA,aACA,eAAA,GACA,kBAAA,GACA,eACA,aACA,cACA,0BACqC;CACrC,IAAM,IAAY,KAAoB,EAAE,EAClC,IAAmB,KAAiB,MACpC,IAAsB,EAAU,SAAS,GAE3C,IAA4B;AAsBhC,SArBI,KAAoB,OACtB,IACE,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACG,KACC,kBAAC,OAAD;GAAK,WAAW;aACb,EAAU,KAAK,GAAQ,MAEpB,kBAAC,OAAD;IAAiB,WAAW;cACzB;IACG,EAFI,EAEJ,CAER;GACE,CAAA,EAEP,KACC,kBAAC,OAAD;GAAK,WAAW;aAAuB;GAAoB,CAAA,CAEzD;MAKR,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAkB,EAAU;YAA/C,CACE,kBAAC,GAAD;GACS;GACG;GACD,SAAA;GACT,aAAa;GACb,CAAA,EACF,kBAAC,OAAD;GAAK,WAAW,EAAG,GAAgB,EAAiB;GAAG;GAAe,CAAA,CAClE"}

package/lib/esm/atomic/templates/page-container/pageContainer.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                             */
+//#region src/atomic/templates/page-container/pageContainer.css.ts
+var e = "_1u2lre40 txvbqbnvo txvbqboix txvbqb9io txvbqbai6 txvbqbap6 txvbqbcf txvbqbu6f txvbqbef txvbqbp66 txvbqb9mx txvbqbjg6", t = "_1u2lre41 txvbqb9io txvbqbco txvbqbdo6 txvbqbao6 txvbqbajx", n = "_1u2lre42 txvbqb9io txvbqbco txvbqbao6 txvbqbajx", r = "_1u2lre43 txvbqb9io txvbqbco", i = "_1u2lre44 txvbqb9io txvbqbco", a = "_1u2lre45 txvbqbu6f txvbqb9io txvbqbcf txvbqbai6";
+//#endregion
+export { r as actionItem, t as actions, e as container, a as content, i as primaryAction, n as secondaryActions };
+
+//# sourceMappingURL=pageContainer.css.js.map

package/lib/esm/atomic/templates/page-container/pageContainer.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pageContainer.css.js","names":[],"sources":["../../../../../src/atomic/templates/page-container/pageContainer.css.ts"],"sourcesContent":["import { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 6,\n  alignItems: 'flex-start',\n  width: 'full',\n  alignSelf: 'stretch',\n  paddingTop: 5,\n  paddingX: 5,\n  flex: 1,\n  minHeight: 0,\n});\n\nexport const actions = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  gap: 2,\n  flexWrap: 'wrap',\n});\n\nexport const secondaryActions = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  flexWrap: 'wrap',\n});\n\nexport const actionItem = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nexport const primaryAction = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nexport const content = sprinkles({\n  width: 'full',\n  display: 'flex',\n  alignItems: 'flex-start',\n  flexDirection: 'column',\n});\n"],"mappings":""}

package/lib/esm/backoffice/atoms/copyable_text/CopyableText.js

@@ -2,8 +2,8 @@ import { cx as e } from "../../../theme/tools.js";
 import { Button as t } from "../../../atomic/atoms/button/Button.js";
 import { feedback as n, root as r, value as i, valueNoTruncate as a } from "./copyableText.css.js";
 import "../../../index.js";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+import { useCallback as o, useEffect as s, useMemo as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/backoffice/atoms/copyable_text/CopyableText.tsx
 var p = (e) => {
 	try {
@@ -15,16 +15,16 @@ var p = (e) => {
 		return !1;
 	}
 }, m = ({ value: m, copyValue: h, className: g, truncate: _ = !0, copyLabel: v = "Copy", copiedLabel: y = "Copied" }) => {
-	let [b, x] = f(!1), S = d(null), C = h ?? m, w = u(() => {
+	let [b, x] = u(!1), S = l(null), C = h ?? m, w = c(() => {
 		let t = null;
 		return _ || (t = a), e(i, t, g);
-	}, [g, _]), T = c(() => {
+	}, [g, _]), T = o(() => {
 		S.current != null && (window.clearTimeout(S.current), S.current = null);
 	}, []);
-	l(() => () => {
+	s(() => () => {
 		T();
 	}, [T]);
-	let E = c(async () => {
+	let E = o(async () => {
 		T();
 		let e = !1;
 		try {
@@ -41,20 +41,20 @@ var p = (e) => {
 	}, [T, C]), D = () => {
 		E().catch(() => {});
 	}, O = null;
-	return b && (O = /* @__PURE__ */ o("span", {
+	return b && (O = /* @__PURE__ */ d("span", {
 		className: n,
 		role: "status",
 		"aria-live": "polite",
 		children: y
-	})), /* @__PURE__ */ s("span", {
+	})), /* @__PURE__ */ f("span", {
 		className: r,
 		children: [
-			/* @__PURE__ */ o("span", {
+			/* @__PURE__ */ d("span", {
 				className: w,
 				title: m,
 				children: m
 			}),
-			/* @__PURE__ */ o(t, {
+			/* @__PURE__ */ d(t, {
 				type: "button",
 				variant: "secondary",
 				size: "small",

package/lib/esm/backoffice/atoms/shortcut_hint/ShortcutHint.js

@@ -1,17 +1,17 @@
-import { cx as e } from "../../../theme/tools.js";
-import { container as t, key as n } from "./shortcutHint.css.js";
+import { container as e, key as t } from "./shortcutHint.css.js";
+import { cx as n } from "../../../theme/tools.js";
 import "../../../index.js";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/backoffice/atoms/shortcut_hint/ShortcutHint.tsx
 var i = ({ keys: i, className: a }) => {
 	let o = [];
 	return o = typeof i == "string" ? i.split(" ") : [...i], /* @__PURE__ */ r("span", {
-		className: e(t, a),
+		className: n(e, a),
 		"aria-hidden": "true",
-		children: o.map((e, t) => /* @__PURE__ */ r("kbd", {
-			className: n,
+		children: o.map((e, n) => /* @__PURE__ */ r("kbd", {
+			className: t,
 			children: e
-		}, `${e}-${t}`))
+		}, `${e}-${n}`))
 	});
 };
 //#endregion

package/lib/esm/backoffice/atoms/tag/Tag.js

@@ -2,25 +2,25 @@ import { cx as e } from "../../../theme/tools.js";
 import { ModalCloseSvg as t } from "../../../icons/ModalCloseSvg.js";
 import { removeButton as n, rootRecipe as r } from "./tag.css.js";
 import "../../../index.js";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useId as o } from "react";
+import { useId as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/backoffice/atoms/tag/Tag.tsx
 var s = ({ children: s, tone: c = "neutral", className: l, onRemove: u, removeLabel: d = "Remove" }) => {
-	let f = o(), p = typeof u == "function", m = null;
-	return p && (m = /* @__PURE__ */ i("button", {
+	let f = i(), p = typeof u == "function", m = null;
+	return p && (m = /* @__PURE__ */ a("button", {
 		type: "button",
 		className: n,
 		onClick: u,
 		"aria-label": d,
 		"aria-describedby": f,
-		children: /* @__PURE__ */ i(t, {
+		children: /* @__PURE__ */ a(t, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		})
-	})), /* @__PURE__ */ a("span", {
+	})), /* @__PURE__ */ o("span", {
 		className: e(r({ tone: c }), l),
-		children: [/* @__PURE__ */ i("span", {
+		children: [/* @__PURE__ */ a("span", {
 			id: f,
 			children: s
 		}), m]