@doist/reactist 10.0.0-beta.1 → 10.0.0-beta.10

package/lib/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 { 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>\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>\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     * 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 = 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 = 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 = 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","PopoverBackdrop","baseId","visible","animated","animating","stopAnimation","modal","style","MenuList","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","event","shouldClose","defaultPrevented","undefined","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","toArray","button","list","buttonProps","MenuGroup","label","role"],"mappings":"0VAyBMA,EAAcC,gBAMhB,IA4BJ,SAASC,SAAOC,IAAAA,SAAUC,IAAAA,aAAiBC,gEACjCC,EAAQC,gCAAsBC,MAAM,GAASH,IAE7CI,EAAmBR,eACrB,SAA0BS,GAClBN,GAAcA,EAAaM,KAEnC,CAACN,IAGCM,EAA0BT,WAC5B,qDACOK,OACHG,iBAAAA,MAEJ,CAACH,EAAOG,WAGLR,gBAACD,EAAYW,UAASD,MAAOA,GAAQP,OAY1CS,EAAaC,wBAAgD,WAE/DC,OADEC,IAAAA,0BAA8BV,oEAGOJ,aAAiBD,GAA3BM,gEAEzBL,gBAACM,8BACOF,EACAC,GACJQ,IAAKA,EACLE,UAAWC,EAAW,sBAAuBF,SAanDG,EAAsC,CACxCC,MAAO,OACPC,OAAQ,OACRC,SAAU,QACVC,IAAK,EACLC,KAAM,GAOV,SAASC,YAUDvB,gBAACwB,mBACGC,SAVRA,OAWQC,UAVRA,QAWQC,WAVRA,SAWQC,YAVRA,UAWQC,gBAVRA,cAWQC,QAVRA,MAWQC,MAAOd,KAVff,cAsBE8B,EAAWpB,wBAA2C,WAExDC,OADEC,IAAAA,0BAA8BV,oEAGOJ,aAAiBD,GAA3BM,gEACtBA,EAAMqB,QACT1B,gBAACuB,mBAAiBlB,GACdL,gBAACM,wBACOF,EACAC,GACJQ,IAAKA,EACLE,UAAWC,EAAW,oBAAqBF,OAGnD,QAkEFmB,EAAWrB,wBAA8C,WAU3DC,OARIJ,IAAAA,MACAP,IAAAA,SACAgC,IAAAA,aACAC,aAAAA,gBACAC,IAAAA,QACAtB,IAAAA,0BACGV,2HAIgCJ,aAAiBD,GAAhDS,IAAAA,iBAAqBH,yDACrBgC,EAAShC,EAATgC,KAEFC,EAActC,eAChB,SAAqBuC,GACjBH,MAAAA,GAAAA,EAAUG,OAGJC,GAAiC,KADnCN,IAAaK,EAAME,iBAAmBP,SAAaQ,IACPP,EAChD3B,EAAiBC,GACb+B,GAAaH,MAErB,CAACH,EAAUE,EAAS5B,EAAkB2B,EAAcE,EAAM5B,WAI1DT,gBAACM,4BACOF,EACAC,GACJQ,IAAKA,EACLuB,QAASE,EACTvB,UAAWD,IAEVZ,MAgCPyC,EAAU3C,cAAkD,WAE9Da,OADEX,IAAAA,SAAUC,IAAAA,aAAiBC,kEAGgCJ,aAAiBD,GAApD6C,IAAlBpC,iBAA2CH,yDACrCwC,EAAmBxC,EAAzBgC,KAEFS,EAAsB9C,eACxB,SAA6BS,GACrBN,GAAcA,EAAaM,GAC/BmC,EAAqBnC,GACrBoC,MAEJ,CAACA,EAAgBD,EAAsBzC,MAGpBH,WAAe+C,QAAQ7C,GAAvC8C,OAAQC,cAGXjD,gBAACM,4BAAoBD,EAAWD,GAAOS,IAAKA,KACvC,SAACqC,UACElD,gBAACC,GAAKE,aAAc2C,GACf9C,eAAmBgD,qCACbE,OACHnC,UAAWC,EAAWkC,EAAYnC,UAAW,8BAEhDkC,SAwBfE,EAAYvC,wBAA4C,WAE1DC,OADEuC,IAAAA,MAAOlD,IAAAA,SAAUY,IAAAA,0BAA8BV,uFAGVJ,aAAiBD,GAA3BM,gEAEzBL,gBAACM,2BAAiBO,IAAKA,GAAST,EAAWC,GAAOU,UAAWD,IACxDsC,EACGpD,uBAAKqD,KAAK,eAAetC,UAAU,6BAC9BqC,GAEL,KACHlD"}
+{"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","PopoverBackdrop","baseId","visible","animated","animating","stopAnimation","modal","style","MenuList","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","event","shouldClose","defaultPrevented","undefined","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","toArray","button","list","buttonProps","MenuGroup","label","role"],"mappings":"0VAyBMA,EAAcC,gBAMhB,IA4BJ,SAASC,SAAOC,IAAAA,SAAUC,IAAAA,aAAiBC,gEACjCC,EAAQC,gCAAsBC,MAAM,GAASH,IAE7CI,EAAmBR,eACrB,SAA0BS,GAClBN,GAAcA,EAAaM,KAEnC,CAACN,IAGCM,EAA0BT,WAC5B,qDACOK,OACHG,iBAAAA,MAEJ,CAACH,EAAOG,WAGLR,gBAACD,EAAYW,UAASD,MAAOA,GAAQP,OAY1CS,EAAaC,wBAAgD,WAE/DC,OADEC,IAAAA,0BAA8BV,oEAGOJ,aAAiBD,GAA3BM,gEAEzBL,gBAACM,8BACOF,EACAC,GACJQ,IAAKA,EACLE,UAAWC,EAAW,sBAAuBF,SAanDG,EAAsC,CACxCC,MAAO,OACPC,OAAQ,OACRC,SAAU,QACVC,IAAK,EACLC,KAAM,GAOV,SAASC,YAUDvB,gBAACwB,mBACGC,SAVRA,OAWQC,UAVRA,QAWQC,WAVRA,SAWQC,YAVRA,UAWQC,gBAVRA,cAWQC,QAVRA,MAWQC,MAAOd,KAVff,cAsBE8B,EAAWpB,wBAA2C,WAExDC,OADEC,IAAAA,0BAA8BV,oEAGOJ,aAAiBD,GAA3BM,gEACtBA,EAAMqB,QACT1B,gBAACuB,mBAAiBlB,GACdL,gBAACM,wBACOF,EACAC,GACJQ,IAAKA,EACLE,UAAWC,EAAW,oBAAqBF,OAGnD,QA8DFmB,EAAWrB,wBAA8C,WAU3DC,OARIJ,IAAAA,MACAP,IAAAA,SACAgC,IAAAA,aACAC,aAAAA,gBACAC,IAAAA,QACAtB,IAAAA,0BACGV,2HAIgCJ,aAAiBD,GAAhDS,IAAAA,iBAAqBH,yDACrBgC,EAAShC,EAATgC,KAEFC,EAActC,eAChB,SAAqBuC,GACjBH,MAAAA,GAAAA,EAAUG,OAGJC,GAAiC,KADnCN,IAAaK,EAAME,iBAAmBP,SAAaQ,IACPP,EAChD3B,EAAiBC,GACb+B,GAAaH,MAErB,CAACH,EAAUE,EAAS5B,EAAkB2B,EAAcE,EAAM5B,WAI1DT,gBAACM,4BACOF,EACAC,GACJQ,IAAKA,EACLuB,QAASE,EACTvB,UAAWD,IAEVZ,MAgCPyC,EAAU3C,cAAkD,WAE9Da,OADEX,IAAAA,SAAUC,IAAAA,aAAiBC,kEAGgCJ,aAAiBD,GAApD6C,IAAlBpC,iBAA2CH,yDACrCwC,EAAmBxC,EAAzBgC,KAEFS,EAAsB9C,eACxB,SAA6BS,GACrBN,GAAcA,EAAaM,GAC/BmC,EAAqBnC,GACrBoC,MAEJ,CAACA,EAAgBD,EAAsBzC,MAGpBH,WAAe+C,QAAQ7C,GAAvC8C,OAAQC,cAGXjD,gBAACM,4BAAoBD,EAAWD,GAAOS,IAAKA,KACvC,SAACqC,UACElD,gBAACC,GAAKE,aAAc2C,GACf9C,eAAmBgD,qCACbE,OACHnC,UAAWC,EAAWkC,EAAYnC,UAAW,8BAEhDkC,SAwBfE,EAAYvC,wBAA4C,WAE1DC,OADEuC,IAAAA,MAAOlD,IAAAA,SAAUY,IAAAA,0BAA8BV,uFAGVJ,aAAiBD,GAA3BM,gEAEzBL,gBAACM,2BAAiBO,IAAKA,GAAST,EAAWC,GAAOU,UAAWD,IACxDsC,EACGpD,uBAAKqD,KAAK,eAAetC,UAAU,6BAC9BqC,GAEL,KACHlD"}

package/lib/index.d.ts

@@ -7,10 +7,11 @@ export * from './new-components/stack';
 export * from './new-components/hidden';
 export * from './new-components/hidden-visually';
 export * from './new-components/alert';
-export * from './new-components/loading-spinner';
+export * from './new-components/loading';
 export * from './new-components/notice';
 export * from './new-components/heading';
 export * from './new-components/text';
+export * from './new-components/button';
 export * from './new-components/button-link';
 export * from './new-components/text-link';
 export * from './new-components/checkbox-field';
@@ -20,9 +21,9 @@ export * from './new-components/switch-field';
 export * from './new-components/text-area';
 export * from './new-components/text-field';
 export * from './new-components/tabs';
+export * from './new-components/modal';
 export * from './hooks/use-previous';
 export { default as Avatar } from './components/avatar';
