@strapi/design-system 1.19.0-typescript.0 → 2.0.0-beta.1

package/dist/MainNav/NavSection.mjs

@@ -1,24 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default from 'react';
-import { useMainNav } from './MainNavContext.mjs';
-import { Divider } from '../Divider/Divider.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-import { Box } from '../Box/Box.mjs';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-
-const NavSection = ({ label, children, spacing = 2, horizontal = false, ...props }) => {
-    const condensed = useMainNav();
-    if (condensed) {
-        return (jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [jsxs(Box, { paddingTop: 1, paddingBottom: 1, background: "neutral0", hasRadius: true, as: "span", children: [jsx(Divider, {}), jsx(VisuallyHidden, { children: jsx("span", { children: label }) })] }), jsx(Flex, { as: "ul", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: React__default.Children.map(children, (child, index) => {
-                        // eslint-disable-next-line react/no-array-index-key
-                        return jsx("li", { children: child }, index);
-                    }) })] }));
-    }
-    return (jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [jsx(Box, { paddingTop: 1, paddingBottom: 1, background: "neutral0", paddingRight: 3, paddingLeft: 3, hasRadius: true, as: "span", children: jsx(Typography, { variant: "sigma", textColor: "neutral600", children: label }) }), jsx(Flex, { as: "ul", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: React__default.Children.map(children, (child, index) => {
-                    // eslint-disable-next-line react/no-array-index-key
-                    return jsx("li", { children: child }, index);
-                }) })] }));
-};
-
-export { NavSection };

package/dist/MainNav/NavSections.js

@@ -1,27 +0,0 @@
-'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 Box = require('../Box/Box.js');
-const Flex = require('../Flex/Flex.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const React__default = /*#__PURE__*/_interopDefault(React);
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const BoxGrow = styled__default.default(Box.Box) `
-  flex-grow: 1;
-  overflow-y: auto;
-`;
-const NavSections = ({ children, spacing = 4, horizontal = false, ...props }) => {
-    return (jsxRuntime.jsx(BoxGrow, { paddingLeft: 3, paddingRight: 2, paddingTop: 3, paddingBottom: 8, children: jsxRuntime.jsx(Flex.Flex, { as: "ul", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: React__default.default.Children.map(children, (child, index) => {
-                // eslint-disable-next-line react/no-array-index-key
-                return jsxRuntime.jsx("li", { children: child }, index);
-            }) }) }));
-};
-
-exports.NavSections = NavSections;

package/dist/MainNav/NavSections.mjs

@@ -1,18 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import React__default from 'react';
-import styled from 'styled-components';
-import { Box } from '../Box/Box.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-
-const BoxGrow = styled(Box) `
-  flex-grow: 1;
-  overflow-y: auto;
-`;
-const NavSections = ({ children, spacing = 4, horizontal = false, ...props }) => {
-    return (jsx(BoxGrow, { paddingLeft: 3, paddingRight: 2, paddingTop: 3, paddingBottom: 8, children: jsx(Flex, { as: "ul", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: React__default.Children.map(children, (child, index) => {
-                // eslint-disable-next-line react/no-array-index-key
-                return jsx("li", { children: child }, index);
-            }) }) }));
-};
-
-export { NavSections };

package/dist/MainNav/NavUser.js

@@ -1,28 +0,0 @@
-'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 }) }))] }) }));
-});
-
-exports.NavUser = NavUser;

package/dist/MainNav/NavUser.mjs

@@ -1,19 +0,0 @@
-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,23 +0,0 @@
-'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

@@ -1,8 +0,0 @@
-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,21 +0,0 @@
-'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;
-`;
-const ModalBody = (props) => {
-    return jsxRuntime.jsx(ModalBodyWrapper, { padding: 7, ...props });
-};
-
-exports.ModalBody = ModalBody;

package/dist/ModalLayout/ModalBody.mjs

@@ -1,13 +0,0 @@
-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,11 +0,0 @@
-'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

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

package/dist/ModalLayout/ModalFooter.js

@@ -1,22 +0,0 @@
-'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

@@ -1,14 +0,0 @@
-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,26 +0,0 @@
-'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

@@ -1,18 +0,0 @@
-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,28 +0,0 @@
-'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;
-`;
-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

