@plumile/backoffice-react 0.1.108 → 0.1.112

package/lib/esm/components/backoffice/links/BackofficeInlineLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeInlineLink.js","names":[],"sources":["../../../../../src/components/backoffice/links/BackofficeInlineLink.tsx"],"sourcesContent":["import { type JSX, type MouseEventHandler, type ReactNode } from 'react';\nimport { Link } from '@plumile/router';\n\nimport type { BackofficeEntityManifestMap } from '@plumile/backoffice-core/types.js';\n\nimport { BackofficeLinkContent } from './BackofficeLinkContent.js';\nimport type { BackofficeLinkTarget } from './types.js';\nimport { useBackofficeLink } from './useBackofficeLink.js';\n\nexport type BackofficeInlineLinkProps<\n  TManifest extends BackofficeEntityManifestMap = BackofficeEntityManifestMap,\n> = {\n  target: BackofficeLinkTarget<TManifest>;\n  label?: ReactNode;\n  className?: string;\n  title?: string;\n  ariaLabel?: string;\n  icon?: 'auto' | 'none';\n  openInNewTab?: boolean;\n  endAdornment?: ReactNode;\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n  children?: ReactNode;\n};\n\nexport const BackofficeInlineLink = <\n  TManifest extends BackofficeEntityManifestMap = BackofficeEntityManifestMap,\n>({\n  target,\n  label,\n  className,\n  title,\n  ariaLabel,\n  icon = 'auto',\n  openInNewTab = false,\n  endAdornment,\n  onClick,\n  children,\n}: BackofficeInlineLinkProps<TManifest>): JSX.Element => {\n  const link = useBackofficeLink(target, {\n    label: children ?? label,\n  });\n\n  let linkProps: { target?: '_blank'; rel?: 'noreferrer' } = {};\n  if (openInNewTab) {\n    linkProps = { target: '_blank', rel: 'noreferrer' };\n  }\n\n  return (\n    <Link\n      to={link.href}\n      className={className}\n      title={title}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      {...linkProps}\n    >\n      <BackofficeLinkContent\n        icon={link.icon}\n        label={link.label}\n        showIcon={icon === 'auto'}\n        endAdornment={endAdornment}\n      />\n    </Link>\n  );\n};\n\nexport default BackofficeInlineLink;\n"],"mappings":";;;;;AAwBA,IAAa,KAEX,EACA,WACA,UACA,cACA,UACA,cACA,UAAO,QACP,kBAAe,IACf,iBACA,YACA,kBACuD;CACvD,IAAM,IAAO,EAAkB,GAAQ,EACrC,OAAO,KAAY,GACpB,CAAC,EAEE,IAAuD,EAAE;CAK7D,OAJI,MACF,IAAY;EAAE,QAAQ;EAAU,KAAK;EAAc,GAInD,kBAAC,GAAD;EACE,IAAI,EAAK;EACE;EACJ;EACP,cAAY;EACH;EACT,GAAI;YAEJ,kBAAC,GAAD;GACE,MAAM,EAAK;GACX,OAAO,EAAK;GACZ,UAAU,MAAS;GACL;GACd,CAAA;EACG,CAAA"}
+{"version":3,"file":"BackofficeInlineLink.js","names":[],"sources":["../../../../../src/components/backoffice/links/BackofficeInlineLink.tsx"],"sourcesContent":["import { type JSX, type MouseEventHandler, type ReactNode } from 'react';\nimport Link from '@plumile/router/routing/Link.js';\n\nimport type { BackofficeEntityManifestMap } from '@plumile/backoffice-core/types.js';\n\nimport { BackofficeLinkContent } from './BackofficeLinkContent.js';\nimport type { BackofficeLinkTarget } from './types.js';\nimport { useBackofficeLink } from './useBackofficeLink.js';\n\nexport type BackofficeInlineLinkProps<\n  TManifest extends BackofficeEntityManifestMap = BackofficeEntityManifestMap,\n> = {\n  target: BackofficeLinkTarget<TManifest>;\n  label?: ReactNode;\n  className?: string;\n  title?: string;\n  ariaLabel?: string;\n  icon?: 'auto' | 'none';\n  openInNewTab?: boolean;\n  endAdornment?: ReactNode;\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n  children?: ReactNode;\n};\n\nexport const BackofficeInlineLink = <\n  TManifest extends BackofficeEntityManifestMap = BackofficeEntityManifestMap,\n>({\n  target,\n  label,\n  className,\n  title,\n  ariaLabel,\n  icon = 'auto',\n  openInNewTab = false,\n  endAdornment,\n  onClick,\n  children,\n}: BackofficeInlineLinkProps<TManifest>): JSX.Element => {\n  const link = useBackofficeLink(target, {\n    label: children ?? label,\n  });\n\n  let linkProps: { target?: '_blank'; rel?: 'noreferrer' } = {};\n  if (openInNewTab) {\n    linkProps = { target: '_blank', rel: 'noreferrer' };\n  }\n\n  return (\n    <Link\n      to={link.href}\n      className={className}\n      title={title}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      {...linkProps}\n    >\n      <BackofficeLinkContent\n        icon={link.icon}\n        label={link.label}\n        showIcon={icon === 'auto'}\n        endAdornment={endAdornment}\n      />\n    </Link>\n  );\n};\n\nexport default BackofficeInlineLink;\n"],"mappings":";;;;;AAwBA,IAAa,KAEX,EACA,WACA,UACA,cACA,UACA,cACA,UAAO,QACP,kBAAe,IACf,iBACA,YACA,kBACuD;CACvD,IAAM,IAAO,EAAkB,GAAQ,EACrC,OAAO,KAAY,GACpB,CAAC,EAEE,IAAuD,EAAE;CAK7D,OAJI,MACF,IAAY;EAAE,QAAQ;EAAU,KAAK;EAAc,GAInD,kBAAC,GAAD;EACE,IAAI,EAAK;EACE;EACJ;EACP,cAAY;EACH;EACT,GAAI;YAEJ,kBAAC,GAAD;GACE,MAAM,EAAK;GACX,OAAO,EAAK;GACZ,UAAU,MAAS;GACL;GACd,CAAA;EACG,CAAA"}

package/lib/esm/components/backoffice/links/BackofficeLink.js

@@ -1,7 +1,7 @@
 import { BackofficeLinkContent as e } from "./BackofficeLinkContent.js";
 import { useBackofficeLink as t } from "./useBackofficeLink.js";
 import { jsx as n } from "react/jsx-runtime";
