@plumile/ui 0.1.61 → 0.1.62

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

@@ -0,0 +1 @@
+{"version":3,"file":"backofficePageHeader.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_page_header/backofficePageHeader.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  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  gap: vars.spacing[4],\n  flexWrap: 'wrap',\n});\n\nexport const left = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[2],\n  minWidth: 0,\n  flex: 1,\n});\n\nexport const titleRow = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n  flexWrap: 'wrap',\n});\n\nexport const title = style({\n  fontSize: vars.fontSize['2xl'],\n  lineHeight: vars.lineHeight['2xl'],\n  fontWeight: vars.fontWeight.semibold,\n  color: vars.colors.text,\n  margin: 0,\n});\n\nexport const subtitle = style({\n  margin: 0,\n  fontSize: vars.fontSize.base,\n  lineHeight: vars.lineHeight.base,\n  color: vars.colors.textSecondary,\n});\n\nexport const metaRow = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n  flexWrap: 'wrap',\n});\n\nexport const actions = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n  flexWrap: 'wrap',\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/backoffice_relations_menu/BackofficeRelationsMenu.js

@@ -0,0 +1,68 @@
+import { cx as e } from "../../../theme/tools.js";
+import { Button as t } from "../../../atomic/atoms/button/Button.js";
+import { container as n, triggerIcon as r, triggerIconOpen as i } from "./backofficeRelationsMenu.css.js";
+import { ChevronDownIcon as a } from "../../../svg/ChevronDownIcon.js";
+import "../../../index.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useEffect as c, useRef as l, useState as u } from "react";
+import { Link as d } from "@plumile/router";
+//#region src/backoffice/molecules/backoffice_relations_menu/BackofficeRelationsMenu.tsx
+var f = ({ label: f = "Relations", items: p }) => {
+	let [m, h] = u(!1), g = l(null);
+	return c(() => {
+		if (!m) return;
+		let e = (e) => {
+			e.target instanceof Node && (g.current?.contains(e.target) || h(!1));
+		};
+		return document.addEventListener("pointerdown", e), () => {
+			document.removeEventListener("pointerdown", e);
+		};
+	}, [m]), p.length === 0 ? /* @__PURE__ */ o(t, {
+		type: "button",
+		variant: "secondary",
+		size: "small",
+		disabled: !0,
+		children: f
+	}) : /* @__PURE__ */ s("div", {
+		className: n,
+		ref: g,
+		children: [/* @__PURE__ */ s(t, {
+			type: "button",
+			variant: "secondary",
+			size: "small",
+			onClick: () => {
+				h((e) => !e);
+			},
+			"aria-expanded": m,
+			"aria-haspopup": "menu",
+			children: [f, /* @__PURE__ */ o(a, {
+				size: 14,
+				className: e(r, { [i]: m })
+			})]
+		}), m && /* @__PURE__ */ o("div", {
+			className: "_16f61fj3",
+			role: "menu",
+			children: p.map((e) => {
+				let t = null;
+				return typeof e.count == "number" && (t = e.count), /* @__PURE__ */ s(d, {
+					to: e.href,
+					className: "_16f61fj4",
+					onClick: (t) => {
+						h(!1), (e.onClick?.(t))?.catch(() => {});
+					},
+					children: [/* @__PURE__ */ o("span", {
+						className: "_16f61fj5",
+						children: e.label
+					}), t != null && /* @__PURE__ */ o("span", {
+						className: "_16f61fj6",
+						children: t
+					})]
+				}, e.id);
+			})
+		})]
+	});
+};
+//#endregion
+export { f as BackofficeRelationsMenu, f as default };
+
+//# sourceMappingURL=BackofficeRelationsMenu.js.map

package/lib/esm/backoffice/molecules/backoffice_relations_menu/BackofficeRelationsMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeRelationsMenu.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_relations_menu/BackofficeRelationsMenu.tsx"],"sourcesContent":["import {\n  type JSX,\n  type MouseEvent as ReactMouseEvent,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Link } from '@plumile/router';\n\nimport { Button, ChevronDownIcon, cx } from '@plumile/ui';\n\nimport * as styles from './backofficeRelationsMenu.css.js';\n\nexport type BackofficeRelationsMenuItem = {\n  id: string;\n  label: string;\n  count?: number | null;\n  href: string;\n  onClick?: (event: ReactMouseEvent<HTMLAnchorElement>) => void | Promise<void>;\n};\n\nexport type BackofficeRelationsMenuProps = {\n  label?: string;\n  items: readonly BackofficeRelationsMenuItem[];\n};\n\nexport const BackofficeRelationsMenu = ({\n  label = 'Relations',\n  items,\n}: BackofficeRelationsMenuProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    if (!isOpen) {\n      return undefined;\n    }\n\n    const handleClick = (event: PointerEvent) => {\n      if (!(event.target instanceof Node)) {\n        return;\n      }\n      if (containerRef.current?.contains(event.target)) {\n        return;\n      }\n      setIsOpen(false);\n    };\n\n    document.addEventListener('pointerdown', handleClick);\n    return () => {\n      document.removeEventListener('pointerdown', handleClick);\n    };\n  }, [isOpen]);\n\n  if (items.length === 0) {\n    return (\n      <Button type=\"button\" variant=\"secondary\" size=\"small\" disabled>\n        {label}\n      </Button>\n    );\n  }\n\n  return (\n    <div className={styles.container} ref={containerRef}>\n      <Button\n        type=\"button\"\n        variant=\"secondary\"\n        size=\"small\"\n        onClick={() => {\n          setIsOpen((prev) => {\n            return !prev;\n          });\n        }}\n        aria-expanded={isOpen}\n        aria-haspopup=\"menu\"\n      >\n        {label}\n        <ChevronDownIcon\n          size={14}\n          className={cx(styles.triggerIcon, {\n            [styles.triggerIconOpen]: isOpen,\n          })}\n        />\n      </Button>\n\n      {isOpen && (\n        <div className={styles.menu} role=\"menu\">\n          {items.map((item) => {\n            let countValue: number | null = null;\n            if (typeof item.count === 'number') {\n              countValue = item.count;\n            }\n            return (\n              <Link\n                key={item.id}\n                to={item.href}\n                className={styles.menuItem}\n                onClick={(event: ReactMouseEvent<HTMLAnchorElement>) => {\n                  setIsOpen(false);\n                  const result = item.onClick?.(event);\n                  if (result != null) {\n                    result.catch(() => {});\n                  }\n                }}\n              >\n                <span className={styles.itemLabel}>{item.label}</span>\n                {countValue != null && (\n                  <span className={styles.count}>{countValue}</span>\n                )}\n              </Link>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default BackofficeRelationsMenu;\n"],"mappings":";;;;;;;;;AA0BA,IAAa,KAA2B,EACtC,WAAQ,aACR,eAC+C;CAC/C,IAAM,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,IAAe,EAA8B,KAAK;AA+BxD,QA7BA,QAAgB;AACd,MAAI,CAAC,EACH;EAGF,IAAM,KAAe,MAAwB;AACrC,KAAM,kBAAkB,SAG1B,EAAa,SAAS,SAAS,EAAM,OAAO,IAGhD,EAAU,GAAM;;AAIlB,SADA,SAAS,iBAAiB,eAAe,EAAY,QACxC;AACX,YAAS,oBAAoB,eAAe,EAAY;;IAEzD,CAAC,EAAO,CAAC,EAER,EAAM,WAAW,IAEjB,kBAAC,GAAD;EAAQ,MAAK;EAAS,SAAQ;EAAY,MAAK;EAAQ,UAAA;YACpD;EACM,CAAA,GAKX,kBAAC,OAAD;EAAK,WAAW;EAAkB,KAAK;YAAvC,CACE,kBAAC,GAAD;GACE,MAAK;GACL,SAAQ;GACR,MAAK;GACL,eAAe;AACb,OAAW,MACF,CAAC,EACR;;GAEJ,iBAAe;GACf,iBAAc;aAVhB,CAYG,GACD,kBAAC,GAAD;IACE,MAAM;IACN,WAAW,EAAG,GAAoB,GAC/B,IAAyB,GAC3B,CAAC;IACF,CAAA,CACK;MAER,KACC,kBAAC,OAAD;GAAK,WAAW;GAAa,MAAK;aAC/B,EAAM,KAAK,MAAS;IACnB,IAAI,IAA4B;AAIhC,WAHI,OAAO,EAAK,SAAU,aACxB,IAAa,EAAK,QAGlB,kBAAC,GAAD;KAEE,IAAI,EAAK;KACT,WAAW;KACX,UAAU,MAA8C;AAGtD,MAFA,EAAU,GAAM,GACD,EAAK,UAAU,EAAM,GAE3B,YAAY,GAAG;;eAR5B,CAYE,kBAAC,QAAD;MAAM,WAAW;gBAAmB,EAAK;MAAa,CAAA,EACrD,KAAc,QACb,kBAAC,QAAD;MAAM,WAAW;gBAAe;MAAkB,CAAA,CAE/C;OAfA,EAAK,GAeL;KAET;GACE,CAAA,CAEJ"}

