@plumile/backoffice-react 0.1.125 → 0.1.131

package/lib/esm/auth/login/loginPage.css.js

@@ -1,3 +1,4 @@
+/* empty css                                                           */
 /* empty css                         */
 //#region src/auth/login/loginPage.css.ts
 var e = "txvbqbdr8 txvbqbf6i txvbqbffw", t = "txvbqbdr8 txvbqbf6i txvbqb17w0", n = "txvbqb19dn txvbqb9j txvbqbm9g txvbqblzp", r = "txvbqbey txvbqb19dn txvbqbdr8 txvbqbff6 txvbqbq1l txvbqbn84", i = "txvbqb197r txvbqbi1s txvbqbdxd txvbqb2is txvbqb19e7", a = "txvbqbey txvbqbdr8 txvbqbf91 txvbqbffj txvbqbjus txvbqbq0v", o = "w8yhmy0 txvbqb1933 txvbqb1g5 txvbqb2e3 txvbqb19d9 txvbqbv txvbqbfd0 txvbqbux3 txvbqb3f txvbqb7h txvbqb76 txvbqb7t txvbqb1bwh txvbqb1czl", s = "txvbqbypl txvbqbzn6 txvbqb10kr txvbqbvwu txvbqbabd txvbqba5l txvbqbalh txvbqbahi", c = "txvbqbdr8 txvbqbf6i txvbqbffw", l = "txvbqb17w0", u = "txvbqbm9g txvbqbam txvbqbfdd txvbqb19d9 txvbqbkvm", d = "txvbqbq18", f = "w8yhmy1 txvbqb1cw txvbqb1w1 txvbqb2et txvbqb19d9 txvbqb1983 txvbqb7h txvbqb75 txvbqb7t";

package/lib/esm/auth/login/loginPage.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"loginPage.css.js","names":[],"sources":["../../../../src/auth/login/loginPage.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '@plumile/ui/theme/sprinkles.css.js';\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const stack = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n\nexport const formSurface = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  width: 'full',\n});\n\nexport const helper = sprinkles({\n  color: 'brandDarkGray',\n  fontSize: 'sm',\n  margin: 0,\n  lineHeight: 1.6,\n});\n\nexport const divider = sprinkles({\n  alignItems: 'center',\n  color: 'brandDarkGray',\n  display: 'flex',\n  gap: 2,\n  marginTop: 5,\n  marginBottom: 3,\n});\n\nexport const dividerLine = sprinkles({\n  backgroundColor: 'brandPrimaryRed',\n  height: 'px',\n  flex: 1,\n  borderRadius: 'full',\n  opacity: 35,\n});\n\nexport const actionsRow = sprinkles({\n  alignItems: 'center',\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 3,\n  justifyContent: 'space-between',\n  marginTop: 3,\n});\n\nexport const inlineLink = style([\n  sprinkles({\n    backgroundColor: 'transparent',\n    borderWidth: 0,\n    borderStyle: 'none',\n    color: 'brandPrimaryRed',\n    cursor: 'pointer',\n    fontWeight: 'semibold',\n    padding: 0,\n    textDecoration: 'none',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  stateSprinkles({\n    color: { hover: 'brandSecondaryOrange' },\n    textDecoration: { hover: 'underline' },\n  }),\n]);\n\nexport const panel = sprinkles({\n  borderTopLeftRadius: 'none',\n  borderTopRightRadius: 'none',\n  borderBottomLeftRadius: '2xl',\n  borderBottomRightRadius: '2xl',\n  paddingX: 6,\n  paddingY: 6,\n});\n\nexport const block = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n\nexport const fullWidth = sprinkles({\n  width: 'full',\n});\n\nexport const panelTitle = sprinkles({\n  margin: 0,\n  fontSize: 'xl',\n  fontWeight: 'bold',\n  color: 'brandPrimaryRed',\n  letterSpacing: 'tight',\n});\n\nexport const footer = sprinkles({\n  marginTop: 4,\n});\n\nexport const brandGhostButton = style([\n  sprinkles({\n    borderColor: 'brandPrimaryRed',\n    borderWidth: 'px',\n    borderStyle: 'solid',\n    color: 'brandPrimaryRed',\n    backgroundColor: 'brandLightGray',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: `color-mix(in srgb, ${vars.colors.brandPrimaryRed} 8%, transparent)`,\n        color: vars.colors.brandSecondaryOrange,\n        borderColor: vars.colors.brandSecondaryOrange,\n      },\n    },\n  },\n]);\n"],"mappings":""}
+{"version":3,"file":"loginPage.css.js","names":[],"sources":["../../../../src/auth/login/loginPage.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '@plumile/ui/theme/sprinkles.css.js';\nimport { vars } from '@plumile/ui/theme/themeContract.css.js';\n\nexport const stack = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n\nexport const formSurface = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  width: 'full',\n});\n\nexport const helper = sprinkles({\n  color: 'brandDarkGray',\n  fontSize: 'sm',\n  margin: 0,\n  lineHeight: 1.6,\n});\n\nexport const divider = sprinkles({\n  alignItems: 'center',\n  color: 'brandDarkGray',\n  display: 'flex',\n  gap: 2,\n  marginTop: 5,\n  marginBottom: 3,\n});\n\nexport const dividerLine = sprinkles({\n  backgroundColor: 'brandPrimaryRed',\n  height: 'px',\n  flex: 1,\n  borderRadius: 'full',\n  opacity: 35,\n});\n\nexport const actionsRow = sprinkles({\n  alignItems: 'center',\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 3,\n  justifyContent: 'space-between',\n  marginTop: 3,\n});\n\nexport const inlineLink = style([\n  sprinkles({\n    backgroundColor: 'transparent',\n    borderWidth: 0,\n    borderStyle: 'none',\n    color: 'brandPrimaryRed',\n    cursor: 'pointer',\n    fontWeight: 'semibold',\n    padding: 0,\n    textDecoration: 'none',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  stateSprinkles({\n    color: { hover: 'brandSecondaryOrange' },\n    textDecoration: { hover: 'underline' },\n  }),\n]);\n\nexport const panel = sprinkles({\n  borderTopLeftRadius: 'none',\n  borderTopRightRadius: 'none',\n  borderBottomLeftRadius: '2xl',\n  borderBottomRightRadius: '2xl',\n  paddingX: 6,\n  paddingY: 6,\n});\n\nexport const block = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n\nexport const fullWidth = sprinkles({\n  width: 'full',\n});\n\nexport const panelTitle = sprinkles({\n  margin: 0,\n  fontSize: 'xl',\n  fontWeight: 'bold',\n  color: 'brandPrimaryRed',\n  letterSpacing: 'tight',\n});\n\nexport const footer = sprinkles({\n  marginTop: 4,\n});\n\nexport const brandGhostButton = style([\n  sprinkles({\n    borderColor: 'brandPrimaryRed',\n    borderWidth: 'px',\n    borderStyle: 'solid',\n    color: 'brandPrimaryRed',\n    backgroundColor: 'brandLightGray',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: `color-mix(in srgb, ${vars.colors.brandPrimaryRed} 8%, transparent)`,\n        color: vars.colors.brandSecondaryOrange,\n        borderColor: vars.colors.brandSecondaryOrange,\n      },\n    },\n  },\n]);\n"],"mappings":""}

