@doist/reactist 10.0.0 → 11.2.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 { forwardRefWithAs } from './type-helpers'\n\n//\n// Reactist menu is a thin wrapper around Reakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Reakit from 'reakit/Menu'\nimport { PopoverBackdrop } from 'reakit/Popover'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = Reakit.MenuStateReturn & {\n    handleItemSelect: (value: string | null | undefined) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Reakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n    // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n    // This is however of little consequence since this value is only used if some of the components\n    // are used outside Menu, something that should not happen and we do not support.\n    // @ts-expect-error\n    {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Reakit.MenuInitialState, 'visible'> & {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const state = Reakit.useMenuState({ loop: true, ...props })\n\n    const handleItemSelect = React.useCallback(\n        function handleItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n        },\n        [onItemSelect],\n    )\n\n    const value: MenuContextState = React.useMemo(\n        () => ({\n            ...state,\n            handleItemSelect,\n        }),\n        [state, handleItemSelect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = forwardRefWithAs<'button'>(function MenuButton({ className, ...props }, ref) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    return (\n        <Reakit.MenuButton\n            {...props}\n            {...state}\n            ref={ref}\n            className={classNames('reactist_menubutton', className)}\n        />\n    )\n})\n\n//\n// MenuList\n//\n\ntype MenuBackdropProps = Reakit.MenuStateReturn & {\n    children: React.ReactNode\n}\n\nconst BACKDROP_STYLE: React.CSSProperties = {\n    width: '100%',\n    height: '100%',\n    position: 'fixed',\n    top: 0,\n    left: 0,\n}\n\n/**\n * Internal component to provide a backdrop/overlay to all menus. This is needed because reakit's\n * menus do not show an overlay by default.\n */\nfunction MenuBackdrop({\n    baseId,\n    visible,\n    animated,\n    animating,\n    stopAnimation,\n    modal,\n    children,\n}: MenuBackdropProps) {\n    return (\n        <PopoverBackdrop\n            baseId={baseId}\n            visible={visible}\n            animated={animated}\n            animating={animating}\n            stopAnimation={stopAnimation}\n            modal={modal}\n            style={BACKDROP_STYLE}\n        >\n            {children}\n        </PopoverBackdrop>\n    )\n}\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = forwardRefWithAs<'div'>(function MenuList({ className, ...props }, ref) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    return state.visible ? (\n        <MenuBackdrop {...state}>\n            <Reakit.Menu\n                {...props}\n                {...state}\n                ref={ref}\n                className={classNames('reactist_menulist', className)}\n            />\n        </MenuBackdrop>\n    ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n    /**\n     * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n     * `onItemSelect` when you provide that instead of (or alongside) providing individual\n     * `onSelect` callbacks to each menu item.\n     */\n    value?: string\n    /**\n     * The content inside the menu item.\n     */\n    children: React.ReactNode\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n    /**\n     * A class name to apply to the menu item element.\n     */\n    className?: string\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = forwardRefWithAs<'button', MenuItemProps>(function MenuItem(\n    { value, children, onSelect, hideOnSelect = true, onClick, ...props },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    const { hide } = state\n\n    const handleClick = React.useCallback(\n        function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n\n    return (\n        <Reakit.MenuItem {...props} {...state} ref={ref} onClick={handleClick}>\n            {children}\n        </Reakit.MenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n *   <MenuButton>More options</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Preferences\" />\n *     <MenuItem label=\"Sign out\" />\n *   </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLButtonElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect, ...props },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, ...state } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = state\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value) {\n            if (onItemSelect) onItemSelect(value)\n            parentMenuItemSelect(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n\n    return (\n        <Reakit.MenuItem {...state} {...props} ref={ref}>\n            {(buttonProps) => (\n                <Menu onItemSelect={handleSubItemSelect}>\n                    {React.cloneElement(button as React.ReactElement, {\n                        ...buttonProps,\n                        className: classNames(buttonProps.className, 'reactist_submenu_button'),\n                    })}\n                    {list}\n                </Menu>\n            )}\n        </Reakit.MenuItem>\n    )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = NativeProps<HTMLDivElement> & {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = forwardRefWithAs<'div', MenuGroupProps>(function MenuGroud(\n    { label, children, ...props },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    return (\n        <Reakit.MenuGroup ref={ref} {...props} {...state}>\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </Reakit.MenuGroup>\n    )\n})\n\nexport { Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuItemProps, SubMenuProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","state","Reakit","loop","handleItemSelect","value","Provider","MenuButton","forwardRefWithAs","ref","className","classNames","BACKDROP_STYLE","width","height","position","top","left","MenuBackdrop","PopoverBackdrop","baseId","visible","animated","animating","stopAnimation","modal","style","MenuList","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","event","shouldClose","defaultPrevented","undefined","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","toArray","button","list","buttonProps","MenuGroup","label","role"],"mappings":"gVAyBMA,EAAcC,gBAMhB,IA4BJ,SAASC,SAAOC,IAAAA,SAAUC,IAAAA,aAAiBC,gEACjCC,EAAQC,gCAAsBC,MAAM,GAASH,IAE7CI,EAAmBR,eACrB,SAA0BS,GAClBN,GAAcA,EAAaM,KAEnC,CAACN,IAGCM,EAA0BT,WAC5B,qDACOK,OACHG,iBAAAA,MAEJ,CAACH,EAAOG,WAGLR,gBAACD,EAAYW,UAASD,MAAOA,GAAQP,OAU1CS,EAAaC,oBAA2B,WAA6CC,OAAvBC,IAAAA,UAAcV,oDACvCJ,aAAiBD,GAA3BM,gEAEzBL,gBAACM,8BACOF,EACAC,GACJQ,IAAKA,EACLC,UAAWC,EAAW,sBAAuBD,SAanDE,EAAsC,CACxCC,MAAO,OACPC,OAAQ,OACRC,SAAU,QACVC,IAAK,EACLC,KAAM,GAOV,SAASC,YAUDtB,gBAACuB,mBACGC,SAVRA,OAWQC,UAVRA,QAWQC,WAVRA,SAWQC,YAVRA,UAWQC,gBAVRA,cAWQC,QAVRA,MAWQC,MAAOd,KAVfd,cAoBE6B,EAAWnB,oBAAwB,WAA2CC,OAAvBC,IAAAA,UAAcV,oDAChCJ,aAAiBD,GAA3BM,gEACtBA,EAAMoB,QACTzB,gBAACsB,mBAAiBjB,GACdL,gBAACM,wBACOF,EACAC,GACJQ,IAAKA,EACLC,UAAWC,EAAW,oBAAqBD,OAGnD,QAkEFkB,EAAWpB,oBAA0C,WAEvDC,OADEJ,IAAAA,MAAOP,IAAAA,SAAU+B,IAAAA,aAAUC,aAAAA,gBAAqBC,IAAAA,QAAY/B,+FAGvBJ,aAAiBD,GAAhDS,IAAAA,iBAAqBH,yDACrB+B,EAAS/B,EAAT+B,KAEFC,EAAcrC,eAChB,SAAqBsC,GACjBH,MAAAA,GAAAA,EAAUG,OAGJC,GAAiC,KADnCN,IAAaK,EAAME,iBAAmBP,SAAaQ,IACPP,EAChD1B,EAAiBC,GACb8B,GAAaH,MAErB,CAACH,EAAUE,EAAS3B,EAAkB0B,EAAcE,EAAM3B,WAI1DT,gBAACM,4BAAoBF,EAAWC,GAAOQ,IAAKA,EAAKsB,QAASE,IACrDnC,MAgCPwC,EAAU1C,cAAkD,WAE9Da,OADEX,IAAAA,SAAUC,IAAAA,aAAiBC,kEAGgCJ,aAAiBD,GAApD4C,IAAlBnC,iBAA2CH,yDACrCuC,EAAmBvC,EAAzB+B,KAEFS,EAAsB7C,eACxB,SAA6BS,GACrBN,GAAcA,EAAaM,GAC/BkC,EAAqBlC,GACrBmC,MAEJ,CAACA,EAAgBD,EAAsBxC,MAGpBH,WAAe8C,QAAQ5C,GAAvC6C,OAAQC,cAGXhD,gBAACM,4BAAoBD,EAAWD,GAAOS,IAAKA,KACvC,SAACoC,UACEjD,gBAACC,GAAKE,aAAc0C,GACf7C,eAAmB+C,qCACbE,OACHnC,UAAWC,EAAWkC,EAAYnC,UAAW,8BAEhDkC,SAwBfE,EAAYtC,oBAAwC,WAEtDC,OADEsC,IAAAA,MAAOjD,IAAAA,SAAaE,2DAGiBJ,aAAiBD,GAA3BM,gEAEzBL,gBAACM,2BAAiBO,IAAKA,GAAST,EAAWC,GACtC8C,EACGnD,uBAAKoD,KAAK,eAAetC,UAAU,6BAC9BqC,GAEL,KACHjD"}
+{"version":3,"file":"menu.js","sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { usePrevious } from '../../hooks/use-previous'\n\n//\n// Reactist menu is a thin wrapper around Reakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Reakit from 'reakit/Menu'\nimport { PopoverBackdrop } from 'reakit/Popover'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = Reakit.MenuStateReturn & {\n    handleItemSelect: (value: string | null | undefined) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Reakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n    // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n    // This is however of little consequence since this value is only used if some of the components\n    // are used outside Menu, something that should not happen and we do not support.\n    // @ts-expect-error\n    {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Reakit.MenuInitialState, 'visible'> & {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const state = Reakit.useMenuState({ loop: true, unstable_offset: [8, 8], ...props })\n\n    const handleItemSelect = React.useCallback(\n        function handleItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n        },\n        [onItemSelect],\n    )\n\n    const value: MenuContextState = React.useMemo(\n        () => ({\n            ...state,\n            handleItemSelect,\n        }),\n        [state, handleItemSelect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Reakit.MenuButtonProps, keyof Reakit.MenuStateReturn | 'className'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    return (\n        <Reakit.MenuButton\n            {...props}\n            {...state}\n            ref={ref}\n            className={classNames('reactist_menubutton', exceptionallySetClassName)}\n        />\n    )\n})\n\n//\n// MenuList\n//\n\ntype MenuBackdropProps = Reakit.MenuStateReturn & {\n    children: React.ReactNode\n}\n\nconst BACKDROP_STYLE: React.CSSProperties = {\n    width: '100%',\n    height: '100%',\n    position: 'fixed',\n    top: 0,\n    left: 0,\n}\n\n/**\n * Internal component to provide a backdrop/overlay to all menus. This is needed because reakit's\n * menus do not show an overlay by default.\n */\nfunction MenuBackdrop({\n    baseId,\n    visible,\n    animated,\n    animating,\n    stopAnimation,\n    modal,\n    children,\n}: MenuBackdropProps) {\n    return (\n        <PopoverBackdrop\n            baseId={baseId}\n            visible={visible}\n            animated={animated}\n            animating={animating}\n            stopAnimation={stopAnimation}\n            modal={modal}\n            style={BACKDROP_STYLE}\n        >\n            {children}\n        </PopoverBackdrop>\n    )\n}\n\ntype MenuListProps = Omit<Reakit.MenuProps, keyof Reakit.MenuStateReturn | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    const previousVisible = usePrevious(state.visible)\n\n    React.useEffect(\n        function focusTriggerOnClose() {\n            if (state.visible === false && previousVisible === true) {\n                state.unstable_referenceRef?.current?.focus()\n            }\n        },\n        [state.visible, previousVisible, state.unstable_referenceRef],\n    )\n\n    return state.visible ? (\n        <MenuBackdrop {...state}>\n            <Reakit.Menu\n                {...props}\n                {...state}\n                ref={ref}\n                className={classNames('reactist_menulist', exceptionallySetClassName)}\n            />\n        </MenuBackdrop>\n    ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n    /**\n     * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n     * `onItemSelect` when you provide that instead of (or alongside) providing individual\n     * `onSelect` callbacks to each menu item.\n     */\n    value?: string\n    /**\n     * The content inside the menu item.\n     */\n    children: React.ReactNode\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n    {\n        value,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    const { hide } = state\n\n    const handleClick = React.useCallback(\n        function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n\n    return (\n        <Reakit.MenuItem\n            {...props}\n            {...state}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n        >\n            {children}\n        </Reakit.MenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n *   <MenuButton>More options</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Preferences\" />\n *     <MenuItem label=\"Sign out\" />\n *   </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLButtonElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect, ...props },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, ...state } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = state\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value) {\n            if (onItemSelect) onItemSelect(value)\n            parentMenuItemSelect(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n\n    return (\n        <Reakit.MenuItem {...state} {...props} ref={ref}>\n            {(buttonProps) => (\n                <Menu onItemSelect={handleSubItemSelect}>\n                    {React.cloneElement(button as React.ReactElement, {\n                        ...buttonProps,\n                        className: classNames(buttonProps.className, 'reactist_submenu_button'),\n                    })}\n                    {list}\n                </Menu>\n            )}\n        </Reakit.MenuItem>\n    )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroud(\n    { label, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    return (\n        <Reakit.MenuGroup ref={ref} {...props} {...state} className={exceptionallySetClassName}>\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </Reakit.MenuGroup>\n    )\n})\n\nexport { Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, SubMenuProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","state","Reakit","loop","unstable_offset","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","BACKDROP_STYLE","width","height","position","top","left","MenuBackdrop","PopoverBackdrop","baseId","visible","animated","animating","stopAnimation","modal","style","MenuList","previousVisible","usePrevious","unstable_referenceRef","current","focus","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","event","shouldClose","defaultPrevented","undefined","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","toArray","button","list","buttonProps","MenuGroup","label","role"],"mappings":"ywBA0BMA,EAAcC,gBAMhB,IA4BJ,SAASC,SAAOC,IAAAA,SAAUC,IAAAA,aAAiBC,sCACjCC,EAAQC,gCAAsBC,MAAM,EAAMC,gBAAiB,CAAC,EAAG,IAAOJ,IAEtEK,EAAmBT,eACrB,SAA0BU,GAClBP,GAAcA,EAAaO,KAEnC,CAACP,IAGCO,EAA0BV,WAC5B,qDACOK,OACHI,iBAAAA,MAEJ,CAACJ,EAAOI,WAGLT,gBAACD,EAAYY,UAASD,MAAOA,GAAQR,OAY1CU,EAAaC,wBAAgD,WAE/DC,OADEC,IAAAA,0BAA8BX,wCAGOJ,aAAiBD,GAA3BM,6CAEzBL,gBAACM,8BACOF,EACAC,GACJS,IAAKA,EACLE,UAAWC,EAAW,sBAAuBF,SAanDG,EAAsC,CACxCC,MAAO,OACPC,OAAQ,OACRC,SAAU,QACVC,IAAK,EACLC,KAAM,GAOV,SAASC,YAUDxB,gBAACyB,mBACGC,SAVRA,OAWQC,UAVRA,QAWQC,WAVRA,SAWQC,YAVRA,UAWQC,gBAVRA,cAWQC,QAVRA,MAWQC,MAAOd,KAVfhB,cAsBE+B,EAAWpB,wBAA2C,WAExDC,OADEC,IAAAA,0BAA8BX,wCAGOJ,aAAiBD,GAA3BM,sCACvB6B,EAAkBC,cAAY9B,EAAMsB,gBAE1C3B,aACI,oBAC0B,IAAlBK,EAAMsB,UAAyC,IAApBO,cAC3B7B,EAAM+B,gDAAuBC,wBAASC,WAG9C,CAACjC,EAAMsB,QAASO,EAAiB7B,EAAM+B,wBAGpC/B,EAAMsB,QACT3B,gBAACwB,mBAAiBnB,GACdL,gBAACM,wBACOF,EACAC,GACJS,IAAKA,EACLE,UAAWC,EAAW,oBAAqBF,OAGnD,QA8DFwB,EAAW1B,wBAA8C,WAU3DC,OARIJ,IAAAA,MACAR,IAAAA,SACAsC,IAAAA,aACAC,aAAAA,gBACAC,IAAAA,QACA3B,IAAAA,0BACGX,wCAIgCJ,aAAiBD,GAAhDU,IAAAA,iBAAqBJ,sCACrBsC,EAAStC,EAATsC,KAEFC,EAAc5C,eAChB,SAAqB6C,GACjBH,MAAAA,GAAAA,EAAUG,OAGJC,GAAiC,KADnCN,IAAaK,EAAME,iBAAmBP,SAAaQ,IACPP,EAChDhC,EAAiBC,GACboC,GAAaH,MAErB,CAACH,EAAUE,EAASjC,EAAkBgC,EAAcE,EAAMjC,WAI1DV,gBAACM,4BACOF,EACAC,GACJS,IAAKA,EACL4B,QAASE,EACT5B,UAAWD,IAEVb,MAgCP+C,EAAUjD,cAAkD,WAE9Dc,OADEZ,IAAAA,SAAUC,IAAAA,aAAiBC,wCAGgCJ,aAAiBD,GAApDmD,IAAlBzC,iBAA2CJ,sCACrC8C,EAAmB9C,EAAzBsC,KAEFS,EAAsBpD,eACxB,SAA6BU,GACrBP,GAAcA,EAAaO,GAC/BwC,EAAqBxC,GACrByC,MAEJ,CAACA,EAAgBD,EAAsB/C,MAGpBH,WAAeqD,QAAQnD,GAAvCoD,OAAQC,cAGXvD,gBAACM,4BAAoBD,EAAWD,GAAOU,IAAKA,KACvC,SAAC0C,UACExD,gBAACC,GAAKE,aAAciD,GACfpD,eAAmBsD,qCACbE,OACHxC,UAAWC,EAAWuC,EAAYxC,UAAW,8BAEhDuC,SAwBfE,EAAY5C,wBAA4C,WAE1DC,OADE4C,IAAAA,MAAOxD,IAAAA,SAAUa,IAAAA,0BAA8BX,wCAGVJ,aAAiBD,GAA3BM,6CAEzBL,gBAACM,2BAAiBQ,IAAKA,GAASV,EAAWC,GAAOW,UAAWD,IACxD2C,EACG1D,uBAAK2D,KAAK,eAAe3C,UAAU,6BAC9B0C,GAEL,KACHxD"}

