@adyen/adyen-platform-experience-web 1.0.0-beta.3 → 1.0.1

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

@@ -0,0 +1,43 @@
+import { jsx as s } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { memo as n } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useCallback as a } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useResponsiveViewport as p, mediaQueries as C } from "../../../../external/TransactionsOverview/hooks/useResponsiveViewport.js";
+import { renderDefaultSingleSelectionCheckedness as c } from "../components/SelectListItem.js";
+import "./BalanceAccountSelector.scss.js";
+import { Fragment as d } from "../../../../../external/preact/dist/preact.module.js";
+import S from "../Select.js";
+const m = "adyen-pe-balance-account-selector", _ = `${m}__account-id`, f = `${m}__account-label`, u = n(
+  ({
+    activeBalanceAccount: r,
+    balanceAccountSelectionOptions: o,
+    onBalanceAccountSelection: t
+  }) => {
+    const l = p(C.down.xs), i = a(
+      (e) => /* @__PURE__ */ s(d, { children: [
+        /* @__PURE__ */ s("div", { className: e.contentClassName, children: [
+          e.item.name && /* @__PURE__ */ s("span", { className: f, children: e.item.name }),
+          /* @__PURE__ */ s("span", { className: _, children: e.item.id })
+        ] }),
+        c(e)
+      ] }),
+      []
+    );
+    return o && o.length > 1 ? /* @__PURE__ */ s(
+      S,
+      {
+        popoverClassNameModifiers: [m],
+        onChange: t,
+        filterable: !1,
+        multiSelect: !1,
+        selected: r == null ? void 0 : r.id,
+        withoutCollapseIndicator: !0,
+        items: o,
+        renderListItem: i,
+        showOverlay: l
+      }
+    ) : null;
+  }
+), x = u;
+export {
+  x as default
+};

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

@@ -3,27 +3,28 @@ import fe from "classnames";
 import { useState as w, useRef as a, useCallback as l, useMemo as de, useEffect as b } from "../../../../external/preact/hooks/dist/hooks.module.js";
 import { InteractionKeyCode as s } from "../../../types.js";
 import { ARIA_ERROR_SUFFIX as pe } from "../../../../core/Errors/constants.js";
-import { noop as Ae } from "../../../../utils/common/index.js";
-import be from "../../../../utils/uuid.js";
-import ge from "./components/SelectButton.js";
-import Ee from "./components/SelectList.js";
-import Se from "./hooks/useSelect.js";
-import { DROPDOWN_BASE_CLASS as K, DROPDOWN_MULTI_SELECT_CLASS as Re } from "./constants.js";
+import Ae from "./components/SelectButton.js";
+import be from "./components/SelectList.js";
+import ge from "./hooks/useSelect.js";
+import { DROPDOWN_BASE_CLASS as K, DROPDOWN_MULTI_SELECT_CLASS as Ee } from "./constants.js";
 import "./Select.scss.js";
-import De from "../../../../hooks/useCommitAction/useCommitAction.js";
+import Se from "../../../../hooks/useCommitAction/useCommitAction.js";
 import { CommitAction as U } from "../../../../hooks/useCommitAction/types.js";
