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

package/dist/es/components/internal/SVGIcons/ChevronUp.js

@@ -1,25 +1,17 @@
 import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { fixedForwardRef as i } from "../../../utils/preact/fixedForwardRef.js";
-const n = i(({
-  title: l,
-  ...o
-}, r) => e("svg", {
-  ref: r,
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  viewBox: "0 0 16 16",
-  fill: "none",
-  ...o,
-  children: [l && e("title", {
-    children: l
-  }), e("path", {
-    fill: "currentColor",
-    fillRule: "evenodd",
-    d: "M13.53 11.03c-.3.3-.77.3-1.06 0L8 6.56l-4.47 4.47a.75.75 0 1 1-1.06-1.06l5-5c.3-.3.77-.3 1.06 0l5 5c.3.3.3.77 0 1.06Z",
-    clipRule: "evenodd"
-  })]
-})), c = n;
+const n = i(({ title: l, ...o }, r) => /* @__PURE__ */ e("svg", { ref: r, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", ...o, children: [
+  l && /* @__PURE__ */ e("title", { children: l }),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M13.53 11.03c-.3.3-.77.3-1.06 0L8 6.56l-4.47 4.47a.75.75 0 1 1-1.06-1.06l5-5c.3-.3.77-.3 1.06 0l5 5c.3.3.3.77 0 1.06Z",
+      clipRule: "evenodd"
+    }
+  )
+] })), c = n;
 export {
   c as default
 };

package/dist/es/components/internal/SVGIcons/CloseCircle.js

@@ -0,0 +1,16 @@
+import { jsx as l } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { fixedForwardRef as o } from "../../../utils/preact/fixedForwardRef.js";
+const t = o(({ title: i, ...r }, e) => /* @__PURE__ */ l("svg", { ref: e, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", ...r, children: [
+  i && /* @__PURE__ */ l("title", { children: i }),
+  /* @__PURE__ */ l("g", { "clip-path": "url(#a)", children: /* @__PURE__ */ l(
+    "path",
+    {
+      d: "M.25 8a7.75 7.75 0 1 1 15.5 0A7.75 7.75 0 0 1 .25 8ZM6 4.94 4.94 6l2 2-2 2L6 11.06l2-2 2 2L11.06 10l-2-2 2-2L10 4.94l-2 2-2-2Z",
+      fill: "currentColor"
+    }
+  ) }),
+  /* @__PURE__ */ l("defs", { children: /* @__PURE__ */ l("clipPath", { id: "a", children: /* @__PURE__ */ l("path", { fill: "#fff", d: "M0 0h16v16H0z" }) }) })
+] })), c = t;
+export {
+  c as default
+};

package/dist/es/components/internal/SVGIcons/Download.js

@@ -1,21 +1,20 @@
 import { jsx as o } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-const t = ({
-  ...l
-}) => o("svg", {
-  width: "15",
-  height: "14",
-  viewBox: "0 0 15 14",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
-  ...l,
-  children: [o("path", {
-    d: "M8.25 0.25V8.18957L10.5001 5.93945L11.5608 7.00011L7.50011 11.0608L3.43945 7.00011L4.50011 5.93945L6.75 8.18934V0.25H8.25Z",
-    fill: "currentColor"
-  }), o("path", {
-    d: "M2.25 11.5V9.25H0.75V11.5C0.75 12.0967 0.987053 12.669 1.40901 13.091C1.83097 13.5129 2.40326 13.75 3 13.75H12C12.5967 13.75 13.169 13.5129 13.591 13.091C14.0129 12.669 14.25 12.0967 14.25 11.5V9.25H12.75V11.5C12.75 11.6989 12.671 11.8897 12.5303 12.0303C12.3897 12.171 12.1989 12.25 12 12.25H3C2.80109 12.25 2.61032 12.171 2.46967 12.0303C2.32902 11.8897 2.25 11.6989 2.25 11.5Z",
-    fill: "currentColor"
-  })]
-}), n = t;
+const t = ({ ...l }) => /* @__PURE__ */ o("svg", { width: "15", height: "14", viewBox: "0 0 15 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l, children: [
+  /* @__PURE__ */ o(
+    "path",
+    {
+      d: "M8.25 0.25V8.18957L10.5001 5.93945L11.5608 7.00011L7.50011 11.0608L3.43945 7.00011L4.50011 5.93945L6.75 8.18934V0.25H8.25Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ o(
+    "path",
+    {
+      d: "M2.25 11.5V9.25H0.75V11.5C0.75 12.0967 0.987053 12.669 1.40901 13.091C1.83097 13.5129 2.40326 13.75 3 13.75H12C12.5967 13.75 13.169 13.5129 13.591 13.091C14.0129 12.669 14.25 12.0967 14.25 11.5V9.25H12.75V11.5C12.75 11.6989 12.671 11.8897 12.5303 12.0303C12.3897 12.171 12.1989 12.25 12 12.25H3C2.80109 12.25 2.61032 12.171 2.46967 12.0303C2.32902 11.8897 2.25 11.6989 2.25 11.5Z",
+      fill: "currentColor"
+    }
+  )
+] }), n = t;
 export {
   n as default
 };

