@strapi/design-system 1.9.0 → 1.10.0-alpha.0

package/dist/MainNav/NavUser.js

@@ -1,18 +1,28 @@
-import { jsx as r, jsxs as p } from "react/jsx-runtime";
-import s from "react";
-import l from "styled-components";
-import { useMainNav as m } from "./MainNavContext.js";
-import { Avatar as f, Initials as c } from "../Avatar/Avatar.js";
-import { Box as i } from "../Box/Box.js";
-import { Flex as u } from "../Flex/Flex.js";
-import { VisuallyHidden as h } from "../VisuallyHidden/VisuallyHidden.js";
-import { Typography as x } from "../Typography/Typography.js";
-const g = l(i)`
-  border-top: 1px solid ${({ theme: o }) => o.colors.neutral150};
-`, L = s.forwardRef(({ src: o, children: t, initials: n, ...d }, a) => {
-  const e = m();
-  return r(g, { paddingTop: 3, paddingBottom: 3, paddingLeft: 5, paddingRight: 5, ...d, children: p(u, { as: "button", justifyContent: e ? "center" : void 0, ref: a, children: [o ? r(f, { src: o, alt: "", "aria-hidden": !0 }) : r(c, { children: n }), e ? r(h, { children: r("span", { children: t }) }) : r(i, { width: `${130 / 16}rem`, paddingLeft: 2, as: "span", children: r(x, { ellipsis: !0, textColor: "neutral600", children: t }) })] }) });
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const styled = require('styled-components');
+const MainNavContext = require('./MainNavContext.js');
+const Avatar = require('../Avatar/Avatar.js');
+const Box = require('../Box/Box.js');
+const Flex = require('../Flex/Flex.js');
+const VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
+const Typography = require('../Typography/Typography.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const React__default = /*#__PURE__*/_interopDefault(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const NavUserBox = styled__default.default(Box.Box) `
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const NavUser = React__default.default.forwardRef(({ src, children, initials, ...props }, ref) => {
+    const condensed = MainNavContext.useMainNav();
+    return (jsxRuntime.jsx(NavUserBox, { paddingTop: 3, paddingBottom: 3, paddingLeft: 5, paddingRight: 5, ...props, children: jsxRuntime.jsxs(Flex.Flex, { as: "button", justifyContent: condensed ? 'center' : undefined, ref: ref, children: [src ? jsxRuntime.jsx(Avatar.Avatar, { src: src, alt: "", "aria-hidden": true }) : jsxRuntime.jsx(Avatar.Initials, { children: initials }), condensed ? (jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: jsxRuntime.jsx("span", { children: children }) })) : (jsxRuntime.jsx(Box.Box, { width: `${130 / 16}rem`, paddingLeft: 2, as: "span", children: jsxRuntime.jsx(Typography.Typography, { ellipsis: true, textColor: "neutral600", children: children }) }))] }) }));
 });
-export {
-  L as NavUser
-};
+
+exports.NavUser = NavUser;

package/dist/MainNav/NavUser.mjs

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import styled from 'styled-components';
+import { useMainNav } from './MainNavContext.mjs';
+import { Avatar, Initials } from '../Avatar/Avatar.mjs';
+import { Box } from '../Box/Box.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+const NavUserBox = styled(Box) `
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const NavUser = React__default.forwardRef(({ src, children, initials, ...props }, ref) => {
+    const condensed = useMainNav();
+    return (jsx(NavUserBox, { paddingTop: 3, paddingBottom: 3, paddingLeft: 5, paddingRight: 5, ...props, children: jsxs(Flex, { as: "button", justifyContent: condensed ? 'center' : undefined, ref: ref, children: [src ? jsx(Avatar, { src: src, alt: "", "aria-hidden": true }) : jsx(Initials, { children: initials }), condensed ? (jsx(VisuallyHidden, { children: jsx("span", { children: children }) })) : (jsx(Box, { width: `${130 / 16}rem`, paddingLeft: 2, as: "span", children: jsx(Typography, { ellipsis: true, textColor: "neutral600", children: children }) }))] }) }));
+});
+
+export { NavUser };

package/dist/MainNav/index.js

@@ -1,18 +1,23 @@
-import { MainNav as e } from "./MainNav.js";
-import { NavBrand as a } from "./NavBrand.js";
-import { NavCondense as m } from "./NavCondense.js";
-import { NavFooter as v } from "./NavFooter.js";
-import { NavLink as N } from "./NavLink.js";
-import { NavSection as i } from "./NavSection.js";
-import { NavSections as c } from "./NavSections.js";
-import { NavUser as S } from "./NavUser.js";
-export {
-  e as MainNav,
-  a as NavBrand,
-  m as NavCondense,
-  v as NavFooter,
-  N as NavLink,
-  i as NavSection,
-  c as NavSections,
-  S as NavUser
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const MainNav = require('./MainNav.js');
+const NavBrand = require('./NavBrand.js');
+const NavCondense = require('./NavCondense.js');
+const NavFooter = require('./NavFooter.js');
+const NavLink = require('./NavLink.js');
+const NavSection = require('./NavSection.js');
+const NavSections = require('./NavSections.js');
+const NavUser = require('./NavUser.js');
+
+
+
+exports.MainNav = MainNav.MainNav;
+exports.NavBrand = NavBrand.NavBrand;
+exports.NavCondense = NavCondense.NavCondense;
+exports.NavFooter = NavFooter.NavFooter;
+exports.NavLink = NavLink.NavLink;
+exports.NavSection = NavSection.NavSection;
+exports.NavSections = NavSections.NavSections;
+exports.NavUser = NavUser.NavUser;

package/dist/MainNav/index.mjs

@@ -0,0 +1,8 @@
+export { MainNav } from './MainNav.mjs';
+export { NavBrand } from './NavBrand.mjs';
+export { NavCondense } from './NavCondense.mjs';
+export { NavFooter } from './NavFooter.mjs';
+export { NavLink } from './NavLink.mjs';
+export { NavSection } from './NavSection.mjs';
+export { NavSections } from './NavSections.mjs';
+export { NavUser } from './NavUser.mjs';

package/dist/ModalLayout/ModalBody.js

@@ -1,10 +1,21 @@
-import { jsx as r } from "react/jsx-runtime";
-import t from "styled-components";
-import { Box as d } from "../Box/Box.js";
-const m = t(d)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styled = require('styled-components');
+const Box = require('../Box/Box.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const ModalBodyWrapper = styled__default.default(Box.Box) `
   overflow: auto;
   max-height: 60vh;
-`, i = (o) => r(m, { padding: 7, ...o });
-export {
-  i as ModalBody
+`;
+const ModalBody = (props) => {
+    return jsxRuntime.jsx(ModalBodyWrapper, { padding: 7, ...props });
 };
+
+exports.ModalBody = ModalBody;

package/dist/ModalLayout/ModalBody.mjs

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { Box } from '../Box/Box.mjs';
+
+const ModalBodyWrapper = styled(Box) `
+  overflow: auto;
+  max-height: 60vh;
+`;
+const ModalBody = (props) => {
+    return jsx(ModalBodyWrapper, { padding: 7, ...props });
+};
+
+export { ModalBody };

package/dist/ModalLayout/ModalContext.js

@@ -1,7 +1,11 @@
-import { createContext as t, useContext as o } from "react";
-const e = t(() => {
-}), r = () => o(e);
-export {
-  e as ModalContext,
-  r as useModal
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+
+const ModalContext = React.createContext(() => { });
+const useModal = () => React.useContext(ModalContext);
+
+exports.ModalContext = ModalContext;
+exports.useModal = useModal;

package/dist/ModalLayout/ModalContext.mjs

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+
+const ModalContext = createContext(() => { });
+const useModal = () => useContext(ModalContext);
+
+export { ModalContext, useModal };

package/dist/ModalLayout/ModalFooter.js

@@ -1,11 +1,22 @@
-import { jsx as o, jsxs as t } from "react/jsx-runtime";
-import i from "styled-components";
-import { Box as n } from "../Box/Box.js";
-import { Flex as d } from "../Flex/Flex.js";
-const p = i(n)`
-  border-radius: 0 0 ${({ theme: r }) => r.borderRadius} ${({ theme: r }) => r.borderRadius};
-  border-top: 1px solid ${({ theme: r }) => r.colors.neutral150};
-`, m = ({ startActions: r, endActions: e }) => o(p, { paddingTop: 4, paddingBottom: 4, paddingLeft: 5, paddingRight: 5, background: "neutral100", children: t(d, { justifyContent: "space-between", children: [o(d, { gap: 2, children: r }), o(d, { gap: 2, children: e })] }) });
-export {
-  m as ModalFooter
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styled = require('styled-components');
+const Box = require('../Box/Box.js');
+const Flex = require('../Flex/Flex.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const ModalFooterWrapper = styled__default.default(Box.Box) `
+  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const ModalFooter = ({ startActions, endActions }) => {
+    return (jsxRuntime.jsx(ModalFooterWrapper, { paddingTop: 4, paddingBottom: 4, paddingLeft: 5, paddingRight: 5, background: "neutral100", children: jsxRuntime.jsxs(Flex.Flex, { justifyContent: "space-between", children: [jsxRuntime.jsx(Flex.Flex, { gap: 2, children: startActions }), jsxRuntime.jsx(Flex.Flex, { gap: 2, children: endActions })] }) }));
 };
+
+exports.ModalFooter = ModalFooter;

package/dist/ModalLayout/ModalFooter.mjs

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { Box } from '../Box/Box.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+
+const ModalFooterWrapper = styled(Box) `
+  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const ModalFooter = ({ startActions, endActions }) => {
+    return (jsx(ModalFooterWrapper, { paddingTop: 4, paddingBottom: 4, paddingLeft: 5, paddingRight: 5, background: "neutral100", children: jsxs(Flex, { justifyContent: "space-between", children: [jsx(Flex, { gap: 2, children: startActions }), jsx(Flex, { gap: 2, children: endActions })] }) }));
+};
+
+export { ModalFooter };

package/dist/ModalLayout/ModalHeader.js

@@ -1,17 +1,26 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { Cross as i } from "@strapi/icons";
-import a from "styled-components";
-import { useModal as n } from "./ModalContext.js";
-import { IconButton as s } from "../IconButton/IconButton.js";
-import { Box as l } from "../Box/Box.js";
-import { Flex as m } from "../Flex/Flex.js";
-const p = a(l)`
-  border-radius: ${({ theme: o }) => o.borderRadius} ${({ theme: o }) => o.borderRadius} 0 0;
-  border-bottom: 1px solid ${({ theme: o }) => o.colors.neutral150};
-`, h = ({ children: o, closeLabel: e = "Close the modal" }) => {
-  const t = n();
-  return r(p, { paddingTop: 4, paddingBottom: 4, paddingLeft: 5, paddingRight: 5, background: "neutral100", children: d(m, { justifyContent: "space-between", children: [o, r(s, { onClick: t, "aria-label": e, icon: r(i, {}) })] }) });
-};
-export {
-  h as ModalHeader
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const icons = require('@strapi/icons');
+const styled = require('styled-components');
+const ModalContext = require('./ModalContext.js');
+const IconButton = require('../IconButton/IconButton.js');
+const Box = require('../Box/Box.js');
+const Flex = require('../Flex/Flex.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const ModalHeaderWrapper = styled__default.default(Box.Box) `
+  border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const ModalHeader = ({ children, closeLabel = 'Close the modal' }) => {
+    const onClose = ModalContext.useModal();
+    return (jsxRuntime.jsx(ModalHeaderWrapper, { paddingTop: 4, paddingBottom: 4, paddingLeft: 5, paddingRight: 5, background: "neutral100", children: jsxRuntime.jsxs(Flex.Flex, { justifyContent: "space-between", children: [children, jsxRuntime.jsx(IconButton.IconButton, { onClick: onClose, "aria-label": closeLabel, icon: jsxRuntime.jsx(icons.Cross, {}) })] }) }));
 };
+
+exports.ModalHeader = ModalHeader;

package/dist/ModalLayout/ModalHeader.mjs

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Cross } from '@strapi/icons';
+import styled from 'styled-components';
+import { useModal } from './ModalContext.mjs';
+import { IconButton } from '../IconButton/IconButton.mjs';
+import { Box } from '../Box/Box.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+
+const ModalHeaderWrapper = styled(Box) `
+  border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const ModalHeader = ({ children, closeLabel = 'Close the modal' }) => {
+    const onClose = useModal();
+    return (jsx(ModalHeaderWrapper, { paddingTop: 4, paddingBottom: 4, paddingLeft: 5, paddingRight: 5, background: "neutral100", children: jsxs(Flex, { justifyContent: "space-between", children: [children, jsx(IconButton, { onClick: onClose, "aria-label": closeLabel, icon: jsx(Cross, {}) })] }) }));
+};
+
+export { ModalHeader };

package/dist/ModalLayout/ModalLayout.js

@@ -1,16 +1,28 @@
-import { jsx as o } from "react/jsx-runtime";
-import a from "styled-components";
-import { ModalContext as d } from "./ModalContext.js";
-import { DismissibleLayer as n } from "../DismissibleLayer/index.js";
-import l from "../hooks/useLockScroll.js";
-import { Flex as p } from "../Flex/Flex.js";
-import { Portal as m } from "../Portal/Portal.js";
-import { FocusTrap as s } from "../FocusTrap/FocusTrap.js";
-import { Box as c } from "../Box/Box.js";
-const u = a(p)`
-  background: ${({ theme: r }) => `${r.colors.neutral800}1F`};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styled = require('styled-components');
+const ModalContext = require('./ModalContext.js');
+const index = require('../DismissibleLayer/index.js');
+const useLockScroll = require('../hooks/useLockScroll.js');
+const Flex = require('../Flex/Flex.js');
+const Portal = require('../Portal/Portal.js');
+const FocusTrap = require('../FocusTrap/FocusTrap.js');
+const Box = require('../Box/Box.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const ModalWrapper = styled__default.default(Flex.Flex) `
+  background: ${({ theme }) => `${theme.colors.neutral800}1F`};
   inset: 0;
-`, P = ({ onClose: r, labelledBy: t, ...i }) => (l(!0), o(m, { children: o(d.Provider, { value: r, children: o(u, { justifyContent: "center", paddingLeft: 8, paddingRight: 8, position: "fixed", zIndex: 4, children: o(s, { children: o(n, { onEscapeKeyDown: r, onPointerDownOutside: r, children: o(c, { "aria-labelledby": t, "aria-modal": !0, onClick: (e) => e.stopPropagation(), background: "neutral0", hasRadius: !0, role: "dialog", shadow: "popupShadow", width: `${830 / 16}rem`, ...i }) }) }) }) }) }));
-export {
-  P as ModalLayout
+`;
+const ModalLayout = ({ onClose, labelledBy, ...props }) => {
+    useLockScroll(true);
+    return (jsxRuntime.jsx(Portal.Portal, { children: jsxRuntime.jsx(ModalContext.ModalContext.Provider, { value: onClose, children: jsxRuntime.jsx(ModalWrapper, { justifyContent: "center", paddingLeft: 8, paddingRight: 8, position: "fixed", zIndex: 4, children: jsxRuntime.jsx(FocusTrap.FocusTrap, { children: jsxRuntime.jsx(index.DismissibleLayer, { onEscapeKeyDown: onClose, onPointerDownOutside: onClose, children: jsxRuntime.jsx(Box.Box, { "aria-labelledby": labelledBy, "aria-modal": true, onClick: (e) => e.stopPropagation(), background: "neutral0", hasRadius: true, role: "dialog", shadow: "popupShadow", width: `${830 / 16}rem`, ...props }) }) }) }) }) }));
 };
+
+exports.ModalLayout = ModalLayout;

package/dist/ModalLayout/ModalLayout.mjs

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { ModalContext } from './ModalContext.mjs';
+import { DismissibleLayer } from '../DismissibleLayer/index.mjs';
+import useLockScroll from '../hooks/useLockScroll.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { Portal } from '../Portal/Portal.mjs';
+import { FocusTrap } from '../FocusTrap/FocusTrap.mjs';
+import { Box } from '../Box/Box.mjs';
+
+const ModalWrapper = styled(Flex) `
+  background: ${({ theme }) => `${theme.colors.neutral800}1F`};
+  inset: 0;
+`;
+const ModalLayout = ({ onClose, labelledBy, ...props }) => {
+    useLockScroll(true);
+    return (jsx(Portal, { children: jsx(ModalContext.Provider, { value: onClose, children: jsx(ModalWrapper, { justifyContent: "center", paddingLeft: 8, paddingRight: 8, position: "fixed", zIndex: 4, children: jsx(FocusTrap, { children: jsx(DismissibleLayer, { onEscapeKeyDown: onClose, onPointerDownOutside: onClose, children: jsx(Box, { "aria-labelledby": labelledBy, "aria-modal": true, onClick: (e) => e.stopPropagation(), background: "neutral0", hasRadius: true, role: "dialog", shadow: "popupShadow", width: `${830 / 16}rem`, ...props }) }) }) }) }) }));
+};
+
+export { ModalLayout };

package/dist/ModalLayout/index.js

@@ -1,10 +1,15 @@
-import { ModalLayout as e } from "./ModalLayout.js";
-import { ModalHeader as d } from "./ModalHeader.js";
-import { ModalFooter as f } from "./ModalFooter.js";
-import { ModalBody as m } from "./ModalBody.js";
-export {
-  m as ModalBody,
-  f as ModalFooter,
-  d as ModalHeader,
-  e as ModalLayout
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const ModalLayout = require('./ModalLayout.js');
+const ModalHeader = require('./ModalHeader.js');
+const ModalFooter = require('./ModalFooter.js');
+const ModalBody = require('./ModalBody.js');
+
+
+
+exports.ModalLayout = ModalLayout.ModalLayout;
+exports.ModalHeader = ModalHeader.ModalHeader;
+exports.ModalFooter = ModalFooter.ModalFooter;
+exports.ModalBody = ModalBody.ModalBody;

package/dist/ModalLayout/index.mjs

@@ -0,0 +1,4 @@
+export { ModalLayout } from './ModalLayout.mjs';
+export { ModalHeader } from './ModalHeader.mjs';
+export { ModalFooter } from './ModalFooter.mjs';
+export { ModalBody } from './ModalBody.mjs';

package/dist/NumberInput/NumberInput.js

@@ -1,79 +1,130 @@
-import { jsx as n, jsxs as h, Fragment as _ } from "react/jsx-runtime";
-import j, { useRef as b } from "react";
-import { NumberParser as E, NumberFormatter as M } from "@internationalized/number";
-import { CarretDown as N } from "@strapi/icons";
-import q from "styled-components";
-import { useDesignSystem as z } from "../DesignSystemProvider.js";
-import { KeyboardKeys as g } from "../helpers/keyboardKeys.js";
-import { useControllableState as H } from "../hooks/useControllableState.js";
-import { useId as O } from "../hooks/useId.js";
-import { FieldInput as T } from "../Field/FieldInput.js";
-import { Field as W } from "../Field/Field.js";
-import { Flex as X } from "../Flex/Flex.js";
-import { FieldLabel as Y } from "../Field/FieldLabel.js";
-import { Icon as w } from "../Icon/Icon.js";
-import { FieldHint as G } from "../Field/FieldHint.js";
-import { FieldError as J } from "../Field/FieldError.js";
-const x = q.button`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const number = require('@internationalized/number');
+const icons = require('@strapi/icons');
+const styled = require('styled-components');
+const DesignSystemProvider = require('../DesignSystemProvider.js');
+const keyboardKeys = require('../helpers/keyboardKeys.js');
+const useControllableState = require('../hooks/useControllableState.js');
+const useId = require('../hooks/useId.js');
+const FieldInput = require('../Field/FieldInput.js');
+const Field = require('../Field/Field.js');
+const Flex = require('../Flex/Flex.js');
+const FieldLabel = require('../Field/FieldLabel.js');
+const Icon = require('../Icon/Icon.js');
+const FieldHint = require('../Field/FieldHint.js');
+const FieldError = require('../Field/FieldError.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const React__default = /*#__PURE__*/_interopDefault(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const ArrowButton = styled__default.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 }) => (reverse ? 'flex-end' : 'flex-start')};
+  transform: translateY(${({ reverse }) => (reverse ? `-2px` : `2px`)});
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : undefined)};
   svg {
     display: block;
     height: ${4 / 16}rem;
-    transform: ${({ reverse: t }) => t ? "rotateX(180deg)" : void 0};
+    transform: ${({ reverse }) => (reverse ? 'rotateX(180deg)' : undefined)};
   }
-`, Q = "", he = j.forwardRef(({ size: t = "M", startAction: y, name: I, hint: F, error: V, label: c, labelAction: D, locale: A, id: C, onValueChange: k, value: u, step: a = 1, required: P = !1, disabled: m = !1, ...R }, S) => {
-  const $ = O(C), K = z("NumberInput"), d = A || K.locale, s = b(new E(d, { style: "decimal" })), l = b(new M(d, { maximumFractionDigits: 20 })), [o, v] = H({
-    prop(e) {
-      const r = String(u);
-      return isNaN(Number(r)) || r !== e && e !== "" ? e : l.current.format(Number(u));
-    },
-    defaultProp: Q,
-    onChange(e) {
-      const r = s.current.parse(e ?? "");
-      k(isNaN(r) ? void 0 : r);
-    }
-  }), i = (e) => {
-    v(String(e));
-  }, B = ({ target: { value: e } }) => {
-    s.current.isValidPartialNumber(e) && i(e);
-  }, f = () => {
-    if (!o) {
-      i(a);
-      return;
-    }
-    const e = s.current.parse(o), r = isNaN(e) ? a : e + a;
-    i(l.current.format(r));
-  }, p = () => {
-    if (!o) {
-      i(-a);
-      return;
-    }
-    const e = s.current.parse(o), r = isNaN(e) ? -a : e - a;
-    i(l.current.format(r));
-  }, L = (e) => {
-    if (!m)
-      switch (e.key) {
-        case g.DOWN: {
-          e.preventDefault(), p();
-          break;
+`;
+const INITIAL_VALUE = '';
+const NumberInput = React__default.default.forwardRef(({ size = 'M', startAction, name, hint, error, label, labelAction, locale: defaultLocale, id, onValueChange, value, step = 1, required = false, disabled = false, ...props }, ref) => {
+    const generatedId = useId.useId(id);
+    const designContext = DesignSystemProvider.useDesignSystem('NumberInput');
+    const locale = defaultLocale || designContext.locale;
+    const numberParserRef = React.useRef(new number.NumberParser(locale, { style: 'decimal' }));
+    const numberFormaterRef = React.useRef(new number.NumberFormatter(locale, { maximumFractionDigits: 20 }));
+    const [inputValue, setInputValue] = useControllableState.useControllableState({
+        prop(currentInputValue) {
+            const stringifiedValue = String(value);
+            /**
+             * This basically accounts for when someone wants to:
+             * 1. clear the input
+             * 2. use a minus value
+             * 3. use a decimal value
+             *
+             * And always give it a string
+             */
+            return isNaN(Number(stringifiedValue)) || (stringifiedValue !== currentInputValue && currentInputValue !== '')
+                ? currentInputValue
+                : numberFormaterRef.current.format(Number(value));
+        },
+        defaultProp: INITIAL_VALUE,
+        onChange(value) {
+            /**
+             * always return a
+             */
+            const parsedValue = numberParserRef.current.parse(value ?? '');
+            onValueChange(isNaN(parsedValue) ? undefined : parsedValue);
+        },
+    });
+    /**
+     * Value will either be a number or a string,
+     * if the former then it'll be converted to a string.
+     */
+    const formatNumberAndSetInput = (value) => {
+        setInputValue(String(value));
+    };
+    const handelInputChange = ({ target: { value } }) => {
+        if (numberParserRef.current.isValidPartialNumber(value)) {
+            formatNumberAndSetInput(value);
         }
-        case g.UP: {
-          e.preventDefault(), f();
-          break;
+    };
+    const increment = () => {
+        if (!inputValue) {
+            formatNumberAndSetInput(step);
+            return;
         }
-      }
-  }, U = () => {
-    if (o) {
-      const e = s.current.parse(o), r = isNaN(e) ? "" : l.current.format(e);
-      i(r);
-    }
-  };
-  return n(W, { name: I, hint: F, error: V, id: $, required: P, children: h(X, { direction: "column", alignItems: "stretch", gap: 1, children: [c && n(Y, { action: D, children: c }), n(T, { ref: S, startAction: y, disabled: m, type: "text", inputMode: "decimal", onChange: B, onKeyDown: L, onBlur: U, value: o, size: t, endAction: h(_, { children: [n(x, { disabled: m, "aria-hidden": !0, reverse: !0, onClick: f, tabIndex: -1, type: "button", "data-testid": "ArrowUp", children: n(w, { as: N, color: "neutral500" }) }), n(x, { disabled: m, "aria-hidden": !0, onClick: p, tabIndex: -1, type: "button", "data-testid": "ArrowDown", children: n(w, { as: N, color: "neutral500" }) })] }), ...R }), n(G, {}), n(J, {})] }) });
+        const parsedValue = numberParserRef.current.parse(inputValue);
+        const newValue = isNaN(parsedValue) ? step : parsedValue + step;
+        formatNumberAndSetInput(numberFormaterRef.current.format(newValue));
+    };
+    const decrement = () => {
+        if (!inputValue) {
+            formatNumberAndSetInput(-step);
+            return;
+        }
+        const parsedValue = numberParserRef.current.parse(inputValue);
+        const newValue = isNaN(parsedValue) ? -step : parsedValue - step;
+        formatNumberAndSetInput(numberFormaterRef.current.format(newValue));
+    };
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        switch (e.key) {
+            case keyboardKeys.KeyboardKeys.DOWN: {
+                e.preventDefault();
+                decrement();
+                break;
+            }
+            case keyboardKeys.KeyboardKeys.UP: {
+                e.preventDefault();
+                increment();
+                break;
+            }
+        }
+    };
+    /**
+     * Only format on blur as vanity because otherwise it breaks when a user
+     * wants to include a minus or decimal value.
+     */
+    const handleBlur = () => {
+        if (inputValue) {
+            const parsedValue = numberParserRef.current.parse(inputValue);
+            const formattedValue = isNaN(parsedValue) ? '' : numberFormaterRef.current.format(parsedValue);
+            formatNumberAndSetInput(formattedValue);
+        }
+    };
+    return (jsxRuntime.jsx(Field.Field, { name: name, hint: hint, error: error, id: generatedId, required: required, children: jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [label && jsxRuntime.jsx(FieldLabel.FieldLabel, { action: labelAction, children: label }), jsxRuntime.jsx(FieldInput.FieldInput, { ref: ref, startAction: startAction, disabled: disabled, type: "text", inputMode: "decimal", onChange: handelInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, value: inputValue, size: size, endAction: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ArrowButton, { disabled: disabled, "aria-hidden": true, reverse: true, onClick: increment, tabIndex: -1, type: "button", "data-testid": "ArrowUp", children: jsxRuntime.jsx(Icon.Icon, { as: icons.CarretDown, color: "neutral500" }) }), jsxRuntime.jsx(ArrowButton, { disabled: disabled, "aria-hidden": true, onClick: decrement, tabIndex: -1, type: "button", "data-testid": "ArrowDown", children: jsxRuntime.jsx(Icon.Icon, { as: icons.CarretDown, color: "neutral500" }) })] }), ...props }), jsxRuntime.jsx(FieldHint.FieldHint, {}), jsxRuntime.jsx(FieldError.FieldError, {})] }) }));
 });
-export {
-  he as NumberInput
-};
+
+exports.NumberInput = NumberInput;