-import { EMPTY_ARRAY as Y } from "../../../../utils/common/constants.js";
-const he = ({
-  className: P,
-  classNameModifiers: _ = Y,
+import { uuid as Re } from "../../../../utils/random/uuid.js";
+import { boolOrFalse as De } from "../../../../utils/value/bool.js";
+import { EMPTY_ARRAY as Y } from "../../../../utils/value/constants.js";
+import { noop as he } from "../../../../utils/common.js";
+const ke = ({
+  className: F,
+  classNameModifiers: O = Y,
   popoverClassNameModifiers: M,
   items: g = Y,
   filterable: u = !1,
   multiSelect: m = !1,
   readonly: j = !1,
-  onChange: F = Ae,
+  onChange: P = he,
   selected: H,
-  name: O,
+  name: _,
   isInvalid: X,
   isValid: q,
   placeholder: z,
@@ -35,17 +36,17 @@ const he = ({
   showOverlay: Z = !1,
   fitPosition: ee
 }) => {
-  const { resetSelection: f, select: v, selection: n } = Se({ items: g, multiSelect: m, selected: H }), [o, i] = w(!1), [h, d] = w(""), E = a(null), p = a(null), k = a(null), I = a(`select-${be()}`), [te, x] = w(0), B = a(), S = a(!0), C = a(!1), L = a(n), N = a(n), re = l(() => {
+  const { resetSelection: f, select: I, selection: n } = ge({ items: g, multiSelect: m, selected: H }), [o, i] = w(!1), [h, d] = w(""), E = a(null), p = a(null), k = a(null), v = a(`select-${Re()}`), [te, B] = w(0), N = a(), S = a(!0), C = a(!1), L = a(n), x = a(n), re = l(() => {
     d(""), i(!1), o && (f(L.current), S.current = !0);
   }, [f, i, d, o]), se = de(
     () => fe([
       K,
-      { [Re]: m === !0 },
-      ..._.map((e) => `${K}--${e}`),
-      P
+      { [Ee]: De(m) },
+      ...O.map((e) => `${K}--${e}`),
+      F
     ]),
-    [P, _, m]
-  ), { commitAction: y, commitActionButtons: ne, committing: W, resetCommitAction: $ } = De({
+    [F, O, m]
+  ), { commitAction: y, commitActionButtons: ne, committing: W, resetCommitAction: $ } = Se({
     resetDisabled: !n.length
   }), c = l(() => {
     var e;
@@ -53,8 +54,8 @@ const he = ({
   }, [$, i, d]), R = l(() => {
     L.current = n;
     const e = `${n.map(({ id: t }) => t)}`;
-    F({ target: { value: e, name: O } });
-  }, [O, F, n]);
+    P({ target: { value: e, name: _ } });
+  }, [_, P, n]);
   b(() => {
     switch (y) {
       case U.APPLY:
@@ -72,16 +73,16 @@ const he = ({
       const t = e.currentTarget && ((r = p == null ? void 0 : p.current) != null && r.contains(e.currentTarget)) ? e.currentTarget : null;
       if (t && !t.getAttribute("data-disabled")) {
         const le = t.getAttribute("data-value"), ue = g.find((me) => me.id === le);
-        v(ue);
+        I(ue);
       }
     },
-    [g, v]
+    [g, I]
   );
   b(() => {
-    N.current !== n && (N.current = n, (!m || C.current) && (R(), c())), C.current = !1;
+    x.current !== n && (x.current = n, (!m || C.current) && (R(), c())), C.current = !1;
   }, [c, R, m, n]), b(() => {
-    W && (x(n.length), c());
-  }, [W, c, x, n.length]);
+    W && (B(n.length), c());
+  }, [W, c, B, n.length]);
   const oe = l(
     (e) => {
       switch (e.code) {
@@ -111,7 +112,7 @@ const he = ({
     [c, u, A, o, i, h]
   );
   b(() => {
-    o && (cancelAnimationFrame(B.current), B.current = requestAnimationFrame(() => {
+    o && (cancelAnimationFrame(N.current), N.current = requestAnimationFrame(() => {
       var e;
       e: {
         let t = (e = p.current) == null ? void 0 : e.firstElementChild, r;
@@ -190,7 +191,7 @@ const he = ({
     o && u && ((e = E.current) == null || e.focus());
   }, [u, o]), /* @__PURE__ */ T("div", { className: se, children: [
     /* @__PURE__ */ T(
-      ge,
+      Ae,
       {
         id: D ?? void 0,
         appliedFilterNumber: te,
@@ -204,7 +205,7 @@ const he = ({
         multiSelect: m,
         placeholder: z,
         readonly: j,
-        selectListId: I.current,
+        selectListId: v.current,
         showList: o,
         toggleButtonRef: k,
         toggleList: ie,
@@ -213,7 +214,7 @@ const he = ({
       }
     ),
     /* @__PURE__ */ T(
-      Ee,
+      be,
       {
         popoverClassNameModifiers: M,
         setToTargetWidth: Q,
@@ -224,7 +225,7 @@ const he = ({
         multiSelect: m,
         onKeyDown: ce,
         onSelect: A,
-        selectListId: I.current,
+        selectListId: v.current,
         ref: p,
         toggleButtonRef: k,
         renderListItem: G,
@@ -235,7 +236,7 @@ const he = ({
       }
     )
   ] });
-}, We = he;
+}, Ke = ke;
 export {
-  We as default
+  Ke as default
 };

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

@@ -3,23 +3,24 @@ import T from "classnames";
 import { useMemo as N } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import S from "../../../../../core/Context/useCoreContext.js";
 import { ButtonVariant as C } from "../../../Button/types.js";
-import u from "../../../Typography/Typography.js";
+import f from "../../../Typography/Typography.js";
 import L from "../../../SVGIcons/ChevronDown.js";
-import { TypographyElement as f, TypographyVariant as B } from "../../../Typography/types.js";
+import { TypographyElement as u, TypographyVariant as B } from "../../../Typography/types.js";
 import { DROPDOWN_BUTTON_CLASS as p, DROPDOWN_BUTTON_ACTIVE_CLASS as R, DROPDOWN_BUTTON_HAS_SELECTION_CLASS as h, DROPDOWN_BUTTON_READONLY_CLASS as y, DROPDOWN_BUTTON_INVALID_CLASS as A, DROPDOWN_BUTTON_VALID_CLASS as E, DROPDOWN_BUTTON_ICON_CLASS as P, DROPDOWN_BUTTON_TEXT_CLASS as U, DROPDOWN_BUTTON_MULTI_SELECT_COUNTER_CLASS as g, DROPDOWN_BUTTON_COLLAPSE_INDICATOR_CLASS as x, DROPDOWN_BUTTON_CLASSNAME as I } from "../constants.js";
 import { Fragment as W } from "../../../../../external/preact/dist/preact.module.js";
 import b from "../../../Img/Img.js";
 import w from "../../../Button/Button.js";
-const V = ({
+import { boolOrFalse as V } from "../../../../../utils/value/bool.js";
+const v = ({
   active: e,
   disabled: m,
-  className: i,
-  filterable: o,
+  className: o,
+  filterable: i,
   toggleButtonRef: l,
   ...n
 }) => {
-  const r = N(() => o ? T(I, i) : i, [i, o]);
-  return o ? /* @__PURE__ */ a("div", { ...n, className: r, ref: l }) : /* @__PURE__ */ a(
+  const r = N(() => i ? T(I, o) : o, [o, i]);
+  return i ? /* @__PURE__ */ a("div", { ...n, className: r, ref: l }) : /* @__PURE__ */ a(
     w,
     {
       ...n,
@@ -29,39 +30,39 @@ const V = ({
       ref: l
     }
   );
-}, v = (e) => {
+}, F = (e) => {
   var d;
-  const { i18n: m } = S(), { active: i, filterable: o, multiSelect: l, placeholder: n, readonly: r, showList: s, withoutCollapseIndicator: _ } = e, O = N(() => (n == null ? void 0 : n.trim()) || m.get("select.filter.placeholder"), [m, n]), t = N(() => l === !0 ? void 0 : i[0], [i, l]), D = N(() => {
+  const { i18n: m } = S(), { active: o, filterable: i, multiSelect: l, placeholder: n, readonly: r, showList: s, withoutCollapseIndicator: _ } = e, O = N(() => (n == null ? void 0 : n.trim()) || m.get("select.filter.placeholder"), [m, n]), t = N(() => V(l) ? void 0 : o[0], [o, l]), D = N(() => {
     var c;
     return ((c = t == null ? void 0 : t.name) == null ? void 0 : c.trim()) || O;
   }, [t, O]);
   return /* @__PURE__ */ a(
-    V,
+    v,
     {
-      active: i,
+      active: o,
       disabled: r,
       "aria-disabled": r,
       "aria-expanded": s,
       "aria-haspopup": "listbox",
       className: T(p, {
         [R]: s,
-        [h]: !!i.length,
+        [h]: !!o.length,
         [y]: r,
         [A]: e.isInvalid,
         [E]: e.isValid
       }),
-      filterable: o,
+      filterable: i,
       onClick: r ? void 0 : e.toggleList,
       onKeyDown: r ? void 0 : e.onButtonKeyDown,
-      role: o ? "button" : void 0,
+      role: i ? "button" : void 0,
       tabIndex: 0,
       title: D,
       toggleButtonRef: e.toggleButtonRef,
-      type: o ? "" : "button",
+      type: i ? "" : "button",
       "aria-describedby": e.ariaDescribedBy,
       id: e.id ?? "",
       children: [
-        s && o ? /* @__PURE__ */ a(
+        s && i ? /* @__PURE__ */ a(
           "input",
           {
             "aria-autocomplete": "list",
@@ -79,13 +80,13 @@ const V = ({
         ) : /* @__PURE__ */ a(W, { children: [
           (t == null ? void 0 : t.icon) && /* @__PURE__ */ a(b, { className: P, src: t.icon, alt: t.name.trim() }),
           /* @__PURE__ */ a("span", { className: U, children: ((d = t == null ? void 0 : t.selectedOptionName) == null ? void 0 : d.trim()) || (t == null ? void 0 : t.name.trim()) || O }),
-          l && e.appliedFilterNumber > 0 && /* @__PURE__ */ a("div", { className: g, children: /* @__PURE__ */ a(u, { el: f.SPAN, variant: B.BODY, stronger: !0, children: e.appliedFilterNumber }) })
+          l && e.appliedFilterNumber > 0 && /* @__PURE__ */ a("div", { className: g, children: /* @__PURE__ */ a(f, { el: u.SPAN, variant: B.BODY, stronger: !0, children: e.appliedFilterNumber }) })
         ] }),
         !_ && /* @__PURE__ */ a("span", { className: x, children: /* @__PURE__ */ a(L, { role: "presentation" }) })
       ]
     }
   );
-}, J = v;
+}, Z = F;
 export {
-  J as default
+  Z as default
 };

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

@@ -1,23 +1,24 @@
 import { jsx as o } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useMediaQuery as x, mediaQueries as R } from "../../../../external/TransactionsOverview/hooks/useMediaQuery.js";
-import w from "../../../Popover/Popover.js";
-import { PopoverContainerSize as A, PopoverContainerVariant as b, PopoverContainerPosition as g } from "../../../Popover/types.js";
-import h from "../../../../../core/Context/useCoreContext.js";
-import { isFunction as V } from "../../../../../utils/common/index.js";
-import W from "../../../../../utils/fixedForwardRef.js";
-import m from "classnames";
-import { memo as F } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useResponsiveViewport as R, mediaQueries as w } from "../../../../external/TransactionsOverview/hooks/useResponsiveViewport.js";
+import b from "../../../Popover/Popover.js";
+import { PopoverContainerSize as x, PopoverContainerVariant as A, PopoverContainerPosition as V } from "../../../Popover/types.js";
+import g from "../../../../../core/Context/useCoreContext.js";
+import a from "classnames";
+import { memo as h } from "../../../../../external/preact/compat/dist/compat.module.js";
 import { useMemo as l } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { DROPDOWN_LIST_CLASS as y, DROPDOWN_LIST_ACTIVE_CLASS as z, DROPDOWN_ELEMENT_CLASS as Q, DROPDOWN_ELEMENT_NO_OPTION_CLASS as j } from "../constants.js";
-import q, { renderSelectListItemDefault as B } from "./SelectListItem.js";
-const U = W(
+import { DROPDOWN_LIST_CLASS as F, DROPDOWN_LIST_ACTIVE_CLASS as W, DROPDOWN_ELEMENT_CLASS as z, DROPDOWN_ELEMENT_NO_OPTION_CLASS as j } from "../constants.js";
+import q, { renderListItemDefault as y } from "./SelectListItem.js";
+import { fixedForwardRef as B } from "../../../../../utils/preact/fixedForwardRef.js";
+import { isFunction as Q } from "../../../../../utils/value/is.js";
+import { boolOrFalse as U } from "../../../../../utils/value/bool.js";
+const $ = B(
   ({
     active: c,
-    commitActions: d,
-    items: p,
+    commitActions: p,
+    items: d,
     multiSelect: s,
-    onKeyDown: u,
-    onSelect: f,
+    onKeyDown: f,
+    onSelect: u,
     renderListItem: t,
     selectListId: O,
     showList: i,
@@ -27,43 +28,43 @@ const U = W(
     setToTargetWidth: N,
     popoverClassNameModifiers: P,
     showOverlay: _,
-    fitPosition: D
-  }, E) => {
-    const { i18n: L } = h(), v = x(R.down.xs), a = p.filter((e) => !n || e.name.toLowerCase().includes(n)), T = m(y, { [z]: i }), M = m(Q, j), I = l(() => V(t) ? t : B, [t]), r = l(() => s === !0, [s]);
+    fitPosition: v
+  }, D) => {
+    const { i18n: E } = g(), L = R(w.down.xs), m = d.filter((e) => !n || e.name.toLowerCase().includes(n)), T = a(F, { [W]: i }), I = a(z, j), M = l(() => Q(t) ? t : y, [t]), r = l(() => U(s), [s]);
     return i ? /* @__PURE__ */ o(
-      w,
+      b,
       {
         classNameModifiers: P,
-        actions: r ? d : void 0,
+        actions: r ? p : void 0,
         disableFocusTrap: !0,
         divider: !0,
         dismiss: C,
         dismissible: !1,
         open: i,
         setToTargetWidth: N,
-        containerSize: A.MEDIUM,
-        variant: b.POPOVER,
+        containerSize: x.MEDIUM,
+        variant: A.POPOVER,
         targetElement: S,
         withContentPadding: !1,
-        position: g.BOTTOM,
-        showOverlay: _ && v,
-        fitPosition: D,
-        children: /* @__PURE__ */ o("ul", { className: T, id: O, ref: E, role: "listbox", "aria-multiselectable": r, children: a.length ? a.map((e) => /* @__PURE__ */ o(
+        position: V.BOTTOM,
+        showOverlay: _ && L,
+        fitPosition: v,
+        children: /* @__PURE__ */ o("ul", { className: T, id: O, ref: D, role: "listbox", "aria-multiselectable": r, children: m.length ? m.map((e) => /* @__PURE__ */ o(
           q,
           {
             item: e,
             multiSelect: r,
-            onKeyDown: u,
-            onSelect: f,
-            renderListItem: I,
+            onKeyDown: f,
+            onSelect: u,
+            renderListItem: M,
             selected: c.includes(e)
           },
           e.id
-        )) : /* @__PURE__ */ o("div", { className: M, children: L.get("select.noOptionsFound") }) })
+        )) : /* @__PURE__ */ o("div", { className: I, children: E.get("select.noOptionsFound") }) })
       }
     ) : null;
   }
-), ie = F(U);
+), se = h($);
 export {
-  ie as default
+  se as default
 };

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

@@ -1,47 +1,51 @@
-import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { jsx as s } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import c from "classnames";
-import { memo as E } from "../../../../../external/preact/compat/dist/compat.module.js";
-import d from "../../../SVGIcons/CheckedBox.js";
-import N from "../../../SVGIcons/UncheckedBox.js";
-import _ from "../../../SVGIcons/Checkmark.js";
-import { DROPDOWN_ELEMENT_CHECKBOX_CLASS as C, DROPDOWN_ELEMENT_CONTENT_CLASS as D, DROPDOWN_ELEMENT_CHECKMARK_CLASS as L, DROPDOWN_ELEMENT_CLASS as p, DROPDOWN_ELEMENT_ACTIVE_CLASS as O, DROPDOWN_ELEMENT_DISABLED_CLASS as S, DROPDOWN_ELEMENT_ICON_CLASS as f } from "../constants.js";
-import A from "../../../Img/Img.js";
-import { Fragment as T } from "../../../../../external/preact/dist/preact.module.js";
-const B = ({
-  iconClassName: e,
-  item: r,
-  multiSelect: o,
-  selected: s
-}) => /* @__PURE__ */ a(T, { children: [
-  o && /* @__PURE__ */ a("span", { className: C, children: s ? /* @__PURE__ */ a(d, { role: "presentation" }) : /* @__PURE__ */ a(N, { role: "presentation" }) }),
-  /* @__PURE__ */ a("div", { className: D, children: [
-    r.icon && /* @__PURE__ */ a(A, { className: e, alt: r.name, src: r.icon }),
-    /* @__PURE__ */ a("span", { children: r.name })
+import { memo as N } from "../../../../../external/preact/compat/dist/compat.module.js";
+import E from "../../../SVGIcons/CheckedBox.js";
+import C from "../../../SVGIcons/UncheckedBox.js";
+import d from "../../../SVGIcons/Checkmark.js";
+import { DROPDOWN_ELEMENT_CHECKMARK_CLASS as S, DROPDOWN_ELEMENT_CLASS as D, DROPDOWN_ELEMENT_ACTIVE_CLASS as _, DROPDOWN_ELEMENT_DISABLED_CLASS as p, DROPDOWN_ELEMENT_CONTENT_CLASS as L, DROPDOWN_ELEMENT_ICON_CLASS as O, DROPDOWN_ELEMENT_CHECKBOX_CLASS as f } from "../constants.js";
+import u from "../../../Img/Img.js";
+import { Fragment as h } from "../../../../../external/preact/dist/preact.module.js";
+import { boolOrFalse as A } from "../../../../../utils/value/bool.js";
+const T = (e) => e.multiSelect ? /* @__PURE__ */ s("span", { className: f, children: e.selected ? /* @__PURE__ */ s(E, { role: "presentation" }) : /* @__PURE__ */ s(C, { role: "presentation" }) }) : null, M = (e) => e.multiSelect ? null : /* @__PURE__ */ s("span", { className: S, children: e.selected && /* @__PURE__ */ s(d, { role: "presentation" }) }), w = (e) => /* @__PURE__ */ s(h, { children: [
+  T(e),
+  /* @__PURE__ */ s("div", { className: e.contentClassName, children: [
+    e.item.icon && /* @__PURE__ */ s(u, { className: e.iconClassName, alt: e.item.name, src: e.item.icon }),
+    /* @__PURE__ */ s("span", { children: e.item.name })
   ] }),
-  !o && /* @__PURE__ */ a("span", { className: L, children: s && /* @__PURE__ */ a(_, { role: "presentation" }) })
-] }), h = ({ item: e, multiSelect: r, onKeyDown: o, onSelect: s, renderListItem: i, selected: n }) => {
-  const t = !!e.disabled, l = e.disabled === !0 || null, m = c(p, {
-    [O]: n,
-    [S]: t
+  M(e)
+] }), b = ({ item: e, multiSelect: n, onKeyDown: t, onSelect: r, renderListItem: i, selected: l }) => {
+  const o = !!e.disabled, m = A(e.disabled) || null, a = c(D, {
+    [_]: l,
+    [p]: o
   });
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ s(
     "li",
     {
-      "aria-disabled": t,
-      "aria-selected": n,
-      className: m,
-      "data-disabled": l,
+      "aria-disabled": o,
+      "aria-selected": l,
+      className: a,
+      "data-disabled": m,
       "data-value": e.id,
-      onClick: s,
-      onKeyDown: o,
+      onClick: r,
+      onKeyDown: t,
       title: e.name,
       role: "option",
       tabIndex: -1,
-      children: i({ item: e, multiSelect: r, selected: n, iconClassName: f })
+      children: i({
+        item: e,
+        multiSelect: n,
+        selected: l,
+        contentClassName: L,
+        iconClassName: O
+      })
     }
   );
-}, K = E(h);
+}, F = N(b);
 export {
-  K as default,
-  B as renderSelectListItemDefault
+  F as default,
+  T as renderDefaultMultiSelectionCheckedness,
+  M as renderDefaultSingleSelectionCheckedness,
+  w as renderListItemDefault
 };

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

@@ -1,6 +1,6 @@
 import { DEFAULT_BUTTON_CLASSNAME as N } from "../../Button/constants.js";
 import { ButtonVariant as D } from "../../Button/types.js";
-import { getModifierClasses as t } from "../../../../utils/class-name-utils.js";
+import { getModifierClasses as t } from "../../../../utils/preact/className.js";
 const S = "adyen-pe-dropdown", C = t(N, [D.SECONDARY], [N]), _ = `${S}__button`, n = `${_}--active`, A = `${_}-collapse-indicator`, c = `${_}--has-selection`, s = `${_}-icon`, R = `${_}-multiselect-counter`, e = `${_}--readonly`, P = `${_}-text`, W = `${_}--valid`, i = `${_}--invalid`, O = `${S}__element`, $ = `${O}--active`, I = `${O}-checkbox`, B = `${O}-checkmark`, U = `${O}-content`, a = `${O}--disabled`, l = `${O}-icon`, r = `${O}--no-option`, T = `${S}__list`, M = `${T}--active`, d = `${S}--multiselect`;
 export {
   S as DROPDOWN_BASE_CLASS,

package/dist/es/components/internal/FormFields/Select/hooks/useSelect.js

@@ -1,5 +1,5 @@
 import { useCallback as i, useState as p, useEffect as O } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { EMPTY_ARRAY as t } from "../../../../../utils/common/constants.js";
+import { EMPTY_ARRAY as t } from "../../../../../utils/value/constants.js";
 const g = ({ items: f, multiSelect: r, selected: l }) => {
   const a = i(
     (c = t) => {

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

@@ -2,13 +2,13 @@ import { jsx as t } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.m
 import i from "classnames";
 import { useImageUrl as p } from "../../../hooks/useImageUrl/useImageUrl.js";
 import { useMemo as c } from "../../../external/preact/hooks/dist/hooks.module.js";
-const l = ({ folder: m = "components/", className: r, alt: e, name: s, extension: o }) => {
+const f = ({ folder: m = "components/", className: r, alt: s, name: e, extension: o }) => {
   const a = p({
     options: c(() => ({ imageFolder: m, extension: o }), [o, m]),
-    name: s
+    name: e
   });
-  return /* @__PURE__ */ t("img", { className: i("adyen-pe__image", r), alt: e, src: a });
+  return /* @__PURE__ */ t("img", { className: i("adyen-pe__image", r), alt: s, src: a });
 };
 export {
-  l as Image
+  f as Image
 };

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

@@ -3,15 +3,15 @@ import { useState as p, useRef as N, useEffect as y } from "../../../external/pr
 import E from "classnames";
 import "./Img.scss.js";
 function L(s) {
-  const { backgroundUrl: a = "", className: c = "", classNameModifiers: m = [], src: l = "", alt: d = "", showOnError: f = !1 } = s, [i, o] = p(!1), r = N(null), u = () => {
+  const { backgroundUrl: a = "", className: m = "", classNameModifiers: c = [], src: l = "", alt: d = "", showOnError: f = !1 } = s, [i, o] = p(!1), r = N(null), u = () => {
     o(!0);
   }, g = () => {
     o(f);
   }, t = E(
-    [c],
+    [m],
     "adyen-pe-image",
     { "adyen-pe-image--loaded": i },
-    ...m.map((e) => `adyen-pe-image--${e}`)
+    ...c.map((e) => `adyen-pe-image--${e}`)
   );
   return y(() => {
     const e = a ? new Image() : r.current;