@plumile/ui 0.1.61 → 0.1.62

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

@@ -1,4 +1,5 @@
 /* empty css                                         */
+/* empty css                             */
 /* empty css                              */
 //#region src/atomic/molecules/markdown/components/MarkdownDelete.css.ts
 var e = "_1gyncxq1 _1gyncxq0 txvbqb3c txvbqb3g";

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

@@ -1,5 +1,4 @@
 /* empty css                                         */
-/* empty css                             */
 /* empty css                                */
 //#region src/atomic/molecules/markdown/components/MarkdownEmphasis.css.ts
 var e = "_1pjwgns1 _1pjwgns0 txvbqb1o";

package/lib/esm/backoffice/atoms/backoffice_id_badge/BackofficeIdBadge.js

@@ -0,0 +1,18 @@
+import { CopyableText as e } from "../copyable_text/CopyableText.js";
+import { container as t } from "./backofficeIdBadge.css.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/backoffice/atoms/backoffice_id_badge/BackofficeIdBadge.tsx
+var r = ({ id: r, className: i, copyLabel: a = "Copy ID", copiedLabel: o = "Copied", truncate: s = !0 }) => /* @__PURE__ */ n("span", {
+	className: t,
+	children: /* @__PURE__ */ n(e, {
+		value: r,
+		className: i,
+		copyLabel: a,
+		copiedLabel: o,
+		truncate: s
+	})
+});
+//#endregion
+export { r as BackofficeIdBadge, r as default };
+
+//# sourceMappingURL=BackofficeIdBadge.js.map

package/lib/esm/backoffice/atoms/backoffice_id_badge/BackofficeIdBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeIdBadge.js","names":[],"sources":["../../../../../src/backoffice/atoms/backoffice_id_badge/BackofficeIdBadge.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { CopyableText } from '../copyable_text/CopyableText.js';\n\nimport * as styles from './backofficeIdBadge.css.js';\n\nexport type BackofficeIdBadgeProps = {\n  id: string;\n  className?: string;\n  copyLabel?: string;\n  copiedLabel?: string;\n  truncate?: boolean;\n};\n\nexport const BackofficeIdBadge = ({\n  id,\n  className,\n  copyLabel = 'Copy ID',\n  copiedLabel = 'Copied',\n  truncate = true,\n}: BackofficeIdBadgeProps): JSX.Element => {\n  return (\n    <span className={styles.container}>\n      <CopyableText\n        value={id}\n        className={className}\n        copyLabel={copyLabel}\n        copiedLabel={copiedLabel}\n        truncate={truncate}\n      />\n    </span>\n  );\n};\n\nexport default BackofficeIdBadge;\n"],"mappings":";;;;AAcA,IAAa,KAAqB,EAChC,OACA,cACA,eAAY,WACZ,iBAAc,UACd,cAAW,SAGT,kBAAC,QAAD;CAAM,WAAW;WACf,kBAAC,GAAD;EACE,OAAO;EACI;EACA;EACE;EACH;EACV,CAAA;CACG,CAAA"}

package/lib/esm/backoffice/atoms/backoffice_id_badge/backofficeIdBadge.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                                 */
+//#region src/backoffice/atoms/backoffice_id_badge/backofficeIdBadge.css.ts
+var e = "_8gsbvn0 txvbqb9jf txvbqbco txvbqbk4x";
+//#endregion
+export { e as container };
+
+//# sourceMappingURL=backofficeIdBadge.css.js.map