-export { default as Button } from './components/button';
 export { default as Checkbox } from './components/checkbox';
 export { default as ColorPicker, COLORS } from './components/color-picker';
 export { default as Dropdown } from './components/dropdown';
@@ -31,8 +32,6 @@ export { default as Icon } from './components/icon';
 export { default as Input } from './components/input';
 export { default as KeyboardShortcut } from './components/keyboard-shortcut';
 export { default as KeyCapturer, SUPPORTED_KEYS } from './components/key-capturer';
-export { default as Loading } from './components/loading';
-export { default as Modal } from './components/modal';
 export { default as Popover } from './components/popover';
 export { default as ProgressBar } from './components/progress-bar';
 export { default as RangeInput } from './components/range-input';
@@ -42,3 +41,6 @@ export { default as Tip } from './components/tip';
 export { Notification } from './components/notification/notification';
 export { Tooltip, TooltipProps } from './components/tooltip';
 export * from './components/menu';
+export { default as DeprecatedButton } from './components/deprecated-button';
+export { default as DeprecatedModal } from './components/deprecated-modal';
+export { DeprecatedLoading } from './components/deprecated-loading';

package/lib/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./new-components/box/box.js"),o=require("./new-components/columns/columns.js"),t=require("./new-components/divider/divider.js"),n=require("./new-components/inline/inline.js"),r=require("./new-components/stack/stack.js"),s=require("./new-components/hidden/hidden.js"),i=require("./new-components/hidden-visually/hidden-visually.js"),p=require("./new-components/alert/alert.js"),u=require("./new-components/loading-spinner/loading-spinner.js"),d=require("./new-components/notice/notice.js"),x=require("./new-components/heading/heading.js"),c=require("./new-components/text/text.js"),a=require("./new-components/button-link/button-link.js"),l=require("./new-components/text-link/text-link.js"),m=require("./new-components/checkbox-field/checkbox-field.js"),j=require("./components/tooltip/tooltip.js"),q=require("./new-components/password-field/password-field.js"),f=require("./new-components/select-field/select-field.js"),w=require("./new-components/switch-field/switch-field.js"),b=require("./new-components/text-area/text-area.js"),k=require("./new-components/text-field/text-field.js"),T=require("./hooks/use-previous/use-previous.js"),S=require("./new-components/tabs/tabs.js"),h=require("./components/avatar/index.js"),g=require("./components/button/index.js"),v=require("./components/checkbox/index.js"),M=require("./components/dropdown/index.js"),P=require("./components/color-picker/color-picker.js"),L=require("./components/color-picker/index.js"),y=require("./components/error-message/index.js"),C=require("./components/icon/index.js"),F=require("./components/input/index.js"),B=require("./components/keyboard-shortcut/index.js"),A=require("./components/key-capturer/key-capturer.js"),I=require("./components/key-capturer/index.js"),O=require("./components/loading/index.js"),H=require("./components/modal/index.js"),D=require("./components/popover/index.js"),E=require("./components/progress-bar/index.js"),R=require("./components/range-input/index.js"),K=require("./components/select/index.js"),N=require("./components/time/index.js"),_=require("./components/tip/index.js"),G=require("./components/notification/notification.js"),U=require("./components/menu/menu.js");exports.Box=e.Box,exports.Column=o.Column,exports.Columns=o.Columns,exports.Divider=t.Divider,exports.Inline=n.Inline,exports.Stack=r.Stack,exports.Hidden=s.Hidden,exports.HiddenVisually=i.HiddenVisually,exports.Alert=p.Alert,exports.LoadingSpinner=u.LoadingSpinner,exports.Notice=d.Notice,exports.Heading=x.Heading,exports.Text=c.Text,exports.ButtonLink=a.ButtonLink,exports.TextLink=l.TextLink,exports.CheckboxField=m.CheckboxField,exports.Tooltip=j.Tooltip,exports.PasswordField=q.PasswordField,exports.SelectField=f.SelectField,exports.SwitchField=w.SwitchField,exports.TextArea=b.TextArea,exports.TextField=k.TextField,exports.usePrevious=T.usePrevious,exports.Tab=S.Tab,exports.TabAwareSlot=S.TabAwareSlot,exports.TabList=S.TabList,exports.TabPanel=S.TabPanel,exports.Tabs=S.Tabs,exports.Avatar=h.default,exports.Button=g.default,exports.Checkbox=v.default,exports.Dropdown=M.default,exports.COLORS=P.COLORS,exports.ColorPicker=L.default,exports.ErrorMessage=y.default,exports.Icon=C.default,exports.Input=F.default,exports.KeyboardShortcut=B.default,exports.SUPPORTED_KEYS=A.SUPPORTED_KEYS,exports.KeyCapturer=I.default,exports.Loading=O.default,exports.Modal=H.default,exports.Popover=D.default,exports.ProgressBar=E.default,exports.RangeInput=R.default,exports.Select=K.default,exports.Time=N.default,exports.Tip=_.default,exports.Notification=G.Notification,exports.Menu=U.Menu,exports.MenuButton=U.MenuButton,exports.MenuGroup=U.MenuGroup,exports.MenuItem=U.MenuItem,exports.MenuList=U.MenuList,exports.SubMenu=U.SubMenu;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./new-components/box/box.js"),o=require("./new-components/columns/columns.js"),t=require("./new-components/divider/divider.js"),r=require("./new-components/inline/inline.js"),n=require("./new-components/stack/stack.js"),s=require("./new-components/hidden/hidden.js"),i=require("./new-components/hidden-visually/hidden-visually.js"),p=require("./new-components/alert/alert.js"),d=require("./new-components/loading/loading.js"),u=require("./new-components/notice/notice.js"),a=require("./new-components/heading/heading.js"),x=require("./new-components/text/text.js"),l=require("./components/tooltip/tooltip.js"),c=require("./new-components/button/button.js"),m=require("./new-components/button-link/button-link.js"),j=require("./new-components/text-link/text-link.js"),q=require("./new-components/checkbox-field/checkbox-field.js"),w=require("./new-components/password-field/password-field.js"),f=require("./new-components/select-field/select-field.js"),b=require("./new-components/switch-field/switch-field.js"),k=require("./new-components/text-area/text-area.js"),M=require("./new-components/text-field/text-field.js"),T=require("./hooks/use-previous/use-previous.js"),h=require("./new-components/tabs/tabs.js"),g=require("./new-components/modal/modal.js"),S=require("./components/avatar/index.js"),v=require("./components/checkbox/index.js"),B=require("./components/deprecated-button/index.js"),L=require("./components/dropdown/index.js"),P=require("./components/color-picker/color-picker.js"),y=require("./components/color-picker/index.js"),C=require("./components/error-message/index.js"),F=require("./components/icon/index.js"),A=require("./components/input/index.js"),D=require("./components/keyboard-shortcut/index.js"),H=require("./components/key-capturer/key-capturer.js"),I=require("./components/key-capturer/index.js"),O=require("./components/popover/index.js"),E=require("./components/progress-bar/index.js"),R=require("./components/range-input/index.js"),K=require("./components/select/index.js"),N=require("./components/time/index.js"),_=require("./components/tip/index.js"),G=require("./components/notification/notification.js"),U=require("./components/menu/menu.js"),V=require("./components/deprecated-modal/index.js"),Y=require("./components/deprecated-loading/deprecated-loading.js");exports.Box=e.Box,exports.Column=o.Column,exports.Columns=o.Columns,exports.Divider=t.Divider,exports.Inline=r.Inline,exports.Stack=n.Stack,exports.Hidden=s.Hidden,exports.HiddenVisually=i.HiddenVisually,exports.Alert=p.Alert,exports.Loading=d.Loading,exports.Notice=u.Notice,exports.Heading=a.Heading,exports.Text=x.Text,exports.Tooltip=l.Tooltip,exports.Button=c.Button,exports.ButtonLink=m.ButtonLink,exports.TextLink=j.TextLink,exports.CheckboxField=q.CheckboxField,exports.PasswordField=w.PasswordField,exports.SelectField=f.SelectField,exports.SwitchField=b.SwitchField,exports.TextArea=k.TextArea,exports.TextField=M.TextField,exports.usePrevious=T.usePrevious,exports.Tab=h.Tab,exports.TabAwareSlot=h.TabAwareSlot,exports.TabList=h.TabList,exports.TabPanel=h.TabPanel,exports.Tabs=h.Tabs,exports.Modal=g.Modal,exports.ModalActions=g.ModalActions,exports.ModalBody=g.ModalBody,exports.ModalCloseButton=g.ModalCloseButton,exports.ModalFooter=g.ModalFooter,exports.ModalHeader=g.ModalHeader,exports.Avatar=S.default,exports.Checkbox=v.default,exports.DeprecatedButton=B.default,exports.Dropdown=L.default,exports.COLORS=P.COLORS,exports.ColorPicker=y.default,exports.ErrorMessage=C.default,exports.Icon=F.default,exports.Input=A.default,exports.KeyboardShortcut=D.default,exports.SUPPORTED_KEYS=H.SUPPORTED_KEYS,exports.KeyCapturer=I.default,exports.Popover=O.default,exports.ProgressBar=E.default,exports.RangeInput=R.default,exports.Select=K.default,exports.Time=N.default,exports.Tip=_.default,exports.Notification=G.Notification,exports.Menu=U.Menu,exports.MenuButton=U.MenuButton,exports.MenuGroup=U.MenuGroup,exports.MenuItem=U.MenuItem,exports.MenuList=U.MenuList,exports.SubMenu=U.SubMenu,exports.DeprecatedModal=V.default,exports.DeprecatedLoading=Y.Loading;
 //# sourceMappingURL=index.js.map

