welcome-ui 10.1.2 → 10.1.5

package/dist/Field.css

@@ -1 +1 @@
-@layer components{._root_1sq1k_2{display:grid;grid-template-areas:"label" "input";width:100%;height:fit-content}._root_1sq1k_2:has(._label_1sq1k_8):has(._hint_1sq1k_8){grid-template-areas:"label" "input" "hint"}._root_1sq1k_2:not(:has(._label_1sq1k_8)):has(._hint_1sq1k_8){grid-template-areas:"input" "hint"}._root_1sq1k_2:not(._inline_1sq1k_14) ._hint_1sq1k_8{margin-top:var(--field-gap-assistive)}._root_1sq1k_2:not(._inline_1sq1k_14) ._label_1sq1k_8{margin-bottom:var(--field-gap-label)}._root_1sq1k_2 .field-input{align-self:center;grid-area:input}._root_1sq1k_2 .field-input.date-picker-wrapper{justify-self:start}._inline_1sq1k_14{grid-template-areas:"input label";grid-template-columns:min-content 1fr;height:fit-content;grid-row-gap:var(--field-gap-assistive);grid-column-gap:var(--field-gap-label)}._inline_1sq1k_14:has(._label_1sq1k_8):has(._hint_1sq1k_8){grid-template-areas:"input label" ". hint"}._inline_1sq1k_14:not(:has(._label_1sq1k_8)):has(._hint_1sq1k_8){grid-template-areas:"input ." ". hint"}._label_1sq1k_8{grid-area:label}._hint_1sq1k_8{grid-area:hint}._hint-max-length_1sq1k_46{justify-self:end}._visuallyHidden_1sq1k_49{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}}
+@layer components{._root_13hug_2{display:grid;grid-template-areas:"label" "input";width:100%;height:fit-content}._root_13hug_2:has(._label_13hug_8):has(._hint_13hug_8){grid-template-areas:"label" "input" "hint"}._root_13hug_2:not(:has(._label_13hug_8)):has(._hint_13hug_8){grid-template-areas:"input" "hint"}._root_13hug_2:not(._inline_13hug_14) ._hint_13hug_8{margin-top:var(--field-gap-assistive)}._root_13hug_2:not(._inline_13hug_14) ._label_13hug_8{margin-bottom:var(--field-gap-label)}._root_13hug_2 .field-input{align-self:center;grid-area:input}._root_13hug_2 .field-input.date-picker-wrapper{justify-self:start}._inline_13hug_14{grid-template-areas:"input label";grid-template-columns:min-content 1fr;height:fit-content;grid-row-gap:var(--field-gap-assistive);grid-column-gap:var(--field-gap-label)}._inline_13hug_14:has(._label_13hug_8):has(._hint_13hug_8){grid-template-areas:"input label" ". hint"}._inline_13hug_14:not(:has(._label_13hug_8)):has(._hint_13hug_8){grid-template-areas:"input ." ". hint"}._label_13hug_8{grid-area:label}._hint_13hug_8{grid-area:hint;display:flex;gap:var(--field-gap-label)}._hint-max-length_13hug_48{margin-left:auto}._visuallyHidden_13hug_51{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}}

package/dist/Field.js

@@ -1,104 +1,98 @@
 "use client";
 import './Field.css';
