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

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

@@ -1,72 +1,73 @@
 import { jsx as o } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useResponsiveContainer as R, containerQueries as b } from "../../../../../hooks/useResponsiveContainer.js";
-import g from "../../../Popover/PopoverContainer.js";
-import { PopoverContainerPosition as A, PopoverContainerVariant as h, PopoverContainerSize as F } from "../../../Popover/types.js";
-import W from "../../../../../core/Context/useCoreContext.js";
-import m from "classnames";
-import { memo as w } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useResponsiveContainer as g, containerQueries as A } from "../../../../../hooks/useResponsiveContainer.js";
+import b from "../../../Popover/PopoverContainer.js";
+import { PopoverContainerPosition as h, PopoverContainerVariant as W, PopoverContainerSize as w } from "../../../Popover/types.js";
+import V from "../../../../../core/Context/useCoreContext.js";
+import a from "classnames";
+import { memo as z } from "../../../../../external/preact/compat/dist/compat.module.js";
 import { useMemo as l } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { DROPDOWN_LIST_CLASS as V, DROPDOWN_LIST_ACTIVE_CLASS as z, DROPDOWN_ELEMENT_CLASS as j, DROPDOWN_ELEMENT_NO_OPTION_CLASS as y } from "../constants.js";
-import B, { renderListItemDefault as Q } from "./SelectListItem.js";
-import { fixedForwardRef as U } from "../../../../../utils/preact/fixedForwardRef.js";
-import { isFunction as $ } from "../../../../../utils/value/is.js";
-import { boolOrFalse as k } from "../../../../../utils/value/bool.js";
-const q = U(
+import { DROPDOWN_LIST_CLASS as F, DROPDOWN_LIST_ACTIVE_CLASS as j, DROPDOWN_ELEMENT_CLASS as y, DROPDOWN_ELEMENT_NO_OPTION_CLASS as B } from "../constants.js";
+import Q, { renderListItemDefault as U } from "./SelectListItem.js";
+import { fixedForwardRef as $ } from "../../../../../utils/preact/fixedForwardRef.js";
+import { isFunction as k } from "../../../../../utils/value/is.js";
+import { boolOrFalse as q } from "../../../../../utils/value/bool.js";
+const G = $(
   ({
     active: c,
     commitActions: p,
     items: d,
+    disableFocusTrap: f,
     multiSelect: n,
-    onKeyDown: f,
+    onKeyDown: O,
     onSelect: u,
     renderListItem: i,
-    selectListId: O,
+    selectListId: S,
     showList: t,
     textFilter: s,
-    toggleButtonRef: S,
-    dismissPopover: C,
-    setToTargetWidth: P,
-    popoverClassNameModifiers: N,
-    showOverlay: _,
-    fitPosition: v,
-    fixedPopoverPositioning: D
-  }, E) => {
-    const { i18n: L } = W(), T = R(b.down.xs), a = d.filter((e) => !s || e.name.toLowerCase().includes(s)), M = m(V, { [z]: t }), x = m(j, y), I = l(() => $(i) ? i : Q, [i]), r = l(() => k(n), [n]);
+    toggleButtonRef: C,
+    dismissPopover: P,
+    setToTargetWidth: N,
+    popoverClassNameModifiers: _,
+    showOverlay: v,
+    fitPosition: D,
+    fixedPopoverPositioning: E
+  }, L) => {
+    const { i18n: T } = V(), M = g(A.down.xs), m = d.filter((e) => !s || e.name.toLowerCase().includes(s)), x = a(F, { [j]: t }), I = a(y, B), R = l(() => k(i) ? i : U, [i]), r = l(() => q(n), [n]);
     return t ? /* @__PURE__ */ o(
-      g,
+      b,
       {
-        classNameModifiers: N,
+        classNameModifiers: _,
         actions: r ? p : void 0,
-        disableFocusTrap: !0,
+        disableFocusTrap: f,
         divider: !0,
-        dismiss: C,
+        dismiss: P,
         dismissible: !1,
         open: t,
-        setToTargetWidth: P,
-        containerSize: F.MEDIUM,
-        variant: h.POPOVER,
-        targetElement: S,
+        setToTargetWidth: N,
+        containerSize: w.MEDIUM,
+        variant: W.POPOVER,
+        targetElement: C,
         withContentPadding: !1,
-        position: A.BOTTOM,
-        showOverlay: _ && T,
-        fitPosition: v,
-        fixedPositioning: D,
-        children: /* @__PURE__ */ o("ul", { className: M, id: O, ref: E, role: "listbox", "aria-multiselectable": r, children: a.length ? a.map((e) => /* @__PURE__ */ o(
-          B,
+        position: h.BOTTOM,
+        showOverlay: v && M,
+        fitPosition: D,
+        fixedPositioning: E,
+        children: /* @__PURE__ */ o("ul", { className: x, id: S, ref: L, role: "listbox", "aria-multiselectable": r, children: m.length ? m.map((e) => /* @__PURE__ */ o(
+          Q,
           {
             item: e,
             multiSelect: r,
-            onKeyDown: f,
+            onKeyDown: O,
             onSelect: u,
-            renderListItem: I,
+            renderListItem: R,
             selected: c.includes(e)
           },
           e.id
-        )) : /* @__PURE__ */ o("div", { className: x, children: L.get("select.noOptionsFound") }) })
+        )) : /* @__PURE__ */ o("div", { className: I, children: T.get("common.inputs.select.errors.noOptions") }) })
       }
     ) : null;
   }
-), se = w(q);
+), me = z(G);
 export {
-  se as default
+  me as default
 };

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

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

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

