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

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

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

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

@@ -1,6 +1,6 @@
 import { jsx as s } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import a from "classnames";
-import { useState as T, useMemo as x, useCallback as b, useRef as c, useLayoutEffect as z, useEffect as g } from "../../../external/preact/hooks/dist/hooks.module.js";
+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/preact/hooks/dist/hooks.module.js";
 import { useClickOutside as U } from "../../../hooks/element/useClickOutside.js";
 import { useUniqueId as V } from "../../../hooks/useUniqueId.js";
 /* empty css                    */
@@ -9,50 +9,49 @@ import { Fragment as D } from "../../../external/preact/dist/preact.module.js";
 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: o, children: O, filled: d, fullWidth: S, inFlow: _, ...l }) => {
-  const [r, v] = T(!1), [R, h] = T(0), n = x(() => _ === !0, [_]), i = b(() => v((e) => !e), [v]), L = c(null), u = c(null), f = `elem-${V()}`, m = c(!1), I = c(r), p = U(
+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(
     void 0,
     b(() => {
-      r && (i(), m.current = !0);
-    }, [r, i])
-  ), N = x(
-    () => M(o) ? o : ({ collapsibleContent: e }) => /* @__PURE__ */ s(D, { children: [
-      o,
-      e && /* @__PURE__ */ s("div", { children: e })
+      e && (o(), f.current = !0);
+    }, [e, o])
+  ), p = x(
+    () => M(a) ? a : ({ collapsibleContent: r }) => /* @__PURE__ */ s(D, { children: [
+      a,
+      r && /* @__PURE__ */ s("div", { children: r })
     ] }),
-    [o]
+    [a]
   );
   return z(() => {
-    const e = L.current;
-    e && (n ? e.style.setProperty(y, `${R}px`) : r || e.style.removeProperty(y));
-  }, [R, n, r]), g(() => {
-    if (!n) return void h(0);
-    const e = u.current;
-    if (!e) return;
-    const t = new ResizeObserver((q) => {
+    const r = L.current;
+    r && (t ? r.style.setProperty(y, `${R}px`) : e || r.style.removeProperty(y));
+  }, [R, t, e]), g(() => {
+    if (!t) return void h(0);
+    const r = l.current;
+    if (!r) return;
+    const N = new ResizeObserver((q) => {
       for (const w of q)
-        w.target === e && h(e.offsetHeight || 0);
+        w.target === r && h(r.offsetHeight || 0);
     });
-    return t.observe(e), () => {
-      t.unobserve(e), t.disconnect();
+    return N.observe(r), () => {
+      N.unobserve(r), N.disconnect();
     };
-  }, [n]), g(() => {
-    var e, t;
-    r ? (e = p.current) == null || e.focus() : (I.current !== r && !m.current && ((t = u.current) == null || t.focus()), m.current = !1), I.current = r;
-  }, [r, p]), /* @__PURE__ */ s("div", { ref: L, className: Y, children: O ? /* @__PURE__ */ s(D, { children: [
+  }, [t]), g(() => {
+    e ? m.current?.focus() : (I.current !== e && !f.current && l.current?.focus(), f.current = !1), I.current = e;
+  }, [e, m]), /* @__PURE__ */ s("div", { ref: L, className: Y, children: O ? /* @__PURE__ */ s(D, { children: [
     /* @__PURE__ */ s(
       F,
       {
-        className: a(E, B, { [A]: d }),
-        disabled: r,
+        className: n(E, B, { [A]: c }),
+        disabled: e,
         fullWidth: S,
-        onClick: i,
-        ref: u,
+        onClick: o,
+        ref: l,
         "data-testid": "expand-button",
-        ...r ? { "aria-hidden": !0 } : { "aria-controls": f, "aria-expanded": !1 },
-        ...l,
+        ...e ? { "aria-hidden": !0 } : { "aria-controls": u, "aria-expanded": !1 },
+        ...d,
         children: [
-          /* @__PURE__ */ s("div", { className: a(C, H), children: N({ isExpanded: r }) }),
+          /* @__PURE__ */ s("div", { className: n(C, H), children: p({ isExpanded: e }) }),
           /* @__PURE__ */ s("div", { className: k, children: /* @__PURE__ */ s(P, { name: "chevron-down" }) })
         ]
       }
@@ -60,26 +59,26 @@ const ae = ({ renderContent: o, children: O, filled: d, fullWidth: S, inFlow: _,
     /* @__PURE__ */ s(
       F,
       {
-        id: f,
-        className: a(E, B, $, {
-          [A]: d,
-          [G]: !r,
-          [j]: n
+        id: u,
+        className: n(E, B, $, {
+          [A]: c,
+          [G]: !e,
+          [j]: t
         }),
-        disabled: !r,
+        disabled: !e,
         fullWidth: S,
-        onClick: i,
-        ref: p,
+        onClick: o,
+        ref: m,
         "data-testid": "collapse-button",
-        ...r ? { "aria-controls": f, "aria-expanded": !0 } : { role: "presentation" },
-        ...l,
+        ...e ? { "aria-controls": u, "aria-expanded": !0 } : { role: "presentation" },
+        ...d,
         children: [
-          /* @__PURE__ */ s("div", { className: a(C, H), children: N({ isExpanded: r, collapsibleContent: O }) }),
+          /* @__PURE__ */ s("div", { className: n(C, H), children: p({ isExpanded: e, collapsibleContent: O }) }),
           /* @__PURE__ */ s("div", { className: k, children: /* @__PURE__ */ s(P, { name: "chevron-up" }) })
         ]
       }
     )
-  ] }) : /* @__PURE__ */ s("div", { className: a(E, { [A]: d }), ...l, children: /* @__PURE__ */ s("div", { className: C, children: N({ isExpanded: !1 }) }) }) });
+  ] }) : /* @__PURE__ */ s("div", { className: n(E, { [A]: c }), ...d, children: /* @__PURE__ */ s("div", { className: C, children: p({ isExpanded: !1 }) }) }) });
 };
 export {
   ae as default

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

@@ -1,28 +1,28 @@
-import { jsx as a } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { jsx as i } from "../../../external/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/preact/hooks/dist/hooks.module.js";
 import m from "../../../core/Context/useCoreContext.js";
-import { useResponsiveContainer as x, containerQueries as E } from "../../../hooks/useResponsiveContainer.js";
+import { useResponsiveContainer as h, containerQueries as x } from "../../../hooks/useResponsiveContainer.js";
 /* empty css               */
-import { useUniqueId as p } from "../../../hooks/useUniqueId.js";
+import { useUniqueId as F } from "../../../hooks/useUniqueId.js";
 import d from "../Button/Button.js";
-import { Icon as v } from "../Icon/Icon.js";
-import { isFunction as y } from "../../../utils/value/is.js";
-const s = "adyen-pe-filter-bar-mobile-switch", O = () => {
-  const e = x(E.down.xs), [t, i] = C(!e), r = `filters-${p()}`;
+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()}`;
   return B(() => {
-    i(!e);
-  }, [e]), { filterBarElementId: r, isMobileContainer: e, showingFilters: t, setShowingFilters: i };
-}, Y = ({
+    o(!e);
+  }, [e]), { filterBarElementId: r, isMobileContainer: e, showingFilters: t, setShowingFilters: o };
+}, k = ({
   ariaLabelKey: e,
   filterBarElementId: t,
-  isMobileContainer: i,
+  isMobileContainer: o,
   showingFilters: r,
-  setShowingFilters: o
+  setShowingFilters: n
 }) => {
-  const { i18n: n } = m(), f = I(() => n.get(e ?? "common.filters.mobile.label"), [n]), l = !y(o), u = !l && !!r;
-  return i ? /* @__PURE__ */ a("div", { className: s, children: /* @__PURE__ */ a(
+  const { i18n: a } = m(), f = I(() => a.get(e ?? "common.filters.mobile.label"), [a]), l = !E(n), u = !l && !!r;
+  return o ? /* @__PURE__ */ i("div", { className: s, children: /* @__PURE__ */ i(
     d,
     {
       iconButton: !0,
@@ -31,14 +31,14 @@ const s = "adyen-pe-filter-bar-mobile-switch", O = () => {
       "aria-label": f,
       "aria-expanded": u,
       "aria-controls": t,
-      onClick: () => o == null ? void 0 : o(!r),
+      onClick: () => n?.(!r),
       variant: c.SECONDARY,
-      children: /* @__PURE__ */ a(v, { name: r ? "cross" : "filter" })
+      children: /* @__PURE__ */ i(S, { name: r ? "cross" : "filter" })
     }
   ) }) : null;
-}, $ = (e) => {
+}, O = (e) => {
   const { i18n: t } = m();
-  return e.showingFilters ? /* @__PURE__ */ a(
+  return e.showingFilters ? /* @__PURE__ */ i(
     "div",
     {
       role: "group",
@@ -48,14 +48,14 @@ const s = "adyen-pe-filter-bar-mobile-switch", O = () => {
       id: e.filterBarElementId,
       children: [
         e.children,
-        e.canResetFilters && !!e.resetFilters && /* @__PURE__ */ a(d, { variant: c.TERTIARY, onClick: e.resetFilters, children: t.get("common.filters.controls.resetAll.label") })
+        e.canResetFilters && !!e.resetFilters && /* @__PURE__ */ i(d, { variant: c.TERTIARY, onClick: e.resetFilters, children: t.get("common.filters.controls.resetAll.label") })
       ]
     }
   ) : null;
 };
 export {
-  $ as FilterBar,
-  Y as FilterBarMobileSwitch,
-  $ as default,
-  O as useFilterBarState
+  O as FilterBar,
+  k as FilterBarMobileSwitch,
+  O as default,
+  w as useFilterBarState
 };

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

@@ -1,73 +1,74 @@
 import { jsx as n } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useResponsiveContainer as C, containerQueries as M } from "../../../../../hooks/useResponsiveContainer.js";
-import L from "../../components/FilterButton/FilterButton.js";
-import j from "../../../Popover/Popover.js";
-import { PopoverContainerPosition as Q, PopoverContainerVariant as G } from "../../../Popover/types.js";
-import { TypographyVariant as _, TypographyElement as D } from "../../../Typography/types.js";
-import I from "../../../Typography/Typography.js";
-import { memo as J } from "../../../../../external/preact/compat/dist/compat.module.js";
-import { useMemo as E, useRef as V, useCallback as R, useEffect as p, useState as K } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import m from "../../../../../hooks/useBooleanState.js";
-import { useUniqueId as W } from "../../../../../hooks/useUniqueId.js";
-import X from "../../../FormFields/InputText.js";
-import Z from "../../../../../hooks/useCommitAction/useCommitAction.js";
-import { Fragment as ee } from "../../../../../external/preact/dist/preact.module.js";
-import { isEmptyString as te } from "../../../../../utils/value/string.js";
-import { isNull as ie } from "../../../../../utils/value/is.js";
-import { CommitAction as T } from "../../../../../hooks/useCommitAction/types.js";
-const ae = (r) => !r || te(r), ne = /* @__PURE__ */ (() => {
-  const r = (d) => {
-    const { editAction: e, name: b, onChange: t, onValueUpdated: s } = d, [c, u] = K(d.value), i = V(null), f = R(
-      (a) => {
-        const y = a.target.value.trim();
-        u(y), s(y);
+import { useResponsiveContainer as g, containerQueries as M } from "../../../../../hooks/useResponsiveContainer.js";
+import H from "../../components/FilterButton/FilterButton.js";
+import L from "../../../Popover/Popover.js";
+import { PopoverContainerPosition as j, PopoverContainerVariant as Q } from "../../../Popover/types.js";
+import { TypographyVariant as S, TypographyElement as _ } from "../../../Typography/types.js";
+import D from "../../../Typography/Typography.js";
+import { memo as G } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useMemo as E, useRef as V, useCallback as T, useEffect as v, useState as J } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import d from "../../../../../hooks/useBooleanState.js";
+import { useUniqueId as K } from "../../../../../hooks/useUniqueId.js";
+import W from "../../../FormFields/InputText.js";
+import X from "../../../../../hooks/useCommitAction/useCommitAction.js";
+import { Fragment as Z } from "../../../../../external/preact/dist/preact.module.js";
+import { isEmptyString as ee } from "../../../../../utils/value/string.js";
+import { isNull as te } from "../../../../../utils/value/is.js";
+import { CommitAction as I } from "../../../../../hooks/useCommitAction/types.js";
+const ie = (r) => !r || ee(r), ae = /* @__PURE__ */ (() => {
+  const r = (c) => {
+    const { editAction: e, name: b, onChange: t, onValueUpdated: s } = c, [m, u] = J(c.value), a = V(null), f = T(
+      (i) => {
+        const p = i.target.value.trim();
+        u(p), s(p);
       },
       [s]
     );
-    return p(() => {
-      i.current && i.current.focus();
-    }, [i]), p(() => {
-      if (e === T.CLEAR) {
-        const a = "";
-        u(a), s(a), t(a);
+    return v(() => {
+      (function i() {
+        a.current ? a.current.focus() : requestAnimationFrame(i);
+      })();
+    }, [a]), v(() => {
+      if (e === I.CLEAR) {
+        const i = "";
+        u(i), s(i), t(i);
       }
-      e === T.APPLY && t(c ?? "");
-    }, [c, e, t, s]), /* @__PURE__ */ n(X, { ref: i, name: b, value: c, onInput: f });
+      e === I.APPLY && t(m ?? "");
+    }, [m, e, t, s]), /* @__PURE__ */ n(W, { ref: a, name: b, value: m, onInput: f });
   };
-  return (d) => /* @__PURE__ */ n(r, { ...d });
-})(), oe = ({ render: r, ["aria-label"]: d, ...e }) => {
-  var S;
-  const b = C(M.down.xs), [t, s] = m(!1), [c, u] = m(!1), i = E(() => e.isValueEmpty ?? ae, [e.isValueEmpty]), [f, a] = m(i(e.value)), [y, h] = m(!1), [w, A] = m(!1), [k, P] = m(i(e.value)), g = V(null), x = `elem-${W()}`, U = E(() => r ?? ne, [r]), Y = R(
+  return (c) => /* @__PURE__ */ n(r, { ...c });
+})(), ne = ({ render: r, ["aria-label"]: c, ...e }) => {
+  const b = g(M.down.xs), [t, s] = d(!1), [m, u] = d(!1), a = E(() => e.isValueEmpty ?? ie, [e.isValueEmpty]), [f, i] = d(a(e.value)), [p, h] = d(!1), [R, A] = d(!1), [w, F] = d(a(e.value)), C = V(null), k = `elem-${K()}`, x = E(() => r ?? ae, [r]), q = T(
     (o) => {
-      const l = i(o ?? void 0);
-      a(l), P(ie(o)), A(y ? o !== e.value : !l);
+      const l = a(o ?? void 0);
+      i(l), F(te(o)), A(p ? o !== e.value : !l);
     },
-    [i, a, P, A, y, e.value]
-  ), { commitAction: $, commitActionButtons: q, committing: B, resetCommitAction: F } = Z({
-    applyDisabled: k || !w,
+    [a, i, F, A, p, e.value]
+  ), { commitAction: U, commitActionButtons: Y, committing: P, resetCommitAction: B } = X({
+    applyDisabled: w || !R,
     resetDisabled: f,
-    onResetAction: e == null ? void 0 : e.onResetAction
-  }), N = V(!1), [v, O] = E(() => {
+    onResetAction: e?.onResetAction
+  }), N = V(!1), [y, O] = E(() => {
     const o = (l) => () => {
-      l === t || l && N.current || (l && (F(), A(!1), h(!1)), s(l), u(l));
+      l === t || l && N.current || (l && (B(), A(!1), h(!1)), s(l), u(l));
     };
     return [o(!1), o(!0)];
-  }, [s, t, F, u, h, A]);
-  p(() => {
-    if (c) {
-      const o = i(e.value);
-      u(!1), a(o), h(!o);
+  }, [s, t, B, u, h, A]);
+  v(() => {
+    if (m) {
+      const o = a(e.value);
+      u(!1), i(o), h(!o);
     }
-  }, [e.value, c, i, u, a, h]), p(() => {
-    B && v();
-  }, [B, v]), p(() => {
+  }, [e.value, m, a, u, i, h]), v(() => {
+    P && y();
+  }, [P, y]), v(() => {
     N.current = t;
   }, [t]);
-  const z = C(M.only.sm), H = C(M.only.md);
-  return /* @__PURE__ */ n(ee, { children: [
+  const $ = g(M.only.sm), z = g(M.only.md);
+  return /* @__PURE__ */ n(Z, { children: [
     /* @__PURE__ */ n("div", { className: `adyen-pe-filter adyen-pe-filter--${e.type}`, children: E(
       () => /* @__PURE__ */ n(
-        L,
+        H,
         {
           classNameModifiers: [
             ...e.appliedFilterAmount ? ["with-counter"] : [],
@@ -75,18 +76,18 @@ const ae = (r) => !r || te(r), ne = /* @__PURE__ */ (() => {
             ...t ? ["active"] : [],
             ...f ? [] : ["has-selection"]
           ],
-          "aria-label": d,
-          id: x,
-          onClick: t ? v : O,
-          ref: g,
+          "aria-label": c,
+          id: k,
+          onClick: t ? y : O,
+          ref: C,
           tabIndex: 0,
           children: /* @__PURE__ */ n("div", { className: "adyen-pe-filter-button__default-container", children: [
-            /* @__PURE__ */ n(I, { el: D.SPAN, variant: _.BODY, className: "adyen-pe-filter-button__label", children: e.label }),
+            /* @__PURE__ */ n(D, { el: _.SPAN, variant: S.BODY, className: "adyen-pe-filter-button__label", children: e.label }),
             !!e.appliedFilterAmount && /* @__PURE__ */ n("div", { className: "adyen-pe-filter-button__counter-wrapper", children: /* @__PURE__ */ n(
-              I,
+              D,
               {
-                el: D.SPAN,
-                variant: _.BODY,
+                el: _.SPAN,
+                variant: S.BODY,
                 stronger: !0,
                 className: "adyen-pe-filter-button__counter",
                 children: e.appliedFilterAmount
@@ -101,34 +102,34 @@ const ae = (r) => !r || te(r), ne = /* @__PURE__ */ (() => {
         e.label,
         t,
         f,
-        v,
+        y,
         O,
-        g
+        C
       ]
     ) }),
     t && /* @__PURE__ */ n(
-      j,
+      L,
       {
-        actions: q,
-        title: (S = e.title) == null ? void 0 : S.trim(),
-        variant: G.POPOVER,
+        actions: Y,
+        title: e.title?.trim(),
+        variant: Q.POPOVER,
         modifiers: ["filter"],
         open: t,
-        dismiss: v,
+        dismiss: y,
         dismissible: !1,
         withContentPadding: e.withContentPadding ?? !0,
         divider: !0,
-        targetElement: g,
+        targetElement: C,
         disableFocusTrap: !1,
-        position: Q.BOTTOM,
+        position: j.BOTTOM,
         containerSize: e.containerSize,
         showOverlay: b,
-        fitPosition: z || H,
-        children: U({ ...e, editAction: $, onValueUpdated: Y })
+        fitPosition: $ || z,
+        children: x({ ...e, editAction: U, onValueUpdated: q })
       }
     )
   ] });
-}, Me = J(oe);
+}, ge = G(ne);
 export {
-  Me as default
+  ge as default
 };