@doist/reactist 15.3.0 → 16.0.0

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 FocusLock from 'react-focus-lock'\n\nimport { polymorphicComponent } from '../../utils/polymorphism'\n\n//\n// Reactist menu is a thin wrapper around Ariakit'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 Ariakit from 'ariakit/menu'\nimport { Portal } from 'ariakit/portal'\n\nimport './menu.less'\nimport { useMenuItem } from 'ariakit/menu'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n    state: Ariakit.MenuState\n    handleItemSelect: (value: string | null | undefined) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Ariakit 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<Ariakit.MenuStateProps, '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. Note that if you are relying on the `[role='menu']`\n * attribute to style the menu list, it is applied a `menubar` role instead in Safari.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const state = Ariakit.useMenuState({ focusLoop: true, gutter: 8, shift: 4, ...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<Ariakit.MenuButtonProps, 'state' | 'className' | 'as'>\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 { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuButton\n            {...props}\n            state={state}\n            ref={ref}\n            className={classNames('reactist_menubutton', exceptionallySetClassName)}\n        />\n    )\n})\n\n//\n// MenuList\n//\n\ntype MenuListProps = Omit<Ariakit.MenuProps, 'state' | '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 { state } = React.useContext(MenuContext)\n\n    return state.visible ? (\n        <Portal preserveTabOrder>\n            <FocusLock returnFocus>\n                <Ariakit.Menu\n                    {...props}\n                    state={state}\n                    ref={ref}\n                    className={classNames('reactist_menulist', exceptionallySetClassName)}\n                />\n            </FocusLock>\n        </Portal>\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        as = 'button',\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        <Ariakit.MenuItem\n            {...props}\n            as={as}\n            state={state}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n            hideOnClick={false}\n        >\n            {children}\n        </Ariakit.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 },\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: string | null | undefined) {\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    const menuProps = useMenuItem({ state })\n\n    return (\n        <Menu onItemSelect={handleSubItemSelect}>\n            {React.cloneElement(button as React.ReactElement, {\n                ...menuProps,\n                className: classNames(menuProps.className, 'reactist_submenu_button'),\n                ref,\n            })}\n            {list}\n        </Menu>\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 MenuGroup(\n    { label, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuGroup {...props} ref={ref} state={state} className={exceptionallySetClassName}>\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </Ariakit.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","Ariakit","focusLoop","gutter","shift","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","MenuList","visible","Portal","preserveTabOrder","FocusLock","returnFocus","MenuItem","onSelect","hideOnSelect","onClick","as","hide","handleClick","event","shouldClose","defaultPrevented","undefined","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","menuProps","useMenuItem","MenuGroup","label","role"],"mappings":"wmBA6BMA,EAAcC,gBAMhB,IA6BJ,SAASC,SAAKC,SAAEA,EAAFC,aAAYA,KAAiBC,iCACvC,MAAMC,EAAQC,gCAAuBC,WAAW,EAAMC,OAAQ,EAAGC,MAAO,GAAML,IAExEM,EAAmBV,eACrB,SAA0BW,GAClBR,GAAcA,EAAaQ,KAEnC,CAACR,IAGCQ,EAA0BX,UAC5B,MACIK,MAAAA,EACAK,iBAAAA,IAEJ,CAACL,EAAOK,IAGZ,OAAOV,gBAACD,EAAYa,UAASD,MAAOA,GAAQT,SAY1CW,EAAaC,wBAAgD,WAE/DC,OADAC,0BAAEA,KAA8BZ,iCAGhC,MAAMC,MAAEA,GAAUL,aAAiBD,GACnC,OACIC,gBAACM,gDACOF,OACJC,MAAOA,EACPU,IAAKA,EACLE,UAAWC,EAAW,sBAAuBF,SAcnDG,EAAWL,wBAA2C,WAExDC,OADAC,0BAAEA,KAA8BZ,iCAGhC,MAAMC,MAAEA,GAAUL,aAAiBD,GAEnC,OAAOM,EAAMe,QACTpB,gBAACqB,UAAOC,qBACJtB,gBAACuB,GAAUC,gBACPxB,gBAACM,0CACOF,OACJC,MAAOA,EACPU,IAAKA,EACLE,UAAWC,EAAW,oBAAqBF,QAIvD,QA8DFS,EAAWX,wBAA8C,WAW3DC,OAVAJ,MACIA,EADJT,SAEIA,EAFJwB,SAGIA,EAHJC,aAIIA,GAAe,EAJnBC,QAKIA,EALJZ,0BAMIA,EANJa,GAOIA,EAAK,YACFzB,iCAIP,MAAMM,iBAAEA,EAAFL,MAAoBA,GAAUL,aAAiBD,IAC/C+B,KAAEA,GAASzB,EAEX0B,EAAc/B,eAChB,SAAqBgC,SACjBJ,GAAAA,EAAUI,GACV,MAEMC,GAAiC,KADnCP,IAAaM,EAAME,iBAAmBR,SAAaS,IACPR,EAChDjB,EAAiBC,GACbsB,GAAaH,MAErB,CAACJ,EAAUE,EAASlB,EAAkBiB,EAAcG,EAAMnB,IAG9D,OACIX,gBAACM,8CACOF,OACJyB,GAAIA,EACJxB,MAAOA,EACPU,IAAKA,EACLa,QAASG,EACTd,UAAWD,EACXoB,aAAa,IAEZlC,MAgCPmC,EAAUrC,cAAkD,UAC9DE,SAAEA,EAAFC,aAAYA,GACZY,GAEA,MAAQL,iBAAkB4B,EAApBjC,MAA0CA,GAAUL,aAAiBD,IACnE+B,KAAMS,GAAmBlC,EAE3BmC,EAAsBxC,eACxB,SAA6BW,GACrBR,GAAcA,EAAaQ,GAC/B2B,EAAqB3B,GACrB4B,MAEJ,CAACA,EAAgBD,EAAsBnC,KAGpCsC,EAAQC,GAAQ1C,WAAe2C,QAAQzC,GAExC0C,EAAYC,cAAY,CAAExC,MAAAA,IAEhC,OACIL,gBAACC,GAAKE,aAAcqC,GACfxC,eAAmByC,qCACbG,OACH3B,UAAWC,EAAW0B,EAAU3B,UAAW,2BAC3CF,IAAAA,KAEH2B,MAsBPI,EAAYhC,wBAA4C,WAE1DC,OADAgC,MAAEA,EAAF7C,SAASA,EAATc,0BAAmBA,KAA8BZ,iCAGjD,MAAMC,MAAEA,GAAUL,aAAiBD,GACnC,OACIC,gBAACM,+CAAsBF,OAAOW,IAAKA,EAAKV,MAAOA,EAAOY,UAAWD,IAC5D+B,EACG/C,uBAAKgD,KAAK,eAAe/B,UAAU,6BAC9B8B,GAEL,KACH7C"}
+{"version":3,"file":"menu.js","sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\n\nimport { polymorphicComponent } from '../../utils/polymorphism'\n\n//\n// Reactist menu is a thin wrapper around Ariakit'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 Ariakit from 'ariakit/menu'\nimport { Portal } from 'ariakit/portal'\n\nimport './menu.less'\nimport { useMenuItem } from 'ariakit/menu'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n    state: Ariakit.MenuState\n    handleItemSelect: (value: string | null | undefined) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Ariakit 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<Ariakit.MenuStateProps, '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. Note that if you are relying on the `[role='menu']`\n * attribute to style the menu list, it is applied a `menubar` role instead in Safari.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const state = Ariakit.useMenuState({ focusLoop: true, gutter: 8, shift: 4, ...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<Ariakit.MenuButtonProps, 'state' | 'className' | 'as'>\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 { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuButton\n            {...props}\n            state={state}\n            ref={ref}\n            className={classNames('reactist_menubutton', exceptionallySetClassName)}\n        />\n    )\n})\n\n//\n// MenuList\n//\n\ntype MenuListProps = Omit<Ariakit.MenuProps, 'state' | '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 { state } = React.useContext(MenuContext)\n\n    return state.visible ? (\n        <Portal preserveTabOrder>\n            <FocusLock returnFocus>\n                <Ariakit.Menu\n                    {...props}\n                    state={state}\n                    ref={ref}\n                    className={classNames('reactist_menulist', exceptionallySetClassName)}\n                />\n            </FocusLock>\n        </Portal>\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        as = 'button',\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        <Ariakit.MenuItem\n            {...props}\n            as={as}\n            state={state}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n            hideOnClick={false}\n        >\n            {children}\n        </Ariakit.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 },\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: string | null | undefined) {\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    const menuProps = useMenuItem({ state })\n\n    return (\n        <Menu onItemSelect={handleSubItemSelect}>\n            {React.cloneElement(button as React.ReactElement, {\n                ...menuProps,\n                className: classNames(menuProps.className, 'reactist_submenu_button'),\n                ref,\n            })}\n            {list}\n        </Menu>\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 MenuGroup(\n    { label, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuGroup {...props} ref={ref} state={state} className={exceptionallySetClassName}>\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </Ariakit.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","Ariakit","focusLoop","gutter","shift","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","MenuList","visible","Portal","preserveTabOrder","FocusLock","returnFocus","MenuItem","onSelect","hideOnSelect","onClick","as","hide","handleClick","event","shouldClose","defaultPrevented","undefined","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","menuProps","useMenuItem","MenuGroup","label","role"],"mappings":"+mBA6BMA,EAAcC,gBAMhB,IA6BJ,SAASC,SAAKC,SAAEA,EAAFC,aAAYA,KAAiBC,iCACvC,MAAMC,EAAQC,gCAAuBC,WAAW,EAAMC,OAAQ,EAAGC,MAAO,GAAML,IAExEM,EAAmBV,eACrB,SAA0BW,GAClBR,GAAcA,EAAaQ,KAEnC,CAACR,IAGCQ,EAA0BX,UAC5B,MACIK,MAAAA,EACAK,iBAAAA,IAEJ,CAACL,EAAOK,IAGZ,OAAOV,gBAACD,EAAYa,UAASD,MAAOA,GAAQT,SAY1CW,EAAaC,wBAAgD,WAE/DC,OADAC,0BAAEA,KAA8BZ,iCAGhC,MAAMC,MAAEA,GAAUL,aAAiBD,GACnC,OACIC,gBAACM,gDACOF,OACJC,MAAOA,EACPU,IAAKA,EACLE,UAAWC,EAAW,sBAAuBF,SAcnDG,EAAWL,wBAA2C,WAExDC,OADAC,0BAAEA,KAA8BZ,iCAGhC,MAAMC,MAAEA,GAAUL,aAAiBD,GAEnC,OAAOM,EAAMe,QACTpB,gBAACqB,UAAOC,qBACJtB,gBAACuB,GAAUC,gBACPxB,gBAACM,0CACOF,OACJC,MAAOA,EACPU,IAAKA,EACLE,UAAWC,EAAW,oBAAqBF,QAIvD,QA8DFS,EAAWX,wBAA8C,WAW3DC,OAVAJ,MACIA,EADJT,SAEIA,EAFJwB,SAGIA,EAHJC,aAIIA,GAAe,EAJnBC,QAKIA,EALJZ,0BAMIA,EANJa,GAOIA,EAAK,YACFzB,iCAIP,MAAMM,iBAAEA,EAAFL,MAAoBA,GAAUL,aAAiBD,IAC/C+B,KAAEA,GAASzB,EAEX0B,EAAc/B,eAChB,SAAqBgC,SACjBJ,GAAAA,EAAUI,GACV,MAEMC,GAAiC,KADnCP,IAAaM,EAAME,iBAAmBR,SAAaS,IACPR,EAChDjB,EAAiBC,GACbsB,GAAaH,MAErB,CAACJ,EAAUE,EAASlB,EAAkBiB,EAAcG,EAAMnB,IAG9D,OACIX,gBAACM,8CACOF,OACJyB,GAAIA,EACJxB,MAAOA,EACPU,IAAKA,EACLa,QAASG,EACTd,UAAWD,EACXoB,aAAa,IAEZlC,MAgCPmC,EAAUrC,cAAkD,UAC9DE,SAAEA,EAAFC,aAAYA,GACZY,GAEA,MAAQL,iBAAkB4B,EAApBjC,MAA0CA,GAAUL,aAAiBD,IACnE+B,KAAMS,GAAmBlC,EAE3BmC,EAAsBxC,eACxB,SAA6BW,GACrBR,GAAcA,EAAaQ,GAC/B2B,EAAqB3B,GACrB4B,MAEJ,CAACA,EAAgBD,EAAsBnC,KAGpCsC,EAAQC,GAAQ1C,WAAe2C,QAAQzC,GAExC0C,EAAYC,cAAY,CAAExC,MAAAA,IAEhC,OACIL,gBAACC,GAAKE,aAAcqC,GACfxC,eAAmByC,qCACbG,OACH3B,UAAWC,EAAW0B,EAAU3B,UAAW,2BAC3CF,IAAAA,KAEH2B,MAsBPI,EAAYhC,wBAA4C,WAE1DC,OADAgC,MAAEA,EAAF7C,SAASA,EAATc,0BAAmBA,KAA8BZ,iCAGjD,MAAMC,MAAEA,GAAUL,aAAiBD,GACnC,OACIC,gBAACM,+CAAsBF,OAAOW,IAAKA,EAAKV,MAAOA,EAAOY,UAAWD,IAC5D+B,EACG/C,uBAAKgD,KAAK,eAAe/B,UAAU,6BAC9B8B,GAEL,KACH7C"}