package/lib/new-components/base-button/base-button.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { TooltipProps } from '../../components/tooltip';
+declare type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
+declare type ButtonTone = 'normal' | 'destructive';
+declare type ButtonSize = 'small' | 'normal' | 'large';
+declare type IconElement = React.ReactChild;
+declare type CommonProps = {
+    /**
+     * The button's variant.
+     */
+    variant: ButtonVariant;
+    /**
+     * The button's tone.
+     * @default 'normal'
+     */
+    tone?: ButtonTone;
+    /**
+     * The button's size.
+     * @default 'normal'
+     */
+    size?: ButtonSize;
+    /**
+     * Whether the button is disabled or not.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button is busy/loading.
+     *
+     * A button in this state is functionally and semantically disabled. Visually is does not look
+     * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * A tooltip linked to the button element.
+     */
+    tooltip?: TooltipProps['content'];
+};
+declare type IconButtonProps = {
+    icon: IconElement;
+    'aria-label': string;
+    children?: never;
+    startIcon?: never;
+    endIcon?: never;
+};
+declare type LabelledButtonProps = {
+    children: NonNullable<React.ReactNode>;
+    startIcon?: IconElement;
+    endIcon?: IconElement;
+    icon?: never;
+};
+export declare type BaseButtonProps = CommonProps & (IconButtonProps | LabelledButtonProps);
+/**
+ * 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
+ */
+export declare const BaseButton: import("../../utils/polymorphism").PolymorphicComponent<"div", BaseButtonProps, "obfuscateClassName">;
+export {};

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),t=require("../../utils/polymorphism.js"),n=require("../box/box.js"),a=require("../spinner/spinner.js"),o=require("../../components/tooltip/tooltip.js"),i=require("./base-button.module.css.js");function r(e){e.preventDefault()}exports.BaseButton=t.polymorphicComponent((function(t,s){var u=t.as,c=void 0===u?"div":u,d=t.variant,p=t.tone,m=void 0===p?"normal":p,f=t.size,b=void 0===f?"normal":f,v=t.disabled,x=void 0!==v&&v,j=t.loading,E=void 0!==j&&j,B=t.tooltip,h=t.onClick,q=t.exceptionallySetClassName,y=t.children,C=t.startIcon,I=t.endIcon,N=t.icon,g=e.objectWithoutPropertiesLoose(t,["as","variant","tone","size","disabled","loading","tooltip","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon"]),S=E||x,_=l.createElement(n.Box,Object.assign({},g,{as:c,ref:s,"aria-disabled":S,onClick:S?r:h,className:[q,i.default.baseButton,i.default["variant-"+d],i.default["tone-"+m],i.default["size-"+b],N?i.default.iconButton:null,x?i.default.disabled:null]}),N?E&&l.createElement(a.Spinner,null)||N:l.createElement(l.Fragment,null,C?l.createElement(n.Box,{display:"flex",className:i.default.startIcon,"aria-hidden":!0},E&&!I?l.createElement(a.Spinner,null):C):null,y?l.createElement("span",{className:i.default.label},y):null,I||E&&!C?l.createElement(n.Box,{display:"flex",className:i.default.endIcon,"aria-hidden":!0},E?l.createElement(a.Spinner,null):I):null)),k=N?null!=B?B:g["aria-label"]:B;return k?l.createElement(o.Tooltip,{content:k},_):_}));
+//# sourceMappingURL=base-button.js.map

package/lib/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","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":"qVAOA,SAASA,EAAeC,GACpBA,EAAMD,oCAqEgBE,wBAA6C,WAiBnEC,WAfIC,GAAAA,aAAK,QACLC,IAAAA,YACAC,KAAAA,aAAO,eACPC,KAAAA,aAAO,eACPC,SAAAA,oBACAC,QAAAA,gBACAC,IAAAA,QACAC,IAAAA,QACAC,IAAAA,0BACAC,IAAAA,SACAC,IAAAA,UACAC,IAAAA,QACAC,IAAAA,KACGC,gLAIDC,EAAaT,GAAWD,EACxBW,EACFC,gBAACC,uBACOJ,GACJb,GAAIA,EACJD,IAAKA,kBACUe,EACfP,QAASO,EAAalB,EAAiBW,EACvCW,UAAW,CACPV,EACAW,UAAOC,WACPD,qBAAkBlB,GAClBkB,kBAAejB,GACfiB,kBAAehB,GACfS,EAAOO,UAAOE,WAAa,KAC3BjB,EAAWe,UAAOf,SAAW,QAGhCQ,EACIP,GAAWW,gBAACM,iBAAeV,EAE5BI,gCACKN,EACGM,gBAACC,OAAIM,QAAQ,OAAOL,UAAWC,UAAOT,4BACjCL,IAAYM,EAAUK,gBAACM,gBAAaZ,GAEzC,KACHD,EAAWO,wBAAME,UAAWC,UAAOK,OAAQf,GAAmB,KAC9DE,GAAYN,IAAYK,EACrBM,gBAACC,OAAIM,QAAQ,OAAOL,UAAWC,UAAOR,0BACjCN,EAAUW,gBAACM,gBAAaX,GAE7B,OAOdc,EAAiBb,EAAON,MAAAA,EAAAA,EAAWO,EAAM,cAAgBP,SACxDmB,EACHT,gBAACU,WAAQC,QAASF,GAAiBV,GAEnCA"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={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"};
+//# sourceMappingURL=base-button.module.css.js.map

package/lib/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/lib/new-components/base-button/index.d.ts

@@ -0,0 +1 @@
+export * from './base-button';

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("../box/box.js"),l=require("../stack/stack.js"),t=require("../text/text.js"),s=require("../common-helpers.js"),r=require("./base-field.module.css.js");function i(a){return e.createElement(t.Text,Object.assign({as:"p",tone:"secondary",size:"copy"},a))}exports.BaseField=function(n){var d=n.label,c=n.secondaryLabel,u=n.auxiliaryLabel,m=n.hint,o=n.className,x=n.children,b=n.maxWidth,p=n.hidden,y=n["aria-describedby"],f=s.useId(n.id),E=s.useId(),h=null!=y?y:m?E:void 0;return e.createElement(l.Stack,{space:"small"},e.createElement(a.Box,{className:o,maxWidth:b,hidden:p},e.createElement(a.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd",paddingBottom:"small"},e.createElement(t.Text,{size:"body",as:"label",htmlFor:f},d?e.createElement("span",{className:r.default.primaryLabel},d):null,c?e.createElement("span",{className:r.default.secondaryLabel}," (",c,")"):null),u?e.createElement(a.Box,{className:r.default.auxiliaryLabel,paddingLeft:"small"},u):null),x(h?{id:f,"aria-describedby":h}:{id:f})),m?e.createElement(i,{hidden:p,id:E},m):null)},exports.FieldHint=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("../box/box.js"),t=require("../stack/stack.js"),l=require("../text/text.js"),s=require("../common-helpers.js"),r=require("./base-field.module.css.js");function n(a){return e.createElement(l.Text,Object.assign({as:"p",tone:"secondary",size:"copy"},a))}exports.BaseField=function(i){var d=i.label,c=i.secondaryLabel,u=i.auxiliaryLabel,o=i.hint,m=i.className,x=i.children,b=i.maxWidth,p=i.hidden,y=i["aria-describedby"],f=s.useId(i.id),E=s.useId(),h=null!=y?y:o?E:void 0;return e.createElement(t.Stack,{space:"small"},e.createElement(a.Box,{className:[m,r.default.container],maxWidth:b,hidden:p},e.createElement(a.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd",paddingBottom:"small"},e.createElement(l.Text,{size:"body",as:"label",htmlFor:f},d?e.createElement("span",{className:r.default.primaryLabel},d):null,c?e.createElement("span",{className:r.default.secondaryLabel}," (",c,")"):null),u?e.createElement(a.Box,{className:r.default.auxiliaryLabel,paddingLeft:"small"},u):null),x(h?{id:f,"aria-describedby":h}:{id:f})),o?e.createElement(n,{hidden:p,id:E},o):null)},exports.FieldHint=n;
 //# sourceMappingURL=base-field.js.map

