@plumile/ui 0.1.61 → 0.1.63

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

@@ -0,0 +1,20 @@
+/* empty css                                      */
+/* empty css                   */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/backoffice/atoms/tag/tag.css.ts
+var t = e({
+	defaultClassName: "_6yn5376 _6yn5370 txvbqbnux txvbqboi6 txvbqbp56 txvbqblwx txvbqb9jf txvbqbco txvbqbanx txvbqb1t6 txvbqb8o txvbqbamf",
+	variantClassNames: { tone: {
+		neutral: "_6yn5377 _6yn5371 txvbqbv4j",
+		info: "_6yn5378 _6yn5372 txvbqbv2j txvbqbv9p",
+		success: "_6yn5379 _6yn5373 txvbqbv0v txvbqbv6p",
+		warning: "_6yn537a _6yn5374 txvbqbv0b txvbqbv65",
+		danger: "_6yn537b _6yn5375 txvbqbuzr txvbqbv5l"
+	} },
+	defaultVariants: { tone: "neutral" },
+	compoundVariants: []
+}), n = "_6yn537c txvbqb9jf txvbqbco txvbqbdnx txvbqb1t6 txvbqb12f txvbqb1px txvbqbuzj txvbqbv4x txvbqbl9f txvbqbv";
+//#endregion
+export { n as removeButton, t as rootRecipe };
+
+//# sourceMappingURL=tag.css.js.map

package/lib/esm/backoffice/atoms/tag/tag.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.css.js","names":[],"sources":["../../../../../src/backoffice/atoms/tag/tag.css.ts"],"sourcesContent":["import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nconst rootBase = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 1,\n  paddingY: 1,\n  paddingX: 2,\n  borderRadius: 'full',\n  fontSize: 'xs',\n  fontWeight: 'medium',\n});\n\nconst toneNeutral = sprinkles({ backgroundColor: 'brandLightGray' });\nconst toneInfo = sprinkles({\n  backgroundColor: 'primaryLight',\n  color: 'brandPrimaryRed',\n});\nconst toneSuccess = sprinkles({\n  backgroundColor: 'green-100',\n  color: 'green-700',\n});\nconst toneWarning = sprinkles({\n  backgroundColor: 'amber-100',\n  color: 'amber-700',\n});\nconst toneDanger = sprinkles({\n  backgroundColor: 'red-100',\n  color: 'red-700',\n});\n\nexport const rootRecipe = recipe({\n  base: rootBase,\n  variants: {\n    tone: {\n      neutral: toneNeutral,\n      info: toneInfo,\n      success: toneSuccess,\n      warning: toneWarning,\n      danger: toneDanger,\n    },\n  },\n  defaultVariants: {\n    tone: 'neutral',\n  },\n});\n\nexport type RootRecipeVariants = RecipeVariants<typeof rootRecipe>;\n\nexport const removeButton = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  borderRadius: 'full',\n  borderWidth: 0,\n  borderStyle: 'none',\n  backgroundColor: 'transparent',\n  color: 'inherit',\n  padding: 0,\n  cursor: 'pointer',\n});\n"],"mappings":""}

package/lib/esm/backoffice/layout/backofficeLayoutTokens.js

@@ -0,0 +1,15 @@
+import { vars as e } from "../../theme/themeContract.js";
+import { screens as t } from "../../theme/common.js";
+//#region src/backoffice/layout/backofficeLayoutTokens.ts
+var n = { detail: {
+	asideWidth: "320px",
+	splitMinWidth: "screen and (min-width: 1200px)",
+	collapseMaxWidth: t.lg,
+	gap: e.spacing[4],
+	stickyTop: e.spacing[6],
+	tabsStickyTop: e.spacing[4]
+} };
+//#endregion
+export { n as backofficeLayoutTokens, n as default };
+
+//# sourceMappingURL=backofficeLayoutTokens.js.map

package/lib/esm/backoffice/layout/backofficeLayoutTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backofficeLayoutTokens.js","names":[],"sources":["../../../../src/backoffice/layout/backofficeLayoutTokens.ts"],"sourcesContent":["import { screens } from '@plumile/ui/theme/common.js';\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\n/**\n * Source of truth for backoffice layout dimensions and breakpoints.\n * Keep these values centralized to avoid drift between templates/pages.\n */\nexport const backofficeLayoutTokens = {\n  detail: {\n    asideWidth: '320px',\n    splitMinWidth: 'screen and (min-width: 1200px)',\n    collapseMaxWidth: screens.lg,\n    gap: vars.spacing[4],\n    stickyTop: vars.spacing[6],\n    tabsStickyTop: vars.spacing[4],\n  },\n} as const;\n\nexport default backofficeLayoutTokens;\n"],"mappings":";;;AAOA,IAAa,IAAyB,EACpC,QAAQ;CACN,YAAY;CACZ,eAAe;CACf,kBAAkB,EAAQ;CAC1B,KAAK,EAAK,QAAQ;CAClB,WAAW,EAAK,QAAQ;CACxB,eAAe,EAAK,QAAQ;CAC7B,EACF"}

package/lib/esm/backoffice/molecules/backoffice_detail_layout/BackofficeDetailLayout.js

@@ -0,0 +1,34 @@
+import { cx as e } from "../../../theme/tools.js";
+import { container as t, header as n, layout as r, primary as i, secondary as a, stacked as o } from "./backofficeDetailLayout.css.js";
+import "../../../index.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/backoffice/molecules/backoffice_detail_layout/BackofficeDetailLayout.tsx
+var l = ({ header: l, content: u, aside: d, className: f }) => {
+	let p = null;
+	return l != null && (p = /* @__PURE__ */ s("div", {
+		className: n,
+		children: l
+	})), d == null ? /* @__PURE__ */ c("div", {
+		className: e(t, f),
+		children: [p, /* @__PURE__ */ s("div", {
+			className: o,
+			children: u
+		})]
+	}) : /* @__PURE__ */ c("div", {
+		className: e(t, f),
+		children: [p, /* @__PURE__ */ c("div", {
+			className: r,
+			children: [/* @__PURE__ */ s("div", {
+				className: i,
+				children: u
+			}), /* @__PURE__ */ s("aside", {
+				className: a,
+				children: d
+			})]
+		})]
+	});
+};
+//#endregion
+export { l as BackofficeDetailLayout, l as default };
+
+//# sourceMappingURL=BackofficeDetailLayout.js.map

package/lib/esm/backoffice/molecules/backoffice_detail_layout/BackofficeDetailLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeDetailLayout.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_detail_layout/BackofficeDetailLayout.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { cx } from '@plumile/ui';\n\nimport * as styles from './backofficeDetailLayout.css.js';\n\nexport type BackofficeDetailLayoutProps = {\n  header: ReactNode;\n  content: ReactNode;\n  aside?: ReactNode;\n  className?: string;\n};\n\nexport const BackofficeDetailLayout = ({\n  header,\n  content,\n  aside,\n  className,\n}: BackofficeDetailLayoutProps): JSX.Element => {\n  let headerNode: JSX.Element | null = null;\n  if (header != null) {\n    headerNode = <div className={styles.header}>{header}</div>;\n  }\n\n  if (aside == null) {\n    return (\n      <div className={cx(styles.container, className)}>\n        {headerNode}\n        <div className={styles.stacked}>{content}</div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(styles.container, className)}>\n      {headerNode}\n      <div className={styles.layout}>\n        <div className={styles.primary}>{content}</div>\n        <aside className={styles.secondary}>{aside}</aside>\n      </div>\n    </div>\n  );\n};\n\nexport default BackofficeDetailLayout;\n"],"mappings":";;;;;AAYA,IAAa,KAA0B,EACrC,QAAA,GACA,YACA,UACA,mBAC8C;CAC9C,IAAI,IAAiC;AAcrC,QAbI,KAAU,SACZ,IAAa,kBAAC,OAAD;EAAK,WAAW;YAAgB;EAAa,CAAA,GAGxD,KAAS,OAET,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAkB,EAAU;YAA/C,CACG,GACD,kBAAC,OAAD;GAAK,WAAW;aAAiB;GAAc,CAAA,CAC3C;MAKR,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAkB,EAAU;YAA/C,CACG,GACD,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,OAAD;IAAK,WAAW;cAAiB;IAAc,CAAA,EAC/C,kBAAC,SAAD;IAAO,WAAW;cAAmB;IAAc,CAAA,CAC/C;KACF"}