package/dist/es/components/internal/SVGIcons/UncheckedBox.js

@@ -1,23 +1,9 @@
 import { jsx as o } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { fixedForwardRef as c } from "../../../utils/preact/fixedForwardRef.js";
-const h = c(({
-  title: e,
-  ...r
-}, t) => o("svg", {
-  ...r,
-  ref: t,
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  viewBox: "0 0 16 16",
-  fill: "none",
-  children: [e && o("title", {
-    children: e
-  }), o("path", {
-    stroke: "currentColor",
-    d: "M.5 4C.5 2 2.1.5 4 .5h8c2 0 3.5 1.6 3.5 3.5v8c0 2-1.6 3.5-3.5 3.5H4C2 15.5.5 13.9.5 12V4Z"
-  })]
-})), i = h;
+const h = c(({ title: e, ...r }, t) => /* @__PURE__ */ o("svg", { ...r, ref: t, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
+  e && /* @__PURE__ */ o("title", { children: e }),
+  /* @__PURE__ */ o("path", { stroke: "currentColor", d: "M.5 4C.5 2 2.1.5 4 .5h8c2 0 3.5 1.6 3.5 3.5v8c0 2-1.6 3.5-3.5 3.5H4C2 15.5.5 13.9.5 12V4Z" })
+] })), i = h;
 export {
   i as default
 };

package/dist/es/components/internal/SVGIcons/Warning.js