package/lib/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 { 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} 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","label","secondaryLabel","auxiliaryLabel","hint","className","children","maxWidth","hidden","originalAriaDescribedBy","id","useId","hintId","ariaDescribedBy","undefined","Stack","space","Box","display","justifyContent","alignItems","paddingBottom","htmlFor","styles","primaryLabel","paddingLeft"],"mappings":"4PAcA,SAASA,EAAUC,UACRC,gBAACC,sBAAKC,GAAG,IAAIC,KAAK,YAAYC,KAAK,QAAWL,sBAgEzD,gBACIM,IAAAA,MACAC,IAAAA,eACAC,IAAAA,eACAC,IAAAA,KACAC,IAAAA,UACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,OACoBC,IAApB,oBAGMC,EAAKC,UAFXD,IAGME,EAASD,UAETE,EAAkBJ,MAAAA,EAAAA,EAA4BL,EAAOQ,OAASE,SAGhElB,gBAACmB,SAAMC,MAAM,SACTpB,gBAACqB,OAAIZ,UAAWA,EAAWE,SAAUA,EAAUC,OAAQA,GACnDZ,gBAACqB,OACGnB,GAAG,OACHoB,QAAQ,OACRC,eAAe,eACfC,WAAW,UACXC,cAAc,SAEdzB,gBAACC,QAAKG,KAAK,OAAOF,GAAG,QAAQwB,QAASZ,GACjCT,EAAQL,wBAAMS,UAAWkB,UAAOC,cAAevB,GAAgB,KAC/DC,EACGN,wBAAMS,UAAWkB,UAAOrB,qBAAwBA,OAChD,MAEPC,EACGP,gBAACqB,OAAIZ,UAAWkB,UAAOpB,eAAgBsB,YAAY,SAC9CtB,GAEL,MAEPG,EAASO,EAAkB,CAAEH,GAAAA,qBAAwBG,GAAoB,CAAEH,GAAAA,KAE/EN,EACGR,gBAACF,GAAUc,OAAQA,EAAQE,GAAIE,GAC1BR,GAEL"}
+{"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","label","secondaryLabel","auxiliaryLabel","hint","className","children","maxWidth","hidden","originalAriaDescribedBy","id","useId","hintId","ariaDescribedBy","undefined","Stack","space","Box","styles","container","display","justifyContent","alignItems","paddingBottom","htmlFor","primaryLabel","paddingLeft"],"mappings":"4PAcA,SAASA,EAAUC,UACRC,gBAACC,sBAAKC,GAAG,IAAIC,KAAK,YAAYC,KAAK,QAAWL,sBAgEzD,gBACIM,IAAAA,MACAC,IAAAA,eACAC,IAAAA,eACAC,IAAAA,KACAC,IAAAA,UACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,OACoBC,IAApB,oBAGMC,EAAKC,UAFXD,IAGME,EAASD,UAETE,EAAkBJ,MAAAA,EAAAA,EAA4BL,EAAOQ,OAASE,SAGhElB,gBAACmB,SAAMC,MAAM,SACTpB,gBAACqB,OAAIZ,UAAW,CAACA,EAAWa,UAAOC,WAAYZ,SAAUA,EAAUC,OAAQA,GACvEZ,gBAACqB,OACGnB,GAAG,OACHsB,QAAQ,OACRC,eAAe,eACfC,WAAW,UACXC,cAAc,SAEd3B,gBAACC,QAAKG,KAAK,OAAOF,GAAG,QAAQ0B,QAASd,GACjCT,EAAQL,wBAAMS,UAAWa,UAAOO,cAAexB,GAAgB,KAC/DC,EACGN,wBAAMS,UAAWa,UAAOhB,qBAAwBA,OAChD,MAEPC,EACGP,gBAACqB,OAAIZ,UAAWa,UAAOf,eAAgBuB,YAAY,SAC9CvB,GAEL,MAEPG,EAASO,EAAkB,CAAEH,GAAAA,qBAAwBG,GAAoB,CAAEH,GAAAA,KAE/EN,EACGR,gBAACF,GAAUc,OAAQA,EAAQE,GAAIE,GAC1BR,GAEL"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={primaryLabel:"e4c83510",secondaryLabel:"be85c720",auxiliaryLabel:"_7e9cad91"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"ed7d894c",primaryLabel:"_22213081",secondaryLabel:"be8637dd",auxiliaryLabel:"_72b46ad5"};
 //# sourceMappingURL=base-field.module.css.js.map

package/lib/new-components/box/box.d.ts

@@ -1,5 +1,5 @@
 import type { ResponsiveProp } from '../responsive-props';
-import type { Space, SpaceWithNegatives, WithEnhancedClassName } from '../common-types';
+import type { DividerWeight, Space, SpaceWithNegatives, WithEnhancedClassName } from '../common-types';
 interface BoxPaddingProps {
     padding?: ResponsiveProp<Space>;
     paddingX?: ResponsiveProp<Space>;
@@ -23,16 +23,20 @@ declare type BoxDisplay = 'block' | 'flex' | 'inline' | 'inlineBlock' | 'inlineF
 declare type BoxFlexDirection = 'column' | 'row';
 declare type BoxFlexWrap = 'nowrap' | 'wrap';
 declare type BoxAlignItems = 'center' | 'flexEnd' | 'flexStart' | 'baseline';
-declare type BoxJustifyContent = 'center' | 'flexEnd' | 'flexStart' | 'spaceBetween';
+declare type BoxJustifyContent = 'center' | 'flexEnd' | 'flexStart' | 'spaceAround' | 'spaceBetween' | 'spaceEvenly';
 declare type BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll';
 interface BorderProps {
     borderRadius?: 'standard' | 'none' | 'full';
-    border?: 'standard' | 'none';
+    border?: DividerWeight;
 }
 interface ReusableBoxProps extends BorderProps, BoxPaddingProps {
     minWidth?: 0 | BoxMaxMinWidth;
     maxWidth?: BoxMaxMinWidth | 'full';
     background?: 'default' | 'aside' | 'highlight' | 'selected';
+    flexGrow?: 0 | 1;
+    flexShrink?: 0;
+    width?: 'full';
+    height?: 'full';
 }
 declare type BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky';
 interface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginProps {
@@ -40,13 +44,12 @@ interface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginPro
     display?: ResponsiveProp<BoxDisplay>;
     flexDirection?: ResponsiveProp<BoxFlexDirection>;
     flexWrap?: BoxFlexWrap;
-    flexGrow?: 0 | 1;
-    flexShrink?: 0;
     alignItems?: ResponsiveProp<BoxAlignItems>;
     justifyContent?: ResponsiveProp<BoxJustifyContent>;
     overflow?: BoxOverflow;
     width?: 'full';
     height?: 'full';
+    textAlign?: ResponsiveProp<'start' | 'center' | 'end' | 'justify'>;
 }
 declare const Box: import("../../utils/polymorphism").PolymorphicComponent<"div", BoxProps, "keepClassName">;
 export type { BoxProps, BoxPaddingProps, BoxMarginProps, ReusableBoxProps, BoxMaxMinWidth, BoxDisplay, BoxPosition, BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxOverflow, };

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

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var l=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),t=(e(a),e(require("classnames"))),i=require("../../utils/polymorphism.js"),s=require("../responsive-props.js"),n=require("./box.module.css.js"),d=require("./padding.module.css.js"),r=require("./margin.module.css.js");exports.Box=i.polymorphicComponent((function(e,i){var o,u,g,m,f,p,h,c,C=e.as,N=void 0===C?"div":C,v=e.position,x=void 0===v?"static":v,b=e.display,j=void 0===b?"block":b,y=e.flexDirection,w=void 0===y?"row":y,W=e.flexWrap,R=e.flexGrow,q=e.flexShrink,B=e.alignItems,S=e.justifyContent,L=e.overflow,k=e.width,T=e.height,X=e.background,Y=e.border,_=e.borderRadius,D=e.minWidth,G=e.maxWidth,I=e.padding,P=e.paddingY,E=e.paddingX,F=e.paddingTop,H=e.paddingRight,M=e.paddingBottom,O=e.paddingLeft,z=e.margin,A=e.marginY,J=e.marginX,K=e.marginTop,Q=e.marginRight,U=e.marginBottom,V=e.marginLeft,Z=e.className,$=e.children,ee=l.objectWithoutPropertiesLoose(e,["as","position","display","flexDirection","flexWrap","flexGrow","flexShrink","alignItems","justifyContent","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","className","children"]),le=null!==(o=null!=F?F:P)&&void 0!==o?o:I,ae=null!==(u=null!=H?H:E)&&void 0!==u?u:I,te=null!==(g=null!=M?M:P)&&void 0!==g?g:I,ie=null!==(m=null!=O?O:E)&&void 0!==m?m:I,se=null!==(f=null!=K?K:A)&&void 0!==f?f:z,ne=null!==(p=null!=Q?Q:J)&&void 0!==p?p:z,de=null!==(h=null!=U?U:A)&&void 0!==h?h:z,re=null!==(c=null!=V?V:J)&&void 0!==c?c:z,oe="string"==typeof j&&"flex"!==j&&"inlineFlex"!==j;return a.createElement(N,l.objectSpread2(l.objectSpread2({},ee),{},{className:t(Z,n.default.box,s.getClassNames(n.default,"display",j),"static"!==x?s.getClassNames(n.default,"position",x):null,null!=D?s.getClassNames(n.default,"minWidth",String(D)):null,s.getClassNames(n.default,"maxWidth",G),s.getClassNames(d.default,"paddingTop",le),s.getClassNames(d.default,"paddingRight",ae),s.getClassNames(d.default,"paddingBottom",te),s.getClassNames(d.default,"paddingLeft",ie),s.getClassNames(r.default,"marginTop",se),s.getClassNames(r.default,"marginRight",ne),s.getClassNames(r.default,"marginBottom",de),s.getClassNames(r.default,"marginLeft",re),oe?null:s.getClassNames(n.default,"flexDirection",w),oe?null:s.getClassNames(n.default,"flexWrap",W),oe?null:s.getClassNames(n.default,"alignItems",B),oe?null:s.getClassNames(n.default,"justifyContent",S),null!=q?s.getClassNames(n.default,"flexShrink",String(q)):null,null!=R?s.getClassNames(n.default,"flexGrow",String(R)):null,s.getClassNames(n.default,"overflow",L),s.getClassNames(n.default,"width",k),s.getClassNames(n.default,"height",T),s.getClassNames(n.default,"bg",X),"none"!==_?s.getClassNames(n.default,"borderRadius",_):null,"none"!==Y?s.getClassNames(n.default,"border",Y):null)||void 0,ref:i}),$)}));
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var l=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),t=(e(a),e(require("classnames"))),i=require("../../utils/polymorphism.js"),s=require("../responsive-props.js"),n=require("./box.module.css.js"),d=require("./padding.module.css.js"),r=require("./margin.module.css.js");exports.Box=i.polymorphicComponent((function(e,i){var o,u,g,m,f,p,h,C,N=e.as,c=void 0===N?"div":N,x=e.position,v=void 0===x?"static":x,b=e.display,j=e.flexDirection,y=void 0===j?"row":j,w=e.flexWrap,W=e.flexGrow,R=e.flexShrink,q=e.alignItems,B=e.justifyContent,S=e.overflow,L=e.width,T=e.height,k=e.background,X=e.border,Y=e.borderRadius,_=e.minWidth,A=e.maxWidth,D=e.textAlign,G=void 0===D?"start":D,I=e.padding,P=e.paddingY,E=e.paddingX,F=e.paddingTop,H=e.paddingRight,M=e.paddingBottom,O=e.paddingLeft,z=e.margin,J=e.marginY,K=e.marginX,Q=e.marginTop,U=e.marginRight,V=e.marginBottom,Z=e.marginLeft,$=e.className,ee=e.children,le=l.objectWithoutPropertiesLoose(e,["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"]),ae=null!==(o=null!=F?F:P)&&void 0!==o?o:I,te=null!==(u=null!=H?H:E)&&void 0!==u?u:I,ie=null!==(g=null!=M?M:P)&&void 0!==g?g:I,se=null!==(m=null!=O?O:E)&&void 0!==m?m:I,ne=null!==(f=null!=Q?Q:J)&&void 0!==f?f:z,de=null!==(p=null!=U?U:K)&&void 0!==p?p:z,re=null!==(h=null!=V?V:J)&&void 0!==h?h:z,oe=null!==(C=null!=Z?Z:K)&&void 0!==C?C:z,ue=!b||"string"==typeof b&&"flex"!==b&&"inlineFlex"!==b;return a.createElement(c,l.objectSpread2(l.objectSpread2({},le),{},{className:t($,n.default.box,b?s.getClassNames(n.default,"display",b):null,"static"!==v?s.getClassNames(n.default,"position",v):null,null!=_?s.getClassNames(n.default,"minWidth",String(_)):null,s.getClassNames(n.default,"maxWidth",A),"start"!==G?s.getClassNames(n.default,"textAlign",G):null,s.getClassNames(d.default,"paddingTop",ae),s.getClassNames(d.default,"paddingRight",te),s.getClassNames(d.default,"paddingBottom",ie),s.getClassNames(d.default,"paddingLeft",se),s.getClassNames(r.default,"marginTop",ne),s.getClassNames(r.default,"marginRight",de),s.getClassNames(r.default,"marginBottom",re),s.getClassNames(r.default,"marginLeft",oe),ue?null:s.getClassNames(n.default,"flexDirection",y),ue?null:s.getClassNames(n.default,"flexWrap",w),ue?null:s.getClassNames(n.default,"alignItems",q),ue?null:s.getClassNames(n.default,"justifyContent",B),null!=R?s.getClassNames(n.default,"flexShrink",String(R)):null,null!=W?s.getClassNames(n.default,"flexGrow",String(W)):null,s.getClassNames(n.default,"overflow",S),s.getClassNames(n.default,"width",L),s.getClassNames(n.default,"height",T),s.getClassNames(n.default,"bg",k),"none"!==Y?s.getClassNames(n.default,"borderRadius",Y):null,"none"!==X?s.getClassNames(n.default,"border",X):null)||void 0,ref:i}),ee)}));
 //# sourceMappingURL=box.js.map

