@adyen/adyen-platform-experience-web 1.10.0 → 1.10.2

package/dist/es/components/external/TransactionsOverview/components/TransactionFilters/TransactionDateFilter.js

@@ -1,90 +1,94 @@
-import { jsx as K } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { TRANSACTION_DATE_RANGE_CUSTOM as O, TRANSACTION_DATE_RANGE_DEFAULT as x, TRANSACTION_DATE_RANGE_MAX_YEARS as H, TRANSACTION_DATE_RANGES as A } from "../../constants.js";
-import { useMemo as m, useRef as j, useState as p, useCallback as C, useEffect as N } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { DateRangeFilterParam as d } from "../../../../internal/FilterBar/filters/DateFilter/types.js";
-import k from "../../../../internal/FilterBar/filters/DateFilter/DateFilterCore.js";
-import U from "../../../../../hooks/useAnalytics/useFilterAnalyticsEvent.js";
-import V from "../../../../../core/Context/useCoreContext.js";
-import W from "../../../../internal/Calendar/calendar/timerange/factory.js";
-import { unreachable as q } from "../../../../../utils/common.js";
-import { EMPTY_OBJECT as z } from "../../../../../utils/value/constants.js";
-import { TIME_RANGE_SELECTION_PRESET_OPTION_KEYS as a } from "../../../../internal/DatePicker/components/TimeRangeSelector/useTimeRangeSelection.js";
-const B = (e) => {
-  switch (e) {
-    case "common.filters.types.date.rangeSelect.options.custom":
+import { jsx as v } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { TRANSACTION_DATE_RANGE_CUSTOM as E, TRANSACTION_DATE_RANGE_DEFAULT as x, TRANSACTION_DATE_RANGE_MAX_YEARS as H, TRANSACTION_DATE_RANGES as S, TRANSACTION_DATE_RANGE_YEAR_TO_DATE as K, TRANSACTION_DATE_RANGE_LAST_MONTH as j, TRANSACTION_DATE_RANGE_THIS_MONTH as k, TRANSACTION_DATE_RANGE_LAST_WEEK as U, TRANSACTION_DATE_RANGE_THIS_WEEK as V, TRANSACTION_DATE_RANGE_LAST_180_DAYS as W, TRANSACTION_DATE_RANGE_LAST_30_DAYS as q, TRANSACTION_DATE_RANGE_LAST_7_DAYS as B } from "../../constants.js";
+import { useMemo as c, useRef as J, useState as I, useCallback as d, useEffect as p } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
+import { getDateRangeTimestamps as X } from "../../../../internal/Calendar/calendar/timerange/utils.js";
+import { DateRangeFilterParam as h } from "../../../../internal/FilterBar/filters/DateFilter/types.js";
+import Q from "../../../../internal/FilterBar/filters/DateFilter/DateFilterCore.js";
+import Z from "../../../../../hooks/useAnalytics/useFilterAnalyticsEvent.js";
+import $ from "../../../../../core/Context/useCoreContext.js";
+import z from "../../../../internal/Calendar/calendar/timerange/factory.js";
+import { unreachable as ee } from "../../../../../utils/common.js";
+import { EMPTY_OBJECT as te } from "../../../../../utils/value/constants.js";
+const ne = (t) => {
+  switch (t) {
+    case E:
       return "Custom";
-    case a.LAST_7_DAYS:
+    case B:
       return "Last 7 days";
-    case a.LAST_30_DAYS:
+    case q:
       return "Last 30 days";
-    case a.THIS_WEEK:
+    case W:
+      return "Last 180 days";
+    case V:
       return "This week";
-    case a.LAST_WEEK:
+    case U:
       return "Last week";
-    case a.THIS_MONTH:
+    case k:
       return "This month";
-    case a.LAST_MONTH:
+    case j:
       return "Last month";
-    case a.YEAR_TO_DATE:
+    case K:
       return "Year to date";
     default:
-      return q(e);
+      return ee(t);
   }
-}, re = ({ createdDate: e, eventCategory: w, eventSubCategory: I, setCreatedDate: y, timezone: F }) => {
-  const { i18n: o } = V(), S = m(() => o.get("common.filters.types.date.label"), [o]), i = m(() => o.get(O), [o]), u = m(() => o.get(x), [o]), _ = j(e), [T, g] = p(u), [R, E] = p(!1), { from: L, to: b, since: h, until: Y, now: M } = m(() => {
-    const s = Date.now(), t = new Date(e.from), c = new Date(e.to), n = new Date(s), f = new Date(s);
-    return n.setFullYear(n.getFullYear() - H), {
-      from: t.toISOString(),
-      to: c.toISOString(),
-      since: n.toISOString(),
-      until: f.toISOString(),
-      now: s
+}, ue = ({ createdDate: t, eventCategory: w, eventSubCategory: G, setCreatedDate: L, timezone: T }) => {
+  const { i18n: n } = $(), N = c(() => n.get("common.filters.types.date.label"), [n]), a = c(() => n.get(E), [n]), _ = c(() => n.get(x), [n]), D = J(t), [l, g] = I(_), [O, C] = I(!1), { from: m, to: u, since: y, until: F, now: b } = c(() => {
+    const e = Date.now() + 1, r = new Date(e), s = new Date(r);
+    s.setFullYear(s.getFullYear() - H);
+    const { from: R, to: i } = X(t, e, T), f = new Date(R), P = new Date(i);
+    return {
+      from: f.toISOString(),
+      to: P.toISOString(),
+      since: s.toISOString(),
+      until: r.toISOString(),
+      now: e - 1
+      // remove time shift
     };
-  }, [e]), { logEvent: r } = U({ category: w, subCategory: I, label: "Date filter" }), P = C(
-    (s = z) => {
-      const t = s.selectedPresetOption || u;
-      if (t !== T || t === i) {
-        let c = O, n;
-        if (t === i) {
-          const l = s[d.FROM], D = s[d.TO];
-          n = W({
-            from: l ? new Date(l).getTime() : e.from,
-            to: D ? new Date(D).getTime() : e.to
+  }, [t, T]), { logEvent: A } = Z({ category: w, subCategory: G, label: "Date filter" }), M = d(
+    (o = te) => {
+      const e = o.selectedPresetOption || _;
+      if (e !== l || e === a) {
+        let r = E, s;
+        if (e === a) {
+          const i = o[h.FROM], f = o[h.TO];
+          s = z({
+            from: new Date(i || m).getTime(),
+            to: new Date(f || u).getTime()
           })();
         } else
-          [c, n] = Object.entries(A).find(([l]) => o.get(l) === t);
-        const f = t === i ? String([n.from, n.to]) : B(c);
-        g(t), y(_.current = n), r == null || r("update", f);
+          [r, s] = Object.entries(S).find(([i]) => n.get(i) === e);
+        const R = e === a ? String([s.from, s.to]) : ne(r);
+        g(e), L(D.current = s), A?.("update", R);
       }
     },
-    [o, e, i, u, T, r]
-  ), G = C(() => E(!0), []);
-  return N(() => {
-    R && (E(!1), _.current !== e && (r == null || r("reset")));
-  }, [R, e, r]), N(() => {
-    var t;
-    const s = (t = Object.entries(A).find(([c, n]) => n === e)) == null ? void 0 : t[0];
-    g(s ? o.get(s) : i);
-  }, [e, i, o]), /* @__PURE__ */ K(
-    k,
+    [n, m, u, a, _, l, A]
+  ), Y = d(() => C(!0), []);
+  return p(() => {
+    O && (C(!1), D.current !== t && A?.("reset"));
+  }, [O, t, A]), p(() => {
+    const o = Object.entries(S).find(([e, r]) => r === t)?.[0];
+    g(o ? n.get(o) : a);
+  }, [t, a, n]), /* @__PURE__ */ v(
+    Q,
     {
       name: "createdAt",
-      now: M,
-      label: S,
-      "aria-label": S,
-      sinceDate: h,
-      untilDate: Y,
-      from: L,
-      to: b,
-      onChange: P,
-      onResetAction: G,
-      selectedPresetOption: T,
-      timeRangePresetOptions: A,
-      timezone: F,
+      now: b,
+      label: N,
+      "aria-label": N,
+      sinceDate: y,
+      untilDate: F,
+      from: m,
+      to: u,
+      onChange: M,
+      onResetAction: Y,
+      selectedPresetOption: l,
+      timeRangePresetOptions: S,
+      timezone: T,
       showTimezoneInfo: !0
     }
   );
 };
 export {
-  re as default
+  ue as default
 };

package/dist/es/components/external/TransactionsOverview/components/TransactionFilters/TransactionFilters.js

@@ -1,113 +1,123 @@
-import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { INITIAL_FILTERS as q, TRANSACTION_ANALYTICS_SUBCATEGORY_LIST as z, TRANSACTION_ANALYTICS_SUBCATEGORY_INSIGHTS as H, TRANSACTION_ANALYTICS_CATEGORY as K, TRANSACTION_CATEGORIES as Q } from "../../constants.js";
-import { compareTransactionsFilters as Z } from "../utils.js";
-import { useRef as J, useState as n, useMemo as o, useCallback as W, useEffect as C } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { useResponsiveContainer as X, containerQueries as $ } from "../../../../../hooks/useResponsiveContainer.js";
-import V from "../../../../../hooks/useBalanceAccountSelection.js";
-import _ from "./TransactionMultiSelectionFilter.js";
-import ee from "./TransactionPspReferenceFilter.js";
-import te from "../../../../../core/Context/useCoreContext.js";
-import re from "../../hooks/useCurrencySelection.js";
-import ce from "./TransactionDateFilter.js";
-import { selectionOptionsFor as P } from "../MultiSelectionFilter/useMultiSelectionFilter/utils.js";
-import ne from "../../../../internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.js";
-import { Fragment as h } from "../../../../../external/preact/dist/preact.module.js";
-import oe from "../../../../internal/FormFields/Select/Select.js";
-import { FilterBar as se } from "../../../../internal/FilterBar/FilterBar.js";
-const s = K, ve = ({
-  availableCurrencies: a,
-  balanceAccounts: B,
-  isTransactionsView: T,
-  onChange: i,
-  setInsightsCurrency: E,
-  ...w
+import { jsx as r } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { INITIAL_FILTERS as Z, TRANSACTION_ANALYTICS_SUBCATEGORY_LIST as J, TRANSACTION_ANALYTICS_SUBCATEGORY_INSIGHTS as W, TRANSACTION_ANALYTICS_CATEGORY as X, TRANSACTION_CATEGORIES as $ } from "../../constants.js";
+import { compareTransactionsFilters as D } from "../utils.js";
+import { useRef as p, useState as s, useMemo as a, useCallback as V, useEffect as y } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
+import { useResponsiveContainer as ee, containerQueries as te } from "../../../../../hooks/useResponsiveContainer.js";
+import re from "../../../../../hooks/useBalanceAccountSelection.js";
+import w from "./TransactionMultiSelectionFilter.js";
+import ce from "./TransactionPspReferenceFilter.js";
+import ne from "../../../../../core/Context/useCoreContext.js";
+import oe from "../../hooks/useCurrencySelection.js";
+import se from "./TransactionDateFilter.js";
+import { selectionOptionsFor as U } from "../MultiSelectionFilter/useMultiSelectionFilter/utils.js";
+import ae from "../../../../internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.js";
+import { Fragment as Y } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/dist/preact.module.js";
+import le from "../../../../internal/FormFields/Select/Select.js";
+import { FilterBar as ie } from "../../../../internal/FilterBar/FilterBar.js";
+const l = X, ue = /* @__PURE__ */ (() => {
+  const c = /* @__PURE__ */ new Set(["balanceAccount"]);
+  return () => {
+    let i = {};
+    return (u) => D(i, i = u, c);
+  };
+})(), Ne = ({
+  availableCurrencies: c,
+  balanceAccounts: i,
+  isTransactionsView: u,
+  onChange: b,
+  insightsCurrency: G,
+  setInsightsCurrency: f,
+  ...x
 }) => {
-  var L;
-  const { i18n: l } = te(), c = T ? z : H, e = J({ ...q }), U = X($.down.xs), [y, Y] = n(e.current.statuses), [m, F] = n(e.current.categories), [p, f] = n(e.current.currencies), [A, R] = n(e.current.createdDate), [S, I] = n(e.current.paymentPspReference), [r, O] = n(e.current.balanceAccount), u = o(
-    () => ({ balanceAccount: r, categories: m, createdDate: A, currencies: p, paymentPspReference: S, statuses: y }),
-    [r, m, A, p, S, y]
-  ), D = o(() => Z(u, e.current), [u]), G = W(() => {
-    Y(e.current.statuses), F(e.current.categories), f(e.current.currencies), R(e.current.createdDate), I(e.current.paymentPspReference), O(e.current.balanceAccount);
-  }, []), x = o(() => P(Q), []), k = o(() => l.get("transactions.overview.filters.types.category.label"), [l]), M = o(() => P(a ?? []), [a]), d = o(() => l.get("transactions.overview.filters.types.currency.label"), [l]), v = "Currency filter", { resetBalanceAccountSelection: ae, ...b } = V({
+  const { i18n: m } = ne(), n = u ? J : W, e = p({ ...Z }), k = ee(te.down.xs), [R, M] = s(e.current.statuses), [A, g] = s(e.current.categories), [S, d] = s(e.current.currencies), [C, h] = s(e.current.createdDate), [F, O] = s(e.current.paymentPspReference), [o, I] = s(e.current.balanceAccount), t = a(
+    () => ({ balanceAccount: o, categories: A, createdDate: C, currencies: S, paymentPspReference: F, statuses: R }),
+    [o, A, C, S, F, R]
+  ), v = p(), N = p(), j = a(() => D(t, e.current), [t]), q = V(() => {
+    M(e.current.statuses), g(e.current.categories), d(e.current.currencies), h(e.current.createdDate), O(e.current.paymentPspReference), I(e.current.balanceAccount);
+  }, []), z = a(() => U($), []), H = a(() => m.get("transactions.overview.filters.types.category.label"), [m]), K = a(() => U(c ?? []), [c]), T = a(() => m.get("transactions.overview.filters.types.currency.label"), [m]), L = "Currency filter", _ = p(ue()).current, { resetBalanceAccountSelection: me, ...P } = re({
     allowAllSelection: !1,
-    onUpdateSelection: O,
-    balanceAccounts: B,
-    eventCategory: s,
-    eventSubCategory: c
-  }), { activeCurrency: N, currencySelectionOptions: g, onCurrencySelection: j } = re({
-    eventLabel: v,
-    onUpdateSelection: E,
-    selectedCurrency: r == null ? void 0 : r.defaultCurrencyCode,
-    availableCurrencies: a,
-    eventCategory: s,
-    eventSubCategory: c
+    onUpdateSelection: I,
+    balanceAccounts: i,
+    eventCategory: l,
+    eventSubCategory: n
+  }), { activeCurrency: B, currencySelectionOptions: E, onCurrencySelection: Q } = oe({
+    eventLabel: L,
+    onUpdateSelection: f,
+    selectedCurrency: G ?? o?.defaultCurrencyCode,
+    availableCurrencies: c,
+    eventCategory: l,
+    eventSubCategory: n
   });
-  return C(() => f(e.current.currencies), [a]), C(() => i == null ? void 0 : i(u), [i, u]), C(() => {
-    !e.current.balanceAccount && r && (e.current.balanceAccount = r);
-  }, [r]), /* @__PURE__ */ t(
-    se,
+  return y(() => {
+    v.current !== c && (_(t) && (d(e.current.currencies), f?.(t.balanceAccount?.defaultCurrencyCode)), v.current = c);
+  }, [c, t, _, f]), y(() => {
+    N.current !== t && (N.current = t, b?.(t));
+  }, [b, t]), y(() => {
+    !e.current.balanceAccount && o && (e.current.balanceAccount = o);
+  }, [o]), /* @__PURE__ */ r(
+    ie,
     {
-      ...w,
+      ...x,
       ariaLabelKey: "transactions.overview.filters.label",
-      canResetFilters: D && !1,
-      resetFilters: G,
+      canResetFilters: j && !1,
+      resetFilters: q,
       children: [
-        /* @__PURE__ */ t(ne, { ...b }),
-        /* @__PURE__ */ t(
-          ce,
+        /* @__PURE__ */ r(ae, { ...P }),
+        /* @__PURE__ */ r(
+          se,
           {
-            createdDate: A,
-            eventCategory: s,
-            eventSubCategory: c,
-            setCreatedDate: R,
-            timezone: (L = b.activeBalanceAccount) == null ? void 0 : L.timeZone
+            createdDate: C,
+            eventCategory: l,
+            eventSubCategory: n,
+            setCreatedDate: h,
+            timezone: P.activeBalanceAccount?.timeZone
           }
         ),
-        T ? /* @__PURE__ */ t(h, { children: [
-          /* @__PURE__ */ t(
-            _,
+        u ? /* @__PURE__ */ r(Y, { children: [
+          /* @__PURE__ */ r(
+            w,
             {
               eventLabel: "Category filter",
-              eventCategory: s,
-              eventSubCategory: c,
-              placeholder: k,
-              selectionOptions: x,
-              selection: m,
-              onUpdateFilter: F
+              eventCategory: l,
+              eventSubCategory: n,
+              placeholder: H,
+              selectionOptions: z,
+              selection: A,
+              onUpdateFilter: g
             }
           ),
-          /* @__PURE__ */ t(
-            _,
+          /* @__PURE__ */ r(
+            w,
             {
-              eventCategory: s,
-              eventSubCategory: c,
-              eventLabel: v,
-              placeholder: d,
-              selectionOptions: M,
-              selection: p,
-              onUpdateFilter: f
+              eventCategory: l,
+              eventSubCategory: n,
+              eventLabel: L,
+              placeholder: T,
+              selectionOptions: K,
+              selection: S,
+              onUpdateFilter: d
             }
           ),
-          /* @__PURE__ */ t(
-            ee,
+          /* @__PURE__ */ r(
+            ce,
             {
-              eventCategory: s,
-              eventSubCategory: c,
-              onChange: I,
-              value: S
+              eventCategory: l,
+              eventSubCategory: n,
+              onChange: O,
+              value: F
             }
           )
-        ] }) : /* @__PURE__ */ t(h, { children: g.length > 1 ? /* @__PURE__ */ t(
-          oe,
+        ] }) : /* @__PURE__ */ r(Y, { children: E.length > 1 ? /* @__PURE__ */ r(
+          le,
           {
             filterable: !1,
             multiSelect: !1,
-            items: g,
-            onChange: j,
-            selected: N,
-            "aria-label": d,
-            placeholder: N || d,
-            showOverlay: U,
+            items: E,
+            onChange: Q,
+            selected: B,
+            "aria-label": T,
+            placeholder: B || T,
+            showOverlay: k,
             withoutCollapseIndicator: !0
           }
         ) : null })
@@ -116,5 +126,5 @@ const s = K, ve = ({
   );
 };
 export {
-  ve as default
+  Ne as default
 };

package/dist/es/components/external/TransactionsOverview/components/TransactionFilters/TransactionMultiSelectionFilter.js

@@ -1,4 +1,4 @@
-import { jsx as i } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { jsx as i } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import l from "../../../../../hooks/useMultiSelectionFilterProps.js";
 import s from "../MultiSelectionFilter/MultiSelectionFilter.js";
 const m = ({

package/dist/es/components/external/TransactionsOverview/components/TransactionFilters/TransactionPspReferenceFilter.js

@@ -1,81 +1,95 @@
-import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useState as T, useMemo as l, useRef as g, useCallback as P, useEffect as A } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { TypographyVariant as x, TypographyElement as F } from "../../../../internal/Typography/types.js";
-import k from "../../../../../hooks/useAnalytics/useFilterAnalyticsEvent.js";
-import S from "../../../../../core/Context/useCoreContext.js";
-import q from "../../../../internal/Typography/Typography.js";
-import B from "../../../../internal/FormFields/InputBase.js";
+import { jsx as t } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import M from "classnames";
+import { ARIA_ERROR_SUFFIX as k } from "../../../../../core/Errors/constants.js";
+import { useState as w, useMemo as a, useRef as L, useCallback as _, useEffect as y } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
+import { TypographyVariant as C, TypographyElement as P } from "../../../../internal/Typography/types.js";
+import q from "../../../../../hooks/useAnalytics/useFilterAnalyticsEvent.js";
+import N from "../../../../../core/Context/useCoreContext.js";
+import S from "../../../../internal/Typography/Typography.js";
+import O from "../../../../internal/FormFields/InputBase.js";
 /* empty css                                   */
-import L from "../../../../internal/FilterBar/filters/TextFilter/TextFilter.js";
-import { uniqueId as v } from "../../../../../utils/random/uniqueId.js";
-import { CommitAction as E } from "../../../../../hooks/useCommitAction/types.js";
-const R = "adyen-pe-psp-reference-filter", h = {
-  root: R,
-  input: R + "__input",
-  title: R + "__title"
-}, V = ({ eventCategory: p, eventSubCategory: c, onChange: a, value: t }) => {
-  const { i18n: u } = S(), { logEvent: e } = k({ category: p, subCategory: c, label: "PSP reference filter" }), [s, n] = T(!1), f = l(() => u.get("transactions.overview.filters.types.paymentPspReference.label"), [u]), o = g(t), m = P(
+import Y from "../../../../internal/FilterBar/filters/TextFilter/TextFilter.js";
+import { Icon as H } from "../../../../internal/Icon/Icon.js";
+import { uniqueId as T } from "../../../../../utils/random/uniqueId.js";
+import { CommitAction as F } from "../../../../../hooks/useCommitAction/types.js";
+const f = "adyen-pe-psp-reference-filter", b = 16, m = {
+  root: f,
+  input: f + "__input",
+  inputError: f + "__input-error",
+  inputWithError: f + "__input--with-error",
+  title: f + "__title"
+}, x = ({ eventCategory: d, eventSubCategory: c, onChange: l, value: n }) => {
+  const { i18n: h } = N(), { logEvent: o } = q({ category: d, subCategory: c, label: "PSP reference filter" }), [r, e] = w(!1), E = a(() => h.get("transactions.overview.filters.types.paymentPspReference.label"), [h]), s = L(n), p = _(
     (i) => {
-      o.current !== i && (o.current = i, e == null || e("update", null), a == null || a(i));
+      s.current !== i && (s.current = i, o?.("update", null), l?.(i));
     },
-    [e, a]
-  ), b = P(() => n(!0), []);
-  return A(() => {
-    s && (n(!1), o.current !== t && (e == null || e("reset")));
-  }, [s, t, e]), /* @__PURE__ */ r(
-    L,
+    [o, l]
+  ), R = _(() => e(!0), []);
+  return y(() => {
+    r && (e(!1), s.current !== n && o?.("reset"));
+  }, [r, n, o]), /* @__PURE__ */ t(
+    Y,
     {
-      "aria-label": f,
-      label: t ?? f,
-      onChange: m,
-      onResetAction: b,
-      value: t,
-      render: (i) => /* @__PURE__ */ r(V.EditModal, { ...i }),
+      "aria-label": E,
+      label: n ?? E,
+      onChange: p,
+      onResetAction: R,
+      value: n,
+      render: (i) => /* @__PURE__ */ t(x.EditModal, { ...i }),
       name: "pspReference"
     }
   );
 };
-V.EditModal = ({
-  editAction: p,
+x.EditModal = ({
+  editAction: d,
   onChange: c,
-  onValueUpdated: a,
-  name: t,
-  type: u,
-  value: e
+  onValueUpdated: l,
+  name: n,
+  type: h,
+  value: o
 }) => {
-  const { i18n: s } = S(), [n, f] = T(e), o = g(null), m = l(v, []), b = l(v, []), i = l(() => s.get("transactions.overview.filters.types.paymentPspReference.label"), [s]), C = l(() => s.get("transactions.overview.filters.types.paymentPspReference.placeholder"), [s]), _ = (w) => {
-    const d = w.currentTarget, I = d.selectionEnd, y = d.value.replace(/[^a-z\d]/gi, "").slice(0, 16).toUpperCase();
-    d.value = y, d.setSelectionRange(I, I), y !== n && (f(y || void 0), a(y || void 0));
+  const { i18n: r } = N(), [e, E] = w(o), s = L(null), p = a(T, []), R = a(T, []), i = a(() => {
+    const v = { length: b };
+    return r.get("transactions.overview.filters.types.paymentPspReference.errors.invalidLength", { values: v });
+  }, [r]), u = e && e.length < b ? i : void 0, V = a(() => r.get("transactions.overview.filters.types.paymentPspReference.label"), [r]), B = a(() => r.get("transactions.overview.filters.types.paymentPspReference.placeholder"), [r]), D = (v) => {
+    const g = v.currentTarget, I = g.selectionEnd, A = g.value.replace(/[^a-z\d]/gi, "").slice(0, b).toUpperCase();
+    g.value = A, g.setSelectionRange(I, I), A !== e && E(A || void 0);
   };
-  return A(() => {
-    switch (p) {
-      case E.APPLY:
-        c(n);
+  return y(() => {
+    l(u ? o || void 0 : e);
+  }, [e, u, l, o]), y(() => {
+    switch (d) {
+      case F.APPLY:
+        c(e);
         break;
-      case E.CLEAR:
+      case F.CLEAR:
         c();
         break;
     }
-  }, [p, c, n]), A(() => {
-    o.current && o.current.focus();
-  }, []), /* @__PURE__ */ r("div", { className: h.root, children: [
-    /* @__PURE__ */ r("div", { className: h.title, children: /* @__PURE__ */ r("label", { id: b, htmlFor: m, children: /* @__PURE__ */ r(q, { el: F.DIV, variant: x.BODY, strongest: !0, children: i }) }) }),
-    /* @__PURE__ */ r("div", { className: h.input, children: /* @__PURE__ */ r(
-      B,
+  }, [d, c, e]), y(() => {
+    s.current && s.current.focus();
+  }, []), /* @__PURE__ */ t("div", { className: m.root, children: [
+    /* @__PURE__ */ t("div", { className: m.title, children: /* @__PURE__ */ t("label", { id: R, htmlFor: p, children: /* @__PURE__ */ t(S, { el: P.DIV, variant: C.BODY, strongest: !0, children: V }) }) }),
+    /* @__PURE__ */ t("div", { className: M(m.input, { [m.inputWithError]: u }), children: /* @__PURE__ */ t(
+      O,
       {
         autoComplete: "off",
-        uniqueId: m,
-        ref: o,
-        placeholder: C,
-        "data-testid": t,
-        name: t,
-        type: u,
-        value: n,
-        onInput: _
+        uniqueId: p,
+        ref: s,
+        placeholder: B,
+        "data-testid": n,
+        name: n,
+        type: h,
+        value: e,
+        onInput: D
       }
-    ) })
+    ) }),
+    u && /* @__PURE__ */ t("div", { className: m.inputError, id: `${p}${k}`, children: [
+      /* @__PURE__ */ t(H, { name: "cross-circle-fill" }),
+      /* @__PURE__ */ t(S, { el: P.SPAN, variant: C.BODY, children: u })
+    ] })
   ] });
 };
 export {
-  V as default
+  x as default
 };