package/lib/esm/backoffice/molecules/backoffice_relations_menu/backofficeRelationsMenu.css.js

@@ -0,0 +1,7 @@
+/* empty css                                       */
+//#region src/backoffice/molecules/backoffice_relations_menu/backofficeRelationsMenu.css.ts
+var e = "_16f61fj0", t = "_16f61fj1", n = "_16f61fj2", r = "_16f61fj3", i = "_16f61fj4", a = "_16f61fj5", o = "_16f61fj6";
+//#endregion
+export { e as container, o as count, a as itemLabel, r as menu, i as menuItem, t as triggerIcon, n as triggerIconOpen };
+
+//# sourceMappingURL=backofficeRelationsMenu.css.js.map

package/lib/esm/backoffice/molecules/backoffice_relations_menu/backofficeRelationsMenu.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backofficeRelationsMenu.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_relations_menu/backofficeRelationsMenu.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const container = style({\n  position: 'relative',\n  display: 'inline-flex',\n});\n\nexport const triggerIcon = style({\n  transitionProperty: 'transform',\n  transitionDuration: vars.transitionDuration[150],\n  transitionTimingFunction: vars.transitionTimingFunction.ease,\n});\n\nexport const triggerIconOpen = style({\n  transform: 'rotate(180deg)',\n});\n\nexport const menu = style({\n  position: 'absolute',\n  right: 0,\n  top: vars.spacing.full,\n  marginTop: vars.spacing[2],\n  minWidth: vars.spacing[64],\n  backgroundColor: vars.colors.surface,\n  borderWidth: vars.borderWidth.default,\n  borderStyle: 'solid',\n  borderColor: vars.colors.borderSubtle,\n  borderRadius: vars.borderRadius.lg,\n  boxShadow: vars.boxShadow.md,\n  padding: vars.spacing[2],\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[1],\n  zIndex: vars.zIndex[20],\n});\n\nexport const menuItem = style([\n  {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: vars.spacing[2],\n    paddingTop: vars.spacing[2],\n    paddingBottom: vars.spacing[2],\n    paddingLeft: vars.spacing[3],\n    paddingRight: vars.spacing[3],\n    borderRadius: vars.borderRadius.md,\n    color: vars.colors.text,\n    textDecoration: 'none',\n    fontSize: vars.fontSize.sm,\n    lineHeight: vars.lineHeight.sm,\n  },\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.surfaceSecondary,\n      },\n    },\n  },\n]);\n\nexport const itemLabel = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n});\n\nexport const count = style({\n  fontSize: vars.fontSize.xs,\n  lineHeight: vars.lineHeight.xs,\n  color: vars.colors.textMuted,\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/backoffice_table_skeleton/BackofficeTableSkeleton.js

@@ -0,0 +1,37 @@
+import { Skeleton as e } from "../../atoms/skeleton/Skeleton.js";
+import { body as t, cell as n, container as r, header as i, headerCell as a, row as o } from "./backofficeTableSkeleton.css.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/backoffice/molecules/backoffice_table_skeleton/BackofficeTableSkeleton.tsx
+var l = ({ rows: l = 6, columns: u = 4 }) => {
+	let d = Array.from({ length: u }, (t, n) => /* @__PURE__ */ s("div", {
+		className: a,
+		children: /* @__PURE__ */ s(e, {
+			variant: "text",
+			width: "70%"
+		})
+	}, `header-${n}`)), f = Array.from({ length: l }, (t, r) => /* @__PURE__ */ s("div", {
+		className: o,
+		children: Array.from({ length: u }, (t, i) => /* @__PURE__ */ s("div", {
+			className: n,
+			children: /* @__PURE__ */ s(e, {
+				variant: "text",
+				width: "80%"
+			})
+		}, `cell-${r}-${i}`))
+	}, `row-${r}`));
+	return /* @__PURE__ */ c("div", {
+		className: r,
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ s("div", {
+			className: i,
+			children: d
+		}), /* @__PURE__ */ s("div", {
+			className: t,
+			children: f
+		})]
+	});
+};
+//#endregion
+export { l as BackofficeTableSkeleton, l as default };
+
+//# sourceMappingURL=BackofficeTableSkeleton.js.map

package/lib/esm/backoffice/molecules/backoffice_table_skeleton/BackofficeTableSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeTableSkeleton.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_table_skeleton/BackofficeTableSkeleton.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { Skeleton } from '../../atoms/skeleton/Skeleton.js';\nimport * as styles from './backofficeTableSkeleton.css.js';\n\nexport type BackofficeTableSkeletonProps = {\n  rows?: number;\n  columns?: number;\n};\n\nexport const BackofficeTableSkeleton = ({\n  rows = 6,\n  columns = 4,\n}: BackofficeTableSkeletonProps): JSX.Element => {\n  const headerCells = Array.from({ length: columns }, (_, index) => {\n    return (\n      <div key={`header-${index}`} className={styles.headerCell}>\n        <Skeleton variant=\"text\" width=\"70%\" />\n      </div>\n    );\n  });\n\n  const bodyRows = Array.from({ length: rows }, (_, rowIndex) => {\n    return (\n      <div key={`row-${rowIndex}`} className={styles.row}>\n        {Array.from({ length: columns }, (_, colIndex) => {\n          return (\n            <div key={`cell-${rowIndex}-${colIndex}`} className={styles.cell}>\n              <Skeleton variant=\"text\" width=\"80%\" />\n            </div>\n          );\n        })}\n      </div>\n    );\n  });\n\n  return (\n    <div className={styles.container} aria-hidden=\"true\">\n      <div className={styles.header}>{headerCells}</div>\n      <div className={styles.body}>{bodyRows}</div>\n    </div>\n  );\n};\n\nexport default BackofficeTableSkeleton;\n"],"mappings":";;;;AAUA,IAAa,KAA2B,EACtC,UAAO,GACP,aAAU,QACqC;CAC/C,IAAM,IAAc,MAAM,KAAK,EAAE,QAAQ,GAAS,GAAG,GAAG,MAEpD,kBAAC,OAAD;EAA6B,WAAW;YACtC,kBAAC,GAAD;GAAU,SAAQ;GAAO,OAAM;GAAQ,CAAA;EACnC,EAFI,UAAU,IAEd,CAER,EAEI,IAAW,MAAM,KAAK,EAAE,QAAQ,GAAM,GAAG,GAAG,MAE9C,kBAAC,OAAD;EAA6B,WAAW;YACrC,MAAM,KAAK,EAAE,QAAQ,GAAS,GAAG,GAAG,MAEjC,kBAAC,OAAD;GAA0C,WAAW;aACnD,kBAAC,GAAD;IAAU,SAAQ;IAAO,OAAM;IAAQ,CAAA;GACnC,EAFI,QAAQ,EAAS,GAAG,IAExB,CAER;EACE,EARI,OAAO,IAQX,CAER;AAEF,QACE,kBAAC,OAAD;EAAK,WAAW;EAAkB,eAAY;YAA9C,CACE,kBAAC,OAAD;GAAK,WAAW;aAAgB;GAAkB,CAAA,EAClD,kBAAC,OAAD;GAAK,WAAW;aAAc;GAAe,CAAA,CACzC"}

package/lib/esm/backoffice/molecules/backoffice_table_skeleton/backofficeTableSkeleton.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                                       */
+//#region src/backoffice/molecules/backoffice_table_skeleton/backofficeTableSkeleton.css.ts
+var e = "_597for0 txvbqb9io txvbqbai6 txvbqb1ro txvbqb1co txvbqb1qf txvbqbwo txvbqbl6f", t = "_597for1 txvbqb9ix txvbqbbyx txvbqbao6 txvbqbla6 txvbqbv2t txvbqb12f txvbqb1qf txvbqb62o txvbqb3nx", n = "_597for2 txvbqb9io txvbqbco", r = "_597for3 txvbqb9io txvbqbai6 txvbqbao6 txvbqbla6", i = "_597for4 txvbqb9ix txvbqbbyx txvbqbao6", a = "_597for5 txvbqb9io txvbqbco";
+//#endregion
+export { r as body, a as cell, e as container, t as header, n as headerCell, i as row };
+
+//# sourceMappingURL=backofficeTableSkeleton.css.js.map

package/lib/esm/backoffice/molecules/backoffice_table_skeleton/backofficeTableSkeleton.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backofficeTableSkeleton.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_table_skeleton/backofficeTableSkeleton.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  borderRadius: 'lg',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n  overflow: 'hidden',\n});\n\nexport const header = sprinkles({\n  display: 'grid',\n  gridTemplateColumns: 'autoFitMinmax0',\n  gap: 2,\n  padding: 3,\n  backgroundColor: 'surfaceSecondary',\n  borderWidth: 0,\n  borderStyle: 'solid',\n  borderBottomWidth: 'default',\n  borderBottomColor: 'borderSubtle',\n});\n\nexport const headerCell = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nexport const body = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  padding: 3,\n});\n\nexport const row = sprinkles({\n  display: 'grid',\n  gridTemplateColumns: 'autoFitMinmax0',\n  gap: 2,\n});\n\nexport const cell = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/backoffice_table_toolbar/BackofficeTableToolbar.js

