@strapi/design-system 1.7.6 → 1.7.8

package/dist/Pagination/components.js

@@ -1,19 +1,16 @@
-import { jsxs as d, jsx as i } from "react/jsx-runtime";
-import "react";
-import { ChevronLeft as y, ChevronRight as P } from "@strapi/icons";
-import n from "prop-types";
-import { NavLink as x } from "react-router-dom";
-import s from "styled-components";
-import { usePagination as p } from "./PaginationContext.js";
-import { buttonFocusStyle as k } from "../themes/utils.js";
-import { Typography as L } from "../Typography/Typography.js";
-import { VisuallyHidden as l } from "../VisuallyHidden/VisuallyHidden.js";
-const u = s(L)`
-  line-height: revert;
-`, $ = {
+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 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
-}, h = s(x).withConfig({
-  shouldForwardProp: (e, r) => !$[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};
@@ -21,16 +18,17 @@ const u = s(L)`
   text-decoration: none;
   display: flex;
 
-  ${k}
-`, w = s(h)`
+  ${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(h)`
-  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};
   }
@@ -45,70 +43,25 @@ const u = s(L)`
   ${(e) => e["aria-disabled"] ? `
   pointer-events: none;
     ` : void 0}
-`, T = s(h)`
-  color: ${({ theme: e }) => e.colors.neutral800};
-`, v = ({ children: e, to: r, ...t }) => {
-  const { activePage: a } = p(), o = a === 1;
-  return /* @__PURE__ */ d(
-    m,
-    {
-      to: o ? "#" : r,
-      "aria-disabled": o,
-      tabIndex: o ? -1 : void 0,
-      ...t,
-      children: [
-        /* @__PURE__ */ i(l, { children: e }),
-        /* @__PURE__ */ i(y, { "aria-hidden": !0 })
-      ]
-    }
-  );
-};
-v.displayName = "PreviousLink";
-const f = ({ children: e, to: r, ...t }) => {
-  const { activePage: a, pageCount: o } = p(), c = a === o;
-  return /* @__PURE__ */ d(
-    m,
-    {
-      to: c ? "#" : r,
-      "aria-disabled": c,
-      tabIndex: c ? -1 : void 0,
-      ...t,
-      children: [
-        /* @__PURE__ */ i(l, { children: e }),
-        /* @__PURE__ */ i(P, { "aria-hidden": !0 })
-      ]
-    }
-  );
-};
-f.displayName = "NextLink";
-const g = ({ number: e, children: r, ...t }) => {
-  const { activePage: a } = p(), o = a === e;
-  return /* @__PURE__ */ d(w, { ...t, active: o, children: [
-    /* @__PURE__ */ i(l, { children: r }),
-    /* @__PURE__ */ i(u, { "aria-hidden": !0, variant: "pi", fontWeight: o ? "bold" : null, children: e })
-  ] });
-};
-g.displayName = "PageLink";
-const R = ({ children: e, ...r }) => /* @__PURE__ */ d(T, { ...r, as: "div", children: [
-  /* @__PURE__ */ i(l, { children: e }),
-  /* @__PURE__ */ i(u, { "aria-hidden": !0, variant: "pi", children: "…" })
-] });
-g.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 b = {
-  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 })] });
 };
-f.propTypes = b;
-v.propTypes = b;
-R.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 {
-  R as Dots,
-  f as NextLink,
-  g as PageLink,
-  v as PreviousLink
+  F as Dots,
+  P as NextLink,
+  $ as PageLink,
+  L as PreviousLink
 };

package/dist/Popover/Popover.cjs

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

package/dist/Popover/Popover.js