-import { Link as r } from "@plumile/router";
+import r from "@plumile/router/routing/Link.js";
 //#region src/components/backoffice/links/BackofficeLink.tsx
 var i = ({ target: i, label: a, className: o, icon: s = "auto", children: c }) => {
 	let l = t(i, { label: c ?? a });

package/lib/esm/components/backoffice/links/BackofficeLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeLink.js","names":[],"sources":["../../../../../src/components/backoffice/links/BackofficeLink.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { Link } from '@plumile/router';\n\nimport type { BackofficeEntityManifestMap } from '@plumile/backoffice-core/types.js';\n\nimport { BackofficeLinkContent } from './BackofficeLinkContent.js';\nimport type { BackofficeLinkTarget } from './types.js';\nimport { useBackofficeLink } from './useBackofficeLink.js';\n\nexport type BackofficeLinkProps<\n  TManifest extends BackofficeEntityManifestMap = BackofficeEntityManifestMap,\n> = {\n  target: BackofficeLinkTarget<TManifest>;\n  label?: ReactNode;\n  className?: string;\n  icon?: 'auto' | 'none';\n  children?: ReactNode;\n};\n\nexport const BackofficeLink = <\n  TManifest extends BackofficeEntityManifestMap = BackofficeEntityManifestMap,\n>({\n  target,\n  label,\n  className,\n  icon = 'auto',\n  children,\n}: BackofficeLinkProps<TManifest>): JSX.Element => {\n  const link = useBackofficeLink(target, {\n    label: children ?? label,\n  });\n\n  return (\n    <Link to={link.href} className={className}>\n      <BackofficeLinkContent\n        icon={link.icon}\n        label={link.label}\n        showIcon={icon === 'auto'}\n      />\n    </Link>\n  );\n};\n\nexport default BackofficeLink;\n"],"mappings":";;;;;AAmBA,IAAa,KAEX,EACA,WACA,UACA,cACA,UAAO,QACP,kBACiD;CACjD,IAAM,IAAO,EAAkB,GAAQ,EACrC,OAAO,KAAY,GACpB,CAAC;CAEF,OACE,kBAAC,GAAD;EAAM,IAAI,EAAK;EAAiB;YAC9B,kBAAC,GAAD;GACE,MAAM,EAAK;GACX,OAAO,EAAK;GACZ,UAAU,MAAS;GACnB,CAAA;EACG,CAAA"}
+{"version":3,"file":"BackofficeLink.js","names":[],"sources":["../../../../../src/components/backoffice/links/BackofficeLink.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport Link from '@plumile/router/routing/Link.js';\n\nimport type { BackofficeEntityManifestMap } from '@plumile/backoffice-core/types.js';\n\nimport { BackofficeLinkContent } from './BackofficeLinkContent.js';\nimport type { BackofficeLinkTarget } from './types.js';\nimport { useBackofficeLink } from './useBackofficeLink.js';\n\nexport type BackofficeLinkProps<\n  TManifest extends BackofficeEntityManifestMap = BackofficeEntityManifestMap,\n> = {\n  target: BackofficeLinkTarget<TManifest>;\n  label?: ReactNode;\n  className?: string;\n  icon?: 'auto' | 'none';\n  children?: ReactNode;\n};\n\nexport const BackofficeLink = <\n  TManifest extends BackofficeEntityManifestMap = BackofficeEntityManifestMap,\n>({\n  target,\n  label,\n  className,\n  icon = 'auto',\n  children,\n}: BackofficeLinkProps<TManifest>): JSX.Element => {\n  const link = useBackofficeLink(target, {\n    label: children ?? label,\n  });\n\n  return (\n    <Link to={link.href} className={className}>\n      <BackofficeLinkContent\n        icon={link.icon}\n        label={link.label}\n        showIcon={icon === 'auto'}\n      />\n    </Link>\n  );\n};\n\nexport default BackofficeLink;\n"],"mappings":";;;;;AAmBA,IAAa,KAEX,EACA,WACA,UACA,cACA,UAAO,QACP,kBACiD;CACjD,IAAM,IAAO,EAAkB,GAAQ,EACrC,OAAO,KAAY,GACpB,CAAC;CAEF,OACE,kBAAC,GAAD;EAAM,IAAI,EAAK;EAAiB;YAC9B,kBAAC,GAAD;GACE,MAAM,EAAK;GACX,OAAO,EAAK;GACZ,UAAU,MAAS;GACnB,CAAA;EACG,CAAA"}

package/lib/esm/components/backoffice/links/backofficeLink.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeLink.css.js","names":[],"sources":["../../../../../src/components/backoffice/links/backofficeLink.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui';\nimport { style } from '@vanilla-extract/css';\n\nconst INLINE_FLEX = 'inline-flex' as const;\n\nexport const content = sprinkles({\n  display: INLINE_FLEX,\n  alignItems: 'center',\n  gap: 1,\n});\n\nexport const icon = style([\n  sprinkles({\n    display: INLINE_FLEX,\n    alignItems: 'center',\n    justifyContent: 'center',\n    color: 'current',\n  }),\n  {\n    flex: '0 0 auto',\n    width: '14px',\n    height: '14px',\n  },\n]);\n\nexport const label = style({\n  minWidth: 0,\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeLink.css.js","names":[],"sources":["../../../../../src/components/backoffice/links/backofficeLink.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\nimport { style } from '@vanilla-extract/css';\n\nconst INLINE_FLEX = 'inline-flex' as const;\n\nexport const content = sprinkles({\n  display: INLINE_FLEX,\n  alignItems: 'center',\n  gap: 1,\n});\n\nexport const icon = style([\n  sprinkles({\n    display: INLINE_FLEX,\n    alignItems: 'center',\n    justifyContent: 'center',\n    color: 'current',\n  }),\n  {\n    flex: '0 0 auto',\n    width: '14px',\n    height: '14px',\n  },\n]);\n\nexport const label = style({\n  minWidth: 0,\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/lists/BackofficeListToolbar.js

@@ -1,5 +1,5 @@
 import { container as e, density as t, responsiveMode as n } from "./backofficeListToolbar.css.js";
-import { cx as r } from "@plumile/ui";
+import { cx as r } from "@plumile/ui/theme/tools.js";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/backoffice/lists/BackofficeListToolbar.tsx
 var o = ({ activeFilters: o, className: s, density: c = "compact", filterDrawerTrigger: l, primaryFilters: u, responsiveMode: d = "auto", sortControl: f, utilityActions: p }) => {

package/lib/esm/components/backoffice/lists/BackofficeListToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeListToolbar.js","names":[],"sources":["../../../../../src/components/backoffice/lists/BackofficeListToolbar.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { cx } from '@plumile/ui';\n\nimport * as styles from './backofficeListToolbar.css.js';\n\nexport type BackofficeListToolbarDensity = 'compact' | 'default';\n\nexport type BackofficeListToolbarResponsiveMode = 'auto' | 'stacked';\n\nexport type BackofficeListToolbarProps = {\n  primaryFilters?: ReactNode;\n  filterDrawerTrigger?: ReactNode;\n  sortControl?: ReactNode;\n  utilityActions?: ReactNode;\n  activeFilters?: ReactNode;\n  density?: BackofficeListToolbarDensity;\n  responsiveMode?: BackofficeListToolbarResponsiveMode;\n  className?: string;\n};\n\nexport const BackofficeListToolbar = ({\n  activeFilters,\n  className,\n  density = 'compact',\n  filterDrawerTrigger,\n  primaryFilters,\n  responsiveMode = 'auto',\n  sortControl,\n  utilityActions,\n}: BackofficeListToolbarProps): JSX.Element | null => {\n  const hasFilters = primaryFilters != null || filterDrawerTrigger != null;\n  const hasRightControls = sortControl != null || utilityActions != null;\n  const hasMainRow = hasFilters || hasRightControls;\n  const hasActiveFilters = activeFilters != null;\n\n  if (!hasMainRow && !hasActiveFilters) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cx(\n        styles.container,\n        styles.density[density],\n        styles.responsiveMode[responsiveMode],\n        className,\n      )}\n    >\n      {hasMainRow && (\n        <div className={styles.mainRow}>\n          {hasFilters && (\n            <div className={styles.filtersGroup}>\n              {primaryFilters}\n              {filterDrawerTrigger}\n            </div>\n          )}\n          {hasRightControls && (\n            <div className={styles.rightGroup}>\n              {sortControl != null && (\n                <div className={styles.sortGroup}>{sortControl}</div>\n              )}\n              {utilityActions != null && (\n                <div className={styles.actionsGroup}>{utilityActions}</div>\n              )}\n            </div>\n          )}\n        </div>\n      )}\n      {hasActiveFilters && (\n        <div className={styles.activeFiltersRow}>{activeFilters}</div>\n      )}\n    </div>\n  );\n};\n\nexport default BackofficeListToolbar;\n"],"mappings":";;;;AAqBA,IAAa,KAAyB,EACpC,kBACA,cACA,SAAA,IAAU,WACV,wBACA,mBACA,gBAAA,IAAiB,QACjB,gBACA,wBACoD;CACpD,IAAM,IAAa,KAAkB,QAAQ,KAAuB,MAC9D,IAAmB,KAAe,QAAQ,KAAkB,MAC5D,IAAa,KAAc,GAC3B,IAAmB,KAAiB;CAM1C,OAJI,CAAC,KAAc,CAAC,IACX,OAIP,kBAAC,OAAD;EACE,WAAW,EACT,GACA,EAAe,IACf,EAAsB,IACtB,EACD;YANH,CAQG,KACC,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,KACC,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACG,GACA,EACG;OAEP,KACC,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACG,KAAe,QACd,kBAAC,OAAD;KAAK,WAAW;eAAmB;KAAkB,CAAA,EAEtD,KAAkB,QACjB,kBAAC,OAAD;KAAK,WAAW;eAAsB;KAAqB,CAAA,CAEzD;MAEJ;MAEP,KACC,kBAAC,OAAD;GAAK,WAAW;aAA0B;GAAoB,CAAA,CAE5D"}
+{"version":3,"file":"BackofficeListToolbar.js","names":[],"sources":["../../../../../src/components/backoffice/lists/BackofficeListToolbar.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { cx } from '@plumile/ui/theme/tools.js';\n\nimport * as styles from './backofficeListToolbar.css.js';\n\nexport type BackofficeListToolbarDensity = 'compact' | 'default';\n\nexport type BackofficeListToolbarResponsiveMode = 'auto' | 'stacked';\n\nexport type BackofficeListToolbarProps = {\n  primaryFilters?: ReactNode;\n  filterDrawerTrigger?: ReactNode;\n  sortControl?: ReactNode;\n  utilityActions?: ReactNode;\n  activeFilters?: ReactNode;\n  density?: BackofficeListToolbarDensity;\n  responsiveMode?: BackofficeListToolbarResponsiveMode;\n  className?: string;\n};\n\nexport const BackofficeListToolbar = ({\n  activeFilters,\n  className,\n  density = 'compact',\n  filterDrawerTrigger,\n  primaryFilters,\n  responsiveMode = 'auto',\n  sortControl,\n  utilityActions,\n}: BackofficeListToolbarProps): JSX.Element | null => {\n  const hasFilters = primaryFilters != null || filterDrawerTrigger != null;\n  const hasRightControls = sortControl != null || utilityActions != null;\n  const hasMainRow = hasFilters || hasRightControls;\n  const hasActiveFilters = activeFilters != null;\n\n  if (!hasMainRow && !hasActiveFilters) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cx(\n        styles.container,\n        styles.density[density],\n        styles.responsiveMode[responsiveMode],\n        className,\n      )}\n    >\n      {hasMainRow && (\n        <div className={styles.mainRow}>\n          {hasFilters && (\n            <div className={styles.filtersGroup}>\n              {primaryFilters}\n              {filterDrawerTrigger}\n            </div>\n          )}\n          {hasRightControls && (\n            <div className={styles.rightGroup}>\n              {sortControl != null && (\n                <div className={styles.sortGroup}>{sortControl}</div>\n              )}\n              {utilityActions != null && (\n                <div className={styles.actionsGroup}>{utilityActions}</div>\n              )}\n            </div>\n          )}\n        </div>\n      )}\n      {hasActiveFilters && (\n        <div className={styles.activeFiltersRow}>{activeFilters}</div>\n      )}\n    </div>\n  );\n};\n\nexport default BackofficeListToolbar;\n"],"mappings":";;;;AAqBA,IAAa,KAAyB,EACpC,kBACA,cACA,SAAA,IAAU,WACV,wBACA,mBACA,gBAAA,IAAiB,QACjB,gBACA,wBACoD;CACpD,IAAM,IAAa,KAAkB,QAAQ,KAAuB,MAC9D,IAAmB,KAAe,QAAQ,KAAkB,MAC5D,IAAa,KAAc,GAC3B,IAAmB,KAAiB;CAM1C,OAJI,CAAC,KAAc,CAAC,IACX,OAIP,kBAAC,OAAD;EACE,WAAW,EACT,GACA,EAAe,IACf,EAAsB,IACtB,EACD;YANH,CAQG,KACC,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,KACC,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACG,GACA,EACG;OAEP,KACC,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACG,KAAe,QACd,kBAAC,OAAD;KAAK,WAAW;eAAmB;KAAkB,CAAA,EAEtD,KAAkB,QACjB,kBAAC,OAAD;KAAK,WAAW;eAAsB;KAAqB,CAAA,CAEzD;MAEJ;MAEP,KACC,kBAAC,OAAD;GAAK,WAAW;aAA0B;GAAoB,CAAA,CAE5D"}

package/lib/esm/components/backoffice/lists/backofficeListToolbar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeListToolbar.css.js","names":[],"sources":["../../../../../src/components/backoffice/lists/backofficeListToolbar.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles } from '@plumile/ui';\n\nconst MOBILE_MEDIA_QUERY = 'screen and (max-width: 767px)';\nconst TABLET_MEDIA_QUERY = 'screen and (max-width: 1023px)';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  width: 'full',\n});\n\nexport const density = {\n  compact: sprinkles({\n    gap: 2,\n  }),\n  default: sprinkles({\n    gap: 3,\n  }),\n};\n\nexport const responsiveMode = {\n  auto: style({}),\n  stacked: style({}),\n};\n\nexport const mainRow = style([\n  sprinkles({\n    display: 'grid',\n    alignItems: 'center',\n    gap: 2,\n    width: 'full',\n  }),\n  {\n    gridTemplateColumns: 'minmax(0, 1fr) auto',\n    selectors: {\n      [`${responsiveMode.stacked} &`]: {\n        gridTemplateColumns: 'minmax(0, 1fr)',\n      },\n    },\n    '@media': {\n      [TABLET_MEDIA_QUERY]: {\n        gridTemplateColumns: 'minmax(0, 1fr)',\n      },\n    },\n  },\n]);\n\nexport const filtersGroup = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n    gap: 2,\n    minWidth: 0,\n  }),\n  {\n    '@media': {\n      [MOBILE_MEDIA_QUERY]: {\n        alignItems: 'stretch',\n        width: '100%',\n      },\n    },\n  },\n]);\n\nexport const rightGroup = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    flexWrap: 'wrap',\n    gap: 2,\n    minWidth: 0,\n  }),\n  {\n    '@media': {\n      [TABLET_MEDIA_QUERY]: {\n        justifyContent: 'flex-start',\n      },\n      [MOBILE_MEDIA_QUERY]: {\n        alignItems: 'stretch',\n        width: '100%',\n      },\n    },\n  },\n]);\n\nexport const sortGroup = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    minWidth: 0,\n  }),\n  {\n    width: '11.5rem',\n    '@media': {\n      [MOBILE_MEDIA_QUERY]: {\n        width: '100%',\n      },\n    },\n  },\n]);\n\nexport const actionsGroup = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    flexWrap: 'wrap',\n    gap: 2,\n  }),\n  {\n    '@media': {\n      [TABLET_MEDIA_QUERY]: {\n        justifyContent: 'flex-start',\n      },\n      [MOBILE_MEDIA_QUERY]: {\n        alignItems: 'stretch',\n        width: '100%',\n      },\n    },\n  },\n]);\n\nexport const activeFiltersRow = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  flexWrap: 'wrap',\n  gap: 2,\n  paddingTop: 2,\n  borderTopWidth: 'px',\n  borderStyle: 'solid',\n  borderTopColor: 'borderSubtle',\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeListToolbar.css.js","names":[],"sources":["../../../../../src/components/backoffice/lists/backofficeListToolbar.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nconst MOBILE_MEDIA_QUERY = 'screen and (max-width: 767px)';\nconst TABLET_MEDIA_QUERY = 'screen and (max-width: 1023px)';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  width: 'full',\n});\n\nexport const density = {\n  compact: sprinkles({\n    gap: 2,\n  }),\n  default: sprinkles({\n    gap: 3,\n  }),\n};\n\nexport const responsiveMode = {\n  auto: style({}),\n  stacked: style({}),\n};\n\nexport const mainRow = style([\n  sprinkles({\n    display: 'grid',\n    alignItems: 'center',\n    gap: 2,\n    width: 'full',\n  }),\n  {\n    gridTemplateColumns: 'minmax(0, 1fr) auto',\n    selectors: {\n      [`${responsiveMode.stacked} &`]: {\n        gridTemplateColumns: 'minmax(0, 1fr)',\n      },\n    },\n    '@media': {\n      [TABLET_MEDIA_QUERY]: {\n        gridTemplateColumns: 'minmax(0, 1fr)',\n      },\n    },\n  },\n]);\n\nexport const filtersGroup = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n    gap: 2,\n    minWidth: 0,\n  }),\n  {\n    '@media': {\n      [MOBILE_MEDIA_QUERY]: {\n        alignItems: 'stretch',\n        width: '100%',\n      },\n    },\n  },\n]);\n\nexport const rightGroup = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    flexWrap: 'wrap',\n    gap: 2,\n    minWidth: 0,\n  }),\n  {\n    '@media': {\n      [TABLET_MEDIA_QUERY]: {\n        justifyContent: 'flex-start',\n      },\n      [MOBILE_MEDIA_QUERY]: {\n        alignItems: 'stretch',\n        width: '100%',\n      },\n    },\n  },\n]);\n\nexport const sortGroup = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    minWidth: 0,\n  }),\n  {\n    width: '11.5rem',\n    '@media': {\n      [MOBILE_MEDIA_QUERY]: {\n        width: '100%',\n      },\n    },\n  },\n]);\n\nexport const actionsGroup = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    flexWrap: 'wrap',\n    gap: 2,\n  }),\n  {\n    '@media': {\n      [TABLET_MEDIA_QUERY]: {\n        justifyContent: 'flex-start',\n      },\n      [MOBILE_MEDIA_QUERY]: {\n        alignItems: 'stretch',\n        width: '100%',\n      },\n    },\n  },\n]);\n\nexport const activeFiltersRow = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  flexWrap: 'wrap',\n  gap: 2,\n  paddingTop: 2,\n  borderTopWidth: 'px',\n  borderStyle: 'solid',\n  borderTopColor: 'borderSubtle',\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/overview/BackofficeOverviewLayout.js