package/lib/esm/backoffice/atoms/backoffice_id_badge/backofficeIdBadge.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backofficeIdBadge.css.js","names":[],"sources":["../../../../../src/backoffice/atoms/backoffice_id_badge/backofficeIdBadge.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const container = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  minWidth: 0,\n});\n"],"mappings":""}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CopyableText.js","names":[],"sources":["../../../../../src/backoffice/atoms/copyable_text/CopyableText.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type JSX,\n} from 'react';\n\nimport { Button, cx } from '@plumile/ui';\n\nimport * as styles from './copyableText.css.js';\n\nexport type CopyableTextProps = {\n  value: string;\n  copyValue?: string;\n  className?: string;\n  truncate?: boolean;\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 CopyableText = ({\n  value,\n  copyValue,\n  className,\n  truncate = true,\n  copyLabel = 'Copy',\n  copiedLabel = 'Copied',\n}: CopyableTextProps): JSX.Element => {\n  const [copied, setCopied] = useState(false);\n  const timeoutRef = useRef<number | null>(null);\n\n  const resolvedCopyValue = copyValue ?? value;\n\n  const displayClassName = useMemo(() => {\n    let noTruncateClass: string | null = null;\n    if (!truncate) {\n      noTruncateClass = styles.valueNoTruncate;\n    }\n    return cx(styles.value, noTruncateClass, className);\n  }, [className, truncate]);\n\n  const clearTimer = useCallback(() => {\n    if (timeoutRef.current != null) {\n      window.clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      clearTimer();\n    };\n  }, [clearTimer]);\n\n  const handleCopy = useCallback(async () => {\n    clearTimer();\n    let ok = false;\n    try {\n      if (typeof navigator !== 'undefined') {\n        const { clipboard } = navigator;\n        await clipboard.writeText(resolvedCopyValue);\n        ok = true;\n      }\n    } catch {\n      ok = false;\n    }\n\n    if (!ok) {\n      ok = copyWithExecCommand(resolvedCopyValue);\n    }\n\n    if (ok) {\n      setCopied(true);\n      timeoutRef.current = window.setTimeout(() => {\n        setCopied(false);\n        timeoutRef.current = null;\n      }, 1400);\n    }\n  }, [clearTimer, resolvedCopyValue]);\n\n  const handleCopyClick = () => {\n    handleCopy().catch(() => {});\n  };\n\n  let feedbackNode: JSX.Element | null = null;\n  if (copied) {\n    feedbackNode = (\n      <span className={styles.feedback} role=\"status\" aria-live=\"polite\">\n        {copiedLabel}\n      </span>\n    );\n  }\n\n  return (\n    <span className={styles.root}>\n      <span className={displayClassName} title={value}>\n        {value}\n      </span>\n      <Button\n        type=\"button\"\n        variant=\"secondary\"\n        size=\"small\"\n        onClick={handleCopyClick}\n      >\n        {copyLabel}\n      </Button>\n      {feedbackNode}\n    </span>\n  );\n};\n\nexport default CopyableText;\n"],"mappings":";;;;;;;AAsBA,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,KAAgB,EAC3B,OAAA,GACA,cACA,cACA,cAAW,IACX,eAAY,QACZ,iBAAc,eACsB;CACpC,IAAM,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,IAAa,EAAsB,KAAK,EAExC,IAAoB,KAAa,GAEjC,IAAmB,QAAc;EACrC,IAAI,IAAiC;AAIrC,SAHK,MACH,IAAkB,IAEb,EAAG,GAAc,GAAiB,EAAU;IAClD,CAAC,GAAW,EAAS,CAAC,EAEnB,IAAa,QAAkB;AACnC,EAAI,EAAW,WAAW,SACxB,OAAO,aAAa,EAAW,QAAQ,EACvC,EAAW,UAAU;IAEtB,EAAE,CAAC;AAEN,eACe;AACX,KAAY;IAEb,CAAC,EAAW,CAAC;CAEhB,IAAM,IAAa,EAAY,YAAY;AACzC,KAAY;EACZ,IAAI,IAAK;AACT,MAAI;AACF,OAAI,OAAO,YAAc,KAAa;IACpC,IAAM,EAAE,iBAAc;AAEtB,IADA,MAAM,EAAU,UAAU,EAAkB,EAC5C,IAAK;;UAED;AACN,OAAK;;AAOP,EAJA,AACE,MAAK,EAAoB,EAAkB,EAGzC,MACF,EAAU,GAAK,EACf,EAAW,UAAU,OAAO,iBAAiB;AAE3C,GADA,EAAU,GAAM,EAChB,EAAW,UAAU;KACpB,KAAK;IAET,CAAC,GAAY,EAAkB,CAAC,EAE7B,UAAwB;AAC5B,KAAY,CAAC,YAAY,GAAG;IAG1B,IAAmC;AASvC,QARI,MACF,IACE,kBAAC,QAAD;EAAM,WAAW;EAAiB,MAAK;EAAS,aAAU;YACvD;EACI,CAAA,GAKT,kBAAC,QAAD;EAAM,WAAW;YAAjB;GACE,kBAAC,QAAD;IAAM,WAAW;IAAkB,OAAO;cACvC;IACI,CAAA;GACP,kBAAC,GAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,SAAS;cAER;IACM,CAAA;GACR;GACI"}