-import { jsxs as w, jsx as b } from "react/jsx-runtime";
-import { createContext as C, useMemo as $, useId as A, useContext as L } from "react";
-import { Hint as M } from "./Hint.js";
-import { Label as R } from "./Label.js";
-import { c as S } from "./index-PAaZGbyz.js";
-import { f as T } from "./forwardRefWithAs-8eP3ZN15.js";
-const W = "_root_1sq1k_2", z = "_label_1sq1k_8", E = "_hint_1sq1k_8", G = "_inline_1sq1k_14", J = "_visuallyHidden_1sq1k_49", K = {
-  root: W,
-  label: z,
-  hint: E,
-  inline: G,
-  "hint-max-length": "_hint-max-length_1sq1k_46",
-  visuallyHidden: J
-}, h = S(K), y = C({
-  getInputProps: (i) => i,
+import { jsxs as y, jsx as _ } from "react/jsx-runtime";
+import { createContext as $, useMemo as q, useId as A, useContext as R } from "react";
+import { Hint as S } from "./Hint.js";
+import { Label as T } from "./Label.js";
+import { c as W } from "./index-PAaZGbyz.js";
+import { f as k } from "./forwardRefWithAs-8eP3ZN15.js";
+const z = "_root_13hug_2", E = "_label_13hug_8", G = "_hint_13hug_8", J = "_inline_13hug_14", K = "_visuallyHidden_13hug_51", O = {
+  root: z,
+  label: E,
+  hint: G,
+  inline: J,
+  "hint-max-length": "_hint-max-length_13hug_48",
+  visuallyHidden: K
+}, d = W(O), I = $({
+  getInputProps: (n) => n,
   hintID: "",
   labelID: "",
   variant: void 0
 });
-function _(i) {
-  const o = A();
-  return i || o;
+function f(n) {
+  const c = A();
+  return n || c;
 }
-function P() {
-  return L(y);
+function ee() {
+  return R(I);
 }
-const O = T((i, o) => {
+const Q = k((n, c) => {
   const {
-    children: I,
+    children: N,
     className: p,
-    disabled: d,
-    error: f,
-    hideLabel: g,
-    hint: D,
-    hintProps: t,
-    id: N,
-    inline: q,
-    label: F,
-    labelProps: a,
+    disabled: u,
+    error: g,
+    hideLabel: D,
+    hint: F,
+    hintProps: l,
+    id: H,
+    inline: j,
+    label: B,
+    labelProps: i,
     maxLength: e,
-    required: c,
+    required: m,
     success: v,
     warning: x,
-    ...k
-  } = i, n = f ? "danger" : v ? "success" : x ? "warning" : void 0, l = f ?? x ?? v ?? D ?? (e ? `${new Intl.NumberFormat().format(e.count)} / ${new Intl.NumberFormat().format(e.max)}` : void 0), r = _(a == null ? void 0 : a.id), s = _(t == null ? void 0 : t.id), m = _(N), H = $(
+    ...w
+  } = n, t = g ? "danger" : v ? "success" : x ? "warning" : void 0, r = g ?? x ?? v ?? F, a = e ? `${new Intl.NumberFormat().format(e.count)} / ${new Intl.NumberFormat().format(e.max)}` : void 0, s = f(i == null ? void 0 : i.id), o = f(l == null ? void 0 : l.id), h = f(H), C = q(
     () => ({
-      getInputProps(u) {
-        const j = [u["aria-describedby"], l && s].filter(Boolean).join(" ") || void 0, B = [u["aria-labelledby"], r].filter(Boolean).join(" ");
+      getInputProps(b) {
+        const L = [b["aria-describedby"], (r || a) && o].filter(Boolean).join(" ") || void 0, M = [b["aria-labelledby"], s].filter(Boolean).join(" ");
         return {
-          ...u,
-          "aria-describedby": j,
-          "aria-invalid": n === "danger" ? !0 : void 0,
-          "aria-labelledby": B,
-          disabled: d,
-          id: m,
+          ...b,
+          "aria-describedby": L,
+          "aria-invalid": t === "danger" ? !0 : void 0,
+          "aria-labelledby": M,
+          disabled: u,
+          id: h,
           /**
            * pass maxCount to children for block form
            */
           maxLength: e == null ? void 0 : e.max,
-          required: c
+          required: m
         };
       },
-      hintID: s,
-      labelID: r,
-      variant: n
+      hintID: o,
+      labelID: s,
+      variant: t
     }),
-    [s, r, n, l, d, m, e == null ? void 0 : e.max, c]
+    [o, s, t, r, a, u, h, e == null ? void 0 : e.max, m]
   );
-  return /* @__PURE__ */ w("div", { ref: o, ...k, className: h("root", q && "inline", p), children: [
-    /* @__PURE__ */ b(
-      R,
+  return /* @__PURE__ */ y("div", { ref: c, ...w, className: d("root", j && "inline", p), children: [
+    /* @__PURE__ */ _(
+      T,
       {
-        className: h("label", g && "visuallyHidden"),
-        disabled: d,
-        htmlFor: m,
-        id: r,
-        required: c,
-        variant: n,
-        ...a,
-        children: F
-      }
-    ),
-    /* @__PURE__ */ b(y.Provider, { value: H, children: I }),
-    l ? /* @__PURE__ */ b(
-      M,
-      {
-        className: h("hint", !!e && "hint-max-length"),
+        disabled: u,
+        htmlFor: h,
         id: s,
-        variant: n,
-        ...t,
-        children: l
+        required: m,
+        variant: t,
+        ...i,
+        className: d("label", D && "visuallyHidden", i == null ? void 0 : i.className),
+        children: B
       }
-    ) : null
+    ),
+    /* @__PURE__ */ _(I.Provider, { value: C, children: N }),
+    r || a ? /* @__PURE__ */ y(S, { className: d("hint"), id: o, variant: t, ...l, children: [
+      r,
+      a ? /* @__PURE__ */ _("span", { className: d("hint-max-length"), children: a }) : null
+    ] }) : null
   ] });
 });
-O.displayName = "Field";
+Q.displayName = "Field";
 export {
-  O as Field,
-  y as FieldContext,
-  _ as useDefaultID,
-  P as useField
+  Q as Field,
+  I as FieldContext,
+  f as useDefaultID,
+  ee as useField
 };

package/dist/FloatingActionBar.css

@@ -0,0 +1 @@
+@layer components{._container_1la8g_2{display:inline-flex;align-items:center;gap:var(--floating-action-bar-gap-items)}._container_1la8g_2>*{flex-shrink:0}._floating-action-bar_1la8g_10{display:flex;justify-content:center;padding:var(--floating-action-bar-padding-block) var(--floating-action-bar-padding-inline);border-radius:var(--floating-action-bar-border-radius);border:var(--floating-action-bar-border-width) solid var(--floating-action-bar-color-border);background:var(--floating-action-bar-color-background);box-shadow:var(--elevation-30);overflow-x:auto;overflow-y:hidden}}

package/dist/FloatingActionBar.js

@@ -0,0 +1,25 @@
+"use client";
+import './FloatingActionBar.css';
+import { jsx as a } from "react/jsx-runtime";
+import { c as e } from "./index-PAaZGbyz.js";
+import { f as l } from "./forwardRefWithAs-8eP3ZN15.js";
+import "react";
+const m = "_container_1la8g_2", f = {
+  container: m,
+  "floating-action-bar": "_floating-action-bar_1la8g_10"
+}, t = e(f), b = l(
+  ({ as: o = "div", children: n, className: r, dataTestId: i, ...s }, c) => /* @__PURE__ */ a(
+    o,
+    {
+      className: t("floating-action-bar", r),
+      "data-testid": i,
+      role: "toolbar",
+      ...s,
+      ref: c,
+      children: /* @__PURE__ */ a("div", { className: t("container"), children: n })
+    }
+  )
+);
+export {
+  b as FloatingActionBar
+};

package/dist/Modal.js

@@ -3,7 +3,7 @@ import './Modal.css';
 import { jsx as t, jsxs as _ } from "react/jsx-runtime";
 import { b as K } from "./Q3KUZPD7-CfUCRwV-.js";
 import { D as L, u as Q } from "./2S4Q4M35-BtTn_beR.js";
-import { forwardRef as f, isValidElement as U, cloneElement as X, useState as Y, useEffect as Z } from "react";
+import { forwardRef as c, isValidElement as U, cloneElement as X, useState as Y, useEffect as Z } from "react";
 import { Window as i } from "./Window.js";
 import { c as r } from "./index-PAaZGbyz.js";
 import { f as N } from "./forwardRefWithAs-8eP3ZN15.js";
@@ -13,7 +13,7 @@ import { Text as b } from "./Text.js";
 import { Checkbox as ee } from "./Checkbox.js";
 import { Field as oe } from "./Field.js";
 import { D as se } from "./GYHYTZZN-Xp0fZyyw.js";
-const te = "_root_1sqpb_3", ae = "_hideOnInteractOutside_1sqpb_19", re = "_dialog_1sqpb_130", c = {
+const te = "_root_1sqpb_3", ae = "_hideOnInteractOutside_1sqpb_19", re = "_dialog_1sqpb_130", d = {
   root: te,
   "asset-backdrop": "_asset-backdrop_1sqpb_8",
   hideOnInteractOutside: ae,
@@ -24,9 +24,9 @@ const te = "_root_1sqpb_3", ae = "_hideOnInteractOutside_1sqpb_19", re = "_dialo
   "asset-content": "_asset-content_1sqpb_97",
   dialog: re,
   "close-button": "_close-button_1sqpb_172"
-}, ne = r(c), O = ({ children: e, ...o }) => /* @__PURE__ */ t(i.Header.CloseButton, { className: ne("close-button"), ...o, children: e });
+}, ne = r(d), O = ({ children: e, ...o }) => /* @__PURE__ */ t(i.Header.CloseButton, { className: ne("close-button"), ...o, children: e });
 O.displayName = "AssetModal.Close";
-const le = r(c), B = f(
+const le = r(d), B = c(
   ({ hideOnInteractOutside: e, ...o }, s) => /* @__PURE__ */ t(
     "div",
     {
@@ -43,15 +43,15 @@ const le = r(c), B = f(
   )
 );
 B.displayName = "AssetModal.Backdrop";
-const ie = r(c), A = ({
+const ie = r(d), A = ({
   children: e,
   className: o,
   ...s
 }) => /* @__PURE__ */ t("div", { className: ie("root", "asset-content", o), ...s, children: e });
 A.displayName = "AssetModal.Content";
-const ce = r(c), w = ({ children: e, ...o }) => /* @__PURE__ */ t(b, { as: "p", className: ce("asset-title"), lines: 2, variant: "heading-md-strong", ...o, children: e });
+const ce = r(d), w = ({ children: e, ...o }) => /* @__PURE__ */ t(b, { as: "p", className: ce("asset-title"), lines: 2, variant: "heading-md-strong", ...o, children: e });
 w.displayName = "AssetModal.Title";
-const M = r(c), C = f(
+const M = r(d), C = c(
   ({ children: e, customContent: o, subtitle: s, title: a, ...n }, l) => /* @__PURE__ */ _("div", { className: M("root", "asset-wrapper"), ref: l, ...n, children: [
     e,
     /* @__PURE__ */ _("div", { className: M("root", "asset-title-wrapper"), children: [
@@ -62,12 +62,11 @@ const M = r(c), C = f(
   ] })
 );
 C.displayName = "AssetModal.AssetWithTitle";
-const de = r(c), T = ({
-  children: e,
-  ...o
-}) => /* @__PURE__ */ t("div", { className: de("root", "dialog"), ...o, children: e });
+const de = r(d), T = c(
+  ({ children: e, className: o, ...s }, a) => /* @__PURE__ */ t("div", { className: de("root", "dialog", o), ref: a, ...s, children: e })
+);
 T.displayName = "AssetModal";
-const fe = r(c), D = ({ children: e }) => /* @__PURE__ */ t("div", { className: fe("root", "iframe-wrapper"), children: e });
+const fe = r(d), D = ({ children: e }) => /* @__PURE__ */ t("div", { className: fe("root", "iframe-wrapper"), children: e });
 D.displayName = "AssetModal.Iframe";
 const _e = Object.assign(T, {
   AssetWithTitle: C,
@@ -75,7 +74,7 @@ const _e = Object.assign(T, {
   Content: A,
   Iframe: D,
   Title: w
-}), me = "_root_f1ife_4", pe = "_body_f1ife_50", ue = "_header_f1ife_50", be = "_footer_f1ife_53", he = "_scrollable_f1ife_59", Ne = "_content_f1ife_65", ye = "_close_f1ife_65", ge = "_fullscreen_f1ife_68", we = "_backdrop_f1ife_102", xe = "_hideOnInteractOutside_f1ife_113", d = {
+}), me = "_root_f1ife_4", pe = "_body_f1ife_50", ue = "_header_f1ife_50", be = "_footer_f1ife_53", he = "_scrollable_f1ife_59", Ne = "_content_f1ife_65", ye = "_close_f1ife_65", ge = "_fullscreen_f1ife_68", we = "_backdrop_f1ife_102", xe = "_hideOnInteractOutside_f1ife_113", f = {
   root: me,
   body: pe,
   header: ue,
@@ -98,7 +97,7 @@ const _e = Object.assign(T, {
   "variant-full": "_variant-full_f1ife_169",
   "footer-checkbox": "_footer-checkbox_f1ife_176",
   "footer-buttons": "_footer-buttons_f1ife_179"
-}, Me = r(d), q = f(
+}, Me = r(f), q = c(
   ({ backdrop: e, hideOnInteractOutside: o, ...s }, a) => e === !0 ? /* @__PURE__ */ t(
     "div",
     {
@@ -109,7 +108,7 @@ const _e = Object.assign(T, {
   ) : U(e) ? X(e, { ref: a, ...s }) : null
 );
 q.displayName = "Modal.Backdrop";
-const g = r(d), H = N(
+const g = r(f), H = N(
   ({ as: e = "section", children: o, className: s, iconName: a, subtitle: n, title: l, ...m }, y) => {
     const p = !!(a || l);
     return /* @__PURE__ */ _(e, { className: g("body", s), ref: y, ...m, children: [
@@ -123,7 +122,7 @@ const g = r(d), H = N(
   }
 );
 H.displayName = "Modal.Body";
-const v = r(d), I = N(
+const v = r(f), I = N(
   ({ children: e, className: o, withClosingButton: s = !0, ...a }, n) => /* @__PURE__ */ _(
     "div",
     {
@@ -138,7 +137,7 @@ const v = r(d), I = N(
   )
 );
 I.displayName = "Modal.Content";
-const h = r(d), W = ({ children: e, className: o, ...s }) => /* @__PURE__ */ t("div", { className: h("footer-buttons", o), ...s, children: e });
+const h = r(f), W = ({ children: e, className: o, ...s }) => /* @__PURE__ */ t("div", { className: h("footer-buttons", o), ...s, children: e });
 W.displayName = "Modal.Footer.Buttons";
 const z = ({
   checked: e,
@@ -147,14 +146,14 @@ const z = ({
   ...a
 }) => /* @__PURE__ */ t(oe, { className: h("footer-checkbox"), ...a, inline: !0, label: s, children: /* @__PURE__ */ t(ee, { checked: e, onChange: o }) });
 z.displayName = "Modal.Footer.Checkbox";
-const S = f(
+const S = c(
   ({ children: e, className: o, variant: s = "right", ...a }, n) => /* @__PURE__ */ t("footer", { className: h("footer", o), ref: n, ...a, children: e ? /* @__PURE__ */ t("div", { className: h("footer-children-wrapper", `variant-${s}`), children: e }) : null })
 );
 S.displayName = "Modal.Footer";
 const ve = Object.assign(S, {
   Buttons: W,
   Checkbox: z
-}), $e = r(d), F = f(
+}), $e = r(f), F = c(
   ({ children: e, className: o, ...s }, a) => /* @__PURE__ */ t(i.Header, { className: $e("header", o), ref: a, ...s, children: e })
 );
 F.displayName = "Modal.Header";
@@ -170,9 +169,9 @@ const j = N(
   )
 );
 j.displayName = "Modal.Trigger";
-const ke = r(d), E = f(({ className: e, ...o }, s) => /* @__PURE__ */ t(i.Media, { className: ke("window-media", e), ref: s, ...o }));
+const ke = r(f), E = c(({ className: e, ...o }, s) => /* @__PURE__ */ t(i.Media, { className: ke("window-media", e), ref: s, ...o }));
 E.displayName = "Modal.WindowMedia";
-const Oe = r(d);
+const Oe = r(f);
 function Ee(e) {
   const { onClose: o, setOpen: s, ...a } = e || {};
   return Q({

package/dist/Pagination.js

@@ -1,185 +1,198 @@
 "use client";
 import './Pagination.css';
-import { jsx as s, jsxs as N } from "react/jsx-runtime";
-import { useMemo as Y, forwardRef as Z, useRef as M, useCallback as y } from "react";
+import { jsx as s, jsxs as $ } from "react/jsx-runtime";
+import { useMemo as p, forwardRef as H, useRef as M, useCallback as k } from "react";
 import { Icon as A } from "./Icon.js";
-import { c as H } from "./index-PAaZGbyz.js";
-const I = "_list_1d12i_3", n = "_item_1d12i_13", C = "_page_1d12i_52", a = {
-  list: I,
-  item: n,
+import { Text as n } from "./Text.js";
+import { c as I } from "./index-PAaZGbyz.js";
+const C = "_list_1d12i_3", a = "_item_1d12i_13", x = "_page_1d12i_52", v = {
+  list: C,
+  item: a,
   "disabled-arrow": "_disabled-arrow_1d12i_43",
-  page: C,
+  page: x,
   "with-text-left": "_with-text-left_1d12i_72",
   "with-text-right": "_with-text-right_1d12i_72",
   "size-lg": "_size-lg_1d12i_75",
   "size-md": "_size-md_1d12i_90"
-}, i = 5, x = 3;
-function v({ page: c, pageCount: e, rangeDisplay: h }) {
-  return Y(() => {
-    if (e <= h || e <= i + 1)
-      return B(e, (b) => b + 1);
-    const t = g(c, e), o = t === "before" ? B(i, (b) => b + 1) : [1], r = t === "center" ? B(x, (b) => b + c - 1) : [], w = t === "after" ? B(i, (b) => b + e - i + 1) : [e];
-    return T([o, r, w], "-");
-  }, [c, e, h]);
+}, P = 5, g = 3;
+function T({ page: e, pageCount: r, rangeDisplay: o }) {
+  return p(() => {
+    if (r <= o || r <= P + 1)
+      return B(r, (t) => t + 1);
+    const u = ll(e, r), N = u === "before" ? B(P, (t) => t + 1) : [1], h = u === "center" ? B(g, (t) => t + e - 1) : [], c = u === "after" ? B(P, (t) => t + r - P + 1) : [r];
+    return rl([N, h, c], "-");
+  }, [e, r, o]);
 }
-function B(c, e) {
-  return Array.from({ length: c }, (h, t) => e(t));
+function B(e, r) {
+  return Array.from({ length: e }, (o, u) => r(u));
 }
-function g(c, e) {
-  return c < i ? "before" : c >= i && c <= e - i + 1 ? "center" : c > e - i + 1 ? "after" : "center";
+function ll(e, r) {
+  return e < P ? "before" : e >= P && e <= r - P + 1 ? "center" : e > r - P + 1 ? "after" : "center";
 }
-function T(c, e) {
-  return c.reduce((h, t, o) => {
-    const r = [];
-    return r.push(...h), r.push(...t), t.length && o < c.length - 1 && r.push(e), r;
+function rl(e, r) {
+  return e.reduce((o, u, N) => {
+    const h = [];
+    return h.push(...o), h.push(...u), u.length && N < e.length - 1 && h.push(r), h;
   }, []);
 }
-const m = H(a), ll = Z(
+const i = I(v), el = H(
   ({
-    "aria-label": c,
-    buttonFirstProps: e,
-    buttonLastProps: h,
-    buttonNextProps: t,
-    buttonPrevProps: o,
-    dataTestId: r,
-    getHref: w,
-    listProps: b,
+    "aria-label": e,
+    buttonFirstProps: r,
+    buttonLastProps: o,
+    buttonNextProps: u,
+    buttonPrevProps: N,
+    condensed: h = !1,
+    dataTestId: c,
+    getHref: t,
+    listProps: G,
     navigationTexts: l,
-    onChange: u,
-    page: f,
-    pageCount: P,
-    rangeDisplay: G = 5,
+    onChange: m,
+    page: d,
+    pageCount: b,
+    rangeDisplay: q = 5,
     showEdgeControls: D = !1,
     size: _ = "lg",
-    ...p
-  }, q) => {
-    const J = v({ page: f, pageCount: P, rangeDisplay: G }), K = M(null), O = M(null), $ = f === 1, z = f === P, R = f === 1, k = f === P, j = (l == null ? void 0 : l.firstPage) || "First Page", E = (l == null ? void 0 : l.lastPage) || "Last Page", F = (l == null ? void 0 : l.nextPage) || "Next Page", L = (l == null ? void 0 : l.previousPage) || "Previous Page", Q = y(() => {
-      R || u(1);
-    }, [R, u]), S = y(() => {
-      k || u(P);
-    }, [k, P, u]), U = y(() => {
-      if ($) return;
-      const d = Math.max(f - 1, 1);
-      u(d);
-    }, [$, f, u]), V = y(() => {
+    ...J
+  }, K) => {
+    const O = T({ page: d, pageCount: b, rangeDisplay: q }), Q = M(null), S = M(null), w = d === 1, z = d === b, y = d === 1, R = d === b, j = (l == null ? void 0 : l.firstPage) || "First Page", E = (l == null ? void 0 : l.lastPage) || "Last Page", F = (l == null ? void 0 : l.nextPage) || "Next Page", L = (l == null ? void 0 : l.previousPage) || "Previous Page", U = k(() => {
+      y || m(1);
+    }, [y, m]), V = k(() => {
+      R || m(b);
+    }, [R, b, m]), W = k(() => {
+      if (w) return;
+      const f = Math.max(d - 1, 1);
+      m(f);
+    }, [w, d, m]), X = k(() => {
       if (z) return;
-      const d = Math.min(f + 1, P);
-      u(d);
-    }, [z, f, P, u]);
-    return /* @__PURE__ */ s("nav", { "aria-label": c ?? "Pagination", "data-testid": r, ref: q, ...p, children: /* @__PURE__ */ N("ol", { className: m("list"), ...b, children: [
-      D ? /* @__PURE__ */ s("li", { children: /* @__PURE__ */ N(
+      const f = Math.min(d + 1, b);
+      m(f);
+    }, [z, d, b, m]);
+    return /* @__PURE__ */ s("nav", { "aria-label": e ?? "Pagination", "data-testid": c, ref: K, ...J, children: /* @__PURE__ */ $("ol", { className: i("list"), ...G, children: [
+      D ? /* @__PURE__ */ s("li", { children: /* @__PURE__ */ $(
         "button",
         {
           "aria-label": j,
-          className: m(
+          className: i(
             "item",
             `size-${_}`,
             (l == null ? void 0 : l.firstPage) && "with-text-right",
-            R && "disabled-arrow"
+            y && "disabled-arrow"
           ),
-          "data-testid": r ? `${r}-arrow-first` : void 0,
-          disabled: R,
-          onClick: Q,
+          "data-testid": c ? `${c}-arrow-first` : void 0,
+          disabled: y,
+          onClick: U,
           type: "button",
-          ...e,
+          ...r,
           children: [
-            /* @__PURE__ */ s(A, { className: m("icon"), name: "angle-double-left", size: "lg" }),
+            /* @__PURE__ */ s(A, { className: i("icon"), name: "angle-double-left", size: "lg" }),
             l != null && l.firstPage ? j : null
           ]
         }
       ) }) : null,
-      /* @__PURE__ */ s("li", { children: /* @__PURE__ */ N(
+      /* @__PURE__ */ s("li", { children: /* @__PURE__ */ $(
         "button",
         {
           "aria-label": L,
-          className: m(
+          className: i(
             "item",
             `size-${_}`,
             (l == null ? void 0 : l.previousPage) && "with-text-right",
-            $ && "disabled-arrow"
+            w && "disabled-arrow"
           ),
-          "data-testid": r ? `${r}-arrow-prev` : void 0,
-          disabled: $,
-          onClick: U,
-          ref: K,
+          "data-testid": c ? `${c}-arrow-prev` : void 0,
+          disabled: w,
+          onClick: W,
+          ref: Q,
           type: "button",
-          ...o,
+          ...N,
           children: [
-            /* @__PURE__ */ s(A, { className: m("icon"), name: "angle-left", size: "lg" }),
+            /* @__PURE__ */ s(A, { className: i("icon"), name: "angle-left", size: "lg" }),
             l != null && l.previousPage ? L : null
           ]
         }
       ) }),
-      J.map(
-        (d, W) => d === "-" ? /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
+      h ? /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
+        n,
+        {
+          "aria-label": `Page ${d} of ${b}`,
+          as: "span",
+          className: "inline",
+          "data-testid": c ? `${c}-range` : void 0,
+          role: "status",
+          variant: `body-${_}`,
+          children: `${d} / ${b}`
+        }
+      ) }) : O.map(
+        (f, Y) => f === "-" ? /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
           "button",
           {
             "aria-label": "Collapsed Pages",
-            className: m("item", `size-${_}`),
+            className: i("item", `size-${_}`),
             type: "button",
             children: "..."
           }
-        ) }, `${W}-`) : /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
+        ) }, `${Y}-`) : /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
           "a",
           {
-            "aria-current": d === f,
-            className: m("item", "page", `size-${_}`),
-            "data-testid": r ? `${r}-${d}` : void 0,
-            href: w == null ? void 0 : w(d),
-            onClick: (X) => {
-              u && (X.preventDefault(), u(d));
+            "aria-current": f === d,
+            className: i("item", "page", `size-${_}`),
+            "data-testid": c ? `${c}-${f}` : void 0,
+            href: t == null ? void 0 : t(f),
+            onClick: (Z) => {
+              m && (Z.preventDefault(), m(f));
             },
-            children: d
+            children: f
           }
-        ) }, d)
+        ) }, f)
       ),
-      /* @__PURE__ */ s("li", { children: /* @__PURE__ */ N(
+      /* @__PURE__ */ s("li", { children: /* @__PURE__ */ $(
         "button",
         {
           "aria-label": F,
-          className: m(
+          className: i(
             "item",
             `size-${_}`,
             (l == null ? void 0 : l.nextPage) && "with-text-left",
             z && "disabled-arrow"
           ),
-          "data-testid": r ? `${r}-arrow-next` : void 0,
+          "data-testid": c ? `${c}-arrow-next` : void 0,
           disabled: z,
-          onClick: V,
-          ref: O,
+          onClick: X,
+          ref: S,
           type: "button",
-          ...t,
+          ...u,
           children: [
             l != null && l.nextPage ? F : null,
             /* @__PURE__ */ s(A, { name: "angle-right", size: "lg" })
           ]
         }
       ) }),
-      D ? /* @__PURE__ */ s("li", { children: /* @__PURE__ */ N(
+      D ? /* @__PURE__ */ s("li", { children: /* @__PURE__ */ $(
         "button",
         {
           "aria-label": E,
-          className: m(
+          className: i(
             "item",
             `size-${_}`,
             (l == null ? void 0 : l.lastPage) && "with-text-left",
-            k && "disabled-arrow"
+            R && "disabled-arrow"
           ),
-          "data-testid": r ? `${r}-arrow-last` : void 0,
-          disabled: k,
-          onClick: S,
+          "data-testid": c ? `${c}-arrow-last` : void 0,
+          disabled: R,
+          onClick: V,
           type: "button",
-          ...h,
+          ...o,
           children: [
             l != null && l.lastPage ? E : null,
-            /* @__PURE__ */ s(A, { className: m("icon"), name: "angle-double-right", size: "lg" })
+            /* @__PURE__ */ s(A, { className: i("icon"), name: "angle-double-right", size: "lg" })
           ]
         }
       ) }) : null
     ] }) });
   }
 );
-ll.displayName = "Pagination";
+el.displayName = "Pagination";
 export {
-  ll as Pagination
+  el as Pagination
 };