@strapi/design-system 1.6.2 → 1.6.4

package/dist/Pagination/Pagination.js

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

package/dist/Pagination/components.cjs

@@ -1,13 +1,13 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const L=require("react"),k=require("styled-components"),q=require("prop-types"),g=require("@strapi/icons"),T=require("react-router-dom"),l=require("../VisuallyHidden/VisuallyHidden.cjs"),u=require("./PaginationContext.cjs"),x=require("../Typography/Typography.cjs"),E=require("../themes/utils.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=c(L),s=c(k),o=c(q),v=s.default(x.Typography)`
+"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(T.NavLink).withConfig({shouldForwardProp:(e,t)=>!$[e]&&t(e)})`
+`,$={active:!0},p=s.default(q.NavLink).withConfig({shouldForwardProp:(e,t)=>!$[e]&&t(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};
   text-decoration: none;
   display: flex;
 
-  ${E.buttonFocusStyle}
+  ${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};

package/dist/Pagination/components.js

@@ -1,13 +1,13 @@
 import t from "react";
-import s from "styled-components";
-import n from "prop-types";
 import { ChevronLeft as b, ChevronRight as y } from "@strapi/icons";
+import n from "prop-types";
 import { NavLink as P } from "react-router-dom";
-import { VisuallyHidden as l } from "../VisuallyHidden/VisuallyHidden.js";
+import s from "styled-components";
 import { usePagination as c } from "./PaginationContext.js";
-import { Typography as E } from "../Typography/Typography.js";
-import { buttonFocusStyle as k } from "../themes/utils.js";
-const u = s(E)`
+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 = {
   active: !0
@@ -20,7 +20,7 @@ const u = s(E)`
   text-decoration: none;
   display: flex;
 
-  ${k}
+  ${E}
 `, $ = s(p)`
   color: ${({ theme: e, active: r }) => r ? e.colors.primary700 : e.colors.neutral800};
   background: ${({ theme: e, active: r }) => r ? e.colors.neutral0 : void 0};
@@ -48,47 +48,40 @@ const u = s(E)`
   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
-  }));
+  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
-  }));
+  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));
+  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"));
+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

package/dist/Popover/Popover.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const q=require("react"),j=require("prop-types"),S=require("styled-components"),s=require("@floating-ui/react-dom"),c=require("../Box/Box.cjs"),T=require("../Portal/Portal.cjs"),$=require("../helpers/useIntersection.cjs"),b=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function M(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const o=M(q),t=b(j),m=b(S),h=["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"],B=m.default(c.Box)`
+"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"),_=require("../helpers/useIntersection.cjs"),k=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)`
   box-shadow: ${({theme:e})=>e.shadows.filterShadow};
   z-index: 4;
   border: 1px solid ${({theme:e})=>e.colors.neutral150};
   background: ${({theme:e})=>e.colors.neutral0};
-`,W=m.default(c.Box)`
+`,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 _.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)`
   // 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;
   }
