@adyen/adyen-platform-experience-web 1.7.1 → 1.8.0

package/dist/es/components/internal/FilterBar/filters/DateFilter/DateFilter.js

@@ -1,64 +1,65 @@
-import { jsx as d } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { jsx as b } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import I from "./DateFilterCore.js";
 import { FilterParam as e } from "../../../../types.js";
-import { useMemo as C, useState as O, useCallback as P } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useMemo as s, useState as O, useCallback as P } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import _ from "../../../../../core/Context/useCoreContext.js";
 import { DateRangeFilterParam as T } from "./types.js";
 import { EMPTY_OBJECT as A } from "../../../../../utils/value/constants.js";
-const M = ({
-  timezone: l,
-  canResetFilters: s,
+const U = ({
+  timezone: u,
+  canResetFilters: i,
   defaultParams: r,
-  filters: i,
-  nowTimestamp: m,
-  refreshNowTimestamp: E,
-  sinceDate: u,
-  untilDate: R,
-  updateFilters: a
+  filters: m,
+  nowTimestamp: c,
+  refreshNowTimestamp: l,
+  sinceDate: R,
+  untilDate: f,
+  updateFilters: o
 }) => {
-  const { i18n: o } = _(), t = C(() => o.get(r.current.defaultTimeRange), [o]), [D, c] = O(t), f = P(
-    (g = A) => {
-      for (const [p, n] of Object.entries(g)) {
-        switch (p) {
+  const { i18n: a } = _(), E = s(() => a.get("common.filters.types.date.label"), [a]), t = s(() => a.get(r.current.defaultTimeRange), [a]), [D, C] = O(t), g = P(
+    (p = A) => {
+      for (const [d, n] of Object.entries(p)) {
+        switch (d) {
           case "selectedPresetOption":
-            c(n || t);
+            C(n || t);
             break;
           case T.FROM:
-            a({
+            o({
               [e.CREATED_SINCE]: n || r.current.defaultFilterParams[e.CREATED_SINCE]
             });
             break;
           case T.TO:
-            a({
+            o({
               [e.CREATED_UNTIL]: n || r.current.defaultFilterParams[e.CREATED_UNTIL]
             });
             break;
           default:
             return;
         }
-        E();
+        l();
       }
     },
-    [t, E, a]
+    [t, l, o]
   );
-  return C(() => !s && c(t), [s, t]), /* @__PURE__ */ d(
+  return s(() => !i && C(t), [i, t]), /* @__PURE__ */ b(
     I,
     {
-      label: o.get("dateRange"),
+      label: E,
+      "aria-label": E,
       name: e.CREATED_SINCE,
-      sinceDate: u,
-      untilDate: R ?? new Date(m).toString(),
-      from: i[e.CREATED_SINCE],
-      to: i[e.CREATED_UNTIL],
+      sinceDate: R,
+      untilDate: f ?? new Date(c).toString(),
+      from: m[e.CREATED_SINCE],
+      to: m[e.CREATED_UNTIL],
       selectedPresetOption: D,
       timeRangePresetOptions: r.current.timeRangeOptions,
-      timezone: l,
-      onChange: f,
+      timezone: u,
+      onChange: g,
       showTimezoneInfo: !0,
-      now: m
+      now: c
     }
   );
 };
 export {
-  M as default
+  U as default
 };

package/dist/es/components/internal/FilterBar/filters/DateFilter/DateFilterCore.js

@@ -1,126 +1,130 @@
-import { jsx as S } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { jsx as R } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import B from "../../../../../hooks/useTimezoneAwareDateFormatting.js";
-import { useState as T, useCallback as M, useMemo as h, useEffect as E, useRef as L } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { BASE_LOCALE as x } from "../../../../../core/Localization/datetime/restamper/constants.js";
-import k from "../../../../../core/Context/useCoreContext.js";
-import { DateRangeFilterParam as b } from "./types.js";
+import { useState as C, useCallback as L, useMemo as P, useEffect as T, useRef as x } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { BASE_LOCALE as z } from "../../../../../core/Localization/datetime/restamper/constants.js";
+import M from "../../../../../core/Context/useCoreContext.js";
+import { DateRangeFilterParam as A } from "./types.js";
 /* empty css                    */
-import z from "../BaseFilter/BaseFilter.js";
-import I from "../../../DatePicker/DatePicker.js";
-import { EMPTY_OBJECT as V } from "../../../../../utils/value/constants.js";
-import { CommitAction as p } from "../../../../../hooks/useCommitAction/types.js";
-const _ = {
+import I from "../BaseFilter/BaseFilter.js";
+import V from "../../../DatePicker/DatePicker.js";
+import { EMPTY_OBJECT as _ } from "../../../../../utils/value/constants.js";
+import { CommitAction as v } from "../../../../../hooks/useCommitAction/types.js";
+const Y = {
   month: "short",
   day: "numeric",
   year: "numeric"
-}, v = (s, e, n, o) => {
-  const t = n && e(n), r = o && e(o);
-  if (t && r) return `${t} - ${r}`;
-  if (t) return s.get("filter.date.since", { values: { date: t } });
-  if (r) return s.get("filter.date.until", { values: { date: r } });
-}, i = (s) => {
+}, k = (n, e, o, r) => {
+  const m = o && e(o), t = r && e(r);
+  if (m && t) return n.get("common.filters.types.date.range.between", { values: { fromDate: m, toDate: t } });
+  if (m) return n.get("common.filters.types.date.range.since", { values: { date: m } });
+  if (t) return n.get("common.filters.types.date.range.until", { values: { date: t } });
+}, s = (n) => {
   try {
-    return new Date(s || "").toISOString();
+    return new Date(n || "").toISOString();
   } catch {
     return "";
   }
-}, Y = /* @__PURE__ */ (() => {
-  const s = ({
+}, j = /* @__PURE__ */ (() => {
+  const n = ({
     editAction: e,
-    from: n,
-    to: o,
-    now: t,
-    onChange: r,
-    onValueUpdated: F,
-    showTimezoneInfo: w,
-    selectedPresetOption: f,
-    timeRangePresetOptions: c,
+    from: o,
+    to: r,
+    now: m,
+    onChange: t,
+    onValueUpdated: i,
+    showTimezoneInfo: b,
+    selectedPresetOption: g,
+    timeRangePresetOptions: F,
+    timeRangeSelectorLabel: c,
     timezone: D,
-    sinceDate: m,
-    untilDate: y
+    sinceDate: l,
+    untilDate: w
   }) => {
-    const { i18n: O } = k(), { fullDateFormat: d } = B(D), [g, R] = T(f), u = h(() => [new Date(n), new Date(o)], [n, o]), a = L(), P = M(
-      (l, C) => {
-        F(v(O, d, i(l), i(C)));
+    const { i18n: p } = M(), { fullDateFormat: d } = B(D), [y, h] = C(g), f = P(() => [new Date(o), new Date(r)], [o, r]), a = x(), O = L(
+      (u, S) => {
+        i(k(p, d, s(u), s(S)));
       },
-      [O, d, F]
+      [p, d, i]
     );
-    return E(() => {
-      var l, C, A;
+    return T(() => {
+      var u, S, E;
       switch (e) {
-        case p.APPLY:
-          r({
-            selectedPresetOption: g,
-            [b.FROM]: i((l = a.current) == null ? void 0 : l.from),
-            [b.TO]: i((C = a.current) == null ? void 0 : C.to)
+        case v.APPLY:
+          t({
+            selectedPresetOption: y,
+            [A.FROM]: s((u = a.current) == null ? void 0 : u.from),
+            [A.TO]: s((S = a.current) == null ? void 0 : S.to)
           });
           break;
-        case p.CLEAR:
-          (A = a.current) == null || A.clear(), r();
+        case v.CLEAR:
+          (E = a.current) == null || E.clear(), t();
       }
-    }, [e, r, g]), /* @__PURE__ */ S(
-      I,
+    }, [e, t, y]), /* @__PURE__ */ R(
+      V,
       {
         ref: a,
-        now: t,
-        originDate: u,
-        onHighlight: P,
-        onPresetOptionSelected: R,
-        selectedPresetOption: f,
-        timeRangePresetOptions: c,
+        now: m,
+        originDate: f,
+        onHighlight: O,
+        onPresetOptionSelected: h,
+        selectedPresetOption: g,
+        timeRangePresetOptions: F,
+        timeRangeSelectorLabel: c,
         timezone: D,
-        showTimezoneInfo: w,
-        sinceDate: i(m),
-        untilDate: i(y)
+        showTimezoneInfo: b,
+        sinceDate: s(l),
+        untilDate: s(w)
       }
     );
   };
-  return (e) => /* @__PURE__ */ S(s, { ...e });
-})(), $ = (s, e, n) => s.formatRange(e, n);
-function U({
-  title: s,
+  return (e) => /* @__PURE__ */ R(n, { ...e });
+})(), q = (n, e, o) => n.formatRange(e, o);
+function tt({
+  title: n,
   from: e,
-  to: n,
-  selectedPresetOption: o,
+  to: o,
+  selectedPresetOption: r,
+  timeRangeSelectorLabel: m,
   ...t
 }) {
-  const { i18n: r } = k(), { fullDateFormat: F } = B(t.timezone), [w, f] = T(), [c, D] = T(), [m, y] = T(), O = M(
-    (u) => {
-      const { from: a, to: P, selectedPresetOption: l } = u ?? V;
+  const { i18n: i } = M(), { fullDateFormat: b } = B(t.timezone), [g, F] = C(), [c, D] = C(), [l, w] = C(), p = L(
+    (f) => {
+      const { from: a, to: O, selectedPresetOption: u } = f ?? _;
       try {
-        f(w ?? l), D(i(c ?? a)), y(i(m ?? P));
+        F(g ?? u), D(s(c ?? a)), w(s(l ?? O));
       } finally {
-        t.onChange({ from: a, to: P, selectedPresetOption: l });
+        t.onChange({ from: a, to: O, selectedPresetOption: u });
       }
     },
-    [w, c, m, t]
-  ), d = h(() => r.get("rangePreset.custom"), [r]), g = h(() => {
-    const u = { ..._, timeZone: t.timezone };
-    let a = new Intl.DateTimeFormat(x, u);
+    [g, c, l, t]
+  ), d = P(() => i.get("common.filters.types.date.rangeSelect.options.custom"), [i]), y = P(() => {
+    const f = { ...Y, timeZone: t.timezone };
+    let a = new Intl.DateTimeFormat(z, f);
     try {
-      a = new Intl.DateTimeFormat(r.locale, u);
+      a = new Intl.DateTimeFormat(i.locale, f);
     } catch {
     }
     return a;
-  }, [r, t.timezone]);
-  E(() => f(o), [o]), E(() => D(i(e || Date.now())), [e]), E(() => y(i(n || Date.now())), [n]);
-  const R = h(() => o === d && c && m ? $(g, new Date(c), new Date(m)) : o ?? t.label, [d, g, c, m, o, t.label]);
-  return /* @__PURE__ */ S(
-    z,
+  }, [i, t.timezone]);
+  T(() => F(r), [r]), T(() => D(s(e || Date.now())), [e]), T(() => w(s(o || Date.now())), [o]);
+  const h = P(() => r === d && c && l ? q(y, new Date(c), new Date(l)) : r ?? t.label, [d, y, c, l, r, t.label]);
+  return /* @__PURE__ */ R(
+    I,
     {
       ...t,
       from: e,
-      to: n,
+      to: o,
       type: "date",
-      label: R,
-      onChange: O,
-      render: Y,
-      selectedPresetOption: o,
-      value: v(r, F, e, n),
+      label: h,
+      onChange: p,
+      render: j,
+      selectedPresetOption: r,
+      timeRangeSelectorLabel: m ?? i.get("common.filters.types.date.rangeSelect.label"),
+      value: k(i, b, e, o),
       withContentPadding: !1
     }
   );
 }
 export {
-  U as default
+  tt as default
 };

package/dist/es/components/internal/FormFields/FileInput/FileInput.js

@@ -1,50 +1,50 @@
-import { jsx as d } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { jsx as a } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import S from "../../../../core/Context/useCoreContext.js";
-import { useState as y, useRef as M, useCallback as c, useMemo as T, useEffect as b } from "../../../../external/preact/hooks/dist/hooks.module.js";
-import { UploadedFile as v } from "./components/UploadedFile.js";
-import { Dropzone as w } from "./components/Dropzone.js";
-import { validationErrors as l, BASE_CLASS as O } from "./constants.js";
+import { useState as y, useRef as M, useCallback as f, useMemo as T, useEffect as b } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { UploadedFile as w } from "./components/UploadedFile.js";
+import { Dropzone as O } from "./components/Dropzone.js";
+import { validationErrors as u, BASE_CLASS as Y } from "./constants.js";
 /* empty css               */
-import { fixedForwardRef as Y } from "../../../../utils/preact/fixedForwardRef.js";
-import { isFunction as g } from "../../../../utils/value/is.js";
-const Q = Y(({ onChange: s, mapError: a, onDelete: u, ...f }, I) => {
-  const [r, p] = y([]), m = M(r), n = r[0], { i18n: i } = S(), { disabled: o } = f, L = c(
+import { fixedForwardRef as g } from "../../../../utils/preact/fixedForwardRef.js";
+import { isFunction as k } from "../../../../utils/value/is.js";
+const Q = g(({ onChange: i, mapError: l, onDelete: n, ...m }, I) => {
+  const [r, d] = y([]), p = M(r), c = r[0], { i18n: o } = S(), { disabled: s } = m, L = f(
     (e) => {
       switch (e) {
-        case l.DISALLOWED_FILE_TYPE:
-          return i.get("inputError.disallowedFileType");
-        case l.FILE_REQUIRED:
-          return i.get("inputError.fileRequired");
-        case l.TOO_MANY_FILES:
-          return i.get("inputError.tooManyFiles");
-        case l.VERY_LARGE_FILE:
-          return i.get("inputError.veryLargeFile");
+        case u.DISALLOWED_FILE_TYPE:
+          return o.get("common.inputs.file.errors.disallowedType");
+        case u.FILE_REQUIRED:
+          return o.get("common.inputs.file.errors.required");
+        case u.TOO_MANY_FILES:
+          return o.get("common.inputs.file.errors.tooMany");
+        case u.VERY_LARGE_FILE:
+          return o.get("common.inputs.file.errors.tooLarge");
       }
     },
-    [i]
-  ), _ = T(() => g(a) ? a : L, [a]), R = c(
+    [o]
+  ), _ = T(() => k(l) ? l : L, [l]), x = f(
     (e) => {
-      o || (p((t) => {
-        const E = t.findIndex((A) => A === e);
+      s || (d((t) => {
+        const E = t.findIndex((R) => R === e);
         if (E < 0)
           return t;
         const [...F] = t;
         return F.splice(E, 1), F;
-      }), u == null || u());
+      }), n == null || n());
     },
-    [o, u]
-  ), x = c(
+    [s, n]
+  ), A = f(
     (e) => {
-      o || p((t) => t.length === 0 && e.length === 0 ? t : e);
+      s || d((t) => t.length === 0 && e.length === 0 ? t : e);
     },
-    [o]
+    [s]
   );
   return b(() => {
-    m.current !== r && (m.current = r, s == null || s([...r]));
-  }, [r, s]), /* @__PURE__ */ d("div", {
-    className: O,
+    p.current !== r && (p.current = r, i == null || i([...r]));
+  }, [r, i]), /* @__PURE__ */ a("div", {
+    className: Y,
     // prettier-ignore
-    children: n ? /* @__PURE__ */ d(v, { disabled: o, file: n, deleteFile: () => R(n) }) : /* @__PURE__ */ d(w, { ...f, ref: I, mapError: _, uploadFiles: x })
+    children: c ? /* @__PURE__ */ a(w, { disabled: s, file: c, deleteFile: () => x(c) }) : /* @__PURE__ */ a(O, { ...m, ref: I, mapError: _, uploadFiles: A })
   });
 });
 export {

package/dist/es/components/internal/FormFields/FileInput/components/Dropzone.js

@@ -1,6 +1,6 @@
 import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import x from "classnames";
-import { useState as F, useMemo as Q, useCallback as S } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useState as h, useMemo as Q, useCallback as S } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import N from "../../../Typography/Typography.js";
 import { useTrackedRef as X } from "../../../../../hooks/useTrackedRef.js";
 import Z from "../../../../../core/Context/useCoreContext.js";
@@ -9,7 +9,7 @@ import { TypographyVariant as O, TypographyElement as $ } from "../../../Typogra
 /* empty css                */
 import { fixedForwardRef as J } from "../../../../../utils/preact/fixedForwardRef.js";
 import { getUploadedFilesFromSource as K } from "../../../../../utils/file/upload.js";
-import { Icon as h } from "../../../Icon/Icon.js";
+import { Icon as v } from "../../../Icon/Icon.js";
 import { Fragment as ee } from "../../../../../external/preact/dist/preact.module.js";
 import { uniqueId as re } from "../../../../../utils/random/uniqueId.js";
 import { isFunction as R } from "../../../../../utils/value/is.js";
@@ -25,18 +25,18 @@ const o = {
   error: `${t}__error`,
   errorIcon: `${t}__error-icon`,
   errorText: `${t}__error-text`
-}, ge = J((C, w) => {
+}, ge = J((C, Y) => {
   const {
-    id: v,
+    id: F,
     name: f,
-    children: Y,
+    children: q,
     disabled: s = !1,
-    required: q = !1,
+    required: w = !1,
     maxFileSize: c = A,
     allowedFileTypes: _ = H,
     mapError: I,
     uploadFiles: D
-  } = C, { i18n: y } = Z(), [p, M] = F(""), [m, b] = F(), [V, E] = F(!1), u = !!p, B = f == null ? void 0 : f.trim(), L = Q(() => v || re(), [v]), g = X(w), P = (e) => {
+  } = C, { i18n: y } = Z(), [p, M] = h(""), [m, b] = h(), [V, E] = h(!1), u = !!p, B = f == null ? void 0 : f.trim(), L = Q(() => F || re(), [F]), g = X(Y), P = (e) => {
     var n;
     Array.from(((n = e.dataTransfer) == null ? void 0 : n.types) ?? []).some((l) => l === "Files") && (e.preventDefault(), E(!0));
   }, k = (e) => {
@@ -107,7 +107,7 @@ const o = {
               ref: g,
               name: B,
               disabled: s,
-              required: q,
+              required: w,
               accept: String(_),
               onBlur: W,
               onChange: G,
@@ -116,19 +116,19 @@ const o = {
               "data-testId": "dropzone-input"
             }
           ),
-          /* @__PURE__ */ a("label", { className: o.label, htmlFor: L, children: Y ?? /* @__PURE__ */ a("div", {
+          /* @__PURE__ */ a("label", { className: o.label, htmlFor: L, children: q ?? /* @__PURE__ */ a("div", {
             className: x(o.labelDefault),
             // prettier-ignore
             children: [
-              u ? /* @__PURE__ */ a(h, { name: "warning-filled", className: o.labelIcon }) : /* @__PURE__ */ a(h, { name: "upload", className: o.labelIcon }),
-              /* @__PURE__ */ a(N, { className: o.labelText, el: $.SPAN, variant: O.BODY, stronger: !0, children: y.get("uploadFile.browse") })
+              u ? /* @__PURE__ */ a(v, { name: "warning-filled", className: o.labelIcon }) : /* @__PURE__ */ a(v, { name: "upload", className: o.labelIcon }),
+              /* @__PURE__ */ a(N, { className: o.labelText, el: $.SPAN, variant: O.BODY, stronger: !0, children: y.get("common.inputs.file.labels.default") })
             ]
           }) })
         ]
       }
     ),
     u && /* @__PURE__ */ a("div", { className: o.error, children: [
-      /* @__PURE__ */ a(h, { name: "cross-circle-fill", className: o.errorIcon }),
+      /* @__PURE__ */ a(v, { name: "cross-circle-fill", className: o.errorIcon }),
       /* @__PURE__ */ a(N, { className: o.errorText, el: $.SPAN, variant: O.BODY, children: R(I) ? I(
         p,
         m ? { size: m.limit, type: m.type } : void 0

package/dist/es/components/internal/FormFields/FileInput/components/UploadedFile.js

@@ -1,13 +1,13 @@
 import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import c from "../../../Button/Button.js";
-import r from "../../../Typography/Typography.js";
-import { TypographyVariant as n, TypographyElement as o } from "../../../Typography/types.js";
+import n from "../../../Typography/Typography.js";
+import { TypographyVariant as t, TypographyElement as r } from "../../../Typography/types.js";
 import { ButtonVariant as p } from "../../../Button/types.js";
 import { BASE_CLASS as i } from "../constants.js";
 import { useMemo as d } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 /* empty css                */
 import { getHumanReadableFileSize as u } from "../../../../../utils/file/size.js";
-import { Icon as t } from "../../../Icon/Icon.js";
+import { Icon as o } from "../../../Icon/Icon.js";
 import { Translation as h } from "../../../Translation/Translation.js";
 const a = {
   fileBase: `${i}__file`,
@@ -21,13 +21,13 @@ function D({ file: l, deleteFile: m, disabled: s }) {
   const f = d(() => u(l.size), [l.size]);
   return /* @__PURE__ */ e("div", { className: a.fileBase, children: [
     /* @__PURE__ */ e("div", { className: a.fileDetails, children: [
-      /* @__PURE__ */ e(t, { name: "checkmark-circle-fill", className: a.fileIcon }),
-      /* @__PURE__ */ e("div", { className: a.fileName, title: l.name, children: /* @__PURE__ */ e(r, { el: o.SPAN, variant: n.BODY, stronger: !0, children: l.name }) }),
-      /* @__PURE__ */ e(r, { className: a.fileSize, el: o.SPAN, variant: n.BODY, children: f })
+      /* @__PURE__ */ e(o, { name: "checkmark-circle-fill", className: a.fileIcon }),
+      /* @__PURE__ */ e("div", { className: a.fileName, title: l.name, children: /* @__PURE__ */ e(n, { el: r.SPAN, variant: t.BODY, stronger: !0, children: l.name }) }),
+      /* @__PURE__ */ e(n, { className: a.fileSize, el: r.SPAN, variant: t.BODY, children: f })
     ] }),
     /* @__PURE__ */ e(c, { className: a.fileButton, disabled: s, variant: p.TERTIARY, onClick: m, children: [
-      /* @__PURE__ */ e(t, { name: "trash-can" }),
-      /* @__PURE__ */ e("span", { className: "adyen-pe-visually-hidden", children: /* @__PURE__ */ e(h, { translationKey: "uploadedFile.remove", fills: { filename: l.name } }) })
+      /* @__PURE__ */ e(o, { name: "trash-can" }),
+      /* @__PURE__ */ e("span", { className: "adyen-pe-visually-hidden", children: /* @__PURE__ */ e(h, { translationKey: "common.inputs.file.actions.delete", fills: { filename: l.name } }) })
     ] })
   ] });
 }

package/dist/es/components/internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.js

@@ -1,46 +1,47 @@
 import { jsx as s } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { ALL_BALANCE_ACCOUNTS_SELECTION_ID as _ } from "../../../../../hooks/useBalanceAccountSelection.js";
-import { memo as p } from "../../../../../external/preact/compat/dist/compat.module.js";
-import { useCallback as f } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import S from "../../../../../core/Context/useCoreContext.js";
-import { useResponsiveContainer as d, containerQueries as L } from "../../../../../hooks/useResponsiveContainer.js";
-import { renderDefaultSingleSelectionCheckedness as h } from "../components/SelectListItem.js";
+import { memo as S } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useMemo as d, useCallback as f } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import L from "../../../../../core/Context/useCoreContext.js";
+import { useResponsiveContainer as a, containerQueries as h } from "../../../../../hooks/useResponsiveContainer.js";
+import { renderDefaultSingleSelectionCheckedness as E } from "../components/SelectListItem.js";
 /* empty css                            */
-import { Fragment as E } from "../../../../../external/preact/dist/preact.module.js";
-import N from "../Select.js";
-const o = "adyen-pe-balance-account-selector", T = `${o}__account-id`, i = `${o}__account-label`, w = p(
+import { Fragment as N } from "../../../../../external/preact/dist/preact.module.js";
+import T from "../Select.js";
+const m = "adyen-pe-balance-account-selector", u = `${m}__account-id`, l = `${m}__account-label`, D = S(
   ({
     activeBalanceAccount: r,
-    balanceAccountSelectionOptions: m,
-    onBalanceAccountSelection: t
+    balanceAccountSelectionOptions: o,
+    onBalanceAccountSelection: n
   }) => {
-    const l = d(L.down.xs), { i18n: C } = S(), n = f(
-      (e) => /* @__PURE__ */ s(E, { children: [
+    const { i18n: t } = L(), C = a(h.down.xs), i = d(() => t.get("common.filters.types.account.label"), [t]), p = f(
+      (e) => /* @__PURE__ */ s(N, { children: [
         /* @__PURE__ */ s("div", { className: e.contentClassName, children: [
-          e.item.name && /* @__PURE__ */ s("span", { className: i, children: e.item.name }),
-          e.item.id !== _ && /* @__PURE__ */ s("span", { className: e.item.name ? T : i, children: e.item.id })
+          e.item.name && /* @__PURE__ */ s("span", { className: l, children: e.item.name }),
+          e.item.id !== _ && /* @__PURE__ */ s("span", { className: e.item.name ? u : l, children: e.item.id })
         ] }),
-        h(e)
+        E(e)
       ] }),
       []
     );
-    return m && m.length > 1 ? /* @__PURE__ */ s(
-      N,
+    return o && o.length > 1 && /* @__PURE__ */ s(
+      T,
       {
-        popoverClassNameModifiers: [o],
-        onChange: t,
+        popoverClassNameModifiers: [m],
+        onChange: n,
         filterable: !1,
         multiSelect: !1,
-        placeholder: (r == null ? void 0 : r.id) || C.get("balanceAccount"),
+        placeholder: (r == null ? void 0 : r.id) || i,
         selected: r == null ? void 0 : r.id,
         withoutCollapseIndicator: !0,
-        items: m,
-        renderListItem: n,
-        showOverlay: l
+        items: o,
+        renderListItem: p,
+        showOverlay: C,
+        "aria-label": i
       }
-    ) : null;
+    );
   }
 );
 export {
-  w as default
+  D as default
 };