@strapi/design-system 0.0.0-599b75fb-test → 0.0.0-622b91ef

package/dist/NumberInput/NumberInput.js

@@ -1,172 +1,79 @@
-import t, { useRef as g } from "react";
-import { NumberParser as S, NumberFormatter as T } from "@internationalized/number";
-import { CarretDown as v } from "@strapi/icons";
-import r from "prop-types";
-import z from "styled-components";
-import { Field as B } from "../Field/Field.js";
-import { FieldLabel as U } from "../Field/FieldLabel.js";
-import { FieldInput as _ } from "../Field/FieldInput.js";
-import { FieldHint as j } from "../Field/FieldHint.js";
-import { FieldError as H } from "../Field/FieldError.js";
-import "../Field/FieldContext.js";
-import "../Field/FieldAction.js";
-import { Flex as M } from "../Flex/Flex.js";
-import { getDefaultLocale as W } from "../helpers/getDefaultLocale.js";
-import { KeyboardKeys as N } from "../helpers/keyboardKeys.js";
-import { useControllableState as X } from "../hooks/useControllableState.js";
-import { useId as Y } from "../hooks/useId.js";
-import { Icon as y } from "../Icon/Icon.js";
-import { sizes as G } from "../themes/sizes.js";
-const h = z.button`
+import { jsx as n, jsxs as h, Fragment as _ } from "react/jsx-runtime";
+import j, { useRef as b } from "react";
+import { NumberParser as E, NumberFormatter as M } from "@internationalized/number";
+import { CarretDown as N } from "@strapi/icons";
+import q from "styled-components";
+import { useDesignSystem as z } from "../DesignSystemProvider.js";
+import { KeyboardKeys as g } from "../helpers/keyboardKeys.js";
+import { useControllableState as H } from "../hooks/useControllableState.js";
+import { useId as O } from "../hooks/useId.js";
+import { FieldInput as T } from "../Field/FieldInput.js";
+import { Field as W } from "../Field/Field.js";
+import { Flex as X } from "../Flex/Flex.js";
+import { FieldLabel as Y } from "../Field/FieldLabel.js";
+import { Icon as w } from "../Icon/Icon.js";
+import { FieldHint as G } from "../Field/FieldHint.js";
+import { FieldError as J } from "../Field/FieldError.js";
+const x = q.button`
   display: flex;
   height: 1rem;
-  align-items: ${({ reverse: n }) => n ? "flex-end" : "flex-start"};
-  transform: translateY(${({ reverse: n }) => n ? "-2px" : "2px"});
-  cursor: ${({ disabled: n }) => n ? "not-allowed" : void 0};
+  align-items: ${({ reverse: t }) => t ? "flex-end" : "flex-start"};
+  transform: translateY(${({ reverse: t }) => t ? "-2px" : "2px"});
+  cursor: ${({ disabled: t }) => t ? "not-allowed" : void 0};
   svg {
     display: block;
     height: ${4 / 16}rem;
-    transform: ${({ reverse: n }) => n ? "rotateX(180deg)" : void 0};
+    transform: ${({ reverse: t }) => t ? "rotateX(180deg)" : void 0};
   }