@@ -1,5 +1,5 @@
 import { aside as e, container as t, content as n, primary as r, summary as i } from "./backofficeOverviewLayout.css.js";
-import { cx as a } from "@plumile/ui";
+import { cx as a } from "@plumile/ui/theme/tools.js";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/backoffice/overview/BackofficeOverviewLayout.tsx
 var c = ({ summary: c, aside: l, children: u, className: d }) => {

package/lib/esm/components/backoffice/overview/BackofficeOverviewLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeOverviewLayout.js","names":[],"sources":["../../../../../src/components/backoffice/overview/BackofficeOverviewLayout.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { cx } from '@plumile/ui';\n\nimport * as styles from './backofficeOverviewLayout.css.js';\n\nexport type BackofficeOverviewLayoutProps = {\n  summary?: ReactNode;\n  aside?: ReactNode;\n  children?: ReactNode;\n  className?: string;\n};\n\nexport const BackofficeOverviewLayout = ({\n  summary,\n  aside,\n  children,\n  className,\n}: BackofficeOverviewLayoutProps): JSX.Element => {\n  let summaryNode: JSX.Element | null = null;\n  if (summary != null) {\n    summaryNode = <div className={styles.summary}>{summary}</div>;\n  }\n\n  let asideNode: JSX.Element | null = null;\n  if (aside != null) {\n    asideNode = <aside className={styles.aside}>{aside}</aside>;\n  }\n\n  let primaryNode: JSX.Element | null = null;\n  if (children != null || asideNode != null) {\n    primaryNode = <div className={styles.primary}>{children}</div>;\n  }\n\n  return (\n    <div className={cx(styles.container, className)}>\n      {summaryNode}\n      <div className={styles.content}>\n        {primaryNode}\n        {asideNode}\n      </div>\n    </div>\n  );\n};\n\nexport default BackofficeOverviewLayout;\n"],"mappings":";;;;AAaA,IAAa,KAA4B,EACvC,SAAA,GACA,OAAA,GACA,aACA,mBACgD;CAChD,IAAI,IAAkC;CACtC,AAAI,KAAW,SACb,IAAc,kBAAC,OAAD;EAAK,WAAW;YAAiB;EAAc,CAAA;CAG/D,IAAI,IAAgC;CACpC,AAAI,KAAS,SACX,IAAY,kBAAC,SAAD;EAAO,WAAW;YAAe;EAAc,CAAA;CAG7D,IAAI,IAAkC;CAKtC,QAJI,KAAY,QAAQ,KAAa,UACnC,IAAc,kBAAC,OAAD;EAAK,WAAW;EAAiB;EAAe,CAAA,GAI9D,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAkB,EAAU;YAA/C,CACG,GACD,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,GACA,EACG;KACF"}
+{"version":3,"file":"BackofficeOverviewLayout.js","names":[],"sources":["../../../../../src/components/backoffice/overview/BackofficeOverviewLayout.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { cx } from '@plumile/ui/theme/tools.js';\n\nimport * as styles from './backofficeOverviewLayout.css.js';\n\nexport type BackofficeOverviewLayoutProps = {\n  summary?: ReactNode;\n  aside?: ReactNode;\n  children?: ReactNode;\n  className?: string;\n};\n\nexport const BackofficeOverviewLayout = ({\n  summary,\n  aside,\n  children,\n  className,\n}: BackofficeOverviewLayoutProps): JSX.Element => {\n  let summaryNode: JSX.Element | null = null;\n  if (summary != null) {\n    summaryNode = <div className={styles.summary}>{summary}</div>;\n  }\n\n  let asideNode: JSX.Element | null = null;\n  if (aside != null) {\n    asideNode = <aside className={styles.aside}>{aside}</aside>;\n  }\n\n  let primaryNode: JSX.Element | null = null;\n  if (children != null || asideNode != null) {\n    primaryNode = <div className={styles.primary}>{children}</div>;\n  }\n\n  return (\n    <div className={cx(styles.container, className)}>\n      {summaryNode}\n      <div className={styles.content}>\n        {primaryNode}\n        {asideNode}\n      </div>\n    </div>\n  );\n};\n\nexport default BackofficeOverviewLayout;\n"],"mappings":";;;;AAaA,IAAa,KAA4B,EACvC,SAAA,GACA,OAAA,GACA,aACA,mBACgD;CAChD,IAAI,IAAkC;CACtC,AAAI,KAAW,SACb,IAAc,kBAAC,OAAD;EAAK,WAAW;YAAiB;EAAc,CAAA;CAG/D,IAAI,IAAgC;CACpC,AAAI,KAAS,SACX,IAAY,kBAAC,SAAD;EAAO,WAAW;YAAe;EAAc,CAAA;CAG7D,IAAI,IAAkC;CAKtC,QAJI,KAAY,QAAQ,KAAa,UACnC,IAAc,kBAAC,OAAD;EAAK,WAAW;EAAiB;EAAe,CAAA,GAI9D,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAkB,EAAU;YAA/C,CACG,GACD,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,GACA,EACG;KACF"}

package/lib/esm/components/backoffice/overview/backofficeOverviewLayout.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeOverviewLayout.css.js","names":[],"sources":["../../../../../src/components/backoffice/overview/backofficeOverviewLayout.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 6,\n});\n\nexport const summary = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n\nexport const content = sprinkles({\n  display: 'grid',\n  gridTemplateColumns: 'twoFrOneFr',\n  gap: 6,\n  alignItems: 'flex-start',\n});\n\nexport const primary = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 6,\n});\n\nexport const aside = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 6,\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeOverviewLayout.css.js","names":[],"sources":["../../../../../src/components/backoffice/overview/backofficeOverviewLayout.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 6,\n});\n\nexport const summary = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n\nexport const content = sprinkles({\n  display: 'grid',\n  gridTemplateColumns: 'twoFrOneFr',\n  gap: 6,\n  alignItems: 'flex-start',\n});\n\nexport const primary = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 6,\n});\n\nexport const aside = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 6,\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/pickers/EntityIdPickerDialog.js

@@ -5,12 +5,16 @@ import { loadingLabel as r, loadingState as i } from "./entityIdPickerDialog.css
 import { EntityPickerShell as a } from "./shared/EntityPickerShell.js";
 import { EntityPickerList as o } from "./shared/EntityPickerList.js";
 import { Suspense as s, useCallback as c, useEffect as l, useMemo as u, useState as d } from "react";
-import { BackofficeEmptyState as f, Button as p, InlineBanner as m, Modal as h, Spinner as g } from "@plumile/ui";
-import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
-import { useTranslation as b } from "react-i18next";
-import * as x from "react-relay";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useTranslation as h } from "react-i18next";
+import { Button as g } from "@plumile/ui/atomic/atoms/button/Button.js";
+import * as _ from "react-relay";
+import { Modal as v } from "@plumile/ui/atomic/atoms/modal/Modal.js";
+import { Spinner as y } from "@plumile/ui/backoffice/atoms/spinner/Spinner.js";
+import { BackofficeEmptyState as b } from "@plumile/ui/backoffice/molecules/backoffice_empty_state/BackofficeEmptyState.js";
+import { InlineBanner as x } from "@plumile/ui/backoffice/molecules/inline_banner/InlineBanner.js";
 //#region src/components/backoffice/pickers/EntityIdPickerDialog.tsx
