@plumile/ui 0.1.61 → 0.1.63

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 { SidebarSearchSvg as n } from "../../../icons/SidebarSearchSvg.js";
+import { ShortcutHint as r } from "../../atoms/shortcut_hint/ShortcutHint.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(r, { 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(n, {
+			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 { ChevronLeftSvg as t } from "../../../icons/ChevronLeftSvg.js";
+import { ChevronRightSvg as n } from "../../../icons/ChevronRightSvg.js";
+import { ShortcutHint as r } from "../../atoms/shortcut_hint/ShortcutHint.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 = t, h = d;
+	l && (m = n, h = "Expand");
+	let g = null;
+	return f != null && (g = /* @__PURE__ */ s(r, { 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":""}

package/lib/esm/backoffice/molecules/sidebar_nav_item/SidebarNavItem.js

@@ -0,0 +1,123 @@
+import { cx as e } from "../../../theme/tools.js";
+import { actionSlot as t, actions as ee, actionsVisible as te, badge as ne, badgeCollapsed as n, dragHandle as r, icon as i, item as a, itemActive as o, itemCollapsed as s, itemDisabled as c, label as l, labelCollapsed as re, link as u } from "./sidebarNavItem.css.js";
+import "../../../index.js";
+import { Fragment as ie, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useCallback as p, useEffect as m, useRef as h, useState as g } from "react";
+import { Link as _ } from "@plumile/router";
+//#region src/backoffice/molecules/sidebar_nav_item/SidebarNavItem.tsx
+var v = _, y = ({ label: _, href: y, icon: b, badge: x, isActive: S = !1, disabled: C = !1, onClick: ae, onDragStart: oe, onDragOver: se, onDrop: ce, onDragEnd: le, collapsed: w = !1, ariaLabel: ue, className: T, actionSlot: E, dragHandleSlot: D, dragHandleLabel: O, draggable: k = !1 }) => {
+	let A = h(null), j = h(null), [M, N] = g(!1), [P, F] = g(!1), I = [a];
+	w && I.push(s), S && I.push(o), C && I.push(c), T != null && I.push(T);
+	let L = e(...I), R = ue;
+	R == null && typeof _ == "string" && (R = _);
+	let z, B;
+	w && (z = R, B = R);
+	let V;
+	S && (V = "page");
+	let H = null;
+	b != null && (H = /* @__PURE__ */ d("span", {
+		className: i,
+		children: b
+	}));
+	let U = null;
+	w && (U = re);
+	let de = e(l, U), W = null;
+	if (x != null) {
+		let t = null;
+		w && (t = n), W = /* @__PURE__ */ d("span", {
+			className: e(ne, t),
+			children: x
+		});
+	}
+	let G = /* @__PURE__ */ f(ie, { children: [
+		H,
+		/* @__PURE__ */ d("span", {
+			className: de,
+			children: _
+		}),
+		W
+	] }), K = () => {
+		ae?.();
+	}, q = !w && !C && (E != null || D != null), J = p(() => {
+		j.current != null && (clearTimeout(j.current), j.current = null);
+	}, []);
+	m(() => (q || (N(!1), F(!1), J()), () => {
+		J();
+	}), [J, q]);
+	let fe = () => {
+		q && (J(), j.current = setTimeout(() => {
+			N(!0);
+		}, 150));
+	}, pe = () => {
+		J(), N(!1);
+	}, me = () => {
+		q && F(!0);
+	}, he = (e) => {
+		if (!q) {
+			F(!1);
+			return;
+		}
+		let t = e.relatedTarget;
+		t != null && A.current?.contains(t) || F(!1);
+	}, Y;
+	Y = C ? /* @__PURE__ */ d("span", {
+		className: u,
+		"aria-disabled": "true",
+		"aria-label": z,
+		title: B,
+		children: G
+	}) : y == null ? /* @__PURE__ */ d("button", {
+		type: "button",
+		className: u,
+		onClick: K,
+		"aria-current": V,
+		"aria-label": z,
+		title: B,
+		children: G
+	}) : /* @__PURE__ */ d(v, {
+		to: y,
+		className: u,
+		"aria-current": V,
+		"aria-label": z,
+		title: B,
+		onClick: K,
+		children: G
+	});
+	let ge = q && (M || P), X;
+	ge && (X = te);
+	let _e = e(ee, X), Z = null;
+	D != null && !w && (Z = /* @__PURE__ */ d("button", {
+		type: "button",
+		className: r,
+		draggable: k,
+		onDragStart: oe,
+		onDragEnd: le,
+		"aria-label": O,
+		title: O,
+		children: D
+	}));
+	let Q = null;
+	E != null && !w && (Q = /* @__PURE__ */ d("span", {
+		className: t,
+		children: E
+	}));
+	let $ = null;
+	return q && ($ = /* @__PURE__ */ f("span", {
+		className: _e,
+		children: [Z, Q]
+	})), /* @__PURE__ */ f("div", {
+		className: L,
+		onDragOver: se,
+		onDrop: ce,
+		onMouseEnter: fe,
+		onMouseLeave: pe,
+		onFocusCapture: me,
+		onBlurCapture: he,
+		ref: A,
+		children: [Y, $]
+	});
+};
+//#endregion
+export { y as SidebarNavItem, y as default };
+
+//# sourceMappingURL=SidebarNavItem.js.map

package/lib/esm/backoffice/molecules/sidebar_nav_item/SidebarNavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNavItem.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_item/SidebarNavItem.tsx"],"sourcesContent":["import { Link } from '@plumile/router';\nimport {\n  type AnchorHTMLAttributes,\n  type ComponentPropsWithoutRef,\n  type DragEvent,\n  type FocusEvent,\n  type JSX,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport * as styles from './sidebarNavItem.css.js';\nimport { cx } from '@plumile/ui';\n\ntype RouterLinkProps = ComponentPropsWithoutRef<typeof Link> &\n  AnchorHTMLAttributes<HTMLAnchorElement>;\nconst RouterLink = Link as unknown as (props: RouterLinkProps) => JSX.Element;\n\nexport type SidebarNavItemProps = {\n  label: ReactNode;\n  href?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n  isActive?: boolean;\n  disabled?: boolean;\n  onClick?: () => void;\n  onDragStart?: (event: DragEvent) => void;\n  onDragOver?: (event: DragEvent) => void;\n  onDrop?: (event: DragEvent) => void;\n  onDragEnd?: (event: DragEvent) => void;\n  collapsed?: boolean;\n  ariaLabel?: string;\n  className?: string;\n  actionSlot?: ReactNode;\n  dragHandleSlot?: ReactNode;\n  dragHandleLabel?: string;\n  draggable?: boolean;\n};\n\nexport const SidebarNavItem = ({\n  label,\n  href,\n  icon,\n  badge,\n  isActive = false,\n  disabled = false,\n  onClick,\n  onDragStart,\n  onDragOver,\n  onDrop,\n  onDragEnd,\n  collapsed = false,\n  ariaLabel,\n  className,\n  actionSlot,\n  dragHandleSlot,\n  dragHandleLabel,\n  draggable = false,\n}: SidebarNavItemProps): JSX.Element => {\n  const itemRef = useRef<HTMLDivElement | null>(null);\n  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const [isHoverIntent, setIsHoverIntent] = useState(false);\n  const [isFocusWithin, setIsFocusWithin] = useState(false);\n\n  const itemClassNames: (string | null | undefined)[] = [styles.item];\n  if (collapsed) {\n    itemClassNames.push(styles.itemCollapsed);\n  }\n  if (isActive) {\n    itemClassNames.push(styles.itemActive);\n  }\n  if (disabled) {\n    itemClassNames.push(styles.itemDisabled);\n  }\n  if (className != null) {\n    itemClassNames.push(className);\n  }\n  const itemClassName = cx(...itemClassNames);\n\n  let resolvedAriaLabel: string | undefined = ariaLabel;\n  if (resolvedAriaLabel == null && typeof label === 'string') {\n    resolvedAriaLabel = label;\n  }\n\n  let collapsedAriaLabel: string | undefined;\n  let collapsedTitle: string | undefined;\n  if (collapsed) {\n    collapsedAriaLabel = resolvedAriaLabel;\n    collapsedTitle = resolvedAriaLabel;\n  }\n\n  let ariaCurrent: 'page' | undefined;\n  if (isActive) {\n    ariaCurrent = 'page';\n  }\n\n  let iconNode: JSX.Element | null = null;\n  if (icon != null) {\n    iconNode = <span className={styles.icon}>{icon}</span>;\n  }\n\n  let labelExtraClass: string | null = null;\n  if (collapsed) {\n    labelExtraClass = styles.labelCollapsed;\n  }\n  const labelClassName = cx(styles.label, labelExtraClass);\n\n  let badgeNode: JSX.Element | null = null;\n  if (badge != null) {\n    let badgeExtraClass: string | null = null;\n    if (collapsed) {\n      badgeExtraClass = styles.badgeCollapsed;\n    }\n    badgeNode = (\n      <span className={cx(styles.badge, badgeExtraClass)}>{badge}</span>\n    );\n  }\n\n  const content = (\n    <>\n      {iconNode}\n      <span className={labelClassName}>{label}</span>\n      {badgeNode}\n    </>\n  );\n\n  const handleClick = (): void => {\n    if (onClick != null) {\n      onClick();\n    }\n  };\n\n  const shouldRenderActions =\n    !collapsed && !disabled && (actionSlot != null || dragHandleSlot != null);\n\n  const clearHoverTimeout = useCallback((): void => {\n    if (hoverTimeoutRef.current != null) {\n      clearTimeout(hoverTimeoutRef.current);\n      hoverTimeoutRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => {\n    if (!shouldRenderActions) {\n      setIsHoverIntent(false);\n      setIsFocusWithin(false);\n      clearHoverTimeout();\n    }\n\n    return () => {\n      clearHoverTimeout();\n    };\n  }, [clearHoverTimeout, shouldRenderActions]);\n\n  const handleMouseEnter = (): void => {\n    if (!shouldRenderActions) {\n      return;\n    }\n    clearHoverTimeout();\n    hoverTimeoutRef.current = setTimeout(() => {\n      setIsHoverIntent(true);\n    }, 150);\n  };\n\n  const handleMouseLeave = (): void => {\n    clearHoverTimeout();\n    setIsHoverIntent(false);\n  };\n\n  const handleFocusCapture = (): void => {\n    if (!shouldRenderActions) {\n      return;\n    }\n    setIsFocusWithin(true);\n  };\n\n  const handleBlurCapture = (event: FocusEvent<HTMLDivElement>): void => {\n    if (!shouldRenderActions) {\n      setIsFocusWithin(false);\n      return;\n    }\n    const nextTarget = event.relatedTarget as Node | null;\n    if (nextTarget != null && itemRef.current?.contains(nextTarget)) {\n      return;\n    }\n    setIsFocusWithin(false);\n  };\n\n  let mainNode: JSX.Element;\n  if (disabled) {\n    mainNode = (\n      <span\n        className={styles.link}\n        aria-disabled=\"true\"\n        aria-label={collapsedAriaLabel}\n        title={collapsedTitle}\n      >\n        {content}\n      </span>\n    );\n  } else if (href != null) {\n    mainNode = (\n      <RouterLink\n        to={href}\n        className={styles.link}\n        aria-current={ariaCurrent}\n        aria-label={collapsedAriaLabel}\n        title={collapsedTitle}\n        onClick={handleClick}\n      >\n        {content}\n      </RouterLink>\n    );\n  } else {\n    mainNode = (\n      <button\n        type=\"button\"\n        className={styles.link}\n        onClick={handleClick}\n        aria-current={ariaCurrent}\n        aria-label={collapsedAriaLabel}\n        title={collapsedTitle}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  const isActionsVisible =\n    shouldRenderActions && (isHoverIntent || isFocusWithin);\n  let actionsVisibilityClass: string | undefined;\n  if (isActionsVisible) {\n    actionsVisibilityClass = styles.actionsVisible;\n  }\n  const actionsClassName = cx(styles.actions, actionsVisibilityClass);\n\n  let dragHandleNode: JSX.Element | null = null;\n  if (dragHandleSlot != null && !collapsed) {\n    dragHandleNode = (\n      <button\n        type=\"button\"\n        className={styles.dragHandle}\n        draggable={draggable}\n        onDragStart={onDragStart}\n        onDragEnd={onDragEnd}\n        aria-label={dragHandleLabel}\n        title={dragHandleLabel}\n      >\n        {dragHandleSlot}\n      </button>\n    );\n  }\n\n  let actionNode: JSX.Element | null = null;\n  if (actionSlot != null && !collapsed) {\n    actionNode = <span className={styles.actionSlot}>{actionSlot}</span>;\n  }\n\n  let actionsNode: JSX.Element | null = null;\n  if (shouldRenderActions) {\n    actionsNode = (\n      <span className={actionsClassName}>\n        {dragHandleNode}\n        {actionNode}\n      </span>\n    );\n  }\n\n  return (\n    <div\n      className={itemClassName}\n      onDragOver={onDragOver}\n      onDrop={onDrop}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onFocusCapture={handleFocusCapture}\n      onBlurCapture={handleBlurCapture}\n      ref={itemRef}\n    >\n      {mainNode}\n      {actionsNode}\n    </div>\n  );\n};\n\nexport default SidebarNavItem;\n"],"mappings":";;;;;;;AAmBA,IAAM,IAAa,GAuBN,KAAkB,EAC7B,OAAA,GACA,SACA,MAAA,GACA,OAAA,GACA,cAAW,IACX,cAAW,IACX,aACA,iBACA,gBACA,YACA,eACA,eAAY,IACZ,eACA,cACA,YAAA,GACA,mBACA,oBACA,eAAY,SAC0B;CACtC,IAAM,IAAU,EAA8B,KAAK,EAC7C,IAAkB,EAA6C,KAAK,EACpE,CAAC,GAAe,KAAoB,EAAS,GAAM,EACnD,CAAC,GAAe,KAAoB,EAAS,GAAM,EAEnD,IAAgD,CAAC,EAAY;AAUnE,CATI,KACF,EAAe,KAAK,EAAqB,EAEvC,KACF,EAAe,KAAK,EAAkB,EAEpC,KACF,EAAe,KAAK,EAAoB,EAEtC,KAAa,QACf,EAAe,KAAK,EAAU;CAEhC,IAAM,IAAgB,EAAG,GAAG,EAAe,EAEvC,IAAwC;AAC5C,CAAI,KAAqB,QAAQ,OAAO,KAAU,aAChD,IAAoB;CAGtB,IAAI,GACA;AACJ,CAAI,MACF,IAAqB,GACrB,IAAiB;CAGnB,IAAI;AACJ,CAAI,MACF,IAAc;CAGhB,IAAI,IAA+B;AACnC,CAAI,KAAQ,SACV,IAAW,kBAAC,QAAD;EAAM,WAAW;YAAc;EAAY,CAAA;CAGxD,IAAI,IAAiC;AACrC,CAAI,MACF,IAAkB;CAEpB,IAAM,KAAiB,EAAG,GAAc,EAAgB,EAEpD,IAAgC;AACpC,KAAI,KAAS,MAAM;EACjB,IAAI,IAAiC;AAIrC,EAHI,MACF,IAAkB,IAEpB,IACE,kBAAC,QAAD;GAAM,WAAW,EAAG,IAAc,EAAgB;aAAG;GAAa,CAAA;;CAItE,IAAM,IACJ,kBAAA,IAAA,EAAA,UAAA;EACG;EACD,kBAAC,QAAD;GAAM,WAAW;aAAiB;GAAa,CAAA;EAC9C;EACA,EAAA,CAAA,EAGC,UAA0B;AAC9B,EAAI,MACO;IAIP,IACJ,CAAC,KAAa,CAAC,MAAa,KAAc,QAAQ,KAAkB,OAEhE,IAAoB,QAAwB;AAChD,EAAI,EAAgB,WAAW,SAC7B,aAAa,EAAgB,QAAQ,EACrC,EAAgB,UAAU;IAE3B,EAAE,CAAC;AAEN,UACO,MACH,EAAiB,GAAM,EACvB,EAAiB,GAAM,EACvB,GAAmB,SAGR;AACX,KAAmB;KAEpB,CAAC,GAAmB,EAAoB,CAAC;CAE5C,IAAM,WAA+B;AAC9B,QAGL,GAAmB,EACnB,EAAgB,UAAU,iBAAiB;AACzC,KAAiB,GAAK;KACrB,IAAI;IAGH,WAA+B;AAEnC,EADA,GAAmB,EACnB,EAAiB,GAAM;IAGnB,WAAiC;AAChC,OAGL,EAAiB,GAAK;IAGlB,MAAqB,MAA4C;AACrE,MAAI,CAAC,GAAqB;AACxB,KAAiB,GAAM;AACvB;;EAEF,IAAM,IAAa,EAAM;AACrB,OAAc,QAAQ,EAAQ,SAAS,SAAS,EAAW,IAG/D,EAAiB,GAAM;IAGrB;AACJ,CAYE,IAZE,IAEA,kBAAC,QAAD;EACE,WAAW;EACX,iBAAc;EACd,cAAY;EACZ,OAAO;YAEN;EACI,CAAA,GAEA,KAAQ,OAef,kBAAC,UAAD;EACE,MAAK;EACL,WAAW;EACX,SAAS;EACT,gBAAc;EACd,cAAY;EACZ,OAAO;YAEN;EACM,CAAA,GAtBT,kBAAC,GAAD;EACE,IAAI;EACJ,WAAW;EACX,gBAAc;EACd,cAAY;EACZ,OAAO;EACP,SAAS;YAER;EACU,CAAA;CAiBjB,IAAM,KACJ,MAAwB,KAAiB,IACvC;AACJ,CAAI,OACF,IAAyB;CAE3B,IAAM,KAAmB,EAAG,IAAgB,EAAuB,EAE/D,IAAqC;AACzC,CAAI,KAAkB,QAAQ,CAAC,MAC7B,IACE,kBAAC,UAAD;EACE,MAAK;EACL,WAAW;EACA;EACE;EACF;EACX,cAAY;EACZ,OAAO;YAEN;EACM,CAAA;CAIb,IAAI,IAAiC;AACrC,CAAI,KAAc,QAAQ,CAAC,MACzB,IAAa,kBAAC,QAAD;EAAM,WAAW;YAAoB;EAAkB,CAAA;CAGtE,IAAI,IAAkC;AAUtC,QATI,MACF,IACE,kBAAC,QAAD;EAAM,WAAW;YAAjB,CACG,GACA,EACI;MAKT,kBAAC,OAAD;EACE,WAAW;EACC;EACJ;EACR,cAAc;EACd,cAAc;EACd,gBAAgB;EAChB,eAAe;EACf,KAAK;YARP,CAUG,GACA,EACG"}

package/lib/esm/backoffice/molecules/sidebar_nav_item/sidebarNavItem.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                              */
+//#region src/backoffice/molecules/sidebar_nav_item/sidebarNavItem.css.ts
+var e = "_1nm2b9q0 txvbqb9jf txvbqbco txvbqbanx txvbqb7d txvbqb6x txvbqb7k txvbqbaj6 txvbqbvab txvbqbtuo txvbqb2k", t = "_1nm2b9q1 txvbqbvb5 txvbqbtux txvbqb2l", n = "_1nm2b9q3 _1nm2b9q2 txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb9io txvbqbco txvbqbao6 txvbqb1rf txvbqb8x txvbqb78 txvbqb6x txvbqb7k txvbqbv txvbqbv8r", r = "_1nm2b9q4 txvbqbnux txvbqboi6 txvbqbdnx", i = "_1nm2b9q5 txvbqbamo txvbqbv2v txvbqbv8p txvbqb8tx", a = "_1nm2b9q7 _1nm2b9q6 txvbqbv8t txvbqbr", o = "_1nm2b9q8 txvbqb9io txvbqbco txvbqbao6 txvbqb9mx txvbqbk4x txvbqb3b txvbqbuzj txvbqb12f txvbqb1px txvbqbl9f txvbqbt5o txvbqbv4x txvbqb1p", s = "_1nm2b9q9 txvbqb9jf txvbqbco", c = "_1nm2b9qb _1nm2b9qa txvbqb9jf txvbqbco txvbqbdnx txvbqbtwo txvbqbc66 txvbqb1rf txvbqb12f txvbqb1px txvbqbl9f txvbqbuzj txvbqbv8r txvbqbi", l = "_1nm2b9qc txvbqb9jf txvbqbco txvbqbdnx txvbqbtwo txvbqbc66 txvbqbaj6 txvbqbv4x", u = "_1nm2b9qd txvbqb9mx txvbqbk4x", d = "_1nm2b9qe txvbqb9hx", f = "_1nm2b9qf txvbqb9jf txvbqbco txvbqbdnx txvbqbaj6", p = "_1nm2b9qg txvbqb9hx";
+//#endregion
+export { s as actionSlot, e as actions, t as actionsVisible, f as badge, p as badgeCollapsed, c as dragHandle, l as icon, n as item, i as itemActive, r as itemCollapsed, a as itemDisabled, u as label, d as labelCollapsed, o as link };
+
+//# sourceMappingURL=sidebarNavItem.css.js.map

package/lib/esm/backoffice/molecules/sidebar_nav_item/sidebarNavItem.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebarNavItem.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_item/sidebarNavItem.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\nconst inlineFlex = 'inline-flex';\n\nexport const actions = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n  gap: 1,\n  transitionProperty: 'opacity',\n  transitionDuration: 150,\n  transitionTimingFunction: 'ease',\n  flexShrink: 0,\n  opacity: 0,\n  visibility: 'hidden',\n  pointerEvents: 'none',\n});\n\nexport const actionsVisible = sprinkles({\n  opacity: 100,\n  visibility: 'visible',\n  pointerEvents: 'auto',\n});\n\nexport const item = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    paddingY: 2,\n    paddingX: 3,\n    borderRadius: 'md',\n    fontSize: 'sm',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n    cursor: 'pointer',\n    color: 'textSecondary',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.surfaceMuted,\n        color: vars.colors.text,\n      },\n    },\n  },\n]);\n\nexport const itemCollapsed = sprinkles({\n  justifyContent: 'center',\n  paddingX: 2,\n});\n\nexport const itemActive = sprinkles({\n  fontWeight: 'semibold',\n  backgroundColor: 'surfaceMuted',\n  color: 'text',\n  boxShadow: 'sidebarActiveInset',\n});\n\nexport const itemDisabled = style([\n  sprinkles({\n    color: 'textMuted',\n    cursor: 'not-allowed',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n]);\n\nexport const link = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  flex: 1,\n  minWidth: 0,\n  textDecoration: 'none',\n  backgroundColor: 'transparent',\n  borderWidth: 0,\n  borderStyle: 'none',\n  padding: 0,\n  textAlign: 'left',\n  color: 'inherit',\n  font: 'inherit',\n});\n\nexport const actionSlot = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n});\n\nexport const dragHandle = style([\n  sprinkles({\n    display: inlineFlex,\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 6,\n    height: 6,\n    borderRadius: 'md',\n    borderWidth: 0,\n    borderStyle: 'none',\n    padding: 0,\n    backgroundColor: 'transparent',\n    color: 'textSecondary',\n    cursor: 'grab',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.surfaceMuted,\n        color: vars.colors.text,\n      },\n      '&:active': {\n        cursor: 'grabbing',\n      },\n    },\n  },\n]);\n\nexport const icon = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 6,\n  height: 6,\n  flexShrink: 0,\n  color: 'inherit',\n});\n\nexport const label = sprinkles({\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const labelCollapsed = sprinkles({\n  display: 'none',\n});\n\nexport const badge = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexShrink: 0,\n});\n\nexport const badgeCollapsed = sprinkles({\n  display: 'none',\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/sidebar_nav_section/SidebarNavSection.js

@@ -0,0 +1,64 @@
+import { cx as e } from "../../../theme/tools.js";
+import { ChevronDownSvg as t } from "../../../icons/ChevronDownSvg.js";
+import { SidebarNavItem as n } from "../sidebar_nav_item/SidebarNavItem.js";
+import { header as r, items as i, section as a, title as o, toggle as s } from "./sidebarNavSection.css.js";
+import "../../../index.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useCallback as u, useMemo as d, useState as f } from "react";
+//#region src/backoffice/molecules/sidebar_nav_section/SidebarNavSection.tsx
+var p = ({ title: p, items: m, collapsible: h = !1, isCollapsed: g, defaultCollapsed: _ = !1, onCollapsedChange: v, collapsed: y = !1, className: b }) => {
+	let [x, S] = f(_), C = g ?? x, w = h, T = u(() => {
+		if (!w) return;
+		let e = !C;
+		g ?? S(e), v?.(e);
+	}, [
+		w,
+		C,
+		g,
+		v
+	]), E = d(() => {
+		let e = "rotate(0deg)";
+		return C && (e = "rotate(-90deg)"), {
+			transform: e,
+			transition: "transform 120ms ease"
+		};
+	}, [C]), D = null;
+	if (p != null) {
+		let e = null;
+		w && (e = /* @__PURE__ */ c("button", {
+			type: "button",
+			className: s,
+			onClick: T,
+			"aria-expanded": !C,
+			children: /* @__PURE__ */ c(t, {
+				width: 18,
+				height: 18,
+				style: E
+			})
+		})), D = /* @__PURE__ */ l("div", {
+			className: r,
+			children: [/* @__PURE__ */ c("div", {
+				className: o,
+				children: p
+			}), e]
+		});
+	}
+	let O = null;
+	return C || (O = /* @__PURE__ */ c("div", {
+		className: i,
+		children: m.map((e) => {
+			let { id: t, data: r, ...i } = e;
+			return /* @__PURE__ */ c(n, {
+				...i,
+				collapsed: y
+			}, t);
+		})
+	})), /* @__PURE__ */ l("section", {
+		className: e(a, b),
+		children: [D, O]
+	});
+};
+//#endregion
+export { p as SidebarNavSection, p as default };
+
+//# sourceMappingURL=SidebarNavSection.js.map

package/lib/esm/backoffice/molecules/sidebar_nav_section/SidebarNavSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNavSection.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_section/SidebarNavSection.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ReactNode,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { ChevronDownSvg } from '@plumile/ui/icons/ChevronDownSvg.js';\n\nimport {\n  SidebarNavItem,\n  type SidebarNavItemProps,\n} from '../sidebar_nav_item/SidebarNavItem.js';\nimport * as styles from './sidebarNavSection.css.js';\nimport { cx } from '@plumile/ui';\n\nexport type SidebarNavSectionItemData = {\n  kind: 'dashboard' | 'entity' | 'tool';\n  id: string;\n  groupId?: string;\n};\n\nexport type SidebarNavSectionItem = SidebarNavItemProps & {\n  id: string;\n  data?: SidebarNavSectionItemData;\n};\n\nexport type SidebarNavSectionProps = {\n  title?: ReactNode;\n  items: readonly SidebarNavSectionItem[];\n  collapsible?: boolean;\n  isCollapsed?: boolean;\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  collapsed?: boolean;\n  className?: string;\n};\n\nexport const SidebarNavSection = ({\n  title,\n  items,\n  collapsible = false,\n  isCollapsed,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  collapsed: sidebarCollapsed = false,\n  className,\n}: SidebarNavSectionProps): JSX.Element => {\n  const [uncontrolledCollapsed, setUncontrolledCollapsed] =\n    useState(defaultCollapsed);\n\n  const collapsed = isCollapsed ?? uncontrolledCollapsed;\n\n  const canCollapse = collapsible;\n\n  const handleToggle = useCallback(() => {\n    if (!canCollapse) {\n      return;\n    }\n    const next = !collapsed;\n    if (isCollapsed == null) {\n      setUncontrolledCollapsed(next);\n    }\n    onCollapsedChange?.(next);\n  }, [canCollapse, collapsed, isCollapsed, onCollapsedChange]);\n\n  const iconStyle = useMemo(() => {\n    let rotate = 'rotate(0deg)';\n    if (collapsed) {\n      rotate = 'rotate(-90deg)';\n    }\n    return { transform: rotate, transition: 'transform 120ms ease' } as const;\n  }, [collapsed]);\n\n  let headerNode: JSX.Element | null = null;\n  if (title != null) {\n    let collapseToggleNode: JSX.Element | null = null;\n    if (canCollapse) {\n      collapseToggleNode = (\n        <button\n          type=\"button\"\n          className={styles.toggle}\n          onClick={handleToggle}\n          aria-expanded={!collapsed}\n        >\n          <ChevronDownSvg width={18} height={18} style={iconStyle} />\n        </button>\n      );\n    }\n\n    headerNode = (\n      <div className={styles.header}>\n        <div className={styles.title}>{title}</div>\n        {collapseToggleNode}\n      </div>\n    );\n  }\n\n  let itemsNode: JSX.Element | null = null;\n  if (!collapsed) {\n    itemsNode = (\n      <div className={styles.items}>\n        {items.map((item) => {\n          const { id, data, ...rest } = item;\n          return (\n            <SidebarNavItem key={id} {...rest} collapsed={sidebarCollapsed} />\n          );\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <section className={cx(styles.section, className)}>\n      {headerNode}\n      {itemsNode}\n    </section>\n  );\n};\n\nexport default SidebarNavSection;\n"],"mappings":";;;;;;;;AAuCA,IAAa,KAAqB,EAChC,OAAA,GACA,OAAA,GACA,iBAAc,IACd,gBACA,sBAAmB,IACnB,sBACA,WAAW,IAAmB,IAC9B,mBACyC;CACzC,IAAM,CAAC,GAAuB,KAC5B,EAAS,EAAiB,EAEtB,IAAY,KAAe,GAE3B,IAAc,GAEd,IAAe,QAAkB;AACrC,MAAI,CAAC,EACH;EAEF,IAAM,IAAO,CAAC;AAId,EAHI,KACF,EAAyB,EAAK,EAEhC,IAAoB,EAAK;IACxB;EAAC;EAAa;EAAW;EAAa;EAAkB,CAAC,EAEtD,IAAY,QAAc;EAC9B,IAAI,IAAS;AAIb,SAHI,MACF,IAAS,mBAEJ;GAAE,WAAW;GAAQ,YAAY;GAAwB;IAC/D,CAAC,EAAU,CAAC,EAEX,IAAiC;AACrC,KAAI,KAAS,MAAM;EACjB,IAAI,IAAyC;AAc7C,EAbI,MACF,IACE,kBAAC,UAAD;GACE,MAAK;GACL,WAAW;GACX,SAAS;GACT,iBAAe,CAAC;aAEhB,kBAAC,GAAD;IAAgB,OAAO;IAAI,QAAQ;IAAI,OAAO;IAAa,CAAA;GACpD,CAAA,GAIb,IACE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,OAAD;IAAK,WAAW;cAAe;IAAY,CAAA,EAC1C,EACG;;;CAIV,IAAI,IAAgC;AAcpC,QAbK,MACH,IACE,kBAAC,OAAD;EAAK,WAAW;YACb,EAAM,KAAK,MAAS;GACnB,IAAM,EAAE,OAAI,SAAM,GAAG,MAAS;AAC9B,UACE,kBAAC,GAAD;IAAyB,GAAI;IAAM,WAAW;IAAoB,EAA7C,EAA6C;IAEpE;EACE,CAAA,GAKR,kBAAC,WAAD;EAAS,WAAW,EAAG,GAAgB,EAAU;YAAjD,CACG,GACA,EACO"}

package/lib/esm/backoffice/molecules/sidebar_nav_section/sidebarNavSection.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                                 */
+//#region src/backoffice/molecules/sidebar_nav_section/sidebarNavSection.css.ts
+var e = "_1rp5mg60 txvbqb9io txvbqbai6 txvbqbao6", t = "_1rp5mg61 txvbqbnux txvbqboi6 txvbqbp56 txvbqblwx txvbqb9io txvbqbco txvbqbdoo txvbqbao6", n = "_1rp5mg62 txvbqb8f txvbqbamo txvbqb66 txvbqbv8t txvbqbedo", r = "_1rp5mg64 _1rp5mg63 txvbqb9jf txvbqbco txvbqbdnx txvbqbtwx txvbqbc6f txvbqb1rf txvbqbv31 txvbqb12f txvbqb1px txvbqbv txvbqbv8r", i = "_1rp5mg65 txvbqb9io txvbqbai6 txvbqbb9o";
+//#endregion
+export { t as header, i as items, e as section, n as title, r as toggle };
+
+//# sourceMappingURL=sidebarNavSection.css.js.map

package/lib/esm/backoffice/molecules/sidebar_nav_section/sidebarNavSection.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebarNavSection.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_section/sidebarNavSection.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 section = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n});\n\nexport const header = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: 2,\n  paddingX: 2,\n  paddingY: 1,\n});\n\nexport const title = sprinkles({\n  fontSize: '2xs',\n  fontWeight: 'semibold',\n  textTransform: 'uppercase',\n  color: 'textMuted',\n  letterSpacing: 'wide',\n});\n\nexport const toggle = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 7,\n    height: 7,\n    borderRadius: 'md',\n    backgroundColor: 'backgroundSecondary',\n    borderWidth: 0,\n    borderStyle: 'none',\n    cursor: 'pointer',\n    color: 'textSecondary',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.surfaceMuted,\n        color: vars.colors.text,\n      },\n    },\n  },\n]);\n\nexport const items = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1.5,\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/sidebar_profile_menu/BackofficeSidebarProfileMenu.js

