@plumile/backoffice-react 0.1.108 → 0.1.112

package/lib/esm/components/backoffice/detail/backofficeDetailSection.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeDetailSection.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeDetailSection.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui';\n\nexport const section = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n  padding: 3,\n  borderRadius: 'md',\n  backgroundColor: 'surfaceSecondary',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderLight',\n  boxShadow: 'none',\n});\n\nexport const header = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n});\n\nexport const title = sprinkles({\n  fontSize: 'base',\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const description = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n\nexport const grid = sprinkles({\n  display: 'grid',\n  gap: 3,\n  gridTemplateColumns: 'autoFitMinmax220',\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeDetailSection.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeDetailSection.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const section = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n  padding: 3,\n  borderRadius: 'md',\n  backgroundColor: 'surfaceSecondary',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderLight',\n  boxShadow: 'none',\n});\n\nexport const header = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n});\n\nexport const title = sprinkles({\n  fontSize: 'base',\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const description = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n\nexport const grid = sprinkles({\n  display: 'grid',\n  gap: 3,\n  gridTemplateColumns: 'autoFitMinmax220',\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/detail/backofficeDetailTaggedValue.css.js.map

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

package/lib/esm/components/backoffice/detail/backofficeEntitySummaryHeader.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeEntitySummaryHeader.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeEntitySummaryHeader.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui';\n\nexport const root = style([\n  sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 4,\n    padding: 4,\n    borderRadius: 'lg',\n    backgroundColor: 'surface',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'borderLight',\n  }),\n]);\n\nexport const top = sprinkles({\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'flex-start',\n  gap: 4,\n  flexWrap: 'wrap',\n});\n\nexport const identity = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  minWidth: 0,\n});\n\nexport const titleRow = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  flexWrap: 'wrap',\n});\n\nexport const title = sprinkles({\n  fontSize: '2xl',\n  lineHeight: 'tight',\n  fontWeight: 'semibold',\n  color: 'text',\n  overflowWrap: 'anywhere',\n});\n\nexport const subtitle = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n  overflowWrap: 'anywhere',\n});\n\nexport const actions = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  gap: 2,\n  flexWrap: 'wrap',\n});\n\nexport const meta = sprinkles({\n  display: 'grid',\n  gap: 3,\n  gridTemplateColumns: 'autoFitMinmax180',\n});\n\nexport const metaItem = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  minWidth: 0,\n});\n\nexport const metaLabel = sprinkles({\n  fontSize: 'xs',\n  textTransform: 'uppercase',\n  letterSpacing: 'capsTight',\n  color: 'textSecondary',\n});\n\nexport const metaValue = sprinkles({\n  fontSize: 'sm',\n  color: 'text',\n  overflowWrap: 'anywhere',\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeEntitySummaryHeader.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeEntitySummaryHeader.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const root = style([\n  sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 4,\n    padding: 4,\n    borderRadius: 'lg',\n    backgroundColor: 'surface',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'borderLight',\n  }),\n]);\n\nexport const top = sprinkles({\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'flex-start',\n  gap: 4,\n  flexWrap: 'wrap',\n});\n\nexport const identity = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  minWidth: 0,\n});\n\nexport const titleRow = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  flexWrap: 'wrap',\n});\n\nexport const title = sprinkles({\n  fontSize: '2xl',\n  lineHeight: 'tight',\n  fontWeight: 'semibold',\n  color: 'text',\n  overflowWrap: 'anywhere',\n});\n\nexport const subtitle = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n  overflowWrap: 'anywhere',\n});\n\nexport const actions = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  gap: 2,\n  flexWrap: 'wrap',\n});\n\nexport const meta = sprinkles({\n  display: 'grid',\n  gap: 3,\n  gridTemplateColumns: 'autoFitMinmax180',\n});\n\nexport const metaItem = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  minWidth: 0,\n});\n\nexport const metaLabel = sprinkles({\n  fontSize: 'xs',\n  textTransform: 'uppercase',\n  letterSpacing: 'capsTight',\n  color: 'textSecondary',\n});\n\nexport const metaValue = sprinkles({\n  fontSize: 'sm',\n  color: 'text',\n  overflowWrap: 'anywhere',\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/detail/backofficeKpiStrip.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeKpiStrip.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeKpiStrip.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui';\n\nexport const group = sprinkles({\n  display: 'grid',\n  gap: 3,\n  gridTemplateColumns: 'autoFitMinmax180',\n});\n\nexport const compactGroup = sprinkles({\n  gap: 2,\n});\n\nexport const card = style({\n  minWidth: 0,\n});\n\nexport const value = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeKpiStrip.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeKpiStrip.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const group = sprinkles({\n  display: 'grid',\n  gap: 3,\n  gridTemplateColumns: 'autoFitMinmax180',\n});\n\nexport const compactGroup = sprinkles({\n  gap: 2,\n});\n\nexport const card = style({\n  minWidth: 0,\n});\n\nexport const value = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/detail/backofficeLifecycleTimelineSection.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeLifecycleTimelineSection.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeLifecycleTimelineSection.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui';\n\nexport const eventMeta = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n});\n\nexport const actor = sprinkles({\n  color: 'textSecondary',\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeLifecycleTimelineSection.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeLifecycleTimelineSection.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const eventMeta = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n});\n\nexport const actor = sprinkles({\n  color: 'textSecondary',\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/detail/backofficePayloadInspectorSection.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficePayloadInspectorSection.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficePayloadInspectorSection.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui';\n\nexport const details = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const summary = style([\n  sprinkles({\n    cursor: 'pointer',\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    color: 'primary',\n  }),\n]);\n\nexport const preview = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n  overflowWrap: 'anywhere',\n});\n"],"mappings":""}
+{"version":3,"file":"backofficePayloadInspectorSection.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficePayloadInspectorSection.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const details = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const summary = style([\n  sprinkles({\n    cursor: 'pointer',\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    color: 'primary',\n  }),\n]);\n\nexport const preview = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n  overflowWrap: 'anywhere',\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/detail/backofficeReferenceValue.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeReferenceValue.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeReferenceValue.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui';\n\nexport const root = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 2,\n  minWidth: 0,\n});\n\nexport const value = sprinkles({\n  minWidth: 0,\n  overflowWrap: 'anywhere',\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeReferenceValue.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeReferenceValue.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const root = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 2,\n  minWidth: 0,\n});\n\nexport const value = sprinkles({\n  minWidth: 0,\n  overflowWrap: 'anywhere',\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/detail/backofficeRelationsSummaryGrid.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeRelationsSummaryGrid.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeRelationsSummaryGrid.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui';\n\nexport const grid = sprinkles({\n  display: 'grid',\n  gap: 3,\n  gridTemplateColumns: 'autoFitMinmax180',\n});\n\nexport const item = style([\n  sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 1,\n    padding: 3,\n    borderRadius: 'md',\n    backgroundColor: 'surface',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'borderLight',\n    minWidth: 0,\n  }),\n]);\n\nexport const label = sprinkles({\n  fontSize: 'xs',\n  textTransform: 'uppercase',\n  letterSpacing: 'capsTight',\n  color: 'textSecondary',\n});\n\nexport const count = sprinkles({\n  fontSize: 'xl',\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const description = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n  overflowWrap: 'anywhere',\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeRelationsSummaryGrid.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeRelationsSummaryGrid.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const grid = sprinkles({\n  display: 'grid',\n  gap: 3,\n  gridTemplateColumns: 'autoFitMinmax180',\n});\n\nexport const item = style([\n  sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 1,\n    padding: 3,\n    borderRadius: 'md',\n    backgroundColor: 'surface',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'borderLight',\n    minWidth: 0,\n  }),\n]);\n\nexport const label = sprinkles({\n  fontSize: 'xs',\n  textTransform: 'uppercase',\n  letterSpacing: 'capsTight',\n  color: 'textSecondary',\n});\n\nexport const count = sprinkles({\n  fontSize: 'xl',\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const description = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n  overflowWrap: 'anywhere',\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/detail/backofficeScopeStack.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeScopeStack.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeScopeStack.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui';\n\nexport const list = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const item = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  minWidth: 0,\n});\n\nexport const label = sprinkles({\n  fontSize: 'xs',\n  textTransform: 'uppercase',\n  letterSpacing: 'capsTight',\n  color: 'textSecondary',\n});\n\nexport const value = sprinkles({\n  fontSize: 'sm',\n  color: 'text',\n  overflowWrap: 'anywhere',\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeScopeStack.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeScopeStack.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const list = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const item = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  minWidth: 0,\n});\n\nexport const label = sprinkles({\n  fontSize: 'xs',\n  textTransform: 'uppercase',\n  letterSpacing: 'capsTight',\n  color: 'textSecondary',\n});\n\nexport const value = sprinkles({\n  fontSize: 'sm',\n  color: 'text',\n  overflowWrap: 'anywhere',\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/detail/backofficeStatusMetaBadge.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeStatusMetaBadge.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeStatusMetaBadge.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui';\n\nexport const badge = sprinkles({\n  width: 'fit',\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeStatusMetaBadge.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeStatusMetaBadge.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const badge = sprinkles({\n  width: 'fit',\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/detail/backofficeUsageCostBreakdown.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeUsageCostBreakdown.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeUsageCostBreakdown.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui';\n\nexport const content = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const table = sprinkles({\n  display: 'grid',\n  gap: 2,\n});\n\nexport const row = style([\n  sprinkles({\n    display: 'grid',\n    gap: 3,\n    alignItems: 'center',\n  }),\n  {\n    gridTemplateColumns: 'minmax(0, 1fr) repeat(4, minmax(0, auto))',\n  },\n]);\n\nexport const header = sprinkles({\n  fontSize: 'xs',\n  textTransform: 'uppercase',\n  letterSpacing: 'capsTight',\n  color: 'textSecondary',\n});\n\nexport const cell = sprinkles({\n  fontSize: 'sm',\n  color: 'text',\n  overflowWrap: 'anywhere',\n});\n\nexport const label = sprinkles({\n  fontWeight: 'medium',\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeUsageCostBreakdown.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeUsageCostBreakdown.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const content = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const table = sprinkles({\n  display: 'grid',\n  gap: 2,\n});\n\nexport const row = style([\n  sprinkles({\n    display: 'grid',\n    gap: 3,\n    alignItems: 'center',\n  }),\n  {\n    gridTemplateColumns: 'minmax(0, 1fr) repeat(4, minmax(0, auto))',\n  },\n]);\n\nexport const header = sprinkles({\n  fontSize: 'xs',\n  textTransform: 'uppercase',\n  letterSpacing: 'capsTight',\n  color: 'textSecondary',\n});\n\nexport const cell = sprinkles({\n  fontSize: 'sm',\n  color: 'text',\n  overflowWrap: 'anywhere',\n});\n\nexport const label = sprinkles({\n  fontWeight: 'medium',\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/filters/BackofficeFilterAction.js

@@ -3,25 +3,25 @@ import { useBackofficeConfig as t } from "../../../provider/BackofficeConfigCont
 import { useBackofficeListFilterContext as n } from "../scaffolds/BackofficeListFilterContext.js";
 import { canFilterValue as r, resolveFilterForColumn as i, resolveFilterForWhereKey as a } from "../../../filters/filterHelpers.js";
 import { action as o, icon as s } from "./backofficeFilterAction.css.js";
-import { SidebarSearchSvg as c } from "@plumile/ui";
-import { jsx as l } from "react/jsx-runtime";
-import { useTranslation as u } from "react-i18next";
-import { Link as d } from "@plumile/router";
-import { buildBackofficeListLink as f } from "@plumile/backoffice-core/state/buildListHref.js";
-import { setWhereValue as p } from "@plumile/backoffice-core/filters/where.js";
+import { jsx as c } from "react/jsx-runtime";
+import { useTranslation as l } from "react-i18next";
+import u from "@plumile/router/routing/Link.js";
+import { buildBackofficeListLink as d } from "@plumile/backoffice-core/state/buildListHref.js";
+import { setWhereValue as f } from "@plumile/backoffice-core/filters/where.js";
+import { SidebarSearchSvg as p } from "@plumile/ui/icons/SidebarSearchSvg.js";
 //#region src/components/backoffice/filters/BackofficeFilterAction.tsx
 var m = (e, t) => e(t), h = (h) => {
-	let { t: g } = u(), { t: _ } = e(), { filterColumnAliases: v } = t(), { whereKey: y, value: b, path: x, label: S, listConfig: C } = h, w = n(), T = null;
+	let { t: g } = l(), { t: _ } = e(), { filterColumnAliases: v } = t(), { whereKey: y, value: b, path: x, label: S, listConfig: C } = h, w = n(), T = null;
 	if (C == null ? w != null && (T = w.config) : T = C, T == null) return null;
 	let E = a(T, y, x);
 	if (E == null && x == null && (E = i(T, y, v)), E == null || !r(E, b)) return null;
-	let D = m(E.label, g), O = S ?? _("filters.actions.filterBy", { label: D }), k = /* @__PURE__ */ l(c, {
+	let D = m(E.label, g), O = S ?? _("filters.actions.filterBy", { label: D }), k = /* @__PURE__ */ c(p, {
 		width: 14,
 		height: 14,
 		className: s,
 		"aria-hidden": "true"
 	});
-	if (w != null) return /* @__PURE__ */ l("button", {
+	if (w != null) return /* @__PURE__ */ c("button", {
 		type: "button",
 		className: o,
 		title: O,
@@ -31,9 +31,9 @@ var m = (e, t) => e(t), h = (h) => {
 		},
 		children: k
 	});
-	let A = p(T.listDefaults?.where ?? T.list.defaultState?.where ?? null, y, b, x);
-	return /* @__PURE__ */ l(d, {
-		to: f(T, { where: A }),
+	let A = f(T.listDefaults?.where ?? T.list.defaultState?.where ?? null, y, b, x);
+	return /* @__PURE__ */ c(u, {
+		to: d(T, { where: A }),
 		className: o,
 		title: O,
 		"aria-label": O,

package/lib/esm/components/backoffice/filters/BackofficeFilterAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeFilterAction.js","names":[],"sources":["../../../../../src/components/backoffice/filters/BackofficeFilterAction.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Link } from '@plumile/router';\nimport { SidebarSearchSvg } from '@plumile/ui';\n\nimport type {\n  BackofficeRuntimeResolvedListFacetConfig,\n  I18nLabel,\n} from '@plumile/backoffice-core/types.js';\nimport type { TFunction } from 'i18next';\nimport { buildBackofficeListLink } from '@plumile/backoffice-core/state/buildListHref.js';\nimport { setWhereValue } from '@plumile/backoffice-core/filters/where.js';\n\nimport {\n  canFilterValue,\n  resolveFilterForColumn,\n  resolveFilterForWhereKey,\n} from '../../../filters/filterHelpers.js';\nimport { useBackofficeConfig } from '../../../provider/BackofficeConfigContext.js';\nimport { useBackofficeListFilterContext } from '../scaffolds/BackofficeListFilterContext.js';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './backofficeFilterAction.css.js';\n\nexport type BackofficeFilterActionProps = {\n  whereKey: string;\n  value: unknown;\n  path?: readonly string[];\n  label?: string;\n  listConfig?: BackofficeRuntimeResolvedListFacetConfig;\n};\n\ntype ListFilterContext = {\n  config: BackofficeRuntimeResolvedListFacetConfig;\n  applyFilter: (\n    whereKey: string,\n    value: unknown,\n    path?: readonly string[],\n  ) => void;\n};\n\nconst resolveLabel = (label: I18nLabel, tApp: TFunction): string => {\n  return label(tApp);\n};\n\nexport const BackofficeFilterAction = (\n  props: BackofficeFilterActionProps,\n): JSX.Element | null => {\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const { filterColumnAliases } = useBackofficeConfig();\n  const { whereKey, value, path, label, listConfig } = props;\n\n  const getContext =\n    useBackofficeListFilterContext as () => ListFilterContext | null;\n  const context = getContext();\n  let config: BackofficeRuntimeResolvedListFacetConfig | null = null;\n\n  if (listConfig != null) {\n    config = listConfig;\n  } else if (context != null) {\n    config = context.config;\n  }\n\n  if (config == null) {\n    return null;\n  }\n\n  let filter = resolveFilterForWhereKey(config, whereKey, path);\n  if (filter == null && path == null) {\n    filter = resolveFilterForColumn(config, whereKey, filterColumnAliases);\n  }\n  if (filter == null || !canFilterValue(filter, value)) {\n    return null;\n  }\n\n  const filterLabel = resolveLabel(filter.label, tApp);\n  const actionLabel =\n    label ??\n    t('filters.actions.filterBy', {\n      label: filterLabel,\n    });\n  const icon = (\n    <SidebarSearchSvg\n      width={14}\n      height={14}\n      className={styles.icon}\n      aria-hidden=\"true\"\n    />\n  );\n\n  if (context != null) {\n    return (\n      <button\n        type=\"button\"\n        className={styles.action}\n        title={actionLabel}\n        aria-label={actionLabel}\n        onClick={() => {\n          context.applyFilter(whereKey, value, path);\n        }}\n      >\n        {icon}\n      </button>\n    );\n  }\n\n  const baseWhere =\n    config.listDefaults?.where ?? config.list.defaultState?.where ?? null;\n  const nextWhere = setWhereValue(baseWhere, whereKey, value, path);\n  const to = buildBackofficeListLink(config, { where: nextWhere });\n\n  return (\n    <Link\n      to={to}\n      className={styles.action}\n      title={actionLabel}\n      aria-label={actionLabel}\n    >\n      {icon}\n    </Link>\n  );\n};\n\nexport default BackofficeFilterAction;\n"],"mappings":";;;;;;;;;;;;AAyCA,IAAM,KAAgB,GAAkB,MAC/B,EAAM,EAAK,EAGP,KACX,MACuB;CACvB,IAAM,EAAE,GAAG,MAAS,GAAgB,EAC9B,EAAE,SAAM,GAA+B,EACvC,EAAE,2BAAwB,GAAqB,EAC/C,EAAE,aAAU,UAAO,SAAM,UAAO,kBAAe,GAI/C,IAAU,GAAY,EACxB,IAA0D;CAQ9D,IANI,KAAc,OAEP,KAAW,SACpB,IAAS,EAAQ,UAFjB,IAAS,GAKP,KAAU,MACZ,OAAO;CAGT,IAAI,IAAS,EAAyB,GAAQ,GAAU,EAAK;CAI7D,IAHI,KAAU,QAAQ,KAAQ,SAC5B,IAAS,EAAuB,GAAQ,GAAU,EAAoB,GAEpE,KAAU,QAAQ,CAAC,EAAe,GAAQ,EAAM,EAClD,OAAO;CAGT,IAAM,IAAc,EAAa,EAAO,OAAO,EAAK,EAC9C,IACJ,KACA,EAAE,4BAA4B,EAC5B,OAAO,GACR,CAAC,EACE,IACJ,kBAAC,GAAD;EACE,OAAO;EACP,QAAQ;EACR,WAAW;EACX,eAAY;EACZ,CAAA;CAGJ,IAAI,KAAW,MACb,OACE,kBAAC,UAAD;EACE,MAAK;EACL,WAAW;EACX,OAAO;EACP,cAAY;EACZ,eAAe;GACb,EAAQ,YAAY,GAAU,GAAO,EAAK;;YAG3C;EACM,CAAA;CAMb,IAAM,IAAY,EADhB,EAAO,cAAc,SAAS,EAAO,KAAK,cAAc,SAAS,MACxB,GAAU,GAAO,EAAK;CAGjE,OACE,kBAAC,GAAD;EACM,IAJG,EAAwB,GAAQ,EAAE,OAAO,GAAW,CAIvD;EACJ,WAAW;EACX,OAAO;EACP,cAAY;YAEX;EACI,CAAA"}
+{"version":3,"file":"BackofficeFilterAction.js","names":[],"sources":["../../../../../src/components/backoffice/filters/BackofficeFilterAction.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport Link from '@plumile/router/routing/Link.js';\nimport { SidebarSearchSvg } from '@plumile/ui/icons/SidebarSearchSvg.js';\n\nimport type {\n  BackofficeRuntimeResolvedListFacetConfig,\n  I18nLabel,\n} from '@plumile/backoffice-core/types.js';\nimport type { TFunction } from 'i18next';\nimport { buildBackofficeListLink } from '@plumile/backoffice-core/state/buildListHref.js';\nimport { setWhereValue } from '@plumile/backoffice-core/filters/where.js';\n\nimport {\n  canFilterValue,\n  resolveFilterForColumn,\n  resolveFilterForWhereKey,\n} from '../../../filters/filterHelpers.js';\nimport { useBackofficeConfig } from '../../../provider/BackofficeConfigContext.js';\nimport { useBackofficeListFilterContext } from '../scaffolds/BackofficeListFilterContext.js';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './backofficeFilterAction.css.js';\n\nexport type BackofficeFilterActionProps = {\n  whereKey: string;\n  value: unknown;\n  path?: readonly string[];\n  label?: string;\n  listConfig?: BackofficeRuntimeResolvedListFacetConfig;\n};\n\ntype ListFilterContext = {\n  config: BackofficeRuntimeResolvedListFacetConfig;\n  applyFilter: (\n    whereKey: string,\n    value: unknown,\n    path?: readonly string[],\n  ) => void;\n};\n\nconst resolveLabel = (label: I18nLabel, tApp: TFunction): string => {\n  return label(tApp);\n};\n\nexport const BackofficeFilterAction = (\n  props: BackofficeFilterActionProps,\n): JSX.Element | null => {\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const { filterColumnAliases } = useBackofficeConfig();\n  const { whereKey, value, path, label, listConfig } = props;\n\n  const getContext =\n    useBackofficeListFilterContext as () => ListFilterContext | null;\n  const context = getContext();\n  let config: BackofficeRuntimeResolvedListFacetConfig | null = null;\n\n  if (listConfig != null) {\n    config = listConfig;\n  } else if (context != null) {\n    config = context.config;\n  }\n\n  if (config == null) {\n    return null;\n  }\n\n  let filter = resolveFilterForWhereKey(config, whereKey, path);\n  if (filter == null && path == null) {\n    filter = resolveFilterForColumn(config, whereKey, filterColumnAliases);\n  }\n  if (filter == null || !canFilterValue(filter, value)) {\n    return null;\n  }\n\n  const filterLabel = resolveLabel(filter.label, tApp);\n  const actionLabel =\n    label ??\n    t('filters.actions.filterBy', {\n      label: filterLabel,\n    });\n  const icon = (\n    <SidebarSearchSvg\n      width={14}\n      height={14}\n      className={styles.icon}\n      aria-hidden=\"true\"\n    />\n  );\n\n  if (context != null) {\n    return (\n      <button\n        type=\"button\"\n        className={styles.action}\n        title={actionLabel}\n        aria-label={actionLabel}\n        onClick={() => {\n          context.applyFilter(whereKey, value, path);\n        }}\n      >\n        {icon}\n      </button>\n    );\n  }\n\n  const baseWhere =\n    config.listDefaults?.where ?? config.list.defaultState?.where ?? null;\n  const nextWhere = setWhereValue(baseWhere, whereKey, value, path);\n  const to = buildBackofficeListLink(config, { where: nextWhere });\n\n  return (\n    <Link\n      to={to}\n      className={styles.action}\n      title={actionLabel}\n      aria-label={actionLabel}\n    >\n      {icon}\n    </Link>\n  );\n};\n\nexport default BackofficeFilterAction;\n"],"mappings":";;;;;;;;;;;;AAyCA,IAAM,KAAgB,GAAkB,MAC/B,EAAM,EAAK,EAGP,KACX,MACuB;CACvB,IAAM,EAAE,GAAG,MAAS,GAAgB,EAC9B,EAAE,SAAM,GAA+B,EACvC,EAAE,2BAAwB,GAAqB,EAC/C,EAAE,aAAU,UAAO,SAAM,UAAO,kBAAe,GAI/C,IAAU,GAAY,EACxB,IAA0D;CAQ9D,IANI,KAAc,OAEP,KAAW,SACpB,IAAS,EAAQ,UAFjB,IAAS,GAKP,KAAU,MACZ,OAAO;CAGT,IAAI,IAAS,EAAyB,GAAQ,GAAU,EAAK;CAI7D,IAHI,KAAU,QAAQ,KAAQ,SAC5B,IAAS,EAAuB,GAAQ,GAAU,EAAoB,GAEpE,KAAU,QAAQ,CAAC,EAAe,GAAQ,EAAM,EAClD,OAAO;CAGT,IAAM,IAAc,EAAa,EAAO,OAAO,EAAK,EAC9C,IACJ,KACA,EAAE,4BAA4B,EAC5B,OAAO,GACR,CAAC,EACE,IACJ,kBAAC,GAAD;EACE,OAAO;EACP,QAAQ;EACR,WAAW;EACX,eAAY;EACZ,CAAA;CAGJ,IAAI,KAAW,MACb,OACE,kBAAC,UAAD;EACE,MAAK;EACL,WAAW;EACX,OAAO;EACP,cAAY;EACZ,eAAe;GACb,EAAQ,YAAY,GAAU,GAAO,EAAK;;YAG3C;EACM,CAAA;CAMb,IAAM,IAAY,EADhB,EAAO,cAAc,SAAS,EAAO,KAAK,cAAc,SAAS,MACxB,GAAU,GAAO,EAAK;CAGjE,OACE,kBAAC,GAAD;EACM,IAJG,EAAwB,GAAQ,EAAE,OAAO,GAAW,CAIvD;EACJ,WAAW;EACX,OAAO;EACP,cAAY;YAEX;EACI,CAAA"}

package/lib/esm/components/backoffice/filters/DeferredFilterSearchInput.js

@@ -1,8 +1,10 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
 import { actions as t, container as n } from "./deferredFilterSearchInput.css.js";
 import { useEffect as r, useState as i } from "react";
-import { Button as a, Input as o, SidebarSearchSvg as s } from "@plumile/ui";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Button as s } from "@plumile/ui/atomic/atoms/button/Button.js";
+import { Input as c } from "@plumile/ui/atomic/atoms/input/Input.js";
+import { SidebarSearchSvg as l } from "@plumile/ui/icons/SidebarSearchSvg.js";
 //#region src/components/backoffice/filters/DeferredFilterSearchInput.tsx
 var u = ({ value: u, placeholder: d, ariaLabel: f, className: p, inputMode: m = "search", type: h = "search", onApply: g }) => {
 	let { t: _ } = e(), [v, y] = i(u);
@@ -14,14 +16,14 @@ var u = ({ value: u, placeholder: d, ariaLabel: f, className: p, inputMode: m =
 	let E = () => {
 		C && g(b);
 	};
-	return /* @__PURE__ */ c("form", {
+	return /* @__PURE__ */ a("form", {
 		className: p,
 		onSubmit: (e) => {
 			e.preventDefault(), E();
 		},
-		children: /* @__PURE__ */ l("div", {
+		children: /* @__PURE__ */ o("div", {
 			className: n,
-			children: [/* @__PURE__ */ c(o, {
+			children: [/* @__PURE__ */ a(c, {
 				type: h,
 				inputMode: m,
 				value: v,
@@ -35,14 +37,14 @@ var u = ({ value: u, placeholder: d, ariaLabel: f, className: p, inputMode: m =
 				"aria-label": f ?? d,
 				size: "small",
 				fullWidth: !0,
-				leftIcon: /* @__PURE__ */ c(s, {
+				leftIcon: /* @__PURE__ */ a(l, {
 					width: 18,
 					height: 18,
 					"aria-hidden": "true"
 				})
-			}), /* @__PURE__ */ l("div", {
+			}), /* @__PURE__ */ o("div", {
 				className: t,
-				children: [w && /* @__PURE__ */ c(a, {
+				children: [w && /* @__PURE__ */ a(s, {
 					type: "button",
 					variant: "text",
 					size: "small",
@@ -50,7 +52,7 @@ var u = ({ value: u, placeholder: d, ariaLabel: f, className: p, inputMode: m =
 						y(""), x !== "" && g("");
 					},
 					children: _("common.actions.clear")
-				}), /* @__PURE__ */ c(a, {
+				}), /* @__PURE__ */ a(s, {
 					type: "submit",
 					variant: T,
 					size: "small",

package/lib/esm/components/backoffice/filters/DeferredFilterSearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeferredFilterSearchInput.js","names":[],"sources":["../../../../../src/components/backoffice/filters/DeferredFilterSearchInput.tsx"],"sourcesContent":["import {\n  useEffect,\n  useState,\n  type ChangeEvent,\n  type FormEvent,\n  type JSX,\n  type KeyboardEvent,\n} from 'react';\n\nimport { Button, Input, SidebarSearchSvg } from '@plumile/ui';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './deferredFilterSearchInput.css.js';\n\nexport type DeferredFilterSearchInputProps = {\n  value: string;\n  placeholder: string;\n  ariaLabel?: string;\n  className?: string;\n  inputMode?: 'search' | 'numeric' | 'decimal';\n  type?: 'search' | 'number' | 'datetime-local';\n  onApply: (value: string) => void;\n};\n\nexport const DeferredFilterSearchInput = ({\n  value,\n  placeholder,\n  ariaLabel,\n  className,\n  inputMode = 'search',\n  type = 'search',\n  onApply,\n}: DeferredFilterSearchInputProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const [draftValue, setDraftValue] = useState(value);\n\n  useEffect(() => {\n    setDraftValue(value);\n  }, [value]);\n\n  const normalizedDraft = draftValue.trim();\n  const normalizedValue = value.trim();\n  const hasDraft = normalizedDraft !== '';\n  const hasPendingValue = normalizedDraft !== normalizedValue;\n  const canClear = hasDraft || normalizedValue !== '';\n  let submitVariant: 'primary' | 'secondary' = 'secondary';\n  if (hasPendingValue) {\n    submitVariant = 'primary';\n  }\n\n  const applyDraft = () => {\n    if (!hasPendingValue) {\n      return;\n    }\n    onApply(normalizedDraft);\n  };\n\n  const clearValue = () => {\n    setDraftValue('');\n    if (normalizedValue !== '') {\n      onApply('');\n    }\n  };\n\n  return (\n    <form\n      className={className}\n      onSubmit={(event: FormEvent<HTMLFormElement>) => {\n        event.preventDefault();\n        applyDraft();\n      }}\n    >\n      <div className={styles.container}>\n        <Input\n          type={type}\n          inputMode={inputMode}\n          value={draftValue}\n          onChange={(event: ChangeEvent<HTMLInputElement>) => {\n            setDraftValue(event.target.value);\n          }}\n          onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {\n            if (event.key === 'Escape') {\n              event.preventDefault();\n              setDraftValue(value);\n            }\n          }}\n          placeholder={placeholder}\n          aria-label={ariaLabel ?? placeholder}\n          size=\"small\"\n          fullWidth\n          leftIcon={\n            <SidebarSearchSvg width={18} height={18} aria-hidden=\"true\" />\n          }\n        />\n        <div className={styles.actions}>\n          {canClear && (\n            <Button\n              type=\"button\"\n              variant=\"text\"\n              size=\"small\"\n              onClick={clearValue}\n            >\n              {t('common.actions.clear')}\n            </Button>\n          )}\n          <Button\n            type=\"submit\"\n            variant={submitVariant}\n            size=\"small\"\n            disabled={!hasPendingValue}\n          >\n            {t('filters.actions.apply')}\n          </Button>\n        </div>\n      </div>\n    </form>\n  );\n};\n\nexport default DeferredFilterSearchInput;\n"],"mappings":";;;;;;AAyBA,IAAa,KAA6B,EACxC,UACA,gBACA,cACA,cACA,eAAY,UACZ,UAAO,UACP,iBACiD;CACjD,IAAM,EAAE,SAAM,GAA+B,EACvC,CAAC,GAAY,KAAiB,EAAS,EAAM;CAEnD,QAAgB;EACd,EAAc,EAAM;IACnB,CAAC,EAAM,CAAC;CAEX,IAAM,IAAkB,EAAW,MAAM,EACnC,IAAkB,EAAM,MAAM,EAC9B,IAAW,MAAoB,IAC/B,IAAkB,MAAoB,GACtC,IAAW,KAAY,MAAoB,IAC7C,IAAyC;CAC7C,AAAI,MACF,IAAgB;CAGlB,IAAM,UAAmB;EAClB,KAGL,EAAQ,EAAgB;;CAU1B,OACE,kBAAC,QAAD;EACa;EACX,WAAW,MAAsC;GAE/C,AADA,EAAM,gBAAgB,EACtB,GAAY;;YAGd,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,GAAD;IACQ;IACK;IACX,OAAO;IACP,WAAW,MAAyC;KAClD,EAAc,EAAM,OAAO,MAAM;;IAEnC,YAAY,MAA2C;KACrD,AAAI,EAAM,QAAQ,aAChB,EAAM,gBAAgB,EACtB,EAAc,EAAM;;IAGX;IACb,cAAY,KAAa;IACzB,MAAK;IACL,WAAA;IACA,UACE,kBAAC,GAAD;KAAkB,OAAO;KAAI,QAAQ;KAAI,eAAY;KAAS,CAAA;IAEhE,CAAA,EACF,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACG,KACC,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,MAAK;KACL,eA3Ca;MAEvB,AADA,EAAc,GAAG,EACb,MAAoB,MACtB,EAAQ,GAAG;;eA0CF,EAAE,uBAAuB;KACnB,CAAA,EAEX,kBAAC,GAAD;KACE,MAAK;KACL,SAAS;KACT,MAAK;KACL,UAAU,CAAC;eAEV,EAAE,wBAAwB;KACpB,CAAA,CACL;MACF;;EACD,CAAA"}
+{"version":3,"file":"DeferredFilterSearchInput.js","names":[],"sources":["../../../../../src/components/backoffice/filters/DeferredFilterSearchInput.tsx"],"sourcesContent":["import {\n  useEffect,\n  useState,\n  type ChangeEvent,\n  type FormEvent,\n  type JSX,\n  type KeyboardEvent,\n} from 'react';\n\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { Input } from '@plumile/ui/atomic/atoms/input/Input.js';\nimport { SidebarSearchSvg } from '@plumile/ui/icons/SidebarSearchSvg.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './deferredFilterSearchInput.css.js';\n\nexport type DeferredFilterSearchInputProps = {\n  value: string;\n  placeholder: string;\n  ariaLabel?: string;\n  className?: string;\n  inputMode?: 'search' | 'numeric' | 'decimal';\n  type?: 'search' | 'number' | 'datetime-local';\n  onApply: (value: string) => void;\n};\n\nexport const DeferredFilterSearchInput = ({\n  value,\n  placeholder,\n  ariaLabel,\n  className,\n  inputMode = 'search',\n  type = 'search',\n  onApply,\n}: DeferredFilterSearchInputProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const [draftValue, setDraftValue] = useState(value);\n\n  useEffect(() => {\n    setDraftValue(value);\n  }, [value]);\n\n  const normalizedDraft = draftValue.trim();\n  const normalizedValue = value.trim();\n  const hasDraft = normalizedDraft !== '';\n  const hasPendingValue = normalizedDraft !== normalizedValue;\n  const canClear = hasDraft || normalizedValue !== '';\n  let submitVariant: 'primary' | 'secondary' = 'secondary';\n  if (hasPendingValue) {\n    submitVariant = 'primary';\n  }\n\n  const applyDraft = () => {\n    if (!hasPendingValue) {\n      return;\n    }\n    onApply(normalizedDraft);\n  };\n\n  const clearValue = () => {\n    setDraftValue('');\n    if (normalizedValue !== '') {\n      onApply('');\n    }\n  };\n\n  return (\n    <form\n      className={className}\n      onSubmit={(event: FormEvent<HTMLFormElement>) => {\n        event.preventDefault();\n        applyDraft();\n      }}\n    >\n      <div className={styles.container}>\n        <Input\n          type={type}\n          inputMode={inputMode}\n          value={draftValue}\n          onChange={(event: ChangeEvent<HTMLInputElement>) => {\n            setDraftValue(event.target.value);\n          }}\n          onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {\n            if (event.key === 'Escape') {\n              event.preventDefault();\n              setDraftValue(value);\n            }\n          }}\n          placeholder={placeholder}\n          aria-label={ariaLabel ?? placeholder}\n          size=\"small\"\n          fullWidth\n          leftIcon={\n            <SidebarSearchSvg width={18} height={18} aria-hidden=\"true\" />\n          }\n        />\n        <div className={styles.actions}>\n          {canClear && (\n            <Button\n              type=\"button\"\n              variant=\"text\"\n              size=\"small\"\n              onClick={clearValue}\n            >\n              {t('common.actions.clear')}\n            </Button>\n          )}\n          <Button\n            type=\"submit\"\n            variant={submitVariant}\n            size=\"small\"\n            disabled={!hasPendingValue}\n          >\n            {t('filters.actions.apply')}\n          </Button>\n        </div>\n      </div>\n    </form>\n  );\n};\n\nexport default DeferredFilterSearchInput;\n"],"mappings":";;;;;;;;AA2BA,IAAa,KAA6B,EACxC,UACA,gBACA,cACA,cACA,eAAY,UACZ,UAAO,UACP,iBACiD;CACjD,IAAM,EAAE,SAAM,GAA+B,EACvC,CAAC,GAAY,KAAiB,EAAS,EAAM;CAEnD,QAAgB;EACd,EAAc,EAAM;IACnB,CAAC,EAAM,CAAC;CAEX,IAAM,IAAkB,EAAW,MAAM,EACnC,IAAkB,EAAM,MAAM,EAC9B,IAAW,MAAoB,IAC/B,IAAkB,MAAoB,GACtC,IAAW,KAAY,MAAoB,IAC7C,IAAyC;CAC7C,AAAI,MACF,IAAgB;CAGlB,IAAM,UAAmB;EAClB,KAGL,EAAQ,EAAgB;;CAU1B,OACE,kBAAC,QAAD;EACa;EACX,WAAW,MAAsC;GAE/C,AADA,EAAM,gBAAgB,EACtB,GAAY;;YAGd,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,GAAD;IACQ;IACK;IACX,OAAO;IACP,WAAW,MAAyC;KAClD,EAAc,EAAM,OAAO,MAAM;;IAEnC,YAAY,MAA2C;KACrD,AAAI,EAAM,QAAQ,aAChB,EAAM,gBAAgB,EACtB,EAAc,EAAM;;IAGX;IACb,cAAY,KAAa;IACzB,MAAK;IACL,WAAA;IACA,UACE,kBAAC,GAAD;KAAkB,OAAO;KAAI,QAAQ;KAAI,eAAY;KAAS,CAAA;IAEhE,CAAA,EACF,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACG,KACC,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,MAAK;KACL,eA3Ca;MAEvB,AADA,EAAc,GAAG,EACb,MAAoB,MACtB,EAAQ,GAAG;;eA0CF,EAAE,uBAAuB;KACnB,CAAA,EAEX,kBAAC,GAAD;KACE,MAAK;KACL,SAAS;KACT,MAAK;KACL,UAAU,CAAC;eAEV,EAAE,wBAAwB;KACpB,CAAA,CACL;MACF;;EACD,CAAA"}

package/lib/esm/components/backoffice/filters/EntityFilterValue.js

@@ -13,17 +13,25 @@ var { useLazyLoadQuery: o } = a, s = (e) => {
 	return n === "" ? null : n;
 }, c = ({ valueConfig: e, id: t, children: n }) => {
 	let r = o(e.query, { id: t }), i = e.resolveRow(r), a = null;
-	return i != null && (a = e.toRow(i)), n(s(a));
+	i != null && (a = e.toRow(i));
+	let c = s(a), l = "resolved";
+	return c ?? (l = "unresolved"), n(c, { status: l });
 }, l = ({ entityId: e, id: a, children: o }) => {
-	let s = n(e, { enabled: a.trim() !== "" }), l = null;
-	s.status === "loaded" && (l = s.module.config.picker.value ?? null);
-	let u = o(null);
-	return l == null ? u : /* @__PURE__ */ i(t, {
-		fallback: () => u,
+	let s = a.trim(), l = n(e, { enabled: s !== "" });
+	if (s === "") return o(null, { status: "unavailable" });
+	let u = null;
+	l.status === "loaded" && (u = l.module.config.picker.value ?? null);
+	let d = o(null, { status: "loading" });
+	if (l.status === "loading") return d;
+	let f = "unavailable";
+	l.status === "error" && (f = "error");
+	let p = o(null, { status: f });
+	return u == null ? p : /* @__PURE__ */ i(t, {
+		fallback: () => o(null, { status: "error" }),
 		children: /* @__PURE__ */ i(r, {
-			fallback: u,
+			fallback: d,
 			children: /* @__PURE__ */ i(c, {
-				valueConfig: l,
+				valueConfig: u,
 				id: a,
 				children: o
 			})

package/lib/esm/components/backoffice/filters/EntityFilterValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityFilterValue.js","names":[],"sources":["../../../../../src/components/backoffice/filters/EntityFilterValue.tsx"],"sourcesContent":["import { Suspense, type JSX } from 'react';\nimport * as ReactRelay from 'react-relay';\nimport type { OperationType } from 'relay-runtime';\n\nimport type { BackofficePickerValueConfig } from '@plumile/backoffice-core/types.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficePickerEntityLoader } from '../../../provider/useBackofficeEntityLoader.js';\nimport { BackofficeErrorBoundary } from '../errors/BackofficeErrorBoundary.js';\n\nconst { useLazyLoadQuery } = ReactRelay;\n\ntype EntityFilterValueContentProps<RowRef, RowView> = {\n  valueConfig: BackofficePickerValueConfig<RowRef, RowView>;\n  id: string;\n  children: (label: string | null) => JSX.Element;\n};\n\nconst resolveTitle = (value: unknown): string | null => {\n  if (value == null || typeof value !== 'object') {\n    return null;\n  }\n  const { title } = value as { title?: unknown };\n  if (typeof title !== 'string') {\n    return null;\n  }\n  const trimmed = title.trim();\n  if (trimmed === '') {\n    return null;\n  }\n  return trimmed;\n};\n\nconst EntityFilterValueContent = <RowRef, RowView>({\n  valueConfig,\n  id,\n  children,\n}: EntityFilterValueContentProps<RowRef, RowView>): JSX.Element => {\n  const data = useLazyLoadQuery<OperationType>(valueConfig.query, { id });\n  const rowRef = valueConfig.resolveRow(data);\n  let row: RowView | null = null;\n  if (rowRef != null) {\n    row = valueConfig.toRow(rowRef);\n  }\n  const title = resolveTitle(row);\n\n  return children(title);\n};\n\nexport type EntityFilterValueTextProps = {\n  entityId: string;\n  id: string;\n  children: (label: string | null) => JSX.Element;\n};\n\nexport const EntityFilterValueText = ({\n  entityId,\n  id,\n  children,\n}: EntityFilterValueTextProps): JSX.Element => {\n  const resolvedId = id.trim();\n  const pickerEntityState = useBackofficePickerEntityLoader(entityId, {\n    enabled: resolvedId !== '',\n  });\n  let valueConfig: BackofficePickerValueConfig<unknown, unknown> | null = null;\n  if (pickerEntityState.status === 'loaded') {\n    valueConfig = pickerEntityState.module.config.picker.value ?? null;\n  }\n\n  const fallback = children(null);\n  if (valueConfig == null) {\n    return fallback;\n  }\n\n  return (\n    <BackofficeErrorBoundary\n      fallback={() => {\n        return fallback;\n      }}\n    >\n      <Suspense fallback={fallback}>\n        <EntityFilterValueContent valueConfig={valueConfig} id={id}>\n          {children}\n        </EntityFilterValueContent>\n      </Suspense>\n    </BackofficeErrorBoundary>\n  );\n};\n\nexport type EntityFilterValueProps = {\n  entityId: string;\n  id: string;\n};\n\nexport const EntityFilterValue = ({\n  entityId,\n  id,\n}: EntityFilterValueProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const resolvedId = id.trim();\n\n  return (\n    <EntityFilterValueText entityId={entityId} id={id}>\n      {(label) => {\n        let fallbackLabel = resolvedId;\n        if (resolvedId === '') {\n          fallbackLabel = t('filters.placeholders.unresolved');\n        }\n        return <span>{label ?? fallbackLabel}</span>;\n      }}\n    </EntityFilterValueText>\n  );\n};\n\nexport default EntityFilterValue;\n"],"mappings":";;;;;;;AAUA,IAAM,EAAE,kBAAA,MAAqB,GAQvB,KAAgB,MAAkC;CACtD,IAAqB,OAAO,KAAU,aAAlC,GACF,OAAO;CAET,IAAM,EAAE,aAAU;CAClB,IAAI,OAAO,KAAU,UACnB,OAAO;CAET,IAAM,IAAU,EAAM,MAAM;CAI5B,OAHI,MAAY,KACP,OAEF;GAGH,KAA6C,EACjD,gBACA,OACA,kBACiE;CACjE,IAAM,IAAO,EAAgC,EAAY,OAAO,EAAE,OAAI,CAAC,EACjE,IAAS,EAAY,WAAW,EAAK,EACvC,IAAsB;CAM1B,OALI,KAAU,SACZ,IAAM,EAAY,MAAM,EAAO,GAI1B,EAFO,EAAa,EAEX,CAAM;GASX,KAAyB,EACpC,aACA,OACA,kBAC6C;CAE7C,IAAM,IAAoB,EAAgC,GAAU,EAClE,SAFiB,EAAG,MAEX,KAAe,IACzB,CAAC,EACE,IAAoE;CACxE,AAAI,EAAkB,WAAW,aAC/B,IAAc,EAAkB,OAAO,OAAO,OAAO,SAAS;CAGhE,IAAM,IAAW,EAAS,KAAK;CAK/B,OAJI,KAAe,OACV,IAIP,kBAAC,GAAD;EACE,gBACS;YAGT,kBAAC,GAAD;GAAoB;aAClB,kBAAC,GAAD;IAAuC;IAAiB;IACrD;IACwB,CAAA;GAClB,CAAA;EACa,CAAA;GASjB,KAAqB,EAChC,aACA,YACyC;CACzC,IAAM,EAAE,SAAM,GAA+B,EACvC,IAAa,EAAG,MAAM;CAE5B,OACE,kBAAC,GAAD;EAAiC;EAAc;aAC3C,MAAU;GACV,IAAI,IAAgB;GAIpB,OAHI,MAAe,OACjB,IAAgB,EAAE,kCAAkC,GAE/C,kBAAC,QAAD,EAAA,UAAO,KAAS,GAAqB,CAAA;;EAExB,CAAA"}
+{"version":3,"file":"EntityFilterValue.js","names":[],"sources":["../../../../../src/components/backoffice/filters/EntityFilterValue.tsx"],"sourcesContent":["import { Suspense, type JSX } from 'react';\nimport * as ReactRelay from 'react-relay';\nimport type { OperationType } from 'relay-runtime';\n\nimport type { BackofficePickerValueConfig } from '@plumile/backoffice-core/types.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficePickerEntityLoader } from '../../../provider/useBackofficeEntityLoader.js';\nimport { BackofficeErrorBoundary } from '../errors/BackofficeErrorBoundary.js';\n\nconst { useLazyLoadQuery } = ReactRelay;\n\ntype EntityFilterValueContentProps<RowRef, RowView> = {\n  valueConfig: BackofficePickerValueConfig<RowRef, RowView>;\n  id: string;\n  children: EntityFilterValueTextChildren;\n};\n\nconst resolveTitle = (value: unknown): string | null => {\n  if (value == null || typeof value !== 'object') {\n    return null;\n  }\n  const { title } = value as { title?: unknown };\n  if (typeof title !== 'string') {\n    return null;\n  }\n  const trimmed = title.trim();\n  if (trimmed === '') {\n    return null;\n  }\n  return trimmed;\n};\n\nconst EntityFilterValueContent = <RowRef, RowView>({\n  valueConfig,\n  id,\n  children,\n}: EntityFilterValueContentProps<RowRef, RowView>): JSX.Element => {\n  const data = useLazyLoadQuery<OperationType>(valueConfig.query, { id });\n  const rowRef = valueConfig.resolveRow(data);\n  let row: RowView | null = null;\n  if (rowRef != null) {\n    row = valueConfig.toRow(rowRef);\n  }\n  const title = resolveTitle(row);\n  let status: EntityFilterValueTextState['status'] = 'resolved';\n  if (title == null) {\n    status = 'unresolved';\n  }\n\n  return children(title, { status });\n};\n\nexport type EntityFilterValueTextState = {\n  status: 'loading' | 'resolved' | 'unresolved' | 'unavailable' | 'error';\n};\n\nexport type EntityFilterValueTextChildren = (\n  label: string | null,\n  state?: EntityFilterValueTextState,\n) => JSX.Element;\n\nexport type EntityFilterValueTextProps = {\n  entityId: string;\n  id: string;\n  children: EntityFilterValueTextChildren;\n};\n\nexport const EntityFilterValueText = ({\n  entityId,\n  id,\n  children,\n}: EntityFilterValueTextProps): JSX.Element => {\n  const resolvedId = id.trim();\n  const pickerEntityState = useBackofficePickerEntityLoader(entityId, {\n    enabled: resolvedId !== '',\n  });\n\n  if (resolvedId === '') {\n    return children(null, { status: 'unavailable' });\n  }\n\n  let valueConfig: BackofficePickerValueConfig<unknown, unknown> | null = null;\n  if (pickerEntityState.status === 'loaded') {\n    valueConfig = pickerEntityState.module.config.picker.value ?? null;\n  }\n\n  const loadingFallback = children(null, { status: 'loading' });\n  if (pickerEntityState.status === 'loading') {\n    return loadingFallback;\n  }\n\n  let unavailableStatus: EntityFilterValueTextState['status'] = 'unavailable';\n  if (pickerEntityState.status === 'error') {\n    unavailableStatus = 'error';\n  }\n  const unavailableFallback = children(null, {\n    status: unavailableStatus,\n  });\n  if (valueConfig == null) {\n    return unavailableFallback;\n  }\n\n  return (\n    <BackofficeErrorBoundary\n      fallback={() => {\n        return children(null, { status: 'error' });\n      }}\n    >\n      <Suspense fallback={loadingFallback}>\n        <EntityFilterValueContent valueConfig={valueConfig} id={id}>\n          {children}\n        </EntityFilterValueContent>\n      </Suspense>\n    </BackofficeErrorBoundary>\n  );\n};\n\nexport type EntityFilterValueProps = {\n  entityId: string;\n  id: string;\n};\n\nexport const EntityFilterValue = ({\n  entityId,\n  id,\n}: EntityFilterValueProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const resolvedId = id.trim();\n\n  return (\n    <EntityFilterValueText entityId={entityId} id={id}>\n      {(label) => {\n        let fallbackLabel = resolvedId;\n        if (resolvedId === '') {\n          fallbackLabel = t('filters.placeholders.unresolved');\n        }\n        return <span>{label ?? fallbackLabel}</span>;\n      }}\n    </EntityFilterValueText>\n  );\n};\n\nexport default EntityFilterValue;\n"],"mappings":";;;;;;;AAUA,IAAM,EAAE,kBAAA,MAAqB,GAQvB,KAAgB,MAAkC;CACtD,IAAqB,OAAO,KAAU,aAAlC,GACF,OAAO;CAET,IAAM,EAAE,aAAU;CAClB,IAAI,OAAO,KAAU,UACnB,OAAO;CAET,IAAM,IAAU,EAAM,MAAM;CAI5B,OAHI,MAAY,KACP,OAEF;GAGH,KAA6C,EACjD,gBACA,OACA,kBACiE;CACjE,IAAM,IAAO,EAAgC,EAAY,OAAO,EAAE,OAAI,CAAC,EACjE,IAAS,EAAY,WAAW,EAAK,EACvC,IAAsB;CAC1B,AAAI,KAAU,SACZ,IAAM,EAAY,MAAM,EAAO;CAEjC,IAAM,IAAQ,EAAa,EAAI,EAC3B,IAA+C;CAKnD,OAJI,MACF,IAAS,eAGJ,EAAS,GAAO,EAAE,WAAQ,CAAC;GAkBvB,KAAyB,EACpC,aACA,OACA,kBAC6C;CAC7C,IAAM,IAAa,EAAG,MAAM,EACtB,IAAoB,EAAgC,GAAU,EAClE,SAAS,MAAe,IACzB,CAAC;CAEF,IAAI,MAAe,IACjB,OAAO,EAAS,MAAM,EAAE,QAAQ,eAAe,CAAC;CAGlD,IAAI,IAAoE;CACxE,AAAI,EAAkB,WAAW,aAC/B,IAAc,EAAkB,OAAO,OAAO,OAAO,SAAS;CAGhE,IAAM,IAAkB,EAAS,MAAM,EAAE,QAAQ,WAAW,CAAC;CAC7D,IAAI,EAAkB,WAAW,WAC/B,OAAO;CAGT,IAAI,IAA0D;CAC9D,AAAI,EAAkB,WAAW,YAC/B,IAAoB;CAEtB,IAAM,IAAsB,EAAS,MAAM,EACzC,QAAQ,GACT,CAAC;CAKF,OAJI,KAAe,OACV,IAIP,kBAAC,GAAD;EACE,gBACS,EAAS,MAAM,EAAE,QAAQ,SAAS,CAAC;YAG5C,kBAAC,GAAD;GAAU,UAAU;aAClB,kBAAC,GAAD;IAAuC;IAAiB;IACrD;IACwB,CAAA;GAClB,CAAA;EACa,CAAA;GASjB,KAAqB,EAChC,aACA,YACyC;CACzC,IAAM,EAAE,SAAM,GAA+B,EACvC,IAAa,EAAG,MAAM;CAE5B,OACE,kBAAC,GAAD;EAAiC;EAAc;aAC3C,MAAU;GACV,IAAI,IAAgB;GAIpB,OAHI,MAAe,OACjB,IAAgB,EAAE,kCAAkC,GAE/C,kBAAC,QAAD,EAAA,UAAO,KAAS,GAAqB,CAAA;;EAExB,CAAA"}

package/lib/esm/components/backoffice/filters/EntityIdFilterField.js

@@ -1,65 +1,98 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
-import { actions as t, container as n, labelText as r, pickText as i, pickerButton as a, placeholder as o, valueText as s } from "./entityIdFilterField.css.js";
-import { Button as c } from "@plumile/ui";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { actionIcon as t, clearButton as n, container as r, content as i, labelText as a, pickActionButton as o, pickerButton as s, pickerControl as c, placeholder as l, valueText as u } from "./entityIdFilterField.css.js";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { BackofficeSidebarPenToolSvg as p } from "@plumile/ui/icons/backoffice/BackofficeSidebarPenToolSvg.js";
+import { BackofficeSidebarSearchSvg as m } from "@plumile/ui/icons/backoffice/BackofficeSidebarSearchSvg.js";
 //#region src/components/backoffice/filters/EntityIdFilterField.tsx
-var d = (d) => {
-	let { disabled: f = !1, id: p, label: m, value: h, displayValue: g, placeholder: _, ariaDescribedBy: v, ariaInvalid: y, onPick: b, onClear: x } = d, { t: S } = e(), C = h?.trim() ?? "", w = g?.trim() ?? "", T = C !== "", E = w !== "", D = _ ?? S("filters.placeholders.anyEntity", { label: m }), O = S("filters.placeholders.unresolved"), k;
-	k = E ? /* @__PURE__ */ l("span", {
-		className: s,
-		children: w
-	}) : T ? /* @__PURE__ */ l("span", {
-		className: o,
-		children: O
-	}) : /* @__PURE__ */ l("span", {
-		className: o,
-		children: D
-	});
-	let A = S("common.actions.pick");
-	T && (A = S("common.actions.change"));
-	let j = `${A} ${m}`, M = S("common.actions.clear"), N = `${M} ${m}`, P = null;
-	T && x != null && (P = /* @__PURE__ */ l(c, {
-		type: "button",
-		variant: "text",
-		size: "small",
-		"aria-label": N,
-		disabled: f,
-		onClick: x,
+var h = (h) => {
+	let { disabled: g = !1, id: _, label: v, value: y, displayValue: b, placeholder: x, ariaDescribedBy: S, ariaInvalid: C, isResolving: w = !1, onPick: T, onClear: E } = h, { t: D } = e(), O = y?.trim() ?? "", k = b?.trim() ?? "", A = O !== "", j = k !== "", M = x ?? D("filters.placeholders.anyEntity", { label: v }), N = D("filters.placeholders.unresolved"), P;
+	P = j ? /* @__PURE__ */ d("span", {
+		className: u,
+		children: k
+	}) : A ? /* @__PURE__ */ d("span", {
+		className: l,
+		children: N
+	}) : /* @__PURE__ */ d("span", {
+		className: l,
 		children: M
-	}));
-	let F = null;
-	return b != null && (F = /* @__PURE__ */ u("button", {
-		id: p,
+	});
+	let F = D("common.actions.pick");
+	A && (F = D("common.actions.change"));
+	let I = `${F} ${v}`, L = `${D("common.actions.clear")} ${v}`, R = null;
+	A && E != null && (R = /* @__PURE__ */ d("button", {
 		type: "button",
-		className: a,
-		"aria-label": j,
-		"aria-describedby": v,
-		"aria-invalid": y,
-		disabled: f,
-		onClick: b,
-		children: [
-			/* @__PURE__ */ l("span", {
-				className: r,
-				children: m
-			}),
-			k,
-			/* @__PURE__ */ l("span", {
-				className: i,
-				children: A
-			})
-		]
-	})), /* @__PURE__ */ u("div", {
 		className: n,
-		children: [F ?? /* @__PURE__ */ l("div", {
-			className: "txvbqb9my txvbqbk5y txvbqb9ip txvbqbcp txvbqbl7g",
-			children: k
-		}), /* @__PURE__ */ l("div", {
+		"aria-label": L,
+		disabled: g,
+		onClick: (e) => {
+			e.stopPropagation(), E();
+		},
+		children: /* @__PURE__ */ d("svg", {
+			width: "12",
+			height: "12",
+			viewBox: "0 0 12 12",
+			fill: "none",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ d("path", {
+				d: "M3 3L9 9M9 3L3 9",
+				stroke: "currentColor",
+				strokeWidth: "1.6",
+				strokeLinecap: "round"
+			})
+		})
+	}));
+	let z = null;
+	if (T != null) {
+		let e = /* @__PURE__ */ d(m, {
 			className: t,
+			"aria-hidden": "true"
+		});
+		A && (e = /* @__PURE__ */ d(p, {
+			className: t,
+			"aria-hidden": "true"
+		})), z = /* @__PURE__ */ f("div", {
+			className: c,
+			children: [
+				/* @__PURE__ */ d("button", {
+					id: _,
+					type: "button",
+					className: s,
+					"aria-label": I,
+					"aria-describedby": S,
+					"aria-invalid": C,
+					"aria-busy": w || void 0,
+					disabled: g,
+					onClick: T,
+					children: /* @__PURE__ */ f("span", {
+						className: i,
+						children: [/* @__PURE__ */ d("span", {
+							className: a,
+							children: v
+						}), P]
+					})
+				}),
+				/* @__PURE__ */ d("button", {
+					type: "button",
+					className: o,
+					"aria-label": I,
+					title: I,
+					disabled: g,
+					onClick: T,
+					children: e
+				}),
+				R
+			]
+		});
+	}
+	return /* @__PURE__ */ d("div", {
+		className: r,
+		children: z ?? /* @__PURE__ */ d("div", {
+			className: "txvbqb9my txvbqbk5y txvbqb9ip txvbqbcp txvbqbl7g",
 			children: P
-		})]
+		})
 	});
 };
 //#endregion
-export { d as EntityIdFilterField, d as default };
+export { h as EntityIdFilterField, h as default };
 
 //# sourceMappingURL=EntityIdFilterField.js.map

package/lib/esm/components/backoffice/filters/EntityIdFilterField.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityIdFilterField.js","names":[],"sources":["../../../../../src/components/backoffice/filters/EntityIdFilterField.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { Button } from '@plumile/ui';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './entityIdFilterField.css.js';\n\nexport type EntityIdFilterFieldProps = {\n  id?: string;\n  label: string;\n  value: string | null;\n  displayValue?: string | null;\n  placeholder?: string;\n  ariaDescribedBy?: string;\n  ariaInvalid?: boolean;\n  onPick?: () => void;\n  onClear?: () => void;\n  disabled?: boolean;\n};\n\nexport const EntityIdFilterField = (\n  props: EntityIdFilterFieldProps,\n): JSX.Element => {\n  const {\n    disabled = false,\n    id,\n    label,\n    value,\n    displayValue,\n    placeholder,\n    ariaDescribedBy,\n    ariaInvalid,\n    onPick,\n    onClear,\n  } = props;\n  const { t } = useBackofficeReactTranslation();\n  const normalizedValue = value?.trim() ?? '';\n  const normalizedDisplayValue = displayValue?.trim() ?? '';\n  const hasValue = normalizedValue !== '';\n  const hasDisplayValue = normalizedDisplayValue !== '';\n\n  const resolvedPlaceholder =\n    placeholder ?? t('filters.placeholders.anyEntity', { label });\n  const unresolvedPlaceholder = t('filters.placeholders.unresolved');\n\n  let displayNode: JSX.Element;\n  if (hasDisplayValue) {\n    displayNode = (\n      <span className={styles.valueText}>{normalizedDisplayValue}</span>\n    );\n  } else if (hasValue) {\n    displayNode = (\n      <span className={styles.placeholder}>{unresolvedPlaceholder}</span>\n    );\n  } else {\n    displayNode = (\n      <span className={styles.placeholder}>{resolvedPlaceholder}</span>\n    );\n  }\n\n  let pickLabel = t('common.actions.pick');\n  if (hasValue) {\n    pickLabel = t('common.actions.change');\n  }\n  const pickAriaLabel = `${pickLabel} ${label}`;\n  const clearLabel = t('common.actions.clear');\n  const clearAriaLabel = `${clearLabel} ${label}`;\n\n  let clearNode: JSX.Element | null = null;\n  if (hasValue && onClear != null) {\n    clearNode = (\n      <Button\n        type=\"button\"\n        variant=\"text\"\n        size=\"small\"\n        aria-label={clearAriaLabel}\n        disabled={disabled}\n        onClick={onClear}\n      >\n        {clearLabel}\n      </Button>\n    );\n  }\n\n  let pickerNode: JSX.Element | null = null;\n  if (onPick != null) {\n    pickerNode = (\n      <button\n        id={id}\n        type=\"button\"\n        className={styles.pickerButton}\n        aria-label={pickAriaLabel}\n        aria-describedby={ariaDescribedBy}\n        aria-invalid={ariaInvalid}\n        disabled={disabled}\n        onClick={onPick}\n      >\n        <span className={styles.labelText}>{label}</span>\n        {displayNode}\n        <span className={styles.pickText}>{pickLabel}</span>\n      </button>\n    );\n  }\n\n  return (\n    <div className={styles.container}>\n      {pickerNode ?? <div className={styles.valueBox}>{displayNode}</div>}\n      <div className={styles.actions}>{clearNode}</div>\n    </div>\n  );\n};\n\nexport default EntityIdFilterField;\n"],"mappings":";;;;;AAqBA,IAAa,KACX,MACgB;CAChB,IAAM,EACJ,cAAW,IACX,OACA,UACA,UACA,iBACA,aAAA,GACA,oBACA,gBACA,WACA,eACE,GACE,EAAE,SAAM,GAA+B,EACvC,IAAkB,GAAO,MAAM,IAAI,IACnC,IAAyB,GAAc,MAAM,IAAI,IACjD,IAAW,MAAoB,IAC/B,IAAkB,MAA2B,IAE7C,IACJ,KAAe,EAAE,kCAAkC,EAAE,UAAO,CAAC,EACzD,IAAwB,EAAE,kCAAkC,EAE9D;CACJ,AASE,IATE,IAEA,kBAAC,QAAD;EAAM,WAAW;YAAmB;EAA8B,CAAA,GAE3D,IAEP,kBAAC,QAAD;EAAM,WAAW;YAAqB;EAA6B,CAAA,GAInE,kBAAC,QAAD;EAAM,WAAW;YAAqB;EAA2B,CAAA;CAIrE,IAAI,IAAY,EAAE,sBAAsB;CACxC,AAAI,MACF,IAAY,EAAE,wBAAwB;CAExC,IAAM,IAAgB,GAAG,EAAU,GAAG,KAChC,IAAa,EAAE,uBAAuB,EACtC,IAAiB,GAAG,EAAW,GAAG,KAEpC,IAAgC;CACpC,AAAI,KAAY,KAAW,SACzB,IACE,kBAAC,GAAD;EACE,MAAK;EACL,SAAQ;EACR,MAAK;EACL,cAAY;EACF;EACV,SAAS;YAER;EACM,CAAA;CAIb,IAAI,IAAiC;CAoBrC,OAnBI,KAAU,SACZ,IACE,kBAAC,UAAD;EACM;EACJ,MAAK;EACL,WAAW;EACX,cAAY;EACZ,oBAAkB;EAClB,gBAAc;EACJ;EACV,SAAS;YARX;GAUE,kBAAC,QAAD;IAAM,WAAW;cAAmB;IAAa,CAAA;GAChD;GACD,kBAAC,QAAD;IAAM,WAAW;cAAkB;IAAiB,CAAA;GAC7C;MAKX,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACG,KAAc,kBAAC,OAAD;GAAK,WAAW;aAAkB;GAAkB,CAAA,EACnE,kBAAC,OAAD;GAAK,WAAW;aAAiB;GAAgB,CAAA,CAC7C"}
+{"version":3,"file":"EntityIdFilterField.js","names":[],"sources":["../../../../../src/components/backoffice/filters/EntityIdFilterField.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { BackofficeSidebarPenToolSvg } from '@plumile/ui/icons/backoffice/BackofficeSidebarPenToolSvg.js';\nimport { BackofficeSidebarSearchSvg } from '@plumile/ui/icons/backoffice/BackofficeSidebarSearchSvg.js';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './entityIdFilterField.css.js';\n\nexport type EntityIdFilterFieldProps = {\n  id?: string;\n  label: string;\n  value: string | null;\n  displayValue?: string | null;\n  placeholder?: string;\n  ariaDescribedBy?: string;\n  ariaInvalid?: boolean;\n  isResolving?: boolean;\n  onPick?: () => void;\n  onClear?: () => void;\n  disabled?: boolean;\n};\n\nexport const EntityIdFilterField = (\n  props: EntityIdFilterFieldProps,\n): JSX.Element => {\n  const {\n    disabled = false,\n    id,\n    label,\n    value,\n    displayValue,\n    placeholder,\n    ariaDescribedBy,\n    ariaInvalid,\n    isResolving = false,\n    onPick,\n    onClear,\n  } = props;\n  const { t } = useBackofficeReactTranslation();\n  const normalizedValue = value?.trim() ?? '';\n  const normalizedDisplayValue = displayValue?.trim() ?? '';\n  const hasValue = normalizedValue !== '';\n  const hasDisplayValue = normalizedDisplayValue !== '';\n\n  const resolvedPlaceholder =\n    placeholder ?? t('filters.placeholders.anyEntity', { label });\n  const unresolvedPlaceholder = t('filters.placeholders.unresolved');\n\n  let displayNode: JSX.Element;\n  if (hasDisplayValue) {\n    displayNode = (\n      <span className={styles.valueText}>{normalizedDisplayValue}</span>\n    );\n  } else if (hasValue) {\n    displayNode = (\n      <span className={styles.placeholder}>{unresolvedPlaceholder}</span>\n    );\n  } else {\n    displayNode = (\n      <span className={styles.placeholder}>{resolvedPlaceholder}</span>\n    );\n  }\n\n  let pickLabel = t('common.actions.pick');\n  if (hasValue) {\n    pickLabel = t('common.actions.change');\n  }\n  const pickAriaLabel = `${pickLabel} ${label}`;\n  const clearLabel = t('common.actions.clear');\n  const clearAriaLabel = `${clearLabel} ${label}`;\n\n  let clearNode: JSX.Element | null = null;\n  if (hasValue && onClear != null) {\n    clearNode = (\n      <button\n        type=\"button\"\n        className={styles.clearButton}\n        aria-label={clearAriaLabel}\n        disabled={disabled}\n        onClick={(event) => {\n          event.stopPropagation();\n          onClear();\n        }}\n      >\n        <svg\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M3 3L9 9M9 3L3 9\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.6\"\n            strokeLinecap=\"round\"\n          />\n        </svg>\n      </button>\n    );\n  }\n\n  let pickerNode: JSX.Element | null = null;\n  if (onPick != null) {\n    let actionIcon = (\n      <BackofficeSidebarSearchSvg\n        className={styles.actionIcon}\n        aria-hidden=\"true\"\n      />\n    );\n    if (hasValue) {\n      actionIcon = (\n        <BackofficeSidebarPenToolSvg\n          className={styles.actionIcon}\n          aria-hidden=\"true\"\n        />\n      );\n    }\n\n    pickerNode = (\n      <div className={styles.pickerControl}>\n        <button\n          id={id}\n          type=\"button\"\n          className={styles.pickerButton}\n          aria-label={pickAriaLabel}\n          aria-describedby={ariaDescribedBy}\n          aria-invalid={ariaInvalid}\n          aria-busy={isResolving || undefined}\n          disabled={disabled}\n          onClick={onPick}\n        >\n          <span className={styles.content}>\n            <span className={styles.labelText}>{label}</span>\n            {displayNode}\n          </span>\n        </button>\n        <button\n          type=\"button\"\n          className={styles.pickActionButton}\n          aria-label={pickAriaLabel}\n          title={pickAriaLabel}\n          disabled={disabled}\n          onClick={onPick}\n        >\n          {actionIcon}\n        </button>\n        {clearNode}\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles.container}>\n      {pickerNode ?? <div className={styles.valueBox}>{displayNode}</div>}\n    </div>\n  );\n};\n\nexport default EntityIdFilterField;\n"],"mappings":";;;;;;AAsBA,IAAa,KACX,MACgB;CAChB,IAAM,EACJ,cAAW,IACX,OACA,UACA,UACA,iBACA,aAAA,GACA,oBACA,gBACA,iBAAc,IACd,WACA,eACE,GACE,EAAE,SAAM,GAA+B,EACvC,IAAkB,GAAO,MAAM,IAAI,IACnC,IAAyB,GAAc,MAAM,IAAI,IACjD,IAAW,MAAoB,IAC/B,IAAkB,MAA2B,IAE7C,IACJ,KAAe,EAAE,kCAAkC,EAAE,UAAO,CAAC,EACzD,IAAwB,EAAE,kCAAkC,EAE9D;CACJ,AASE,IATE,IAEA,kBAAC,QAAD;EAAM,WAAW;YAAmB;EAA8B,CAAA,GAE3D,IAEP,kBAAC,QAAD;EAAM,WAAW;YAAqB;EAA6B,CAAA,GAInE,kBAAC,QAAD;EAAM,WAAW;YAAqB;EAA2B,CAAA;CAIrE,IAAI,IAAY,EAAE,sBAAsB;CACxC,AAAI,MACF,IAAY,EAAE,wBAAwB;CAExC,IAAM,IAAgB,GAAG,EAAU,GAAG,KAEhC,IAAiB,GADJ,EAAE,uBACK,CAAW,GAAG,KAEpC,IAAgC;CACpC,AAAI,KAAY,KAAW,SACzB,IACE,kBAAC,UAAD;EACE,MAAK;EACL,WAAW;EACX,cAAY;EACF;EACV,UAAU,MAAU;GAElB,AADA,EAAM,iBAAiB,EACvB,GAAS;;YAGX,kBAAC,OAAD;GACE,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,eAAY;aAEZ,kBAAC,QAAD;IACE,GAAE;IACF,QAAO;IACP,aAAY;IACZ,eAAc;IACd,CAAA;GACE,CAAA;EACC,CAAA;CAIb,IAAI,IAAiC;CACrC,IAAI,KAAU,MAAM;EAClB,IAAI,IACF,kBAAC,GAAD;GACE,WAAW;GACX,eAAY;GACZ,CAAA;EAWJ,AATI,MACF,IACE,kBAAC,GAAD;GACE,WAAW;GACX,eAAY;GACZ,CAAA,GAIN,IACE,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACE,kBAAC,UAAD;KACM;KACJ,MAAK;KACL,WAAW;KACX,cAAY;KACZ,oBAAkB;KAClB,gBAAc;KACd,aAAW,KAAe,KAAA;KAChB;KACV,SAAS;eAET,kBAAC,QAAD;MAAM,WAAW;gBAAjB,CACE,kBAAC,QAAD;OAAM,WAAW;iBAAmB;OAAa,CAAA,EAChD,EACI;;KACA,CAAA;IACT,kBAAC,UAAD;KACE,MAAK;KACL,WAAW;KACX,cAAY;KACZ,OAAO;KACG;KACV,SAAS;eAER;KACM,CAAA;IACR;IACG;;;CAIV,OACE,kBAAC,OAAD;EAAK,WAAW;YACb,KAAc,kBAAC,OAAD;GAAK,WAAW;aAAkB;GAAkB,CAAA;EAC/D,CAAA"}

package/lib/esm/components/backoffice/filters/backofficeFilterAction.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeFilterAction.css.js","names":[],"sources":["../../../../../src/components/backoffice/filters/backofficeFilterAction.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles, vars } from '@plumile/ui';\n\nexport const action = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 7,\n    height: 7,\n    padding: 0,\n    borderRadius: 'md',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'borderSubtle',\n    backgroundColor: 'surfaceMuted',\n    color: 'brandPrimaryRed',\n    cursor: 'pointer',\n    textDecoration: 'none',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        color: vars.colors.text,\n        backgroundColor: vars.colors.primaryLight,\n        borderColor: vars.colors.primary,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const icon = sprinkles({\n  width: 4,\n  height: 4,\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeFilterAction.css.js","names":[],"sources":["../../../../../src/components/backoffice/filters/backofficeFilterAction.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 action = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 7,\n    height: 7,\n    padding: 0,\n    borderRadius: 'md',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'borderSubtle',\n    backgroundColor: 'surfaceMuted',\n    color: 'brandPrimaryRed',\n    cursor: 'pointer',\n    textDecoration: 'none',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        color: vars.colors.text,\n        backgroundColor: vars.colors.primaryLight,\n        borderColor: vars.colors.primary,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const icon = sprinkles({\n  width: 4,\n  height: 4,\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/filters/deferredFilterSearchInput.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"deferredFilterSearchInput.css.js","names":[],"sources":["../../../../../src/components/backoffice/filters/deferredFilterSearchInput.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui';\n\nconst MOBILE_MEDIA_QUERY = 'screen and (max-width: 767px)';\n\nexport const container = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    width: 'full',\n  }),\n  {\n    '@media': {\n      [MOBILE_MEDIA_QUERY]: {\n        alignItems: 'stretch',\n        flexDirection: 'column',\n      },\n    },\n  },\n]);\n\nexport const actions = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 1,\n  }),\n  {\n    flexShrink: 0,\n    '@media': {\n      [MOBILE_MEDIA_QUERY]: {\n        justifyContent: 'flex-end',\n      },\n    },\n  },\n]);\n"],"mappings":""}
+{"version":3,"file":"deferredFilterSearchInput.css.js","names":[],"sources":["../../../../../src/components/backoffice/filters/deferredFilterSearchInput.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nconst MOBILE_MEDIA_QUERY = 'screen and (max-width: 767px)';\n\nexport const container = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    width: 'full',\n  }),\n  {\n    '@media': {\n      [MOBILE_MEDIA_QUERY]: {\n        alignItems: 'stretch',\n        flexDirection: 'column',\n      },\n    },\n  },\n]);\n\nexport const actions = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 1,\n  }),\n  {\n    flexShrink: 0,\n    '@media': {\n      [MOBILE_MEDIA_QUERY]: {\n        justifyContent: 'flex-end',\n      },\n    },\n  },\n]);\n"],"mappings":""}

package/lib/esm/components/backoffice/filters/entityIdFilterField.css.js

@@ -1,7 +1,7 @@
 /* empty css                                   */
 //#region src/components/backoffice/filters/entityIdFilterField.css.ts
-var e = "txvbqb9ip txvbqbcp txvbqbany txvbqbu4g txvbqbjep", t = "oa1uye0 txvbqbnw7 txvbqbojg txvbqbpry txvbqbmjp txvbqb6 txvbqb9iy txvbqbcp txvbqbb9g txvbqb9my txvbqbk5y txvbqbt6p txvbqbv txvbqb1ry txvbqb1cp txvbqb1qg txvbqbwg txvbqbv41 txvbqbv9z txvbqb77 txvbqb6x txvbqb7k", n = "txvbqb9my txvbqbk5y txvbqb9ip txvbqbcp txvbqbl7g", r = "oa1uye1 txvbqb9i7 txvbqbva3 txvbqb8p txvbqbamg txvbqbl7g txvbqbt7g txvbqbuxg", i = "txvbqb9i7 txvbqbk5y txvbqbl7g txvbqbt7g txvbqbuxg txvbqb8y txvbqbamp", a = "txvbqbva3 txvbqb8y", o = "txvbqbvb7 txvbqb8p txvbqbamp", s = "txvbqb9ip txvbqbcp txvbqbany";
+var e = "txvbqb9ip txvbqbcp txvbqbu4g txvbqbjep txvbqbk5y", t = "oa1uye0 txvbqbnw7 txvbqbojg txvbqbpry txvbqbmjp txvbqb9iy txvbqbcp txvbqb9my txvbqbk5y txvbqb1ry txvbqb1cp txvbqb1qg txvbqbwg txvbqbv41 txvbqbv9z txvbqb77 txvbqb6x txvbqb7k", n = "oa1uye1 txvbqb6 txvbqb9ip txvbqbai7 txvbqbdoy txvbqbk5y txvbqbu7g txvbqbt6p txvbqbv txvbqb12g txvbqbv0t txvbqbv9z txvbqblag", r = "oa1uye2 txvbqb9ip txvbqbai7 txvbqbdoy txvbqbb9g txvbqbk5y txvbqbu7g", i = "txvbqb9my txvbqbk5y txvbqb9ip txvbqbcp txvbqbl7g", a = "oa1uye3 txvbqb9i7 txvbqbva3 txvbqb8p txvbqbamg txvbqbl7g txvbqbt7g txvbqbuxg", o = "txvbqb9i7 txvbqbk5y txvbqbl7g txvbqbt7g txvbqbuxg txvbqb8y txvbqbamp", s = "txvbqb9i7 txvbqbk5y txvbqbl7g txvbqbt7g txvbqbuxg txvbqbva3 txvbqb8y", c = "oa1uye5 oa1uye4 txvbqb6 txvbqb9jg txvbqbcp txvbqbdoy txvbqbtxy txvbqbc6y txvbqblag txvbqb1rp txvbqb1cp txvbqb1qg txvbqbwp txvbqbv41 txvbqbva3 txvbqbv txvbqb78 txvbqb6w txvbqb7k", l = "oa1uye6 oa1uye4 txvbqb6 txvbqb9jg txvbqbcp txvbqbdoy txvbqbtxy txvbqbc6y txvbqblag txvbqb1rp txvbqb1cp txvbqb1qg txvbqbwp txvbqbv41 txvbqbva3 txvbqbv txvbqb78 txvbqb6w txvbqb7k txvbqb1t7 txvbqbv45", u = "oa1uye7";
 //#endregion
-export { s as actions, e as container, r as labelText, o as pickText, t as pickerButton, a as placeholder, n as valueBox, i as valueText };
+export { u as actionIcon, l as clearButton, e as container, r as content, a as labelText, c as pickActionButton, n as pickerButton, t as pickerControl, s as placeholder, i as valueBox, o as valueText };
 
 //# sourceMappingURL=entityIdFilterField.css.js.map

package/lib/esm/components/backoffice/filters/entityIdFilterField.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"entityIdFilterField.css.js","names":[],"sources":["../../../../../src/components/backoffice/filters/entityIdFilterField.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, vars } from '@plumile/ui';\n\nexport const container = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 1,\n  width: 72,\n  maxWidth: 'full',\n});\n\nexport const pickerButton = style([\n  sprinkles({\n    appearance: 'none',\n    display: 'grid',\n    alignItems: 'center',\n    gap: 0.5,\n    flex: 1,\n    minWidth: 0,\n    textAlign: 'left',\n    cursor: 'pointer',\n    borderRadius: 'xl',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'border',\n    backgroundColor: 'surface',\n    color: 'text',\n    paddingX: 3,\n    paddingY: 1.5,\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    gridTemplateColumns: 'minmax(0, 1fr) auto',\n    minHeight: '2.5rem',\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: vars.colors.surfaceMuted,\n        borderColor: vars.colors.borderStrong,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n      '&:disabled': {\n        cursor: 'not-allowed',\n        opacity: 0.65,\n      },\n    },\n  },\n]);\n\nexport const valueBox = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  display: 'flex',\n  alignItems: 'center',\n  overflow: 'hidden',\n});\n\nexport const labelText = style([\n  sprinkles({\n    display: 'block',\n    color: 'textMuted',\n    fontSize: 'xs',\n    fontWeight: 'medium',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  }),\n  {\n    gridColumn: '1 / -1',\n  },\n]);\n\nexport const valueText = sprinkles({\n  display: 'block',\n  minWidth: 0,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n});\n\nexport const placeholder = sprinkles({\n  color: 'textMuted',\n  fontSize: 'sm',\n});\n\nexport const pickText = sprinkles({\n  color: 'accent',\n  fontSize: 'xs',\n  fontWeight: 'semibold',\n});\n\nexport const actions = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 1,\n});\n"],"mappings":""}
+{"version":3,"file":"entityIdFilterField.css.js","names":[],"sources":["../../../../../src/components/backoffice/filters/entityIdFilterField.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  width: 72,\n  maxWidth: 'full',\n  minWidth: 0,\n});\n\nexport const pickerControl = style([\n  sprinkles({\n    display: 'grid',\n    alignItems: 'center',\n    flex: 1,\n    minWidth: 0,\n    borderRadius: 'xl',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'border',\n    backgroundColor: 'surface',\n    color: 'text',\n    paddingX: 3,\n    paddingY: 1.5,\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    gridTemplateColumns: 'minmax(0, 1fr) auto auto',\n    gridTemplateAreas: '\"content pickAction clearAction\"',\n    columnGap: vars.spacing[1],\n    minHeight: '2.5rem',\n    width: '100%',\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.surfaceMuted,\n      },\n    },\n  },\n]);\n\nexport const pickerButton = style([\n  sprinkles({\n    appearance: 'none',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n    minWidth: 0,\n    width: 'full',\n    textAlign: 'left',\n    cursor: 'pointer',\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: 'text',\n    padding: 0,\n  }),\n  {\n    gridArea: 'content',\n    minHeight: '100%',\n    selectors: {\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n      '&:disabled': {\n        cursor: 'not-allowed',\n        opacity: 0.65,\n      },\n    },\n  },\n]);\n\nexport const content = style([\n  sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n    gap: 0.5,\n    minWidth: 0,\n    width: 'full',\n  }),\n  {\n    maxWidth: '100%',\n  },\n]);\n\nexport const valueBox = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  display: 'flex',\n  alignItems: 'center',\n  overflow: 'hidden',\n});\n\nexport const labelText = style([\n  sprinkles({\n    display: 'block',\n    color: 'textMuted',\n    fontSize: 'xs',\n    fontWeight: 'medium',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  }),\n  {\n    minWidth: 0,\n  },\n]);\n\nexport const valueText = sprinkles({\n  display: 'block',\n  minWidth: 0,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n});\n\nexport const placeholder = sprinkles({\n  display: 'block',\n  minWidth: 0,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  color: 'textMuted',\n  fontSize: 'sm',\n});\n\nconst actionButtonBase = style([\n  sprinkles({\n    appearance: 'none',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 7,\n    height: 7,\n    padding: 0,\n    borderRadius: 'lg',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'borderSubtle',\n    backgroundColor: 'surface',\n    color: 'textMuted',\n    cursor: 'pointer',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    alignSelf: 'center',\n    selectors: {\n      '&:hover:not(:disabled)': {\n        color: vars.colors.text,\n        backgroundColor: vars.colors.surfaceMuted,\n        borderColor: vars.colors.borderStrong,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n      '&:disabled': {\n        cursor: 'not-allowed',\n        opacity: 0.65,\n      },\n    },\n  },\n]);\n\nexport const pickActionButton = style([\n  actionButtonBase,\n  {\n    gridArea: 'pickAction',\n  },\n]);\n\nexport const clearButton = style([\n  actionButtonBase,\n  sprinkles({\n    borderRadius: 'full',\n    backgroundColor: 'surfaceMuted',\n  }),\n  {\n    gridArea: 'clearAction',\n  },\n]);\n\nexport const actionIcon = style({\n  width: '1rem',\n  height: '1rem',\n});\n"],"mappings":""}