package/lib/new-components/box/box.js.map

@@ -1 +1 @@
-{"version":3,"file":"box.js","sources":["../../../src/new-components/box/box.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames } from '../responsive-props'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { Space, SpaceWithNegatives, WithEnhancedClassName } from '../common-types'\n\nimport styles from './box.module.css'\nimport paddingStyles from './padding.module.css'\nimport marginStyles from './margin.module.css'\n\ninterface BoxPaddingProps {\n    padding?: ResponsiveProp<Space>\n    paddingX?: ResponsiveProp<Space>\n    paddingY?: ResponsiveProp<Space>\n    paddingTop?: ResponsiveProp<Space>\n    paddingRight?: ResponsiveProp<Space>\n    paddingBottom?: ResponsiveProp<Space>\n    paddingLeft?: ResponsiveProp<Space>\n}\n\ninterface BoxMarginProps {\n    margin?: ResponsiveProp<SpaceWithNegatives>\n    marginX?: ResponsiveProp<SpaceWithNegatives>\n    marginY?: ResponsiveProp<SpaceWithNegatives>\n    marginTop?: ResponsiveProp<SpaceWithNegatives>\n    marginRight?: ResponsiveProp<SpaceWithNegatives>\n    marginBottom?: ResponsiveProp<SpaceWithNegatives>\n    marginLeft?: ResponsiveProp<SpaceWithNegatives>\n}\n\ntype BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'\ntype BoxDisplay = 'block' | 'flex' | 'inline' | 'inlineBlock' | 'inlineFlex' | 'none'\ntype BoxFlexDirection = 'column' | 'row'\ntype BoxFlexWrap = 'nowrap' | 'wrap'\ntype BoxAlignItems = 'center' | 'flexEnd' | 'flexStart' | 'baseline'\ntype BoxJustifyContent = 'center' | 'flexEnd' | 'flexStart' | 'spaceBetween'\ntype BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll'\n\ninterface BorderProps {\n    borderRadius?: 'standard' | 'none' | 'full'\n    border?: 'standard' | 'none' // to be extended with more options\n}\n\ninterface ReusableBoxProps extends BorderProps, BoxPaddingProps {\n    minWidth?: 0 | BoxMaxMinWidth\n    maxWidth?: BoxMaxMinWidth | 'full'\n    background?: 'default' | 'aside' | 'highlight' | 'selected'\n}\n\ntype BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'\n\ninterface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginProps {\n    position?: ResponsiveProp<BoxPosition>\n    display?: ResponsiveProp<BoxDisplay>\n    flexDirection?: ResponsiveProp<BoxFlexDirection>\n    flexWrap?: BoxFlexWrap\n    flexGrow?: 0 | 1\n    flexShrink?: 0\n    alignItems?: ResponsiveProp<BoxAlignItems>\n    justifyContent?: ResponsiveProp<BoxJustifyContent>\n    overflow?: BoxOverflow\n    width?: 'full'\n    height?: 'full'\n}\n\nconst Box = polymorphicComponent<'div', BoxProps, 'keepClassName'>(function Box(\n    {\n        as: component = 'div',\n        position = 'static',\n        display = 'block',\n        flexDirection = 'row',\n        flexWrap,\n        flexGrow,\n        flexShrink,\n        alignItems,\n        justifyContent,\n        overflow,\n        width,\n        height,\n        background,\n        border,\n        borderRadius,\n        minWidth,\n        maxWidth,\n        padding,\n        paddingY,\n        paddingX,\n        paddingTop,\n        paddingRight,\n        paddingBottom,\n        paddingLeft,\n        margin,\n        marginY,\n        marginX,\n        marginTop,\n        marginRight,\n        marginBottom,\n        marginLeft,\n        className,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const resolvedPaddingTop = paddingTop ?? paddingY ?? padding\n    const resolvedPaddingRight = paddingRight ?? paddingX ?? padding\n    const resolvedPaddingBottom = paddingBottom ?? paddingY ?? padding\n    const resolvedPaddingLeft = paddingLeft ?? paddingX ?? padding\n\n    const resolvedMarginTop = marginTop ?? marginY ?? margin\n    const resolvedMarginRight = marginRight ?? marginX ?? margin\n    const resolvedMarginBottom = marginBottom ?? marginY ?? margin\n    const resolvedMarginLeft = marginLeft ?? marginX ?? margin\n\n    const omitFlex = typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex'\n\n    return React.createElement(\n        component,\n        {\n            ...props,\n            className:\n                classNames(\n                    className,\n                    styles.box,\n                    getClassNames(styles, 'display', display),\n                    position !== 'static' ? getClassNames(styles, 'position', position) : null,\n                    minWidth != null ? getClassNames(styles, 'minWidth', String(minWidth)) : null,\n                    getClassNames(styles, 'maxWidth', maxWidth),\n                    // padding\n                    getClassNames(paddingStyles, 'paddingTop', resolvedPaddingTop),\n                    getClassNames(paddingStyles, 'paddingRight', resolvedPaddingRight),\n                    getClassNames(paddingStyles, 'paddingBottom', resolvedPaddingBottom),\n                    getClassNames(paddingStyles, 'paddingLeft', resolvedPaddingLeft),\n                    // margin\n                    getClassNames(marginStyles, 'marginTop', resolvedMarginTop),\n                    getClassNames(marginStyles, 'marginRight', resolvedMarginRight),\n                    getClassNames(marginStyles, 'marginBottom', resolvedMarginBottom),\n                    getClassNames(marginStyles, 'marginLeft', resolvedMarginLeft),\n                    // flex props\n                    omitFlex ? null : getClassNames(styles, 'flexDirection', flexDirection),\n                    omitFlex ? null : getClassNames(styles, 'flexWrap', flexWrap),\n                    omitFlex ? null : getClassNames(styles, 'alignItems', alignItems),\n                    omitFlex ? null : getClassNames(styles, 'justifyContent', justifyContent),\n                    flexShrink != null\n                        ? getClassNames(styles, 'flexShrink', String(flexShrink))\n                        : null,\n                    flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null,\n                    // other props\n                    getClassNames(styles, 'overflow', overflow),\n                    getClassNames(styles, 'width', width),\n                    getClassNames(styles, 'height', height),\n                    getClassNames(styles, 'bg', background),\n                    borderRadius !== 'none'\n                        ? getClassNames(styles, 'borderRadius', borderRadius)\n                        : null,\n                    border !== 'none' ? getClassNames(styles, 'border', border) : null,\n                ) || undefined,\n            ref,\n        },\n        children,\n    )\n})\n\nexport type {\n    BoxProps,\n    BoxPaddingProps,\n    BoxMarginProps,\n    ReusableBoxProps,\n    BoxMaxMinWidth,\n    BoxDisplay,\n    BoxPosition,\n    BoxFlexDirection,\n    BoxFlexWrap,\n    BoxAlignItems,\n    BoxJustifyContent,\n    BoxOverflow,\n}\n\nexport { Box }\n"],"names":["polymorphicComponent","ref","as","component","position","display","flexDirection","flexWrap","flexGrow","flexShrink","alignItems","justifyContent","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","className","children","props","resolvedPaddingTop","resolvedPaddingRight","resolvedPaddingBottom","resolvedPaddingLeft","resolvedMarginTop","resolvedMarginRight","resolvedMarginBottom","resolvedMarginLeft","omitFlex","React","classNames","styles","box","getClassNames","String","paddingStyles","marginStyles","undefined"],"mappings":"+bAmEYA,wBAAuD,WAqC/DC,2BAnCIC,GAAIC,aAAY,YAChBC,SAAAA,aAAW,eACXC,QAAAA,aAAU,cACVC,cAAAA,aAAgB,QAChBC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,WACAC,IAAAA,WACAC,IAAAA,eACAC,IAAAA,SACAC,IAAAA,MACAC,IAAAA,OACAC,IAAAA,WACAC,IAAAA,OACAC,IAAAA,aACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,QACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,WACAC,IAAAA,aACAC,IAAAA,cACAC,IAAAA,YACAC,IAAAA,OACAC,IAAAA,QACAC,IAAAA,QACAC,IAAAA,UACAC,IAAAA,YACAC,IAAAA,aACAC,IAAAA,WACAC,IAAAA,UACAC,IAAAA,SACGC,6aAIDC,aAAqBd,MAAAA,EAAAA,EAAcF,iBAAYD,EAC/CkB,aAAuBd,MAAAA,EAAAA,EAAgBF,iBAAYF,EACnDmB,aAAwBd,MAAAA,EAAAA,EAAiBJ,iBAAYD,EACrDoB,aAAsBd,MAAAA,EAAAA,EAAeJ,iBAAYF,EAEjDqB,aAAoBX,MAAAA,EAAAA,EAAaF,iBAAWD,EAC5Ce,aAAsBX,MAAAA,EAAAA,EAAeF,iBAAWF,EAChDgB,aAAuBX,MAAAA,EAAAA,EAAgBJ,iBAAWD,EAClDiB,aAAqBX,MAAAA,EAAAA,EAAcJ,iBAAWF,EAE9CkB,GAA8B,iBAAZxC,GAAoC,SAAZA,GAAkC,eAAZA,SAE/DyC,gBACH3C,qCAEOiC,QACHF,UACIa,EACIb,EACAc,UAAOC,IACPC,gBAAcF,UAAQ,UAAW3C,GACpB,WAAbD,EAAwB8C,gBAAcF,UAAQ,WAAY5C,GAAY,KAC1D,MAAZc,EAAmBgC,gBAAcF,UAAQ,WAAYG,OAAOjC,IAAa,KACzEgC,gBAAcF,UAAQ,WAAY7B,GAElC+B,gBAAcE,UAAe,aAAcf,IAC3Ca,gBAAcE,UAAe,eAAgBd,IAC7CY,gBAAcE,UAAe,gBAAiBb,IAC9CW,gBAAcE,UAAe,cAAeZ,IAE5CU,gBAAcG,UAAc,YAAaZ,IACzCS,gBAAcG,UAAc,cAAeX,IAC3CQ,gBAAcG,UAAc,eAAgBV,IAC5CO,gBAAcG,UAAc,aAAcT,IAE1CC,GAAW,KAAOK,gBAAcF,UAAQ,gBAAiB1C,GACzDuC,GAAW,KAAOK,gBAAcF,UAAQ,WAAYzC,GACpDsC,GAAW,KAAOK,gBAAcF,UAAQ,aAActC,GACtDmC,GAAW,KAAOK,gBAAcF,UAAQ,iBAAkBrC,GAC5C,MAAdF,EACMyC,gBAAcF,UAAQ,aAAcG,OAAO1C,IAC3C,KACM,MAAZD,EAAmB0C,gBAAcF,UAAQ,WAAYG,OAAO3C,IAAa,KAEzE0C,gBAAcF,UAAQ,WAAYpC,GAClCsC,gBAAcF,UAAQ,QAASnC,GAC/BqC,gBAAcF,UAAQ,SAAUlC,GAChCoC,gBAAcF,UAAQ,KAAMjC,GACX,SAAjBE,EACMiC,gBAAcF,UAAQ,eAAgB/B,GACtC,KACK,SAAXD,EAAoBkC,gBAAcF,UAAQ,SAAUhC,GAAU,YAC7DsC,EACTrD,IAAAA,IAEJkC"}
+{"version":3,"file":"box.js","sources":["../../../src/new-components/box/box.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames } from '../responsive-props'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type {\n    DividerWeight,\n    Space,\n    SpaceWithNegatives,\n    WithEnhancedClassName,\n} from '../common-types'\n\nimport styles from './box.module.css'\nimport paddingStyles from './padding.module.css'\nimport marginStyles from './margin.module.css'\n\ninterface BoxPaddingProps {\n    padding?: ResponsiveProp<Space>\n    paddingX?: ResponsiveProp<Space>\n    paddingY?: ResponsiveProp<Space>\n    paddingTop?: ResponsiveProp<Space>\n    paddingRight?: ResponsiveProp<Space>\n    paddingBottom?: ResponsiveProp<Space>\n    paddingLeft?: ResponsiveProp<Space>\n}\n\ninterface BoxMarginProps {\n    margin?: ResponsiveProp<SpaceWithNegatives>\n    marginX?: ResponsiveProp<SpaceWithNegatives>\n    marginY?: ResponsiveProp<SpaceWithNegatives>\n    marginTop?: ResponsiveProp<SpaceWithNegatives>\n    marginRight?: ResponsiveProp<SpaceWithNegatives>\n    marginBottom?: ResponsiveProp<SpaceWithNegatives>\n    marginLeft?: ResponsiveProp<SpaceWithNegatives>\n}\n\ntype BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'\ntype BoxDisplay = 'block' | 'flex' | 'inline' | 'inlineBlock' | 'inlineFlex' | 'none'\ntype BoxFlexDirection = 'column' | 'row'\ntype BoxFlexWrap = 'nowrap' | 'wrap'\ntype BoxAlignItems = 'center' | 'flexEnd' | 'flexStart' | 'baseline'\ntype BoxJustifyContent =\n    | 'center'\n    | 'flexEnd'\n    | 'flexStart'\n    | 'spaceAround'\n    | 'spaceBetween'\n    | 'spaceEvenly'\ntype BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll'\n\ninterface BorderProps {\n    borderRadius?: 'standard' | 'none' | 'full'\n    border?: DividerWeight\n}\n\ninterface ReusableBoxProps extends BorderProps, BoxPaddingProps {\n    minWidth?: 0 | BoxMaxMinWidth\n    maxWidth?: BoxMaxMinWidth | 'full'\n    background?: 'default' | 'aside' | 'highlight' | 'selected'\n    flexGrow?: 0 | 1\n    flexShrink?: 0\n    width?: 'full'\n    height?: 'full'\n}\n\ntype BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'\n\ninterface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginProps {\n    position?: ResponsiveProp<BoxPosition>\n    display?: ResponsiveProp<BoxDisplay>\n    flexDirection?: ResponsiveProp<BoxFlexDirection>\n    flexWrap?: BoxFlexWrap\n    alignItems?: ResponsiveProp<BoxAlignItems>\n    justifyContent?: ResponsiveProp<BoxJustifyContent>\n    overflow?: BoxOverflow\n    width?: 'full'\n    height?: 'full'\n    textAlign?: ResponsiveProp<'start' | 'center' | 'end' | 'justify'>\n}\n\nconst Box = polymorphicComponent<'div', BoxProps, 'keepClassName'>(function Box(\n    {\n        as: component = 'div',\n        position = 'static',\n        display,\n        flexDirection = 'row',\n        flexWrap,\n        flexGrow,\n        flexShrink,\n        alignItems,\n        justifyContent,\n        overflow,\n        width,\n        height,\n        background,\n        border,\n        borderRadius,\n        minWidth,\n        maxWidth,\n        textAlign = 'start',\n        padding,\n        paddingY,\n        paddingX,\n        paddingTop,\n        paddingRight,\n        paddingBottom,\n        paddingLeft,\n        margin,\n        marginY,\n        marginX,\n        marginTop,\n        marginRight,\n        marginBottom,\n        marginLeft,\n        className,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const resolvedPaddingTop = paddingTop ?? paddingY ?? padding\n    const resolvedPaddingRight = paddingRight ?? paddingX ?? padding\n    const resolvedPaddingBottom = paddingBottom ?? paddingY ?? padding\n    const resolvedPaddingLeft = paddingLeft ?? paddingX ?? padding\n\n    const resolvedMarginTop = marginTop ?? marginY ?? margin\n    const resolvedMarginRight = marginRight ?? marginX ?? margin\n    const resolvedMarginBottom = marginBottom ?? marginY ?? margin\n    const resolvedMarginLeft = marginLeft ?? marginX ?? margin\n\n    const omitFlex =\n        !display || (typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex')\n\n    return React.createElement(\n        component,\n        {\n            ...props,\n            className:\n                classNames(\n                    className,\n                    styles.box,\n                    display ? getClassNames(styles, 'display', display) : null,\n                    position !== 'static' ? getClassNames(styles, 'position', position) : null,\n                    minWidth != null ? getClassNames(styles, 'minWidth', String(minWidth)) : null,\n                    getClassNames(styles, 'maxWidth', maxWidth),\n                    textAlign !== 'start' ? getClassNames(styles, 'textAlign', textAlign) : null,\n                    // padding\n                    getClassNames(paddingStyles, 'paddingTop', resolvedPaddingTop),\n                    getClassNames(paddingStyles, 'paddingRight', resolvedPaddingRight),\n                    getClassNames(paddingStyles, 'paddingBottom', resolvedPaddingBottom),\n                    getClassNames(paddingStyles, 'paddingLeft', resolvedPaddingLeft),\n                    // margin\n                    getClassNames(marginStyles, 'marginTop', resolvedMarginTop),\n                    getClassNames(marginStyles, 'marginRight', resolvedMarginRight),\n                    getClassNames(marginStyles, 'marginBottom', resolvedMarginBottom),\n                    getClassNames(marginStyles, 'marginLeft', resolvedMarginLeft),\n                    // flex props\n                    omitFlex ? null : getClassNames(styles, 'flexDirection', flexDirection),\n                    omitFlex ? null : getClassNames(styles, 'flexWrap', flexWrap),\n                    omitFlex ? null : getClassNames(styles, 'alignItems', alignItems),\n                    omitFlex ? null : getClassNames(styles, 'justifyContent', justifyContent),\n                    flexShrink != null\n                        ? getClassNames(styles, 'flexShrink', String(flexShrink))\n                        : null,\n                    flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null,\n                    // other props\n                    getClassNames(styles, 'overflow', overflow),\n                    getClassNames(styles, 'width', width),\n                    getClassNames(styles, 'height', height),\n                    getClassNames(styles, 'bg', background),\n                    borderRadius !== 'none'\n                        ? getClassNames(styles, 'borderRadius', borderRadius)\n                        : null,\n                    border !== 'none' ? getClassNames(styles, 'border', border) : null,\n                ) || undefined,\n            ref,\n        },\n        children,\n    )\n})\n\nexport type {\n    BoxProps,\n    BoxPaddingProps,\n    BoxMarginProps,\n    ReusableBoxProps,\n    BoxMaxMinWidth,\n    BoxDisplay,\n    BoxPosition,\n    BoxFlexDirection,\n    BoxFlexWrap,\n    BoxAlignItems,\n    BoxJustifyContent,\n    BoxOverflow,\n}\n\nexport { Box }\n"],"names":["polymorphicComponent","ref","as","component","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","props","resolvedPaddingTop","resolvedPaddingRight","resolvedPaddingBottom","resolvedPaddingLeft","resolvedMarginTop","resolvedMarginRight","resolvedMarginBottom","resolvedMarginLeft","omitFlex","React","classNames","styles","box","getClassNames","String","paddingStyles","marginStyles","undefined"],"mappings":"+bAiFYA,wBAAuD,WAsC/DC,2BApCIC,GAAIC,aAAY,YAChBC,SAAAA,aAAW,WACXC,IAAAA,YACAC,cAAAA,aAAgB,QAChBC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,WACAC,IAAAA,WACAC,IAAAA,eACAC,IAAAA,SACAC,IAAAA,MACAC,IAAAA,OACAC,IAAAA,WACAC,IAAAA,OACAC,IAAAA,aACAC,IAAAA,SACAC,IAAAA,aACAC,UAAAA,aAAY,UACZC,IAAAA,QACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,WACAC,IAAAA,aACAC,IAAAA,cACAC,IAAAA,YACAC,IAAAA,OACAC,IAAAA,QACAC,IAAAA,QACAC,IAAAA,UACAC,IAAAA,YACAC,IAAAA,aACAC,IAAAA,WACAC,IAAAA,UACAC,KAAAA,SACGC,ybAIDC,aAAqBd,MAAAA,EAAAA,EAAcF,iBAAYD,EAC/CkB,aAAuBd,MAAAA,EAAAA,EAAgBF,iBAAYF,EACnDmB,aAAwBd,MAAAA,EAAAA,EAAiBJ,iBAAYD,EACrDoB,aAAsBd,MAAAA,EAAAA,EAAeJ,iBAAYF,EAEjDqB,aAAoBX,MAAAA,EAAAA,EAAaF,iBAAWD,EAC5Ce,aAAsBX,MAAAA,EAAAA,EAAeF,iBAAWF,EAChDgB,aAAuBX,MAAAA,EAAAA,EAAgBJ,iBAAWD,EAClDiB,aAAqBX,MAAAA,EAAAA,EAAcJ,iBAAWF,EAE9CkB,IACDzC,GAA+B,iBAAZA,GAAoC,SAAZA,GAAkC,eAAZA,SAE/D0C,gBACH5C,qCAEOkC,QACHF,UACIa,EACIb,EACAc,UAAOC,IACP7C,EAAU8C,gBAAcF,UAAQ,UAAW5C,GAAW,KACzC,WAAbD,EAAwB+C,gBAAcF,UAAQ,WAAY7C,GAAY,KAC1D,MAAZc,EAAmBiC,gBAAcF,UAAQ,WAAYG,OAAOlC,IAAa,KACzEiC,gBAAcF,UAAQ,WAAY9B,GACpB,UAAdC,EAAwB+B,gBAAcF,UAAQ,YAAa7B,GAAa,KAExE+B,gBAAcE,UAAe,aAAcf,IAC3Ca,gBAAcE,UAAe,eAAgBd,IAC7CY,gBAAcE,UAAe,gBAAiBb,IAC9CW,gBAAcE,UAAe,cAAeZ,IAE5CU,gBAAcG,UAAc,YAAaZ,IACzCS,gBAAcG,UAAc,cAAeX,IAC3CQ,gBAAcG,UAAc,eAAgBV,IAC5CO,gBAAcG,UAAc,aAAcT,IAE1CC,GAAW,KAAOK,gBAAcF,UAAQ,gBAAiB3C,GACzDwC,GAAW,KAAOK,gBAAcF,UAAQ,WAAY1C,GACpDuC,GAAW,KAAOK,gBAAcF,UAAQ,aAAcvC,GACtDoC,GAAW,KAAOK,gBAAcF,UAAQ,iBAAkBtC,GAC5C,MAAdF,EACM0C,gBAAcF,UAAQ,aAAcG,OAAO3C,IAC3C,KACM,MAAZD,EAAmB2C,gBAAcF,UAAQ,WAAYG,OAAO5C,IAAa,KAEzE2C,gBAAcF,UAAQ,WAAYrC,GAClCuC,gBAAcF,UAAQ,QAASpC,GAC/BsC,gBAAcF,UAAQ,SAAUnC,GAChCqC,gBAAcF,UAAQ,KAAMlC,GACX,SAAjBE,EACMkC,gBAAcF,UAAQ,eAAgBhC,GACtC,KACK,SAAXD,EAAoBmC,gBAAcF,UAAQ,SAAUjC,GAAU,YAC7DuC,EACTtD,IAAAA,IAEJmC"}

