@adyen/adyen-platform-experience-web 1.6.0 → 1.7.0

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

@@ -1,14 +1,14 @@
 import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import D from "classnames";
-import { useMemo as O } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useMemo as s } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import C from "../../../../../core/Context/useCoreContext.js";
 import { ButtonVariant as f } from "../../../Button/types.js";
 import L from "../../../Typography/Typography.js";
-import u from "../../../SVGIcons/ChevronDown.js";
-import { TypographyVariant as B, TypographyElement as p } from "../../../Typography/types.js";
-import { DROPDOWN_BUTTON_ICON_CLASS as R, DROPDOWN_BUTTON_TEXT_CLASS as h, DROPDOWN_BUTTON_MULTI_SELECT_COUNTER_CLASS as y, DROPDOWN_BUTTON_COLLAPSE_INDICATOR_CLASS as A, DROPDOWN_BUTTON_CLASS as E, DROPDOWN_BUTTON_VALID_CLASS as P, DROPDOWN_BUTTON_INVALID_CLASS as U, DROPDOWN_BUTTON_READONLY_CLASS as g, DROPDOWN_BUTTON_HAS_SELECTION_CLASS as x, DROPDOWN_BUTTON_ACTIVE_CLASS as I, DROPDOWN_BUTTON_CLASSNAME as W } from "../constants.js";
-import { Fragment as b } from "../../../../../external/preact/dist/preact.module.js";
-import v from "../../../Img/Img.js";
+import { TypographyVariant as u, TypographyElement as B } from "../../../Typography/types.js";
+import { DROPDOWN_BUTTON_ICON_CLASS as p, DROPDOWN_BUTTON_TEXT_CLASS as R, DROPDOWN_BUTTON_MULTI_SELECT_COUNTER_CLASS as h, DROPDOWN_BUTTON_COLLAPSE_INDICATOR_CLASS as y, DROPDOWN_BUTTON_CLASS as A, DROPDOWN_BUTTON_VALID_CLASS as E, DROPDOWN_BUTTON_INVALID_CLASS as P, DROPDOWN_BUTTON_READONLY_CLASS as U, DROPDOWN_BUTTON_HAS_SELECTION_CLASS as g, DROPDOWN_BUTTON_ACTIVE_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 { Icon as v } from "../../../Icon/Icon.js";
 import w from "../../../Button/Button.js";
 import { boolOrFalse as V } from "../../../../../utils/value/bool.js";
 const F = ({
@@ -19,7 +19,7 @@ const F = ({
   toggleButtonRef: l,
   ...n
 }) => {
-  const r = O(() => i ? D(W, o) : o, [o, i]);
+  const r = s(() => i ? D(I, o) : o, [o, i]);
   return i ? /* @__PURE__ */ a("div", { ...n, className: r, ref: l }) : /* @__PURE__ */ a(
     w,
     {
@@ -31,58 +31,58 @@ const F = ({
     }
   );
 }, $ = (e) => {
-  var T, c;
-  const { i18n: m } = C(), { active: o, filterable: i, multiSelect: l, placeholder: n, readonly: r, showList: s, withoutCollapseIndicator: S } = e, N = O(() => (n == null ? void 0 : n.trim()) || m.get("select.filter.placeholder"), [m, n]), t = O(() => V(l) ? void 0 : o[0], [o, l]), d = O(() => {
+  var c, T;
+  const { i18n: m } = C(), { active: o, filterable: i, multiSelect: l, placeholder: n, readonly: r, showList: O, withoutCollapseIndicator: S } = e, d = s(() => (n == null ? void 0 : n.trim()) || m.get("select.filter.placeholder"), [m, n]), t = s(() => V(l) ? void 0 : o[0], [o, l]), N = s(() => {
     var _;
-    return ((_ = t == null ? void 0 : t.name) == null ? void 0 : _.trim()) || N;
-  }, [t, N]);
+    return ((_ = t == null ? void 0 : t.name) == null ? void 0 : _.trim()) || d;
+  }, [t, d]);
   return /* @__PURE__ */ a(
     F,
     {
       active: o,
       disabled: r,
       "aria-disabled": r,
-      "aria-expanded": s,
+      "aria-expanded": O,
       "aria-haspopup": "listbox",
-      className: D(E, {
-        [I]: s,
-        [x]: !!o.length,
-        [g]: r,
-        [U]: e.isInvalid,
-        [P]: e.isValid
+      className: D(A, {
+        [x]: O,
+        [g]: !!o.length,
+        [U]: r,
+        [P]: e.isInvalid,
+        [E]: e.isValid
       }),
       filterable: i,
       onClick: r ? void 0 : e.toggleList,
       onKeyDown: r ? void 0 : e.onButtonKeyDown,
       role: i ? "button" : void 0,
       tabIndex: 0,
-      title: d,
+      title: N,
       toggleButtonRef: e.toggleButtonRef,
       type: i ? void 0 : "button",
       "aria-describedby": e.ariaDescribedBy,
       id: e.id ?? "",
       children: [
-        s && i ? /* @__PURE__ */ a(
+        O && i ? /* @__PURE__ */ a(
           "input",
           {
             "aria-autocomplete": "list",
             "aria-controls": e.selectListId,
-            "aria-expanded": s,
+            "aria-expanded": O,
             "aria-owns": e.selectListId,
             autoComplete: "off",
             className: "adyen-pe-filter-input",
             onInput: e.onInput,
-            placeholder: N,
+            placeholder: d,
             ref: e.filterInputRef,
             role: "combobox",
             type: "text"
           }
-        ) : /* @__PURE__ */ a(b, { children: [
-          (t == null ? void 0 : t.icon) && /* @__PURE__ */ a(v, { className: R, src: t.icon, alt: ((T = t == null ? void 0 : t.name) == null ? void 0 : T.trim()) ?? "" }),
-          /* @__PURE__ */ a("span", { className: h, children: ((c = t == null ? void 0 : t.selectedOptionName) == null ? void 0 : c.trim()) || d }),
-          l && e.appliedFilterNumber > 0 && /* @__PURE__ */ a("div", { className: y, children: /* @__PURE__ */ a(L, { el: p.SPAN, variant: B.BODY, stronger: !0, children: e.appliedFilterNumber }) })
+        ) : /* @__PURE__ */ a(W, { children: [
+          (t == null ? void 0 : t.icon) && /* @__PURE__ */ a(b, { className: p, src: t.icon, alt: ((c = t == null ? void 0 : t.name) == null ? void 0 : c.trim()) ?? "" }),
+          /* @__PURE__ */ a("span", { className: R, children: ((T = t == null ? void 0 : t.selectedOptionName) == null ? void 0 : T.trim()) || N }),
+          l && e.appliedFilterNumber > 0 && /* @__PURE__ */ a("div", { className: h, children: /* @__PURE__ */ a(L, { el: B.SPAN, variant: u.BODY, stronger: !0, children: e.appliedFilterNumber }) })
         ] }),
-        !S && /* @__PURE__ */ a("span", { className: A, children: /* @__PURE__ */ a(u, { role: "presentation" }) })
+        !S && /* @__PURE__ */ a("span", { className: y, children: /* @__PURE__ */ a(v, { name: "chevron-down" }) })
       ]
     }
   );

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

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

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

@@ -1,69 +1,72 @@
 import { jsx as a } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { ButtonVariant as s } from "../Button/types.js";
-import g from "../../../core/Context/useCoreContext.js";
-import b from "classnames";
-import { useMemo as h, useCallback as v } from "../../../external/preact/hooks/dist/hooks.module.js";
+import g from "classnames";
+import v from "../../../core/Context/useCoreContext.js";
+import { useMemo as N, useCallback as _ } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { ButtonVariant as l } from "../Button/types.js";
 /* empty css                */
-import C from "../SVGIcons/ChevronLeft.js";
-import _ from "../SVGIcons/ChevronRight.js";
-import { Fragment as T } from "../../../external/preact/dist/preact.module.js";
-import R from "../FormFields/Select/Select.js";
-import d from "../Button/Button.js";
-import { isNullish as N } from "../../../utils/value/is.js";
-import { EMPTY_ARRAY as c } from "../../../utils/value/constants.js";
-function w({ next: m, hasNext: n, hasPrev: o, prev: p, limit: f, limitOptions: t, onLimitSelection: i }) {
-  const { i18n: r } = g(), l = h(
-    () => t && Object.freeze(t.map((e) => ({ id: `${e}`, name: `${e}` }))),
-    [t]
-  ), u = v(
+import { Fragment as b } from "../../../external/preact/dist/preact.module.js";
+import y from "../FormFields/Select/Select.js";
+import c from "../Button/Button.js";
+import { Icon as d } from "../Icon/Icon.js";
+import { isNullish as T } from "../../../utils/value/is.js";
+import { EMPTY_ARRAY as m } from "../../../utils/value/constants.js";
+function j({ next: p, hasNext: o, hasPrev: s, prev: u, limit: f, limitOptions: r, onLimitSelection: i }) {
+  const { i18n: n } = v(), t = N(
+    () => r && Object.freeze(r.map((e) => ({ id: `${e}`, name: `${e}` }))),
+    [r]
+  ), h = _(
     ({ target: e }) => {
-      N(e == null ? void 0 : e.value) || i == null || i(+e.value);
+      T(e == null ? void 0 : e.value) || i == null || i(+e.value);
     },
     [i]
   );
-  return /* @__PURE__ */ a("div", { "aria-label": r.get("paginatedNavigation"), className: `adyen-pe-pagination ${b({})}`, children: [
-    /* @__PURE__ */ a("div", { className: "adyen-pe-pagination__context", children: l && i && /* @__PURE__ */ a(T, { children: [
-      /* @__PURE__ */ a("span", { children: r.get("pagination.showing") }),
+  return /* @__PURE__ */ a("div", { "aria-label": n.get("paginatedNavigation"), className: `adyen-pe-pagination ${g({})}`, children: [
+    /* @__PURE__ */ a("div", { className: "adyen-pe-pagination__context", children: t && i && /* @__PURE__ */ a(b, { children: [
+      /* @__PURE__ */ a("span", { children: n.get("pagination.showing") }),
       /* @__PURE__ */ a("div", { className: "adyen-pe-pagination__limit-selector", children: /* @__PURE__ */ a(
-        R,
+        y,
         {
           setToTargetWidth: !0,
           filterable: !1,
           multiSelect: !1,
-          items: l,
-          onChange: u,
+          items: t,
+          onChange: h,
           selected: `${f ?? ""}`
         }
       ) })
     ] }) }),
     /* @__PURE__ */ a("div", { className: "adyen-pe-pagination__controls", children: [
       /* @__PURE__ */ a(
-        d,
+        c,
         {
-          "aria-label": r.get("pagination.previousPage"),
-          variant: s.TERTIARY,
-          disabled: !o,
+          variant: l.TERTIARY,
+          disabled: !s,
           iconButton: !0,
-          classNameModifiers: ["circle"].concat(o ? c : "disabled"),
-          onClick: p,
-          children: /* @__PURE__ */ a(C, { disabled: !o })
+          classNameModifiers: ["circle"].concat(s ? m : "disabled"),
+          onClick: u,
+          children: [
+            /* @__PURE__ */ a(d, { name: "chevron-left" }),
+            /* @__PURE__ */ a("span", { className: "adyen-pe-visually-hidden", children: n.get("pagination.previousPage") })
+          ]
         }
       ),
       /* @__PURE__ */ a(
-        d,
+        c,
         {
-          "aria-label": r.get("pagination.nextPage"),
-          variant: s.TERTIARY,
-          disabled: !n,
+          variant: l.TERTIARY,
+          disabled: !o,
           iconButton: !0,
-          classNameModifiers: ["circle"].concat(n ? c : "disabled"),
-          onClick: m,
-          children: /* @__PURE__ */ a(_, { disabled: !n })
+          classNameModifiers: ["circle"].concat(o ? m : "disabled"),
+          onClick: p,
+          children: [
+            /* @__PURE__ */ a("span", { className: "adyen-pe-visually-hidden", children: n.get("pagination.nextPage") }),
+            /* @__PURE__ */ a(d, { name: "chevron-right" })
+          ]
         }
       )
     ] })
   ] });
 }
 export {
-  w as default
+  j as default
 };

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

@@ -1,144 +1,147 @@
 import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import eo from "../Button/ButtonActions/ButtonActions.js";
-import { ButtonActionsLayoutBasic as no } from "../Button/ButtonActions/types.js";
-import { DEFAULT_POPOVER_CLASSNAME as c, POPOVER_HEADER_TITLE_CLASSNAME as to, TOOLTIP_CONTENT_CLASSNAME as U, POPOVER_CONTENT_CLASSNAME as N, POPOVER_FOOTER_CLASSNAME as co, DEFAULT_TOOLTIP_CLASSNAME as io, POPOVER_CONTAINER_CLASSNAME as so, POPOVER_HEADER_CLASSNAME as B } from "./constants.js";
-import uo from "./PopoverDismissButton/PopoverDismissButton.js";
-import mo from "./PopoverTitle/PopoverTitle.js";
-import { PopoverContainerVariant as i, PopoverContainerSize as k } from "./types.js";
+import no from "../Button/ButtonActions/ButtonActions.js";
+import { ButtonActionsLayoutBasic as to } from "../Button/ButtonActions/types.js";
+import { DEFAULT_POPOVER_CLASSNAME as c, POPOVER_HEADER_TITLE_CLASSNAME as co, TOOLTIP_CONTENT_CLASSNAME as K, POPOVER_CONTENT_CLASSNAME as N, POPOVER_FOOTER_CLASSNAME as io, DEFAULT_TOOLTIP_CLASSNAME as so, POPOVER_CONTAINER_CLASSNAME as uo, POPOVER_HEADER_CLASSNAME as w } from "./constants.js";
+import mo from "./PopoverDismissButton/PopoverDismissButton.js";
+import fo from "./PopoverTitle/PopoverTitle.js";
+import { PopoverContainerVariant as i, PopoverContainerSize as b } from "./types.js";
 import { InteractionKeyCode as ao } from "../../types.js";
-import { useClickOutside as po, ClickOutsideVariant as fo, CONTROL_ELEMENT_PROPERTY as O } from "../../../hooks/element/useClickOutside.js";
-import lo from "../../../hooks/element/useFocusTrap.js";
-import Oo from "../../../hooks/element/usePopoverPositioner.js";
-import w from "../../../hooks/element/useUniqueIdentifier.js";
-import Eo from "../../../hooks/useReflex.js";
-import { SELECTORS as To, isFocusable as Po } from "../../../primitives/dom/tabbableRoot/tabbable.js";
-import b from "classnames";
-import { createPortal as Ao } from "../../../external/preact/compat/dist/compat.module.js";
-import { useMemo as q, useRef as L, useCallback as C, useEffect as x } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { useClickOutside as po, ClickOutsideVariant as lo, CONTROL_ELEMENT_PROPERTY as d } from "../../../hooks/element/useClickOutside.js";
+import Oo from "../../../hooks/element/useFocusTrap.js";
+import Eo from "../../../hooks/element/usePopoverPositioner.js";
+import L from "../../../hooks/element/useUniqueIdentifier.js";
+import To from "../../../hooks/useReflex.js";
+import { SELECTORS as Po, isFocusable as Ao } from "../../../primitives/dom/tabbableRoot/tabbable.js";
+import q from "classnames";
+import { createPortal as No } from "../../../external/preact/compat/dist/compat.module.js";
+import { useMemo as x, useRef as C, useCallback as _, useEffect as U } from "../../../external/preact/hooks/dist/hooks.module.js";
 /* empty css             */
-import { Fragment as _ } from "../../../external/preact/dist/preact.module.js";
-import { isFunction as No } from "../../../utils/value/is.js";
-import { boolOrTrue as Lo } from "../../../utils/value/bool.js";
-import { getModifierClasses as Co } from "../../../utils/preact/className.js";
-const _o = (s) => {
+import { Fragment as y } from "../../../external/preact/dist/preact.module.js";
+import { isFunction as Lo } from "../../../utils/value/is.js";
+import { boolOrTrue as Co } from "../../../utils/value/bool.js";
+import { getModifierClasses as _o } from "../../../utils/preact/className.js";
+const yo = (s) => {
   var e;
-  let a;
-  const l = (e = s.querySelector(`.${U}`)) == null ? void 0 : e.querySelectorAll(To);
+  let f;
+  const l = (e = s.querySelector(`.${K}`)) == null ? void 0 : e.querySelectorAll(Po);
   return l ? (Array.prototype.some.call(l, (u) => {
-    if (Po(u)) return a = u;
-  }), a) : null;
-}, yo = (s) => s === i.TOOLTIP ? [10, 3, 5, 5] : [8, 8, 8, 8];
-function Yo({
+    if (Ao(u)) return f = u;
+  }), f) : null;
+}, Ro = (s) => s === i.TOOLTIP ? [10, 3, 5, 5] : [8, 8, 8, 8];
+function Jo({
   actions: s,
-  disableFocusTrap: a = !1,
-  actionsLayout: l = no.SPACE_BETWEEN,
+  disableFocusTrap: f = !1,
+  actionsLayout: l = to.SPACE_BETWEEN,
   variant: e = i.TOOLTIP,
   title: u,
-  open: p,
-  dismissible: y,
-  modifiers: K,
+  open: a,
+  dismissible: R,
+  modifiers: W,
   divider: S,
-  fitContent: R,
-  withoutSpace: v,
-  containerSize: d,
-  position: W,
+  fitContent: v,
+  withoutSpace: I,
+  containerSize: E,
+  position: H,
   targetElement: o,
-  setToTargetWidth: H,
+  setToTargetWidth: j,
   dismiss: n,
-  children: I,
-  withContentPadding: j,
-  classNameModifiers: G,
-  showOverlay: f = !1,
-  fitPosition: Y,
-  fixedPositioning: J = !1,
-  additionalStyle: Q,
-  ...F
+  children: F,
+  withContentPadding: G,
+  classNameModifiers: Y,
+  showOverlay: p = !1,
+  fitPosition: J,
+  fixedPositioning: Q = !1,
+  additionalStyle: X,
+  ...M
 }) {
-  const M = q(() => No(n) && Lo(y), [n, y]), V = w(), $ = L(), X = C(
+  const V = x(() => Lo(n) && Co(R), [n, R]), $ = L(), h = L(), D = C(), Z = _(
     (t) => {
       var m;
       n && n(), t && ((m = o == null ? void 0 : o.current) == null || m.focus());
     },
     [n, o]
-  ), E = C(
+  ), T = _(
     (t) => {
       t.code === ao.ESCAPE && (n && n(), (o == null ? void 0 : o.current).focus());
     },
     [n, o]
-  ), T = L(E), h = L(), D = po(
-    Oo(
-      yo(e),
+  ), P = C(T), B = C(), k = po(
+    Eo(
+      Ro(e),
       o,
       e,
-      W,
-      V,
       H,
-      f,
-      Y,
+      $,
+      j,
+      p,
       J,
-      Q
+      Q,
+      X,
+      void 0,
+      h
     ),
     n,
-    e === i.TOOLTIP && !p,
-    fo.POPOVER
-  ), Z = lo(a ? null : D, X), P = Eo(
-    C(
+    e === i.TOOLTIP && !a,
+    lo.POPOVER
+  ), z = Oo(f ? null : k, Z), O = To(
+    _(
       (t, m) => {
-        m instanceof Element && (m[O] = void 0, delete m[O]), t instanceof Element && (t[O] = o.current, cancelAnimationFrame(h.current), h.current = requestAnimationFrame(() => {
-          if ($.current === p || !($.current = p)) return;
-          const A = _o(t);
+        m instanceof Element && (m[d] = void 0, delete m[d]), t instanceof Element && (t[d] = o.current, cancelAnimationFrame(B.current), B.current = requestAnimationFrame(() => {
+          if (D.current === a || !(D.current = a)) return;
+          const A = yo(t);
           A == null || A.focus();
         }));
       },
-      [p, o]
+      [a, o]
     ),
-    a ? D : Z
-  ), z = w(P), g = q(
+    f ? k : z
+  ), g = L(O), oo = x(
     () => ({
-      [`${c}--medium`]: d === k.MEDIUM,
+      [`${c}--medium`]: E === b.MEDIUM,
       [`${c}--with-divider`]: !!S,
-      [`${c}--wide`]: d === k.WIDE,
-      [`${c}--fit-content`]: R,
-      [`${c}--without-space`]: v,
-      [`${c}--auto-width`]: f
+      [`${c}--wide`]: E === b.WIDE,
+      [`${c}--fit-content`]: v,
+      [`${c}--without-space`]: I,
+      [`${c}--auto-width`]: p
     }),
-    [d, S, v, R, f]
+    [E, S, I, v, p]
   );
-  x(() => {
-    P.current && (P.current[O] = o.current);
-  }, [o]), x(() => (document.removeEventListener("keydown", T.current), document.addEventListener("keydown", T.current = E), () => document.removeEventListener("keydown", T.current)), [E]);
-  const oo = e === i.TOOLTIP ? io : `${c} ${so}`, ro = e === i.TOOLTIP ? U : `${N}`;
-  return Ao(
-    /* @__PURE__ */ r(_, { children: p ? /* @__PURE__ */ r(_, { children: [
-      f && /* @__PURE__ */ r("div", { className: "adyen-pe-popover__overlay" }),
+  U(() => {
+    O.current && (O.current[d] = o.current);
+  }, [O, o]), U(() => (document.removeEventListener("keydown", P.current), document.addEventListener("keydown", P.current = T), () => document.removeEventListener("keydown", P.current)), [T]);
+  const ro = e === i.TOOLTIP ? so : `${c} ${uo}`, eo = e === i.TOOLTIP ? K : `${N}`;
+  return No(
+    /* @__PURE__ */ r(y, { children: a ? /* @__PURE__ */ r(y, { children: [
+      p && /* @__PURE__ */ r("div", { className: "adyen-pe-popover__overlay" }),
       /* @__PURE__ */ r(
         "div",
         {
           id: "popover",
-          ref: z,
-          ...F,
-          className: b(oo, g, G),
+          ref: g,
+          ...M,
+          className: q(ro, oo, Y),
           style: { visibility: "hidden" },
-          role: F.role ?? (e === i.POPOVER ? "dialog" : "tooltip"),
+          role: M.role ?? (e === i.POPOVER ? "dialog" : "tooltip"),
           children: [
-            (u || M) && /* @__PURE__ */ r("div", { className: Co(B, K, [B]), children: [
-              u && /* @__PURE__ */ r("div", { className: to, children: /* @__PURE__ */ r(mo, { title: u }) }),
-              M && /* @__PURE__ */ r(uo, { onClick: n })
+            (u || V) && /* @__PURE__ */ r("div", { className: _o(w, W, [w]), children: [
+              u && /* @__PURE__ */ r("div", { className: co, children: /* @__PURE__ */ r(fo, { title: u }) }),
+              V && /* @__PURE__ */ r(mo, { onClick: n })
             ] }),
-            I && /* @__PURE__ */ r(_, { children: [
+            F && /* @__PURE__ */ r(y, { children: [
               /* @__PURE__ */ r(
                 "div",
                 {
-                  className: b(ro, {
-                    [`${N}--with-padding`]: j,
-                    [`${N}--overlay`]: f
+                  className: q(eo, {
+                    [`${N}--with-padding`]: G,
+                    [`${N}--overlay`]: p
                   }),
-                  children: I
+                  ref: h,
+                  children: F
                 }
               ),
-              e === i.TOOLTIP && /* @__PURE__ */ r("span", { "data-popover-placement": "hidden", ref: V, className: "adyen-pe-tooltip__arrow" })
+              e === i.TOOLTIP && /* @__PURE__ */ r("span", { "data-popover-placement": "hidden", ref: $, className: "adyen-pe-tooltip__arrow" })
             ] }),
-            s && /* @__PURE__ */ r("div", { className: co, children: /* @__PURE__ */ r(eo, { actions: s, layout: l }) })
+            s && /* @__PURE__ */ r("div", { className: io, children: /* @__PURE__ */ r(no, { actions: s, layout: l }) })
           ]
         }
       )
@@ -147,5 +150,5 @@ function Yo({
   );
 }
 export {
-  Yo as default
+  Jo as default
 };

package/dist/es/components/internal/Popover/types.js

@@ -1,6 +1,6 @@
-var O = /* @__PURE__ */ ((T) => (T.TOOLTIP = "tooltip", T.POPOVER = "popover", T))(O || {}), E = /* @__PURE__ */ ((T) => (T.TOP = "top", T.TOP_LEFT = "top-left", T.RIGHT = "right", T.BOTTOM = "bottom", T.BOTTOM_LEFT = "bottom-left", T.LEFT = "left", T))(E || {}), l = /* @__PURE__ */ ((T) => (T.MEDIUM = "medium", T.WIDE = "wide", T))(l || {});
+var O = /* @__PURE__ */ ((T) => (T.TOOLTIP = "tooltip", T.POPOVER = "popover", T))(O || {}), E = /* @__PURE__ */ ((T) => (T.TOP = "top", T.RIGHT = "right", T.BOTTOM = "bottom", T.LEFT = "left", T.TOP_LEFT = "top-left", T.TOP_RIGHT = "top-right", T.BOTTOM_LEFT = "bottom-left", T.BOTTOM_RIGHT = "bottom-right", T))(E || {}), I = /* @__PURE__ */ ((T) => (T.MEDIUM = "medium", T.WIDE = "wide", T))(I || {});
 export {
   E as PopoverContainerPosition,
-  l as PopoverContainerSize,
+  I as PopoverContainerSize,
   O as PopoverContainerVariant
 };