@@ -1,81 +1,91 @@
 import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useClickOutside as w } from "../../../hooks/element/useClickOutside.js";
-import { useResponsiveContainer as v, containerQueries as _ } from "../../../hooks/useResponsiveContainer.js";
-import { ButtonVariant as x } from "../Button/types.js";
-import g from "../../../core/Context/useCoreContext.js";
-import { useContext as k, useCallback as C, useEffect as E } from "../../../external/preact/hooks/dist/hooks.module.js";
-import { createContext as N, Fragment as M } from "../../../external/preact/dist/preact.module.js";
-import m from "classnames";
+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";
 /* empty css           */
-import B from "../Button/Button.js";
-import { Icon as L } from "../Icon/Icon.js";
-const i = N({ withinModal: !1 }), S = () => k(i);
-function V({
-  title: t,
-  children: c,
-  classNameModifiers: s = [],
-  isOpen: a,
-  onClose: o,
-  isDismissible: d = !0,
-  headerWithBorder: p = !0,
+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,
+  isDismissible: t = !0,
+  headerWithBorder: x = !0,
   size: r = "fluid",
-  ...u
+  ..._
 }) {
-  const f = v(_.down.xs), { i18n: y } = g(), h = w(null, o), n = C(
-    (l) => {
-      l.key === "Escape" && a && d && o();
-    },
-    [a, d, o]
-  );
-  return E(() => (a ? window.addEventListener("keydown", n) : window.removeEventListener("keydown", n), () => window.removeEventListener("keydown", n)), [a, n]), /* @__PURE__ */ e(M, { children: a && /* @__PURE__ */ e(
+  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;
+      };
+    }
+  }, [o]), /* @__PURE__ */ e(F, { children: o && /* @__PURE__ */ e(
     "div",
     {
-      className: m(
+      className: s(
         "adyen-pe-modal-wrapper",
-        s.map((l) => `adyen-pe-modal-wrapper--${l}`),
-        { "adyen-pe-modal-wrapper--open": a, "adyen-pe-modal-wrapper--dismissible": d }
+        v.map((a) => `adyen-pe-modal-wrapper--${a}`),
+        { "adyen-pe-modal-wrapper--open": o, "adyen-pe-modal-wrapper--dismissible": t }
       ),
       role: "dialog",
       "aria-modal": "true",
-      "aria-hidden": !open,
-      ...u,
-      children: /* @__PURE__ */ e(i.Provider, { value: { withinModal: !0 }, children: /* @__PURE__ */ e(
+      "aria-hidden": "false",
+      ..._,
+      children: /* @__PURE__ */ e(h.Provider, { value: { withinModal: !0 }, children: /* @__PURE__ */ e(
         "div",
         {
-          className: m("adyen-pe-modal", {
+          className: s("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" || f
+            "adyen-pe-modal--full-screen": r === "full-screen" || C
           }),
-          ref: h,
+          ref: c,
           children: [
+            /* @__PURE__ */ e("div", { className: "adyen-pe-visually-hidden", ref: d, tabIndex: -1 }),
             /* @__PURE__ */ e(
               "div",
               {
-                className: m("adyen-pe-modal__header", {
-                  "adyen-pe-modal__header--with-title": t,
-                  "adyen-pe-modal__header--with-border-bottom": p
+                className: s("adyen-pe-modal__header", {
+                  "adyen-pe-modal__header--with-title": n,
+                  "adyen-pe-modal__header--with-border-bottom": x
                 }),
                 children: [
-                  t && /* @__PURE__ */ e("div", { className: "adyen-pe-modal__header__title", children: t }),
-                  d && /* @__PURE__ */ e(
-                    B,
+                  n && /* @__PURE__ */ e("div", { className: "adyen-pe-modal__header-title", children: n }),
+                  t && /* @__PURE__ */ e(
+                    j,
                     {
-                      onClick: o,
-                      variant: x.TERTIARY,
+                      onClick: m,
+                      variant: w.TERTIARY,
                       iconButton: !0,
                       classNameModifiers: ["circle"],
-                      className: "adyen-pe-modal__header-icon",
-                      "aria-label": y.get("dismiss"),
-                      children: /* @__PURE__ */ e(L, { name: "cross" })
+                      className: "adyen-pe-modal__dismiss-button",
+                      "aria-label": b.get("common.modal.controls.dismiss.label"),
+                      children: /* @__PURE__ */ e(q, { name: "cross" })
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ e("div", { className: "adyen-pe-modal__content", children: c })
+            /* @__PURE__ */ e("div", { className: "adyen-pe-modal__content", children: y })
           ]
         }
       ) })
@@ -83,6 +93,6 @@ function V({
   ) });
 }
 export {
-  V as default,
-  S as useModalContext
+  Z as default,
+  X as useModalContext
 };

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

@@ -1,24 +1,19 @@
-import { jsx as n } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useMemo as i } from "../../../../external/preact/hooks/dist/hooks.module.js";
-import a from "../../DataOverviewDetails/DataOverviewDetails.js";
-/* empty css                  */
-import { Fragment as m } from "../../../../external/preact/dist/preact.module.js";
-const c = {
-  base: "adyen-pe-modal-content"
-};
-function h({ type: r, data: o, dataCustomization: t, ...e }) {
-  const s = i(() => {
+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) {
       case "payout":
-        return { ...o, type: r, ...e };
+        return { ...o, type: r, ...n };
       case "transaction":
-        return { id: o, type: r, ...e };
+        return { id: o, type: r, ...n };
       default:
         return { data: o, type: r };
     }
-  }, [o, e, r]);
-  return /* @__PURE__ */ n(m, { children: s && /* @__PURE__ */ n("div", { className: c.base, children: /* @__PURE__ */ n(a, { ...s, dataCustomization: t }) }) });
+  }, [o, n, r]);
+  return e && /* @__PURE__ */ s(u, { ...e, dataCustomization: i });
 }
 export {
-  h as default
+  a as default
 };

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

@@ -1,72 +1,97 @@
-import { jsx as a } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.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";
+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 { ButtonVariant as m } from "../Button/types.js";
 /* empty css                */
-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 }) => {
-      T(e == null ? void 0 : e.value) || i == null || i(+e.value);
+import { Translation as x } from "../Translation/Translation.js";
+import A 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 { 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"
+};
+function z({
+  next: u,
+  hasNext: n,
+  hasPrev: c,
+  prev: b,
+  limit: g,
+  limitOptions: r,
+  onLimitSelection: l,
+  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)
+        })
+      )
+    ),
+    [o, r]
+  ), v = N(
+    ({ target: a }) => {
+      R(a == null ? void 0 : a.value) || l == null || l(+a.value);
     },
-    [i]
+    [l]
   );
-  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(
-        y,
-        {
-          setToTargetWidth: !0,
-          filterable: !1,
-          multiSelect: !1,
-          items: t,
-          onChange: h,
-          selected: `${f ?? ""}`
+  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,
+      {
+        translationKey: "common.pagination.controls.limitSelect",
+        fills: {
+          pageLimit: /* @__PURE__ */ e("div", { className: t.limitSelector, children: /* @__PURE__ */ e(
+            A,
+            {
+              setToTargetWidth: !0,
+              filterable: !1,
+              multiSelect: !1,
+              items: s,
+              onChange: v,
+              selected: `${g ?? ""}`,
+              "aria-label": o.get(_ ?? "common.pagination.controls.limitSelect.label")
+            }
+          ) })
         }
-      ) })
-    ] }) }),
-    /* @__PURE__ */ a("div", { className: "adyen-pe-pagination__controls", children: [
-      /* @__PURE__ */ a(
-        c,
+      }
+    ) }) }),
+    /* @__PURE__ */ e("div", { className: t.controls, children: [
+      /* @__PURE__ */ e(
+        d,
         {
-          variant: l.TERTIARY,
-          disabled: !s,
+          variant: m.TERTIARY,
+          disabled: !c,
           iconButton: !0,
-          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") })
-          ]
+          "aria-label": o.get("common.pagination.controls.previousPage.label"),
+          classNameModifiers: ["circle"].concat(c ? f : "disabled"),
+          onClick: b,
+          children: /* @__PURE__ */ e(p, { name: "chevron-left" })
         }
       ),
-      /* @__PURE__ */ a(
-        c,
+      /* @__PURE__ */ e(
+        d,
         {
-          variant: l.TERTIARY,
-          disabled: !o,
+          variant: m.TERTIARY,
+          disabled: !n,
           iconButton: !0,
-          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" })
-          ]
+          "aria-label": o.get("common.pagination.controls.nextPage.label"),
+          classNameModifiers: ["circle"].concat(n ? f : "disabled"),
+          onClick: u,
+          children: /* @__PURE__ */ e(p, { name: "chevron-right" })
         }
       )
     ] })
   ] });
 }
 export {
-  j as default
+  z as default
 };

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