@@ -1,23 +1,21 @@
 import { jsx as C } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-const r = ({
-  ...o
-}) => C("svg", {
-  width: "16",
-  height: "16",
-  viewBox: "0 0 16 16",
-  fill: "currentColor",
-  xmlns: "http://www.w3.org/2000/svg",
-  children: [C("path", {
-    d: "M8.75 4.58008H7.25V9.08008H8.75V4.58008Z",
-    fill: "currentColor"
-  }), C("path", {
-    d: "M8.71 10.6201C8.57 10.4801 8.39 10.3801 8.2 10.3501C8.01 10.3101 7.8 10.3301 7.62 10.4101C7.44 10.4901 7.28 10.6101 7.17 10.7801C7.06 10.9401 7 11.1401 7 11.3401C7 11.6101 7.11 11.8601 7.29 12.0501C7.48 12.2401 7.73 12.3401 8 12.3401C8.2 12.3401 8.39 12.2801 8.56 12.1701C8.72 12.0601 8.85 11.9001 8.93 11.7201C9.01 11.5401 9.03 11.3401 8.99 11.1401C8.95 10.9501 8.86 10.7701 8.72 10.6301L8.71 10.6201Z",
-    fill: "currentColor"
-  }), C("path", {
-    d: "M9.9501 2.21008L15.3501 11.5301V11.5201C15.5501 11.8601 15.6501 12.2501 15.6501 12.6501C15.6501 13.0501 15.5501 13.4401 15.3501 13.7801C15.1501 14.1201 14.8601 14.4001 14.5201 14.6001C14.1801 14.8001 13.7901 14.9001 13.4001 14.9001H2.6001C2.2001 14.9001 1.8101 14.8001 1.4701 14.6001C1.1301 14.4101 0.850097 14.1201 0.650097 13.7801C0.450097 13.4501 0.350098 13.0601 0.350098 12.6601C0.350098 12.2601 0.450097 11.8701 0.650097 11.5301L6.0601 2.20008C6.2501 1.86008 6.5401 1.58008 6.8801 1.38008C7.5601 0.980078 8.4401 0.980078 9.1301 1.38008C9.4701 1.58008 9.7501 1.87008 9.9501 2.21008ZM13.7701 13.3001C13.8901 13.2401 13.9801 13.1401 14.0501 13.0301L14.0601 13.0401C14.1301 12.9201 14.1601 12.7901 14.1601 12.6601C14.1601 12.5301 14.1301 12.4001 14.0601 12.2901L8.6601 2.96008C8.5901 2.84008 8.5001 2.74008 8.3801 2.68008C8.2601 2.62008 8.1401 2.58008 8.0001 2.58008C7.8601 2.58008 7.7301 2.61008 7.6201 2.68008C7.5101 2.74008 7.4201 2.84008 7.3501 2.95008L1.9501 12.2901C1.8801 12.4001 1.8501 12.5301 1.8501 12.6601C1.8501 12.7901 1.8801 12.9201 1.9501 13.0301C2.0101 13.1401 2.1101 13.2401 2.2201 13.3001C2.3401 13.3601 2.4701 13.4001 2.6001 13.4001H13.3901C13.5301 13.4001 13.6601 13.3701 13.7701 13.3001Z",
-    fill: "currentColor"
-  })]
-}), l = r;
+const r = ({ ...o }) => /* @__PURE__ */ C("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ C("path", { d: "M8.75 4.58008H7.25V9.08008H8.75V4.58008Z", fill: "currentColor" }),
+  /* @__PURE__ */ C(
+    "path",
+    {
+      d: "M8.71 10.6201C8.57 10.4801 8.39 10.3801 8.2 10.3501C8.01 10.3101 7.8 10.3301 7.62 10.4101C7.44 10.4901 7.28 10.6101 7.17 10.7801C7.06 10.9401 7 11.1401 7 11.3401C7 11.6101 7.11 11.8601 7.29 12.0501C7.48 12.2401 7.73 12.3401 8 12.3401C8.2 12.3401 8.39 12.2801 8.56 12.1701C8.72 12.0601 8.85 11.9001 8.93 11.7201C9.01 11.5401 9.03 11.3401 8.99 11.1401C8.95 10.9501 8.86 10.7701 8.72 10.6301L8.71 10.6201Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ C(
+    "path",
+    {
+      d: "M9.9501 2.21008L15.3501 11.5301V11.5201C15.5501 11.8601 15.6501 12.2501 15.6501 12.6501C15.6501 13.0501 15.5501 13.4401 15.3501 13.7801C15.1501 14.1201 14.8601 14.4001 14.5201 14.6001C14.1801 14.8001 13.7901 14.9001 13.4001 14.9001H2.6001C2.2001 14.9001 1.8101 14.8001 1.4701 14.6001C1.1301 14.4101 0.850097 14.1201 0.650097 13.7801C0.450097 13.4501 0.350098 13.0601 0.350098 12.6601C0.350098 12.2601 0.450097 11.8701 0.650097 11.5301L6.0601 2.20008C6.2501 1.86008 6.5401 1.58008 6.8801 1.38008C7.5601 0.980078 8.4401 0.980078 9.1301 1.38008C9.4701 1.58008 9.7501 1.87008 9.9501 2.21008ZM13.7701 13.3001C13.8901 13.2401 13.9801 13.1401 14.0501 13.0301L14.0601 13.0401C14.1301 12.9201 14.1601 12.7901 14.1601 12.6601C14.1601 12.5301 14.1301 12.4001 14.0601 12.2901L8.6601 2.96008C8.5901 2.84008 8.5001 2.74008 8.3801 2.68008C8.2601 2.62008 8.1401 2.58008 8.0001 2.58008C7.8601 2.58008 7.7301 2.61008 7.6201 2.68008C7.5101 2.74008 7.4201 2.84008 7.3501 2.95008L1.9501 12.2901C1.8801 12.4001 1.8501 12.5301 1.8501 12.6601C1.8501 12.7901 1.8801 12.9201 1.9501 13.0301C2.0101 13.1401 2.1101 13.2401 2.2201 13.3001C2.3401 13.3601 2.4701 13.4001 2.6001 13.4001H13.3901C13.5301 13.4001 13.6601 13.3701 13.7701 13.3001Z",
+      fill: "currentColor"
+    }
+  )
+] }), l = r;
 export {
   l as default
 };

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

