@adyen/adyen-platform-experience-web 1.1.1 → 1.2.0

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

@@ -1,44 +1,28 @@
+import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import _ from "classnames";
-import { forwardRef as p } from "../../../external/preact/compat/dist/compat.module.js";
-import { useState as y, useMemo as r, useCallback as N } from "../../../external/preact/hooks/dist/hooks.module.js";
-import O from "../../../core/Context/useCoreContext.js";
-import P from "../Calendar/hooks/useTimezone.js";
-import { DEFAULT_FIRST_WEEK_DAY as x } from "../Calendar/calendar/timerange/presets/shared/offsetWeek.js";
-import D from "../Calendar/hooks/useCalendarControlsRendering.js";
+import { forwardRef as y } from "../../../external/preact/compat/dist/compat.module.js";
+import { useState as p, useMemo as r, useCallback as O } from "../../../external/preact/hooks/dist/hooks.module.js";
+import N from "../../../core/Context/useCoreContext.js";
+import P from "../../../hooks/useReflex.js";
+import D from "../Calendar/hooks/useTimezone.js";
+import { DEFAULT_FIRST_WEEK_DAY as I } from "../Calendar/calendar/timerange/presets/shared/offsetWeek.js";
+import M from "../Calendar/hooks/useCalendarControlsRendering.js";
 import "./DatePicker.scss.js";
-import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import I from "../../../hooks/useReflex/useReflex.js";
-import M from "./components/TimeRangeSelector/TimeRangeSelector.js";
-import v from "../Calendar/Calendar.js";
+import v from "./components/TimeRangeSelector/TimeRangeSelector.js";
+import x from "../Calendar/Calendar.js";
 import u from "../Calendar/calendar/facade/index.js";
 import { boolOrTrue as E } from "../../../utils/value/bool.js";
 import { EMPTY_OBJECT as S } from "../../../utils/value/constants.js";
 import { noop as A } from "../../../utils/common.js";