-`,u=({source:e,children:n,spacing:r,fullWidth:a,placement:y,onReachEnd:i,intersectionId:l,centered:v,...x})=>{const f=o.useRef(null),[w,E]=o.useState(void 0),{x:_,y:O,reference:p,floating:k,strategy:R}=s.useFloating({strategy:"fixed",placement:v?"bottom":y,middleware:[s.offset({mainAxis:r}),s.shift(),s.flip()],whileElementsMounted:s.autoUpdate});return o.useLayoutEffect(()=>{p(e.current)},[e,p]),o.useLayoutEffect(()=>{a&&E(e.current.offsetWidth)},[a,e]),$.useIntersection(f,i,{selectorToWatch:`#${l}`,skipWhen:!l||!i}),o.createElement(B,{ref:k,style:{left:_,top:O,position:R,width:w||void 0},hasRadius:!0,background:"neutral0",padding:1},o.createElement(W,{ref:f,...x},n,l&&i&&o.createElement(c.Box,{id:l,width:"100%",height:"1px"})))},d=e=>o.createElement(T.Portal,null,o.createElement(u,{...e})),g={fullWidth:!1,intersectionId:void 0,onReachEnd:void 0,centered:!1,placement:"bottom-start",spacing:0},P={centered:t.default.bool,children:t.default.node.isRequired,fullWidth:t.default.bool,intersectionId:t.default.string,onReachEnd:t.default.func,placement:t.default.oneOf(h),source:t.default.shape({current:(typeof Element>"u"?t.default.any:t.default.instanceOf(Element)).isRequired}).isRequired,spacing:t.default.number};u.propTypes=P;u.defaultProps=g;d.propTypes=P;d.defaultProps=g;exports.POPOVER_PLACEMENTS=h;exports.Popover=d;
+`,E=({children:e,source:t,spacing:o,fullWidth:r,placement:s,centered:i,...c})=>n.jsx(k.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;

package/dist/Popover/Popover.js

@@ -1,29 +1,83 @@
-import * as o from "react";
-import t from "prop-types";
-import d from "styled-components";
-import { useFloating as R, offset as $, shift as W, flip as T, autoUpdate as O } from "@floating-ui/react-dom";
-import { Box as s } from "../Box/Box.js";
+import { jsx as i, jsxs as x } from "react/jsx-runtime";
+import * as a from "react";
+import { useFloating as w, offset as k, shift as y, flip as $, autoUpdate as v } from "@floating-ui/react-dom";
+import c from "styled-components";
+import { Box as d } from "../Box/Box.js";
+import { useIntersection as P } from "../helpers/useIntersection.js";
 import { Portal as S } from "../Portal/Portal.js";
-import { useIntersection as q } from "../helpers/useIntersection.js";
-const L = [
-  "top",
-  "top-start",
-  "top-end",
-  "right",
-  "right-start",
-  "right-end",
-  "bottom",
-  "bottom-start",
-  "bottom-end",
-  "left",
-  "left-start",
-  "left-end"
-], z = d(s)`
-  box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
+const T = ["top", "top-start", "top-end", "right", "right-start", "right-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end"], W = c(d)`
+  box-shadow: ${({
+  theme: t
+}) => t.shadows.filterShadow};
   z-index: 4;
-  border: 1px solid ${({ theme: e }) => e.colors.neutral150};
-  background: ${({ theme: e }) => e.colors.neutral0};
-`, A = d(s)`
+  border: 1px solid ${({
+  theme: t
+}) => t.colors.neutral150};
+  background: ${({
+  theme: t
+}) => t.colors.neutral0};
+`, E = ({
+  source: t,
+  children: e,
+  spacing: o = 0,
+  fullWidth: r = !1,
+  placement: s = "bottom-start",
+  centered: n = !1,
+  ...l
+}) => {
+  const [p, u] = a.useState(void 0), {
+    x: h,
+    y: m,
+    reference: f,
+    floating: b,
+    strategy: g
+  } = w({
+    strategy: "fixed",
+    placement: n ? "bottom" : s,
+    middleware: [k({
+      mainAxis: o
+    }), y(), $()],
+    whileElementsMounted: v
+  });
+  return a.useLayoutEffect(() => {
+    f(t.current);
+  }, [t, f]), a.useLayoutEffect(() => {
+    r && u(t.current.offsetWidth);
+  }, [r, t]), i(W, {
+    ref: b,
+    style: {
+      left: h,
+      top: m,
+      position: g,
+      width: p || void 0
+    },
+    hasRadius: !0,
+    background: "neutral0",
+    padding: 1,
+    ...l,
+    children: e
+  });
+}, R = ({
+  children: t,
+  intersectionId: e,
+  onReachEnd: o,
+  ...r
+}) => {
+  const s = a.useRef(null);
+  return P(s, o ?? (() => {
+  }), {
+    selectorToWatch: `#${e}`,
+    skipWhen: !e || !o
+  }), x(L, {
+    ref: s,
+    ...r,
+    children: [t, e && o && i(d, {
+      id: e,
+      width: "100%",
+      height: "1px"
+    })]
+  });
+}, L = c(d)`
   // 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;
@@ -35,89 +89,44 @@ const L = [
   }
 
   &::-webkit-scrollbar-track {
-    background: ${({ theme: e }) => e.colors.neutral0};
+    background: ${({
+  theme: t
+}) => t.colors.neutral0};
   }
 
   &::-webkit-scrollbar-thumb {
-    background: ${({ theme: e }) => e.colors.neutral150};
-    border-radius: ${({ theme: e }) => e.borderRadius};
+    background: ${({
+  theme: t
+}) => t.colors.neutral150};
+    border-radius: ${({
+  theme: t
+}) => t.borderRadius};
     margin-right: 10px;
   }
-`, a = ({
+`, B = ({
+  children: t,
   source: e,
-  children: m,
-  spacing: h,
-  fullWidth: i,
-  placement: b,
-  onReachEnd: n,
-  intersectionId: r,
-  centered: g,
-  ...w
-}) => {
-  const l = o.useRef(null), [v, x] = o.useState(void 0), { x: y, y: E, reference: p, floating: P, strategy: k } = R({
-    strategy: "fixed",
-    placement: g ? "bottom" : b,
-    middleware: [
-      $({
-        mainAxis: h
-      }),
-      W(),
-      T()
-    ],
-    whileElementsMounted: O
-  });
-  return o.useLayoutEffect(() => {
-    p(e.current);
-  }, [e, p]), o.useLayoutEffect(() => {
-    i && x(e.current.offsetWidth);
-  }, [i, e]), q(l, n, {
-    selectorToWatch: `#${r}`,
-    skipWhen: !r || !n
-  }), /* @__PURE__ */ o.createElement(z, {
-    ref: P,
-    style: {
-      left: y,
-      top: E,
-      position: k,
-      width: v || void 0
-    },
-    hasRadius: !0,
-    background: "neutral0",
-    padding: 1
-  }, /* @__PURE__ */ o.createElement(A, {
-    ref: l,
-    ...w
-  }, m, r && n && /* @__PURE__ */ o.createElement(s, {
-    id: r,
-    width: "100%",
-    height: "1px"
-  })));
-}, c = (e) => /* @__PURE__ */ o.createElement(S, null, /* @__PURE__ */ o.createElement(a, {
-  ...e
-})), f = {
-  fullWidth: !1,
-  intersectionId: void 0,
-  onReachEnd: void 0,
-  centered: !1,
-  placement: "bottom-start",
-  spacing: 0
-}, u = {
-  centered: t.bool,
-  children: t.node.isRequired,
-  fullWidth: t.bool,
-  intersectionId: t.string,
-  onReachEnd: t.func,
-  placement: t.oneOf(L),
-  source: t.shape({
-    current: (typeof Element > "u" ? t.any : t.instanceOf(Element)).isRequired
-  }).isRequired,
-  spacing: t.number
-};
-a.propTypes = u;
-a.defaultProps = f;
-c.propTypes = u;
-c.defaultProps = f;
+  spacing: o,
+  fullWidth: r,
+  placement: s,
+  centered: n,
+  ...l
+}) => i(S, {
+  children: i(E, {
+    source: e,
+    spacing: o,
+    fullWidth: r,
+    placement: s,
+    centered: n,
+    children: i(R, {
+      ...l,
+      children: t
+    })
+  })
+});
 export {
-  L as POPOVER_PLACEMENTS,
-  c as Popover
+  E as Content,
+  T as POPOVER_PLACEMENTS,
+  B as Popover,
+  R as Scrolling
 };

