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

package/dist/es/components/internal/DatePicker/DatePicker.js

@@ -1,68 +1,68 @@
-import { jsx as n } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { jsx as r } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import y from "classnames";
-import { forwardRef as z } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/compat/dist/compat.module.js";
-import { useState as R, useMemo as i, useCallback as c } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
-import w from "../../../core/Context/useCoreContext.js";
+import { forwardRef as R } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/compat/dist/compat.module.js";
+import { useState as w, useMemo as i, useCallback as s } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
 import b from "../../../hooks/useReflex.js";
 import _ from "../Calendar/hooks/useTimezone.js";
 import { DEFAULT_FIRST_WEEK_DAY as O } from "../Calendar/calendar/timerange/presets/shared/offsetWeek.js";
 import v from "../Calendar/hooks/useCalendarControlsRendering.js";
 /* empty css                */
-import I from "./components/TimeRangeSelector/TimeRangeSelector.js";
-import N from "../Calendar/Calendar.js";
-import s from "../Calendar/calendar/facade/index.js";
+import I from "../../../core/Context/preact/useCoreContext.js";
+import N from "./components/TimeRangeSelector/TimeRangeSelector.js";
+import P from "../Calendar/Calendar.js";
+import d from "../Calendar/calendar/facade/index.js";
 import { boolOrTrue as D } from "../../../utils/value/bool.js";
 import { EMPTY_OBJECT as L } from "../../../utils/value/constants.js";
 import { noop as M } from "../../../utils/common.js";