-const b = p((e, g) => {
-  const {
-    i18n: i
-  } = O(), [T, k] = D(e.renderControl), [C, a] = y(performance.now()), t = r(() => E(e.showTimezoneInfo), [e.showTimezoneInfo]), {
-    clockTime: m,
-    GMTOffset: c
-  } = P({
-    timezone: e.timezone,
-    withClock: t
-  }), z = r(() => _([{
-    "adyen-pe-datepicker--with-timezone": t
-  }, "adyen-pe-datepicker"]), [t]), w = r(() => t ? {
-    values: {
-      offset: c,
-      time: m
-    }
-  } : S, [c, m, t]), o = I(A, g), R = N(() => {
+const b = y((e, g) => {
+  const { i18n: i } = N(), [T, k] = M(e.renderControl), [C, a] = p(performance.now()), t = r(() => E(e.showTimezoneInfo), [e.showTimezoneInfo]), { clockTime: m, GMTOffset: c } = D({ timezone: e.timezone, withClock: t }), w = r(() => _([{ "adyen-pe-datepicker--with-timezone": t }, "adyen-pe-datepicker"]), [t]), z = r(() => t ? { values: { offset: c, time: m } } : S, [c, m, t]), o = P(A, g), R = O(() => {
     var l, s, d, f, h;
     a(performance.now()), (l = o.current) != null && l.from && ((s = o.current) != null && s.to) && ((h = e.onHighlight) == null || h.call(e, +((d = o.current) == null ? void 0 : d.from), +((f = o.current) == null ? void 0 : f.to)));
   }, [a, e.onHighlight]);
-  return n("div", {
-    className: z,
-    children: [n("div", {
-      className: "adyen-pe-datepicker__selector-container",
-      children: n(M, {
+  return /* @__PURE__ */ n("div", { className: w, children: [
+    /* @__PURE__ */ n("div", { className: "adyen-pe-datepicker__selector-container", children: /* @__PURE__ */ n(
+      v,
+      {
         now: e.now,
         calendarRef: o,
         onTimeRangeSelected: e.onPresetOptionSelected,
@@ -46,28 +30,26 @@ const b = p((e, g) => {
         selectedOption: e.selectedPresetOption,
         timestamp: C,
         timezone: e.timezone
-      })
-    }), n("div", {
-      ref: k,
-      role: "group",
-      className: "adyen-pe-datepicker__controls",
-      "aria-label": i.get("calendar.controls")
-    }), n(v, {
-      ...e,
-      ref: o,
-      firstWeekDay: x,
-      dynamicBlockRows: !0,
-      onlyCellsWithin: !0,
-      controls: e.controls ?? u.controls.MINIMAL,
-      highlight: e.highlight ?? u.highlight.MANY,
-      onHighlight: R,
-      renderControl: T,
-      trackCurrentDay: !0
-    }), t && n("div", {
-      className: "adyen-pe-datepicker__timezone",
-      children: i.get("calendar.timezone", w)
-    })]
-  });
+      }
+    ) }),
+    /* @__PURE__ */ n("div", { ref: k, role: "group", className: "adyen-pe-datepicker__controls", "aria-label": i.get("calendar.controls") }),
+    /* @__PURE__ */ n(
+      x,
+      {
+        ...e,
+        ref: o,
+        firstWeekDay: I,
+        dynamicBlockRows: !0,
+        onlyCellsWithin: !0,
+        controls: e.controls ?? u.controls.MINIMAL,
+        highlight: e.highlight ?? u.highlight.MANY,
+        onHighlight: R,
+        renderControl: T,
+        trackCurrentDay: !0
+      }
+    ),
+    t && /* @__PURE__ */ n("div", { className: "adyen-pe-datepicker__timezone", children: i.get("calendar.timezone", z) })
+  ] });
 }), Z = b;
 export {
   Z as default

package/dist/es/components/internal/DatePicker/components/TimeRangeSelector/TimeRangeSelector.js

@@ -1,41 +1,32 @@
-import { useMemo as x, useCallback as C, useRef as h, useEffect as i } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { useTimeRangeSelection as j } from "./useTimeRangeSelection.js";
-import { jsx as w } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { jsx as C } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as j, useCallback as w, useRef as h, useEffect as i } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useTimeRangeSelection as x } from "./useTimeRangeSelection.js";
 import D from "../../../FormFields/Select/Select.js";
-const a = ({
+const T = ({
   calendarRef: t,
   onTimeRangeSelected: o,
   timestamp: s,
   ...O
 }) => {
-  const {
-    customSelection: f,
-    from: u,
-    onSelection: l,
-    options: m,
-    selectedOption: r,
-    to: c
-  } = j(O), S = x(() => Object.freeze(m.map((e) => ({
-    id: e,
-    name: e
-  }))), [m]), b = C(({
-    target: e
-  }) => l(e == null ? void 0 : e.value), [l]), n = h(!0), p = h(s);
+  const { customSelection: f, from: u, onSelection: l, options: m, selectedOption: r, to: c } = x(O), S = j(() => Object.freeze(m.map((e) => ({ id: e, name: e }))), [m]), b = w(({ target: e }) => l(e == null ? void 0 : e.value), [l]), n = h(!0), p = h(s);
   return i(() => {
     t != null && t.current && u && c && (n.current = !0, t.current.from = new Date(u), t.current.to = new Date(c));
   }, [t, u, c]), i(() => {
     p.current !== s && (p.current = s, n.current ? n.current = !1 : f());
   }, [f, s]), i(() => {
     r && (o == null || o(r));
-  }, [r, o]), w(D, {
-    setToTargetWidth: !0,
-    items: S,
-    filterable: !1,
-    multiSelect: !1,
-    onChange: b,
-    selected: r
-  });
-}, E = a;
+  }, [r, o]), /* @__PURE__ */ C(
+    D,
+    {
+      setToTargetWidth: !0,
+      items: S,
+      filterable: !1,
+      multiSelect: !1,
+      onChange: b,
+      selected: r
+    }
+  );
+}, y = T;
 export {
-  E as default
+  y as default
 };

package/dist/es/components/internal/DatePicker/components/TimeRangeSelector/useTimeRangeSelection.js

@@ -1,38 +1,42 @@
-import { useState as i, useRef as C, useMemo as c, useCallback as R } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useState as i, useRef as k, useMemo as c, useCallback as C } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import I from "../../../../../core/Context/useCoreContext.js";
-import T from "../../../Calendar/calendar/timerange/presets/lastNDays.js";
+import R from "../../../Calendar/calendar/timerange/presets/lastNDays.js";
 import N from "../../../Calendar/calendar/timerange/presets/thisWeek.js";
 import q from "../../../Calendar/calendar/timerange/presets/lastWeek.js";
-import E from "../../../Calendar/calendar/timerange/presets/thisMonth.js";
-import K from "../../../Calendar/calendar/timerange/presets/lastMonth.js";
-import Z from "../../../Calendar/calendar/timerange/presets/yearToDate.js";
+import A from "../../../Calendar/calendar/timerange/presets/thisMonth.js";
+import E from "../../../Calendar/calendar/timerange/presets/lastMonth.js";
+import K from "../../../Calendar/calendar/timerange/presets/yearToDate.js";
 const X = () => Object.freeze({
-  "rangePreset.last7Days": T(7),
-  "rangePreset.last30Days": T(30),
+  "rangePreset.last7Days": R(7),
+  "rangePreset.last30Days": R(30),
   "rangePreset.thisWeek": N(),
   "rangePreset.lastWeek": q(),
-  "rangePreset.thisMonth": E(),
-  "rangePreset.lastMonth": K(),
-  "rangePreset.yearToDate": Z()
+  "rangePreset.thisMonth": A(),
+  "rangePreset.lastMonth": E(),
+  "rangePreset.yearToDate": K()
 }), Y = ({
   now: a = Date.now(),
   options: n,
   selectedOption: m,
   timezone: u
 }) => {
-  const {
-    i18n: l
-  } = I(), [W, h] = i(), [j, S] = i(), [f, g] = i(), d = C(), y = C(), [e, D, s] = c(() => {
+  const { i18n: l } = I(), [W, h] = i(), [j, S] = i(), [f, g] = i(), d = k(), y = k(), [e, D, s] = c(() => {
     const o = l.get("rangePreset.custom"), t = Object.keys(n), r = Object.freeze(t.map((O) => l.get(O)));
-    return [o, (O, M = r) => {
-      const v = M.findIndex((z) => z === O);
+    return [o, (O, F = r) => {
+      const v = F.findIndex((z) => z === O);
       return n[t[v]];
     }, r];
-  }, [l, n]), [P, b] = i(m === e), k = c(() => Object.freeze([...s, e]), [e, s]), x = c(() => P ? k : s, [P, s, k]), p = R((o) => {
-    const t = D(o, s);
-    t && (h(t.from), S(t.to), b(!1), g(o));
-  }, [e, D, f, s]), F = R(() => {
-    h(void 0), S(void 0), b(!0), g(e);
+  }, [l, n]), [P, T] = i(m === e), b = c(() => Object.freeze([...s, e]), [e, s]), M = c(
+    () => P ? b : s,
+    [P, s, b]
+  ), p = C(
+    (o) => {
+      const t = D(o, s);
+      t && (h(t.from), S(t.to), T(!1), g(o));
+    },
+    [e, D, f, s]
+  ), x = C(() => {
+    h(void 0), S(void 0), T(!0), g(e);
   }, [e]);
   return c(() => {
     m === e ? g(e) : p(m);
@@ -45,10 +49,10 @@ const X = () => Object.freeze({
       }), d.current = a, y.current = (o = t[0]) == null ? void 0 : o.timezone, p(f);
     }
   }, [a, u, n]), {
-    customSelection: F,
+    customSelection: x,
     from: W,
     onSelection: p,
-    options: x,
+    options: M,
     selectedOption: f,
     to: j
   };

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

@@ -0,0 +1,8 @@
+import { jsx as o } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import m from "classnames";
+import "./Divider.scss.js";
+import { DIVIDER_CLASS_NAMES as t } from "./constants.js";
+const a = ({ className: r }) => /* @__PURE__ */ o("hr", { className: m(t.base, r) });
+export {
+  a as Divider
+};

package/dist/es/components/internal/Divider/Divider.scss.js

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

package/dist/es/components/internal/Divider/constants.js

@@ -0,0 +1,6 @@
+const e = {
+  base: "adyen-pe-divider"
+};
+export {
+  e as DIVIDER_CLASS_NAMES
+};

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

@@ -1,75 +1,70 @@
-import l from "../Typography/Typography.js";
-import { TypographyVariant as y } from "../Typography/types.js";
+import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import n from "../Typography/Typography.js";
+import { TypographyVariant as h } from "../Typography/types.js";
 import { useCallback as T } from "../../../external/preact/hooks/dist/hooks.module.js";
-import _ from "../../../core/Context/useCoreContext.js";
+import I from "../../../core/Context/useCoreContext.js";
 import "./ErrorMessageDisplay.scss.js";
-import A from "../../../images/no-results.svg.js";
-import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import a from "../Button/Button.js";
-import { Fragment as m } from "../../../external/preact/dist/preact.module.js";
-const s = {
+import N from "../../../images/no-results.svg.js";
+import w from "classnames";
+import g from "../Button/Button.js";
+import { Fragment as p } from "../../../external/preact/dist/preact.module.js";
+const f = {
   md: 680,
   lg: 1024
-}, R = ({
-  title: g,
-  message: o,
+}, K = ({
+  title: x,
+  message: s,
   imageDesktop: t,
-  imageMobile: n,
-  withImage: x,
-  centered: f,
-  refreshComponent: h,
-  onContactSupport: c,
-  translationValues: i
+  imageMobile: a,
+  withImage: u,
+  centered: v,
+  refreshComponent: l,
+  onContactSupport: m,
+  translationValues: i,
+  absolutePosition: E = !0,
+  outlined: y = !0,
+  renderSecondaryButton: c
 }) => {
-  const {
-    i18n: e,
-    updateCore: u
-  } = _(), v = T((p) => Array.isArray(p) ? p.map((d, E) => E === 0 ? r(m, {
-    children: [e.get(d), i && i[d] && r(m, {
-      children: i[d]
-    })]
-  }) : r(m, {
-    children: [r("br", {}), e.get(d), i && i[d] && r(m, {
-      children: i[d]
-    })]
-  })) : e.get(p), [e, i]);
-  return r("div", {
-    className: `adyen-pe-error-message-display ${f ? "adyen-pe-error-message-display--centered" : ""}`,
-    children: [(t || n || x) && r("div", {
-      className: "adyen-pe-error-message-display__illustration",
-      children: r("picture", {
-        children: [r("source", {
-          type: "image/svg+xml",
-          media: `(min-width: ${s.md}px)`,
-          srcSet: t
-        }), r("source", {
-          type: "image/svg+xml",
-          media: `(max-width: ${s.md}px)`,
-          srcSet: n
-        }), r("img", {
-          srcSet: t ?? A,
-          alt: e.get("thereWasAnUnexpectedError")
-        })]
-      })
-    }), r(l, {
-      variant: y.TITLE,
-      children: e.get(g)
-    }), o && r(l, {
-      variant: y.BODY,
-      children: v(o)
-    }), (c || h) && r("div", {
-      className: "adyen-pe-error-message-display__button",
-      children: [c && r(a, {
-        onClick: c,
-        children: e.get("reachOutToSupport")
-      }), !c && h && r(a, {
-        onClick: u,
-        children: e.get("refresh")
-      })]
-    })]
-  });
+  const { i18n: e, updateCore: _ } = I(), b = T(
+    (o) => Array.isArray(o) ? o.map(
+      (d, A) => A === 0 ? /* @__PURE__ */ r(p, { children: [
+        e.get(d),
+        i && i[d] && /* @__PURE__ */ r(p, { children: i[d] })
+      ] }) : /* @__PURE__ */ r(p, { children: [
+        /* @__PURE__ */ r("br", {}),
+        e.get(d),
+        i && i[d] && /* @__PURE__ */ r(p, { children: i[d] })
+      ] })
+    ) : e.get(o),
+    [e, i]
+  );
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: w(["adyen-pe-error-message-display"], {
+        "adyen-pe-error-message-display--absolute-position": E,
+        "adyen-pe-error-message-display--outlined": y,
+        "adyen-pe-error-message-display--with-background": !y,
+        "adyen-pe-error-message-display--centered": v
+      }),
+      children: [
+        (t || a || u) && /* @__PURE__ */ r("div", { className: "adyen-pe-error-message-display__illustration", children: /* @__PURE__ */ r("picture", { children: [
+          /* @__PURE__ */ r("source", { type: "image/svg+xml", media: `(min-width: ${f.md}px)`, srcSet: t }),
+          /* @__PURE__ */ r("source", { type: "image/svg+xml", media: `(max-width: ${f.md}px)`, srcSet: a }),
+          /* @__PURE__ */ r("img", { srcSet: t ?? N, alt: e.get("thereWasAnUnexpectedError") })
+        ] }) }),
+        /* @__PURE__ */ r(n, { variant: h.TITLE, children: e.get(x) }),
+        s && /* @__PURE__ */ r(n, { variant: h.BODY, children: b(s) }),
+        (m || l || c) && /* @__PURE__ */ r("div", { className: "adyen-pe-error-message-display__button", children: [
+          c && c(),
+          m && /* @__PURE__ */ r(g, { onClick: m, children: e.get("contactSupport") }),
+          !m && l && /* @__PURE__ */ r(g, { onClick: _, children: e.get("refresh") })
+        ] })
+      ]
+    }
+  );
 };
 export {
-  R as ErrorMessageDisplay,
-  s as IMAGE_BREAKPOINT_SIZES
+  K as ErrorMessageDisplay,
+  f as IMAGE_BREAKPOINT_SIZES
 };

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

@@ -1,36 +1,29 @@
+import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import s from "classnames";
 import { useState as v, useCallback as h, useRef as l, useEffect as I } from "../../../external/preact/hooks/dist/hooks.module.js";
 import "./ExpandableCard.scss.js";
 import b from "../SVGIcons/ChevronUp.js";
 import B from "../SVGIcons/ChevronDown.js";
-import { BASE_CLASS as D, CONTAINER_CLASS as p, CONTAINER_BUTTON_CLASS as x, CONTAINER_FILLED_CLASS as m, CONTAINER_OVERLAY_ID as C, CONTENT_CLASS as N, CONTENT_EXPANDABLE_CLASS as L, CHEVRON_CLASS as R, CONTAINER_OVERLAY_CLASS as g, CONTAINER_HIDDEN_CLASS as k } from "./constants.js";
+import { BASE_CLASS as D, CONTAINER_CLASS as m, CONTAINER_BUTTON_CLASS as L, CONTAINER_FILLED_CLASS as p, CONTAINER_OVERLAY_ID as C, CONTENT_CLASS as N, CONTENT_EXPANDABLE_CLASS as x, CHEVRON_CLASS as R, CONTAINER_OVERLAY_CLASS as g, CONTAINER_HIDDEN_CLASS as k } from "./constants.js";
 import y from "../../../core/Context/useCoreContext.js";
 import { useClickOutside as F } from "../../../hooks/element/useClickOutside.js";
-import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { Fragment as V } from "../../../external/preact/dist/preact.module.js";
 import T from "../BaseButton/BaseButton.js";
-const w = ({
-  renderHeader: t,
-  children: u,
-  filled: o,
-  fullWidth: f,
-  ...i
-}) => {
-  const {
-    i18n: A
-  } = y(), [a, S] = v(!1), r = h(() => S((n) => !n), [S]), E = l(null), c = l(!1), O = l(a), d = F(void 0, h(() => {
-    a && (r(), c.current = !0);
-  }, [a, r]));
+const U = ({ renderHeader: t, children: u, filled: o, fullWidth: f, ...i }) => {
+  const { i18n: A } = y(), [a, S] = v(!1), r = h(() => S((n) => !n), [S]), E = l(null), c = l(!1), O = l(a), d = F(
+    void 0,
+    h(() => {
+      a && (r(), c.current = !0);
+    }, [a, r])
+  );
   return I(() => {
     var n, _;
     a ? (n = d.current) == null || n.focus() : (O.current !== a && !c.current && ((_ = E.current) == null || _.focus()), c.current = !1), O.current = a;
-  }, [a, d]), e("div", {
-    className: D,
-    children: u ? e(V, {
-      children: [e(T, {
-        className: s(p, x, {
-          [m]: o
-        }),
+  }, [a, d]), /* @__PURE__ */ e("div", { className: D, children: u ? /* @__PURE__ */ e(V, { children: [
+    /* @__PURE__ */ e(
+      T,
+      {
+        className: s(m, L, { [p]: o }),
         disabled: a,
         fullWidth: f,
         "aria-controls": C,
@@ -40,22 +33,19 @@ const w = ({
         ref: E,
         "data-testid": "expand-button",
         ...i,
-        children: [e("span", {
-          className: "adyen-pe-sr-only",
-          children: A.get("expandableCard.expand")
-        }), e("div", {
-          className: s(N, L),
-          children: t
-        }), e("div", {
-          className: R,
-          children: e(B, {
-            role: "presentation"
-          })
-        })]
-      }), e(T, {
+        children: [
+          /* @__PURE__ */ e("span", { className: "adyen-pe-sr-only", children: A.get("expandableCard.expand") }),
+          /* @__PURE__ */ e("div", { className: s(N, x), children: t }),
+          /* @__PURE__ */ e("div", { className: R, children: /* @__PURE__ */ e(B, { role: "presentation" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      T,
+      {
         id: C,
-        className: s(p, x, g, {
-          [m]: o,
+        className: s(m, L, g, {
+          [p]: o,
           [k]: !a
         }),
         disabled: !a,
@@ -67,33 +57,18 @@ const w = ({
         ref: d,
         "data-testid": "collapse-button",
         ...i,
-        children: [e("span", {
-          className: "adyen-pe-sr-only",
-          children: A.get("expandableCard.collapse")
-        }), e("div", {
-          className: s(N, L),
-          children: [t, e("div", {
-            children: u
-          })]
-        }), e("div", {
-          className: R,
-          children: e(b, {
-            role: "presentation"
-          })
-        })]
-      })]
-    }) : e("div", {
-      className: s(p, {
-        [m]: o
-      }),
-      ...i,
-      children: e("div", {
-        className: N,
-        children: t
-      })
-    })
-  });
-}, K = w;
+        children: [
+          /* @__PURE__ */ e("span", { className: "adyen-pe-sr-only", children: A.get("expandableCard.collapse") }),
+          /* @__PURE__ */ e("div", { className: s(N, x), children: [
+            t,
+            /* @__PURE__ */ e("div", { children: u })
+          ] }),
+          /* @__PURE__ */ e("div", { className: R, children: /* @__PURE__ */ e(b, { role: "presentation" }) })
+        ]
+      }
+    )
+  ] }) : /* @__PURE__ */ e("div", { className: s(m, { [p]: o }), ...i, children: /* @__PURE__ */ e("div", { className: N, children: t }) }) });
+}, K = U;
 export {
   K as default
 };

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

@@ -0,0 +1,34 @@
+import { jsx as o } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useState as d, useCallback as l } from "../../../external/preact/hooks/dist/hooks.module.js";
+import "./ExpandableContainer.scss.js";
+import p from "../../../core/Context/useCoreContext.js";
+import { EXPANDABLE_CONTAINER_CLASS_NAMES as t } from "./constants.js";
+import u from "classnames";
+import f from "../Button/Button.js";
+import { ButtonVariant as x } from "../Button/types.js";
+import { uuid as C } from "../../../utils/random/uuid.js";
+import I from "../Icon/Icon.js";
+const R = ({ className: n, children: r }) => {
+  const { i18n: i } = p(), [e, s] = d(!1), a = C(), c = l(() => {
+    s((m) => !m);
+  }, []);
+  return /* @__PURE__ */ o("div", { className: u(t.base, n), "data-testid": "expandable-container", children: [
+    e && /* @__PURE__ */ o("div", { id: a, className: t.content, children: r }),
+    /* @__PURE__ */ o(
+      f,
+      {
+        variant: x.TERTIARY_WITH_BACKGROUND,
+        condensed: !0,
+        fullWidth: !0,
+        onClick: c,
+        "aria-controls": a,
+        "aria-expanded": e,
+        "aria-label": i.get(e ? "expandableCard.collapse" : "expandableCard.expand"),
+        children: /* @__PURE__ */ o(I, { name: e ? "chevron-up" : "chevron-down", className: t.toggleButtonIcon })
+      }
+    )
+  ] });
+};
+export {
+  R as ExpandableContainer
+};

package/dist/es/components/internal/ExpandableContainer/ExpandableContainer.scss.js

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

package/dist/es/components/internal/ExpandableContainer/constants.js

@@ -0,0 +1,8 @@
+const e = {
+  base: "adyen-pe-expandable-container",
+  content: "adyen-pe-expandable-container__content",
+  toggleButtonIcon: "adyen-pe-expandable-container__toggle-button-icon"
+};
+export {
+  e as EXPANDABLE_CONTAINER_CLASS_NAMES
+};