-var { useFragment: S, useLazyLoadQuery: C } = x, w = "store-and-network", T = (e, t) => e(t), E = ({ config: e, search: t, scope: n, fetchKey: r, onSelectId: i }) => {
+var { useFragment: S, useLazyLoadQuery: C } = _, w = "store-and-network", T = (e, t) => e(t), E = ({ config: e, search: t, scope: n, fetchKey: r, onSelectId: i }) => {
 	let a = u(() => {
 		let r = t.trim();
 		return e.buildQueryVariables({
@@ -25,7 +29,7 @@ var { useFragment: S, useLazyLoadQuery: C } = x, w = "store-and-network", T = (e
 		fetchPolicy: w,
 		fetchKey: r
 	}), c = S(e.fragment, s), l = e.getConnection(c);
-	return /* @__PURE__ */ v(o, {
+	return /* @__PURE__ */ p(o, {
 		items: u(() => l.edges.map((t) => {
 			let n = e.toRow(t.node);
 			return {
@@ -36,64 +40,64 @@ var { useFragment: S, useLazyLoadQuery: C } = x, w = "store-and-network", T = (e
 		}), [e, l.edges]),
 		onSelectId: i
 	});
-}, D = (e, t) => /* @__PURE__ */ v(_, { children: /* @__PURE__ */ v(p, {
+}, D = (e, t) => /* @__PURE__ */ p(f, { children: /* @__PURE__ */ p(g, {
 	type: "button",
 	variant: "secondary",
 	onClick: e,
 	children: t
-}) }), O = ({ message: e }) => /* @__PURE__ */ v(m, {
+}) }), O = ({ message: e }) => /* @__PURE__ */ p(x, {
 	tone: "warning",
 	title: e,
 	children: null
-}), k = ({ label: e }) => /* @__PURE__ */ y("div", {
+}), k = ({ label: e }) => /* @__PURE__ */ m("div", {
 	className: i,
 	role: "status",
 	"aria-live": "polite",
-	children: [/* @__PURE__ */ v(g, {
+	children: [/* @__PURE__ */ p(y, {
 		size: 18,
 		ariaLabel: e
-	}), /* @__PURE__ */ v("span", {
+	}), /* @__PURE__ */ p("span", {
 		className: r,
 		children: e
 	})]
-}), A = ({ isOpen: r, entity: i, title: o, scope: g, onClose: _, onSelectId: y }) => {
-	let { t: x } = b(), { t: S } = e(), [C, w] = d(""), [A, j] = d(0), M = n(i, { enabled: r }), N;
+}), A = ({ isOpen: r, entity: i, title: o, scope: f, onClose: m, onSelectId: _ }) => {
+	let { t: y } = h(), { t: S } = e(), [C, w] = d(""), [A, j] = d(0), M = n(i, { enabled: r }), N;
 	M.status === "loaded" && (N = M.module.config.picker), l(() => {
 		r && (w(""), j((e) => e + 1));
 	}, [r]);
-	let P = u(() => D(_, S("common.actions.close")), [_, S]), F = c((e) => {
+	let P = u(() => D(m, S("common.actions.close")), [m, S]), F = c((e) => {
 		w(e), j((e) => e + 1);
 	}, []), I = c((e) => {
-		y(e), _();
-	}, [_, y]);
+		_(e), m();
+	}, [m, _]);
 	if (!r) return null;
 	let L;
-	N?.searchPlaceholder != null && (L = T(N.searchPlaceholder, x));
+	N?.searchPlaceholder != null && (L = T(N.searchPlaceholder, y));
 	let R = C.trim(), z = N?.searchRequired === !0, B;
-	return B = M.status === "loading" ? /* @__PURE__ */ v(k, { label: S("common.loading") }) : N == null ? /* @__PURE__ */ v(O, { message: S("picker.unavailable", { entity: i }) }) : z && R === "" ? /* @__PURE__ */ v(f, { title: S("picker.searchRequired") }) : /* @__PURE__ */ v(E, {
+	return B = M.status === "loading" ? /* @__PURE__ */ p(k, { label: S("common.loading") }) : N == null ? /* @__PURE__ */ p(O, { message: S("picker.unavailable", { entity: i }) }) : z && R === "" ? /* @__PURE__ */ p(b, { title: S("picker.searchRequired") }) : /* @__PURE__ */ p(E, {
 		config: N,
 		search: C,
-		scope: g,
+		scope: f,
 		fetchKey: A,
 		onSelectId: I
-	}), /* @__PURE__ */ v(h, {
+	}), /* @__PURE__ */ p(v, {
 		isOpen: r,
-		onClose: _,
+		onClose: m,
 		title: o,
 		footer: P,
 		initialFocus: "first-form-control",
-		children: /* @__PURE__ */ v(a, {
+		children: /* @__PURE__ */ p(a, {
 			search: C,
 			onSearchChange: F,
 			searchPlaceholder: L,
 			searchEnabled: N?.searchEnabled ?? !0,
-			children: /* @__PURE__ */ v(t, {
+			children: /* @__PURE__ */ p(t, {
 				fallback: (e) => {
 					let { reset: t } = e;
-					return /* @__PURE__ */ v(m, {
+					return /* @__PURE__ */ p(x, {
 						tone: "danger",
 						title: S("picker.errors.loadFailed"),
-						actions: /* @__PURE__ */ v(p, {
+						actions: /* @__PURE__ */ p(g, {
 							type: "button",
 							variant: "secondary",
 							onClick: () => {
@@ -104,8 +108,8 @@ var { useFragment: S, useLazyLoadQuery: C } = x, w = "store-and-network", T = (e
 						children: null
 					});
 				},
-				children: /* @__PURE__ */ v(s, {
-					fallback: /* @__PURE__ */ v(k, { label: S("common.loading") }),
+				children: /* @__PURE__ */ p(s, {
+					fallback: /* @__PURE__ */ p(k, { label: S("common.loading") }),
 					children: B
 				})
 			})

package/lib/esm/components/backoffice/pickers/EntityIdPickerDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityIdPickerDialog.js","names":[],"sources":["../../../../../src/components/backoffice/pickers/EntityIdPickerDialog.tsx"],"sourcesContent":["import {\n  Suspense,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type JSX,\n} from 'react';\nimport type { TFunction } from 'i18next';\nimport { useTranslation } from 'react-i18next';\nimport * as ReactRelay from 'react-relay';\n\nimport {\n  BackofficeEmptyState,\n  Button,\n  InlineBanner,\n  Modal,\n  Spinner,\n} from '@plumile/ui';\nimport type {\n  BackofficePickerScope,\n  BackofficeRuntimeEntityPickerConfig,\n  I18nLabel,\n} from '@plumile/backoffice-core/types.js';\n\nimport { BackofficeErrorBoundary } from '../errors/BackofficeErrorBoundary.js';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficePickerEntityLoader } from '../../../provider/useBackofficeEntityLoader.js';\n\nimport { EntityPickerShell } from './shared/EntityPickerShell.js';\nimport { EntityPickerList } from './shared/EntityPickerList.js';\nimport type { EntityPickerRowViewModel } from './types.js';\nimport * as styles from './entityIdPickerDialog.css.js';\n\nconst { useFragment, useLazyLoadQuery } = ReactRelay;\n\nexport type EntityIdPickerDialogProps = {\n  isOpen: boolean;\n  entity: string;\n  title: string;\n  scope?: BackofficePickerScope<Record<string, unknown>>;\n  onClose: () => void;\n  onSelectId: (id: string) => void;\n};\n\nconst PICKER_FETCH_POLICY = 'store-and-network' as const;\n\nconst resolveLabel = (label: I18nLabel, tApp: TFunction): string => {\n  return label(tApp);\n};\n\ntype PickerBodyProps = {\n  config: BackofficeRuntimeEntityPickerConfig;\n  search: string;\n  scope?: BackofficePickerScope<Record<string, unknown>>;\n  fetchKey: number;\n  onSelectId: (id: string) => void;\n};\n\ntype RuntimePickerRow = {\n  title: string;\n  subtitle?: string | null | undefined;\n};\n\nconst PickerBody = ({\n  config,\n  search,\n  scope,\n  fetchKey,\n  onSelectId,\n}: PickerBodyProps): JSX.Element => {\n  const variables = useMemo(() => {\n    const trimmed = search.trim();\n    return config.buildQueryVariables({ search: trimmed, scope });\n  }, [config, scope, search]);\n\n  const queryData = useLazyLoadQuery(config.query, variables, {\n    fetchPolicy: PICKER_FETCH_POLICY,\n    fetchKey,\n  });\n\n  const fragmentData = useFragment(\n    config.fragment,\n    queryData as never,\n  ) as unknown;\n\n  const connection = config.getConnection(fragmentData);\n\n  const items = useMemo<readonly EntityPickerRowViewModel[]>(() => {\n    return connection.edges.map((edge) => {\n      const row = config.toRow(edge.node) as RuntimePickerRow;\n      const id = config.getRowId(row);\n      return {\n        id,\n        title: row.title,\n        subtitle: row.subtitle,\n      };\n    });\n  }, [config, connection.edges]);\n\n  return <EntityPickerList items={items} onSelectId={onSelectId} />;\n};\n\nconst buildFooter = (onClose: () => void, closeLabel: string): JSX.Element => {\n  return (\n    <>\n      <Button type=\"button\" variant=\"secondary\" onClick={onClose}>\n        {closeLabel}\n      </Button>\n    </>\n  );\n};\n\nconst PickerUnavailable = ({ message }: { message: string }) => {\n  return (\n    <InlineBanner tone=\"warning\" title={message}>\n      {null}\n    </InlineBanner>\n  );\n};\n\nconst PickerLoading = ({ label }: { label: string }): JSX.Element => {\n  return (\n    <div className={styles.loadingState} role=\"status\" aria-live=\"polite\">\n      <Spinner size={18} ariaLabel={label} />\n      <span className={styles.loadingLabel}>{label}</span>\n    </div>\n  );\n};\n\nexport const EntityIdPickerDialog = ({\n  isOpen,\n  entity,\n  title,\n  scope,\n  onClose,\n  onSelectId,\n}: EntityIdPickerDialogProps): JSX.Element | null => {\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const [search, setSearch] = useState('');\n  const [fetchKey, setFetchKey] = useState(0);\n  const entityState = useBackofficePickerEntityLoader(entity, {\n    enabled: isOpen,\n  });\n\n  let pickerConfig: BackofficeRuntimeEntityPickerConfig | undefined;\n  if (entityState.status === 'loaded') {\n    pickerConfig = entityState.module.config.picker as\n      | BackofficeRuntimeEntityPickerConfig\n      | undefined;\n  }\n\n  useEffect(() => {\n    if (isOpen) {\n      setSearch('');\n      setFetchKey((value) => {\n        return value + 1;\n      });\n    }\n  }, [isOpen]);\n\n  const footer = useMemo(() => {\n    return buildFooter(onClose, t('common.actions.close'));\n  }, [onClose, t]);\n\n  const handleSearchChange = useCallback((next: string) => {\n    setSearch(next);\n    setFetchKey((value) => {\n      return value + 1;\n    });\n  }, []);\n\n  const handleSelectId = useCallback(\n    (id: string) => {\n      onSelectId(id);\n      onClose();\n    },\n    [onClose, onSelectId],\n  );\n\n  if (!isOpen) {\n    return null;\n  }\n\n  let resolvedSearchPlaceholder: string | undefined;\n  if (pickerConfig?.searchPlaceholder != null) {\n    resolvedSearchPlaceholder = resolveLabel(\n      pickerConfig.searchPlaceholder,\n      tApp,\n    );\n  }\n\n  const trimmedSearch = search.trim();\n  const isSearchRequired = pickerConfig?.searchRequired === true;\n\n  let pickerNode: JSX.Element;\n  if (entityState.status === 'loading') {\n    pickerNode = <PickerLoading label={t('common.loading')} />;\n  } else if (pickerConfig != null) {\n    if (isSearchRequired && trimmedSearch === '') {\n      pickerNode = <BackofficeEmptyState title={t('picker.searchRequired')} />;\n    } else {\n      pickerNode = (\n        <PickerBody\n          config={pickerConfig}\n          search={search}\n          scope={scope}\n          fetchKey={fetchKey}\n          onSelectId={handleSelectId}\n        />\n      );\n    }\n  } else {\n    pickerNode = (\n      <PickerUnavailable message={t('picker.unavailable', { entity })} />\n    );\n  }\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={onClose}\n      title={title}\n      footer={footer}\n      initialFocus=\"first-form-control\"\n    >\n      <EntityPickerShell\n        search={search}\n        onSearchChange={handleSearchChange}\n        searchPlaceholder={resolvedSearchPlaceholder}\n        searchEnabled={pickerConfig?.searchEnabled ?? true}\n      >\n        <BackofficeErrorBoundary\n          fallback={(args: { error: unknown; reset: () => void }) => {\n            const { reset } = args;\n            return (\n              <InlineBanner\n                tone=\"danger\"\n                title={t('picker.errors.loadFailed')}\n                actions={\n                  <Button\n                    type=\"button\"\n                    variant=\"secondary\"\n                    onClick={() => {\n                      reset();\n                      setFetchKey((value) => {\n                        return value + 1;\n                      });\n                    }}\n                  >\n                    {t('common.actions.retry')}\n                  </Button>\n                }\n              >\n                {null}\n              </InlineBanner>\n            );\n          }}\n        >\n          <Suspense fallback={<PickerLoading label={t('common.loading')} />}>\n            {pickerNode}\n          </Suspense>\n        </BackofficeErrorBoundary>\n      </EntityPickerShell>\n    </Modal>\n  );\n};\n\nexport type { BackofficePickerScope } from '@plumile/backoffice-core/types.js';\n\nexport default EntityIdPickerDialog;\n"],"mappings":"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"}
+{"version":3,"file":"EntityIdPickerDialog.js","names":[],"sources":["../../../../../src/components/backoffice/pickers/EntityIdPickerDialog.tsx"],"sourcesContent":["import {\n  Suspense,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type JSX,\n} from 'react';\nimport type { TFunction } from 'i18next';\nimport { useTranslation } from 'react-i18next';\nimport * as ReactRelay from 'react-relay';\n\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { Modal } from '@plumile/ui/atomic/atoms/modal/Modal.js';\nimport { Spinner } from '@plumile/ui/backoffice/atoms/spinner/Spinner.js';\nimport { BackofficeEmptyState } from '@plumile/ui/backoffice/molecules/backoffice_empty_state/BackofficeEmptyState.js';\nimport { InlineBanner } from '@plumile/ui/backoffice/molecules/inline_banner/InlineBanner.js';\nimport type {\n  BackofficePickerScope,\n  BackofficeRuntimeEntityPickerConfig,\n  I18nLabel,\n} from '@plumile/backoffice-core/types.js';\n\nimport { BackofficeErrorBoundary } from '../errors/BackofficeErrorBoundary.js';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficePickerEntityLoader } from '../../../provider/useBackofficeEntityLoader.js';\n\nimport { EntityPickerShell } from './shared/EntityPickerShell.js';\nimport { EntityPickerList } from './shared/EntityPickerList.js';\nimport type { EntityPickerRowViewModel } from './types.js';\nimport * as styles from './entityIdPickerDialog.css.js';\n\nconst { useFragment, useLazyLoadQuery } = ReactRelay;\n\nexport type EntityIdPickerDialogProps = {\n  isOpen: boolean;\n  entity: string;\n  title: string;\n  scope?: BackofficePickerScope<Record<string, unknown>>;\n  onClose: () => void;\n  onSelectId: (id: string) => void;\n};\n\nconst PICKER_FETCH_POLICY = 'store-and-network' as const;\n\nconst resolveLabel = (label: I18nLabel, tApp: TFunction): string => {\n  return label(tApp);\n};\n\ntype PickerBodyProps = {\n  config: BackofficeRuntimeEntityPickerConfig;\n  search: string;\n  scope?: BackofficePickerScope<Record<string, unknown>>;\n  fetchKey: number;\n  onSelectId: (id: string) => void;\n};\n\ntype RuntimePickerRow = {\n  title: string;\n  subtitle?: string | null | undefined;\n};\n\nconst PickerBody = ({\n  config,\n  search,\n  scope,\n  fetchKey,\n  onSelectId,\n}: PickerBodyProps): JSX.Element => {\n  const variables = useMemo(() => {\n    const trimmed = search.trim();\n    return config.buildQueryVariables({ search: trimmed, scope });\n  }, [config, scope, search]);\n\n  const queryData = useLazyLoadQuery(config.query, variables, {\n    fetchPolicy: PICKER_FETCH_POLICY,\n    fetchKey,\n  });\n\n  const fragmentData = useFragment(\n    config.fragment,\n    queryData as never,\n  ) as unknown;\n\n  const connection = config.getConnection(fragmentData);\n\n  const items = useMemo<readonly EntityPickerRowViewModel[]>(() => {\n    return connection.edges.map((edge) => {\n      const row = config.toRow(edge.node) as RuntimePickerRow;\n      const id = config.getRowId(row);\n      return {\n        id,\n        title: row.title,\n        subtitle: row.subtitle,\n      };\n    });\n  }, [config, connection.edges]);\n\n  return <EntityPickerList items={items} onSelectId={onSelectId} />;\n};\n\nconst buildFooter = (onClose: () => void, closeLabel: string): JSX.Element => {\n  return (\n    <>\n      <Button type=\"button\" variant=\"secondary\" onClick={onClose}>\n        {closeLabel}\n      </Button>\n    </>\n  );\n};\n\nconst PickerUnavailable = ({ message }: { message: string }) => {\n  return (\n    <InlineBanner tone=\"warning\" title={message}>\n      {null}\n    </InlineBanner>\n  );\n};\n\nconst PickerLoading = ({ label }: { label: string }): JSX.Element => {\n  return (\n    <div className={styles.loadingState} role=\"status\" aria-live=\"polite\">\n      <Spinner size={18} ariaLabel={label} />\n      <span className={styles.loadingLabel}>{label}</span>\n    </div>\n  );\n};\n\nexport const EntityIdPickerDialog = ({\n  isOpen,\n  entity,\n  title,\n  scope,\n  onClose,\n  onSelectId,\n}: EntityIdPickerDialogProps): JSX.Element | null => {\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const [search, setSearch] = useState('');\n  const [fetchKey, setFetchKey] = useState(0);\n  const entityState = useBackofficePickerEntityLoader(entity, {\n    enabled: isOpen,\n  });\n\n  let pickerConfig: BackofficeRuntimeEntityPickerConfig | undefined;\n  if (entityState.status === 'loaded') {\n    pickerConfig = entityState.module.config.picker as\n      | BackofficeRuntimeEntityPickerConfig\n      | undefined;\n  }\n\n  useEffect(() => {\n    if (isOpen) {\n      setSearch('');\n      setFetchKey((value) => {\n        return value + 1;\n      });\n    }\n  }, [isOpen]);\n\n  const footer = useMemo(() => {\n    return buildFooter(onClose, t('common.actions.close'));\n  }, [onClose, t]);\n\n  const handleSearchChange = useCallback((next: string) => {\n    setSearch(next);\n    setFetchKey((value) => {\n      return value + 1;\n    });\n  }, []);\n\n  const handleSelectId = useCallback(\n    (id: string) => {\n      onSelectId(id);\n      onClose();\n    },\n    [onClose, onSelectId],\n  );\n\n  if (!isOpen) {\n    return null;\n  }\n\n  let resolvedSearchPlaceholder: string | undefined;\n  if (pickerConfig?.searchPlaceholder != null) {\n    resolvedSearchPlaceholder = resolveLabel(\n      pickerConfig.searchPlaceholder,\n      tApp,\n    );\n  }\n\n  const trimmedSearch = search.trim();\n  const isSearchRequired = pickerConfig?.searchRequired === true;\n\n  let pickerNode: JSX.Element;\n  if (entityState.status === 'loading') {\n    pickerNode = <PickerLoading label={t('common.loading')} />;\n  } else if (pickerConfig != null) {\n    if (isSearchRequired && trimmedSearch === '') {\n      pickerNode = <BackofficeEmptyState title={t('picker.searchRequired')} />;\n    } else {\n      pickerNode = (\n        <PickerBody\n          config={pickerConfig}\n          search={search}\n          scope={scope}\n          fetchKey={fetchKey}\n          onSelectId={handleSelectId}\n        />\n      );\n    }\n  } else {\n    pickerNode = (\n      <PickerUnavailable message={t('picker.unavailable', { entity })} />\n    );\n  }\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={onClose}\n      title={title}\n      footer={footer}\n      initialFocus=\"first-form-control\"\n    >\n      <EntityPickerShell\n        search={search}\n        onSearchChange={handleSearchChange}\n        searchPlaceholder={resolvedSearchPlaceholder}\n        searchEnabled={pickerConfig?.searchEnabled ?? true}\n      >\n        <BackofficeErrorBoundary\n          fallback={(args: { error: unknown; reset: () => void }) => {\n            const { reset } = args;\n            return (\n              <InlineBanner\n                tone=\"danger\"\n                title={t('picker.errors.loadFailed')}\n                actions={\n                  <Button\n                    type=\"button\"\n                    variant=\"secondary\"\n                    onClick={() => {\n                      reset();\n                      setFetchKey((value) => {\n                        return value + 1;\n                      });\n                    }}\n                  >\n                    {t('common.actions.retry')}\n                  </Button>\n                }\n              >\n                {null}\n              </InlineBanner>\n            );\n          }}\n        >\n          <Suspense fallback={<PickerLoading label={t('common.loading')} />}>\n            {pickerNode}\n          </Suspense>\n        </BackofficeErrorBoundary>\n      </EntityPickerShell>\n    </Modal>\n  );\n};\n\nexport type { BackofficePickerScope } from '@plumile/backoffice-core/types.js';\n\nexport default EntityIdPickerDialog;\n"],"mappings":"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"}

package/lib/esm/components/backoffice/pickers/entityIdPickerDialog.css.js

@@ -1,7 +1,7 @@
 /* empty css                                    */
 //#region src/components/backoffice/pickers/entityIdPickerDialog.css.ts
-var e = "txvbqb9ip txvbqbai7 txvbqbaog", t = "txvbqbnvg txvbqboip txvbqbp6p txvbqblyg txvbqbva1 txvbqb8y txvbqbt6y", n = "txvbqbnw7 txvbqbojg txvbqbp6y txvbqblyp txvbqb9ip txvbqbcp txvbqbdoy txvbqbao7 txvbqbva1", r = "txvbqb8y txvbqbva1", i = "txvbqb9ip txvbqbao7 txvbqbcp", a = "txvbqb9my txvbqbk5y txvbqb9ip txvbqbai7 txvbqbt6p", o = "txvbqbv9z txvbqbamg txvbqb97 txvbqbf4y", s = "txvbqbva1 txvbqb8y txvbqbf4y", c = "txvbqbva3 txvbqb8p txvbqbf4y txvbqbuxg";
+var e = "txvbqb9ip txvbqbai7 txvbqbaog", t = "txvbqbnvg txvbqboip txvbqbp6p txvbqblyg txvbqbva1 txvbqb8y txvbqbt6y", n = "txvbqbnw7 txvbqbojg txvbqbp6y txvbqblyp txvbqb9ip txvbqbcp txvbqbdoy txvbqbao7 txvbqbva1", r = "txvbqb8y txvbqbva1", i = "_10f5c550 txvbqb9ip txvbqbai7 txvbqbl7g txvbqb1rp txvbqb1cp txvbqb1qg txvbqbwp txvbqbv41", a = "_10f5c551 txvbqbnw7 txvbqbojg txvbqbps7 txvbqbmjy txvbqb6 txvbqb9i7 txvbqbu7g txvbqb12g txvbqbv41 txvbqbv9z txvbqbv txvbqbt6p txvbqb78 txvbqb6w txvbqb7k", o = "txvbqb9ip txvbqbao7 txvbqbcp txvbqbk5y", s = "txvbqb9my txvbqbk5y txvbqb9ip txvbqbai7 txvbqbt6p", c = "txvbqbv9z txvbqbamg txvbqb97 txvbqbf4y txvbqbl7g txvbqbt7g txvbqbuxg", l = "txvbqbva1 txvbqb8y txvbqbf4y txvbqbl7g txvbqbt7g txvbqbuxg", u = "txvbqbva3 txvbqb8p txvbqbf4y txvbqbuxg";
 //#endregion
-export { e as layout, r as loadingLabel, n as loadingState, i as row, c as rowMeta, s as rowSubtitle, a as rowText, o as rowTitle, t as searchRequiredMessage };
+export { e as layout, i as list, a as listItem, r as loadingLabel, n as loadingState, o as row, u as rowMeta, l as rowSubtitle, s as rowText, c as rowTitle, t as searchRequiredMessage };
 
 //# sourceMappingURL=entityIdPickerDialog.css.js.map

package/lib/esm/components/backoffice/pickers/entityIdPickerDialog.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"entityIdPickerDialog.css.js","names":[],"sources":["../../../../../src/components/backoffice/pickers/entityIdPickerDialog.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui';\n\nexport const layout = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const searchRequiredMessage = sprinkles({\n  color: 'textSecondary',\n  fontSize: 'sm',\n  textAlign: 'center',\n  paddingY: 3,\n  paddingX: 0,\n});\n\nexport const loadingState = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  gap: 2,\n  paddingY: 4,\n  paddingX: 3,\n  color: 'textSecondary',\n});\n\nexport const loadingLabel = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n\nexport const row = sprinkles({\n  display: 'flex',\n  gap: 2,\n  alignItems: 'center',\n});\n\nexport const rowText = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  textAlign: 'left',\n});\n\nexport const rowTitle = sprinkles({\n  color: 'text',\n  fontWeight: 'medium',\n  fontSize: 'base',\n  lineHeight: 1.2,\n});\n\nexport const rowSubtitle = sprinkles({\n  color: 'textSecondary',\n  fontSize: 'sm',\n  lineHeight: 1.2,\n});\n\nexport const rowMeta = sprinkles({\n  color: 'textMuted',\n  fontSize: 'xs',\n  lineHeight: 1.2,\n  whiteSpace: 'nowrap',\n});\n"],"mappings":""}
+{"version":3,"file":"entityIdPickerDialog.css.js","names":[],"sources":["../../../../../src/components/backoffice/pickers/entityIdPickerDialog.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 layout = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const searchRequiredMessage = sprinkles({\n  color: 'textSecondary',\n  fontSize: 'sm',\n  textAlign: 'center',\n  paddingY: 3,\n  paddingX: 0,\n});\n\nexport const loadingState = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  gap: 2,\n  paddingY: 4,\n  paddingX: 3,\n  color: 'textSecondary',\n});\n\nexport const loadingLabel = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n\nexport const list = style([\n  sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    overflow: 'hidden',\n    borderRadius: 'lg',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'borderSubtle',\n    backgroundColor: 'surface',\n  }),\n  {\n    selectors: {\n      '&:empty': {\n        display: 'none',\n      },\n    },\n  },\n]);\n\nexport const listItem = style([\n  sprinkles({\n    appearance: 'none',\n    display: 'block',\n    width: 'full',\n    paddingX: 3,\n    paddingY: 2.5,\n    borderWidth: 0,\n    backgroundColor: 'surface',\n    color: 'text',\n    cursor: 'pointer',\n    textAlign: 'left',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    minHeight: '3.25rem',\n    selectors: {\n      '& + &': {\n        borderTop: `1px solid ${vars.colors.borderSubtle}`,\n      },\n      '&:hover': {\n        backgroundColor: vars.colors.surfaceMuted,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '-2px',\n      },\n    },\n  },\n]);\n\nexport const row = sprinkles({\n  display: 'flex',\n  gap: 2,\n  alignItems: 'center',\n  minWidth: 0,\n});\n\nexport const rowText = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  textAlign: 'left',\n});\n\nexport const rowTitle = sprinkles({\n  color: 'text',\n  fontWeight: 'medium',\n  fontSize: 'base',\n  lineHeight: 1.2,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n});\n\nexport const rowSubtitle = sprinkles({\n  color: 'textSecondary',\n  fontSize: 'sm',\n  lineHeight: 1.2,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n});\n\nexport const rowMeta = sprinkles({\n  color: 'textMuted',\n  fontSize: 'xs',\n  lineHeight: 1.2,\n  whiteSpace: 'nowrap',\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/pickers/shared/EntityPickerList.js

@@ -1,27 +1,33 @@
 import { useBackofficeReactTranslation as e } from "../../../../i18n/useBackofficeReactTranslation.js";
-import { EntityPickerRowBase as t } from "./EntityPickerRowBase.js";
-import { BackofficeEmptyState as n, Button as r } from "@plumile/ui";
+import { list as t, listItem as n } from "../entityIdPickerDialog.css.js";
+import { EntityPickerRowBase as r } from "./EntityPickerRowBase.js";
 import { jsx as i } from "react/jsx-runtime";
+import { BackofficeEmptyState as a } from "@plumile/ui/backoffice/molecules/backoffice_empty_state/BackofficeEmptyState.js";
 //#region src/components/backoffice/pickers/shared/EntityPickerList.tsx
-var a = ({ items: a, onSelectId: o, emptyState: s }) => {
-	let { t: c } = e();
-	return a.length === 0 ? s ?? /* @__PURE__ */ i(n, {
-		title: c("picker.empty.title"),
-		description: c("picker.empty.description")
-	}) : /* @__PURE__ */ i("div", { children: a.map((e) => /* @__PURE__ */ i(r, {
-		type: "button",
-		variant: "text",
-		onClick: () => {
-			o(e.id);
-		},
-		width: "full",
-		children: /* @__PURE__ */ i(t, {
-			title: e.title,
-			subtitle: e.subtitle
-		})
-	}, e.id)) });
+var o = ({ items: o, onSelectId: s, emptyState: c }) => {
+	let { t: l } = e();
+	return o.length === 0 ? c ?? /* @__PURE__ */ i(a, {
+		title: l("picker.empty.title"),
+		description: l("picker.empty.description")
+	}) : /* @__PURE__ */ i("div", {
+		className: t,
+		role: "listbox",
+		children: o.map((e) => /* @__PURE__ */ i("button", {
+			type: "button",
+			className: n,
+			role: "option",
+			"aria-selected": "false",
+			onClick: () => {
+				s(e.id);
+			},
+			children: /* @__PURE__ */ i(r, {
+				title: e.title,
+				subtitle: e.subtitle
+			})
+		}, e.id))
+	});
 };
 //#endregion
-export { a as EntityPickerList, a as default };
+export { o as EntityPickerList, o as default };
 
 //# sourceMappingURL=EntityPickerList.js.map

package/lib/esm/components/backoffice/pickers/shared/EntityPickerList.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityPickerList.js","names":[],"sources":["../../../../../../src/components/backoffice/pickers/shared/EntityPickerList.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { BackofficeEmptyState, Button } from '@plumile/ui';\n\nimport { useBackofficeReactTranslation } from '../../../../i18n/useBackofficeReactTranslation.js';\nimport { EntityPickerRowBase } from './EntityPickerRowBase.js';\nimport type { EntityPickerRowViewModel } from '../types.js';\n\nexport type EntityPickerListProps = {\n  items: readonly EntityPickerRowViewModel[];\n  onSelectId: (id: string) => void;\n  emptyState?: JSX.Element;\n};\n\nexport const EntityPickerList = ({\n  items,\n  onSelectId,\n  emptyState,\n}: EntityPickerListProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n\n  if (items.length === 0) {\n    return (\n      emptyState ?? (\n        <BackofficeEmptyState\n          title={t('picker.empty.title')}\n          description={t('picker.empty.description')}\n        />\n      )\n    );\n  }\n\n  return (\n    <div>\n      {items.map((item) => {\n        return (\n          <Button\n            key={item.id}\n            type=\"button\"\n            variant=\"text\"\n            onClick={() => {\n              onSelectId(item.id);\n            }}\n            width=\"full\"\n          >\n            <EntityPickerRowBase title={item.title} subtitle={item.subtitle} />\n          </Button>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default EntityPickerList;\n"],"mappings":";;;;;AAcA,IAAa,KAAoB,EAC/B,UACA,eACA,oBACwC;CACxC,IAAM,EAAE,SAAM,GAA+B;CAa7C,OAXI,EAAM,WAAW,IAEjB,KACE,kBAAC,GAAD;EACE,OAAO,EAAE,qBAAqB;EAC9B,aAAa,EAAE,2BAA2B;EAC1C,CAAA,GAMN,kBAAC,OAAD,EAAA,UACG,EAAM,KAAK,MAER,kBAAC,GAAD;EAEE,MAAK;EACL,SAAQ;EACR,eAAe;GACb,EAAW,EAAK,GAAG;;EAErB,OAAM;YAEN,kBAAC,GAAD;GAAqB,OAAO,EAAK;GAAO,UAAU,EAAK;GAAY,CAAA;EAC5D,EATF,EAAK,GASH,CAEX,EACE,CAAA"}
+{"version":3,"file":"EntityPickerList.js","names":[],"sources":["../../../../../../src/components/backoffice/pickers/shared/EntityPickerList.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { BackofficeEmptyState } from '@plumile/ui/backoffice/molecules/backoffice_empty_state/BackofficeEmptyState.js';\n\nimport { useBackofficeReactTranslation } from '../../../../i18n/useBackofficeReactTranslation.js';\nimport { EntityPickerRowBase } from './EntityPickerRowBase.js';\nimport type { EntityPickerRowViewModel } from '../types.js';\nimport * as styles from '../entityIdPickerDialog.css.js';\n\nexport type EntityPickerListProps = {\n  items: readonly EntityPickerRowViewModel[];\n  onSelectId: (id: string) => void;\n  emptyState?: JSX.Element;\n};\n\nexport const EntityPickerList = ({\n  items,\n  onSelectId,\n  emptyState,\n}: EntityPickerListProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n\n  if (items.length === 0) {\n    return (\n      emptyState ?? (\n        <BackofficeEmptyState\n          title={t('picker.empty.title')}\n          description={t('picker.empty.description')}\n        />\n      )\n    );\n  }\n\n  return (\n    <div className={styles.list} role=\"listbox\">\n      {items.map((item) => {\n        return (\n          <button\n            key={item.id}\n            type=\"button\"\n            className={styles.listItem}\n            role=\"option\"\n            aria-selected=\"false\"\n            onClick={() => {\n              onSelectId(item.id);\n            }}\n          >\n            <EntityPickerRowBase title={item.title} subtitle={item.subtitle} />\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default EntityPickerList;\n"],"mappings":";;;;;;AAeA,IAAa,KAAoB,EAC/B,UACA,eACA,oBACwC;CACxC,IAAM,EAAE,SAAM,GAA+B;CAa7C,OAXI,EAAM,WAAW,IAEjB,KACE,kBAAC,GAAD;EACE,OAAO,EAAE,qBAAqB;EAC9B,aAAa,EAAE,2BAA2B;EAC1C,CAAA,GAMN,kBAAC,OAAD;EAAK,WAAW;EAAa,MAAK;YAC/B,EAAM,KAAK,MAER,kBAAC,UAAD;GAEE,MAAK;GACL,WAAW;GACX,MAAK;GACL,iBAAc;GACd,eAAe;IACb,EAAW,EAAK,GAAG;;aAGrB,kBAAC,GAAD;IAAqB,OAAO,EAAK;IAAO,UAAU,EAAK;IAAY,CAAA;GAC5D,EAVF,EAAK,GAUH,CAEX;EACE,CAAA"}

package/lib/esm/components/backoffice/pickers/shared/EntityPickerShell.js

@@ -1,12 +1,12 @@
 import { useBackofficeReactTranslation as e } from "../../../../i18n/useBackofficeReactTranslation.js";
 import { layout as t } from "../entityIdPickerDialog.css.js";
 import { useId as n } from "react";
-import { Input as r } from "@plumile/ui";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Input as a } from "@plumile/ui/atomic/atoms/input/Input.js";
 //#region src/components/backoffice/pickers/shared/EntityPickerShell.tsx
 var o = ({ search: o, onSearchChange: s, searchPlaceholder: c, searchEnabled: l = !0, children: u }) => {
 	let { t: d } = e(), f = n(), p = c ?? d("picker.searchPlaceholder.default"), m = null;
-	return l && (m = /* @__PURE__ */ i(r, {
+	return l && (m = /* @__PURE__ */ r(a, {
 		id: f,
 		name: "backoffice-entity-picker-search",
 		value: o,
@@ -17,7 +17,7 @@ var o = ({ search: o, onSearchChange: s, searchPlaceholder: c, searchEnabled: l
 		"aria-label": p,
 		size: "small",
 		fullWidth: !0
-	})), /* @__PURE__ */ a("div", {
+	})), /* @__PURE__ */ i("div", {
 		className: t,
 		children: [m, u]
 	});

package/lib/esm/components/backoffice/pickers/shared/EntityPickerShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityPickerShell.js","names":[],"sources":["../../../../../../src/components/backoffice/pickers/shared/EntityPickerShell.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useId } from 'react';\n\nimport { Input } from '@plumile/ui';\n\nimport { useBackofficeReactTranslation } from '../../../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from '../entityIdPickerDialog.css.js';\n\nexport type EntityPickerShellProps = {\n  search: string;\n  onSearchChange: (next: string) => void;\n  searchPlaceholder?: string;\n  searchEnabled?: boolean;\n  children: ReactNode;\n};\n\nexport const EntityPickerShell = ({\n  search,\n  onSearchChange,\n  searchPlaceholder,\n  searchEnabled = true,\n  children,\n}: EntityPickerShellProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const searchInputId = useId();\n  const resolvedPlaceholder =\n    searchPlaceholder ?? t('picker.searchPlaceholder.default');\n  let searchNode: JSX.Element | null = null;\n  if (searchEnabled) {\n    searchNode = (\n      <Input\n        id={searchInputId}\n        name=\"backoffice-entity-picker-search\"\n        value={search}\n        onChange={(event) => {\n          onSearchChange(event.target.value);\n        }}\n        placeholder={resolvedPlaceholder}\n        aria-label={resolvedPlaceholder}\n        size=\"small\"\n        fullWidth\n      />\n    );\n  }\n\n  return (\n    <div className={styles.layout}>\n      {searchNode}\n      {children}\n    </div>\n  );\n};\n\nexport default EntityPickerShell;\n"],"mappings":";;;;;;AAgBA,IAAa,KAAqB,EAChC,WACA,mBACA,sBACA,mBAAgB,IAChB,kBACyC;CACzC,IAAM,EAAE,SAAM,GAA+B,EACvC,IAAgB,GAAO,EACvB,IACJ,KAAqB,EAAE,mCAAmC,EACxD,IAAiC;CAkBrC,OAjBI,MACF,IACE,kBAAC,GAAD;EACE,IAAI;EACJ,MAAK;EACL,OAAO;EACP,WAAW,MAAU;GACnB,EAAe,EAAM,OAAO,MAAM;;EAEpC,aAAa;EACb,cAAY;EACZ,MAAK;EACL,WAAA;EACA,CAAA,GAKJ,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACG,GACA,EACG"}
+{"version":3,"file":"EntityPickerShell.js","names":[],"sources":["../../../../../../src/components/backoffice/pickers/shared/EntityPickerShell.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useId } from 'react';\n\nimport { Input } from '@plumile/ui/atomic/atoms/input/Input.js';\n\nimport { useBackofficeReactTranslation } from '../../../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from '../entityIdPickerDialog.css.js';\n\nexport type EntityPickerShellProps = {\n  search: string;\n  onSearchChange: (next: string) => void;\n  searchPlaceholder?: string;\n  searchEnabled?: boolean;\n  children: ReactNode;\n};\n\nexport const EntityPickerShell = ({\n  search,\n  onSearchChange,\n  searchPlaceholder,\n  searchEnabled = true,\n  children,\n}: EntityPickerShellProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const searchInputId = useId();\n  const resolvedPlaceholder =\n    searchPlaceholder ?? t('picker.searchPlaceholder.default');\n  let searchNode: JSX.Element | null = null;\n  if (searchEnabled) {\n    searchNode = (\n      <Input\n        id={searchInputId}\n        name=\"backoffice-entity-picker-search\"\n        value={search}\n        onChange={(event) => {\n          onSearchChange(event.target.value);\n        }}\n        placeholder={resolvedPlaceholder}\n        aria-label={resolvedPlaceholder}\n        size=\"small\"\n        fullWidth\n      />\n    );\n  }\n\n  return (\n    <div className={styles.layout}>\n      {searchNode}\n      {children}\n    </div>\n  );\n};\n\nexport default EntityPickerShell;\n"],"mappings":";;;;;;AAgBA,IAAa,KAAqB,EAChC,WACA,mBACA,sBACA,mBAAgB,IAChB,kBACyC;CACzC,IAAM,EAAE,SAAM,GAA+B,EACvC,IAAgB,GAAO,EACvB,IACJ,KAAqB,EAAE,mCAAmC,EACxD,IAAiC;CAkBrC,OAjBI,MACF,IACE,kBAAC,GAAD;EACE,IAAI;EACJ,MAAK;EACL,OAAO;EACP,WAAW,MAAU;GACnB,EAAe,EAAM,OAAO,MAAM;;EAEpC,aAAa;EACb,cAAY;EACZ,MAAK;EACL,WAAA;EACA,CAAA,GAKJ,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACG,GACA,EACG"}

package/lib/esm/components/backoffice/refs/BackofficeRelatedCountLink.js

@@ -6,7 +6,7 @@ import { count as i, icon as a, link as o } from "./backofficeRelatedCountLink.c
 import { useContext as s } from "react";
 import { jsx as c } from "react/jsx-runtime";
 import { useTranslation as l } from "react-i18next";
-import { RoutingContext as u } from "@plumile/router";
+import u from "@plumile/router/routing/RoutingContext.js";
 import { buildBackofficeListLink as d } from "@plumile/backoffice-core/state/buildListHref.js";
 //#region src/components/backoffice/refs/BackofficeRelatedCountLink.tsx
 var f = ({ count: f, entity: p, where: m }) => {

package/lib/esm/components/backoffice/refs/BackofficeRelatedCountLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeRelatedCountLink.js","names":[],"sources":["../../../../../src/components/backoffice/refs/BackofficeRelatedCountLink.tsx"],"sourcesContent":["import { useContext, type JSX, type MouseEvent } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { RoutingContext } from '@plumile/router';\n\nimport { buildBackofficeListLink } from '@plumile/backoffice-core/state/buildListHref.js';\nimport { useBackofficeConfig } from '../../../provider/BackofficeConfigContext.js';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { BackofficeInlineLink } from '../links/BackofficeInlineLink.js';\nimport { resolveBackofficeLink } from '../links/resolveBackofficeLink.js';\nimport type { BackofficeLinkTarget } from '../links/types.js';\n\nimport * as styles from './backofficeRelatedCountLink.css.js';\n\nexport type BackofficeRelatedCountLinkProps<\n  Where extends Record<string, unknown> = Record<string, unknown>,\n> = {\n  count: number | null | undefined;\n  entity: string;\n  where: Where;\n};\n\nexport const BackofficeRelatedCountLink = <\n  Where extends Record<string, unknown> = Record<string, unknown>,\n>({\n  count,\n  entity,\n  where,\n}: BackofficeRelatedCountLinkProps<Where>): JSX.Element => {\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const { entities, entityManifest, entityRegistry, sidebar } =\n    useBackofficeConfig();\n  const routing = useContext(RoutingContext);\n  let resolvedCount = 0;\n  if (typeof count === 'number' && Number.isFinite(count)) {\n    resolvedCount = count;\n  }\n  const targetManifest = entities[entity];\n  if (targetManifest == null) {\n    return <span>{resolvedCount}</span>;\n  }\n  const entityLabel = targetManifest.label(tApp);\n  const actionLabel = t('relations.openFilteredList', {\n    label: entityLabel,\n  });\n  const loadedEntity = entityRegistry.getLoadedListEntity(entity);\n  const target = {\n    kind: 'entity-list',\n    entityId: entity,\n    state: { where },\n  } as BackofficeLinkTarget;\n\n  const navigateWithLoadedEntity = async (\n    history: NonNullable<typeof routing>['history'],\n  ): Promise<void> => {\n    const listEntity = await entityRegistry.loadListEntity(entity);\n    const next = buildBackofficeListLink(listEntity.config, { where });\n\n    let search = '';\n    if (next.search !== '') {\n      search = `?${next.search}`;\n    }\n\n    history.push({\n      pathname: next.pathname,\n      search,\n      hash: '',\n    });\n  };\n\n  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {\n    if (\n      loadedEntity != null ||\n      routing == null ||\n      event.defaultPrevented ||\n      event.button !== 0 ||\n      event.metaKey ||\n      event.altKey ||\n      event.ctrlKey ||\n      event.shiftKey\n    ) {\n      return;\n    }\n\n    event.preventDefault();\n    const { history } = routing;\n    navigateWithLoadedEntity(history).catch(() => {\n      const link = resolveBackofficeLink({\n        target,\n        manifest: entityManifest,\n        sidebar,\n        tApp,\n      });\n      const fallbackUrl = new URL(link.href, window.location.origin);\n      history.push({\n        pathname: fallbackUrl.pathname,\n        search: fallbackUrl.search,\n        hash: fallbackUrl.hash,\n      });\n    });\n  };\n\n  return (\n    <BackofficeInlineLink\n      target={target}\n      className={styles.link}\n      title={actionLabel}\n      ariaLabel={actionLabel}\n      onClick={handleClick}\n      endAdornment={\n        <span className={styles.icon} aria-hidden=\"true\">\n          ›\n        </span>\n      }\n    >\n      <span className={styles.count}>{resolvedCount}</span>\n    </BackofficeInlineLink>\n  );\n};\n\nexport default BackofficeRelatedCountLink;\n"],"mappings":";;;;;;;;;;;AAqBA,IAAa,KAEX,EACA,OAAA,GACA,WACA,eACyD;CACzD,IAAM,EAAE,GAAG,MAAS,GAAgB,EAC9B,EAAE,SAAM,GAA+B,EACvC,EAAE,aAAU,mBAAgB,mBAAgB,eAChD,GAAqB,EACjB,IAAU,EAAW,EAAe,EACtC,IAAgB;CACpB,AAAI,OAAO,KAAU,YAAY,OAAO,SAAS,EAAM,KACrD,IAAgB;CAElB,IAAM,IAAiB,EAAS;CAChC,IAAI,KAAkB,MACpB,OAAO,kBAAC,QAAD,EAAA,UAAO,GAAqB,CAAA;CAGrC,IAAM,IAAc,EAAE,8BAA8B,EAClD,OAFkB,EAAe,MAAM,EAEhC,EACR,CAAC,EACI,IAAe,EAAe,oBAAoB,EAAO,EACzD,IAAS;EACb,MAAM;EACN,UAAU;EACV,OAAO,EAAE,UAAO;EACjB,EAEK,IAA2B,OAC/B,MACkB;EAElB,IAAM,IAAO,GAAwB,MADZ,EAAe,eAAe,EAAO,EACd,QAAQ,EAAE,UAAO,CAAC,EAE9D,IAAS;EAKb,AAJI,EAAK,WAAW,OAClB,IAAS,IAAI,EAAK,WAGpB,EAAQ,KAAK;GACX,UAAU,EAAK;GACf;GACA,MAAM;GACP,CAAC;;CAmCJ,OACE,kBAAC,GAAD;EACU;EACR,WAAW;EACX,OAAO;EACP,WAAW;EACX,UAtCiB,MAAyC;GAC5D,IACE,KAAgB,QAChB,KAAW,QACX,EAAM,oBACN,EAAM,WAAW,KACjB,EAAM,WACN,EAAM,UACN,EAAM,WACN,EAAM,UAEN;GAGF,EAAM,gBAAgB;GACtB,IAAM,EAAE,eAAY;GACpB,EAAyB,EAAQ,CAAC,YAAY;IAC5C,IAAM,IAAO,EAAsB;KACjC;KACA,UAAU;KACV;KACA;KACD,CAAC,EACI,IAAc,IAAI,IAAI,EAAK,MAAM,OAAO,SAAS,OAAO;IAC9D,EAAQ,KAAK;KACX,UAAU,EAAY;KACtB,QAAQ,EAAY;KACpB,MAAM,EAAY;KACnB,CAAC;KACF;;EAUA,cACE,kBAAC,QAAD;GAAM,WAAW;GAAa,eAAY;aAAO;GAE1C,CAAA;YAGT,kBAAC,QAAD;GAAM,WAAW;aAAe;GAAqB,CAAA;EAChC,CAAA"}
+{"version":3,"file":"BackofficeRelatedCountLink.js","names":[],"sources":["../../../../../src/components/backoffice/refs/BackofficeRelatedCountLink.tsx"],"sourcesContent":["import { useContext, type JSX, type MouseEvent } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport RoutingContext from '@plumile/router/routing/RoutingContext.js';\n\nimport { buildBackofficeListLink } from '@plumile/backoffice-core/state/buildListHref.js';\nimport { useBackofficeConfig } from '../../../provider/BackofficeConfigContext.js';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { BackofficeInlineLink } from '../links/BackofficeInlineLink.js';\nimport { resolveBackofficeLink } from '../links/resolveBackofficeLink.js';\nimport type { BackofficeLinkTarget } from '../links/types.js';\n\nimport * as styles from './backofficeRelatedCountLink.css.js';\n\nexport type BackofficeRelatedCountLinkProps<\n  Where extends Record<string, unknown> = Record<string, unknown>,\n> = {\n  count: number | null | undefined;\n  entity: string;\n  where: Where;\n};\n\nexport const BackofficeRelatedCountLink = <\n  Where extends Record<string, unknown> = Record<string, unknown>,\n>({\n  count,\n  entity,\n  where,\n}: BackofficeRelatedCountLinkProps<Where>): JSX.Element => {\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const { entities, entityManifest, entityRegistry, sidebar } =\n    useBackofficeConfig();\n  const routing = useContext(RoutingContext);\n  let resolvedCount = 0;\n  if (typeof count === 'number' && Number.isFinite(count)) {\n    resolvedCount = count;\n  }\n  const targetManifest = entities[entity];\n  if (targetManifest == null) {\n    return <span>{resolvedCount}</span>;\n  }\n  const entityLabel = targetManifest.label(tApp);\n  const actionLabel = t('relations.openFilteredList', {\n    label: entityLabel,\n  });\n  const loadedEntity = entityRegistry.getLoadedListEntity(entity);\n  const target = {\n    kind: 'entity-list',\n    entityId: entity,\n    state: { where },\n  } as BackofficeLinkTarget;\n\n  const navigateWithLoadedEntity = async (\n    history: NonNullable<typeof routing>['history'],\n  ): Promise<void> => {\n    const listEntity = await entityRegistry.loadListEntity(entity);\n    const next = buildBackofficeListLink(listEntity.config, { where });\n\n    let search = '';\n    if (next.search !== '') {\n      search = `?${next.search}`;\n    }\n\n    history.push({\n      pathname: next.pathname,\n      search,\n      hash: '',\n    });\n  };\n\n  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {\n    if (\n      loadedEntity != null ||\n      routing == null ||\n      event.defaultPrevented ||\n      event.button !== 0 ||\n      event.metaKey ||\n      event.altKey ||\n      event.ctrlKey ||\n      event.shiftKey\n    ) {\n      return;\n    }\n\n    event.preventDefault();\n    const { history } = routing;\n    navigateWithLoadedEntity(history).catch(() => {\n      const link = resolveBackofficeLink({\n        target,\n        manifest: entityManifest,\n        sidebar,\n        tApp,\n      });\n      const fallbackUrl = new URL(link.href, window.location.origin);\n      history.push({\n        pathname: fallbackUrl.pathname,\n        search: fallbackUrl.search,\n        hash: fallbackUrl.hash,\n      });\n    });\n  };\n\n  return (\n    <BackofficeInlineLink\n      target={target}\n      className={styles.link}\n      title={actionLabel}\n      ariaLabel={actionLabel}\n      onClick={handleClick}\n      endAdornment={\n        <span className={styles.icon} aria-hidden=\"true\">\n          ›\n        </span>\n      }\n    >\n      <span className={styles.count}>{resolvedCount}</span>\n    </BackofficeInlineLink>\n  );\n};\n\nexport default BackofficeRelatedCountLink;\n"],"mappings":";;;;;;;;;;;AAqBA,IAAa,KAEX,EACA,OAAA,GACA,WACA,eACyD;CACzD,IAAM,EAAE,GAAG,MAAS,GAAgB,EAC9B,EAAE,SAAM,GAA+B,EACvC,EAAE,aAAU,mBAAgB,mBAAgB,eAChD,GAAqB,EACjB,IAAU,EAAW,EAAe,EACtC,IAAgB;CACpB,AAAI,OAAO,KAAU,YAAY,OAAO,SAAS,EAAM,KACrD,IAAgB;CAElB,IAAM,IAAiB,EAAS;CAChC,IAAI,KAAkB,MACpB,OAAO,kBAAC,QAAD,EAAA,UAAO,GAAqB,CAAA;CAGrC,IAAM,IAAc,EAAE,8BAA8B,EAClD,OAFkB,EAAe,MAAM,EAEhC,EACR,CAAC,EACI,IAAe,EAAe,oBAAoB,EAAO,EACzD,IAAS;EACb,MAAM;EACN,UAAU;EACV,OAAO,EAAE,UAAO;EACjB,EAEK,IAA2B,OAC/B,MACkB;EAElB,IAAM,IAAO,GAAwB,MADZ,EAAe,eAAe,EAAO,EACd,QAAQ,EAAE,UAAO,CAAC,EAE9D,IAAS;EAKb,AAJI,EAAK,WAAW,OAClB,IAAS,IAAI,EAAK,WAGpB,EAAQ,KAAK;GACX,UAAU,EAAK;GACf;GACA,MAAM;GACP,CAAC;;CAmCJ,OACE,kBAAC,GAAD;EACU;EACR,WAAW;EACX,OAAO;EACP,WAAW;EACX,UAtCiB,MAAyC;GAC5D,IACE,KAAgB,QAChB,KAAW,QACX,EAAM,oBACN,EAAM,WAAW,KACjB,EAAM,WACN,EAAM,UACN,EAAM,WACN,EAAM,UAEN;GAGF,EAAM,gBAAgB;GACtB,IAAM,EAAE,eAAY;GACpB,EAAyB,EAAQ,CAAC,YAAY;IAC5C,IAAM,IAAO,EAAsB;KACjC;KACA,UAAU;KACV;KACA;KACD,CAAC,EACI,IAAc,IAAI,IAAI,EAAK,MAAM,OAAO,SAAS,OAAO;IAC9D,EAAQ,KAAK;KACX,UAAU,EAAY;KACtB,QAAQ,EAAY;KACpB,MAAM,EAAY;KACnB,CAAC;KACF;;EAUA,cACE,kBAAC,QAAD;GAAM,WAAW;GAAa,eAAY;aAAO;GAE1C,CAAA;YAGT,kBAAC,QAAD;GAAM,WAAW;aAAe;GAAqB,CAAA;EAChC,CAAA"}

package/lib/esm/components/backoffice/refs/backofficeEntityIdRef.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeEntityIdRef.css.js","names":[],"sources":["../../../../../src/components/backoffice/refs/backofficeEntityIdRef.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui';\n\nexport const link = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: 1,\n    color: 'text',\n    textDecoration: 'none',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        textDecoration: 'underline',\n      },\n    },\n  },\n]);\n"],"mappings":""}
+{"version":3,"file":"backofficeEntityIdRef.css.js","names":[],"sources":["../../../../../src/components/backoffice/refs/backofficeEntityIdRef.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const link = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: 1,\n    color: 'text',\n    textDecoration: 'none',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        textDecoration: 'underline',\n      },\n    },\n  },\n]);\n"],"mappings":""}

package/lib/esm/components/backoffice/refs/backofficeRelatedCountLink.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeRelatedCountLink.css.js","names":[],"sources":["../../../../../src/components/backoffice/refs/backofficeRelatedCountLink.css.ts"],"sourcesContent":["import { sprinkles, vars } from '@plumile/ui';\nimport { style } from '@vanilla-extract/css';\n\nexport const link = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: 1,\n    minWidth: 9,\n    paddingX: 2,\n    paddingY: 1,\n    color: 'text',\n    backgroundColor: 'surfaceSecondary',\n    borderColor: 'borderSubtle',\n    borderStyle: 'solid',\n    borderWidth: 'px',\n    borderRadius: 'full',\n    fontWeight: 'semibold',\n    lineHeight: 'none',\n    textDecoration: 'none',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        color: vars.colors.brandPrimaryRed,\n        backgroundColor: vars.colors.surface,\n        borderColor: vars.colors.brandPrimaryRed,\n        boxShadow: vars.boxShadow.sm,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const count = sprinkles({\n  minWidth: 2,\n  textAlign: 'center',\n  fontVariantNumeric: 'tabular-nums',\n});\n\nexport const icon = style([\n  sprinkles({\n    flexShrink: 0,\n    color: 'textSecondary',\n    fontSize: 'sm',\n    lineHeight: 'none',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      [`${link}:hover &`]: {\n        color: vars.colors.brandPrimaryRed,\n      },\n    },\n  },\n]);\n"],"mappings":""}
+{"version":3,"file":"backofficeRelatedCountLink.css.js","names":[],"sources":["../../../../../src/components/backoffice/refs/backofficeRelatedCountLink.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\nimport { vars } from '@plumile/ui/theme/themeContract.js';\nimport { style } from '@vanilla-extract/css';\n\nexport const link = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: 1,\n    minWidth: 9,\n    paddingX: 2,\n    paddingY: 1,\n    color: 'text',\n    backgroundColor: 'surfaceSecondary',\n    borderColor: 'borderSubtle',\n    borderStyle: 'solid',\n    borderWidth: 'px',\n    borderRadius: 'full',\n    fontWeight: 'semibold',\n    lineHeight: 'none',\n    textDecoration: 'none',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        color: vars.colors.brandPrimaryRed,\n        backgroundColor: vars.colors.surface,\n        borderColor: vars.colors.brandPrimaryRed,\n        boxShadow: vars.boxShadow.sm,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const count = sprinkles({\n  minWidth: 2,\n  textAlign: 'center',\n  fontVariantNumeric: 'tabular-nums',\n});\n\nexport const icon = style([\n  sprinkles({\n    flexShrink: 0,\n    color: 'textSecondary',\n    fontSize: 'sm',\n    lineHeight: 'none',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      [`${link}:hover &`]: {\n        color: vars.colors.brandPrimaryRed,\n      },\n    },\n  },\n]);\n"],"mappings":""}

package/lib/esm/components/backoffice/routing/BackofficeContentError.js

@@ -1,16 +1,17 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
 import { banner as t, root as n } from "./backofficeContentError.css.js";
-import { Button as r, InlineBanner as i } from "@plumile/ui";
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
+import { Button as i } from "@plumile/ui/atomic/atoms/button/Button.js";
+import { InlineBanner as a } from "@plumile/ui/backoffice/molecules/inline_banner/InlineBanner.js";
 //#region src/components/backoffice/routing/BackofficeContentError.tsx
 var o = ({ onRetry: o }) => {
 	let { t: s } = e();
-	return /* @__PURE__ */ a("div", {
+	return /* @__PURE__ */ r("div", {
 		className: n,
-		children: /* @__PURE__ */ a(i, {
+		children: /* @__PURE__ */ r(a, {
 			tone: "danger",
 			className: t,
-			actions: /* @__PURE__ */ a(r, {
+			actions: /* @__PURE__ */ r(i, {
 				type: "button",
 				variant: "secondary",
 				size: "small",

package/lib/esm/components/backoffice/routing/BackofficeContentError.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeContentError.js","names":[],"sources":["../../../../../src/components/backoffice/routing/BackofficeContentError.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { Button, InlineBanner } from '@plumile/ui';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './backofficeContentError.css.js';\n\ntype BackofficeContentErrorProps = {\n  error: unknown;\n  onRetry: () => void;\n};\n\nexport const BackofficeContentError = ({\n  onRetry,\n}: BackofficeContentErrorProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n\n  return (\n    <div className={styles.root}>\n      <InlineBanner\n        tone=\"danger\"\n        className={styles.banner}\n        actions={\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            size=\"small\"\n            onClick={onRetry}\n          >\n            {t('common.actions.retry')}\n          </Button>\n        }\n      >\n        {t('common.errors.unexpected')}\n      </InlineBanner>\n    </div>\n  );\n};\n\nexport default BackofficeContentError;\n"],"mappings":";;;;;AAYA,IAAa,KAA0B,EACrC,iBAC8C;CAC9C,IAAM,EAAE,SAAM,GAA+B;CAE7C,OACE,kBAAC,OAAD;EAAK,WAAW;YACd,kBAAC,GAAD;GACE,MAAK;GACL,WAAW;GACX,SACE,kBAAC,GAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,SAAS;cAER,EAAE,uBAAuB;IACnB,CAAA;aAGV,EAAE,2BAA2B;GACjB,CAAA;EACX,CAAA"}
+{"version":3,"file":"BackofficeContentError.js","names":[],"sources":["../../../../../src/components/backoffice/routing/BackofficeContentError.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { InlineBanner } from '@plumile/ui/backoffice/molecules/inline_banner/InlineBanner.js';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './backofficeContentError.css.js';\n\ntype BackofficeContentErrorProps = {\n  error: unknown;\n  onRetry: () => void;\n};\n\nexport const BackofficeContentError = ({\n  onRetry,\n}: BackofficeContentErrorProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n\n  return (\n    <div className={styles.root}>\n      <InlineBanner\n        tone=\"danger\"\n        className={styles.banner}\n        actions={\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            size=\"small\"\n            onClick={onRetry}\n          >\n            {t('common.actions.retry')}\n          </Button>\n        }\n      >\n        {t('common.errors.unexpected')}\n      </InlineBanner>\n    </div>\n  );\n};\n\nexport default BackofficeContentError;\n"],"mappings":";;;;;;AAaA,IAAa,KAA0B,EACrC,iBAC8C;CAC9C,IAAM,EAAE,SAAM,GAA+B;CAE7C,OACE,kBAAC,OAAD;EAAK,WAAW;YACd,kBAAC,GAAD;GACE,MAAK;GACL,WAAW;GACX,SACE,kBAAC,GAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,SAAS;cAER,EAAE,uBAAuB;IACnB,CAAA;aAGV,EAAE,2BAA2B;GACjB,CAAA;EACX,CAAA"}

package/lib/esm/components/backoffice/routing/BackofficeContentFallback.js

@@ -1,37 +1,37 @@
 import { card as e, container as t, grid as n, title as r } from "./backofficeContentFallback.css.js";
-import { Skeleton as i } from "@plumile/ui";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Skeleton as o } from "@plumile/ui/backoffice/atoms/skeleton/Skeleton.js";
 //#region src/components/backoffice/routing/BackofficeContentFallback.tsx
-var s = () => /* @__PURE__ */ o("div", {
+var s = () => /* @__PURE__ */ a("div", {
 	className: t,
 	role: "status",
 	"aria-live": "polite",
 	"aria-busy": "true",
 	children: [
-		/* @__PURE__ */ a(i, {
+		/* @__PURE__ */ i(o, {
 			variant: "text",
 			width: "38%",
 			className: r
 		}),
-		/* @__PURE__ */ a(i, {
+		/* @__PURE__ */ i(o, {
 			variant: "text",
 			width: "62%"
 		}),
-		/* @__PURE__ */ a("div", {
+		/* @__PURE__ */ i("div", {
 			className: n,
-			children: Array.from({ length: 4 }, (t, n) => /* @__PURE__ */ o("div", {
+			children: Array.from({ length: 4 }, (t, n) => /* @__PURE__ */ a("div", {
 				className: e,
 				children: [
-					/* @__PURE__ */ a(i, {
+					/* @__PURE__ */ i(o, {
 						variant: "text",
 						width: "46%"
 					}),
-					/* @__PURE__ */ a(i, {
+					/* @__PURE__ */ i(o, {
 						variant: "text",
 						width: "82%",
 						lines: 2
 					}),
-					/* @__PURE__ */ a(i, {
+					/* @__PURE__ */ i(o, {
 						variant: "block",
 						width: "100%",
 						height: 120