@adyen/adyen-platform-experience-web 0.1.2 → 1.0.0-beta

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

@@ -1,91 +1,95 @@
-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 C from "../../../Img/Img.js";
-import f from "../../../Button/Button.js";
-import { ButtonVariant as L } from "../../../Button/types.js";
-import u from "../../../Typography/Typography.js";
-import B from "../../../SVGIcons/ChevronDown.js";
-import { TypographyElement as p, TypographyVariant as R } from "../../../Typography/types.js";
-import { DROPDOWN_BUTTON_CLASS as h, DROPDOWN_BUTTON_ACTIVE_CLASS as y, DROPDOWN_BUTTON_HAS_SELECTION_CLASS as A, DROPDOWN_BUTTON_READONLY_CLASS as E, DROPDOWN_BUTTON_INVALID_CLASS as P, DROPDOWN_BUTTON_VALID_CLASS as U, DROPDOWN_BUTTON_ICON_CLASS as g, DROPDOWN_BUTTON_TEXT_CLASS as x, DROPDOWN_BUTTON_MULTI_SELECT_COUNTER_CLASS as I, DROPDOWN_BUTTON_COLLAPSE_INDICATOR_CLASS as W, DROPDOWN_BUTTON_CLASSNAME as b } from "../constants.js";
-import { Fragment as w } from "../../../../../external/preact/dist/preact.module.js";
-const V = ({
-  active: e,
-  disabled: m,
-  className: o,
-  filterable: i,
-  toggleButtonRef: l,
-  ...n
+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
 }) => {
-  const r = N(() => i ? T(b, o) : o, [o, i]);
-  return i ? /* @__PURE__ */ a("div", { ...n, className: r, ref: l }) : /* @__PURE__ */ a(
-    f,
+  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,
     {
-      ...n,
-      className: r,
-      disabled: m,
-      variant: L.SECONDARY,
-      ref: l
+      ...props,
+      className: baseClassName,
+      disabled,
+      variant: ButtonVariant.SECONDARY,
+      ref: toggleButtonRef
     }
   );
-}, 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,
+};
+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,
     {
-      active: o,
-      disabled: r,
-      "aria-disabled": r,
-      "aria-expanded": s,
+      active,
+      disabled: readonly,
+      "aria-disabled": readonly,
+      "aria-expanded": showList,
       "aria-haspopup": "listbox",
-      className: T(h, {
-        [y]: s,
-        [A]: !!o.length,
-        [E]: r,
-        [P]: e.isInvalid,
-        [U]: e.isValid
+      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
       }),
-      filterable: i,
-      onClick: r ? void 0 : e.toggleList,
-      onKeyDown: r ? void 0 : e.onButtonKeyDown,
-      role: i ? "button" : void 0,
+      filterable,
+      onClick: !readonly ? props.toggleList : void 0,
+      onKeyDown: !readonly ? props.onButtonKeyDown : void 0,
+      role: filterable ? "button" : void 0,
       tabIndex: 0,
-      title: D,
-      toggleButtonRef: e.toggleButtonRef,
-      type: i ? "" : "button",
-      "aria-describedby": e.ariaDescribedBy,
-      id: e.id ?? "",
+      title: buttonTitleText,
+      toggleButtonRef: props.toggleButtonRef,
+      type: !filterable ? "button" : "",
+      "aria-describedby": props.ariaDescribedBy,
+      id: props.id ?? "",
       children: [
-        s && i ? /* @__PURE__ */ a(
+        showList && filterable ? /* @__PURE__ */ o(
           "input",
           {
             "aria-autocomplete": "list",
-            "aria-controls": e.selectListId,
-            "aria-expanded": s,
-            "aria-owns": e.selectListId,
+            "aria-controls": props.selectListId,
+            "aria-expanded": showList,
+            "aria-owns": props.selectListId,
             autoComplete: "off",
-            className: "adyen-fp-filter-input",
-            onInput: e.onInput,
-            placeholder: O,
-            ref: e.filterInputRef,
+            className: "adyen-pe-filter-input",
+            onInput: props.onInput,
+            placeholder: placeholderText,
+            ref: props.filterInputRef,
             role: "combobox",
             type: "text"
           }
-        ) : /* @__PURE__ */ a(w, { children: [
-          (t == null ? void 0 : t.icon) && /* @__PURE__ */ a(C, { className: g, src: t.icon, alt: t.name.trim() }),
-          /* @__PURE__ */ a("span", { className: x, 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: I, children: /* @__PURE__ */ a(u, { el: p.SPAN, variant: R.BODY, stronger: !0, children: e.appliedFilterNumber }) })
+        ) : /* @__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("span", { className: W, children: /* @__PURE__ */ a(B, { role: "presentation" }) })
+        !withoutCollapseIndicator && /* @__PURE__ */ o("span", { className: DROPDOWN_BUTTON_COLLAPSE_INDICATOR_CLASS, children: /* @__PURE__ */ o(ChevronDown, { role: "presentation" }) })
       ]
     }
   );