@@ -0,0 +1,31 @@
+import { jsx as u } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as n } from "../../../external/preact/hooks/dist/hooks.module.js";
+import "./Slider.scss.js";
+import { calculateProgress as f } from "./calculateProgress.js";
+import l from "classnames";
+function j(r, t, o) {
+  const s = t / 2;
+  let e = Math.round(s / o) * o;
+  return e < r ? e = r : e > t && (e = t), e;
+}
+const y = ({ min: r = 0, max: t = 100, step: o = 1, value: s = r, onChange: e, className: d, ...i }) => {
+  const c = n(() => f(s, r, t, o), [s, r, t, o]);
+  return /* @__PURE__ */ u(
+    "input",
+    {
+      type: "range",
+      className: l("adyen-pe-slider", d),
+      min: r,
+      max: t,
+      step: o,
+      value: s,
+      onChange: e,
+      style: { backgroundSize: `${c}% 100%` },
+      ...i
+    }
+  );
+};
+export {
+  j as calculateSliderAdjustedMidValue,
+  y as default
+};

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

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

package/dist/es/components/internal/Slider/calculateProgress.js

@@ -0,0 +1,13 @@
+import { clamp as p } from "../../../utils/value/number.js";
+function f(c, e, r, o) {
+  if (e >= r)
+    return 0;
+  const t = o > 0 ? o : 1;
+  if (t > r - e)
+    return 0;
+  const u = (Math.round((c - e) / t) * t + e - e) * 100 / (r - e);
+  return Number(p(0, u, 100).toFixed(2));
+}
+export {
+  f as calculateProgress
+};

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

@@ -1,14 +1,6 @@
-import "./Spinner.scss.js";
 import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-const r = ({
-  inline: n = !1,
-  size: p = "large"
-}) => e("div", {
-  className: `adyen-pe-spinner__wrapper ${n ? "adyen-pe-spinner__wrapper--inline" : ""}`,
-  children: e("div", {
-    className: `adyen-pe-spinner adyen-pe-spinner--${p}`
-  })
-}), i = r;
+import "./Spinner.scss.js";
+const r = ({ inline: n = !1, size: p = "large" }) => /* @__PURE__ */ e("div", { className: `adyen-pe-spinner__wrapper ${n ? "adyen-pe-spinner__wrapper--inline" : ""}`, children: /* @__PURE__ */ e("div", { className: `adyen-pe-spinner adyen-pe-spinner--${p}` }) }), i = r;
 export {
   i as default
 };

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

@@ -1,49 +1,38 @@
-import o from "classnames";
-import { useMemo as u } from "../../../external/preact/hooks/dist/hooks.module.js";
-import A from "../../../core/Context/useCoreContext.js";
-import { TypographyVariant as S } from "../Typography/types.js";
-import i from "../Typography/Typography.js";
-import { SL_GRID_CLASS as m, SL_BASE_CLASS as C, SL_ITEM_CLASS as f, SL_ITEM_WITH_HIGHLIGHT_CLASS as T, SL_LABEL_CLASS as h, SL_CONTENT_CLASS as E } from "./constants.js";
-import "./StructuredList.scss.js";
-import { useStructuredListItems as I } from "./useStructuredListItem.js";
 import { jsx as t } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-const v = "6-6";