@@ -9,35 +9,35 @@ const Y = (V, l, M) => {
       var o;
       (o = u.current) == null || o.abort(), u.current = void 0;
     }, [])
-  ), [t, x] = T(r.current), [g, y] = F(!1), e = s(() => J(M), [M]), { getPageCount: v, getPageParams: A, resetPageCount: z, updatePagination: I } = V, n = s(() => l ? (o) => {
-    var S;
+  ), [t, x] = T(r.current), [g, z] = F(!1), e = s(() => J(M), [M]), { getPageCount: v, getPageParams: A, resetPageCount: S, updatePagination: R } = V, n = s(() => l ? (o) => {
+    var $;
     if (!(e && Number.isInteger(o))) return;
     const f = v(), a = o < 0 ? o + f + 1 : o;
-    a > 0 && (f ? a <= f : a === 1) && ((S = u.current) == null || S.abort(), u.current = new AbortController(), i.current && (((r.current = a) > 1 || f) && x(r.current), (async () => {
-      const { signal: $ } = u.current, D = { ...A(a, e), limit: e, page: a };
+    a > 0 && (f ? a <= f : a === 1) && (($ = u.current) == null || $.abort(), u.current = new AbortController(), i.current && (((r.current = a) > 1 || f) && x(r.current), (async () => {
+      const { signal: b } = u.current, D = { ...A(a, e), limit: e, page: a };
       try {
-        const d = await l(D, $);
+        const d = await l(D, b);
         if (!d || !i.current) return;
-        const { size: b, ...G } = d;
-        I(a, e, G), c.current = r.current && Math.max(r.current, c.current || -1 / 0), r.current && r.current === c.current && (h.current = b), r.current === 1 && b > 0 && x(r.current), r.current = void 0, y(!0);
+        const { size: y, ...G } = d;
+        R(a, e, G), c.current = r.current && Math.max(r.current, c.current || -1 / 0), r.current && r.current === c.current && (h.current = y), r.current === 1 && y > 0 && x(r.current), r.current = void 0, z(!0);
       } catch (d) {
-        if ($.aborted) return;
+        if (b.aborted) return;
         console.error(d);
       }
     })()));
-  } : K, [e, l]), R = P(() => {
+  } : K, [e, l]), q = P(() => {
     t && n(Math.min(t + 1, v()));
-  }, [n, t]), q = P(() => {
+  }, [n, t]), w = P(() => {
     t && n(Math.max(t - 1, 1));
-  }, [n, t]), m = s(() => v() || t || void 0, [n, g]), w = s(() => !!(t && m) && t < m, [t, m]), E = s(() => !!t && t > 1, [t]), C = s(
+  }, [n, t]), m = s(() => v() || t || void 0, [n, g]), E = s(() => !!(t && m) && t < m, [t, m]), I = s(() => !!t && t > 1, [t]), C = s(
     () => c.current ? (c.current - 1) * e + (h.current || 0) : 0,
     [n, g]
-  ), N = s(() => e && Math.min(e, C || 1 / 0) % e, [e, C]), B = P(() => {
-    z(), c.current = h.current = r.current = void 0, i.current && x(r.current);
-  }, [z]);
+  ), N = s(() => t ? Math.min(e, C - (t - 1) * e) : 0, [e, C, t]), B = P(() => {
+    S(), c.current = h.current = r.current = void 0, i.current && x(r.current);
+  }, [S]);
   return j(() => {
-    i.current && g && y(!1);
-  }, [g]), { goto: n, hasNext: w, hasPrev: E, limit: e, next: R, page: t, pages: m, pageSize: N, prev: q, resetPagination: B, size: C };
+    i.current && g && z(!1);
+  }, [g]), { goto: n, hasNext: E, hasPrev: I, limit: e, next: q, page: t, pages: m, pageSize: N, prev: w, resetPagination: B, size: C };
 };
 export {
   Y as default