-}, J = v;
+};
 export {
-  J as default
+  SelectButton as default
 };

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

@@ -1,56 +1,78 @@
-import { jsx as o } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import a from "classnames";
-import { useMemo as m } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { memo as E } from "../../../../../external/preact/compat/dist/compat.module.js";
-import { isFunction as L } from "../../../../../utils/common/index.js";
-import v from "../../../../../core/Context/useCoreContext.js";
-import I from "../../../../../utils/fixedForwardRef.js";
-import T, { renderSelectListItemDefault as x } from "./SelectListItem.js";
-import { DROPDOWN_LIST_CLASS as R, DROPDOWN_LIST_ACTIVE_CLASS as A, DROPDOWN_ELEMENT_CLASS as M, DROPDOWN_ELEMENT_NO_OPTION_CLASS as g } from "../constants.js";
-import F from "../../../Popover/Popover.js";
-import { PopoverContainerSize as W, PopoverContainerVariant as b } from "../../../Popover/types.js";
-const h = I(
+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(
   ({
-    active: c,
-    commitActions: p,
-    items: d,
-    multiSelect: n,
-    onKeyDown: f,
-    onSelect: S,
-    renderListItem: t,
-    selectListId: u,
-    showList: r,
-    textFilter: s,
-    toggleButtonRef: O
-  }, C) => {
-    const { i18n: N } = v(), l = d.filter((e) => !s || e.name.toLowerCase().includes(s)), P = a(R, { [A]: r }), _ = a(M, g), D = m(() => L(t) ? t : x, [t]), i = m(() => n === !0, [n]);
-    return r ? /* @__PURE__ */ o(
-      F,
+    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,
       {
-        actions: i ? p : void 0,
-        disableFocusTrap: !0,
-        divider: !0,
-        open: r,
-        containerSize: W.MEDIUM,
-        variant: b.POPOVER,
-        targetElement: O,
-        withContentPadding: !1,
-        children: /* @__PURE__ */ o("ul", { className: P, id: u, ref: C, role: "listbox", "aria-multiselectable": i, children: l.length ? l.map((e) => /* @__PURE__ */ o(
-          T,
-          {
-            item: e,
-            multiSelect: i,
-            onKeyDown: f,
-            onSelect: S,
-            renderListItem: D,
-            selected: c.includes(e)
-          },
-          e.id
-        )) : /* @__PURE__ */ o("div", { className: _, children: N.get("select.noOptionsFound") }) })
+        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") }) })
       }
     ) : null;
   }
-), H = E(h);
+);
+const SelectList$1 = x(SelectList);
 export {
-  H as default
+  SelectList$1 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 c from "classnames";
-import { memo as E } from "../../../../../external/preact/compat/dist/compat.module.js";
-import d from "../../../Img/Img.js";
-import N from "../../../SVGIcons/CheckedBox.js";
-import _ from "../../../SVGIcons/UncheckedBox.js";
-import C from "../../../SVGIcons/Checkmark.js";
-import { DROPDOWN_ELEMENT_CHECKBOX_CLASS as D, DROPDOWN_ELEMENT_CONTENT_CLASS as L, DROPDOWN_ELEMENT_CHECKMARK_CLASS as p, DROPDOWN_ELEMENT_CLASS as O, DROPDOWN_ELEMENT_ACTIVE_CLASS as S, DROPDOWN_ELEMENT_DISABLED_CLASS as f, DROPDOWN_ELEMENT_ICON_CLASS as A } from "../constants.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: D, children: s ? /* @__PURE__ */ a(N, { role: "presentation" }) : /* @__PURE__ */ a(_, { role: "presentation" }) }),
-  /* @__PURE__ */ a("div", { className: L, children: [
-    o.icon && /* @__PURE__ */ a(d, { className: e, alt: o.name, src: o.icon }),
-    /* @__PURE__ */ a("span", { children: o.name })
+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 })
   ] }),
