@plumile/ui 0.1.60 → 0.1.62

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"}

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

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                                    */
+//#region src/backoffice/molecules/backoffice_json_viewer/backofficeJsonViewer.css.ts
+var e = "_1d30zcn0 txvbqb9io txvbqbai6 txvbqbao6 txvbqbu6f", t = "_1d30zcn1 txvbqb9io txvbqbco txvbqbdoo txvbqbaof", n = "_1d30zcn2 txvbqb8x txvbqbamf txvbqbv8r", r = "_1d30zcn3 txvbqb9jf txvbqbco txvbqbao6", i = "_1d30zcn4 txvbqbfbo txvbqblaf txvbqb1co txvbqb1qf txvbqbwf txvbqb1ro txvbqbv8p txvbqbal6 txvbqb8o txvbqbf4o txvbqbl66 txvbqbisx txvbqbuwo", a = "_1d30zcn5 txvbqbiqx";
+//#endregion
+export { r as actions, e as container, t as header, i as pre, n as title, a as truncated };
+
+//# sourceMappingURL=backofficeJsonViewer.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"backofficeJsonViewer.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_json_viewer/backofficeJsonViewer.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: 2,\n  width: 'full',\n});\n\nexport const header = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: 3,\n});\n\nexport const title = sprinkles({\n  fontSize: 'sm',\n  fontWeight: 'medium',\n  color: 'textSecondary',\n});\n\nexport const actions = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 2,\n});\n\nexport const pre = sprinkles({\n  margin: 0,\n  padding: 4,\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'border',\n  borderRadius: 'lg',\n  color: 'text',\n  fontFamily: 'mono',\n  fontSize: 'xs',\n  lineHeight: 1.45,\n  overflow: 'auto',\n  maxHeight: 96,\n  whiteSpace: 'pre',\n});\n\nexport const truncated = sprinkles({\n  maxHeight: 48,\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/backoffice_key_value_list/BackofficeKeyValueList.js

@@ -0,0 +1,22 @@
+import { cx as e } from "../../../theme/tools.js";
+import { item as t, itemSurface as n, label as r, labelSize as i, list as a, value as o } from "./backofficeKeyValueList.css.js";
+import "../../../index.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/backoffice/molecules/backoffice_key_value_list/BackofficeKeyValueList.tsx
+var l = ({ items: l }) => /* @__PURE__ */ s("dl", {
+	className: a,
+	children: l.map((a) => /* @__PURE__ */ c("div", {
+		className: e(t, n),
+		children: [/* @__PURE__ */ s("dt", {
+			className: e(r, i),
+			children: a.label
+		}), /* @__PURE__ */ s("dd", {
+			className: o,
+			children: a.value
+		})]
+	}, a.id))
+});
+//#endregion
+export { l as BackofficeKeyValueList, l as default };
+
+//# sourceMappingURL=BackofficeKeyValueList.js.map

package/lib/esm/backoffice/molecules/backoffice_key_value_list/BackofficeKeyValueList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeKeyValueList.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_key_value_list/BackofficeKeyValueList.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport * as styles from './backofficeKeyValueList.css.js';\nimport { cx } from '@plumile/ui';\n\nexport type BackofficeKeyValueItem = {\n  id: string;\n  label: ReactNode;\n  value: ReactNode;\n};\n\nexport type BackofficeKeyValueListProps = {\n  items: readonly BackofficeKeyValueItem[];\n};\n\nexport const BackofficeKeyValueList = ({\n  items,\n}: BackofficeKeyValueListProps): JSX.Element => {\n  return (\n    <dl className={styles.list}>\n      {items.map((item) => {\n        return (\n          <div key={item.id} className={cx(styles.item, styles.itemSurface)}>\n            <dt className={cx(styles.label, styles.labelSize)}>{item.label}</dt>\n            <dd className={styles.value}>{item.value}</dd>\n          </div>\n        );\n      })}\n    </dl>\n  );\n};\n\nexport default BackofficeKeyValueList;\n"],"mappings":";;;;;AAeA,IAAa,KAA0B,EACrC,eAGE,kBAAC,MAAD;CAAI,WAAW;WACZ,EAAM,KAAK,MAER,kBAAC,OAAD;EAAmB,WAAW,EAAG,GAAa,EAAmB;YAAjE,CACE,kBAAC,MAAD;GAAI,WAAW,EAAG,GAAc,EAAiB;aAAG,EAAK;GAAW,CAAA,EACpE,kBAAC,MAAD;GAAI,WAAW;aAAe,EAAK;GAAW,CAAA,CAC1C;IAHI,EAAK,GAGT,CAER;CACC,CAAA"}