package/lib/esm/backoffice/atoms/copyable_text/copyableText.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                            */
+//#region src/backoffice/atoms/copyable_text/copyableText.css.ts
+var e = "_1bsx9gw0 txvbqb9jf txvbqbco txvbqbao6", t = "_1bsx9gw1 txvbqbl6f txvbqb8x txvbqbt6f txvbqbuw6 txvbqbjef", n = "_1bsx9gw2 txvbqbjex txvbqbuwf txvbqbl6x txvbqbt6o", r = "_1bsx9gw3 txvbqb8o";
+//#endregion
+export { r as feedback, e as root, t as value, n as valueNoTruncate };
+
+//# sourceMappingURL=copyableText.css.js.map

package/lib/esm/backoffice/atoms/copyable_text/copyableText.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copyableText.css.js","names":[],"sources":["../../../../../src/backoffice/atoms/copyable_text/copyableText.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const root = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 2,\n});\n\nexport const value = sprinkles({\n  overflow: 'hidden',\n  fontSize: 'sm',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  maxWidth: 'md',\n});\n\nexport const valueNoTruncate = sprinkles({\n  maxWidth: 'none',\n  whiteSpace: 'normal',\n  overflow: 'visible',\n  textOverflow: 'clip',\n});\n\nexport const feedback = sprinkles({\n  fontSize: 'xs',\n  // color: 'slate-500',\n});\n"],"mappings":""}

package/lib/esm/backoffice/atoms/environment_badge/EnvironmentBadge.js

@@ -0,0 +1,28 @@
+import { Badge as e } from "../../../atomic/atoms/badge/Badge.js";
+import { label as t } from "./environmentBadge.css.js";
+import "../../../index.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/backoffice/atoms/environment_badge/EnvironmentBadge.tsx
+var r = {
+	dev: "neutral",
+	staging: "warning",
+	prod: "danger"
+}, i = {
+	dev: "DEV",
+	staging: "STAGING",
+	prod: "PROD"
+}, a = ({ environment: a, className: o, label: s }) => {
+	let c = r[a];
+	return /* @__PURE__ */ n(e, {
+		tone: c,
+		className: o,
+		children: /* @__PURE__ */ n("span", {
+			className: t,
+			children: s ?? i[a]
+		})
+	});
+};
+//#endregion
+export { a as EnvironmentBadge, a as default };
+
+//# sourceMappingURL=EnvironmentBadge.js.map

package/lib/esm/backoffice/atoms/environment_badge/EnvironmentBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentBadge.js","names":[],"sources":["../../../../../src/backoffice/atoms/environment_badge/EnvironmentBadge.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { Badge } from '@plumile/ui';\n\nimport * as styles from './environmentBadge.css.js';\n\nexport type EnvironmentBadgeEnvironment = 'dev' | 'staging' | 'prod';\n\nexport type EnvironmentBadgeProps = {\n  environment: EnvironmentBadgeEnvironment;\n  className?: string;\n  label?: string;\n};\n\ntype BadgeTone =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'accent';\n\nconst badgeToneMap: Record<EnvironmentBadgeEnvironment, BadgeTone> = {\n  dev: 'neutral',\n  staging: 'warning',\n  prod: 'danger',\n};\n\nconst defaultLabelMap: Record<EnvironmentBadgeEnvironment, string> = {\n  dev: 'DEV',\n  staging: 'STAGING',\n  prod: 'PROD',\n};\n\nexport const EnvironmentBadge = ({\n  environment,\n  className,\n  label,\n}: EnvironmentBadgeProps): JSX.Element => {\n  const badgeTone = badgeToneMap[environment];\n  const resolvedLabel = label ?? defaultLabelMap[environment];\n\n  return (\n    <Badge tone={badgeTone} className={className}>\n      <span className={styles.label}>{resolvedLabel}</span>\n    </Badge>\n  );\n};\n\nexport default EnvironmentBadge;\n"],"mappings":";;;;;AAsBA,IAAM,IAA+D;CACnE,KAAK;CACL,SAAS;CACT,MAAM;CACP,EAEK,IAA+D;CACnE,KAAK;CACL,SAAS;CACT,MAAM;CACP,EAEY,KAAoB,EAC/B,gBACA,cACA,OAAA,QACwC;CACxC,IAAM,IAAY,EAAa;AAG/B,QACE,kBAAC,GAAD;EAAO,MAAM;EAAsB;YACjC,kBAAC,QAAD;GAAM,WAAW;aAJC,KAAS,EAAgB;GAIU,CAAA;EAC/C,CAAA"}

package/lib/esm/backoffice/atoms/environment_badge/environmentBadge.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                                */
+//#region src/backoffice/atoms/environment_badge/environmentBadge.css.ts
+var e = "dxnp3c0 txvbqb66";
+//#endregion
+export { e as label };
+
+//# sourceMappingURL=environmentBadge.css.js.map

package/lib/esm/backoffice/atoms/environment_badge/environmentBadge.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"environmentBadge.css.js","names":[],"sources":["../../../../../src/backoffice/atoms/environment_badge/environmentBadge.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const label = sprinkles({\n  textTransform: 'uppercase',\n});\n"],"mappings":""}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShortcutHint.js","names":[],"sources":["../../../../../src/backoffice/atoms/shortcut_hint/ShortcutHint.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport * as styles from './shortcutHint.css.js';\nimport { cx } from '@plumile/ui';\n\nexport type ShortcutHintProps = {\n  keys: readonly string[] | string;\n  className?: string;\n};\n\nexport const ShortcutHint = ({\n  keys,\n  className,\n}: ShortcutHintProps): JSX.Element => {\n  let parts: string[] = [];\n  if (typeof keys === 'string') {\n    parts = keys.split(' ');\n  } else {\n    parts = [...keys];\n  }\n\n  return (\n    <span className={cx(styles.container, className)} aria-hidden=\"true\">\n      {parts.map((part, index) => {\n        return (\n          <kbd key={`${part}-${index}`} className={styles.key}>\n            {part}\n          </kbd>\n        );\n      })}\n    </span>\n  );\n};\n\nexport default ShortcutHint;\n"],"mappings":";;;;;AAUA,IAAa,KAAgB,EAC3B,SACA,mBACoC;CACpC,IAAI,IAAkB,EAAE;AAOxB,QANA,AAGE,IAHE,OAAO,KAAS,WACV,EAAK,MAAM,IAAI,GAEf,CAAC,GAAG,EAAK,EAIjB,kBAAC,QAAD;EAAM,WAAW,EAAG,GAAkB,EAAU;EAAE,eAAY;YAC3D,EAAM,KAAK,GAAM,MAEd,kBAAC,OAAD;GAA8B,WAAW;aACtC;GACG,EAFI,GAAG,EAAK,GAAG,IAEf,CAER;EACG,CAAA"}

package/lib/esm/backoffice/atoms/shortcut_hint/shortcutHint.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                            */
+//#region src/backoffice/atoms/shortcut_hint/shortcutHint.css.ts
+var e = "uhyyl0 txvbqb9jf txvbqbco txvbqbanx", t = "uhyyl1 txvbqbogf txvbqbp3o txvbqbpqo txvbqbmif txvbqb9jf txvbqbco txvbqbdnx txvbqb1qx txvbqb8f txvbqbamf txvbqbf9f";
+//#endregion
+export { e as container, t as key };
+
+//# sourceMappingURL=shortcutHint.css.js.map

package/lib/esm/backoffice/atoms/shortcut_hint/shortcutHint.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shortcutHint.css.js","names":[],"sources":["../../../../../src/backoffice/atoms/shortcut_hint/shortcutHint.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n// import { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const container = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 1,\n});\n\nexport const key = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  paddingX: 1.5,\n  paddingY: 0.5,\n  borderRadius: 'sm',\n  fontSize: '2xs',\n  fontWeight: 'medium',\n  lineHeight: 'none',\n});\n"],"mappings":""}

package/lib/esm/backoffice/atoms/skeleton/Skeleton.js

@@ -0,0 +1,39 @@
+import { cx as e } from "../../../theme/tools.js";
+import { base as t, linesContainer as n, variant as r } from "./skeleton.css.js";
+import "../../../index.js";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/backoffice/atoms/skeleton/Skeleton.tsx
+var a = (e) => {
+	if (e != null) return typeof e == "number" ? `${e}px` : e;
+}, o = (e) => e === "text" ? "0.875rem" : e === "circle" ? "2.25rem" : "6rem", s = ({ variant: s = "text", width: c, height: l, className: u, style: d, lines: f }) => {
+	let p = a(l) ?? o(s), m = a(c), h = {
+		width: m,
+		height: p,
+		...d
+	};
+	if (!(s === "text" && (f ?? 1) > 1)) return /* @__PURE__ */ i("span", {
+		"aria-hidden": "true",
+		className: e(t, r[s], u),
+		style: h
+	});
+	let g = Math.max(1, f ?? 1);
+	return /* @__PURE__ */ i("span", {
+		"aria-hidden": "true",
+		className: n,
+		children: Array.from({ length: g }, (n, a) => {
+			let o = a === g - 1, s = m ?? "100%";
+			return o && (s = "70%"), /* @__PURE__ */ i("span", {
+				className: e(t, r.text, u),
+				style: {
+					...h,
+					width: s,
+					height: p
+				}
+			}, `line-${a}`);
+		})
+	});
+};
+//#endregion
+export { s as Skeleton, s as default };
+
+//# sourceMappingURL=Skeleton.js.map

package/lib/esm/backoffice/atoms/skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../../../src/backoffice/atoms/skeleton/Skeleton.tsx"],"sourcesContent":["import { type CSSProperties, type JSX } from 'react';\n\nimport * as styles from './skeleton.css.js';\nimport { cx } from '@plumile/ui';\n\nexport type SkeletonVariant = 'text' | 'block' | 'circle';\n\nexport type SkeletonProps = {\n  variant?: SkeletonVariant;\n  width?: number | string;\n  height?: number | string;\n  className?: string;\n  style?: CSSProperties;\n  lines?: number;\n};\n\nconst toCssSize = (value: number | string | undefined): string | undefined => {\n  if (value == null) {\n    return undefined;\n  }\n  if (typeof value === 'number') {\n    return `${value}px`;\n  }\n  return value;\n};\n\nconst defaultHeightForVariant = (variant: SkeletonVariant): string => {\n  if (variant === 'text') {\n    return '0.875rem';\n  }\n  if (variant === 'circle') {\n    return '2.25rem';\n  }\n  return '6rem';\n};\n\nexport const Skeleton = ({\n  variant = 'text',\n  width,\n  height,\n  className,\n  style,\n  lines,\n}: SkeletonProps): JSX.Element => {\n  const resolvedHeight = toCssSize(height) ?? defaultHeightForVariant(variant);\n  const resolvedWidth = toCssSize(width);\n\n  const baseStyle: CSSProperties = {\n    width: resolvedWidth,\n    height: resolvedHeight,\n    ...style,\n  };\n\n  const shouldRenderLines = variant === 'text' && (lines ?? 1) > 1;\n\n  if (!shouldRenderLines) {\n    return (\n      <span\n        aria-hidden=\"true\"\n        className={cx(styles.base, styles.variant[variant], className)}\n        style={baseStyle}\n      />\n    );\n  }\n\n  const count = Math.max(1, lines ?? 1);\n\n  return (\n    <span aria-hidden=\"true\" className={styles.linesContainer}>\n      {Array.from({ length: count }, (_, index) => {\n        const isLast = index === count - 1;\n        let lineWidth = resolvedWidth ?? '100%';\n        if (isLast) {\n          lineWidth = '70%';\n        }\n        return (\n          <span\n            key={`line-${index}`}\n            className={cx(styles.base, styles.variant.text, className)}\n            style={{\n              ...baseStyle,\n              width: lineWidth,\n              height: resolvedHeight,\n            }}\n          />\n        );\n      })}\n    </span>\n  );\n};\n\nexport default Skeleton;\n"],"mappings":";;;;;AAgBA,IAAM,KAAa,MAA2D;AACxE,UAAS,KAMb,QAHI,OAAO,KAAU,WACZ,GAAG,EAAM,MAEX;GAGH,KAA2B,MAC3B,MAAY,SACP,aAEL,MAAY,WACP,YAEF,QAGI,KAAY,EACvB,SAAA,IAAU,QACV,UACA,WACA,cACA,UACA,eACgC;CAChC,IAAM,IAAiB,EAAU,EAAO,IAAI,EAAwB,EAAQ,EACtE,IAAgB,EAAU,EAAM,EAEhC,IAA2B;EAC/B,OAAO;EACP,QAAQ;EACR,GAAG;EACJ;AAID,KAAI,EAFsB,MAAY,WAAW,KAAS,KAAK,GAG7D,QACE,kBAAC,QAAD;EACE,eAAY;EACZ,WAAW,EAAG,GAAa,EAAe,IAAU,EAAU;EAC9D,OAAO;EACP,CAAA;CAIN,IAAM,IAAQ,KAAK,IAAI,GAAG,KAAS,EAAE;AAErC,QACE,kBAAC,QAAD;EAAM,eAAY;EAAO,WAAW;YACjC,MAAM,KAAK,EAAE,QAAQ,GAAO,GAAG,GAAG,MAAU;GAC3C,IAAM,IAAS,MAAU,IAAQ,GAC7B,IAAY,KAAiB;AAIjC,UAHI,MACF,IAAY,QAGZ,kBAAC,QAAD;IAEE,WAAW,EAAG,GAAA,EAA4B,MAAM,EAAU;IAC1D,OAAO;KACL,GAAG;KACH,OAAO;KACP,QAAQ;KACT;IACD,EAPK,QAAQ,IAOb;IAEJ;EACG,CAAA"}

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

@@ -0,0 +1,12 @@
+/* empty css                                      */
+/* empty css                        */
+//#region src/backoffice/atoms/skeleton/skeleton.css.ts
+var e = "apytea2 apytea1 txvbqb9i6 txvbqb1rf txvbqb1g txvbqb7u", t = {
+	text: "apytea3 txvbqb1qx",
+	block: "apytea4 txvbqb1rf",
+	circle: "apytea5 txvbqb1t6"
+}, n = "apytea6 txvbqb9io txvbqbai6 txvbqbao6";
+//#endregion
+export { e as base, n as linesContainer, t as variant };
+
+//# sourceMappingURL=skeleton.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.css.js","names":[],"sources":["../../../../../src/backoffice/atoms/skeleton/skeleton.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\n\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nconst shimmer = keyframes({\n  '0%': { backgroundPosition: '100% 0' },\n  '100%': { backgroundPosition: '-100% 0' },\n});\n\nexport const base = style([\n  sprinkles({\n    display: 'block',\n    borderRadius: 'md',\n    backgroundSize: 'skeleton',\n    willChange: 'background-position',\n  }),\n  {\n    animation: `${shimmer} 1.1s ease-in-out infinite`,\n  },\n]);\n\nexport const variant = {\n  text: sprinkles({ borderRadius: 'sm' }),\n  block: sprinkles({ borderRadius: 'md' }),\n  circle: sprinkles({ borderRadius: 'full' }),\n} as const;\n\nexport const linesContainer = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n});\n"],"mappings":""}

package/lib/esm/backoffice/atoms/spinner/Spinner.js

@@ -0,0 +1,20 @@
+import { cx as e } from "../../../theme/tools.js";
+import { ButtonLoadingSpinnerSvg as t } from "../../../icons/ButtonLoadingSpinnerSvg.js";
+import { icon as n, root as r } from "./spinner.css.js";
+import "../../../index.js";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/backoffice/atoms/spinner/Spinner.tsx
+var a = ({ size: a = 18, className: o, ariaLabel: s = "Loading" }) => /* @__PURE__ */ i("span", {
+	className: e(r, o),
+	role: "status",
+	"aria-label": s,
+	children: /* @__PURE__ */ i(t, {
+		className: n,
+		width: a,
+		height: a
+	})
+});
+//#endregion
+export { a as Spinner, a as default };
+
+//# sourceMappingURL=Spinner.js.map

package/lib/esm/backoffice/atoms/spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","names":[],"sources":["../../../../../src/backoffice/atoms/spinner/Spinner.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { ButtonLoadingSpinnerSvg } from '@plumile/ui/icons/ButtonLoadingSpinnerSvg.js';\n\nimport * as styles from './spinner.css.js';\nimport { cx } from '@plumile/ui';\n\nexport type SpinnerProps = {\n  size?: number;\n  className?: string;\n  ariaLabel?: string;\n};\n\nexport const Spinner = ({\n  size = 18,\n  className,\n  ariaLabel = 'Loading',\n}: SpinnerProps): JSX.Element => {\n  return (\n    <span\n      className={cx(styles.root, className)}\n      role=\"status\"\n      aria-label={ariaLabel}\n    >\n      <ButtonLoadingSpinnerSvg\n        className={styles.icon}\n        width={size}\n        height={size}\n      />\n    </span>\n  );\n};\n\nexport default Spinner;\n"],"mappings":";;;;;;AAaA,IAAa,KAAW,EACtB,UAAO,IACP,cACA,eAAY,gBAGV,kBAAC,QAAD;CACE,WAAW,EAAG,GAAa,EAAU;CACrC,MAAK;CACL,cAAY;WAEZ,kBAAC,GAAD;EACE,WAAW;EACX,OAAO;EACP,QAAQ;EACR,CAAA;CACG,CAAA"}

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

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                       */
+//#region src/backoffice/atoms/spinner/spinner.css.ts
+var e = "k421yr1 txvbqb9jf txvbqbco txvbqbdnx", t = "k421yr2";
+//#endregion
+export { t as icon, e as root };
+
+//# sourceMappingURL=spinner.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.css.js","names":[],"sources":["../../../../../src/backoffice/atoms/spinner/spinner.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\n\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n// import { vars } from '@plumile/ui/theme/themeContract.js';\n\nconst spin = keyframes({\n  to: { transform: 'rotate(360deg)' },\n});\n\nexport const root = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n});\n\nexport const icon = style({\n  animation: `${spin} 0.9s linear infinite`,\n  // color: vars.colors['slate-600'],\n});\n"],"mappings":""}

package/lib/esm/backoffice/atoms/status_badge/StatusBadge.js

@@ -0,0 +1,31 @@
+import { Badge as e } from "../../../atomic/atoms/badge/Badge.js";
+import { content as t, dot as n } from "./statusBadge.css.js";
+import "../../../index.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/backoffice/atoms/status_badge/StatusBadge.tsx
+var a = {
+	active: "success",
+	disabled: "neutral",
+	pending: "info",
+	error: "danger",
+	warning: "warning",
+	info: "info"
+}, o = ({ tone: o, children: s, showDot: c = !1, className: l, loading: u }) => {
+	let d = a[o], f = null;
+	return c && (f = /* @__PURE__ */ r("span", {
+		className: n,
+		"aria-hidden": "true"
+	})), /* @__PURE__ */ r(e, {
+		tone: d,
+		className: l,
+		loading: u,
+		children: /* @__PURE__ */ i("span", {
+			className: t,
+			children: [f, s]
+		})
+	});
+};
+//#endregion
+export { o as StatusBadge, o as default };
+
+//# sourceMappingURL=StatusBadge.js.map

package/lib/esm/backoffice/atoms/status_badge/StatusBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.js","names":[],"sources":["../../../../../src/backoffice/atoms/status_badge/StatusBadge.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { Badge } from '@plumile/ui';\n\nimport * as styles from './statusBadge.css.js';\n\nexport type StatusTone =\n  | 'active'\n  | 'disabled'\n  | 'pending'\n  | 'error'\n  | 'warning'\n  | 'info';\n\nexport type StatusBadgeProps = {\n  tone: StatusTone;\n  children: ReactNode;\n  showDot?: boolean;\n  className?: string;\n  loading?: boolean;\n};\n\ntype BadgeTone =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'accent';\n\nconst toneMap: Record<StatusTone, BadgeTone> = {\n  active: 'success',\n  disabled: 'neutral',\n  pending: 'info',\n  error: 'danger',\n  warning: 'warning',\n  info: 'info',\n};\n\nexport const StatusBadge = ({\n  tone,\n  children,\n  showDot = false,\n  className,\n  loading,\n}: StatusBadgeProps): JSX.Element => {\n  const badgeTone = toneMap[tone];\n\n  let dotNode: JSX.Element | null = null;\n  if (showDot) {\n    dotNode = <span className={styles.dot} aria-hidden=\"true\" />;\n  }\n\n  return (\n    <Badge tone={badgeTone} className={className} loading={loading}>\n      <span className={styles.content}>\n        {dotNode}\n        {children}\n      </span>\n    </Badge>\n  );\n};\n\nexport default StatusBadge;\n"],"mappings":";;;;;AA8BA,IAAM,IAAyC;CAC7C,QAAQ;CACR,UAAU;CACV,SAAS;CACT,OAAO;CACP,SAAS;CACT,MAAM;CACP,EAEY,KAAe,EAC1B,SACA,aACA,aAAU,IACV,cACA,iBACmC;CACnC,IAAM,IAAY,EAAQ,IAEtB,IAA8B;AAKlC,QAJI,MACF,IAAU,kBAAC,QAAD;EAAM,WAAW;EAAY,eAAY;EAAS,CAAA,GAI5D,kBAAC,GAAD;EAAO,MAAM;EAAsB;EAAoB;YACrD,kBAAC,QAAD;GAAM,WAAW;aAAjB,CACG,GACA,EACI;;EACD,CAAA"}

package/lib/esm/backoffice/atoms/status_badge/statusBadge.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                           */
+//#region src/backoffice/atoms/status_badge/statusBadge.css.ts
+var e = "f2f8uw0 txvbqb9jf txvbqbco txvbqbanx", t = "f2f8uw1 txvbqbtvo txvbqbc56 txvbqb1t6 txvbqbuzh";
+//#endregion
+export { e as content, t as dot };
+
+//# sourceMappingURL=statusBadge.css.js.map

package/lib/esm/backoffice/atoms/status_badge/statusBadge.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"statusBadge.css.js","names":[],"sources":["../../../../../src/backoffice/atoms/status_badge/statusBadge.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const content = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 1,\n});\n\nexport const dot = sprinkles({\n  width: 2,\n  height: 2,\n  borderRadius: 'full',\n  backgroundColor: 'current',\n});\n"],"mappings":""}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","names":[],"sources":["../../../../../src/backoffice/atoms/tag/Tag.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useId } from 'react';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { ModalCloseSvg } from '@plumile/ui/icons/ModalCloseSvg.js';\n\nimport * as styles from './tag.css.js';\nimport { cx } from '@plumile/ui';\n\nexport type TagTone = NonNullable<\n  NonNullable<RecipeVariants<typeof styles.rootRecipe>>['tone']\n>;\n\nexport type TagProps = {\n  children: ReactNode;\n  tone?: TagTone;\n  className?: string;\n  onRemove?: () => void;\n  removeLabel?: string;\n};\n\nexport const Tag = ({\n  children,\n  tone = 'neutral',\n  className,\n  onRemove,\n  removeLabel = 'Remove',\n}: TagProps): JSX.Element => {\n  const labelId = useId();\n  const isRemovable = typeof onRemove === 'function';\n\n  let removeButtonNode: JSX.Element | null = null;\n  if (isRemovable) {\n    removeButtonNode = (\n      <button\n        type=\"button\"\n        className={styles.removeButton}\n        onClick={onRemove}\n        aria-label={removeLabel}\n        aria-describedby={labelId}\n      >\n        <ModalCloseSvg width={14} height={14} aria-hidden=\"true\" />\n      </button>\n    );\n  }\n\n  return (\n    <span className={cx(styles.rootRecipe({ tone }), className)}>\n      <span id={labelId}>{children}</span>\n      {removeButtonNode}\n    </span>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;AAoBA,IAAa,KAAO,EAClB,aACA,UAAO,WACP,cACA,aACA,iBAAc,eACa;CAC3B,IAAM,IAAU,GAAO,EACjB,IAAc,OAAO,KAAa,YAEpC,IAAuC;AAe3C,QAdI,MACF,IACE,kBAAC,UAAD;EACE,MAAK;EACL,WAAW;EACX,SAAS;EACT,cAAY;EACZ,oBAAkB;YAElB,kBAAC,GAAD;GAAe,OAAO;GAAI,QAAQ;GAAI,eAAY;GAAS,CAAA;EACpD,CAAA,GAKX,kBAAC,QAAD;EAAM,WAAW,EAAG,EAAkB,EAAE,SAAM,CAAC,EAAE,EAAU;YAA3D,CACE,kBAAC,QAAD;GAAM,IAAI;GAAU;GAAgB,CAAA,EACnC,EACI"}

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