package/lib/esm/backoffice/molecules/backoffice_detail_layout/backofficeDetailLayout.css.js

@@ -0,0 +1,7 @@
+/* empty css                                      */
+//#region src/backoffice/molecules/backoffice_detail_layout/backofficeDetailLayout.css.ts
+var e = "_1k4y7360", t = "_1k4y7361", n = "_1k4y7362", r = "_1k4y7363", i = "_1k4y7364", a = "_1k4y7365";
+//#endregion
+export { e as container, t as header, n as layout, r as primary, i as secondary, a as stacked };
+
+//# sourceMappingURL=backofficeDetailLayout.css.js.map

package/lib/esm/backoffice/molecules/backoffice_detail_layout/backofficeDetailLayout.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backofficeDetailLayout.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_detail_layout/backofficeDetailLayout.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { vars } from '@plumile/ui/theme/themeContract.js';\nimport { screens } from '@plumile/ui/theme/common.js';\n\nexport const container = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[4],\n});\n\nexport const header = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[2],\n});\n\nexport const layout = style({\n  display: 'grid',\n  gridTemplateColumns: vars.gridTemplateColumns.detailAside320,\n  alignItems: 'flex-start',\n  gap: vars.spacing[4],\n  '@media': {\n    [screens.lg]: {\n      gridTemplateColumns: vars.gridTemplateColumns.detailSingle,\n    },\n  },\n});\n\nexport const primary = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[4],\n  minWidth: 0,\n});\n\nexport const secondary = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[3],\n});\n\nexport const stacked = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[4],\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/backoffice_empty_state/BackofficeEmptyState.js

@@ -0,0 +1,37 @@
+import { cx as e } from "../../../theme/tools.js";
+import { actions as t, container as n, description as r, icon as i, title as a } from "./backofficeEmptyState.css.js";
+import "../../../index.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/backoffice/molecules/backoffice_empty_state/BackofficeEmptyState.tsx
+var c = ({ title: c, description: l, actions: u, icon: d, className: f }) => {
+	let p = null;
+	l != null && (p = /* @__PURE__ */ o("div", {
+		className: r,
+		children: l
+	}));
+	let m = null;
+	u != null && (m = /* @__PURE__ */ o("div", {
+		className: t,
+		children: u
+	}));
+	let h = null;
+	return d != null && (h = /* @__PURE__ */ o("div", {
+		className: i,
+		children: d
+	})), /* @__PURE__ */ s("div", {
+		className: e(n, f),
+		children: [
+			h,
+			/* @__PURE__ */ o("div", {
+				className: a,
+				children: c
+			}),
+			p,
+			m
+		]
+	});
+};
+//#endregion
+export { c as BackofficeEmptyState, c as default };
+
+//# sourceMappingURL=BackofficeEmptyState.js.map

package/lib/esm/backoffice/molecules/backoffice_empty_state/BackofficeEmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeEmptyState.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_empty_state/BackofficeEmptyState.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { cx } from '@plumile/ui';\n\nimport * as styles from './backofficeEmptyState.css.js';\n\nexport type BackofficeEmptyStateProps = {\n  title: ReactNode;\n  description?: ReactNode;\n  actions?: ReactNode;\n  icon?: ReactNode;\n  className?: string;\n};\n\nexport const BackofficeEmptyState = ({\n  title,\n  description,\n  actions,\n  icon,\n  className,\n}: BackofficeEmptyStateProps): JSX.Element => {\n  let descriptionNode: JSX.Element | null = null;\n  if (description != null) {\n    descriptionNode = <div className={styles.description}>{description}</div>;\n  }\n\n  let actionsNode: JSX.Element | null = null;\n  if (actions != null) {\n    actionsNode = <div className={styles.actions}>{actions}</div>;\n  }\n\n  let iconNode: JSX.Element | null = null;\n  if (icon != null) {\n    iconNode = <div className={styles.icon}>{icon}</div>;\n  }\n\n  return (\n    <div className={cx(styles.container, className)}>\n      {iconNode}\n      <div className={styles.title}>{title}</div>\n      {descriptionNode}\n      {actionsNode}\n    </div>\n  );\n};\n\nexport default BackofficeEmptyState;\n"],"mappings":";;;;;AAaA,IAAa,KAAwB,EACnC,OAAA,GACA,aAAA,GACA,SAAA,GACA,MAAA,GACA,mBAC4C;CAC5C,IAAI,IAAsC;AAC1C,CAAI,KAAe,SACjB,IAAkB,kBAAC,OAAD;EAAK,WAAW;YAAqB;EAAkB,CAAA;CAG3E,IAAI,IAAkC;AACtC,CAAI,KAAW,SACb,IAAc,kBAAC,OAAD;EAAK,WAAW;YAAiB;EAAc,CAAA;CAG/D,IAAI,IAA+B;AAKnC,QAJI,KAAQ,SACV,IAAW,kBAAC,OAAD;EAAK,WAAW;YAAc;EAAW,CAAA,GAIpD,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAkB,EAAU;YAA/C;GACG;GACD,kBAAC,OAAD;IAAK,WAAW;cAAe;IAAY,CAAA;GAC1C;GACA;GACG"}

package/lib/esm/backoffice/molecules/backoffice_empty_state/backofficeEmptyState.css.js

@@ -0,0 +1,7 @@
+/* empty css                                    */
+//#region src/backoffice/molecules/backoffice_empty_state/backofficeEmptyState.css.ts
+var e = "_1iwouol0", t = "_1iwouol1", n = "_1iwouol2", r = "_1iwouol3", i = "_1iwouol4";
+//#endregion
+export { i as actions, e as container, r as description, t as icon, n as title };
+
+//# sourceMappingURL=backofficeEmptyState.css.js.map