-function b({
-  items: l,
+import a from "classnames";
+import { useMemo as C } from "../../../external/preact/hooks/dist/hooks.module.js";
+import f from "../../../core/Context/useCoreContext.js";
+import { TypographyVariant as l } from "../Typography/types.js";
+import m from "../Typography/Typography.js";
+import { SL_GRID_CLASS as _, SL_BASE_CLASS as T, SL_ITEM_CLASS as h, SL_ITEM_WITH_HIGHLIGHT_CLASS as E, SL_LABEL_CLASS as I, SL_CONTENT_CLASS as v } from "./constants.js";
+import "./StructuredList.scss.js";
+import { useStructuredListItems as y } from "./useStructuredListItem.js";
+const N = "6-6";
+function G({
+  items: e,
   highlightable: c,
-  renderValue: e,
+  renderValue: L,
   renderLabel: s,
-  layout: L = v,
-  grid: _ = !0
+  layout: S = N,
+  grid: p = !0,
+  classNames: n
 }) {
-  const [n, p] = u(() => L.split("-").map((r) => `${m}--width-${r}-of-12`), [L]), d = I(l), {
-    i18n: a
-  } = A();
-  return t("div", {
-    "aria-label": a.get("structuredList"),
-    className: C,
-    children: d.map((r) => t("dl", {
-      className: o(f, {
-        [T]: c,
-        [m]: _
+  const [u, d] = C(() => S.split("-").map((r) => `${_}--width-${r}-of-12`), [S]), A = y(e), { i18n: o } = f();
+  return /* @__PURE__ */ t("div", { "aria-label": o.get("structuredList"), className: a(T, n), children: A.map((r, i) => /* @__PURE__ */ t(
+    "dl",
+    {
+      className: a(h, {
+        [E]: c,
+        [_]: p
       }),
-      children: [t("dt", {
-        className: o(h, n),
-        children: s ? s(r.label) : t(i, {
-          variant: S.BODY,
-          children: r.label
-        })
-      }), t("dd", {
-        "aria-label": `${a.get(r.key)} ${a.get("value")}`,
-        className: o(E, p),
-        children: e ? e(r.value) : t(i, {
-          variant: S.BODY,
-          children: r.value
-        })
-      })]
-    }, r.id))
-  });
+      children: [
+        /* @__PURE__ */ t("dt", { className: a(I, u), children: s ? s(r.label, e[i].key) : /* @__PURE__ */ t(m, { variant: l.BODY, children: r.label }) }),
+        /* @__PURE__ */ t("dd", { "aria-label": `${o.get(r.key)} ${o.get("value")}`, className: a(v, d), children: L ? L(r.value, r.key) : /* @__PURE__ */ t(m, { variant: l.BODY, children: r.value }) })
+      ]
+    },
+    `${i}_${r.id || "0"}`
+  )) });
 }
 export {
-  b as default
+  G as default
 };

package/dist/es/components/internal/StructuredList/useStructuredListItem.js

@@ -2,9 +2,7 @@ import { useMemo as o } from "../../../external/preact/hooks/dist/hooks.module.j
 import u from "../../../core/Context/useCoreContext.js";
 import { uuid as n } from "../../../utils/random/uuid.js";
 const p = (r) => {
-  const {
-    i18n: t
-  } = u();
+  const { i18n: t } = u();
   return o(() => r.map((e) => ({
     key: e.key,
     value: e.value,

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

@@ -0,0 +1,70 @@
+import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useState as u, useRef as y, useCallback as h, useMemo as T } from "../../../external/preact/hooks/dist/hooks.module.js";
+import "./Tabs.scss.js";
+import _ from "../../../core/Context/useCoreContext.js";
+import g from "../Typography/Typography.js";
+import { TypographyVariant as I, TypographyElement as N } from "../Typography/types.js";
+import { InteractionKeyCode as r } from "../../types.js";
+function O(l) {
+  const s = l.tabs, { i18n: d } = _(), c = l.defaultActiveTab ? l.tabs.findIndex((e) => e.id === l.defaultActiveTab) : 0, [t, b] = u(c === -1 ? 0 : c), m = y({}), o = h((e) => {
+    const a = m.current[e];
+    a == null || a.focus();
+  }, []), p = T(() => {
+    const e = s.length, a = {
+      [r.ARROW_RIGHT]: () => o((t + 1) % e),
+      [r.ARROW_LEFT]: () => o((t - 1 + e) % e),
+      [r.HOME]: () => o(0),
+      [r.END]: () => o(e - 1)
+    };
+    return (i) => {
+      var f;
+      a[i.key] && (i.preventDefault(), (f = a[i.key]) == null || f.call(a));
+    };
+  }, [s.length, t, o]);
+  return /* @__PURE__ */ n("section", { "aria-label": d.get("tabs"), children: [
+    /* @__PURE__ */ n("div", { className: "adyen-fp-tabs", role: "tablist", "aria-orientation": "horizontal", children: s.map((e, a) => /* @__PURE__ */ n(
+      "button",
+      {
+        id: `tab-id-${e.id}`,
+        name: e.id,
+        className: "adyen-fp-tabs__tab",
+        role: "tab",
+        "aria-controls": `panel-id-${e.id}`,
+        "aria-selected": t === a,
+        ref: (i) => m.current[a] = i,
+        onKeyDown: p,
+        onClick: a === t ? void 0 : () => b(a),
+        onFocus: () => b(a),
+        tabIndex: t === a ? 0 : -1,
+        disabled: e.disabled,
+        children: /* @__PURE__ */ n(
+          g,
+          {
+            variant: I.BODY,
+            el: N.SPAN,
+            stronger: !0,
+            className: "adyen-fp-tabs__tab-content-tab-label",
+            children: d.get(e.label)
+          }
+        )
+      },
+      `tab-${e.id}`
+    )) }),
+    /* @__PURE__ */ n("div", { className: "adyen-fp-tabpanel__wrapper", children: s.map((e, a) => /* @__PURE__ */ n(
+      "section",
+      {
+        name: e.id,
+        className: "adyen-fp-tabpanel__content",
+        id: `panel-id-${e.id}`,
+        hidden: t !== a,
+        role: "tabpanel",
+        "aria-labelledby": `tab-id-${e.id}`,
+        children: e.content
+      },
+      `tabpanel-${e.id}`
+    )) })
+  ] });
+}
+export {
+  O as default
+};

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

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

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

@@ -1,21 +1,26 @@
-import m from "classnames";
+import { jsx as a } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import g from "classnames";
 import { TagVariant as e } from "./types.js";
 import "./Tag.scss.js";
 import { memo as o } from "../../../external/preact/compat/dist/compat.module.js";
-import { jsx as p } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-const y = o(({
-  variant: r = e.DEFAULT,
-  label: a
-}) => p("div", {
-  className: m("adyen-pe-tag", {
-    "adyen-pe-tag--success": r === e.SUCCESS,
-    "adyen-pe-tag--default": r === e.DEFAULT,
-    "adyen-pe-tag--warning": r === e.WARNING,
-    "adyen-pe-tag--error": r === e.ERROR,
-    "adyen-pe-tag--primary": r === e.WHITE
-  }),
-  children: a
-}));
+const s = o(({ variant: p = e.DEFAULT, label: t }) => /* @__PURE__ */ a(
+  "div",
+  {
+    className: g("adyen-pe-tag", {
+      // [TODO]: These Bento tag variants definitions are outdated
+      "adyen-pe-tag--success": p === e.SUCCESS,
+      "adyen-pe-tag--default": p === e.DEFAULT,
+      "adyen-pe-tag--warning": p === e.WARNING,
+      "adyen-pe-tag--error": p === e.ERROR,
+      "adyen-pe-tag--primary": p === e.WHITE,
+      "adyen-pe-tag--light": p === e.LIGHT,
+      "adyen-pe-tag--light-with-outline": p === e.LIGHT_WITH_OUTLINE,
+      // Adopted from the latest Bento tag variants spec
+      "adyen-pe-tag--blue": p === e.BLUE
+    }),
+    children: t
+  }
+));
 export {
-  y as Tag
+  s as Tag
 };

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

@@ -1,4 +1,4 @@
-var r = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.WARNING = "warning", e.ERROR = "error", e.SUCCESS = "success", e.WHITE = "white", e))(r || {});
+var E = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.WARNING = "warning", e.ERROR = "error", e.SUCCESS = "success", e.WHITE = "white", e.LIGHT = "light", e.LIGHT_WITH_OUTLINE = "light-with-outline", e.BLUE = "blue", e))(E || {});
 export {
-  r as TagVariant
+  E as TagVariant
 };

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

@@ -1,58 +1,41 @@
-import { useResponsiveViewport as v, mediaQueries as T } from "../../hooks/useResponsiveViewport.js";
-import b from "../Popover/Popover.js";
+import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useResponsiveViewport as b, mediaQueries as v } from "../../../hooks/useResponsiveViewport.js";
+import T from "../Popover/Popover.js";
 import { PopoverContainerVariant as V } from "../Popover/types.js";
 import { useTooltipListeners as x } from "./useTooltipListeners.js";
 import { TypographyVariant as I } from "../Typography/types.js";
 import N from "../Typography/Typography.js";
 import P from "../../../hooks/element/useUniqueIdentifier.js";
 import u from "classnames";
-import { Fragment as p, cloneElement as w } from "../../../external/preact/dist/preact.module.js";
+import { Fragment as p, cloneElement as E } from "../../../external/preact/dist/preact.module.js";
 import "./Tooltip.scss.js";
-import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-const O = (t) => typeof t == "string", Q = ({
-  content: t,
-  children: o,
-  triggerRef: g,
-  showTooltip: a,
-  position: y,
-  isContainerHovered: s = !1
-}) => {
+const O = (t) => typeof t == "string", S = ({ content: t, children: o, triggerRef: g, showTooltip: a, position: y, isContainerHovered: s = !1 }) => {
   var i, f, n;
-  const e = P(), _ = v(T.down.sm), {
-    isVisible: m,
-    listeners: l
-  } = x();
-  return _ ? r(p, {
-    children: o
-  }) : r(p, {
-    children: [o ? w(o, {
+  const e = P(), _ = b(v.down.sm), { isVisible: m, listeners: l } = x();
+  return _ ? /* @__PURE__ */ r(p, { children: o }) : /* @__PURE__ */ r(p, { children: [
+    o ? E(o, {
       ...o == null ? void 0 : o.props,
       role: "button",
       tabIndex: -1,
       ref: e,
       className: (i = o == null ? void 0 : o.props) != null && i.className ? u(`${(f = o == null ? void 0 : o.props) == null ? void 0 : f.className} adyen-pe__tooltip-target`, {
         " adyen-pe__tooltip-target--hovered": s
-      }) : u("adyen-pe__tooltip-target", {
-        "adyen-pe__tooltip-target--hovered": s
-      }),
+      }) : u("adyen-pe__tooltip-target", { "adyen-pe__tooltip-target--hovered": s }),
       ...l,
       "aria-describedby": `tooltip-${(n = e.current) == null ? void 0 : n.id}`
-    }) : null, (m || a) && r(b, {
-      variant: V.TOOLTIP,
-      targetElement: g ?? e,
-      position: y,
-      open: m || a,
-      children: r(p, {
-        children: t && O(t) ? r(N, {
-          variant: I.CAPTION,
-          children: t
-        }) : {
-          content: t
-        }
-      })
-    })]
-  });
+    }) : null,
+    (m || a) && /* @__PURE__ */ r(
+      T,
+      {
+        variant: V.TOOLTIP,
+        targetElement: g ?? e,
+        position: y,
+        open: m || a,
+        children: /* @__PURE__ */ r(p, { children: t && O(t) ? /* @__PURE__ */ r(N, { variant: I.CAPTION, children: t }) : { content: t } })
+      }
+    )
+  ] });
 };
 export {
-  Q as Tooltip
+  S as Tooltip
 };

package/dist/es/components/internal/Tooltip/useTooltipListeners.js

@@ -1,14 +1,17 @@
 import { useCallback as s } from "../../../external/preact/hooks/dist/hooks.module.js";
 import { InteractionKeyCode as c } from "../../types.js";
-import a from "../../../hooks/useBooleanState/useBooleanState.js";
+import a from "../../../hooks/useBooleanState.js";
 const m = () => {
-  const [n, o] = a(), t = s(() => o(!0), [o]), e = s(() => o(!1), [o]), i = s((r) => {
-    switch (r.code) {
-      case c.ESCAPE:
-        e();
-        break;
-    }
-  }, [e]);
+  const [n, o] = a(), t = s(() => o(!0), [o]), e = s(() => o(!1), [o]), i = s(
+    (r) => {
+      switch (r.code) {
+        case c.ESCAPE:
+          e();
+          break;
+      }
+    },
+    [e]
+  );
   return {
     listeners: {
       onfocusoutCapture: e,