@strapi/design-system 1.6.1 → 1.6.3

package/dist/Layout/HeaderLayout.js

@@ -1,13 +1,13 @@
 import e, { useRef as h, useState as E, useEffect as v } from "react";
-import b from "styled-components";
-import n from "prop-types";
+import R from "styled-components";
+import t from "prop-types";
 import { Typography as c } from "../Typography/Typography.js";
 import { Box as i } from "../Box/Box.js";
 import { Flex as l } from "../Flex/Flex.js";
-import { useElementOnScreen as R } from "../helpers/useElementOnScreen.js";
+import { useElementOnScreen as b } from "../helpers/useElementOnScreen.js";
 import { useResizeObserver as w } from "../helpers/useResizeObserver.js";
-const x = () => {
-  const t = h(null), [o, a] = E(null), [r, d] = R({
+const L = () => {
+  const n = h(null), [o, a] = E(null), [r, d] = b({
     root: null,
     rootMargin: "0px",
     threshold: 0
@@ -15,51 +15,51 @@ const x = () => {
   return w(r, () => {
     r.current && a(r.current.getBoundingClientRect());
   }), v(() => {
-    t.current && a(t.current.getBoundingClientRect());
-  }, [t]), {
+    n.current && a(n.current.getBoundingClientRect());
+  }, [n]), {
     containerRef: r,
     isVisible: d,
-    baseHeaderLayoutRef: t,
+    baseHeaderLayoutRef: n,
     headerSize: o
   };
-}, p = (t) => {
-  const { containerRef: o, isVisible: a, baseHeaderLayoutRef: r, headerSize: d } = x();
+}, p = (n) => {
+  const { containerRef: o, isVisible: a, baseHeaderLayoutRef: r, headerSize: d } = L();
   return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
     style: { height: d?.height },
     ref: o
   }, a && /* @__PURE__ */ e.createElement(s, {
     ref: r,
-    ...t
+    ...n
   })), !a && /* @__PURE__ */ e.createElement(s, {
-    ...t,
+    ...n,
     sticky: !0,
     width: d?.width
   }));
 };
 p.displayName = "HeaderLayout";
-const L = b(i)`
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: ${(t) => t.width}px;
-  z-index: 4;
-  box-shadow: ${({ theme: t }) => t.shadows.tableShadow};
+const x = R(i)`
+  width: ${(n) => n.width}px;
 `, s = e.forwardRef(
-  ({ navigationAction: t, primaryAction: o, secondaryAction: a, subtitle: r, title: d, sticky: f, width: g, ...u }, y) => {
+  ({ navigationAction: n, primaryAction: o, secondaryAction: a, subtitle: r, title: d, sticky: f, width: g, ...u }, y) => {
     const m = typeof r == "string";
-    return f ? /* @__PURE__ */ e.createElement(L, {
+    return f ? /* @__PURE__ */ e.createElement(x, {
       paddingLeft: 6,
       paddingRight: 6,
       paddingTop: 3,
       paddingBottom: 3,
+      position: "fixed",
+      top: 0,
+      right: 0,
       background: "neutral0",
+      shadow: "tableShadow",
       width: g,
+      zIndex: 4,
       "data-strapi-header-sticky": !0
     }, /* @__PURE__ */ e.createElement(l, {
       justifyContent: "space-between"
-    }, /* @__PURE__ */ e.createElement(l, null, t && /* @__PURE__ */ e.createElement(i, {
+    }, /* @__PURE__ */ e.createElement(l, null, n && /* @__PURE__ */ e.createElement(i, {
       paddingRight: 3
-    }, t), /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(c, {
+    }, n), /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(c, {
       variant: "beta",
       as: "h1",
       ...u
@@ -75,12 +75,12 @@ const L = b(i)`
       paddingLeft: 10,
       paddingRight: 10,
       paddingBottom: 8,
-      paddingTop: t ? 6 : 8,
+      paddingTop: n ? 6 : 8,
       background: "neutral100",
       "data-strapi-header": !0
-    }, t ? /* @__PURE__ */ e.createElement(i, {
+    }, n ? /* @__PURE__ */ e.createElement(i, {
       paddingBottom: 2
-    }, t) : null, /* @__PURE__ */ e.createElement(l, {
+    }, n) : null, /* @__PURE__ */ e.createElement(l, {
       justifyContent: "space-between"
     }, /* @__PURE__ */ e.createElement(l, null, /* @__PURE__ */ e.createElement(c, {
       as: "h1",
@@ -105,13 +105,13 @@ s.defaultProps = {
   width: void 0
 };
 s.propTypes = {
-  navigationAction: n.node,
-  primaryAction: n.node,
-  secondaryAction: n.node,
-  sticky: n.bool,
-  subtitle: n.oneOfType([n.string, n.node]),
-  title: n.string.isRequired,
-  width: n.number
+  navigationAction: t.node,
+  primaryAction: t.node,
+  secondaryAction: t.node,
+  sticky: t.bool,
+  subtitle: t.oneOfType([t.string, t.node]),
+  title: t.string.isRequired,
+  width: t.number
 };
 p.defaultProps = {
   navigationAction: void 0,
@@ -120,11 +120,11 @@ p.defaultProps = {
   subtitle: void 0
 };
 p.propTypes = {
-  navigationAction: n.node,
-  primaryAction: n.node,
-  secondaryAction: n.node,
-  subtitle: n.oneOfType([n.string, n.node]),
-  title: n.string.isRequired
+  navigationAction: t.node,
+  primaryAction: t.node,
+  secondaryAction: t.node,
+  subtitle: t.oneOfType([t.string, t.node]),
+  title: t.string.isRequired
 };
 export {
   s as BaseHeaderLayout,

package/dist/Main/SkipToContent.cjs

@@ -1,6 +1,5 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),s=require("styled-components"),r=require("prop-types"),a=require("../Box/Box.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=t(n),u=t(s),l=t(r),d=u.default(a.Box)`
   text-decoration: none;
-  position: absolute;
   z-index: 9999;
   left: -100%;
   top: -100%;
@@ -9,4 +8,4 @@
     left: ${({theme:e})=>e.spaces[3]};
     top: ${({theme:e})=>e.spaces[3]};
   }
-`,o=({children:e})=>c.default.createElement(d,{as:"a",href:"#main-content",background:"primary600",color:"neutral0",padding:3,hasRadius:!0},e);o.propTypes={children:l.default.node.isRequired};exports.SkipToContent=o;
+`,o=({children:e})=>c.default.createElement(d,{as:"a",href:"#main-content",background:"primary600",color:"neutral0",padding:3,position:"absolute",hasRadius:!0},e);o.propTypes={children:l.default.node.isRequired};exports.SkipToContent=o;

package/dist/Main/SkipToContent.js

@@ -4,7 +4,6 @@ import r from "prop-types";
 import { Box as n } from "../Box/Box.js";
 const p = t(n)`
   text-decoration: none;
-  position: absolute;
   z-index: 9999;
   left: -100%;
   top: -100%;
@@ -19,6 +18,7 @@ const p = t(n)`
   background: "primary600",
   color: "neutral0",
   padding: 3,
+  position: "absolute",
   hasRadius: !0
 }, o);
 a.propTypes = {

package/dist/MainNav/MainNav.cjs

@@ -1,9 +1,4 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),l=require("styled-components"),s=require("prop-types"),c=require("../Flex/Flex.cjs"),i=require("./MainNavContext.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=t(r),u=t(l),d=t(s),p=u.default(c.Flex)`
   width: ${({condensed:e})=>e?"max-content":`${224/16}rem`};
-  background: ${({theme:e})=>e.colors.neutral0};
-  position: sticky;
-  top: 0;
-  height: 100vh;
-  z-index: 2;
   border-right: 1px solid ${({theme:e})=>e.colors.neutral150};
-`,o=({condensed:e,...n})=>a.default.createElement(i.MainNavContext.Provider,{value:e},a.default.createElement(p,{alignItems:"normal",direction:"column",as:"nav",condensed:e,...n}));o.defaultProps={condensed:!1};o.propTypes={condensed:d.default.bool};exports.MainNav=o;
+`,o=({condensed:e,...n})=>a.default.createElement(i.MainNavContext.Provider,{value:e},a.default.createElement(p,{alignItems:"normal",as:"nav",background:"neutral0",condensed:e,direction:"column",height:"100vh",position:"sticky",top:0,zIndex:2,...n}));o.defaultProps={condensed:!1};o.propTypes={condensed:d.default.bool};exports.MainNav=o;

package/dist/MainNav/MainNav.js

@@ -1,23 +1,23 @@
-import e from "react";
+import o from "react";
 import n from "styled-components";
 import a from "prop-types";
 import { Flex as i } from "../Flex/Flex.js";
-import { MainNavContext as l } from "./MainNavContext.js";
-const m = n(i)`
-  width: ${({ condensed: o }) => o ? "max-content" : `${224 / 16}rem`};
-  background: ${({ theme: o }) => o.colors.neutral0};
-  position: sticky;
-  top: 0;
-  height: 100vh;
-  z-index: 2;
-  border-right: 1px solid ${({ theme: o }) => o.colors.neutral150};
-`, r = ({ condensed: o, ...t }) => /* @__PURE__ */ e.createElement(l.Provider, {
-  value: o
-}, /* @__PURE__ */ e.createElement(m, {
+import { MainNavContext as m } from "./MainNavContext.js";
+const p = n(i)`
+  width: ${({ condensed: e }) => e ? "max-content" : `${224 / 16}rem`};
+  border-right: 1px solid ${({ theme: e }) => e.colors.neutral150};
+`, r = ({ condensed: e, ...t }) => /* @__PURE__ */ o.createElement(m.Provider, {
+  value: e
+}, /* @__PURE__ */ o.createElement(p, {
   alignItems: "normal",
-  direction: "column",
   as: "nav",
-  condensed: o,
+  background: "neutral0",
+  condensed: e,
+  direction: "column",
+  height: "100vh",
+  position: "sticky",
+  top: 0,
+  zIndex: 2,
   ...t
 }));
 r.defaultProps = {

package/dist/MainNav/NavFooter.cjs

@@ -1,3 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),s=require("prop-types"),a=require("styled-components"),l=require("../Box/Box.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=t(r),u=t(s),c=t(a),d=c.default(l.Box)`
-  position: relative;
-`,o=({children:e})=>n.default.createElement(d,null,e);o.displayName="NavFooter";o.propTypes={children:u.default.node.isRequired};exports.NavFooter=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),a=require("prop-types"),s=require("../Box/Box.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},u=o(r),c=o(a),t=({children:e})=>u.default.createElement(s.Box,{position:"relative"},e);t.displayName="NavFooter";t.propTypes={children:c.default.node.isRequired};exports.NavFooter=t;

package/dist/MainNav/NavFooter.js

@@ -1,10 +1,9 @@
 import r from "react";
 import t from "prop-types";
-import i from "styled-components";
 import { Box as p } from "../Box/Box.js";
-const m = i(p)`
-  position: relative;
-`, e = ({ children: o }) => /* @__PURE__ */ r.createElement(m, null, o);
+const e = ({ children: o }) => /* @__PURE__ */ r.createElement(p, {
+  position: "relative"
+}, o);
 e.displayName = "NavFooter";
 e.propTypes = {
   children: t.node.isRequired

package/dist/ModalLayout/ModalLayout.cjs

@@ -1,12 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),i=require("styled-components"),d=require("prop-types"),p=require("../Box/Box.cjs"),f=require("../FocusTrap/FocusTrap.cjs"),y=require("../Portal/Portal.cjs"),m=require("./ModalContext.cjs"),b=require("../DismissibleLayer/DismissibleLayer.cjs"),q=require("../helpers/useLockScroll.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(c),r=o(i),a=o(d),g=r.default.div`
-  position: fixed;
-  z-index: 4;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),i=require("styled-components"),d=require("prop-types"),p=require("../Box/Box.cjs"),f=require("../Flex/Flex.cjs"),y=require("../FocusTrap/FocusTrap.cjs"),m=require("../Portal/Portal.cjs"),x=require("./ModalContext.cjs"),b=require("../DismissibleLayer/DismissibleLayer.cjs"),q=require("../helpers/useLockScroll.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(c),a=o(i),r=o(d),g=a.default(f.Flex)`
   inset: 0;
   background: ${({theme:e})=>`${e.colors.neutral800}1F`};
-  padding: 0 ${({theme:e})=>e.spaces[8]};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`,x=r.default(p.Box)`
+`,j=a.default(p.Box)`
   width: ${830/16}rem;
-`,l=({onClose:e,labelledBy:s,...n})=>(q(!0),t.default.createElement(y.Portal,null,t.default.createElement(m.ModalContext.Provider,{value:e},t.default.createElement(g,null,t.default.createElement(f.FocusTrap,null,t.default.createElement(b.DismissibleLayer,{onEscapeKeyDown:e,onPointerDownOutside:e},t.default.createElement(x,{"aria-labelledby":s,onClick:u=>u.stopPropagation(),background:"neutral0",hasRadius:!0,shadow:"popupShadow",role:"dialog","aria-modal":!0,...n})))))));l.propTypes={labelledBy:a.default.string.isRequired,onClose:a.default.func.isRequired};exports.ModalLayout=l;
+`,l=({onClose:e,labelledBy:s,...u})=>(q(!0),t.default.createElement(m.Portal,null,t.default.createElement(x.ModalContext.Provider,{value:e},t.default.createElement(g,{justifyContent:"center",paddingLeft:8,paddingRight:8,position:"fixed",zIndex:4},t.default.createElement(y.FocusTrap,null,t.default.createElement(b.DismissibleLayer,{onEscapeKeyDown:e,onPointerDownOutside:e},t.default.createElement(j,{"aria-labelledby":s,onClick:n=>n.stopPropagation(),background:"neutral0",hasRadius:!0,shadow:"popupShadow",role:"dialog","aria-modal":!0,...u})))))));l.propTypes={labelledBy:r.default.string.isRequired,onClose:r.default.func.isRequired};exports.ModalLayout=l;

package/dist/ModalLayout/ModalLayout.js

@@ -1,31 +1,32 @@
-import o from "react";
+import e from "react";
 import t from "styled-components";
 import r from "prop-types";
-import { Box as n } from "../Box/Box.js";
-import { FocusTrap as m } from "../FocusTrap/FocusTrap.js";
-import { Portal as p } from "../Portal/Portal.js";
+import { Box as l } from "../Box/Box.js";
+import { Flex as m } from "../Flex/Flex.js";
+import { FocusTrap as p } from "../FocusTrap/FocusTrap.js";
+import { Portal as d } from "../Portal/Portal.js";
 import { ModalContext as s } from "./ModalContext.js";
-import { DismissibleLayer as d } from "../DismissibleLayer/DismissibleLayer.js";
+import { DismissibleLayer as u } from "../DismissibleLayer/DismissibleLayer.js";
 import c from "../helpers/useLockScroll.js";
-const u = t.div`
-  position: fixed;
-  z-index: 4;
+const f = t(m)`
   inset: 0;
-  background: ${({ theme: e }) => `${e.colors.neutral800}1F`};
-  padding: 0 ${({ theme: e }) => e.spaces[8]};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`, f = t(n)`
+  background: ${({ theme: o }) => `${o.colors.neutral800}1F`};
+`, y = t(l)`
   width: ${830 / 16}rem;
-`, y = ({ onClose: e, labelledBy: a, ...i }) => (c(!0), /* @__PURE__ */ o.createElement(p, null, /* @__PURE__ */ o.createElement(s.Provider, {
-  value: e
-}, /* @__PURE__ */ o.createElement(u, null, /* @__PURE__ */ o.createElement(m, null, /* @__PURE__ */ o.createElement(d, {
-  onEscapeKeyDown: e,
-  onPointerDownOutside: e
-}, /* @__PURE__ */ o.createElement(f, {
+`, g = ({ onClose: o, labelledBy: a, ...i }) => (c(!0), /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(s.Provider, {
+  value: o
+}, /* @__PURE__ */ e.createElement(f, {
+  justifyContent: "center",
+  paddingLeft: 8,
+  paddingRight: 8,
+  position: "fixed",
+  zIndex: 4
+}, /* @__PURE__ */ e.createElement(p, null, /* @__PURE__ */ e.createElement(u, {
+  onEscapeKeyDown: o,
+  onPointerDownOutside: o
+}, /* @__PURE__ */ e.createElement(y, {
   "aria-labelledby": a,
-  onClick: (l) => l.stopPropagation(),
+  onClick: (n) => n.stopPropagation(),
   background: "neutral0",
   hasRadius: !0,
   shadow: "popupShadow",
@@ -33,10 +34,10 @@ const u = t.div`
   "aria-modal": !0,
   ...i
 })))))));
-y.propTypes = {
+g.propTypes = {
   labelledBy: r.string.isRequired,
   onClose: r.func.isRequired
 };
 export {
-  y as ModalLayout
+  g as ModalLayout
 };

package/dist/NumberInput/NumberInput.cjs

@@ -9,4 +9,4 @@
     height: ${4/16}rem;
     transform: ${({reverse:r})=>r?"rotateX(180deg)":void 0};
   }
-`,Z="",d=a.default.forwardRef(({size:r,startAction:N,name:j,hint:w,error:E,label:p,labelAction:k,locale:D,id:A,onValueChange:C,value:S,step:o,required:V,disabled:s,...x},_)=>{const L=Y.useId("numberinput",A),b=D||G.getDefaultLocale(),i=f.useRef(new q.NumberParser(b,{style:"decimal"})),c=f.useRef(new q.NumberFormatter(b,{maximumFractionDigits:20})),[l,P]=J.useControllableState({prop(e){const n=String(S);return isNaN(n)||n!==e&&e!==""?e:n},defaultProp:Z,onChange(e){const n=i.current.parse(e);C(isNaN(n)?void 0:n)}}),u=e=>{P(String(e))},R=({target:{value:e}})=>{i.current.isValidPartialNumber(e)&&u(e)},y=()=>{if(!l){u(o);return}const e=i.current.parse(l),n=isNaN(e)?o:e+o;u(c.current.format(n))},g=()=>{if(!l){u(-o);return}const e=i.current.parse(l),n=isNaN(e)?-o:e-o;u(c.current.format(n))},K=e=>{if(!s)switch(e.key){case v.KeyboardKeys.DOWN:{e.preventDefault(),g();break}case v.KeyboardKeys.UP:{e.preventDefault(),y();break}}},z=()=>{if(l){const e=i.current.parse(l),n=isNaN(e)?"":c.current.format(e);u(n)}};return a.default.createElement($.Field,{name:j,hint:w,error:E,id:L,required:V},a.default.createElement(W.Stack,{spacing:1},p&&a.default.createElement(B.FieldLabel,{action:k},p),a.default.createElement(H.FieldInput,{ref:_,startAction:N,disabled:s,type:"text",inputmode:"decimal",onChange:R,onKeyDown:K,onBlur:z,value:l,size:r,endAction:a.default.createElement(a.default.Fragment,null,a.default.createElement(I,{disabled:s,"aria-hidden":!0,reverse:!0,onClick:y,tabIndex:-1,type:"button","data-testid":"ArrowUp"},a.default.createElement(h.Icon,{as:F.CarretDown,color:"neutral500"})),a.default.createElement(I,{disabled:s,"aria-hidden":!0,onClick:g,tabIndex:-1,type:"button","data-testid":"ArrowDown"},a.default.createElement(h.Icon,{as:F.CarretDown,color:"neutral500"}))),...x}),a.default.createElement(M.FieldHint,null),a.default.createElement(U.FieldError,null)))});d.displayName="NumberInput";d.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};d.propTypes={"aria-label":t.default.string,disabled:t.default.bool,error:t.default.string,hint:t.default.oneOfType([t.default.string,t.default.node,t.default.arrayOf(t.default.node)]),id:t.default.string,label:t.default.string,labelAction:t.default.element,locale:t.default.string,name:t.default.string.isRequired,onValueChange:t.default.func.isRequired,required:t.default.bool,size:t.default.oneOf(Object.keys(X.sizes.input)),startAction:t.default.element,step:t.default.number,value:t.default.number};exports.NumberInput=d;
+`,Z="",d=a.default.forwardRef(({size:r,startAction:N,name:j,hint:w,error:E,label:p,labelAction:k,locale:D,id:A,onValueChange:C,value:S,step:o,required:V,disabled:u,...x},_)=>{const L=Y.useId(A),b=D||G.getDefaultLocale(),i=f.useRef(new q.NumberParser(b,{style:"decimal"})),c=f.useRef(new q.NumberFormatter(b,{maximumFractionDigits:20})),[l,P]=J.useControllableState({prop(e){const n=String(S);return isNaN(n)||n!==e&&e!==""?e:n},defaultProp:Z,onChange(e){const n=i.current.parse(e);C(isNaN(n)?void 0:n)}}),s=e=>{P(String(e))},R=({target:{value:e}})=>{i.current.isValidPartialNumber(e)&&s(e)},y=()=>{if(!l){s(o);return}const e=i.current.parse(l),n=isNaN(e)?o:e+o;s(c.current.format(n))},g=()=>{if(!l){s(-o);return}const e=i.current.parse(l),n=isNaN(e)?-o:e-o;s(c.current.format(n))},K=e=>{if(!u)switch(e.key){case v.KeyboardKeys.DOWN:{e.preventDefault(),g();break}case v.KeyboardKeys.UP:{e.preventDefault(),y();break}}},z=()=>{if(l){const e=i.current.parse(l),n=isNaN(e)?"":c.current.format(e);s(n)}};return a.default.createElement($.Field,{name:j,hint:w,error:E,id:L,required:V},a.default.createElement(W.Stack,{spacing:1},p&&a.default.createElement(B.FieldLabel,{action:k},p),a.default.createElement(H.FieldInput,{ref:_,startAction:N,disabled:u,type:"text",inputmode:"decimal",onChange:R,onKeyDown:K,onBlur:z,value:l,size:r,endAction:a.default.createElement(a.default.Fragment,null,a.default.createElement(I,{disabled:u,"aria-hidden":!0,reverse:!0,onClick:y,tabIndex:-1,type:"button","data-testid":"ArrowUp"},a.default.createElement(h.Icon,{as:F.CarretDown,color:"neutral500"})),a.default.createElement(I,{disabled:u,"aria-hidden":!0,onClick:g,tabIndex:-1,type:"button","data-testid":"ArrowDown"},a.default.createElement(h.Icon,{as:F.CarretDown,color:"neutral500"}))),...x}),a.default.createElement(M.FieldHint,null),a.default.createElement(U.FieldError,null)))});d.displayName="NumberInput";d.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};d.propTypes={"aria-label":t.default.string,disabled:t.default.bool,error:t.default.string,hint:t.default.oneOfType([t.default.string,t.default.node,t.default.arrayOf(t.default.node)]),id:t.default.string,label:t.default.string,labelAction:t.default.element,locale:t.default.string,name:t.default.string.isRequired,onValueChange:t.default.func.isRequired,required:t.default.bool,size:t.default.oneOf(Object.keys(X.sizes.input)),startAction:t.default.element,step:t.default.number,value:t.default.number};exports.NumberInput=d;

package/dist/NumberInput/NumberInput.js

@@ -28,7 +28,7 @@ const h = L.button`
     height: ${4 / 16}rem;
     transform: ${({ reverse: n }) => n ? "rotateX(180deg)" : void 0};
   }
-`, J = "", c = t.forwardRef(
+`, J = "", u = t.forwardRef(
   ({
     size: n,
     startAction: w,
@@ -43,39 +43,39 @@ const h = L.button`
     value: k,
     step: i,
     required: C,
-    disabled: s,
+    disabled: m,
     ...P
   }, R) => {
-    const O = X("numberinput", D), p = x || Y(), m = g(new T(p, { style: "decimal" })), u = g(new z(p, { maximumFractionDigits: 20 })), [a, S] = G({
+    const O = X(D), p = x || Y(), s = g(new T(p, { style: "decimal" })), c = g(new z(p, { maximumFractionDigits: 20 })), [a, S] = G({
       prop(e) {
         const o = String(k);
         return isNaN(o) || o !== e && e !== "" ? e : o;
       },
       defaultProp: J,
       onChange(e) {
-        const o = m.current.parse(e);
+        const o = s.current.parse(e);
         F(isNaN(o) ? void 0 : o);
       }
     }), l = (e) => {
       S(String(e));
     }, $ = ({ target: { value: e } }) => {
-      m.current.isValidPartialNumber(e) && l(e);
+      s.current.isValidPartialNumber(e) && l(e);
     }, f = () => {
       if (!a) {
         l(i);
         return;
       }
-      const e = m.current.parse(a), o = isNaN(e) ? i : e + i;
-      l(u.current.format(o));
+      const e = s.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(u.current.format(o));
+      const e = s.current.parse(a), o = isNaN(e) ? -i : e - i;
+      l(c.current.format(o));
     }, q = (e) => {
-      if (!s)
+      if (!m)
         switch (e.key) {
           case y.DOWN: {
             e.preventDefault(), b();
@@ -88,7 +88,7 @@ const h = L.button`
         }
     }, K = () => {
       if (a) {
-        const e = m.current.parse(a), o = isNaN(e) ? "" : u.current.format(e);
+        const e = s.current.parse(a), o = isNaN(e) ? "" : c.current.format(e);
         l(o);
       }
     };
@@ -105,7 +105,7 @@ const h = L.button`
     }, d), /* @__PURE__ */ t.createElement(_, {
       ref: R,
       startAction: w,
-      disabled: s,
+      disabled: m,
       type: "text",
       inputmode: "decimal",
       onChange: $,
@@ -114,7 +114,7 @@ const h = L.button`
       value: a,
       size: n,
       endAction: /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(h, {
-        disabled: s,
+        disabled: m,
         "aria-hidden": !0,
         reverse: !0,
         onClick: f,
@@ -125,7 +125,7 @@ const h = L.button`
         as: v,
         color: "neutral500"
       })), /* @__PURE__ */ t.createElement(h, {
-        disabled: s,
+        disabled: m,
         "aria-hidden": !0,
         onClick: b,
         tabIndex: -1,
@@ -139,8 +139,8 @@ const h = L.button`
     }), /* @__PURE__ */ t.createElement(j, null), /* @__PURE__ */ t.createElement(H, null)));
   }
 );
-c.displayName = "NumberInput";
-c.defaultProps = {
+u.displayName = "NumberInput";
+u.defaultProps = {
   "aria-label": void 0,
   disabled: !1,
   error: void 0,
@@ -155,7 +155,7 @@ c.defaultProps = {
   step: 1,
   value: void 0
 };
-c.propTypes = {
+u.propTypes = {
   "aria-label": r.string,
   disabled: r.bool,
   error: r.string,
@@ -173,5 +173,5 @@ c.propTypes = {
   value: r.number
 };
 export {
-  c as NumberInput
+  u as NumberInput
 };

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"),y=require("styled-components"),a=require("@floating-ui/react-dom"),u=require("../Box/Box.cjs"),_=require("../Portal/Portal.cjs"),k=require("../helpers/useIntersection.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 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)`
   // 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(_.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;