@adyen/adyen-platform-experience-web 1.9.0 → 1.10.1

package/dist/es/components/internal/FormWrappers/FormTextInput.js

@@ -0,0 +1,76 @@
+import { jsx as s } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as w, useCallback as d } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { useWizardFormContext as B } from "../../../hooks/form/wizard/WizardFormContext.js";
+import j from "./FormField.js";
+import k from "../FormFields/InputBase.js";
+import { VisibleField as z } from "./VisibleField.js";
+import D from "../../../core/Context/useCoreContext.js";
+import { Controller as R } from "../../../hooks/form/Controller.js";
+function O({
+  className: g,
+  dropdown: f,
+  fieldName: n,
+  isRequired: u,
+  label: v,
+  onDropdownInput: C,
+  onInput: a,
+  supportText: I,
+  type: x,
+  validate: m,
+  min: F,
+  maxLength: h,
+  minLength: e,
+  dropdownPosition: q,
+  hideOptionalLabel: T
+}) {
+  const { control: V, fieldsConfig: l } = B(), { i18n: c } = D(), t = w(() => u ?? l[n]?.required, [l, u]), M = d(
+    (r, o) => {
+      a?.(r), o(r.currentTarget.value);
+    },
+    [a]
+  ), b = d(
+    (r) => {
+      const o = e && r?.length < e;
+      return !r && !t ? { valid: !0 } : o ? { valid: !1, message: c.get("common.errors.minLength", { values: { minLength: e } }) } : m?.(r) ?? { valid: !0 };
+    },
+    [c, t, e, m]
+  );
+  return /* @__PURE__ */ s(z, { name: n, children: /* @__PURE__ */ s(j, { label: v, optional: !t && !T, supportText: I, className: g, children: /* @__PURE__ */ s(
+    R,
+    {
+      name: n,
+      control: V,
+      rules: {
+        validate: b,
+        required: t
+      },
+      render: ({ field: r, fieldState: o }) => {
+        const p = !!o.error && o.isTouched;
+        return /* @__PURE__ */ s(
+          k,
+          {
+            ...r,
+            value: r.value,
+            maxLength: h,
+            minLength: e,
+            name: n,
+            isValid: !o.error,
+            isInvalid: p,
+            errorMessage: o.error?.message,
+            onDropdownInput: (...i) => {
+              C?.(...i), p && r.triggerValidation();
+            },
+            onInput: (i) => M(i, r.onInput),
+            type: x,
+            min: F,
+            dropdown: f,
+            dropdownPosition: q
+          }
+        );
+      }
+    }
+  ) }) });
+}
+export {
+  O as FormTextInput
+};

package/dist/es/components/internal/FormWrappers/VisibleField.js

@@ -0,0 +1,10 @@
+import { jsx as t } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useWizardFormContext as e } from "../../../hooks/form/wizard/WizardFormContext.js";
+import { Fragment as m } from "../../../external/preact/dist/preact.module.js";
+function l({ name: i, children: o }) {
+  const { fieldsConfig: r } = e();
+  return r[i]?.visible ? /* @__PURE__ */ t(m, { children: o }) : null;
+}
+export {
+  l as VisibleField
+};

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

@@ -1,47 +1,47 @@
 import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import o from "classnames";
-import h from "../Typography/Typography.js";
-import A from "../../../core/Context/useCoreContext.js";
-import { useComponentHeadingElement as i, ComponentHeadingType as E } from "../../../hooks/useComponentHeadingElement.js";
-import { TypographyVariant as T, TypographyElement as _ } from "../Typography/types.js";
-import { Divider as L } from "../Divider/Divider.js";
+import p from "classnames";
+import a from "../Typography/Typography.js";
+import S from "../../../core/Context/useCoreContext.js";
+import { useComponentHeadingElement as c, ComponentHeadingType as l } from "../../../hooks/useComponentHeadingElement.js";
+import { TypographyVariant as h, TypographyElement as s } from "../Typography/types.js";
+import { Divider as I } from "../Divider/Divider.js";
 /* empty css            */