@@ -0,0 +1,32 @@
+import { cx as e } from "../../../theme/tools.js";
+import { container as t } from "./backofficeTableToolbar.css.js";
+import "../../../index.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/backoffice/molecules/backoffice_table_toolbar/BackofficeTableToolbar.tsx
+var i = ({ searchSlot: i, filtersSlot: a, sortSlot: o, refreshSlot: s, ctaSlot: c, chipsSlot: l, className: u }) => {
+	let d = i != null || a != null || o != null || s != null || c != null, f = l != null;
+	return !d && !f ? null : /* @__PURE__ */ r("div", {
+		className: e(t, u),
+		children: [d && /* @__PURE__ */ r("div", {
+			className: "p4hwvs1",
+			children: [/* @__PURE__ */ r("div", {
+				className: "p4hwvs2",
+				children: [
+					i,
+					a,
+					o
+				]
+			}), /* @__PURE__ */ r("div", {
+				className: "p4hwvs3",
+				children: [s, c]
+			})]
+		}), f && /* @__PURE__ */ n("div", {
+			className: "p4hwvs4",
+			children: l
+		})]
+	});
+};
+//#endregion
+export { i as BackofficeTableToolbar, i as default };
+
+//# sourceMappingURL=BackofficeTableToolbar.js.map

package/lib/esm/backoffice/molecules/backoffice_table_toolbar/BackofficeTableToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeTableToolbar.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_table_toolbar/BackofficeTableToolbar.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { cx } from '@plumile/ui';\n\nimport * as styles from './backofficeTableToolbar.css.js';\n\nexport type BackofficeTableToolbarProps = {\n  searchSlot?: ReactNode;\n  filtersSlot?: ReactNode;\n  sortSlot?: ReactNode;\n  refreshSlot?: ReactNode;\n  ctaSlot?: ReactNode;\n  chipsSlot?: ReactNode;\n  className?: string;\n};\n\nexport const BackofficeTableToolbar = ({\n  searchSlot,\n  filtersSlot,\n  sortSlot,\n  refreshSlot,\n  ctaSlot,\n  chipsSlot,\n  className,\n}: BackofficeTableToolbarProps): JSX.Element | null => {\n  const showTop =\n    searchSlot != null ||\n    filtersSlot != null ||\n    sortSlot != null ||\n    refreshSlot != null ||\n    ctaSlot != null;\n\n  const showChips = chipsSlot != null;\n\n  if (!showTop && !showChips) {\n    return null;\n  }\n\n  return (\n    <div className={cx(styles.container, className)}>\n      {showTop && (\n        <div className={styles.topRow}>\n          <div className={styles.left}>\n            {searchSlot}\n            {filtersSlot}\n            {sortSlot}\n          </div>\n          <div className={styles.right}>\n            {refreshSlot}\n            {ctaSlot}\n          </div>\n        </div>\n      )}\n      {showChips && <div className={styles.chipsRow}>{chipsSlot}</div>}\n    </div>\n  );\n};\n\nexport default BackofficeTableToolbar;\n"],"mappings":";;;;;AAgBA,IAAa,KAA0B,EACrC,eACA,gBACA,aACA,gBACA,YACA,cACA,mBACqD;CACrD,IAAM,IACJ,KAAc,QACd,KAAe,QACf,KAAY,QACZ,KAAe,QACf,KAAW,MAEP,IAAY,KAAa;AAM/B,QAJI,CAAC,KAAW,CAAC,IACR,OAIP,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAkB,EAAU;YAA/C,CACG,KACC,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,OAAD;IAAK,WAAW;cAAhB;KACG;KACA;KACA;KACG;OACN,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACG,GACA,EACG;MACF;MAEP,KAAa,kBAAC,OAAD;GAAK,WAAW;aAAkB;GAAgB,CAAA,CAC5D"}

package/lib/esm/backoffice/molecules/backoffice_table_toolbar/backofficeTableToolbar.css.js

@@ -0,0 +1,7 @@
+/* empty css                                      */
+//#region src/backoffice/molecules/backoffice_table_toolbar/backofficeTableToolbar.css.ts
+var e = "p4hwvs0", t = "p4hwvs1", n = "p4hwvs2", r = "p4hwvs3", i = "p4hwvs4";
+//#endregion
+export { i as chipsRow, e as container, n as left, r as right, t as topRow };
+
+//# sourceMappingURL=backofficeTableToolbar.css.js.map