package/lib/esm/backoffice/molecules/backoffice_empty_state/backofficeEmptyState.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backofficeEmptyState.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_empty_state/backofficeEmptyState.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const container = style({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  textAlign: 'center',\n  paddingTop: vars.spacing[6],\n  paddingBottom: vars.spacing[6],\n  paddingLeft: vars.spacing[4],\n  paddingRight: vars.spacing[4],\n  gap: vars.spacing[2],\n  color: vars.colors.textSecondary,\n});\n\nexport const icon = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: vars.colors.textSecondary,\n});\n\nexport const title = style({\n  fontSize: vars.fontSize.base,\n  lineHeight: vars.lineHeight.base,\n  fontWeight: vars.fontWeight.semibold,\n  color: vars.colors.text,\n});\n\nexport const description = style({\n  fontSize: vars.fontSize.sm,\n  lineHeight: vars.lineHeight.sm,\n  color: vars.colors.textSecondary,\n});\n\nexport const actions = style({\n  marginTop: vars.spacing[2],\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n  flexWrap: 'wrap',\n  justifyContent: 'center',\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/backoffice_filter_drawer/BackofficeFilterDrawer.js

@@ -0,0 +1,116 @@
+import { Button as e } from "../../../atomic/atoms/button/Button.js";
+import { Input as t } from "../../../atomic/atoms/input/Input.js";
+import { ModalCloseSvg as n } from "../../../icons/ModalCloseSvg.js";
+import { backdrop as r, closeButton as i, drawer as a, drawerContainer as o, header as s, searchRow as c, section as l, sectionDescription as u, sectionHeader as d, sectionItem as f, sectionItems as p, sectionTitle as m, sections as h, subtitle as g, title as _, titleBlock as v } from "./backofficeFilterDrawer.css.js";
+import "../../../index.js";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { useEffect as S } from "react";
+import { useTranslation as C } from "react-i18next";
+import { createPortal as w } from "react-dom";
+//#region src/backoffice/molecules/backoffice_filter_drawer/BackofficeFilterDrawer.tsx
+var T = ({ isOpen: T, title: E, sections: D, searchValue: O, onSearchChange: k, onClose: A, onReset: j }) => {
+	let { t: M } = C("ui"), N = E ?? M("backoffice.filterDrawer.title");
+	if (S(() => {
+		let e = (e) => {
+			e.key === "Escape" && T && A();
+		};
+		return window.addEventListener("keydown", e), () => {
+			window.removeEventListener("keydown", e);
+		};
+	}, [T, A]), !T) return null;
+	let P = D.reduce((e, t) => e + t.items.length, 0), F = null;
+	k != null && (F = /* @__PURE__ */ b(t, {
+		value: O ?? "",
+		onChange: (e) => {
+			k(e.target.value);
+		},
+		placeholder: M("backoffice.filterDrawer.searchPlaceholder"),
+		size: "small",
+		fullWidth: !0
+	}));
+	let I = null;
+	j != null && (I = /* @__PURE__ */ b(e, {
+		type: "button",
+		variant: "secondary",
+		size: "small",
+		onClick: j,
+		children: M("backoffice.filterDrawer.reset")
+	}));
+	let L = M("backoffice.filterDrawer.ariaLabel");
+	typeof N == "string" && (L = N);
+	let R = /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("div", {
+		className: r,
+		onClick: A
+	}), /* @__PURE__ */ b("div", {
+		className: o,
+		onClick: A,
+		children: /* @__PURE__ */ x("aside", {
+			className: a,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": L,
+			onClick: (e) => {
+				e.stopPropagation();
+			},
+			children: [
+				/* @__PURE__ */ x("div", {
+					className: s,
+					children: [/* @__PURE__ */ x("div", {
+						className: v,
+						children: [/* @__PURE__ */ b("div", {
+							className: _,
+							children: N
+						}), /* @__PURE__ */ b("div", {
+							className: g,
+							children: M("backoffice.filterDrawer.subtitle", { count: P })
+						})]
+					}), /* @__PURE__ */ b("button", {
+						type: "button",
+						className: i,
+						onClick: A,
+						"aria-label": M("backoffice.filterDrawer.closeAriaLabel"),
+						children: /* @__PURE__ */ b(n, {
+							width: 18,
+							height: 18,
+							"aria-hidden": "true"
+						})
+					})]
+				}),
+				/* @__PURE__ */ x("div", {
+					className: c,
+					children: [F, I]
+				}),
+				/* @__PURE__ */ b("div", {
+					className: h,
+					children: D.map((e) => {
+						let t = null;
+						return e.description != null && (t = /* @__PURE__ */ b("div", {
+							className: u,
+							children: e.description
+						})), /* @__PURE__ */ x("section", {
+							className: l,
+							children: [/* @__PURE__ */ x("div", {
+								className: d,
+								children: [/* @__PURE__ */ b("div", {
+									className: m,
+									children: e.title
+								}), t]
+							}), /* @__PURE__ */ b("div", {
+								className: p,
+								children: e.items.map((e) => /* @__PURE__ */ b("div", {
+									className: f,
+									children: e.node
+								}, e.id))
+							})]
+						}, e.id);
+					})
+				})
+			]
+		})
+	})] });
+	return typeof document > "u" ? R : w(R, document.body);
+};
+//#endregion
+export { T as BackofficeFilterDrawer, T as default };
+
+//# sourceMappingURL=BackofficeFilterDrawer.js.map

