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

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

@@ -1,95 +1,91 @@
-import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
-import cx from "classnames";
-import { F } from "../../../../../../hooks.module-8565d716.mjs";
-import useCoreContext from "../../../../../core/Context/useCoreContext.js";
-import Img from "../../../Img/Img.js";
-import Button from "../../../Button/Button.js";
-import { B as ButtonVariant } from "../../../../../../types-7ad6576a.mjs";
-import { T as Typography, a as TypographyElement, b as TypographyVariant } from "../../../../../../Typography-11b95870.mjs";
-import ChevronDown from "../../../SVGIcons/ChevronDown.js";
-import { DROPDOWN_BUTTON_CLASS, DROPDOWN_BUTTON_ACTIVE_CLASS, DROPDOWN_BUTTON_HAS_SELECTION_CLASS, DROPDOWN_BUTTON_READONLY_CLASS, DROPDOWN_BUTTON_INVALID_CLASS, DROPDOWN_BUTTON_VALID_CLASS, DROPDOWN_BUTTON_ICON_CLASS, DROPDOWN_BUTTON_TEXT_CLASS, DROPDOWN_BUTTON_MULTI_SELECT_COUNTER_CLASS, DROPDOWN_BUTTON_COLLAPSE_INDICATOR_CLASS, DROPDOWN_BUTTON_CLASSNAME } from "../constants.js";
-import { k } from "../../../../../../preact.module-38e5a571.mjs";
-const SelectButtonElement = ({
-  active,
-  disabled,
-  className,
-  filterable,
-  toggleButtonRef,
-  ...props
+import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+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 L from "../../../Typography/Typography.js";
+import f from "../../../SVGIcons/ChevronDown.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 = ({
+  active: e,
+  disabled: m,
+  className: o,
+  filterable: i,
+  toggleButtonRef: l,
+  ...n
 }) => {
-  const baseClassName = F(() => filterable ? cx(DROPDOWN_BUTTON_CLASSNAME, className) : className, [className, filterable]);
-  return filterable ? /* @__PURE__ */ o("div", { ...props, className: baseClassName, ref: toggleButtonRef }) : /* @__PURE__ */ o(
-    Button,
+  const r = N(() => i ? T(I, o) : o, [o, i]);
+  return i ? /* @__PURE__ */ a("div", { ...n, className: r, ref: l }) : /* @__PURE__ */ a(
+    w,
     {
-      ...props,
-      className: baseClassName,
-      disabled,
-      variant: ButtonVariant.SECONDARY,
-      ref: toggleButtonRef
+      ...n,
+      className: r,
+      disabled: m,
+      variant: C.SECONDARY,
+      ref: l
     }
   );
-};
-const SelectButton = (props) => {
-  var _a;
-  const { i18n } = useCoreContext();
-  const { active, filterable, multiSelect, placeholder, readonly, showList, withoutCollapseIndicator } = props;
-  const placeholderText = F(() => (placeholder == null ? void 0 : placeholder.trim()) || i18n.get("select.filter.placeholder"), [i18n, placeholder]);
-  const buttonActiveItem = F(() => multiSelect === true ? void 0 : active[0], [active, multiSelect]);
-  const buttonTitleText = F(() => {
-    var _a2;
-    return ((_a2 = buttonActiveItem == null ? void 0 : buttonActiveItem.name) == null ? void 0 : _a2.trim()) || placeholderText;
-  }, [buttonActiveItem, placeholderText]);
-  return /* @__PURE__ */ o(
-    SelectButtonElement,
+}, v = (e) => {
+  var d;
+  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(() => l === !0 ? 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,
     {
-      active,
-      disabled: readonly,
-      "aria-disabled": readonly,
-      "aria-expanded": showList,
+      active: o,
+      disabled: r,
+      "aria-disabled": r,
+      "aria-expanded": s,
       "aria-haspopup": "listbox",
-      className: cx(DROPDOWN_BUTTON_CLASS, {
-        [DROPDOWN_BUTTON_ACTIVE_CLASS]: showList,
-        [DROPDOWN_BUTTON_HAS_SELECTION_CLASS]: !!active.length,
-        [DROPDOWN_BUTTON_READONLY_CLASS]: readonly,
-        [DROPDOWN_BUTTON_INVALID_CLASS]: props.isInvalid,
-        [DROPDOWN_BUTTON_VALID_CLASS]: props.isValid
+      className: T(p, {
+        [R]: s,
+        [h]: !!o.length,
+        [y]: r,
+        [A]: e.isInvalid,
+        [E]: e.isValid
       }),
-      filterable,
-      onClick: !readonly ? props.toggleList : void 0,
-      onKeyDown: !readonly ? props.onButtonKeyDown : void 0,
-      role: filterable ? "button" : void 0,
+      filterable: i,
+      onClick: r ? void 0 : e.toggleList,
+      onKeyDown: r ? void 0 : e.onButtonKeyDown,
+      role: i ? "button" : void 0,
       tabIndex: 0,
-      title: buttonTitleText,
-      toggleButtonRef: props.toggleButtonRef,
-      type: !filterable ? "button" : "",
-      "aria-describedby": props.ariaDescribedBy,
-      id: props.id ?? "",
+      title: D,
+      toggleButtonRef: e.toggleButtonRef,
+      type: i ? "" : "button",
+      "aria-describedby": e.ariaDescribedBy,
+      id: e.id ?? "",
       children: [
-        showList && filterable ? /* @__PURE__ */ o(
+        s && i ? /* @__PURE__ */ a(
           "input",
           {
             "aria-autocomplete": "list",
-            "aria-controls": props.selectListId,
-            "aria-expanded": showList,
-            "aria-owns": props.selectListId,
+            "aria-controls": e.selectListId,
+            "aria-expanded": s,
+            "aria-owns": e.selectListId,
             autoComplete: "off",
             className: "adyen-pe-filter-input",
-            onInput: props.onInput,
-            placeholder: placeholderText,
-            ref: props.filterInputRef,
+            onInput: e.onInput,
+            placeholder: O,
+            ref: e.filterInputRef,
             role: "combobox",
             type: "text"
           }
-        ) : /* @__PURE__ */ o(k, { children: [
-          (buttonActiveItem == null ? void 0 : buttonActiveItem.icon) && /* @__PURE__ */ o(Img, { className: DROPDOWN_BUTTON_ICON_CLASS, src: buttonActiveItem.icon, alt: buttonActiveItem.name.trim() }),
-          /* @__PURE__ */ o("span", { className: DROPDOWN_BUTTON_TEXT_CLASS, children: ((_a = buttonActiveItem == null ? void 0 : buttonActiveItem.selectedOptionName) == null ? void 0 : _a.trim()) || (buttonActiveItem == null ? void 0 : buttonActiveItem.name.trim()) || placeholderText }),
-          multiSelect && props.appliedFilterNumber > 0 && /* @__PURE__ */ o("div", { className: DROPDOWN_BUTTON_MULTI_SELECT_COUNTER_CLASS, children: /* @__PURE__ */ o(Typography, { el: TypographyElement.SPAN, variant: TypographyVariant.BODY, stronger: true, children: props.appliedFilterNumber }) })
+        ) : /* @__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(L, { el: u.SPAN, variant: B.BODY, stronger: !0, children: e.appliedFilterNumber }) })
         ] }),
-        !withoutCollapseIndicator && /* @__PURE__ */ o("span", { className: DROPDOWN_BUTTON_COLLAPSE_INDICATOR_CLASS, children: /* @__PURE__ */ o(ChevronDown, { role: "presentation" }) })
+        !_ && /* @__PURE__ */ a("span", { className: x, children: /* @__PURE__ */ a(f, { role: "presentation" }) })
       ]
     }
   );
-};
+}, J = v;
 export {
-  SelectButton as default
+  J as default
 };

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

@@ -1,78 +1,69 @@
-import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
-import { useMediaQuery, mediaQueries } from "../../../../external/TransactionsOverview/hooks/useMediaQuery.js";
-import Popover from "../../../Popover/Popover.js";
-import { P as PopoverContainerSize, a as PopoverContainerVariant, b as PopoverContainerPosition } from "../../../../../../usePopoverPositioner-882fea89.mjs";
-import useCoreContext from "../../../../../core/Context/useCoreContext.js";
-import { isFunction } from "../../../../../utils/common/index.js";
-import fixedForwardRef from "../../../../../utils/fixedForwardRef.js";
-import cx from "classnames";
-import { x } from "../../../../../../compat.module-a4d537ff.mjs";
-import { F } from "../../../../../../hooks.module-8565d716.mjs";
-import { DROPDOWN_LIST_CLASS, DROPDOWN_LIST_ACTIVE_CLASS, DROPDOWN_ELEMENT_CLASS, DROPDOWN_ELEMENT_NO_OPTION_CLASS } from "../constants.js";
-import SelectListItem, { renderSelectListItemDefault } from "./SelectListItem.js";
-const SelectList = fixedForwardRef(
+import { jsx as o } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMediaQuery as I, mediaQueries as R } from "../../../../external/TransactionsOverview/hooks/useMediaQuery.js";
+import A from "../../../Popover/Popover.js";
+import { PopoverContainerSize as b, PopoverContainerVariant as g, PopoverContainerPosition as h } from "../../../Popover/types.js";
+import w from "../../../../../core/Context/useCoreContext.js";
+import { isFunction as F } from "../../../../../utils/common/index.js";
+import V from "../../../../../utils/fixedForwardRef.js";
+import m from "classnames";
+import { memo as W } 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 B, { renderSelectListItemDefault as U } from "./SelectListItem.js";
+const $ = V(
   ({
-    active,
-    commitActions,
-    items,
-    multiSelect,
-    onKeyDown,
-    onSelect,
-    renderListItem,
-    selectListId,
-    showList,
-    textFilter,
-    toggleButtonRef,
-    dismissPopover,
-    setToTargetWidth,
-    popoverClassNameModifiers,
-    showOverlay,
-    fitPosition
-  }, ref) => {
-    const { i18n } = useCoreContext();
-    const isSmViewport = useMediaQuery(mediaQueries.down.xs);
-    const filteredItems = items.filter((item) => !textFilter || item.name.toLowerCase().includes(textFilter));
-    const listClassName = cx(DROPDOWN_LIST_CLASS, { [DROPDOWN_LIST_ACTIVE_CLASS]: showList });
-    const noOptionsClassName = cx(DROPDOWN_ELEMENT_CLASS, DROPDOWN_ELEMENT_NO_OPTION_CLASS);
-    const renderSelectOption = F(() => isFunction(renderListItem) ? renderListItem : renderSelectListItemDefault, [renderListItem]);
-    const multipleSelection = F(() => multiSelect === true, [multiSelect]);
-    return showList ? /* @__PURE__ */ o(
-      Popover,
+    active: c,
+    commitActions: d,
+    items: p,
+    multiSelect: s,
+    onKeyDown: f,
+    onSelect: u,
+    renderListItem: t,
+    selectListId: O,
+    showList: i,
+    textFilter: n,
+    toggleButtonRef: S,
+    dismissPopover: C,
+    setToTargetWidth: N,
+    popoverClassNameModifiers: P,
+    showOverlay: _,
+    fitPosition: D
+  }, E) => {
+    const { i18n: L } = w(), v = I(R.down.xs), a = p.filter((e) => !n || e.name.toLowerCase().includes(n)), T = m(y, { [z]: i }), M = m(Q, j), x = l(() => F(t) ? t : U, [t]), r = l(() => s === !0, [s]);
+    return i ? /* @__PURE__ */ o(
+      A,
       {
-        classNameModifiers: popoverClassNameModifiers,
-        actions: multipleSelection ? commitActions : void 0,
-        disableFocusTrap: true,
-        divider: true,
-        dismiss: dismissPopover,
-        dismissible: false,
-        open: showList,
-        setToTargetWidth,
-        containerSize: PopoverContainerSize.MEDIUM,
-        variant: PopoverContainerVariant.POPOVER,
-        targetElement: toggleButtonRef,
-        withContentPadding: false,
-        position: PopoverContainerPosition.BOTTOM,
-        showOverlay: showOverlay && isSmViewport,
-        fitPosition,
-        children: /* @__PURE__ */ o("ul", { className: listClassName, id: selectListId, ref, role: "listbox", "aria-multiselectable": multipleSelection, children: filteredItems.length ? filteredItems.map((item) => {
-          return /* @__PURE__ */ o(
-            SelectListItem,
-            {
-              item,
-              multiSelect: multipleSelection,
-              onKeyDown,
-              onSelect,
-              renderListItem: renderSelectOption,
-              selected: active.includes(item)
-            },
-            item.id
-          );
-        }) : /* @__PURE__ */ o("div", { className: noOptionsClassName, children: i18n.get("select.noOptionsFound") }) })
+        classNameModifiers: P,
+        actions: r ? d : void 0,
+        disableFocusTrap: !0,
+        divider: !0,
+        dismiss: C,
+        dismissible: !1,
+        open: i,
+        setToTargetWidth: N,
+        containerSize: b.MEDIUM,
+        variant: g.POPOVER,
+        targetElement: S,
+        withContentPadding: !1,
+        position: h.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(
+          B,
+          {
+            item: e,
+            multiSelect: r,
+            onKeyDown: f,
+            onSelect: u,
+            renderListItem: x,
+            selected: c.includes(e)
+          },
+          e.id
+        )) : /* @__PURE__ */ o("div", { className: M, children: L.get("select.noOptionsFound") }) })
       }
     ) : null;
   }
-);
-const SelectList$1 = x(SelectList);
+), ie = W($);
 export {
-  SelectList$1 as default
+  ie as default
 };

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

@@ -1,51 +1,47 @@
-import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
-import cx from "classnames";
-import { x } from "../../../../../../compat.module-a4d537ff.mjs";
-import Img from "../../../Img/Img.js";
-import CheckedBox from "../../../SVGIcons/CheckedBox.js";
-import UncheckedBox from "../../../SVGIcons/UncheckedBox.js";
-import Checkmark from "../../../SVGIcons/Checkmark.js";
-import { DROPDOWN_ELEMENT_CHECKBOX_CLASS, DROPDOWN_ELEMENT_CONTENT_CLASS, DROPDOWN_ELEMENT_CHECKMARK_CLASS, DROPDOWN_ELEMENT_CLASS, DROPDOWN_ELEMENT_ACTIVE_CLASS, DROPDOWN_ELEMENT_DISABLED_CLASS, DROPDOWN_ELEMENT_ICON_CLASS } from "../constants.js";
-import { k } from "../../../../../../preact.module-38e5a571.mjs";
-const renderSelectListItemDefault = ({
-  iconClassName,
-  item,
-  multiSelect,
-  selected
-}) => /* @__PURE__ */ o(k, { children: [
-  multiSelect && /* @__PURE__ */ o("span", { className: DROPDOWN_ELEMENT_CHECKBOX_CLASS, children: selected ? /* @__PURE__ */ o(CheckedBox, { role: "presentation" }) : /* @__PURE__ */ o(UncheckedBox, { role: "presentation" }) }),
-  /* @__PURE__ */ o("div", { className: DROPDOWN_ELEMENT_CONTENT_CLASS, children: [
-    item.icon && /* @__PURE__ */ o(Img, { className: iconClassName, alt: item.name, src: item.icon }),
-    /* @__PURE__ */ o("span", { children: item.name })
+import { jsx as a } 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: o,
+  multiSelect: r,
+  selected: s
+}) => /* @__PURE__ */ a(T, { children: [
+  r && /* @__PURE__ */ a("span", { className: C, children: s ? /* @__PURE__ */ a(d, { role: "presentation" }) : /* @__PURE__ */ a(N, { role: "presentation" }) }),
+  /* @__PURE__ */ a("div", { className: D, children: [
+    o.icon && /* @__PURE__ */ a(A, { className: e, alt: o.name, src: o.icon }),
+    /* @__PURE__ */ a("span", { children: o.name })
   ] }),
-  !multiSelect && /* @__PURE__ */ o("span", { className: DROPDOWN_ELEMENT_CHECKMARK_CLASS, children: selected && /* @__PURE__ */ o(Checkmark, { role: "presentation" }) })
-] });
-const SelectListItem = ({ item, multiSelect, onKeyDown, onSelect, renderListItem, selected }) => {
-  const disabled = !!item.disabled;
-  const dataDisabled = item.disabled === true || null;
-  const itemClassName = cx(DROPDOWN_ELEMENT_CLASS, {
-    [DROPDOWN_ELEMENT_ACTIVE_CLASS]: selected,
-    [DROPDOWN_ELEMENT_DISABLED_CLASS]: disabled
+  !r && /* @__PURE__ */ a("span", { className: L, children: s && /* @__PURE__ */ a(_, { role: "presentation" }) })
+] }), h = ({ item: e, multiSelect: o, onKeyDown: r, onSelect: s, renderListItem: i, selected: n }) => {
+  const t = !!e.disabled, l = e.disabled === !0 || null, m = c(p, {
+    [O]: n,
+    [S]: t
   });
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ a(
     "li",
     {
-      "aria-disabled": disabled,
-      "aria-selected": selected,
-      className: itemClassName,
-      "data-disabled": dataDisabled,
-      "data-value": item.id,
-      onClick: onSelect,
-      onKeyDown,
-      title: item.name,
+      "aria-disabled": t,
+      "aria-selected": n,
+      className: m,
+      "data-disabled": l,
+      "data-value": e.id,
+      onClick: s,
+      onKeyDown: r,
+      title: e.name,
       role: "option",
       tabIndex: -1,
-      children: renderListItem({ item, multiSelect, selected, iconClassName: DROPDOWN_ELEMENT_ICON_CLASS })
+      children: i({ item: e, multiSelect: o, selected: n, iconClassName: f })
     }
   );
-};
-const SelectListItem$1 = x(SelectListItem);
+}, K = E(h);
 export {
-  SelectListItem$1 as default,
-  renderSelectListItemDefault
+  K as default,
+  B as renderSelectListItemDefault
 };

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

@@ -1,51 +1,29 @@
-import { DEFAULT_BUTTON_CLASSNAME } from "../../Button/constants.js";
-import { B as ButtonVariant } from "../../../../../types-7ad6576a.mjs";
-import { getModifierClasses } from "../../../../utils/class-name-utils.js";
-const DROPDOWN_BASE_CLASS = "adyen-pe-dropdown";
-const DROPDOWN_BUTTON_CLASSNAME = getModifierClasses(DEFAULT_BUTTON_CLASSNAME, [ButtonVariant.SECONDARY], [DEFAULT_BUTTON_CLASSNAME]);
-const DROPDOWN_BUTTON_CLASS = `${DROPDOWN_BASE_CLASS}__button`;
-const DROPDOWN_BUTTON_ACTIVE_CLASS = `${DROPDOWN_BUTTON_CLASS}--active`;
-const DROPDOWN_BUTTON_COLLAPSE_INDICATOR_CLASS = `${DROPDOWN_BUTTON_CLASS}-collapse-indicator`;
-const DROPDOWN_BUTTON_HAS_SELECTION_CLASS = `${DROPDOWN_BUTTON_CLASS}--has-selection`;
-const DROPDOWN_BUTTON_ICON_CLASS = `${DROPDOWN_BUTTON_CLASS}-icon`;
-const DROPDOWN_BUTTON_MULTI_SELECT_COUNTER_CLASS = `${DROPDOWN_BUTTON_CLASS}-multiselect-counter`;
-const DROPDOWN_BUTTON_READONLY_CLASS = `${DROPDOWN_BUTTON_CLASS}--readonly`;
-const DROPDOWN_BUTTON_TEXT_CLASS = `${DROPDOWN_BUTTON_CLASS}-text`;
-const DROPDOWN_BUTTON_VALID_CLASS = `${DROPDOWN_BUTTON_CLASS}--valid`;
-const DROPDOWN_BUTTON_INVALID_CLASS = `${DROPDOWN_BUTTON_CLASS}--invalid`;
-const DROPDOWN_ELEMENT_CLASS = `${DROPDOWN_BASE_CLASS}__element`;
-const DROPDOWN_ELEMENT_ACTIVE_CLASS = `${DROPDOWN_ELEMENT_CLASS}--active`;
-const DROPDOWN_ELEMENT_CHECKBOX_CLASS = `${DROPDOWN_ELEMENT_CLASS}-checkbox`;
-const DROPDOWN_ELEMENT_CHECKMARK_CLASS = `${DROPDOWN_ELEMENT_CLASS}-checkmark`;
-const DROPDOWN_ELEMENT_CONTENT_CLASS = `${DROPDOWN_ELEMENT_CLASS}-content`;
-const DROPDOWN_ELEMENT_DISABLED_CLASS = `${DROPDOWN_ELEMENT_CLASS}--disabled`;
-const DROPDOWN_ELEMENT_ICON_CLASS = `${DROPDOWN_ELEMENT_CLASS}-icon`;
-const DROPDOWN_ELEMENT_NO_OPTION_CLASS = `${DROPDOWN_ELEMENT_CLASS}--no-option`;
-const DROPDOWN_LIST_CLASS = `${DROPDOWN_BASE_CLASS}__list`;
-const DROPDOWN_LIST_ACTIVE_CLASS = `${DROPDOWN_LIST_CLASS}--active`;
-const DROPDOWN_MULTI_SELECT_CLASS = `${DROPDOWN_BASE_CLASS}--multiselect`;
+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";
+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 {
-  DROPDOWN_BASE_CLASS,
-  DROPDOWN_BUTTON_ACTIVE_CLASS,
-  DROPDOWN_BUTTON_CLASS,
-  DROPDOWN_BUTTON_CLASSNAME,
-  DROPDOWN_BUTTON_COLLAPSE_INDICATOR_CLASS,
-  DROPDOWN_BUTTON_HAS_SELECTION_CLASS,
-  DROPDOWN_BUTTON_ICON_CLASS,
-  DROPDOWN_BUTTON_INVALID_CLASS,
-  DROPDOWN_BUTTON_MULTI_SELECT_COUNTER_CLASS,
-  DROPDOWN_BUTTON_READONLY_CLASS,
-  DROPDOWN_BUTTON_TEXT_CLASS,
-  DROPDOWN_BUTTON_VALID_CLASS,
-  DROPDOWN_ELEMENT_ACTIVE_CLASS,
-  DROPDOWN_ELEMENT_CHECKBOX_CLASS,
-  DROPDOWN_ELEMENT_CHECKMARK_CLASS,
-  DROPDOWN_ELEMENT_CLASS,
-  DROPDOWN_ELEMENT_CONTENT_CLASS,
-  DROPDOWN_ELEMENT_DISABLED_CLASS,
-  DROPDOWN_ELEMENT_ICON_CLASS,
-  DROPDOWN_ELEMENT_NO_OPTION_CLASS,
-  DROPDOWN_LIST_ACTIVE_CLASS,
-  DROPDOWN_LIST_CLASS,
-  DROPDOWN_MULTI_SELECT_CLASS
+  S as DROPDOWN_BASE_CLASS,
+  n as DROPDOWN_BUTTON_ACTIVE_CLASS,
+  _ as DROPDOWN_BUTTON_CLASS,
+  C as DROPDOWN_BUTTON_CLASSNAME,
+  A as DROPDOWN_BUTTON_COLLAPSE_INDICATOR_CLASS,
+  c as DROPDOWN_BUTTON_HAS_SELECTION_CLASS,
+  s as DROPDOWN_BUTTON_ICON_CLASS,
+  i as DROPDOWN_BUTTON_INVALID_CLASS,
+  R as DROPDOWN_BUTTON_MULTI_SELECT_COUNTER_CLASS,
+  e as DROPDOWN_BUTTON_READONLY_CLASS,
+  P as DROPDOWN_BUTTON_TEXT_CLASS,
+  W as DROPDOWN_BUTTON_VALID_CLASS,
+  $ as DROPDOWN_ELEMENT_ACTIVE_CLASS,
+  I as DROPDOWN_ELEMENT_CHECKBOX_CLASS,
+  B as DROPDOWN_ELEMENT_CHECKMARK_CLASS,
+  O as DROPDOWN_ELEMENT_CLASS,
+  U as DROPDOWN_ELEMENT_CONTENT_CLASS,
+  a as DROPDOWN_ELEMENT_DISABLED_CLASS,
+  l as DROPDOWN_ELEMENT_ICON_CLASS,
+  r as DROPDOWN_ELEMENT_NO_OPTION_CLASS,
+  M as DROPDOWN_LIST_ACTIVE_CLASS,
+  T as DROPDOWN_LIST_CLASS,
+  d as DROPDOWN_MULTI_SELECT_CLASS
 };

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

@@ -1,42 +1,34 @@
-import { T, h, p } from "../../../../../../hooks.module-8565d716.mjs";
-import "../../../../../utils/common/index.js";
-import { EMPTY_ARRAY } from "../../../../../utils/common/constants.js";
-const useSelect = ({ items, multiSelect, selected }) => {
-  const getSelectedItems = T(
-    (selectedItems = EMPTY_ARRAY) => {
-      const _selected = EMPTY_ARRAY.concat(selectedItems ?? EMPTY_ARRAY).filter(Boolean);
-      const _selectedItems = items.filter((item) => _selected.includes(item.id));
-      const selection2 = multiSelect ? _selectedItems : _selectedItems.slice(0, 1);
-      return selection2.length ? Object.freeze(selection2) : EMPTY_ARRAY;
+import { useCallback as i, useState as x, useEffect as O } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { EMPTY_ARRAY as t } from "../../../../../utils/common/constants.js";
+const g = ({ items: f, multiSelect: r, selected: l }) => {
+  const a = i(
+    (c = t) => {
+      const e = t.concat(c ?? t).filter(Boolean), n = f.filter((p) => e.includes(p.id)), o = r ? n : n.slice(0, 1);
+      return o.length ? Object.freeze(o) : t;
     },
-    [items, multiSelect]
-  );
-  const [selection, setSelection] = h(getSelectedItems(selected));
-  const resetSelection = T(
-    (selection2 = EMPTY_ARRAY) => {
-      const nextSelection = selection2.filter((item) => items.includes(item));
-      setSelection(nextSelection.length ? Object.freeze(nextSelection) : EMPTY_ARRAY);
+    [f, r]
+  ), [d, s] = x(a(l)), u = i(
+    (c = t) => {
+      const e = c.filter((n) => f.includes(n));
+      s(e.length ? Object.freeze(e) : t);
     },
-    [items, setSelection]
-  );
-  const select = T(
-    (item) => {
-      setSelection((currentSelection) => {
-        const index = currentSelection.indexOf(item);
-        if (index < 0)
-          return Object.freeze((multiSelect ? currentSelection : EMPTY_ARRAY).concat(item));
-        if (!multiSelect)
-          return currentSelection;
-        const nextSelection = [...currentSelection];
-        nextSelection.splice(index, 1);
-        return nextSelection.length ? Object.freeze(nextSelection) : EMPTY_ARRAY;
+    [f, s]
+  ), b = i(
+    (c) => {
+      s((e) => {
+        const n = e.indexOf(c);
+        if (n < 0)
+          return Object.freeze((r ? e : t).concat(c));
+        if (!r)
+          return e;
+        const o = [...e];
+        return o.splice(n, 1), o.length ? Object.freeze(o) : t;
       });
     },
-    [multiSelect, setSelection]
+    [r, s]
   );
-  p(() => setSelection(getSelectedItems(selected)), [getSelectedItems, selected, setSelection]);
-  return { resetSelection, select, selection };
-};
+  return O(() => s(a(l)), [a, l, s]), { resetSelection: u, select: b, selection: d };
+}, z = g;
 export {
-  useSelect as default
+  z as default
 };

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

@@ -1,14 +1,14 @@
-import { o } from "../../../../jsxRuntime.module-69493d81.mjs";
-import cx from "classnames";
-import { useImageUrl } from "../../../hooks/useImageUrl/useImageUrl.js";
-import { F } from "../../../../hooks.module-8565d716.mjs";
-const Image = ({ folder = "components/", className, alt, name, extension }) => {
-  const imageUrl = useImageUrl({
-    options: F(() => ({ imageFolder: folder, extension }), [extension, folder]),
-    name
+import { jsx as t } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+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 u = ({ folder: m = "components/", className: r, alt: e, name: s, extension: o }) => {
+  const a = p({
+    options: c(() => ({ imageFolder: m, extension: o }), [o, m]),
+    name: s
   });
-  return /* @__PURE__ */ o("img", { className: cx("adyen-pe__image", className), alt, src: imageUrl });
+  return /* @__PURE__ */ t("img", { className: i("adyen-pe__image", r), alt: e, src: a });
 };
 export {
-  Image
+  u as Image
 };