@doist/reactist 28.7.0 → 28.7.2

package/es/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabStore,\n    Tab as BaseTab,\n    TabProps as BaseTabProps,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabPanelProps as BaseTabPanelProps,\n    TabStore,\n} from '@ariakit/react'\nimport { Box, BoxJustifyContent } from '../box'\nimport { Inline } from '../inline'\n\nimport type { ObfuscatedClassName, Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\n\ntype TabsContextValue = Required<Pick<TabsProps, 'variant'>> & {\n    tabStore: TabStore\n}\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ninterface TabsProps {\n    /**\n     * The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>`\n     * components\n     */\n    children: React.ReactNode\n\n    /**\n     * Determines the look and feel of the tabs\n     */\n    variant?: 'themed' | 'neutral'\n\n    /**\n     * The id of the selected tab. Assigning a value makes this a controlled component\n     */\n    selectedId?: string | null\n\n    /**\n     * The tab to initially select. This can be used if the component should not\n     * be a controlled component but needs to have a tab selected\n     */\n    defaultSelectedId?: string | null\n\n    /**\n     * Called with the tab id when a tab is selected\n     */\n    onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nfunction Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    variant = 'neutral',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabStore = useTabStore({\n        defaultSelectedId,\n        selectedId,\n        setSelectedId: onSelectedIdChange,\n    })\n    const actualSelectedId = tabStore.useState('selectedId')\n\n    const memoizedTabState = React.useMemo(\n        () => ({ tabStore, variant, selectedId: selectedId ?? actualSelectedId ?? null }),\n        [variant, tabStore, selectedId, actualSelectedId],\n    )\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ninterface TabProps\n    extends ObfuscatedClassName,\n        Omit<BaseTabProps, 'store' | 'className' | 'children' | 'id'> {\n    /**\n     * The content to render inside of the tab button\n     */\n    children: React.ReactNode\n\n    /**\n     * The tab's identifier. This must match its corresponding `<TabPanel>`'s id\n     */\n    id: string\n\n    /**\n     * Defines wether or not the tab is disabled.\n     */\n    disabled?: boolean\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nconst Tab = React.forwardRef<HTMLButtonElement, TabProps>(function Tab(\n    { children, id, disabled, exceptionallySetClassName, render, onClick },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    if (!tabContextValue) return null\n\n    const { variant, tabStore } = tabContextValue\n    const className = classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])\n\n    return (\n        <BaseTab\n            id={id}\n            ref={ref}\n            disabled={disabled}\n            store={tabStore}\n            render={render}\n            className={className}\n            onClick={onClick}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n\n    /**\n     * The width of the tab list.\n     *\n     * - `'maxContent'`: Each tab will be as wide as its content.\n     * - `'full'`: Each tab will be as wide as the tab list.\n     *\n     * @default 'maxContent'\n     */\n    width?: 'maxContent' | 'full'\n\n    /**\n     * How to align the tabs within the tab list.\n     *\n     * @default 'start'\n     */\n    align?: 'start' | 'center' | 'end'\n} & ObfuscatedClassName\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({\n    children,\n    space,\n    width = 'maxContent',\n    align = 'start',\n    exceptionallySetClassName,\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabListRef = React.useRef<HTMLDivElement | null>(null)\n    const tabListPrevWidthRef = React.useRef(0)\n\n    const tabContextValue = React.useContext(TabsContext)\n\n    const [selectedTabElement, setSelectedTabElement] = React.useState<HTMLElement | null>(null)\n    const [selectedTabStyle, setSelectedTabStyle] = React.useState<React.CSSProperties>({})\n\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n\n    const updateSelectedTabPosition = React.useCallback(\n        function updateSelectedTabPositionCallback() {\n            if (!selectedId || !tabListRef.current) {\n                return\n            }\n\n            const tabs = tabListRef.current.querySelectorAll('[role=\"tab\"]')\n\n            const selectedTab = Array.from(tabs).find(\n                (tab) => tab.getAttribute('id') === selectedId,\n            ) as HTMLElement | undefined\n\n            if (selectedTab) {\n                setSelectedTabElement(selectedTab)\n                setSelectedTabStyle({\n                    left: `${selectedTab.offsetLeft}px`,\n                    width: `${selectedTab.offsetWidth}px`,\n                })\n            }\n        },\n        [selectedId],\n    )\n\n    React.useEffect(\n        function updateSelectedTabPositionOnTabChange() {\n            updateSelectedTabPosition()\n        },\n        // `selectedId` is a dependency to ensure the effect runs when the selected tab changes\n        [selectedId, updateSelectedTabPosition],\n    )\n\n    React.useEffect(\n        function observeTabListWidthChange() {\n            let animationFrameId: number | null = null\n\n            const tabListObserver = new ResizeObserver(([entry]) => {\n                const width = entry?.contentRect.width\n\n                if (width && tabListPrevWidthRef.current !== width) {\n                    tabListPrevWidthRef.current = width\n\n                    if (animationFrameId !== null) {\n                        cancelAnimationFrame(animationFrameId)\n                    }\n\n                    animationFrameId = requestAnimationFrame(() => {\n                        updateSelectedTabPosition()\n                        animationFrameId = null\n                    })\n                }\n            })\n\n            if (tabListRef.current) {\n                tabListObserver.observe(tabListRef.current)\n            }\n\n            return function cleanupResizeObserver() {\n                if (animationFrameId) {\n                    cancelAnimationFrame(animationFrameId)\n                }\n\n                tabListObserver.disconnect()\n            }\n        },\n        [updateSelectedTabPosition],\n    )\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabStore, variant } = tabContextValue\n\n    const justifyContentAlignMap: Record<typeof align, BoxJustifyContent> = {\n        start: 'flexStart',\n        end: 'flexEnd',\n        center: 'center',\n    }\n\n    return (\n        // This extra <Box> not only provides alignment for the tabs, but also prevents <Inline>'s\n        // negative margins from collapsing when used in a flex container which will render the\n        // track with the wrong height\n        <Box\n            display=\"flex\"\n            justifyContent={width === 'full' ? 'center' : justifyContentAlignMap[align]}\n        >\n            <BaseTabList\n                store={tabStore}\n                render={\n                    <Box position=\"relative\" width={width} className={exceptionallySetClassName} />\n                }\n                ref={tabListRef}\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                {selectedTabElement ? (\n                    <Box\n                        className={[styles.selected, styles[`selected-${variant}`]]}\n                        style={selectedTabStyle}\n                    />\n                ) : null}\n                <Inline\n                    space={space}\n                    exceptionallySetClassName={classNames(\n                        width === 'full' ? styles.fullTabList : null,\n                    )}\n                >\n                    {children}\n                </Inline>\n            </BaseTabList>\n        </Box>\n    )\n}\n\ninterface TabPanelProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        Pick<BaseTabPanelProps, 'render'> {\n    /** The content to be rendered inside the tab */\n    children?: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This\n     * behaviour can be changed to 'active', which renders only when the tab is active, and 'lazy',\n     * meaning while inactive tab panels will not be rendered initially, they will remain mounted\n     * once they are active until the entire Tabs tree is unmounted.\n     */\n    renderMode?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a\n * corresponding `<Tab>` component.\n */\nconst TabPanel = React.forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(\n    { children, id, renderMode = 'always', ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const [tabRendered, setTabRendered] = React.useState(false)\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n    const tabIsActive = selectedId === id\n\n    React.useEffect(\n        function trackTabRenderedState() {\n            if (!tabRendered && tabIsActive) {\n                setTabRendered(true)\n            }\n        },\n        [tabRendered, tabIsActive],\n    )\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabStore } = tabContextValue\n    const shouldRender =\n        renderMode === 'always' ||\n        (renderMode === 'active' && tabIsActive) ||\n        (renderMode === 'lazy' && (tabIsActive || tabRendered))\n\n    return shouldRender ? (\n        <BaseTabPanel {...props} tabId={id} store={tabStore} ref={ref}>\n            {children}\n        </BaseTabPanel>\n    ) : null\n})\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will\n     * be called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the\n * TabPanel component. Can be placed freely within the main `<Tabs>` component.\n */\nfunction TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n    return tabContextValue ? children({ selectedId }) : null\n}\n\nexport { Tab, Tabs, TabList, TabPanel, TabAwareSlot }\n"],"names":["TabsContext","React","createContext","Tabs","children","selectedId","defaultSelectedId","variant","onSelectedIdChange","tabStore","useTabStore","setSelectedId","actualSelectedId","useState","memoizedTabState","useMemo","createElement","Provider","value","Tab","forwardRef","id","disabled","exceptionallySetClassName","render","onClick","ref","tabContextValue","useContext","className","classNames","styles","tab","BaseTab","store","TabList","space","width","align","props","tabListRef","useRef","tabListPrevWidthRef","selectedTabElement","setSelectedTabElement","selectedTabStyle","setSelectedTabStyle","updateSelectedTabPosition","useCallback","updateSelectedTabPositionCallback","current","tabs","querySelectorAll","selectedTab","Array","from","find","getAttribute","left","offsetLeft","offsetWidth","useEffect","updateSelectedTabPositionOnTabChange","observeTabListWidthChange","animationFrameId","tabListObserver","ResizeObserver","entry","contentRect","cancelAnimationFrame","requestAnimationFrame","observe","cleanupResizeObserver","disconnect","justifyContentAlignMap","start","end","center","Box","display","justifyContent","BaseTabList","_objectSpread","position","track","selected","style","Inline","fullTabList","TabPanel","renderMode","tabRendered","setTabRendered","tabIsActive","trackTabRenderedState","shouldRender","BaseTabPanel","tabId","TabAwareSlot"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabStore,\n    Tab as BaseTab,\n    TabProps as BaseTabProps,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabPanelProps as BaseTabPanelProps,\n    TabStore,\n} from '@ariakit/react'\nimport { Box, BoxJustifyContent } from '../box'\nimport { Inline } from '../inline'\n\nimport type { ObfuscatedClassName, Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\n\ntype TabsContextValue = Required<Pick<TabsProps, 'variant'>> & {\n    tabStore: TabStore\n}\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ninterface TabsProps {\n    /**\n     * The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>`\n     * components\n     */\n    children: React.ReactNode\n\n    /**\n     * Determines the look and feel of the tabs\n     */\n    variant?: 'themed' | 'neutral'\n\n    /**\n     * The id of the selected tab. Assigning a value makes this a controlled component\n     */\n    selectedId?: string | null\n\n    /**\n     * The tab to initially select. This can be used if the component should not\n     * be a controlled component but needs to have a tab selected\n     */\n    defaultSelectedId?: string | null\n\n    /**\n     * Called with the tab id when a tab is selected\n     */\n    onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nfunction Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    variant = 'neutral',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabStore = useTabStore({\n        defaultSelectedId,\n        selectedId,\n        setSelectedId: onSelectedIdChange,\n    })\n    const actualSelectedId = tabStore.useState('selectedId')\n\n    const memoizedTabState = React.useMemo(\n        () => ({ tabStore, variant, selectedId: selectedId ?? actualSelectedId ?? null }),\n        [variant, tabStore, selectedId, actualSelectedId],\n    )\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ninterface TabProps\n    extends ObfuscatedClassName,\n        Omit<BaseTabProps, 'store' | 'className' | 'children' | 'id'> {\n    /**\n     * The content to render inside of the tab button\n     */\n    children: React.ReactNode\n\n    /**\n     * The tab's identifier. This must match its corresponding `<TabPanel>`'s id\n     */\n    id: string\n\n    /**\n     * Defines wether or not the tab is disabled.\n     */\n    disabled?: boolean\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nconst Tab = React.forwardRef<HTMLButtonElement, TabProps>(function Tab(\n    { children, id, disabled, exceptionallySetClassName, render, onClick },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    if (!tabContextValue) return null\n\n    const { variant, tabStore } = tabContextValue\n    const className = classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])\n\n    return (\n        <BaseTab\n            id={id}\n            ref={ref}\n            disabled={disabled}\n            store={tabStore}\n            render={render}\n            className={className}\n            onClick={onClick}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n\n    /**\n     * The width of the tab list.\n     *\n     * - `'maxContent'`: Each tab will be as wide as its content.\n     * - `'full'`: Each tab will be as wide as the tab list.\n     *\n     * @default 'maxContent'\n     */\n    width?: 'maxContent' | 'full'\n\n    /**\n     * How to align the tabs within the tab list.\n     *\n     * @default 'start'\n     */\n    align?: 'start' | 'center' | 'end'\n} & ObfuscatedClassName\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({\n    children,\n    space,\n    width = 'maxContent',\n    align = 'start',\n    exceptionallySetClassName,\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabListRef = React.useRef<HTMLDivElement | null>(null)\n    const tabListPrevWidthRef = React.useRef(0)\n\n    const tabContextValue = React.useContext(TabsContext)\n\n    const [selectedTabElement, setSelectedTabElement] = React.useState<HTMLElement | null>(null)\n    const [selectedTabStyle, setSelectedTabStyle] = React.useState<React.CSSProperties>({})\n\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n\n    const updateSelectedTabPosition = React.useCallback(\n        function updateSelectedTabPositionCallback() {\n            if (!selectedId || !tabListRef.current) {\n                return\n            }\n\n            const tabs = tabListRef.current.querySelectorAll('[role=\"tab\"]')\n\n            const selectedTab = Array.from(tabs).find(\n                (tab) => tab.getAttribute('id') === selectedId,\n            ) as HTMLElement | undefined\n\n            if (selectedTab) {\n                setSelectedTabElement(selectedTab)\n                setSelectedTabStyle({\n                    left: `${selectedTab.offsetLeft}px`,\n                    width: `${selectedTab.offsetWidth}px`,\n                })\n            }\n        },\n        [selectedId],\n    )\n\n    React.useEffect(\n        function updateSelectedTabPositionOnTabChange() {\n            updateSelectedTabPosition()\n        },\n        // `selectedId` is a dependency to ensure the effect runs when the selected tab changes\n        [selectedId, updateSelectedTabPosition],\n    )\n\n    React.useEffect(\n        function observeTabListWidthChange() {\n            let animationFrameId: number | null = null\n\n            const tabListObserver = new ResizeObserver(([entry]) => {\n                const width = entry?.contentRect.width\n\n                if (width && tabListPrevWidthRef.current !== width) {\n                    tabListPrevWidthRef.current = width\n\n                    if (animationFrameId !== null) {\n                        cancelAnimationFrame(animationFrameId)\n                    }\n\n                    animationFrameId = requestAnimationFrame(() => {\n                        updateSelectedTabPosition()\n                        animationFrameId = null\n                    })\n                }\n            })\n\n            if (tabListRef.current) {\n                tabListObserver.observe(tabListRef.current)\n            }\n\n            return function cleanupResizeObserver() {\n                if (animationFrameId) {\n                    cancelAnimationFrame(animationFrameId)\n                }\n\n                tabListObserver.disconnect()\n            }\n        },\n        [updateSelectedTabPosition],\n    )\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabStore, variant } = tabContextValue\n\n    const justifyContentAlignMap: Record<typeof align, BoxJustifyContent> = {\n        start: 'flexStart',\n        end: 'flexEnd',\n        center: 'center',\n    }\n\n    return (\n        // This extra <Box> not only provides alignment for the tabs, but also prevents <Inline>'s\n        // negative margins from collapsing when used in a flex container which will render the\n        // track with the wrong height\n        <Box\n            display=\"flex\"\n            justifyContent={width === 'full' ? 'center' : justifyContentAlignMap[align]}\n        >\n            <BaseTabList\n                store={tabStore}\n                render={\n                    <Box position=\"relative\" width={width} className={exceptionallySetClassName} />\n                }\n                ref={tabListRef}\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                {selectedTabElement ? (\n                    <Box\n                        className={[styles.selected, styles[`selected-${variant}`]]}\n                        style={selectedTabStyle}\n                    />\n                ) : null}\n                <Inline\n                    space={space}\n                    exceptionallySetClassName={classNames(\n                        width === 'full' ? styles.fullTabList : null,\n                    )}\n                >\n                    {children}\n                </Inline>\n            </BaseTabList>\n        </Box>\n    )\n}\n\ninterface TabPanelProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        Pick<BaseTabPanelProps, 'render'> {\n    /** The content to be rendered inside the tab */\n    children?: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This\n     * behaviour can be changed to 'active', which renders only when the tab is active, and 'lazy',\n     * meaning while inactive tab panels will not be rendered initially, they will remain mounted\n     * once they are active until the entire Tabs tree is unmounted.\n     */\n    renderMode?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a\n * corresponding `<Tab>` component.\n */\nconst TabPanel = React.forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(\n    { children, id, renderMode = 'always', ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const [tabRendered, setTabRendered] = React.useState(false)\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n    const tabIsActive = selectedId === id\n\n    React.useEffect(\n        function trackTabRenderedState() {\n            if (!tabRendered && tabIsActive) {\n                setTabRendered(true)\n            }\n        },\n        [tabRendered, tabIsActive],\n    )\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabStore } = tabContextValue\n    const shouldRender =\n        renderMode === 'always' ||\n        (renderMode === 'active' && tabIsActive) ||\n        (renderMode === 'lazy' && (tabIsActive || tabRendered))\n\n    return shouldRender ? (\n        <BaseTabPanel {...props} tabId={id} store={tabStore} ref={ref}>\n            {children}\n        </BaseTabPanel>\n    ) : null\n})\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will\n     * be called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the\n * TabPanel component. Can be placed freely within the main `<Tabs>` component.\n */\nfunction TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n    return tabContextValue ? children({ selectedId }) : null\n}\n\nexport { Tab, Tabs, TabList, TabPanel, TabAwareSlot }\n"],"names":["TabsContext","React","createContext","Tabs","children","selectedId","defaultSelectedId","variant","onSelectedIdChange","tabStore","useTabStore","setSelectedId","actualSelectedId","useState","memoizedTabState","useMemo","createElement","Provider","value","Tab","forwardRef","id","disabled","exceptionallySetClassName","render","onClick","ref","tabContextValue","useContext","className","classNames","styles","tab","BaseTab","store","TabList","space","width","align","props","tabListRef","useRef","tabListPrevWidthRef","selectedTabElement","setSelectedTabElement","selectedTabStyle","setSelectedTabStyle","updateSelectedTabPosition","useCallback","updateSelectedTabPositionCallback","current","tabs","querySelectorAll","selectedTab","Array","from","find","getAttribute","left","offsetLeft","offsetWidth","useEffect","updateSelectedTabPositionOnTabChange","observeTabListWidthChange","animationFrameId","tabListObserver","ResizeObserver","entry","contentRect","cancelAnimationFrame","requestAnimationFrame","observe","cleanupResizeObserver","disconnect","justifyContentAlignMap","start","end","center","Box","display","justifyContent","BaseTabList","_objectSpread","position","track","selected","style","Inline","fullTabList","TabPanel","renderMode","tabRendered","setTabRendered","tabIsActive","trackTabRenderedState","shouldRender","BaseTabPanel","tabId","TabAwareSlot"],"mappings":"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"}

package/es/text/text.js

@@ -19,7 +19,7 @@ const Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  const lineClampMultipleLines = typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp != null ? lineClamp : 1) > 1;
+  const lineClampMultipleLines = typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp ?? 1) > 1;
   return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
     className: [exceptionallySetClassName, modules_a9637dd3.text, size !== 'body' ? getClassNames(modules_a9637dd3, 'size', size) : null, weight !== 'regular' ? getClassNames(modules_a9637dd3, 'weight', weight) : null, tone !== 'normal' ? getClassNames(modules_a9637dd3, 'tone', tone) : null, lineClampMultipleLines ? modules_a9637dd3.lineClampMultipleLines : null, lineClamp ? getClassNames(modules_a9637dd3, 'lineClamp', lineClamp.toString()) : null],

package/es/text/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../src/text/text.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../utils/polymorphism'\n\nimport type { Tone } from '../utils/common-types'\nimport type { BoxProps } from '../box'\n\nimport styles from './text.module.css'\n\ntype TextProps = {\n    children: React.ReactNode\n    /**\n     * The size of the text.\n     *\n     * The supported values, from smaller size to larger size, are:\n     * 'caption', 'copy', 'body', and 'subtitle'\n     *\n     * @default 'body'\n     */\n    size?: 'caption' | 'copy' | 'body' | 'subtitle'\n    /**\n     * The weight of the text font.\n     *\n     * @default 'regular'\n     */\n    weight?: 'regular' | 'semibold' | 'bold'\n    /**\n     * The tone (semantic color) of the text.\n     *\n     * @default 'normal'\n     */\n    tone?: Tone\n    /**\n     * Used to truncate the text to a given number of lines.\n     *\n     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was\n     * truncated. If the text fits without it being truncated, no ellipsis is added.\n     *\n     * By default, the text is not truncated at all, no matter how many lines it takes to render it.\n     *\n     * @default undefined\n     */\n    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n    /**\n     * How to align the text horizontally.\n     *\n     * @default 'start'\n     */\n    align?: BoxProps['textAlign']\n}\n\nconst Text = polymorphicComponent<'div', TextProps>(function Text(\n    {\n        as,\n        size = 'body',\n        weight = 'regular',\n        tone = 'normal',\n        align,\n        children,\n        lineClamp,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const lineClampMultipleLines =\n        typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp ?? 1) > 1\n\n    return (\n        <Box\n            {...props}\n            as={as}\n            className={[\n                exceptionallySetClassName,\n                styles.text,\n                size !== 'body' ? getClassNames(styles, 'size', size) : null,\n                weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n                tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n                lineClampMultipleLines ? styles.lineClampMultipleLines : null,\n                lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null,\n            ]}\n            textAlign={align}\n            // Prevents emojis from being cut-off\n            // See https://github.com/Doist/reactist/pull/528\n            paddingRight={lineClamp ? 'xsmall' : undefined}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type { TextProps }\nexport { Text }\n"],"names":["Text","polymorphicComponent","ref","as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName","props","lineClampMultipleLines","Number","React","createElement","Box","className","styles","text","getClassNames","toString","textAlign","paddingRight","undefined"],"mappings":";;;;;;;;AAoDMA,MAAAA,IAAI,gBAAGC,oBAAoB,CAAmB,SAASD,IAAT,CAAA,IAAA,EAYhDE,GAZgD,EAY7C;EAAA,IAXH;IACIC,EADJ;AAEIC,IAAAA,IAAI,GAAG,MAFX;AAGIC,IAAAA,MAAM,GAAG,SAHb;AAIIC,IAAAA,IAAI,GAAG,QAJX;IAKIC,KALJ;IAMIC,QANJ;IAOIC,SAPJ;AAQIC,IAAAA,yBAAAA;GAGD,GAAA,IAAA;AAAA,MAFIC,KAEJ,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;EAEH,MAAMC,sBAAsB,GACxB,OAAOH,SAAP,KAAqB,QAArB,GAAgCI,MAAM,CAACJ,SAAD,CAAN,GAAoB,CAApD,GAAwD,CAACA,SAAD,WAACA,SAAD,GAAc,CAAd,IAAmB,CAD/E,CAAA;AAGA,EAAA,oBACIK,KAAC,CAAAC,aAAD,CAACC,GAAD,oCACQL,KADR,CAAA,EAAA,EAAA,EAAA;AAEIR,IAAAA,EAAE,EAAEA,EAFR;AAGIc,IAAAA,SAAS,EAAE,CACPP,yBADO,EAEPQ,gBAAM,CAACC,IAFA,EAGPf,IAAI,KAAK,MAAT,GAAkBgB,aAAa,CAACF,gBAAD,EAAS,MAAT,EAAiBd,IAAjB,CAA/B,GAAwD,IAHjD,EAIPC,MAAM,KAAK,SAAX,GAAuBe,aAAa,CAACF,gBAAD,EAAS,QAAT,EAAmBb,MAAnB,CAApC,GAAiE,IAJ1D,EAKPC,IAAI,KAAK,QAAT,GAAoBc,aAAa,CAACF,gBAAD,EAAS,MAAT,EAAiBZ,IAAjB,CAAjC,GAA0D,IALnD,EAMPM,sBAAsB,GAAGM,gBAAM,CAACN,sBAAV,GAAmC,IANlD,EAOPH,SAAS,GAAGW,aAAa,CAACF,gBAAD,EAAS,WAAT,EAAsBT,SAAS,CAACY,QAAV,EAAtB,CAAhB,GAA8D,IAPhE,CAHf;AAYIC,IAAAA,SAAS,EAAEf,KAZf;AAaI;AACA;AACAgB,IAAAA,YAAY,EAAEd,SAAS,GAAG,QAAH,GAAce,SAfzC;AAgBItB,IAAAA,GAAG,EAAEA,GAAAA;AAhBT,GAAA,CAAA,EAkBKM,QAlBL,CADJ,CAAA;AAsBH,CAvCgC;;;;"}
+{"version":3,"file":"text.js","sources":["../../src/text/text.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../utils/polymorphism'\n\nimport type { Tone } from '../utils/common-types'\nimport type { BoxProps } from '../box'\n\nimport styles from './text.module.css'\n\ntype TextProps = {\n    children: React.ReactNode\n    /**\n     * The size of the text.\n     *\n     * The supported values, from smaller size to larger size, are:\n     * 'caption', 'copy', 'body', and 'subtitle'\n     *\n     * @default 'body'\n     */\n    size?: 'caption' | 'copy' | 'body' | 'subtitle'\n    /**\n     * The weight of the text font.\n     *\n     * @default 'regular'\n     */\n    weight?: 'regular' | 'semibold' | 'bold'\n    /**\n     * The tone (semantic color) of the text.\n     *\n     * @default 'normal'\n     */\n    tone?: Tone\n    /**\n     * Used to truncate the text to a given number of lines.\n     *\n     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was\n     * truncated. If the text fits without it being truncated, no ellipsis is added.\n     *\n     * By default, the text is not truncated at all, no matter how many lines it takes to render it.\n     *\n     * @default undefined\n     */\n    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n    /**\n     * How to align the text horizontally.\n     *\n     * @default 'start'\n     */\n    align?: BoxProps['textAlign']\n}\n\nconst Text = polymorphicComponent<'div', TextProps>(function Text(\n    {\n        as,\n        size = 'body',\n        weight = 'regular',\n        tone = 'normal',\n        align,\n        children,\n        lineClamp,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const lineClampMultipleLines =\n        typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp ?? 1) > 1\n\n    return (\n        <Box\n            {...props}\n            as={as}\n            className={[\n                exceptionallySetClassName,\n                styles.text,\n                size !== 'body' ? getClassNames(styles, 'size', size) : null,\n                weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n                tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n                lineClampMultipleLines ? styles.lineClampMultipleLines : null,\n                lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null,\n            ]}\n            textAlign={align}\n            // Prevents emojis from being cut-off\n            // See https://github.com/Doist/reactist/pull/528\n            paddingRight={lineClamp ? 'xsmall' : undefined}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type { TextProps }\nexport { Text }\n"],"names":["Text","polymorphicComponent","ref","as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName","props","lineClampMultipleLines","Number","React","createElement","Box","className","styles","text","getClassNames","toString","textAlign","paddingRight","undefined"],"mappings":";;;;;;;;AAoDMA,MAAAA,IAAI,gBAAGC,oBAAoB,CAAmB,SAASD,IAAT,CAAA,IAAA,EAYhDE,GAZgD,EAY7C;EAAA,IAXH;IACIC,EADJ;AAEIC,IAAAA,IAAI,GAAG,MAFX;AAGIC,IAAAA,MAAM,GAAG,SAHb;AAIIC,IAAAA,IAAI,GAAG,QAJX;IAKIC,KALJ;IAMIC,QANJ;IAOIC,SAPJ;AAQIC,IAAAA,yBAAAA;GAGD,GAAA,IAAA;AAAA,MAFIC,KAEJ,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;AAEH,EAAA,MAAMC,sBAAsB,GACxB,OAAOH,SAAP,KAAqB,QAArB,GAAgCI,MAAM,CAACJ,SAAD,CAAN,GAAoB,CAApD,GAAwD,CAACA,SAAS,IAAI,CAAd,IAAmB,CAD/E,CAAA;AAGA,EAAA,oBACIK,KAAC,CAAAC,aAAD,CAACC,GAAD,oCACQL,KADR,CAAA,EAAA,EAAA,EAAA;AAEIR,IAAAA,EAAE,EAAEA,EAFR;AAGIc,IAAAA,SAAS,EAAE,CACPP,yBADO,EAEPQ,gBAAM,CAACC,IAFA,EAGPf,IAAI,KAAK,MAAT,GAAkBgB,aAAa,CAACF,gBAAD,EAAS,MAAT,EAAiBd,IAAjB,CAA/B,GAAwD,IAHjD,EAIPC,MAAM,KAAK,SAAX,GAAuBe,aAAa,CAACF,gBAAD,EAAS,QAAT,EAAmBb,MAAnB,CAApC,GAAiE,IAJ1D,EAKPC,IAAI,KAAK,QAAT,GAAoBc,aAAa,CAACF,gBAAD,EAAS,MAAT,EAAiBZ,IAAjB,CAAjC,GAA0D,IALnD,EAMPM,sBAAsB,GAAGM,gBAAM,CAACN,sBAAV,GAAmC,IANlD,EAOPH,SAAS,GAAGW,aAAa,CAACF,gBAAD,EAAS,WAAT,EAAsBT,SAAS,CAACY,QAAV,EAAtB,CAAhB,GAA8D,IAPhE,CAHf;AAYIC,IAAAA,SAAS,EAAEf,KAZf;AAaI;AACA;AACAgB,IAAAA,YAAY,EAAEd,SAAS,GAAG,QAAH,GAAce,SAfzC;AAgBItB,IAAAA,GAAG,EAAEA,GAAAA;AAhBT,GAAA,CAAA,EAkBKM,QAlBL,CADJ,CAAA;AAsBH,CAvCgC;;;;"}

package/es/toast/toast-animation.js

@@ -114,7 +114,7 @@ function useToastsAnimation() {
           transition: ENTRANCE_TRANSITION,
           transforms: [{
             property: 'transform',
-            from: "translateY(" + (prevTop - top) + "px)"
+            from: `translateY(${prevTop - top}px)`
           }]
         });
       } else if (typeof prevTop !== 'number') {
@@ -124,7 +124,7 @@ function useToastsAnimation() {
           transition: ENTRANCE_TRANSITION,
           transforms: [{
             property: 'transform',
-            from: "translateY(" + height + "px)"
+            from: `translateY(${height}px)`
           }, {
             property: 'opacity',
             from: '0'

package/es/toast/toast-animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast-animation.js","sources":["../../src/toast/toast-animation.ts"],"sourcesContent":["/**\n * Adapted with minor changes from https://github.com/seek-oss/braid-design-system/blob/7a5ebccb/packages/braid-design-system/lib/components/useToast/useFlipList.ts\n *\n * MIT License\n *\n * Copyright (c) 2018 SEEK\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport { useMemo, useCallback, useLayoutEffect } from 'react'\n\nconst ANIMATION_TIMEOUT = 400\nconst ENTRANCE_TRANSITION = 'transform 0.3s ease, opacity 0.3s ease'\nconst EXIT_TRANSITION = 'opacity 0.2s ease'\n\ntype Transform = {\n    property: 'opacity' | 'transform' | 'scale'\n    from?: string\n    to?: string\n}\n\n/**\n * Applies the \"from\" value of given CSS properties, and also sets a transition CSS property. Then\n * it waits an animation frame before setting the same CSS properties to the target \"to\" value. This\n * triggers the browser to perform the CSS transition on them.\n *\n * At the end of the animation, it cleans up, unsetting all the CSS properties (including the\n * transition), and calls the \"done\" callback, if given.\n */\nfunction animate({\n    element,\n    transforms,\n    transition,\n    done,\n}: {\n    element: HTMLElement\n    transforms: Transform[]\n    transition: string\n    done?: () => void\n}) {\n    const fallbackTimeout = setTimeout(() => {\n        done?.()\n    }, ANIMATION_TIMEOUT)\n\n    transforms.forEach(({ property, from = '' }) => {\n        element.style.setProperty(property, from)\n    })\n    element.style.setProperty('transition', '')\n\n    function transitionEndHandler(event: TransitionEvent) {\n        if (event.target !== element) {\n            return\n        }\n        element.style.setProperty('transition', '')\n        done?.()\n        element.removeEventListener('transitionend', transitionEndHandler)\n        clearTimeout(fallbackTimeout)\n    }\n\n    element.addEventListener('transitionend', transitionEndHandler)\n\n    // Call requestAnimationFrame twice to make sure we have a full animation frame at our disposal\n    window.requestAnimationFrame(() => {\n        window.requestAnimationFrame(() => {\n            element.style.setProperty('transition', transition)\n            transforms.forEach(({ property, to = '' }) => {\n                element.style.setProperty(property, to)\n            })\n        })\n    })\n}\n\ntype ToastsAnimationToolkit = {\n    /**\n     * Used for gathering all the active stacked toast elements. Should be used by passing\n     * `ref={mappedRef(toastId)}` to the stacked toasts.\n     */\n    mappedRef: (toastId: string) => (ref: HTMLElement | null) => void\n\n    /**\n     * The stacked toasts view should use this callback when it needs to remove a toast, instead of\n     * removing it right away. The actual removal from the state (and consequently, from the DOM)\n     * should happen in the `onAnimationDone` instead.\n     */\n    animateRemove: (toastId: string, onAnimationDone: () => void) => void\n}\n\n/**\n * Provides the functionality of animating the stacked toasts when they appear and before they\n * disappear.\n *\n * It works by keeping a mapping from toast IDs to the toast elements, and keeping a mapping from\n * toast IDs to their top position. Then, on every single re-render, it compares the new DOM\n * situation with the previously stored one in these mappings. With this information, it applies\n * animations that smoothly transitions between both states.\n */\nfunction useToastsAnimation(): ToastsAnimationToolkit {\n    const refs = useMemo(() => new Map<string, HTMLElement | null>(), [])\n    const positions = useMemo(() => new Map<string, number>(), [])\n\n    useLayoutEffect(() => {\n        const animations: Array<{\n            element: HTMLElement\n            transforms: Transform[]\n            transition: string\n        }> = []\n\n        Array.from(refs.entries()).forEach(([id, element]) => {\n            if (!element) {\n                refs.delete(id)\n                return\n            }\n\n            const prevTop = positions.get(id)\n            const { top, height } = element.getBoundingClientRect()\n\n            if (typeof prevTop === 'number' && prevTop !== top) {\n                // Move animation\n                animations.push({\n                    element,\n                    transition: ENTRANCE_TRANSITION,\n                    transforms: [{ property: 'transform', from: `translateY(${prevTop - top}px)` }],\n                })\n            } else if (typeof prevTop !== 'number') {\n                // Enter animation\n                animations.push({\n                    element,\n                    transition: ENTRANCE_TRANSITION,\n                    transforms: [\n                        { property: 'transform', from: `translateY(${height}px)` },\n                        { property: 'opacity', from: '0' },\n                    ],\n                })\n            }\n\n            positions.set(id, element.getBoundingClientRect().top)\n        })\n\n        animations.forEach(({ element, transforms, transition }) => {\n            animate({ element, transforms, transition })\n        })\n    })\n\n    const animateRemove = useCallback(\n        function animateRemove(id: string, onAnimationDone: () => void) {\n            const element = refs.get(id)\n            if (element) {\n                // Removal animation\n                animate({\n                    element,\n                    transforms: [{ property: 'opacity', to: '0' }],\n                    transition: EXIT_TRANSITION,\n                    done: onAnimationDone,\n                })\n            }\n        },\n        [refs],\n    )\n\n    const mappedRef = useCallback(\n        (id: string) => (ref: HTMLElement | null) => {\n            refs.set(id, ref)\n        },\n        [refs],\n    )\n\n    return { mappedRef, animateRemove }\n}\n\nexport { ANIMATION_TIMEOUT, useToastsAnimation }\n"],"names":["ANIMATION_TIMEOUT","ENTRANCE_TRANSITION","EXIT_TRANSITION","animate","element","transforms","transition","done","fallbackTimeout","setTimeout","forEach","property","from","style","setProperty","transitionEndHandler","event","target","removeEventListener","clearTimeout","addEventListener","window","requestAnimationFrame","to","useToastsAnimation","refs","useMemo","Map","positions","useLayoutEffect","animations","Array","entries","id","delete","prevTop","get","top","height","getBoundingClientRect","push","set","animateRemove","useCallback","onAnimationDone","mappedRef","ref"],"mappings":"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"}
+{"version":3,"file":"toast-animation.js","sources":["../../src/toast/toast-animation.ts"],"sourcesContent":["/**\n * Adapted with minor changes from https://github.com/seek-oss/braid-design-system/blob/7a5ebccb/packages/braid-design-system/lib/components/useToast/useFlipList.ts\n *\n * MIT License\n *\n * Copyright (c) 2018 SEEK\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport { useMemo, useCallback, useLayoutEffect } from 'react'\n\nconst ANIMATION_TIMEOUT = 400\nconst ENTRANCE_TRANSITION = 'transform 0.3s ease, opacity 0.3s ease'\nconst EXIT_TRANSITION = 'opacity 0.2s ease'\n\ntype Transform = {\n    property: 'opacity' | 'transform' | 'scale'\n    from?: string\n    to?: string\n}\n\n/**\n * Applies the \"from\" value of given CSS properties, and also sets a transition CSS property. Then\n * it waits an animation frame before setting the same CSS properties to the target \"to\" value. This\n * triggers the browser to perform the CSS transition on them.\n *\n * At the end of the animation, it cleans up, unsetting all the CSS properties (including the\n * transition), and calls the \"done\" callback, if given.\n */\nfunction animate({\n    element,\n    transforms,\n    transition,\n    done,\n}: {\n    element: HTMLElement\n    transforms: Transform[]\n    transition: string\n    done?: () => void\n}) {\n    const fallbackTimeout = setTimeout(() => {\n        done?.()\n    }, ANIMATION_TIMEOUT)\n\n    transforms.forEach(({ property, from = '' }) => {\n        element.style.setProperty(property, from)\n    })\n    element.style.setProperty('transition', '')\n\n    function transitionEndHandler(event: TransitionEvent) {\n        if (event.target !== element) {\n            return\n        }\n        element.style.setProperty('transition', '')\n        done?.()\n        element.removeEventListener('transitionend', transitionEndHandler)\n        clearTimeout(fallbackTimeout)\n    }\n\n    element.addEventListener('transitionend', transitionEndHandler)\n\n    // Call requestAnimationFrame twice to make sure we have a full animation frame at our disposal\n    window.requestAnimationFrame(() => {\n        window.requestAnimationFrame(() => {\n            element.style.setProperty('transition', transition)\n            transforms.forEach(({ property, to = '' }) => {\n                element.style.setProperty(property, to)\n            })\n        })\n    })\n}\n\ntype ToastsAnimationToolkit = {\n    /**\n     * Used for gathering all the active stacked toast elements. Should be used by passing\n     * `ref={mappedRef(toastId)}` to the stacked toasts.\n     */\n    mappedRef: (toastId: string) => (ref: HTMLElement | null) => void\n\n    /**\n     * The stacked toasts view should use this callback when it needs to remove a toast, instead of\n     * removing it right away. The actual removal from the state (and consequently, from the DOM)\n     * should happen in the `onAnimationDone` instead.\n     */\n    animateRemove: (toastId: string, onAnimationDone: () => void) => void\n}\n\n/**\n * Provides the functionality of animating the stacked toasts when they appear and before they\n * disappear.\n *\n * It works by keeping a mapping from toast IDs to the toast elements, and keeping a mapping from\n * toast IDs to their top position. Then, on every single re-render, it compares the new DOM\n * situation with the previously stored one in these mappings. With this information, it applies\n * animations that smoothly transitions between both states.\n */\nfunction useToastsAnimation(): ToastsAnimationToolkit {\n    const refs = useMemo(() => new Map<string, HTMLElement | null>(), [])\n    const positions = useMemo(() => new Map<string, number>(), [])\n\n    useLayoutEffect(() => {\n        const animations: Array<{\n            element: HTMLElement\n            transforms: Transform[]\n            transition: string\n        }> = []\n\n        Array.from(refs.entries()).forEach(([id, element]) => {\n            if (!element) {\n                refs.delete(id)\n                return\n            }\n\n            const prevTop = positions.get(id)\n            const { top, height } = element.getBoundingClientRect()\n\n            if (typeof prevTop === 'number' && prevTop !== top) {\n                // Move animation\n                animations.push({\n                    element,\n                    transition: ENTRANCE_TRANSITION,\n                    transforms: [{ property: 'transform', from: `translateY(${prevTop - top}px)` }],\n                })\n            } else if (typeof prevTop !== 'number') {\n                // Enter animation\n                animations.push({\n                    element,\n                    transition: ENTRANCE_TRANSITION,\n                    transforms: [\n                        { property: 'transform', from: `translateY(${height}px)` },\n                        { property: 'opacity', from: '0' },\n                    ],\n                })\n            }\n\n            positions.set(id, element.getBoundingClientRect().top)\n        })\n\n        animations.forEach(({ element, transforms, transition }) => {\n            animate({ element, transforms, transition })\n        })\n    })\n\n    const animateRemove = useCallback(\n        function animateRemove(id: string, onAnimationDone: () => void) {\n            const element = refs.get(id)\n            if (element) {\n                // Removal animation\n                animate({\n                    element,\n                    transforms: [{ property: 'opacity', to: '0' }],\n                    transition: EXIT_TRANSITION,\n                    done: onAnimationDone,\n                })\n            }\n        },\n        [refs],\n    )\n\n    const mappedRef = useCallback(\n        (id: string) => (ref: HTMLElement | null) => {\n            refs.set(id, ref)\n        },\n        [refs],\n    )\n\n    return { mappedRef, animateRemove }\n}\n\nexport { ANIMATION_TIMEOUT, useToastsAnimation }\n"],"names":["ANIMATION_TIMEOUT","ENTRANCE_TRANSITION","EXIT_TRANSITION","animate","element","transforms","transition","done","fallbackTimeout","setTimeout","forEach","property","from","style","setProperty","transitionEndHandler","event","target","removeEventListener","clearTimeout","addEventListener","window","requestAnimationFrame","to","useToastsAnimation","refs","useMemo","Map","positions","useLayoutEffect","animations","Array","entries","id","delete","prevTop","get","top","height","getBoundingClientRect","push","set","animateRemove","useCallback","onAnimationDone","mappedRef","ref"],"mappings":";;AAAA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;AAIGA,MAAAA,iBAAiB,GAAG,IAA1B;AACA,MAAMC,mBAAmB,GAAG,wCAA5B,CAAA;AACA,MAAMC,eAAe,GAAG,mBAAxB,CAAA;AAQA;;;;;;;AAOG;;AACH,SAASC,OAAT,CAAiB;EACbC,OADa;EAEbC,UAFa;EAGbC,UAHa;AAIbC,EAAAA,IAAAA;AAJa,CAAjB,EAUC;AACG,EAAA,MAAMC,eAAe,GAAGC,UAAU,CAAC,MAAK;IACpCF,IAAI,IAAA,IAAJ,YAAAA,IAAI,EAAA,CAAA;GAD0B,EAE/BP,iBAF+B,CAAlC,CAAA;EAIAK,UAAU,CAACK,OAAX,CAAmB,CAAC;IAAEC,QAAF;AAAYC,IAAAA,IAAI,GAAG,EAAA;AAAnB,GAAD,KAA4B;AAC3CR,IAAAA,OAAO,CAACS,KAAR,CAAcC,WAAd,CAA0BH,QAA1B,EAAoCC,IAApC,CAAA,CAAA;GADJ,CAAA,CAAA;AAGAR,EAAAA,OAAO,CAACS,KAAR,CAAcC,WAAd,CAA0B,YAA1B,EAAwC,EAAxC,CAAA,CAAA;;EAEA,SAASC,oBAAT,CAA8BC,KAA9B,EAAoD;AAChD,IAAA,IAAIA,KAAK,CAACC,MAAN,KAAiBb,OAArB,EAA8B;AAC1B,MAAA,OAAA;AACH,KAAA;;AACDA,IAAAA,OAAO,CAACS,KAAR,CAAcC,WAAd,CAA0B,YAA1B,EAAwC,EAAxC,CAAA,CAAA;IACAP,IAAI,IAAA,IAAJ,YAAAA,IAAI,EAAA,CAAA;AACJH,IAAAA,OAAO,CAACc,mBAAR,CAA4B,eAA5B,EAA6CH,oBAA7C,CAAA,CAAA;IACAI,YAAY,CAACX,eAAD,CAAZ,CAAA;AACH,GAAA;;AAEDJ,EAAAA,OAAO,CAACgB,gBAAR,CAAyB,eAAzB,EAA0CL,oBAA1C,EApBH;;EAuBGM,MAAM,CAACC,qBAAP,CAA6B,MAAK;IAC9BD,MAAM,CAACC,qBAAP,CAA6B,MAAK;AAC9BlB,MAAAA,OAAO,CAACS,KAAR,CAAcC,WAAd,CAA0B,YAA1B,EAAwCR,UAAxC,CAAA,CAAA;MACAD,UAAU,CAACK,OAAX,CAAmB,CAAC;QAAEC,QAAF;AAAYY,QAAAA,EAAE,GAAG,EAAA;AAAjB,OAAD,KAA0B;AACzCnB,QAAAA,OAAO,CAACS,KAAR,CAAcC,WAAd,CAA0BH,QAA1B,EAAoCY,EAApC,CAAA,CAAA;OADJ,CAAA,CAAA;KAFJ,CAAA,CAAA;GADJ,CAAA,CAAA;AAQH,CAAA;AAiBD;;;;;;;;AAQG;;;AACH,SAASC,kBAAT,GAA2B;EACvB,MAAMC,IAAI,GAAGC,OAAO,CAAC,MAAM,IAAIC,GAAJ,EAAP,EAA8C,EAA9C,CAApB,CAAA;EACA,MAAMC,SAAS,GAAGF,OAAO,CAAC,MAAM,IAAIC,GAAJ,EAAP,EAAkC,EAAlC,CAAzB,CAAA;AAEAE,EAAAA,eAAe,CAAC,MAAK;IACjB,MAAMC,UAAU,GAIX,EAJL,CAAA;AAMAC,IAAAA,KAAK,CAACnB,IAAN,CAAWa,IAAI,CAACO,OAAL,EAAX,CAAA,CAA2BtB,OAA3B,CAAmC,CAAC,CAACuB,EAAD,EAAK7B,OAAL,CAAD,KAAkB;MACjD,IAAI,CAACA,OAAL,EAAc;QACVqB,IAAI,CAACS,MAAL,CAAYD,EAAZ,CAAA,CAAA;AACA,QAAA,OAAA;AACH,OAAA;;AAED,MAAA,MAAME,OAAO,GAAGP,SAAS,CAACQ,GAAV,CAAcH,EAAd,CAAhB,CAAA;MACA,MAAM;QAAEI,GAAF;AAAOC,QAAAA,MAAAA;OAAWlC,GAAAA,OAAO,CAACmC,qBAAR,EAAxB,CAAA;;MAEA,IAAI,OAAOJ,OAAP,KAAmB,QAAnB,IAA+BA,OAAO,KAAKE,GAA/C,EAAoD;AAChD;QACAP,UAAU,CAACU,IAAX,CAAgB;UACZpC,OADY;AAEZE,UAAAA,UAAU,EAAEL,mBAFA;AAGZI,UAAAA,UAAU,EAAE,CAAC;AAAEM,YAAAA,QAAQ,EAAE,WAAZ;AAAyBC,YAAAA,IAAI,gBAAgBuB,OAAO,GAAGE,GAAG,CAAA,GAAA,CAAA;WAA3D,CAAA;SAHhB,CAAA,CAAA;AAKH,OAPD,MAOO,IAAI,OAAOF,OAAP,KAAmB,QAAvB,EAAiC;AACpC;QACAL,UAAU,CAACU,IAAX,CAAgB;UACZpC,OADY;AAEZE,UAAAA,UAAU,EAAEL,mBAFA;AAGZI,UAAAA,UAAU,EAAE,CACR;AAAEM,YAAAA,QAAQ,EAAE,WAAZ;YAAyBC,IAAI,EAAE,cAAc0B,MAAM,CAAA,GAAA,CAAA;AAAnD,WADQ,EAER;AAAE3B,YAAAA,QAAQ,EAAE,SAAZ;AAAuBC,YAAAA,IAAI,EAAE,GAAA;WAFrB,CAAA;SAHhB,CAAA,CAAA;AAQH,OAAA;;MAEDgB,SAAS,CAACa,GAAV,CAAcR,EAAd,EAAkB7B,OAAO,CAACmC,qBAAR,EAAA,CAAgCF,GAAlD,CAAA,CAAA;KA5BJ,CAAA,CAAA;IA+BAP,UAAU,CAACpB,OAAX,CAAmB,CAAC;MAAEN,OAAF;MAAWC,UAAX;AAAuBC,MAAAA,UAAAA;AAAvB,KAAD,KAAwC;AACvDH,MAAAA,OAAO,CAAC;QAAEC,OAAF;QAAWC,UAAX;AAAuBC,QAAAA,UAAAA;AAAvB,OAAD,CAAP,CAAA;KADJ,CAAA,CAAA;AAGH,GAzCc,CAAf,CAAA;EA2CA,MAAMoC,aAAa,GAAGC,WAAW,CAC7B,SAASD,aAAT,CAAuBT,EAAvB,EAAmCW,eAAnC,EAA8D;AAC1D,IAAA,MAAMxC,OAAO,GAAGqB,IAAI,CAACW,GAAL,CAASH,EAAT,CAAhB,CAAA;;AACA,IAAA,IAAI7B,OAAJ,EAAa;AACT;AACAD,MAAAA,OAAO,CAAC;QACJC,OADI;AAEJC,QAAAA,UAAU,EAAE,CAAC;AAAEM,UAAAA,QAAQ,EAAE,SAAZ;AAAuBY,UAAAA,EAAE,EAAE,GAAA;AAA3B,SAAD,CAFR;AAGJjB,QAAAA,UAAU,EAAEJ,eAHR;AAIJK,QAAAA,IAAI,EAAEqC,eAAAA;AAJF,OAAD,CAAP,CAAA;AAMH,KAAA;AACJ,GAZ4B,EAa7B,CAACnB,IAAD,CAb6B,CAAjC,CAAA;AAgBA,EAAA,MAAMoB,SAAS,GAAGF,WAAW,CACxBV,EAAD,IAAiBa,GAAD,IAA4B;AACxCrB,IAAAA,IAAI,CAACgB,GAAL,CAASR,EAAT,EAAaa,GAAb,CAAA,CAAA;AACH,GAHwB,EAIzB,CAACrB,IAAD,CAJyB,CAA7B,CAAA;EAOA,OAAO;IAAEoB,SAAF;AAAaH,IAAAA,aAAAA;GAApB,CAAA;AACH;;;;"}

package/es/toast/use-toasts.js

@@ -48,24 +48,20 @@ const InternalToast = /*#__PURE__*/React__default.forwardRef(function InternalTo
    */
 
   const actionWithCustomActionHandler = React__default.useMemo(() => {
-    var _action$closeToast;
-
     if (!isActionObject(action)) {
       return action;
     }
 
     return _objectSpread2(_objectSpread2({}, action), {}, {
-      closeToast: (_action$closeToast = action.closeToast) != null ? _action$closeToast : true,
+      closeToast: action.closeToast ?? true,
       onClick: function handleActionClick() {
-        var _action$closeToast2;
-
         if (!action) {
           return;
         }
 
         action.onClick();
 
-        if ((_action$closeToast2 = action.closeToast) != null ? _action$closeToast2 : true) {
+        if (action.closeToast ?? true) {
           removeToast();
         }
       }

package/es/toast/use-toasts.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-toasts.js","sources":["../../src/toast/use-toasts.tsx"],"sourcesContent":["import React from 'react'\nimport { Portal } from '@ariakit/react'\n\nimport { generateElementId } from '../utils/common-helpers'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { isActionObject, StaticToast, StaticToastProps } from './static-toast'\n\nimport styles from './toast.module.css'\n\nimport type { Space } from '../utils/common-types'\nimport { useToastsAnimation } from './toast-animation'\n\n/**\n * The props needed to fire up a new notification toast.\n */\ntype ToastProps = StaticToastProps & {\n    /**\n     * The number of seconds the toast is expected to be shown before it is dismissed automatically,\n     * or false to disable auto-dismiss.\n     *\n     * It defaults to whatever is the autoDismissDelay set in the ToastsProvider.\n     */\n    autoDismissDelay?: number | false\n\n    /**\n     * The label for the button that dismisses the toast.\n     *\n     * It defaults to the value set in the ToastsProvider, but individual toasts can have a\n     * different value if needed.\n     */\n    dismissLabel?: string\n\n    /**\n     * Whether to show the dismiss button or not.\n     *\n     * Use this value with care. If combined with disabling `autoDismissDelay`, it may leave you\n     * with toasts that the user won't be able to dismiss at will. It then is your responsibility to\n     * dismiss the toast by calling the function returned by `showToast`.\n     */\n    showDismissButton?: boolean\n}\n\n//\n// InternalToast component and its props\n//\n\ntype InternalToastProps = Omit<ToastProps, 'autoDismissDelay' | 'dismissLabel'> &\n    Required<Pick<ToastProps, 'autoDismissDelay' | 'dismissLabel'>> & {\n        toastId: string\n        onRemoveToast: (toastId: string) => void\n    }\n\n/** @private */\nconst InternalToast = React.forwardRef<HTMLDivElement, InternalToastProps>(function InternalToast(\n    {\n        message,\n        description,\n        icon,\n        action,\n        autoDismissDelay,\n        dismissLabel,\n        showDismissButton = true,\n        toastId,\n        onDismiss,\n        onRemoveToast,\n    },\n    ref,\n) {\n    const timeoutRef = React.useRef<number | undefined>()\n\n    const removeToast = React.useCallback(\n        function removeToast() {\n            onRemoveToast(toastId)\n            onDismiss?.()\n        },\n        [onDismiss, onRemoveToast, toastId],\n    )\n\n    const startTimeout = React.useCallback(\n        function startTimeout() {\n            if (!autoDismissDelay) return\n            timeoutRef.current = window.setTimeout(removeToast, autoDismissDelay * 1000)\n        },\n        [autoDismissDelay, removeToast],\n    )\n\n    const stopTimeout = React.useCallback(function stopTimeout() {\n        clearTimeout(timeoutRef.current)\n        timeoutRef.current = undefined\n    }, [])\n\n    React.useEffect(\n        function setupAutoDismiss() {\n            stopTimeout()\n            startTimeout()\n\n            return stopTimeout\n        },\n        [startTimeout, stopTimeout],\n    )\n\n    /**\n     * If the action is toast action object and not a custom element,\n     * the `onClick` property is wrapped in another handler responsible\n     * for removing the toast when the action is triggered.\n     */\n    const actionWithCustomActionHandler = React.useMemo(() => {\n        if (!isActionObject(action)) {\n            return action\n        }\n\n        return {\n            ...action,\n            closeToast: action.closeToast ?? true,\n            onClick: function handleActionClick() {\n                if (!action) {\n                    return\n                }\n\n                action.onClick()\n\n                if (action.closeToast ?? true) {\n                    removeToast()\n                }\n            },\n        }\n    }, [action, removeToast])\n\n    return (\n        <StaticToast\n            ref={ref}\n            message={message}\n            description={description}\n            icon={icon}\n            action={actionWithCustomActionHandler}\n            onDismiss={showDismissButton ? removeToast : undefined}\n            dismissLabel={dismissLabel}\n            // @ts-expect-error\n            onMouseEnter={stopTimeout}\n            onMouseLeave={startTimeout}\n        />\n    )\n})\n\n//\n// Internal state and context\n//\n\ntype InternalToastEntry = Omit<InternalToastProps, 'onRemoveToast'>\ntype ToastsList = readonly InternalToastEntry[]\n\ntype ShowToastAction = (props: ToastProps) => () => void\nconst ToastsContext = React.createContext<ShowToastAction>(() => () => undefined)\n\n/**\n * The props needed by the ToastsProvider component.\n *\n * @see ToastsProvider\n */\ntype ToastsProviderProps = {\n    /**\n     * The default label to apply to toast dismiss buttons.\n     *\n     * This is useful in environments that need locatization, so you do not need to pass the same\n     * translated label every time you trigger a toast.\n     *\n     * However, you can still apply a different label to a specific toast, by passing a different\n     * value when calling showToast.\n     *\n     * @default 'Close'\n     */\n    defaultDismissLabel?: string\n\n    /**\n     * The default number of seconds after which the toast will be dismissed automatically.\n     *\n     * You can pass a different value to a specific toast when calling `showToast`. You can even\n     * pass `false` if you want a certain toast to never be dismissed automatically.\n     *\n     * @default 10 (seconds)\n     */\n    defaultAutoDismissDelay?: number\n\n    /**\n     * The padding used to separate the toasts from the viewport borders.\n     *\n     * @default 'large'\n     */\n    padding?: Space\n\n    /**\n     * The app wrapped by the provider.\n     */\n    children: NonNullable<React.ReactNode>\n\n    /**\n     * Custom classname for the toasts container, if you need to fine-tune the position or other styles\n     */\n    containerClassName?: string\n}\n\n/**\n * Provides the state management and rendering of the toasts currently active.\n *\n * You need to render this near the top of your app components tree, in order to `useToasts`.\n *\n * @see useToasts\n */\nfunction ToastsProvider({\n    children,\n    padding = 'large',\n    defaultAutoDismissDelay = 10 /* seconds */,\n    defaultDismissLabel = 'Close',\n    containerClassName,\n}: ToastsProviderProps) {\n    const [toasts, setToasts] = React.useState<ToastsList>([])\n    const { mappedRef, animateRemove } = useToastsAnimation()\n\n    const removeToast = React.useCallback(\n        function onRemoveToast(toastId: string) {\n            animateRemove(toastId, () => {\n                setToasts((list) => {\n                    const index = list.findIndex((n) => n.toastId === toastId)\n                    if (index < 0) return list\n                    const copy = [...list]\n                    copy.splice(index, 1)\n                    return copy\n                })\n            })\n        },\n        [animateRemove],\n    )\n\n    const showToast = React.useCallback(\n        function showToast(props: ToastProps) {\n            const toastId = generateElementId('toast')\n            const newToast: InternalToastEntry = {\n                autoDismissDelay: defaultAutoDismissDelay,\n                dismissLabel: defaultDismissLabel,\n                ...props,\n                toastId,\n            }\n            setToasts((list) => [...list, newToast])\n            return () => removeToast(toastId)\n        },\n        [defaultAutoDismissDelay, defaultDismissLabel, removeToast],\n    )\n\n    return (\n        <ToastsContext.Provider value={showToast}>\n            {children}\n            <Portal>\n                {toasts.length === 0 ? null : (\n                    <Box\n                        className={[styles.stackedToastsView, containerClassName]}\n                        position=\"fixed\"\n                        width=\"full\"\n                        paddingX={padding}\n                        paddingBottom={padding}\n                        data-testid=\"toasts-container\"\n                    >\n                        <Stack space=\"medium\">\n                            {toasts.map(({ toastId, ...props }) => (\n                                <InternalToast\n                                    key={toastId}\n                                    ref={mappedRef(toastId)}\n                                    toastId={toastId}\n                                    onRemoveToast={removeToast}\n                                    {...props}\n                                />\n                            ))}\n                        </Stack>\n                    </Box>\n                )}\n            </Portal>\n        </ToastsContext.Provider>\n    )\n}\n\n/**\n * Provides a function `showToast` that shows a new toast every time you call it.\n *\n * ```jsx\n * const showToast = useToasts()\n *\n * <button onClick={() => showToast({ message: 'Hello' })}>\n *   Say hello\n * </button>\n * ```\n *\n * All toasts fired via this function are rendered in a global fixed location, and stacked one on\n * top of the other.\n *\n * When called, `showToast` returns a function that dismisses the toast when called.\n *\n * @see ToastsProvider\n */\nfunction useToasts() {\n    return React.useContext(ToastsContext)\n}\n\n/**\n * Adds a toast to be rendered, stacked alongside any other currently active toasts.\n *\n * For most situations, you should prefer to use the `showToast` function obtained from `useToasts`.\n * This component is provided for convenience to render toasts in the markup, but it has some\n * peculiarities, which are discussed below.\n *\n * Internally, this calls `showToast`. It is provided for two reasons:\n *\n * 1. Convenience, when you want to fire a toast in markup/jsx code. Keep in mind, though, that\n *    toasts rendered in this way will be removed from view when the context where it is rendered\n *    is unmounted. Unlike toasts fired with `showToast`, which will normally be dismissed, either\n *    by the user or after a delay. They'll still be animated on their way out, though.\n * 2. When combined with disabling dismissing it (e.g. `showDismissButton={false}` and\n *    `autoDismissDelay={false}` it provides a way to show \"permanent\" toasts that only go away when\n *    the component ceases to be rendered).\n *\n * This is useful for cases when the consumer wants to control when a toast is visible, and to keep\n * it visible based on an app-specific condition.\n *\n * Something important to note about this component is that it triggers the toast based on the props\n * passed when first rendered, and it does not update the toast if these props change on subsequent\n * renders. In this sense, this is an imperative component, more than a descriptive one. This is\n * done to simplify the internals, and to keep it in line with how `showToast` works: you fire up a\n * toast imperatively, and you loose control over it. It remains rendered according to the props you\n * first passed.\n *\n * @see useToasts\n */\nfunction Toast(props: ToastProps) {\n    const showToast = useToasts()\n    const propsRef = React.useRef<ToastProps>(props)\n    React.useEffect(() => {\n        const dismissToast = showToast(propsRef.current)\n        return dismissToast\n    }, [showToast])\n    return null\n}\n\nexport { Toast, ToastsProvider, useToasts }\nexport type { ToastProps, ToastsProviderProps }\n"],"names":["InternalToast","React","forwardRef","message","description","icon","action","autoDismissDelay","dismissLabel","showDismissButton","toastId","onDismiss","onRemoveToast","ref","timeoutRef","useRef","removeToast","useCallback","startTimeout","current","window","setTimeout","stopTimeout","clearTimeout","undefined","useEffect","setupAutoDismiss","actionWithCustomActionHandler","useMemo","isActionObject","_objectSpread","closeToast","onClick","handleActionClick","createElement","StaticToast","onMouseEnter","onMouseLeave","ToastsContext","createContext","ToastsProvider","children","padding","defaultAutoDismissDelay","defaultDismissLabel","containerClassName","toasts","setToasts","useState","mappedRef","animateRemove","useToastsAnimation","list","index","findIndex","n","copy","splice","showToast","props","generateElementId","newToast","Provider","value","Portal","length","Box","className","styles","stackedToastsView","position","width","paddingX","paddingBottom","Stack","space","map","key","useToasts","useContext","Toast","propsRef","dismissToast"],"mappings":"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"}
+{"version":3,"file":"use-toasts.js","sources":["../../src/toast/use-toasts.tsx"],"sourcesContent":["import React from 'react'\nimport { Portal } from '@ariakit/react'\n\nimport { generateElementId } from '../utils/common-helpers'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { isActionObject, StaticToast, StaticToastProps } from './static-toast'\n\nimport styles from './toast.module.css'\n\nimport type { Space } from '../utils/common-types'\nimport { useToastsAnimation } from './toast-animation'\n\n/**\n * The props needed to fire up a new notification toast.\n */\ntype ToastProps = StaticToastProps & {\n    /**\n     * The number of seconds the toast is expected to be shown before it is dismissed automatically,\n     * or false to disable auto-dismiss.\n     *\n     * It defaults to whatever is the autoDismissDelay set in the ToastsProvider.\n     */\n    autoDismissDelay?: number | false\n\n    /**\n     * The label for the button that dismisses the toast.\n     *\n     * It defaults to the value set in the ToastsProvider, but individual toasts can have a\n     * different value if needed.\n     */\n    dismissLabel?: string\n\n    /**\n     * Whether to show the dismiss button or not.\n     *\n     * Use this value with care. If combined with disabling `autoDismissDelay`, it may leave you\n     * with toasts that the user won't be able to dismiss at will. It then is your responsibility to\n     * dismiss the toast by calling the function returned by `showToast`.\n     */\n    showDismissButton?: boolean\n}\n\n//\n// InternalToast component and its props\n//\n\ntype InternalToastProps = Omit<ToastProps, 'autoDismissDelay' | 'dismissLabel'> &\n    Required<Pick<ToastProps, 'autoDismissDelay' | 'dismissLabel'>> & {\n        toastId: string\n        onRemoveToast: (toastId: string) => void\n    }\n\n/** @private */\nconst InternalToast = React.forwardRef<HTMLDivElement, InternalToastProps>(function InternalToast(\n    {\n        message,\n        description,\n        icon,\n        action,\n        autoDismissDelay,\n        dismissLabel,\n        showDismissButton = true,\n        toastId,\n        onDismiss,\n        onRemoveToast,\n    },\n    ref,\n) {\n    const timeoutRef = React.useRef<number | undefined>()\n\n    const removeToast = React.useCallback(\n        function removeToast() {\n            onRemoveToast(toastId)\n            onDismiss?.()\n        },\n        [onDismiss, onRemoveToast, toastId],\n    )\n\n    const startTimeout = React.useCallback(\n        function startTimeout() {\n            if (!autoDismissDelay) return\n            timeoutRef.current = window.setTimeout(removeToast, autoDismissDelay * 1000)\n        },\n        [autoDismissDelay, removeToast],\n    )\n\n    const stopTimeout = React.useCallback(function stopTimeout() {\n        clearTimeout(timeoutRef.current)\n        timeoutRef.current = undefined\n    }, [])\n\n    React.useEffect(\n        function setupAutoDismiss() {\n            stopTimeout()\n            startTimeout()\n\n            return stopTimeout\n        },\n        [startTimeout, stopTimeout],\n    )\n\n    /**\n     * If the action is toast action object and not a custom element,\n     * the `onClick` property is wrapped in another handler responsible\n     * for removing the toast when the action is triggered.\n     */\n    const actionWithCustomActionHandler = React.useMemo(() => {\n        if (!isActionObject(action)) {\n            return action\n        }\n\n        return {\n            ...action,\n            closeToast: action.closeToast ?? true,\n            onClick: function handleActionClick() {\n                if (!action) {\n                    return\n                }\n\n                action.onClick()\n\n                if (action.closeToast ?? true) {\n                    removeToast()\n                }\n            },\n        }\n    }, [action, removeToast])\n\n    return (\n        <StaticToast\n            ref={ref}\n            message={message}\n            description={description}\n            icon={icon}\n            action={actionWithCustomActionHandler}\n            onDismiss={showDismissButton ? removeToast : undefined}\n            dismissLabel={dismissLabel}\n            // @ts-expect-error\n            onMouseEnter={stopTimeout}\n            onMouseLeave={startTimeout}\n        />\n    )\n})\n\n//\n// Internal state and context\n//\n\ntype InternalToastEntry = Omit<InternalToastProps, 'onRemoveToast'>\ntype ToastsList = readonly InternalToastEntry[]\n\ntype ShowToastAction = (props: ToastProps) => () => void\nconst ToastsContext = React.createContext<ShowToastAction>(() => () => undefined)\n\n/**\n * The props needed by the ToastsProvider component.\n *\n * @see ToastsProvider\n */\ntype ToastsProviderProps = {\n    /**\n     * The default label to apply to toast dismiss buttons.\n     *\n     * This is useful in environments that need locatization, so you do not need to pass the same\n     * translated label every time you trigger a toast.\n     *\n     * However, you can still apply a different label to a specific toast, by passing a different\n     * value when calling showToast.\n     *\n     * @default 'Close'\n     */\n    defaultDismissLabel?: string\n\n    /**\n     * The default number of seconds after which the toast will be dismissed automatically.\n     *\n     * You can pass a different value to a specific toast when calling `showToast`. You can even\n     * pass `false` if you want a certain toast to never be dismissed automatically.\n     *\n     * @default 10 (seconds)\n     */\n    defaultAutoDismissDelay?: number\n\n    /**\n     * The padding used to separate the toasts from the viewport borders.\n     *\n     * @default 'large'\n     */\n    padding?: Space\n\n    /**\n     * The app wrapped by the provider.\n     */\n    children: NonNullable<React.ReactNode>\n\n    /**\n     * Custom classname for the toasts container, if you need to fine-tune the position or other styles\n     */\n    containerClassName?: string\n}\n\n/**\n * Provides the state management and rendering of the toasts currently active.\n *\n * You need to render this near the top of your app components tree, in order to `useToasts`.\n *\n * @see useToasts\n */\nfunction ToastsProvider({\n    children,\n    padding = 'large',\n    defaultAutoDismissDelay = 10 /* seconds */,\n    defaultDismissLabel = 'Close',\n    containerClassName,\n}: ToastsProviderProps) {\n    const [toasts, setToasts] = React.useState<ToastsList>([])\n    const { mappedRef, animateRemove } = useToastsAnimation()\n\n    const removeToast = React.useCallback(\n        function onRemoveToast(toastId: string) {\n            animateRemove(toastId, () => {\n                setToasts((list) => {\n                    const index = list.findIndex((n) => n.toastId === toastId)\n                    if (index < 0) return list\n                    const copy = [...list]\n                    copy.splice(index, 1)\n                    return copy\n                })\n            })\n        },\n        [animateRemove],\n    )\n\n    const showToast = React.useCallback(\n        function showToast(props: ToastProps) {\n            const toastId = generateElementId('toast')\n            const newToast: InternalToastEntry = {\n                autoDismissDelay: defaultAutoDismissDelay,\n                dismissLabel: defaultDismissLabel,\n                ...props,\n                toastId,\n            }\n            setToasts((list) => [...list, newToast])\n            return () => removeToast(toastId)\n        },\n        [defaultAutoDismissDelay, defaultDismissLabel, removeToast],\n    )\n\n    return (\n        <ToastsContext.Provider value={showToast}>\n            {children}\n            <Portal>\n                {toasts.length === 0 ? null : (\n                    <Box\n                        className={[styles.stackedToastsView, containerClassName]}\n                        position=\"fixed\"\n                        width=\"full\"\n                        paddingX={padding}\n                        paddingBottom={padding}\n                        data-testid=\"toasts-container\"\n                    >\n                        <Stack space=\"medium\">\n                            {toasts.map(({ toastId, ...props }) => (\n                                <InternalToast\n                                    key={toastId}\n                                    ref={mappedRef(toastId)}\n                                    toastId={toastId}\n                                    onRemoveToast={removeToast}\n                                    {...props}\n                                />\n                            ))}\n                        </Stack>\n                    </Box>\n                )}\n            </Portal>\n        </ToastsContext.Provider>\n    )\n}\n\n/**\n * Provides a function `showToast` that shows a new toast every time you call it.\n *\n * ```jsx\n * const showToast = useToasts()\n *\n * <button onClick={() => showToast({ message: 'Hello' })}>\n *   Say hello\n * </button>\n * ```\n *\n * All toasts fired via this function are rendered in a global fixed location, and stacked one on\n * top of the other.\n *\n * When called, `showToast` returns a function that dismisses the toast when called.\n *\n * @see ToastsProvider\n */\nfunction useToasts() {\n    return React.useContext(ToastsContext)\n}\n\n/**\n * Adds a toast to be rendered, stacked alongside any other currently active toasts.\n *\n * For most situations, you should prefer to use the `showToast` function obtained from `useToasts`.\n * This component is provided for convenience to render toasts in the markup, but it has some\n * peculiarities, which are discussed below.\n *\n * Internally, this calls `showToast`. It is provided for two reasons:\n *\n * 1. Convenience, when you want to fire a toast in markup/jsx code. Keep in mind, though, that\n *    toasts rendered in this way will be removed from view when the context where it is rendered\n *    is unmounted. Unlike toasts fired with `showToast`, which will normally be dismissed, either\n *    by the user or after a delay. They'll still be animated on their way out, though.\n * 2. When combined with disabling dismissing it (e.g. `showDismissButton={false}` and\n *    `autoDismissDelay={false}` it provides a way to show \"permanent\" toasts that only go away when\n *    the component ceases to be rendered).\n *\n * This is useful for cases when the consumer wants to control when a toast is visible, and to keep\n * it visible based on an app-specific condition.\n *\n * Something important to note about this component is that it triggers the toast based on the props\n * passed when first rendered, and it does not update the toast if these props change on subsequent\n * renders. In this sense, this is an imperative component, more than a descriptive one. This is\n * done to simplify the internals, and to keep it in line with how `showToast` works: you fire up a\n * toast imperatively, and you loose control over it. It remains rendered according to the props you\n * first passed.\n *\n * @see useToasts\n */\nfunction Toast(props: ToastProps) {\n    const showToast = useToasts()\n    const propsRef = React.useRef<ToastProps>(props)\n    React.useEffect(() => {\n        const dismissToast = showToast(propsRef.current)\n        return dismissToast\n    }, [showToast])\n    return null\n}\n\nexport { Toast, ToastsProvider, useToasts }\nexport type { ToastProps, ToastsProviderProps }\n"],"names":["InternalToast","React","forwardRef","message","description","icon","action","autoDismissDelay","dismissLabel","showDismissButton","toastId","onDismiss","onRemoveToast","ref","timeoutRef","useRef","removeToast","useCallback","startTimeout","current","window","setTimeout","stopTimeout","clearTimeout","undefined","useEffect","setupAutoDismiss","actionWithCustomActionHandler","useMemo","isActionObject","_objectSpread","closeToast","onClick","handleActionClick","createElement","StaticToast","onMouseEnter","onMouseLeave","ToastsContext","createContext","ToastsProvider","children","padding","defaultAutoDismissDelay","defaultDismissLabel","containerClassName","toasts","setToasts","useState","mappedRef","animateRemove","useToastsAnimation","list","index","findIndex","n","copy","splice","showToast","props","generateElementId","newToast","Provider","value","Portal","length","Box","className","styles","stackedToastsView","position","width","paddingX","paddingBottom","Stack","space","map","key","useToasts","useContext","Toast","propsRef","dismissToast"],"mappings":";;;;;;;;;;;AAqDA;;AACA,MAAMA,aAAa,gBAAGC,cAAK,CAACC,UAAN,CAAqD,SAASF,aAAT,CACvE;EACIG,OADJ;EAEIC,WAFJ;EAGIC,IAHJ;EAIIC,MAJJ;EAKIC,gBALJ;EAMIC,YANJ;AAOIC,EAAAA,iBAAiB,GAAG,IAPxB;EAQIC,OARJ;EASIC,SATJ;AAUIC,EAAAA,aAAAA;AAVJ,CADuE,EAavEC,GAbuE,EAapE;AAEH,EAAA,MAAMC,UAAU,GAAGb,cAAK,CAACc,MAAN,EAAnB,CAAA;EAEA,MAAMC,WAAW,GAAGf,cAAK,CAACgB,WAAN,CAChB,SAASD,WAAT,GAAoB;IAChBJ,aAAa,CAACF,OAAD,CAAb,CAAA;IACAC,SAAS,IAAA,IAAT,YAAAA,SAAS,EAAA,CAAA;GAHG,EAKhB,CAACA,SAAD,EAAYC,aAAZ,EAA2BF,OAA3B,CALgB,CAApB,CAAA;EAQA,MAAMQ,YAAY,GAAGjB,cAAK,CAACgB,WAAN,CACjB,SAASC,YAAT,GAAqB;IACjB,IAAI,CAACX,gBAAL,EAAuB,OAAA;AACvBO,IAAAA,UAAU,CAACK,OAAX,GAAqBC,MAAM,CAACC,UAAP,CAAkBL,WAAlB,EAA+BT,gBAAgB,GAAG,IAAlD,CAArB,CAAA;AACH,GAJgB,EAKjB,CAACA,gBAAD,EAAmBS,WAAnB,CALiB,CAArB,CAAA;EAQA,MAAMM,WAAW,GAAGrB,cAAK,CAACgB,WAAN,CAAkB,SAASK,WAAT,GAAoB;AACtDC,IAAAA,YAAY,CAACT,UAAU,CAACK,OAAZ,CAAZ,CAAA;IACAL,UAAU,CAACK,OAAX,GAAqBK,SAArB,CAAA;GAFgB,EAGjB,EAHiB,CAApB,CAAA;AAKAvB,EAAAA,cAAK,CAACwB,SAAN,CACI,SAASC,gBAAT,GAAyB;IACrBJ,WAAW,EAAA,CAAA;IACXJ,YAAY,EAAA,CAAA;AAEZ,IAAA,OAAOI,WAAP,CAAA;AACH,GANL,EAOI,CAACJ,YAAD,EAAeI,WAAf,CAPJ,CAAA,CAAA;AAUA;;;;AAIG;;AACH,EAAA,MAAMK,6BAA6B,GAAG1B,cAAK,CAAC2B,OAAN,CAAc,MAAK;AACrD,IAAA,IAAI,CAACC,cAAc,CAACvB,MAAD,CAAnB,EAA6B;AACzB,MAAA,OAAOA,MAAP,CAAA;AACH,KAAA;;AAED,IAAA,OAAAwB,cAAA,CAAAA,cAAA,CAAA,EAAA,EACOxB,MADP,CAAA,EAAA,EAAA,EAAA;AAEIyB,MAAAA,UAAU,EAAEzB,MAAM,CAACyB,UAAP,IAAqB,IAFrC;MAGIC,OAAO,EAAE,SAASC,iBAAT,GAA0B;QAC/B,IAAI,CAAC3B,MAAL,EAAa;AACT,UAAA,OAAA;AACH,SAAA;;AAEDA,QAAAA,MAAM,CAAC0B,OAAP,EAAA,CAAA;;AAEA,QAAA,IAAI1B,MAAM,CAACyB,UAAP,IAAqB,IAAzB,EAA+B;UAC3Bf,WAAW,EAAA,CAAA;AACd,SAAA;AACJ,OAAA;AAbL,KAAA,CAAA,CAAA;AAeH,GApBqC,EAoBnC,CAACV,MAAD,EAASU,WAAT,CApBmC,CAAtC,CAAA;AAsBA,EAAA,oBACIf,cAAC,CAAAiC,aAAD,CAACC,WAAD,EACI;AAAAtB,IAAAA,GAAG,EAAEA,GAAL;AACAV,IAAAA,OAAO,EAAEA,OADT;AAEAC,IAAAA,WAAW,EAAEA,WAFb;AAGAC,IAAAA,IAAI,EAAEA,IAHN;AAIAC,IAAAA,MAAM,EAAEqB,6BAJR;AAKAhB,IAAAA,SAAS,EAAEF,iBAAiB,GAAGO,WAAH,GAAiBQ,SAL7C;AAMAhB,IAAAA,YAAY,EAAEA,YANd;AAOA;AACA4B,IAAAA,YAAY,EAAEd,WARd;AASAe,IAAAA,YAAY,EAAEnB,YAAAA;AATd,GADJ,CADJ,CAAA;AAcH,CAzFqB,CAAtB,CAAA;AAmGA,MAAMoB,aAAa,gBAAGrC,cAAK,CAACsC,aAAN,CAAqC,MAAM,MAAMf,SAAjD,CAAtB,CAAA;AAiDA;;;;;;AAMG;;AACH,SAASgB,cAAT,CAAwB;EACpBC,QADoB;AAEpBC,EAAAA,OAAO,GAAG,OAFU;AAGpBC,EAAAA,uBAAuB,GAAG,EAAA;AAAG;AAHT;AAIpBC,EAAAA,mBAAmB,GAAG,OAJF;AAKpBC,EAAAA,kBAAAA;AALoB,CAAxB,EAMsB;EAClB,MAAM,CAACC,MAAD,EAASC,SAAT,CAAA,GAAsB9C,cAAK,CAAC+C,QAAN,CAA2B,EAA3B,CAA5B,CAAA;EACA,MAAM;IAAEC,SAAF;AAAaC,IAAAA,aAAAA;AAAb,GAAA,GAA+BC,kBAAkB,EAAvD,CAAA;EAEA,MAAMnC,WAAW,GAAGf,cAAK,CAACgB,WAAN,CAChB,SAASL,aAAT,CAAuBF,OAAvB,EAAsC;IAClCwC,aAAa,CAACxC,OAAD,EAAU,MAAK;MACxBqC,SAAS,CAAEK,IAAD,IAAS;AACf,QAAA,MAAMC,KAAK,GAAGD,IAAI,CAACE,SAAL,CAAgBC,CAAD,IAAOA,CAAC,CAAC7C,OAAF,KAAcA,OAApC,CAAd,CAAA;AACA,QAAA,IAAI2C,KAAK,GAAG,CAAZ,EAAe,OAAOD,IAAP,CAAA;AACf,QAAA,MAAMI,IAAI,GAAG,CAAC,GAAGJ,IAAJ,CAAb,CAAA;AACAI,QAAAA,IAAI,CAACC,MAAL,CAAYJ,KAAZ,EAAmB,CAAnB,CAAA,CAAA;AACA,QAAA,OAAOG,IAAP,CAAA;AACH,OANQ,CAAT,CAAA;AAOH,KARY,CAAb,CAAA;AASH,GAXe,EAYhB,CAACN,aAAD,CAZgB,CAApB,CAAA;EAeA,MAAMQ,SAAS,GAAGzD,cAAK,CAACgB,WAAN,CACd,SAASyC,SAAT,CAAmBC,KAAnB,EAAoC;AAChC,IAAA,MAAMjD,OAAO,GAAGkD,iBAAiB,CAAC,OAAD,CAAjC,CAAA;;AACA,IAAA,MAAMC,QAAQ,GAAA/B,cAAA,CAAAA,cAAA,CAAA;AACVvB,MAAAA,gBAAgB,EAAEoC,uBADR;AAEVnC,MAAAA,YAAY,EAAEoC,mBAAAA;AAFJ,KAAA,EAGPe,KAHO,CAAA,EAAA,EAAA,EAAA;AAIVjD,MAAAA,OAAAA;KAJJ,CAAA,CAAA;;IAMAqC,SAAS,CAAEK,IAAD,IAAU,CAAC,GAAGA,IAAJ,EAAUS,QAAV,CAAX,CAAT,CAAA;AACA,IAAA,OAAO,MAAM7C,WAAW,CAACN,OAAD,CAAxB,CAAA;GAVU,EAYd,CAACiC,uBAAD,EAA0BC,mBAA1B,EAA+C5B,WAA/C,CAZc,CAAlB,CAAA;AAeA,EAAA,oBACIf,4BAAA,CAACqC,aAAa,CAACwB,QAAf,EAAwB;AAAAC,IAAAA,KAAK,EAAEL,SAAAA;GAA/B,EACKjB,QADL,eAEIxC,cAAC,CAAAiC,aAAD,CAAC8B,MAAD,MAAA,EACKlB,MAAM,CAACmB,MAAP,KAAkB,CAAlB,GAAsB,IAAtB,gBACGhE,cAAA,CAAAiC,aAAA,CAACgC,GAAD,EACI;AAAAC,IAAAA,SAAS,EAAE,CAACC,gBAAM,CAACC,iBAAR,EAA2BxB,kBAA3B,CAAX;AACAyB,IAAAA,QAAQ,EAAC,OADT;AAEAC,IAAAA,KAAK,EAAC,MAFN;AAGAC,IAAAA,QAAQ,EAAE9B,OAHV;AAIA+B,IAAAA,aAAa,EAAE/B,OAJf;iBAKY,EAAA,kBAAA;AALZ,GADJ,eAQIzC,cAAC,CAAAiC,aAAD,CAACwC,KAAD,EAAO;AAAAC,IAAAA,KAAK,EAAC,QAAA;AAAN,GAAP,EACK7B,MAAM,CAAC8B,GAAP,CAAW,IAAA,IAAA;IAAA,IAAC;AAAElE,MAAAA,OAAAA;KAAH,GAAA,IAAA;AAAA,QAAeiD,KAAf,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;AAAA,IAAA,oBACR1D,cAAA,CAAAiC,aAAA,CAAClC,aAAD,EAAA8B,cAAA,CAAA;AACI+C,MAAAA,GAAG,EAAEnE,OADT;AAEIG,MAAAA,GAAG,EAAEoC,SAAS,CAACvC,OAAD,CAFlB;AAGIA,MAAAA,OAAO,EAAEA,OAHb;AAIIE,MAAAA,aAAa,EAAEI,WAAAA;AAJnB,KAAA,EAKQ2C,KALR,CADQ,CAAA,CAAA;AAAA,GAAX,CADL,CARJ,CAFR,CAFJ,CADJ,CAAA;AA6BH,CAAA;AAED;;;;;;;;;;;;;;;;;AAiBG;;;AACH,SAASmB,SAAT,GAAkB;AACd,EAAA,OAAO7E,cAAK,CAAC8E,UAAN,CAAiBzC,aAAjB,CAAP,CAAA;AACH,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BG;;;AACH,SAAS0C,KAAT,CAAerB,KAAf,EAAgC;EAC5B,MAAMD,SAAS,GAAGoB,SAAS,EAA3B,CAAA;AACA,EAAA,MAAMG,QAAQ,GAAGhF,cAAK,CAACc,MAAN,CAAyB4C,KAAzB,CAAjB,CAAA;EACA1D,cAAK,CAACwB,SAAN,CAAgB,MAAK;AACjB,IAAA,MAAMyD,YAAY,GAAGxB,SAAS,CAACuB,QAAQ,CAAC9D,OAAV,CAA9B,CAAA;AACA,IAAA,OAAO+D,YAAP,CAAA;GAFJ,EAGG,CAACxB,SAAD,CAHH,CAAA,CAAA;AAIA,EAAA,OAAO,IAAP,CAAA;AACH;;;;"}

package/es/tooltip/tooltip.js

@@ -40,8 +40,8 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
   } = React.useContext(TooltipContext);
   const tooltip = useTooltipStore({
     placement: position,
-    showTimeout: showTimeout != null ? showTimeout : globalShowTimeout,
-    hideTimeout: hideTimeout != null ? hideTimeout : globalHideTimeout
+    showTimeout: showTimeout ?? globalShowTimeout,
+    hideTimeout: hideTimeout ?? globalHideTimeout
   });
   React.useImperativeHandle(ref, () => tooltip, [tooltip]);
   const isOpen = tooltip.useState('open');

package/es/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    useTooltipStore,\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n} from '@ariakit/react'\nimport { Box } from '../box'\n\nimport type { TooltipStoreState, TooltipStore } from '@ariakit/react'\n\nimport styles from './tooltip.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nconst defaultShowTimeout = 500\nconst defaultHideTimeout = 100\n\ntype TooltipContextState = {\n    showTimeout: number\n    hideTimeout: number\n}\n\nconst TooltipContext = React.createContext<TooltipContextState>({\n    showTimeout: defaultShowTimeout,\n    hideTimeout: defaultHideTimeout,\n})\n\nfunction TooltipProvider({\n    showTimeout = defaultShowTimeout,\n    hideTimeout = defaultHideTimeout,\n    children,\n}: React.PropsWithChildren<{\n    showTimeout?: number\n    hideTimeout?: number\n}>) {\n    const value = React.useMemo(() => ({ showTimeout, hideTimeout }), [showTimeout, hideTimeout])\n    return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>\n}\n\ninterface TooltipProps extends ObfuscatedClassName {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: TooltipStoreState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n\n    /**\n     * The amount of time in milliseconds to wait before showing the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 500\n     */\n    showTimeout?: number\n\n    /**\n     * The amount of time in milliseconds to wait before hiding the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 100\n     */\n    hideTimeout?: number\n}\n\nconst Tooltip = React.forwardRef<TooltipStore, TooltipProps>(\n    (\n        {\n            children,\n            content,\n            position = 'top',\n            gapSize = 3,\n            withArrow = false,\n            showTimeout,\n            hideTimeout,\n            exceptionallySetClassName,\n        },\n        ref,\n    ) => {\n        const { showTimeout: globalShowTimeout, hideTimeout: globalHideTimeout } = React.useContext(\n            TooltipContext,\n        )\n\n        const tooltip = useTooltipStore({\n            placement: position,\n            showTimeout: showTimeout ?? globalShowTimeout,\n            hideTimeout: hideTimeout ?? globalHideTimeout,\n        })\n\n        React.useImperativeHandle(ref, () => tooltip, [tooltip])\n\n        const isOpen = tooltip.useState('open')\n\n        const child = React.Children.only(\n            children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n        )\n\n        if (!child) {\n            return child\n        }\n\n        if (typeof child.ref === 'string') {\n            throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n        }\n\n        return (\n            <>\n                <TooltipAnchor render={child} store={tooltip} ref={child.ref} />\n                {isOpen && content ? (\n                    <AriakitTooltip\n                        store={tooltip}\n                        gutter={gapSize}\n                        render={\n                            <Box\n                                className={[styles.tooltip, exceptionallySetClassName]}\n                                background=\"toast\"\n                                borderRadius=\"standard\"\n                                paddingX=\"small\"\n                                paddingY=\"xsmall\"\n                                maxWidth=\"medium\"\n                                width=\"fitContent\"\n                                overflow=\"hidden\"\n                                textAlign=\"center\"\n                            />\n                        }\n                    >\n                        {withArrow ? <TooltipArrow /> : null}\n                        {typeof content === 'function' ? content() : content}\n                    </AriakitTooltip>\n                ) : null}\n            </>\n        )\n    },\n)\n\nTooltip.displayName = 'Tooltip'\n\nexport type { TooltipProps }\nexport { Tooltip, TooltipProvider }\n"],"names":["defaultShowTimeout","defaultHideTimeout","TooltipContext","React","createContext","showTimeout","hideTimeout","TooltipProvider","children","value","useMemo","createElement","Provider","Tooltip","forwardRef","content","position","gapSize","withArrow","exceptionallySetClassName","ref","globalShowTimeout","globalHideTimeout","useContext","tooltip","useTooltipStore","placement","useImperativeHandle","isOpen","useState","child","Children","only","Error","Fragment","TooltipAnchor","render","store","AriakitTooltip","gutter","Box","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow","displayName"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    useTooltipStore,\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n} from '@ariakit/react'\nimport { Box } from '../box'\n\nimport type { TooltipStoreState, TooltipStore } from '@ariakit/react'\n\nimport styles from './tooltip.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nconst defaultShowTimeout = 500\nconst defaultHideTimeout = 100\n\ntype TooltipContextState = {\n    showTimeout: number\n    hideTimeout: number\n}\n\nconst TooltipContext = React.createContext<TooltipContextState>({\n    showTimeout: defaultShowTimeout,\n    hideTimeout: defaultHideTimeout,\n})\n\nfunction TooltipProvider({\n    showTimeout = defaultShowTimeout,\n    hideTimeout = defaultHideTimeout,\n    children,\n}: React.PropsWithChildren<{\n    showTimeout?: number\n    hideTimeout?: number\n}>) {\n    const value = React.useMemo(() => ({ showTimeout, hideTimeout }), [showTimeout, hideTimeout])\n    return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>\n}\n\ninterface TooltipProps extends ObfuscatedClassName {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: TooltipStoreState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n\n    /**\n     * The amount of time in milliseconds to wait before showing the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 500\n     */\n    showTimeout?: number\n\n    /**\n     * The amount of time in milliseconds to wait before hiding the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 100\n     */\n    hideTimeout?: number\n}\n\nconst Tooltip = React.forwardRef<TooltipStore, TooltipProps>(\n    (\n        {\n            children,\n            content,\n            position = 'top',\n            gapSize = 3,\n            withArrow = false,\n            showTimeout,\n            hideTimeout,\n            exceptionallySetClassName,\n        },\n        ref,\n    ) => {\n        const { showTimeout: globalShowTimeout, hideTimeout: globalHideTimeout } = React.useContext(\n            TooltipContext,\n        )\n\n        const tooltip = useTooltipStore({\n            placement: position,\n            showTimeout: showTimeout ?? globalShowTimeout,\n            hideTimeout: hideTimeout ?? globalHideTimeout,\n        })\n\n        React.useImperativeHandle(ref, () => tooltip, [tooltip])\n\n        const isOpen = tooltip.useState('open')\n\n        const child = React.Children.only(\n            children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n        )\n\n        if (!child) {\n            return child\n        }\n\n        if (typeof child.ref === 'string') {\n            throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n        }\n\n        return (\n            <>\n                <TooltipAnchor render={child} store={tooltip} ref={child.ref} />\n                {isOpen && content ? (\n                    <AriakitTooltip\n                        store={tooltip}\n                        gutter={gapSize}\n                        render={\n                            <Box\n                                className={[styles.tooltip, exceptionallySetClassName]}\n                                background=\"toast\"\n                                borderRadius=\"standard\"\n                                paddingX=\"small\"\n                                paddingY=\"xsmall\"\n                                maxWidth=\"medium\"\n                                width=\"fitContent\"\n                                overflow=\"hidden\"\n                                textAlign=\"center\"\n                            />\n                        }\n                    >\n                        {withArrow ? <TooltipArrow /> : null}\n                        {typeof content === 'function' ? content() : content}\n                    </AriakitTooltip>\n                ) : null}\n            </>\n        )\n    },\n)\n\nTooltip.displayName = 'Tooltip'\n\nexport type { TooltipProps }\nexport { Tooltip, TooltipProvider }\n"],"names":["defaultShowTimeout","defaultHideTimeout","TooltipContext","React","createContext","showTimeout","hideTimeout","TooltipProvider","children","value","useMemo","createElement","Provider","Tooltip","forwardRef","content","position","gapSize","withArrow","exceptionallySetClassName","ref","globalShowTimeout","globalHideTimeout","useContext","tooltip","useTooltipStore","placement","useImperativeHandle","isOpen","useState","child","Children","only","Error","Fragment","TooltipAnchor","render","store","AriakitTooltip","gutter","Box","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow","displayName"],"mappings":"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"}

package/es/utils/common-helpers.js

@@ -8,10 +8,10 @@ function uniqueId() {
 
 function generateElementId(prefix) {
   const num = uniqueId();
-  return prefix + "-" + num;
+  return `${prefix}-${num}`;
 }
 function useId(providedId) {
-  const ref = React.useRef(providedId != null ? providedId : null);
+  const ref = React.useRef(providedId ?? null);
 
   if (!ref.current) {
     ref.current = generateElementId('element');

package/es/utils/common-helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"common-helpers.js","sources":["../../src/utils/common-helpers.ts"],"sourcesContent":["import * as React from 'react'\n\nlet uid = 0\nfunction uniqueId() {\n    return uid++\n}\n\nexport function generateElementId(prefix: string): string {\n    const num = uniqueId()\n    return `${prefix}-${num}`\n}\n\nexport function useId(providedId?: string): string {\n    const ref = React.useRef<string | null>(providedId ?? null)\n    if (!ref.current) {\n        ref.current = generateElementId('element')\n    }\n    return ref.current\n}\n"],"names":["uid","uniqueId","generateElementId","prefix","num","useId","providedId","ref","React","useRef","current"],"mappings":";;AAEA,IAAIA,GAAG,GAAG,CAAV,CAAA;;AACA,SAASC,QAAT,GAAiB;AACb,EAAA,OAAOD,GAAG,EAAV,CAAA;AACH,CAAA;;AAEK,SAAUE,iBAAV,CAA4BC,MAA5B,EAA0C;EAC5C,MAAMC,GAAG,GAAGH,QAAQ,EAApB,CAAA;EACA,OAAUE,MAAV,SAAoBC,GAApB,CAAA;AACH,CAAA;AAEK,SAAUC,KAAV,CAAgBC,UAAhB,EAAmC;EACrC,MAAMC,GAAG,GAAGC,KAAK,CAACC,MAAN,CAA4BH,UAA5B,IAA4BA,IAAAA,GAAAA,UAA5B,GAA0C,IAA1C,CAAZ,CAAA;;AACA,EAAA,IAAI,CAACC,GAAG,CAACG,OAAT,EAAkB;AACdH,IAAAA,GAAG,CAACG,OAAJ,GAAcR,iBAAiB,CAAC,SAAD,CAA/B,CAAA;AACH,GAAA;;EACD,OAAOK,GAAG,CAACG,OAAX,CAAA;AACH;;;;"}
+{"version":3,"file":"common-helpers.js","sources":["../../src/utils/common-helpers.ts"],"sourcesContent":["import * as React from 'react'\n\nlet uid = 0\nfunction uniqueId() {\n    return uid++\n}\n\nexport function generateElementId(prefix: string): string {\n    const num = uniqueId()\n    return `${prefix}-${num}`\n}\n\nexport function useId(providedId?: string): string {\n    const ref = React.useRef<string | null>(providedId ?? null)\n    if (!ref.current) {\n        ref.current = generateElementId('element')\n    }\n    return ref.current\n}\n"],"names":["uid","uniqueId","generateElementId","prefix","num","useId","providedId","ref","React","useRef","current"],"mappings":";;AAEA,IAAIA,GAAG,GAAG,CAAV,CAAA;;AACA,SAASC,QAAT,GAAiB;AACb,EAAA,OAAOD,GAAG,EAAV,CAAA;AACH,CAAA;;AAEK,SAAUE,iBAAV,CAA4BC,MAA5B,EAA0C;EAC5C,MAAMC,GAAG,GAAGH,QAAQ,EAApB,CAAA;AACA,EAAA,OAAU,CAAAE,EAAAA,MAAU,CAAAC,CAAAA,EAAAA,IAApB,CAAA,CAAA;AACH,CAAA;AAEK,SAAUC,KAAV,CAAgBC,UAAhB,EAAmC;EACrC,MAAMC,GAAG,GAAGC,KAAK,CAACC,MAAN,CAA4BH,UAAU,IAAI,IAA1C,CAAZ,CAAA;;AACA,EAAA,IAAI,CAACC,GAAG,CAACG,OAAT,EAAkB;AACdH,IAAAA,GAAG,CAACG,OAAJ,GAAcR,iBAAiB,CAAC,SAAD,CAA/B,CAAA;AACH,GAAA;;EACD,OAAOK,GAAG,CAACG,OAAX,CAAA;AACH;;;;"}

package/es/utils/responsive-props.js

@@ -25,11 +25,11 @@ function getClassNames(styles, property, value) {
   const classList = [];
 
   if (typeof value === 'string') {
-    classList.push(styles[property + "-" + value]);
+    classList.push(styles[`${property}-${value}`]);
   } else {
-    if (value.mobile) classList.push(styles[property + "-" + value.mobile]);
-    if (value.tablet) classList.push(styles["tablet-" + property + "-" + value.tablet]);
-    if (value.desktop) classList.push(styles["desktop-" + property + "-" + value.desktop]);
+    if (value.mobile) classList.push(styles[`${property}-${value.mobile}`]);
+    if (value.tablet) classList.push(styles[`tablet-${property}-${value.tablet}`]);
+    if (value.desktop) classList.push(styles[`desktop-${property}-${value.desktop}`]);
   }
 
   if (DEBUG && !classList.every(Boolean)) {

package/es/utils/responsive-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"responsive-props.js","sources":["../../src/utils/responsive-props.ts"],"sourcesContent":["type ResponsiveBreakpoints = 'mobile' | 'tablet' | 'desktop'\n\ntype Atom = string | number | boolean\n\n/**\n * A responsive prop supports receiving values of its given base type, or an object mapping a\n * responsive breakpoint name to a value from the prop's base type.\n *\n * Some examples:\n *\n * - `align={{ mobile: 'left', tablet: 'center', desktop: 'right' }}`\n */\ntype ResponsiveProp<AtomType extends Atom> =\n    | AtomType\n    | Readonly<{ [key in ResponsiveBreakpoints]?: AtomType }>\n\nconst DEBUG = process.env.NODE_ENV === 'development'\n\n/**\n * Builds a css module class name for a given prop + prop-value combination.\n *\n * We have a convention of building the internal utility-based class names system in a way that\n * resembles the prop for which it is used and the value of the prop. For instance, in a component\n * with a prop `width` with possible values `narrow` and `wide`, we encode the styles for each of\n * these alternatives in the class-names `.width-narrow` and `.width-wide`.\n *\n * Furthermore, this helper is aware of responsive prop values. For instance, if you provide the\n * `width` prop above with the value `['narrow', 'wide']` this returns `['narrow', 'tablet-wide']`.\n * That is, it returns an array of class names, following the same convention above, but also\n * prefixing by the viewport width variant (`tablet-` or `desktop-`).\n *\n * @param styles the class names mapping imported from a css module\n * @param property the prop name\n * @param value the given prop's value\n */\nfunction getClassNames(\n    styles: Record<string, string>,\n    property: string,\n    value: ResponsiveProp<string> | null | undefined,\n): Array<string | undefined> | null {\n    if (!value) {\n        return null\n    }\n\n    const classList: Array<string | undefined> = []\n\n    if (typeof value === 'string') {\n        classList.push(styles[`${property}-${value}`])\n    } else {\n        if (value.mobile) classList.push(styles[`${property}-${value.mobile}`])\n        if (value.tablet) classList.push(styles[`tablet-${property}-${value.tablet}`])\n        if (value.desktop) classList.push(styles[`desktop-${property}-${value.desktop}`])\n    }\n\n    if (DEBUG && !classList.every(Boolean)) {\n        // eslint-disable-next-line no-console\n        console.warn('Not all generated class names were found', { property, value, classList })\n    }\n\n    return classList\n}\n\n/**\n * A mapping over a responsive prop value.\n *\n * Since response values can be an object but also a scalar value, this helper makes it easier to\n * to map the values when it's an object but keeps it consistent for the case when it is a scalar\n * value as well.\n *\n * @param fromValue the responsive prop value\n * @param mapper the mapping function\n */\nfunction mapResponsiveProp<From extends Atom, To extends Atom>(\n    fromValue: ResponsiveProp<From> | undefined,\n    mapper: (from: From) => To,\n): ResponsiveProp<To> | undefined {\n    if (!fromValue) {\n        return undefined\n    }\n\n    if (typeof fromValue !== 'object') {\n        return mapper(fromValue)\n    }\n\n    return {\n        mobile: fromValue.mobile ? mapper(fromValue.mobile) : undefined,\n        tablet: fromValue.tablet ? mapper(fromValue.tablet) : undefined,\n        desktop: fromValue.desktop ? mapper(fromValue.desktop) : undefined,\n    }\n}\n\nexport type { ResponsiveProp, ResponsiveBreakpoints }\nexport { getClassNames, mapResponsiveProp }\n"],"names":["DEBUG","process","env","NODE_ENV","getClassNames","styles","property","value","classList","push","mobile","tablet","desktop","every","Boolean","console","warn","mapResponsiveProp","fromValue","mapper","undefined"],"mappings":"AAgBA,MAAMA,KAAK,GAAGC,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAvC,CAAA;AAEA;;;;;;;;;;;;;;;;AAgBG;;AACH,SAASC,aAAT,CACIC,MADJ,EAEIC,QAFJ,EAGIC,KAHJ,EAGoD;EAEhD,IAAI,CAACA,KAAL,EAAY;AACR,IAAA,OAAO,IAAP,CAAA;AACH,GAAA;;EAED,MAAMC,SAAS,GAA8B,EAA7C,CAAA;;AAEA,EAAA,IAAI,OAAOD,KAAP,KAAiB,QAArB,EAA+B;IAC3BC,SAAS,CAACC,IAAV,CAAeJ,MAAM,CAAIC,QAAJ,GAAA,GAAA,GAAgBC,KAAhB,CAArB,CAAA,CAAA;AACH,GAFD,MAEO;AACH,IAAA,IAAIA,KAAK,CAACG,MAAV,EAAkBF,SAAS,CAACC,IAAV,CAAeJ,MAAM,CAAIC,QAAJ,GAAA,GAAA,GAAgBC,KAAK,CAACG,MAAtB,CAArB,CAAA,CAAA;AAClB,IAAA,IAAIH,KAAK,CAACI,MAAV,EAAkBH,SAAS,CAACC,IAAV,CAAeJ,MAAM,aAAWC,QAAX,GAAA,GAAA,GAAuBC,KAAK,CAACI,MAA7B,CAArB,CAAA,CAAA;AAClB,IAAA,IAAIJ,KAAK,CAACK,OAAV,EAAmBJ,SAAS,CAACC,IAAV,CAAeJ,MAAM,cAAYC,QAAZ,GAAA,GAAA,GAAwBC,KAAK,CAACK,OAA9B,CAArB,CAAA,CAAA;AACtB,GAAA;;EAED,IAAIZ,KAAK,IAAI,CAACQ,SAAS,CAACK,KAAV,CAAgBC,OAAhB,CAAd,EAAwC;AACpC;AACAC,IAAAA,OAAO,CAACC,IAAR,CAAa,0CAAb,EAAyD;MAAEV,QAAF;MAAYC,KAAZ;AAAmBC,MAAAA,SAAAA;KAA5E,CAAA,CAAA;AACH,GAAA;;AAED,EAAA,OAAOA,SAAP,CAAA;AACH,CAAA;AAED;;;;;;;;;AASG;;;AACH,SAASS,iBAAT,CACIC,SADJ,EAEIC,MAFJ,EAE8B;EAE1B,IAAI,CAACD,SAAL,EAAgB;AACZ,IAAA,OAAOE,SAAP,CAAA;AACH,GAAA;;AAED,EAAA,IAAI,OAAOF,SAAP,KAAqB,QAAzB,EAAmC;IAC/B,OAAOC,MAAM,CAACD,SAAD,CAAb,CAAA;AACH,GAAA;;EAED,OAAO;AACHR,IAAAA,MAAM,EAAEQ,SAAS,CAACR,MAAV,GAAmBS,MAAM,CAACD,SAAS,CAACR,MAAX,CAAzB,GAA8CU,SADnD;AAEHT,IAAAA,MAAM,EAAEO,SAAS,CAACP,MAAV,GAAmBQ,MAAM,CAACD,SAAS,CAACP,MAAX,CAAzB,GAA8CS,SAFnD;IAGHR,OAAO,EAAEM,SAAS,CAACN,OAAV,GAAoBO,MAAM,CAACD,SAAS,CAACN,OAAX,CAA1B,GAAgDQ,SAAAA;GAH7D,CAAA;AAKH;;;;"}
+{"version":3,"file":"responsive-props.js","sources":["../../src/utils/responsive-props.ts"],"sourcesContent":["type ResponsiveBreakpoints = 'mobile' | 'tablet' | 'desktop'\n\ntype Atom = string | number | boolean\n\n/**\n * A responsive prop supports receiving values of its given base type, or an object mapping a\n * responsive breakpoint name to a value from the prop's base type.\n *\n * Some examples:\n *\n * - `align={{ mobile: 'left', tablet: 'center', desktop: 'right' }}`\n */\ntype ResponsiveProp<AtomType extends Atom> =\n    | AtomType\n    | Readonly<{ [key in ResponsiveBreakpoints]?: AtomType }>\n\nconst DEBUG = process.env.NODE_ENV === 'development'\n\n/**\n * Builds a css module class name for a given prop + prop-value combination.\n *\n * We have a convention of building the internal utility-based class names system in a way that\n * resembles the prop for which it is used and the value of the prop. For instance, in a component\n * with a prop `width` with possible values `narrow` and `wide`, we encode the styles for each of\n * these alternatives in the class-names `.width-narrow` and `.width-wide`.\n *\n * Furthermore, this helper is aware of responsive prop values. For instance, if you provide the\n * `width` prop above with the value `['narrow', 'wide']` this returns `['narrow', 'tablet-wide']`.\n * That is, it returns an array of class names, following the same convention above, but also\n * prefixing by the viewport width variant (`tablet-` or `desktop-`).\n *\n * @param styles the class names mapping imported from a css module\n * @param property the prop name\n * @param value the given prop's value\n */\nfunction getClassNames(\n    styles: Record<string, string>,\n    property: string,\n    value: ResponsiveProp<string> | null | undefined,\n): Array<string | undefined> | null {\n    if (!value) {\n        return null\n    }\n\n    const classList: Array<string | undefined> = []\n\n    if (typeof value === 'string') {\n        classList.push(styles[`${property}-${value}`])\n    } else {\n        if (value.mobile) classList.push(styles[`${property}-${value.mobile}`])\n        if (value.tablet) classList.push(styles[`tablet-${property}-${value.tablet}`])\n        if (value.desktop) classList.push(styles[`desktop-${property}-${value.desktop}`])\n    }\n\n    if (DEBUG && !classList.every(Boolean)) {\n        // eslint-disable-next-line no-console\n        console.warn('Not all generated class names were found', { property, value, classList })\n    }\n\n    return classList\n}\n\n/**\n * A mapping over a responsive prop value.\n *\n * Since response values can be an object but also a scalar value, this helper makes it easier to\n * to map the values when it's an object but keeps it consistent for the case when it is a scalar\n * value as well.\n *\n * @param fromValue the responsive prop value\n * @param mapper the mapping function\n */\nfunction mapResponsiveProp<From extends Atom, To extends Atom>(\n    fromValue: ResponsiveProp<From> | undefined,\n    mapper: (from: From) => To,\n): ResponsiveProp<To> | undefined {\n    if (!fromValue) {\n        return undefined\n    }\n\n    if (typeof fromValue !== 'object') {\n        return mapper(fromValue)\n    }\n\n    return {\n        mobile: fromValue.mobile ? mapper(fromValue.mobile) : undefined,\n        tablet: fromValue.tablet ? mapper(fromValue.tablet) : undefined,\n        desktop: fromValue.desktop ? mapper(fromValue.desktop) : undefined,\n    }\n}\n\nexport type { ResponsiveProp, ResponsiveBreakpoints }\nexport { getClassNames, mapResponsiveProp }\n"],"names":["DEBUG","process","env","NODE_ENV","getClassNames","styles","property","value","classList","push","mobile","tablet","desktop","every","Boolean","console","warn","mapResponsiveProp","fromValue","mapper","undefined"],"mappings":"AAgBA,MAAMA,KAAK,GAAGC,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAvC,CAAA;AAEA;;;;;;;;;;;;;;;;AAgBG;;AACH,SAASC,aAAT,CACIC,MADJ,EAEIC,QAFJ,EAGIC,KAHJ,EAGoD;EAEhD,IAAI,CAACA,KAAL,EAAY;AACR,IAAA,OAAO,IAAP,CAAA;AACH,GAAA;;EAED,MAAMC,SAAS,GAA8B,EAA7C,CAAA;;AAEA,EAAA,IAAI,OAAOD,KAAP,KAAiB,QAArB,EAA+B;IAC3BC,SAAS,CAACC,IAAV,CAAeJ,MAAM,CAAC,GAAGC,QAAQ,CAAA,CAAA,EAAIC,KAAK,CAAA,CAArB,CAArB,CAAA,CAAA;AACH,GAFD,MAEO;AACH,IAAA,IAAIA,KAAK,CAACG,MAAV,EAAkBF,SAAS,CAACC,IAAV,CAAeJ,MAAM,CAAI,GAAAC,QAAY,CAAA,CAAA,EAAAC,KAAK,CAACG,MAAQ,EAA9B,CAArB,CAAA,CAAA;AAClB,IAAA,IAAIH,KAAK,CAACI,MAAV,EAAkBH,SAAS,CAACC,IAAV,CAAeJ,MAAM,CAAW,UAAAC,QAAY,CAAA,CAAA,EAAAC,KAAK,CAACI,MAAQ,EAArC,CAArB,CAAA,CAAA;AAClB,IAAA,IAAIJ,KAAK,CAACK,OAAV,EAAmBJ,SAAS,CAACC,IAAV,CAAeJ,MAAM,CAAY,WAAAC,QAAY,CAAA,CAAA,EAAAC,KAAK,CAACK,OAAS,EAAvC,CAArB,CAAA,CAAA;AACtB,GAAA;;EAED,IAAIZ,KAAK,IAAI,CAACQ,SAAS,CAACK,KAAV,CAAgBC,OAAhB,CAAd,EAAwC;AACpC;AACAC,IAAAA,OAAO,CAACC,IAAR,CAAa,0CAAb,EAAyD;MAAEV,QAAF;MAAYC,KAAZ;AAAmBC,MAAAA,SAAAA;KAA5E,CAAA,CAAA;AACH,GAAA;;AAED,EAAA,OAAOA,SAAP,CAAA;AACH,CAAA;AAED;;;;;;;;;AASG;;;AACH,SAASS,iBAAT,CACIC,SADJ,EAEIC,MAFJ,EAE8B;EAE1B,IAAI,CAACD,SAAL,EAAgB;AACZ,IAAA,OAAOE,SAAP,CAAA;AACH,GAAA;;AAED,EAAA,IAAI,OAAOF,SAAP,KAAqB,QAAzB,EAAmC;IAC/B,OAAOC,MAAM,CAACD,SAAD,CAAb,CAAA;AACH,GAAA;;EAED,OAAO;AACHR,IAAAA,MAAM,EAAEQ,SAAS,CAACR,MAAV,GAAmBS,MAAM,CAACD,SAAS,CAACR,MAAX,CAAzB,GAA8CU,SADnD;AAEHT,IAAAA,MAAM,EAAEO,SAAS,CAACP,MAAV,GAAmBQ,MAAM,CAACD,SAAS,CAACP,MAAX,CAAzB,GAA8CS,SAFnD;IAGHR,OAAO,EAAEM,SAAS,CAACN,OAAV,GAAoBO,MAAM,CAACD,SAAS,CAACN,OAAX,CAA1B,GAAgDQ,SAAAA;GAH7D,CAAA;AAKH;;;;"}

package/lib/avatar/avatar.js

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

package/lib/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { getInitials, emailToIndex } from './utils'\n\nimport { getClassNames, ResponsiveProp } from '../utils/responsive-props'\nimport styles from './avatar.module.css'\nimport { Box } from '../box'\nimport type { ObfuscatedClassName } from '../utils/common-types'\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 = ObfuscatedClassName & {\n    /** @deprecated Please use `exceptionallySetClassName` */\n    className?: 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","_ref","user","avatarUrl","size","className","colorList","exceptionallySetClassName","props","_objectWithoutProperties","objectWithoutProperties","_excluded","userInitials","getInitials","name","email","avatarSize","style","backgroundImage","textIndent","backgroundColor","emailToIndex","length","sizeClassName","getClassNames","styles","React","createElement","Box","_objectSpread","avatar","displayName"],"mappings":"qoBASMA,EAAgB,CAClB,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WAeJ,SAASC,EAQDC,GAAA,IARQC,KACZA,EADYC,UAEZA,EAFYC,KAGZA,EAAO,IAHKC,UAIZA,EAJYC,UAKZA,EAAYP,EALAQ,0BAMZA,GAEIN,EADDO,EACCC,EAAAC,wBAAAT,EAAAU,GACJ,MAAMC,EAAeC,EAAWA,YAACX,EAAKY,OAASD,cAAYX,EAAKa,OAC1DC,EAAaZ,GAAc,IAE3Ba,EAAQd,EACR,CACIe,gBAAe,OAASf,EAD5B,IAEIgB,WAAY,WAEhB,CACIC,gBAAiBd,EAAUe,eAAanB,EAAKa,MAAOT,EAAUgB,UAGlEC,EAAgBC,EAAaA,cAACC,EAAD,QAAS,OAAQT,GAEpD,OACIU,EAACC,cAAAC,EAADA,IAAAC,gBAAA,CACIxB,UAAW,CAACA,EAAWoB,EAAAA,QAAOK,OAAQP,EAAehB,GACrDU,MAAOA,GACHT,GAEHI,GAIbZ,EAAO+B,YAAc"}
+{"version":3,"file":"avatar.js","sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { getInitials, emailToIndex } from './utils'\n\nimport { getClassNames, ResponsiveProp } from '../utils/responsive-props'\nimport styles from './avatar.module.css'\nimport { Box } from '../box'\nimport type { ObfuscatedClassName } from '../utils/common-types'\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 = ObfuscatedClassName & {\n    /** @deprecated Please use `exceptionallySetClassName` */\n    className?: 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","_ref","user","avatarUrl","size","className","colorList","exceptionallySetClassName","props","_objectWithoutProperties","objectWithoutProperties","_excluded","userInitials","getInitials","name","email","avatarSize","style","backgroundImage","textIndent","backgroundColor","emailToIndex","length","sizeClassName","getClassNames","styles","React","createElement","Box","_objectSpread","avatar","displayName"],"mappings":"qoBASMA,EAAgB,CAClB,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WAeJ,SAASC,EAQDC,GAAA,IARQC,KACZA,EADYC,UAEZA,EAFYC,KAGZA,EAAO,IAHKC,UAIZA,EAJYC,UAKZA,EAAYP,EALAQ,0BAMZA,GAEIN,EADDO,EACCC,EAAAC,wBAAAT,EAAAU,GACJ,MAAMC,EAAeC,EAAWA,YAACX,EAAKY,OAASD,cAAYX,EAAKa,OAC1DC,EAAaZ,GAAc,IAE3Ba,EAAQd,EACR,CACIe,gBAAwB,OAAAf,KACxBgB,WAAY,WAEhB,CACIC,gBAAiBd,EAAUe,eAAanB,EAAKa,MAAOT,EAAUgB,UAGlEC,EAAgBC,EAAaA,cAACC,EAAD,QAAS,OAAQT,GAEpD,OACIU,EAACC,cAAAC,EAADA,IAAAC,gBAAA,CACIxB,UAAW,CAACA,EAAWoB,EAAAA,QAAOK,OAAQP,EAAehB,GACrDU,MAAOA,GACHT,GAEHI,GAIbZ,EAAO+B,YAAc"}

package/lib/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../src/badge/badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '../box'\n\nimport styles from './badge.module.css'\n\ntype BadgeTone = 'info' | 'positive' | 'promote' | 'attention' | 'warning'\n\ntype BadgeProps = {\n    /**\n     * The label to show inside the badge element.\n     */\n    label: string\n    /**\n     * The tone of the badge.\n     */\n    tone: BadgeTone\n}\n\nfunction Badge({ tone, label, ...props }: BadgeProps) {\n    return (\n        <Box\n            {...props}\n            as=\"span\" // It enables putting the badge inside a button (https://stackoverflow.com/a/12982334)\n            display=\"inline\"\n            className={[styles.badge, styles[`badge-${tone}`]]}\n        >\n            {label}\n        </Box>\n    )\n}\n\nexport { Badge }\nexport type { BadgeProps }\n"],"names":["_ref","tone","label","props","_objectWithoutProperties","objectWithoutProperties","_excluded","React","createElement","Box","as","display","className","styles","badge"],"mappings":"ihBAmBA,SAAoDA,GAAA,IAArCC,KAAEA,EAAFC,MAAQA,GAA6BF,EAAnBG,EAAmBC,EAAAC,wBAAAL,EAAAM,GAChD,OACIC,EAACC,cAAAC,yCACON,GADR,GAAA,CAEIO,GAAG,OACHC,QAAQ,SACRC,UAAW,CAACC,EAAAA,QAAOC,MAAOD,EAAAA,QAAgBZ,SAAAA,MAEzCC"}
+{"version":3,"file":"badge.js","sources":["../../src/badge/badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '../box'\n\nimport styles from './badge.module.css'\n\ntype BadgeTone = 'info' | 'positive' | 'promote' | 'attention' | 'warning'\n\ntype BadgeProps = {\n    /**\n     * The label to show inside the badge element.\n     */\n    label: string\n    /**\n     * The tone of the badge.\n     */\n    tone: BadgeTone\n}\n\nfunction Badge({ tone, label, ...props }: BadgeProps) {\n    return (\n        <Box\n            {...props}\n            as=\"span\" // It enables putting the badge inside a button (https://stackoverflow.com/a/12982334)\n            display=\"inline\"\n            className={[styles.badge, styles[`badge-${tone}`]]}\n        >\n            {label}\n        </Box>\n    )\n}\n\nexport { Badge }\nexport type { BadgeProps }\n"],"names":["_ref","tone","label","props","_objectWithoutProperties","objectWithoutProperties","_excluded","React","createElement","Box","as","display","className","styles","badge"],"mappings":"ihBAmBA,SAAoDA,GAAA,IAArCC,KAAEA,EAAFC,MAAQA,GAA6BF,EAAnBG,EAAmBC,EAAAC,wBAAAL,EAAAM,GAChD,OACIC,EAACC,cAAAC,yCACON,GADR,GAAA,CAEIO,GAAG,OACHC,QAAQ,SACRC,UAAW,CAACC,EAAM,QAACC,MAAOD,EAAAA,QAAO,SAASZ,MAEzCC"}

package/lib/banner/banner.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),l=require("../box/box.js"),n=require("../utils/common-helpers.js"),a=require("./banner.module.css.js"),r=require("../button/button.js"),o=require("../icons/close-icon.js"),i=require("../icons/banner-icon.js"),c=require("../text-link/text-link.js");function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(l){if("default"!==l){var n=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(t,l,n.get?n:{enumerable:!0,get:function(){return e[l]}})}})),t.default=e,t}var u=s(t);const d=["id","type","title","description","action","icon","image","inlineLinks","closeLabel","onClose"],p=["label"],b=["type","label"],m=["type","label","variant"];function f(t){let{label:l}=t,n=e.objectWithoutProperties(t,b);return u.createElement(r.Button,e.objectSpread2({},n),l)}function y(t){let{label:l,variant:n}=t,a=e.objectWithoutProperties(t,m);return u.createElement(r.Button,{variant:n,render:u.createElement("a",e.objectSpread2({rel:"noopener noreferrer",target:"_blank"},a))},l)}exports.Banner=u.forwardRef((function(t,s){let{id:b,type:m,title:x,description:j,action:E,icon:B,image:g,inlineLinks:v,closeLabel:k,onClose:N}=t,q=e.objectWithoutProperties(t,d);const C=n.useId(),S=n.useId(),P=N?u.createElement(r.IconButton,{exceptionallySetClassName:a.default.closeButton,variant:"quaternary",onClick:N,icon:u.createElement(o.CloseIcon,null),"aria-label":null!=k?k:"Close banner"}):null;return u.createElement(l.Box,e.objectSpread2(e.objectSpread2({},q),{},{ref:s,id:b,display:"flex",flexDirection:"column",justifyContent:"center",role:"status","aria-labelledby":x?C:S,"aria-describedby":x?S:void 0,"aria-live":"polite",tabIndex:0,borderRadius:"full",className:a.default.banner}),g?u.createElement(l.Box,{className:a.default.image},g):null,u.createElement(l.Box,{className:a.default.content,display:"flex",gap:"small",alignItems:"center"},u.createElement(l.Box,{className:a.default.staticContent,display:"flex",gap:"small",flexGrow:1},u.createElement(l.Box,{className:a.default.icon},"neutral"===m?B:u.createElement(i.BannerIcon,{type:m}),P),u.createElement(l.Box,{className:a.default.copy,display:"flex",flexDirection:"column"},x?u.createElement(l.Box,{id:C,className:a.default.title},x):null,u.createElement(l.Box,{id:S,className:[a.default.description,x?a.default.secondary:null]},j,null==v?void 0:v.map((t,l)=>{let{label:n}=t,r=e.objectWithoutProperties(t,p);return u.createElement(u.Fragment,{key:l},u.createElement(c.TextLink,e.objectSpread2(e.objectSpread2({},r),{},{exceptionallySetClassName:a.default.inlineLink}),n),l<v.length-1?u.createElement("span",null," · "):"")})))),E||P?u.createElement(l.Box,{className:a.default.actions,display:"flex",gap:"small"},E?function(e){return"object"==typeof e&&null!==e&&"type"in e&&("button"===e.type||"link"===e.type)}(E)?u.createElement("button"===E.type?f:y,e.objectSpread2({},E)):E:null,P):null))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),l=require("../box/box.js"),n=require("../utils/common-helpers.js"),a=require("./banner.module.css.js"),r=require("../button/button.js"),o=require("../icons/close-icon.js"),i=require("../icons/banner-icon.js"),c=require("../text-link/text-link.js");function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(l){if("default"!==l){var n=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(t,l,n.get?n:{enumerable:!0,get:function(){return e[l]}})}})),t.default=e,t}var u=s(t);const d=["id","type","title","description","action","icon","image","inlineLinks","closeLabel","onClose"],p=["label"],b=["type","label"],m=["type","label","variant"];function f(t){let{label:l}=t,n=e.objectWithoutProperties(t,b);return u.createElement(r.Button,e.objectSpread2({},n),l)}function y(t){let{label:l,variant:n}=t,a=e.objectWithoutProperties(t,m);return u.createElement(r.Button,{variant:n,render:u.createElement("a",e.objectSpread2({rel:"noopener noreferrer",target:"_blank"},a))},l)}exports.Banner=u.forwardRef((function(t,s){let{id:b,type:m,title:x,description:j,action:E,icon:B,image:g,inlineLinks:v,closeLabel:k,onClose:N}=t,q=e.objectWithoutProperties(t,d);const C=n.useId(),S=n.useId(),P=N?u.createElement(r.IconButton,{exceptionallySetClassName:a.default.closeButton,variant:"quaternary",onClick:N,icon:u.createElement(o.CloseIcon,null),"aria-label":k??"Close banner"}):null;return u.createElement(l.Box,e.objectSpread2(e.objectSpread2({},q),{},{ref:s,id:b,display:"flex",flexDirection:"column",justifyContent:"center",role:"status","aria-labelledby":x?C:S,"aria-describedby":x?S:void 0,"aria-live":"polite",tabIndex:0,borderRadius:"full",className:a.default.banner}),g?u.createElement(l.Box,{className:a.default.image},g):null,u.createElement(l.Box,{className:a.default.content,display:"flex",gap:"small",alignItems:"center"},u.createElement(l.Box,{className:a.default.staticContent,display:"flex",gap:"small",flexGrow:1},u.createElement(l.Box,{className:a.default.icon},"neutral"===m?B:u.createElement(i.BannerIcon,{type:m}),P),u.createElement(l.Box,{className:a.default.copy,display:"flex",flexDirection:"column"},x?u.createElement(l.Box,{id:C,className:a.default.title},x):null,u.createElement(l.Box,{id:S,className:[a.default.description,x?a.default.secondary:null]},j,null==v?void 0:v.map((t,l)=>{let{label:n}=t,r=e.objectWithoutProperties(t,p);return u.createElement(u.Fragment,{key:l},u.createElement(c.TextLink,e.objectSpread2(e.objectSpread2({},r),{},{exceptionallySetClassName:a.default.inlineLink}),n),l<v.length-1?u.createElement("span",null," · "):"")})))),E||P?u.createElement(l.Box,{className:a.default.actions,display:"flex",gap:"small"},E?function(e){return"object"==typeof e&&null!==e&&"type"in e&&("button"===e.type||"link"===e.type)}(E)?u.createElement("button"===E.type?f:y,e.objectSpread2({},E)):E:null,P):null))}));
 //# sourceMappingURL=banner.js.map