package/lib/esm/backoffice/molecules/backoffice_filter_drawer/BackofficeFilterDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeFilterDrawer.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_filter_drawer/BackofficeFilterDrawer.tsx"],"sourcesContent":["import { useEffect, type ChangeEvent, type JSX, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTranslation } from 'react-i18next';\n\nimport { Button, Input } from '@plumile/ui';\nimport { ModalCloseSvg } from '@plumile/ui/icons/ModalCloseSvg.js';\n\nimport * as styles from './backofficeFilterDrawer.css.js';\n\nexport type BackofficeFilterDrawerItem = {\n  id: string;\n  node: ReactNode;\n};\n\nexport type BackofficeFilterDrawerSection = {\n  id: string;\n  title: ReactNode;\n  description?: ReactNode;\n  items: readonly BackofficeFilterDrawerItem[];\n};\n\nexport type BackofficeFilterDrawerProps = {\n  isOpen: boolean;\n  title?: string;\n  sections: readonly BackofficeFilterDrawerSection[];\n  searchValue?: string;\n  onSearchChange?: (value: string) => void;\n  onClose: () => void;\n  onReset?: () => void;\n};\n\nexport const BackofficeFilterDrawer = ({\n  isOpen,\n  title,\n  sections,\n  searchValue,\n  onSearchChange,\n  onClose,\n  onReset,\n}: BackofficeFilterDrawerProps): JSX.Element | null => {\n  const { t } = useTranslation('ui');\n  const resolvedTitle = title ?? t('backoffice.filterDrawer.title');\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen) {\n        onClose();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => {\n      window.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [isOpen, onClose]);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  const totalCount = sections.reduce((total, section) => {\n    return total + section.items.length;\n  }, 0);\n\n  let searchNode: JSX.Element | null = null;\n  if (onSearchChange != null) {\n    searchNode = (\n      <Input\n        value={searchValue ?? ''}\n        onChange={(event: ChangeEvent<HTMLInputElement>) => {\n          onSearchChange(event.target.value);\n        }}\n        placeholder={t('backoffice.filterDrawer.searchPlaceholder')}\n        size=\"small\"\n        fullWidth\n      />\n    );\n  }\n\n  let resetNode: JSX.Element | null = null;\n  if (onReset != null) {\n    resetNode = (\n      <Button type=\"button\" variant=\"secondary\" size=\"small\" onClick={onReset}>\n        {t('backoffice.filterDrawer.reset')}\n      </Button>\n    );\n  }\n\n  let ariaLabel = t('backoffice.filterDrawer.ariaLabel');\n  if (typeof resolvedTitle === 'string') {\n    ariaLabel = resolvedTitle;\n  }\n\n  const drawerContent = (\n    <>\n      <div className={styles.backdrop} onClick={onClose} />\n      <div className={styles.drawerContainer} onClick={onClose}>\n        <aside\n          className={styles.drawer}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label={ariaLabel}\n          onClick={(event) => {\n            event.stopPropagation();\n          }}\n        >\n          <div className={styles.header}>\n            <div className={styles.titleBlock}>\n              <div className={styles.title}>{resolvedTitle}</div>\n              <div className={styles.subtitle}>\n                {t('backoffice.filterDrawer.subtitle', { count: totalCount })}\n              </div>\n            </div>\n            <button\n              type=\"button\"\n              className={styles.closeButton}\n              onClick={onClose}\n              aria-label={t('backoffice.filterDrawer.closeAriaLabel')}\n            >\n              <ModalCloseSvg width={18} height={18} aria-hidden=\"true\" />\n            </button>\n          </div>\n\n          <div className={styles.searchRow}>\n            {searchNode}\n            {resetNode}\n          </div>\n\n          <div className={styles.sections}>\n            {sections.map((section) => {\n              let descriptionNode: JSX.Element | null = null;\n              if (section.description != null) {\n                descriptionNode = (\n                  <div className={styles.sectionDescription}>\n                    {section.description}\n                  </div>\n                );\n              }\n\n              return (\n                <section key={section.id} className={styles.section}>\n                  <div className={styles.sectionHeader}>\n                    <div className={styles.sectionTitle}>{section.title}</div>\n                    {descriptionNode}\n                  </div>\n                  <div className={styles.sectionItems}>\n                    {section.items.map((item) => {\n                      return (\n                        <div key={item.id} className={styles.sectionItem}>\n                          {item.node}\n                        </div>\n                      );\n                    })}\n                  </div>\n                </section>\n              );\n            })}\n          </div>\n        </aside>\n      </div>\n    </>\n  );\n\n  if (typeof document === 'undefined') {\n    return drawerContent;\n  }\n\n  return createPortal(drawerContent, document.body);\n};\n\nexport default BackofficeFilterDrawer;\n"],"mappings":";;;;;;;;;;AA+BA,IAAa,KAA0B,EACrC,WACA,OAAA,GACA,UAAA,GACA,gBACA,mBACA,YACA,iBACqD;CACrD,IAAM,EAAE,SAAM,EAAe,KAAK,EAC5B,IAAgB,KAAS,EAAE,gCAAgC;AAejE,KAbA,QAAgB;EACd,IAAM,KAAiB,MAAyB;AAC9C,GAAI,EAAM,QAAQ,YAAY,KAC5B,GAAS;;AAKb,SADA,OAAO,iBAAiB,WAAW,EAAc,QACpC;AACX,UAAO,oBAAoB,WAAW,EAAc;;IAErD,CAAC,GAAQ,EAAQ,CAAC,EAEjB,CAAC,EACH,QAAO;CAGT,IAAM,IAAa,EAAS,QAAQ,GAAO,MAClC,IAAQ,EAAQ,MAAM,QAC5B,EAAE,EAED,IAAiC;AACrC,CAAI,KAAkB,SACpB,IACE,kBAAC,GAAD;EACE,OAAO,KAAe;EACtB,WAAW,MAAyC;AAClD,KAAe,EAAM,OAAO,MAAM;;EAEpC,aAAa,EAAE,4CAA4C;EAC3D,MAAK;EACL,WAAA;EACA,CAAA;CAIN,IAAI,IAAgC;AACpC,CAAI,KAAW,SACb,IACE,kBAAC,GAAD;EAAQ,MAAK;EAAS,SAAQ;EAAY,MAAK;EAAQ,SAAS;YAC7D,EAAE,gCAAgC;EAC5B,CAAA;CAIb,IAAI,IAAY,EAAE,oCAAoC;AACtD,CAAI,OAAO,KAAkB,aAC3B,IAAY;CAGd,IAAM,IACJ,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;EAAK,WAAW;EAAiB,SAAS;EAAW,CAAA,EACrD,kBAAC,OAAD;EAAK,WAAW;EAAwB,SAAS;YAC/C,kBAAC,SAAD;GACE,WAAW;GACX,MAAK;GACL,cAAW;GACX,cAAY;GACZ,UAAU,MAAU;AAClB,MAAM,iBAAiB;;aAN3B;IASE,kBAAC,OAAD;KAAK,WAAW;eAAhB,CACE,kBAAC,OAAD;MAAK,WAAW;gBAAhB,CACE,kBAAC,OAAD;OAAK,WAAW;iBAAe;OAAoB,CAAA,EACnD,kBAAC,OAAD;OAAK,WAAW;iBACb,EAAE,oCAAoC,EAAE,OAAO,GAAY,CAAC;OACzD,CAAA,CACF;SACN,kBAAC,UAAD;MACE,MAAK;MACL,WAAW;MACX,SAAS;MACT,cAAY,EAAE,yCAAyC;gBAEvD,kBAAC,GAAD;OAAe,OAAO;OAAI,QAAQ;OAAI,eAAY;OAAS,CAAA;MACpD,CAAA,CACL;;IAEN,kBAAC,OAAD;KAAK,WAAW;eAAhB,CACG,GACA,EACG;;IAEN,kBAAC,OAAD;KAAK,WAAW;eACb,EAAS,KAAK,MAAY;MACzB,IAAI,IAAsC;AAS1C,aARI,EAAQ,eAAe,SACzB,IACE,kBAAC,OAAD;OAAK,WAAW;iBACb,EAAQ;OACL,CAAA,GAKR,kBAAC,WAAD;OAA0B,WAAW;iBAArC,CACE,kBAAC,OAAD;QAAK,WAAW;kBAAhB,CACE,kBAAC,OAAD;SAAK,WAAW;mBAAsB,EAAQ;SAAY,CAAA,EACzD,EACG;WACN,kBAAC,OAAD;QAAK,WAAW;kBACb,EAAQ,MAAM,KAAK,MAEhB,kBAAC,OAAD;SAAmB,WAAW;mBAC3B,EAAK;SACF,EAFI,EAAK,GAET,CAER;QACE,CAAA,CACE;SAdI,EAAQ,GAcZ;OAEZ;KACE,CAAA;IACA;;EACJ,CAAA,CACL,EAAA,CAAA;AAOL,QAJI,OAAO,WAAa,MACf,IAGF,EAAa,GAAe,SAAS,KAAK"}

package/lib/esm/backoffice/molecules/backoffice_filter_drawer/backofficeFilterDrawer.css.js

@@ -0,0 +1,7 @@
+/* empty css                                      */
+//#region src/backoffice/molecules/backoffice_filter_drawer/backofficeFilterDrawer.css.ts
+var e = "ck62y20", t = "ck62y21", n = "ck62y22", r = "ck62y23", i = "ck62y24", a = "ck62y25", o = "ck62y26", s = "ck62y27", c = "ck62y28", l = "ck62y29", u = "ck62y2a", d = "ck62y2b", f = "ck62y2c", p = "ck62y2d", m = "ck62y2e", h = "ck62y2f";
+//#endregion
+export { e as backdrop, s as closeButton, n as drawer, t as drawerContainer, r as header, c as searchRow, u as section, p as sectionDescription, d as sectionHeader, h as sectionItem, m as sectionItems, f as sectionTitle, l as sections, o as subtitle, a as title, i as titleBlock };
+
+//# sourceMappingURL=backofficeFilterDrawer.css.js.map

package/lib/esm/backoffice/molecules/backoffice_filter_drawer/backofficeFilterDrawer.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backofficeFilterDrawer.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_filter_drawer/backofficeFilterDrawer.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const backdrop = style({\n  position: 'fixed',\n  inset: 0,\n  backgroundColor: 'rgb(15 23 42 / 0.35)',\n  zIndex: vars.zIndex.modal,\n});\n\nexport const drawerContainer = style({\n  position: 'fixed',\n  inset: 0,\n  display: 'flex',\n  justifyContent: 'flex-end',\n  zIndex: vars.zIndex.modal,\n});\n\nexport const drawer = style({\n  backgroundColor: vars.colors.surface,\n  borderLeftColor: vars.colors.borderSubtle,\n  borderLeftWidth: vars.borderWidth.default,\n  borderStyle: 'solid',\n  boxShadow: vars.boxShadow.xl,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[4],\n  height: vars.height.full,\n  maxWidth: vars.maxWidth['26rem'],\n  overflowY: 'auto',\n  padding: vars.spacing[5],\n  width: vars.width.full,\n});\n\nexport const header = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: vars.spacing[3],\n});\n\nexport const titleBlock = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[1],\n});\n\nexport const title = style({\n  fontSize: vars.fontSize.xl,\n  fontWeight: vars.fontWeight.semibold,\n  color: vars.colors.text,\n});\n\nexport const subtitle = style({\n  fontSize: vars.fontSize.sm,\n  color: vars.colors.textSecondary,\n});\n\nexport const closeButton = style({\n  alignItems: 'center',\n  backgroundColor: vars.colors.surfaceMuted,\n  borderRadius: vars.borderRadius.full,\n  borderStyle: 'none',\n  borderWidth: 0,\n  color: vars.colors.textSecondary,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  height: vars.height[8],\n  justifyContent: 'center',\n  transitionProperty: vars.transitionProperty.colors,\n  transitionDuration: vars.transitionDuration[150],\n  transitionTimingFunction: vars.transitionTimingFunction.ease,\n  width: vars.width[8],\n  selectors: {\n    '&:hover': {\n      backgroundColor: vars.colors.surfaceSecondary,\n      color: vars.colors.text,\n    },\n  },\n});\n\nexport const searchRow = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n});\n\nexport const sections = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[4],\n});\n\nexport const section = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[2],\n});\n\nexport const sectionHeader = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[1],\n});\n\nexport const sectionTitle = style({\n  fontSize: vars.fontSize.xs,\n  textTransform: 'uppercase',\n  letterSpacing: vars.letterSpacing.caps,\n  color: vars.colors.textMuted,\n  fontWeight: vars.fontWeight.semibold,\n});\n\nexport const sectionDescription = style({\n  fontSize: vars.fontSize.sm,\n  color: vars.colors.textSecondary,\n});\n\nexport const sectionItems = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[2],\n});\n\nexport const sectionItem = style({\n  display: 'flex',\n  flexDirection: 'column',\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/backoffice_filter_field/BackofficeFilterField.js

@@ -0,0 +1,28 @@
+import { cx as e } from "../../../theme/tools.js";
+import { control as t, description as n, field as r, header as i, label as a } from "./backofficeFilterField.css.js";
+import "../../../index.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/backoffice/molecules/backoffice_filter_field/BackofficeFilterField.tsx
+var c = ({ label: c, description: l, children: u, className: d }) => {
+	let f = null;
+	return l != null && (f = /* @__PURE__ */ o("div", {
+		className: n,
+		children: l
+	})), /* @__PURE__ */ s("div", {
+		className: e(r, d),
+		children: [/* @__PURE__ */ s("div", {
+			className: i,
+			children: [/* @__PURE__ */ o("div", {
+				className: a,
+				children: c
+			}), f]
+		}), /* @__PURE__ */ o("div", {
+			className: t,
+			children: u
+		})]
+	});
+};
+//#endregion
+export { c as BackofficeFilterField, c as default };
+
+//# sourceMappingURL=BackofficeFilterField.js.map

package/lib/esm/backoffice/molecules/backoffice_filter_field/BackofficeFilterField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeFilterField.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_filter_field/BackofficeFilterField.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { cx } from '@plumile/ui';\n\nimport * as styles from './backofficeFilterField.css.js';\n\nexport type BackofficeFilterFieldProps = {\n  label: ReactNode;\n  description?: ReactNode;\n  children: ReactNode;\n  className?: string;\n};\n\nexport const BackofficeFilterField = ({\n  label,\n  description,\n  children,\n  className,\n}: BackofficeFilterFieldProps): JSX.Element => {\n  let descriptionNode: JSX.Element | null = null;\n  if (description != null) {\n    descriptionNode = <div className={styles.description}>{description}</div>;\n  }\n\n  return (\n    <div className={cx(styles.field, className)}>\n      <div className={styles.header}>\n        <div className={styles.label}>{label}</div>\n        {descriptionNode}\n      </div>\n      <div className={styles.control}>{children}</div>\n    </div>\n  );\n};\n\nexport default BackofficeFilterField;\n"],"mappings":";;;;;AAaA,IAAa,KAAyB,EACpC,OAAA,GACA,aAAA,GACA,aACA,mBAC6C;CAC7C,IAAI,IAAsC;AAK1C,QAJI,KAAe,SACjB,IAAkB,kBAAC,OAAD;EAAK,WAAW;YAAqB;EAAkB,CAAA,GAIzE,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAc,EAAU;YAA3C,CACE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,OAAD;IAAK,WAAW;cAAe;IAAY,CAAA,EAC1C,EACG;MACN,kBAAC,OAAD;GAAK,WAAW;GAAiB;GAAe,CAAA,CAC5C"}

package/lib/esm/backoffice/molecules/backoffice_filter_field/backofficeFilterField.css.js

@@ -0,0 +1,7 @@
+/* empty css                                     */
+//#region src/backoffice/molecules/backoffice_filter_field/backofficeFilterField.css.ts
+var e = "_9aix0m0", t = "_9aix0m1", n = "_9aix0m2", r = "_9aix0m3", i = "_9aix0m4";
+//#endregion
+export { i as control, r as description, e as field, t as header, n as label };
+
+//# sourceMappingURL=backofficeFilterField.css.js.map

package/lib/esm/backoffice/molecules/backoffice_filter_field/backofficeFilterField.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backofficeFilterField.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_filter_field/backofficeFilterField.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const field = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[2],\n  padding: vars.spacing[3],\n  borderRadius: vars.borderRadius.lg,\n  borderWidth: vars.borderWidth.default,\n  borderStyle: 'solid',\n  borderColor: vars.colors.borderSubtle,\n  backgroundColor: vars.colors.surface,\n});\n\nexport const header = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[1],\n});\n\nexport const label = style({\n  fontSize: vars.fontSize.xs,\n  textTransform: 'uppercase',\n  letterSpacing: vars.letterSpacing.caps,\n  color: vars.colors.textMuted,\n  fontWeight: vars.fontWeight.semibold,\n});\n\nexport const description = style({\n  fontSize: vars.fontSize.sm,\n  color: vars.colors.textSecondary,\n});\n\nexport const control = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[2],\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/backoffice_filters_bar/BackofficeFiltersBar.js