package/dist/Popover/index.cjs

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

package/dist/Popover/index.js

@@ -1,5 +1,11 @@
-import { POPOVER_PLACEMENTS as r, Popover as E } from "./Popover.js";
+import { Content as o, Scrolling as r } from "./Popover.js";
+import { POPOVER_PLACEMENTS as p, Popover as m } from "./Popover.js";
+const e = {
+  Content: o,
+  Scrolling: r
+};
 export {
-  r as POPOVER_PLACEMENTS,
-  E as Popover
+  p as POPOVER_PLACEMENTS,
+  m as Popover,
+  e as PopoverPrimitives
 };

package/dist/Portal/Portal.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),c=require("react-dom"),a=require("prop-types"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=s(a),u=({children:e})=>{const t=r.useRef(null),[o,n]=r.useState(!1);return r.useLayoutEffect(()=>(t.current=document.createElement("div"),t.current.setAttribute("data-react-portal","true"),document.body.appendChild(t.current),n(!0),()=>{t.current?.remove()}),[]),!o||!t.current?null:c.createPortal(e,t.current)};u.propTypes={children:l.default.node.isRequired};exports.Portal=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),c=require("react-dom");function a(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const u=a(o),l=({children:e})=>{const t=u.useRef(null),[r,n]=u.useState(!1);return u.useLayoutEffect(()=>(t.current=document.createElement("div"),t.current.setAttribute("data-react-portal","true"),document.body.appendChild(t.current),n(!0),()=>{t.current?.remove()}),[]),!r||!t.current?null:c.createPortal(e,t.current)};exports.Portal=l;

package/dist/Portal/Portal.js

@@ -1,15 +1,13 @@
-import { useRef as u, useState as n, useLayoutEffect as c } from "react";
-import { createPortal as a } from "react-dom";
-import d from "prop-types";
-const p = ({ children: r }) => {
-  const e = u(null), [t, o] = n(!1);
-  return c(() => (e.current = document.createElement("div"), e.current.setAttribute("data-react-portal", "true"), document.body.appendChild(e.current), o(!0), () => {
-    e.current?.remove();
-  }), []), !t || !e.current ? null : a(r, e.current);
-};
-p.propTypes = {
-  children: d.node.isRequired
+import * as e from "react";
+import { createPortal as o } from "react-dom";
+const a = ({
+  children: r
+}) => {
+  const t = e.useRef(null), [u, n] = e.useState(!1);
+  return e.useLayoutEffect(() => (t.current = document.createElement("div"), t.current.setAttribute("data-react-portal", "true"), document.body.appendChild(t.current), n(!0), () => {
+    t.current?.remove();
+  }), []), !u || !t.current ? null : o(r, t.current);
 };
 export {
-  p as Portal
+  a as Portal
 };

package/dist/ProgressBar/ProgressBar.js

@@ -12,20 +12,23 @@ const p = m(l)`
     top: 0;
     width: ${({ value: r }) => `${r}%`};
   }
-`, t = ({ min: r, max: i, value: o, children: s, size: a, ...n }) => /* @__PURE__ */ u.createElement(p, {
-  background: "neutral600",
-  hasRadius: !0,
-  "aria-label": s,
-  "aria-valuemax": i,
-  "aria-valuemin": r,
-  "aria-valuenow": o,
-  height: a === "S" ? 1 : 2,
-  position: "relative",
-  role: "progressbar",
-  value: o,
-  width: a === "S" ? "78px" : "102px",
-  ...n
-});
+`, t = ({ min: r, max: i, value: o, children: s, size: a, ...n }) => /* @__PURE__ */ u.createElement(
+  p,
+  {
+    background: "neutral600",
+    hasRadius: !0,
+    "aria-label": s,
+    "aria-valuemax": i,
+    "aria-valuemin": r,
+    "aria-valuenow": o,
+    height: a === "S" ? 1 : 2,
+    position: "relative",
+    role: "progressbar",
+    value: o,
+    width: a === "S" ? "78px" : "102px",
+    ...n
+  }
+);
 t.defaultProps = {
   min: 0,
   max: 100,

package/dist/Radio/Radio.cjs

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

package/dist/Radio/Radio.js

@@ -2,19 +2,12 @@ import e from "react";
 import r from "prop-types";
 import a from "styled-components";
 import { BaseRadio as i } from "../BaseRadio/BaseRadio.js";
-import { Typography as m } from "../Typography/Typography.js";
-import { Box as p } from "../Box/Box.js";
-const l = a(m)`
+import { Box as m } from "../Box/Box.js";
+import { Typography as p } from "../Typography/Typography.js";
+const l = a(p)`
   display: flex;
   align-items: center;
-`, n = ({ children: t, ...o }) => /* @__PURE__ */ e.createElement(l, {
-  as: "label",
-  textColor: "neutral800"
-}, /* @__PURE__ */ e.createElement(i, {
-  ...o
-}), /* @__PURE__ */ e.createElement(p, {
-  paddingLeft: 2
-}, t));
+`, n = ({ children: t, ...o }) => /* @__PURE__ */ e.createElement(l, { as: "label", textColor: "neutral800" }, /* @__PURE__ */ e.createElement(i, { ...o }), /* @__PURE__ */ e.createElement(m, { paddingLeft: 2 }, t));
 n.propTypes = {
   children: r.node.isRequired,
   value: r.any.isRequired

package/dist/RawTable/RawCell.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),w=require("prop-types"),F=require("../Box/Box.cjs"),n=require("../helpers/getFocusableNodes.cjs"),f=require("../helpers/keyboardKeys.cjs"),R=require("./RawTableContext.cjs"),p=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},T=p(d),s=p(w),h=o=>T.default.createElement(i,{...o,as:"th"}),i=({coords:o,as:x,...m})=>{const r=d.useRef(null),{rowIndex:E,colIndex:K,setTableValues:N}=R.useTable(),[u,b]=d.useState(!1),v=e=>{const t=n.getFocusableNodes(r.current,!0);if(t.length===0||t.length===1&&n.getFocusableNodesWithKeyboardNav(t).length===0)return;if(t.length>1&&!t.find(l=>l.tagName!=="BUTTON")){e.preventDefault();const l=t.findIndex(c=>c===document.activeElement);if(e.key===f.KeyboardKeys.RIGHT){const c=t[l+1];c&&(e.stopPropagation(),c.focus())}else if(e.key===f.KeyboardKeys.LEFT){const c=t[l-1];c&&(e.stopPropagation(),c.focus())}return}const a=e.key===f.KeyboardKeys.ENTER;if(a&&!u)b(!0);else if((e.key===f.KeyboardKeys.ESCAPE||a)&&u){if(a&&document.activeElement.tagName==="A")return;b(!1),r.current.focus()}else u&&e.stopPropagation()},y=E===o.row-1&&K===o.col-1;d.useLayoutEffect(()=>{const e=n.getFocusableNodes(r.current,!0);e.length===0||e.length===1&&n.getFocusableNodesWithKeyboardNav(e).length!==0||e.length>1&&Boolean(e.find(t=>t.tagName!=="BUTTON"))?(r.current.setAttribute("tabIndex",!u&&y?0:-1),e.forEach((t,a)=>{t.setAttribute("tabIndex",u?0:-1),u&&a===0&&t.focus()})):e.forEach(t=>{t.setAttribute("tabIndex",y?0:-1)})},[u,y]);const g=d.useCallback(()=>{const e=n.getFocusableNodes(r.current,!0);e.length>=1&&(n.getFocusableNodesWithKeyboardNav(e).length!==0||!e.find(t=>t.tagName!=="BUTTON"))&&b(!0),N({rowIndex:o.row-1,colIndex:o.col-1})},[o,N]);return d.useLayoutEffect(()=>{const e=r.current;return n.getFocusableNodes(e,!0).forEach(a=>{a.addEventListener("focus",g)}),()=>{n.getFocusableNodes(e,!0).forEach(l=>{l.removeEventListener("focus",g)})}},[g]),T.default.createElement(F.Box,{role:"gridcell",as:x,ref:r,onKeyDown:v,...m})};h.defaultProps={children:void 0,coords:{}};h.propTypes={"aria-colindex":s.default.number.isRequired,children:s.default.node,coords:s.default.shape({col:s.default.number,row:s.default.number})};i.defaultProps={as:"td",children:void 0,coords:{}};i.propTypes={"aria-colindex":s.default.number.isRequired,as:s.default.oneOf(["td","th"]),children:s.default.node,coords:s.default.shape({col:s.default.number,row:s.default.number})};exports.RawTd=i;exports.RawTh=h;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),w=require("prop-types"),F=require("./RawTableContext.cjs"),R=require("../Box/Box.cjs"),n=require("../helpers/getFocusableNodes.cjs"),f=require("../helpers/keyboardKeys.cjs"),p=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},T=p(d),s=p(w),h=o=>T.default.createElement(i,{...o,as:"th"}),i=({coords:o,as:x,...m})=>{const r=d.useRef(null),{rowIndex:E,colIndex:K,setTableValues:N}=F.useTable(),[u,b]=d.useState(!1),v=e=>{const t=n.getFocusableNodes(r.current,!0);if(t.length===0||t.length===1&&n.getFocusableNodesWithKeyboardNav(t).length===0)return;if(t.length>1&&!t.find(l=>l.tagName!=="BUTTON")){e.preventDefault();const l=t.findIndex(c=>c===document.activeElement);if(e.key===f.KeyboardKeys.RIGHT){const c=t[l+1];c&&(e.stopPropagation(),c.focus())}else if(e.key===f.KeyboardKeys.LEFT){const c=t[l-1];c&&(e.stopPropagation(),c.focus())}return}const a=e.key===f.KeyboardKeys.ENTER;if(a&&!u)b(!0);else if((e.key===f.KeyboardKeys.ESCAPE||a)&&u){if(a&&document.activeElement.tagName==="A")return;b(!1),r.current.focus()}else u&&e.stopPropagation()},y=E===o.row-1&&K===o.col-1;d.useLayoutEffect(()=>{const e=n.getFocusableNodes(r.current,!0);e.length===0||e.length===1&&n.getFocusableNodesWithKeyboardNav(e).length!==0||e.length>1&&Boolean(e.find(t=>t.tagName!=="BUTTON"))?(r.current.setAttribute("tabIndex",!u&&y?0:-1),e.forEach((t,a)=>{t.setAttribute("tabIndex",u?0:-1),u&&a===0&&t.focus()})):e.forEach(t=>{t.setAttribute("tabIndex",y?0:-1)})},[u,y]);const g=d.useCallback(()=>{const e=n.getFocusableNodes(r.current,!0);e.length>=1&&(n.getFocusableNodesWithKeyboardNav(e).length!==0||!e.find(t=>t.tagName!=="BUTTON"))&&b(!0),N({rowIndex:o.row-1,colIndex:o.col-1})},[o,N]);return d.useLayoutEffect(()=>{const e=r.current;return n.getFocusableNodes(e,!0).forEach(a=>{a.addEventListener("focus",g)}),()=>{n.getFocusableNodes(e,!0).forEach(l=>{l.removeEventListener("focus",g)})}},[g]),T.default.createElement(R.Box,{role:"gridcell",as:x,ref:r,onKeyDown:v,...m})};h.defaultProps={children:void 0,coords:{}};h.propTypes={"aria-colindex":s.default.number.isRequired,children:s.default.node,coords:s.default.shape({col:s.default.number,row:s.default.number})};i.defaultProps={as:"td",children:void 0,coords:{}};i.propTypes={"aria-colindex":s.default.number.isRequired,as:s.default.oneOf(["td","th"]),children:s.default.node,coords:s.default.shape({col:s.default.number,row:s.default.number})};exports.RawTd=i;exports.RawTh=h;

package/dist/RawTable/RawCell.js

@@ -1,14 +1,11 @@
 import g, { useRef as w, useState as R, useLayoutEffect as N, useCallback as A } from "react";
 import o from "prop-types";
-import { Box as P } from "../Box/Box.js";
+import { useTable as P } from "./RawTableContext.js";
+import { Box as B } from "../Box/Box.js";
 import { getFocusableNodes as l, getFocusableNodesWithKeyboardNav as b } from "../helpers/getFocusableNodes.js";
 import { KeyboardKeys as d } from "../helpers/keyboardKeys.js";
-import { useTable as B } from "./RawTableContext.js";
-const E = (r) => /* @__PURE__ */ g.createElement(h, {
-  ...r,
-  as: "th"
-}), h = ({ coords: r, as: T, ...x }) => {
-  const s = w(null), { rowIndex: y, colIndex: v, setTableValues: p } = B(), [c, i] = R(!1), I = (e) => {
+const E = (r) => /* @__PURE__ */ g.createElement(h, { ...r, as: "th" }), h = ({ coords: r, as: T, ...x }) => {
+  const s = w(null), { rowIndex: y, colIndex: v, setTableValues: p } = P(), [c, i] = R(!1), I = (e) => {
     const t = l(s.current, !0);
     if (t.length === 0 || t.length === 1 && b(t).length === 0)
       return;
@@ -55,13 +52,7 @@ const E = (r) => /* @__PURE__ */ g.createElement(h, {
         u.removeEventListener("focus", m);
       });
     };
-  }, [m]), /* @__PURE__ */ g.createElement(P, {
-    role: "gridcell",
-    as: T,
-    ref: s,
-    onKeyDown: I,
-    ...x
-  });
+  }, [m]), /* @__PURE__ */ g.createElement(B, { role: "gridcell", as: T, ref: s, onKeyDown: I, ...x });
 };
 E.defaultProps = {
   children: void 0,

package/dist/RawTable/RawTable.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),_=require("prop-types"),m=require("./RawTableContext.cjs"),r=require("../helpers/keyboardKeys.cjs"),E=require("./focusFocusable.cjs"),D=a=>a&&typeof a=="object"&&"default"in a?a:{default:a},K=D(u),o=D(_),f=({colCount:a,rowCount:l,jumpStep:n,initialCol:k,initialRow:T,...p})=>{const i=u.useRef(null),b=u.useRef(!1),[y,s]=u.useState(T),[d,c]=u.useState(k),R=u.useCallback(({colIndex:t,rowIndex:e})=>{c(t),s(e)},[]);u.useEffect(()=>{b.current&&E.focusFocusable(i.current),b.current||(b.current=!0)},[d,y]);const P=t=>{switch(t.key){case r.KeyboardKeys.RIGHT:{t.preventDefault(),c(e=>e<a-1?e+1:e);break}case r.KeyboardKeys.LEFT:{t.preventDefault(),c(e=>e>0?e-1:e);break}case r.KeyboardKeys.UP:{t.preventDefault(),s(e=>e>0?e-1:e);break}case r.KeyboardKeys.DOWN:{t.preventDefault(),s(e=>e<l-1?e+1:e);break}case r.KeyboardKeys.HOME:{t.preventDefault(),t.ctrlKey&&s(0),c(0);break}case r.KeyboardKeys.END:{t.preventDefault(),t.ctrlKey&&s(l-1),c(a-1);break}case r.KeyboardKeys.PAGE_DOWN:{t.preventDefault(),s(e=>e+n<l?e+n:l-1);break}case r.KeyboardKeys.PAGE_UP:{t.preventDefault(),s(e=>e-n>0?e-n:0);break}}};return K.default.createElement(m.RawTableContext.Provider,{value:{rowIndex:y,colIndex:d,setTableValues:R}},K.default.createElement("table",{role:"grid",ref:i,"aria-rowcount":l,"aria-colcount":a,onKeyDown:P,...p}))};f.defaultProps={jumpStep:3,initialCol:0,initialRow:0};f.propTypes={colCount:o.default.number.isRequired,initialCol:o.default.number,initialRow:o.default.number,jumpStep:o.default.number,rowCount:o.default.number.isRequired};exports.RawTable=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),_=require("prop-types"),E=require("./focusFocusable.cjs"),q=require("./RawTableContext.cjs"),r=require("../helpers/keyboardKeys.cjs"),k=a=>a&&typeof a=="object"&&"default"in a?a:{default:a},y=k(u),o=k(_),d=({colCount:a,rowCount:l,jumpStep:n,initialCol:T,initialRow:p,...R})=>{const K=u.useRef(null),f=u.useRef(!1),[b,s]=u.useState(p),[i,c]=u.useState(T),D=u.useCallback(({colIndex:t,rowIndex:e})=>{c(t),s(e)},[]);u.useEffect(()=>{f.current&&E.focusFocusable(K.current),f.current||(f.current=!0)},[i,b]);const m=t=>{switch(t.key){case r.KeyboardKeys.RIGHT:{t.preventDefault(),c(e=>e<a-1?e+1:e);break}case r.KeyboardKeys.LEFT:{t.preventDefault(),c(e=>e>0?e-1:e);break}case r.KeyboardKeys.UP:{t.preventDefault(),s(e=>e>0?e-1:e);break}case r.KeyboardKeys.DOWN:{t.preventDefault(),s(e=>e<l-1?e+1:e);break}case r.KeyboardKeys.HOME:{t.preventDefault(),t.ctrlKey&&s(0),c(0);break}case r.KeyboardKeys.END:{t.preventDefault(),t.ctrlKey&&s(l-1),c(a-1);break}case r.KeyboardKeys.PAGE_DOWN:{t.preventDefault(),s(e=>e+n<l?e+n:l-1);break}case r.KeyboardKeys.PAGE_UP:{t.preventDefault(),s(e=>e-n>0?e-n:0);break}}},P=y.default.useMemo(()=>({rowIndex:b,colIndex:i,setTableValues:D}),[i,b,D]);return y.default.createElement(q.RawTableContext.Provider,{value:P},y.default.createElement("table",{role:"grid",ref:K,"aria-rowcount":l,"aria-colcount":a,onKeyDown:m,...R}))};d.defaultProps={jumpStep:3,initialCol:0,initialRow:0};d.propTypes={colCount:o.default.number.isRequired,initialCol:o.default.number,initialRow:o.default.number,jumpStep:o.default.number,rowCount:o.default.number.isRequired};exports.RawTable=d;