@strapi/design-system 1.4.0-beta.0 → 1.4.0-beta.1

package/dist/MainNav/NavUser.js

@@ -1,54 +1,74 @@
-import e from "react";
-import o from "prop-types";
-import m from "styled-components";
-import { Avatar as s, Initials as c } from "../Avatar/Avatar.js";
+var y = Object.defineProperty;
+var n = Object.getOwnPropertySymbols;
+var s = Object.prototype.hasOwnProperty, c = Object.prototype.propertyIsEnumerable;
+var m = (e, t, o) => t in e ? y(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, f = (e, t) => {
+  for (var o in t || (t = {}))
+    s.call(t, o) && m(e, o, t[o]);
+  if (n)
+    for (var o of n(t))
+      c.call(t, o) && m(e, o, t[o]);
+  return e;
+};
+var u = (e, t) => {
+  var o = {};
+  for (var r in e)
+    s.call(e, r) && t.indexOf(r) < 0 && (o[r] = e[r]);
+  if (e != null && n)
+    for (var r of n(e))
+      t.indexOf(r) < 0 && c.call(e, r) && (o[r] = e[r]);
+  return o;
+};
+import i from "react";
+import a from "prop-types";
+import E from "styled-components";
+import { Avatar as x, Initials as h } from "../Avatar/Avatar.js";
 import "../Avatar/AvatarGroup.js";
-import { Typography as f } from "../Typography/Typography.js";
-import { Flex as u } from "../Flex/Flex.js";
-import { Box as a } from "../Box/Box.js";
-import { useMainNav as g } from "./MainNavContext.js";
-import { VisuallyHidden as v } from "../VisuallyHidden/VisuallyHidden.js";
-const y = m(a)`
+import { Typography as N } from "../Typography/Typography.js";
+import { Flex as b } from "../Flex/Flex.js";
+import { Box as g } from "../Box/Box.js";
+import { useMainNav as R } from "./MainNavContext.js";
+import { VisuallyHidden as T } from "../VisuallyHidden/VisuallyHidden.js";
+const w = E(g)`
   text-decoration: none;
   position: absolute;
   bottom: 0;
   width: 100%;
-  border-top: 1px solid ${({ theme: t }) => t.colors.neutral150};
-`, r = e.forwardRef(({ src: t, children: i, initials: l, ...d }, p) => {
-  const n = g();
-  return /* @__PURE__ */ e.createElement(y, {
+  border-top: 1px solid ${({ theme: e }) => e.colors.neutral150};
+`, l = i.forwardRef((B, v) => {
+  var d = B, { src: e, children: t, initials: o } = d, r = u(d, ["src", "children", "initials"]);
+  const p = R();
+  return /* @__PURE__ */ i.createElement(w, f({
     paddingTop: 3,
     paddingBottom: 3,
     paddingLeft: 5,
-    paddingRight: 5,
-    ...d
-  }, /* @__PURE__ */ e.createElement(u, {
+    paddingRight: 5
+  }, r), /* @__PURE__ */ i.createElement(b, {
     as: "button",
-    justifyContent: n ? "center" : void 0,
-    ref: p
-  }, t ? /* @__PURE__ */ e.createElement(s, {
-    src: t,
+    justifyContent: p ? "center" : void 0,
+    ref: v
+  }, e ? /* @__PURE__ */ i.createElement(x, {
+    src: e,
     alt: "",
     "aria-hidden": !0
-  }) : /* @__PURE__ */ e.createElement(c, null, l), n ? /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement("span", null, i)) : /* @__PURE__ */ e.createElement(a, {
+  }) : /* @__PURE__ */ i.createElement(h, null, o), p ? /* @__PURE__ */ i.createElement(T, null, /* @__PURE__ */ i.createElement("span", null, t)) : /* @__PURE__ */ i.createElement(g, {
     width: `${130 / 16}rem`,
     paddingLeft: 2,
     as: "span"
-  }, /* @__PURE__ */ e.createElement(f, {
+  }, /* @__PURE__ */ i.createElement(N, {
     ellipsis: !0,
     textColor: "neutral600"
-  }, i))));
+  }, t))));
 });
