@doist/reactist 28.0.0 → 28.1.1

package/es/tabs/tabs.js

@@ -83,35 +83,63 @@ function TabList(_ref2) {
   } = _ref2,
       props = _objectWithoutProperties(_ref2, _excluded);
 
+  const tabListRef = React.useRef(null);
+  const tabListPrevWidthRef = React.useRef(0);
   const tabContextValue = React.useContext(TabsContext);
   const [selectedTabElement, setSelectedTabElement] = React.useState(null);
   const [selectedTabStyle, setSelectedTabStyle] = React.useState({});
-  const tabListRef = React.useRef(null);
   const selectedId = tabContextValue == null ? void 0 : tabContextValue.tabStore.useState('selectedId');
-  React.useLayoutEffect(() => {
-    function updateSelectedTabStyle() {
-      if (!selectedId || !tabListRef.current) {
-        return;
-      }
+  const updateSelectedTabPosition = React.useCallback(function updateSelectedTabPositionCallback() {
+    if (!selectedId || !tabListRef.current) {
+      return;
+    }
 
-      const tabs = tabListRef.current.querySelectorAll('[role="tab"]');
-      const selectedTab = Array.from(tabs).find(tab => tab.getAttribute('id') === selectedId);
+    const tabs = tabListRef.current.querySelectorAll('[role="tab"]');
+    const selectedTab = Array.from(tabs).find(tab => tab.getAttribute('id') === selectedId);
 
-      if (selectedTab) {
-        setSelectedTabElement(selectedTab);
-        setSelectedTabStyle({
-          left: selectedTab.offsetLeft + "px",
-          width: selectedTab.offsetWidth + "px"
+    if (selectedTab) {
+      setSelectedTabElement(selectedTab);
+      setSelectedTabStyle({
+        left: selectedTab.offsetLeft + "px",
+        width: selectedTab.offsetWidth + "px"
+      });
+    }
+  }, [selectedId]);
+  React.useEffect(function updateSelectedTabPositionOnTabChange() {
+    updateSelectedTabPosition();
+  }, // `selectedId` is a dependency to ensure the effect runs when the selected tab changes
+  [selectedId, updateSelectedTabPosition]);
+  React.useEffect(function observeTabListWidthChange() {
+    let animationFrameId = null;
+    const tabListObserver = new ResizeObserver(([entry]) => {
+      const width = entry == null ? void 0 : entry.contentRect.width;
+
+      if (width && tabListPrevWidthRef.current !== width) {
+        tabListPrevWidthRef.current = width;
+
+        if (animationFrameId !== null) {
+          cancelAnimationFrame(animationFrameId);
+        }
+
+        animationFrameId = requestAnimationFrame(() => {
+          updateSelectedTabPosition();
+          animationFrameId = null;
         });
       }
+    });
+
+    if (tabListRef.current) {
+      tabListObserver.observe(tabListRef.current);
     }
 
-    updateSelectedTabStyle();
-    window.addEventListener('resize', updateSelectedTabStyle);
-    return function cleanupEventListener() {
-      window.removeEventListener('resize', updateSelectedTabStyle);
+    return function cleanupResizeObserver() {
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+      }
+
+      tabListObserver.disconnect();
     };
-  }, [selectedId]);
+  }, [updateSelectedTabPosition]);
 
   if (!tabContextValue) {
     return null;

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 tabContextValue = React.useContext(TabsContext)\n\n    const [selectedTabElement, setSelectedTabElement] = React.useState<HTMLElement | null>(null)\n    const [selectedTabStyle, setSelectedTabStyle] = React.useState<React.CSSProperties>({})\n    const tabListRef = React.useRef<HTMLDivElement>(null)\n\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n\n    React.useLayoutEffect(() => {\n        function updateSelectedTabStyle() {\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\n        updateSelectedTabStyle()\n\n        window.addEventListener('resize', updateSelectedTabStyle)\n\n        return function cleanupEventListener() {\n            window.removeEventListener('resize', updateSelectedTabStyle)\n        }\n    }, [selectedId])\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","selectedTabElement","setSelectedTabElement","selectedTabStyle","setSelectedTabStyle","tabListRef","useRef","useLayoutEffect","updateSelectedTabStyle","current","tabs","querySelectorAll","selectedTab","Array","from","find","getAttribute","left","offsetLeft","offsetWidth","window","addEventListener","cleanupEventListener","removeEventListener","justifyContentAlignMap","start","end","center","Box","display","justifyContent","BaseTabList","_objectSpread","position","track","selected","style","Inline","fullTabList","TabPanel","renderMode","tabRendered","setTabRendered","tabIsActive","useEffect","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/tabs/tabs.module.css.js

@@ -1,4 +1,4 @@
-var modules_40c67f5b = {"tab":"_9f64e89a","fullTabList":"_49fe8e5a","track":"_1f449e3a","selected":"a8ac92b1","tab-neutral":"_6c6b8a2b","tab-themed":"_0eddd76d","track-neutral":"be66f12e","track-themed":"d21ccd50","selected-neutral":"_33211e81","selected-themed":"_4d1cbd10"};
+var modules_40c67f5b = {"tab":"_33c9c271","fullTabList":"_479349aa","track":"_2862a4ba","selected":"_1161c811","tab-neutral":"_9502e79a","tab-themed":"c39f1053","track-neutral":"b3554a83","track-themed":"_511b0be0","selected-neutral":"c81dc609","selected-themed":"_87552972"};
 
 export { modules_40c67f5b as default };
 //# sourceMappingURL=tabs.module.css.js.map

package/lib/tabs/tabs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("classnames"),l=require("@ariakit/react"),n=require("../box/box.js"),a=require("../inline/inline.js"),s=require("./tabs.module.css.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,l.get?l:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var c=o(t),i=u(r);const d=["children","space","width","align","exceptionallySetClassName"],f=["children","id","renderMode"],b=c.createContext(null),p=c.forwardRef((function({children:e,id:t,disabled:r,exceptionallySetClassName:n,render:a,onClick:u},o){const d=c.useContext(b);if(!d)return null;const{variant:f,tabStore:p}=d,S=i.default(n,s.default.tab,s.default["tab-"+f]);return c.createElement(l.Tab,{id:t,ref:o,disabled:r,store:p,render:a,className:S,onClick:u},e)})),S=c.forwardRef((function(t,r){let{children:n,id:a,renderMode:s="always"}=t,u=e.objectWithoutProperties(t,f);const o=c.useContext(b),[i,d]=c.useState(!1),p=(null==o?void 0:o.tabStore.useState("selectedId"))===a;if(c.useEffect((function(){!i&&p&&d(!0)}),[i,p]),!o)return null;const{tabStore:S}=o;return"always"===s||"active"===s&&p||"lazy"===s&&(p||i)?c.createElement(l.TabPanel,e.objectSpread2(e.objectSpread2({},u),{},{tabId:a,store:S,ref:r}),n):null}));exports.Tab=p,exports.TabAwareSlot=function({children:e}){const t=c.useContext(b),r=null==t?void 0:t.tabStore.useState("selectedId");return t?e({selectedId:r}):null},exports.TabList=function(t){let{children:r,space:u,width:o="maxContent",align:f="start",exceptionallySetClassName:p}=t,S=e.objectWithoutProperties(t,d);const x=c.useContext(b),[m,v]=c.useState(null),[y,h]=c.useState({}),j=c.useRef(null),E=null==x?void 0:x.tabStore.useState("selectedId");if(c.useLayoutEffect(()=>{function e(){if(!E||!j.current)return;const e=j.current.querySelectorAll('[role="tab"]'),t=Array.from(e).find(e=>e.getAttribute("id")===E);t&&(v(t),h({left:t.offsetLeft+"px",width:t.offsetWidth+"px"}))}return e(),window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}},[E]),!x)return null;const{tabStore:w,variant:C}=x;return c.createElement(n.Box,{display:"flex",justifyContent:"full"===o?"center":{start:"flexStart",end:"flexEnd",center:"center"}[f]},c.createElement(l.TabList,e.objectSpread2({store:w,render:c.createElement(n.Box,{position:"relative",width:o,className:p}),ref:j},S),c.createElement(n.Box,{className:[s.default.track,s.default["track-"+C]]}),m?c.createElement(n.Box,{className:[s.default.selected,s.default["selected-"+C]],style:y}):null,c.createElement(a.Inline,{space:u,exceptionallySetClassName:i.default("full"===o?s.default.fullTabList:null)},r)))},exports.TabPanel=S,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:r,variant:n="neutral",onSelectedIdChange:a}){const s=l.useTabStore({defaultSelectedId:r,selectedId:t,setSelectedId:a}),u=s.useState("selectedId"),o=c.useMemo(()=>{var e;return{tabStore:s,variant:n,selectedId:null!=(e=null!=t?t:u)?e:null}},[n,s,t,u]);return c.createElement(b.Provider,{value:o},e)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("classnames"),n=require("@ariakit/react"),l=require("../box/box.js"),a=require("../inline/inline.js"),u=require("./tabs.module.css.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var o=s(t),i=c(r);const d=["children","space","width","align","exceptionallySetClassName"],f=["children","id","renderMode"],b=o.createContext(null),m=o.forwardRef((function({children:e,id:t,disabled:r,exceptionallySetClassName:l,render:a,onClick:c},s){const d=o.useContext(b);if(!d)return null;const{variant:f,tabStore:m}=d,p=i.default(l,u.default.tab,u.default["tab-"+f]);return o.createElement(n.Tab,{id:t,ref:s,disabled:r,store:m,render:a,className:p,onClick:c},e)})),p=o.forwardRef((function(t,r){let{children:l,id:a,renderMode:u="always"}=t,c=e.objectWithoutProperties(t,f);const s=o.useContext(b),[i,d]=o.useState(!1),m=(null==s?void 0:s.tabStore.useState("selectedId"))===a;if(o.useEffect((function(){!i&&m&&d(!0)}),[i,m]),!s)return null;const{tabStore:p}=s;return"always"===u||"active"===u&&m||"lazy"===u&&(m||i)?o.createElement(n.TabPanel,e.objectSpread2(e.objectSpread2({},c),{},{tabId:a,store:p,ref:r}),l):null}));exports.Tab=m,exports.TabAwareSlot=function({children:e}){const t=o.useContext(b),r=null==t?void 0:t.tabStore.useState("selectedId");return t?e({selectedId:r}):null},exports.TabList=function(t){let{children:r,space:c,width:s="maxContent",align:f="start",exceptionallySetClassName:m}=t,p=e.objectWithoutProperties(t,d);const S=o.useRef(null),x=o.useRef(0),v=o.useContext(b),[h,y]=o.useState(null),[j,C]=o.useState({}),E=null==v?void 0:v.tabStore.useState("selectedId"),I=o.useCallback((function(){if(!E||!S.current)return;const e=S.current.querySelectorAll('[role="tab"]'),t=Array.from(e).find(e=>e.getAttribute("id")===E);t&&(y(t),C({left:t.offsetLeft+"px",width:t.offsetWidth+"px"}))}),[E]);if(o.useEffect((function(){I()}),[E,I]),o.useEffect((function(){let e=null;const t=new ResizeObserver(([t])=>{const r=null==t?void 0:t.contentRect.width;r&&x.current!==r&&(x.current=r,null!==e&&cancelAnimationFrame(e),e=requestAnimationFrame(()=>{I(),e=null}))});return S.current&&t.observe(S.current),function(){e&&cancelAnimationFrame(e),t.disconnect()}}),[I]),!v)return null;const{tabStore:w,variant:T}=v;return o.createElement(l.Box,{display:"flex",justifyContent:"full"===s?"center":{start:"flexStart",end:"flexEnd",center:"center"}[f]},o.createElement(n.TabList,e.objectSpread2({store:w,render:o.createElement(l.Box,{position:"relative",width:s,className:m}),ref:S},p),o.createElement(l.Box,{className:[u.default.track,u.default["track-"+T]]}),h?o.createElement(l.Box,{className:[u.default.selected,u.default["selected-"+T]],style:j}):null,o.createElement(a.Inline,{space:c,exceptionallySetClassName:i.default("full"===s?u.default.fullTabList:null)},r)))},exports.TabPanel=p,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:r,variant:l="neutral",onSelectedIdChange:a}){const u=n.useTabStore({defaultSelectedId:r,selectedId:t,setSelectedId:a}),c=u.useState("selectedId"),s=o.useMemo(()=>{var e;return{tabStore:u,variant:l,selectedId:null!=(e=null!=t?t:c)?e:null}},[l,u,t,c]);return o.createElement(b.Provider,{value:s},e)};
 //# sourceMappingURL=tabs.js.map

package/lib/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 tabContextValue = React.useContext(TabsContext)\n\n    const [selectedTabElement, setSelectedTabElement] = React.useState<HTMLElement | null>(null)\n    const [selectedTabStyle, setSelectedTabStyle] = React.useState<React.CSSProperties>({})\n    const tabListRef = React.useRef<HTMLDivElement>(null)\n\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n\n    React.useLayoutEffect(() => {\n        function updateSelectedTabStyle() {\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\n        updateSelectedTabStyle()\n\n        window.addEventListener('resize', updateSelectedTabStyle)\n\n        return function cleanupEventListener() {\n            window.removeEventListener('resize', updateSelectedTabStyle)\n        }\n    }, [selectedId])\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","Tab","forwardRef","children","id","disabled","exceptionallySetClassName","render","onClick","ref","tabContextValue","useContext","variant","tabStore","className","classNames","styles","tab","createElement","BaseTab","store","TabPanel","renderMode","_ref3","props","_objectWithoutProperties","objectWithoutProperties","_excluded2","tabRendered","setTabRendered","useState","tabIsActive","useEffect","BaseTabPanel","tabId","selectedId","_ref2","space","width","align","_excluded","selectedTabElement","setSelectedTabElement","selectedTabStyle","setSelectedTabStyle","tabListRef","useRef","useLayoutEffect","updateSelectedTabStyle","current","tabs","querySelectorAll","selectedTab","Array","from","find","getAttribute","left","offsetLeft","offsetWidth","window","addEventListener","removeEventListener","Box","display","justifyContent","start","end","center","BaseTabList","TabList","_objectSpread","position","track","selected","style","Inline","fullTabList","defaultSelectedId","onSelectedIdChange","useTabStore","setSelectedId","actualSelectedId","memoizedTabState","useMemo","_ref","Provider","value"],"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","Tab","forwardRef","children","id","disabled","exceptionallySetClassName","render","onClick","ref","tabContextValue","useContext","variant","tabStore","className","classNames","styles","tab","createElement","BaseTab","store","TabPanel","renderMode","_ref3","props","_objectWithoutProperties","objectWithoutProperties","_excluded2","tabRendered","setTabRendered","useState","tabIsActive","useEffect","BaseTabPanel","tabId","selectedId","_ref2","space","width","align","_excluded","tabListRef","useRef","tabListPrevWidthRef","selectedTabElement","setSelectedTabElement","selectedTabStyle","setSelectedTabStyle","updateSelectedTabPosition","useCallback","current","tabs","querySelectorAll","selectedTab","Array","from","find","getAttribute","left","offsetLeft","offsetWidth","animationFrameId","tabListObserver","ResizeObserver","entry","contentRect","cancelAnimationFrame","requestAnimationFrame","observe","disconnect","Box","display","justifyContent","start","end","center","BaseTabList","TabList","_objectSpread","position","track","selected","style","Inline","fullTabList","defaultSelectedId","onSelectedIdChange","useTabStore","setSelectedId","actualSelectedId","memoizedTabState","useMemo","_ref","Provider","value"],"mappings":"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"}

package/lib/tabs/tabs.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={tab:"_9f64e89a",fullTabList:"_49fe8e5a",track:"_1f449e3a",selected:"a8ac92b1","tab-neutral":"_6c6b8a2b","tab-themed":"_0eddd76d","track-neutral":"be66f12e","track-themed":"d21ccd50","selected-neutral":"_33211e81","selected-themed":"_4d1cbd10"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={tab:"_33c9c271",fullTabList:"_479349aa",track:"_2862a4ba",selected:"_1161c811","tab-neutral":"_9502e79a","tab-themed":"c39f1053","track-neutral":"b3554a83","track-themed":"_511b0be0","selected-neutral":"c81dc609","selected-themed":"_87552972"};
 //# sourceMappingURL=tabs.module.css.js.map

package/package.json

@@ -6,7 +6,7 @@
         "email": "henning@doist.com",
         "url": "http://doist.com"
     },
-    "version": "28.0.0",
+    "version": "28.1.1",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

package/styles/reactist.css

@@ -27,7 +27,7 @@
 :root{--reactist-avatar-size-xxsmall:16px;--reactist-avatar-size-xsmall:20px;--reactist-avatar-size-small:30px;--reactist-avatar-size-medium:32px;--reactist-avatar-size-large:34px;--reactist-avatar-size-xlarge:48px;--reactist-avatar-size-xxlarge:70px;--reactist-avatar-size-xxxlarge:100px;--reactist-avatar-size:var(--reactist-avatar-size-large)}._38a1be89{flex-shrink:0;background-position:50%;color:#fff;text-align:center;border-radius:50%;width:var(--reactist-avatar-size);height:var(--reactist-avatar-size);line-height:var(--reactist-avatar-size);background-size:var(--reactist-avatar-size);font-size:calc(var(--reactist-avatar-size)/2)}.d32e92ae{--reactist-avatar-size:var(--reactist-avatar-size-xxsmall)}._0667d719{--reactist-avatar-size:var(--reactist-avatar-size-xsmall)}.cf529fcf{--reactist-avatar-size:var(--reactist-avatar-size-small)}._6e268eab{--reactist-avatar-size:var(--reactist-avatar-size-medium)}.d64c62cf{--reactist-avatar-size:var(--reactist-avatar-size-large)}._44fb77de{--reactist-avatar-size:var(--reactist-avatar-size-xlarge)}._01f85e0e{--reactist-avatar-size:var(--reactist-avatar-size-xxlarge)}._41a5fe19{--reactist-avatar-size:var(--reactist-avatar-size-xxxlarge)}@media (min-width:768px){._6ab1577d{--reactist-avatar-size:var(--reactist-avatar-size-xxsmall)}.b52a4963{--reactist-avatar-size:var(--reactist-avatar-size-xsmall)}._714a8419{--reactist-avatar-size:var(--reactist-avatar-size-small)}._81cd4d51{--reactist-avatar-size:var(--reactist-avatar-size-medium)}.bf0a4edb{--reactist-avatar-size:var(--reactist-avatar-size-large)}.e4f0dabd{--reactist-avatar-size:var(--reactist-avatar-size-xlarge)}._67ea065d{--reactist-avatar-size:var(--reactist-avatar-size-xxlarge)}._2af7f76f{--reactist-avatar-size:var(--reactist-avatar-size-xxxlarge)}}@media (min-width:992px){._759081dc{--reactist-avatar-size:var(--reactist-avatar-size-xxsmall)}._8290d1c1{--reactist-avatar-size:var(--reactist-avatar-size-xsmall)}._48ea172d{--reactist-avatar-size:var(--reactist-avatar-size-small)}._758f6641{--reactist-avatar-size:var(--reactist-avatar-size-medium)}.f9ada088{--reactist-avatar-size:var(--reactist-avatar-size-large)}.d3bb7470{--reactist-avatar-size:var(--reactist-avatar-size-xlarge)}._9a312ee3{--reactist-avatar-size:var(--reactist-avatar-size-xxlarge)}.a1d30c23{--reactist-avatar-size:var(--reactist-avatar-size-xxxlarge)}}
 :root{--reactist-badge-font-size:10px;--reactist-badge-info-tint:#666;--reactist-badge-info-fill:#eee;--reactist-badge-positive-tint:#058527;--reactist-badge-positive-fill:#e0f0e3;--reactist-badge-promote-tint:#8f4700;--reactist-badge-promote-fill:#faead1;--reactist-badge-attention-tint:#cf473a;--reactist-badge-attention-fill:#f9e3e2;--reactist-badge-warning-tint:#fff;--reactist-badge-warning-fill:#eb8909}._2714fc40{font-family:var(--reactist-font-family);font-weight:var(--reactist-font-weight-strong);font-size:var(--reactist-badge-font-size);text-transform:uppercase;letter-spacing:.1em;border-radius:3px;padding:1px var(--reactist-spacing-xsmall);background-color:var(--reactist-badge-fill);line-height:calc(var(--reactist-badge-font-size) + 3px);white-space:nowrap}._2714fc40,._2714fc40:hover{color:var(--reactist-badge-tint);text-decoration:none}._3397e001{--reactist-badge-tint:var(--reactist-badge-info-tint);--reactist-badge-fill:var(--reactist-badge-info-fill)}.b7b8944a{--reactist-badge-tint:var(--reactist-badge-positive-tint);--reactist-badge-fill:var(--reactist-badge-positive-fill)}.bfc2b0e9{--reactist-badge-tint:var(--reactist-badge-promote-tint);--reactist-badge-fill:var(--reactist-badge-promote-fill)}.d45e594f{--reactist-badge-tint:var(--reactist-badge-attention-tint);--reactist-badge-fill:var(--reactist-badge-attention-fill)}._1e30e9b3{--reactist-badge-tint:var(--reactist-badge-warning-tint);--reactist-badge-fill:var(--reactist-badge-warning-fill)}
 @-webkit-keyframes _21966801{0%{opacity:0}to{opacity:1}}@keyframes _21966801{0%{opacity:0}to{opacity:1}}:root{--reactist-modal-overlay-fill:rgba(0,0,0,0.5);--reactist-modal-padding-top:13vh}._756b318e{isolation:isolate;position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--reactist-modal-overlay-fill);-webkit-animation:_21966801 .2s;animation:_21966801 .2s;-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);transition:background-color .5s;display:flex;align-items:center;justify-content:center;z-index:var(--reactist-stacking-order-modal)}._756b318e>[data-focus-lock-disabled]{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;box-sizing:border-box;padding:var(--reactist-spacing-xxlarge)}._756b318e._52bde55e>[data-focus-lock-disabled]{padding-top:var(--reactist-modal-padding-top)}._756b318e._52bde55e>[data-focus-lock-disabled] ._46152754{max-height:calc(100vh - 2*var(--reactist-modal-padding-top))}._46152754{box-shadow:0 2px 8px 0 rgba(0,0,0,.16);transition:width .2s ease-in-out,box-shadow .5s;max-width:100%}.bf469f5d ._46152754{width:100%}._3208ba07 ._46152754{width:768px}._29f86ad4 ._46152754{width:580px}._64c0762d ._46152754{width:480px}._3196b4d0 ._46152754{width:448px}@media (min-width:992px){._3517025e ._46152754{width:960px}}@media (min-width:1200px){._3517025e ._46152754{width:1060px}}@media (max-width:1000px){._3517025e ._46152754{width:768px}}@media (max-width:580px){._756b318e:not(._3196b4d0):not(._64c0762d) ._46152754{width:100%!important;max-height:none}._756b318e._8d20cc11:not(._3196b4d0):not(._64c0762d)>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._756b318e._8d20cc11:not(._3196b4d0):not(._64c0762d) ._46152754{border-bottom-left-radius:0;border-bottom-right-radius:0}}@media (max-width:400px){._46152754{width:100%!important;max-height:none}._756b318e._8d20cc11>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._756b318e._8d20cc11 ._46152754{border-bottom-left-radius:0;border-bottom-right-radius:0}}._37ed43a6{display:flex;align-items:center;height:32px}._7df92d5c{min-height:32px}
-:root{--reactist-tab-themed-selected-tint:#006f85;--reactist-tab-themed-selected-fill:var(--reactist-bg-default);--reactist-tab-themed-unselected-tint:#006f85;--reactist-tab-themed-unselected-fill:transparent;--reactist-tab-themed-hover-tint:#006f85;--reactist-tab-themed-hover-fill:transparent;--reactist-tab-themed-disabled-tint:#006f85;--reactist-tab-themed-disabled-fill:transparent;--reactist-tab-themed-track:#f2f6f7;--reactist-tab-themed-border:var(--reactist-divider-secondary);--reactist-tab-themed-shadow:none;--reactist-tab-neutral-selected-tint:var(--reactist-content-primary);--reactist-tab-neutral-selected-fill:var(--reactist-bg-default);--reactist-tab-neutral-unselected-tint:var(--reactist-content-tertiary);--reactist-tab-neutral-unselected-fill:transparent;--reactist-tab-neutral-hover-tint:var(--reactist-content-tertiary);--reactist-tab-neutral-hover-fill:transparent;--reactist-tab-neutral-disabled-tint:var(--reactist-content-tertiary);--reactist-tab-neutral-disabled-fill:transparent;--reactist-tab-neutral-track:var(--reactist-framework-fill-selected);--reactist-tab-neutral-border:var(--reactist-divider-primary);--reactist-tab-neutral-shadow:none;--reactist-tab-track-border-radius:20px;--reactist-tab-track-border-width:2px;--reactist-tab-selected-transition:none;--reactist-tab-border-radius:20px;--reactist-tab-border-width:1px;--reactist-tab-padding-x:var(--reactist-spacing-medium);--reactist-tab-padding-y:var(--reactist-spacing-small);--reactist-tab-line-height:21px}._9f64e89a{box-sizing:border-box;padding:var(--reactist-tab-padding-y) var(--reactist-tab-padding-x);border:none;background:none;cursor:pointer;font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-medium);line-height:var(--reactist-tab-line-height);z-index:1;text-decoration:none;border:var(--reactist-tab-border-width) solid transparent;border-radius:var(--reactist-tab-border-radius)}._49fe8e5a ._9f64e89a{flex:1}._1f449e3a{top:calc(-1*var(--reactist-tab-track-border-width));right:calc(-1*var(--reactist-tab-track-border-width));bottom:calc(-1*var(--reactist-tab-track-border-width));left:calc(-1*var(--reactist-tab-track-border-width));border-radius:var(--reactist-tab-track-border-radius);border-width:var(--reactist-tab-track-border-width);border-style:solid}.a8ac92b1,._1f449e3a{position:absolute}.a8ac92b1{z-index:0;top:0;height:100%;border:var(--reactist-tab-border-width) solid transparent;border-radius:var(--reactist-tab-border-radius);transition:var(--reactist-tab-selected-transition)}._9f64e89a,._6c6b8a2b{background-color:var(--reactist-tab-neutral-unselected-fill);color:var(--reactist-tab-neutral-unselected-tint)}._6c6b8a2b[aria-selected=true],._9f64e89a[aria-selected=true]{color:var(--reactist-tab-neutral-selected-tint)}._6c6b8a2b[aria-selected=false]:hover,._9f64e89a[aria-selected=false]:hover{background-color:var(--reactist-tab-neutral-hover-fill);color:var(--reactist-tab-neutral-hover-tint)}._6c6b8a2b[aria-disabled=true],._9f64e89a[aria-disabled=true]{background-color:var(--reactist-tab-neutral-disabled-fill);color:var(--reactist-tab-neutral-disabled-tint);cursor:not-allowed}._0eddd76d{background-color:var(--reactist-tab-themed-unselected-fill);color:var(--reactist-tab-themed-unselected-tint)}._0eddd76d[aria-selected=true]{color:var(--reactist-tab-themed-selected-tint)}._0eddd76d[aria-selected=false]:hover{background-color:var(--reactist-tab-themed-hover-fill);color:var(--reactist-tab-themed-hover-tint)}._0eddd76d[aria-disabled=true]{background-color:var(--reactist-tab-themed-disabled-fill);color:var(--reactist-tab-themed-disabled-tint)}._1f449e3a,.be66f12e{background:var(--reactist-tab-neutral-track);border-color:var(--reactist-tab-neutral-track)}.d21ccd50{background:var(--reactist-tab-themed-track);border-color:var(--reactist-tab-themed-track)}.a8ac92b1,._33211e81{background-color:var(--reactist-tab-neutral-selected-fill);border-color:var(--reactist-tab-neutral-border);box-shadow:var(--reactist-tab-neutral-shadow)}._4d1cbd10{background-color:var(--reactist-tab-themed-selected-fill);border-color:var(--reactist-tab-themed-border);box-shadow:var(--reactist-tab-themed-shadow)}
+:root{--reactist-tab-themed-selected-tint:#006f85;--reactist-tab-themed-selected-fill:var(--reactist-bg-default);--reactist-tab-themed-unselected-tint:#006f85;--reactist-tab-themed-unselected-fill:transparent;--reactist-tab-themed-hover-tint:#006f85;--reactist-tab-themed-hover-fill:transparent;--reactist-tab-themed-disabled-tint:#006f85;--reactist-tab-themed-disabled-fill:transparent;--reactist-tab-themed-track:#f2f6f7;--reactist-tab-themed-border:var(--reactist-divider-secondary);--reactist-tab-themed-shadow:none;--reactist-tab-neutral-selected-tint:var(--reactist-content-primary);--reactist-tab-neutral-selected-fill:var(--reactist-bg-default);--reactist-tab-neutral-unselected-tint:var(--reactist-content-tertiary);--reactist-tab-neutral-unselected-fill:transparent;--reactist-tab-neutral-hover-tint:var(--reactist-content-tertiary);--reactist-tab-neutral-hover-fill:transparent;--reactist-tab-neutral-disabled-tint:var(--reactist-content-tertiary);--reactist-tab-neutral-disabled-fill:transparent;--reactist-tab-neutral-track:var(--reactist-framework-fill-selected);--reactist-tab-neutral-border:var(--reactist-divider-primary);--reactist-tab-neutral-shadow:none;--reactist-tab-track-border-radius:20px;--reactist-tab-track-border-width:2px;--reactist-tab-selected-transition:none;--reactist-tab-border-radius:20px;--reactist-tab-border-width:1px;--reactist-tab-padding-x:var(--reactist-spacing-medium);--reactist-tab-padding-y:var(--reactist-spacing-small);--reactist-tab-font-size:var(--reactist-font-size-body);--reactist-tab-font-weight:var(--reactist-font-weight-medium);--reactist-tab-line-height:21px}._33c9c271{box-sizing:border-box;padding:var(--reactist-tab-padding-y) var(--reactist-tab-padding-x);border:none;background:none;cursor:pointer;font-size:var(--reactist-tab-font-size);font-weight:var(--reactist-tab-font-weight);line-height:var(--reactist-tab-line-height);z-index:1;text-decoration:none;border:var(--reactist-tab-border-width) solid transparent;border-radius:var(--reactist-tab-border-radius)}._479349aa ._33c9c271{flex:1}._2862a4ba{top:calc(-1*var(--reactist-tab-track-border-width));right:calc(-1*var(--reactist-tab-track-border-width));bottom:calc(-1*var(--reactist-tab-track-border-width));left:calc(-1*var(--reactist-tab-track-border-width));border-radius:var(--reactist-tab-track-border-radius);border-width:var(--reactist-tab-track-border-width);border-style:solid}._1161c811,._2862a4ba{position:absolute}._1161c811{z-index:0;top:0;height:100%;border:var(--reactist-tab-border-width) solid transparent;border-radius:var(--reactist-tab-border-radius);transition:var(--reactist-tab-selected-transition)}._33c9c271,._9502e79a{background-color:var(--reactist-tab-neutral-unselected-fill);color:var(--reactist-tab-neutral-unselected-tint)}._9502e79a[aria-selected=true],._33c9c271[aria-selected=true]{color:var(--reactist-tab-neutral-selected-tint)}._9502e79a[aria-disabled=true],._33c9c271[aria-disabled=true]{background-color:var(--reactist-tab-neutral-disabled-fill);color:var(--reactist-tab-neutral-disabled-tint);cursor:not-allowed}._9502e79a[aria-selected=false]:not([aria-disabled=true]):hover,._33c9c271[aria-selected=false]:not([aria-disabled=true]):hover{background-color:var(--reactist-tab-neutral-hover-fill);color:var(--reactist-tab-neutral-hover-tint)}.c39f1053{background-color:var(--reactist-tab-themed-unselected-fill);color:var(--reactist-tab-themed-unselected-tint)}.c39f1053[aria-selected=true]{color:var(--reactist-tab-themed-selected-tint)}.c39f1053[aria-disabled=true]{background-color:var(--reactist-tab-themed-disabled-fill);color:var(--reactist-tab-themed-disabled-tint)}.c39f1053[aria-selected=false]:not([aria-disabled=true]):hover{background-color:var(--reactist-tab-themed-hover-fill);color:var(--reactist-tab-themed-hover-tint)}._2862a4ba,.b3554a83{background:var(--reactist-tab-neutral-track);border-color:var(--reactist-tab-neutral-track)}._511b0be0{background:var(--reactist-tab-themed-track);border-color:var(--reactist-tab-themed-track)}._1161c811,.c81dc609{background-color:var(--reactist-tab-neutral-selected-fill);border-color:var(--reactist-tab-neutral-border);box-shadow:var(--reactist-tab-neutral-shadow)}._87552972{background-color:var(--reactist-tab-themed-selected-fill);border-color:var(--reactist-tab-themed-border);box-shadow:var(--reactist-tab-themed-shadow)}
 ._487c82cd{text-overflow:ellipsis;max-width:300px;z-index:var(--reactist-stacking-order-tooltip)}
 .reactist_menulist[role=menu]{min-height:44px;max-height:var(--popover-available-height);overflow:auto;display:block;white-space:nowrap;background:hsla(0,0%,100%,.99);outline:none;font-size:var(--reactist-font-size-copy);padding:4px 0;min-width:180px;border:1px solid var(--reactist-divider-secondary);border-radius:3px;margin:-4px;z-index:var(--reactist-stacking-order-menu)}.reactist_menulist[role=menu] .reactist_menugroup__label,.reactist_menulist[role=menu] [role=menuitem]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-align:left;display:flex;align-items:center;padding:5px 10px;color:inherit;border:none;background-color:transparent;font-family:var(--reactist-font-family);font-size:var(--reactist-font-size-copy)}.reactist_menulist[role=menu] .reactist_menugroup__label{color:var(--reactist-content-secondary);font-size:var(--reactist-font-size-copy)}.reactist_menulist[role=menu] [role=menuitem]{width:100%;box-sizing:border-box}.reactist_menulist[role=menu] [role=menuitem]:focus,.reactist_menulist[role=menu] [role=menuitem]:hover,.reactist_menulist[role=menu] [role=menuitem][aria-expanded=true]{color:var(--reactist-content-primary);background-color:var(--reactist-bg-selected)}.reactist_menulist[role=menu] [role=menuitem]:disabled,.reactist_menulist[role=menu] [role=menuitem][aria-disabled=true]{color:var(--reactist-content-secondary);pointer-events:none}.reactist_menulist[role=menu] a[role=menuitem]{cursor:default;text-decoration:none}.reactist_menulist[role=menu] a[role=menuitem]:hover{text-decoration:none}.reactist_menulist[role=menu] [role=menu]{margin-top:-5px}.reactist_menulist[role=menu] hr{border:none;height:1px;background-color:var(--reactist-bg-selected);margin:4px 0}
 .reactist_color_picker .color_trigger{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:24px;width:24px;border-radius:50%;cursor:pointer;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS4yNSAxMC42NDZsMi42NDYgMi42NDcgMi42NDctMi42NDdhLjUuNSAwIDAxLjcwNy43MDhMMTIuNjA0IDE0YTEgMSAwIDAxLTEuNDE1IDBsLTIuNjQ2LTIuNjQ2YS41LjUgMCAwMS43MDctLjcwOHoiLz48L3N2Zz4=);background-position:50%;background-repeat:no-repeat;background-size:24px}.reactist_color_picker .color_trigger--inner_ring{background-color:rgba(0,0,0,.1);width:14px;height:14px;border-radius:50%;visibility:hidden}.reactist_color_picker .color_trigger:hover .color_trigger--inner_ring{visibility:visible}.reactist_color_picker .color_trigger.small{height:18px;width:18px}.reactist_color_picker .color_trigger.small .color_trigger--inner_ring{width:12px;height:12px}.reactist_color_picker .color_item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;margin:4px;width:32px;height:32px;border-radius:50%;cursor:pointer}.reactist_color_picker .color_item--inner_ring{background-color:transparent;border:2px solid #fff;height:24px;width:24px;border-radius:50%;visibility:hidden}.reactist_color_picker .color_item:hover .color_item--inner_ring{visibility:visible}.reactist_color_picker .color_item.active{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAuOTc0IDE0Ljc3MWw0LjE2LTcuMjA0YS40OTkuNDk5IDAgMTEuODYzLjQ5OWwtNC40NyA3Ljc0NGEuNDk5LjQ5OSAwIDAxLS43MzUuMTQ3LjUwMi41MDIgMCAwMS0uMDYxLS4wNDhsLTMuMzY2LTMuMTRhLjQ5OS40OTkgMCAxMS42OC0uNzI5bDIuOTI5IDIuNzMxeiIvPjwvc3ZnPg==);background-position:50%;background-repeat:no-repeat}.reactist_color_picker .color_options{padding:6px;display:flex;flex-wrap:wrap;width:164px;position:relative}.reactist_color_picker .with_arrow:after,.reactist_color_picker .with_arrow:before{visibility:hidden}

package/styles/tabs.css

@@ -3,4 +3,4 @@
 .c7813d79{margin-top:var(--reactist-spacing-xsmall)}.d3449da6{margin-top:var(--reactist-spacing-small)}._4ea254c1{margin-top:var(--reactist-spacing-medium)}.c0844f64{margin-top:var(--reactist-spacing-large)}._213145b4{margin-top:var(--reactist-spacing-xlarge)}.df61c84c{margin-top:var(--reactist-spacing-xxlarge)}.efe72b13{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}._870c2768{margin-top:calc(var(--reactist-spacing-small)*-1)}._0b927c57{margin-top:calc(var(--reactist-spacing-medium)*-1)}._461db014{margin-top:calc(var(--reactist-spacing-large)*-1)}._2a3a8cb8{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}._9bcda921{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6add01e4{margin-top:var(--reactist-spacing-xsmall)}._735ef86b{margin-top:var(--reactist-spacing-small)}._0477d068{margin-top:var(--reactist-spacing-medium)}._2c90af97{margin-top:var(--reactist-spacing-large)}._63a82db6{margin-top:var(--reactist-spacing-xlarge)}._03cd7726{margin-top:var(--reactist-spacing-xxlarge)}.c986a62a{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.be2bdcdd{margin-top:calc(var(--reactist-spacing-small)*-1)}._47d2686b{margin-top:calc(var(--reactist-spacing-medium)*-1)}._25e5af9d{margin-top:calc(var(--reactist-spacing-large)*-1)}.ee82f441{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.a6f9d404{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._4d8d9a36{margin-top:var(--reactist-spacing-xsmall)}.e813cee7{margin-top:var(--reactist-spacing-small)}._56975b7d{margin-top:var(--reactist-spacing-medium)}._53b367f6{margin-top:var(--reactist-spacing-large)}.d69e7311{margin-top:var(--reactist-spacing-xlarge)}._92f57c7e{margin-top:var(--reactist-spacing-xxlarge)}._96880d3e{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.dc3f3555{margin-top:calc(var(--reactist-spacing-small)*-1)}._86dd06bb{margin-top:calc(var(--reactist-spacing-medium)*-1)}.c93ef12e{margin-top:calc(var(--reactist-spacing-large)*-1)}.bc8fd4a2{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.b12a9124{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}._6016f4fb{margin-right:var(--reactist-spacing-xsmall)}.b85e3dfa{margin-right:var(--reactist-spacing-small)}._297575f4{margin-right:var(--reactist-spacing-medium)}.b401ac6c{margin-right:var(--reactist-spacing-large)}.dc3ec387{margin-right:var(--reactist-spacing-xlarge)}._24694604{margin-right:var(--reactist-spacing-xxlarge)}._8e9bf2ee{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.ae9d1115{margin-right:calc(var(--reactist-spacing-small)*-1)}._14e46fc3{margin-right:calc(var(--reactist-spacing-medium)*-1)}._3370631b{margin-right:calc(var(--reactist-spacing-large)*-1)}._3f0e9b50{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}.bc13e010{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6fa1aae3{margin-right:var(--reactist-spacing-xsmall)}._2976c5cb{margin-right:var(--reactist-spacing-small)}._38d94802{margin-right:var(--reactist-spacing-medium)}.db9569b5{margin-right:var(--reactist-spacing-large)}._4a52f06d{margin-right:var(--reactist-spacing-xlarge)}._8a0f0410{margin-right:var(--reactist-spacing-xxlarge)}.e7d40e9d{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}._680fde91{margin-right:calc(var(--reactist-spacing-small)*-1)}._021010ca{margin-right:calc(var(--reactist-spacing-medium)*-1)}._9e52c87c{margin-right:calc(var(--reactist-spacing-large)*-1)}._4d602613{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._21b1b65a{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._7321bc07{margin-right:var(--reactist-spacing-xsmall)}.fa1721f4{margin-right:var(--reactist-spacing-small)}._3fd7b4b8{margin-right:var(--reactist-spacing-medium)}._4fdc2f74{margin-right:var(--reactist-spacing-large)}.c0254761{margin-right:var(--reactist-spacing-xlarge)}._710a5f09{margin-right:var(--reactist-spacing-xxlarge)}.e08bee7f{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.e5ab73d2{margin-right:calc(var(--reactist-spacing-small)*-1)}._5e731477{margin-right:calc(var(--reactist-spacing-medium)*-1)}._0f57a22e{margin-right:calc(var(--reactist-spacing-large)*-1)}._25f26ed3{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._11a3b4e0{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}._6a4f69f7{margin-bottom:var(--reactist-spacing-xsmall)}.db26b033{margin-bottom:var(--reactist-spacing-small)}.c7313022{margin-bottom:var(--reactist-spacing-medium)}.a5885889{margin-bottom:var(--reactist-spacing-large)}._33dfbd8e{margin-bottom:var(--reactist-spacing-xlarge)}._795ad2de{margin-bottom:var(--reactist-spacing-xxlarge)}.a329dbd3{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._85e739fb{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._681f65ff{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.caf50d8f{margin-bottom:calc(var(--reactist-spacing-large)*-1)}._1e084cbf{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._3dfb1c7e{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){.ef4735be{margin-bottom:var(--reactist-spacing-xsmall)}.de55afba{margin-bottom:var(--reactist-spacing-small)}._0e33ce88{margin-bottom:var(--reactist-spacing-medium)}._8ca391fc{margin-bottom:var(--reactist-spacing-large)}._3a609d23{margin-bottom:var(--reactist-spacing-xlarge)}._3e1177e4{margin-bottom:var(--reactist-spacing-xxlarge)}.d384884d{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._75254cec{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._5d9f127d{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}._835f1089{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.dad52a72{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._8703a4bf{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._90fd20e9{margin-bottom:var(--reactist-spacing-xsmall)}.f3769191{margin-bottom:var(--reactist-spacing-small)}._156410f8{margin-bottom:var(--reactist-spacing-medium)}._7fed74d0{margin-bottom:var(--reactist-spacing-large)}._477dc10e{margin-bottom:var(--reactist-spacing-xlarge)}._85c82d89{margin-bottom:var(--reactist-spacing-xxlarge)}._4f09c1e0{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._9523e048{margin-bottom:calc(var(--reactist-spacing-small)*-1)}.efe10240{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.c43971e6{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.f9b4da15{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}.a10fdf70{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}.f9be90b4{margin-left:var(--reactist-spacing-xsmall)}.f53218d5{margin-left:var(--reactist-spacing-small)}.c4a9b3ab{margin-left:var(--reactist-spacing-medium)}._5755e2c3{margin-left:var(--reactist-spacing-large)}._33fc9354{margin-left:var(--reactist-spacing-xlarge)}._4749a3bf{margin-left:var(--reactist-spacing-xxlarge)}.c76cb3c7{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}._96003c07{margin-left:calc(var(--reactist-spacing-small)*-1)}._09988d07{margin-left:calc(var(--reactist-spacing-medium)*-1)}.b4a486f6{margin-left:calc(var(--reactist-spacing-large)*-1)}.f396e75e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._81d1f26d{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._0a46e8f1{margin-left:var(--reactist-spacing-xsmall)}._57c970af{margin-left:var(--reactist-spacing-small)}._4b6099d3{margin-left:var(--reactist-spacing-medium)}._378fcff5{margin-left:var(--reactist-spacing-large)}.f8785663{margin-left:var(--reactist-spacing-xlarge)}._72f957ee{margin-left:var(--reactist-spacing-xxlarge)}._2288c7e1{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.b27c1c05{margin-left:calc(var(--reactist-spacing-small)*-1)}._702cbb13{margin-left:calc(var(--reactist-spacing-medium)*-1)}._1a2748b4{margin-left:calc(var(--reactist-spacing-large)*-1)}.b8c043a5{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._8dc8ff63{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){.c2af646d{margin-left:var(--reactist-spacing-xsmall)}.c03d07be{margin-left:var(--reactist-spacing-small)}._915fb1d3{margin-left:var(--reactist-spacing-medium)}._64214ee1{margin-left:var(--reactist-spacing-large)}._7be4a22c{margin-left:var(--reactist-spacing-xlarge)}._5ec0a401{margin-left:var(--reactist-spacing-xxlarge)}.ea29f1ee{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.c26652c7{margin-left:calc(var(--reactist-spacing-small)*-1)}.c24f6af9{margin-left:calc(var(--reactist-spacing-medium)*-1)}.c2671f27{margin-left:calc(var(--reactist-spacing-large)*-1)}.cc51a04e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}.fd581f54{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}
 ._68ab48ca{min-width:0}._6fa2b565{min-width:var(--reactist-width-xsmall)}.dd50fabd{min-width:var(--reactist-width-small)}.e7e2c808{min-width:var(--reactist-width-medium)}._6abbe25e{min-width:var(--reactist-width-large)}._54f479ac{min-width:var(--reactist-width-xlarge)}._148492bc{max-width:var(--reactist-width-xsmall)}.bd023b96{max-width:var(--reactist-width-small)}.e102903f{max-width:var(--reactist-width-medium)}._0e8d76d7{max-width:var(--reactist-width-large)}._47a031d0{max-width:var(--reactist-width-xlarge)}.cd4c8183{max-width:100%}._5f5959e8{width:0}._8c75067a{width:100%}._56a651f6{width:auto}._26f87bb8{width:-moz-max-content;width:-webkit-max-content;width:max-content}._07a6ab44{width:-moz-min-content;width:-webkit-min-content;width:min-content}.a87016fa{width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}._1a972e50{width:var(--reactist-width-xsmall)}.c96d8261{width:var(--reactist-width-small)}.f3829d42{width:var(--reactist-width-medium)}._2caef228{width:var(--reactist-width-large)}._069e1491{width:var(--reactist-width-xlarge)}
 ._64ed24f4{gap:0}._2580a74b{gap:var(--reactist-spacing-xsmall)}.c68f8bf6{gap:var(--reactist-spacing-small)}._43e5f8e9{gap:var(--reactist-spacing-medium)}._966b120f{gap:var(--reactist-spacing-large)}.f957894c{gap:var(--reactist-spacing-xlarge)}._8cca104b{gap:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._5797cee2{gap:0}._9015672f{gap:var(--reactist-spacing-xsmall)}._7ec86eec{gap:var(--reactist-spacing-small)}._714d7179{gap:var(--reactist-spacing-medium)}.ae1deb59{gap:var(--reactist-spacing-large)}.e1cfce55{gap:var(--reactist-spacing-xlarge)}._168a8ff8{gap:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._43e2b619{gap:0}._0ea9bf88{gap:var(--reactist-spacing-xsmall)}.d451307a{gap:var(--reactist-spacing-small)}.bf93cf66{gap:var(--reactist-spacing-medium)}._1430cddf{gap:var(--reactist-spacing-large)}.fa00c93e{gap:var(--reactist-spacing-xlarge)}._6f3aee54{gap:var(--reactist-spacing-xxlarge)}}
-:root{--reactist-tab-themed-selected-tint:#006f85;--reactist-tab-themed-selected-fill:var(--reactist-bg-default);--reactist-tab-themed-unselected-tint:#006f85;--reactist-tab-themed-unselected-fill:transparent;--reactist-tab-themed-hover-tint:#006f85;--reactist-tab-themed-hover-fill:transparent;--reactist-tab-themed-disabled-tint:#006f85;--reactist-tab-themed-disabled-fill:transparent;--reactist-tab-themed-track:#f2f6f7;--reactist-tab-themed-border:var(--reactist-divider-secondary);--reactist-tab-themed-shadow:none;--reactist-tab-neutral-selected-tint:var(--reactist-content-primary);--reactist-tab-neutral-selected-fill:var(--reactist-bg-default);--reactist-tab-neutral-unselected-tint:var(--reactist-content-tertiary);--reactist-tab-neutral-unselected-fill:transparent;--reactist-tab-neutral-hover-tint:var(--reactist-content-tertiary);--reactist-tab-neutral-hover-fill:transparent;--reactist-tab-neutral-disabled-tint:var(--reactist-content-tertiary);--reactist-tab-neutral-disabled-fill:transparent;--reactist-tab-neutral-track:var(--reactist-framework-fill-selected);--reactist-tab-neutral-border:var(--reactist-divider-primary);--reactist-tab-neutral-shadow:none;--reactist-tab-track-border-radius:20px;--reactist-tab-track-border-width:2px;--reactist-tab-selected-transition:none;--reactist-tab-border-radius:20px;--reactist-tab-border-width:1px;--reactist-tab-padding-x:var(--reactist-spacing-medium);--reactist-tab-padding-y:var(--reactist-spacing-small);--reactist-tab-line-height:21px}._9f64e89a{box-sizing:border-box;padding:var(--reactist-tab-padding-y) var(--reactist-tab-padding-x);border:none;background:none;cursor:pointer;font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-medium);line-height:var(--reactist-tab-line-height);z-index:1;text-decoration:none;border:var(--reactist-tab-border-width) solid transparent;border-radius:var(--reactist-tab-border-radius)}._49fe8e5a ._9f64e89a{flex:1}._1f449e3a{top:calc(-1*var(--reactist-tab-track-border-width));right:calc(-1*var(--reactist-tab-track-border-width));bottom:calc(-1*var(--reactist-tab-track-border-width));left:calc(-1*var(--reactist-tab-track-border-width));border-radius:var(--reactist-tab-track-border-radius);border-width:var(--reactist-tab-track-border-width);border-style:solid}.a8ac92b1,._1f449e3a{position:absolute}.a8ac92b1{z-index:0;top:0;height:100%;border:var(--reactist-tab-border-width) solid transparent;border-radius:var(--reactist-tab-border-radius);transition:var(--reactist-tab-selected-transition)}._9f64e89a,._6c6b8a2b{background-color:var(--reactist-tab-neutral-unselected-fill);color:var(--reactist-tab-neutral-unselected-tint)}._6c6b8a2b[aria-selected=true],._9f64e89a[aria-selected=true]{color:var(--reactist-tab-neutral-selected-tint)}._6c6b8a2b[aria-selected=false]:hover,._9f64e89a[aria-selected=false]:hover{background-color:var(--reactist-tab-neutral-hover-fill);color:var(--reactist-tab-neutral-hover-tint)}._6c6b8a2b[aria-disabled=true],._9f64e89a[aria-disabled=true]{background-color:var(--reactist-tab-neutral-disabled-fill);color:var(--reactist-tab-neutral-disabled-tint);cursor:not-allowed}._0eddd76d{background-color:var(--reactist-tab-themed-unselected-fill);color:var(--reactist-tab-themed-unselected-tint)}._0eddd76d[aria-selected=true]{color:var(--reactist-tab-themed-selected-tint)}._0eddd76d[aria-selected=false]:hover{background-color:var(--reactist-tab-themed-hover-fill);color:var(--reactist-tab-themed-hover-tint)}._0eddd76d[aria-disabled=true]{background-color:var(--reactist-tab-themed-disabled-fill);color:var(--reactist-tab-themed-disabled-tint)}._1f449e3a,.be66f12e{background:var(--reactist-tab-neutral-track);border-color:var(--reactist-tab-neutral-track)}.d21ccd50{background:var(--reactist-tab-themed-track);border-color:var(--reactist-tab-themed-track)}.a8ac92b1,._33211e81{background-color:var(--reactist-tab-neutral-selected-fill);border-color:var(--reactist-tab-neutral-border);box-shadow:var(--reactist-tab-neutral-shadow)}._4d1cbd10{background-color:var(--reactist-tab-themed-selected-fill);border-color:var(--reactist-tab-themed-border);box-shadow:var(--reactist-tab-themed-shadow)}
+:root{--reactist-tab-themed-selected-tint:#006f85;--reactist-tab-themed-selected-fill:var(--reactist-bg-default);--reactist-tab-themed-unselected-tint:#006f85;--reactist-tab-themed-unselected-fill:transparent;--reactist-tab-themed-hover-tint:#006f85;--reactist-tab-themed-hover-fill:transparent;--reactist-tab-themed-disabled-tint:#006f85;--reactist-tab-themed-disabled-fill:transparent;--reactist-tab-themed-track:#f2f6f7;--reactist-tab-themed-border:var(--reactist-divider-secondary);--reactist-tab-themed-shadow:none;--reactist-tab-neutral-selected-tint:var(--reactist-content-primary);--reactist-tab-neutral-selected-fill:var(--reactist-bg-default);--reactist-tab-neutral-unselected-tint:var(--reactist-content-tertiary);--reactist-tab-neutral-unselected-fill:transparent;--reactist-tab-neutral-hover-tint:var(--reactist-content-tertiary);--reactist-tab-neutral-hover-fill:transparent;--reactist-tab-neutral-disabled-tint:var(--reactist-content-tertiary);--reactist-tab-neutral-disabled-fill:transparent;--reactist-tab-neutral-track:var(--reactist-framework-fill-selected);--reactist-tab-neutral-border:var(--reactist-divider-primary);--reactist-tab-neutral-shadow:none;--reactist-tab-track-border-radius:20px;--reactist-tab-track-border-width:2px;--reactist-tab-selected-transition:none;--reactist-tab-border-radius:20px;--reactist-tab-border-width:1px;--reactist-tab-padding-x:var(--reactist-spacing-medium);--reactist-tab-padding-y:var(--reactist-spacing-small);--reactist-tab-font-size:var(--reactist-font-size-body);--reactist-tab-font-weight:var(--reactist-font-weight-medium);--reactist-tab-line-height:21px}._33c9c271{box-sizing:border-box;padding:var(--reactist-tab-padding-y) var(--reactist-tab-padding-x);border:none;background:none;cursor:pointer;font-size:var(--reactist-tab-font-size);font-weight:var(--reactist-tab-font-weight);line-height:var(--reactist-tab-line-height);z-index:1;text-decoration:none;border:var(--reactist-tab-border-width) solid transparent;border-radius:var(--reactist-tab-border-radius)}._479349aa ._33c9c271{flex:1}._2862a4ba{top:calc(-1*var(--reactist-tab-track-border-width));right:calc(-1*var(--reactist-tab-track-border-width));bottom:calc(-1*var(--reactist-tab-track-border-width));left:calc(-1*var(--reactist-tab-track-border-width));border-radius:var(--reactist-tab-track-border-radius);border-width:var(--reactist-tab-track-border-width);border-style:solid}._1161c811,._2862a4ba{position:absolute}._1161c811{z-index:0;top:0;height:100%;border:var(--reactist-tab-border-width) solid transparent;border-radius:var(--reactist-tab-border-radius);transition:var(--reactist-tab-selected-transition)}._33c9c271,._9502e79a{background-color:var(--reactist-tab-neutral-unselected-fill);color:var(--reactist-tab-neutral-unselected-tint)}._9502e79a[aria-selected=true],._33c9c271[aria-selected=true]{color:var(--reactist-tab-neutral-selected-tint)}._9502e79a[aria-disabled=true],._33c9c271[aria-disabled=true]{background-color:var(--reactist-tab-neutral-disabled-fill);color:var(--reactist-tab-neutral-disabled-tint);cursor:not-allowed}._9502e79a[aria-selected=false]:not([aria-disabled=true]):hover,._33c9c271[aria-selected=false]:not([aria-disabled=true]):hover{background-color:var(--reactist-tab-neutral-hover-fill);color:var(--reactist-tab-neutral-hover-tint)}.c39f1053{background-color:var(--reactist-tab-themed-unselected-fill);color:var(--reactist-tab-themed-unselected-tint)}.c39f1053[aria-selected=true]{color:var(--reactist-tab-themed-selected-tint)}.c39f1053[aria-disabled=true]{background-color:var(--reactist-tab-themed-disabled-fill);color:var(--reactist-tab-themed-disabled-tint)}.c39f1053[aria-selected=false]:not([aria-disabled=true]):hover{background-color:var(--reactist-tab-themed-hover-fill);color:var(--reactist-tab-themed-hover-tint)}._2862a4ba,.b3554a83{background:var(--reactist-tab-neutral-track);border-color:var(--reactist-tab-neutral-track)}._511b0be0{background:var(--reactist-tab-themed-track);border-color:var(--reactist-tab-themed-track)}._1161c811,.c81dc609{background-color:var(--reactist-tab-neutral-selected-fill);border-color:var(--reactist-tab-neutral-border);box-shadow:var(--reactist-tab-neutral-shadow)}._87552972{background-color:var(--reactist-tab-themed-selected-fill);border-color:var(--reactist-tab-themed-border);box-shadow:var(--reactist-tab-themed-shadow)}

package/styles/tabs.module.css.css

@@ -1 +1 @@
-:root{--reactist-tab-themed-selected-tint:#006f85;--reactist-tab-themed-selected-fill:var(--reactist-bg-default);--reactist-tab-themed-unselected-tint:#006f85;--reactist-tab-themed-unselected-fill:transparent;--reactist-tab-themed-hover-tint:#006f85;--reactist-tab-themed-hover-fill:transparent;--reactist-tab-themed-disabled-tint:#006f85;--reactist-tab-themed-disabled-fill:transparent;--reactist-tab-themed-track:#f2f6f7;--reactist-tab-themed-border:var(--reactist-divider-secondary);--reactist-tab-themed-shadow:none;--reactist-tab-neutral-selected-tint:var(--reactist-content-primary);--reactist-tab-neutral-selected-fill:var(--reactist-bg-default);--reactist-tab-neutral-unselected-tint:var(--reactist-content-tertiary);--reactist-tab-neutral-unselected-fill:transparent;--reactist-tab-neutral-hover-tint:var(--reactist-content-tertiary);--reactist-tab-neutral-hover-fill:transparent;--reactist-tab-neutral-disabled-tint:var(--reactist-content-tertiary);--reactist-tab-neutral-disabled-fill:transparent;--reactist-tab-neutral-track:var(--reactist-framework-fill-selected);--reactist-tab-neutral-border:var(--reactist-divider-primary);--reactist-tab-neutral-shadow:none;--reactist-tab-track-border-radius:20px;--reactist-tab-track-border-width:2px;--reactist-tab-selected-transition:none;--reactist-tab-border-radius:20px;--reactist-tab-border-width:1px;--reactist-tab-padding-x:var(--reactist-spacing-medium);--reactist-tab-padding-y:var(--reactist-spacing-small);--reactist-tab-line-height:21px}._9f64e89a{box-sizing:border-box;padding:var(--reactist-tab-padding-y) var(--reactist-tab-padding-x);border:none;background:none;cursor:pointer;font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-medium);line-height:var(--reactist-tab-line-height);z-index:1;text-decoration:none;border:var(--reactist-tab-border-width) solid transparent;border-radius:var(--reactist-tab-border-radius)}._49fe8e5a ._9f64e89a{flex:1}._1f449e3a{top:calc(-1*var(--reactist-tab-track-border-width));right:calc(-1*var(--reactist-tab-track-border-width));bottom:calc(-1*var(--reactist-tab-track-border-width));left:calc(-1*var(--reactist-tab-track-border-width));border-radius:var(--reactist-tab-track-border-radius);border-width:var(--reactist-tab-track-border-width);border-style:solid}.a8ac92b1,._1f449e3a{position:absolute}.a8ac92b1{z-index:0;top:0;height:100%;border:var(--reactist-tab-border-width) solid transparent;border-radius:var(--reactist-tab-border-radius);transition:var(--reactist-tab-selected-transition)}._9f64e89a,._6c6b8a2b{background-color:var(--reactist-tab-neutral-unselected-fill);color:var(--reactist-tab-neutral-unselected-tint)}._6c6b8a2b[aria-selected=true],._9f64e89a[aria-selected=true]{color:var(--reactist-tab-neutral-selected-tint)}._6c6b8a2b[aria-selected=false]:hover,._9f64e89a[aria-selected=false]:hover{background-color:var(--reactist-tab-neutral-hover-fill);color:var(--reactist-tab-neutral-hover-tint)}._6c6b8a2b[aria-disabled=true],._9f64e89a[aria-disabled=true]{background-color:var(--reactist-tab-neutral-disabled-fill);color:var(--reactist-tab-neutral-disabled-tint);cursor:not-allowed}._0eddd76d{background-color:var(--reactist-tab-themed-unselected-fill);color:var(--reactist-tab-themed-unselected-tint)}._0eddd76d[aria-selected=true]{color:var(--reactist-tab-themed-selected-tint)}._0eddd76d[aria-selected=false]:hover{background-color:var(--reactist-tab-themed-hover-fill);color:var(--reactist-tab-themed-hover-tint)}._0eddd76d[aria-disabled=true]{background-color:var(--reactist-tab-themed-disabled-fill);color:var(--reactist-tab-themed-disabled-tint)}._1f449e3a,.be66f12e{background:var(--reactist-tab-neutral-track);border-color:var(--reactist-tab-neutral-track)}.d21ccd50{background:var(--reactist-tab-themed-track);border-color:var(--reactist-tab-themed-track)}.a8ac92b1,._33211e81{background-color:var(--reactist-tab-neutral-selected-fill);border-color:var(--reactist-tab-neutral-border);box-shadow:var(--reactist-tab-neutral-shadow)}._4d1cbd10{background-color:var(--reactist-tab-themed-selected-fill);border-color:var(--reactist-tab-themed-border);box-shadow:var(--reactist-tab-themed-shadow)}
+:root{--reactist-tab-themed-selected-tint:#006f85;--reactist-tab-themed-selected-fill:var(--reactist-bg-default);--reactist-tab-themed-unselected-tint:#006f85;--reactist-tab-themed-unselected-fill:transparent;--reactist-tab-themed-hover-tint:#006f85;--reactist-tab-themed-hover-fill:transparent;--reactist-tab-themed-disabled-tint:#006f85;--reactist-tab-themed-disabled-fill:transparent;--reactist-tab-themed-track:#f2f6f7;--reactist-tab-themed-border:var(--reactist-divider-secondary);--reactist-tab-themed-shadow:none;--reactist-tab-neutral-selected-tint:var(--reactist-content-primary);--reactist-tab-neutral-selected-fill:var(--reactist-bg-default);--reactist-tab-neutral-unselected-tint:var(--reactist-content-tertiary);--reactist-tab-neutral-unselected-fill:transparent;--reactist-tab-neutral-hover-tint:var(--reactist-content-tertiary);--reactist-tab-neutral-hover-fill:transparent;--reactist-tab-neutral-disabled-tint:var(--reactist-content-tertiary);--reactist-tab-neutral-disabled-fill:transparent;--reactist-tab-neutral-track:var(--reactist-framework-fill-selected);--reactist-tab-neutral-border:var(--reactist-divider-primary);--reactist-tab-neutral-shadow:none;--reactist-tab-track-border-radius:20px;--reactist-tab-track-border-width:2px;--reactist-tab-selected-transition:none;--reactist-tab-border-radius:20px;--reactist-tab-border-width:1px;--reactist-tab-padding-x:var(--reactist-spacing-medium);--reactist-tab-padding-y:var(--reactist-spacing-small);--reactist-tab-font-size:var(--reactist-font-size-body);--reactist-tab-font-weight:var(--reactist-font-weight-medium);--reactist-tab-line-height:21px}._33c9c271{box-sizing:border-box;padding:var(--reactist-tab-padding-y) var(--reactist-tab-padding-x);border:none;background:none;cursor:pointer;font-size:var(--reactist-tab-font-size);font-weight:var(--reactist-tab-font-weight);line-height:var(--reactist-tab-line-height);z-index:1;text-decoration:none;border:var(--reactist-tab-border-width) solid transparent;border-radius:var(--reactist-tab-border-radius)}._479349aa ._33c9c271{flex:1}._2862a4ba{top:calc(-1*var(--reactist-tab-track-border-width));right:calc(-1*var(--reactist-tab-track-border-width));bottom:calc(-1*var(--reactist-tab-track-border-width));left:calc(-1*var(--reactist-tab-track-border-width));border-radius:var(--reactist-tab-track-border-radius);border-width:var(--reactist-tab-track-border-width);border-style:solid}._1161c811,._2862a4ba{position:absolute}._1161c811{z-index:0;top:0;height:100%;border:var(--reactist-tab-border-width) solid transparent;border-radius:var(--reactist-tab-border-radius);transition:var(--reactist-tab-selected-transition)}._33c9c271,._9502e79a{background-color:var(--reactist-tab-neutral-unselected-fill);color:var(--reactist-tab-neutral-unselected-tint)}._9502e79a[aria-selected=true],._33c9c271[aria-selected=true]{color:var(--reactist-tab-neutral-selected-tint)}._9502e79a[aria-disabled=true],._33c9c271[aria-disabled=true]{background-color:var(--reactist-tab-neutral-disabled-fill);color:var(--reactist-tab-neutral-disabled-tint);cursor:not-allowed}._9502e79a[aria-selected=false]:not([aria-disabled=true]):hover,._33c9c271[aria-selected=false]:not([aria-disabled=true]):hover{background-color:var(--reactist-tab-neutral-hover-fill);color:var(--reactist-tab-neutral-hover-tint)}.c39f1053{background-color:var(--reactist-tab-themed-unselected-fill);color:var(--reactist-tab-themed-unselected-tint)}.c39f1053[aria-selected=true]{color:var(--reactist-tab-themed-selected-tint)}.c39f1053[aria-disabled=true]{background-color:var(--reactist-tab-themed-disabled-fill);color:var(--reactist-tab-themed-disabled-tint)}.c39f1053[aria-selected=false]:not([aria-disabled=true]):hover{background-color:var(--reactist-tab-themed-hover-fill);color:var(--reactist-tab-themed-hover-tint)}._2862a4ba,.b3554a83{background:var(--reactist-tab-neutral-track);border-color:var(--reactist-tab-neutral-track)}._511b0be0{background:var(--reactist-tab-themed-track);border-color:var(--reactist-tab-themed-track)}._1161c811,.c81dc609{background-color:var(--reactist-tab-neutral-selected-fill);border-color:var(--reactist-tab-neutral-border);box-shadow:var(--reactist-tab-neutral-shadow)}._87552972{background-color:var(--reactist-tab-themed-selected-fill);border-color:var(--reactist-tab-themed-border);box-shadow:var(--reactist-tab-themed-shadow)}