-  !r && /* @__PURE__ */ a("span", { className: p, children: s && /* @__PURE__ */ a(C, { 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(O, {
-    [S]: n,
-    [f]: t
+  !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
   });
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ o(
     "li",
     {
-      "aria-disabled": t,
-      "aria-selected": n,
-      className: m,
-      "data-disabled": l,
-      "data-value": e.id,
-      onClick: s,
-      onKeyDown: r,
-      title: e.name,
+      "aria-disabled": disabled,
+      "aria-selected": selected,
+      className: itemClassName,
+      "data-disabled": dataDisabled,
+      "data-value": item.id,
+      onClick: onSelect,
+      onKeyDown,
+      title: item.name,
       role: "option",
       tabIndex: -1,
-      children: i({ item: e, multiSelect: o, selected: n, iconClassName: A })
+      children: renderListItem({ item, multiSelect, selected, iconClassName: DROPDOWN_ELEMENT_ICON_CLASS })
     }
   );
-}, K = E(h);
+};
+const SelectListItem$1 = x(SelectListItem);
 export {
-  K as default,
-  B as renderSelectListItemDefault
+  SelectListItem$1 as default,
+  renderSelectListItemDefault
 };

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

@@ -1,29 +1,51 @@
-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-fp-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`;
+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`;
 export {
-  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
+  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
 };

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

@@ -1,34 +1,42 @@
-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;
+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;
     },
-    [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, 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, 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;
+    [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;
       });
     },
-    [r, s]
+    [multiSelect, setSelection]
   );
-  return O(() => s(a(l)), [a, l, s]), { resetSelection: u, select: b, selection: d };
-}, z = g;
+  p(() => setSelection(getSelectedItems(selected)), [getSelectedItems, selected, setSelection]);
+  return { resetSelection, select, selection };
+};
 export {
-  z as default
+  useSelect as default
 };

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

@@ -0,0 +1,4 @@
+import { default as default2 } from "./Select.js";
+export {
+  default2 as default
+};

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

@@ -0,0 +1,18 @@
+import { o } from "../../../../jsxRuntime.module-69493d81.mjs";
+import InputText from "./InputText.js";
+import Select from "./Select/Select.js";
+import "./InputBase.js";
+const formFieldTypes = {
+  select: Select,
+  // All the following use InputBase
+  text: InputText,
+  default: InputText
+};
+const renderFormField = (type, ...props) => {
+  const FormInputElement = formFieldTypes[type] || formFieldTypes.default;
+  return /* @__PURE__ */ o(FormInputElement, { ...props[0] });
+};
+export {
+  renderFormField as default,
+  renderFormField
+};

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

@@ -0,0 +1,4 @@
+const convertFullToHalf = (str) => str.replace(/[！-～]/g, (r) => String.fromCharCode(r.charCodeAt(0) - 65248));
+export {
+  convertFullToHalf
+};

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

@@ -1,14 +1,14 @@
-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
+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
   });
-  return /* @__PURE__ */ t("img", { className: i("adyen-fp__image", r), alt: e, src: a });
+  return /* @__PURE__ */ o("img", { className: cx("adyen-pe__image", className), alt, src: imageUrl });
 };
 export {
-  u as Image
+  Image
 };