@plumile/ui 0.1.134 → 0.1.142

package/lib/esm/backoffice/molecules/confirm_dialog/ConfirmDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.js","names":[],"sources":["../../../../../src/backoffice/molecules/confirm_dialog/ConfirmDialog.tsx"],"sourcesContent":["import { useCallback, useState, type JSX, type ReactNode } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport {\n  Button,\n  type ButtonProps,\n} from '../../../atomic/atoms/button/Button.js';\nimport { ErrorMessage } from '../../../atomic/atoms/error_message/ErrorMessage.js';\nimport { Modal } from '../../../atomic/atoms/modal/Modal.js';\n\nimport * as styles from './confirmDialog.css.js';\n\nexport type ConfirmDialogProps = {\n  isOpen: boolean;\n  title: string;\n  children: ReactNode;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  confirmTone?: 'default' | 'danger';\n  confirmVariant?: ButtonProps['variant'];\n  isConfirmLoading?: boolean;\n  onClose: () => void;\n  onConfirm: () => Promise<void> | void;\n  closeOnConfirm?: boolean;\n};\n\nexport const ConfirmDialog = ({\n  isOpen,\n  title,\n  children,\n  confirmLabel,\n  cancelLabel,\n  confirmTone = 'default',\n  confirmVariant,\n  isConfirmLoading = false,\n  onClose,\n  onConfirm,\n  closeOnConfirm = true,\n}: ConfirmDialogProps): JSX.Element | null => {\n  const { t } = useTranslation('ui', { useSuspense: false });\n  const [isConfirming, setIsConfirming] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const resolvedConfirmLabel =\n    confirmLabel ?? t('common.actions.confirm', { defaultValue: 'Confirm' });\n  const resolvedCancelLabel =\n    cancelLabel ?? t('common.actions.cancel', { defaultValue: 'Cancel' });\n\n  const handleClose = useCallback(() => {\n    if (isConfirming || isConfirmLoading) {\n      return;\n    }\n    setError(null);\n    onClose();\n  }, [isConfirming, isConfirmLoading, onClose]);\n\n  const handleConfirm = useCallback(async () => {\n    if (isConfirming || isConfirmLoading) {\n      return;\n    }\n    setError(null);\n    setIsConfirming(true);\n    try {\n      await onConfirm();\n      if (closeOnConfirm) {\n        onClose();\n      }\n    } catch (err) {\n      let message = t('common.errors.unexpected', {\n        defaultValue: 'An unexpected error occurred.',\n      });\n      if (err instanceof Error && err.message.trim() !== '') {\n        message = err.message;\n      }\n      setError(message);\n    } finally {\n      setIsConfirming(false);\n    }\n  }, [closeOnConfirm, isConfirmLoading, isConfirming, onClose, onConfirm, t]);\n\n  let resolvedConfirmVariant = confirmVariant ?? 'primary';\n  if (confirmVariant == null && confirmTone === 'danger') {\n    resolvedConfirmVariant = 'danger';\n  }\n  const resolvedIsConfirming = isConfirming || isConfirmLoading;\n\n  const handleConfirmClick = () => {\n    handleConfirm().catch(() => {});\n  };\n\n  const footer = (\n    <div className={styles.footer}>\n      <Button\n        type=\"button\"\n        variant=\"secondary\"\n        onClick={handleClose}\n        disabled={resolvedIsConfirming}\n        data-initial-focus\n      >\n        {resolvedCancelLabel}\n      </Button>\n      <Button\n        type=\"button\"\n        variant={resolvedConfirmVariant}\n        onClick={handleConfirmClick}\n        isLoading={resolvedIsConfirming}\n      >\n        {resolvedConfirmLabel}\n      </Button>\n    </div>\n  );\n\n  let errorNode: JSX.Element | null = null;\n  if (error != null) {\n    errorNode = <ErrorMessage>{error}</ErrorMessage>;\n  }\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={handleClose}\n      title={title}\n      footer={footer}\n      initialFocus={{ mode: 'selector', selector: '[data-initial-focus]' }}\n    >\n      <div className={styles.body}>\n        {errorNode}\n        {children}\n      </div>\n    </Modal>\n  );\n};\n\nexport default ConfirmDialog;\n"],"mappings":";;;;;;;;AA0BA,IAAa,KAAiB,EAC5B,WACA,UACA,aACA,iBACA,gBACA,iBAAc,WACd,mBACA,sBAAmB,IACnB,YACA,cACA,oBAAiB,SAC2B;CAC5C,IAAM,EAAE,SAAM,EAAe,MAAM,EAAE,aAAa,IAAO,CAAC,EACpD,CAAC,GAAc,KAAmB,EAAS,GAAM,EACjD,CAAC,GAAO,KAAY,EAAwB,KAAK,EACjD,IACJ,KAAgB,EAAE,0BAA0B,EAAE,cAAc,WAAW,CAAC,EACpE,IACJ,KAAe,EAAE,yBAAyB,EAAE,cAAc,UAAU,CAAC,EAEjE,IAAc,QAAkB;EAChC,KAAgB,MAGpB,EAAS,KAAK,EACd,GAAS;IACR;EAAC;EAAc;EAAkB;EAAQ,CAAC,EAEvC,IAAgB,EAAY,YAAY;EACxC,WAAgB,IAIpB;GADA,EAAS,KAAK,EACd,EAAgB,GAAK;GACrB,IAAI;IAEF,AADA,MAAM,GAAW,EACb,KACF,GAAS;YAEJ,GAAK;IACZ,IAAI,IAAU,EAAE,4BAA4B,EAC1C,cAAc,iCACf,CAAC;IAIF,AAHI,aAAe,SAAS,EAAI,QAAQ,MAAM,KAAK,OACjD,IAAU,EAAI,UAEhB,EAAS,EAAQ;aACT;IACR,EAAgB,GAAM;;;IAEvB;EAAC;EAAgB;EAAkB;EAAc;EAAS;EAAW;EAAE,CAAC,EAEvE,IAAyB,KAAkB;CAC/C,AAAI,KAAkB,QAAQ,MAAgB,aAC5C,IAAyB;CAE3B,IAAM,IAAuB,KAAgB,GAMvC,IACJ,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,GAAD;GACE,MAAK;GACL,SAAQ;GACR,SAAS;GACT,UAAU;GACV,sBAAA;aAEC;GACM,CAAA,EACT,kBAAC,GAAD;GACE,MAAK;GACL,SAAS;GACT,eAlB2B;IAC/B,GAAe,CAAC,YAAY,GAAG;;GAkB3B,WAAW;aAEV;GACM,CAAA,CACL;KAGJ,IAAgC;CAKpC,OAJI,KAAS,SACX,IAAY,kBAAC,GAAD,EAAA,UAAe,GAAqB,CAAA,GAIhD,kBAAC,GAAD;EACU;EACR,SAAS;EACF;EACC,QAAA;EACR,cAAc;GAAE,MAAM;GAAY,UAAU;GAAwB;YAEpE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,GACA,EACG;;EACA,CAAA"}
+{"version":3,"file":"ConfirmDialog.js","names":[],"sources":["../../../../../src/backoffice/molecules/confirm_dialog/ConfirmDialog.tsx"],"sourcesContent":["import { useCallback, useState, type JSX, type ReactNode } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport {\n  Button,\n  type ButtonProps,\n} from '../../../atomic/atoms/button/Button.js';\nimport { FormError } from '../../../atomic/molecules/form_error/FormError.js';\nimport { Modal } from '../../../atomic/atoms/modal/Modal.js';\n\nimport * as styles from './confirmDialog.css.js';\n\nexport type ConfirmDialogProps = {\n  isOpen: boolean;\n  title: string;\n  children: ReactNode;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  confirmTone?: 'default' | 'danger';\n  confirmVariant?: ButtonProps['variant'];\n  isConfirmLoading?: boolean;\n  onClose: () => void;\n  onConfirm: () => Promise<void> | void;\n  closeOnConfirm?: boolean;\n};\n\nexport const ConfirmDialog = ({\n  isOpen,\n  title,\n  children,\n  confirmLabel,\n  cancelLabel,\n  confirmTone = 'default',\n  confirmVariant,\n  isConfirmLoading = false,\n  onClose,\n  onConfirm,\n  closeOnConfirm = true,\n}: ConfirmDialogProps): JSX.Element | null => {\n  const { t } = useTranslation('ui', { useSuspense: false });\n  const [isConfirming, setIsConfirming] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const resolvedConfirmLabel =\n    confirmLabel ?? t('common.actions.confirm', { defaultValue: 'Confirm' });\n  const resolvedCancelLabel =\n    cancelLabel ?? t('common.actions.cancel', { defaultValue: 'Cancel' });\n\n  const handleClose = useCallback(() => {\n    if (isConfirming || isConfirmLoading) {\n      return;\n    }\n    setError(null);\n    onClose();\n  }, [isConfirming, isConfirmLoading, onClose]);\n\n  const handleConfirm = useCallback(async () => {\n    if (isConfirming || isConfirmLoading) {\n      return;\n    }\n    setError(null);\n    setIsConfirming(true);\n    try {\n      await onConfirm();\n      if (closeOnConfirm) {\n        onClose();\n      }\n    } catch (err) {\n      let message = t('common.errors.unexpected', {\n        defaultValue: 'An unexpected error occurred.',\n      });\n      if (err instanceof Error && err.message.trim() !== '') {\n        message = err.message;\n      }\n      setError(message);\n    } finally {\n      setIsConfirming(false);\n    }\n  }, [closeOnConfirm, isConfirmLoading, isConfirming, onClose, onConfirm, t]);\n\n  let resolvedConfirmVariant = confirmVariant ?? 'primary';\n  if (confirmVariant == null && confirmTone === 'danger') {\n    resolvedConfirmVariant = 'danger';\n  }\n  const resolvedIsConfirming = isConfirming || isConfirmLoading;\n\n  const handleConfirmClick = () => {\n    handleConfirm().catch(() => {});\n  };\n\n  const footer = (\n    <div className={styles.footer}>\n      <Button\n        type=\"button\"\n        variant=\"secondary\"\n        onClick={handleClose}\n        disabled={resolvedIsConfirming}\n        data-initial-focus\n      >\n        {resolvedCancelLabel}\n      </Button>\n      <Button\n        type=\"button\"\n        variant={resolvedConfirmVariant}\n        onClick={handleConfirmClick}\n        isLoading={resolvedIsConfirming}\n      >\n        {resolvedConfirmLabel}\n      </Button>\n    </div>\n  );\n\n  let errorNode: JSX.Element | null = null;\n  if (error != null) {\n    errorNode = <FormError>{error}</FormError>;\n  }\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={handleClose}\n      title={title}\n      footer={footer}\n      initialFocus={{ mode: 'selector', selector: '[data-initial-focus]' }}\n    >\n      <div className={styles.body}>\n        {errorNode}\n        {children}\n      </div>\n    </Modal>\n  );\n};\n\nexport default ConfirmDialog;\n"],"mappings":";;;;;;;;AA0BA,IAAa,KAAiB,EAC5B,WACA,UACA,aACA,iBACA,gBACA,iBAAc,WACd,mBACA,sBAAmB,IACnB,YACA,cACA,oBAAiB,SAC2B;CAC5C,IAAM,EAAE,SAAM,EAAe,MAAM,EAAE,aAAa,IAAO,CAAC,EACpD,CAAC,GAAc,KAAmB,EAAS,GAAM,EACjD,CAAC,GAAO,KAAY,EAAwB,KAAK,EACjD,IACJ,KAAgB,EAAE,0BAA0B,EAAE,cAAc,WAAW,CAAC,EACpE,IACJ,KAAe,EAAE,yBAAyB,EAAE,cAAc,UAAU,CAAC,EAEjE,IAAc,QAAkB;EAChC,KAAgB,MAGpB,EAAS,KAAK,EACd,GAAS;IACR;EAAC;EAAc;EAAkB;EAAQ,CAAC,EAEvC,IAAgB,EAAY,YAAY;EACxC,WAAgB,IAIpB;GADA,EAAS,KAAK,EACd,EAAgB,GAAK;GACrB,IAAI;IAEF,AADA,MAAM,GAAW,EACb,KACF,GAAS;YAEJ,GAAK;IACZ,IAAI,IAAU,EAAE,4BAA4B,EAC1C,cAAc,iCACf,CAAC;IAIF,AAHI,aAAe,SAAS,EAAI,QAAQ,MAAM,KAAK,OACjD,IAAU,EAAI,UAEhB,EAAS,EAAQ;aACT;IACR,EAAgB,GAAM;;;IAEvB;EAAC;EAAgB;EAAkB;EAAc;EAAS;EAAW;EAAE,CAAC,EAEvE,IAAyB,KAAkB;CAC/C,AAAI,KAAkB,QAAQ,MAAgB,aAC5C,IAAyB;CAE3B,IAAM,IAAuB,KAAgB,GAMvC,IACJ,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,GAAD;GACE,MAAK;GACL,SAAQ;GACR,SAAS;GACT,UAAU;GACV,sBAAA;aAEC;GACM,CAAA,EACT,kBAAC,GAAD;GACE,MAAK;GACL,SAAS;GACT,eAlB2B;IAC/B,GAAe,CAAC,YAAY,GAAG;;GAkB3B,WAAW;aAEV;GACM,CAAA,CACL;KAGJ,IAAgC;CAKpC,OAJI,KAAS,SACX,IAAY,kBAAC,GAAD,EAAA,UAAY,GAAkB,CAAA,GAI1C,kBAAC,GAAD;EACU;EACR,SAAS;EACF;EACC,QAAA;EACR,cAAc;GAAE,MAAM;GAAY,UAAU;GAAwB;YAEpE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,GACA,EACG;;EACA,CAAA"}

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

