@doist/reactist 9.2.0-beta.7 → 10.0.0-beta.10

package/es/components/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { forwardRefWithAs } from './type-helpers'\n\n//\n// Reactist menu is a thin wrapper around Reakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Reakit from 'reakit/Menu'\nimport { PopoverBackdrop } from 'reakit/Popover'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = Reakit.MenuStateReturn & {\n    handleItemSelect: (value: string | null | undefined) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Reakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n    // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n    // This is however of little consequence since this value is only used if some of the components\n    // are used outside Menu, something that should not happen and we do not support.\n    // @ts-expect-error\n    {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Reakit.MenuInitialState, 'visible'> & {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const state = Reakit.useMenuState({ loop: true, ...props })\n\n    const handleItemSelect = React.useCallback(\n        function handleItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n        },\n        [onItemSelect],\n    )\n\n    const value: MenuContextState = React.useMemo(\n        () => ({\n            ...state,\n            handleItemSelect,\n        }),\n        [state, handleItemSelect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = forwardRefWithAs<'button'>(function MenuButton({ className, ...props }, ref) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    return (\n        <Reakit.MenuButton\n            {...props}\n            {...state}\n            ref={ref}\n            className={classNames('reactist_menubutton', className)}\n        />\n    )\n})\n\n//\n// MenuList\n//\n\ntype MenuBackdropProps = Reakit.MenuStateReturn & {\n    children: React.ReactNode\n}\n\nconst BACKDROP_STYLE: React.CSSProperties = {\n    width: '100%',\n    height: '100%',\n    position: 'fixed',\n    top: 0,\n    left: 0,\n}\n\n/**\n * Internal component to provide a backdrop/overlay to all menus. This is needed because reakit's\n * menus do not show an overlay by default.\n */\nfunction MenuBackdrop({\n    baseId,\n    visible,\n    animated,\n    animating,\n    stopAnimation,\n    modal,\n    children,\n}: MenuBackdropProps) {\n    return (\n        <PopoverBackdrop\n            baseId={baseId}\n            visible={visible}\n            animated={animated}\n            animating={animating}\n            stopAnimation={stopAnimation}\n            modal={modal}\n            style={BACKDROP_STYLE}\n        >\n            {children}\n        </PopoverBackdrop>\n    )\n}\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = forwardRefWithAs<'div'>(function MenuList({ className, ...props }, ref) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    return state.visible ? (\n        <MenuBackdrop {...state}>\n            <Reakit.Menu\n                {...props}\n                {...state}\n                ref={ref}\n                className={classNames('reactist_menulist', className)}\n            />\n        </MenuBackdrop>\n    ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n    /**\n     * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n     * `onItemSelect` when you provide that instead of (or alongside) providing individual\n     * `onSelect` callbacks to each menu item.\n     */\n    value?: string\n    /**\n     * The content inside the menu item.\n     */\n    children: React.ReactNode\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n    /**\n     * A class name to apply to the menu item element.\n     */\n    className?: string\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = forwardRefWithAs<'button', MenuItemProps>(function MenuItem(\n    { value, children, onSelect, hideOnSelect = true, onClick, ...props },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    const { hide } = state\n\n    const handleClick = React.useCallback(\n        function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n\n    return (\n        <Reakit.MenuItem {...props} {...state} ref={ref} onClick={handleClick}>\n            {children}\n        </Reakit.MenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n *   <MenuButton>More options</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Preferences\" />\n *     <MenuItem label=\"Sign out\" />\n *   </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLButtonElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect, ...props },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, ...state } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = state\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value) {\n            if (onItemSelect) onItemSelect(value)\n            parentMenuItemSelect(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n\n    return (\n        <Reakit.MenuItem {...state} {...props} ref={ref}>\n            {(buttonProps) => (\n                <Menu onItemSelect={handleSubItemSelect}>\n                    {React.cloneElement(button as React.ReactElement, {\n                        ...buttonProps,\n                        className: classNames(buttonProps.className, 'reactist_submenu_button'),\n                    })}\n                    {list}\n                </Menu>\n            )}\n        </Reakit.MenuItem>\n    )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = NativeProps<HTMLDivElement> & {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = forwardRefWithAs<'div', MenuGroupProps>(function MenuGroud(\n    { label, children, ...props },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    return (\n        <Reakit.MenuGroup ref={ref} {...props} {...state}>\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </Reakit.MenuGroup>\n    )\n})\n\nexport { Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuItemProps, SubMenuProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","state","Reakit","loop","handleItemSelect","value","Provider","MenuButton","forwardRefWithAs","ref","className","classNames","BACKDROP_STYLE","width","height","position","top","left","MenuBackdrop","baseId","visible","animated","animating","stopAnimation","modal","PopoverBackdrop","style","MenuList","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","event","onSelectResult","defaultPrevented","undefined","shouldClose","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","toArray","button","list","buttonProps","MenuGroup","MenuGroud","label","role"],"mappings":"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"}
+{"version":3,"file":"menu.js","sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../../utils/polymorphism'\n\n//\n// Reactist menu is a thin wrapper around Reakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Reakit from 'reakit/Menu'\nimport { PopoverBackdrop } from 'reakit/Popover'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = Reakit.MenuStateReturn & {\n    handleItemSelect: (value: string | null | undefined) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Reakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n    // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n    // This is however of little consequence since this value is only used if some of the components\n    // are used outside Menu, something that should not happen and we do not support.\n    // @ts-expect-error\n    {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Reakit.MenuInitialState, 'visible'> & {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const state = Reakit.useMenuState({ loop: true, ...props })\n\n    const handleItemSelect = React.useCallback(\n        function handleItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n        },\n        [onItemSelect],\n    )\n\n    const value: MenuContextState = React.useMemo(\n        () => ({\n            ...state,\n            handleItemSelect,\n        }),\n        [state, handleItemSelect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Reakit.MenuButtonProps, keyof Reakit.MenuStateReturn | 'className'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    return (\n        <Reakit.MenuButton\n            {...props}\n            {...state}\n            ref={ref}\n            className={classNames('reactist_menubutton', exceptionallySetClassName)}\n        />\n    )\n})\n\n//\n// MenuList\n//\n\ntype MenuBackdropProps = Reakit.MenuStateReturn & {\n    children: React.ReactNode\n}\n\nconst BACKDROP_STYLE: React.CSSProperties = {\n    width: '100%',\n    height: '100%',\n    position: 'fixed',\n    top: 0,\n    left: 0,\n}\n\n/**\n * Internal component to provide a backdrop/overlay to all menus. This is needed because reakit's\n * menus do not show an overlay by default.\n */\nfunction MenuBackdrop({\n    baseId,\n    visible,\n    animated,\n    animating,\n    stopAnimation,\n    modal,\n    children,\n}: MenuBackdropProps) {\n    return (\n        <PopoverBackdrop\n            baseId={baseId}\n            visible={visible}\n            animated={animated}\n            animating={animating}\n            stopAnimation={stopAnimation}\n            modal={modal}\n            style={BACKDROP_STYLE}\n        >\n            {children}\n        </PopoverBackdrop>\n    )\n}\n\ntype MenuListProps = Omit<Reakit.MenuProps, keyof Reakit.MenuStateReturn | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    return state.visible ? (\n        <MenuBackdrop {...state}>\n            <Reakit.Menu\n                {...props}\n                {...state}\n                ref={ref}\n                className={classNames('reactist_menulist', exceptionallySetClassName)}\n            />\n        </MenuBackdrop>\n    ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n    /**\n     * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n     * `onItemSelect` when you provide that instead of (or alongside) providing individual\n     * `onSelect` callbacks to each menu item.\n     */\n    value?: string\n    /**\n     * The content inside the menu item.\n     */\n    children: React.ReactNode\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n    {\n        value,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    const { hide } = state\n\n    const handleClick = React.useCallback(\n        function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n\n    return (\n        <Reakit.MenuItem\n            {...props}\n            {...state}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n        >\n            {children}\n        </Reakit.MenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n *   <MenuButton>More options</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Preferences\" />\n *     <MenuItem label=\"Sign out\" />\n *   </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLButtonElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect, ...props },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, ...state } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = state\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value) {\n            if (onItemSelect) onItemSelect(value)\n            parentMenuItemSelect(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n\n    return (\n        <Reakit.MenuItem {...state} {...props} ref={ref}>\n            {(buttonProps) => (\n                <Menu onItemSelect={handleSubItemSelect}>\n                    {React.cloneElement(button as React.ReactElement, {\n                        ...buttonProps,\n                        className: classNames(buttonProps.className, 'reactist_submenu_button'),\n                    })}\n                    {list}\n                </Menu>\n            )}\n        </Reakit.MenuItem>\n    )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroud(\n    { label, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    return (\n        <Reakit.MenuGroup ref={ref} {...props} {...state} className={exceptionallySetClassName}>\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </Reakit.MenuGroup>\n    )\n})\n\nexport { Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, SubMenuProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","state","Reakit","loop","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","BACKDROP_STYLE","width","height","position","top","left","MenuBackdrop","baseId","visible","animated","animating","stopAnimation","modal","PopoverBackdrop","style","MenuList","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","event","onSelectResult","defaultPrevented","undefined","shouldClose","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","toArray","button","list","buttonProps","MenuGroup","MenuGroud","label","role"],"mappings":"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"}