package/lib/esm/components/backoffice/billing/BackofficeBillingUsageChart.js

@@ -6,55 +6,66 @@ import { TimeSeriesLineChart as s } from "@plumile/ui/components/charts/TimeSeri
 import { formatCurrencyAmount as c } from "@plumile/ui/shared/currencyAmount.js";
 import { toUtcDailyCategorySeries as l } from "@plumile/ui/shared/timeSeries.js";
 //#region src/components/backoffice/billing/BackofficeBillingUsageChart.tsx
-var u = "->", d = ({ ariaLabel: d, buckets: f, categories: p, currency: m, emptyLabel: h, from: g, rangePrefix: _, to: v, totalAmount: y }) => {
-	let b = r(() => p.map((e) => e.id), [p]), x = r(() => Object.fromEntries(p.map((e) => [e.id, e.color])), [p]), S = r(() => Object.fromEntries(p.map((e) => [e.id, e.label])), [p]), C = r(() => g == null || v == null ? [] : l({
-		fromIsoDateTime: g,
-		toIsoDateTime: v,
-		buckets: f,
-		categories: b
+var u = "->", d = (e, t) => new Intl.NumberFormat(void 0, {
+	style: "currency",
+	currency: t,
+	minimumFractionDigits: 0,
+	maximumFractionDigits: 0
+}).format(e), f = ({ ariaLabel: f, buckets: p, categories: m, currency: h, emptyLabel: g, from: _, rangePrefix: v, to: y, totalAmount: b }) => {
+	let x = r(() => m.map((e) => e.id), [m]), S = r(() => Object.fromEntries(m.map((e) => [e.id, e.color])), [m]), C = r(() => Object.fromEntries(m.map((e) => [e.id, e.label])), [m]), w = r(() => _ == null || y == null ? [] : l({
+		fromIsoDateTime: _,
+		toIsoDateTime: y,
+		buckets: p,
+		categories: x
 	}), [
-		f,
-		b,
-		g,
-		v
-	]), w = (e) => c({
+		p,
+		x,
+		_,
+		y
+	]), T = (e) => c({
 		amount: e,
-		currency: m
+		currency: h
 	});
-	return f.length === 0 ? /* @__PURE__ */ i("p", {
+	return p.length === 0 ? /* @__PURE__ */ i("p", {
 		className: e,
-		children: h
+		children: g
 	}) : /* @__PURE__ */ a("div", {
 		className: t,
 		children: [
 			/* @__PURE__ */ i("p", {
 				className: n,
-				children: w(y)
+				children: T(b)
 			}),
-			g != null && v != null && /* @__PURE__ */ a("p", {
+			_ != null && y != null && /* @__PURE__ */ a("p", {
 				className: "txvbqb96 txvbqb19cd txvbqbm9g",
 				children: [
-					_,
+					v,
 					" ",
-					/* @__PURE__ */ i(o, { value: g }),
+					/* @__PURE__ */ i(o, { value: _ }),
 					" ",
 					u,
 					" ",
-					/* @__PURE__ */ i(o, { value: v })
+					/* @__PURE__ */ i(o, { value: y })
 				]
 			}),
 			/* @__PURE__ */ i(s, {
-				ariaLabel: d,
-				categoryColorById: x,
-				categoryLabel: (e) => S[e] ?? e,
-				categoryOrder: b,
-				formatValue: w,
-				series: C
+				ariaLabel: f,
+				categoryColorById: S,
+				categoryLabel: (e) => C[e] ?? e,
+				categoryOrder: x,
+				formatValue: T,
+				series: w,
+				yAxis: {
+					min: 0,
+					minTickStep: 1,
+					maxTickCount: 5,
+					formatValue: (e) => d(e, h)
+				}
 			})
 		]
 	});
 };
 //#endregion
-export { d as BackofficeBillingUsageChart, d as default };
+export { f as BackofficeBillingUsageChart, f as default };
 
 //# sourceMappingURL=BackofficeBillingUsageChart.js.map

package/lib/esm/components/backoffice/billing/BackofficeBillingUsageChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeBillingUsageChart.js","names":[],"sources":["../../../../../src/components/backoffice/billing/BackofficeBillingUsageChart.tsx"],"sourcesContent":["import { useMemo, type JSX } from 'react';\nimport { FormattedDate } from '@plumile/ui/atomic/atoms/formatted-date/FormattedDate.js';\nimport { TimeSeriesLineChart } from '@plumile/ui/components/charts/TimeSeriesLineChart.js';\nimport { formatCurrencyAmount } from '@plumile/ui/shared/currencyAmount.js';\nimport { toUtcDailyCategorySeries } from '@plumile/ui/shared/timeSeries.js';\n\nimport * as styles from './backofficeBillingUsageChart.css.js';\n\nexport type BackofficeBillingUsageChartBucket = {\n  readonly day: string;\n  readonly category: string;\n  readonly value: number;\n};\n\nexport type BackofficeBillingUsageChartCategory = {\n  readonly id: string;\n  readonly label: string;\n  readonly color: string;\n};\n\nexport type BackofficeBillingUsageChartProps = {\n  readonly currency: string;\n  readonly totalAmount: number;\n  readonly from: string | null;\n  readonly to: string | null;\n  readonly buckets: readonly BackofficeBillingUsageChartBucket[];\n  readonly categories: readonly BackofficeBillingUsageChartCategory[];\n  readonly emptyLabel: string;\n  readonly rangePrefix: string;\n  readonly ariaLabel: string;\n};\n\nconst dateSeparator = '->';\n\nexport const BackofficeBillingUsageChart = ({\n  ariaLabel,\n  buckets,\n  categories,\n  currency,\n  emptyLabel,\n  from,\n  rangePrefix,\n  to,\n  totalAmount,\n}: BackofficeBillingUsageChartProps): JSX.Element => {\n  const categoryOrder = useMemo(() => {\n    return categories.map((category) => {\n      return category.id;\n    });\n  }, [categories]);\n\n  const categoryColorById = useMemo(() => {\n    return Object.fromEntries(\n      categories.map((category) => {\n        return [category.id, category.color];\n      }),\n    );\n  }, [categories]);\n\n  const categoryLabelById = useMemo(() => {\n    return Object.fromEntries(\n      categories.map((category) => {\n        return [category.id, category.label];\n      }),\n    );\n  }, [categories]);\n\n  const series = useMemo(() => {\n    if (from == null || to == null) {\n      return [];\n    }\n\n    return toUtcDailyCategorySeries({\n      fromIsoDateTime: from,\n      toIsoDateTime: to,\n      buckets,\n      categories: categoryOrder,\n    });\n  }, [buckets, categoryOrder, from, to]);\n\n  const formatChartValue = (value: number): string => {\n    return formatCurrencyAmount({\n      amount: value,\n      currency,\n    });\n  };\n\n  if (buckets.length === 0) {\n    return <p className={styles.rangeText}>{emptyLabel}</p>;\n  }\n\n  return (\n    <div className={styles.root}>\n      <p className={styles.totalValue}>{formatChartValue(totalAmount)}</p>\n      {from != null && to != null && (\n        <p className={styles.rangeText}>\n          {rangePrefix} <FormattedDate value={from} /> {dateSeparator}{' '}\n          <FormattedDate value={to} />\n        </p>\n      )}\n      <TimeSeriesLineChart\n        ariaLabel={ariaLabel}\n        categoryColorById={categoryColorById}\n        categoryLabel={(category) => {\n          return categoryLabelById[category] ?? category;\n        }}\n        categoryOrder={categoryOrder}\n        formatValue={formatChartValue}\n        series={series}\n      />\n    </div>\n  );\n};\n\nexport default BackofficeBillingUsageChart;\n"],"mappings":";;;;;;;;AAgCA,IAAM,IAAgB,MAET,KAA+B,EAC1C,cACA,YACA,eACA,aACA,eACA,SACA,gBACA,OACA,qBACmD;CACnD,IAAM,IAAgB,QACb,EAAW,KAAK,MACd,EAAS,GAChB,EACD,CAAC,EAAW,CAAC,EAEV,IAAoB,QACjB,OAAO,YACZ,EAAW,KAAK,MACP,CAAC,EAAS,IAAI,EAAS,MAAM,CACpC,CACH,EACA,CAAC,EAAW,CAAC,EAEV,IAAoB,QACjB,OAAO,YACZ,EAAW,KAAK,MACP,CAAC,EAAS,IAAI,EAAS,MAAM,CACpC,CACH,EACA,CAAC,EAAW,CAAC,EAEV,IAAS,QACT,KAAQ,QAAQ,KAAM,OACjB,EAAE,GAGJ,EAAyB;EAC9B,iBAAiB;EACjB,eAAe;EACf;EACA,YAAY;EACb,CAAC,EACD;EAAC;EAAS;EAAe;EAAM;EAAG,CAAC,EAEhC,KAAoB,MACjB,EAAqB;EAC1B,QAAQ;EACR;EACD,CAAC;CAOJ,OAJI,EAAQ,WAAW,IACd,kBAAC,KAAD;EAAG,WAAW;YAAmB;EAAe,CAAA,GAIvD,kBAAC,OAAD;EAAK,WAAW;YAAhB;GACE,kBAAC,KAAD;IAAG,WAAW;cAAoB,EAAiB,EAAY;IAAK,CAAA;GACnE,KAAQ,QAAQ,KAAM,QACrB,kBAAC,KAAD;IAAG,WAAW;cAAd;KACG;KAAY;KAAC,kBAAC,GAAD,EAAe,OAAO,GAAQ,CAAA;;KAAE;KAAe;KAC7D,kBAAC,GAAD,EAAe,OAAO,GAAM,CAAA;KAC1B;;GAEN,kBAAC,GAAD;IACa;IACQ;IACnB,gBAAgB,MACP,EAAkB,MAAa;IAEzB;IACf,aAAa;IACL;IACR,CAAA;GACE"}
+{"version":3,"file":"BackofficeBillingUsageChart.js","names":[],"sources":["../../../../../src/components/backoffice/billing/BackofficeBillingUsageChart.tsx"],"sourcesContent":["import { useMemo, type JSX } from 'react';\nimport { FormattedDate } from '@plumile/ui/atomic/atoms/formatted-date/FormattedDate.js';\nimport { TimeSeriesLineChart } from '@plumile/ui/components/charts/TimeSeriesLineChart.js';\nimport { formatCurrencyAmount } from '@plumile/ui/shared/currencyAmount.js';\nimport { toUtcDailyCategorySeries } from '@plumile/ui/shared/timeSeries.js';\n\nimport * as styles from './backofficeBillingUsageChart.css.js';\n\nexport type BackofficeBillingUsageChartBucket = {\n  readonly day: string;\n  readonly category: string;\n  readonly value: number;\n};\n\nexport type BackofficeBillingUsageChartCategory = {\n  readonly id: string;\n  readonly label: string;\n  readonly color: string;\n};\n\nexport type BackofficeBillingUsageChartProps = {\n  readonly currency: string;\n  readonly totalAmount: number;\n  readonly from: string | null;\n  readonly to: string | null;\n  readonly buckets: readonly BackofficeBillingUsageChartBucket[];\n  readonly categories: readonly BackofficeBillingUsageChartCategory[];\n  readonly emptyLabel: string;\n  readonly rangePrefix: string;\n  readonly ariaLabel: string;\n};\n\nconst dateSeparator = '->';\n\nconst formatBillingAxisValue = (value: number, currency: string): string => {\n  return new Intl.NumberFormat(undefined, {\n    style: 'currency',\n    currency,\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 0,\n  }).format(value);\n};\n\nexport const BackofficeBillingUsageChart = ({\n  ariaLabel,\n  buckets,\n  categories,\n  currency,\n  emptyLabel,\n  from,\n  rangePrefix,\n  to,\n  totalAmount,\n}: BackofficeBillingUsageChartProps): JSX.Element => {\n  const categoryOrder = useMemo(() => {\n    return categories.map((category) => {\n      return category.id;\n    });\n  }, [categories]);\n\n  const categoryColorById = useMemo(() => {\n    return Object.fromEntries(\n      categories.map((category) => {\n        return [category.id, category.color];\n      }),\n    );\n  }, [categories]);\n\n  const categoryLabelById = useMemo(() => {\n    return Object.fromEntries(\n      categories.map((category) => {\n        return [category.id, category.label];\n      }),\n    );\n  }, [categories]);\n\n  const series = useMemo(() => {\n    if (from == null || to == null) {\n      return [];\n    }\n\n    return toUtcDailyCategorySeries({\n      fromIsoDateTime: from,\n      toIsoDateTime: to,\n      buckets,\n      categories: categoryOrder,\n    });\n  }, [buckets, categoryOrder, from, to]);\n\n  const formatChartValue = (value: number): string => {\n    return formatCurrencyAmount({\n      amount: value,\n      currency,\n    });\n  };\n\n  if (buckets.length === 0) {\n    return <p className={styles.rangeText}>{emptyLabel}</p>;\n  }\n\n  return (\n    <div className={styles.root}>\n      <p className={styles.totalValue}>{formatChartValue(totalAmount)}</p>\n      {from != null && to != null && (\n        <p className={styles.rangeText}>\n          {rangePrefix} <FormattedDate value={from} /> {dateSeparator}{' '}\n          <FormattedDate value={to} />\n        </p>\n      )}\n      <TimeSeriesLineChart\n        ariaLabel={ariaLabel}\n        categoryColorById={categoryColorById}\n        categoryLabel={(category) => {\n          return categoryLabelById[category] ?? category;\n        }}\n        categoryOrder={categoryOrder}\n        formatValue={formatChartValue}\n        series={series}\n        yAxis={{\n          min: 0,\n          minTickStep: 1,\n          maxTickCount: 5,\n          formatValue: (value) => {\n            return formatBillingAxisValue(value, currency);\n          },\n        }}\n      />\n    </div>\n  );\n};\n\nexport default BackofficeBillingUsageChart;\n"],"mappings":";;;;;;;;AAgCA,IAAM,IAAgB,MAEhB,KAA0B,GAAe,MACtC,IAAI,KAAK,aAAa,KAAA,GAAW;CACtC,OAAO;CACP;CACA,uBAAuB;CACvB,uBAAuB;CACxB,CAAC,CAAC,OAAO,EAAM,EAGL,KAA+B,EAC1C,cACA,YACA,eACA,aACA,eACA,SACA,gBACA,OACA,qBACmD;CACnD,IAAM,IAAgB,QACb,EAAW,KAAK,MACd,EAAS,GAChB,EACD,CAAC,EAAW,CAAC,EAEV,IAAoB,QACjB,OAAO,YACZ,EAAW,KAAK,MACP,CAAC,EAAS,IAAI,EAAS,MAAM,CACpC,CACH,EACA,CAAC,EAAW,CAAC,EAEV,IAAoB,QACjB,OAAO,YACZ,EAAW,KAAK,MACP,CAAC,EAAS,IAAI,EAAS,MAAM,CACpC,CACH,EACA,CAAC,EAAW,CAAC,EAEV,IAAS,QACT,KAAQ,QAAQ,KAAM,OACjB,EAAE,GAGJ,EAAyB;EAC9B,iBAAiB;EACjB,eAAe;EACf;EACA,YAAY;EACb,CAAC,EACD;EAAC;EAAS;EAAe;EAAM;EAAG,CAAC,EAEhC,KAAoB,MACjB,EAAqB;EAC1B,QAAQ;EACR;EACD,CAAC;CAOJ,OAJI,EAAQ,WAAW,IACd,kBAAC,KAAD;EAAG,WAAW;YAAmB;EAAe,CAAA,GAIvD,kBAAC,OAAD;EAAK,WAAW;YAAhB;GACE,kBAAC,KAAD;IAAG,WAAW;cAAoB,EAAiB,EAAY;IAAK,CAAA;GACnE,KAAQ,QAAQ,KAAM,QACrB,kBAAC,KAAD;IAAG,WAAW;cAAd;KACG;KAAY;KAAC,kBAAC,GAAD,EAAe,OAAO,GAAQ,CAAA;;KAAE;KAAe;KAC7D,kBAAC,GAAD,EAAe,OAAO,GAAM,CAAA;KAC1B;;GAEN,kBAAC,GAAD;IACa;IACQ;IACnB,gBAAgB,MACP,EAAkB,MAAa;IAEzB;IACf,aAAa;IACL;IACR,OAAO;KACL,KAAK;KACL,aAAa;KACb,cAAc;KACd,cAAc,MACL,EAAuB,GAAO,EAAS;KAEjD;IACD,CAAA;GACE"}

package/lib/esm/components/backoffice/detail/BackofficeDetailBadgeRow.js

@@ -8,9 +8,10 @@ var i = ({ items: i }) => {
 	return /* @__PURE__ */ t("div", {
 		className: e,
 		children: i.map((e) => {
-			let n = typeof e.label == "function" ? e.label(a) : e.label;
+			let n = typeof e.label == "function" ? e.label(a) : e.label, i = typeof e.title == "function" ? e.title(a) : e.title;
 			return /* @__PURE__ */ t(r, {
 				tone: e.tone ?? "neutral",
+				title: i,
 				children: n
 			}, e.id);
 		})

package/lib/esm/components/backoffice/detail/BackofficeDetailBadgeRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeDetailBadgeRow.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailBadgeRow.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport { type JSX } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { BackofficeBadgeItem } from '@plumile/backoffice-core/types.js';\nimport { Tag } from '@plumile/ui/backoffice/atoms/tag/Tag.js';\n\nimport * as styles from './backofficeDetailBadgeRow.css.js';\n\nexport type BackofficeDetailBadgeRowProps = {\n  items: readonly BackofficeBadgeItem[];\n};\n\nexport const BackofficeDetailBadgeRow = ({\n  items,\n}: BackofficeDetailBadgeRowProps): JSX.Element => {\n  const { t } = useTranslation();\n  return (\n    <div className={styles.row}>\n      {items.map((item) => {\n        const label =\n          typeof item.label === 'function' ? item.label(t) : item.label;\n        return (\n          <Tag key={item.id} tone={item.tone ?? 'neutral'}>\n            {label}\n          </Tag>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default BackofficeDetailBadgeRow;\n"],"mappings":";;;;;AAaA,IAAa,KAA4B,EACvC,eACgD;CAChD,IAAM,EAAE,SAAM,GAAgB;CAC9B,OACE,kBAAC,OAAD;EAAK,WAAW;YACb,EAAM,KAAK,MAAS;GACnB,IAAM,IACJ,OAAO,EAAK,SAAU,aAAa,EAAK,MAAM,EAAE,GAAG,EAAK;GAC1D,OACE,kBAAC,GAAD;IAAmB,MAAM,EAAK,QAAQ;cACnC;IACG,EAFI,EAAK,GAET;IAER;EACE,CAAA"}
+{"version":3,"file":"BackofficeDetailBadgeRow.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailBadgeRow.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport { type JSX } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { BackofficeBadgeItem } from '@plumile/backoffice-core/types.js';\nimport { Tag } from '@plumile/ui/backoffice/atoms/tag/Tag.js';\n\nimport * as styles from './backofficeDetailBadgeRow.css.js';\n\nexport type BackofficeDetailBadgeRowProps = {\n  items: readonly BackofficeBadgeItem[];\n};\n\nexport const BackofficeDetailBadgeRow = ({\n  items,\n}: BackofficeDetailBadgeRowProps): JSX.Element => {\n  const { t } = useTranslation();\n  return (\n    <div className={styles.row}>\n      {items.map((item) => {\n        const label =\n          typeof item.label === 'function' ? item.label(t) : item.label;\n        const title =\n          typeof item.title === 'function' ? item.title(t) : item.title;\n        return (\n          <Tag key={item.id} tone={item.tone ?? 'neutral'} title={title}>\n            {label}\n          </Tag>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default BackofficeDetailBadgeRow;\n"],"mappings":";;;;;AAaA,IAAa,KAA4B,EACvC,eACgD;CAChD,IAAM,EAAE,SAAM,GAAgB;CAC9B,OACE,kBAAC,OAAD;EAAK,WAAW;YACb,EAAM,KAAK,MAAS;GACnB,IAAM,IACJ,OAAO,EAAK,SAAU,aAAa,EAAK,MAAM,EAAE,GAAG,EAAK,OACpD,IACJ,OAAO,EAAK,SAAU,aAAa,EAAK,MAAM,EAAE,GAAG,EAAK;GAC1D,OACE,kBAAC,GAAD;IAAmB,MAAM,EAAK,QAAQ;IAAkB;cACrD;IACG,EAFI,EAAK,GAET;IAER;EACE,CAAA"}

package/lib/esm/components/backoffice/detail/BackofficeKpiStrip.js

@@ -1,31 +1,31 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
-import { card as t, compactGroup as n, group as r, value as i } from "./backofficeKpiStrip.css.js";
-import { cx as a } from "@plumile/ui/theme/tools.js";
-import { jsx as o } from "react/jsx-runtime";
-import { CopyableText as s } from "@plumile/ui/backoffice/atoms/copyable_text/CopyableText.js";
-import { MetricCard as c } from "@plumile/ui/components/dashboard/metric_card/MetricCard.js";
-import { MetricTileGroup as l } from "@plumile/ui/components/dashboard/metric_tile_group/MetricTileGroup.js";
+import { card as t, cardTone as n, compactGroup as r, group as i, value as a } from "./backofficeKpiStrip.css.js";
+import { cx as o } from "@plumile/ui/theme/tools.js";
+import { jsx as s } from "react/jsx-runtime";
+import { CopyableText as c } from "@plumile/ui/backoffice/atoms/copyable_text/CopyableText.js";
+import { MetricCard as l } from "@plumile/ui/components/dashboard/metric_card/MetricCard.js";
+import { MetricTileGroup as u } from "@plumile/ui/components/dashboard/metric_tile_group/MetricTileGroup.js";
 //#region src/components/backoffice/detail/BackofficeKpiStrip.tsx
-var u = ({ items: u, density: d = "comfortable" }) => {
-	let { t: f } = e();
-	if (u.length === 0) return null;
-	let p = r;
-	return d === "compact" && (p = a(r, n)), /* @__PURE__ */ o(l, {
-		className: p,
-		children: u.map((e) => {
-			let n = e.value;
-			return e.copyValue != null && e.copyValue !== "" && (n = /* @__PURE__ */ o(s, {
+var d = ({ items: d, density: f = "comfortable" }) => {
+	let { t: p } = e();
+	if (d.length === 0) return null;
+	let m = i;
+	return f === "compact" && (m = o(i, r)), /* @__PURE__ */ s(u, {
+		className: m,
+		children: d.map((e) => {
+			let r = e.value;
+			return e.copyValue != null && e.copyValue !== "" && (r = /* @__PURE__ */ s(c, {
 				value: e.copyValue,
 				copyValue: e.copyValue,
 				truncate: !1,
-				copyLabel: f("common.actions.copy"),
-				copiedLabel: f("common.actions.copied")
-			})), /* @__PURE__ */ o(c, {
-				className: t,
+				copyLabel: p("common.actions.copy"),
+				copiedLabel: p("common.actions.copied")
+			})), /* @__PURE__ */ s(l, {
+				className: o(t, n({ tone: e.tone ?? "neutral" })),
 				label: e.label,
-				value: /* @__PURE__ */ o("span", {
-					className: i,
-					children: n
+				value: /* @__PURE__ */ s("span", {
+					className: a,
+					children: r
 				}),
 				hint: e.hint
 			}, e.id);
@@ -33,6 +33,6 @@ var u = ({ items: u, density: d = "comfortable" }) => {
 	});
 };
 //#endregion
-export { u as BackofficeKpiStrip, u as default };
+export { d as BackofficeKpiStrip, d as default };
 
 //# sourceMappingURL=BackofficeKpiStrip.js.map

package/lib/esm/components/backoffice/detail/BackofficeKpiStrip.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeKpiStrip.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeKpiStrip.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { CopyableText } from '@plumile/ui/backoffice/atoms/copyable_text/CopyableText.js';\nimport { MetricCard } from '@plumile/ui/components/dashboard/metric_card/MetricCard.js';\nimport { MetricTileGroup } from '@plumile/ui/components/dashboard/metric_tile_group/MetricTileGroup.js';\nimport { cx } from '@plumile/ui/theme/tools.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport * as styles from './backofficeKpiStrip.css.js';\n\nexport type BackofficeKpiTone =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger';\n\nexport type BackofficeKpiItem = {\n  readonly id: string;\n  readonly label: string;\n  readonly value: ReactNode;\n  readonly hint?: ReactNode;\n  readonly tone?: BackofficeKpiTone;\n  readonly copyValue?: string;\n};\n\nexport type BackofficeKpiStripProps = {\n  readonly items: readonly BackofficeKpiItem[];\n  readonly density?: 'compact' | 'comfortable';\n};\n\nexport const BackofficeKpiStrip = ({\n  items,\n  density = 'comfortable',\n}: BackofficeKpiStripProps): JSX.Element | null => {\n  const { t } = useBackofficeReactTranslation();\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  let groupClassName: string | undefined = styles.group;\n  if (density === 'compact') {\n    groupClassName = cx(styles.group, styles.compactGroup);\n  }\n\n  return (\n    <MetricTileGroup className={groupClassName}>\n      {items.map((item) => {\n        let valueNode = item.value;\n        if (item.copyValue != null && item.copyValue !== '') {\n          valueNode = (\n            <CopyableText\n              value={item.copyValue}\n              copyValue={item.copyValue}\n              truncate={false}\n              copyLabel={t('common.actions.copy')}\n              copiedLabel={t('common.actions.copied')}\n            />\n          );\n        }\n\n        return (\n          <MetricCard\n            key={item.id}\n            className={styles.card}\n            label={item.label}\n            value={<span className={styles.value}>{valueNode}</span>}\n            hint={item.hint}\n          />\n        );\n      })}\n    </MetricTileGroup>\n  );\n};\n\nexport default BackofficeKpiStrip;\n"],"mappings":";;;;;;;;AA8BA,IAAa,KAAsB,EACjC,UACA,aAAU,oBACuC;CACjD,IAAM,EAAE,SAAM,GAA+B;CAE7C,IAAI,EAAM,WAAW,GACnB,OAAO;CAGT,IAAI,IAAqC;CAKzC,OAJI,MAAY,cACd,IAAiB,EAAG,GAAc,EAAoB,GAItD,kBAAC,GAAD;EAAiB,WAAW;YACzB,EAAM,KAAK,MAAS;GACnB,IAAI,IAAY,EAAK;GAarB,OAZI,EAAK,aAAa,QAAQ,EAAK,cAAc,OAC/C,IACE,kBAAC,GAAD;IACE,OAAO,EAAK;IACZ,WAAW,EAAK;IAChB,UAAU;IACV,WAAW,EAAE,sBAAsB;IACnC,aAAa,EAAE,wBAAwB;IACvC,CAAA,GAKJ,kBAAC,GAAD;IAEE,WAAW;IACX,OAAO,EAAK;IACZ,OAAO,kBAAC,QAAD;KAAM,WAAW;eAAe;KAAiB,CAAA;IACxD,MAAM,EAAK;IACX,EALK,EAAK,GAKV;IAEJ;EACc,CAAA"}
+{"version":3,"file":"BackofficeKpiStrip.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeKpiStrip.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { CopyableText } from '@plumile/ui/backoffice/atoms/copyable_text/CopyableText.js';\nimport { MetricCard } from '@plumile/ui/components/dashboard/metric_card/MetricCard.js';\nimport { MetricTileGroup } from '@plumile/ui/components/dashboard/metric_tile_group/MetricTileGroup.js';\nimport { cx } from '@plumile/ui/theme/tools.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport * as styles from './backofficeKpiStrip.css.js';\n\nexport type BackofficeKpiTone =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger';\n\nexport type BackofficeKpiItem = {\n  readonly id: string;\n  readonly label: string;\n  readonly value: ReactNode;\n  readonly hint?: ReactNode;\n  readonly tone?: BackofficeKpiTone;\n  readonly copyValue?: string;\n};\n\nexport type BackofficeKpiStripProps = {\n  readonly items: readonly BackofficeKpiItem[];\n  readonly density?: 'compact' | 'comfortable';\n};\n\nexport const BackofficeKpiStrip = ({\n  items,\n  density = 'comfortable',\n}: BackofficeKpiStripProps): JSX.Element | null => {\n  const { t } = useBackofficeReactTranslation();\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  let groupClassName: string | undefined = styles.group;\n  if (density === 'compact') {\n    groupClassName = cx(styles.group, styles.compactGroup);\n  }\n\n  return (\n    <MetricTileGroup className={groupClassName}>\n      {items.map((item) => {\n        let valueNode = item.value;\n        if (item.copyValue != null && item.copyValue !== '') {\n          valueNode = (\n            <CopyableText\n              value={item.copyValue}\n              copyValue={item.copyValue}\n              truncate={false}\n              copyLabel={t('common.actions.copy')}\n              copiedLabel={t('common.actions.copied')}\n            />\n          );\n        }\n\n        return (\n          <MetricCard\n            key={item.id}\n            className={cx(\n              styles.card,\n              styles.cardTone({ tone: item.tone ?? 'neutral' }),\n            )}\n            label={item.label}\n            value={<span className={styles.value}>{valueNode}</span>}\n            hint={item.hint}\n          />\n        );\n      })}\n    </MetricTileGroup>\n  );\n};\n\nexport default BackofficeKpiStrip;\n"],"mappings":";;;;;;;;AA8BA,IAAa,KAAsB,EACjC,UACA,aAAU,oBACuC;CACjD,IAAM,EAAE,SAAM,GAA+B;CAE7C,IAAI,EAAM,WAAW,GACnB,OAAO;CAGT,IAAI,IAAqC;CAKzC,OAJI,MAAY,cACd,IAAiB,EAAG,GAAc,EAAoB,GAItD,kBAAC,GAAD;EAAiB,WAAW;YACzB,EAAM,KAAK,MAAS;GACnB,IAAI,IAAY,EAAK;GAarB,OAZI,EAAK,aAAa,QAAQ,EAAK,cAAc,OAC/C,IACE,kBAAC,GAAD;IACE,OAAO,EAAK;IACZ,WAAW,EAAK;IAChB,UAAU;IACV,WAAW,EAAE,sBAAsB;IACnC,aAAa,EAAE,wBAAwB;IACvC,CAAA,GAKJ,kBAAC,GAAD;IAEE,WAAW,EACT,GACA,EAAgB,EAAE,MAAM,EAAK,QAAQ,WAAW,CAAC,CAClD;IACD,OAAO,EAAK;IACZ,OAAO,kBAAC,QAAD;KAAM,WAAW;eAAe;KAAiB,CAAA;IACxD,MAAM,EAAK;IACX,EARK,EAAK,GAQV;IAEJ;EACc,CAAA"}

package/lib/esm/components/backoffice/detail/backofficeDetailRelationLink.css.js

@@ -1,3 +1,4 @@
+/* empty css                                                             */
 /* empty css                                            */
 //#region src/components/backoffice/detail/backofficeDetailRelationLink.css.ts
 var e = "_93gupm0 qbwcueg qbwcuee txvbqb2g9 txvbqb19c9 txvbqb3f txvbqb7g txvbqb76 txvbqb7t qbwcuef txvbqb1aep txvbqb1b29 qbwcue0 txvbqb1cb0 txvbqb1cws txvbqbyoi txvbqbzm3 txvbqb10jb txvbqbvve txvbqb7h txvbqb75 txvbqbdr8 txvbqbjus txvbqbffj txvbqb1uy txvbqb2et txvbqbik txvbqb1933 txvbqbey txvbqbem txvbqbf65 txvbqbf6j txvbqb1aes txvbqb1b2c", t = "txvbqb9j txvbqbfcn txvbqbt9i txvbqbutu", n = "txvbqbdsb txvbqbey txvbqbfet txvbqbf7y txvbqbt9i", r = "txvbqb96 txvbqb19cb txvbqbutu txvbqb16fn", i = "txvbqbdsb txvbqbey txvbqbjtp txvbqb19cd txvbqb9j txvbqbl11";

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

@@ -1,7 +1,19 @@
+import { createRuntimeFn as e } from "../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
 /* empty css                                  */
 //#region src/components/backoffice/detail/backofficeKpiStrip.css.ts
-var e = "txvbqbdrl txvbqbffj txvbqbheb", t = "txvbqbff6", n = "txvbqbt9i", r = "txvbqbdr8 txvbqbey txvbqbff6";
+var t = "txvbqbdrl txvbqbffj txvbqbheb", n = "txvbqbff6", r = "txvbqbt9i", i = e({
+	defaultClassName: "_1bcdpm60",
+	variantClassNames: { tone: {
+		neutral: "_1bcdpm61",
+		info: "_1bcdpm62",
+		success: "_1bcdpm63",
+		warning: "_1bcdpm64",
+		danger: "_1bcdpm65"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+}), a = "txvbqbdr8 txvbqbey txvbqbff6";
 //#endregion
-export { n as card, t as compactGroup, e as group, r as value };
+export { r as card, i as cardTone, n as compactGroup, t as group, a as value };
 
 //# sourceMappingURL=backofficeKpiStrip.css.js.map

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 { 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 = sprinkles({\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 { recipe } from '@vanilla-extract/recipes';\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\nimport { vars } from '@plumile/ui/theme/themeContract.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 = sprinkles({\n  minWidth: 0,\n});\n\nexport const cardTone = recipe({\n  variants: {\n    tone: {\n      neutral: {\n        backgroundImage: `linear-gradient(135deg, color-mix(in srgb, ${vars.colors.primaryLight} 26%, transparent), transparent 58%)`,\n        boxShadow: `inset 3px 0 0 color-mix(in srgb, ${vars.colors.primary} 42%, transparent)`,\n      },\n      info: {\n        backgroundImage: `linear-gradient(135deg, ${vars.colors.infoLight}, transparent 58%)`,\n        boxShadow: `inset 3px 0 0 ${vars.colors.info}`,\n      },\n      success: {\n        backgroundImage: `linear-gradient(135deg, ${vars.colors.successLight}, transparent 58%)`,\n        boxShadow: `inset 3px 0 0 ${vars.colors.success}`,\n      },\n      warning: {\n        backgroundImage: `linear-gradient(135deg, ${vars.colors.warningLight}, transparent 58%)`,\n        boxShadow: `inset 3px 0 0 ${vars.colors.warning}`,\n      },\n      danger: {\n        backgroundImage: `linear-gradient(135deg, ${vars.colors['error-8']}, transparent 58%)`,\n        boxShadow: `inset 3px 0 0 ${vars.colors.error}`,\n      },\n    },\n  },\n});\n\nexport const value = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n});\n"],"mappings":""}

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

@@ -1,69 +1,83 @@
 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 { 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";
+import { actionButton as t, actionButtonSpacer as n, actions as r, container as i } from "./deferredFilterSearchInput.css.js";
+import { useEffect as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Input as l } from "@plumile/ui/atomic/atoms/input/Input.js";
+import { ModalCloseSvg as u } from "@plumile/ui/icons/ModalCloseSvg.js";
+import { CheckSvg as d } from "@plumile/ui/icons/CheckSvg.js";
+import { SidebarSearchSvg as f } 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);
-	r(() => {
-		y(u);
-	}, [u]);
-	let b = v.trim(), x = u.trim(), S = b !== "", C = b !== x, w = S || x !== "", T = "secondary";
-	C && (T = "primary");
-	let E = () => {
-		C && g(b);
-	};
-	return /* @__PURE__ */ a("form", {
-		className: p,
+var p = ({ value: p, placeholder: m, ariaLabel: h, className: g, inputMode: _ = "search", type: v = "text", onApply: y }) => {
+	let { t: b } = e(), [x, S] = o(p);
+	a(() => {
+		S(p);
+	}, [p]);
+	let C = x.trim(), w = p.trim(), T = C !== "", E = C !== w, D = T || w !== "", O = h ?? m, k = b("filters.actions.clearFilter", { label: O }), A = b("filters.actions.applyFilter", { label: O }), j = () => {
+		E && y(C);
+	}, M = () => {
+		S(""), w !== "" && y("");
+	}, N = /* @__PURE__ */ s("span", {
+		className: n,
+		"aria-hidden": "true"
+	});
+	return D && (N = /* @__PURE__ */ s("button", {
+		type: "button",
+		className: t,
+		"aria-label": k,
+		title: k,
+		onClick: M,
+		children: /* @__PURE__ */ s(u, {
+			width: 16,
+			height: 16,
+			"aria-hidden": "true"
+		})
+	})), /* @__PURE__ */ s("form", {
+		className: g,
 		onSubmit: (e) => {
-			e.preventDefault(), E();
+			e.preventDefault(), j();
 		},
-		children: /* @__PURE__ */ o("div", {
-			className: n,
-			children: [/* @__PURE__ */ a(c, {
-				type: h,
-				inputMode: m,
-				value: v,
-				onChange: (e) => {
-					y(e.target.value);
+		children: /* @__PURE__ */ s("div", {
+			className: i,
+			children: /* @__PURE__ */ s(l, {
+				type: v,
+				inputMode: _,
+				value: x,
+				onInput: (e) => {
+					S(e.currentTarget.value);
 				},
 				onKeyDown: (e) => {
-					e.key === "Escape" && (e.preventDefault(), y(u));
+					e.key === "Enter" && (e.preventDefault(), j()), e.key === "Escape" && (e.preventDefault(), S(p));
 				},
-				placeholder: d,
-				"aria-label": f ?? d,
+				placeholder: m,
+				"aria-label": O,
 				size: "small",
 				fullWidth: !0,
-				leftIcon: /* @__PURE__ */ a(l, {
+				leftIcon: /* @__PURE__ */ s(f, {
 					width: 18,
 					height: 18,
 					"aria-hidden": "true"
+				}),
+				rightIconIsInteractive: !0,
+				rightIcon: /* @__PURE__ */ c("span", {
+					className: r,
+					children: [N, /* @__PURE__ */ s("button", {
+						type: "submit",
+						className: t,
+						"aria-label": A,
+						title: A,
+						disabled: !E,
+						children: /* @__PURE__ */ s(d, {
+							width: 16,
+							height: 16,
+							"aria-hidden": "true"
+						})
+					})]
 				})
-			}), /* @__PURE__ */ o("div", {
-				className: t,
-				children: [w && /* @__PURE__ */ a(s, {
-					type: "button",
-					variant: "text",
-					size: "small",
-					onClick: () => {
-						y(""), x !== "" && g("");
-					},
-					children: _("common.actions.clear")
-				}), /* @__PURE__ */ a(s, {
-					type: "submit",
-					variant: T,
-					size: "small",
-					disabled: !C,
-					children: _("filters.actions.apply")
-				})]
-			})]
+			})
 		})
 	});
 };
 //#endregion
-export { u as DeferredFilterSearchInput, u as default };
+export { p as DeferredFilterSearchInput, p as default };
 
 //# sourceMappingURL=DeferredFilterSearchInput.js.map

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 } 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"}
+{"version":3,"file":"DeferredFilterSearchInput.js","names":[],"sources":["../../../../../src/components/backoffice/filters/DeferredFilterSearchInput.tsx"],"sourcesContent":["import {\n  useEffect,\n  useState,\n  type FormEvent,\n  type JSX,\n  type KeyboardEvent,\n} from 'react';\n\nimport { Input } from '@plumile/ui/atomic/atoms/input/Input.js';\nimport { CheckSvg } from '@plumile/ui/icons/CheckSvg.js';\nimport { ModalCloseSvg } from '@plumile/ui/icons/ModalCloseSvg.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' | 'text' | '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 = 'text',\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  const inputLabel = ariaLabel ?? placeholder;\n  const clearLabel = t('filters.actions.clearFilter', { label: inputLabel });\n  const applyLabel = t('filters.actions.applyFilter', { label: inputLabel });\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  let clearActionNode: JSX.Element = (\n    <span className={styles.actionButtonSpacer} aria-hidden=\"true\" />\n  );\n  if (canClear) {\n    clearActionNode = (\n      <button\n        type=\"button\"\n        className={styles.actionButton}\n        aria-label={clearLabel}\n        title={clearLabel}\n        onClick={clearValue}\n      >\n        <ModalCloseSvg width={16} height={16} aria-hidden=\"true\" />\n      </button>\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          onInput={(event: FormEvent<HTMLInputElement>) => {\n            setDraftValue(event.currentTarget.value);\n          }}\n          onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {\n            if (event.key === 'Enter') {\n              event.preventDefault();\n              applyDraft();\n            }\n            if (event.key === 'Escape') {\n              event.preventDefault();\n              setDraftValue(value);\n            }\n          }}\n          placeholder={placeholder}\n          aria-label={inputLabel}\n          size=\"small\"\n          fullWidth\n          leftIcon={\n            <SidebarSearchSvg width={18} height={18} aria-hidden=\"true\" />\n          }\n          rightIconIsInteractive\n          rightIcon={\n            <span className={styles.actions}>\n              {clearActionNode}\n              <button\n                type=\"submit\"\n                className={styles.actionButton}\n                aria-label={applyLabel}\n                title={applyLabel}\n                disabled={!hasPendingValue}\n              >\n                <CheckSvg width={16} height={16} aria-hidden=\"true\" />\n              </button>\n            </span>\n          }\n        />\n      </div>\n    </form>\n  );\n};\n\nexport default DeferredFilterSearchInput;\n"],"mappings":";;;;;;;;;AA2BA,IAAa,KAA6B,EACxC,UACA,gBACA,cACA,cACA,eAAY,UACZ,UAAO,QACP,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,IAC3C,IAAa,KAAa,GAC1B,IAAa,EAAE,+BAA+B,EAAE,OAAO,GAAY,CAAC,EACpE,IAAa,EAAE,+BAA+B,EAAE,OAAO,GAAY,CAAC,EAEpE,UAAmB;EAClB,KAGL,EAAQ,EAAgB;IAGpB,UAAmB;EAEvB,AADA,EAAc,GAAG,EACb,MAAoB,MACtB,EAAQ,GAAG;IAIX,IACF,kBAAC,QAAD;EAAM,WAAW;EAA2B,eAAY;EAAS,CAAA;CAgBnE,OAdI,MACF,IACE,kBAAC,UAAD;EACE,MAAK;EACL,WAAW;EACX,cAAY;EACZ,OAAO;EACP,SAAS;YAET,kBAAC,GAAD;GAAe,OAAO;GAAI,QAAQ;GAAI,eAAY;GAAS,CAAA;EACpD,CAAA,GAKX,kBAAC,QAAD;EACa;EACX,WAAW,MAAsC;GAE/C,AADA,EAAM,gBAAgB,EACtB,GAAY;;YAGd,kBAAC,OAAD;GAAK,WAAW;aACd,kBAAC,GAAD;IACQ;IACK;IACX,OAAO;IACP,UAAU,MAAuC;KAC/C,EAAc,EAAM,cAAc,MAAM;;IAE1C,YAAY,MAA2C;KAKrD,AAJI,EAAM,QAAQ,YAChB,EAAM,gBAAgB,EACtB,GAAY,GAEV,EAAM,QAAQ,aAChB,EAAM,gBAAgB,EACtB,EAAc,EAAM;;IAGX;IACb,cAAY;IACZ,MAAK;IACL,WAAA;IACA,UACE,kBAAC,GAAD;KAAkB,OAAO;KAAI,QAAQ;KAAI,eAAY;KAAS,CAAA;IAEhE,wBAAA;IACA,WACE,kBAAC,QAAD;KAAM,WAAW;eAAjB,CACG,GACD,kBAAC,UAAD;MACE,MAAK;MACL,WAAW;MACX,cAAY;MACZ,OAAO;MACP,UAAU,CAAC;gBAEX,kBAAC,GAAD;OAAU,OAAO;OAAI,QAAQ;OAAI,eAAY;OAAS,CAAA;MAC/C,CAAA,CACJ;;IAET,CAAA;GACE,CAAA;EACD,CAAA"}

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

@@ -1,98 +1,93 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
 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";
+import { ModalCloseSvg as p } from "@plumile/ui/icons/ModalCloseSvg.js";
+import { BackofficeSidebarPenToolSvg as m } from "@plumile/ui/icons/backoffice/BackofficeSidebarPenToolSvg.js";
+import { BackofficeSidebarSearchSvg as h } from "@plumile/ui/icons/backoffice/BackofficeSidebarSearchSvg.js";
 //#region src/components/backoffice/filters/EntityIdFilterField.tsx
-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", {
+var g = (g) => {
+	let { disabled: _ = !1, id: v, label: y, value: b, displayValue: x, placeholder: S, ariaDescribedBy: C, ariaInvalid: w, isResolving: T = !1, onPick: E, onClear: D } = g, { t: O } = e(), k = b?.trim() ?? "", A = x?.trim() ?? "", j = k !== "", M = A !== "", N = S ?? O("filters.placeholders.anyEntity", { label: y }), P = O("filters.placeholders.unresolved"), F;
+	F = M ? /* @__PURE__ */ d("span", {
 		className: u,
-		children: k
-	}) : A ? /* @__PURE__ */ d("span", {
+		children: A
+	}) : j ? /* @__PURE__ */ d("span", {
 		className: l,
-		children: N
+		children: P
 	}) : /* @__PURE__ */ d("span", {
 		className: l,
-		children: M
+		children: N
 	});
-	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", {
+	let I = O("common.actions.pick");
+	j && (I = O("filters.actions.changeFilterValue", { label: y }));
+	let L = O("filters.actions.filterBy", { label: y });
+	j && (L = I);
+	let R = O("filters.actions.clearFilter", { label: y }), z = null;
+	j && D != null && (z = /* @__PURE__ */ d("button", {
 		type: "button",
 		className: n,
-		"aria-label": L,
-		disabled: g,
+		"aria-label": R,
+		disabled: _,
 		onClick: (e) => {
-			e.stopPropagation(), E();
+			e.stopPropagation(), D();
 		},
-		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"
-			})
+		children: /* @__PURE__ */ d(p, {
+			width: 16,
+			height: 16,
+			"aria-hidden": "true"
 		})
 	}));
-	let z = null;
-	if (T != null) {
-		let e = /* @__PURE__ */ d(m, {
+	let B = null;
+	if (E != null) {
+		let e = /* @__PURE__ */ d(h, {
 			className: t,
 			"aria-hidden": "true"
 		});
-		A && (e = /* @__PURE__ */ d(p, {
+		j && (e = /* @__PURE__ */ d(m, {
 			className: t,
 			"aria-hidden": "true"
-		})), z = /* @__PURE__ */ f("div", {
+		})), B = /* @__PURE__ */ f("div", {
 			className: c,
 			children: [
 				/* @__PURE__ */ d("button", {
-					id: _,
+					id: v,
 					type: "button",
 					className: s,
-					"aria-label": I,
-					"aria-describedby": S,
-					"aria-invalid": C,
-					"aria-busy": w || void 0,
-					disabled: g,
-					onClick: T,
+					"aria-label": L,
+					"aria-describedby": C,
+					"aria-invalid": w,
+					"aria-busy": T || void 0,
+					disabled: _,
+					onClick: E,
 					children: /* @__PURE__ */ f("span", {
 						className: i,
 						children: [/* @__PURE__ */ d("span", {
 							className: a,
-							children: v
-						}), P]
+							children: y
+						}), F]
 					})
 				}),
 				/* @__PURE__ */ d("button", {
 					type: "button",
 					className: o,
-					"aria-label": I,
-					title: I,
-					disabled: g,
-					onClick: T,
+					"aria-label": L,
+					title: L,
+					disabled: _,
+					onClick: E,
 					children: e
 				}),
-				R
+				z
 			]
 		});
 	}
 	return /* @__PURE__ */ d("div", {
 		className: r,
-		children: z ?? /* @__PURE__ */ d("div", {
+		children: B ?? /* @__PURE__ */ d("div", {
 			className: "txvbqbdxd txvbqbt9i txvbqbdr8 txvbqbey txvbqbusr",
-			children: P
+			children: F
 		})
 	});
 };
 //#endregion
-export { h as EntityIdFilterField, h as default };
+export { g as EntityIdFilterField, g as default };
 
 //# sourceMappingURL=EntityIdFilterField.js.map