@@ -1,7 +1,7 @@
 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 { 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 { useId as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
@@ -23,7 +23,7 @@ var u = ({ id: u, name: d, value: f, onChange: p, placeholder: m, ariaLabel: h,
 		})
 	}));
 	let O = null;
-	return _ != null && (O = /* @__PURE__ */ s(r, { keys: _ })), /* @__PURE__ */ s(e, {
+	return _ != null && (O = /* @__PURE__ */ s(n, { keys: _ })), /* @__PURE__ */ s(e, {
 		id: E,
 		name: d,
 		className: g,
@@ -35,7 +35,7 @@ var u = ({ id: u, name: d, value: f, onChange: p, placeholder: m, ariaLabel: h,
 		"aria-label": T,
 		size: "small",
 		fullWidth: !0,
-		leftIcon: /* @__PURE__ */ s(n, {
+		leftIcon: /* @__PURE__ */ s(r, {
 			width: 18,
 			height: 18,
 			"aria-hidden": "true"

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

@@ -1,7 +1,7 @@
 /* empty css                                      */
 /* empty css                                     */
 //#region src/backoffice/molecules/sidebar_collapse_toggle/sidebarCollapseToggle.css.ts
-var e = "_1x7c0k51 qbwcuej qbwcueh txvbqbdsb txvbqbey txvbqbjtp txvbqb1g5 txvbqb2e3 txvbqb2g9 txvbqb1933 txvbqb19cb txvbqbv txvbqbux3 txvbqb7h txvbqb76 txvbqb7t qbwcuei txvbqb1aey txvbqb1bsa qbwcue4 txvbqb1c2w txvbqb1c9c qbwcue0 txvbqb1cb0 txvbqb1cws _1x7c0k50 txvbqbyoi txvbqbzm3 txvbqb10jb txvbqbvve txvbqbff6 txvbqb9j", t = "_1x7c0k52 txvbqbyo5 txvbqbzlq txvbqbjtp", n = "_1x7c0k53 txvbqbdsb txvbqbey txvbqbjtp txvbqb17hx txvbqbhnc", r = "_1x7c0k54 txvbqbdxd", i = "_1x7c0k55 txvbqbdq5";
+var e = "_1x7c0k51 _1x7c0k50 txvbqbyoi txvbqbzm3 txvbqb10jb txvbqbvve txvbqbdsb txvbqbey txvbqbjtp txvbqbff6 txvbqb9j txvbqb1uy txvbqb2et txvbqb2g9 txvbqbv txvbqb7g txvbqb76 txvbqb7t", t = "_1x7c0k52 txvbqbyo5 txvbqbzlq txvbqbjtp", n = "_1x7c0k53 txvbqbdsb txvbqbey txvbqbjtp txvbqb17hx txvbqbhnc", r = "_1x7c0k54 txvbqbdxd", i = "_1x7c0k55 txvbqbdq5";
 //#endregion
 export { e as button, t as buttonCollapsed, n as icon, r as label, i as labelCollapsed };
 

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

@@ -1 +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';\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { ghostIconButton } from '../../../theme/styleRecipes.css.js';\n\nexport const button = style([\n  ghostIconButton,\n  sprinkles({\n    gap: 2,\n    paddingX: 3,\n    paddingY: 2,\n    fontSize: 'sm',\n  }),\n]);\n\nexport const buttonCollapsed = sprinkles({\n  justifyContent: 'center',\n  paddingX: 2,\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\nexport const labelCollapsed = sprinkles({\n  display: 'none',\n});\n"],"mappings":""}
+{"version":3,"file":"sidebarCollapseToggle.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_collapse_toggle/sidebarCollapseToggle.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const button = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: 2,\n    paddingX: 3,\n    paddingY: 2,\n    fontSize: 'sm',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderRadius: 'md',\n    cursor: 'pointer',\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    backgroundColor: vars.sidebar.collapseButtonBackground,\n    borderColor: vars.sidebar.collapseButtonBorderColor,\n    color: vars.sidebar.collapseButtonColor,\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.sidebar.collapseButtonHoverBackground,\n        boxShadow: vars.sidebar.collapseButtonHoverShadow,\n        color: vars.sidebar.collapseButtonHoverColor,\n      },\n      '&:focus-visible': {\n        boxShadow: vars.sidebar.collapseButtonFocusRing,\n        outline: 'none',\n      },\n    },\n  },\n]);\n\nexport const buttonCollapsed = sprinkles({\n  justifyContent: 'center',\n  paddingX: 2,\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\nexport const labelCollapsed = sprinkles({\n  display: 'none',\n});\n"],"mappings":""}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarNavItem.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_item/SidebarNavItem.tsx"],"sourcesContent":["import Link from '@plumile/router/routing/Link.js';\nimport {\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ComponentPropsWithoutRef,\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 '../../../theme/tools.js';\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  collapsed?: boolean;\n  nested?: boolean;\n  ariaLabel?: string;\n  className?: string;\n  actionSlot?: ReactNode;\n  dragHandleSlot?: ReactNode;\n  dragHandleLabel?: string;\n  dragHandleProps?: ButtonHTMLAttributes<HTMLButtonElement>;\n  isDragging?: boolean;\n  actionsVisibility?: 'auto' | 'always';\n};\n\nexport const SidebarNavItem = ({\n  label,\n  href,\n  icon,\n  badge,\n  isActive = false,\n  disabled = false,\n  onClick,\n  collapsed = false,\n  nested = false,\n  ariaLabel,\n  className,\n  actionSlot,\n  dragHandleSlot,\n  dragHandleLabel,\n  dragHandleProps,\n  isDragging = false,\n  actionsVisibility = 'auto',\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 (nested && !collapsed) {\n    itemClassNames.push(styles.itemNested);\n  }\n  if (isActive) {\n    itemClassNames.push(styles.itemActive);\n  }\n  if (disabled) {\n    itemClassNames.push(styles.itemDisabled);\n  }\n  if (isDragging) {\n    itemClassNames.push(styles.itemDragging);\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 = (\n      <span\n        className={cx(styles.icon, {\n          [styles.iconNested]: nested && !collapsed,\n        })}\n      >\n        {icon}\n      </span>\n    );\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 &&\n    !disabled &&\n    !isDragging &&\n    (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 &&\n    (actionsVisibility === 'always' || 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        {...dragHandleProps}\n        type=\"button\"\n        className={cx(styles.dragHandle, dragHandleProps?.className)}\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      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onFocusCapture={handleFocusCapture}\n      onBlurCapture={handleBlurCapture}\n      ref={itemRef}\n      role=\"listitem\"\n    >\n      {mainNode}\n      {actionsNode}\n    </div>\n  );\n};\n\nexport default SidebarNavItem;\n"],"mappings":";;;;;;AAmBA,IAAM,IAAa,GAsBN,KAAkB,EAC7B,OAAA,GACA,SACA,MAAA,GACA,OAAA,GACA,cAAW,IACX,cAAW,IACX,aACA,eAAY,IACZ,YAAS,IACT,eACA,cACA,YAAA,GACA,mBACA,oBACA,oBACA,gBAAa,IACb,wBAAoB,aACkB;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;CAgBnE,AAfI,KACF,EAAe,KAAK,GAAqB,EAEvC,KAAU,CAAC,KACb,EAAe,KAAK,GAAkB,EAEpC,KACF,EAAe,KAAK,GAAkB,EAEpC,KACF,EAAe,KAAK,GAAoB,EAEtC,KACF,EAAe,KAAK,GAAoB,EAEtC,KAAa,QACf,EAAe,KAAK,EAAU;CAEhC,IAAM,IAAgB,EAAG,GAAG,EAAe,EAEvC,IAAwC;CAC5C,AAAI,KAAqB,QAAQ,OAAO,KAAU,aAChD,IAAoB;CAGtB,IAAI,GACA;CACJ,AAAI,MACF,IAAqB,GACrB,IAAiB;CAGnB,IAAI;CACJ,AAAI,MACF,IAAc;CAGhB,IAAI,IAA+B;CACnC,AAAI,KAAQ,SACV,IACE,kBAAC,QAAD;EACE,WAAW,EAAG,GAAa,GACxB,IAAoB,KAAU,CAAC,GACjC,CAAC;YAED;EACI,CAAA;CAIX,IAAI,IAAiC;CACrC,AAAI,MACF,IAAkB;CAEpB,IAAM,KAAiB,EAAG,IAAc,EAAgB,EAEpD,IAAgC;CACpC,IAAI,KAAS,MAAM;EACjB,IAAI,IAAiC;EAIrC,AAHI,MACF,IAAkB,IAEpB,IACE,kBAAC,QAAD;GAAM,WAAW,EAAG,GAAc,EAAgB;aAAG;GAAa,CAAA;;CAItE,IAAM,IACJ,kBAAA,GAAA,EAAA,UAAA;EACG;EACD,kBAAC,QAAD;GAAM,WAAW;aAAiB;GAAa,CAAA;EAC9C;EACA,EAAA,CAAA,EAGC,UAA0B;EAC9B,AAAI,MACO;IAIP,IACJ,CAAC,KACD,CAAC,KACD,CAAC,MACA,KAAc,QAAQ,KAAkB,OAErC,IAAoB,SAAwB;EAChD,AAAI,EAAgB,WAAW,SAC7B,aAAa,EAAgB,QAAQ,EACrC,EAAgB,UAAU;IAE3B,EAAE,CAAC;CAEN,UACO,MACH,EAAiB,GAAM,EACvB,EAAiB,GAAM,EACvB,GAAmB,SAGR;EACX,GAAmB;KAEpB,CAAC,GAAmB,EAAoB,CAAC;CAE5C,IAAM,WAA+B;EAC9B,MAGL,GAAmB,EACnB,EAAgB,UAAU,iBAAiB;GACzC,EAAiB,GAAK;KACrB,IAAI;IAGH,WAA+B;EAEnC,AADA,GAAmB,EACnB,EAAiB,GAAM;IAGnB,WAAiC;EAChC,KAGL,EAAiB,GAAK;IAGlB,MAAqB,MAA4C;EACrE,IAAI,CAAC,GAAqB;GACxB,EAAiB,GAAM;GACvB;;EAEF,IAAM,IAAa,EAAM;EACrB,KAAc,QAAQ,EAAQ,SAAS,SAAS,EAAW,IAG/D,EAAiB,GAAM;IAGrB;CACJ,AAYE,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,MACC,OAAsB,YAAY,KAAiB,IAClD;CACJ,AAAI,OACF,IAAyB;CAE3B,IAAM,IAAmB,EAAG,IAAgB,EAAuB,EAE/D,IAAqC;CACzC,AAAI,KAAkB,QAAQ,CAAC,MAC7B,IACE,kBAAC,UAAD;EACE,GAAI;EACJ,MAAK;EACL,WAAW,EAAG,GAAmB,GAAiB,UAAU;EAC5D,cAAY;EACZ,OAAO;YAEN;EACM,CAAA;CAIb,IAAI,IAAiC;CACrC,AAAI,KAAc,QAAQ,CAAC,MACzB,IAAa,kBAAC,QAAD;EAAM,WAAW;YAAoB;EAAkB,CAAA;CAGtE,IAAI,IAAkC;CAUtC,OATI,MACF,IACE,kBAAC,QAAD;EAAM,WAAW;YAAjB,CACG,GACA,EACI;MAKT,kBAAC,OAAD;EACE,WAAW;EACX,cAAc;EACd,cAAc;EACd,gBAAgB;EAChB,eAAe;EACf,KAAK;EACL,MAAK;YAPP,CASG,GACA,EACG"}
+{"version":3,"file":"SidebarNavItem.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_item/SidebarNavItem.tsx"],"sourcesContent":["import Link from '@plumile/router/routing/Link.js';\nimport {\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ComponentPropsWithoutRef,\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 '../../../theme/tools.js';\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  collapsed?: boolean;\n  nested?: boolean;\n  ariaLabel?: string;\n  className?: string;\n  actionSlot?: ReactNode;\n  dragHandleSlot?: ReactNode;\n  dragHandleLabel?: string;\n  dragHandleProps?: ButtonHTMLAttributes<HTMLButtonElement>;\n  isDragging?: boolean;\n  actionsVisibility?: 'auto' | 'always';\n};\n\nexport const SidebarNavItem = ({\n  label,\n  href,\n  icon,\n  badge,\n  isActive = false,\n  disabled = false,\n  onClick,\n  collapsed = false,\n  nested = false,\n  ariaLabel,\n  className,\n  actionSlot,\n  dragHandleSlot,\n  dragHandleLabel,\n  dragHandleProps,\n  isDragging = false,\n  actionsVisibility = 'auto',\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 (nested && !collapsed) {\n    itemClassNames.push(styles.itemNested);\n  }\n  if (isActive) {\n    itemClassNames.push(styles.itemActive);\n    itemClassNames.push(styles.itemActiveTheme);\n  }\n  if (disabled) {\n    itemClassNames.push(styles.itemDisabled);\n  }\n  if (isDragging) {\n    itemClassNames.push(styles.itemDragging);\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 = (\n      <span\n        className={cx(styles.icon, {\n          [styles.iconNested]: nested && !collapsed,\n        })}\n      >\n        {icon}\n      </span>\n    );\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 &&\n    !disabled &&\n    !isDragging &&\n    (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 &&\n    (actionsVisibility === 'always' || 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        {...dragHandleProps}\n        type=\"button\"\n        className={cx(styles.dragHandle, dragHandleProps?.className)}\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      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onFocusCapture={handleFocusCapture}\n      onBlurCapture={handleBlurCapture}\n      ref={itemRef}\n      role=\"listitem\"\n    >\n      {mainNode}\n      {actionsNode}\n    </div>\n  );\n};\n\nexport default SidebarNavItem;\n"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 /* empty css                                      */
 /* empty css                              */
 //#region src/backoffice/molecules/sidebar_nav_item/sidebarNavItem.css.ts
-var e = "_1nm2b9q0 txvbqbdsb txvbqbey txvbqbfet txvbqb7m txvbqb76 txvbqb7t txvbqbf7y txvbqb19dv txvbqb17f1 txvbqb2o", t = "_1nm2b9q1 txvbqb19ep txvbqb17fe txvbqb2p", n = "_1nm2b9q4 _1nm2b9q2 txvbqbyoi txvbqbzm3 txvbqb11ed txvbqbwqg txvbqbdr8 txvbqbey txvbqbff6 txvbqb2gm txvbqb9j txvbqb7g txvbqb76 txvbqb7t txvbqbv txvbqb19cb _1nm2b9q3 txvbqb1aex txvbqb1bs9", r = "_1nm2b9q5 txvbqbyo5 txvbqbzlq txvbqbjtp", i = "_1nm2b9q6 txvbqbyo5 txvbqbzlq txvbqb11ed txvbqbwqg txvbqb2g9", a = "_1nm2b9q7 txvbqbfd0 txvbqb1963 txvbqb19bj txvbqbcoy", o = "_1nm2b9q9 _1nm2b9q8 txvbqb19cd txvbqbr", s = "_1nm2b9qa txvbqb19eb txvbqbj", c = "_1nm2b9qb txvbqbdr8 txvbqbey txvbqbff6 txvbqbdxd txvbqbt9i txvbqb3f txvbqb1933 txvbqb1g5 txvbqb2e3 txvbqbux3 txvbqb16ex txvbqb198h txvbqb1p", l = "_1nm2b9qc txvbqbdsb txvbqbey", u = "_1nm2b9qf _1nm2b9qd txvbqbdsb txvbqbey txvbqbjtp txvbqb17hx txvbqbhnc txvbqb2g9 txvbqb1g5 txvbqb2e3 txvbqbux3 txvbqb1933 txvbqb19cb txvbqbi _1nm2b9qe txvbqb1aex txvbqb1bs9", d = "_1nm2b9qg txvbqbdsb txvbqbey txvbqbjtp txvbqb17hx txvbqbhnc txvbqbf7y txvbqb198h", f = "_1nm2b9qh txvbqb17hk txvbqbhmz", p = "_1nm2b9qi txvbqbdxd txvbqbt9i", m = "_1nm2b9qj txvbqbdq5", h = "_1nm2b9qk txvbqbdsb txvbqbey txvbqbjtp txvbqbf7y", g = "_1nm2b9ql txvbqbdq5";
+var e = "_1nm2b9q0 txvbqbdsb txvbqbey txvbqbfet txvbqb7m txvbqb76 txvbqb7t txvbqbf7y txvbqb19dv txvbqb17f1 txvbqb2o", t = "_1nm2b9q1 txvbqb19ep txvbqb17fe txvbqb2p", n = "_1nm2b9q3 _1nm2b9q2 txvbqbyoi txvbqbzm3 txvbqb11ed txvbqbwqg txvbqbdr8 txvbqbey txvbqbff6 txvbqb2gm txvbqb9j txvbqb7g txvbqb76 txvbqb7t txvbqbv", r = "_1nm2b9q4 txvbqbyo5 txvbqbzlq txvbqbjtp", i = "_1nm2b9q5 txvbqbyo5 txvbqbzlq txvbqb11ed txvbqbwqg txvbqb2g9", a = "_1nm2b9q6 txvbqbfd0", o = "_1nm2b9q7", s = "_1nm2b9q9 _1nm2b9q8 txvbqbr", c = "_1nm2b9qa txvbqb19eb txvbqbj", l = "_1nm2b9qb txvbqbdr8 txvbqbey txvbqbff6 txvbqbdxd txvbqbt9i txvbqb3f txvbqb1933 txvbqb1g5 txvbqb2e3 txvbqbux3 txvbqb16ex txvbqb198h txvbqb1p", u = "_1nm2b9qc txvbqbdsb txvbqbey", d = "_1nm2b9qe _1nm2b9qd txvbqbdsb txvbqbey txvbqbjtp txvbqb17hx txvbqbhnc txvbqb2g9 txvbqb1g5 txvbqb2e3 txvbqbux3 txvbqb1933 txvbqbi", f = "_1nm2b9qf txvbqbdsb txvbqbey txvbqbjtp txvbqb17hx txvbqbhnc txvbqbf7y txvbqb198h", p = "_1nm2b9qg txvbqb17hk txvbqbhmz", m = "_1nm2b9qh txvbqbdxd txvbqbt9i", h = "_1nm2b9qi txvbqbdq5", g = "_1nm2b9qj txvbqbdsb txvbqbey txvbqbjtp txvbqbf7y", _ = "_1nm2b9qk txvbqbdq5";
 //#endregion
-export { l as actionSlot, e as actions, t as actionsVisible, h as badge, g as badgeCollapsed, u as dragHandle, d as icon, f as iconNested, n as item, a as itemActive, r as itemCollapsed, o as itemDisabled, s as itemDragging, i as itemNested, p as label, m as labelCollapsed, c as link };
+export { u as actionSlot, e as actions, t as actionsVisible, g as badge, _ as badgeCollapsed, d as dragHandle, f as icon, p as iconNested, n as item, a as itemActive, o as itemActiveTheme, r as itemCollapsed, s as itemDisabled, c as itemDragging, i as itemNested, m as label, h as labelCollapsed, l as link };
 
 //# sourceMappingURL=sidebarNavItem.css.js.map

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

@@ -1 +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';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.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: 1.5,\n    paddingX: 3,\n    borderRadius: 'lg',\n    fontSize: 'sm',\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n    cursor: 'pointer',\n    color: 'textSecondary',\n  }),\n  stateSprinkles({\n    backgroundColor: {\n      hover: 'surfaceMuted',\n    },\n    color: {\n      hover: 'text',\n    },\n  }),\n  {\n    selectors: {\n      '&:has(:focus-visible)': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const itemCollapsed = sprinkles({\n  justifyContent: 'center',\n  paddingX: 2,\n});\n\nexport const itemNested = sprinkles({\n  paddingX: 2,\n  paddingY: 1.5,\n  borderRadius: 'md',\n});\n\nexport const itemActive = sprinkles({\n  fontWeight: 'semibold',\n  backgroundColor: 'primaryLight',\n  color: 'primary',\n  boxShadow: 'primaryLightRingStrong',\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 itemDragging = sprinkles({\n  opacity: 50,\n  cursor: 'grabbing',\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  stateSprinkles({\n    backgroundColor: {\n      hover: 'surfaceMuted',\n    },\n    color: {\n      hover: 'text',\n    },\n  }),\n  {\n    selectors: {\n      '&:active': {\n        cursor: 'grabbing',\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\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 iconNested = sprinkles({\n  width: 5,\n  height: 5,\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":""}
+{"version":3,"file":"sidebarNavItem.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_item/sidebarNavItem.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.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: 1.5,\n    paddingX: 3,\n    borderRadius: 'lg',\n    fontSize: 'sm',\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n    cursor: 'pointer',\n  }),\n  {\n    color: vars.sidebar.itemColor,\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.sidebar.itemHoverBackground,\n        color: vars.sidebar.itemHoverColor,\n      },\n      '&:has(:focus-visible)': {\n        boxShadow: vars.sidebar.itemFocusRing,\n        outline: 'none',\n      },\n    },\n  },\n]);\n\nexport const itemCollapsed = sprinkles({\n  justifyContent: 'center',\n  paddingX: 2,\n});\n\nexport const itemNested = sprinkles({\n  paddingX: 2,\n  paddingY: 1.5,\n  borderRadius: 'md',\n});\n\nexport const itemActive = sprinkles({\n  fontWeight: 'semibold',\n});\n\nexport const itemActiveTheme = style({\n  backgroundColor: vars.sidebar.itemActiveBackground,\n  backgroundImage: vars.sidebar.itemActiveBackgroundImage,\n  borderColor: vars.sidebar.itemActiveBorderColor,\n  color: vars.sidebar.itemActiveColor,\n  boxShadow: vars.sidebar.itemActiveShadow,\n});\n\nexport const itemDisabled = style([\n  sprinkles({\n    cursor: 'not-allowed',\n  }),\n  {\n    color: vars.sidebar.itemDisabledColor,\n    selectors: {\n      '&:hover': {\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n]);\n\nexport const itemDragging = sprinkles({\n  opacity: 50,\n  cursor: 'grabbing',\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    cursor: 'grab',\n  }),\n  {\n    color: vars.sidebar.dragHandleColor,\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.sidebar.dragHandleHoverBackground,\n        color: vars.sidebar.dragHandleHoverColor,\n      },\n      '&:active': {\n        cursor: 'grabbing',\n      },\n      '&:focus-visible': {\n        boxShadow: vars.sidebar.actionFocusRing,\n        outline: 'none',\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 iconNested = sprinkles({\n  width: 5,\n  height: 5,\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":""}