@@ -0,0 +1,69 @@
+import { cx as e } from "../../../theme/tools.js";
+import { ChevronDownSvg as t } from "../../../icons/ChevronDownSvg.js";
+import { Dropdown as n } from "../../../atomic/molecules/dropdown/Dropdown.js";
+import { ProfileDropdownLogoutSvg as r } from "../../../icons/ProfileDropdownLogoutSvg.js";
+import { avatar as i, container as a, hidden as o, menu as s, menuIcon as c, menuItem as l, title as u, trigger as d, triggerMain as f } from "./sidebarProfileMenu.css.js";
+import "../../../index.js";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/backoffice/molecules/sidebar_profile_menu/BackofficeSidebarProfileMenu.tsx
+var h = ({ viewer: h, collapsed: g, labels: _, onSignOut: v, isSigningOut: y = !1, className: b }) => {
+	let x = u;
+	return g && (x = o), /* @__PURE__ */ m("div", {
+		className: e(a, b),
+		children: [/* @__PURE__ */ p("div", {
+			className: x,
+			children: _.sectionTitle
+		}), /* @__PURE__ */ p(n, {
+			trigger: (n) => /* @__PURE__ */ m("button", {
+				type: "button",
+				className: d({ collapsed: g }),
+				"aria-label": h.ariaLabel,
+				children: [/* @__PURE__ */ m("span", {
+					className: f,
+					children: [/* @__PURE__ */ p("span", {
+						className: i,
+						children: h.initials
+					}), !g && /* @__PURE__ */ m("span", {
+						className: "_1uw3f9ob txvbqb9io txvbqbai6 txvbqbk4x",
+						children: [/* @__PURE__ */ p("span", {
+							className: "_1uw3f9oc txvbqb8x txvbqbamo txvbqbv8p txvbqbuw6 txvbqbl6f txvbqbt6f",
+							children: h.displayName
+						}), /* @__PURE__ */ p("span", {
+							className: "_1uw3f9od txvbqb8o txvbqbv8r txvbqbuw6 txvbqbl6f txvbqbt6f",
+							children: h.email
+						})]
+					})]
+				}), !g && /* @__PURE__ */ p(t, {
+					width: 16,
+					height: 16,
+					className: e("_1uw3f9oe txvbqbv8r txvbqb7g txvbqb6w txvbqb7k", { "_1uw3f9of txvbqb2w": n })
+				})]
+			}),
+			ariaLabel: _.menuAriaLabel,
+			placement: "top-start",
+			closeOnItemClick: !0,
+			matchTriggerWidth: !1,
+			children: /* @__PURE__ */ p("div", {
+				className: s,
+				children: /* @__PURE__ */ m("button", {
+					type: "button",
+					role: "menuitem",
+					className: l,
+					onClick: v,
+					disabled: y,
+					children: [/* @__PURE__ */ p("span", {
+						className: c,
+						children: /* @__PURE__ */ p(r, {
+							width: 16,
+							height: 16
+						})
+					}), _.signOut]
+				})
+			})
+		})]
+	});
+};
+//#endregion
+export { h as BackofficeSidebarProfileMenu, h as default };
+
+//# sourceMappingURL=BackofficeSidebarProfileMenu.js.map