package/lib/components/menu/menu.test.d.ts

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

package/lib/components/notification/notification.d.ts

@@ -11,6 +11,8 @@ declare type NotificationProps = {
     onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     closeAltText?: string;
     className?: string;
-} & JSX.IntrinsicElements['div'];
-declare function Notification({ id, icon, title, subtitle, children, customCloseButton, onClick, onClose, closeAltText, className, ...rest }: NotificationProps): JSX.Element;
+    /** Indicates that the notification will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */
+    'aria-live'?: 'off' | 'polite' | 'assertive';
+} & Omit<JSX.IntrinsicElements['div'], 'aria-live'>;
+declare function Notification({ id, icon, title, subtitle, children, customCloseButton, onClick, onClose, closeAltText, className, 'aria-live': ariaLive, ...rest }: NotificationProps): JSX.Element;
 export { Notification };

package/lib/components/notification/notification.js

@@ -1,2 +1,2 @@
-"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=t(require("react")),l=t(require("classnames")),i=require("../../_virtual/_rollupPluginBabelHelpers.js"),n=require("../icons/CloseIcon.svg.js");exports.Notification=function(t){var o=t.id,a=t.icon,c=t.title,s=t.subtitle,r=t.children,u=t.customCloseButton,b=t.onClick,d=t.onClose,m=t.closeAltText,f=void 0===m?"Close":m,_=t.className,C=i.objectWithoutPropertiesLoose(t,["id","icon","title","subtitle","children","customCloseButton","onClick","onClose","closeAltText","className"]),N=c?o+"-title":null,g=N?{id:N}:null,j=s?o+"-subtitle":null,p=j?{id:j}:null,v=r?o+"-content":null,E=v?{"aria-labelledby":v}:N?{"aria-labelledby":N}:null,h=j&&!r?{"aria-describedby":j}:null,y=e.createElement("div",Object.assign({className:"reactist-notification__content"},r?{id:o+"-content"}:null),null!=r?r:e.createElement(e.Fragment,null,c?e.createElement("h3",Object.assign({className:"reactist-notification__title"},g),c):null,s?e.createElement("p",Object.assign({className:"reactist-notification__subtitle"},p),s):null)),B=e.createElement("div",{className:"reactist-notification__icon-content-group"},null!=a?a:null,y);return e.createElement("div",Object.assign({id:o,role:"dialog",className:l("reactist-notification",_,{"reactist-notification--with-button":Boolean(b),"reactist-notification--with-close-button":Boolean(d)})},E,h,C),b?e.createElement("button",{className:"reactist-notification__button",onClick:b},B):B,d?e.createElement("button",{className:"reactist-notification__close-button",onClick:d,"aria-label":f},null!=u?u:e.createElement(n.default,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"),l=e(require("react")),i=e(require("classnames")),n=require("../icons/CloseIcon.svg.js"),a=["id","icon","title","subtitle","children","customCloseButton","onClick","onClose","closeAltText","className","aria-live"];exports.Notification=function(e){var o=e.id,c=e.icon,s=e.title,r=e.subtitle,u=e.children,b=e.customCloseButton,d=e.onClick,m=e.onClose,f=e.closeAltText,_=void 0===f?"Close":f,v=e.className,p=e["aria-live"],C=void 0===p?"polite":p,N=t.objectWithoutPropertiesLoose(e,a),j=s?o+"-title":null,E=j?{id:j}:null,g=r?o+"-subtitle":null,h=g?{id:g}:null,y=u?o+"-content":null,B=y?{"aria-labelledby":y}:j?{"aria-labelledby":j}:null,O=g&&!u?{"aria-describedby":g}:null,k=l.createElement("div",Object.assign({className:"reactist-notification__content"},u?{id:o+"-content"}:null),null!=u?u:l.createElement(l.Fragment,null,s?l.createElement("h3",Object.assign({className:"reactist-notification__title"},E),s):null,r?l.createElement("p",Object.assign({className:"reactist-notification__subtitle"},h),r):null)),q=l.createElement("div",{className:"reactist-notification__icon-content-group"},null!=c?c:null,k);return l.createElement("div",Object.assign({id:o,role:"alert",className:i("reactist-notification",v,{"reactist-notification--with-button":Boolean(d),"reactist-notification--with-close-button":Boolean(m)}),"aria-live":C},B,O,N),d?l.createElement("button",{className:"reactist-notification__button",onClick:d},q):q,m?l.createElement("button",{className:"reactist-notification__close-button",onClick:m,"aria-label":_},null!=b?b:l.createElement(n.default,null)):null)};
 //# sourceMappingURL=notification.js.map