@@ -0,0 +1,37 @@
+import { cx as e } from "../../../theme/tools.js";
+import { chipsRow as t, container as n, left as r, right as i, topRow as a } from "./backofficeFiltersBar.css.js";
+import "../../../index.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/backoffice/molecules/backoffice_filters_bar/BackofficeFiltersBar.tsx
+var c = ({ leftSlot: c, searchSlot: l, quickFiltersSlot: u, allFiltersSlot: d, rightActions: f, chipsSlot: p, className: m }) => {
+	let h = c != null || l != null || u != null || d != null || f != null, g = p != null;
+	if (!h && !g) return null;
+	let _ = null;
+	g && (_ = /* @__PURE__ */ o("div", {
+		className: t,
+		children: p
+	}));
+	let v = null;
+	return h && (v = /* @__PURE__ */ s("div", {
+		className: a,
+		children: [/* @__PURE__ */ s("div", {
+			className: r,
+			children: [
+				c,
+				l,
+				u,
+				d
+			]
+		}), /* @__PURE__ */ o("div", {
+			className: i,
+			children: f
+		})]
+	})), /* @__PURE__ */ s("div", {
+		className: e(n, m),
+		children: [v, _]
+	});
+};
+//#endregion
+export { c as BackofficeFiltersBar, c as default };
+
+//# sourceMappingURL=BackofficeFiltersBar.js.map