package/lib/esm/backoffice/molecules/backoffice_key_value_list/backofficeKeyValueList.css.js

@@ -0,0 +1,7 @@
+/* empty css                                      */
+//#region src/backoffice/molecules/backoffice_key_value_list/backofficeKeyValueList.css.ts
+var e = "tx0dqq0", t = "tx0dqq1", n = "tx0dqq2", r = "tx0dqq3", i = "tx0dqq4", a = "tx0dqq5";
+//#endregion
+export { t as item, n as itemSurface, r as label, i as labelSize, e as list, a as value };
+
+//# sourceMappingURL=backofficeKeyValueList.css.js.map

package/lib/esm/backoffice/molecules/backoffice_key_value_list/backofficeKeyValueList.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backofficeKeyValueList.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_key_value_list/backofficeKeyValueList.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const list = style({\n  display: 'grid',\n  gap: vars.spacing[2],\n});\n\nexport const item = style({\n  display: 'grid',\n  gridTemplateColumns: vars.gridTemplateColumns.keyValueSplit,\n  gap: vars.spacing[2],\n  alignItems: 'center',\n  paddingTop: vars.spacing[2],\n  paddingBottom: vars.spacing[2],\n  paddingLeft: vars.spacing[3],\n  paddingRight: vars.spacing[3],\n  borderRadius: vars.borderRadius.lg,\n  backgroundColor: vars.colors.surfaceMuted,\n});\n\nexport const itemSurface = style({\n  borderWidth: vars.borderWidth.default,\n  borderStyle: 'solid',\n  borderColor: vars.colors.borderSubtle,\n});\n\nexport const label = style({\n  color: vars.colors.textMuted,\n  textTransform: 'uppercase',\n  letterSpacing: vars.letterSpacing.caps,\n  fontWeight: vars.fontWeight.semibold,\n});\n\nexport const labelSize = style({\n  fontSize: vars.fontSize.xs,\n  lineHeight: vars.lineHeight.xs,\n});\n\nexport const value = style({\n  fontSize: vars.fontSize.base,\n  lineHeight: vars.lineHeight.base,\n  color: vars.colors.text,\n  margin: 0,\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/backoffice_load_more/BackofficeLoadMore.js

@@ -0,0 +1,27 @@
+import { Spinner as e } from "../../atoms/spinner/Spinner.js";
+import { container as t, left as n, meta as r } from "./backofficeLoadMore.css.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/backoffice/molecules/backoffice_load_more/BackofficeLoadMore.tsx
+var o = ({ hasNextPage: o, isLoading: s, loadMoreLabel: c = "More results available", endLabel: l = "End of results", loadingLabel: u = "Loading more…", meta: d }) => {
+	let f = l;
+	o && (f = c), s && (f = u);
+	let p = null;
+	return s && (p = /* @__PURE__ */ i(e, { size: 16 })), /* @__PURE__ */ i("div", {
+		className: t,
+		children: /* @__PURE__ */ a("div", {
+			className: n,
+			children: [
+				p,
+				/* @__PURE__ */ i("span", {
+					className: r,
+					children: f
+				}),
+				d
+			]
+		})
+	});
+};
+//#endregion
+export { o as BackofficeLoadMore, o as default };
+
+//# sourceMappingURL=BackofficeLoadMore.js.map

package/lib/esm/backoffice/molecules/backoffice_load_more/BackofficeLoadMore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeLoadMore.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_load_more/BackofficeLoadMore.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { Spinner } from '../../atoms/spinner/Spinner.js';\n\nimport * as styles from './backofficeLoadMore.css.js';\n\nexport type BackofficeLoadMoreProps = {\n  hasNextPage: boolean;\n  isLoading: boolean;\n  loadMoreLabel?: string;\n  endLabel?: string;\n  loadingLabel?: string;\n  meta?: ReactNode;\n};\n\nexport const BackofficeLoadMore = ({\n  hasNextPage,\n  isLoading,\n  loadMoreLabel = 'More results available',\n  endLabel = 'End of results',\n  loadingLabel = 'Loading more…',\n  meta,\n}: BackofficeLoadMoreProps): JSX.Element => {\n  let statusLabel = endLabel;\n  if (hasNextPage) {\n    statusLabel = loadMoreLabel;\n  }\n  if (isLoading) {\n    statusLabel = loadingLabel;\n  }\n\n  let spinnerNode: JSX.Element | null = null;\n  if (isLoading) {\n    spinnerNode = <Spinner size={16} />;\n  }\n\n  return (\n    <div className={styles.container}>\n      <div className={styles.left}>\n        {spinnerNode}\n        <span className={styles.meta}>{statusLabel}</span>\n        {meta}\n      </div>\n    </div>\n  );\n};\n\nexport default BackofficeLoadMore;\n"],"mappings":";;;;AAcA,IAAa,KAAsB,EACjC,gBACA,cACA,mBAAgB,0BAChB,cAAW,kBACX,kBAAe,iBACf,MAAA,QAC0C;CAC1C,IAAI,IAAc;AAIlB,CAHI,MACF,IAAc,IAEZ,MACF,IAAc;CAGhB,IAAI,IAAkC;AAKtC,QAJI,MACF,IAAc,kBAAC,GAAD,EAAS,MAAM,IAAM,CAAA,GAInC,kBAAC,OAAD;EAAK,WAAW;YACd,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACG;IACD,kBAAC,QAAD;KAAM,WAAW;eAAc;KAAmB,CAAA;IACjD;IACG;;EACF,CAAA"}

package/lib/esm/backoffice/molecules/backoffice_load_more/backofficeLoadMore.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                                  */
+//#region src/backoffice/molecules/backoffice_load_more/backofficeLoadMore.css.ts
+var e = "_1pc2pbg0 txvbqbnvf txvbqboio txvbqbp5o txvbqblxf txvbqb9io txvbqbco txvbqbdoo txvbqbaof txvbqb12f txvbqb4ro txvbqb1qf txvbqb2cx txvbqbuzn", t = "_1pc2pbg1 txvbqb9jf txvbqbco txvbqbao6 txvbqbk4x", n = "_1pc2pbg2 txvbqb8x txvbqbv8r txvbqbl6f txvbqbt6f txvbqbuw6";
+//#endregion
+export { e as container, t as left, n as meta };
+
+//# sourceMappingURL=backofficeLoadMore.css.js.map

package/lib/esm/backoffice/molecules/backoffice_load_more/backofficeLoadMore.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backofficeLoadMore.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_load_more/backofficeLoadMore.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: 3,\n  paddingY: 3,\n  paddingX: 4,\n  borderWidth: 0,\n  borderTopWidth: 'default',\n  borderStyle: 'solid',\n  borderTopColor: 'borderLight',\n  backgroundColor: 'white',\n});\n\nexport const left = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 2,\n  minWidth: 0,\n});\n\nexport const meta = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/backoffice_page_header/BackofficePageHeader.js