package/lib/components/notification/notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification.js","sources":["../../../src/components/notification/notification.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\nimport CloseIcon from '../icons/CloseIcon.svg'\nimport './notification.less'\n\ntype NotificationProps = {\n    id: string\n    icon?: React.ReactNode\n    title?: React.ReactNode\n    subtitle?: React.ReactNode\n    children?: React.ReactNode\n    customCloseButton?: React.ReactNode\n    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n    onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n    closeAltText?: string\n    className?: string\n} & JSX.IntrinsicElements['div']\n\nfunction Notification({\n    id,\n    icon,\n    title,\n    subtitle,\n    children,\n    customCloseButton,\n    onClick,\n    onClose,\n    closeAltText = 'Close',\n    className,\n    ...rest\n}: NotificationProps) {\n    const titleId = title ? `${id}-title` : null\n    const titleIdAttribute = titleId ? { id: titleId } : null\n    const subtitleId = subtitle ? `${id}-subtitle` : null\n    const subtitleIdAttribute = subtitleId ? { id: subtitleId } : null\n    const contentId = children ? `${id}-content` : null\n    const contentIdAttribute = children ? { id: `${id}-content` } : null\n    const ariaLabelledBy = contentId\n        ? { 'aria-labelledby': contentId }\n        : titleId\n        ? { 'aria-labelledby': titleId }\n        : null\n    const ariaDescribedBy = subtitleId && !children ? { 'aria-describedby': subtitleId } : null\n\n    const notificationContent = (\n        <div className=\"reactist-notification__content\" {...contentIdAttribute}>\n            {children ?? (\n                <>\n                    {title ? (\n                        <h3 className=\"reactist-notification__title\" {...titleIdAttribute}>\n                            {title}\n                        </h3>\n                    ) : null}\n                    {subtitle ? (\n                        <p className=\"reactist-notification__subtitle\" {...subtitleIdAttribute}>\n                            {subtitle}\n                        </p>\n                    ) : null}\n                </>\n            )}\n        </div>\n    )\n    const notificationBody = (\n        <div className=\"reactist-notification__icon-content-group\">\n            {icon ?? null}\n            {notificationContent}\n        </div>\n    )\n\n    return (\n        <div\n            id={id}\n            role=\"dialog\"\n            className={classNames('reactist-notification', className, {\n                'reactist-notification--with-button': Boolean(onClick),\n                'reactist-notification--with-close-button': Boolean(onClose),\n            })}\n            {...ariaLabelledBy}\n            {...ariaDescribedBy}\n            {...rest}\n        >\n            {onClick ? (\n                <button className=\"reactist-notification__button\" onClick={onClick}>\n                    {notificationBody}\n                </button>\n            ) : (\n                notificationBody\n            )}\n\n            {onClose ? (\n                <button\n                    className=\"reactist-notification__close-button\"\n                    onClick={onClose}\n                    aria-label={closeAltText}\n                >\n                    {customCloseButton ?? <CloseIcon />}\n                </button>\n            ) : null}\n        </div>\n    )\n}\n\nexport { Notification }\n"],"names":["id","icon","title","subtitle","children","customCloseButton","onClick","onClose","closeAltText","className","rest","titleId","titleIdAttribute","subtitleId","subtitleIdAttribute","contentId","ariaLabelledBy","ariaDescribedBy","notificationContent","React","notificationBody","role","classNames","Boolean","CloseIcon"],"mappings":"oTAkBA,gBACIA,IAAAA,GACAC,IAAAA,KACAC,IAAAA,MACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,kBACAC,IAAAA,QACAC,IAAAA,YACAC,aAAAA,aAAe,UACfC,IAAAA,UACGC,mJAEGC,EAAUT,EAAWF,WAAa,KAClCY,EAAmBD,EAAU,CAAEX,GAAIW,GAAY,KAC/CE,EAAaV,EAAcH,cAAgB,KAC3Cc,EAAsBD,EAAa,CAAEb,GAAIa,GAAe,KACxDE,EAAYX,EAAcJ,aAAe,KAEzCgB,EAAiBD,EACjB,mBAAqBA,GACrBJ,EACA,mBAAqBA,GACrB,KACAM,EAAkBJ,IAAeT,EAAW,oBAAsBS,GAAe,KAEjFK,EACFC,qCAAKV,UAAU,kCATQL,EAAW,CAAEJ,GAAOA,cAAiB,MAUvDI,MAAAA,EAAAA,EACGe,gCACKjB,EACGiB,oCAAIV,UAAU,gCAAmCG,GAC5CV,GAEL,KACHC,EACGgB,mCAAGV,UAAU,mCAAsCK,GAC9CX,GAEL,OAKdiB,EACFD,uBAAKV,UAAU,6CACVR,MAAAA,EAAAA,EAAQ,KACRiB,UAKLC,qCACInB,GAAIA,EACJqB,KAAK,SACLZ,UAAWa,EAAW,wBAAyBb,EAAW,sCAChBc,QAAQjB,8CACFiB,QAAQhB,MAEpDS,EACAC,EACAP,GAEHJ,EACGa,0BAAQV,UAAU,gCAAgCH,QAASA,GACtDc,GAGLA,EAGHb,EACGY,0BACIV,UAAU,sCACVH,QAASC,eACGC,GAEXH,MAAAA,EAAAA,EAAqBc,gBAACK,iBAE3B"}
+{"version":3,"file":"notification.js","sources":["../../../src/components/notification/notification.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\nimport CloseIcon from '../icons/CloseIcon.svg'\nimport './notification.less'\n\ntype NotificationProps = {\n    id: string\n    icon?: React.ReactNode\n    title?: React.ReactNode\n    subtitle?: React.ReactNode\n    children?: React.ReactNode\n    customCloseButton?: React.ReactNode\n    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n    onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n    closeAltText?: string\n    className?: string\n    /** Indicates that the notification will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */\n    'aria-live'?: 'off' | 'polite' | 'assertive'\n} & Omit<JSX.IntrinsicElements['div'], 'aria-live'>\n\nfunction Notification({\n    id,\n    icon,\n    title,\n    subtitle,\n    children,\n    customCloseButton,\n    onClick,\n    onClose,\n    closeAltText = 'Close',\n    className,\n    'aria-live': ariaLive = 'polite',\n    ...rest\n}: NotificationProps) {\n    const titleId = title ? `${id}-title` : null\n    const titleIdAttribute = titleId ? { id: titleId } : null\n    const subtitleId = subtitle ? `${id}-subtitle` : null\n    const subtitleIdAttribute = subtitleId ? { id: subtitleId } : null\n    const contentId = children ? `${id}-content` : null\n    const contentIdAttribute = children ? { id: `${id}-content` } : null\n    const ariaLabelledBy = contentId\n        ? { 'aria-labelledby': contentId }\n        : titleId\n        ? { 'aria-labelledby': titleId }\n        : null\n    const ariaDescribedBy = subtitleId && !children ? { 'aria-describedby': subtitleId } : null\n\n    const notificationContent = (\n        <div className=\"reactist-notification__content\" {...contentIdAttribute}>\n            {children ?? (\n                <>\n                    {title ? (\n                        <h3 className=\"reactist-notification__title\" {...titleIdAttribute}>\n                            {title}\n                        </h3>\n                    ) : null}\n                    {subtitle ? (\n                        <p className=\"reactist-notification__subtitle\" {...subtitleIdAttribute}>\n                            {subtitle}\n                        </p>\n                    ) : null}\n                </>\n            )}\n        </div>\n    )\n    const notificationBody = (\n        <div className=\"reactist-notification__icon-content-group\">\n            {icon ?? null}\n            {notificationContent}\n        </div>\n    )\n\n    return (\n        <div\n            id={id}\n            role=\"alert\"\n            className={classNames('reactist-notification', className, {\n                'reactist-notification--with-button': Boolean(onClick),\n                'reactist-notification--with-close-button': Boolean(onClose),\n            })}\n            aria-live={ariaLive}\n            {...ariaLabelledBy}\n            {...ariaDescribedBy}\n            {...rest}\n        >\n            {onClick ? (\n                <button className=\"reactist-notification__button\" onClick={onClick}>\n                    {notificationBody}\n                </button>\n            ) : (\n                notificationBody\n            )}\n\n            {onClose ? (\n                <button\n                    className=\"reactist-notification__close-button\"\n                    onClick={onClose}\n                    aria-label={closeAltText}\n                >\n                    {customCloseButton ?? <CloseIcon />}\n                </button>\n            ) : null}\n        </div>\n    )\n}\n\nexport { Notification }\n"],"names":["id","icon","title","subtitle","children","customCloseButton","onClick","onClose","closeAltText","className","ariaLive","rest","titleId","titleIdAttribute","subtitleId","subtitleIdAttribute","contentId","ariaLabelledBy","ariaDescribedBy","notificationContent","React","notificationBody","role","classNames","Boolean","CloseIcon"],"mappings":"ibAoBA,gBACIA,IAAAA,GACAC,IAAAA,KACAC,IAAAA,MACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,kBACAC,IAAAA,QACAC,IAAAA,YACAC,aAAAA,aAAe,UACfC,IAAAA,cACA,aAAaC,aAAW,WACrBC,sCAEGC,EAAUV,EAAWF,WAAa,KAClCa,EAAmBD,EAAU,CAAEZ,GAAIY,GAAY,KAC/CE,EAAaX,EAAcH,cAAgB,KAC3Ce,EAAsBD,EAAa,CAAEd,GAAIc,GAAe,KACxDE,EAAYZ,EAAcJ,aAAe,KAEzCiB,EAAiBD,EACjB,mBAAqBA,GACrBJ,EACA,mBAAqBA,GACrB,KACAM,EAAkBJ,IAAeV,EAAW,oBAAsBU,GAAe,KAEjFK,EACFC,qCAAKX,UAAU,kCATQL,EAAW,CAAEJ,GAAOA,cAAiB,MAUvDI,MAAAA,EAAAA,EACGgB,gCACKlB,EACGkB,oCAAIX,UAAU,gCAAmCI,GAC5CX,GAEL,KACHC,EACGiB,mCAAGX,UAAU,mCAAsCM,GAC9CZ,GAEL,OAKdkB,EACFD,uBAAKX,UAAU,6CACVR,MAAAA,EAAAA,EAAQ,KACRkB,UAKLC,qCACIpB,GAAIA,EACJsB,KAAK,QACLb,UAAWc,EAAW,wBAAyBd,EAAW,sCAChBe,QAAQlB,8CACFkB,QAAQjB,iBAE7CG,GACPO,EACAC,EACAP,GAEHL,EACGc,0BAAQX,UAAU,gCAAgCH,QAASA,GACtDe,GAGLA,EAGHd,EACGa,0BACIX,UAAU,sCACVH,QAASC,eACGC,GAEXH,MAAAA,EAAAA,EAAqBe,gBAACK,iBAE3B"}