package/lib/components/progress-bar/progress-bar.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,a=require("react"),r=(e=require("classnames"))&&"object"==typeof e&&"default"in e?e.default:e,t=require("../../new-components/hidden-visually/hidden-visually.js");function s({fillPercentage:e=0,className:s,"aria-valuetext":l}){const i=r("reactist_progress_bar",s),n=e<0?0:e>100?100:e;return a.createElement("div",{className:i},a.createElement("div",{className:"inner",style:{width:n+"%"}}),a.createElement(t.HiddenVisually,null,a.createElement("progress",{value:n,max:100,"aria-valuetext":null!=l?l:void 0})))}s.displayName="ProgressBar",exports.ProgressBar=s;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),a=(e(r),e(require("classnames"))),t=require("../../new-components/hidden-visually/hidden-visually.js");function s({fillPercentage:e=0,className:s,"aria-valuetext":l}){const n=a("reactist_progress_bar",s),i=e<0?0:e>100?100:e;return r.createElement("div",{className:n},r.createElement("div",{className:"inner",style:{width:i+"%"}}),r.createElement(t.HiddenVisually,null,r.createElement("progress",{value:i,max:100,"aria-valuetext":null!=l?l:void 0})))}s.displayName="ProgressBar",exports.ProgressBar=s;
 //# sourceMappingURL=progress-bar.js.map

package/lib/components/progress-bar/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { HiddenVisually } from '../../new-components/hidden-visually'\nimport classNames from 'classnames'\n\nimport './progress-bar.less'\n\ntype Props = {\n    /** Additional css class applied to the progress bar. */\n    className?: string\n    /** How much of the progress bar should be filled. Number between 0 and 100 inclusive. */\n    fillPercentage?: number\n    /** Defines the human readable text alternative for assitive technologies. */\n    'aria-valuetext'?: string\n}\nfunction ProgressBar({ fillPercentage = 0, className, 'aria-valuetext': ariaValuetext }: Props) {\n    const finalClassName = classNames('reactist_progress_bar', className)\n    const width = fillPercentage < 0 ? 0 : fillPercentage > 100 ? 100 : fillPercentage\n    return (\n        <div className={finalClassName}>\n            <div className=\"inner\" style={{ width: `${width}%` }} />\n            <HiddenVisually>\n                <progress value={width} max={100} aria-valuetext={ariaValuetext ?? undefined} />\n            </HiddenVisually>\n        </div>\n    )\n}\nProgressBar.displayName = 'ProgressBar'\n\nexport { ProgressBar }\n"],"names":["ProgressBar","fillPercentage","className","aria-valuetext","ariaValuetext","finalClassName","classNames","width","React","style","HiddenVisually","value","max","undefined","displayName"],"mappings":"6OAcA,SAASA,GAAYC,eAAEA,EAAiB,EAAnBC,UAAsBA,EAAWC,iBAAkBC,IACpE,MAAMC,EAAiBC,EAAW,wBAAyBJ,GACrDK,EAAQN,EAAiB,EAAI,EAAIA,EAAiB,IAAM,IAAMA,EACpE,OACIO,uBAAKN,UAAWG,GACZG,uBAAKN,UAAU,QAAQO,MAAO,CAAEF,MAAUA,SAC1CC,gBAACE,sBACGF,4BAAUG,MAAOJ,EAAOK,IAAK,2BAAqBR,EAAAA,OAAiBS,MAKnFb,EAAYc,YAAc"}
+{"version":3,"file":"progress-bar.js","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { HiddenVisually } from '../../new-components/hidden-visually'\nimport classNames from 'classnames'\n\nimport './progress-bar.less'\n\ntype Props = {\n    /** Additional css class applied to the progress bar. */\n    className?: string\n    /** How much of the progress bar should be filled. Number between 0 and 100 inclusive. */\n    fillPercentage?: number\n    /** Defines the human readable text alternative for assitive technologies. */\n    'aria-valuetext'?: string\n}\nfunction ProgressBar({ fillPercentage = 0, className, 'aria-valuetext': ariaValuetext }: Props) {\n    const finalClassName = classNames('reactist_progress_bar', className)\n    const width = fillPercentage < 0 ? 0 : fillPercentage > 100 ? 100 : fillPercentage\n    return (\n        <div className={finalClassName}>\n            <div className=\"inner\" style={{ width: `${width}%` }} />\n            <HiddenVisually>\n                <progress value={width} max={100} aria-valuetext={ariaValuetext ?? undefined} />\n            </HiddenVisually>\n        </div>\n    )\n}\nProgressBar.displayName = 'ProgressBar'\n\nexport { ProgressBar }\n"],"names":["ProgressBar","fillPercentage","className","aria-valuetext","ariaValuetext","finalClassName","classNames","width","React","style","HiddenVisually","value","max","undefined","displayName"],"mappings":"wQAcA,SAASA,GAAYC,eAAEA,EAAiB,EAAnBC,UAAsBA,EAAWC,iBAAkBC,IACpE,MAAMC,EAAiBC,EAAW,wBAAyBJ,GACrDK,EAAQN,EAAiB,EAAI,EAAIA,EAAiB,IAAM,IAAMA,EACpE,OACIO,uBAAKN,UAAWG,GACZG,uBAAKN,UAAU,QAAQO,MAAO,CAAEF,MAAUA,SAC1CC,gBAACE,sBACGF,4BAAUG,MAAOJ,EAAOK,IAAK,2BAAqBR,EAAAA,OAAiBS,MAKnFb,EAAYc,YAAc"}

package/lib/components/tooltip/tooltip.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("../../_virtual/_rollupPluginBabelHelpers.js"),o=require("react"),r=(e=require("classnames"))&&"object"==typeof e&&"default"in e?e.default:e,n=require("ariakit/tooltip");const c=["children","content","position","gapSize","className"];exports.HIDE_DELAY=100,exports.SHOW_DELAY=500,exports.Tooltip=function(e){let{children:l,content:s,position:u="top",gapSize:a=3,className:i}=e,p=t.objectWithoutProperties(e,c);const f=function(e){const r=n.useTooltipState(e),c=function(){const e=o.useRef(),t=o.useCallback((function(){null!=e.current&&clearTimeout(e.current)}),[]);return o.useEffect(()=>t,[t]),o.useCallback((function(o,r){return()=>{t(),e.current=setTimeout(o,r)}}),[t])}();return o.useMemo(()=>t.objectSpread2(t.objectSpread2({},r),{},{show:c(()=>r.show(),500),hide:c(()=>r.hide(),100)}),[c,r])}({placement:u,gutter:a}),d=o.Children.only(l);if(!s||!d)return d;if("string"==typeof d.ref)throw new Error("Tooltip: String refs cannot be used as they cannot be forwarded");return o.createElement(o.Fragment,null,o.createElement(n.TooltipAnchor,{state:f,ref:d.ref,onFocus:function(e){var t;e.currentTarget.addEventListener("keyup",(function(e){const t=e.key;"Escape"!==t&&"Enter"!==t&&"Space"!==t&&f.show()}),{once:!0}),e.preventDefault(),null==d||null==(t=d.props)||null==t.onFocus||t.onFocus(e)}},e=>o.cloneElement(d,t.objectSpread2(t.objectSpread2({},e),d.props))),f.visible?o.createElement(n.Tooltip,t.objectSpread2(t.objectSpread2({},p),{},{state:f,className:r("reactist_tooltip",i)}),"function"==typeof s?s():s):null)};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),o=(e(r),e(require("classnames"))),n=require("ariakit/tooltip");const c=["children","content","position","gapSize","className"];exports.HIDE_DELAY=100,exports.SHOW_DELAY=500,exports.Tooltip=function(e){let{children:u,content:l,position:s="top",gapSize:i=3,className:a}=e,p=t.objectWithoutProperties(e,c);const f=function(e){const o=n.useTooltipState(e),c=function(){const e=r.useRef(),t=r.useCallback((function(){null!=e.current&&clearTimeout(e.current)}),[]);return r.useEffect(()=>t,[t]),r.useCallback((function(r,o){return()=>{t(),e.current=setTimeout(r,o)}}),[t])}();return r.useMemo(()=>t.objectSpread2(t.objectSpread2({},o),{},{show:c(()=>o.show(),500),hide:c(()=>o.hide(),100)}),[c,o])}({placement:s,gutter:i}),d=r.Children.only(u);if(!l||!d)return d;if("string"==typeof d.ref)throw new Error("Tooltip: String refs cannot be used as they cannot be forwarded");return r.createElement(r.Fragment,null,r.createElement(n.TooltipAnchor,{state:f,ref:d.ref,onFocus:function(e){var t;e.currentTarget.addEventListener("keyup",(function(e){const t=e.key;"Escape"!==t&&"Enter"!==t&&"Space"!==t&&f.show()}),{once:!0}),e.preventDefault(),null==d||null==(t=d.props)||null==t.onFocus||t.onFocus(e)}},e=>r.cloneElement(d,t.objectSpread2(t.objectSpread2({},e),d.props))),f.visible?r.createElement(n.Tooltip,t.objectSpread2(t.objectSpread2({},p),{},{state:f,className:o("reactist_tooltip",a)}),"function"==typeof l?l():l):null)};
 //# sourceMappingURL=tooltip.js.map