-`, J = "", u = t.forwardRef(
-  ({
-    size: n,
-    startAction: w,
-    name: E,
-    hint: I,
-    error: x,
-    label: d,
-    labelAction: A,
-    locale: V,
-    id: F,
-    onValueChange: D,
-    value: C,
-    step: i,
-    required: k,
-    disabled: s,
-    ...P
-  }, R) => {
-    const O = Y(F), p = V || W(), m = g(new S(p, { style: "decimal" })), c = g(new T(p, { maximumFractionDigits: 20 })), [a, $] = X({
-      prop(e) {
-        const o = String(C);
-        return isNaN(o) || o !== e && e !== "" ? e : o;
-      },
-      defaultProp: J,
-      onChange(e) {
-        const o = m.current.parse(e);
-        D(isNaN(o) ? void 0 : o);
-      }
-    }), l = (e) => {
-      $(String(e));
-    }, q = ({ target: { value: e } }) => {
-      m.current.isValidPartialNumber(e) && l(e);
-    }, f = () => {
-      if (!a) {
-        l(i);
-        return;
-      }
-      const e = m.current.parse(a), o = isNaN(e) ? i : e + i;
-      l(c.current.format(o));
-    }, b = () => {
-      if (!a) {
-        l(-i);
-        return;
-      }
-      const e = m.current.parse(a), o = isNaN(e) ? -i : e - i;
-      l(c.current.format(o));
-    }, K = (e) => {
-      if (!s)
-        switch (e.key) {
-          case N.DOWN: {
-            e.preventDefault(), b();
-            break;
-          }
-          case N.UP: {
-            e.preventDefault(), f();
-            break;
-          }
+`, Q = "", he = j.forwardRef(({ size: t = "M", startAction: y, name: I, hint: F, error: V, label: c, labelAction: D, locale: A, id: C, onValueChange: k, value: u, step: a = 1, required: P = !1, disabled: m = !1, ...R }, S) => {
+  const $ = O(C), K = z("NumberInput"), d = A || K.locale, s = b(new E(d, { style: "decimal" })), l = b(new M(d, { maximumFractionDigits: 20 })), [o, v] = H({
+    prop(e) {
+      const r = String(u);
+      return isNaN(Number(r)) || r !== e && e !== "" ? e : l.current.format(Number(u));
+    },
+    defaultProp: Q,
+    onChange(e) {
+      const r = s.current.parse(e ?? "");
+      k(isNaN(r) ? void 0 : r);
+    }
+  }), i = (e) => {
+    v(String(e));
+  }, B = ({ target: { value: e } }) => {
+    s.current.isValidPartialNumber(e) && i(e);
+  }, f = () => {
+    if (!o) {
+      i(a);
+      return;
+    }
+    const e = s.current.parse(o), r = isNaN(e) ? a : e + a;
+    i(l.current.format(r));
+  }, p = () => {
+    if (!o) {
+      i(-a);
+      return;
+    }
+    const e = s.current.parse(o), r = isNaN(e) ? -a : e - a;
+    i(l.current.format(r));
+  }, L = (e) => {
+    if (!m)
+      switch (e.key) {
+        case g.DOWN: {
+          e.preventDefault(), p();
+          break;
+        }
+        case g.UP: {
+          e.preventDefault(), f();
+          break;
         }
-    }, L = () => {
-      if (a) {
-        const e = m.current.parse(a), o = isNaN(e) ? "" : c.current.format(e);
-        l(o);
-      }
-    };
-    return /* @__PURE__ */ t.createElement(B, { name: E, hint: I, error: x, id: O, required: k }, /* @__PURE__ */ t.createElement(M, { direction: "column", alignItems: "stretch", gap: 1 }, d && /* @__PURE__ */ t.createElement(U, { action: A }, d), /* @__PURE__ */ t.createElement(
-      _,
-      {
-        ref: R,
-        startAction: w,
-        disabled: s,
-        type: "text",
-        inputmode: "decimal",
-        onChange: q,
-        onKeyDown: K,
-        onBlur: L,
-        value: a,
-        size: n,
-        endAction: /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
-          h,
-          {
-            disabled: s,
-            "aria-hidden": !0,
-            reverse: !0,
-            onClick: f,
-            tabIndex: -1,
-            type: "button",
-            "data-testid": "ArrowUp"
-          },
-          /* @__PURE__ */ t.createElement(y, { as: v, color: "neutral500" })
-        ), /* @__PURE__ */ t.createElement(
-          h,
-          {
-            disabled: s,
-            "aria-hidden": !0,
-            onClick: b,
-            tabIndex: -1,
-            type: "button",
-            "data-testid": "ArrowDown"
-          },
-          /* @__PURE__ */ t.createElement(y, { as: v, color: "neutral500" })
-        )),
-        ...P
       }
-    ), /* @__PURE__ */ t.createElement(j, null), /* @__PURE__ */ t.createElement(H, null)));
-  }
-);
-u.displayName = "NumberInput";
-u.defaultProps = {
-  "aria-label": void 0,
-  disabled: !1,
-  error: void 0,
-  hint: void 0,
-  id: void 0,
-  label: void 0,
-  labelAction: void 0,
-  locale: void 0,
-  required: !1,
-  size: "M",
-  startAction: void 0,
-  step: 1,
-  value: void 0
-};
-u.propTypes = {
-  "aria-label": r.string,
-  disabled: r.bool,
-  error: r.string,
-  hint: r.oneOfType([r.string, r.node, r.arrayOf(r.node)]),
-  id: r.string,
-  label: r.string,
-  labelAction: r.element,
-  locale: r.string,
-  name: r.string.isRequired,
-  onValueChange: r.func.isRequired,
-  required: r.bool,
-  size: r.oneOf(Object.keys(G.input)),
-  startAction: r.element,
-  step: r.number,
-  value: r.number
-};
+  }, U = () => {
+    if (o) {
+      const e = s.current.parse(o), r = isNaN(e) ? "" : l.current.format(e);
+      i(r);
+    }
+  };
+  return n(W, { name: I, hint: F, error: V, id: $, required: P, children: h(X, { direction: "column", alignItems: "stretch", gap: 1, children: [c && n(Y, { action: D, children: c }), n(T, { ref: S, startAction: y, disabled: m, type: "text", inputMode: "decimal", onChange: B, onKeyDown: L, onBlur: U, value: o, size: t, endAction: h(_, { children: [n(x, { disabled: m, "aria-hidden": !0, reverse: !0, onClick: f, tabIndex: -1, type: "button", "data-testid": "ArrowUp", children: n(w, { as: N, color: "neutral500" }) }), n(x, { disabled: m, "aria-hidden": !0, onClick: p, tabIndex: -1, type: "button", "data-testid": "ArrowDown", children: n(w, { as: N, color: "neutral500" }) })] }), ...R }), n(G, {}), n(J, {})] }) });
+});
 export {
-  u as NumberInput
+  he as NumberInput
 };

