@adyen/adyen-platform-experience-web 1.0.0-beta → 1.0.0-beta.2

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

@@ -0,0 +1,4 @@
+const t = "";
+export {
+  t as default
+};

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

@@ -1,78 +1,56 @@
-import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
-import BaseFilter from "../BaseFilter/BaseFilter.js";
-import { RangeSelection } from "./RangeSelection.js";
-import { h, F, T } from "../../../../../../hooks.module-8565d716.mjs";
-import "../../../../../utils/common/index.js";
-import { P as PopoverContainerSize } from "../../../../../../usePopoverPositioner-882fea89.mjs";
-import useCoreContext from "../../../../../core/Context/useCoreContext.js";
-import { AMOUNT_MULTIPLIER } from "./constants.js";
-import { EMPTY_OBJECT } from "../../../../../utils/common/constants.js";
-const AmountFilter = ({ updateFilters, selectedCurrencies, availableCurrencies, ...props }) => {
-  const { i18n } = useCoreContext();
-  const [value, setValue] = h();
-  const [formattedValue, setValueFormattedValue] = h();
-  const showCurrencySymbol = F(() => {
-    if ((selectedCurrencies == null ? void 0 : selectedCurrencies.length) === 1 || (availableCurrencies == null ? void 0 : availableCurrencies.length) === 1)
-      return true;
-    return false;
-  }, [availableCurrencies == null ? void 0 : availableCurrencies.length, selectedCurrencies == null ? void 0 : selectedCurrencies.length]);
-  const formatAmount = T(
-    (amount, showSymbol) => {
-      const currencyCode = (selectedCurrencies == null ? void 0 : selectedCurrencies[0]) || (availableCurrencies == null ? void 0 : availableCurrencies[0]);
-      const options = showSymbol && currencyCode ? {
+import { jsx as I } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { RangeSelection as P } from "./RangeSelection.js";
+import { useState as p, useMemo as U, useCallback as T } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { PopoverContainerSize as v } from "../../../Popover/types.js";
+import w from "../../../../../core/Context/useCoreContext.js";
+import { AMOUNT_MULTIPLIER as E } from "./constants.js";
+import z from "../BaseFilter/BaseFilter.js";
+import { EMPTY_OBJECT as B } from "../../../../../utils/common/constants.js";
+const N = ({ updateFilters: $, selectedCurrencies: t, availableCurrencies: m, ...x }) => {
+  const { i18n: A } = w(), [y, L] = p(), [M, g] = p(), h = U(() => (t == null ? void 0 : t.length) === 1 || (m == null ? void 0 : m.length) === 1, [m == null ? void 0 : m.length, t == null ? void 0 : t.length]), S = T(
+    (n, o) => {
+      const f = (t == null ? void 0 : t[0]) || (m == null ? void 0 : m[0]), F = o && f ? {
         style: "currency",
-        currency: currencyCode,
+        currency: f,
         currencyDisplay: "symbol"
       } : void 0;
-      return amount.toLocaleString(i18n.locale, options);
+      return n.toLocaleString(A.locale, F);
     },
-    [availableCurrencies, i18n, selectedCurrencies]
-  );
-  const onFilterChange = T(
-    (params) => {
-      const { minAmount, maxAmount } = params ?? EMPTY_OBJECT;
-      setValue({ minAmount, maxAmount });
-      if (minAmount === void 0 && maxAmount === void 0)
-        setValueFormattedValue(void 0);
-      updateFilters({
-        minAmount: minAmount !== void 0 ? String(minAmount * AMOUNT_MULTIPLIER) : void 0,
-        maxAmount: maxAmount !== void 0 ? String(maxAmount * AMOUNT_MULTIPLIER) : void 0
+    [m, A, t]
+  ), V = T(
+    (n) => {
+      const { minAmount: o, maxAmount: f } = n ?? B;
+      L({ minAmount: o, maxAmount: f }), o === void 0 && f === void 0 && g(void 0), $({
+        minAmount: o !== void 0 ? String(o * E) : void 0,
+        maxAmount: f !== void 0 ? String(f * E) : void 0
       });
     },
-    [updateFilters]
+    [$]
   );
-  if (value && (value.minAmount || value.maxAmount)) {
-    const { minAmount, maxAmount } = value ?? {};
-    if (minAmount !== void 0 && maxAmount !== void 0 && minAmount <= maxAmount) {
-      setValueFormattedValue(
-        `${formatAmount(minAmount, showCurrencySymbol)} ${i18n.get("to").toLowerCase()} ${formatAmount(maxAmount, showCurrencySymbol)}`
-      );
-    } else if (minAmount !== void 0 && maxAmount === void 0 && minAmount >= 0) {
-      setValueFormattedValue(`${i18n.get("from")} ${formatAmount(minAmount, showCurrencySymbol)}`);
-    } else if (minAmount === void 0 && maxAmount !== void 0) {
-      setValueFormattedValue(`${i18n.get("to")} ${formatAmount(maxAmount, showCurrencySymbol)}`);
-    } else {
-      setValueFormattedValue(void 0);
-    }
+  if (y && (y.minAmount || y.maxAmount)) {
+    const { minAmount: n, maxAmount: o } = y ?? {};
+    n !== void 0 && o !== void 0 && n <= o ? g(
+      `${S(n, h)} ${A.get("to").toLowerCase()} ${S(o, h)}`
+    ) : n !== void 0 && o === void 0 && n >= 0 ? g(`${A.get("from")} ${S(n, h)}`) : g(n === void 0 && o !== void 0 ? `${A.get("to")} ${S(o, h)}` : void 0);
   }
-  return /* @__PURE__ */ o(
-    BaseFilter,
+  return /* @__PURE__ */ I(
+    z,
     {
-      ...props,
-      updateFilters,
-      minAmount: props.minAmount,
-      maxAmount: props.maxAmount,
-      onChange: onFilterChange,
-      value: formattedValue,
-      label: formattedValue ? formattedValue : props.label,
+      ...x,
+      updateFilters: $,
+      minAmount: x.minAmount,
+      maxAmount: x.maxAmount,
+      onChange: V,
+      value: M,
+      label: M || x.label,
       type: "text",
-      containerSize: PopoverContainerSize.MEDIUM,
-      selectedCurrencies,
-      availableCurrencies,
-      render: RangeSelection
+      containerSize: v.MEDIUM,
+      selectedCurrencies: t,
+      availableCurrencies: m,
+      render: P
     }
   );
 };
 export {
-  AmountFilter
+  N as AmountFilter
 };

package/dist/es/components/internal/FilterBar/filters/AmountFilter/AmountFilter.scss.js

@@ -0,0 +1,4 @@
+const t = "";
+export {
+  t as default
+};

package/dist/es/components/internal/FilterBar/filters/AmountFilter/RangeSelection.js

@@ -1,88 +1,73 @@
-import '../../../../../../RangeSelection.css';
-import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
-import InputBase from "../../../FormFields/InputBase.js";
-import { h, T, p, F } from "../../../../../../hooks.module-8565d716.mjs";
-import { C as CommitAction } from "../../../../../../types-e6a6a3ff.mjs";
-import useCoreContext from "../../../../../core/Context/useCoreContext.js";
-import "../../../../../utils/common/index.js";
-import { AMOUNT_MULTIPLIER } from "./constants.js";
-const AmountFilter = "";
-const RangeSelection = ({
-  onChange,
-  editAction,
-  onValueUpdated,
-  selectedCurrencies,
-  availableCurrencies,
-  value,
-  ...props
+import { jsx as n } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import f from "../../../FormFields/InputBase.js";
+import "./AmountFilter.scss.js";
+import { useState as p, useCallback as A, useEffect as g, useMemo as F } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import h from "../../../../../core/Context/useCoreContext.js";
+import { AMOUNT_MULTIPLIER as x } from "./constants.js";
+import { CommitAction as T } from "../../../../../hooks/useCommitAction/types.js";
+const E = ({
+  onChange: l,
+  editAction: m,
+  onValueUpdated: u,
+  selectedCurrencies: b,
+  availableCurrencies: I,
+  value: M,
+  ...i
 }) => {
-  const { i18n } = useCoreContext();
-  const [minAmount, setMinAmount] = h(
-    props.minAmount !== void 0 ? parseFloat(props.minAmount) / AMOUNT_MULTIPLIER : void 0
-  );
-  const [maxAmount, setMaxAmount] = h(
-    props.maxAmount !== void 0 ? parseFloat(props.maxAmount) / AMOUNT_MULTIPLIER : void 0
-  );
-  const applyFilter = T(() => {
-    onChange({ minAmount, maxAmount });
-  }, [maxAmount, minAmount, onChange]);
-  const clearFilter = T(() => {
-    onChange({ minAmount: void 0, maxAmount: void 0 });
-    setMaxAmount(void 0);
-    setMinAmount(void 0);
-  }, [onChange]);
-  p(() => {
-    if (editAction === CommitAction.APPLY)
-      applyFilter();
-    if (editAction === CommitAction.CLEAR)
-      clearFilter();
-  }, [applyFilter, clearFilter, editAction]);
-  const filterValue = F(() => ({ minAmount, maxAmount }), [maxAmount, minAmount]);
-  p(() => {
-    if (filterValue.minAmount || filterValue.maxAmount)
-      onValueUpdated(`${filterValue.minAmount}-${filterValue.maxAmount}`);
-    else
-      onValueUpdated(null);
-  }, [filterValue, onValueUpdated]);
-  return /* @__PURE__ */ o("div", { className: "adyen-pe-range-selection-filter", children: [
-    /* @__PURE__ */ o("div", { className: "adyen-pe-range-selection-filter__input", children: [
-      /* @__PURE__ */ o("label", { htmlFor: "minValue", children: `${i18n.get("from")}:` }),
-      /* @__PURE__ */ o(
-        InputBase,
+  const { i18n: r } = h(), [e, s] = p(
+    i.minAmount !== void 0 ? parseFloat(i.minAmount) / x : void 0
+  ), [t, c] = p(
+    i.maxAmount !== void 0 ? parseFloat(i.maxAmount) / x : void 0
+  ), v = A(() => {
+    l({ minAmount: e, maxAmount: t });
+  }, [t, e, l]), d = A(() => {
+    l({ minAmount: void 0, maxAmount: void 0 }), c(void 0), s(void 0);
+  }, [l]);
+  g(() => {
+    m === T.APPLY && v(), m === T.CLEAR && d();
+  }, [v, d, m]);
+  const o = F(() => ({ minAmount: e, maxAmount: t }), [t, e]);
+  return g(() => {
+    o.minAmount || o.maxAmount ? u(`${o.minAmount}-${o.maxAmount}`) : u(null);
+  }, [o, u]), /* @__PURE__ */ n("div", { className: "adyen-pe-range-selection-filter", children: [
+    /* @__PURE__ */ n("div", { className: "adyen-pe-range-selection-filter__input", children: [
+      /* @__PURE__ */ n("label", { htmlFor: "minValue", children: `${r.get("from")}:` }),
+      /* @__PURE__ */ n(
+        f,
         {
-          lang: i18n.locale,
+          lang: r.locale,
           name: "minValue",
           type: "number",
-          value: minAmount,
-          onInput: (e) => {
-            e.currentTarget && setMinAmount(e.currentTarget.value !== "" ? parseFloat(e.currentTarget.value) : void 0);
+          value: e,
+          onInput: (a) => {
+            a.currentTarget && s(a.currentTarget.value !== "" ? parseFloat(a.currentTarget.value) : void 0);
           },
           min: 0,
-          isInvalid: minAmount ? minAmount < 0 : false,
-          errorMessage: i18n.get("noNegativeNumbersAllowed")
+          isInvalid: e ? e < 0 : !1,
+          errorMessage: r.get("noNegativeNumbersAllowed")
         }
       )
     ] }),
-    /* @__PURE__ */ o("div", { className: "adyen-pe-range-selection-filter__input", children: [
-      /* @__PURE__ */ o("label", { htmlFor: "maxValue", children: `${i18n.get("to")}:` }),
-      /* @__PURE__ */ o(
-        InputBase,
+    /* @__PURE__ */ n("div", { className: "adyen-pe-range-selection-filter__input", children: [
+      /* @__PURE__ */ n("label", { htmlFor: "maxValue", children: `${r.get("to")}:` }),
+      /* @__PURE__ */ n(
+        f,
         {
-          lang: i18n.locale,
+          lang: r.locale,
           name: "maxValue",
           type: "number",
-          value: maxAmount,
-          onInput: (e) => {
-            e.currentTarget && setMaxAmount(e.currentTarget.value !== "" ? parseFloat(e.currentTarget.value) : void 0);
+          value: t,
+          onInput: (a) => {
+            a.currentTarget && c(a.currentTarget.value !== "" ? parseFloat(a.currentTarget.value) : void 0);
           },
-          min: minAmount,
-          isInvalid: maxAmount !== void 0 && minAmount !== void 0 ? maxAmount < minAmount : false,
-          errorMessage: i18n.get("secondValueShouldBeGreaterThanTheFirstOne")
+          min: e,
+          isInvalid: t !== void 0 && e !== void 0 ? t < e : !1,
+          errorMessage: r.get("secondValueShouldBeGreaterThanTheFirstOne")
         }
       )
     ] })
   ] });
 };
 export {
-  RangeSelection
+  E as RangeSelection
 };

package/dist/es/components/internal/FilterBar/filters/AmountFilter/constants.js

@@ -1,4 +1,4 @@
-const AMOUNT_MULTIPLIER = 1e5;
+const e = 1e5;
 export {
-  AMOUNT_MULTIPLIER
+  e as AMOUNT_MULTIPLIER
 };

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

@@ -1,185 +1,136 @@
-import '../../../../../../Select.css';
-import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
-import { useMediaQuery, mediaQueries } from "../../../../external/TransactionsOverview/hooks/useMediaQuery.js";
-import FilterButton from "../../components/FilterButton/FilterButton.js";
-import Popover from "../../../Popover/Popover.js";
-import { a as PopoverContainerVariant, b as PopoverContainerPosition } from "../../../../../../usePopoverPositioner-882fea89.mjs";
-import { T as Typography, a as TypographyElement, b as TypographyVariant } from "../../../../../../Typography-11b95870.mjs";
-import useCommitAction from "../../../../../hooks/useCommitAction/useCommitAction.js";
-import { C as CommitAction } from "../../../../../../types-e6a6a3ff.mjs";
-import useUniqueIdentifier from "../../../../../hooks/element/useUniqueIdentifier.js";
-import { isEmpty } from "../../../../../utils/validator-utils.js";
-import { x } from "../../../../../../compat.module-a4d537ff.mjs";
-import { F, T, p, h } from "../../../../../../hooks.module-8565d716.mjs";
-import useBooleanState from "../../../../../hooks/useBooleanState/useBooleanState.js";
-import InputText from "../../../FormFields/InputText.js";
-import "classnames";
-import "../../../../../utils/common/index.js";
-import "../../../../../core/Context/CoreContext.js";
-import "../../../Img/Img.js";
-import "../../../Button/Button.js";
-import "../../../SVGIcons/ChevronDown.js";
-import "../../../FormFields/Select/constants.js";
-import "../../../FormFields/Select/components/SelectList.js";
-/* empty css                                  */import "../../../FormFields/InputBase.js";
-import { k } from "../../../../../../preact.module-38e5a571.mjs";
-const isValueEmptyFallback = (value) => {
-  return !value || isEmpty(value);
-};
-const renderFallback = (() => {
-  const DefaultEditModalBody = (props) => {
-    const { editAction, name, onChange, onValueUpdated } = props;
-    const [currentValue, setCurrentValue] = h(props.value);
-    const handleInput = T(
-      (e) => {
-        const value = e.target.value.trim();
-        setCurrentValue(value);
-        onValueUpdated(value);
+import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMediaQuery as g, mediaQueries as A } from "../../../../external/TransactionsOverview/hooks/useMediaQuery.js";
+import z from "../../components/FilterButton/FilterButton.js";
+import H from "../../../Popover/Popover.js";
+import { PopoverContainerVariant as L, PopoverContainerPosition as Q } from "../../../Popover/types.js";
+import { TypographyElement as D, TypographyVariant as N } from "../../../Typography/types.js";
+import O from "../../../Typography/Typography.js";
+import R from "../../../../../hooks/element/useUniqueIdentifier.js";
+import { isEmpty as j } from "../../../../../utils/validator-utils.js";
+import { memo as q } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useMemo as E, useCallback as S, useEffect as V, useState as G } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import J from "../../../FormFields/InputText.js";
+import c from "../../../../../hooks/useBooleanState/useBooleanState.js";
+import K from "../../../../../hooks/useCommitAction/useCommitAction.js";
+import { Fragment as W } from "../../../../../external/preact/dist/preact.module.js";
+import { CommitAction as _ } from "../../../../../hooks/useCommitAction/types.js";
+const X = (s) => !s || j(s), Z = (() => {
+  const s = (e) => {
+    const { editAction: f, name: i, onChange: u, onValueUpdated: r } = e, [l, n] = G(e.value), d = S(
+      (t) => {
+        const y = t.target.value.trim();
+        n(y), r(y);
       },
-      [onValueUpdated]
+      [r]
     );
-    p(() => {
-      if (editAction === CommitAction.CLEAR) {
-        const value = "";
-        setCurrentValue(value);
-        onValueUpdated(value);
-        onChange(value);
-      }
-      if (editAction === CommitAction.APPLY) {
-        onChange(currentValue ?? "");
+    return V(() => {
+      if (f === _.CLEAR) {
+        const t = "";
+        n(t), r(t), u(t);
       }
-    }, [currentValue, editAction, onChange, onValueUpdated]);
-    return /* @__PURE__ */ o(InputText, { name, value: currentValue, onInput: handleInput });
+      f === _.APPLY && u(l ?? "");
+    }, [l, f, u, r]), /* @__PURE__ */ a(J, { name: i, value: l, onInput: d });
   };
-  return (props) => /* @__PURE__ */ o(DefaultEditModalBody, { ...props });
-})();
-const BaseFilter = ({ render, ...props }) => {
-  var _a;
-  const isSmViewport = useMediaQuery(mediaQueries.down.xs);
-  const [editMode, _updateEditMode] = useBooleanState(false);
-  const [editModalMounting, updateEditModalMounting] = useBooleanState(false);
-  const isValueEmpty = F(() => props.isValueEmpty ?? isValueEmptyFallback, [props.isValueEmpty]);
-  const [hasEmptyValue, updateHasEmptyValue] = useBooleanState(isValueEmpty(props.value));
-  const [hasInitialValue, updateHasInitialValue] = useBooleanState(false);
-  const [valueChanged, updateValueChanged] = useBooleanState(false);
-  const [disabledApply, updateDisabledApply] = useBooleanState(isValueEmpty(props.value));
-  const targetElement = useUniqueIdentifier();
-  const renderModalBody = F(() => render ?? renderFallback, [render]);
-  const onValueUpdated = T(
-    (currentValue) => {
-      const hasEmptyValue2 = isValueEmpty(currentValue ?? void 0);
-      updateHasEmptyValue(hasEmptyValue2);
-      updateDisabledApply(currentValue === null);
-      updateValueChanged(hasInitialValue ? currentValue !== props.value : !hasEmptyValue2);
+  return (e) => /* @__PURE__ */ a(s, { ...e });
+})(), ee = ({ render: s, ...e }) => {
+  var B;
+  const f = g(A.down.xs), [i, u] = c(!1), [r, l] = c(!1), n = E(() => e.isValueEmpty ?? X, [e.isValueEmpty]), [d, t] = c(n(e.value)), [y, v] = c(!1), [T, h] = c(!1), [w, M] = c(n(e.value)), b = R(), I = E(() => s ?? Z, [s]), x = S(
+    (o) => {
+      const m = n(o ?? void 0);
+      t(m), M(o === null), h(y ? o !== e.value : !m);
     },
-    [isValueEmpty, updateHasEmptyValue, updateDisabledApply, updateValueChanged, hasInitialValue, props.value]
-  );
-  const { commitAction, commitActionButtons, committing, resetCommitAction } = useCommitAction({
-    applyDisabled: disabledApply || !valueChanged,
-    resetDisabled: hasEmptyValue
-  });
-  const [closeEditDialog, openEditDialog] = F(() => {
-    const updateEditMode = (mode) => () => {
-      if (mode === editMode)
-        return;
-      if (mode) {
-        resetCommitAction();
-        updateValueChanged(false);
-        updateHasInitialValue(false);
-      }
-      _updateEditMode(mode);
-      updateEditModalMounting(mode);
+    [n, t, M, h, y, e.value]
+  ), { commitAction: k, commitActionButtons: U, committing: C, resetCommitAction: P } = K({
+    applyDisabled: w || !T,
+    resetDisabled: d
+  }), [p, F] = E(() => {
+    const o = (m) => () => {
+      m !== i && (m && (P(), h(!1), v(!1)), u(m), l(m));
     };
-    return [updateEditMode(false), updateEditMode(true)];
-  }, [_updateEditMode, editMode, resetCommitAction, updateEditModalMounting, updateHasInitialValue, updateValueChanged]);
-  p(() => {
-    if (editModalMounting) {
-      const hasEmptyValue2 = isValueEmpty(props.value);
-      updateEditModalMounting(false);
-      updateHasEmptyValue(hasEmptyValue2);
-      updateHasInitialValue(!hasEmptyValue2);
+    return [o(!1), o(!0)];
+  }, [u, i, P, l, v, h]);
+  V(() => {
+    if (r) {
+      const o = n(e.value);
+      l(!1), t(o), v(!o);
     }
-  }, [props.value, editModalMounting, isValueEmpty, updateEditModalMounting, updateHasEmptyValue, updateHasInitialValue]);
-  p(() => {
-    committing && closeEditDialog();
-    updateHasEmptyValue(hasEmptyValue);
-  }, [committing, closeEditDialog, updateHasEmptyValue, hasEmptyValue]);
-  const isOnlySmDevice = useMediaQuery(mediaQueries.only.sm);
-  const isOnlyMdDevice = useMediaQuery(mediaQueries.only.md);
-  return /* @__PURE__ */ o(k, { children: [
-    /* @__PURE__ */ o("div", { className: `adyen-pe-filter adyen-pe-filter--${props.type}`, children: F(
-      () => /* @__PURE__ */ o(
-        FilterButton,
+  }, [e.value, r, n, l, t, v]), V(() => {
+    C && p(), t(d);
+  }, [C, p, t, d]);
+  const Y = g(A.only.sm), $ = g(A.only.md);
+  return /* @__PURE__ */ a(W, { children: [
+    /* @__PURE__ */ a("div", { className: `adyen-pe-filter adyen-pe-filter--${e.type}`, children: E(
+      () => /* @__PURE__ */ a(
+        z,
         {
           classNameModifiers: [
-            ...props.appliedFilterAmount ? ["with-counter"] : [],
-            ...props.classNameModifiers ?? [],
-            ...editMode ? ["active"] : [],
-            ...hasEmptyValue ? [] : ["has-selection"]
+            ...e.appliedFilterAmount ? ["with-counter"] : [],
+            ...e.classNameModifiers ?? [],
+            ...i ? ["active"] : [],
+            ...d ? [] : ["has-selection"]
           ],
-          onClick: editMode ? closeEditDialog : openEditDialog,
+          onClick: i ? p : F,
           tabIndex: 0,
-          ref: targetElement,
-          children: /* @__PURE__ */ o("div", { className: "adyen-pe-filter-button__default-container", children: [
-            /* @__PURE__ */ o(
-              Typography,
+          ref: b,
+          children: /* @__PURE__ */ a("div", { className: "adyen-pe-filter-button__default-container", children: [
+            /* @__PURE__ */ a(
+              O,
               {
-                el: TypographyElement.SPAN,
-                variant: TypographyVariant.BODY,
-                stronger: true,
+                el: D.SPAN,
+                variant: N.BODY,
+                stronger: !0,
                 className: "adyen-pe-filter-button__label",
-                children: props.label
+                children: e.label
               }
             ),
-            !!props.appliedFilterAmount && /* @__PURE__ */ o("div", { className: "adyen-pe-filter-button__counter-wrapper", children: /* @__PURE__ */ o(
-              Typography,
+            !!e.appliedFilterAmount && /* @__PURE__ */ a("div", { className: "adyen-pe-filter-button__counter-wrapper", children: /* @__PURE__ */ a(
+              O,
               {
-                el: TypographyElement.SPAN,
-                variant: TypographyVariant.BODY,
-                stronger: true,
+                el: D.SPAN,
+                variant: N.BODY,
+                stronger: !0,
                 className: "adyen-pe-filter-button__counter",
-                children: props.appliedFilterAmount
+                children: e.appliedFilterAmount
               }
             ) })
           ] })
         }
       ),
       [
-        props.appliedFilterAmount,
-        props.classNameModifiers,
-        props.label,
-        editMode,
-        hasEmptyValue,
-        closeEditDialog,
-        openEditDialog,
-        targetElement
+        e.appliedFilterAmount,
+        e.classNameModifiers,
+        e.label,
+        i,
+        d,
+        p,
+        F,
+        b
       ]
     ) }),
-    editMode && /* @__PURE__ */ o(
-      Popover,
+    i && /* @__PURE__ */ a(
+      H,
       {
-        actions: commitActionButtons,
-        title: (_a = props.title) == null ? void 0 : _a.trim(),
-        variant: PopoverContainerVariant.POPOVER,
+        actions: U,
+        title: (B = e.title) == null ? void 0 : B.trim(),
+        variant: L.POPOVER,
         modifiers: ["filter"],
-        open: editMode,
-        "aria-label": `${props.label}`,
-        dismiss: closeEditDialog,
-        dismissible: false,
-        withContentPadding: props.withContentPadding ?? true,
-        divider: true,
-        targetElement,
-        disableFocusTrap: false,
-        position: PopoverContainerPosition.BOTTOM,
-        containerSize: props.containerSize,
-        showOverlay: isSmViewport,
-        fitPosition: isOnlySmDevice || isOnlyMdDevice,
-        children: renderModalBody({ ...props, editAction: commitAction, onValueUpdated })
+        open: i,
+        "aria-label": `${e.label}`,
+        dismiss: p,
+        dismissible: !1,
+        withContentPadding: e.withContentPadding ?? !0,
+        divider: !0,
+        targetElement: b,
+        disableFocusTrap: !1,
+        position: Q.BOTTOM,
+        containerSize: e.containerSize,
+        showOverlay: f,
+        fitPosition: Y || $,
+        children: I({ ...e, editAction: k, onValueUpdated: x })
       }
     )
   ] });
-};
-const BaseFilter$1 = x(BaseFilter);
+}, he = q(ee);
 export {
-  BaseFilter$1 as default
+  he as default
 };