-r.displayName = "NavUser";
-r.defaultProps = {
+l.displayName = "NavUser";
+l.defaultProps = {
   src: void 0,
   initials: void 0
 };
-r.propTypes = {
-  children: o.node.isRequired,
-  initials: o.node,
-  src: o.string
+l.propTypes = {
+  children: a.node.isRequired,
+  initials: a.node,
+  src: a.string
 };
 export {
-  r as NavUser
+  l as NavUser
 };

package/dist/ModalLayout/ModalBody.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),a=require("styled-components"),d=require("../Box/Box.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=t(o),r=t(a),c=r.default(d.Box)`
+"use strict";var c=Object.defineProperty;var a=Object.getOwnPropertySymbols;var u=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable;var d=(e,t,o)=>t in e?c(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,l=(e,t)=>{for(var o in t||(t={}))u.call(t,o)&&d(e,o,t[o]);if(a)for(var o of a(t))n.call(t,o)&&d(e,o,t[o]);return e};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),i=require("styled-components"),f=require("../Box/Box.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},y=r(s),p=r(i),B=p.default(f.Box)`
   overflow: auto;
   max-height: 60vh;
-`,u=e=>l.default.createElement(c,{padding:7,...e});exports.ModalBody=u;
+`,_=e=>y.default.createElement(B,l({padding:7},e));exports.ModalBody=_;

package/dist/ModalLayout/ModalBody.js

@@ -1,13 +1,23 @@
-import t from "react";
-import r from "styled-components";
-import { Box as e } from "../Box/Box.js";
-const a = r(e)`
+var m = Object.defineProperty;
+var e = Object.getOwnPropertySymbols;
+var p = Object.prototype.hasOwnProperty, l = Object.prototype.propertyIsEnumerable;
+var a = (r, o, t) => o in r ? m(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t, d = (r, o) => {
+  for (var t in o || (o = {}))
+    p.call(o, t) && a(r, t, o[t]);
+  if (e)
+    for (var t of e(o))
+      l.call(o, t) && a(r, t, o[t]);
+  return r;
+};
+import f from "react";
+import i from "styled-components";
+import { Box as n } from "../Box/Box.js";
+const c = i(n)`
   overflow: auto;
   max-height: 60vh;
-`, l = (o) => /* @__PURE__ */ t.createElement(a, {
-  padding: 7,
-  ...o
-});
+`, y = (r) => /* @__PURE__ */ f.createElement(c, d({
+  padding: 7
+}, r));
 export {
-  l as ModalBody
+  y as ModalBody
 };

package/dist/ModalLayout/ModalLayout.cjs

@@ -1,4 +1,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("../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`
+"use strict";var q=Object.defineProperty;var l=Object.getOwnPropertySymbols;var c=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;var u=(e,o,t)=>o in e?q(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,d=(e,o)=>{for(var t in o||(o={}))c.call(o,t)&&u(e,t,o[t]);if(l)for(var t of l(o))i.call(o,t)&&u(e,t,o[t]);return e};var p=(e,o)=>{var t={};for(var a in e)c.call(e,a)&&o.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&l)for(var a of l(e))o.indexOf(a)<0&&i.call(e,a)&&(t[a]=e[a]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react"),x=require("styled-components"),P=require("prop-types"),j=require("../Box/Box.cjs"),L=require("../FocusTrap/FocusTrap.cjs"),M=require("../Portal/Portal.cjs"),_=require("./ModalContext.cjs"),T=require("../DismissibleLayer/DismissibleLayer.cjs"),D=require("../helpers/useLockScroll.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=s(g),y=s(x),f=s(P),E=y.default.div`
   position: fixed;
   z-index: 4;
   inset: 0;
@@ -7,6 +7,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-`,x=r.default(p.Box)`
+`,h=y.default(j.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;
+`,m=a=>{var n=a,{onClose:e,labelledBy:o}=n,t=p(n,["onClose","labelledBy"]);return D(!0),r.default.createElement(M.Portal,null,r.default.createElement(_.ModalContext.Provider,{value:e},r.default.createElement(E,null,r.default.createElement(L.FocusTrap,null,r.default.createElement(T.DismissibleLayer,{onEscapeKeyDown:e,onPointerDownOutside:e},r.default.createElement(h,d({"aria-labelledby":o,onClick:b=>b.stopPropagation(),background:"neutral0",hasRadius:!0,shadow:"popupShadow",role:"dialog","aria-modal":!0},t)))))))};m.propTypes={labelledBy:f.default.string.isRequired,onClose:f.default.func.isRequired};exports.ModalLayout=m;

package/dist/ModalLayout/ModalLayout.js

@@ -1,13 +1,33 @@
-import o 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 { ModalContext as s } from "./ModalContext.js";
-import { DismissibleLayer as d } from "../DismissibleLayer/DismissibleLayer.js";
-import c from "../helpers/useLockScroll.js";
-const u = t.div`
+var y = Object.defineProperty;
+var i = Object.getOwnPropertySymbols;
+var m = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var n = (e, r, o) => r in e ? y(e, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[r] = o, s = (e, r) => {
+  for (var o in r || (r = {}))
+    m.call(r, o) && n(e, o, r[o]);
+  if (i)
+    for (var o of i(r))
+      p.call(r, o) && n(e, o, r[o]);
+  return e;
+};
+var d = (e, r) => {
+  var o = {};
+  for (var t in e)
+    m.call(e, t) && r.indexOf(t) < 0 && (o[t] = e[t]);
+  if (e != null && i)
+    for (var t of i(e))
+      r.indexOf(t) < 0 && p.call(e, t) && (o[t] = e[t]);
+  return o;
+};
+import a from "react";
+import u from "styled-components";
+import c from "prop-types";
+import { Box as g } from "../Box/Box.js";
+import { FocusTrap as E } from "../FocusTrap/FocusTrap.js";
+import { Portal as b } from "../Portal/Portal.js";
+import { ModalContext as x } from "./ModalContext.js";
+import { DismissibleLayer as w } from "../DismissibleLayer/DismissibleLayer.js";
+import P from "../helpers/useLockScroll.js";
+const h = u.div`
   position: fixed;
   z-index: 4;
   inset: 0;
@@ -16,27 +36,29 @@ const u = t.div`
   display: flex;
   align-items: center;
   justify-content: center;
-`, f = t(n)`
+`, k = u(g)`
   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, {
-  "aria-labelledby": a,
-  onClick: (l) => l.stopPropagation(),
-  background: "neutral0",
-  hasRadius: !0,
-  shadow: "popupShadow",
-  role: "dialog",
-  "aria-modal": !0,
-  ...i
-})))))));
-y.propTypes = {
-  labelledBy: r.string.isRequired,
-  onClose: r.func.isRequired
+`, M = (t) => {
+  var l = t, { onClose: e, labelledBy: r } = l, o = d(l, ["onClose", "labelledBy"]);
+  return P(!0), /* @__PURE__ */ a.createElement(b, null, /* @__PURE__ */ a.createElement(x.Provider, {
+    value: e
+  }, /* @__PURE__ */ a.createElement(h, null, /* @__PURE__ */ a.createElement(E, null, /* @__PURE__ */ a.createElement(w, {
+    onEscapeKeyDown: e,
+    onPointerDownOutside: e
+  }, /* @__PURE__ */ a.createElement(k, s({
+    "aria-labelledby": r,
+    onClick: (f) => f.stopPropagation(),
+    background: "neutral0",
+    hasRadius: !0,
+    shadow: "popupShadow",
+    role: "dialog",
+    "aria-modal": !0
+  }, o)))))));
+};
+M.propTypes = {
+  labelledBy: c.string.isRequired,
+  onClose: c.func.isRequired
 };
 export {
-  y as ModalLayout
+  M as ModalLayout
 };

package/dist/NumberInput/NumberInput.cjs

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react"),U=require("prop-types"),C=require("@strapi/icons/CarretDown"),W=require("styled-components"),X=require("../themes/sizes.cjs"),N=require("@internationalized/number"),Y=require("../Field/Field.cjs"),G=require("../Field/FieldLabel.cjs"),J=require("../Field/FieldInput.cjs"),Q=require("../Field/FieldHint.cjs"),Z=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const ee=require("../Stack/Stack.cjs"),j=require("../Icon/Icon.cjs"),te=require("../helpers/useId.cjs"),D=require("../helpers/keyboardKeys.cjs"),E=require("../helpers/getDefaultLocale.cjs"),b=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=b(p),e=b(U),w=b(C),re=b(W),S=re.default.button`
+"use strict";var W=Object.defineProperty;var m=Object.getOwnPropertySymbols;var j=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;var N=(e,n,a)=>n in e?W(e,n,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[n]=a,E=(e,n)=>{for(var a in n||(n={}))j.call(n,a)&&N(e,a,n[a]);if(m)for(var a of m(n))w.call(n,a)&&N(e,a,n[a]);return e};var k=(e,n)=>{var a={};for(var u in e)j.call(e,u)&&n.indexOf(u)<0&&(a[u]=e[u]);if(e!=null&&m)for(var u of m(e))n.indexOf(u)<0&&w.call(e,u)&&(a[u]=e[u]);return a};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react"),X=require("prop-types"),Y=require("styled-components"),G=require("@strapi/icons/CarretDown"),D=require("@internationalized/number"),J=require("../Field/Field.cjs"),Q=require("../Field/FieldLabel.cjs"),Z=require("../Field/FieldInput.cjs"),ee=require("../Field/FieldHint.cjs"),te=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const re=require("../Stack/Stack.cjs"),C=require("../Icon/Icon.cjs"),ae=require("../themes/sizes.cjs"),ne=require("../helpers/useId.cjs"),A=require("../helpers/keyboardKeys.cjs"),le=require("../helpers/getDefaultLocale.cjs"),oe=require("../hooks/useControllableState.cjs"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=p(g),r=p(X),ue=p(Y),S=p(G),_=ue.default.button`
   display: flex;
   height: 1rem;
-  align-items: ${({reverse:t})=>t?"flex-end":"flex-start"};
-  transform: translateY(${({reverse:t})=>t?"-2px":"2px"});
-  cursor: ${({disabled:t})=>t?"not-allowed":void 0};
+  align-items: ${({reverse:e})=>e?"flex-end":"flex-start"};
+  transform: translateY(${({reverse:e})=>e?"-2px":"2px"});
+  cursor: ${({disabled:e})=>e?"not-allowed":void 0};
   svg {
     display: block;
     height: ${4/16}rem;
-    transform: ${({reverse:t})=>t?"rotateX(180deg)":void 0};
+    transform: ${({reverse:e})=>e?"rotateX(180deg)":void 0};
   }
-`,h="",y=r.default.forwardRef(({size:t,startAction:k,name:x,hint:_,error:A,label:q,labelAction:L,locale:V,id:R,onValueChange:u,value:i,step:a,required:K,disabled:f,...P},z)=>{const[s,n]=p.useState(i==null?h:String(i)),O=te.useId("numberinput",R),T=V||E.getDefaultLocale(),m=p.useRef(new N.NumberParser(T)),F=p.useRef(new N.NumberFormatter(E.getDefaultLocale(),{maximumFractionDigits:20})),$=l=>{const o=l.target.value;if(m.current.isValidPartialNumber(o)){const c=o===""?void 0:m.current.parse(o);c===void 0||isNaN(c)?u(void 0):u(c),n(l.target.value)}},v=l=>{if(s===void 0){u(a),n(String(a));return}if(isNaN(s)){const o=m.current.parse(s),d=(isNaN(o)?0:o)+a,g=F.current.format(d);u(d),n(l?String(d):g);return}u(i+a),n(String(i+a))},I=l=>{if(s===void 0){u(-a),n(String(-a));return}if(isNaN(s)){const o=m.current.parse(s),d=(isNaN(o)?0:o)-a,g=F.current.format(d);u(d),n(l?String(d):g);return}u(i-a),n(String(i-a))},B=l=>{if(!f)switch(l.key){case D.KeyboardKeys.DOWN:{l.preventDefault(),I(!0);break}case D.KeyboardKeys.UP:{l.preventDefault(),v(!0);break}}},H=()=>{n(s??h)},M=()=>{n(i===void 0?void 0:F.current.format(i))};return r.default.createElement(Y.Field,{name:x,hint:_,error:A,id:O},r.default.createElement(ee.Stack,{spacing:1},q&&r.default.createElement(G.FieldLabel,{required:K,action:L},q),r.default.createElement(J.FieldInput,{ref:z,startAction:k,disabled:f,type:"text",inputmode:"decimal",onChange:$,onKeyDown:B,onBlur:M,onFocus:H,value:s??"",size:t,endAction:r.default.createElement(r.default.Fragment,null,r.default.createElement(S,{disabled:f,"aria-hidden":!0,reverse:!0,onClick:()=>{v()},tabIndex:-1,type:"button","data-testid":"ArrowUp"},r.default.createElement(j.Icon,{as:w.default,color:"neutral500"})),r.default.createElement(S,{disabled:f,"aria-hidden":!0,onClick:()=>{I()},tabIndex:-1,type:"button","data-testid":"ArrowDown"},r.default.createElement(j.Icon,{as:w.default,color:"neutral500"}))),...P}),r.default.createElement(Q.FieldHint,null),r.default.createElement(Z.FieldError,null)))});y.displayName="NumberInput";y.defaultProps={"aria-label":void 0,disabled:!1,error:void 0,hint:void 0,id:void 0,label:void 0,labelAction:void 0,required:!1,size:"M",startAction:void 0,step:1,value:void 0};y.propTypes={"aria-label":e.default.string,disabled:e.default.bool,error:e.default.string,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.string,label:e.default.string,labelAction:e.default.element,locale:e.default.string,name:e.default.string.isRequired,onValueChange:e.default.func.isRequired,required:e.default.bool,size:e.default.oneOf(Object.keys(X.sizes.input)),startAction:e.default.element,step:e.default.number,value:e.default.number};exports.NumberInput=y;
+`,se="",b=l.default.forwardRef((ie,T)=>{var q=ie,{size:e,startAction:n,name:a,hint:u,error:V,label:F,labelAction:x,locale:L,id:P,onValueChange:R,value:K,step:i,required:z,disabled:f}=q,O=k(q,["size","startAction","name","hint","error","label","labelAction","locale","id","onValueChange","value","step","required","disabled"]);const $=ne.useId("numberinput",P),h=L||le.getDefaultLocale(),c=g.useRef(new D.NumberParser(h,{style:"decimal"})),y=g.useRef(new D.NumberFormatter(h,{maximumFractionDigits:20})),[s,B]=oe.useControllableState({prop(t){const o=String(K);return isNaN(o)||o!==t&&t!==""?t:o},defaultProp:se,onChange(t){const o=c.current.parse(t);R(isNaN(o)?void 0:o)}}),d=t=>{B(String(t))},H=({target:{value:t}})=>{c.current.isValidPartialNumber(t)&&d(t)},v=()=>{if(!s){d(i);return}const t=c.current.parse(s),o=isNaN(t)?i:t+i;d(y.current.format(o))},I=()=>{if(!s){d(-i);return}const t=c.current.parse(s),o=isNaN(t)?-i:t-i;d(y.current.format(o))},M=t=>{if(!f)switch(t.key){case A.KeyboardKeys.DOWN:{t.preventDefault(),I();break}case A.KeyboardKeys.UP:{t.preventDefault(),v();break}}},U=()=>{if(s){const t=c.current.parse(s),o=isNaN(t)?"":y.current.format(t);d(o)}};return l.default.createElement(J.Field,{name:a,hint:u,error:V,id:$},l.default.createElement(re.Stack,{spacing:1},F&&l.default.createElement(Q.FieldLabel,{required:z,action:x},F),l.default.createElement(Z.FieldInput,E({ref:T,startAction:n,disabled:f,type:"text",inputmode:"decimal",onChange:H,onKeyDown:M,onBlur:U,value:s,size:e,endAction:l.default.createElement(l.default.Fragment,null,l.default.createElement(_,{disabled:f,"aria-hidden":!0,reverse:!0,onClick:v,tabIndex:-1,type:"button","data-testid":"ArrowUp"},l.default.createElement(C.Icon,{as:S.default,color:"neutral500"})),l.default.createElement(_,{disabled:f,"aria-hidden":!0,onClick:I,tabIndex:-1,type:"button","data-testid":"ArrowDown"},l.default.createElement(C.Icon,{as:S.default,color:"neutral500"})))},O)),l.default.createElement(ee.FieldHint,null),l.default.createElement(te.FieldError,null)))});b.displayName="NumberInput";b.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};b.propTypes={"aria-label":r.default.string,disabled:r.default.bool,error:r.default.string,hint:r.default.oneOfType([r.default.string,r.default.node,r.default.arrayOf(r.default.node)]),id:r.default.string,label:r.default.string,labelAction:r.default.element,locale:r.default.string,name:r.default.string.isRequired,onValueChange:r.default.func.isRequired,required:r.default.bool,size:r.default.oneOf(Object.keys(ae.sizes.input)),startAction:r.default.element,step:r.default.number,value:r.default.number};exports.NumberInput=b;

package/dist/NumberInput/NumberInput.js

@@ -1,8 +1,27 @@
-import t, { useState as j, useRef as x } from "react";
-import e from "prop-types";
-import E from "@strapi/icons/CarretDown";
-import H from "styled-components";
-import { sizes as M } from "../themes/sizes.js";
+var H = Object.defineProperty;
+var p = Object.getOwnPropertySymbols;
+var E = Object.prototype.hasOwnProperty, I = Object.prototype.propertyIsEnumerable;
+var w = (e, n, o) => n in e ? H(e, n, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[n] = o, A = (e, n) => {
+  for (var o in n || (n = {}))
+    E.call(n, o) && w(e, o, n[o]);
+  if (p)
+    for (var o of p(n))
+      I.call(n, o) && w(e, o, n[o]);
+  return e;
+};
+var V = (e, n) => {
+  var o = {};
+  for (var l in e)
+    E.call(e, l) && n.indexOf(l) < 0 && (o[l] = e[l]);
+  if (e != null && p)
+    for (var l of p(e))
+      n.indexOf(l) < 0 && I.call(e, l) && (o[l] = e[l]);
+  return o;
+};
+import a, { useRef as x } from "react";
+import t from "prop-types";
+import M from "styled-components";
+import D from "@strapi/icons/CarretDown";
 import { NumberParser as W, NumberFormatter as X } from "@internationalized/number";
 import { Field as Y } from "../Field/Field.js";
 import { FieldLabel as G } from "../Field/FieldLabel.js";
@@ -11,139 +30,151 @@ import { FieldHint as Q } from "../Field/FieldHint.js";
 import { FieldError as Z } from "../Field/FieldError.js";
 import "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { Stack as C } from "../Stack/Stack.js";
-import { Icon as w } from "../Icon/Icon.js";
-import { useId as ee } from "../helpers/useId.js";
-import { KeyboardKeys as I } from "../helpers/keyboardKeys.js";
-import { getDefaultLocale as F } from "../helpers/getDefaultLocale.js";
-const A = H.button`
+import { Stack as ee } from "../Stack/Stack.js";
+import { Icon as F } from "../Icon/Icon.js";
+import { sizes as re } from "../themes/sizes.js";
+import { useId as te } from "../helpers/useId.js";
+import { KeyboardKeys as k } from "../helpers/keyboardKeys.js";
+import { getDefaultLocale as oe } from "../helpers/getDefaultLocale.js";
+import { useControllableState as ne } from "../hooks/useControllableState.js";
+const C = M.button`
   display: flex;
   height: 1rem;
-  align-items: ${({ reverse: i }) => i ? "flex-end" : "flex-start"};
-  transform: translateY(${({ reverse: i }) => i ? "-2px" : "2px"});
-  cursor: ${({ disabled: i }) => i ? "not-allowed" : void 0};
+  align-items: ${({ reverse: e }) => e ? "flex-end" : "flex-start"};
+  transform: translateY(${({ reverse: e }) => e ? "-2px" : "2px"});
+  cursor: ${({ disabled: e }) => e ? "not-allowed" : void 0};
   svg {
     display: block;
     height: ${4 / 16}rem;
-    transform: ${({ reverse: i }) => i ? "rotateX(180deg)" : void 0};
+    transform: ${({ reverse: e }) => e ? "rotateX(180deg)" : void 0};
   }
-`, V = "", g = t.forwardRef(
-  ({
-    size: i,
-    startAction: h,
-    name: D,
-    hint: S,
-    error: k,
-    label: v,
-    labelAction: R,
-    locale: P,
-    id: O,
-    onValueChange: s,
-    value: a,
-    step: r,
-    required: $,
-    disabled: d,
-    ...q
-  }, K) => {
-    const [m, o] = j(a == null ? V : String(a)), L = ee("numberinput", O), T = P || F(), f = x(new W(T)), p = x(new X(F(), { maximumFractionDigits: 20 })), z = (n) => {
-      const l = n.target.value;
-      if (f.current.isValidPartialNumber(l)) {
-        const u = l === "" ? void 0 : f.current.parse(l);
-        u === void 0 || isNaN(u) ? s(void 0) : s(u), o(n.target.value);
-      }
-    }, N = (n) => {
-      if (m === void 0) {
-        s(r), o(String(r));
-        return;
+`, ae = "", b = a.forwardRef(
+  (ie, T) => {
+    var v = ie, {
+      size: e,
+      startAction: n,
+      name: o,
+      hint: l,
+      error: P,
+      label: g,
+      labelAction: R,
+      locale: O,
+      id: S,
+      onValueChange: $,
+      value: q,
+      step: s,
+      required: K,
+      disabled: d
+    } = v, L = V(v, [
+      "size",
+      "startAction",
+      "name",
+      "hint",
+      "error",
+      "label",
+      "labelAction",
+      "locale",
+      "id",
+      "onValueChange",
+      "value",
+      "step",
+      "required",
+      "disabled"
+    ]);
+    const z = te("numberinput", S), N = O || oe(), c = x(new W(N, { style: "decimal" })), f = x(new X(N, { maximumFractionDigits: 20 })), [m, B] = ne({
+      prop(r) {
+        const i = String(q);
+        return isNaN(i) || i !== r && r !== "" ? r : i;
+      },
+      defaultProp: ae,
+      onChange(r) {
+        const i = c.current.parse(r);
+        $(isNaN(i) ? void 0 : i);
       }
-      if (isNaN(m)) {
-        const l = f.current.parse(m), c = (isNaN(l) ? 0 : l) + r, b = p.current.format(c);
-        s(c), o(n ? String(c) : b);
+    }), u = (r) => {
+      B(String(r));
+    }, U = ({ target: { value: r } }) => {
+      c.current.isValidPartialNumber(r) && u(r);
+    }, y = () => {
+      if (!m) {
+        u(s);
         return;
       }
-      s(a + r), o(String(a + r));
-    }, y = (n) => {
-      if (m === void 0) {
-        s(-r), o(String(-r));
+      const r = c.current.parse(m), i = isNaN(r) ? s : r + s;
+      u(f.current.format(i));
+    }, h = () => {
+      if (!m) {
+        u(-s);
         return;
       }
-      if (isNaN(m)) {
-        const l = f.current.parse(m), c = (isNaN(l) ? 0 : l) - r, b = p.current.format(c);
-        s(c), o(n ? String(c) : b);
-        return;
-      }
-      s(a - r), o(String(a - r));
-    }, B = (n) => {
+      const r = c.current.parse(m), i = isNaN(r) ? -s : r - s;
+      u(f.current.format(i));
+    }, _ = (r) => {
       if (!d)
-        switch (n.key) {
-          case I.DOWN: {
-            n.preventDefault(), y(!0);
+        switch (r.key) {
+          case k.DOWN: {
+            r.preventDefault(), h();
             break;
           }
-          case I.UP: {
-            n.preventDefault(), N(!0);
+          case k.UP: {
+            r.preventDefault(), y();
             break;
           }
         }
-    }, U = () => {
-      o(m ?? V);
-    }, _ = () => {
-      o(a === void 0 ? void 0 : p.current.format(a));
+    }, j = () => {
+      if (m) {
+        const r = c.current.parse(m), i = isNaN(r) ? "" : f.current.format(r);
+        u(i);
+      }
     };
-    return /* @__PURE__ */ t.createElement(Y, {
-      name: D,
-      hint: S,
-      error: k,
-      id: L
-    }, /* @__PURE__ */ t.createElement(C, {
+    return /* @__PURE__ */ a.createElement(Y, {
+      name: o,
+      hint: l,
+      error: P,
+      id: z
+    }, /* @__PURE__ */ a.createElement(ee, {
       spacing: 1
-    }, v && /* @__PURE__ */ t.createElement(G, {
-      required: $,
+    }, g && /* @__PURE__ */ a.createElement(G, {
+      required: K,
       action: R
-    }, v), /* @__PURE__ */ t.createElement(J, {
-      ref: K,
-      startAction: h,
+    }, g), /* @__PURE__ */ a.createElement(J, A({
+      ref: T,
+      startAction: n,
       disabled: d,
       type: "text",
       inputmode: "decimal",
-      onChange: z,
-      onKeyDown: B,
-      onBlur: _,
-      onFocus: U,
-      value: m ?? "",
-      size: i,
-      endAction: /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(A, {
+      onChange: U,
+      onKeyDown: _,
+      onBlur: j,
+      value: m,
+      size: e,
+      endAction: /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(C, {
         disabled: d,
         "aria-hidden": !0,
         reverse: !0,
-        onClick: () => {
-          N();
-        },
+        onClick: y,
         tabIndex: -1,
         type: "button",
         "data-testid": "ArrowUp"
-      }, /* @__PURE__ */ t.createElement(w, {
-        as: E,
+      }, /* @__PURE__ */ a.createElement(F, {
+        as: D,
         color: "neutral500"
-      })), /* @__PURE__ */ t.createElement(A, {
+      })), /* @__PURE__ */ a.createElement(C, {
         disabled: d,
         "aria-hidden": !0,
-        onClick: () => {
-          y();
-        },
+        onClick: h,
         tabIndex: -1,
         type: "button",
         "data-testid": "ArrowDown"
-      }, /* @__PURE__ */ t.createElement(w, {
-        as: E,
+      }, /* @__PURE__ */ a.createElement(F, {
+        as: D,
         color: "neutral500"
-      }))),
-      ...q
-    }), /* @__PURE__ */ t.createElement(Q, null), /* @__PURE__ */ t.createElement(Z, null)));
+      })))
+    }, L)), /* @__PURE__ */ a.createElement(Q, null), /* @__PURE__ */ a.createElement(Z, null)));
   }
 );
-g.displayName = "NumberInput";
-g.defaultProps = {
+b.displayName = "NumberInput";
+b.defaultProps = {
   "aria-label": void 0,
   disabled: !1,
   error: void 0,
@@ -151,29 +182,30 @@ g.defaultProps = {
   id: void 0,
   label: void 0,
   labelAction: void 0,
+  locale: void 0,
   required: !1,
   size: "M",
   startAction: void 0,
   step: 1,
   value: void 0
 };
-g.propTypes = {
-  "aria-label": e.string,
-  disabled: e.bool,
-  error: e.string,
-  hint: e.oneOfType([e.string, e.node, e.arrayOf(e.node)]),
-  id: e.string,
-  label: e.string,
-  labelAction: e.element,
-  locale: e.string,
-  name: e.string.isRequired,
-  onValueChange: e.func.isRequired,
-  required: e.bool,
-  size: e.oneOf(Object.keys(M.input)),
-  startAction: e.element,
-  step: e.number,
-  value: e.number
+b.propTypes = {
+  "aria-label": t.string,
+  disabled: t.bool,
+  error: t.string,
+  hint: t.oneOfType([t.string, t.node, t.arrayOf(t.node)]),
+  id: t.string,
+  label: t.string,
+  labelAction: t.element,
+  locale: t.string,
+  name: t.string.isRequired,
+  onValueChange: t.func.isRequired,
+  required: t.bool,
+  size: t.oneOf(Object.keys(re.input)),
+  startAction: t.element,
+  step: t.number,
+  value: t.number
 };
 export {
-  g as NumberInput
+  b as NumberInput
 };