package/lib/esm/backoffice/molecules/backoffice_filters_bar/BackofficeFiltersBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeFiltersBar.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_filters_bar/BackofficeFiltersBar.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { cx } from '@plumile/ui';\n\nimport * as styles from './backofficeFiltersBar.css.js';\n\nexport type BackofficeFiltersBarProps = {\n  leftSlot?: ReactNode;\n  searchSlot?: ReactNode;\n  quickFiltersSlot?: ReactNode;\n  allFiltersSlot?: ReactNode;\n  rightActions?: ReactNode;\n  chipsSlot?: ReactNode;\n  className?: string;\n};\n\nexport const BackofficeFiltersBar = ({\n  leftSlot,\n  searchSlot,\n  quickFiltersSlot,\n  allFiltersSlot,\n  rightActions,\n  chipsSlot,\n  className,\n}: BackofficeFiltersBarProps): JSX.Element | null => {\n  const showTop =\n    leftSlot != null ||\n    searchSlot != null ||\n    quickFiltersSlot != null ||\n    allFiltersSlot != null ||\n    rightActions != null;\n\n  const showChips = chipsSlot != null;\n\n  if (!showTop && !showChips) {\n    return null;\n  }\n\n  let chipsNode: JSX.Element | null = null;\n  if (showChips) {\n    chipsNode = <div className={styles.chipsRow}>{chipsSlot}</div>;\n  }\n\n  let topNode: JSX.Element | null = null;\n  if (showTop) {\n    topNode = (\n      <div className={styles.topRow}>\n        <div className={styles.left}>\n          {leftSlot}\n          {searchSlot}\n          {quickFiltersSlot}\n          {allFiltersSlot}\n        </div>\n        <div className={styles.right}>{rightActions}</div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(styles.container, className)}>\n      {topNode}\n      {chipsNode}\n    </div>\n  );\n};\n\nexport default BackofficeFiltersBar;\n"],"mappings":";;;;;AAgBA,IAAa,KAAwB,EACnC,aACA,eACA,qBACA,mBACA,iBACA,cACA,mBACmD;CACnD,IAAM,IACJ,KAAY,QACZ,KAAc,QACd,KAAoB,QACpB,KAAkB,QAClB,KAAgB,MAEZ,IAAY,KAAa;AAE/B,KAAI,CAAC,KAAW,CAAC,EACf,QAAO;CAGT,IAAI,IAAgC;AACpC,CAAI,MACF,IAAY,kBAAC,OAAD;EAAK,WAAW;YAAkB;EAAgB,CAAA;CAGhE,IAAI,IAA8B;AAelC,QAdI,MACF,IACE,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACG;IACA;IACA;IACA;IACG;MACN,kBAAC,OAAD;GAAK,WAAW;aAAe;GAAmB,CAAA,CAC9C;MAKR,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAkB,EAAU;YAA/C,CACG,GACA,EACG"}

package/lib/esm/backoffice/molecules/backoffice_filters_bar/backofficeFiltersBar.css.js

@@ -0,0 +1,7 @@
+/* empty css                                    */
+//#region src/backoffice/molecules/backoffice_filters_bar/backofficeFiltersBar.css.ts
+var e = "yyzbjt0", t = "yyzbjt1", n = "yyzbjt2", r = "yyzbjt3", i = "yyzbjt4";
+//#endregion
+export { i as chipsRow, e as container, n as left, r as right, t as topRow };
+
+//# sourceMappingURL=backofficeFiltersBar.css.js.map