package/lib/new-components/box/box.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={box:"a09dcadd","position-absolute":"_2c8e3b30","position-fixed":"_8bae4d9e","position-relative":"b8a56665","position-sticky":"ac1fb233","tablet-position-absolute":"_1b62ab32","tablet-position-fixed":"_64c4c82f","tablet-position-relative":"_0a54ed39","tablet-position-sticky":"_3d6c1112","desktop-position-absolute":"_588ab5f7","desktop-position-fixed":"cafee9d3","desktop-position-relative":"_5543b61e","desktop-position-sticky":"b1c159cc","display-block":"ff9b5262","display-flex":"_42dd2b38","display-inline":"f7f27044","display-inlineBlock":"b1865bfc","display-inlineFlex":"_41fd8594","display-none":"_56d89280","tablet-display-block":"_17e08c5b","tablet-display-flex":"_3f5b2c55","tablet-display-inline":"_782df251","tablet-display-inlineBlock":"_5fd4b849","tablet-display-inlineFlex":"d23d32dc","tablet-display-none":"_204387f1","desktop-display-block":"_7294a740","desktop-display-flex":"c3786325","desktop-display-inline":"abe84853","desktop-display-inlineBlock":"_659a3c11","desktop-display-inlineFlex":"_66853d40","desktop-display-none":"bfb0df33","minWidth-0":"_0688f863","minWidth-xsmall":"cf3c7c4d","minWidth-small":"ab997cf2","minWidth-medium":"_42b40675","minWidth-large":"_820eddb2","minWidth-xlarge":"_9050c057","maxWidth-xsmall":"_45b5d9f3","maxWidth-small":"f6e39c80","maxWidth-medium":"_38e08e0f","maxWidth-large":"cfab6cbf","maxWidth-xlarge":"c64ac49c","maxWidth-full":"f2bdc36e","flexDirection-column":"ea553c4c","flexDirection-row":"_35c0f923","tablet-flexDirection-column":"ca082ff1","tablet-flexDirection-row":"_4699259f","desktop-flexDirection-column":"_7e15076c","desktop-flexDirection-row":"_301f1bcd","flexWrap-wrap":"ae1c1355","flexWrap-nowrap":"_10c2f307","flexShrink-0":"_0ea6f62c","flexGrow-0":"_0d73a72b","flexGrow-1":"f1d88ded","alignItems-flexStart":"_957aa705","alignItems-center":"c2380527","alignItems-flexEnd":"_5bd61684","alignItems-baseline":"_219c8788","tablet-alignItems-flexStart":"_7380ef94","tablet-alignItems-center":"e3bf5e08","tablet-alignItems-flexEnd":"_07d7b9df","tablet-alignItems-baseline":"a18d059c","desktop-alignItems-flexStart":"_02f174d6","desktop-alignItems-center":"_17cd4647","desktop-alignItems-flexEnd":"_7c8acb96","desktop-alignItems-baseline":"fbaa5c82","justifyContent-flexStart":"b36b35c0","justifyContent-center":"_28989ab3","justifyContent-flexEnd":"_2a0b33ed","justifyContent-spaceBetween":"_413854f1","tablet-justifyContent-flexStart":"bc886bc1","tablet-justifyContent-center":"_47e99e1f","tablet-justifyContent-flexEnd":"dcd5d747","tablet-justifyContent-spaceBetween":"f78dc694","desktop-justifyContent-flexStart":"_8af32248","desktop-justifyContent-center":"_76b92f39","desktop-justifyContent-flexEnd":"b10ab37c","desktop-justifyContent-spaceBetween":"df924fe5","overflow-hidden":"afcc1f85","overflow-auto":"b2daf955","overflow-visible":"_31cda334","overflow-scroll":"_48497a8e","width-full":"_14248731","height-full":"e0313003","bg-default":"beeba006","bg-aside":"_9765429c","bg-highlight":"f5a8d39a","bg-selected":"_376f320a","borderRadius-standard":"c811738c","borderRadius-full":"_8c612fbf","border-standard":"a8f6a58b"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={box:"_26c5201d","position-absolute":"_77c3d8d1","position-fixed":"_37cb98fb","position-relative":"df16028f","position-sticky":"_4205abac","tablet-position-absolute":"d6993b5e","tablet-position-fixed":"a015e0f5","tablet-position-relative":"_236dd3b1","tablet-position-sticky":"b7ac4837","desktop-position-absolute":"fd93a726","desktop-position-fixed":"_49228edc","desktop-position-relative":"d972b518","desktop-position-sticky":"b2a2baf3","display-block":"_22f1edd1","display-flex":"c23d2d6f","display-inline":"_5359896d","display-inlineBlock":"a54a41a6","display-inlineFlex":"d02f3d43","display-none":"_760c0710","tablet-display-block":"_64e2ebe6","tablet-display-flex":"_25274f78","tablet-display-inline":"_2077d063","tablet-display-inlineBlock":"aaed581f","tablet-display-inlineFlex":"_1d4a6eb5","tablet-display-none":"_66f24c78","desktop-display-block":"_145cca89","desktop-display-flex":"_1861c899","desktop-display-inline":"_96a720c8","desktop-display-inlineBlock":"_56acf5d5","desktop-display-inlineFlex":"_2a268e4b","desktop-display-none":"b4f30b9e","minWidth-0":"_0b071847","minWidth-xsmall":"_8b67f007","minWidth-small":"e3ec3474","minWidth-medium":"_5cccd4fc","minWidth-large":"_06eeac65","minWidth-xlarge":"ee1b6344","maxWidth-xsmall":"_2df097d0","maxWidth-small":"b771df2a","maxWidth-medium":"_00ad4e35","maxWidth-large":"_4a848dab","maxWidth-xlarge":"bf216b15","maxWidth-full":"a60a7855","flexDirection-column":"_4cf1b6c9","flexDirection-row":"e056fa5a","tablet-flexDirection-column":"b9aa8d99","tablet-flexDirection-row":"_2e8b3442","desktop-flexDirection-column":"_2162c612","desktop-flexDirection-row":"_279bf1e4","flexWrap-wrap":"_346d3a71","flexWrap-nowrap":"_786fd122","flexShrink-0":"_4b864fc2","flexGrow-0":"_795f552f","flexGrow-1":"a68bcd0f","alignItems-flexStart":"_34e24973","alignItems-center":"_648380f4","alignItems-flexEnd":"_18b4e1d6","alignItems-baseline":"_805c1b65","tablet-alignItems-flexStart":"fd4006c2","tablet-alignItems-center":"c3ba10a7","tablet-alignItems-flexEnd":"_984cd304","tablet-alignItems-baseline":"_696cc167","desktop-alignItems-flexStart":"_74133d54","desktop-alignItems-center":"_92ab46df","desktop-alignItems-flexEnd":"_177026d9","desktop-alignItems-baseline":"ebd2f31f","justifyContent-flexStart":"_4969235b","justifyContent-center":"_9594db58","justifyContent-flexEnd":"_6789fdd3","justifyContent-spaceAround":"b9902d94","justifyContent-spaceBetween":"_3c3ae41b","justifyContent-spaceEvenly":"_8dce8767","tablet-justifyContent-flexStart":"_6bd82354","tablet-justifyContent-center":"_3044c29a","tablet-justifyContent-flexEnd":"_13da8745","tablet-justifyContent-spaceAround":"_981fa9c8","tablet-justifyContent-spaceBetween":"d34811a6","tablet-justifyContent-spaceEvenly":"_53e07124","desktop-justifyContent-flexStart":"e709f277","desktop-justifyContent-center":"abc87cc4","desktop-justifyContent-flexEnd":"ce410292","desktop-justifyContent-spaceBetween":"_5ab1bc04","overflow-hidden":"_11a684c0","overflow-auto":"_2c024f85","overflow-visible":"_4d4892bd","overflow-scroll":"_22ffbb40","width-full":"_330d9b0b","height-full":"fb8deb05","bg-default":"_133f5c00","bg-aside":"b2be7ffe","bg-highlight":"a45e67ff","bg-selected":"b90226b5","borderRadius-standard":"_6e988219","borderRadius-full":"_14cf204e","border-primary":"a710cfdd","border-secondary":"_52263feb","border-tertiary":"_546ec3ef","textAlign-start":"_7fa90cb9","textAlign-center":"_54c80396","textAlign-end":"e4b1ea49","textAlign-justify":"_0eecd510","tablet-textAlign-start":"a309e75d","tablet-textAlign-center":"_67fb1a07","tablet-textAlign-end":"_0fa851ec","tablet-textAlign-justify":"_585a0e34","desktop-textAlign-start":"_5f909690","desktop-textAlign-center":"_13e03993","desktop-textAlign-end":"f142a1cb","desktop-textAlign-justify":"_2bba79a9"};
 //# sourceMappingURL=box.module.css.js.map

package/lib/new-components/button/button.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import type { BaseButtonProps } from '../base-button';
+declare type NativeButtonProps = Omit<React.AllHTMLAttributes<HTMLButtonElement>, 'aria-disabled' | 'className' | keyof BaseButtonProps>;
+export declare type ButtonProps = NativeButtonProps & BaseButtonProps & {
+    type?: 'button' | 'submit' | 'reset';
+    exceptionallySetClassName?: string;
+};
+/**
+ * A semantic button that also looks like a button, and provides all the necessary visual variants.
+ * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
+ *
+ * 🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)
+ *
+ * @see ButtonLink
+ */
+export declare const Button: React.ForwardRefExoticComponent<(Pick<React.AllHTMLAttributes<HTMLButtonElement>, "aria-label" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    variant: "primary" | "secondary" | "tertiary" | "quaternary";
+    tone?: "normal" | "destructive" | undefined;
+    size?: "normal" | "small" | "large" | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    tooltip?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | (() => React.ReactNode) | null | undefined;
+} & {
+    icon: React.ReactChild;
+    'aria-label': string;
+    children?: undefined;
+    startIcon?: undefined;
+    endIcon?: undefined;
+} & {
+    type?: "button" | "submit" | "reset" | undefined;
+    exceptionallySetClassName?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>) | (Pick<React.AllHTMLAttributes<HTMLButtonElement>, "aria-label" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    variant: "primary" | "secondary" | "tertiary" | "quaternary";
+    tone?: "normal" | "destructive" | undefined;
+    size?: "normal" | "small" | "large" | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    tooltip?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | (() => React.ReactNode) | null | undefined;
+} & {
+    children: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal;
+    startIcon?: string | number | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
+    endIcon?: string | number | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
+    icon?: undefined;
+} & {
+    type?: "button" | "submit" | "reset" | undefined;
+    exceptionallySetClassName?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>)>;
+export {};

package/lib/new-components/button/button.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=require("../base-button/base-button.js");exports.Button=t.forwardRef((function(o,r){var s=o.variant,i=o.tone,n=void 0===i?"normal":i,l=o.size,u=void 0===l?"normal":l,b=o.type,d=void 0===b?"button":b,p=o.disabled,v=void 0!==p&&p,c=o.exceptionallySetClassName,y=e.objectWithoutPropertiesLoose(o,["variant","tone","size","type","disabled","exceptionallySetClassName"]);return t.createElement(a.BaseButton,Object.assign({},y,{as:"button",ref:r,variant:s,tone:n,size:u,type:d,disabled:v,exceptionallySetClassName:c}))}));
+//# sourceMappingURL=button.js.map

package/lib/new-components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../../src/new-components/button/button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseButton } from '../base-button'\nimport type { BaseButtonProps } from '../base-button'\n\ntype NativeButtonProps = Omit<\n    React.AllHTMLAttributes<HTMLButtonElement>,\n    'aria-disabled' | 'className' | keyof BaseButtonProps\n>\n\nexport type ButtonProps = NativeButtonProps &\n    BaseButtonProps & {\n        type?: 'button' | 'submit' | 'reset'\n        exceptionallySetClassName?: string\n    }\n\n/**\n * A semantic button that also looks like a button, and provides all the necessary visual variants.\n * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n *\n * 🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)\n *\n * @see ButtonLink\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        type = 'button',\n        disabled = false,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseButton\n            {...props}\n            as=\"button\"\n            ref={ref}\n            variant={variant}\n            tone={tone}\n            size={size}\n            type={type}\n            disabled={disabled}\n            exceptionallySetClassName={exceptionallySetClassName}\n        />\n    )\n})\n"],"names":["React","ref","variant","tone","size","type","disabled","exceptionallySetClassName","props","BaseButton","as"],"mappings":"8MAuBsBA,cAAiD,WAUnEC,OARIC,IAAAA,YACAC,KAAAA,aAAO,eACPC,KAAAA,aAAO,eACPC,KAAAA,aAAO,eACPC,SAAAA,gBACAC,IAAAA,0BACGC,mHAKHR,gBAACS,8BACOD,GACJE,GAAG,SACHT,IAAKA,EACLC,QAASA,EACTC,KAAMA,EACNC,KAAMA,EACNC,KAAMA,EACNC,SAAUA,EACVC,0BAA2BA"}

package/lib/new-components/button/button.test.d.ts

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

package/lib/new-components/button/index.d.ts

@@ -0,0 +1 @@
+export * from './button';

package/lib/new-components/button-link/button-link-story-wrapper.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ButtonLinkProps } from './button-link';
+declare function ButtonLinkStoryWrapper(props: ButtonLinkProps): JSX.Element;
+declare namespace ButtonLinkStoryWrapper {
+    var displayName: string;
+}
+export { ButtonLinkStoryWrapper as ButtonLink };