package/lib/esm/backoffice/molecules/backoffice_table_toolbar/backofficeTableToolbar.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backofficeTableToolbar.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_table_toolbar/backofficeTableToolbar.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[3],\n  width: '100%',\n});\n\nexport const topRow = style({\n  display: 'flex',\n  justifyContent: 'space-between',\n  gap: vars.spacing[3],\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  '@media': {\n    [screens.sm]: {\n      alignItems: 'stretch',\n      flexDirection: 'column',\n    },\n  },\n});\n\nexport const left = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n  flexWrap: 'wrap',\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  flexWrap: 'wrap',\n  gap: vars.spacing[2],\n  paddingTop: vars.spacing[2],\n  borderTopWidth: vars.borderWidth.px,\n  borderTopStyle: 'solid',\n  borderTopColor: vars.colors.borderSubtle,\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/backoffice_tabs/BackofficeTabs.js

@@ -0,0 +1,31 @@
+import { cx as e } from "../../../theme/tools.js";
+import { active as t, tab as n, tabs as r } from "./backofficeTabs.css.js";
+import "../../../index.js";
+import { jsx as i } from "react/jsx-runtime";
+import { Link as a } from "@plumile/router";
+//#region src/backoffice/molecules/backoffice_tabs/BackofficeTabs.tsx
+var o = ({ items: o, activeId: s, onChange: c, className: l }) => o.length === 0 ? null : /* @__PURE__ */ i("div", {
+	className: e(r, l),
+	role: "tablist",
+	children: o.map((r) => {
+		let o = r.id === s, l = e(n, { [t]: o });
+		return r.to == null ? /* @__PURE__ */ i("button", {
+			type: "button",
+			role: "tab",
+			"aria-selected": o,
+			className: l,
+			onClick: () => {
+				c(r.id);
+			},
+			children: r.label
+		}, r.id) : /* @__PURE__ */ i(a, {
+			to: r.to,
+			className: l,
+			children: r.label
+		}, r.id);
+	})
+});
+//#endregion
+export { o as BackofficeTabs, o as default };
+
+//# sourceMappingURL=BackofficeTabs.js.map

package/lib/esm/backoffice/molecules/backoffice_tabs/BackofficeTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeTabs.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_tabs/BackofficeTabs.tsx"],"sourcesContent":["import { Link } from '@plumile/router';\nimport { type ComponentPropsWithoutRef, type JSX, type ReactNode } from 'react';\n\nimport * as styles from './backofficeTabs.css.js';\nimport { cx } from '@plumile/ui';\n\nexport type BackofficeTabItem = {\n  id: string;\n  label: ReactNode;\n  to?: ComponentPropsWithoutRef<typeof Link>['to'];\n};\n\nexport type BackofficeTabsProps = {\n  items: readonly BackofficeTabItem[];\n  activeId: string;\n  onChange: (id: string) => void;\n  className?: string;\n};\n\nexport const BackofficeTabs = ({\n  items,\n  activeId,\n  onChange,\n  className,\n}: BackofficeTabsProps): JSX.Element | null => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className={cx(styles.tabs, className)} role=\"tablist\">\n      {items.map((tab) => {\n        const isActive = tab.id === activeId;\n        const tabClassName = cx(styles.tab, { [styles.active]: isActive });\n        if (tab.to != null) {\n          return (\n            <Link key={tab.id} to={tab.to} className={tabClassName}>\n              {tab.label}\n            </Link>\n          );\n        }\n        return (\n          <button\n            key={tab.id}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={isActive}\n            className={tabClassName}\n            onClick={() => {\n              onChange(tab.id);\n            }}\n          >\n            {tab.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default BackofficeTabs;\n"],"mappings":";;;;;;AAmBA,IAAa,KAAkB,EAC7B,UACA,aACA,aACA,mBAEI,EAAM,WAAW,IACZ,OAIP,kBAAC,OAAD;CAAK,WAAW,EAAG,GAAa,EAAU;CAAE,MAAK;WAC9C,EAAM,KAAK,MAAQ;EAClB,IAAM,IAAW,EAAI,OAAO,GACtB,IAAe,EAAG,GAAY,GAAG,IAAgB,GAAU,CAAC;AAQlE,SAPI,EAAI,MAAM,OAQZ,kBAAC,UAAD;GAEE,MAAK;GACL,MAAK;GACL,iBAAe;GACf,WAAW;GACX,eAAe;AACb,MAAS,EAAI,GAAG;;aAGjB,EAAI;GACE,EAVF,EAAI,GAUF,GAjBP,kBAAC,GAAD;GAAmB,IAAI,EAAI;GAAI,WAAW;aACvC,EAAI;GACA,EAFI,EAAI,GAER;GAiBX;CACE,CAAA"}

package/lib/esm/backoffice/molecules/backoffice_tabs/backofficeTabs.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                              */
+//#region src/backoffice/molecules/backoffice_tabs/backofficeTabs.css.ts
+var e = "_4p4jiq0 txvbqb9jf txvbqbajx txvbqbanx txvbqbl9o txvbqb1t6 txvbqbv2v txvbqb1co txvbqb1qf txvbqbwo", t = "_4p4jiq2 _4p4jiq1 txvbqbnv6 txvbqboif txvbqbpqx txvbqbmio txvbqb9jf txvbqbco txvbqb1t6 txvbqb8x txvbqbamf txvbqb1co txvbqb1qf txvbqbf6 txvbqbuzj txvbqbv8r txvbqbv", n = "_4p4jiq3 txvbqbv2r txvbqbwo txvbqbv8p txvbqb8pf";
+//#endregion
+export { n as active, t as tab, e as tabs };
+
+//# sourceMappingURL=backofficeTabs.css.js.map