package/lib/esm/backoffice/molecules/backoffice_filters_bar/backofficeFiltersBar.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backofficeFiltersBar.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_filters_bar/backofficeFiltersBar.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const container = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[2],\n  width: vars.width.full,\n});\n\nexport const topRow = style({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: vars.spacing[3],\n  '@media': {\n    'screen and (max-width: 640px)': {\n      alignItems: 'stretch',\n      flexDirection: 'column',\n    },\n  },\n});\n\nexport const left = style({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n  minWidth: 0,\n  flex: 1,\n});\n\nexport const right = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n  flexWrap: 'wrap',\n});\n\nexport const chipsRow = style({\n  display: 'flex',\n  alignItems: 'center',\n  minWidth: 0,\n  flexWrap: 'wrap',\n  gap: vars.spacing[2],\n  paddingTop: vars.spacing[2],\n  borderTopWidth: vars.borderWidth.default,\n  borderTopStyle: 'solid',\n  borderTopColor: vars.colors.borderLight,\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/backoffice_form_section/BackofficeFormSection.js

@@ -0,0 +1,25 @@
+import { cx as e } from "../../../theme/tools.js";
+import { container as t } from "./backofficeFormSection.css.js";
+import "../../../index.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/backoffice/molecules/backoffice_form_section/BackofficeFormSection.tsx
+var i = ({ title: i, description: a, children: o, className: s }) => {
+	let c = i != null && i.trim() !== "" || a != null && a.trim() !== "";
+	return /* @__PURE__ */ r("section", {
+		className: e(t, s),
+		children: [c && /* @__PURE__ */ r("div", {
+			className: "m31wvj1",
+			children: [i != null && i.trim() !== "" && /* @__PURE__ */ n("h3", {
+				className: "m31wvj2",
+				children: i
+			}), a != null && a.trim() !== "" && /* @__PURE__ */ n("p", {
+				className: "m31wvj3",
+				children: a
+			})]
+		}), o]
+	});
+};
+//#endregion
+export { i as BackofficeFormSection, i as default };
+
+//# sourceMappingURL=BackofficeFormSection.js.map

package/lib/esm/backoffice/molecules/backoffice_form_section/BackofficeFormSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeFormSection.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_form_section/BackofficeFormSection.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { cx } from '@plumile/ui';\n\nimport * as styles from './backofficeFormSection.css.js';\n\nexport type BackofficeFormSectionProps = {\n  title?: string;\n  description?: string;\n  children: ReactNode;\n  className?: string;\n};\n\nexport const BackofficeFormSection = ({\n  title,\n  description,\n  children,\n  className,\n}: BackofficeFormSectionProps): JSX.Element => {\n  const hasHeader =\n    (title != null && title.trim() !== '') ||\n    (description != null && description.trim() !== '');\n\n  return (\n    <section className={cx(styles.container, className)}>\n      {hasHeader && (\n        <div className={styles.header}>\n          {title != null && title.trim() !== '' && (\n            <h3 className={styles.title}>{title}</h3>\n          )}\n          {description != null && description.trim() !== '' && (\n            <p className={styles.description}>{description}</p>\n          )}\n        </div>\n      )}\n      {children}\n    </section>\n  );\n};\n\nexport default BackofficeFormSection;\n"],"mappings":";;;;;AAYA,IAAa,KAAyB,EACpC,OAAA,GACA,aAAA,GACA,aACA,mBAC6C;CAC7C,IAAM,IACH,KAAS,QAAQ,EAAM,MAAM,KAAK,MAClC,KAAe,QAAQ,EAAY,MAAM,KAAK;AAEjD,QACE,kBAAC,WAAD;EAAS,WAAW,EAAG,GAAkB,EAAU;YAAnD,CACG,KACC,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,KAAS,QAAQ,EAAM,MAAM,KAAK,MACjC,kBAAC,MAAD;IAAI,WAAW;cAAe;IAAW,CAAA,EAE1C,KAAe,QAAQ,EAAY,MAAM,KAAK,MAC7C,kBAAC,KAAD;IAAG,WAAW;cAAqB;IAAgB,CAAA,CAEjD;MAEP,EACO"}

package/lib/esm/backoffice/molecules/backoffice_form_section/backofficeFormSection.css.js

@@ -0,0 +1,7 @@
+/* empty css                                     */
+//#region src/backoffice/molecules/backoffice_form_section/backofficeFormSection.css.ts
+var e = "m31wvj0", t = "m31wvj1", n = "m31wvj2", r = "m31wvj3";
+//#endregion
+export { e as container, r as description, t as header, n as title };
+
+//# sourceMappingURL=backofficeFormSection.css.js.map

package/lib/esm/backoffice/molecules/backoffice_form_section/backofficeFormSection.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backofficeFormSection.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_form_section/backofficeFormSection.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const container = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[3],\n  padding: vars.spacing[4],\n  borderRadius: vars.borderRadius.lg,\n  borderWidth: vars.borderWidth.default,\n  borderStyle: 'solid',\n  borderColor: vars.colors.borderSubtle,\n  backgroundColor: vars.colors.surface,\n});\n\nexport const header = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[1],\n});\n\nexport const title = style({\n  fontSize: vars.fontSize.base,\n  fontWeight: vars.fontWeight.semibold,\n  color: vars.colors.text,\n  margin: 0,\n});\n\nexport const description = style({\n  fontSize: vars.fontSize.sm,\n  color: vars.colors.textSecondary,\n  margin: 0,\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/backoffice_json_viewer/BackofficeJsonViewer.js

@@ -0,0 +1,80 @@
+import { cx as e } from "../../../theme/tools.js";
+import { Button as t } from "../../../atomic/atoms/button/Button.js";
+import { actions as n, container as r, header as i, pre as a, title as o, truncated as s } from "./backofficeJsonViewer.css.js";
+import "../../../index.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useCallback as u, useMemo as d, useState as f } from "react";
+//#region src/backoffice/molecules/backoffice_json_viewer/BackofficeJsonViewer.tsx
+var p = (e) => {
+	try {
+		let t = document.createElement("textarea");
+		t.value = e, t.setAttribute("readonly", "true"), t.style.position = "fixed", t.style.top = "-1000px", t.style.left = "-1000px", document.body.appendChild(t), t.select();
+		let n = document.execCommand("copy");
+		return document.body.removeChild(t), n;
+	} catch {
+		return !1;
+	}
+}, m = ({ value: m, title: h = "Raw JSON", className: g, maxHeight: _, truncate: v = !1, truncateLabel: y = "Collapse", expandLabel: b = "Expand", copyLabel: x = "Copy", copiedLabel: S = "Copied" }) => {
+	let [C, w] = f(v), [T, E] = f(!1), D = d(() => {
+		try {
+			return JSON.stringify(m, null, 2);
+		} catch (e) {
+			let t = String(e);
+			return e instanceof Error && (t = e.message), JSON.stringify({
+				error: "Failed to serialize JSON",
+				message: t
+			});
+		}
+	}, [m]), O = u(async () => {
+		let e = !1;
+		try {
+			typeof navigator < "u" && (await navigator.clipboard.writeText(D), e = !0);
+		} catch {
+			e = !1;
+		}
+		e ||= p(D), e && (E(!0), window.setTimeout(() => {
+			E(!1);
+		}, 1400));
+	}, [D]), k = d(() => {
+		if (_ != null) return { maxHeight: _ };
+	}, [_]), A = x;
+	T && (A = S);
+	let j = y;
+	return C && (j = b), /* @__PURE__ */ l("div", {
+		className: e(r, g),
+		children: [/* @__PURE__ */ l("div", {
+			className: i,
+			children: [/* @__PURE__ */ c("span", {
+				className: o,
+				children: h
+			}), /* @__PURE__ */ l("div", {
+				className: n,
+				children: [/* @__PURE__ */ c(t, {
+					type: "button",
+					variant: "secondary",
+					size: "small",
+					onClick: () => {
+						O().catch(() => {});
+					},
+					children: A
+				}), /* @__PURE__ */ c(t, {
+					type: "button",
+					variant: "secondary",
+					size: "small",
+					onClick: () => {
+						w((e) => !e);
+					},
+					children: j
+				})]
+			})]
+		}), /* @__PURE__ */ c("pre", {
+			className: e(a, { [s]: C }),
+			style: k,
+			children: D
+		})]
+	});
+};
+//#endregion
+export { m as BackofficeJsonViewer, m as default };
+
+//# sourceMappingURL=BackofficeJsonViewer.js.map

package/lib/esm/backoffice/molecules/backoffice_json_viewer/BackofficeJsonViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeJsonViewer.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_json_viewer/BackofficeJsonViewer.tsx"],"sourcesContent":["import { useCallback, useMemo, useState, type JSX } from 'react';\n\nimport { Button, cx } from '@plumile/ui';\n\nimport * as styles from './backofficeJsonViewer.css.js';\n\nexport type BackofficeJsonViewerProps = {\n  value: unknown;\n  title?: string;\n  className?: string;\n  maxHeight?: string;\n  truncate?: boolean;\n  truncateLabel?: string;\n  expandLabel?: string;\n  copyLabel?: string;\n  copiedLabel?: string;\n};\n\nconst copyWithExecCommand = (text: string): boolean => {\n  try {\n    const textarea = document.createElement('textarea');\n    textarea.value = text;\n    textarea.setAttribute('readonly', 'true');\n    textarea.style.position = 'fixed';\n    textarea.style.top = '-1000px';\n    textarea.style.left = '-1000px';\n    document.body.appendChild(textarea);\n    textarea.select();\n    const ok = document.execCommand('copy');\n    document.body.removeChild(textarea);\n    return ok;\n  } catch {\n    return false;\n  }\n};\n\nexport const BackofficeJsonViewer = ({\n  value,\n  title = 'Raw JSON',\n  className,\n  maxHeight,\n  truncate = false,\n  truncateLabel = 'Collapse',\n  expandLabel = 'Expand',\n  copyLabel = 'Copy',\n  copiedLabel = 'Copied',\n}: BackofficeJsonViewerProps): JSX.Element => {\n  const [isCollapsed, setIsCollapsed] = useState(truncate);\n  const [copied, setCopied] = useState(false);\n\n  const jsonText = useMemo(() => {\n    try {\n      return JSON.stringify(value, null, 2);\n    } catch (err) {\n      let message = String(err);\n      if (err instanceof Error) {\n        message = err.message;\n      }\n      return JSON.stringify({ error: 'Failed to serialize JSON', message });\n    }\n  }, [value]);\n\n  const handleCopy = useCallback(async () => {\n    let ok = false;\n    try {\n      if (typeof navigator !== 'undefined') {\n        await navigator.clipboard.writeText(jsonText);\n        ok = true;\n      }\n    } catch {\n      ok = false;\n    }\n\n    if (!ok) {\n      ok = copyWithExecCommand(jsonText);\n    }\n\n    if (ok) {\n      setCopied(true);\n      window.setTimeout(() => {\n        setCopied(false);\n      }, 1400);\n    }\n  }, [jsonText]);\n\n  const preStyle = useMemo(() => {\n    if (maxHeight == null) {\n      return undefined;\n    }\n    return { maxHeight };\n  }, [maxHeight]);\n\n  let copyButtonLabel = copyLabel;\n  if (copied) {\n    copyButtonLabel = copiedLabel;\n  }\n\n  let collapseButtonLabel = truncateLabel;\n  if (isCollapsed) {\n    collapseButtonLabel = expandLabel;\n  }\n\n  return (\n    <div className={cx(styles.container, className)}>\n      <div className={styles.header}>\n        <span className={styles.title}>{title}</span>\n        <div className={styles.actions}>\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            size=\"small\"\n            onClick={() => {\n              handleCopy().catch(() => {});\n            }}\n          >\n            {copyButtonLabel}\n          </Button>\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            size=\"small\"\n            onClick={() => {\n              setIsCollapsed((v) => {\n                return !v;\n              });\n            }}\n          >\n            {collapseButtonLabel}\n          </Button>\n        </div>\n      </div>\n      <pre\n        className={cx(styles.pre, { [styles.truncated]: isCollapsed })}\n        style={preStyle}\n      >\n        {jsonText}\n      </pre>\n    </div>\n  );\n};\n\nexport default BackofficeJsonViewer;\n"],"mappings":";;;;;;;AAkBA,IAAM,KAAuB,MAA0B;AACrD,KAAI;EACF,IAAM,IAAW,SAAS,cAAc,WAAW;AAOnD,EANA,EAAS,QAAQ,GACjB,EAAS,aAAa,YAAY,OAAO,EACzC,EAAS,MAAM,WAAW,SAC1B,EAAS,MAAM,MAAM,WACrB,EAAS,MAAM,OAAO,WACtB,SAAS,KAAK,YAAY,EAAS,EACnC,EAAS,QAAQ;EACjB,IAAM,IAAK,SAAS,YAAY,OAAO;AAEvC,SADA,SAAS,KAAK,YAAY,EAAS,EAC5B;SACD;AACN,SAAO;;GAIE,KAAwB,EACnC,UACA,OAAA,IAAQ,YACR,cACA,cACA,cAAW,IACX,mBAAgB,YAChB,iBAAc,UACd,eAAY,QACZ,iBAAc,eAC8B;CAC5C,IAAM,CAAC,GAAa,KAAkB,EAAS,EAAS,EAClD,CAAC,GAAQ,KAAa,EAAS,GAAM,EAErC,IAAW,QAAc;AAC7B,MAAI;AACF,UAAO,KAAK,UAAU,GAAO,MAAM,EAAE;WAC9B,GAAK;GACZ,IAAI,IAAU,OAAO,EAAI;AAIzB,UAHI,aAAe,UACjB,IAAU,EAAI,UAET,KAAK,UAAU;IAAE,OAAO;IAA4B;IAAS,CAAC;;IAEtE,CAAC,EAAM,CAAC,EAEL,IAAa,EAAY,YAAY;EACzC,IAAI,IAAK;AACT,MAAI;AACF,GAAI,OAAO,YAAc,QACvB,MAAM,UAAU,UAAU,UAAU,EAAS,EAC7C,IAAK;UAED;AACN,OAAK;;AAOP,EAJA,AACE,MAAK,EAAoB,EAAS,EAGhC,MACF,EAAU,GAAK,EACf,OAAO,iBAAiB;AACtB,KAAU,GAAM;KACf,KAAK;IAET,CAAC,EAAS,CAAC,EAER,IAAW,QAAc;AACzB,WAAa,KAGjB,QAAO,EAAE,cAAW;IACnB,CAAC,EAAU,CAAC,EAEX,IAAkB;AACtB,CAAI,MACF,IAAkB;CAGpB,IAAI,IAAsB;AAK1B,QAJI,MACF,IAAsB,IAItB,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAkB,EAAU;YAA/C,CACE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,QAAD;IAAM,WAAW;cAAe;IAAa,CAAA,EAC7C,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACE,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,MAAK;KACL,eAAe;AACb,SAAY,CAAC,YAAY,GAAG;;eAG7B;KACM,CAAA,EACT,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,MAAK;KACL,eAAe;AACb,SAAgB,MACP,CAAC,EACR;;eAGH;KACM,CAAA,CACL;MACF;MACN,kBAAC,OAAD;GACE,WAAW,EAAG,GAAY,GAAG,IAAmB,GAAa,CAAC;GAC9D,OAAO;aAEN;GACG,CAAA,CACF"}

package/lib/esm/backoffice/molecules/backoffice_json_viewer/LazyBackofficeJsonViewer.css.js

@@ -0,0 +1,7 @@
+/* empty css                                        */
+//#region src/backoffice/molecules/backoffice_json_viewer/LazyBackofficeJsonViewer.css.ts
+var e = "_13lprza0";
+//#endregion
+export { e as fallback };
+
+//# sourceMappingURL=LazyBackofficeJsonViewer.css.js.map

package/lib/esm/backoffice/molecules/backoffice_json_viewer/LazyBackofficeJsonViewer.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LazyBackofficeJsonViewer.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_json_viewer/LazyBackofficeJsonViewer.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nexport const fallback = style({\n  overflow: 'auto',\n  whiteSpace: 'pre-wrap',\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/backoffice_json_viewer/LazyBackofficeJsonViewer.js

@@ -0,0 +1,28 @@
+import "./LazyBackofficeJsonViewer.css.js";
+import { jsx as e } from "react/jsx-runtime";
+import { Suspense as t, lazy as n } from "react";
+//#region src/backoffice/molecules/backoffice_json_viewer/LazyBackofficeJsonViewer.tsx
+var r = n(async () => ({ default: (await import("./BackofficeJsonViewer.js")).BackofficeJsonViewer })), i = (e) => {
+	try {
+		return JSON.stringify(e, null, 2);
+	} catch (e) {
+		let t = String(e);
+		return e instanceof Error && (t = e.message), JSON.stringify({
+			error: "Failed to serialize JSON",
+			message: t
+		});
+	}
+}, a = ({ value: t, className: n }) => /* @__PURE__ */ e("pre", {
+	className: n ?? "_13lprza0",
+	children: i(t)
+}), o = (n) => /* @__PURE__ */ e(t, {
+	fallback: /* @__PURE__ */ e(a, {
+		value: n.value,
+		className: n.className
+	}),
+	children: /* @__PURE__ */ e(r, { ...n })
+});
+//#endregion
+export { o as LazyBackofficeJsonViewer, o as default };
+
+//# sourceMappingURL=LazyBackofficeJsonViewer.js.map

package/lib/esm/backoffice/molecules/backoffice_json_viewer/LazyBackofficeJsonViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LazyBackofficeJsonViewer.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_json_viewer/LazyBackofficeJsonViewer.tsx"],"sourcesContent":["import { Suspense, lazy, type JSX } from 'react';\n\nimport type { BackofficeJsonViewerProps } from './BackofficeJsonViewer.js';\n\nimport * as styles from './LazyBackofficeJsonViewer.css.js';\n\nconst BackofficeJsonViewer = lazy(async () => {\n  const module = await import('./BackofficeJsonViewer.js');\n  return { default: module.BackofficeJsonViewer };\n});\n\nconst buildFallbackText = (value: unknown): string => {\n  try {\n    return JSON.stringify(value, null, 2);\n  } catch (err) {\n    let message = String(err);\n    if (err instanceof Error) {\n      message = err.message;\n    }\n    return JSON.stringify({ error: 'Failed to serialize JSON', message });\n  }\n};\n\nconst FallbackViewer = ({\n  value,\n  className,\n}: Pick<BackofficeJsonViewerProps, 'value' | 'className'>): JSX.Element => {\n  return (\n    <pre className={className ?? styles.fallback}>\n      {buildFallbackText(value)}\n    </pre>\n  );\n};\n\nexport const LazyBackofficeJsonViewer = (\n  props: BackofficeJsonViewerProps,\n): JSX.Element => {\n  return (\n    <Suspense\n      fallback={\n        <FallbackViewer value={props.value} className={props.className} />\n      }\n    >\n      <BackofficeJsonViewer {...props} />\n    </Suspense>\n  );\n};\n\nexport default LazyBackofficeJsonViewer;\n"],"mappings":";;;;AAMA,IAAM,IAAuB,EAAK,aAEzB,EAAE,UADM,MAAM,OAAO,8BACH,sBAAsB,EAC/C,EAEI,KAAqB,MAA2B;AACpD,KAAI;AACF,SAAO,KAAK,UAAU,GAAO,MAAM,EAAE;UAC9B,GAAK;EACZ,IAAI,IAAU,OAAO,EAAI;AAIzB,SAHI,aAAe,UACjB,IAAU,EAAI,UAET,KAAK,UAAU;GAAE,OAAO;GAA4B;GAAS,CAAC;;GAInE,KAAkB,EACtB,UACA,mBAGE,kBAAC,OAAD;CAAK,WAAW,KAAa;WAC1B,EAAkB,EAAM;CACrB,CAAA,EAIG,KACX,MAGE,kBAAC,GAAD;CACE,UACE,kBAAC,GAAD;EAAgB,OAAO,EAAM;EAAO,WAAW,EAAM;EAAa,CAAA;WAGpE,kBAAC,GAAD,EAAsB,GAAI,GAAS,CAAA;CAC1B,CAAA"}