package/lib/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport {\n    useTooltipState as useAriakitTooltipState,\n    TooltipStateProps as AriakitTooltipStateProps,\n    Tooltip as AriakitTooltip,\n    TooltipProps as AriakitTooltipProps,\n    TooltipAnchor,\n    TooltipAnchorProps,\n} from 'ariakit/tooltip'\nimport type { PopoverState } from 'ariakit/popover'\n\nimport './tooltip.less'\n\ntype TooltipProps = Omit<AriakitTooltipProps, 'children' | 'state'> & {\n    children: React.ReactNode\n    content: React.ReactNode | (() => React.ReactNode)\n    position?: PopoverState['placement']\n    gapSize?: number\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: AriakitTooltipStateProps) {\n    const tooltipState = useAriakitTooltipState(initialState)\n    const delay = useDelay()\n    return React.useMemo(\n        () => ({\n            ...tooltipState,\n            show: delay(() => tooltipState.show(), SHOW_DELAY),\n            hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n        }),\n        [delay, tooltipState],\n    )\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    className,\n    ...props\n}: TooltipProps) {\n    const state = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n    )\n\n    if (!content || !child) {\n        return child\n    }\n\n    if (typeof child.ref === 'string') {\n        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n    }\n\n    /**\n     * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n     * tooltips from showing when the trigger element is focused back after a popover or dialog that\n     * it opened was closed. See link below for more details.\n     * @see https://github.com/reakit/reakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n        // If focus is not followed by a key up event, does it mean that it's not\n        // an intentional keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of reakit:\n        // https://github.com/reakit/reakit/issues/750\n        function handleKeyUp(e: Event) {\n            const eventKey = (e as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                state.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        // Prevent tooltip.show from being called by TooltipReference\n        event.preventDefault()\n        child?.props?.onFocus?.(event)\n    }\n\n    return (\n        <>\n            <TooltipAnchor state={state} ref={child.ref} onFocus={handleFocus}>\n                {(anchorProps: TooltipAnchorProps) => {\n                    // Let child props override anchor props so user can specify attributes like tabIndex\n                    // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems\n                    // by applying the replacement component/element twice\n                    return React.cloneElement(child, { ...anchorProps, ...child.props })\n                }}\n            </TooltipAnchor>\n            {state.visible ? (\n                <AriakitTooltip\n                    {...props}\n                    state={state}\n                    className={classNames('reactist_tooltip', className)}\n                >\n                    {typeof content === 'function' ? content() : content}\n                </AriakitTooltip>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n    const clearTimeouts = React.useCallback(function clearTimeouts() {\n        if (timeoutRef.current != null) {\n            clearTimeout(timeoutRef.current)\n        }\n    }, [])\n\n    // Runs clearTimeouts when the component is unmounted\n    React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n    return React.useCallback(\n        function delay(fn: () => void, delay: number) {\n            return () => {\n                clearTimeouts()\n                timeoutRef.current = setTimeout(fn, delay)\n            }\n        },\n        [clearTimeouts],\n    )\n}\n"],"names":["children","content","position","gapSize","className","props","state","initialState","tooltipState","useAriakitTooltipState","delay","timeoutRef","React","clearTimeouts","current","clearTimeout","fn","setTimeout","useDelay","show","hide","useDelayedTooltipState","placement","gutter","child","only","ref","Error","TooltipAnchor","onFocus","event","currentTarget","addEventListener","e","eventKey","key","once","preventDefault","anchorProps","visible","AriakitTooltip","classNames"],"mappings":"iVAwB0B,uBADA,oBAgB1B,gBAAiBA,SACbA,EADaC,QAEbA,EAFaC,SAGbA,EAAW,MAHEC,QAIbA,EAAU,EAJGC,UAKbA,KACGC,iCAEH,MAAMC,EArBV,SAAgCC,GAC5B,MAAMC,EAAeC,kBAAuBF,GACtCG,EAgGV,WACI,MAAMC,EAAaC,WAEbC,EAAgBD,eAAkB,WACV,MAAtBD,EAAWG,SACXC,aAAaJ,EAAWG,WAE7B,IAKH,OAFAF,YAAgB,IAAMC,EAAe,CAACA,IAE/BD,eACH,SAAeI,EAAgBN,GAC3B,MAAO,KACHG,IACAF,EAAWG,QAAUG,WAAWD,EAAIN,MAG5C,CAACG,IAnHSK,GACd,OAAON,UACH,uCACOJ,OACHW,KAAMT,EAAM,IAAMF,EAAaW,OATjB,KAUdC,KAAMV,EAAM,IAAMF,EAAaY,OATjB,OAWlB,CAACV,EAAOF,IAYEa,CAAuB,CAAEC,UAAWpB,EAAUqB,OAAQpB,IAE9DqB,EAAQZ,WAAea,KACzBzB,GAGJ,IAAKC,IAAYuB,EACb,OAAOA,EAGX,GAAyB,iBAAdA,EAAME,IACb,MAAM,IAAIC,MAAM,mEA0BpB,OACIf,gCACIA,gBAACgB,iBAActB,MAAOA,EAAOoB,IAAKF,EAAME,IAAKG,QAnBrD,SAAqBC,SAWjBA,EAAMC,cAAcC,iBAAiB,SANrC,SAAqBC,GACjB,MAAMC,EAAYD,EAAoBE,IACrB,WAAbD,GAAsC,UAAbA,GAAqC,UAAbA,GACjD5B,EAAMa,SAG6C,CAAEiB,MAAM,IAEnEN,EAAMO,uBACNb,YAAAA,EAAOnB,gBAAOwB,WAAAA,QAAUC,KAMdQ,GAIS1B,eAAmBY,qCAAYc,GAAgBd,EAAMnB,SAGnEC,EAAMiC,QACH3B,gBAAC4B,6CACOnC,OACJC,MAAOA,EACPF,UAAWqC,EAAW,mBAAoBrC,KAEtB,mBAAZH,EAAyBA,IAAYA,GAEjD"}
+{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport {\n    useTooltipState as useAriakitTooltipState,\n    TooltipStateProps as AriakitTooltipStateProps,\n    Tooltip as AriakitTooltip,\n    TooltipProps as AriakitTooltipProps,\n    TooltipAnchor,\n    TooltipAnchorProps,\n} from 'ariakit/tooltip'\nimport type { PopoverState } from 'ariakit/popover'\n\nimport './tooltip.less'\n\ntype TooltipProps = Omit<AriakitTooltipProps, 'children' | 'state'> & {\n    children: React.ReactNode\n    content: React.ReactNode | (() => React.ReactNode)\n    position?: PopoverState['placement']\n    gapSize?: number\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: AriakitTooltipStateProps) {\n    const tooltipState = useAriakitTooltipState(initialState)\n    const delay = useDelay()\n    return React.useMemo(\n        () => ({\n            ...tooltipState,\n            show: delay(() => tooltipState.show(), SHOW_DELAY),\n            hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n        }),\n        [delay, tooltipState],\n    )\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    className,\n    ...props\n}: TooltipProps) {\n    const state = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n    )\n\n    if (!content || !child) {\n        return child\n    }\n\n    if (typeof child.ref === 'string') {\n        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n    }\n\n    /**\n     * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n     * tooltips from showing when the trigger element is focused back after a popover or dialog that\n     * it opened was closed. See link below for more details.\n     * @see https://github.com/reakit/reakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n        // If focus is not followed by a key up event, does it mean that it's not\n        // an intentional keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of reakit:\n        // https://github.com/reakit/reakit/issues/750\n        function handleKeyUp(e: Event) {\n            const eventKey = (e as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                state.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        // Prevent tooltip.show from being called by TooltipReference\n        event.preventDefault()\n        child?.props?.onFocus?.(event)\n    }\n\n    return (\n        <>\n            <TooltipAnchor state={state} ref={child.ref} onFocus={handleFocus}>\n                {(anchorProps: TooltipAnchorProps) => {\n                    // Let child props override anchor props so user can specify attributes like tabIndex\n                    // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems\n                    // by applying the replacement component/element twice\n                    return React.cloneElement(child, { ...anchorProps, ...child.props })\n                }}\n            </TooltipAnchor>\n            {state.visible ? (\n                <AriakitTooltip\n                    {...props}\n                    state={state}\n                    className={classNames('reactist_tooltip', className)}\n                >\n                    {typeof content === 'function' ? content() : content}\n                </AriakitTooltip>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n    const clearTimeouts = React.useCallback(function clearTimeouts() {\n        if (timeoutRef.current != null) {\n            clearTimeout(timeoutRef.current)\n        }\n    }, [])\n\n    // Runs clearTimeouts when the component is unmounted\n    React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n    return React.useCallback(\n        function delay(fn: () => void, delay: number) {\n            return () => {\n                clearTimeouts()\n                timeoutRef.current = setTimeout(fn, delay)\n            }\n        },\n        [clearTimeouts],\n    )\n}\n"],"names":["children","content","position","gapSize","className","props","state","initialState","tooltipState","useAriakitTooltipState","delay","timeoutRef","React","clearTimeouts","current","clearTimeout","fn","setTimeout","useDelay","show","hide","useDelayedTooltipState","placement","gutter","child","only","ref","Error","TooltipAnchor","onFocus","event","currentTarget","addEventListener","e","eventKey","key","once","preventDefault","anchorProps","visible","AriakitTooltip","classNames"],"mappings":"4WAwB0B,uBADA,oBAgB1B,gBAAiBA,SACbA,EADaC,QAEbA,EAFaC,SAGbA,EAAW,MAHEC,QAIbA,EAAU,EAJGC,UAKbA,KACGC,iCAEH,MAAMC,EArBV,SAAgCC,GAC5B,MAAMC,EAAeC,kBAAuBF,GACtCG,EAgGV,WACI,MAAMC,EAAaC,WAEbC,EAAgBD,eAAkB,WACV,MAAtBD,EAAWG,SACXC,aAAaJ,EAAWG,WAE7B,IAKH,OAFAF,YAAgB,IAAMC,EAAe,CAACA,IAE/BD,eACH,SAAeI,EAAgBN,GAC3B,MAAO,KACHG,IACAF,EAAWG,QAAUG,WAAWD,EAAIN,MAG5C,CAACG,IAnHSK,GACd,OAAON,UACH,uCACOJ,OACHW,KAAMT,EAAM,IAAMF,EAAaW,OATjB,KAUdC,KAAMV,EAAM,IAAMF,EAAaY,OATjB,OAWlB,CAACV,EAAOF,IAYEa,CAAuB,CAAEC,UAAWpB,EAAUqB,OAAQpB,IAE9DqB,EAAQZ,WAAea,KACzBzB,GAGJ,IAAKC,IAAYuB,EACb,OAAOA,EAGX,GAAyB,iBAAdA,EAAME,IACb,MAAM,IAAIC,MAAM,mEA0BpB,OACIf,gCACIA,gBAACgB,iBAActB,MAAOA,EAAOoB,IAAKF,EAAME,IAAKG,QAnBrD,SAAqBC,SAWjBA,EAAMC,cAAcC,iBAAiB,SANrC,SAAqBC,GACjB,MAAMC,EAAYD,EAAoBE,IACrB,WAAbD,GAAsC,UAAbA,GAAqC,UAAbA,GACjD5B,EAAMa,SAG6C,CAAEiB,MAAM,IAEnEN,EAAMO,uBACNb,YAAAA,EAAOnB,gBAAOwB,WAAAA,QAAUC,KAMdQ,GAIS1B,eAAmBY,qCAAYc,GAAgBd,EAAMnB,SAGnEC,EAAMiC,QACH3B,gBAAC4B,6CACOnC,OACJC,MAAOA,EACPF,UAAWqC,EAAW,mBAAoBrC,KAEtB,mBAAZH,EAAyBA,IAAYA,GAEjD"}

package/lib/index.d.ts

@@ -9,6 +9,7 @@ export * from './new-components/hidden-visually';
 export * from './new-components/alert';
 export * from './new-components/loading';
 export * from './new-components/notice';
+export * from './new-components/toast';
 export * from './new-components/heading';
 export * from './new-components/text';
 export * from './new-components/button';
@@ -30,7 +31,6 @@ export { default as KeyboardShortcut } from './components/keyboard-shortcut';
 export { default as KeyCapturer, SUPPORTED_KEYS } from './components/key-capturer';
 export { default as ProgressBar } from './components/progress-bar';
 export { default as Time } from './components/time';
-export { Notification } from './components/notification/notification';
 export { Tooltip } from './components/tooltip';
 export type { TooltipProps } from './components/tooltip';
 export * from './components/menu';
@@ -38,4 +38,5 @@ export { default as DeprecatedButton } from './components/deprecated-button';
 export { default as DeprecatedDropdown } from './components/deprecated-dropdown';
 export { default as DeprecatedInput } from './components/deprecated-input';
 export { default as DeprecatedSelect } from './components/deprecated-select';
+export { DeprecatedNotification } from './components/deprecated-notification';
 export * from './new-components/deprecated-modal';

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"),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("./components/tooltip/tooltip.js"),d=require("./new-components/button/button.js"),a=require("./new-components/alert/alert.js"),u=require("./new-components/loading/loading.js"),c=require("./new-components/notice/notice.js"),l=require("./new-components/heading/heading.js"),x=require("./new-components/text/text.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"),M=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"),f=require("./new-components/text-field/text-field.js"),T=require("./new-components/avatar/avatar.js"),D=require("./new-components/badge/badge.js"),B=require("./new-components/modal/modal.js"),S=require("./hooks/use-previous/use-previous.js"),h=require("./new-components/tabs/tabs.js"),v=require("./components/deprecated-button/index.js"),y=require("./components/deprecated-dropdown/index.js"),g=require("./components/color-picker/color-picker.js"),C=require("./components/color-picker/index.js"),F=require("./components/keyboard-shortcut/index.js"),P=require("./components/key-capturer/key-capturer.js"),A=require("./components/key-capturer/index.js"),L=require("./components/progress-bar/index.js"),H=require("./components/time/index.js"),O=require("./components/notification/notification.js"),I=require("./components/menu/menu.js"),E=require("./components/deprecated-input/index.js"),K=require("./components/deprecated-select/index.js"),N=require("./new-components/deprecated-modal/modal.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.Tooltip=p.Tooltip,exports.Button=d.Button,exports.Alert=a.Alert,exports.Loading=u.Loading,exports.Notice=c.Notice,exports.Heading=l.Heading,exports.Text=x.Text,exports.ButtonLink=m.ButtonLink,exports.TextLink=j.TextLink,exports.CheckboxField=q.CheckboxField,exports.PasswordField=w.PasswordField,exports.SelectField=M.SelectField,exports.SwitchField=b.SwitchField,exports.TextArea=k.TextArea,exports.TextField=f.TextField,exports.Avatar=T.Avatar,exports.Badge=D.Badge,exports.Modal=B.Modal,exports.ModalActions=B.ModalActions,exports.ModalBody=B.ModalBody,exports.ModalCloseButton=B.ModalCloseButton,exports.ModalFooter=B.ModalFooter,exports.ModalHeader=B.ModalHeader,exports.usePrevious=S.usePrevious,exports.Tab=h.Tab,exports.TabAwareSlot=h.TabAwareSlot,exports.TabList=h.TabList,exports.TabPanel=h.TabPanel,exports.Tabs=h.Tabs,exports.DeprecatedButton=v.default,exports.DeprecatedDropdown=y.default,exports.COLORS=g.COLORS,exports.ColorPicker=C.default,exports.KeyboardShortcut=F.default,exports.SUPPORTED_KEYS=P.SUPPORTED_KEYS,exports.KeyCapturer=A.default,exports.ProgressBar=L.default,exports.Time=H.default,exports.Notification=O.Notification,exports.Menu=I.Menu,exports.MenuButton=I.MenuButton,exports.MenuGroup=I.MenuGroup,exports.MenuItem=I.MenuItem,exports.MenuList=I.MenuList,exports.SubMenu=I.SubMenu,exports.DeprecatedInput=E.default,exports.DeprecatedSelect=K.default,exports.DeprecatedModal=N.DeprecatedModal,exports.DeprecatedModalActions=N.DeprecatedModalActions,exports.DeprecatedModalBody=N.DeprecatedModalBody,exports.DeprecatedModalCloseButton=N.DeprecatedModalCloseButton,exports.DeprecatedModalFooter=N.DeprecatedModalFooter,exports.DeprecatedModalHeader=N.DeprecatedModalHeader;
+"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"),s=require("./new-components/stack/stack.js"),n=require("./new-components/hidden/hidden.js"),i=require("./new-components/hidden-visually/hidden-visually.js"),p=require("./components/tooltip/tooltip.js"),a=require("./new-components/button/button.js"),d=require("./new-components/alert/alert.js"),c=require("./new-components/loading/loading.js"),u=require("./new-components/notice/notice.js"),l=require("./new-components/text/text.js"),x=require("./new-components/toast/static-toast.js"),m=require("./new-components/toast/use-toasts.js"),j=require("./new-components/heading/heading.js"),q=require("./new-components/button-link/button-link.js"),w=require("./new-components/text-link/text-link.js"),M=require("./new-components/checkbox-field/checkbox-field.js"),b=require("./new-components/password-field/password-field.js"),T=require("./new-components/select-field/select-field.js"),k=require("./new-components/switch-field/switch-field.js"),f=require("./new-components/text-area/text-area.js"),D=require("./new-components/text-field/text-field.js"),B=require("./new-components/avatar/avatar.js"),S=require("./new-components/badge/badge.js"),v=require("./new-components/modal/modal.js"),h=require("./hooks/use-previous/use-previous.js"),y=require("./new-components/tabs/tabs.js"),P=require("./components/deprecated-button/index.js"),g=require("./components/deprecated-dropdown/index.js"),C=require("./components/color-picker/color-picker.js"),F=require("./components/color-picker/index.js"),A=require("./components/keyboard-shortcut/index.js"),L=require("./components/key-capturer/key-capturer.js"),H=require("./components/key-capturer/index.js"),O=require("./components/progress-bar/index.js"),I=require("./components/time/index.js"),E=require("./components/menu/menu.js"),K=require("./components/deprecated-input/index.js"),N=require("./components/deprecated-select/index.js"),R=require("./components/deprecated-notification/deprecated-notification.js"),_=require("./new-components/deprecated-modal/modal.js");exports.Box=e.Box,exports.Column=o.Column,exports.Columns=o.Columns,exports.Divider=t.Divider,exports.Inline=r.Inline,exports.Stack=s.Stack,exports.Hidden=n.Hidden,exports.HiddenVisually=i.HiddenVisually,exports.Tooltip=p.Tooltip,exports.Button=a.Button,exports.Alert=d.Alert,exports.Loading=c.Loading,exports.Notice=u.Notice,exports.Text=l.Text,exports.StaticToast=x.StaticToast,exports.Toast=m.Toast,exports.ToastsProvider=m.ToastsProvider,exports.useToasts=m.useToasts,exports.Heading=j.Heading,exports.ButtonLink=q.ButtonLink,exports.TextLink=w.TextLink,exports.CheckboxField=M.CheckboxField,exports.PasswordField=b.PasswordField,exports.SelectField=T.SelectField,exports.SwitchField=k.SwitchField,exports.TextArea=f.TextArea,exports.TextField=D.TextField,exports.Avatar=B.Avatar,exports.Badge=S.Badge,exports.Modal=v.Modal,exports.ModalActions=v.ModalActions,exports.ModalBody=v.ModalBody,exports.ModalCloseButton=v.ModalCloseButton,exports.ModalFooter=v.ModalFooter,exports.ModalHeader=v.ModalHeader,exports.usePrevious=h.usePrevious,exports.Tab=y.Tab,exports.TabAwareSlot=y.TabAwareSlot,exports.TabList=y.TabList,exports.TabPanel=y.TabPanel,exports.Tabs=y.Tabs,exports.DeprecatedButton=P.default,exports.DeprecatedDropdown=g.default,exports.COLORS=C.COLORS,exports.ColorPicker=F.default,exports.KeyboardShortcut=A.default,exports.SUPPORTED_KEYS=L.SUPPORTED_KEYS,exports.KeyCapturer=H.default,exports.ProgressBar=O.default,exports.Time=I.default,exports.Menu=E.Menu,exports.MenuButton=E.MenuButton,exports.MenuGroup=E.MenuGroup,exports.MenuItem=E.MenuItem,exports.MenuList=E.MenuList,exports.SubMenu=E.SubMenu,exports.DeprecatedInput=K.default,exports.DeprecatedSelect=N.default,exports.DeprecatedNotification=R.DeprecatedNotification,exports.DeprecatedModal=_.DeprecatedModal,exports.DeprecatedModalActions=_.DeprecatedModalActions,exports.DeprecatedModalBody=_.DeprecatedModalBody,exports.DeprecatedModalCloseButton=_.DeprecatedModalCloseButton,exports.DeprecatedModalFooter=_.DeprecatedModalFooter,exports.DeprecatedModalHeader=_.DeprecatedModalHeader;
 //# sourceMappingURL=index.js.map

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={badge:"_0b1e00ed","badge-neutral":"dda494a5","badge-positive":"_9260b8b0","badge-color":"_73a14c03"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={badge:"d05d2b62","badge-neutral":"a14691f3","badge-positive":"_4e255fdb","badge-color":"a58624e2"};
 //# sourceMappingURL=badge.module.css.js.map

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

@@ -29,15 +29,17 @@ declare type BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'
 declare type BoxMinWidth = 0 | BoxMaxMinWidth;
 declare type BoxMaxWidth = BoxMaxMinWidth | 'full';
 declare type BoxWidth = 0 | BoxMaxMinWidth | 'full' | 'auto' | 'maxContent' | 'minContent' | 'fitContent';
+declare type BoxBackground = 'default' | 'aside' | 'highlight' | 'selected' | 'toast';
+declare type BoxBorderRadius = 'standard' | 'none' | 'full';
 interface BorderProps {
-    borderRadius?: 'standard' | 'none' | 'full';
+    borderRadius?: BoxBorderRadius;
     border?: DividerWeight;
 }
 interface ReusableBoxProps extends BorderProps, BoxPaddingProps {
     minWidth?: BoxMinWidth;
     maxWidth?: BoxMaxWidth;
     width?: BoxWidth;
-    background?: 'default' | 'aside' | 'highlight' | 'selected';
+    background?: BoxBackground;
     flexGrow?: 0 | 1;
     flexShrink?: 0;
 }
@@ -56,5 +58,5 @@ interface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginPro
     textAlign?: ResponsiveProp<BoxTextAlign>;
 }
 declare const Box: import("../../utils/polymorphism").PolymorphicComponent<"div", BoxProps, "keepClassName">;
-export type { BoxProps, BoxPaddingProps, BoxMarginProps, ReusableBoxProps, BoxMinWidth, BoxMaxWidth, BoxDisplay, BoxPosition, BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxOverflow, BoxTextAlign, };
+export type { BoxProps, BoxPaddingProps, BoxMarginProps, ReusableBoxProps, BoxMinWidth, BoxMaxWidth, BoxDisplay, BoxPosition, BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxOverflow, BoxTextAlign, BoxBackground, BoxBorderRadius, };
 export { Box };

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,l=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),t=(e=require("classnames"))&&"object"==typeof e&&"default"in e?e.default:e,s=require("../../utils/polymorphism.js"),i=require("../responsive-props.js"),n=require("./box.module.css.js"),d=require("./padding.module.css.js"),r=require("./margin.module.css.js"),u=require("./width.module.css.js");const g=["as","position","display","flexDirection","flexWrap","flexGrow","flexShrink","alignItems","justifyContent","alignSelf","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"];exports.Box=s.polymorphicComponent((function(e,s){var o,m,f,p,h,C,c,N;let{as:x="div",position:b="static",display:j,flexDirection:S="row",flexWrap:w,flexGrow:y,flexShrink:v,alignItems:W,justifyContent:q,alignSelf:R,overflow:B,width:L,height:T,background:k,border:X,borderRadius:Y,minWidth:_,maxWidth:A,textAlign:D,padding:G,paddingY:I,paddingX:P,paddingTop:E,paddingRight:F,paddingBottom:H,paddingLeft:M,margin:O,marginY:z,marginX:J,marginTop:K,marginRight:Q,marginBottom:U,marginLeft:V,className:Z,children:$}=e,ee=l.objectWithoutProperties(e,g);const le=null!=(o=null!=E?E:I)?o:G,ae=null!=(m=null!=F?F:P)?m:G,te=null!=(f=null!=H?H:I)?f:G,se=null!=(p=null!=M?M:P)?p:G,ie=null!=(h=null!=K?K:z)?h:O,ne=null!=(C=null!=Q?Q:J)?C:O,de=null!=(c=null!=U?U:z)?c:O,re=null!=(N=null!=V?V:J)?N:O,ue=!j||"string"==typeof j&&"flex"!==j&&"inlineFlex"!==j;return a.createElement(x,l.objectSpread2(l.objectSpread2({},ee),{},{className:t(Z,n.default.box,j?i.getClassNames(n.default,"display",j):null,"static"!==b?i.getClassNames(n.default,"position",b):null,null!=_?i.getClassNames(u.default,"minWidth",String(_)):null,i.getClassNames(u.default,"maxWidth",A),i.getClassNames(n.default,"textAlign",D),i.getClassNames(d.default,"paddingTop",le),i.getClassNames(d.default,"paddingRight",ae),i.getClassNames(d.default,"paddingBottom",te),i.getClassNames(d.default,"paddingLeft",se),i.getClassNames(r.default,"marginTop",ie),i.getClassNames(r.default,"marginRight",ne),i.getClassNames(r.default,"marginBottom",de),i.getClassNames(r.default,"marginLeft",re),ue?null:i.getClassNames(n.default,"flexDirection",S),ue?null:i.getClassNames(n.default,"flexWrap",w),ue?null:i.getClassNames(n.default,"alignItems",W),ue?null:i.getClassNames(n.default,"justifyContent",q),null!=R?i.getClassNames(n.default,"alignSelf",R):null,null!=v?i.getClassNames(n.default,"flexShrink",String(v)):null,null!=y?i.getClassNames(n.default,"flexGrow",String(y)):null,i.getClassNames(n.default,"overflow",B),null!=L?i.getClassNames(u.default,"width",String(L)):null,i.getClassNames(n.default,"height",T),i.getClassNames(n.default,"bg",k),"none"!==Y?i.getClassNames(n.default,"borderRadius",Y):null,"none"!==X?i.getClassNames(n.default,"border",X):null)||void 0,ref:s}),$)}));
+"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"))),s=require("../../utils/polymorphism.js"),n=require("../responsive-props.js"),i=require("./box.module.css.js"),d=require("./padding.module.css.js"),r=require("./margin.module.css.js"),u=require("./width.module.css.js");const g=["as","position","display","flexDirection","flexWrap","flexGrow","flexShrink","alignItems","justifyContent","alignSelf","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"];exports.Box=s.polymorphicComponent((function(e,s){var o,m,f,p,c,h,C,N;let{as:x="div",position:b="static",display:j,flexDirection:S="row",flexWrap:w,flexGrow:y,flexShrink:v,alignItems:W,justifyContent:q,alignSelf:R,overflow:B,width:L,height:T,background:k,border:X,borderRadius:Y,minWidth:_,maxWidth:A,textAlign:D,padding:G,paddingY:I,paddingX:P,paddingTop:E,paddingRight:F,paddingBottom:H,paddingLeft:M,margin:O,marginY:z,marginX:J,marginTop:K,marginRight:Q,marginBottom:U,marginLeft:V,className:Z,children:$}=e,ee=l.objectWithoutProperties(e,g);const le=null!=(o=null!=E?E:I)?o:G,ae=null!=(m=null!=F?F:P)?m:G,te=null!=(f=null!=H?H:I)?f:G,se=null!=(p=null!=M?M:P)?p:G,ne=null!=(c=null!=K?K:z)?c:O,ie=null!=(h=null!=Q?Q:J)?h:O,de=null!=(C=null!=U?U:z)?C:O,re=null!=(N=null!=V?V:J)?N:O,ue=!j||"string"==typeof j&&"flex"!==j&&"inlineFlex"!==j;return a.createElement(x,l.objectSpread2(l.objectSpread2({},ee),{},{className:t(Z,i.default.box,j?n.getClassNames(i.default,"display",j):null,"static"!==b?n.getClassNames(i.default,"position",b):null,null!=_?n.getClassNames(u.default,"minWidth",String(_)):null,n.getClassNames(u.default,"maxWidth",A),n.getClassNames(i.default,"textAlign",D),n.getClassNames(d.default,"paddingTop",le),n.getClassNames(d.default,"paddingRight",ae),n.getClassNames(d.default,"paddingBottom",te),n.getClassNames(d.default,"paddingLeft",se),n.getClassNames(r.default,"marginTop",ne),n.getClassNames(r.default,"marginRight",ie),n.getClassNames(r.default,"marginBottom",de),n.getClassNames(r.default,"marginLeft",re),ue?null:n.getClassNames(i.default,"flexDirection",S),ue?null:n.getClassNames(i.default,"flexWrap",w),ue?null:n.getClassNames(i.default,"alignItems",W),ue?null:n.getClassNames(i.default,"justifyContent",q),null!=R?n.getClassNames(i.default,"alignSelf",R):null,null!=v?n.getClassNames(i.default,"flexShrink",String(v)):null,null!=y?n.getClassNames(i.default,"flexGrow",String(y)):null,n.getClassNames(i.default,"overflow",B),null!=L?n.getClassNames(u.default,"width",String(L)):null,n.getClassNames(i.default,"height",T),n.getClassNames(i.default,"bg",k),"none"!==Y?n.getClassNames(i.default,"borderRadius",Y):null,"none"!==X?n.getClassNames(i.default,"border",X):null)||void 0,ref:s}),$)}));
 //# 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 {\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'\nimport widthStyles from './width.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 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 BoxAlignSelf = 'flexStart' | 'flexEnd' | 'center' | 'baseline' | 'stretch'\ntype BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll'\n\ntype BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'\ntype BoxMinWidth = 0 | BoxMaxMinWidth\ntype BoxMaxWidth = BoxMaxMinWidth | 'full'\ntype BoxWidth = 0 | BoxMaxMinWidth | 'full' | 'auto' | 'maxContent' | 'minContent' | 'fitContent'\n\ninterface BorderProps {\n    borderRadius?: 'standard' | 'none' | 'full'\n    border?: DividerWeight\n}\n\ninterface ReusableBoxProps extends BorderProps, BoxPaddingProps {\n    minWidth?: BoxMinWidth\n    maxWidth?: BoxMaxWidth\n    width?: BoxWidth\n    background?: 'default' | 'aside' | 'highlight' | 'selected'\n    flexGrow?: 0 | 1\n    flexShrink?: 0\n}\n\ntype BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'\ntype BoxTextAlign = 'start' | 'center' | 'end' | 'justify'\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    alignSelf?: ResponsiveProp<BoxAlignSelf>\n    justifyContent?: ResponsiveProp<BoxJustifyContent>\n    overflow?: BoxOverflow\n    height?: 'full'\n    textAlign?: ResponsiveProp<BoxTextAlign>\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        alignSelf,\n        overflow,\n        width,\n        height,\n        background,\n        border,\n        borderRadius,\n        minWidth,\n        maxWidth,\n        textAlign,\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\n                        ? getClassNames(widthStyles, 'minWidth', String(minWidth))\n                        : null,\n                    getClassNames(widthStyles, 'maxWidth', maxWidth),\n                    getClassNames(styles, 'textAlign', textAlign),\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                    alignSelf != null ? getClassNames(styles, 'alignSelf', alignSelf) : null,\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                    width != null ? getClassNames(widthStyles, 'width', String(width)) : null,\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    BoxMinWidth,\n    BoxMaxWidth,\n    BoxDisplay,\n    BoxPosition,\n    BoxFlexDirection,\n    BoxFlexWrap,\n    BoxAlignItems,\n    BoxJustifyContent,\n    BoxOverflow,\n    BoxTextAlign,\n}\n\nexport { Box }\n"],"names":["polymorphicComponent","ref","as","component","position","display","flexDirection","flexWrap","flexGrow","flexShrink","alignItems","justifyContent","alignSelf","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","widthStyles","String","paddingStyles","marginStyles","undefined"],"mappings":"+2BAuFYA,wBAAuD,WAuC/DC,2BArCIC,GAAIC,EAAY,MADpBC,SAEIA,EAAW,SAFfC,QAGIA,EAHJC,cAIIA,EAAgB,MAJpBC,SAKIA,EALJC,SAMIA,EANJC,WAOIA,EAPJC,WAQIA,EARJC,eASIA,EATJC,UAUIA,EAVJC,SAWIA,EAXJC,MAYIA,EAZJC,OAaIA,EAbJC,WAcIA,EAdJC,OAeIA,EAfJC,aAgBIA,EAhBJC,SAiBIA,EAjBJC,SAkBIA,EAlBJC,UAmBIA,EAnBJC,QAoBIA,EApBJC,SAqBIA,EArBJC,SAsBIA,EAtBJC,WAuBIA,EAvBJC,aAwBIA,EAxBJC,cAyBIA,EAzBJC,YA0BIA,EA1BJC,OA2BIA,EA3BJC,QA4BIA,EA5BJC,QA6BIA,EA7BJC,UA8BIA,EA9BJC,YA+BIA,EA/BJC,aAgCIA,EAhCJC,WAiCIA,EAjCJC,UAkCIA,EAlCJC,SAmCIA,KACGC,kCAIP,MAAMC,kBAAqBd,EAAAA,EAAcF,KAAYD,EAC/CkB,kBAAuBd,EAAAA,EAAgBF,KAAYF,EACnDmB,kBAAwBd,EAAAA,EAAiBJ,KAAYD,EACrDoB,kBAAsBd,EAAAA,EAAeJ,KAAYF,EAEjDqB,kBAAoBX,EAAAA,EAAaF,KAAWD,EAC5Ce,kBAAsBX,EAAAA,EAAeF,KAAWF,EAChDgB,kBAAuBX,EAAAA,EAAgBJ,KAAWD,EAClDiB,kBAAqBX,EAAAA,EAAcJ,KAAWF,EAE9CkB,IACD1C,GAA+B,iBAAZA,GAAoC,SAAZA,GAAkC,eAAZA,EAEtE,OAAO2C,gBACH7C,qCAEOmC,QACHF,UACIa,EACIb,EACAc,UAAOC,IACP9C,EAAU+C,gBAAcF,UAAQ,UAAW7C,GAAW,KACzC,WAAbD,EAAwBgD,gBAAcF,UAAQ,WAAY9C,GAAY,KAC1D,MAAZe,EACMiC,gBAAcC,UAAa,WAAYC,OAAOnC,IAC9C,KACNiC,gBAAcC,UAAa,WAAYjC,GACvCgC,gBAAcF,UAAQ,YAAa7B,GAEnC+B,gBAAcG,UAAe,aAAchB,IAC3Ca,gBAAcG,UAAe,eAAgBf,IAC7CY,gBAAcG,UAAe,gBAAiBd,IAC9CW,gBAAcG,UAAe,cAAeb,IAE5CU,gBAAcI,UAAc,YAAab,IACzCS,gBAAcI,UAAc,cAAeZ,IAC3CQ,gBAAcI,UAAc,eAAgBX,IAC5CO,gBAAcI,UAAc,aAAcV,IAE1CC,GAAW,KAAOK,gBAAcF,UAAQ,gBAAiB5C,GACzDyC,GAAW,KAAOK,gBAAcF,UAAQ,WAAY3C,GACpDwC,GAAW,KAAOK,gBAAcF,UAAQ,aAAcxC,GACtDqC,GAAW,KAAOK,gBAAcF,UAAQ,iBAAkBvC,GAC7C,MAAbC,EAAoBwC,gBAAcF,UAAQ,YAAatC,GAAa,KACtD,MAAdH,EACM2C,gBAAcF,UAAQ,aAAcI,OAAO7C,IAC3C,KACM,MAAZD,EAAmB4C,gBAAcF,UAAQ,WAAYI,OAAO9C,IAAa,KAEzE4C,gBAAcF,UAAQ,WAAYrC,GACzB,MAATC,EAAgBsC,gBAAcC,UAAa,QAASC,OAAOxC,IAAU,KACrEsC,gBAAcF,UAAQ,SAAUnC,GAChCqC,gBAAcF,UAAQ,KAAMlC,GACX,SAAjBE,EACMkC,gBAAcF,UAAQ,eAAgBhC,GACtC,KACK,SAAXD,EAAoBmC,gBAAcF,UAAQ,SAAUjC,GAAU,YAC7DwC,EACTxD,IAAAA,IAEJoC"}
+{"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'\nimport widthStyles from './width.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 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 BoxAlignSelf = 'flexStart' | 'flexEnd' | 'center' | 'baseline' | 'stretch'\ntype BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll'\n\ntype BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'\ntype BoxMinWidth = 0 | BoxMaxMinWidth\ntype BoxMaxWidth = BoxMaxMinWidth | 'full'\ntype BoxWidth = 0 | BoxMaxMinWidth | 'full' | 'auto' | 'maxContent' | 'minContent' | 'fitContent'\ntype BoxBackground = 'default' | 'aside' | 'highlight' | 'selected' | 'toast'\ntype BoxBorderRadius = 'standard' | 'none' | 'full'\n\ninterface BorderProps {\n    borderRadius?: BoxBorderRadius\n    border?: DividerWeight\n}\n\ninterface ReusableBoxProps extends BorderProps, BoxPaddingProps {\n    minWidth?: BoxMinWidth\n    maxWidth?: BoxMaxWidth\n    width?: BoxWidth\n    background?: BoxBackground\n    flexGrow?: 0 | 1\n    flexShrink?: 0\n}\n\ntype BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'\ntype BoxTextAlign = 'start' | 'center' | 'end' | 'justify'\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    alignSelf?: ResponsiveProp<BoxAlignSelf>\n    justifyContent?: ResponsiveProp<BoxJustifyContent>\n    overflow?: BoxOverflow\n    height?: 'full'\n    textAlign?: ResponsiveProp<BoxTextAlign>\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        alignSelf,\n        overflow,\n        width,\n        height,\n        background,\n        border,\n        borderRadius,\n        minWidth,\n        maxWidth,\n        textAlign,\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\n                        ? getClassNames(widthStyles, 'minWidth', String(minWidth))\n                        : null,\n                    getClassNames(widthStyles, 'maxWidth', maxWidth),\n                    getClassNames(styles, 'textAlign', textAlign),\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                    alignSelf != null ? getClassNames(styles, 'alignSelf', alignSelf) : null,\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                    width != null ? getClassNames(widthStyles, 'width', String(width)) : null,\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    BoxMinWidth,\n    BoxMaxWidth,\n    BoxDisplay,\n    BoxPosition,\n    BoxFlexDirection,\n    BoxFlexWrap,\n    BoxAlignItems,\n    BoxJustifyContent,\n    BoxOverflow,\n    BoxTextAlign,\n    BoxBackground,\n    BoxBorderRadius,\n}\n\nexport { Box }\n"],"names":["polymorphicComponent","ref","as","component","position","display","flexDirection","flexWrap","flexGrow","flexShrink","alignItems","justifyContent","alignSelf","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","widthStyles","String","paddingStyles","marginStyles","undefined"],"mappings":"04BAyFYA,wBAAuD,WAuC/DC,2BArCIC,GAAIC,EAAY,MADpBC,SAEIA,EAAW,SAFfC,QAGIA,EAHJC,cAIIA,EAAgB,MAJpBC,SAKIA,EALJC,SAMIA,EANJC,WAOIA,EAPJC,WAQIA,EARJC,eASIA,EATJC,UAUIA,EAVJC,SAWIA,EAXJC,MAYIA,EAZJC,OAaIA,EAbJC,WAcIA,EAdJC,OAeIA,EAfJC,aAgBIA,EAhBJC,SAiBIA,EAjBJC,SAkBIA,EAlBJC,UAmBIA,EAnBJC,QAoBIA,EApBJC,SAqBIA,EArBJC,SAsBIA,EAtBJC,WAuBIA,EAvBJC,aAwBIA,EAxBJC,cAyBIA,EAzBJC,YA0BIA,EA1BJC,OA2BIA,EA3BJC,QA4BIA,EA5BJC,QA6BIA,EA7BJC,UA8BIA,EA9BJC,YA+BIA,EA/BJC,aAgCIA,EAhCJC,WAiCIA,EAjCJC,UAkCIA,EAlCJC,SAmCIA,KACGC,kCAIP,MAAMC,kBAAqBd,EAAAA,EAAcF,KAAYD,EAC/CkB,kBAAuBd,EAAAA,EAAgBF,KAAYF,EACnDmB,kBAAwBd,EAAAA,EAAiBJ,KAAYD,EACrDoB,kBAAsBd,EAAAA,EAAeJ,KAAYF,EAEjDqB,kBAAoBX,EAAAA,EAAaF,KAAWD,EAC5Ce,kBAAsBX,EAAAA,EAAeF,KAAWF,EAChDgB,kBAAuBX,EAAAA,EAAgBJ,KAAWD,EAClDiB,kBAAqBX,EAAAA,EAAcJ,KAAWF,EAE9CkB,IACD1C,GAA+B,iBAAZA,GAAoC,SAAZA,GAAkC,eAAZA,EAEtE,OAAO2C,gBACH7C,qCAEOmC,QACHF,UACIa,EACIb,EACAc,UAAOC,IACP9C,EAAU+C,gBAAcF,UAAQ,UAAW7C,GAAW,KACzC,WAAbD,EAAwBgD,gBAAcF,UAAQ,WAAY9C,GAAY,KAC1D,MAAZe,EACMiC,gBAAcC,UAAa,WAAYC,OAAOnC,IAC9C,KACNiC,gBAAcC,UAAa,WAAYjC,GACvCgC,gBAAcF,UAAQ,YAAa7B,GAEnC+B,gBAAcG,UAAe,aAAchB,IAC3Ca,gBAAcG,UAAe,eAAgBf,IAC7CY,gBAAcG,UAAe,gBAAiBd,IAC9CW,gBAAcG,UAAe,cAAeb,IAE5CU,gBAAcI,UAAc,YAAab,IACzCS,gBAAcI,UAAc,cAAeZ,IAC3CQ,gBAAcI,UAAc,eAAgBX,IAC5CO,gBAAcI,UAAc,aAAcV,IAE1CC,GAAW,KAAOK,gBAAcF,UAAQ,gBAAiB5C,GACzDyC,GAAW,KAAOK,gBAAcF,UAAQ,WAAY3C,GACpDwC,GAAW,KAAOK,gBAAcF,UAAQ,aAAcxC,GACtDqC,GAAW,KAAOK,gBAAcF,UAAQ,iBAAkBvC,GAC7C,MAAbC,EAAoBwC,gBAAcF,UAAQ,YAAatC,GAAa,KACtD,MAAdH,EACM2C,gBAAcF,UAAQ,aAAcI,OAAO7C,IAC3C,KACM,MAAZD,EAAmB4C,gBAAcF,UAAQ,WAAYI,OAAO9C,IAAa,KAEzE4C,gBAAcF,UAAQ,WAAYrC,GACzB,MAATC,EAAgBsC,gBAAcC,UAAa,QAASC,OAAOxC,IAAU,KACrEsC,gBAAcF,UAAQ,SAAUnC,GAChCqC,gBAAcF,UAAQ,KAAMlC,GACX,SAAjBE,EACMkC,gBAAcF,UAAQ,eAAgBhC,GACtC,KACK,SAAXD,EAAoBmC,gBAAcF,UAAQ,SAAUjC,GAAU,YAC7DwC,EACTxD,IAAAA,IAEJoC"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={box:"f9408a0e","position-absolute":"_7807dcdd","position-fixed":"dc5f328c","position-relative":"_0e4ff085","position-sticky":"_4019d94a","tablet-position-absolute":"b1865c0f","tablet-position-fixed":"af8c5967","tablet-position-relative":"ef2b609f","tablet-position-sticky":"_04935ffd","desktop-position-absolute":"bda94091","desktop-position-fixed":"_691dfd31","desktop-position-relative":"efda904e","desktop-position-sticky":"bcf04687","display-block":"b5b9f34a","display-flex":"_6e9db9aa","display-inline":"ece6d246","display-inlineBlock":"e5e2223f","display-inlineFlex":"f344a0e2","display-none":"_9002f8c2","tablet-display-block":"d896f0ff","tablet-display-flex":"_56412665","tablet-display-inline":"_6b430cc5","tablet-display-inlineBlock":"_4158c5ad","tablet-display-inlineFlex":"c598eaab","tablet-display-none":"_5a2a6d3f","desktop-display-block":"_132ef8fb","desktop-display-flex":"_5bd11385","desktop-display-inline":"a51c2ec9","desktop-display-inlineBlock":"_93506988","desktop-display-inlineFlex":"_385d45a5","desktop-display-none":"_921732eb","flexDirection-column":"_41ef5755","flexDirection-row":"_6cad1a19","tablet-flexDirection-column":"f1c16205","tablet-flexDirection-row":"_65305ae1","desktop-flexDirection-column":"_4916f0f9","desktop-flexDirection-row":"_430dfc8e","flexWrap-wrap":"_3d2d56fe","flexWrap-nowrap":"_826e4adf","flexShrink-0":"f8344e0f","flexGrow-0":"f117e2ab","flexGrow-1":"_1355325c","alignItems-flexStart":"c5b05c6a","alignItems-center":"_21b8bafa","alignItems-flexEnd":"_56d73c9b","alignItems-baseline":"_052e0707","tablet-alignItems-flexStart":"_90048c98","tablet-alignItems-center":"_7e189a0b","tablet-alignItems-flexEnd":"b8aefb5c","tablet-alignItems-baseline":"_4c1a5ef9","desktop-alignItems-flexStart":"f4d052ef","desktop-alignItems-center":"e5478926","desktop-alignItems-flexEnd":"b4f5051a","desktop-alignItems-baseline":"b21adace","justifyContent-flexStart":"be6deb6a","justifyContent-center":"d8eaf780","justifyContent-flexEnd":"_9212ca89","justifyContent-spaceAround":"_5d2cd095","justifyContent-spaceBetween":"_00d5fe7e","justifyContent-spaceEvenly":"ce4f4c2d","tablet-justifyContent-flexStart":"_6580dbbc","tablet-justifyContent-center":"_3f689891","tablet-justifyContent-flexEnd":"_628df8db","tablet-justifyContent-spaceAround":"_3ea88b4f","tablet-justifyContent-spaceBetween":"_4554d93d","tablet-justifyContent-spaceEvenly":"eb13fb50","desktop-justifyContent-flexStart":"_36dc744d","desktop-justifyContent-center":"ee7077ab","desktop-justifyContent-flexEnd":"_4edc8c86","desktop-justifyContent-spaceBetween":"_7e147696","alignSelf-stretch":"c0655cd6","alignSelf-flexStart":"_11863030","alignSelf-center":"c6d86139","alignSelf-flexEnd":"c0bd1f82","alignSelf-baseline":"_95686aec","tablet-alignSelf-stretch":"_9b712cc7","tablet-alignSelf-flexStart":"f7b935f7","tablet-alignSelf-center":"bf9ad125","tablet-alignSelf-flexEnd":"_3b4f8c3c","tablet-alignSelf-baseline":"_49d27079","desktop-alignSelf-stretch":"_63d27ffa","desktop-alignSelf-flexStart":"d45796cc","desktop-alignSelf-center":"c91c7bf7","desktop-alignSelf-flexEnd":"f2453212","desktop-alignSelf-baseline":"_3882757c","overflow-hidden":"_473810b4","overflow-auto":"_051c2340","overflow-visible":"_14e451d1","overflow-scroll":"_4d8555f8","height-full":"_867d251e","bg-default":"_2d928bf8","bg-aside":"db3f5af6","bg-highlight":"c990fcc3","bg-selected":"_976a662f","borderRadius-standard":"_46b52f05","borderRadius-full":"_1c8b326b","border-primary":"_0ef8c314","border-secondary":"_14871605","border-tertiary":"_36c045c3","textAlign-start":"d745aa1e","textAlign-center":"_31cf99c5","textAlign-end":"_10a7a030","textAlign-justify":"_2cfc8b46","tablet-textAlign-start":"e6b7bb40","tablet-textAlign-center":"_47dcb91c","tablet-textAlign-end":"_1d4011ce","tablet-textAlign-justify":"_18407499","desktop-textAlign-start":"_565de5cf","desktop-textAlign-center":"_64254ba3","desktop-textAlign-end":"_3cc6a504","desktop-textAlign-justify":"_0efec659"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={box:"aa9a5a15","position-absolute":"_8e8803b9","position-fixed":"e11a8cf1","position-relative":"_5e6c2a17","position-sticky":"_125d4a65","tablet-position-absolute":"_8cbc0cd3","tablet-position-fixed":"_4b5e0b30","tablet-position-relative":"_32636b2c","tablet-position-sticky":"_3c8df1b2","desktop-position-absolute":"_0fc96c32","desktop-position-fixed":"_86f2af8d","desktop-position-relative":"_9ca81d89","desktop-position-sticky":"_7ddb76a3","display-block":"_1f239253","display-flex":"d3c9028a","display-inline":"_7804dae4","display-inlineBlock":"_2011b4f7","display-inlineFlex":"_84d1c5e9","display-none":"ecffd994","tablet-display-block":"_858d10e6","tablet-display-flex":"_048e1351","tablet-display-inline":"_4ad22f53","tablet-display-inlineBlock":"_9bdcf7c5","tablet-display-inlineFlex":"_086af02f","tablet-display-none":"e6d66504","desktop-display-block":"_42a60b7f","desktop-display-flex":"_75f9923b","desktop-display-inline":"_89fe8b6b","desktop-display-inlineBlock":"f5044459","desktop-display-inlineFlex":"c4bb937b","desktop-display-none":"_155e67e3","flexDirection-column":"_8b7928cc","flexDirection-row":"_5d86bbce","tablet-flexDirection-column":"_056ba2f7","tablet-flexDirection-row":"_68a9954e","desktop-flexDirection-column":"febb3bff","desktop-flexDirection-row":"e32ba18f","flexWrap-wrap":"bf057363","flexWrap-nowrap":"c12b5de4","flexShrink-0":"_1b0fdede","flexGrow-0":"_74d96364","flexGrow-1":"_8085a81a","alignItems-flexStart":"d646b895","alignItems-center":"_7eb6fbcd","alignItems-flexEnd":"aa0f1674","alignItems-baseline":"_5f712321","tablet-alignItems-flexStart":"_9cba71cc","tablet-alignItems-center":"_8803e1ed","tablet-alignItems-flexEnd":"dd23ad40","tablet-alignItems-baseline":"b6e66958","desktop-alignItems-flexStart":"_3cf6aa44","desktop-alignItems-center":"c455cc71","desktop-alignItems-flexEnd":"d72d7865","desktop-alignItems-baseline":"d856f657","justifyContent-flexStart":"e99eaf27","justifyContent-center":"f9927840","justifyContent-flexEnd":"_318ae7a4","justifyContent-spaceAround":"_792f21bb","justifyContent-spaceBetween":"c563d133","justifyContent-spaceEvenly":"_88fa03eb","tablet-justifyContent-flexStart":"_10110808","tablet-justifyContent-center":"_39532d47","tablet-justifyContent-flexEnd":"_6f28967b","tablet-justifyContent-spaceAround":"_61cf0e53","tablet-justifyContent-spaceBetween":"d9eb935c","tablet-justifyContent-spaceEvenly":"_2c34f330","desktop-justifyContent-flexStart":"_0d99cfa4","desktop-justifyContent-center":"a8e50b37","desktop-justifyContent-flexEnd":"_5c59c692","desktop-justifyContent-spaceBetween":"_2367b5bf","alignSelf-stretch":"da53b153","alignSelf-flexStart":"e7504e05","alignSelf-center":"_31910485","alignSelf-flexEnd":"f9deb037","alignSelf-baseline":"d2e0b600","tablet-alignSelf-stretch":"_322b2d4c","tablet-alignSelf-flexStart":"_8c3ace8c","tablet-alignSelf-center":"_3784fff8","tablet-alignSelf-flexEnd":"_7d7054cd","tablet-alignSelf-baseline":"_24e72f72","desktop-alignSelf-stretch":"_805f09a3","desktop-alignSelf-flexStart":"c124aecf","desktop-alignSelf-center":"_7f550538","desktop-alignSelf-flexEnd":"f1a1ea25","desktop-alignSelf-baseline":"a47a5534","overflow-hidden":"_79330f2d","overflow-auto":"_2d735aa4","overflow-visible":"_2d2dc480","overflow-scroll":"eae7bf85","height-full":"_3bd4b4e5","bg-default":"cdd56ed4","bg-aside":"ace3a6e9","bg-highlight":"_69ba9d50","bg-selected":"d3c85356","bg-toast":"_54ff8cfc","borderRadius-standard":"a010e6ce","borderRadius-full":"c7f4eef5","border-primary":"_0133b2bb","border-secondary":"_10ddcd6f","border-tertiary":"b1dd5c24","textAlign-start":"_3692c550","textAlign-center":"_917de8e0","textAlign-end":"f1f1808a","textAlign-justify":"_70cadb46","tablet-textAlign-start":"c009a023","tablet-textAlign-center":"_994025e9","tablet-textAlign-end":"da09b74f","tablet-textAlign-justify":"cedd005b","desktop-textAlign-start":"_6fb085b1","desktop-textAlign-center":"_742b34ba","desktop-textAlign-end":"_8d252912","desktop-textAlign-justify":"_081ee438"};
 //# sourceMappingURL=box.module.css.js.map

package/lib/new-components/deprecated-modal/modal.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 t=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),o=e(require("classnames")),l=require("../box/box.js"),r=require("../columns/columns.js"),n=require("../divider/divider.js"),i=require("../inline/inline.js"),s=require("../button/button.js"),c=require("../icons/close-icon.js"),u=e(require("react-focus-lock")),d=require("@reach/dialog"),m=require("./modal.module.css.js");const p=["isOpen","onDismiss","height","width","exceptionallySetClassName","autoFocus","children"],h=["children","button","withDivider","exceptionallySetClassName"],f=["exceptionallySetClassName","children"],x=["exceptionallySetClassName","withDivider"],g=["children"],b=a.createContext({onDismiss:void 0,height:"fitContent"});function j(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function C(e){const{onDismiss:o}=a.useContext(b),[l,r]=a.useState(!1),[n,i]=a.useState(!1);return a.useEffect((function(){n?r(!0):i(!0)}),[n]),a.createElement(s.Button,t.objectSpread2(t.objectSpread2({},e),{},{variant:"quaternary",onClick:o,icon:a.createElement(c.CloseIcon,null),tabIndex:l?0:-1}))}function v(e){let{exceptionallySetClassName:o,withDivider:r=!1}=e,i=t.objectWithoutProperties(e,x);return a.createElement(a.Fragment,null,r?a.createElement(n.Divider,null):null,a.createElement(l.Box,t.objectSpread2(t.objectSpread2({as:"footer"},i),{},{className:o,padding:"large"})))}exports.DeprecatedModal=function(e){let{isOpen:r,onDismiss:n,height:i="fitContent",width:s="medium",exceptionallySetClassName:c,autoFocus:h=!0,children:f}=e,x=t.objectWithoutProperties(e,p);const g=a.useMemo(()=>({onDismiss:n,height:i}),[n,i]);return a.createElement(d.DialogOverlay,{isOpen:r,onDismiss:n,dangerouslyBypassFocusLock:!0,className:o(m.default.overlay,m.default[i],m.default[s]),"data-testid":"modal-overlay"},a.createElement(u,{autoFocus:h,whiteList:j,returnFocus:!0},a.createElement(d.DialogContent,t.objectSpread2(t.objectSpread2({},x),{},{as:l.Box,borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===i?"full":void 0,flexGrow:"expand"===i?1:0,className:[c,m.default.container]}),a.createElement(b.Provider,{value:g},f))))},exports.DeprecatedModalActions=function(e){let{children:o}=e,l=t.objectWithoutProperties(e,g);return a.createElement(v,t.objectSpread2({},l),a.createElement(i.Inline,{align:"right",space:"large"},o))},exports.DeprecatedModalBody=function(e){let{exceptionallySetClassName:o,children:r}=e,n=t.objectWithoutProperties(e,f);const{height:i}=a.useContext(b);return a.createElement(l.Box,t.objectSpread2(t.objectSpread2({},n),{},{className:o,flexGrow:"expand"===i?1:0,height:"expand"===i?"full":void 0,overflow:"auto"}),a.createElement(l.Box,{padding:"large",paddingBottom:"xxlarge"},r))},exports.DeprecatedModalCloseButton=C,exports.DeprecatedModalFooter=v,exports.DeprecatedModalHeader=function(e){let{children:o,button:i=!0,withDivider:s=!1,exceptionallySetClassName:c}=e,u=t.objectWithoutProperties(e,h);return a.createElement(a.Fragment,null,a.createElement(l.Box,t.objectSpread2(t.objectSpread2({},u),{},{as:"header",paddingLeft:"large",paddingRight:!1===i||null===i?"large":"small",paddingY:"small",className:c}),a.createElement(r.Columns,{space:"large",alignY:"center"},a.createElement(r.Column,{width:"auto"},o),!1===i||null===i?a.createElement("div",{className:m.default.headerContent}):a.createElement(r.Column,{width:"content",exceptionallySetClassName:m.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof i?a.createElement(C,{"aria-label":"Close modal",autoFocus:!1}):i))),s?a.createElement(n.Divider,null):null)};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),o=(e(a),e(require("classnames"))),l=require("../box/box.js"),r=require("../columns/columns.js"),n=require("../divider/divider.js"),i=require("../inline/inline.js"),s=require("../button/button.js"),c=require("../icons/close-icon.js"),u=e(require("react-focus-lock")),d=require("@reach/dialog"),m=require("./modal.module.css.js");const p=["isOpen","onDismiss","height","width","exceptionallySetClassName","autoFocus","children"],h=["children","button","withDivider","exceptionallySetClassName"],f=["exceptionallySetClassName","children"],x=["exceptionallySetClassName","withDivider"],g=["children"],b=a.createContext({onDismiss:void 0,height:"fitContent"});function j(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function C(e){const{onDismiss:o}=a.useContext(b),[l,r]=a.useState(!1),[n,i]=a.useState(!1);return a.useEffect((function(){n?r(!0):i(!0)}),[n]),a.createElement(s.Button,t.objectSpread2(t.objectSpread2({},e),{},{variant:"quaternary",onClick:o,icon:a.createElement(c.CloseIcon,null),tabIndex:l?0:-1}))}function v(e){let{exceptionallySetClassName:o,withDivider:r=!1}=e,i=t.objectWithoutProperties(e,x);return a.createElement(a.Fragment,null,r?a.createElement(n.Divider,null):null,a.createElement(l.Box,t.objectSpread2(t.objectSpread2({as:"footer"},i),{},{className:o,padding:"large"})))}exports.DeprecatedModal=function(e){let{isOpen:r,onDismiss:n,height:i="fitContent",width:s="medium",exceptionallySetClassName:c,autoFocus:h=!0,children:f}=e,x=t.objectWithoutProperties(e,p);const g=a.useMemo(()=>({onDismiss:n,height:i}),[n,i]);return a.createElement(d.DialogOverlay,{isOpen:r,onDismiss:n,dangerouslyBypassFocusLock:!0,className:o(m.default.overlay,m.default[i],m.default[s]),"data-testid":"modal-overlay"},a.createElement(u,{autoFocus:h,whiteList:j,returnFocus:!0},a.createElement(d.DialogContent,t.objectSpread2(t.objectSpread2({},x),{},{as:l.Box,borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===i?"full":void 0,flexGrow:"expand"===i?1:0,className:[c,m.default.container]}),a.createElement(b.Provider,{value:g},f))))},exports.DeprecatedModalActions=function(e){let{children:o}=e,l=t.objectWithoutProperties(e,g);return a.createElement(v,t.objectSpread2({},l),a.createElement(i.Inline,{align:"right",space:"large"},o))},exports.DeprecatedModalBody=function(e){let{exceptionallySetClassName:o,children:r}=e,n=t.objectWithoutProperties(e,f);const{height:i}=a.useContext(b);return a.createElement(l.Box,t.objectSpread2(t.objectSpread2({},n),{},{className:o,flexGrow:"expand"===i?1:0,height:"expand"===i?"full":void 0,overflow:"auto"}),a.createElement(l.Box,{padding:"large",paddingBottom:"xxlarge"},r))},exports.DeprecatedModalCloseButton=C,exports.DeprecatedModalFooter=v,exports.DeprecatedModalHeader=function(e){let{children:o,button:i=!0,withDivider:s=!1,exceptionallySetClassName:c}=e,u=t.objectWithoutProperties(e,h);return a.createElement(a.Fragment,null,a.createElement(l.Box,t.objectSpread2(t.objectSpread2({},u),{},{as:"header",paddingLeft:"large",paddingRight:!1===i||null===i?"large":"small",paddingY:"small",className:c}),a.createElement(r.Columns,{space:"large",alignY:"center"},a.createElement(r.Column,{width:"auto"},o),!1===i||null===i?a.createElement("div",{className:m.default.headerContent}):a.createElement(r.Column,{width:"content",exceptionallySetClassName:m.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof i?a.createElement(C,{"aria-label":"Close modal",autoFocus:!1}):i))),s?a.createElement(n.Divider,null):null)};
 //# sourceMappingURL=modal.js.map

package/lib/new-components/deprecated-modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../src/new-components/deprecated-modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { DialogOverlay, DialogContent } from '@reach/dialog'\nimport FocusLock from 'react-focus-lock'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport type DeprecatedModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see DeprecatedModalHeader\n * @see DeprecatedModalFooter\n * @see DeprecatedModalBody\n * @deprecated\n */\nexport function DeprecatedModal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    autoFocus = true,\n    children,\n    ...props\n}: DeprecatedModalProps) {\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    return (\n        <DialogOverlay\n            isOpen={isOpen}\n            onDismiss={onDismiss}\n            dangerouslyBypassFocusLock // We're setting up our own focus lock below\n            className={classNames(styles.overlay, styles[height], styles[width])}\n            data-testid=\"modal-overlay\"\n        >\n            <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                <DialogContent\n                    {...props}\n                    as={Box}\n                    borderRadius=\"full\"\n                    background=\"default\"\n                    display=\"flex\"\n                    flexDirection=\"column\"\n                    overflow=\"hidden\"\n                    height={height === 'expand' ? 'full' : undefined}\n                    flexGrow={height === 'expand' ? 1 : 0}\n                    className={[exceptionallySetClassName, styles.container]}\n                >\n                    <ModalContext.Provider value={contextValue}>{children}</ModalContext.Provider>\n                </DialogContent>\n            </FocusLock>\n        </DialogOverlay>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type DeprecatedModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n    | 'width'\n    | 'align'\n> & {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see DeprecatedModalHeader\n */\nexport function DeprecatedModalCloseButton(props: DeprecatedModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <Button\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport type DeprecatedModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see DeprecatedModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see DeprecatedModal\n * @see DeprecatedModalFooter\n * @see DeprecatedModalBody\n */\nexport function DeprecatedModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: DeprecatedModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <DeprecatedModalCloseButton\n                                    aria-label=\"Close modal\"\n                                    autoFocus={false}\n                                />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport type DeprecatedModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see DeprecatedModal\n * @see DeprecatedModalHeader\n * @see DeprecatedModalFooter\n */\nexport function DeprecatedModalBody({\n    exceptionallySetClassName,\n    children,\n    ...props\n}: DeprecatedModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport type DeprecatedModalFooterProps = DivProps & {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see DeprecatedModal\n * @see DeprecatedModalHeader\n * @see DeprecatedModalBody\n */\nexport function DeprecatedModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: DeprecatedModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type DeprecatedModalActionsProps = DeprecatedModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see DeprecatedModalFooter\n */\nexport function DeprecatedModalActions({ children, ...props }: DeprecatedModalActionsProps) {\n    return (\n        <DeprecatedModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </DeprecatedModalFooter>\n    )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","DeprecatedModalCloseButton","props","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","Button","variant","onClick","icon","CloseIcon","tabIndex","DeprecatedModalFooter","exceptionallySetClassName","withDivider","Divider","Box","as","className","padding","isOpen","width","autoFocus","children","contextValue","DialogOverlay","dangerouslyBypassFocusLock","classNames","styles","overlay","FocusLock","whiteList","returnFocus","DialogContent","borderRadius","background","display","flexDirection","overflow","flexGrow","container","Provider","value","Inline","align","space","paddingBottom","button","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer"],"mappings":"wyBA0BMA,EAAeC,gBAAuC,CACxDC,eAAWC,EACXC,OAAQ,eA4DZ,SAASC,EAAmBC,GACxB,QAASA,EAAQC,gBAAkBC,UAA8C,WAAlCF,EAAQG,QAAQC,wBAsFnDC,EAA2BC,GACvC,MAAMV,UAAEA,GAAcD,aAAiBD,IAChCa,EAAmBC,GAAwBb,YAAe,IAC1Dc,EAAWC,GAAgBf,YAAe,GAajD,OAXAA,aACI,WACQc,EACAD,GAAqB,GAErBE,GAAa,KAGrB,CAACD,IAIDd,gBAACgB,4CACOL,OACJM,QAAQ,aACRC,QAASjB,EACTkB,KAAMnB,gBAACoB,kBACPC,SAAUT,EAAoB,GAAK,cA4J/BU,SAAsBC,0BAClCA,EADkCC,YAElCA,GAAc,KACXb,iCAEH,OACIX,gCACKwB,EAAcxB,gBAACyB,gBAAa,KAC7BzB,gBAAC0B,uCAAIC,GAAG,UAAahB,OAAOiB,UAAWL,EAA2BM,QAAQ,oDAnQtDC,OAC5BA,EAD4B7B,UAE5BA,EAF4BE,OAG5BA,EAAS,aAHmB4B,MAI5BA,EAAQ,SAJoBR,0BAK5BA,EAL4BS,UAM5BA,GAAY,EANgBC,SAO5BA,KACGtB,iCAEH,MAAMuB,EAAkClC,UAAc,MAASC,UAAAA,EAAWE,OAAAA,IAAW,CACjFF,EACAE,IAGJ,OACIH,gBAACmC,iBACGL,OAAQA,EACR7B,UAAWA,EACXmC,8BACAR,UAAWS,EAAWC,UAAOC,QAASD,UAAOnC,GAASmC,UAAOP,kBACjD,iBAEZ/B,gBAACwC,GAAUR,UAAWA,EAAWS,UAAWrC,EAAoBsC,aAAa,GACzE1C,gBAAC2C,mDACOhC,OACJgB,GAAID,MACJkB,aAAa,OACbC,WAAW,UACXC,QAAQ,OACRC,cAAc,SACdC,SAAS,SACT7C,OAAmB,WAAXA,EAAsB,YAASD,EACvC+C,SAAqB,WAAX9C,EAAsB,EAAI,EACpCyB,UAAW,CAACL,EAA2Be,UAAOY,aAE9ClD,gBAACD,EAAaoD,UAASC,MAAOlB,GAAeD,sDA8O1BA,SAAEA,KAAatB,iCAClD,OACIX,gBAACsB,qBAA0BX,GACvBX,gBAACqD,UAAOC,MAAM,QAAQC,MAAM,SACvBtB,iDA3EmBV,0BAChCA,EADgCU,SAEhCA,KACGtB,iCAEH,MAAMR,OAAEA,GAAWH,aAAiBD,GACpC,OACIC,gBAAC0B,yCACOf,OACJiB,UAAWL,EACX0B,SAAqB,WAAX9C,EAAsB,EAAI,EACpCA,OAAmB,WAAXA,EAAsB,YAASD,EACvC8C,SAAS,SAEThD,gBAAC0B,OAAIG,QAAQ,QAAQ2B,cAAc,WAC9BvB,wHAtFqBA,SAClCA,EADkCwB,OAElCA,GAAS,EAFyBjC,YAGlCA,GAAc,EAHoBD,0BAIlCA,KACGZ,iCAEH,OACIX,gCACIA,gBAAC0B,yCACOf,OACJgB,GAAG,SACH+B,YAAY,QACZC,cAAyB,IAAXF,GAA+B,OAAXA,EAAkB,QAAU,QAC9DG,SAAS,QACThC,UAAWL,IAEXvB,gBAAC6D,WAAQN,MAAM,QAAQO,OAAO,UAC1B9D,gBAAC+D,UAAOhC,MAAM,QAAQE,IACV,IAAXwB,GAA+B,OAAXA,EACjBzD,uBAAK4B,UAAWU,UAAO0B,gBAEvBhE,gBAAC+D,UACGhC,MAAM,UACNR,0BAA2Be,UAAO2B,8BACtB,oBAEO,kBAAXR,EACJzD,gBAACU,gBACc,cACXsB,WAAW,IAGfyB,KAMnBjC,EAAcxB,gBAACyB,gBAAa"}
+{"version":3,"file":"modal.js","sources":["../../../src/new-components/deprecated-modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { DialogOverlay, DialogContent } from '@reach/dialog'\nimport FocusLock from 'react-focus-lock'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport type DeprecatedModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see DeprecatedModalHeader\n * @see DeprecatedModalFooter\n * @see DeprecatedModalBody\n * @deprecated\n */\nexport function DeprecatedModal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    autoFocus = true,\n    children,\n    ...props\n}: DeprecatedModalProps) {\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    return (\n        <DialogOverlay\n            isOpen={isOpen}\n            onDismiss={onDismiss}\n            dangerouslyBypassFocusLock // We're setting up our own focus lock below\n            className={classNames(styles.overlay, styles[height], styles[width])}\n            data-testid=\"modal-overlay\"\n        >\n            <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                <DialogContent\n                    {...props}\n                    as={Box}\n                    borderRadius=\"full\"\n                    background=\"default\"\n                    display=\"flex\"\n                    flexDirection=\"column\"\n                    overflow=\"hidden\"\n                    height={height === 'expand' ? 'full' : undefined}\n                    flexGrow={height === 'expand' ? 1 : 0}\n                    className={[exceptionallySetClassName, styles.container]}\n                >\n                    <ModalContext.Provider value={contextValue}>{children}</ModalContext.Provider>\n                </DialogContent>\n            </FocusLock>\n        </DialogOverlay>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type DeprecatedModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n    | 'width'\n    | 'align'\n> & {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see DeprecatedModalHeader\n */\nexport function DeprecatedModalCloseButton(props: DeprecatedModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <Button\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport type DeprecatedModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see DeprecatedModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see DeprecatedModal\n * @see DeprecatedModalFooter\n * @see DeprecatedModalBody\n */\nexport function DeprecatedModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: DeprecatedModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <DeprecatedModalCloseButton\n                                    aria-label=\"Close modal\"\n                                    autoFocus={false}\n                                />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport type DeprecatedModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see DeprecatedModal\n * @see DeprecatedModalHeader\n * @see DeprecatedModalFooter\n */\nexport function DeprecatedModalBody({\n    exceptionallySetClassName,\n    children,\n    ...props\n}: DeprecatedModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport type DeprecatedModalFooterProps = DivProps & {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see DeprecatedModal\n * @see DeprecatedModalHeader\n * @see DeprecatedModalBody\n */\nexport function DeprecatedModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: DeprecatedModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type DeprecatedModalActionsProps = DeprecatedModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see DeprecatedModalFooter\n */\nexport function DeprecatedModalActions({ children, ...props }: DeprecatedModalActionsProps) {\n    return (\n        <DeprecatedModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </DeprecatedModalFooter>\n    )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","DeprecatedModalCloseButton","props","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","Button","variant","onClick","icon","CloseIcon","tabIndex","DeprecatedModalFooter","exceptionallySetClassName","withDivider","Divider","Box","as","className","padding","isOpen","width","autoFocus","children","contextValue","DialogOverlay","dangerouslyBypassFocusLock","classNames","styles","overlay","FocusLock","whiteList","returnFocus","DialogContent","borderRadius","background","display","flexDirection","overflow","flexGrow","container","Provider","value","Inline","align","space","paddingBottom","button","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer"],"mappings":"+yBA0BMA,EAAeC,gBAAuC,CACxDC,eAAWC,EACXC,OAAQ,eA4DZ,SAASC,EAAmBC,GACxB,QAASA,EAAQC,gBAAkBC,UAA8C,WAAlCF,EAAQG,QAAQC,wBAsFnDC,EAA2BC,GACvC,MAAMV,UAAEA,GAAcD,aAAiBD,IAChCa,EAAmBC,GAAwBb,YAAe,IAC1Dc,EAAWC,GAAgBf,YAAe,GAajD,OAXAA,aACI,WACQc,EACAD,GAAqB,GAErBE,GAAa,KAGrB,CAACD,IAIDd,gBAACgB,4CACOL,OACJM,QAAQ,aACRC,QAASjB,EACTkB,KAAMnB,gBAACoB,kBACPC,SAAUT,EAAoB,GAAK,cA4J/BU,SAAsBC,0BAClCA,EADkCC,YAElCA,GAAc,KACXb,iCAEH,OACIX,gCACKwB,EAAcxB,gBAACyB,gBAAa,KAC7BzB,gBAAC0B,uCAAIC,GAAG,UAAahB,OAAOiB,UAAWL,EAA2BM,QAAQ,oDAnQtDC,OAC5BA,EAD4B7B,UAE5BA,EAF4BE,OAG5BA,EAAS,aAHmB4B,MAI5BA,EAAQ,SAJoBR,0BAK5BA,EAL4BS,UAM5BA,GAAY,EANgBC,SAO5BA,KACGtB,iCAEH,MAAMuB,EAAkClC,UAAc,MAASC,UAAAA,EAAWE,OAAAA,IAAW,CACjFF,EACAE,IAGJ,OACIH,gBAACmC,iBACGL,OAAQA,EACR7B,UAAWA,EACXmC,8BACAR,UAAWS,EAAWC,UAAOC,QAASD,UAAOnC,GAASmC,UAAOP,kBACjD,iBAEZ/B,gBAACwC,GAAUR,UAAWA,EAAWS,UAAWrC,EAAoBsC,aAAa,GACzE1C,gBAAC2C,mDACOhC,OACJgB,GAAID,MACJkB,aAAa,OACbC,WAAW,UACXC,QAAQ,OACRC,cAAc,SACdC,SAAS,SACT7C,OAAmB,WAAXA,EAAsB,YAASD,EACvC+C,SAAqB,WAAX9C,EAAsB,EAAI,EACpCyB,UAAW,CAACL,EAA2Be,UAAOY,aAE9ClD,gBAACD,EAAaoD,UAASC,MAAOlB,GAAeD,sDA8O1BA,SAAEA,KAAatB,iCAClD,OACIX,gBAACsB,qBAA0BX,GACvBX,gBAACqD,UAAOC,MAAM,QAAQC,MAAM,SACvBtB,iDA3EmBV,0BAChCA,EADgCU,SAEhCA,KACGtB,iCAEH,MAAMR,OAAEA,GAAWH,aAAiBD,GACpC,OACIC,gBAAC0B,yCACOf,OACJiB,UAAWL,EACX0B,SAAqB,WAAX9C,EAAsB,EAAI,EACpCA,OAAmB,WAAXA,EAAsB,YAASD,EACvC8C,SAAS,SAEThD,gBAAC0B,OAAIG,QAAQ,QAAQ2B,cAAc,WAC9BvB,wHAtFqBA,SAClCA,EADkCwB,OAElCA,GAAS,EAFyBjC,YAGlCA,GAAc,EAHoBD,0BAIlCA,KACGZ,iCAEH,OACIX,gCACIA,gBAAC0B,yCACOf,OACJgB,GAAG,SACH+B,YAAY,QACZC,cAAyB,IAAXF,GAA+B,OAAXA,EAAkB,QAAU,QAC9DG,SAAS,QACThC,UAAWL,IAEXvB,gBAAC6D,WAAQN,MAAM,QAAQO,OAAO,UAC1B9D,gBAAC+D,UAAOhC,MAAM,QAAQE,IACV,IAAXwB,GAA+B,OAAXA,EACjBzD,uBAAK4B,UAAWU,UAAO0B,gBAEvBhE,gBAAC+D,UACGhC,MAAM,UACNR,0BAA2Be,UAAO2B,8BACtB,oBAEO,kBAAXR,EACJzD,gBAACU,gBACc,cACXsB,WAAW,IAGfyB,KAMnBjC,EAAcxB,gBAACyB,gBAAa"}

package/lib/new-components/modal/modal.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 t=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),l=e(require("classnames")),r=require("../box/box.js"),o=require("../columns/columns.js"),n=require("../divider/divider.js"),i=require("../inline/inline.js"),s=require("../button/button.js"),u=require("../icons/close-icon.js"),c=e(require("react-focus-lock")),d=require("aria-hidden"),m=require("ariakit/dialog"),p=require("ariakit/portal"),f=require("./modal.module.css.js");const h=["isOpen","onDismiss","height","width","exceptionallySetClassName","autoFocus","children"],x=["children","button","withDivider","exceptionallySetClassName"],b=["exceptionallySetClassName","children"],g=["exceptionallySetClassName","withDivider"],C=["children"],j=a.createContext({onDismiss:void 0,height:"fitContent"});function v(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function E(e){const{onDismiss:l}=a.useContext(j),[r,o]=a.useState(!1),[n,i]=a.useState(!1);return a.useEffect((function(){n?o(!0):i(!0)}),[n]),a.createElement(s.Button,t.objectSpread2(t.objectSpread2({},e),{},{variant:"quaternary",onClick:l,icon:a.createElement(u.CloseIcon,null),tabIndex:r?0:-1}))}function S(e){let{exceptionallySetClassName:l,withDivider:o=!1}=e,i=t.objectWithoutProperties(e,g);return a.createElement(a.Fragment,null,o?a.createElement(n.Divider,null):null,a.createElement(r.Box,t.objectSpread2(t.objectSpread2({as:"footer"},i),{},{className:l,padding:"large"})))}exports.Modal=function(e){let{isOpen:o,onDismiss:n,height:i="fitContent",width:s="medium",exceptionallySetClassName:u,autoFocus:x=!0,children:b}=e,g=t.objectWithoutProperties(e,h);const C=a.useCallback(e=>{e||null==n||n()},[n]),E=m.useDialogState({visible:o,setVisible:C}),S=a.useMemo(()=>({onDismiss:n,height:i}),[n,i]),y=a.useRef(null),w=a.useRef(null),N=a.useRef(null),q=a.useCallback(e=>{var t,a;null!=(t=w.current)&&t.contains(e.target)||null==(a=N.current)||!a.contains(e.target)||(e.stopPropagation(),null==n||n())},[n]);return a.useLayoutEffect((function(){if(o&&y.current)return d.hideOthers(y.current)}),[o]),o?a.createElement(p.Portal,{portalRef:y},a.createElement(r.Box,{"data-testid":"modal-overlay","data-overlay":!0,className:l(f.default.overlay,f.default[i],f.default[s]),onClick:q,ref:N},a.createElement(c,{autoFocus:x,whiteList:v,returnFocus:!0},a.createElement(m.Dialog,t.objectSpread2(t.objectSpread2({},g),{},{ref:w,as:r.Box,state:E,hideOnEscape:!0,preventBodyScroll:!0,borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===i?"full":void 0,flexGrow:"expand"===i?1:0,className:[u,f.default.container],modal:!1,autoFocus:!1,autoFocusOnShow:!1,autoFocusOnHide:!1,portal:!1,backdrop:!1,hideOnInteractOutside:!1}),a.createElement(j.Provider,{value:S},b))))):null},exports.ModalActions=function(e){let{children:l}=e,r=t.objectWithoutProperties(e,C);return a.createElement(S,t.objectSpread2({},r),a.createElement(i.Inline,{align:"right",space:"large"},l))},exports.ModalBody=function(e){let{exceptionallySetClassName:l,children:o}=e,n=t.objectWithoutProperties(e,b);const{height:i}=a.useContext(j);return a.createElement(r.Box,t.objectSpread2(t.objectSpread2({},n),{},{className:l,flexGrow:"expand"===i?1:0,height:"expand"===i?"full":void 0,overflow:"auto"}),a.createElement(r.Box,{padding:"large",paddingBottom:"xxlarge"},o))},exports.ModalCloseButton=E,exports.ModalFooter=S,exports.ModalHeader=function(e){let{children:l,button:i=!0,withDivider:s=!1,exceptionallySetClassName:u}=e,c=t.objectWithoutProperties(e,x);return a.createElement(a.Fragment,null,a.createElement(r.Box,t.objectSpread2(t.objectSpread2({},c),{},{as:"header",paddingLeft:"large",paddingRight:!1===i||null===i?"large":"small",paddingY:"small",className:u}),a.createElement(o.Columns,{space:"large",alignY:"center"},a.createElement(o.Column,{width:"auto"},l),!1===i||null===i?a.createElement("div",{className:f.default.headerContent}):a.createElement(o.Column,{width:"content",exceptionallySetClassName:f.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof i?a.createElement(E,{"aria-label":"Close modal",autoFocus:!1}):i))),s?a.createElement(n.Divider,null):null)};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),l=(e(a),e(require("classnames"))),r=require("../box/box.js"),o=require("../columns/columns.js"),n=require("../divider/divider.js"),i=require("../inline/inline.js"),s=require("../button/button.js"),u=require("../icons/close-icon.js"),c=require("ariakit/portal"),d=e(require("react-focus-lock")),m=require("aria-hidden"),p=require("ariakit/dialog"),f=require("./modal.module.css.js");const h=["isOpen","onDismiss","height","width","exceptionallySetClassName","autoFocus","children"],x=["children","button","withDivider","exceptionallySetClassName"],b=["exceptionallySetClassName","children"],g=["exceptionallySetClassName","withDivider"],C=["children"],j=a.createContext({onDismiss:void 0,height:"fitContent"});function v(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function E(e){const{onDismiss:l}=a.useContext(j),[r,o]=a.useState(!1),[n,i]=a.useState(!1);return a.useEffect((function(){n?o(!0):i(!0)}),[n]),a.createElement(s.Button,t.objectSpread2(t.objectSpread2({},e),{},{variant:"quaternary",onClick:l,icon:a.createElement(u.CloseIcon,null),tabIndex:r?0:-1}))}function S(e){let{exceptionallySetClassName:l,withDivider:o=!1}=e,i=t.objectWithoutProperties(e,g);return a.createElement(a.Fragment,null,o?a.createElement(n.Divider,null):null,a.createElement(r.Box,t.objectSpread2(t.objectSpread2({as:"footer"},i),{},{className:l,padding:"large"})))}exports.Modal=function(e){let{isOpen:o,onDismiss:n,height:i="fitContent",width:s="medium",exceptionallySetClassName:u,autoFocus:x=!0,children:b}=e,g=t.objectWithoutProperties(e,h);const C=a.useCallback(e=>{e||null==n||n()},[n]),E=p.useDialogState({visible:o,setVisible:C}),S=a.useMemo(()=>({onDismiss:n,height:i}),[n,i]),y=a.useRef(null),w=a.useRef(null),N=a.useRef(null),q=a.useCallback(e=>{var t,a;null!=(t=w.current)&&t.contains(e.target)||null==(a=N.current)||!a.contains(e.target)||(e.stopPropagation(),null==n||n())},[n]);return a.useLayoutEffect((function(){if(o&&y.current)return m.hideOthers(y.current)}),[o]),o?a.createElement(c.Portal,{portalRef:y},a.createElement(r.Box,{"data-testid":"modal-overlay","data-overlay":!0,className:l(f.default.overlay,f.default[i],f.default[s]),onClick:q,ref:N},a.createElement(d,{autoFocus:x,whiteList:v,returnFocus:!0},a.createElement(p.Dialog,t.objectSpread2(t.objectSpread2({},g),{},{ref:w,as:r.Box,state:E,hideOnEscape:!0,preventBodyScroll:!0,borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===i?"full":void 0,flexGrow:"expand"===i?1:0,className:[u,f.default.container],modal:!1,autoFocus:!1,autoFocusOnShow:!1,autoFocusOnHide:!1,portal:!1,backdrop:!1,hideOnInteractOutside:!1}),a.createElement(j.Provider,{value:S},b))))):null},exports.ModalActions=function(e){let{children:l}=e,r=t.objectWithoutProperties(e,C);return a.createElement(S,t.objectSpread2({},r),a.createElement(i.Inline,{align:"right",space:"large"},l))},exports.ModalBody=function(e){let{exceptionallySetClassName:l,children:o}=e,n=t.objectWithoutProperties(e,b);const{height:i}=a.useContext(j);return a.createElement(r.Box,t.objectSpread2(t.objectSpread2({},n),{},{className:l,flexGrow:"expand"===i?1:0,height:"expand"===i?"full":void 0,overflow:"auto"}),a.createElement(r.Box,{padding:"large",paddingBottom:"xxlarge"},o))},exports.ModalCloseButton=E,exports.ModalFooter=S,exports.ModalHeader=function(e){let{children:l,button:i=!0,withDivider:s=!1,exceptionallySetClassName:u}=e,c=t.objectWithoutProperties(e,x);return a.createElement(a.Fragment,null,a.createElement(r.Box,t.objectSpread2(t.objectSpread2({},c),{},{as:"header",paddingLeft:"large",paddingRight:!1===i||null===i?"large":"small",paddingY:"small",className:u}),a.createElement(o.Columns,{space:"large",alignY:"center"},a.createElement(o.Column,{width:"auto"},l),!1===i||null===i?a.createElement("div",{className:f.default.headerContent}):a.createElement(o.Column,{width:"content",exceptionallySetClassName:f.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof i?a.createElement(E,{"aria-label":"Close modal",autoFocus:!1}):i))),s?a.createElement(n.Divider,null):null)};
 //# sourceMappingURL=modal.js.map