-const Q = z((e, d) => {
-  const { i18n: r } = w(), [f, h] = v(e.renderControl), [g, a] = R(performance.now()), t = i(() => D(e.showTimezoneInfo), [e.showTimezoneInfo]), { clockTime: m, GMTOffset: l } = _({ timezone: e.timezone, withClock: t }), u = i(() => y([{ "adyen-pe-datepicker--with-timezone": t }, "adyen-pe-datepicker"]), [t]), p = i(() => t ? { values: { offset: l, time: m } } : L, [l, m, t]), o = b(M, d), T = c(
-    (k) => r.get("common.filters.types.date.calendar.label", { values: { monthOfYear: k.label } }),
-    [r]
-  ), C = c(() => {
-    a(performance.now()), o.current?.from && o.current?.to && e.onHighlight?.(+o.current?.from, +o.current?.to);
-  }, [a, e.onHighlight]);
-  return /* @__PURE__ */ n("div", { className: u, children: [
-    /* @__PURE__ */ n("div", { className: "adyen-pe-datepicker__selector-container", children: /* @__PURE__ */ n(
-      I,
+const V = R((e, f) => {
+  const { i18n: n } = I(), [h, g] = v(e.renderControl), [p, a] = w(() => performance.now()), o = i(() => D(e.showTimezoneInfo), [e.showTimezoneInfo]), { clockTime: m, GMTOffset: l } = _({ timezone: e.timezone, withClock: o }), u = i(() => y([{ "adyen-pe-datepicker--with-timezone": o }, "adyen-pe-datepicker"]), [o]), T = i(() => o ? { values: { offset: l, time: m } } : L, [l, m, o]), t = b(M, f), k = s(
+    (z) => n.get("common.filters.types.date.calendar.label", { values: { monthOfYear: z.label } }),
+    [n]
+  ), { onHighlight: c } = e, C = s(() => {
+    a(performance.now()), t.current?.from && t.current?.to && c?.(+t.current?.from, +t.current?.to);
+  }, [t, a, c]);
+  return /* @__PURE__ */ r("div", { className: u, "data-testid": "date-picker", children: [
+    /* @__PURE__ */ r("div", { className: "adyen-pe-datepicker__selector-container", children: /* @__PURE__ */ r(
+      N,
       {
         now: e.now,
-        calendarRef: o,
+        calendarRef: t,
         onTimeRangeSelected: e.onPresetOptionSelected,
         options: e.timeRangePresetOptions,
         selectedOption: e.selectedPresetOption,
-        timestamp: g,
+        timestamp: p,
         timezone: e.timezone,
         "aria-label": e.timeRangeSelectorLabel
       }
     ) }),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ r(
       "div",
       {
-        ref: h,
+        ref: g,
         role: "group",
         className: "adyen-pe-datepicker__controls",
-        "aria-label": r.get("common.filters.types.date.calendar.navigation.label")
+        "aria-label": n.get("common.filters.types.date.calendar.navigation.label")
       }
     ),
-    /* @__PURE__ */ n(
-      N,
+    /* @__PURE__ */ r(
+      P,
       {
         ...e,
-        ref: o,
+        ref: t,
         firstWeekDay: O,
         dynamicBlockRows: !0,
         onlyCellsWithin: !0,
-        controls: e.controls ?? s.controls.MINIMAL,
-        highlight: e.highlight ?? s.highlight.MANY,
-        getGridLabel: T,
+        controls: e.controls ?? d.controls.MINIMAL,
+        highlight: e.highlight ?? d.highlight.MANY,
+        getGridLabel: k,
         onHighlight: C,
-        renderControl: f,
+        renderControl: h,
         trackCurrentDay: !0
       }
     ),
-    t && /* @__PURE__ */ n("div", { className: "adyen-pe-datepicker__timezone", children: r.get("common.filters.types.date.timezoneInfo", p) })
+    o && /* @__PURE__ */ r("div", { className: "adyen-pe-datepicker__timezone", "data-testid": "date-picker-timezone", children: n.get("common.filters.types.date.timezoneInfo", T) })
   ] });
 });
 export {
-  Q as default
+  V as default
 };

package/dist/es/components/internal/DatePicker/components/TimeRangeSelector/TimeRangeSelector.js

@@ -1,34 +1,42 @@
-import { jsx as h } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useMemo as O, useCallback as C, useRef as p, useEffect as a } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
-import { useTimeRangeSelection as d } from "./useTimeRangeSelection.js";
-import j from "../../../FormFields/Select/Select.js";
-const q = ({
-  ["aria-label"]: S,
+import { jsx as O } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as C, useCallback as j, useRef as g, useEffect as u } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
+import { useTimeRangeSelection as w } from "./useTimeRangeSelection.js";
+import x from "../../../FormFields/Select/Select.js";
+const y = ({
+  ["aria-label"]: p,
   calendarRef: e,
-  onTimeRangeSelected: l,
-  timestamp: t,
-  ...g
+  onTimeRangeSelected: i,
+  timestamp: n,
+  ...T
 }) => {
-  const { customSelection: u, from: n, onSelection: i, options: f, selectedOption: r, to: s } = d(g), b = O(() => Object.freeze(f.map((o) => ({ id: o, name: o }))), [f]), T = C(({ target: o }) => i(o?.value), [i]), c = p(!0), m = p(t);
-  return a(() => {
-    e?.current && n && s && (c.current = !0, e.current.from = new Date(n), e.current.to = new Date(s));
-  }, [e, n, s]), a(() => {
-    m.current !== t && (m.current = t, c.current ? c.current = !1 : u());
-  }, [u, t]), a(() => {
-    r && l?.(r);
-  }, [r, l]), /* @__PURE__ */ h(
-    j,
+  const { customSelection: l, from: r, onSelection: a, options: m, selectedOption: s, to: o } = w(T), S = C(() => Object.freeze(m.map((t) => ({ id: t, name: t }))), [m]), b = j(({ target: t }) => a(t?.value), [a]), c = g(!0), f = g(n);
+  return u(() => {
+    e?.current && r && o && (c.current = !0, e.current.from = new Date(r), e.current.to = new Date(o));
+  }, [e, r, o]), u(() => {
+    if (f.current !== n) {
+      f.current = n;
+      const t = e?.current?.from?.getTime(), h = e?.current?.to?.getTime();
+      if (t === r && h === o) {
+        c.current = !1;
+        return;
+      }
+      c.current ? c.current = !1 : l();
+    }
+  }, [e, l, r, n, o]), u(() => {
+    s && i?.(s);
+  }, [s, i]), /* @__PURE__ */ O(
+    x,
     {
       setToTargetWidth: !0,
-      items: b,
+      items: S,
       filterable: !1,
       multiSelect: !1,
-      onChange: T,
-      selected: r,
-      "aria-label": S
+      onChange: b,
+      selected: s,
+      "aria-label": p
     }
   );
 };
 export {
-  q as default
+  y as default
 };

package/dist/es/components/internal/DatePicker/components/TimeRangeSelector/useTimeRangeSelection.js

@@ -1,12 +1,12 @@
-import { useState as l, useRef as b, useMemo as m, useCallback as I } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
-import C from "../../../../../core/Context/useCoreContext.js";
-import k from "../../../Calendar/calendar/timerange/presets/yearToDate.js";
-import K from "../../../Calendar/calendar/timerange/presets/lastMonth.js";
-import z from "../../../Calendar/calendar/timerange/presets/thisMonth.js";
-import x from "../../../Calendar/calendar/timerange/presets/lastWeek.js";
-import F from "../../../Calendar/calendar/timerange/presets/thisWeek.js";
-import u from "../../../Calendar/calendar/timerange/presets/lastNDays.js";
-const s = Object.freeze({
+import { useState as l, useRef as L, useMemo as m, useCallback as b } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
+import C from "../../../Calendar/calendar/timerange/presets/yearToDate.js";
+import k from "../../../Calendar/calendar/timerange/presets/lastMonth.js";
+import K from "../../../Calendar/calendar/timerange/presets/thisMonth.js";
+import z from "../../../Calendar/calendar/timerange/presets/lastWeek.js";
+import x from "../../../Calendar/calendar/timerange/presets/thisWeek.js";
+import _ from "../../../Calendar/calendar/timerange/presets/lastNDays.js";
+import F from "../../../../../core/Context/preact/useCoreContext.js";
+const o = Object.freeze({
   LAST_7_DAYS: "common.filters.types.date.rangeSelect.options.last7Days",
   LAST_30_DAYS: "common.filters.types.date.rangeSelect.options.last30Days",
   LAST_90_DAYS: "common.filters.types.date.rangeSelect.options.last90Days",
@@ -15,69 +15,68 @@ const s = Object.freeze({
   THIS_MONTH: "common.filters.types.date.rangeSelect.options.thisMonth",
   LAST_MONTH: "common.filters.types.date.rangeSelect.options.lastMonth",
   YEAR_TO_DATE: "common.filters.types.date.rangeSelect.options.yearToDate"
-}), U = ({
-  exclude: n = []
+}), V = ({
+  exclude: s = []
 } = {}) => {
   const e = {
-    [s.LAST_7_DAYS]: u(7),
-    [s.LAST_30_DAYS]: u(30),
-    [s.LAST_90_DAYS]: u(90),
-    [s.THIS_WEEK]: F(),
-    [s.LAST_WEEK]: x(),
-    [s.THIS_MONTH]: z(),
-    [s.LAST_MONTH]: K(),
-    [s.YEAR_TO_DATE]: k()
+    [o.LAST_7_DAYS]: _(7),
+    [o.LAST_30_DAYS]: _(30),
+    [o.LAST_90_DAYS]: _(90),
+    [o.THIS_WEEK]: x(),
+    [o.LAST_WEEK]: z(),
+    [o.THIS_MONTH]: K(),
+    [o.LAST_MONTH]: k(),
+    [o.YEAR_TO_DATE]: C()
   };
-  if (!n?.length) return Object.freeze(e);
-  const i = new Set(n);
+  if (!s?.length) return Object.freeze(e);
+  const i = new Set(s);
   return Object.freeze(
     Object.fromEntries(Object.entries(e).filter(([a]) => !i.has(a)))
   );
-}, V = ({
-  now: n = Date.now(),
+}, X = ({
+  now: s,
   options: e,
   selectedOption: i,
   timezone: a
 }) => {
-  const { i18n: S } = C(), [M, O] = l(), [R, A] = l(), [p, f] = l(), g = b(), E = b(), [o, d, r] = m(() => {
-    const c = S.get("common.filters.types.date.rangeSelect.options.custom"), t = Object.keys(e), L = Object.freeze(t.map((_) => S.get(_)));
-    return [c, (_, N = L) => {
-      const Y = N.findIndex((H) => H === _);
+  const { i18n: S } = F(), [I, u] = l(), [M, O] = l(), [A, f] = l(), g = L(), E = L(), [n, y, r] = m(() => {
+    const c = S.get("common.filters.types.date.rangeSelect.options.custom"), t = Object.keys(e), R = Object.freeze(t.map((T) => S.get(T)));
+    return [c, (T, N = R) => {
+      const Y = N.findIndex((H) => H === T);
       return e[t[Y]];
-    }, L];
-  }, [S, e]), [y, D] = l(i === o), h = m(() => Object.freeze([...r, o]), [o, r]), W = m(
-    () => y ? h : r,
-    [y, r, h]
-  ), T = I(
+    }, R];
+  }, [S, e]), [d, D] = l(i === n), h = m(() => Object.freeze([...r, n]), [n, r]), W = m(
+    () => d ? h : r,
+    [d, r, h]
+  ), p = b(
     (c) => {
-      const t = d(c, r);
-      t && (O(t.from), A(t.to), D(!1), f(c));
+      const t = y(c, r);
+      t && (u(t.from), O(t.to), D(!1), f(c));
     },
-    [o, d, p, r]
-  ), j = I(() => {
-    O(void 0), A(void 0), D(!0), f(o);
-  }, [o]);
+    [y, r]
+  ), j = b(() => {
+    u(void 0), O(void 0), D(!0), f(n);
+  }, [n]);
   return m(() => {
-    i === o ? f(o) : T(i);
+    i === n ? f(n) : p(i);
   }, []), m(() => {
-    if (g.current !== n || E.current !== a) {
+    if (g.current !== s || E.current !== a) {
       const c = Object.values(e);
       c.forEach((t) => {
-        t.now = n, t.timezone = a;
-      }), g.current = n, E.current = c[0]?.timezone, T(p);
+        t.now = s ?? null, t.timezone = a;
+      }), g.current = s, E.current = c[0]?.timezone, p(A);
     }
-  }, [n, a, e]), {
+  }, [s, a, e]), {
     customSelection: j,
-    from: M,
-    onSelection: T,
+    from: I,
+    onSelection: p,
     options: W,
-    selectedOption: p,
-    to: R
+    selectedOption: A,
+    to: M
   };
 };
 export {
-  s as TIME_RANGE_SELECTION_PRESET_OPTION_KEYS,
-  V as default,
-  U as getTimeRangeSelectionDefaultPresetOptions,
-  V as useTimeRangeSelection
+  o as TIME_RANGE_SELECTION_PRESET_OPTION_KEYS,
+  V as getTimeRangeSelectionDefaultPresetOptions,
+  X as useTimeRangeSelection
 };

package/dist/es/components/internal/ErrorMessageDisplay/ErrorMessageDisplay.js

@@ -1,13 +1,13 @@
 import { jsx as e } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import P from "classnames";
+import C from "classnames";
 import p from "../Typography/Typography.js";
-import C from "../../../core/Context/useCoreContext.js";
-import { TypographyVariant as _, TypographyElement as M } from "../Typography/types.js";
+import { TypographyVariant as g, TypographyElement as M } from "../Typography/types.js";
 import { useCallback as S } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
 /* empty css                         */
+import D from "../../../core/Context/preact/useCoreContext.js";
 import { Fragment as y } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/dist/preact.module.js";
-import g from "../Button/Button.js";
-const t = "adyen-pe-error-message-display", f = 680, r = {
+import _ from "../Button/Button.js";
+const t = "adyen-pe-error-message-display", f = 680, s = {
   base: t,
   base_absolutePosition: t + "--absolute-position",
   base_centered: t + "--centered",
@@ -17,72 +17,83 @@ const t = "adyen-pe-error-message-display", f = 680, r = {
   base_condensed: t + "--condensed",
   button: t + "__button",
   illustration: t + "__illustration"
-}, D = () => /* @__PURE__ */ e(y, { children: [
+}, F = () => /* @__PURE__ */ e(y, { children: [
   " ",
   /* @__PURE__ */ e("br", {}),
   " "
-] }), U = ({
+] }), V = ({
   title: w,
   message: c,
   imageDesktop: i,
-  imageMobile: l,
+  imageMobile: d,
   withImage: v,
   centered: x,
-  refreshComponent: m,
+  refreshComponent: l,
   onRefreshComponent: E,
-  onContactSupport: a,
-  translationValues: d,
+  onContactSupport: r,
+  translationValues: m,
   absolutePosition: A = !0,
   outlined: b = !0,
   renderSecondaryButton: o,
-  withBackground: I,
-  withHeaderOffset: T,
-  condensed: k
+  withBackground: k,
+  withHeaderOffset: I,
+  condensed: T,
+  testId: O = "error-message-display"
 }) => {
-  const { i18n: s, updateCore: O, getImageAsset: h } = C(), B = S(
-    (n) => Array.isArray(n) ? n.map((u, N) => /* @__PURE__ */ e(y, { children: [
-      N > 0 && /* @__PURE__ */ e(D, {}),
-      s.get(u),
-      d?.[u]
-    ] })) : s.get(n),
-    [s, d]
+  const { i18n: a, updateCore: B, getImageAsset: u } = D(), N = S(
+    (n) => Array.isArray(n) ? n.map((h, P) => /* @__PURE__ */ e(y, { children: [
+      P > 0 && /* @__PURE__ */ e(F, {}),
+      a.get(h),
+      m?.[h]
+    ] })) : a.get(n),
+    [a, m]
   );
   return /* @__PURE__ */ e(
     "div",
     {
-      className: P(r.base, {
-        [r.base_absolutePosition]: A,
-        [r.base_centered]: x,
-        [r.base_outlined]: b,
-        [r.base_withBackground]: I !== !1 && !b,
-        [r.base_withHeaderOffset]: T,
-        [r.base_condensed]: k
+      "data-testid": O,
+      className: C(s.base, {
+        [s.base_absolutePosition]: A,
+        [s.base_centered]: x,
+        [s.base_outlined]: b,
+        [s.base_withBackground]: k !== !1 && !b,
+        [s.base_withHeaderOffset]: I,
+        [s.base_condensed]: T
       }),
       children: [
-        (i || l || v) && /* @__PURE__ */ e("div", { className: r.illustration, children: /* @__PURE__ */ e("picture", { children: [
-          /* @__PURE__ */ e("source", { type: "image/svg+xml", media: `(min-width: ${f}px)`, srcSet: i }),
+        (i || d || v) && /* @__PURE__ */ e("div", { className: s.illustration, children: /* @__PURE__ */ e("picture", { children: [
           /* @__PURE__ */ e(
             "source",
             {
+              "data-testid": "source-desktop",
+              type: "image/svg+xml",
+              media: `(min-width: ${f}px)`,
+              srcSet: i
+            }
+          ),
+          /* @__PURE__ */ e(
+            "source",
+            {
+              "data-testid": "source-mobile",
               type: "image/svg+xml",
               media: `(max-width: ${f}px)`,
-              srcSet: l ?? h?.({ name: "wrong-environment", subFolder: "images/small" })
+              srcSet: d ?? u?.({ name: "wrong-environment", subFolder: "images/small" })
             }
           ),
-          /* @__PURE__ */ e("img", { srcSet: i ?? h?.({ name: "wrong-environment" }), alt: "" })
+          /* @__PURE__ */ e("img", { srcSet: i ?? u?.({ name: "wrong-environment" }), alt: "" })
         ] }) }),
-        /* @__PURE__ */ e(p, { el: M.DIV, variant: _.TITLE, children: s.get(w) }),
-        c && /* @__PURE__ */ e(p, { variant: _.BODY, children: B(c) }),
-        (a || m || o) && /* @__PURE__ */ e("div", { className: r.button, children: [
+        /* @__PURE__ */ e(p, { el: M.DIV, variant: g.TITLE, children: a.get(w) }),
+        c && /* @__PURE__ */ e(p, { variant: g.BODY, children: N(c) }),
+        (r || l || o) && /* @__PURE__ */ e("div", { className: s.button, children: [
           o && o(),
-          a && /* @__PURE__ */ e(g, { onClick: a, children: s.get("common.actions.contactSupport.labels.reachOut") }),
-          !a && m && /* @__PURE__ */ e(g, { onClick: E ?? O, children: s.get("common.actions.refresh.labels.default") })
+          r && /* @__PURE__ */ e(_, { onClick: r, children: a.get("common.actions.contactSupport.labels.reachOut") }),
+          !r && l && /* @__PURE__ */ e(_, { onClick: E ?? B, children: a.get("common.actions.refresh.labels.default") })
         ] })
       ]
     }
   );
 };
 export {
-  U as ErrorMessageDisplay,
+  V as ErrorMessageDisplay,
   f as IMAGE_BREAKPOINT_MEDIUM_PX
 };

package/dist/es/components/internal/ExpandableCard/ExpandableCard.js

@@ -2,7 +2,7 @@ import { jsx as s } from "../../../external/.pnpm/preact@10.28.2/node_modules/pr
 import n from "classnames";
 import { useState as T, useMemo as x, useCallback as b, useRef as i, useLayoutEffect as z, useEffect as g } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
 import { useClickOutside as U } from "../../../hooks/element/useClickOutside.js";
-import { useUniqueId as V } from "../../../hooks/useUniqueId.js";
+import V from "../../../hooks/useUniqueId.js";
 /* empty css                    */
 import { CARD_HEIGHT_PROPERTY as y, BASE_CLASS as Y, CONTENT_CLASS as C, CONTENT_EXPANDABLE_CLASS as H, CHEVRON_CLASS as k, CONTAINER_CLASS as E, CONTAINER_BUTTON_CLASS as B, CONTAINER_FILLED_CLASS as A, CONTAINER_OVERLAY_CLASS as $, CONTAINER_IN_FLOW_CLASS as j, CONTAINER_HIDDEN_CLASS as G } from "./constants.js";
 import { Fragment as D } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/dist/preact.module.js";
@@ -10,7 +10,7 @@ import F from "../BaseButton/BaseButton.js";
 import { Icon as P } from "../Icon/Icon.js";
 import { isFunction as M } from "../../../utils/value/is.js";
 const ae = ({ renderContent: a, children: O, filled: c, fullWidth: S, inFlow: _, ...d }) => {
-  const [e, v] = T(!1), [R, h] = T(0), t = x(() => _ === !0, [_]), o = b(() => v((r) => !r), [v]), L = i(null), l = i(null), u = `elem-${V()}`, f = i(!1), I = i(e), m = U(
+  const [e, R] = T(!1), [v, h] = T(0), t = x(() => _ === !0, [_]), o = b(() => R((r) => !r), [R]), L = i(null), l = i(null), u = `elem-${V()}`, f = i(!1), I = i(e), m = U(
     void 0,
     b(() => {
       e && (o(), f.current = !0);
@@ -24,8 +24,8 @@ const ae = ({ renderContent: a, children: O, filled: c, fullWidth: S, inFlow: _,
   );
   return z(() => {
     const r = L.current;
-    r && (t ? r.style.setProperty(y, `${R}px`) : e || r.style.removeProperty(y));
-  }, [R, t, e]), g(() => {
+    r && (t ? r.style.setProperty(y, `${v}px`) : e || r.style.removeProperty(y));
+  }, [v, t, e]), g(() => {
     if (!t) return void h(0);
     const r = l.current;
     if (!r) return;

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

@@ -1,16 +1,16 @@
 import { jsx as i } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import b from "classnames";
 import { ButtonVariant as c } from "../Button/types.js";
-import { useState as C, useEffect as B, useMemo as I } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
-import m from "../../../core/Context/useCoreContext.js";
-import { useResponsiveContainer as h, containerQueries as x } from "../../../hooks/useResponsiveContainer.js";
+import { useState as C, useEffect as B, useMemo as h } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
+import { useResponsiveContainer as x, containerQueries as F } from "../../../hooks/useResponsiveContainer.js";
 /* empty css               */
-import { useUniqueId as F } from "../../../hooks/useUniqueId.js";
+import I from "../../../hooks/useUniqueId.js";
+import m from "../../../core/Context/preact/useCoreContext.js";
 import d from "../Button/Button.js";
 import { Icon as S } from "../Icon/Icon.js";
 import { isFunction as E } from "../../../utils/value/is.js";
-const s = "adyen-pe-filter-bar-mobile-switch", w = () => {
-  const e = h(x.down.xs), [t, o] = C(!e), r = `filters-${F()}`;
+const s = "adyen-pe-filter-bar-mobile-switch", L = () => {
+  const e = x(F.down.xs), [t, o] = C(!e), r = `filters-${I()}`;
   return B(() => {
     o(!e);
   }, [e]), { filterBarElementId: r, isMobileContainer: e, showingFilters: t, setShowingFilters: o };
@@ -21,7 +21,7 @@ const s = "adyen-pe-filter-bar-mobile-switch", w = () => {
   showingFilters: r,
   setShowingFilters: n
 }) => {
-  const { i18n: a } = m(), f = I(() => a.get(e ?? "common.filters.mobile.label"), [a]), l = !E(n), u = !l && !!r;
+  const { i18n: a } = m(), f = h(() => a.get(e ?? "common.filters.mobile.label"), [a, e]), l = !E(n), u = !l && !!r;
   return o ? /* @__PURE__ */ i("div", { className: s, children: /* @__PURE__ */ i(
     d,
     {
@@ -42,7 +42,7 @@ const s = "adyen-pe-filter-bar-mobile-switch", w = () => {
     "div",
     {
       role: "group",
-      "data-testId": "filter-bar",
+      "data-testid": "filter-bar",
       "aria-label": t.get(e.ariaLabelKey ?? "common.filters.label"),
       className: b("adyen-pe-filter-bar", { "adyen-pe-filter-bar--mobile": e.isMobileContainer }),
       id: e.filterBarElementId,
@@ -57,5 +57,5 @@ export {
   O as FilterBar,
   k as FilterBarMobileSwitch,
   O as default,
-  w as useFilterBarState
+  L as useFilterBarState
 };

package/dist/es/components/internal/FilterBar/components/FilterButton/FilterButton.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import f from "../../../Button/hooks/useButton.js";
+import u from "../../../Button/hooks/useButton.js";
 import { TypographyVariant as d, TypographyElement as y } from "../../../Typography/types.js";
 import T from "../../../Typography/Typography.js";
 import { useMemo as a } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
@@ -7,20 +7,20 @@ import { useMemo as a } from "../../../../../external/.pnpm/preact@10.28.2/node_
 import { fixedForwardRef as h } from "../../../../../utils/preact/fixedForwardRef.js";
 import { parseClassName as B } from "../../../../../utils/preact/className.js";
 import { parseBooleanProp as N } from "../../../../../utils/preact/props.js";
-const b = "adyen-pe-filter-button";
-function C(r, i) {
-  const { className: t, classNameModifiers: s = [], children: F, disabled: o, onClick: l, ...g } = r, n = a(() => B("", t) || "", [t]), m = a(() => N(o), [o]), { allChildren: p, allProps: c, click: u } = f(
-    n,
+const C = "adyen-pe-filter-button";
+function F(o, i) {
+  const { className: r, classNameModifiers: l = [], disabled: t, onClick: n } = o, s = a(() => B("", r) || "", [r]), m = a(() => N(t), [t]), { allChildren: p, allProps: c, click: f } = u(
     s,
-    b,
+    l,
+    C,
     m,
-    r,
-    r.type,
-    l
+    o,
+    o.type,
+    n
   );
-  return /* @__PURE__ */ e("button", { ref: i, onClick: u, ...c, children: /* @__PURE__ */ e(T, { el: y.DIV, variant: d.BODY, stronger: !0, children: p }) });
+  return /* @__PURE__ */ e("button", { ref: i, onClick: f, ...c, children: /* @__PURE__ */ e(T, { el: y.DIV, variant: d.BODY, stronger: !0, children: p }) });
 }
-const I = h(C);
+const M = h(F);
 export {
-  I as default
+  M as default
 };