@@ -1,19 +1,19 @@
-import { jsx as o, jsxs as S } from "react/jsx-runtime";
-import * as n from "react";
-import { useFloating as $, offset as C, shift as L, flip as O, autoUpdate as z } from "@floating-ui/react-dom";
-import { FocusScope as F } from "@radix-ui/react-focus-scope";
-import { useCallbackRef as I } from "@strapi/ui-primitives";
-import { hideOthers as W } from "aria-hidden";
-import { RemoveScroll as A } from "react-remove-scroll";
-import g from "styled-components";
-import { DismissibleLayer as M } from "../DismissibleLayer/index.js";
-import { stripReactIdOfColon as w } from "../helpers/strings.js";
-import { useComposedRefs as j } from "../hooks/useComposeRefs.js";
-import { useId as K } from "../hooks/useId.js";
-import { useIntersection as T } from "../hooks/useIntersection.js";
-import { Box as p } from "../Box/Box.js";
-import { Portal as U } from "../Portal/Portal.js";
-const ie = [
+import { jsx as r, jsxs as z } from "react/jsx-runtime";
+import * as o from "react";
+import { useFloating as I, offset as W, shift as A, flip as K, autoUpdate as j } from "@floating-ui/react-dom";
+import { FocusScope as M } from "@radix-ui/react-focus-scope";
+import { useCallbackRef as T, composeEventHandlers as v } from "@strapi/ui-primitives";
+import { hideOthers as U } from "aria-hidden";
+import { RemoveScroll as B } from "react-remove-scroll";
+import x from "styled-components";
+import { DismissibleLayer as H } from "../DismissibleLayer/index.js";
+import { stripReactIdOfColon as k } from "../helpers/strings.js";
+import { useComposedRefs as N } from "../hooks/useComposeRefs.js";
+import { useId as V } from "../hooks/useId.js";
+import { useIntersection as Z } from "../hooks/useIntersection.js";
+import { Box as h } from "../Box/Box.js";
+import { Portal as _ } from "../Portal/Portal.js";
+const fe = [
   "top",
   "top-start",
   "top-end",
@@ -26,80 +26,81 @@ const ie = [
   "left",
   "left-start",
   "left-end"
-], B = g(p)`
+], q = x(h)`
   box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
   z-index: ${({ theme: e }) => e.zIndices[0]};
   border: 1px solid ${({ theme: e }) => e.colors.neutral150};
   background: ${({ theme: e }) => e.colors.neutral0};
-`, N = ({ source: e, children: s, spacing: r = 0, fullWidth: i = !1, placement: l = "bottom-start", centered: a = !1, onEscapeKeyDown: c, onPointerDownOutside: u, onDismiss: d, ...f }) => {
-  const [m, v] = n.useState(null), [x, E] = n.useState(void 0), { x: k, y, reference: h, floating: P, strategy: D } = $({
+`, G = ({ source: e, children: s, spacing: n = 0, fullWidth: i = !1, placement: l = "bottom-start", centered: a = !1, onEscapeKeyDown: d, onPointerDownOutside: u, onDismiss: c, onFocusOutside: f, ...E }) => {
+  const [m, P] = o.useState(null), b = o.useRef(!1), [R, y] = o.useState(void 0), { x: C, y: D, reference: w, floating: L, strategy: O } = I({
     strategy: "fixed",
     placement: a ? "bottom" : l,
     middleware: [
-      C({
-        mainAxis: r
+      W({
+        mainAxis: n
       }),
-      L(),
-      O()
+      A(),
+      K()
     ],
-    whileElementsMounted: z
+    whileElementsMounted: j
   });
-  n.useLayoutEffect(() => {
-    h(e.current);
-  }, [e, h]), n.useLayoutEffect(() => {
-    i && E(e.current.offsetWidth);
-  }, [i, e]), n.useEffect(() => {
+  o.useLayoutEffect(() => {
+    w(e.current);
+  }, [e, w]), o.useLayoutEffect(() => {
+    i && y(e.current.offsetWidth);
+  }, [i, e]), o.useEffect(() => {
     if (m)
-      return W(m);
+      return U(m);
   }, [m]);
-  const b = I(d);
-  n.useEffect(() => {
+  const g = T(c);
+  o.useEffect(() => {
     const t = () => {
-      b();
+      g();
     };
     return window.addEventListener("blur", t), window.addEventListener("resize", t), () => {
       window.removeEventListener("blur", t), window.removeEventListener("resize", t);
     };
-  }, [b]);
-  const R = j((t) => v(t), P);
-  return o(A, { allowPinchZoom: !0, children: o(F, {
+  }, [g]);
+  const S = N((t) => P(t), L);
+  return r(B, { allowPinchZoom: !0, children: r(M, {
     asChild: !0,
+    loop: !0,
     // we make sure we're not trapping once it's been closed
     // (closed !== unmounted when animating out)
     trapped: !0,
-    onMountAutoFocus: (t) => {
-      t.preventDefault();
-    },
     onUnmountAutoFocus: (t) => {
-      e.current?.focus({ preventScroll: !0 }), t.preventDefault();
+      t.preventDefault(), b.current || e.current?.focus({ preventScroll: !0 });
     },
-    children: o(M, {
+    children: r(H, {
       asChild: !0,
       disableOutsidePointerEvents: !0,
-      onEscapeKeyDown: c,
-      onPointerDownOutside: u,
-      // When focus is trapped, a focusout event may still happen.
+      onEscapeKeyDown: d,
+      onPointerDownOutside: v(u, (t) => {
+        const p = t.detail.originalEvent, $ = p.button === 0 && p.ctrlKey === !0, F = p.button === 2 || $;
+        b.current = F;
+      }, { checkForDefaultPrevented: !1 }),
+      // When focus is trapped, a `focusout` event may still happen.
       // We make sure we don't trigger our `onDismiss` in such case.
-      onFocusOutside: (t) => {
-        t.preventDefault();
-      },
-      onDismiss: d,
-      children: o(B, { ref: R, style: {
-        left: k,
-        top: y,
-        position: D,
-        width: x || void 0
-      }, hasRadius: !0, background: "neutral0", padding: 1, ...f, children: s })
+      onFocusOutside: v(f, (t) => t.preventDefault(), {
+        checkForDefaultPrevented: !1
+      }),
+      onDismiss: c,
+      children: r(q, { ref: S, style: {
+        left: C,
+        top: D,
+        position: O,
+        width: R || void 0
+      }, hasRadius: !0, background: "neutral0", padding: 1, ...E, children: s })
     })
   }) });
-}, V = ({ children: e, intersectionId: s, onReachEnd: r, ...i }) => {
-  const l = n.useRef(null), a = K();
-  return T(l, r ?? (() => {
+}, J = ({ children: e, intersectionId: s, onReachEnd: n, ...i }) => {
+  const l = o.useRef(null), a = V();
+  return Z(l, n ?? (() => {
   }), {
-    selectorToWatch: `#${w(a)}`,
-    skipWhen: !s || !r
-  }), S(Z, { ref: l, ...i, children: [e, s && r && o(p, { id: w(a), width: "100%", height: "1px" })] });
-}, Z = g(p)`
+    selectorToWatch: `#${k(a)}`,
+    skipWhen: !s || !n
+  }), z(Q, { ref: l, ...i, children: [e, s && n && r(h, { id: k(a), width: "100%", height: "1px" })] });
+}, Q = x(h)`
   // 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;
@@ -119,10 +120,10 @@ const ie = [
     border-radius: ${({ theme: e }) => e.borderRadius};
     margin-right: 10px;
   }
-`, le = ({ children: e, source: s, spacing: r, fullWidth: i, placement: l, centered: a, onEscapeKeyDown: c, onPointerDownOutside: u, onDismiss: d, ...f }) => o(U, { children: o(N, { source: s, spacing: r, fullWidth: i, placement: l, centered: a, onEscapeKeyDown: c, onPointerDownOutside: u, onDismiss: d, children: o(V, { ...f, children: e }) }) });
+`, me = ({ children: e, source: s, spacing: n, fullWidth: i, placement: l, centered: a, onEscapeKeyDown: d, onPointerDownOutside: u, onDismiss: c, ...f }) => r(_, { children: r(G, { source: s, spacing: n, fullWidth: i, placement: l, centered: a, onEscapeKeyDown: d, onPointerDownOutside: u, onDismiss: c, children: r(J, { ...f, children: e }) }) });
 export {
-  N as Content,
-  ie as POPOVER_PLACEMENTS,
-  le as Popover,
-  V as Scrolling
+  G as Content,
+  fe as POPOVER_PLACEMENTS,
+  me as Popover,
+  J as Scrolling
 };

package/dist/ProgressBar/ProgressBar.cjs

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime");require("react");const d=require("prop-types"),c=require("styled-components"),p=require("../Box/Box.cjs"),s=e=>e&&e.__esModule?e:{default:e},r=s(d),b=s(c),f=b.default(p.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),i=require("styled-components"),l=require("../Box/Box.cjs"),n=r=>r&&r.__esModule?r:{default:r},d=n(i),c=d.default(l.Box)`
   &:before {
-    background-color: ${({theme:e})=>e.colors.neutral0};
-    border-radius: ${({theme:e})=>e.borderRadius};
+    background-color: ${({theme:r})=>r.colors.neutral0};
+    border-radius: ${({theme:r})=>r.borderRadius};
     bottom: 0;
     content: '';
     position: absolute;
     top: 0;
-    width: ${({value:e})=>`${e}%`};
+    width: ${({value:r})=>`${r}%`};
   }
-`,o=({min:e,max:u,value:t,children:i,size:a,...n})=>l.jsx(f,{background:"neutral600",hasRadius:!0,"aria-label":i,"aria-valuemax":u,"aria-valuemin":e,"aria-valuenow":t,height:a==="S"?1:2,position:"relative",role:"progressbar",value:t,width:a==="S"?"78px":"102px",...n});o.defaultProps={min:0,max:100,value:0,size:"M"};o.propTypes={children:r.default.node.isRequired,max:r.default.number,min:r.default.number,size:r.default.oneOf(["S","M"]),value:r.default.number};exports.ProgressBar=o;
+`,b=({min:r=0,max:t=100,value:e=0,children:a,size:o="M",...s})=>u.jsx(c,{background:"neutral600",hasRadius:!0,"aria-label":a,"aria-valuemax":t,"aria-valuemin":r,"aria-valuenow":e,height:o==="S"?1:2,position:"relative",role:"progressbar",value:e,width:o==="S"?"78px":"102px",...s});exports.ProgressBar=b;

package/dist/ProgressBar/ProgressBar.js

@@ -1,9 +1,7 @@
-import { jsx as m } from "react/jsx-runtime";
-import "react";
-import o from "prop-types";
-import u from "styled-components";
-import { Box as p } from "../Box/Box.js";
-const l = u(p)`
+import { jsx as s } from "react/jsx-runtime";
+import l from "styled-components";
+import { Box as n } from "../Box/Box.js";
+const u = l(n)`
   &:before {
     background-color: ${({ theme: r }) => r.colors.neutral0};
     border-radius: ${({ theme: r }) => r.borderRadius};
@@ -13,36 +11,7 @@ const l = u(p)`
     top: 0;
     width: ${({ value: r }) => `${r}%`};
   }
-`, i = ({ min: r, max: t, value: e, children: s, size: a, ...n }) => /* @__PURE__ */ m(
-  l,
-  {
-    background: "neutral600",
-    hasRadius: !0,
-    "aria-label": s,
-    "aria-valuemax": t,
-    "aria-valuemin": r,
-    "aria-valuenow": e,
-    height: a === "S" ? 1 : 2,
-    position: "relative",
-    role: "progressbar",
-    value: e,
-    width: a === "S" ? "78px" : "102px",
-    ...n
-  }
-);
-i.defaultProps = {
-  min: 0,
-  max: 100,
-  value: 0,
-  size: "M"
-};
-i.propTypes = {
-  children: o.node.isRequired,
-  max: o.number,
-  min: o.number,
-  size: o.oneOf(["S", "M"]),
-  value: o.number
-};
+`, m = ({ min: r = 0, max: e = 100, value: o = 0, children: t, size: a = "M", ...i }) => s(u, { background: "neutral600", hasRadius: !0, "aria-label": t, "aria-valuemax": e, "aria-valuemin": r, "aria-valuenow": o, height: a === "S" ? 1 : 2, position: "relative", role: "progressbar", value: o, width: a === "S" ? "78px" : "102px", ...i });
 export {
-  i as ProgressBar
+  m as ProgressBar
 };

package/dist/Radio/Radio.cjs

@@ -1,4 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const i=require("prop-types"),l=require("styled-components"),n=require("../BaseRadio/BaseRadio.cjs"),u=require("../Typography/Typography.cjs"),d=require("../Box/Box.cjs"),o=e=>e&&e.__esModule?e:{default:e},r=o(i),c=o(l),p=c.default(u.Typography)`
-  display: flex;
-  align-items: center;
-`,s=({children:e,...a})=>t.jsxs(p,{as:"label",textColor:"neutral800",children:[t.jsx(n.BaseRadio,{...a}),t.jsx(d.Box,{paddingLeft:2,children:e})]});s.propTypes={children:r.default.node.isRequired,value:r.default.any.isRequired};exports.Radio=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../BaseRadio/BaseRadio.cjs"),s=require("../Flex/Flex.cjs"),a=require("../Typography/Typography.cjs"),i=({children:r,...t})=>e.jsxs(s.Flex,{alignItems:"center",as:"label",gap:2,children:[e.jsx(o.BaseRadio,{...t}),e.jsx(a.Typography,{textColor:"neutral800",children:r})]});exports.Radio=i;

package/dist/Radio/Radio.js

@@ -1,21 +1,8 @@
 import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import "react";
-import o from "prop-types";
-import p from "styled-components";
-import { BaseRadio as m } from "../BaseRadio/BaseRadio.js";
-import { Typography as s } from "../Typography/Typography.js";
-import { Box as a } from "../Box/Box.js";
-const l = p(s)`
-  display: flex;
-  align-items: center;
-`, d = ({ children: e, ...i }) => /* @__PURE__ */ t(l, { as: "label", textColor: "neutral800", children: [
-  /* @__PURE__ */ r(m, { ...i }),
-  /* @__PURE__ */ r(a, { paddingLeft: 2, children: e })
-] });
-d.propTypes = {
-  children: o.node.isRequired,
-  value: o.any.isRequired
-};
+import { BaseRadio as a } from "../BaseRadio/BaseRadio.js";
+import { Flex as i } from "../Flex/Flex.js";
+import { Typography as m } from "../Typography/Typography.js";
+const x = ({ children: o, ...e }) => t(i, { alignItems: "center", as: "label", gap: 2, children: [r(a, { ...e }), r(m, { textColor: "neutral800", children: o })] });
 export {
-  d as Radio
+  x as Radio
 };

package/dist/Searchbar/SearchForm.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const o=e=>r.jsx("form",{...e,role:"search"});exports.SearchForm=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=e=>r.jsx("form",{...e,role:"search"});exports.SearchForm=o;

package/dist/Searchbar/SearchForm.js

@@ -1,6 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import "react";
-const t = (r) => /* @__PURE__ */ o("form", { ...r, role: "search" });
+const m = (r) => o("form", { ...r, role: "search" });
 export {
-  t as SearchForm
+  m as SearchForm
 };

package/dist/Searchbar/Searchbar.cjs

@@ -1,29 +1,28 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),u=require("@strapi/icons"),S=require("prop-types"),m=require("styled-components"),$=require("../themes/sizes.cjs"),v=require("../themes/utils.cjs"),i=require("../Field/FieldInput.cjs"),c=require("../Flex/Flex.cjs"),_=require("../Field/Field.cjs"),z=require("../VisuallyHidden/VisuallyHidden.cjs"),C=require("../Field/FieldLabel.cjs"),I=require("../Field/FieldAction.cjs"),d=e=>e&&e.__esModule?e:{default:e},s=d(S),l=d(m),w=l.default(c.Flex)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("react"),l=require("@strapi/icons"),m=require("styled-components"),F=require("../hooks/useComposeRefs.cjs"),R=require("../themes/utils.cjs"),t=require("../Field/FieldInput.cjs"),S=require("../Field/Field.cjs"),y=require("../VisuallyHidden/VisuallyHidden.cjs"),$=require("../Field/FieldLabel.cjs"),C=require("../Field/FieldAction.cjs"),I=e=>e&&e.__esModule?e:{default:e},s=I(m),w=s.default(l.Cross)`
   font-size: 0.5rem;
-  svg path {
+  path {
     fill: ${({theme:e})=>e.colors.neutral400};
   }
-`,p=l.default(c.Flex)`
+`,c=s.default(l.Search)`
   font-size: 0.8rem;
-
-  svg path {
+  path {
     fill: ${({theme:e})=>e.colors.neutral800};
   }
-`,W=l.default.div`
+`,_=s.default.div`
   border-radius: ${({theme:e})=>e.borderRadius};
   box-shadow: ${({theme:e})=>e.shadows.filterShadow};
 
   &:focus-within {
-    ${p} {
-      svg path {
+    ${c} {
+      path {
         fill: ${({theme:e})=>e.colors.primary600};
       }
     }
   }
 
-  ${i.InputWrapper} {
+  ${t.InputWrapper} {
     border: 1px solid transparent;
   }
 
-  ${v.inputFocusStyle(i.InputWrapper)}
-`,t=a.forwardRef(({name:e,size:f,children:h,value:n,onClear:q,clearLabel:x,...b},j)=>{const o=a.useRef(null),y=n.length>0,F=g=>{q(g),o.current.focus()},R=j||o;return r.jsx(W,{children:r.jsxs(_.Field,{name:e,children:[r.jsx(z.VisuallyHidden,{children:r.jsx(C.FieldLabel,{children:h})}),r.jsx(i.FieldInput,{ref:R,value:n,startAction:r.jsx(p,{children:r.jsx(u.Search,{"aria-hidden":!0})}),size:f,endAction:y?r.jsx(I.FieldAction,{label:x,onClick:F,children:r.jsx(w,{children:r.jsx(u.Cross,{})})}):void 0,...b})]})})});t.displayName="Searchbar";t.defaultProps={value:"",size:"M"};t.propTypes={children:s.default.node.isRequired,clearLabel:s.default.string.isRequired,name:s.default.string.isRequired,onClear:s.default.func.isRequired,size:s.default.oneOf(Object.keys($.sizes.input)),value:s.default.string};exports.Searchbar=t;
+  ${R.inputFocusStyle(t.InputWrapper)}
+`,g=i.forwardRef(({name:e,size:a="M",children:u,value:n="",onClear:d,clearLabel:f,...p},h)=>{const o=i.useRef(null),b=n.length>0,q=j=>{d(j),o.current.focus()},x=F.composeRefs(h,o);return r.jsx(_,{children:r.jsxs(S.Field,{name:e,children:[r.jsx(y.VisuallyHidden,{children:r.jsx($.FieldLabel,{children:u})}),r.jsx(t.FieldInput,{ref:x,value:n,startAction:r.jsx(c,{"aria-hidden":!0}),size:a,endAction:b?r.jsx(C.FieldAction,{label:f,onClick:q,children:r.jsx(w,{})}):void 0,...p})]})})});exports.Searchbar=g;

package/dist/Searchbar/Searchbar.js

@@ -1,76 +1,47 @@
-import { jsx as e, jsxs as g } from "react/jsx-runtime";
-import { forwardRef as y, useRef as $ } from "react";
-import { Search as C, Cross as S } from "@strapi/icons";
-import o from "prop-types";
-import i from "styled-components";
-import { sizes as v } from "../themes/sizes.js";
-import { inputFocusStyle as x } from "../themes/utils.js";
-import { InputWrapper as l, FieldInput as F } from "../Field/FieldInput.js";
-import { Flex as a } from "../Flex/Flex.js";
-import { Field as w } from "../Field/Field.js";
+import { jsx as o, jsxs as $ } from "react/jsx-runtime";
+import { forwardRef as R, useRef as S } from "react";
+import { Cross as w, Search as x } from "@strapi/icons";
+import e from "styled-components";
+import { composeRefs as C } from "../hooks/useComposeRefs.js";
+import { inputFocusStyle as F } from "../themes/utils.js";
+import { InputWrapper as n, FieldInput as y } from "../Field/FieldInput.js";
+import { Field as I } from "../Field/Field.js";
 import { VisuallyHidden as z } from "../VisuallyHidden/VisuallyHidden.js";
-import { FieldLabel as q } from "../Field/FieldLabel.js";
-import { FieldAction as I } from "../Field/FieldAction.js";
-const W = i(a)`
+import { FieldLabel as A } from "../Field/FieldLabel.js";
+import { FieldAction as g } from "../Field/FieldAction.js";
+const j = e(w)`
   font-size: 0.5rem;
-  svg path {
+  path {
     fill: ${({ theme: r }) => r.colors.neutral400};
   }
-`, p = i(a)`
+`, l = e(x)`
   font-size: 0.8rem;
-
-  svg path {
+  path {
     fill: ${({ theme: r }) => r.colors.neutral800};
   }
-`, j = i.div`
+`, W = e.div`
   border-radius: ${({ theme: r }) => r.borderRadius};
   box-shadow: ${({ theme: r }) => r.shadows.filterShadow};
 
   &:focus-within {
-    ${p} {
-      svg path {
+    ${l} {
+      path {
         fill: ${({ theme: r }) => r.colors.primary600};
       }
     }
   }
 
-  ${l} {
+  ${n} {
     border: 1px solid transparent;
   }
 
-  ${x(l)}
-`, t = y(({ name: r, size: c, children: d, value: s, onClear: m, clearLabel: f, ...u }, h) => {
-  const n = $(null), b = s.length > 0;
-  return /* @__PURE__ */ e(j, { children: /* @__PURE__ */ g(w, { name: r, children: [
-    /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(q, { children: d }) }),
-    /* @__PURE__ */ e(
-      F,
-      {
-        ref: h || n,
-        value: s,
-        startAction: /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(C, { "aria-hidden": !0 }) }),
-        size: c,
-        endAction: b ? /* @__PURE__ */ e(I, { label: f, onClick: (R) => {
-          m(R), n.current.focus();
-        }, children: /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(S, {}) }) }) : void 0,
-        ...u
-      }
-    )
-  ] }) });
+  ${F(n)}
+`, J = R(({ name: r, size: s = "M", children: a, value: t = "", onClear: c, clearLabel: d, ...m }, p) => {
+  const i = S(null), f = t.length > 0, h = (b) => {
+    c(b), i.current.focus();
+  }, u = C(p, i);
+  return o(W, { children: $(I, { name: r, children: [o(z, { children: o(A, { children: a }) }), o(y, { ref: u, value: t, startAction: o(l, { "aria-hidden": !0 }), size: s, endAction: f ? o(g, { label: d, onClick: h, children: o(j, {}) }) : void 0, ...m })] }) });
 });
-t.displayName = "Searchbar";
-t.defaultProps = {
-  value: "",
-  size: "M"
-};
-t.propTypes = {
-  children: o.node.isRequired,
-  clearLabel: o.string.isRequired,
-  name: o.string.isRequired,
-  onClear: o.func.isRequired,
-  size: o.oneOf(Object.keys(v.input)),
-  value: o.string
-};
 export {
-  t as Searchbar
+  J as Searchbar
 };