@@ -0,0 +1,31 @@
+import { cx as e } from "../../../theme/tools.js";
+import { container as t, left as n, title as r, titleRow as i } from "./backofficePageHeader.css.js";
+import "../../../index.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/backoffice/molecules/backoffice_page_header/BackofficePageHeader.tsx
+var s = ({ title: s, subtitle: c, actions: l, meta: u, className: d }) => /* @__PURE__ */ o("div", {
+	className: e(t, d),
+	children: [/* @__PURE__ */ o("div", {
+		className: n,
+		children: [/* @__PURE__ */ o("div", {
+			className: i,
+			children: [/* @__PURE__ */ a("h1", {
+				className: r,
+				children: s
+			}), u != null && /* @__PURE__ */ a("div", {
+				className: "_1puq2a85",
+				children: u
+			})]
+		}), c != null && (typeof c != "string" || c.trim() !== "") && /* @__PURE__ */ a("p", {
+			className: "_1puq2a84",
+			children: c
+		})]
+	}), l != null && /* @__PURE__ */ a("div", {
+		className: "_1puq2a86",
+		children: l
+	})]
+});
+//#endregion
+export { s as BackofficePageHeader, s as default };
+
+//# sourceMappingURL=BackofficePageHeader.js.map

package/lib/esm/backoffice/molecules/backoffice_page_header/BackofficePageHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficePageHeader.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_page_header/BackofficePageHeader.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { cx } from '@plumile/ui';\n\nimport * as styles from './backofficePageHeader.css.js';\n\nexport type BackofficePageHeaderProps = {\n  title: string;\n  subtitle?: ReactNode;\n  actions?: ReactNode;\n  meta?: ReactNode;\n  className?: string;\n};\n\nexport const BackofficePageHeader = ({\n  title,\n  subtitle,\n  actions,\n  meta,\n  className,\n}: BackofficePageHeaderProps): JSX.Element => {\n  return (\n    <div className={cx(styles.container, className)}>\n      <div className={styles.left}>\n        <div className={styles.titleRow}>\n          <h1 className={styles.title}>{title}</h1>\n          {meta != null && <div className={styles.metaRow}>{meta}</div>}\n        </div>\n        {subtitle != null &&\n          (typeof subtitle !== 'string' || subtitle.trim() !== '') && (\n            <p className={styles.subtitle}>{subtitle}</p>\n          )}\n      </div>\n      {actions != null && <div className={styles.actions}>{actions}</div>}\n    </div>\n  );\n};\n\nexport default BackofficePageHeader;\n"],"mappings":";;;;;AAcA,IAAa,KAAwB,EACnC,OAAA,GACA,UAAA,GACA,SAAA,GACA,SACA,mBAGE,kBAAC,OAAD;CAAK,WAAW,EAAG,GAAkB,EAAU;WAA/C,CACE,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,MAAD;IAAI,WAAW;cAAe;IAAW,CAAA,EACxC,KAAQ,QAAQ,kBAAC,OAAD;IAAK,WAAW;cAAiB;IAAW,CAAA,CACzD;MACL,KAAY,SACV,OAAO,KAAa,YAAY,EAAS,MAAM,KAAK,OACnD,kBAAC,KAAD;GAAG,WAAW;aAAkB;GAAa,CAAA,CAE7C;KACL,KAAW,QAAQ,kBAAC,OAAD;EAAK,WAAW;YAAiB;EAAc,CAAA,CAC/D"}

package/lib/esm/backoffice/molecules/backoffice_page_header/backofficePageHeader.css.js

@@ -0,0 +1,7 @@
+/* empty css                                    */
+//#region src/backoffice/molecules/backoffice_page_header/backofficePageHeader.css.ts
+var e = "_1puq2a80", t = "_1puq2a81", n = "_1puq2a82", r = "_1puq2a83", i = "_1puq2a84", a = "_1puq2a85", o = "_1puq2a86";
+//#endregion
+export { o as actions, e as container, t as left, a as metaRow, i as subtitle, r as title, n as titleRow };
+
+//# sourceMappingURL=backofficePageHeader.css.js.map