package/lib/esm/backoffice/molecules/backoffice_tabs/backofficeTabs.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backofficeTabs.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_tabs/backofficeTabs.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { vars } from '@plumile/ui/theme/themeContract.js';\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const tabs = sprinkles({\n  display: 'inline-flex',\n  flexWrap: 'wrap',\n  gap: 1,\n  padding: 1,\n  borderRadius: 'full',\n  backgroundColor: 'surfaceMuted',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n});\n\nexport const tab = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    paddingX: 3,\n    paddingY: 1.5,\n    borderRadius: 'full',\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'transparent',\n    backgroundColor: 'transparent',\n    color: 'textSecondary',\n    cursor: 'pointer',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        color: vars.colors.text,\n        backgroundColor: vars.colors.surface,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors['blue-500']}`,\n        outlineOffset: 2,\n      },\n    },\n  },\n]);\n\nexport const active = sprinkles({\n  backgroundColor: 'surface',\n  borderColor: 'borderSubtle',\n  color: 'text',\n  boxShadow: 'sm',\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/bulk_actions_bar/BulkActionsBar.js

@@ -0,0 +1,31 @@
+import { cx as e } from "../../../theme/tools.js";
+import { Button as t } from "../../../atomic/atoms/button/Button.js";
+import { bar as n, left as r, right as i } from "./bulkActionsBar.css.js";
+import "../../../index.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/backoffice/molecules/bulk_actions_bar/BulkActionsBar.tsx
+var s = ({ selectedCount: s, label: c = (e) => `${e} selected`, actions: l, onClearSelection: u, clearLabel: d = "Clear", className: f }) => {
+	if (s <= 0) return null;
+	let p = null;
+	return u != null && (p = /* @__PURE__ */ a(t, {
+		type: "button",
+		variant: "secondary",
+		size: "small",
+		onClick: u,
+		children: d
+	})), /* @__PURE__ */ o("div", {
+		className: e(n, f),
+		role: "status",
+		children: [/* @__PURE__ */ a("div", {
+			className: r,
+			children: c(s)
+		}), /* @__PURE__ */ o("div", {
+			className: i,
+			children: [l, p]
+		})]
+	});
+};
+//#endregion
+export { s as BulkActionsBar, s as default };
+
+//# sourceMappingURL=BulkActionsBar.js.map

package/lib/esm/backoffice/molecules/bulk_actions_bar/BulkActionsBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulkActionsBar.js","names":[],"sources":["../../../../../src/backoffice/molecules/bulk_actions_bar/BulkActionsBar.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { Button, cx } from '@plumile/ui';\n\nimport * as styles from './bulkActionsBar.css.js';\n\nexport type BulkActionsBarProps = {\n  selectedCount: number;\n  label?: (count: number) => ReactNode;\n  actions?: ReactNode;\n  onClearSelection?: () => void;\n  clearLabel?: string;\n  className?: string;\n};\n\nexport const BulkActionsBar = ({\n  selectedCount,\n  label = (count) => {\n    return `${count} selected`;\n  },\n  actions,\n  onClearSelection,\n  clearLabel = 'Clear',\n  className,\n}: BulkActionsBarProps): JSX.Element | null => {\n  if (selectedCount <= 0) {\n    return null;\n  }\n\n  let clearButtonNode: JSX.Element | null = null;\n  if (onClearSelection != null) {\n    clearButtonNode = (\n      <Button\n        type=\"button\"\n        variant=\"secondary\"\n        size=\"small\"\n        onClick={onClearSelection}\n      >\n        {clearLabel}\n      </Button>\n    );\n  }\n\n  return (\n    <div className={cx(styles.bar, className)} role=\"status\">\n      <div className={styles.left}>{label(selectedCount)}</div>\n      <div className={styles.right}>\n        {actions}\n        {clearButtonNode}\n      </div>\n    </div>\n  );\n};\n\nexport default BulkActionsBar;\n"],"mappings":";;;;;;AAeA,IAAa,KAAkB,EAC7B,kBACA,YAAS,MACA,GAAG,EAAM,YAElB,YACA,qBACA,gBAAa,SACb,mBAC6C;AAC7C,KAAI,KAAiB,EACnB,QAAO;CAGT,IAAI,IAAsC;AAc1C,QAbI,KAAoB,SACtB,IACE,kBAAC,GAAD;EACE,MAAK;EACL,SAAQ;EACR,MAAK;EACL,SAAS;YAER;EACM,CAAA,GAKX,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAY,EAAU;EAAE,MAAK;YAAhD,CACE,kBAAC,OAAD;GAAK,WAAW;aAAc,EAAM,EAAc;GAAO,CAAA,EACzD,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,GACA,EACG;KACF"}

package/lib/esm/backoffice/molecules/bulk_actions_bar/bulkActionsBar.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                              */
+//#region src/backoffice/molecules/bulk_actions_bar/bulkActionsBar.css.ts
+var e = "ndiqkc0 txvbqbnvf txvbqboio txvbqbp5o txvbqblxf txvbqb9io txvbqbco txvbqbdoo txvbqbaof txvbqb1ro txvbqb1co txvbqb1qf txvbqbwf", t = "ndiqkc1 txvbqb9jf txvbqbco txvbqbao6 txvbqb8x", n = "ndiqkc2 txvbqb9jf txvbqbco txvbqbao6";
+//#endregion
+export { e as bar, t as left, n as right };
+
+//# sourceMappingURL=bulkActionsBar.css.js.map

package/lib/esm/backoffice/molecules/bulk_actions_bar/bulkActionsBar.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bulkActionsBar.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/bulk_actions_bar/bulkActionsBar.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const bar = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: 3,\n  paddingX: 4,\n  paddingY: 3,\n  borderRadius: 'lg',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'border',\n});\n\nexport const left = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 2,\n  fontSize: 'sm',\n});\n\nexport const right = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 2,\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/filter_chip_row/FilterChipRow.js

@@ -0,0 +1,30 @@
+import { cx as e } from "../../../theme/tools.js";
+import { Button as t } from "../../../atomic/atoms/button/Button.js";
+import { Tag as n } from "../../atoms/tag/Tag.js";
+import { row as r } from "./filterChipRow.css.js";
+import "../../../index.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/backoffice/molecules/filter_chip_row/FilterChipRow.tsx
+var o = ({ chips: o, onClearAll: s, clearAllLabel: c = "Clear all", className: l }) => {
+	if (o.length === 0) return null;
+	let u = null;
+	return s != null && (u = /* @__PURE__ */ i(t, {
+		type: "button",
+		size: "small",
+		variant: "text",
+		onClick: s,
+		children: c
+	})), /* @__PURE__ */ a("div", {
+		className: e(r, l),
+		children: [o.map((e) => /* @__PURE__ */ i(n, {
+			tone: "neutral",
+			onRemove: e.onRemove,
+			removeLabel: "Remove filter",
+			children: e.label
+		}, e.id)), u]
+	});
+};
+//#endregion
+export { o as FilterChipRow, o as default };
+
+//# sourceMappingURL=FilterChipRow.js.map

package/lib/esm/backoffice/molecules/filter_chip_row/FilterChipRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChipRow.js","names":[],"sources":["../../../../../src/backoffice/molecules/filter_chip_row/FilterChipRow.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { Button, cx } from '@plumile/ui';\nimport { Tag } from '../../atoms/tag/Tag.js';\n\nimport * as styles from './filterChipRow.css.js';\n\nexport type FilterChip = {\n  id: string;\n  label: ReactNode;\n  onRemove?: () => void;\n};\n\nexport type FilterChipRowProps = {\n  chips: readonly FilterChip[];\n  onClearAll?: () => void;\n  clearAllLabel?: string;\n  className?: string;\n};\n\nexport const FilterChipRow = ({\n  chips,\n  onClearAll,\n  clearAllLabel = 'Clear all',\n  className,\n}: FilterChipRowProps): JSX.Element | null => {\n  if (chips.length === 0) {\n    return null;\n  }\n\n  let clearAllNode: JSX.Element | null = null;\n  if (onClearAll != null) {\n    clearAllNode = (\n      <Button type=\"button\" size=\"small\" variant=\"text\" onClick={onClearAll}>\n        {clearAllLabel}\n      </Button>\n    );\n  }\n\n  return (\n    <div className={cx(styles.row, className)}>\n      {chips.map((chip) => {\n        return (\n          <Tag\n            key={chip.id}\n            tone=\"neutral\"\n            onRemove={chip.onRemove}\n            removeLabel=\"Remove filter\"\n          >\n            {chip.label}\n          </Tag>\n        );\n      })}\n      {clearAllNode}\n    </div>\n  );\n};\n\nexport default FilterChipRow;\n"],"mappings":";;;;;;;AAoBA,IAAa,KAAiB,EAC5B,UACA,eACA,mBAAgB,aAChB,mBAC4C;AAC5C,KAAI,EAAM,WAAW,EACnB,QAAO;CAGT,IAAI,IAAmC;AASvC,QARI,KAAc,SAChB,IACE,kBAAC,GAAD;EAAQ,MAAK;EAAS,MAAK;EAAQ,SAAQ;EAAO,SAAS;YACxD;EACM,CAAA,GAKX,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAY,EAAU;YAAzC,CACG,EAAM,KAAK,MAER,kBAAC,GAAD;GAEE,MAAK;GACL,UAAU,EAAK;GACf,aAAY;aAEX,EAAK;GACF,EANC,EAAK,GAMN,CAER,EACD,EACG"}

package/lib/esm/backoffice/molecules/filter_chip_row/filterChipRow.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                             */
+//#region src/backoffice/molecules/filter_chip_row/filterChipRow.css.ts
+var e = "_1ylnrkl0 txvbqb9io txvbqbco txvbqbajx txvbqbao6";
+//#endregion
+export { e as row };
+
+//# sourceMappingURL=filterChipRow.css.js.map

package/lib/esm/backoffice/molecules/filter_chip_row/filterChipRow.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterChipRow.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/filter_chip_row/filterChipRow.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const row = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  flexWrap: 'wrap',\n  gap: 2,\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/global_search_input/GlobalSearchInput.js

@@ -0,0 +1,55 @@
+import { Input as e } from "../../../atomic/atoms/input/Input.js";
+import { ModalCloseSvg as t } from "../../../icons/ModalCloseSvg.js";
+import { ShortcutHint as n } from "../../atoms/shortcut_hint/ShortcutHint.js";
+import { SidebarSearchSvg as r } from "../../../icons/SidebarSearchSvg.js";
+import { clearButton as i, container as a } from "./globalSearchInput.css.js";
+import "../../../index.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/backoffice/molecules/global_search_input/GlobalSearchInput.tsx
+var c = ({ value: c, onChange: l, placeholder: u = "Search…", ariaLabel: d, className: f, shortcut: p, rightSlot: m, clearLabel: h = "Clear search" }) => {
+	let g = c.trim() !== "", _ = d ?? u, v = null;
+	g && (v = /* @__PURE__ */ o("button", {
+		type: "button",
+		"aria-label": h,
+		onClick: () => {
+			l("");
+		},
+		className: i,
+		children: /* @__PURE__ */ o(t, {
+			width: 16,
+			height: 16,
+			"aria-hidden": "true"
+		})
+	}));
+	let y = null;
+	p != null && (y = /* @__PURE__ */ o(n, { keys: p }));
+	let b = /* @__PURE__ */ s("span", {
+		className: a,
+		children: [
+			v,
+			y,
+			m
+		]
+	});
+	return /* @__PURE__ */ o(e, {
+		className: f,
+		value: c,
+		onChange: (e) => {
+			l(e.target.value);
+		},
+		placeholder: u,
+		"aria-label": _,
+		size: "small",
+		fullWidth: !0,
+		leftIcon: /* @__PURE__ */ o(r, {
+			width: 18,
+			height: 18,
+			"aria-hidden": "true"
+		}),
+		rightIcon: b
+	});
+};
+//#endregion
+export { c as GlobalSearchInput, c as default };
+
+//# sourceMappingURL=GlobalSearchInput.js.map

package/lib/esm/backoffice/molecules/global_search_input/GlobalSearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalSearchInput.js","names":[],"sources":["../../../../../src/backoffice/molecules/global_search_input/GlobalSearchInput.tsx"],"sourcesContent":["import { type ChangeEvent, type JSX, type ReactNode } from 'react';\n\nimport { Input } from '@plumile/ui';\nimport { ModalCloseSvg } from '@plumile/ui/icons/ModalCloseSvg.js';\nimport { SidebarSearchSvg } from '@plumile/ui/icons/SidebarSearchSvg.js';\n\nimport { ShortcutHint } from '../../atoms/shortcut_hint/ShortcutHint.js';\nimport * as styles from './globalSearchInput.css.js';\n\nexport type GlobalSearchInputProps = {\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  ariaLabel?: string;\n  className?: string;\n  shortcut?: readonly string[] | string;\n  rightSlot?: ReactNode;\n  clearLabel?: string;\n};\n\nexport const GlobalSearchInput = ({\n  value,\n  onChange,\n  placeholder = 'Search…',\n  ariaLabel,\n  className,\n  shortcut,\n  rightSlot,\n  clearLabel = 'Clear search',\n}: GlobalSearchInputProps): JSX.Element => {\n  const showClear = value.trim() !== '';\n  const resolvedAriaLabel = ariaLabel ?? placeholder;\n\n  let clearButton: JSX.Element | null = null;\n  if (showClear) {\n    clearButton = (\n      <button\n        type=\"button\"\n        aria-label={clearLabel}\n        onClick={() => {\n          onChange('');\n        }}\n        className={styles.clearButton}\n      >\n        <ModalCloseSvg width={16} height={16} aria-hidden=\"true\" />\n      </button>\n    );\n  }\n\n  let shortcutNode: JSX.Element | null = null;\n  if (shortcut != null) {\n    shortcutNode = <ShortcutHint keys={shortcut} />;\n  }\n\n  const rightIcon = (\n    <span className={styles.container}>\n      {clearButton}\n      {shortcutNode}\n      {rightSlot}\n    </span>\n  );\n\n  return (\n    <Input\n      className={className}\n      value={value}\n      onChange={(event: ChangeEvent<HTMLInputElement>) => {\n        onChange(event.target.value);\n      }}\n      placeholder={placeholder}\n      aria-label={resolvedAriaLabel}\n      size=\"small\"\n      fullWidth\n      leftIcon={<SidebarSearchSvg width={18} height={18} aria-hidden=\"true\" />}\n      rightIcon={rightIcon}\n    />\n  );\n};\n\nexport default GlobalSearchInput;\n"],"mappings":";;;;;;;;AAoBA,IAAa,KAAqB,EAChC,UACA,aACA,iBAAc,WACd,cACA,cACA,aACA,cACA,gBAAa,qBAC4B;CACzC,IAAM,IAAY,EAAM,MAAM,KAAK,IAC7B,IAAoB,KAAa,GAEnC,IAAkC;AACtC,CAAI,MACF,IACE,kBAAC,UAAD;EACE,MAAK;EACL,cAAY;EACZ,eAAe;AACb,KAAS,GAAG;;EAEd,WAAW;YAEX,kBAAC,GAAD;GAAe,OAAO;GAAI,QAAQ;GAAI,eAAY;GAAS,CAAA;EACpD,CAAA;CAIb,IAAI,IAAmC;AACvC,CAAI,KAAY,SACd,IAAe,kBAAC,GAAD,EAAc,MAAM,GAAY,CAAA;CAGjD,IAAM,IACJ,kBAAC,QAAD;EAAM,WAAW;YAAjB;GACG;GACA;GACA;GACI;;AAGT,QACE,kBAAC,GAAD;EACa;EACJ;EACP,WAAW,MAAyC;AAClD,KAAS,EAAM,OAAO,MAAM;;EAEjB;EACb,cAAY;EACZ,MAAK;EACL,WAAA;EACA,UAAU,kBAAC,GAAD;GAAkB,OAAO;GAAI,QAAQ;GAAI,eAAY;GAAS,CAAA;EAC7D;EACX,CAAA"}

package/lib/esm/backoffice/molecules/global_search_input/globalSearchInput.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                                 */
+//#region src/backoffice/molecules/global_search_input/globalSearchInput.css.ts
+var e = "zmrwn80 txvbqb9io txvbqbco txvbqbao6 txvbqbk4x", t = "zmrwn81 txvbqbu6f", n = "zmrwn82 txvbqb9jf txvbqbco txvbqbdnx txvbqbuzj txvbqbv txvbqb12f txvbqb1px txvbqbl9f";
+//#endregion
+export { n as clearButton, e as container, t as input };
+
+//# sourceMappingURL=globalSearchInput.css.js.map

package/lib/esm/backoffice/molecules/global_search_input/globalSearchInput.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"globalSearchInput.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/global_search_input/globalSearchInput.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  minWidth: 0,\n});\n\nexport const input = sprinkles({\n  width: 'full',\n});\n\nexport const clearButton = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: 'transparent',\n  cursor: 'pointer',\n  borderWidth: 0,\n  borderStyle: 'none',\n  padding: 0,\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/inline_banner/InlineBanner.js

@@ -0,0 +1,44 @@
+import { cx as e } from "../../../theme/tools.js";
+import { ModalCloseSvg as t } from "../../../icons/ModalCloseSvg.js";
+import { actions as n, closeButton as r, container as i, content as a, description as o, title as s, toneRecipe as c } from "./inlineBanner.css.js";
+import "../../../index.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/backoffice/molecules/inline_banner/InlineBanner.tsx
+var d = ({ tone: d = "info", title: f, children: p, actions: m, onDismiss: h, dismissLabel: g = "Dismiss", className: _ }) => {
+	let v = typeof h == "function", y = null;
+	f != null && (y = /* @__PURE__ */ l("div", {
+		className: s,
+		children: f
+	}));
+	let b = null;
+	p != null && (b = /* @__PURE__ */ l("div", {
+		className: o,
+		children: p
+	}));
+	let x = null;
+	return v && (x = /* @__PURE__ */ l("button", {
+		type: "button",
+		onClick: h,
+		className: r,
+		"aria-label": g,
+		children: /* @__PURE__ */ l(t, {
+			width: 18,
+			height: 18,
+			"aria-hidden": "true"
+		})
+	})), /* @__PURE__ */ u("div", {
+		className: e(i, c({ tone: d }), _),
+		role: "status",
+		children: [/* @__PURE__ */ u("div", {
+			className: a,
+			children: [y, b]
+		}), /* @__PURE__ */ u("div", {
+			className: n,
+			children: [m, x]
+		})]
+	});
+};
+//#endregion
+export { d as InlineBanner, d as default };
+
+//# sourceMappingURL=InlineBanner.js.map

package/lib/esm/backoffice/molecules/inline_banner/InlineBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineBanner.js","names":[],"sources":["../../../../../src/backoffice/molecules/inline_banner/InlineBanner.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { ModalCloseSvg } from '@plumile/ui/icons/ModalCloseSvg.js';\n\nimport * as styles from './inlineBanner.css.js';\nimport { cx } from '@plumile/ui';\n\nexport type InlineBannerTone = NonNullable<\n  NonNullable<RecipeVariants<typeof styles.toneRecipe>>['tone']\n>;\n\nexport type InlineBannerProps = {\n  tone?: InlineBannerTone;\n  title?: ReactNode;\n  children?: ReactNode;\n  actions?: ReactNode;\n  onDismiss?: () => void;\n  dismissLabel?: string;\n  className?: string;\n};\n\nexport const InlineBanner = ({\n  tone = 'info',\n  title,\n  children,\n  actions,\n  onDismiss,\n  dismissLabel = 'Dismiss',\n  className,\n}: InlineBannerProps): JSX.Element => {\n  const showDismiss = typeof onDismiss === 'function';\n\n  let titleNode: JSX.Element | null = null;\n  if (title != null) {\n    titleNode = <div className={styles.title}>{title}</div>;\n  }\n\n  let descriptionNode: JSX.Element | null = null;\n  if (children != null) {\n    descriptionNode = <div className={styles.description}>{children}</div>;\n  }\n\n  let dismissNode: JSX.Element | null = null;\n  if (showDismiss) {\n    dismissNode = (\n      <button\n        type=\"button\"\n        onClick={onDismiss}\n        className={styles.closeButton}\n        aria-label={dismissLabel}\n      >\n        <ModalCloseSvg width={18} height={18} aria-hidden=\"true\" />\n      </button>\n    );\n  }\n\n  return (\n    <div\n      className={cx(styles.container, styles.toneRecipe({ tone }), className)}\n      role=\"status\"\n    >\n      <div className={styles.content}>\n        {titleNode}\n        {descriptionNode}\n      </div>\n\n      <div className={styles.actions}>\n        {actions}\n        {dismissNode}\n      </div>\n    </div>\n  );\n};\n\nexport default InlineBanner;\n"],"mappings":";;;;;;AAsBA,IAAa,KAAgB,EAC3B,UAAO,QACP,OAAA,GACA,aACA,SAAA,GACA,cACA,kBAAe,WACf,mBACoC;CACpC,IAAM,IAAc,OAAO,KAAc,YAErC,IAAgC;AACpC,CAAI,KAAS,SACX,IAAY,kBAAC,OAAD;EAAK,WAAW;YAAe;EAAY,CAAA;CAGzD,IAAI,IAAsC;AAC1C,CAAI,KAAY,SACd,IAAkB,kBAAC,OAAD;EAAK,WAAW;EAAqB;EAAe,CAAA;CAGxE,IAAI,IAAkC;AActC,QAbI,MACF,IACE,kBAAC,UAAD;EACE,MAAK;EACL,SAAS;EACT,WAAW;EACX,cAAY;YAEZ,kBAAC,GAAD;GAAe,OAAO;GAAI,QAAQ;GAAI,eAAY;GAAS,CAAA;EACpD,CAAA,GAKX,kBAAC,OAAD;EACE,WAAW,EAAG,GAAkB,EAAkB,EAAE,SAAM,CAAC,EAAE,EAAU;EACvE,MAAK;YAFP,CAIE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,GACA,EACG;MAEN,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,GACA,EACG;KACF"}

package/lib/esm/backoffice/molecules/inline_banner/inlineBanner.css.js

@@ -0,0 +1,19 @@
+/* empty css                                      */
+/* empty css                            */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/backoffice/molecules/inline_banner/inlineBanner.css.ts
+var t = "_1mdg64u0 txvbqbnvf txvbqboio txvbqbp5o txvbqblxf txvbqb9io txvbqbcf txvbqbdoo txvbqbaof txvbqb1rf txvbqb8x txvbqb1co txvbqb1qf txvbqbwf", n = e({
+	defaultClassName: "_1mdg64u5",
+	variantClassNames: { tone: {
+		info: "_1mdg64u6 _1mdg64u1 txvbqbv4j txvbqbv8p",
+		success: "_1mdg64u7 _1mdg64u2 txvbqbv0t txvbqbv6r",
+		warning: "_1mdg64u8 _1mdg64u3 txvbqbv09 txvbqbv69",
+		danger: "_1mdg64u9 _1mdg64u4 txvbqbuzp txvbqbv5n"
+	} },
+	defaultVariants: { tone: "info" },
+	compoundVariants: []
+}), r = "_1mdg64ua txvbqb9io txvbqbai6 txvbqbanx txvbqb9mx txvbqbk4x", i = "_1mdg64ub txvbqbamo", a = "_1mdg64uc ", o = "_1mdg64ud txvbqb9jf txvbqbco txvbqbao6 txvbqbaj6", s = "_1mdg64ue txvbqb9jf txvbqbco txvbqbdnx txvbqbtx6 txvbqbc6o txvbqb1rf txvbqbuzj txvbqbv txvbqb12f txvbqb1px txvbqbv4x";
+//#endregion
+export { o as actions, s as closeButton, t as container, r as content, a as description, i as title, n as toneRecipe };
+
+//# sourceMappingURL=inlineBanner.css.js.map

package/lib/esm/backoffice/molecules/inline_banner/inlineBanner.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inlineBanner.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/inline_banner/inlineBanner.css.ts"],"sourcesContent":["import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  gap: 3,\n  paddingX: 4,\n  paddingY: 3,\n  borderRadius: 'md',\n  fontSize: 'sm',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'border',\n});\n\nconst toneInfo = sprinkles({\n  backgroundColor: 'brandLightGray',\n  color: 'text',\n});\nconst toneSuccess = sprinkles({\n  backgroundColor: 'green-50',\n  color: 'green-800',\n});\nconst toneWarning = sprinkles({\n  backgroundColor: 'amber-50',\n  color: 'amber-900',\n});\nconst toneDanger = sprinkles({\n  backgroundColor: 'red-50',\n  color: 'red-800',\n});\n\nexport const toneRecipe = recipe({\n  variants: {\n    tone: {\n      info: toneInfo,\n      success: toneSuccess,\n      warning: toneWarning,\n      danger: toneDanger,\n    },\n  },\n  defaultVariants: {\n    tone: 'info',\n  },\n});\n\nexport type ToneRecipeVariants = RecipeVariants<typeof toneRecipe>;\n\nexport const content = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const title = sprinkles({\n  fontWeight: 'semibold',\n});\n\nexport const description = sprinkles({\n  // color: 'slate-700',\n});\n\nexport const actions = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 2,\n  flexShrink: 0,\n});\n\nexport const closeButton = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 8,\n  height: 8,\n  borderRadius: 'md',\n  backgroundColor: 'transparent',\n  cursor: 'pointer',\n  borderWidth: 0,\n  borderStyle: 'none',\n  color: 'inherit',\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/sidebar_collapse_toggle/SidebarCollapseToggle.js

@@ -0,0 +1,38 @@
+import { cx as e } from "../../../theme/tools.js";
+import { ShortcutHint as t } from "../../atoms/shortcut_hint/ShortcutHint.js";
+import { ChevronLeftSvg as n } from "../../../icons/ChevronLeftSvg.js";
+import { ChevronRightSvg as r } from "../../../icons/ChevronRightSvg.js";
+import { button as i, icon as a, label as o } from "./sidebarCollapseToggle.css.js";
+import "../../../index.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/backoffice/molecules/sidebar_collapse_toggle/SidebarCollapseToggle.tsx
+var l = ({ isCollapsed: l, onToggle: u, label: d = "Collapse", shortcut: f, className: p }) => {
+	let m = n, h = d;
+	l && (m = r, h = "Expand");
+	let g = null;
+	return f != null && (g = /* @__PURE__ */ s(t, { keys: f })), /* @__PURE__ */ c("button", {
+		type: "button",
+		className: e(i, p),
+		onClick: u,
+		"aria-pressed": l,
+		children: [
+			/* @__PURE__ */ s("span", {
+				className: a,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ s(m, {
+					width: 18,
+					height: 18
+				})
+			}),
+			/* @__PURE__ */ s("span", {
+				className: o,
+				children: h
+			}),
+			g
+		]
+	});
+};
+//#endregion
+export { l as SidebarCollapseToggle, l as default };
+
+//# sourceMappingURL=SidebarCollapseToggle.js.map

package/lib/esm/backoffice/molecules/sidebar_collapse_toggle/SidebarCollapseToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarCollapseToggle.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_collapse_toggle/SidebarCollapseToggle.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { ChevronLeftSvg } from '@plumile/ui/icons/ChevronLeftSvg.js';\nimport { ChevronRightSvg } from '@plumile/ui/icons/ChevronRightSvg.js';\n\nimport { ShortcutHint } from '../../atoms/shortcut_hint/ShortcutHint.js';\nimport * as styles from './sidebarCollapseToggle.css.js';\nimport { cx } from '@plumile/ui';\n\nexport type SidebarCollapseToggleProps = {\n  isCollapsed: boolean;\n  onToggle: () => void;\n  label?: ReactNode;\n  shortcut?: readonly string[] | string;\n  className?: string;\n};\n\nexport const SidebarCollapseToggle = ({\n  isCollapsed,\n  onToggle,\n  label = 'Collapse',\n  shortcut,\n  className,\n}: SidebarCollapseToggleProps): JSX.Element => {\n  let Icon = ChevronLeftSvg;\n  let resolvedLabel = label;\n  if (isCollapsed) {\n    Icon = ChevronRightSvg;\n    resolvedLabel = 'Expand';\n  }\n\n  let shortcutNode: JSX.Element | null = null;\n  if (shortcut != null) {\n    shortcutNode = <ShortcutHint keys={shortcut} />;\n  }\n\n  return (\n    <button\n      type=\"button\"\n      className={cx(styles.button, className)}\n      onClick={onToggle}\n      aria-pressed={isCollapsed}\n    >\n      <span className={styles.icon} aria-hidden=\"true\">\n        <Icon width={18} height={18} />\n      </span>\n      <span className={styles.label}>{resolvedLabel}</span>\n      {shortcutNode}\n    </button>\n  );\n};\n\nexport default SidebarCollapseToggle;\n"],"mappings":";;;;;;;;AAiBA,IAAa,KAAyB,EACpC,gBACA,aACA,OAAA,IAAQ,YACR,aACA,mBAC6C;CAC7C,IAAI,IAAO,GACP,IAAgB;AACpB,CAAI,MACF,IAAO,GACP,IAAgB;CAGlB,IAAI,IAAmC;AAKvC,QAJI,KAAY,SACd,IAAe,kBAAC,GAAD,EAAc,MAAM,GAAY,CAAA,GAI/C,kBAAC,UAAD;EACE,MAAK;EACL,WAAW,EAAG,GAAe,EAAU;EACvC,SAAS;EACT,gBAAc;YAJhB;GAME,kBAAC,QAAD;IAAM,WAAW;IAAa,eAAY;cACxC,kBAAC,GAAD;KAAM,OAAO;KAAI,QAAQ;KAAM,CAAA;IAC1B,CAAA;GACP,kBAAC,QAAD;IAAM,WAAW;cAAe;IAAqB,CAAA;GACpD;GACM"}

package/lib/esm/backoffice/molecules/sidebar_collapse_toggle/sidebarCollapseToggle.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                                     */
+//#region src/backoffice/molecules/sidebar_collapse_toggle/sidebarCollapseToggle.css.ts
+var e = "_1x7c0k51 _1x7c0k50 txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb9jf txvbqbco txvbqbao6 txvbqb1rf txvbqbuzj txvbqb12f txvbqb1px txvbqbv txvbqb8x txvbqbv8r txvbqb78 txvbqb6x txvbqb7k", t = "_1x7c0k52 txvbqb9jf txvbqbco txvbqbdnx txvbqbtwo txvbqbc66", n = "_1x7c0k53 txvbqb9mx";
+//#endregion
+export { e as button, t as icon, n as label };
+
+//# sourceMappingURL=sidebarCollapseToggle.css.js.map

package/lib/esm/backoffice/molecules/sidebar_collapse_toggle/sidebarCollapseToggle.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebarCollapseToggle.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_collapse_toggle/sidebarCollapseToggle.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const button = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: 2,\n    paddingX: 3,\n    paddingY: 2,\n    borderRadius: 'md',\n    backgroundColor: 'transparent',\n    borderWidth: 0,\n    borderStyle: 'none',\n    cursor: 'pointer',\n    fontSize: 'sm',\n    color: 'textSecondary',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.surfaceMuted,\n        color: vars.colors.text,\n      },\n    },\n  },\n]);\n\nexport const icon = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 6,\n  height: 6,\n});\n\nexport const label = sprinkles({ flex: 1 });\n"],"mappings":""}