package/lib/components/notification/notification.test.d.ts

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

package/lib/components/popover/popover.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=e(require("react")),o=e(require("classnames")),p=require("../../_virtual/_rollupPluginBabelHelpers.js"),i=require("./positioning-utils.js"),r=function(e){function r(){var t;return(t=e.apply(this,arguments)||this)._updatePopoverPosition=function(){for(var e=t.props,o=e.position,p=e.allowVaguePositioning,r=e.gapSize,n=t.wrapper.getBoundingClientRect(),s=t.popover.getBoundingClientRect(),a=document.documentElement,l=t.wrapper,u=!1;!u;)"absolute"!==getComputedStyle(l).getPropertyValue("position")&&l!==a&&l.parentElement?l=l.parentElement:u=!0;for(var h=l.getBoundingClientRect(),c={height:h.height,width:h.width},f={height:s.height,width:s.width},g={height:n.height,width:n.width},v={x:n.left-h.left,y:n.top-h.top},d={x:n.left,y:n.top},m="auto"===o?["top","right","bottom","left","top"]:"vertical"===o?["top","bottom"]:"horizontal"===o?["left","right"]:[o],w=0;w<m.length;w++){var _=m[w];if(i.hasEnoughSpace(c,f,g,v,_,r)||w===m.length-1){var P=i.calculatePosition(_,g,d,f,r);t.popover.style.top=P.y+"px",t.popover.style.left=P.x+"px",p&&(P.x<0&&(t.popover.style.left=2*r+"px"),P.y+f.height>c.height&&(t.popover.style.top=c.height-f.height-2*r+"px")),_!==o&&(t.popover.className=t._getClassNameForPosition(_));break}}},t._getClassNameForPosition=function(e){var p=t.props,i=p.visible,r=p.withArrow,n=p.arrowClassName,s=o("reactist_popover",{visible:i});return i&&r?o(s,n,{arrow_top:"bottom"===e,arrow_right:"left"===e,arrow_bottom:"auto"===e||"top"===e,arrow_left:"right"===e}):s},t._updatePopoverRef=function(e){t.popover=e,"function"==typeof t.props.popoverRef&&t.props.popoverRef(e)},t._updateWrapperRef=function(e){t.wrapper=e,"function"==typeof t.props.wrapperRef&&t.props.wrapperRef(e)},t}p.inheritsLoose(r,e);var n=r.prototype;return n.componentDidMount=function(){this.props.visible&&this._updatePopoverPosition()},n.componentDidUpdate=function(e){this.wrapper&&this.props.visible&&(e.position!==this.props.position||e.allowVaguePositioning!==this.props.allowVaguePositioning||e.visible!==this.props.visible||e.withArrow!==this.props.withArrow||e.gapSize!==this.props.gapSize||e.content!==this.props.content)&&this._updatePopoverPosition()},n.render=function(){var e=this.props,p=e.position,i=e.wrapperClassName,r=e.popoverClassName,n=e.onMouseEnter,s=e.onMouseLeave,a=e.onClick,l=e.trigger,u=e.content,h=p?this._getClassNameForPosition(p):"",c=o("reactist_popover__content",r),f=o("reactist_popover__wrapper",i),g=t.Children.only(l);return t.createElement("span",{className:f,onMouseEnter:n,onMouseLeave:s,ref:this._updateWrapperRef},t.cloneElement(g,{onClick:function(e){a&&a(e),"function"==typeof g.props.onClick&&g.props.onClick(e)}}),t.createElement("span",{className:h,ref:this._updatePopoverRef},this.props.visible?t.createElement("span",{className:c},"function"==typeof u?u():u):null))},r}(t.Component);r.displayName="Popover",r.defaultProps={position:"auto",gapSize:5},exports.Popover=r;
+"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"),o=e(require("react")),p=e(require("classnames")),i=require("./positioning-utils.js"),r=function(e){function r(){var t;return(t=e.apply(this,arguments)||this)._updatePopoverPosition=function(){for(var e=t.props,o=e.position,p=e.allowVaguePositioning,r=e.gapSize,n=t.wrapper.getBoundingClientRect(),s=t.popover.getBoundingClientRect(),a=document.documentElement,l=t.wrapper,u=!1;!u;)"absolute"!==getComputedStyle(l).getPropertyValue("position")&&l!==a&&l.parentElement?l=l.parentElement:u=!0;for(var h=l.getBoundingClientRect(),c={height:h.height,width:h.width},f={height:s.height,width:s.width},g={height:n.height,width:n.width},v={x:n.left-h.left,y:n.top-h.top},d={x:n.left,y:n.top},m="auto"===o?["top","right","bottom","left","top"]:"vertical"===o?["top","bottom"]:"horizontal"===o?["left","right"]:[o],w=0;w<m.length;w++){var _=m[w];if(i.hasEnoughSpace(c,f,g,v,_,r)||w===m.length-1){var P=i.calculatePosition(_,g,d,f,r);t.popover.style.top=P.y+"px",t.popover.style.left=P.x+"px",p&&(P.x<0&&(t.popover.style.left=2*r+"px"),P.y+f.height>c.height&&(t.popover.style.top=c.height-f.height-2*r+"px")),_!==o&&(t.popover.className=t._getClassNameForPosition(_));break}}},t._getClassNameForPosition=function(e){var o=t.props,i=o.visible,r=o.withArrow,n=o.arrowClassName,s=p("reactist_popover",{visible:i});return i&&r?p(s,n,{arrow_top:"bottom"===e,arrow_right:"left"===e,arrow_bottom:"auto"===e||"top"===e,arrow_left:"right"===e}):s},t._updatePopoverRef=function(e){t.popover=e,"function"==typeof t.props.popoverRef&&t.props.popoverRef(e)},t._updateWrapperRef=function(e){t.wrapper=e,"function"==typeof t.props.wrapperRef&&t.props.wrapperRef(e)},t}t.inheritsLoose(r,e);var n=r.prototype;return n.componentDidMount=function(){this.props.visible&&this._updatePopoverPosition()},n.componentDidUpdate=function(e){this.wrapper&&this.props.visible&&(e.position!==this.props.position||e.allowVaguePositioning!==this.props.allowVaguePositioning||e.visible!==this.props.visible||e.withArrow!==this.props.withArrow||e.gapSize!==this.props.gapSize||e.content!==this.props.content)&&this._updatePopoverPosition()},n.render=function(){var e=this.props,t=e.position,i=e.wrapperClassName,r=e.popoverClassName,n=e.onMouseEnter,s=e.onMouseLeave,a=e.onClick,l=e.trigger,u=e.content,h=t?this._getClassNameForPosition(t):"",c=p("reactist_popover__content",r),f=p("reactist_popover__wrapper",i),g=o.Children.only(l);return o.createElement("span",{className:f,onMouseEnter:n,onMouseLeave:s,ref:this._updateWrapperRef},o.cloneElement(g,{onClick:function(e){a&&a(e),"function"==typeof g.props.onClick&&g.props.onClick(e)}}),o.createElement("span",{className:h,ref:this._updatePopoverRef},this.props.visible?o.createElement("span",{className:c},"function"==typeof u?u():u):null))},r}(o.Component);r.displayName="Popover",r.defaultProps={position:"auto",gapSize:5},exports.Popover=r;
 //# sourceMappingURL=popover.js.map

package/lib/components/popover/popover.test.d.ts

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

package/lib/components/progress-bar/progress-bar.d.ts

@@ -5,8 +5,10 @@ declare type Props = {
     className?: string;
     /** How much of the progress bar should be filled. Number between 0 and 100 inclusive. */
     fillPercentage?: number;
+    /** Defines the human readable text alternative for assitive technologies. */
+    'aria-valuetext'?: string;
 };
-declare function ProgressBar({ fillPercentage, className }: Props): JSX.Element;
+declare function ProgressBar({ fillPercentage, className, 'aria-valuetext': ariaValuetext }: Props): JSX.Element;
 declare namespace ProgressBar {
     var displayName: string;
 }