package/dist/NumberInput/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./NumberInput.cjs");exports.NumberInput=e.NumberInput;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./NumberInput.cjs");exports.NumberInput=e.NumberInput;

package/dist/Pagination/Pagination.cjs

@@ -1,5 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react"),f=require("prop-types"),g=require("styled-components"),m=require("./PaginationContext.cjs"),b=require("../Flex/Flex.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function y(e){if(e&&e.__esModule)return e;const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const n=y(p),o=l(f),s=l(g),P=s.default.nav``,_=s.default(b.Flex)`
-  & > * + * {
-    margin-left: ${({theme:e})=>e.spaces[1]};
-  }
-`,i=({children:e,label:a,activePage:t,pageCount:r})=>{const u=n.useMemo(()=>({activePage:t,pageCount:r}),[t,r]);return n.createElement(m.PaginationContext.Provider,{value:u},n.createElement(P,{"aria-label":a},n.createElement(_,{as:"ul"},n.Children.map(e,(c,d)=>n.createElement("li",{key:d},c)))))};i.defaultProps={label:"pagination"};i.propTypes={activePage:o.default.number.isRequired,children:o.default.node.isRequired,label:o.default.string,pageCount:o.default.number.isRequired};exports.Pagination=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),l=require("react"),u=require("./PaginationContext.cjs"),d=require("../Box/Box.cjs"),x=require("../Flex/Flex.cjs");function g(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const i=g(l),f=({children:e,label:n="Pagination",activePage:t,pageCount:r})=>{const a=i.useMemo(()=>({activePage:t,pageCount:r}),[t,r]);return o.jsx(u.PaginationContext.Provider,{value:a,children:o.jsx(d.Box,{"aria-label":n,as:"nav",children:o.jsx(x.Flex,{as:"ol",gap:1,children:i.Children.map(e,(c,s)=>o.jsx("li",{children:c},s))})})})};exports.Pagination=f;

package/dist/Pagination/Pagination.js

@@ -1,25 +1,12 @@
-import * as e from "react";
-import r from "prop-types";
-import i from "styled-components";
+import { jsx as r } from "react/jsx-runtime";
+import * as n from "react";
 import { PaginationContext as c } from "./PaginationContext.js";
-import { Flex as u } from "../Flex/Flex.js";
-const d = i.nav``, f = i(u)`
-  & > * + * {
-    margin-left: ${({ theme: t }) => t.spaces[1]};
-  }
-`, o = ({ children: t, label: l, activePage: n, pageCount: a }) => {
-  const m = e.useMemo(() => ({ activePage: n, pageCount: a }), [n, a]);
-  return /* @__PURE__ */ e.createElement(c.Provider, { value: m }, /* @__PURE__ */ e.createElement(d, { "aria-label": l }, /* @__PURE__ */ e.createElement(f, { as: "ul" }, e.Children.map(t, (s, p) => /* @__PURE__ */ e.createElement("li", { key: p }, s)))));
-};
-o.defaultProps = {
-  label: "pagination"
-};
-o.propTypes = {
-  activePage: r.number.isRequired,
-  children: r.node.isRequired,
-  label: r.string,
-  pageCount: r.number.isRequired
+import { Box as p } from "../Box/Box.js";
+import { Flex as s } from "../Flex/Flex.js";
+const u = ({ children: t, label: a = "Pagination", activePage: o, pageCount: i }) => {
+  const e = n.useMemo(() => ({ activePage: o, pageCount: i }), [o, i]);
+  return r(c.Provider, { value: e, children: r(p, { "aria-label": a, as: "nav", children: r(s, { as: "ol", gap: 1, children: n.Children.map(t, (m, l) => r("li", { children: m }, l)) }) }) });
 };
 export {
-  o as Pagination
+  u as Pagination
 };

package/dist/Pagination/PaginationContext.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext({activePage:1,pageCount:1}),n=()=>e.useContext(t);exports.PaginationContext=t;exports.usePagination=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=t.createContext({activePage:1,pageCount:1}),n=()=>t.useContext(e);exports.PaginationContext=e;exports.usePagination=n;

package/dist/Pagination/components.cjs

@@ -1,22 +1,21 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const L=require("react"),g=require("@strapi/icons"),k=require("prop-types"),q=require("react-router-dom"),T=require("styled-components"),u=require("./PaginationContext.cjs"),x=require("../themes/utils.cjs"),E=require("../Typography/Typography.cjs"),l=require("../VisuallyHidden/VisuallyHidden.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=c(L),o=c(k),s=c(T),v=s.default(E.Typography)`
-  line-height: revert;
-`,$={active:!0},p=s.default(q.NavLink).withConfig({shouldForwardProp:(e,t)=>!$[e]&&t(e)})`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("@strapi/icons"),v=require("react-router-dom"),y=require("styled-components"),d=require("./PaginationContext.cjs"),b=require("../themes/utils.cjs"),o=require("../VisuallyHidden/VisuallyHidden.cjs"),c=require("../Typography/Typography.cjs"),P=require("../Box/Box.cjs"),j=e=>e&&e.__esModule?e:{default:e},l=j(y),k={active:!0},h=l.default(v.NavLink).withConfig({shouldForwardProp:(e,i)=>!k[e]&&i(e)})`
   padding: ${({theme:e})=>e.spaces[3]};
   border-radius: ${({theme:e})=>e.borderRadius};
-  box-shadow: ${({active:e,theme:t})=>e?t.shadows.filterShadow:void 0};
+  box-shadow: ${({active:e,theme:i})=>e?i.shadows.filterShadow:void 0};
   text-decoration: none;
   display: flex;
 
-  ${x.buttonFocusStyle}
-`,R=s.default(p)`
-  color: ${({theme:e,active:t})=>t?e.colors.primary700:e.colors.neutral800};
-  background: ${({theme:e,active:t})=>t?e.colors.neutral0:void 0};
+  ${b.buttonFocusStyle}
+`,L=l.default(h)`
+  color: ${({theme:e,active:i})=>i?e.colors.primary700:e.colors.neutral800};
+  background: ${({theme:e,active:i})=>i?e.colors.neutral0:void 0};
 
   &:hover {
     box-shadow: ${({theme:e})=>e.shadows.filterShadow};
   }
-`,m=s.default(p)`
-  font-size: 0.7rem;
+`,g=l.default(h)`
+  font-size: ${11/16}rem;
+
   svg path {
     fill: ${e=>e["aria-disabled"]?e.theme.colors.neutral300:e.theme.colors.neutral600};
   }
@@ -31,6 +30,4 @@
   ${e=>e["aria-disabled"]?`
   pointer-events: none;
     `:void 0}
-`,_=s.default(p)`
-  color: ${({theme:e})=>e.colors.neutral800};
-`,f=({children:e,to:t,...i})=>{const{activePage:n}=u.usePagination(),r=n===1;return a.default.createElement(m,{to:r?"#":t,"aria-disabled":r,tabIndex:r?-1:void 0,...i},a.default.createElement(l.VisuallyHidden,null,e),a.default.createElement(g.ChevronLeft,{"aria-hidden":!0}))};f.displayName="PreviousLink";const y=({children:e,to:t,...i})=>{const{activePage:n,pageCount:r}=u.usePagination(),d=n===r;return a.default.createElement(m,{to:d?"#":t,"aria-disabled":d,tabIndex:d?-1:void 0,...i},a.default.createElement(l.VisuallyHidden,null,e),a.default.createElement(g.ChevronRight,{"aria-hidden":!0}))};y.displayName="NextLink";const h=({number:e,children:t,...i})=>{const{activePage:n}=u.usePagination(),r=n===e;return a.default.createElement(R,{...i,active:r},a.default.createElement(l.VisuallyHidden,null,t),a.default.createElement(v,{"aria-hidden":!0,variant:"pi",fontWeight:r?"bold":null},e))};h.displayName="PageLink";const P=({children:e,...t})=>a.default.createElement(_,{...t,as:"div"},a.default.createElement(l.VisuallyHidden,null,e),a.default.createElement(v,{"aria-hidden":!0,variant:"pi"},"\u2026"));h.propTypes={children:o.default.node.isRequired,number:o.default.number.isRequired};const b={children:o.default.node.isRequired,to:o.default.string.isRequired};y.propTypes=b;f.propTypes=b;P.propTypes={children:o.default.node.isRequired};exports.Dots=P;exports.NextLink=y;exports.PageLink=h;exports.PreviousLink=f;
+`,x=({children:e,to:i,...r})=>{const{activePage:a}=d.usePagination(),t=a===1;return n.jsxs(g,{to:t?"#":i,"aria-disabled":t,tabIndex:t?-1:void 0,...r,children:[n.jsx(o.VisuallyHidden,{children:e}),n.jsx(u.ChevronLeft,{"aria-hidden":!0})]})};x.displayName="PreviousLink";const f=({children:e,to:i,...r})=>{const{activePage:a,pageCount:t}=d.usePagination(),s=a===t;return n.jsxs(g,{to:s?"#":i,"aria-disabled":s,tabIndex:s?-1:void 0,...r,children:[n.jsx(o.VisuallyHidden,{children:e}),n.jsx(u.ChevronRight,{"aria-hidden":!0})]})};f.displayName="NextLink";const p=({number:e,children:i,...r})=>{const{activePage:a}=d.usePagination(),t=a===e;return n.jsxs(L,{...r,active:t,children:[n.jsx(o.VisuallyHidden,{children:i}),n.jsx(c.Typography,{"aria-hidden":!0,fontWeight:t?"bold":void 0,lineHeight:"revert",variant:"pi",children:e})]})};p.displayName="PageLink";const $=({children:e,...i})=>n.jsxs(P.Box,{...i,children:[n.jsx(o.VisuallyHidden,{children:e}),n.jsx(c.Typography,{"aria-hidden":!0,lineHeight:"revert",textColor:"neutral800",variant:"pi",children:"…"})]});exports.Dots=$;exports.NextLink=f;exports.PageLink=p;exports.PreviousLink=x;

package/dist/Pagination/components.js

@@ -1,18 +1,16 @@
-import t from "react";
-import { ChevronLeft as b, ChevronRight as y } from "@strapi/icons";
-import n from "prop-types";
-import { NavLink as P } from "react-router-dom";
-import s from "styled-components";
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { ChevronLeft as f, ChevronRight as m } from "@strapi/icons";
+import { NavLink as v } from "react-router-dom";
+import l from "styled-components";
 import { usePagination as c } from "./PaginationContext.js";
-import { buttonFocusStyle as E } from "../themes/utils.js";
-import { Typography as k } from "../Typography/Typography.js";
-import { VisuallyHidden as l } from "../VisuallyHidden/VisuallyHidden.js";
-const u = s(k)`
-  line-height: revert;
-`, L = {
+import { buttonFocusStyle as g } from "../themes/utils.js";
+import { VisuallyHidden as d } from "../VisuallyHidden/VisuallyHidden.js";
+import { Typography as h } from "../Typography/Typography.js";
+import { Box as b } from "../Box/Box.js";
+const x = {
   active: !0
-}, p = s(P).withConfig({
-  shouldForwardProp: (e, r) => !L[e] && r(e)
+}, u = l(v).withConfig({
+  shouldForwardProp: (e, r) => !x[e] && r(e)
 })`
   padding: ${({ theme: e }) => e.spaces[3]};
   border-radius: ${({ theme: e }) => e.borderRadius};
@@ -20,16 +18,17 @@ const u = s(k)`
   text-decoration: none;
   display: flex;
 
-  ${E}
-`, $ = s(p)`
+  ${g}
+`, k = l(u)`
   color: ${({ theme: e, active: r }) => r ? e.colors.primary700 : e.colors.neutral800};
   background: ${({ theme: e, active: r }) => r ? e.colors.neutral0 : void 0};
 
   &:hover {
     box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
   }
-`, m = s(p)`
-  font-size: 0.7rem;
+`, p = l(u)`
+  font-size: ${11 / 16}rem;
+
   svg path {
     fill: ${(e) => e["aria-disabled"] ? e.theme.colors.neutral300 : e.theme.colors.neutral600};
   }
@@ -44,60 +43,25 @@ const u = s(k)`
   ${(e) => e["aria-disabled"] ? `
   pointer-events: none;
     ` : void 0}
-`, x = s(p)`
-  color: ${({ theme: e }) => e.colors.neutral800};
-`, h = ({ children: e, to: r, ...a }) => {
-  const { activePage: i } = c(), o = i === 1;
-  return /* @__PURE__ */ t.createElement(
-    m,
-    {
-      to: o ? "#" : r,
-      "aria-disabled": o,
-      tabIndex: o ? -1 : void 0,
-      ...a
-    },
-    /* @__PURE__ */ t.createElement(l, null, e),
-    /* @__PURE__ */ t.createElement(b, { "aria-hidden": !0 })
-  );
-};
-h.displayName = "PreviousLink";
-const v = ({ children: e, to: r, ...a }) => {
-  const { activePage: i, pageCount: o } = c(), d = i === o;
-  return /* @__PURE__ */ t.createElement(
-    m,
-    {
-      to: d ? "#" : r,
-      "aria-disabled": d,
-      tabIndex: d ? -1 : void 0,
-      ...a
-    },
-    /* @__PURE__ */ t.createElement(l, null, e),
-    /* @__PURE__ */ t.createElement(y, { "aria-hidden": !0 })
-  );
-};
-v.displayName = "NextLink";
-const f = ({ number: e, children: r, ...a }) => {
-  const { activePage: i } = c(), o = i === e;
-  return /* @__PURE__ */ t.createElement($, { ...a, active: o }, /* @__PURE__ */ t.createElement(l, null, r), /* @__PURE__ */ t.createElement(u, { "aria-hidden": !0, variant: "pi", fontWeight: o ? "bold" : null }, e));
-};
-f.displayName = "PageLink";
-const w = ({ children: e, ...r }) => /* @__PURE__ */ t.createElement(x, { ...r, as: "div" }, /* @__PURE__ */ t.createElement(l, null, e), /* @__PURE__ */ t.createElement(u, { "aria-hidden": !0, variant: "pi" }, "\u2026"));
-f.propTypes = {
-  children: n.node.isRequired,
-  number: n.number.isRequired
+`, L = ({ children: e, to: r, ...n }) => {
+  const { activePage: t } = c(), i = t === 1;
+  return a(p, { to: i ? "#" : r, "aria-disabled": i, tabIndex: i ? -1 : void 0, ...n, children: [o(d, { children: e }), o(f, { "aria-hidden": !0 })] });
 };
-const g = {
-  children: n.node.isRequired,
-  to: n.string.isRequired
+L.displayName = "PreviousLink";
+const P = ({ children: e, to: r, ...n }) => {
+  const { activePage: t, pageCount: i } = c(), s = t === i;
+  return a(p, { to: s ? "#" : r, "aria-disabled": s, tabIndex: s ? -1 : void 0, ...n, children: [o(d, { children: e }), o(m, { "aria-hidden": !0 })] });
 };
-v.propTypes = g;
-h.propTypes = g;
-w.propTypes = {
-  children: n.node.isRequired
+P.displayName = "NextLink";
+const $ = ({ number: e, children: r, ...n }) => {
+  const { activePage: t } = c(), i = t === e;
+  return a(k, { ...n, active: i, children: [o(d, { children: r }), o(h, { "aria-hidden": !0, fontWeight: i ? "bold" : void 0, lineHeight: "revert", variant: "pi", children: e })] });
 };
+$.displayName = "PageLink";
+const F = ({ children: e, ...r }) => a(b, { ...r, children: [o(d, { children: e }), o(h, { "aria-hidden": !0, lineHeight: "revert", textColor: "neutral800", variant: "pi", children: "…" })] });
 export {
-  w as Dots,
-  v as NextLink,
-  f as PageLink,
-  h as PreviousLink
+  F as Dots,
+  P as NextLink,
+  $ as PageLink,
+  L as PreviousLink
 };

package/dist/Pagination/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./Pagination.cjs"),e=require("./components.cjs");exports.Pagination=i.Pagination;exports.Dots=e.Dots;exports.NextLink=e.NextLink;exports.PageLink=e.PageLink;exports.PreviousLink=e.PreviousLink;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Pagination.cjs"),i=require("./components.cjs");exports.Pagination=e.Pagination;exports.Dots=i.Dots;exports.NextLink=i.NextLink;exports.PageLink=i.PageLink;exports.PreviousLink=i.PreviousLink;

package/dist/Popover/Popover.cjs

@@ -1,9 +1,8 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),w=require("react"),a=require("@floating-ui/react-dom"),y=require("styled-components"),u=require("../Box/Box.cjs"),k=require("../hooks/useIntersection.cjs"),_=require("../Portal/Portal.cjs"),v=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function S(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,r.get?r:{enumerable:!0,get:()=>e[o]})}}return t.default=e,Object.freeze(t)}const l=S(w),f=v(y),O=["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"],$=f.default(u.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),M=require("react"),u=require("@floating-ui/react-dom"),z=require("@radix-ui/react-focus-scope"),m=require("@strapi/ui-primitives"),T=require("aria-hidden"),W=require("react-remove-scroll"),A=require("styled-components"),B=require("../DismissibleLayer/index.cjs"),P=require("../helpers/strings.cjs"),H=require("../hooks/useComposeRefs.cjs"),K=require("../hooks/useId.cjs"),N=require("../hooks/useIntersection.cjs"),g=require("../Box/Box.cjs"),U=require("../Portal/Portal.cjs"),V=e=>e&&e.__esModule?e:{default:e};function Z(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const s=Z(M),R=V(A),G=["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"],J=R.default(g.Box)`
   box-shadow: ${({theme:e})=>e.shadows.filterShadow};
-  z-index: 4;
+  z-index: ${({theme:e})=>e.zIndices[0]};
   border: 1px solid ${({theme:e})=>e.colors.neutral150};
-  background: ${({theme:e})=>e.colors.neutral0};
-`,p=({source:e,children:t,spacing:o=0,fullWidth:r=!1,placement:s="bottom-start",centered:i=!1,...c})=>{const[h,g]=l.useState(void 0),{x:m,y:x,reference:d,floating:j,strategy:P}=a.useFloating({strategy:"fixed",placement:i?"bottom":s,middleware:[a.offset({mainAxis:o}),a.shift(),a.flip()],whileElementsMounted:a.autoUpdate});return l.useLayoutEffect(()=>{d(e.current)},[e,d]),l.useLayoutEffect(()=>{r&&g(e.current.offsetWidth)},[r,e]),n.jsx($,{ref:j,style:{left:m,top:x,position:P,width:h||void 0},hasRadius:!0,background:"neutral0",padding:1,...c,children:t})},b=({children:e,intersectionId:t,onReachEnd:o,...r})=>{const s=l.useRef(null);return k.useIntersection(s,o??(()=>{}),{selectorToWatch:`#${t}`,skipWhen:!t||!o}),n.jsxs(q,{ref:s,...r,children:[e,t&&o&&n.jsx(u.Box,{id:t,width:"100%",height:"1px"})]})},q=f.default(u.Box)`
+`,E=s.forwardRef(({source:e,children:r,spacing:t=0,fullWidth:n=!1,placement:c="bottom-start",centered:l=!1,onEscapeKeyDown:d,onPointerDownOutside:f,onDismiss:a,onFocusOutside:p,...O},S)=>{const[h,k]=s.useState(null),[j,q]=s.useState(void 0),w=s.useRef(!1),{x:C,y:D,reference:v,floating:_,strategy:L}=u.useFloating({strategy:"fixed",placement:l?"bottom":c,middleware:[u.offset({mainAxis:t}),u.shift(),u.flip()],whileElementsMounted:u.autoUpdate});s.useLayoutEffect(()=>{v(e.current)},[e,v]),s.useLayoutEffect(()=>{n&&q(e.current.offsetWidth)},[n,e]),s.useEffect(()=>{if(h)return T.hideOthers(h)},[h]);const x=m.useCallbackRef(a);s.useEffect(()=>{const o=()=>{x()};return window.addEventListener("blur",o),window.addEventListener("resize",o),()=>{window.removeEventListener("blur",o),window.removeEventListener("resize",o)}},[x]);const I=H.useComposedRefs(S,o=>k(o),_);return i.jsx(W.RemoveScroll,{allowPinchZoom:!0,children:i.jsx(z.FocusScope,{asChild:!0,loop:!0,trapped:!0,onUnmountAutoFocus:o=>{o.preventDefault(),w.current||e.current?.focus({preventScroll:!0})},children:i.jsx(B.DismissibleLayer,{asChild:!0,onEscapeKeyDown:d,onPointerDownOutside:m.composeEventHandlers(f,o=>{const b=o.detail.originalEvent,$=b.button===0&&b.ctrlKey===!0,F=b.button===2||$;w.current=F},{checkForDefaultPrevented:!1}),onFocusOutside:m.composeEventHandlers(p,o=>o.preventDefault(),{checkForDefaultPrevented:!1}),onDismiss:a,children:i.jsx(J,{ref:I,style:{left:C,top:D,position:L,width:j||void 0},hasRadius:!0,background:"neutral0",padding:1,...O,children:r})})})})}),y=({children:e,intersectionId:r,onReachEnd:t,...n})=>{const c=s.useRef(null),l=K.useId();return N.useIntersection(c,t??(()=>{}),{selectorToWatch:`#${P.stripReactIdOfColon(l)}`,skipWhen:!r||!t}),i.jsxs(Q,{ref:c,...n,children:[e,r&&t&&i.jsx(g.Box,{id:P.stripReactIdOfColon(l),width:"100%",height:"1px"})]})},Q=R.default(g.Box)`
   // 16 is base base size, 3 is the factor to get closer to 40px and 5 is the number of elements visible in the list
   max-height: ${3*5}rem;
   overflow-y: auto;
@@ -23,4 +22,4 @@
     border-radius: ${({theme:e})=>e.borderRadius};
     margin-right: 10px;
   }
-`,E=({children:e,source:t,spacing:o,fullWidth:r,placement:s,centered:i,...c})=>n.jsx(_.Portal,{children:n.jsx(p,{source:t,spacing:o,fullWidth:r,placement:s,centered:i,children:n.jsx(b,{...c,children:e})})});exports.Content=p;exports.POPOVER_PLACEMENTS=O;exports.Popover=E;exports.Scrolling=b;
+`,X=({children:e,source:r,spacing:t,fullWidth:n,placement:c,centered:l,onEscapeKeyDown:d,onPointerDownOutside:f,onDismiss:a,...p})=>i.jsx(U.Portal,{children:i.jsx(E,{source:r,spacing:t,fullWidth:n,placement:c,centered:l,onEscapeKeyDown:d,onPointerDownOutside:f,onDismiss:a,children:i.jsx(y,{...p,children:e})})});exports.Content=E;exports.POPOVER_PLACEMENTS=G;exports.Popover=X;exports.Scrolling=y;