package/es/components/range-input/range-input.js

@@ -39,7 +39,7 @@ function RangeInput(_ref) {
     max: max,
     step: stepSize,
     onChange: function onChange(event) {
-      return _onChange && _onChange(parseInt(event.target.value));
+      return _onChange === null || _onChange === void 0 ? void 0 : _onChange(parseInt(event.target.value));
     }
   }), /*#__PURE__*/React__default.createElement("span", {
     className: "range_btn plus",

package/es/components/range-input/range-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"range-input.js","sources":["../../../src/components/range-input/range-input.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport './range-input.less'\n\ntype Props = {\n    /** Optional css class that is applied to the range input. */\n    className?: string\n    /** Current value of the range input. */\n    value?: number\n    /** Minimum value of the range input. */\n    min?: number\n    /** Maximum value of the range input. */\n    max?: number\n    /** Step size of the range input and the plus/minus buttons. */\n    stepSize?: number\n    /** Optional function that is called when plus button is clicked. If not supplied onChange will be called with the next value. */\n    onPlus?: (value: number) => void\n    /** Optional function that is called when minus button is clicked. If not supplied onChange will be called with the next value. */\n    onMinus?: (value: number) => void\n    /** Callback function that is called whenever the range input value changes. When onPlus or onMinus is supplied this will not be called for button clicks. */\n    onChange?: (value: number) => void\n}\n\nfunction RangeInput({\n    value = 0,\n    min = 0,\n    max = 100,\n    stepSize = 1,\n    onPlus,\n    onMinus,\n    onChange,\n    className,\n}: Props) {\n    if (typeof onPlus !== 'function') {\n        onPlus = onChange\n    }\n    if (typeof onMinus !== 'function') {\n        onMinus = onChange\n    }\n    const rangeInputClassName = classNames('reactist_range_input', className)\n    return (\n        <div className={rangeInputClassName}>\n            <span\n                className=\"range_btn minus\"\n                onClick={() => value > min && onMinus && onMinus(value - stepSize)}\n            />\n            <input\n                value={value}\n                className=\"range_slider\"\n                type=\"range\"\n                min={min}\n                max={max}\n                step={stepSize}\n                onChange={(event) => onChange && onChange(parseInt(event.target.value))}\n            />\n            <span\n                className=\"range_btn plus\"\n                onClick={() => value < max && onPlus && onPlus(value + stepSize)}\n            />\n        </div>\n    )\n}\nRangeInput.displayName = 'RangeInput'\n\nexport { RangeInput }\n"],"names":["RangeInput","value","min","max","stepSize","onPlus","onMinus","onChange","className","rangeInputClassName","classNames","React","onClick","type","step","event","parseInt","target","displayName"],"mappings":";;;AAwBA,SAASA,UAAT;wBACIC;MAAAA,gCAAQ;sBACRC;MAAAA,4BAAM;sBACNC;MAAAA,4BAAM;2BACNC;MAAAA,sCAAW;MACXC,cAAAA;MACAC,eAAAA;MACAC,iBAAAA;MACAC,iBAAAA;;AAEA,MAAI,OAAOH,MAAP,KAAkB,UAAtB,EAAkC;AAC9BA,IAAAA,MAAM,GAAGE,SAAT;AACH;;AACD,MAAI,OAAOD,OAAP,KAAmB,UAAvB,EAAmC;AAC/BA,IAAAA,OAAO,GAAGC,SAAV;AACH;;AACD,MAAME,mBAAmB,GAAGC,UAAU,CAAC,sBAAD,EAAyBF,SAAzB,CAAtC;AACA,sBACIG,4BAAA,MAAA;AAAKH,IAAAA,SAAS,EAAEC;GAAhB,eACIE,4BAAA,OAAA;AACIH,IAAAA,SAAS,EAAC;AACVI,IAAAA,OAAO,EAAE;AAAA,aAAMX,KAAK,GAAGC,GAAR,IAAeI,OAAf,IAA0BA,OAAO,CAACL,KAAK,GAAGG,QAAT,CAAvC;AAAA;GAFb,CADJ,eAKIO,4BAAA,QAAA;AACIV,IAAAA,KAAK,EAAEA;AACPO,IAAAA,SAAS,EAAC;AACVK,IAAAA,IAAI,EAAC;AACLX,IAAAA,GAAG,EAAEA;AACLC,IAAAA,GAAG,EAAEA;AACLW,IAAAA,IAAI,EAAEV;AACNG,IAAAA,QAAQ,EAAE,kBAACQ,KAAD;AAAA,aAAWR,SAAQ,IAAIA,SAAQ,CAACS,QAAQ,CAACD,KAAK,CAACE,MAAN,CAAahB,KAAd,CAAT,CAA/B;AAAA;GAPd,CALJ,eAcIU,4BAAA,OAAA;AACIH,IAAAA,SAAS,EAAC;AACVI,IAAAA,OAAO,EAAE;AAAA,aAAMX,KAAK,GAAGE,GAAR,IAAeE,MAAf,IAAyBA,MAAM,CAACJ,KAAK,GAAGG,QAAT,CAArC;AAAA;GAFb,CAdJ,CADJ;AAqBH;;AACDJ,UAAU,CAACkB,WAAX,GAAyB,YAAzB;;;;"}
+{"version":3,"file":"range-input.js","sources":["../../../src/components/range-input/range-input.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport './range-input.less'\n\ntype Props = {\n    /** Optional css class that is applied to the range input. */\n    className?: string\n    /** Current value of the range input. */\n    value?: number\n    /** Minimum value of the range input. */\n    min?: number\n    /** Maximum value of the range input. */\n    max?: number\n    /** Step size of the range input and the plus/minus buttons. */\n    stepSize?: number\n    /** Optional function that is called when plus button is clicked. If not supplied onChange will be called with the next value. */\n    onPlus?: (value: number) => void\n    /** Optional function that is called when minus button is clicked. If not supplied onChange will be called with the next value. */\n    onMinus?: (value: number) => void\n    /** Callback function that is called whenever the range input value changes. When onPlus or onMinus is supplied this will not be called for button clicks. */\n    onChange?: (value: number) => void\n}\n\nfunction RangeInput({\n    value = 0,\n    min = 0,\n    max = 100,\n    stepSize = 1,\n    onPlus,\n    onMinus,\n    onChange,\n    className,\n}: Props) {\n    if (typeof onPlus !== 'function') {\n        onPlus = onChange\n    }\n    if (typeof onMinus !== 'function') {\n        onMinus = onChange\n    }\n    const rangeInputClassName = classNames('reactist_range_input', className)\n    return (\n        <div className={rangeInputClassName}>\n            <span\n                className=\"range_btn minus\"\n                onClick={() => value > min && onMinus && onMinus(value - stepSize)}\n            />\n            <input\n                value={value}\n                className=\"range_slider\"\n                type=\"range\"\n                min={min}\n                max={max}\n                step={stepSize}\n                onChange={(event) => onChange?.(parseInt(event.target.value))}\n            />\n            <span\n                className=\"range_btn plus\"\n                onClick={() => value < max && onPlus && onPlus(value + stepSize)}\n            />\n        </div>\n    )\n}\nRangeInput.displayName = 'RangeInput'\n\nexport { RangeInput }\n"],"names":["RangeInput","value","min","max","stepSize","onPlus","onMinus","onChange","className","rangeInputClassName","classNames","React","onClick","type","step","event","parseInt","target","displayName"],"mappings":";;;AAwBA,SAASA,UAAT;wBACIC;MAAAA,gCAAQ;sBACRC;MAAAA,4BAAM;sBACNC;MAAAA,4BAAM;2BACNC;MAAAA,sCAAW;MACXC,cAAAA;MACAC,eAAAA;MACAC,iBAAAA;MACAC,iBAAAA;;AAEA,MAAI,OAAOH,MAAP,KAAkB,UAAtB,EAAkC;AAC9BA,IAAAA,MAAM,GAAGE,SAAT;AACH;;AACD,MAAI,OAAOD,OAAP,KAAmB,UAAvB,EAAmC;AAC/BA,IAAAA,OAAO,GAAGC,SAAV;AACH;;AACD,MAAME,mBAAmB,GAAGC,UAAU,CAAC,sBAAD,EAAyBF,SAAzB,CAAtC;AACA,sBACIG,4BAAA,MAAA;AAAKH,IAAAA,SAAS,EAAEC;GAAhB,eACIE,4BAAA,OAAA;AACIH,IAAAA,SAAS,EAAC;AACVI,IAAAA,OAAO,EAAE;AAAA,aAAMX,KAAK,GAAGC,GAAR,IAAeI,OAAf,IAA0BA,OAAO,CAACL,KAAK,GAAGG,QAAT,CAAvC;AAAA;GAFb,CADJ,eAKIO,4BAAA,QAAA;AACIV,IAAAA,KAAK,EAAEA;AACPO,IAAAA,SAAS,EAAC;AACVK,IAAAA,IAAI,EAAC;AACLX,IAAAA,GAAG,EAAEA;AACLC,IAAAA,GAAG,EAAEA;AACLW,IAAAA,IAAI,EAAEV;AACNG,IAAAA,QAAQ,EAAE,kBAACQ,KAAD;AAAA,aAAWR,SAAX,aAAWA,SAAX,uBAAWA,SAAQ,CAAGS,QAAQ,CAACD,KAAK,CAACE,MAAN,CAAahB,KAAd,CAAX,CAAnB;AAAA;GAPd,CALJ,eAcIU,4BAAA,OAAA;AACIH,IAAAA,SAAS,EAAC;AACVI,IAAAA,OAAO,EAAE;AAAA,aAAMX,KAAK,GAAGE,GAAR,IAAeE,MAAf,IAAyBA,MAAM,CAACJ,KAAK,GAAGG,QAAT,CAArC;AAAA;GAFb,CAdJ,CADJ;AAqBH;;AACDJ,UAAU,CAACkB,WAAX,GAAyB,YAAzB;;;;"}

package/es/components/select/select.js

@@ -25,7 +25,7 @@ function Select(_ref) {
     },
     disabled: disabled,
     defaultValue: defaultValue
-  }, otherProps), options && options.map(function (option) {
+  }, otherProps), options === null || options === void 0 ? void 0 : options.map(function (option) {
     return /*#__PURE__*/React__default.createElement("option", {
       key: option.key || option.value,
       value: option.value,

package/es/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":["../../../src/components/select/select.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport './select.less'\n\ntype Option = {\n    /** Optional key for each option. If not provided `value` is used. */\n    key?: string | number\n    /** Value of the option. */\n    value: string | number\n    /** Text to display for the option. */\n    text?: string | number\n    /** Whether the options is disabled or not. */\n    disabled?: boolean\n}\n\ntype Props = {\n    className?: string\n    disabled?: boolean\n    /** Currently selected value. */\n    value?: string | number\n    /** Callback for the change event. Will be called with the next value (not the full event). */\n    onChange?: (value: string) => void\n    /** Options that are rendered in the select. */\n    options?: Option[]\n    /** Value to initially be set */\n    defaultValue?: string | number\n}\n\nfunction Select({\n    value,\n    options = [],\n    onChange,\n    disabled = true,\n    className = '',\n    defaultValue,\n    ...otherProps\n}: Props) {\n    const selectClassName = classNames('reactist_select', { disabled }, className)\n    return (\n        <select\n            className={selectClassName}\n            value={value}\n            onChange={(event) => (onChange ? onChange(event.target.value) : undefined)}\n            disabled={disabled}\n            defaultValue={defaultValue}\n            {...otherProps}\n        >\n            {options &&\n                options.map((option) => (\n                    <option\n                        key={option.key || option.value}\n                        value={option.value}\n                        disabled={option.disabled}\n                    >\n                        {option.text}\n                    </option>\n                ))}\n        </select>\n    )\n}\nSelect.displayName = 'Select'\nSelect.defaultProps = {\n    options: [],\n    disabled: false,\n}\n\nexport { Select }\n"],"names":["Select","value","options","onChange","disabled","className","defaultValue","otherProps","selectClassName","classNames","React","event","target","undefined","map","option","key","text","displayName","defaultProps"],"mappings":";;;;AA6BA,SAASA,MAAT;MACIC,aAAAA;0BACAC;MAAAA,oCAAU;MACVC,iBAAAA;2BACAC;MAAAA,sCAAW;4BACXC;MAAAA,wCAAY;MACZC,oBAAAA;MACGC;;AAEH,MAAMC,eAAe,GAAGC,UAAU,CAAC,iBAAD,EAAoB;AAAEL,IAAAA,QAAQ,EAARA;AAAF,GAApB,EAAkCC,SAAlC,CAAlC;AACA,sBACIK,4BAAA,SAAA;AACIL,IAAAA,SAAS,EAAEG;AACXP,IAAAA,KAAK,EAAEA;AACPE,IAAAA,QAAQ,EAAE,kBAACQ,KAAD;AAAA,aAAYR,SAAQ,GAAGA,SAAQ,CAACQ,KAAK,CAACC,MAAN,CAAaX,KAAd,CAAX,GAAkCY,SAAtD;AAAA;AACVT,IAAAA,QAAQ,EAAEA;AACVE,IAAAA,YAAY,EAAEA;KACVC,WANR,EAQKL,OAAO,IACJA,OAAO,CAACY,GAAR,CAAY,UAACC,MAAD;AAAA,wBACRL,4BAAA,SAAA;AACIM,MAAAA,GAAG,EAAED,MAAM,CAACC,GAAP,IAAcD,MAAM,CAACd;AAC1BA,MAAAA,KAAK,EAAEc,MAAM,CAACd;AACdG,MAAAA,QAAQ,EAAEW,MAAM,CAACX;KAHrB,EAKKW,MAAM,CAACE,IALZ,CADQ;AAAA,GAAZ,CATR,CADJ;AAqBH;;AACDjB,MAAM,CAACkB,WAAP,GAAqB,QAArB;AACAlB,MAAM,CAACmB,YAAP,GAAsB;AAClBjB,EAAAA,OAAO,EAAE,EADS;AAElBE,EAAAA,QAAQ,EAAE;AAFQ,CAAtB;;;;"}
+{"version":3,"file":"select.js","sources":["../../../src/components/select/select.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport './select.less'\n\ntype Option = {\n    /** Optional key for each option. If not provided `value` is used. */\n    key?: string | number\n    /** Value of the option. */\n    value: string | number\n    /** Text to display for the option. */\n    text?: string | number\n    /** Whether the options is disabled or not. */\n    disabled?: boolean\n}\n\ntype Props = {\n    className?: string\n    disabled?: boolean\n    /** Currently selected value. */\n    value?: string | number\n    /** Callback for the change event. Will be called with the next value (not the full event). */\n    onChange?: (value: string) => void\n    /** Options that are rendered in the select. */\n    options?: Option[]\n    /** Value to initially be set */\n    defaultValue?: string | number\n}\n\nfunction Select({\n    value,\n    options = [],\n    onChange,\n    disabled = true,\n    className = '',\n    defaultValue,\n    ...otherProps\n}: Props) {\n    const selectClassName = classNames('reactist_select', { disabled }, className)\n    return (\n        <select\n            className={selectClassName}\n            value={value}\n            onChange={(event) => (onChange ? onChange(event.target.value) : undefined)}\n            disabled={disabled}\n            defaultValue={defaultValue}\n            {...otherProps}\n        >\n            {options?.map((option) => (\n                <option\n                    key={option.key || option.value}\n                    value={option.value}\n                    disabled={option.disabled}\n                >\n                    {option.text}\n                </option>\n            ))}\n        </select>\n    )\n}\nSelect.displayName = 'Select'\nSelect.defaultProps = {\n    options: [],\n    disabled: false,\n}\n\nexport { Select }\n"],"names":["Select","value","options","onChange","disabled","className","defaultValue","otherProps","selectClassName","classNames","React","event","target","undefined","map","option","key","text","displayName","defaultProps"],"mappings":";;;;AA6BA,SAASA,MAAT;MACIC,aAAAA;0BACAC;MAAAA,oCAAU;MACVC,iBAAAA;2BACAC;MAAAA,sCAAW;4BACXC;MAAAA,wCAAY;MACZC,oBAAAA;MACGC;;AAEH,MAAMC,eAAe,GAAGC,UAAU,CAAC,iBAAD,EAAoB;AAAEL,IAAAA,QAAQ,EAARA;AAAF,GAApB,EAAkCC,SAAlC,CAAlC;AACA,sBACIK,4BAAA,SAAA;AACIL,IAAAA,SAAS,EAAEG;AACXP,IAAAA,KAAK,EAAEA;AACPE,IAAAA,QAAQ,EAAE,kBAACQ,KAAD;AAAA,aAAYR,SAAQ,GAAGA,SAAQ,CAACQ,KAAK,CAACC,MAAN,CAAaX,KAAd,CAAX,GAAkCY,SAAtD;AAAA;AACVT,IAAAA,QAAQ,EAAEA;AACVE,IAAAA,YAAY,EAAEA;KACVC,WANR,EAQKL,OARL,aAQKA,OARL,uBAQKA,OAAO,CAAEY,GAAT,CAAa,UAACC,MAAD;AAAA,wBACVL,4BAAA,SAAA;AACIM,MAAAA,GAAG,EAAED,MAAM,CAACC,GAAP,IAAcD,MAAM,CAACd;AAC1BA,MAAAA,KAAK,EAAEc,MAAM,CAACd;AACdG,MAAAA,QAAQ,EAAEW,MAAM,CAACX;KAHrB,EAKKW,MAAM,CAACE,IALZ,CADU;AAAA,GAAb,CARL,CADJ;AAoBH;;AACDjB,MAAM,CAACkB,WAAP,GAAqB,QAArB;AACAlB,MAAM,CAACmB,YAAP,GAAsB;AAClBjB,EAAAA,OAAO,EAAE,EADS;AAElBE,EAAAA,QAAQ,EAAE;AAFQ,CAAtB;;;;"}

package/es/hooks/use-previous/use-previous.js

@@ -0,0 +1,26 @@
+import { useRef, useEffect } from 'react';
+
+/**
+ * usePrevious tracks the change of the given value -
+ * when a given value has been changed from a previous call,
+ * it will return the value prior to the change.
+ *
+ * Example:
+ *
+ * const [x, setX] = useState(1)
+ * const prevX = usePrevious(x)
+ *
+ * Suppose `setX(2)` is called, then in the next component render
+ * x = 2 and prevX = 1
+ */
+
+function usePrevious(value) {
+  var ref = useRef(null);
+  useEffect(function () {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+export { usePrevious };
+//# sourceMappingURL=use-previous.js.map

package/es/hooks/use-previous/use-previous.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-previous.js","sources":["../../../src/hooks/use-previous/use-previous.ts"],"sourcesContent":["import * as React from 'react'\n\n/**\n * usePrevious tracks the change of the given value -\n * when a given value has been changed from a previous call,\n * it will return the value prior to the change.\n *\n * Example:\n *\n * const [x, setX] = useState(1)\n * const prevX = usePrevious(x)\n *\n * Suppose `setX(2)` is called, then in the next component render\n * x = 2 and prevX = 1\n */\nfunction usePrevious<T>(value: T): T | null {\n    const ref = React.useRef<T | null>(null)\n\n    React.useEffect(() => {\n        ref.current = value\n    }, [value])\n\n    return ref.current\n}\n\nexport { usePrevious }\n"],"names":["usePrevious","value","ref","React","current"],"mappings":";;AAEA;;;;;;;;;;;;;;AAaA,SAASA,WAAT,CAAwBC,KAAxB;AACI,MAAMC,GAAG,GAAGC,MAAA,CAAuB,IAAvB,CAAZ;AAEAA,EAAAA,SAAA,CAAgB;AACZD,IAAAA,GAAG,CAACE,OAAJ,GAAcH,KAAd;AACH,GAFD,EAEG,CAACA,KAAD,CAFH;AAIA,SAAOC,GAAG,CAACE,OAAX;AACH;;;;"}

package/es/index.js

@@ -3,23 +3,29 @@ export { Column, Columns } from './new-components/columns/columns.js';
 export { Divider } from './new-components/divider/divider.js';
 export { Inline } from './new-components/inline/inline.js';
 export { Stack } from './new-components/stack/stack.js';
+export { Hidden } from './new-components/hidden/hidden.js';
+export { HiddenVisually } from './new-components/hidden-visually/hidden-visually.js';
 export { Alert } from './new-components/alert/alert.js';
-export { LoadingSpinner } from './new-components/loading-spinner/loading-spinner.js';
+export { Loading } from './new-components/loading/loading.js';
 export { Notice } from './new-components/notice/notice.js';
 export { Heading } from './new-components/heading/heading.js';
 export { Text } from './new-components/text/text.js';
+export { Tooltip } from './components/tooltip/tooltip.js';
+export { Button } from './new-components/button/button.js';
 export { ButtonLink } from './new-components/button-link/button-link.js';
 export { TextLink } from './new-components/text-link/text-link.js';
 export { CheckboxField } from './new-components/checkbox-field/checkbox-field.js';
-export { Tooltip } from './components/tooltip/tooltip.js';
 export { PasswordField } from './new-components/password-field/password-field.js';
 export { SelectField } from './new-components/select-field/select-field.js';
 export { SwitchField } from './new-components/switch-field/switch-field.js';
 export { TextArea } from './new-components/text-area/text-area.js';
 export { TextField } from './new-components/text-field/text-field.js';
+export { usePrevious } from './hooks/use-previous/use-previous.js';
+export { Tab, TabAwareSlot, TabList, TabPanel, Tabs } from './new-components/tabs/tabs.js';
+export { Modal, ModalActions, ModalBody, ModalCloseButton, ModalFooter, ModalHeader } from './new-components/modal/modal.js';
 export { default as Avatar } from './components/avatar/index.js';
-export { default as Button } from './components/button/index.js';
 export { default as Checkbox } from './components/checkbox/index.js';
+export { default as DeprecatedButton } from './components/deprecated-button/index.js';
 export { default as Dropdown } from './components/dropdown/index.js';
 export { COLORS } from './components/color-picker/color-picker.js';
 export { default as ColorPicker } from './components/color-picker/index.js';
@@ -29,8 +35,6 @@ export { default as Input } from './components/input/index.js';
 export { default as KeyboardShortcut } from './components/keyboard-shortcut/index.js';
 export { SUPPORTED_KEYS } from './components/key-capturer/key-capturer.js';
 export { default as KeyCapturer } from './components/key-capturer/index.js';
-export { default as Loading } from './components/loading/index.js';
-export { default as Modal } from './components/modal/index.js';
 export { default as Popover } from './components/popover/index.js';
 export { default as ProgressBar } from './components/progress-bar/index.js';
 export { default as RangeInput } from './components/range-input/index.js';
@@ -38,6 +42,7 @@ export { default as Select } from './components/select/index.js';
 export { default as Time } from './components/time/index.js';
 export { default as Tip } from './components/tip/index.js';
 export { Notification } from './components/notification/notification.js';
-export { Tab, Tabs } from './components/tabs/tabs.js';
 export { Menu, MenuButton, MenuGroup, MenuItem, MenuList, SubMenu } from './components/menu/menu.js';
+export { default as DeprecatedModal } from './components/deprecated-modal/index.js';
+export { Loading as DeprecatedLoading } from './components/deprecated-loading/deprecated-loading.js';
 //# sourceMappingURL=index.js.map

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/new-components/base-button/base-button.js

@@ -0,0 +1,70 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { createElement, Fragment } from 'react';
+import { polymorphicComponent } from '../../utils/polymorphism.js';
+import { Box } from '../box/box.js';
+import { Spinner } from '../spinner/spinner.js';
+import { Tooltip } from '../../components/tooltip/tooltip.js';
+import styles from './base-button.module.css.js';
+
+function preventDefault(event) {
+  event.preventDefault();
+}
+/**
+ * The component that powers `Button` and `ButtonLink`, where the button styling logic and some
+ * common functionality resides. This component is internal to Reactist.
+ *
+ * 🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)
+ *
+ * @see Button
+ * @see ButtonLink
+ */
+
+
+var BaseButton = /*#__PURE__*/polymorphicComponent(function BaseButton(_ref, ref) {
+  var _ref$as = _ref.as,
+      as = _ref$as === void 0 ? 'div' : _ref$as,
+      variant = _ref.variant,
+      _ref$tone = _ref.tone,
+      tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'normal' : _ref$size,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
+      tooltip = _ref.tooltip,
+      onClick = _ref.onClick,
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      children = _ref.children,
+      startIcon = _ref.startIcon,
+      endIcon = _ref.endIcon,
+      icon = _ref.icon,
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "variant", "tone", "size", "disabled", "loading", "tooltip", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "icon"]);
+
+  var isDisabled = loading || disabled;
+  var buttonElement = /*#__PURE__*/createElement(Box, Object.assign({}, props, {
+    as: as,
+    ref: ref,
+    "aria-disabled": isDisabled,
+    onClick: isDisabled ? preventDefault : onClick,
+    className: [exceptionallySetClassName, styles.baseButton, styles["variant-" + variant], styles["tone-" + tone], styles["size-" + size], icon ? styles.iconButton : null, disabled ? styles.disabled : null]
+  }), icon ? loading && /*#__PURE__*/createElement(Spinner, null) || icon : /*#__PURE__*/createElement(Fragment, null, startIcon ? /*#__PURE__*/createElement(Box, {
+    display: "flex",
+    className: styles.startIcon,
+    "aria-hidden": true
+  }, loading && !endIcon ? /*#__PURE__*/createElement(Spinner, null) : startIcon) : null, children ? /*#__PURE__*/createElement("span", {
+    className: styles.label
+  }, children) : null, endIcon || loading && !startIcon ? /*#__PURE__*/createElement(Box, {
+    display: "flex",
+    className: styles.endIcon,
+    "aria-hidden": true
+  }, loading ? /*#__PURE__*/createElement(Spinner, null) : endIcon) : null)); // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided
+
+  var tooltipContent = icon ? tooltip !== null && tooltip !== void 0 ? tooltip : props['aria-label'] : tooltip;
+  return tooltipContent ? /*#__PURE__*/createElement(Tooltip, {
+    content: tooltipContent
+  }, buttonElement) : buttonElement;
+});
+
+export { BaseButton };
+//# sourceMappingURL=base-button.js.map

package/es/new-components/base-button/base-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-button.js","sources":["../../../src/new-components/base-button/base-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tooltip, TooltipProps } from '../../components/tooltip'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\nimport styles from './base-button.module.css'\n\nfunction preventDefault(event: React.SyntheticEvent) {\n    event.preventDefault()\n}\n\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary'\ntype ButtonTone = 'normal' | 'destructive'\ntype ButtonSize = 'small' | 'normal' | 'large'\ntype IconElement = React.ReactChild\n\ntype CommonProps = {\n    /**\n     * The button's variant.\n     */\n    variant: ButtonVariant\n    /**\n     * The button's tone.\n     * @default 'normal'\n     */\n    tone?: ButtonTone\n    /**\n     * The button's size.\n     * @default 'normal'\n     */\n    size?: ButtonSize\n    /**\n     * Whether the button is disabled or not.\n     * @default false\n     */\n    disabled?: boolean\n    /**\n     * Whether the button is busy/loading.\n     *\n     * A button in this state is functionally and semantically disabled. Visually is does not look\n     * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.\n     *\n     * @default false\n     */\n    loading?: boolean\n    /**\n     * A tooltip linked to the button element.\n     */\n    tooltip?: TooltipProps['content']\n}\n\ntype IconButtonProps = {\n    icon: IconElement\n    'aria-label': string\n    children?: never\n    startIcon?: never\n    endIcon?: never\n}\n\ntype LabelledButtonProps = {\n    children: NonNullable<React.ReactNode>\n    startIcon?: IconElement\n    endIcon?: IconElement\n    icon?: never\n}\n\nexport type BaseButtonProps = CommonProps & (IconButtonProps | LabelledButtonProps)\n\n/**\n * The component that powers `Button` and `ButtonLink`, where the button styling logic and some\n * common functionality resides. This component is internal to Reactist.\n *\n * 🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)\n *\n * @see Button\n * @see ButtonLink\n */\nexport const BaseButton = polymorphicComponent<'div', BaseButtonProps>(function BaseButton(\n    {\n        as = 'div',\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        disabled = false,\n        loading = false,\n        tooltip,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        startIcon,\n        endIcon,\n        icon,\n        ...props\n    },\n    ref,\n) {\n    const isDisabled = loading || disabled\n    const buttonElement = (\n        <Box\n            {...props}\n            as={as}\n            ref={ref}\n            aria-disabled={isDisabled}\n            onClick={isDisabled ? preventDefault : onClick}\n            className={[\n                exceptionallySetClassName,\n                styles.baseButton,\n                styles[`variant-${variant}`],\n                styles[`tone-${tone}`],\n                styles[`size-${size}`],\n                icon ? styles.iconButton : null,\n                disabled ? styles.disabled : null,\n            ]}\n        >\n            {icon ? (\n                (loading && <Spinner />) || icon\n            ) : (\n                <>\n                    {startIcon ? (\n                        <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n                            {loading && !endIcon ? <Spinner /> : startIcon}\n                        </Box>\n                    ) : null}\n                    {children ? <span className={styles.label}>{children}</span> : null}\n                    {endIcon || (loading && !startIcon) ? (\n                        <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n                            {loading ? <Spinner /> : endIcon}\n                        </Box>\n                    ) : null}\n                </>\n            )}\n        </Box>\n    )\n\n    // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided\n    const tooltipContent = icon ? tooltip ?? props['aria-label'] : tooltip\n    return tooltipContent ? (\n        <Tooltip content={tooltipContent}>{buttonElement}</Tooltip>\n    ) : (\n        buttonElement\n    )\n})\n"],"names":["preventDefault","event","BaseButton","polymorphicComponent","ref","as","variant","tone","size","disabled","loading","tooltip","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","props","isDisabled","buttonElement","React","Box","className","styles","baseButton","iconButton","Spinner","display","label","tooltipContent","Tooltip","content"],"mappings":";;;;;;;;AAOA,SAASA,cAAT,CAAwBC,KAAxB;AACIA,EAAAA,KAAK,CAACD,cAAN;AACH;AA2DD;;;;;;;;;;;IASaE,UAAU,gBAAGC,oBAAoB,CAAyB,SAASD,UAAT,OAiBnEE,GAjBmE;qBAE/DC;MAAAA,0BAAK;MACLC,eAAAA;uBACAC;MAAAA,8BAAO;uBACPC;MAAAA,8BAAO;2BACPC;MAAAA,sCAAW;0BACXC;MAAAA,oCAAU;MACVC,eAAAA;MACAC,eAAAA;MACAC,iCAAAA;MACAC,gBAAAA;MACAC,iBAAAA;MACAC,eAAAA;MACAC,YAAAA;MACGC;;AAIP,MAAMC,UAAU,GAAGT,OAAO,IAAID,QAA9B;AACA,MAAMW,aAAa,gBACfC,aAAA,CAACC,GAAD,oBACQJ;AACJb,IAAAA,EAAE,EAAEA;AACJD,IAAAA,GAAG,EAAEA;qBACUe;AACfP,IAAAA,OAAO,EAAEO,UAAU,GAAGnB,cAAH,GAAoBY;AACvCW,IAAAA,SAAS,EAAE,CACPV,yBADO,EAEPW,MAAM,CAACC,UAFA,EAGPD,MAAM,cAAYlB,OAAZ,CAHC,EAIPkB,MAAM,WAASjB,IAAT,CAJC,EAKPiB,MAAM,WAAShB,IAAT,CALC,EAMPS,IAAI,GAAGO,MAAM,CAACE,UAAV,GAAuB,IANpB,EAOPjB,QAAQ,GAAGe,MAAM,CAACf,QAAV,GAAqB,IAPtB;IANf,EAgBKQ,IAAI,GACAP,OAAO,iBAAIW,aAAA,CAACM,OAAD,MAAA,CAAZ,IAA4BV,IAD3B,gBAGDI,aAAA,SAAA,MAAA,EACKN,SAAS,gBACNM,aAAA,CAACC,GAAD;AAAKM,IAAAA,OAAO,EAAC;AAAOL,IAAAA,SAAS,EAAEC,MAAM,CAACT;;GAAtC,EACKL,OAAO,IAAI,CAACM,OAAZ,gBAAsBK,aAAA,CAACM,OAAD,MAAA,CAAtB,GAAoCZ,SADzC,CADM,GAIN,IALR,EAMKD,QAAQ,gBAAGO,aAAA,OAAA;AAAME,IAAAA,SAAS,EAAEC,MAAM,CAACK;GAAxB,EAAgCf,QAAhC,CAAH,GAAsD,IANnE,EAOKE,OAAO,IAAKN,OAAO,IAAI,CAACK,SAAxB,gBACGM,aAAA,CAACC,GAAD;AAAKM,IAAAA,OAAO,EAAC;AAAOL,IAAAA,SAAS,EAAEC,MAAM,CAACR;;GAAtC,EACKN,OAAO,gBAAGW,aAAA,CAACM,OAAD,MAAA,CAAH,GAAiBX,OAD7B,CADH,GAIG,IAXR,CAnBR,CADJ;;AAsCA,MAAMc,cAAc,GAAGb,IAAI,GAAGN,OAAH,aAAGA,OAAH,cAAGA,OAAH,GAAcO,KAAK,CAAC,YAAD,CAAnB,GAAoCP,OAA/D;AACA,SAAOmB,cAAc,gBACjBT,aAAA,CAACU,OAAD;AAASC,IAAAA,OAAO,EAAEF;GAAlB,EAAmCV,aAAnC,CADiB,GAGjBA,aAHJ;AAKH,CAhE6C;;;;"}

package/es/new-components/base-button/base-button.module.css.js

@@ -0,0 +1,4 @@
+var modules_b9569bce = {"label":"_1f20c88a","baseButton":"_623015f3","size-small":"_062de645","size-normal":"_55e2a6a9","size-large":"cab32a7c","disabled":"e71c191a","iconButton":"_368efc16","startIcon":"d35389c1","endIcon":"_900d41d8","variant-primary":"_7c95e162","variant-secondary":"_9cb889aa","variant-tertiary":"_611b5b28","variant-quaternary":"_80c2bb84","tone-destructive":"ee13c455"};
+
+export default modules_b9569bce;
+//# sourceMappingURL=base-button.module.css.js.map

package/es/new-components/base-button/base-button.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-button.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/es/new-components/base-field/base-field.js

@@ -1,62 +1,62 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { createElement } from 'react';
-import classNames from 'classnames';
 import { Box } from '../box/box.js';
+import { Stack } from '../stack/stack.js';
 import { Text } from '../text/text.js';
 import { useId } from '../common-helpers.js';
 import styles from './base-field.module.css.js';
 
-function FieldHint(_ref) {
-  var id = _ref.id,
-      children = _ref.children;
-  return /*#__PURE__*/createElement(Text, {
-    component: "p",
+function FieldHint(props) {
+  return /*#__PURE__*/createElement(Text, Object.assign({
+    as: "p",
     tone: "secondary",
-    size: "small",
-    id: id,
-    className: styles.fieldHint
-  }, children);
+    size: "copy"
+  }, props));
 }
 
-function BaseField(_ref2) {
-  var label = _ref2.label,
-      secondaryLabel = _ref2.secondaryLabel,
-      auxiliaryLabel = _ref2.auxiliaryLabel,
-      hint = _ref2.hint,
-      className = _ref2.className,
-      children = _ref2.children,
-      maxWidth = _ref2.maxWidth,
-      hidden = _ref2.hidden,
-      props = _objectWithoutPropertiesLoose(_ref2, ["label", "secondaryLabel", "auxiliaryLabel", "hint", "className", "children", "maxWidth", "hidden"]);
-
-  var id = useId(props.id);
+function BaseField(_ref) {
+  var label = _ref.label,
+      secondaryLabel = _ref.secondaryLabel,
+      auxiliaryLabel = _ref.auxiliaryLabel,
+      hint = _ref.hint,
+      className = _ref.className,
+      children = _ref.children,
+      maxWidth = _ref.maxWidth,
+      hidden = _ref.hidden,
+      originalAriaDescribedBy = _ref['aria-describedby'],
+      originalId = _ref.id;
+  var id = useId(originalId);
   var hintId = useId();
-  var ariaDescribedBy = hint ? classNames(hintId, props['aria-describedby']) : props['aria-describedby'];
-  return /*#__PURE__*/createElement(Box, {
+  var ariaDescribedBy = originalAriaDescribedBy !== null && originalAriaDescribedBy !== void 0 ? originalAriaDescribedBy : hint ? hintId : undefined;
+  return /*#__PURE__*/createElement(Stack, {
+    space: "small"
+  }, /*#__PURE__*/createElement(Box, {
     className: [className, styles.container],
     maxWidth: maxWidth,
     hidden: hidden
   }, /*#__PURE__*/createElement(Box, {
-    component: "span",
+    as: "span",
     display: "flex",
     justifyContent: "spaceBetween",
     alignItems: "flexEnd",
     paddingBottom: "small"
   }, /*#__PURE__*/createElement(Text, {
-    component: "label",
+    size: "body",
+    as: "label",
     htmlFor: id
   }, label ? /*#__PURE__*/createElement("span", {
     className: styles.primaryLabel
   }, label) : null, secondaryLabel ? /*#__PURE__*/createElement("span", {
     className: styles.secondaryLabel
   }, "\xA0(", secondaryLabel, ")") : null), auxiliaryLabel ? /*#__PURE__*/createElement(Box, {
-    className: styles.auxiliaryLabel
+    className: styles.auxiliaryLabel,
+    paddingLeft: "small"
   }, auxiliaryLabel) : null), children(ariaDescribedBy ? {
     id: id,
     'aria-describedby': ariaDescribedBy
   } : {
     id: id
-  }), hint ? /*#__PURE__*/createElement(FieldHint, {
+  })), hint ? /*#__PURE__*/createElement(FieldHint, {
+    hidden: hidden,
     id: hintId
   }, hint) : null);
 }

package/es/new-components/base-field/base-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-field.js","sources":["../../../src/new-components/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../common-helpers'\nimport { Text } from '../text'\nimport { WithEnhancedClassName } from '../common-types'\nimport styles from './base-field.module.css'\n\nfunction FieldHint({ id, children }: { id: string; children: React.ReactNode }) {\n    return (\n        <Text component=\"p\" tone=\"secondary\" size=\"small\" id={id} className={styles.fieldHint}>\n            {children}\n        </Text>\n    )\n}\n\n//\n// BaseField\n//\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ninterface BaseFieldChildren {\n    children: (props: { id: string; 'aria-describedby'?: string }) => React.ReactNode\n}\n\ninterface BaseFieldProps<T extends HTMLElement = HTMLInputElement>\n    extends Omit<HtmlInputProps<T>, 'className' | 'style'> {\n    label?: React.ReactNode\n    secondaryLabel?: React.ReactNode\n    auxiliaryLabel?: React.ReactNode\n    hint?: React.ReactNode\n    maxWidth?: BoxProps['maxWidth']\n}\n\nfunction BaseField({\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    className,\n    children,\n    maxWidth,\n    hidden,\n    ...props\n}: BaseFieldProps & BaseFieldChildren & WithEnhancedClassName) {\n    const id = useId(props.id)\n    const hintId = useId()\n\n    const ariaDescribedBy = hint\n        ? classNames(hintId, props['aria-describedby'])\n        : props['aria-describedby']\n\n    return (\n        <Box className={[className, styles.container]} maxWidth={maxWidth} hidden={hidden}>\n            <Box\n                component=\"span\"\n                display=\"flex\"\n                justifyContent=\"spaceBetween\"\n                alignItems=\"flexEnd\"\n                paddingBottom=\"small\"\n            >\n                <Text component=\"label\" htmlFor={id}>\n                    {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                    {secondaryLabel ? (\n                        <span className={styles.secondaryLabel}>&nbsp;({secondaryLabel})</span>\n                    ) : null}\n                </Text>\n                {auxiliaryLabel ? (\n                    <Box className={styles.auxiliaryLabel}>{auxiliaryLabel}</Box>\n                ) : null}\n            </Box>\n            {children(ariaDescribedBy ? { id, 'aria-describedby': ariaDescribedBy } : { id })}\n            {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n        </Box>\n    )\n}\n\nexport { BaseField, FieldHint }\nexport { BaseFieldProps }\n"],"names":["FieldHint","id","children","React","Text","component","tone","size","className","styles","fieldHint","BaseField","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","hidden","props","useId","hintId","ariaDescribedBy","classNames","Box","container","display","justifyContent","alignItems","paddingBottom","htmlFor","primaryLabel"],"mappings":";;;;;;;;AAQA,SAASA,SAAT;MAAqBC,UAAAA;MAAIC,gBAAAA;AACrB,sBACIC,aAAA,CAACC,IAAD;AAAMC,IAAAA,SAAS,EAAC;AAAIC,IAAAA,IAAI,EAAC;AAAYC,IAAAA,IAAI,EAAC;AAAQN,IAAAA,EAAE,EAAEA;AAAIO,IAAAA,SAAS,EAAEC,MAAM,CAACC;GAA5E,EACKR,QADL,CADJ;AAKH;;AAwBD,SAASS,SAAT;MACIC,cAAAA;MACAC,uBAAAA;MACAC,uBAAAA;MACAC,aAAAA;MACAP,kBAAAA;MACAN,iBAAAA;MACAc,iBAAAA;MACAC,eAAAA;MACGC;;AAEH,MAAMjB,EAAE,GAAGkB,KAAK,CAACD,KAAK,CAACjB,EAAP,CAAhB;AACA,MAAMmB,MAAM,GAAGD,KAAK,EAApB;AAEA,MAAME,eAAe,GAAGN,IAAI,GACtBO,UAAU,CAACF,MAAD,EAASF,KAAK,CAAC,kBAAD,CAAd,CADY,GAEtBA,KAAK,CAAC,kBAAD,CAFX;AAIA,sBACIf,aAAA,CAACoB,GAAD;AAAKf,IAAAA,SAAS,EAAE,CAACA,SAAD,EAAYC,MAAM,CAACe,SAAnB;AAA+BR,IAAAA,QAAQ,EAAEA;AAAUC,IAAAA,MAAM,EAAEA;GAA3E,eACId,aAAA,CAACoB,GAAD;AACIlB,IAAAA,SAAS,EAAC;AACVoB,IAAAA,OAAO,EAAC;AACRC,IAAAA,cAAc,EAAC;AACfC,IAAAA,UAAU,EAAC;AACXC,IAAAA,aAAa,EAAC;GALlB,eAOIzB,aAAA,CAACC,IAAD;AAAMC,IAAAA,SAAS,EAAC;AAAQwB,IAAAA,OAAO,EAAE5B;GAAjC,EACKW,KAAK,gBAAGT,aAAA,OAAA;AAAMK,IAAAA,SAAS,EAAEC,MAAM,CAACqB;GAAxB,EAAuClB,KAAvC,CAAH,GAA0D,IADpE,EAEKC,cAAc,gBACXV,aAAA,OAAA;AAAMK,IAAAA,SAAS,EAAEC,MAAM,CAACI;GAAxB,SAAA,EAAgDA,cAAhD,KAAA,CADW,GAEX,IAJR,CAPJ,EAaKC,cAAc,gBACXX,aAAA,CAACoB,GAAD;AAAKf,IAAAA,SAAS,EAAEC,MAAM,CAACK;GAAvB,EAAwCA,cAAxC,CADW,GAEX,IAfR,CADJ,EAkBKZ,QAAQ,CAACmB,eAAe,GAAG;AAAEpB,IAAAA,EAAE,EAAFA,EAAF;AAAM,wBAAoBoB;AAA1B,GAAH,GAAiD;AAAEpB,IAAAA,EAAE,EAAFA;AAAF,GAAjE,CAlBb,EAmBKc,IAAI,gBAAGZ,aAAA,CAACH,SAAD;AAAWC,IAAAA,EAAE,EAAEmB;GAAf,EAAwBL,IAAxB,CAAH,GAA+C,IAnBxD,CADJ;AAuBH;;;;"}
+{"version":3,"file":"base-field.js","sources":["../../../src/new-components/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../common-helpers'\nimport { Text } from '../text'\nimport { WithEnhancedClassName } from '../common-types'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\ntype FieldHintProps = {\n    id: string\n    children: React.ReactNode\n    hidden?: boolean\n}\n\nfunction FieldHint(props: FieldHintProps) {\n    return <Text as=\"p\" tone=\"secondary\" size=\"copy\" {...props} />\n}\n\n//\n// BaseField\n//\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see secondaryLabel\n         * @see auxiliaryLabel\n         */\n        label: React.ReactNode\n        /**\n         * An optional secondary label for this field element. It is combined with the `label` to\n         * form the field's entire accessible name (unless the field label is overriden by using\n         * `aria-label` or `aria-labelledby`).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see label\n         * @see auxiliaryLabel\n         */\n        secondaryLabel?: React.ReactNode\n        /**\n         * An optional extra element to be placed to the right of the main and secondary labels.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see label\n         * @see secondaryLabel\n         */\n        auxiliaryLabel?: React.ReactNode\n        /**\n         * A hint or help-like content associated as the accessible description of the field. It is\n         * generally rendered below it, and with a visual style that reduces its prominence (i.e.\n         * as secondary text).\n         */\n        hint?: React.ReactNode\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: { id: string; 'aria-describedby'?: string }) => React.ReactNode\n    }\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className'> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    className,\n    children,\n    maxWidth,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n}: BaseFieldProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const hintId = useId()\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (hint ? hintId : undefined)\n\n    return (\n        <Stack space=\"small\">\n            <Box className={[className, styles.container]} maxWidth={maxWidth} hidden={hidden}>\n                <Box\n                    as=\"span\"\n                    display=\"flex\"\n                    justifyContent=\"spaceBetween\"\n                    alignItems=\"flexEnd\"\n                    paddingBottom=\"small\"\n                >\n                    <Text size=\"body\" as=\"label\" htmlFor={id}>\n                        {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                        {secondaryLabel ? (\n                            <span className={styles.secondaryLabel}>&nbsp;({secondaryLabel})</span>\n                        ) : null}\n                    </Text>\n                    {auxiliaryLabel ? (\n                        <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                            {auxiliaryLabel}\n                        </Box>\n                    ) : null}\n                </Box>\n                {children(ariaDescribedBy ? { id, 'aria-describedby': ariaDescribedBy } : { id })}\n            </Box>\n            {hint ? (\n                <FieldHint hidden={hidden} id={hintId}>\n                    {hint}\n                </FieldHint>\n            ) : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldHint }\nexport type { FieldComponentProps }\n"],"names":["FieldHint","props","React","Text","as","tone","size","BaseField","label","secondaryLabel","auxiliaryLabel","hint","className","children","maxWidth","hidden","originalAriaDescribedBy","originalId","id","useId","hintId","ariaDescribedBy","undefined","Stack","space","Box","styles","container","display","justifyContent","alignItems","paddingBottom","htmlFor","primaryLabel","paddingLeft"],"mappings":";;;;;;;AAcA,SAASA,SAAT,CAAmBC,KAAnB;AACI,sBAAOC,aAAA,CAACC,IAAD;AAAMC,IAAAA,EAAE,EAAC;AAAIC,IAAAA,IAAI,EAAC;AAAYC,IAAAA,IAAI,EAAC;KAAWL,MAA9C,CAAP;AACH;;AA+DD,SAASM,SAAT;MACIC,aAAAA;MACAC,sBAAAA;MACAC,sBAAAA;MACAC,YAAAA;MACAC,iBAAAA;MACAC,gBAAAA;MACAC,gBAAAA;MACAC,cAAAA;MACoBC,+BAApB;MACIC,kBAAJC;AAEA,MAAMA,EAAE,GAAGC,KAAK,CAACF,UAAD,CAAhB;AACA,MAAMG,MAAM,GAAGD,KAAK,EAApB;AAEA,MAAME,eAAe,GAAGL,uBAAH,aAAGA,uBAAH,cAAGA,uBAAH,GAA+BL,IAAI,GAAGS,MAAH,GAAYE,SAApE;AAEA,sBACIpB,aAAA,CAACqB,KAAD;AAAOC,IAAAA,KAAK,EAAC;GAAb,eACItB,aAAA,CAACuB,GAAD;AAAKb,IAAAA,SAAS,EAAE,CAACA,SAAD,EAAYc,MAAM,CAACC,SAAnB;AAA+Bb,IAAAA,QAAQ,EAAEA;AAAUC,IAAAA,MAAM,EAAEA;GAA3E,eACIb,aAAA,CAACuB,GAAD;AACIrB,IAAAA,EAAE,EAAC;AACHwB,IAAAA,OAAO,EAAC;AACRC,IAAAA,cAAc,EAAC;AACfC,IAAAA,UAAU,EAAC;AACXC,IAAAA,aAAa,EAAC;GALlB,eAOI7B,aAAA,CAACC,IAAD;AAAMG,IAAAA,IAAI,EAAC;AAAOF,IAAAA,EAAE,EAAC;AAAQ4B,IAAAA,OAAO,EAAEd;GAAtC,EACKV,KAAK,gBAAGN,aAAA,OAAA;AAAMU,IAAAA,SAAS,EAAEc,MAAM,CAACO;GAAxB,EAAuCzB,KAAvC,CAAH,GAA0D,IADpE,EAEKC,cAAc,gBACXP,aAAA,OAAA;AAAMU,IAAAA,SAAS,EAAEc,MAAM,CAACjB;GAAxB,SAAA,EAAgDA,cAAhD,KAAA,CADW,GAEX,IAJR,CAPJ,EAaKC,cAAc,gBACXR,aAAA,CAACuB,GAAD;AAAKb,IAAAA,SAAS,EAAEc,MAAM,CAAChB;AAAgBwB,IAAAA,WAAW,EAAC;GAAnD,EACKxB,cADL,CADW,GAIX,IAjBR,CADJ,EAoBKG,QAAQ,CAACQ,eAAe,GAAG;AAAEH,IAAAA,EAAE,EAAFA,EAAF;AAAM,wBAAoBG;AAA1B,GAAH,GAAiD;AAAEH,IAAAA,EAAE,EAAFA;AAAF,GAAjE,CApBb,CADJ,EAuBKP,IAAI,gBACDT,aAAA,CAACF,SAAD;AAAWe,IAAAA,MAAM,EAAEA;AAAQG,IAAAA,EAAE,EAAEE;GAA/B,EACKT,IADL,CADC,GAID,IA3BR,CADJ;AA+BH;;;;"}

package/es/new-components/base-field/base-field.module.css.js

@@ -1,4 +1,4 @@
-var modules_540a88ff = {"container":"_4014f55e","primaryLabel":"_52b4c04a","secondaryLabel":"a4e7d84d","auxiliaryLabel":"_28fba036"};
+var modules_540a88ff = {"container":"ed7d894c","primaryLabel":"_22213081","secondaryLabel":"be8637dd","auxiliaryLabel":"_72b46ad5"};
 
 export default modules_540a88ff;
 //# sourceMappingURL=base-field.module.css.js.map

package/es/new-components/box/box.js

@@ -1,19 +1,20 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { createElement } from 'react';
 import classNames from 'classnames';
-import { forwardRefWithAs } from '../type-helpers.js';
+import { polymorphicComponent } from '../../utils/polymorphism.js';
 import { getClassNames } from '../responsive-props.js';
 import styles from './box.module.css.js';
+import paddingStyles from './padding.module.css.js';
+import marginStyles from './margin.module.css.js';
 
-var Box = /*#__PURE__*/forwardRefWithAs(function Box(_ref, ref) {
-  var _ref2, _ref3, _ref4, _ref5;
+var Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
+  var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9;
 
-  var _ref$component = _ref.component,
-      component = _ref$component === void 0 ? 'div' : _ref$component,
+  var _ref$as = _ref.as,
+      component = _ref$as === void 0 ? 'div' : _ref$as,
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'static' : _ref$position,
-      _ref$display = _ref.display,
-      display = _ref$display === void 0 ? 'block' : _ref$display,
+      display = _ref.display,
       _ref$flexDirection = _ref.flexDirection,
       flexDirection = _ref$flexDirection === void 0 ? 'row' : _ref$flexDirection,
       flexWrap = _ref.flexWrap,
@@ -29,6 +30,8 @@ var Box = /*#__PURE__*/forwardRefWithAs(function Box(_ref, ref) {
       borderRadius = _ref.borderRadius,
       minWidth = _ref.minWidth,
       maxWidth = _ref.maxWidth,
+      _ref$textAlign = _ref.textAlign,
+      textAlign = _ref$textAlign === void 0 ? 'start' : _ref$textAlign,
       padding = _ref.padding,
       paddingY = _ref.paddingY,
       paddingX = _ref.paddingX,
@@ -36,17 +39,32 @@ var Box = /*#__PURE__*/forwardRefWithAs(function Box(_ref, ref) {
       paddingRight = _ref.paddingRight,
       paddingBottom = _ref.paddingBottom,
       paddingLeft = _ref.paddingLeft,
+      margin = _ref.margin,
+      marginY = _ref.marginY,
+      marginX = _ref.marginX,
+      marginTop = _ref.marginTop,
+      marginRight = _ref.marginRight,
+      marginBottom = _ref.marginBottom,
+      marginLeft = _ref.marginLeft,
       className = _ref.className,
       children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["component", "position", "display", "flexDirection", "flexWrap", "flexGrow", "flexShrink", "alignItems", "justifyContent", "overflow", "width", "height", "background", "border", "borderRadius", "minWidth", "maxWidth", "padding", "paddingY", "paddingX", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "className", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "position", "display", "flexDirection", "flexWrap", "flexGrow", "flexShrink", "alignItems", "justifyContent", "overflow", "width", "height", "background", "border", "borderRadius", "minWidth", "maxWidth", "textAlign", "padding", "paddingY", "paddingX", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginY", "marginX", "marginTop", "marginRight", "marginBottom", "marginLeft", "className", "children"]);
 
   var resolvedPaddingTop = (_ref2 = paddingTop !== null && paddingTop !== void 0 ? paddingTop : paddingY) !== null && _ref2 !== void 0 ? _ref2 : padding;
   var resolvedPaddingRight = (_ref3 = paddingRight !== null && paddingRight !== void 0 ? paddingRight : paddingX) !== null && _ref3 !== void 0 ? _ref3 : padding;
   var resolvedPaddingBottom = (_ref4 = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : paddingY) !== null && _ref4 !== void 0 ? _ref4 : padding;
   var resolvedPaddingLeft = (_ref5 = paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : paddingX) !== null && _ref5 !== void 0 ? _ref5 : padding;
-  var isFlex = display === 'flex' || display === 'inlineFlex';
+  var resolvedMarginTop = (_ref6 = marginTop !== null && marginTop !== void 0 ? marginTop : marginY) !== null && _ref6 !== void 0 ? _ref6 : margin;
+  var resolvedMarginRight = (_ref7 = marginRight !== null && marginRight !== void 0 ? marginRight : marginX) !== null && _ref7 !== void 0 ? _ref7 : margin;
+  var resolvedMarginBottom = (_ref8 = marginBottom !== null && marginBottom !== void 0 ? marginBottom : marginY) !== null && _ref8 !== void 0 ? _ref8 : margin;
+  var resolvedMarginLeft = (_ref9 = marginLeft !== null && marginLeft !== void 0 ? marginLeft : marginX) !== null && _ref9 !== void 0 ? _ref9 : margin;
+  var omitFlex = !display || typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex';
   return /*#__PURE__*/createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
-    className: classNames(className, styles.box, getClassNames(styles, 'display', display), position !== 'static' ? getClassNames(styles, 'position', position) : null, minWidth != null ? getClassNames(styles, 'minWidth', String(minWidth)) : null, getClassNames(styles, 'maxWidth', maxWidth), getClassNames(styles, 'paddingTop', resolvedPaddingTop), getClassNames(styles, 'paddingRight', resolvedPaddingRight), getClassNames(styles, 'paddingBottom', resolvedPaddingBottom), getClassNames(styles, 'paddingLeft', resolvedPaddingLeft), isFlex ? getClassNames(styles, 'flexDirection', flexDirection) : null, isFlex ? getClassNames(styles, 'flexWrap', flexWrap) : null, isFlex ? getClassNames(styles, 'alignItems', alignItems) : null, isFlex ? getClassNames(styles, 'justifyContent', justifyContent) : null, flexShrink != null ? getClassNames(styles, 'flexShrink', String(flexShrink)) : null, flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null, getClassNames(styles, 'overflow', overflow), getClassNames(styles, 'width', width), getClassNames(styles, 'height', height), getClassNames(styles, 'bg', background), borderRadius !== 'none' ? getClassNames(styles, 'borderRadius', borderRadius) : null, border !== 'none' ? getClassNames(styles, 'border', border) : null) || undefined,
+    className: classNames(className, styles.box, display ? getClassNames(styles, 'display', display) : null, position !== 'static' ? getClassNames(styles, 'position', position) : null, minWidth != null ? getClassNames(styles, 'minWidth', String(minWidth)) : null, getClassNames(styles, 'maxWidth', maxWidth), textAlign !== 'start' ? getClassNames(styles, 'textAlign', textAlign) : null, // padding
+    getClassNames(paddingStyles, 'paddingTop', resolvedPaddingTop), getClassNames(paddingStyles, 'paddingRight', resolvedPaddingRight), getClassNames(paddingStyles, 'paddingBottom', resolvedPaddingBottom), getClassNames(paddingStyles, 'paddingLeft', resolvedPaddingLeft), // margin
+    getClassNames(marginStyles, 'marginTop', resolvedMarginTop), getClassNames(marginStyles, 'marginRight', resolvedMarginRight), getClassNames(marginStyles, 'marginBottom', resolvedMarginBottom), getClassNames(marginStyles, 'marginLeft', resolvedMarginLeft), // flex props
+    omitFlex ? null : getClassNames(styles, 'flexDirection', flexDirection), omitFlex ? null : getClassNames(styles, 'flexWrap', flexWrap), omitFlex ? null : getClassNames(styles, 'alignItems', alignItems), omitFlex ? null : getClassNames(styles, 'justifyContent', justifyContent), flexShrink != null ? getClassNames(styles, 'flexShrink', String(flexShrink)) : null, flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null, // other props
+    getClassNames(styles, 'overflow', overflow), getClassNames(styles, 'width', width), getClassNames(styles, 'height', height), getClassNames(styles, 'bg', background), borderRadius !== 'none' ? getClassNames(styles, 'borderRadius', borderRadius) : null, border !== 'none' ? getClassNames(styles, 'border', border) : null) || undefined,
     ref: ref
   }), children);
 });