package/lib/components/progress-bar/progress-bar.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 r=e(require("react")),t=e(require("classnames"));function a(e){var a=e.fillPercentage,s=void 0===a?0:a,i=t("reactist_progress_bar",e.className);return r.createElement("div",{className:i},r.createElement("div",{className:"inner",style:{width:(s<0?0:s>100?100:s)+"%"}}))}a.displayName="ProgressBar",exports.ProgressBar=a;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=e(require("react")),a=e(require("classnames")),t=require("../../new-components/hidden-visually/hidden-visually.js");function s(e){var s=e.fillPercentage,l=void 0===s?0:s,i=e["aria-valuetext"],n=a("reactist_progress_bar",e.className),u=l<0?0:l>100?100:l;return r.createElement("div",{className:n},r.createElement("div",{className:"inner",style:{width:u+"%"}}),r.createElement(t.HiddenVisually,null,r.createElement("progress",{value:u,max:100,"aria-valuetext":null!=i?i: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 React from 'react'\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}\nfunction ProgressBar({ fillPercentage = 0, className }: 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        </div>\n    )\n}\nProgressBar.displayName = 'ProgressBar'\n\nexport { ProgressBar }\n"],"names":["ProgressBar","fillPercentage","finalClassName","classNames","className","React","style","width","displayName"],"mappings":"+LAWA,SAASA,aAAcC,eAAAA,aAAiB,IAC9BC,EAAiBC,EAAW,0BADKC,kBAInCC,uBAAKD,UAAWF,GACZG,uBAAKD,UAAU,QAAQE,MAAO,CAAEC,OAH1BN,EAAiB,EAAI,EAAIA,EAAiB,IAAM,IAAMA,WAOxED,EAAYQ,YAAc"}
+{"version":3,"file":"progress-bar.js","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["import 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","ariaValuetext","finalClassName","classNames","className","width","React","style","HiddenVisually","value","max","undefined","displayName"],"mappings":"oQAcA,SAASA,aAAcC,eAAAA,aAAiB,IAAgCC,IAAlB,kBAC5CC,EAAiBC,EAAW,0BADKC,WAEjCC,EAAQL,EAAiB,EAAI,EAAIA,EAAiB,IAAM,IAAMA,SAEhEM,uBAAKF,UAAWF,GACZI,uBAAKF,UAAU,QAAQG,MAAO,CAAEF,MAAUA,SAC1CC,gBAACE,sBACGF,4BAAUG,MAAOJ,EAAOK,IAAK,qBAAqBT,MAAAA,EAAAA,OAAiBU,MAKnFZ,EAAYa,YAAc"}

package/lib/components/progress-bar/progress-bar.test.d.ts

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

package/lib/components/select/select.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 a=e(require("react")),t=e(require("classnames")),l=require("../../_virtual/_rollupPluginBabelHelpers.js");function s(e){var s=e.value,u=e.options,i=void 0===u?[]:u,o=e.onChange,r=e.disabled,n=void 0===r||r,d=e.className,c=void 0===d?"":d,v=e.defaultValue,p=l.objectWithoutPropertiesLoose(e,["value","options","onChange","disabled","className","defaultValue"]),b=t("reactist_select",{disabled:n},c);return a.createElement("select",Object.assign({className:b,value:s,onChange:function(e){return o?o(e.target.value):void 0},disabled:n,defaultValue:v},p),null==i?void 0:i.map((function(e){return a.createElement("option",{key:e.key||e.value,value:e.value,disabled:e.disabled},e.text)})))}s.displayName="Select",s.defaultProps={options:[],disabled:!1},exports.Select=s;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var a=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=e(require("react")),l=e(require("classnames")),s=["value","options","onChange","disabled","className","defaultValue"];function u(e){var u=e.value,i=e.options,o=void 0===i?[]:i,r=e.onChange,n=e.disabled,d=void 0===n||n,c=e.className,v=void 0===c?"":c,p=e.defaultValue,b=a.objectWithoutPropertiesLoose(e,s),f=l("reactist_select",{disabled:d},v);return t.createElement("select",Object.assign({className:f,value:u,onChange:function(e){return r?r(e.target.value):void 0},disabled:d,defaultValue:p},b),null==o?void 0:o.map((function(e){return t.createElement("option",{key:e.key||e.value,value:e.value,disabled:e.disabled},e.text)})))}u.displayName="Select",u.defaultProps={options:[],disabled:!1},exports.Select=u;
 //# sourceMappingURL=select.js.map

package/lib/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":["../../../src/components/select/select.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport './select.less'\n\ntype Option = {\n    /** Optional key for each option. If not provided `value` is used. */\n    key?: string | number\n    /** Value of the option. */\n    value: string | number\n    /** Text to display for the option. */\n    text?: string | number\n    /** Whether the options is disabled or not. */\n    disabled?: boolean\n}\n\ntype Props = {\n    className?: string\n    disabled?: boolean\n    /** Currently selected value. */\n    value?: string | number\n    /** Callback for the change event. Will be called with the next value (not the full event). */\n    onChange?: (value: string) => void\n    /** Options that are rendered in the select. */\n    options?: Option[]\n    /** Value to initially be set */\n    defaultValue?: string | number\n}\n\nfunction Select({\n    value,\n    options = [],\n    onChange,\n    disabled = true,\n    className = '',\n    defaultValue,\n    ...otherProps\n}: Props) {\n    const selectClassName = classNames('reactist_select', { disabled }, className)\n    return (\n        <select\n            className={selectClassName}\n            value={value}\n            onChange={(event) => (onChange ? onChange(event.target.value) : undefined)}\n            disabled={disabled}\n            defaultValue={defaultValue}\n            {...otherProps}\n        >\n            {options?.map((option) => (\n                <option\n                    key={option.key || option.value}\n                    value={option.value}\n                    disabled={option.disabled}\n                >\n                    {option.text}\n                </option>\n            ))}\n        </select>\n    )\n}\nSelect.displayName = 'Select'\nSelect.defaultProps = {\n    options: [],\n    disabled: false,\n}\n\nexport { Select }\n"],"names":["Select","value","options","onChange","disabled","className","defaultValue","otherProps","selectClassName","classNames","React","event","target","undefined","map","option","key","text","displayName","defaultProps"],"mappings":"wPA6BA,SAASA,SACLC,IAAAA,UACAC,QAAAA,aAAU,KACVC,IAAAA,aACAC,SAAAA,oBACAC,UAAAA,aAAY,KACZC,IAAAA,aACGC,yGAEGC,EAAkBC,EAAW,kBAAmB,CAAEL,SAAAA,GAAYC,UAEhEK,wCACIL,UAAWG,EACXP,MAAOA,EACPE,SAAU,SAACQ,UAAWR,EAAWA,EAASQ,EAAMC,OAAOX,YAASY,GAChET,SAAUA,EACVE,aAAcA,GACVC,GAEHL,MAAAA,SAAAA,EAASY,KAAI,SAACC,UACXL,0BACIM,IAAKD,EAAOC,KAAOD,EAAOd,MAC1BA,MAAOc,EAAOd,MACdG,SAAUW,EAAOX,UAEhBW,EAAOE,UAM5BjB,EAAOkB,YAAc,SACrBlB,EAAOmB,aAAe,CAClBjB,QAAS,GACTE,UAAU"}
+{"version":3,"file":"select.js","sources":["../../../src/components/select/select.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport './select.less'\n\ntype Option = {\n    /** Optional key for each option. If not provided `value` is used. */\n    key?: string | number\n    /** Value of the option. */\n    value: string | number\n    /** Text to display for the option. */\n    text?: string | number\n    /** Whether the options is disabled or not. */\n    disabled?: boolean\n}\n\ntype Props = {\n    className?: string\n    disabled?: boolean\n    /** Currently selected value. */\n    value?: string | number\n    /** Callback for the change event. Will be called with the next value (not the full event). */\n    onChange?: (value: string) => void\n    /** Options that are rendered in the select. */\n    options?: Option[]\n    /** Value to initially be set */\n    defaultValue?: string | number\n}\n\nfunction Select({\n    value,\n    options = [],\n    onChange,\n    disabled = true,\n    className = '',\n    defaultValue,\n    ...otherProps\n}: Props) {\n    const selectClassName = classNames('reactist_select', { disabled }, className)\n    return (\n        <select\n            className={selectClassName}\n            value={value}\n            onChange={(event) => (onChange ? onChange(event.target.value) : undefined)}\n            disabled={disabled}\n            defaultValue={defaultValue}\n            {...otherProps}\n        >\n            {options?.map((option) => (\n                <option\n                    key={option.key || option.value}\n                    value={option.value}\n                    disabled={option.disabled}\n                >\n                    {option.text}\n                </option>\n            ))}\n        </select>\n    )\n}\nSelect.displayName = 'Select'\nSelect.defaultProps = {\n    options: [],\n    disabled: false,\n}\n\nexport { Select }\n"],"names":["Select","value","options","onChange","disabled","className","defaultValue","otherProps","selectClassName","classNames","React","event","target","undefined","map","option","key","text","displayName","defaultProps"],"mappings":"+TA6BA,SAASA,SACLC,IAAAA,UACAC,QAAAA,aAAU,KACVC,IAAAA,aACAC,SAAAA,oBACAC,UAAAA,aAAY,KACZC,IAAAA,aACGC,sCAEGC,EAAkBC,EAAW,kBAAmB,CAAEL,SAAAA,GAAYC,UAEhEK,wCACIL,UAAWG,EACXP,MAAOA,EACPE,SAAU,SAACQ,UAAWR,EAAWA,EAASQ,EAAMC,OAAOX,YAASY,GAChET,SAAUA,EACVE,aAAcA,GACVC,GAEHL,MAAAA,SAAAA,EAASY,KAAI,SAACC,UACXL,0BACIM,IAAKD,EAAOC,KAAOD,EAAOd,MAC1BA,MAAOc,EAAOd,MACdG,SAAUW,EAAOX,UAEhBW,EAAOE,UAM5BjB,EAAOkB,YAAc,SACrBlB,EAAOmB,aAAe,CAClBjB,QAAS,GACTE,UAAU"}

package/lib/components/select/select.test.d.ts

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

package/lib/components/time/time.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,r=require("../../_virtual/_rollupPluginBabelHelpers.js"),o=require("../tooltip/tooltip.js"),i=require("./time-utils.js"),s=function(e){function s(t){var r;return(r=e.call(this,t)||this).refreshInterval=void 0,r.state={hovered:!1,mouseX:void 0,mouseY:void 0},r}r.inheritsLoose(s,e);var n=s.prototype;return n.componentDidMount=function(){this.props.refresh&&this._refresh()},n.componentDidUpdate=function(e){!e.refresh&&this.props.refresh&&this._refresh(),e.refresh&&!this.props.refresh&&this.refreshInterval&&clearTimeout(this.refreshInterval)},n.componentWillUnmount=function(){this.refreshInterval&&clearTimeout(this.refreshInterval)},n._setHovered=function(e,t){var r=this.state,o=t.clientX,i=t.clientY;o===r.mouseX&&i===r.mouseY||this.setState((function(){return{hovered:e,mouseX:o,mouseY:i}}))},n._renderTime=function(e){if(this.props.time){if(this.state.hovered){if(this.props.expandFullyOnHover&&!this.props.tooltipOnHover)return i.TimeUtils.formatTimeLong(this.props.time,e);if(this.props.expandOnHover&&!this.props.tooltipOnHover)return i.TimeUtils.formatTime(this.props.time,e)}return i.TimeUtils.timeAgo(this.props.time,e)}},n._refresh=function(){var e=this;this.refreshInterval=setInterval((function(){e.forceUpdate()}),6e4)},n.render=function(){var e=this,r="reactist_time";this.props.className&&(r=this.props.className);var s=this._renderTime(this.props.config);return t.createElement("time",{className:r,onMouseEnter:function(t){return e._setHovered(!0,t)},onMouseLeave:function(t){return e._setHovered(!1,t)}},this.props.tooltipOnHover?t.createElement(o.Tooltip,{content:this.props.tooltip||this.props.time&&i.TimeUtils.formatTimeLong(this.props.time,this.props.config)},t.createElement("span",null,s)):s)},s}(t.Component);s.displayName="Time",s.defaultProps={expandOnHover:!1,expandFullyOnHover:!1,tooltipOnHover:!1,refresh:!0,config:{locale:"en",daysSuffix:"d",hoursSuffix:"h",minutesSuffix:"m",momentsAgo:"moments ago"}},exports.Time=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,o=require("../tooltip/tooltip.js"),i=require("./time-utils.js"),s=function(e){function s(t){var r;return(r=e.call(this,t)||this).refreshInterval=void 0,r.state={hovered:!1,mouseX:void 0,mouseY:void 0},r}t.inheritsLoose(s,e);var n=s.prototype;return n.componentDidMount=function(){this.props.refresh&&this._refresh()},n.componentDidUpdate=function(e){!e.refresh&&this.props.refresh&&this._refresh(),e.refresh&&!this.props.refresh&&this.refreshInterval&&clearTimeout(this.refreshInterval)},n.componentWillUnmount=function(){this.refreshInterval&&clearTimeout(this.refreshInterval)},n._setHovered=function(e,t){var r=this.state,o=t.clientX,i=t.clientY;o===r.mouseX&&i===r.mouseY||this.setState((function(){return{hovered:e,mouseX:o,mouseY:i}}))},n._renderTime=function(e){if(this.props.time){if(this.state.hovered){if(this.props.expandFullyOnHover&&!this.props.tooltipOnHover)return i.TimeUtils.formatTimeLong(this.props.time,e);if(this.props.expandOnHover&&!this.props.tooltipOnHover)return i.TimeUtils.formatTime(this.props.time,e)}return i.TimeUtils.timeAgo(this.props.time,e)}},n._refresh=function(){var e=this;this.refreshInterval=setInterval((function(){e.forceUpdate()}),6e4)},n.render=function(){var e=this,t="reactist_time";this.props.className&&(t=this.props.className);var s=this._renderTime(this.props.config);return r.createElement("time",{className:t,onMouseEnter:function(t){return e._setHovered(!0,t)},onMouseLeave:function(t){return e._setHovered(!1,t)}},this.props.tooltipOnHover?r.createElement(o.Tooltip,{content:this.props.tooltip||this.props.time&&i.TimeUtils.formatTimeLong(this.props.time,this.props.config)},r.createElement("span",null,s)):s)},s}(r.Component);s.displayName="Time",s.defaultProps={expandOnHover:!1,expandFullyOnHover:!1,tooltipOnHover:!1,refresh:!0,config:{locale:"en",daysSuffix:"d",hoursSuffix:"h",minutesSuffix:"m",momentsAgo:"moments ago"}},exports.Time=s;
 //# sourceMappingURL=time.js.map

package/lib/components/time/time.test.d.ts

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

package/lib/components/tooltip/tooltip.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=e(require("react")),n=e(require("classnames")),o=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("reakit/Tooltip");exports.HIDE_DELAY=100,exports.SHOW_DELAY=500,exports.Tooltip=function(e){var u,i,c,s,l=e.children,a=e.content,p=e.position,f=void 0===p?"top":p,d=e.gapSize,m=void 0===d?3:d,b=e.className,E=o.objectWithoutPropertiesLoose(e,["children","content","position","gapSize","className"]),v=(c=r.useTooltipState({placement:f,gutter:m}),u=t.useRef(),i=t.useCallback((function(){null!=u.current&&clearTimeout(u.current)}),[]),t.useEffect((function(){return i}),[i]),s=t.useCallback((function(e,t){return function(){i(),u.current=setTimeout(e,t)}}),[i]),t.useMemo((function(){return o.objectSpread2(o.objectSpread2({},c),{},{show:s((function(){return c.show()}),500),hide:s((function(){return c.hide()}),100)})}),[s,c])),h=t.Children.only(l);return a?t.createElement(t.Fragment,null,t.createElement(r.TooltipReference,Object.assign({},v,{ref:h.ref},h.props,{onFocus:function(e){e.currentTarget.addEventListener("keyup",(function(e){var t=e.key;"Escape"!==t&&"Enter"!==t&&"Space"!==t&&v.show()}),{once:!0}),e.preventDefault(),"function"==typeof h.props.onFocus&&h.props.onFocus(e)}}),(function(e){return t.cloneElement(h,e)})),v.visible?t.createElement(r.Tooltip,Object.assign({},v,E,{className:n("reactist_tooltip",b)}),"function"==typeof a?a():a):null):h};
+"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"),n=e(require("react")),o=e(require("classnames")),r=require("reakit/Tooltip"),u=["children","content","position","gapSize","className"];exports.HIDE_DELAY=100,exports.SHOW_DELAY=500,exports.Tooltip=function(e){var i,c,s,l,a=e.children,p=e.content,f=e.position,d=void 0===f?"top":f,m=e.gapSize,b=void 0===m?3:m,E=e.className,v=t.objectWithoutPropertiesLoose(e,u),h=(s=r.useTooltipState({placement:d,gutter:b}),i=n.useRef(),c=n.useCallback((function(){null!=i.current&&clearTimeout(i.current)}),[]),n.useEffect((function(){return c}),[c]),l=n.useCallback((function(e,t){return function(){c(),i.current=setTimeout(e,t)}}),[c]),n.useMemo((function(){return t.objectSpread2(t.objectSpread2({},s),{},{show:l((function(){return s.show()}),500),hide:l((function(){return s.hide()}),100)})}),[l,s])),g=n.Children.only(a);return p?n.createElement(n.Fragment,null,n.createElement(r.TooltipReference,Object.assign({},h,{ref:g.ref},g.props,{onFocus:function(e){e.currentTarget.addEventListener("keyup",(function(e){var t=e.key;"Escape"!==t&&"Enter"!==t&&"Space"!==t&&h.show()}),{once:!0}),e.preventDefault(),"function"==typeof g.props.onFocus&&g.props.onFocus(e)}}),(function(e){return n.cloneElement(g,e)})),h.visible?n.createElement(r.Tooltip,Object.assign({},h,v,{className:o("reactist_tooltip",E)}),"function"==typeof p?p():p):null):g};
 //# 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 React from 'react'\nimport classNames from 'classnames'\n\nimport {\n    useTooltipState,\n    TooltipInitialState,\n    Tooltip as ReakitTooltip,\n    TooltipReference,\n    TooltipProps as ReakitTooltipProps,\n} from 'reakit/Tooltip'\nimport { PopoverState } from 'reakit/Popover'\n\nimport './tooltip.less'\n\ntype TooltipProps = Omit<ReakitTooltipProps, 'children'> & {\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: TooltipInitialState) {\n    const tooltipState = useTooltipState(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 tooltip = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n    const child = React.Children.only<React.ReactElement>(children as React.ReactElement)\n    if (!content) {\n        return child\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) {\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                tooltip.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        // Prevent tooltip.show from being called by TooltipReference\n        event.preventDefault()\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access\n        if (typeof child.props.onFocus === 'function') child.props.onFocus(event)\n    }\n\n    return (\n        <>\n            <TooltipReference\n                {...tooltip}\n                // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment\n                ref={(child as any).ref}\n                {...child.props}\n                onFocus={handleFocus}\n            >\n                {(referenceProps) => React.cloneElement(child, referenceProps)}\n            </TooltipReference>\n            {tooltip.visible ? (\n                <ReakitTooltip\n                    {...tooltip}\n                    {...props}\n                    className={classNames('reactist_tooltip', className)}\n                >\n                    {typeof content === 'function' ? content() : content}\n                </ReakitTooltip>\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":["timeoutRef","clearTimeouts","tooltipState","delay","children","content","position","gapSize","className","props","tooltip","useTooltipState","placement","gutter","React","useRef","useCallback","current","clearTimeout","useEffect","fn","setTimeout","useMemo","show","hide","child","Children","only","TooltipReference","ref","onFocus","event","currentTarget","addEventListener","e","eventKey","key","once","preventDefault","referenceProps","cloneElement","visible","ReakitTooltip","classNames"],"mappings":"uSAuB0B,uBADA,oBAgB1B,gBAiFUA,EAEAC,EA/FAC,EACAC,EAYNC,IAAAA,SACAC,IAAAA,YACAC,SAAAA,aAAW,YACXC,QAAAA,aAAU,IACVC,IAAAA,UACGC,4FAEGC,GApBAR,EAAeS,kBAoBkB,CAAEC,UAAWN,EAAUO,OAAQN,IAyEhEP,EAAac,EAAMC,SAEnBd,EAAgBa,EAAME,aAAY,WACV,MAAtBhB,EAAWiB,SACXC,aAAalB,EAAWiB,WAE7B,IAGHH,EAAMK,WAAU,kBAAMlB,IAAe,CAACA,IArGhCE,EAuGCW,EAAME,aACT,SAAeI,EAAgBjB,UACpB,WACHF,IACAD,EAAWiB,QAAUI,WAAWD,EAAIjB,MAG5C,CAACF,IA7GEa,EAAMQ,SACT,qDACOpB,OACHqB,KAAMpB,GAAM,kBAAMD,EAAaqB,SATjB,KAUdC,KAAMrB,GAAM,kBAAMD,EAAasB,SATjB,SAWlB,CAACrB,EAAOD,KAcNuB,EAAQX,EAAMY,SAASC,KAAyBvB,UACjDC,EA6BDS,gCACIA,gBAACc,oCACOlB,GAEJmB,IAAMJ,EAAcI,KAChBJ,EAAMhB,OACVqB,iBAzBSC,GAWjBA,EAAMC,cAAcC,iBAAiB,kBANhBC,OACXC,EAAYD,EAAoBE,IACrB,WAAbD,GAAsC,UAAbA,GAAqC,UAAbA,GACjDzB,EAAQa,SAG2C,CAAEc,MAAM,IAEnEN,EAAMO,iBAE6B,mBAAxBb,EAAMhB,MAAMqB,SAAwBL,EAAMhB,MAAMqB,QAAQC,OAY1D,SAACQ,UAAmBzB,EAAM0B,aAAaf,EAAOc,MAElD7B,EAAQ+B,QACL3B,gBAAC4B,2BACOhC,EACAD,GACJD,UAAWmC,EAAW,mBAAoBnC,KAEtB,mBAAZH,EAAyBA,IAAYA,GAEjD,MA9CDoB"}
+{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport {\n    useTooltipState,\n    TooltipInitialState,\n    Tooltip as ReakitTooltip,\n    TooltipReference,\n    TooltipProps as ReakitTooltipProps,\n} from 'reakit/Tooltip'\nimport { PopoverState } from 'reakit/Popover'\n\nimport './tooltip.less'\n\ntype TooltipProps = Omit<ReakitTooltipProps, 'children'> & {\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: TooltipInitialState) {\n    const tooltipState = useTooltipState(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 tooltip = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n    const child = React.Children.only<React.ReactElement>(children as React.ReactElement)\n    if (!content) {\n        return child\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) {\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                tooltip.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        // Prevent tooltip.show from being called by TooltipReference\n        event.preventDefault()\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access\n        if (typeof child.props.onFocus === 'function') child.props.onFocus(event)\n    }\n\n    return (\n        <>\n            <TooltipReference\n                {...tooltip}\n                // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment\n                ref={(child as any).ref}\n                {...child.props}\n                onFocus={handleFocus}\n            >\n                {(referenceProps) => React.cloneElement(child, referenceProps)}\n            </TooltipReference>\n            {tooltip.visible ? (\n                <ReakitTooltip\n                    {...tooltip}\n                    {...props}\n                    className={classNames('reactist_tooltip', className)}\n                >\n                    {typeof content === 'function' ? content() : content}\n                </ReakitTooltip>\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":["timeoutRef","clearTimeouts","tooltipState","delay","children","content","position","gapSize","className","props","tooltip","useTooltipState","placement","gutter","React","useRef","useCallback","current","clearTimeout","useEffect","fn","setTimeout","useMemo","show","hide","child","Children","only","TooltipReference","ref","onFocus","event","currentTarget","addEventListener","e","eventKey","key","once","preventDefault","referenceProps","cloneElement","visible","ReakitTooltip","classNames"],"mappings":"iWAuB0B,uBADA,oBAgB1B,gBAiFUA,EAEAC,EA/FAC,EACAC,EAYNC,IAAAA,SACAC,IAAAA,YACAC,SAAAA,aAAW,YACXC,QAAAA,aAAU,IACVC,IAAAA,UACGC,sCAEGC,GApBAR,EAAeS,kBAoBkB,CAAEC,UAAWN,EAAUO,OAAQN,IAyEhEP,EAAac,EAAMC,SAEnBd,EAAgBa,EAAME,aAAY,WACV,MAAtBhB,EAAWiB,SACXC,aAAalB,EAAWiB,WAE7B,IAGHH,EAAMK,WAAU,kBAAMlB,IAAe,CAACA,IArGhCE,EAuGCW,EAAME,aACT,SAAeI,EAAgBjB,UACpB,WACHF,IACAD,EAAWiB,QAAUI,WAAWD,EAAIjB,MAG5C,CAACF,IA7GEa,EAAMQ,SACT,qDACOpB,OACHqB,KAAMpB,GAAM,kBAAMD,EAAaqB,SATjB,KAUdC,KAAMrB,GAAM,kBAAMD,EAAasB,SATjB,SAWlB,CAACrB,EAAOD,KAcNuB,EAAQX,EAAMY,SAASC,KAAyBvB,UACjDC,EA6BDS,gCACIA,gBAACc,oCACOlB,GAEJmB,IAAMJ,EAAcI,KAChBJ,EAAMhB,OACVqB,iBAzBSC,GAWjBA,EAAMC,cAAcC,iBAAiB,kBANhBC,OACXC,EAAYD,EAAoBE,IACrB,WAAbD,GAAsC,UAAbA,GAAqC,UAAbA,GACjDzB,EAAQa,SAG2C,CAAEc,MAAM,IAEnEN,EAAMO,iBAE6B,mBAAxBb,EAAMhB,MAAMqB,SAAwBL,EAAMhB,MAAMqB,QAAQC,OAY1D,SAACQ,UAAmBzB,EAAM0B,aAAaf,EAAOc,MAElD7B,EAAQ+B,QACL3B,gBAAC4B,2BACOhC,EACAD,GACJD,UAAWmC,EAAW,mBAAoBnC,KAEtB,mBAAZH,EAAyBA,IAAYA,GAEjD,MA9CDoB"}

package/lib/components/tooltip/tooltip.test.d.ts

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

package/lib/hooks/use-previous/index.d.ts

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

package/lib/hooks/use-previous/use-previous.d.ts

@@ -0,0 +1,15 @@
+/**
+ * usePrevious tracks the change of the given value -
+ * when a given value has been changed from a previous call,
+ * it will return the value prior to the change.
+ *
+ * Example:
+ *
+ * const [x, setX] = useState(1)
+ * const prevX = usePrevious(x)
+ *
+ * Suppose `setX(2)` is called, then in the next component render
+ * x = 2 and prevX = 1
+ */
+declare function usePrevious<T>(value: T): T | null;
+export { usePrevious };

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.usePrevious=function(r){var u=e.useRef(null);return e.useEffect((function(){u.current=r}),[r]),u.current};
+//# sourceMappingURL=use-previous.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-previous.js","sources":["../../../src/hooks/use-previous/use-previous.ts"],"sourcesContent":["import * as React from 'react'\n\n/**\n * usePrevious tracks the change of the given value -\n * when a given value has been changed from a previous call,\n * it will return the value prior to the change.\n *\n * Example:\n *\n * const [x, setX] = useState(1)\n * const prevX = usePrevious(x)\n *\n * Suppose `setX(2)` is called, then in the next component render\n * x = 2 and prevX = 1\n */\nfunction usePrevious<T>(value: T): T | null {\n    const ref = React.useRef<T | null>(null)\n\n    React.useEffect(() => {\n        ref.current = value\n    }, [value])\n\n    return ref.current\n}\n\nexport { usePrevious }\n"],"names":["value","ref","React","current"],"mappings":"+GAeA,SAAwBA,OACdC,EAAMC,SAAuB,aAEnCA,aAAgB,WACZD,EAAIE,QAAUH,IACf,CAACA,IAEGC,EAAIE"}

package/lib/index.d.ts

@@ -1,22 +1,42 @@
-export { default as Avatar } from './components/avatar';
-export { default as Button } from './components/button';
+import './new-components/default-styles.less';
+export * from './new-components/box';
+export * from './new-components/columns';
+export * from './new-components/divider';
+export * from './new-components/inline';
+export * from './new-components/stack';
+export * from './new-components/hidden';
+export * from './new-components/hidden-visually';
+export * from './new-components/alert';
+export * from './new-components/loading';
+export * from './new-components/notice';
+export * from './new-components/heading';
+export * from './new-components/text';
+export * from './new-components/button';
+export * from './new-components/button-link';
+export * from './new-components/text-link';
+export * from './new-components/checkbox-field';
+export * from './new-components/password-field';
+export * from './new-components/select-field';
+export * from './new-components/switch-field';
+export * from './new-components/text-area';
+export * from './new-components/text-field';
+export * from './new-components/tabs';
+export * from './new-components/modal';
+export * from './new-components/avatar';
+export * from './hooks/use-previous';
 export { default as Checkbox } from './components/checkbox';
 export { default as ColorPicker, COLORS } from './components/color-picker';
 export { default as Dropdown } from './components/dropdown';
-export { default as ErrorMessage } from './components/error-message';
-export { default as Icon } from './components/icon';
 export { default as Input } from './components/input';
-export { default as KeyCapturer, SUPPORTED_KEYS } from './components/key-capturer';
 export { default as KeyboardShortcut } from './components/keyboard-shortcut';
-export { default as Loading } from './components/loading';
-export * from './components/menu';
-export { default as Modal } from './components/modal';
-export { Notification } from './components/notification/notification';
+export { default as KeyCapturer, SUPPORTED_KEYS } from './components/key-capturer';
+export { default as Popover } from './components/popover';
 export { default as ProgressBar } from './components/progress-bar';
-export { default as RangeInput } from './components/range-input';
 export { default as Select } from './components/select';
-export { Tabs, Tab } from './components/tabs';
 export { default as Time } from './components/time';
-export { default as Tip } from './components/tip';
+export { Notification } from './components/notification/notification';
 export { Tooltip, TooltipProps } from './components/tooltip';
-export { default as Popover } from './components/popover';
+export * from './components/menu';
+export { default as DeprecatedButton } from './components/deprecated-button';
+export { default as DeprecatedModal } from './components/deprecated-modal';
+export { DeprecatedLoading } from './components/deprecated-loading';

package/lib/index.js

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

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { AlertTone } from '../common-types';
+declare type AllOrNone<T> = T | {
+    [K in keyof T]?: never;
+};
+declare type AlertCloseProps = AllOrNone<{
+    closeLabel: string;
+    onClose: () => void;
+}>;
+declare type AlertProps = {
+    id?: string;
+    children: React.ReactNode;
+    tone: AlertTone;
+} & AlertCloseProps;
+declare function Alert({ id, children, tone, closeLabel, onClose }: AlertProps): JSX.Element;
+export { Alert };
+export type { AlertProps };

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),l=require("../responsive-props.js"),t=require("../box/box.js"),n=require("../columns/columns.js"),r=require("../button/button.js"),a=require("../icons/alert-icon.js"),o=require("../icons/close-icon.js"),s=require("./alert.module.css.js");exports.Alert=function(i){var u=i.children,c=i.tone,m=i.closeLabel,d=i.onClose;return e.createElement(t.Box,{id:i.id,role:"alert","aria-live":"polite",borderRadius:"standard",className:[s.default.container,l.getClassNames(s.default,"tone",c)]},e.createElement(n.Columns,{space:"small",alignY:"top"},e.createElement(n.Column,{width:"content"},e.createElement(a.AlertIcon,{tone:c})),e.createElement(n.Column,null,e.createElement(t.Box,{paddingY:"xsmall",paddingRight:null!=d&&null!=m?void 0:"small"},u)),null!=d&&null!=m?e.createElement(n.Column,{width:"content"},e.createElement(r.Button,{variant:"quaternary",size:"small",onClick:d,"aria-label":m,icon:e.createElement(o.CloseIcon,null),style:{"--reactist-btn-hover-fill":"transparent"}})):null))};
+//# sourceMappingURL=alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sources":["../../../src/new-components/alert/alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport { AlertTone } from '../common-types'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\nimport { Button } from '../button'\nimport { Columns, Column } from '../columns'\n\nimport { AlertIcon } from '../icons/alert-icon'\nimport { CloseIcon } from '../icons/close-icon'\n\nimport styles from './alert.module.css'\n\ntype AllOrNone<T> = T | { [K in keyof T]?: never }\n\ntype AlertCloseProps = AllOrNone<{\n    closeLabel: string\n    onClose: () => void\n}>\n\ntype AlertProps = {\n    id?: string\n    children: React.ReactNode\n    tone: AlertTone\n} & AlertCloseProps\n\nfunction Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {\n    return (\n        <Box\n            id={id}\n            role=\"alert\"\n            aria-live=\"polite\"\n            borderRadius=\"standard\"\n            className={[styles.container, getClassNames(styles, 'tone', tone)]}\n        >\n            <Columns space=\"small\" alignY=\"top\">\n                <Column width=\"content\">\n                    <AlertIcon tone={tone} />\n                </Column>\n                <Column>\n                    <Box\n                        paddingY=\"xsmall\"\n                        paddingRight={onClose != null && closeLabel != null ? undefined : 'small'}\n                    >\n                        {children}\n                    </Box>\n                </Column>\n                {onClose != null && closeLabel != null ? (\n                    <Column width=\"content\">\n                        <Button\n                            variant=\"quaternary\"\n                            size=\"small\"\n                            onClick={onClose}\n                            aria-label={closeLabel}\n                            icon={<CloseIcon />}\n                            style={{\n                                // @ts-expect-error not sure how to make TypeScript understand custom CSS properties\n                                '--reactist-btn-hover-fill': 'transparent',\n                            }}\n                        />\n                    </Column>\n                ) : null}\n            </Columns>\n        </Box>\n    )\n}\n\nexport { Alert }\nexport type { AlertProps }\n"],"names":["children","tone","closeLabel","onClose","React","Box","id","role","borderRadius","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","paddingY","paddingRight","undefined","Button","variant","size","onClick","icon","CloseIcon","style"],"mappings":"uVAyBA,gBAAqBA,IAAAA,SAAUC,IAAAA,KAAMC,IAAAA,WAAYC,IAAAA,eAEzCC,gBAACC,OACGC,KAHKA,GAILC,KAAK,oBACK,SACVC,aAAa,WACbC,UAAW,CAACC,UAAOC,UAAWC,gBAAcF,UAAQ,OAAQT,KAE5DG,gBAACS,WAAQC,MAAM,QAAQC,OAAO,OAC1BX,gBAACY,UAAOC,MAAM,WACVb,gBAACc,aAAUjB,KAAMA,KAErBG,gBAACY,cACGZ,gBAACC,OACGc,SAAS,SACTC,aAAyB,MAAXjB,GAAiC,MAAdD,OAAqBmB,EAAY,SAEjErB,IAGG,MAAXG,GAAiC,MAAdD,EAChBE,gBAACY,UAAOC,MAAM,WACVb,gBAACkB,UACGC,QAAQ,aACRC,KAAK,QACLC,QAAStB,eACGD,EACZwB,KAAMtB,gBAACuB,kBACPC,MAAO,6BAE0B,kBAIzC"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"eb665121","tone-info":"d0373ff9","tone-positive":"bb18dcab","tone-caution":"_0af02331","tone-critical":"f76146f9"};
+//# sourceMappingURL=alert.module.css.js.map

package/lib/new-components/alert/alert.module.css.js.map

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

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

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

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

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

package/lib/{components → new-components}/avatar/avatar.d.ts

@@ -1,17 +1,20 @@
 /// <reference types="react" />
-import './avatar.less';
+import { ResponsiveProp } from '../responsive-props';
 declare type AvatarSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
 declare type Props = {
+    /** @deprecated Please use `exceptionallySetClassName` */
     className?: string;
+    exceptionallySetClassName?: string;
+    /** @deprecated */
     colorList?: string[];
-    size?: AvatarSize;
+    size?: ResponsiveProp<AvatarSize>;
     avatarUrl?: string;
     user: {
         name?: string;
         email: string;
     };
 };
-declare function Avatar({ user, avatarUrl, size, className, colorList }: Props): JSX.Element;
+declare function Avatar({ user, avatarUrl, size, className, colorList, exceptionallySetClassName, ...props }: Props): JSX.Element;
 declare namespace Avatar {
     var displayName: string;
 }

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,a=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,t=require("../responsive-props.js"),s=require("../box/box.js"),l=require("./utils.js"),i=require("./avatar.module.css.js"),o=["user","avatarUrl","size","className","colorList","exceptionallySetClassName"],c=["#fcc652","#e9952c","#e16b2d","#d84b40","#e8435a","#e5198a","#ad3889","#86389c","#a8a8a8","#98be2f","#5d9d50","#5f9f85","#5bbcb6","#32a3bf","#2bafeb","#2d88c3","#3863cc","#5e5e5e"];function u(e){var u=e.user,d=e.avatarUrl,n=e.size,b=void 0===n?"l":n,m=e.className,p=e.colorList,f=void 0===p?c:p,v=e.exceptionallySetClassName,x=a.objectWithoutPropertiesLoose(e,o),g=l.getInitials(u.name)||l.getInitials(u.email),j=b||"l",N=d?{backgroundImage:"url("+d+")",textIndent:"-9999px"}:{backgroundColor:f[l.emailToIndex(u.email,f.length)]},q=t.getClassNames(i.default,"size",j);return r.createElement(s.Box,Object.assign({className:[m,i.default.avatar,q,v],style:N},x),g)}u.displayName="Avatar",exports.Avatar=u;
+//# sourceMappingURL=avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sources":["../../../src/new-components/avatar/avatar.tsx"],"sourcesContent":["import React from 'react'\n\nimport { getInitials, emailToIndex } from './utils'\n\nimport { getClassNames, ResponsiveProp } from '../responsive-props'\nimport styles from './avatar.module.css'\nimport { Box } from '../box'\n\nconst AVATAR_COLORS = [\n    '#fcc652',\n    '#e9952c',\n    '#e16b2d',\n    '#d84b40',\n    '#e8435a',\n    '#e5198a',\n    '#ad3889',\n    '#86389c',\n    '#a8a8a8',\n    '#98be2f',\n    '#5d9d50',\n    '#5f9f85',\n    '#5bbcb6',\n    '#32a3bf',\n    '#2bafeb',\n    '#2d88c3',\n    '#3863cc',\n    '#5e5e5e',\n]\n\ntype AvatarSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'\n\ntype Props = {\n    /** @deprecated Please use `exceptionallySetClassName` */\n    className?: string\n    exceptionallySetClassName?: string\n    /** @deprecated */\n    colorList?: string[]\n    size?: ResponsiveProp<AvatarSize>\n    avatarUrl?: string\n    user: { name?: string; email: string }\n}\n\nfunction Avatar({\n    user,\n    avatarUrl,\n    size = 'l',\n    className,\n    colorList = AVATAR_COLORS,\n    exceptionallySetClassName,\n    ...props\n}: Props) {\n    const userInitials = getInitials(user.name) || getInitials(user.email)\n    const avatarSize = size ? size : 'l'\n\n    const style = avatarUrl\n        ? {\n              backgroundImage: `url(${avatarUrl})`,\n              textIndent: '-9999px', // hide the initials\n          }\n        : {\n              backgroundColor: colorList[emailToIndex(user.email, colorList.length)],\n          }\n\n    const sizeClassName = getClassNames(styles, 'size', avatarSize)\n\n    return (\n        <Box\n            className={[className, styles.avatar, sizeClassName, exceptionallySetClassName]}\n            style={style}\n            {...props}\n        >\n            {userInitials}\n        </Box>\n    )\n}\nAvatar.displayName = 'Avatar'\n\nexport { Avatar }\n"],"names":["AVATAR_COLORS","Avatar","user","avatarUrl","size","className","colorList","exceptionallySetClassName","props","userInitials","getInitials","name","email","avatarSize","style","backgroundImage","textIndent","backgroundColor","emailToIndex","length","sizeClassName","getClassNames","styles","React","Box","avatar","displayName"],"mappings":"sZAQMA,EAAgB,CAClB,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WAgBJ,SAASC,SACLC,IAAAA,KACAC,IAAAA,cACAC,KAAAA,aAAO,MACPC,IAAAA,cACAC,UAAAA,aAAYN,IACZO,IAAAA,0BACGC,sCAEGC,EAAeC,cAAYR,EAAKS,OAASD,cAAYR,EAAKU,OAC1DC,EAAaT,GAAc,IAE3BU,EAAQX,EACR,CACIY,uBAAwBZ,MACxBa,WAAY,WAEhB,CACIC,gBAAiBX,EAAUY,eAAahB,EAAKU,MAAON,EAAUa,UAGlEC,EAAgBC,gBAAcC,UAAQ,OAAQT,UAGhDU,gBAACC,qBACGnB,UAAW,CAACA,EAAWiB,UAAOG,OAAQL,EAAeb,GACrDO,MAAOA,GACHN,GAEHC,GAIbR,EAAOyB,YAAc"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={avatar:"_38a1be89","size-xxs":"d32e92ae","size-xs":"_0667d719","size-s":"cf529fcf","size-m":"_6e268eab","size-l":"d64c62cf","size-xl":"_44fb77de","size-xxl":"_01f85e0e","size-xxxl":"_41a5fe19","tablet-size-xxs":"_6ab1577d","tablet-size-xs":"b52a4963","tablet-size-s":"_714a8419","tablet-size-m":"_81cd4d51","tablet-size-l":"bf0a4edb","tablet-size-xl":"e4f0dabd","tablet-size-xxl":"_67ea065d","tablet-size-xxxl":"_2af7f76f","desktop-size-xxs":"_759081dc","desktop-size-xs":"_8290d1c1","desktop-size-s":"_48ea172d","desktop-size-m":"_758f6641","desktop-size-l":"f9ada088","desktop-size-xl":"d3bb7470","desktop-size-xxl":"_9a312ee3","desktop-size-xxxl":"a1d30c23"};
+//# sourceMappingURL=avatar.module.css.js.map

package/lib/new-components/avatar/avatar.module.css.js.map

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

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

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

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

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

package/lib/new-components/avatar/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/new-components/avatar/utils.ts"],"sourcesContent":["function getInitials(name?: string) {\n    if (!name) {\n        return ''\n    }\n\n    const seed = name.trim().split(' ')\n    const firstInitial = seed[0]\n    const lastInitial = seed[seed.length - 1]\n\n    let initials = firstInitial[0]\n    // Better readable this way.\n    // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with\n    if (firstInitial[0] !== lastInitial[0]) {\n        initials += lastInitial[0]\n    }\n    return initials.toUpperCase()\n}\n\nfunction emailToIndex(email: string, maxIndex: number) {\n    const seed = email.split('@')[0]\n    const hash = seed.charCodeAt(0) + seed.charCodeAt(seed.length - 1) || 0\n    return hash % maxIndex\n}\n\nexport { getInitials, emailToIndex }\n"],"names":["email","maxIndex","seed","split","charCodeAt","length","name","trim","firstInitial","lastInitial","initials","toUpperCase"],"mappings":"yFAkBA,SAAsBA,EAAeC,OAC3BC,EAAOF,EAAMG,MAAM,KAAK,UACjBD,EAAKE,WAAW,GAAKF,EAAKE,WAAWF,EAAKG,OAAS,IAAM,GACxDJ,uBArBlB,SAAqBK,OACZA,QACM,OAGLJ,EAAOI,EAAKC,OAAOJ,MAAM,KACzBK,EAAeN,EAAK,GACpBO,EAAcP,EAAKA,EAAKG,OAAS,GAEnCK,EAAWF,EAAa,UAGxBA,EAAa,KAAOC,EAAY,KAChCC,GAAYD,EAAY,IAErBC,EAASC"}

package/lib/new-components/avatar/utils.test.d.ts

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