package/lib/esm/backoffice/molecules/sidebar_profile_menu/BackofficeSidebarProfileMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeSidebarProfileMenu.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_profile_menu/BackofficeSidebarProfileMenu.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { Dropdown } from '@plumile/ui/atomic/molecules/dropdown/Dropdown.js';\nimport { ChevronDownSvg } from '@plumile/ui/icons/ChevronDownSvg.js';\nimport { ProfileDropdownLogoutSvg } from '@plumile/ui/icons/ProfileDropdownLogoutSvg.js';\nimport { cx } from '@plumile/ui';\n\nimport * as styles from './sidebarProfileMenu.css.js';\n\nexport type BackofficeSidebarProfileViewer = {\n  displayName: string;\n  email: string;\n  initials: string;\n  ariaLabel: string;\n};\n\nexport type BackofficeSidebarProfileMenuLabels = {\n  sectionTitle: string;\n  menuAriaLabel: string;\n  signOut: string;\n};\n\nexport type BackofficeSidebarProfileMenuProps = {\n  viewer: BackofficeSidebarProfileViewer;\n  collapsed: boolean;\n  labels: BackofficeSidebarProfileMenuLabels;\n  onSignOut: () => void;\n  isSigningOut?: boolean;\n  className?: string;\n};\n\nexport const BackofficeSidebarProfileMenu = ({\n  viewer,\n  collapsed,\n  labels,\n  onSignOut,\n  isSigningOut = false,\n  className,\n}: BackofficeSidebarProfileMenuProps): JSX.Element => {\n  let titleClassName = styles.title;\n  if (collapsed) {\n    titleClassName = styles.hidden;\n  }\n\n  return (\n    <div className={cx(styles.container, className)}>\n      <div className={titleClassName}>{labels.sectionTitle}</div>\n      <Dropdown\n        trigger={(isOpen: boolean) => {\n          return (\n            <button\n              type=\"button\"\n              className={styles.trigger({ collapsed })}\n              aria-label={viewer.ariaLabel}\n            >\n              <span className={styles.triggerMain}>\n                <span className={styles.avatar}>{viewer.initials}</span>\n                {!collapsed && (\n                  <span className={styles.identity}>\n                    <span className={styles.displayName}>\n                      {viewer.displayName}\n                    </span>\n                    <span className={styles.email}>{viewer.email}</span>\n                  </span>\n                )}\n              </span>\n              {!collapsed && (\n                <ChevronDownSvg\n                  width={16}\n                  height={16}\n                  className={cx(styles.chevron, {\n                    [styles.chevronOpen]: isOpen,\n                  })}\n                />\n              )}\n            </button>\n          );\n        }}\n        ariaLabel={labels.menuAriaLabel}\n        placement=\"top-start\"\n        closeOnItemClick\n        matchTriggerWidth={false}\n      >\n        <div className={styles.menu}>\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            className={styles.menuItem}\n            onClick={onSignOut}\n            disabled={isSigningOut}\n          >\n            <span className={styles.menuIcon}>\n              <ProfileDropdownLogoutSvg width={16} height={16} />\n            </span>\n            {labels.signOut}\n          </button>\n        </div>\n      </Dropdown>\n    </div>\n  );\n};\n\nexport default BackofficeSidebarProfileMenu;\n"],"mappings":";;;;;;;;AA+BA,IAAa,KAAgC,EAC3C,WACA,cACA,WACA,cACA,kBAAe,IACf,mBACoD;CACpD,IAAI,IAAiB;AAKrB,QAJI,MACF,IAAiB,IAIjB,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAkB,EAAU;YAA/C,CACE,kBAAC,OAAD;GAAK,WAAW;aAAiB,EAAO;GAAmB,CAAA,EAC3D,kBAAC,GAAD;GACE,UAAU,MAEN,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EAAe,EAAE,cAAW,CAAC;IACxC,cAAY,EAAO;cAHrB,CAKE,kBAAC,QAAD;KAAM,WAAW;eAAjB,CACE,kBAAC,QAAD;MAAM,WAAW;gBAAgB,EAAO;MAAgB,CAAA,EACvD,CAAC,KACA,kBAAC,QAAD;MAAM,WAAW;gBAAjB,CACE,kBAAC,QAAD;OAAM,WAAW;iBACd,EAAO;OACH,CAAA,EACP,kBAAC,QAAD;OAAM,WAAW;iBAAe,EAAO;OAAa,CAAA,CAC/C;QAEJ;QACN,CAAC,KACA,kBAAC,GAAD;KACE,OAAO;KACP,QAAQ;KACR,WAAW,EAAG,kDAAgB,EAC3B,sBAAqB,GACvB,CAAC;KACF,CAAA,CAEG;;GAGb,WAAW,EAAO;GAClB,WAAU;GACV,kBAAA;GACA,mBAAmB;aAEnB,kBAAC,OAAD;IAAK,WAAW;cACd,kBAAC,UAAD;KACE,MAAK;KACL,MAAK;KACL,WAAW;KACX,SAAS;KACT,UAAU;eALZ,CAOE,kBAAC,QAAD;MAAM,WAAW;gBACf,kBAAC,GAAD;OAA0B,OAAO;OAAI,QAAQ;OAAM,CAAA;MAC9C,CAAA,EACN,EAAO,QACD;;IACL,CAAA;GACG,CAAA,CACP"}

package/lib/esm/backoffice/molecules/sidebar_profile_menu/sidebarProfileMenu.css.js

@@ -0,0 +1,17 @@
+/* empty css                                      */
+/* empty css                                  */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/backoffice/molecules/sidebar_profile_menu/sidebarProfileMenu.css.ts
+var t = "_1uw3f9o0 txvbqb9io txvbqbai6 txvbqbao6 txvbqbu6f", n = "_1uw3f9o1 txvbqbnuo txvbqbohx txvbqb8o txvbqbamo txvbqbv8r", r = "_1uw3f9o2 txvbqb9hx", i = e({
+	defaultClassName: "_1uw3f9o6 _1uw3f9o3 txvbqb9io txvbqbco txvbqbu6f txvbqb1co txvbqb1qf txvbqbwo txvbqb1ro txvbqbv2t txvbqb78 txvbqb6w txvbqb7k txvbqbv",
+	variantClassNames: { collapsed: {
+		true: "_1uw3f9o7 _1uw3f9o4 txvbqbdnx txvbqbl9x",
+		false: "_1uw3f9o8 _1uw3f9o5 txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqbdoo txvbqbao6"
+	} },
+	defaultVariants: { collapsed: !1 },
+	compoundVariants: []
+}), a = "_1uw3f9o9 txvbqb9io txvbqbco txvbqbao6 txvbqbk4x txvbqb9mx", o = "_1uw3f9oa txvbqbtx6 txvbqbc6o txvbqbk6x txvbqbji6 txvbqb1t6 txvbqb9io txvbqbco txvbqbdnx txvbqb8o txvbqbamo txvbqbv9z txvbqbuy6 txvbqb66", s = "_1uw3f9ob txvbqb9io txvbqbai6 txvbqbk4x", c = "_1uw3f9oc txvbqb8x txvbqbamo txvbqbv8p txvbqbuw6 txvbqbl6f txvbqbt6f", l = "_1uw3f9od txvbqb8o txvbqbv8r txvbqbuw6 txvbqbl6f txvbqbt6f", u = "_1uw3f9oe txvbqbv8r txvbqb7g txvbqb6w txvbqb7k", d = "_1uw3f9of txvbqb2w", f = "_1uw3f9og txvbqbkcf txvbqbl9x txvbqb9io txvbqbai6 txvbqbanx", p = "_1uw3f9oi _1uw3f9oh txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb9io txvbqbco txvbqbao6 txvbqbu6f txvbqb12f txvbqb1px txvbqb1rf txvbqbuzj txvbqbv8p txvbqb8x txvbqbamf txvbqbt5o txvbqbv txvbqb78 txvbqb6w txvbqb7k", m = "_1uw3f9oj txvbqb9jf txvbqbco txvbqbv8r";
+//#endregion
+export { o as avatar, u as chevron, d as chevronOpen, t as container, c as displayName, l as email, r as hidden, s as identity, f as menu, m as menuIcon, p as menuItem, n as title, i as trigger, a as triggerMain };
+
+//# sourceMappingURL=sidebarProfileMenu.css.js.map

package/lib/esm/backoffice/molecules/sidebar_profile_menu/sidebarProfileMenu.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebarProfileMenu.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_profile_menu/sidebarProfileMenu.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  width: 'full',\n});\n\nexport const title = sprinkles({\n  fontSize: 'xs',\n  fontWeight: 'semibold',\n  color: 'textSecondary',\n  paddingX: 1,\n});\n\nexport const hidden = sprinkles({\n  display: 'none',\n});\n\nexport const trigger = recipe({\n  base: [\n    sprinkles({\n      display: 'flex',\n      alignItems: 'center',\n      width: 'full',\n      borderWidth: 'default',\n      borderStyle: 'solid',\n      borderColor: 'borderSubtle',\n      borderRadius: 'lg',\n      backgroundColor: 'surfaceSecondary',\n      transitionProperty: 'colors',\n      transitionDuration: 120,\n      transitionTimingFunction: 'ease',\n      cursor: 'pointer',\n    }),\n    {\n      selectors: {\n        '&:hover': {\n          backgroundColor: vars.colors.surfaceElevated,\n          borderColor: vars.colors.borderStrong,\n        },\n        '&:focus-visible': {\n          outline: `2px solid ${vars.colors.primary}`,\n          outlineOffset: '2px',\n        },\n      },\n    },\n  ],\n  variants: {\n    collapsed: {\n      true: sprinkles({\n        justifyContent: 'center',\n        padding: 2,\n      }),\n      false: sprinkles({\n        justifyContent: 'space-between',\n        gap: 2,\n        paddingY: 2,\n        paddingX: 3,\n      }),\n    },\n  },\n  defaultVariants: {\n    collapsed: false,\n  },\n});\n\nexport const triggerMain = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  minWidth: 0,\n  flex: 1,\n});\n\nexport const avatar = sprinkles({\n  width: 8,\n  height: 8,\n  minWidth: 8,\n  minHeight: 8,\n  borderRadius: 'full',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fontSize: 'xs',\n  fontWeight: 'semibold',\n  color: 'brandWhite',\n  backgroundImage: 'brandDiagonal',\n  textTransform: 'uppercase',\n});\n\nexport const identity = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  minWidth: 0,\n});\n\nexport const displayName = sprinkles({\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n  color: 'text',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const email = sprinkles({\n  fontSize: 'xs',\n  color: 'textSecondary',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const chevron = sprinkles({\n  color: 'textSecondary',\n  transitionProperty: 'transform',\n  transitionDuration: 120,\n  transitionTimingFunction: 'ease',\n});\n\nexport const chevronOpen = sprinkles({\n  rotate: 180,\n});\n\nexport const menu = sprinkles({\n  minWidth: 56,\n  padding: 2,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n});\n\nexport const menuItem = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    width: 'full',\n    borderWidth: 0,\n    borderStyle: 'none',\n    borderRadius: 'md',\n    backgroundColor: 'transparent',\n    color: 'text',\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    textAlign: 'left',\n    cursor: 'pointer',\n    paddingY: 2,\n    paddingX: 3,\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: vars.colors.surfaceSecondary,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n      '&:disabled': {\n        opacity: 0.6,\n        cursor: 'not-allowed',\n      },\n    },\n  },\n]);\n\nexport const menuIcon = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  color: 'textSecondary',\n});\n"],"mappings":""}