-const N = "adyen-pe-header", V = ({
-  baseClassName: m = N,
-  forwardedToRoot: d = !0,
-  children: p,
-  className: t,
-  hasDivider: v,
-  hideTitle: y,
-  titleKey: a,
-  subtitleKey: c,
-  subtitleConfig: r,
-  ...l
+const $ = "adyen-pe-header", j = ({
+  baseClassName: r = $,
+  forwardedToRoot: t = !0,
+  children: n,
+  className: E,
+  hasDivider: T,
+  hideTitle: _,
+  titleKey: m,
+  subtitleKey: o,
+  subtitleConfig: i,
+  ...f
 }) => {
-  const { i18n: n } = A(), { id: S, ref: I } = i({
-    headingType: E.TITLE,
-    forwardedToRoot: d
-  }), { id: $, ref: x } = i({
-    headingType: E.SUBTITLE,
-    forwardedToRoot: d
+  const { i18n: d } = S(), { id: v, ref: y } = c({
+    headingType: l.TITLE,
+    forwardedToRoot: t
+  }), { id: g, ref: u } = c({
+    headingType: l.SUBTITLE,
+    forwardedToRoot: t
   });
-  return /* @__PURE__ */ e("div", { ...l, className: o([m, t]), children: [
-    /* @__PURE__ */ e("div", { className: `${m}__headings`, children: [
-      !y && a && /* @__PURE__ */ e("div", { ref: I, id: S, className: `${m}__title`, children: /* @__PURE__ */ e(h, { el: _.SPAN, variant: T.TITLE, medium: !0, children: n.get(a) }) }),
-      c && /* @__PURE__ */ e("div", { ref: x, id: $, className: o(`${m}__subtitle`, r == null ? void 0 : r.classNames), children: /* @__PURE__ */ e(
-        h,
+  return /* @__PURE__ */ e("div", { ...f, className: p([r, E]), children: [
+    /* @__PURE__ */ e("div", { className: `${r}__headings`, children: [
+      !_ && m && /* @__PURE__ */ e("div", { ref: y, id: v, className: `${r}__title`, children: /* @__PURE__ */ e(a, { el: s.SPAN, variant: h.TITLE, medium: !0, children: d.get(m) }) }),
+      o && /* @__PURE__ */ e("div", { ref: u, id: g, className: p(`${r}__subtitle`, i?.classNames), children: /* @__PURE__ */ e(
+        a,
         {
-          el: (r == null ? void 0 : r.typographyEl) ?? _.SPAN,
-          variant: (r == null ? void 0 : r.variant) ?? T.BODY,
-          children: n.get(c)
+          el: i?.typographyEl ?? s.SPAN,
+          variant: i?.variant ?? h.BODY,
+          children: d.get(o)
         }
       ) }),
-      v && /* @__PURE__ */ e(L, { className: `${m}__divider` })
+      T && /* @__PURE__ */ e(I, { className: `${r}__divider` })
     ] }),
-    p && /* @__PURE__ */ e("div", { className: `${m}__controls`, children: p })
+    n && /* @__PURE__ */ e("div", { className: `${r}__controls`, children: n })
   ] });
 };
 export {
-  N as BASE_CLASS,
-  V as Header
+  $ as BASE_CLASS,
+  j as Header
 };

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

@@ -1,40 +1,47 @@
 import { jsx as t } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 /* empty css          */
-import l from "classnames";
-import { useState as m, useEffect as s } from "../../../external/preact/hooks/dist/hooks.module.js";
+import c from "classnames";
+import { useState as l, useEffect as s } from "../../../external/preact/hooks/dist/hooks.module.js";
 const e = {
   "angle-right": () => import("../../../images/icons/angle-right.svg.js"),
+  "arrow-right": () => import("../../../images/icons/arrow-right.svg.js"),
   "checkmark-circle-fill": () => import("../../../images/icons/checkmark-circle-fill.svg.js"),
   "checkmark-square-fill": () => import("../../../images/icons/checkmark-square-fill.svg.js"),
   checkmark: () => import("../../../images/icons/checkmark.svg.js"),
+  "checkbox-disabled": () => import("../../../images/icons/checkbox-disabled.svg.js"),
   "chevron-down": () => import("../../../images/icons/chevron-down.svg.js"),
   "chevron-left": () => import("../../../images/icons/chevron-left.svg.js"),
   "chevron-right": () => import("../../../images/icons/chevron-right.svg.js"),
   "chevron-up": () => import("../../../images/icons/chevron-up.svg.js"),
+  "chevron-up-down": () => import("../../../images/icons/chevron-up-down.svg.js"),
   copy: () => import("../../../images/icons/copy.svg.js"),
   "cross-circle-fill": () => import("../../../images/icons/cross-circle-fill.svg.js"),
+  search: () => import("../../../images/icons/search.svg.js"),
   cross: () => import("../../../images/icons/cross.svg.js"),
   download: () => import("../../../images/icons/download.svg.js"),
   "external-link": () => import("../../../images/icons/external-link.svg.js"),
   filter: () => import("../../../images/icons/filter.svg.js"),
+  info: () => import("../../../images/icons/info.svg.js"),
   "info-filled": () => import("../../../images/icons/info-filled.svg.js"),
   "minus-circle-outline": () => import("../../../images/icons/minus-circle-outline.svg.js"),
   plus: () => import("../../../images/icons/plus.svg.js"),
   "plus-circle-outline": () => import("../../../images/icons/plus-circle-outline.svg.js"),
   square: () => import("../../../images/icons/square.svg.js"),
+  "square-small-fill": () => import("../../../images/icons/square-small-fill.svg.js"),
   "trash-can": () => import("../../../images/icons/trash-can.svg.js"),
+  cog: () => import("../../../images/icons/cog.svg.js"),
   upload: () => import("../../../images/icons/upload.svg.js"),
   "warning-filled": () => import("../../../images/icons/warning-filled.svg.js"),
   warning: () => import("../../../images/icons/warning.svg.js")
-}, h = ({ className: n, name: o, ...p }) => {
-  const [r, i] = m(null);
+}, d = ({ className: p, name: o, ...m }) => {
+  const [r, i] = l(null);
   return s(() => {
-    e[o] ? e[o]().then(({ default: c }) => {
-      i(/* @__PURE__ */ t(c, {}));
+    e[o] ? e[o]().then(({ default: n }) => {
+      i(/* @__PURE__ */ t(n, {}));
     }) : (i(null), console.error(`Icon with name "${o}" does not exist.`));
-  }, [o]), r && /* @__PURE__ */ t("span", { className: l("adyen-pe-icon", n), role: "img", "aria-hidden": !0, ...p, children: r });
+  }, [o]), r && /* @__PURE__ */ t("span", { className: c("adyen-pe-icon", p), role: "img", "aria-hidden": !0, ...m, children: r });
 };
 export {
-  h as Icon,
-  h as default
+  d as Icon,
+  d as default
 };

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

@@ -3,19 +3,19 @@ import { useState as p, useRef as y, useEffect as N } from "../../../external/pr
 import E from "classnames";
 /* empty css         */
 function L(s) {
-  const { backgroundUrl: a = "", className: c = "", classNameModifiers: m = [], src: l = "", alt: d = "", showOnError: f = !1 } = s, [i, o] = p(!1), r = y(null), u = () => {
+  const { backgroundUrl: a = "", className: m = "", classNameModifiers: c = [], src: l = "", alt: d = "", showOnError: i = !1 } = s, [f, o] = p(!1), r = y(null), u = () => {
     o(!0);
   }, g = () => {
-    o(f);
+    o(i);
   }, t = E(
-    [c],
+    [m],
     "adyen-pe-image",
-    { "adyen-pe-image--loaded": i },
-    ...m.map((e) => `adyen-pe-image--${e}`)
+    { "adyen-pe-image--loaded": f },
+    ...c.map((e) => `adyen-pe-image--${e}`)
   );
   return N(() => {
     const e = a ? new Image() : r.current;
-    e && (e.src = a || l, e.onload = u), o(!!(e != null && e.complete));
+    e && (e.src = a || l, e.onload = u), o(!!e?.complete);
   }, []), a ? /* @__PURE__ */ n("div", { style: { backgroundUrl: a }, ...s, className: t }) : /* @__PURE__ */ n("img", { ...s, alt: d, ref: r, className: t, onError: g });
 }
 export {

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

@@ -1,91 +1,89 @@
 import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { ButtonVariant as w } from "../Button/types.js";
-import { useClickOutside as N } from "../../../hooks/element/useClickOutside.js";
-import { useResponsiveContainer as g, containerQueries as R } from "../../../hooks/useResponsiveContainer.js";
-import { withTabbableRoot as E } from "../../../primitives/dom/tabbableRoot/tabbable.js";
-import M from "../../../hooks/element/useFocusTrap.js";
-import k from "../../../core/Context/useCoreContext.js";
-import { useContext as T, useRef as f, useCallback as B, useEffect as I } from "../../../external/preact/hooks/dist/hooks.module.js";
-import { createContext as A, Fragment as F } from "../../../external/preact/dist/preact.module.js";
-import s from "classnames";
+import { ButtonVariant as b } from "../Button/types.js";
+import { useClickOutside as C } from "../../../hooks/element/useClickOutside.js";
+import { useResponsiveContainer as w, containerQueries as N } from "../../../hooks/useResponsiveContainer.js";
+import { withTabbableRoot as g } from "../../../primitives/dom/tabbableRoot/tabbable.js";
+import R from "../../../hooks/element/useFocusTrap.js";
+import E from "../../../core/Context/useCoreContext.js";
+import { useContext as M, useRef as u, useCallback as k, useEffect as T } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { createContext as B, Fragment as I } from "../../../external/preact/dist/preact.module.js";
+import c from "classnames";
 /* empty css           */
-import j from "../Button/Button.js";
-import { Icon as q } from "../Icon/Icon.js";
-const h = A({ withinModal: !1 }), X = () => T(h);
-function Z({
-  title: n,
-  children: y,
-  classNameModifiers: v = [],
-  isOpen: o,
-  onClose: i,
+import A from "../Button/Button.js";
+import { Icon as F } from "../Icon/Icon.js";
+const p = B({ withinModal: !1 }), U = () => M(p);
+function W({
+  title: l,
+  children: f,
+  classNameModifiers: h = [],
+  isOpen: a,
+  onClose: s,
   isDismissible: t = !0,
-  headerWithBorder: x = !0,
+  headerWithBorder: y = !0,
   size: r = "fluid",
-  ..._
+  ...v
 }) {
-  const { i18n: b } = k(), C = g(R.down.xs), d = f(null), u = f(null), m = B(() => {
-    var a;
-    o && t && ((a = u.current) == null || a.focus(), i());
-  }, [o, t, i]), c = M(N(null, m), m);
-  return I(() => {
-    var a, p;
-    if (o && c.current) {
-      u.current = document.activeElement;
-      let l = E();
-      return (a = d.current) == null || a.focus(), l.root = c.current, l.current = 1, (p = d.current) == null || p.remove(), () => {
-        l.root = null, l = null;
+  const { i18n: x } = E(), _ = w(N.down.xs), n = u(null), i = u(null), d = k(() => {
+    a && t && (i.current?.focus(), s());
+  }, [a, t, s]), m = R(C(null, d), d);
+  return T(() => {
+    if (a && m.current) {
+      i.current = document.activeElement;
+      let o = g();
+      return n.current?.focus(), o.root = m.current, o.current = 1, n.current?.remove(), () => {
+        o.root = null, o = null;
       };
     }
-  }, [o]), /* @__PURE__ */ e(F, { children: o && /* @__PURE__ */ e(
+  }, [a]), /* @__PURE__ */ e(I, { children: a && /* @__PURE__ */ e(
     "div",
     {
-      className: s(
+      className: c(
         "adyen-pe-modal-wrapper",
-        v.map((a) => `adyen-pe-modal-wrapper--${a}`),
-        { "adyen-pe-modal-wrapper--open": o, "adyen-pe-modal-wrapper--dismissible": t }
+        h.map((o) => `adyen-pe-modal-wrapper--${o}`),
+        { "adyen-pe-modal-wrapper--open": a, "adyen-pe-modal-wrapper--dismissible": t }
       ),
       role: "dialog",
       "aria-modal": "true",
       "aria-hidden": "false",
-      ..._,
-      children: /* @__PURE__ */ e(h.Provider, { value: { withinModal: !0 }, children: /* @__PURE__ */ e(
+      ...v,
+      children: /* @__PURE__ */ e(p.Provider, { value: { withinModal: !0 }, children: /* @__PURE__ */ e(
         "div",
         {
-          className: s("adyen-pe-modal", {
+          className: c("adyen-pe-modal", {
             "adyen-pe-modal--fluid": r === "fluid",
             "adyen-pe-modal--small": r === "small",
             "adyen-pe-modal--large": r === "large",
             "adyen-pe-modal--extra-large": r === "extra-large",
-            "adyen-pe-modal--full-screen": r === "full-screen" || C
+            "adyen-pe-modal--full-screen": r === "full-screen" || _
           }),
-          ref: c,
+          ref: m,
           children: [
-            /* @__PURE__ */ e("div", { className: "adyen-pe-visually-hidden", ref: d, tabIndex: -1 }),
+            /* @__PURE__ */ e("div", { className: "adyen-pe-visually-hidden", ref: n, tabIndex: -1 }),
             /* @__PURE__ */ e(
               "div",
               {
-                className: s("adyen-pe-modal__header", {
-                  "adyen-pe-modal__header--with-title": n,
-                  "adyen-pe-modal__header--with-border-bottom": x
+                className: c("adyen-pe-modal__header", {
+                  "adyen-pe-modal__header--with-title": l,
+                  "adyen-pe-modal__header--with-border-bottom": y
                 }),
                 children: [
-                  n && /* @__PURE__ */ e("div", { className: "adyen-pe-modal__header-title", children: n }),
+                  l && /* @__PURE__ */ e("div", { className: "adyen-pe-modal__header-title", children: l }),
                   t && /* @__PURE__ */ e(
-                    j,
+                    A,
                     {
-                      onClick: m,
-                      variant: w.TERTIARY,
+                      onClick: d,
+                      variant: b.TERTIARY,
                       iconButton: !0,
                       classNameModifiers: ["circle"],
                       className: "adyen-pe-modal__dismiss-button",
-                      "aria-label": b.get("common.modal.controls.dismiss.label"),
-                      children: /* @__PURE__ */ e(q, { name: "cross" })
+                      "aria-label": x.get("common.modal.controls.dismiss.label"),
+                      children: /* @__PURE__ */ e(F, { name: "cross" })
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ e("div", { className: "adyen-pe-modal__content", children: y })
+            /* @__PURE__ */ e("div", { className: "adyen-pe-modal__content", children: f })
           ]
         }
       ) })
@@ -93,6 +91,6 @@ function Z({
   ) });
 }
 export {
-  Z as default,
-  X as useModalContext
+  W as default,
+  U as useModalContext
 };

package/dist/es/components/internal/Modal/ModalContent/ModalContent.js

@@ -1,19 +1,15 @@
-import { jsx as s } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useMemo as t } from "../../../../external/preact/hooks/dist/hooks.module.js";
-import u from "../../DataOverviewDetails/DataOverviewDetails.js";
-function a({ type: r, data: o, dataCustomization: i, ...n }) {
-  const e = t(() => {
-    switch (r) {
+import { jsx as i } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as a } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import m from "../../DataOverviewDetails/DataOverviewDetails.js";
+function c({ type: o, data: r, dataCustomization: s, ...t }) {
+  const e = a(() => {
+    switch (o) {
       case "payout":
-        return { ...o, type: r, ...n };
-      case "transaction":
-        return { id: o, type: r, ...n };
-      default:
-        return { data: o, type: r };
+        return { ...r, type: o, ...t };
     }
-  }, [o, n, r]);
-  return e && /* @__PURE__ */ s(u, { ...e, dataCustomization: i });
+  }, [r, t, o]);
+  return e && /* @__PURE__ */ i(m, { ...e, dataCustomization: s });
 }
 export {
-  a as default
+  c as default
 };

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

@@ -1,79 +1,79 @@
 import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import T from "../../../core/Context/useCoreContext.js";
-import { useMemo as C, useCallback as N } from "../../../external/preact/hooks/dist/hooks.module.js";
+import S from "../../../core/Context/useCoreContext.js";
+import { useMemo as T, useCallback as C } from "../../../external/preact/hooks/dist/hooks.module.js";
 import { ButtonVariant as m } from "../Button/types.js";
 /* empty css                */
-import { Translation as x } from "../Translation/Translation.js";
-import A from "../FormFields/Select/Select.js";
+import { Translation as N } from "../Translation/Translation.js";
+import x from "../FormFields/Select/Select.js";
 import d from "../Button/Button.js";
 import { Icon as p } from "../Icon/Icon.js";
-import { isNullish as R } from "../../../utils/value/is.js";
+import { isNullish as A } from "../../../utils/value/is.js";
 import { EMPTY_ARRAY as f } from "../../../utils/value/constants.js";
-const i = "adyen-pe-pagination", t = {
-  base: i,
-  context: i + "__context",
-  controls: i + "__controls",
-  limit: i + "__limit",
-  limitSelector: i + "__limit-selector"
+const a = "adyen-pe-pagination", i = {
+  base: a,
+  context: a + "__context",
+  controls: a + "__controls",
+  limit: a + "__limit",
+  limitSelector: a + "__limit-selector"
 };
-function z({
+function q({
   next: u,
-  hasNext: n,
+  hasNext: r,
   hasPrev: c,
-  prev: b,
-  limit: g,
-  limitOptions: r,
-  onLimitSelection: l,
+  prev: g,
+  limit: b,
+  limitOptions: l,
+  onLimitSelection: n,
   ariaLabelKey: h,
   limitSelectAriaLabelKey: _
 }) {
-  const { i18n: o } = T(), s = C(
-    () => r && Object.freeze(
-      r.map(
-        (a) => ({
-          name: a.toLocaleString(o.locale, { style: "decimal" }),
-          id: String(a)
+  const { i18n: t } = S(), s = T(
+    () => l && Object.freeze(
+      l.map(
+        (o) => ({
+          name: o.toLocaleString(t.locale, { style: "decimal" }),
+          id: String(o)
         })
       )
     ),
-    [o, r]
-  ), v = N(
-    ({ target: a }) => {
-      R(a == null ? void 0 : a.value) || l == null || l(+a.value);
+    [t, l]
+  ), v = C(
+    ({ target: o }) => {
+      A(o?.value) || n?.(+o.value);
     },
-    [l]
+    [n]
   );
-  return /* @__PURE__ */ e("div", { role: "group", "aria-label": o.get(h ?? "common.pagination.label"), className: t.base, children: [
-    /* @__PURE__ */ e("div", { className: t.context, children: s && l && /* @__PURE__ */ e("div", { className: t.limit, role: "presentation", children: /* @__PURE__ */ e(
-      x,
+  return /* @__PURE__ */ e("div", { role: "group", "aria-label": t.get(h ?? "common.pagination.label"), className: i.base, children: [
+    /* @__PURE__ */ e("div", { className: i.context, children: s && n && /* @__PURE__ */ e("div", { className: i.limit, role: "presentation", children: /* @__PURE__ */ e(
+      N,
       {
         translationKey: "common.pagination.controls.limitSelect",
         fills: {
-          pageLimit: /* @__PURE__ */ e("div", { className: t.limitSelector, children: /* @__PURE__ */ e(
-            A,
+          pageLimit: /* @__PURE__ */ e("div", { className: i.limitSelector, children: /* @__PURE__ */ e(
+            x,
             {
               setToTargetWidth: !0,
               filterable: !1,
               multiSelect: !1,
               items: s,
               onChange: v,
-              selected: `${g ?? ""}`,
-              "aria-label": o.get(_ ?? "common.pagination.controls.limitSelect.label")
+              selected: `${b ?? ""}`,
+              "aria-label": t.get(_ ?? "common.pagination.controls.limitSelect.label")
             }
           ) })
         }
       }
     ) }) }),
-    /* @__PURE__ */ e("div", { className: t.controls, children: [
+    /* @__PURE__ */ e("div", { className: i.controls, children: [
       /* @__PURE__ */ e(
         d,
         {
           variant: m.TERTIARY,
           disabled: !c,
           iconButton: !0,
-          "aria-label": o.get("common.pagination.controls.previousPage.label"),
+          "aria-label": t.get("common.pagination.controls.previousPage.label"),
           classNameModifiers: ["circle"].concat(c ? f : "disabled"),
-          onClick: b,
+          onClick: g,
           children: /* @__PURE__ */ e(p, { name: "chevron-left" })
         }
       ),
@@ -81,10 +81,10 @@ function z({
         d,
         {
           variant: m.TERTIARY,
-          disabled: !n,
+          disabled: !r,
           iconButton: !0,
-          "aria-label": o.get("common.pagination.controls.nextPage.label"),
-          classNameModifiers: ["circle"].concat(n ? f : "disabled"),
+          "aria-label": t.get("common.pagination.controls.nextPage.label"),
+          classNameModifiers: ["circle"].concat(r ? f : "disabled"),
           onClick: u,
           children: /* @__PURE__ */ e(p, { name: "chevron-right" })
         }
@@ -93,5 +93,5 @@ function z({
   ] });
 }
 export {
-  z as default
+  q as default
 };