@@ -1,20 +0,0 @@
-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/__tests__/ModalLayout.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/ModalLayout/index.js

@@ -1,15 +0,0 @@
-'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

@@ -1,4 +0,0 @@
-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,130 +0,0 @@
-'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 }) => (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 }) => (reverse ? 'rotateX(180deg)' : undefined)};
-  }
-`;
-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);
-        }
-    };
-    const increment = () => {
-        if (!inputValue) {
-            formatNumberAndSetInput(step);
-            return;
-        }
-        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, {})] }) }));
-});
-
-exports.NumberInput = NumberInput;

package/dist/NumberInput/NumberInput.mjs

@@ -1,121 +0,0 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React__default, { useRef } from 'react';
-import { NumberParser, NumberFormatter } from '@internationalized/number';
-import { CarretDown } from '@strapi/icons';
-import styled from 'styled-components';
-import { useDesignSystem } from '../DesignSystemProvider.mjs';
-import { KeyboardKeys } from '../helpers/keyboardKeys.mjs';
-import { useControllableState } from '../hooks/useControllableState.mjs';
-import { useId } from '../hooks/useId.mjs';
-import { FieldInput } from '../Field/FieldInput.mjs';
-import { Field } from '../Field/Field.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-import { FieldLabel } from '../Field/FieldLabel.mjs';
-import { Icon } from '../Icon/Icon.mjs';
-import { FieldHint } from '../Field/FieldHint.mjs';
-import { FieldError } from '../Field/FieldError.mjs';
-
-const ArrowButton = styled.button `
-  display: flex;
-  height: 1rem;
-  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 }) => (reverse ? 'rotateX(180deg)' : undefined)};
-  }
-`;
-const INITIAL_VALUE = '';
-const NumberInput = React__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(id);
-    const designContext = useDesignSystem('NumberInput');
-    const locale = defaultLocale || designContext.locale;
-    const numberParserRef = useRef(new NumberParser(locale, { style: 'decimal' }));
-    const numberFormaterRef = useRef(new NumberFormatter(locale, { maximumFractionDigits: 20 }));
-    const [inputValue, setInputValue] = 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);
-        }
-    };
-    const increment = () => {
-        if (!inputValue) {
-            formatNumberAndSetInput(step);
-            return;
-        }
-        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.DOWN: {
-                e.preventDefault();
-                decrement();
-                break;
-            }
-            case 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 (jsx(Field, { name: name, hint: hint, error: error, id: generatedId, required: required, children: jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [label && jsx(FieldLabel, { action: labelAction, children: label }), jsx(FieldInput, { ref: ref, startAction: startAction, disabled: disabled, type: "text", inputMode: "decimal", onChange: handelInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, value: inputValue, size: size, endAction: jsxs(Fragment, { children: [jsx(ArrowButton, { disabled: disabled, "aria-hidden": true, reverse: true, onClick: increment, tabIndex: -1, type: "button", "data-testid": "ArrowUp", children: jsx(Icon, { as: CarretDown, color: "neutral500" }) }), jsx(ArrowButton, { disabled: disabled, "aria-hidden": true, onClick: decrement, tabIndex: -1, type: "button", "data-testid": "ArrowDown", children: jsx(Icon, { as: CarretDown, color: "neutral500" }) })] }), ...props }), jsx(FieldHint, {}), jsx(FieldError, {})] }) }));
-});
-
-export { NumberInput };

package/dist/NumberInput/index.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const NumberInput = require('./NumberInput.js');
-
-
-
-exports.NumberInput = NumberInput.NumberInput;

package/dist/NumberInput/index.mjs

@@ -1 +0,0 @@
-export { NumberInput } from './NumberInput.mjs';