@doist/reactist 27.5.0 → 28.0.0

package/es/tabs/tabs.js

@@ -2,11 +2,11 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import * as React from 'react';
 import classNames from 'classnames';
 import { useTabStore, Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1 } from '@ariakit/react';
+import { Box } from '../box/box.js';
 import { Inline } from '../inline/inline.js';
 import modules_40c67f5b from './tabs.module.css.js';
-import { Box } from '../box/box.js';
 
-const _excluded = ["children", "space"],
+const _excluded = ["children", "space", "width", "align", "exceptionallySetClassName"],
       _excluded2 = ["children", "id", "renderMode"];
 const TabsContext = /*#__PURE__*/React.createContext(null);
 /**
@@ -47,6 +47,7 @@ function Tabs({
 const Tab = /*#__PURE__*/React.forwardRef(function Tab({
   children,
   id,
+  disabled,
   exceptionallySetClassName,
   render,
   onClick
@@ -61,6 +62,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab({
   return /*#__PURE__*/React.createElement(Tab$1, {
     id: id,
     ref: ref,
+    disabled: disabled,
     store: tabStore,
     render: render,
     className: className,
@@ -74,11 +76,42 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab({
 function TabList(_ref2) {
   let {
     children,
-    space
+    space,
+    width = 'maxContent',
+    align = 'start',
+    exceptionallySetClassName
   } = _ref2,
       props = _objectWithoutProperties(_ref2, _excluded);
 
   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 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"
+        });
+      }
+    }
+
+    updateSelectedTabStyle();
+    window.addEventListener('resize', updateSelectedTabStyle);
+    return function cleanupEventListener() {
+      window.removeEventListener('resize', updateSelectedTabStyle);
+    };
+  }, [selectedId]);
 
   if (!tabContextValue) {
     return null;
@@ -88,20 +121,35 @@ function TabList(_ref2) {
     tabStore,
     variant
   } = tabContextValue;
+  const justifyContentAlignMap = {
+    start: 'flexStart',
+    end: 'flexEnd',
+    center: 'center'
+  };
   return (
     /*#__PURE__*/
-    // The extra <div> prevents <Inline>'s negative margins from collapsing when used in a flex container
-    // which will render the track with the wrong height
-    React.createElement("div", null, /*#__PURE__*/React.createElement(TabList$1, _objectSpread2({
+    // This extra <Box> not only provides alignment for the tabs, but also prevents <Inline>'s
+    // negative margins from collapsing when used in a flex container which will render the
+    // track with the wrong height
+    React.createElement(Box, {
+      display: "flex",
+      justifyContent: width === 'full' ? 'center' : justifyContentAlignMap[align]
+    }, /*#__PURE__*/React.createElement(TabList$1, _objectSpread2({
       store: tabStore,
       render: /*#__PURE__*/React.createElement(Box, {
         position: "relative",
-        width: "maxContent"
-      })
+        width: width,
+        className: exceptionallySetClassName
+      }),
+      ref: tabListRef
     }, props), /*#__PURE__*/React.createElement(Box, {
       className: [modules_40c67f5b.track, modules_40c67f5b["track-" + variant]]
-    }), /*#__PURE__*/React.createElement(Inline, {
-      space: space
+    }), selectedTabElement ? /*#__PURE__*/React.createElement(Box, {
+      className: [modules_40c67f5b.selected, modules_40c67f5b["selected-" + variant]],
+      style: selectedTabStyle
+    }) : null, /*#__PURE__*/React.createElement(Inline, {
+      space: space,
+      exceptionallySetClassName: classNames(width === 'full' ? modules_40c67f5b.fullTabList : null)
     }, children)))
   );
 }

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 { Inline } from '../inline'\nimport type { ObfuscatedClassName, Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\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/**\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, 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            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/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({ children, space, ...props }: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabStore, variant } = tabContextValue\n\n    return (\n        // The extra <div> prevents <Inline>'s negative margins from collapsing when used in a flex container\n        // which will render the track with the wrong height\n        <div>\n            <BaseTabList\n                store={tabStore}\n                render={<Box position=\"relative\" width=\"maxContent\" />}\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                <Inline space={space}>{children}</Inline>\n            </BaseTabList>\n        </div>\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","exceptionallySetClassName","render","onClick","ref","tabContextValue","useContext","className","classNames","styles","tab","BaseTab","store","TabList","space","props","BaseTabList","_objectSpread","Box","position","width","track","Inline","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 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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"}

package/es/tabs/tabs.module.css.js

@@ -1,4 +1,4 @@
-var modules_40c67f5b = {"tab":"faa5b46e","track":"_93de0ded","tab-neutral":"_82a91995","tab-themed":"f150e9da","track-neutral":"_10f229b4","track-themed":"_54f03992"};
+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"};
 
 export { modules_40c67f5b as default };
 //# sourceMappingURL=tabs.module.css.js.map

package/es/text-area/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ninterface TextAreaProps\n    extends FieldComponentProps<HTMLTextAreaElement>,\n        Omit<BaseFieldVariantProps, 'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition'> {\n    /**\n     * The number of visible text lines for the text area.\n     *\n     * If it is specified, it must be a positive integer. If it is not specified, the default\n     * value is 2 (set by the browser).\n     *\n     * When `autoExpand` is true, this value serves the purpose of specifying the minimum number\n     * of rows that the textarea will shrink to when the content is not large enough to make it\n     * expand.\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n     */\n    rows?: number\n\n    /**\n     * If `true`, the textarea will be automatically resized to fit the content, and the ability to\n     * manually resize the textarea will be disabled.\n     */\n    autoExpand?: boolean\n\n    /**\n     * If `true`, the ability to manually resize the textarea will be disabled.\n     *\n     * When `autoExpand` is true, this property serves no purpose, because the ability to manually\n     * resize the textarea is always disabled when `autoExpand` is true.\n     */\n    disableResize?: boolean\n}\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\n        disableResize = false,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    const textAreaClassName = classNames([\n        autoExpand ? styles.disableResize : null,\n        disableResize ? styles.disableResize : null,\n    ])\n\n    React.useEffect(\n        function setupAutoExpand() {\n            const containerElement = containerRef.current\n\n            function handleAutoExpand(value: string) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = value\n                }\n            }\n\n            function handleInput(event: Event) {\n                handleAutoExpand((event.currentTarget as HTMLTextAreaElement).value)\n            }\n\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand) {\n                return undefined\n            }\n\n            // Apply change initially, in case the text area has a non-empty initial value\n            handleAutoExpand(textAreaElement.value)\n\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand],\n    )\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n            maxLength={maxLength}\n        >\n            {({ onChange, ...extraProps }) => (\n                <Box\n                    width=\"full\"\n                    display=\"flex\"\n                    className={styles.innerContainer}\n                    ref={containerRef}\n                >\n                    <textarea\n                        {...props}\n                        {...extraProps}\n                        ref={combinedRef}\n                        rows={rows}\n                        className={textAreaClassName}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["TextArea","React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","ariaDescribedBy","rows","autoExpand","disableResize","onChange","originalOnChange","props","containerRef","useRef","internalRef","combinedRef","useMergeRefs","textAreaClassName","classNames","styles","useEffect","setupAutoExpand","containerElement","current","handleAutoExpand","dataset","replicatedValue","handleInput","event","currentTarget","textAreaElement","undefined","addEventListener","removeEventListener","createElement","BaseField","className","textAreaContainer","error","bordered","extraProps","Box","width","display","innerContainer","_objectSpread"],"mappings":"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"}
+{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ninterface TextAreaProps\n    extends Omit<FieldComponentProps<HTMLTextAreaElement>, 'characterCountPosition'>,\n        Omit<BaseFieldVariantProps, 'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition'> {\n    /**\n     * The number of visible text lines for the text area.\n     *\n     * If it is specified, it must be a positive integer. If it is not specified, the default\n     * value is 2 (set by the browser).\n     *\n     * When `autoExpand` is true, this value serves the purpose of specifying the minimum number\n     * of rows that the textarea will shrink to when the content is not large enough to make it\n     * expand.\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n     */\n    rows?: number\n\n    /**\n     * If `true`, the textarea will be automatically resized to fit the content, and the ability to\n     * manually resize the textarea will be disabled.\n     */\n    autoExpand?: boolean\n\n    /**\n     * If `true`, the ability to manually resize the textarea will be disabled.\n     *\n     * When `autoExpand` is true, this property serves no purpose, because the ability to manually\n     * resize the textarea is always disabled when `autoExpand` is true.\n     */\n    disableResize?: boolean\n}\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\n        disableResize = false,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    const textAreaClassName = classNames([\n        autoExpand ? styles.disableResize : null,\n        disableResize ? styles.disableResize : null,\n    ])\n\n    React.useEffect(\n        function setupAutoExpand() {\n            const containerElement = containerRef.current\n\n            function handleAutoExpand(value: string) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = value\n                }\n            }\n\n            function handleInput(event: Event) {\n                handleAutoExpand((event.currentTarget as HTMLTextAreaElement).value)\n            }\n\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand) {\n                return undefined\n            }\n\n            // Apply change initially, in case the text area has a non-empty initial value\n            handleAutoExpand(textAreaElement.value)\n\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand],\n    )\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n            maxLength={maxLength}\n        >\n            {({ onChange, ...extraProps }) => (\n                <Box\n                    width=\"full\"\n                    display=\"flex\"\n                    className={styles.innerContainer}\n                    ref={containerRef}\n                >\n                    <textarea\n                        {...props}\n                        {...extraProps}\n                        ref={combinedRef}\n                        rows={rows}\n                        className={textAreaClassName}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["TextArea","React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","ariaDescribedBy","rows","autoExpand","disableResize","onChange","originalOnChange","props","containerRef","useRef","internalRef","combinedRef","useMergeRefs","textAreaClassName","classNames","styles","useEffect","setupAutoExpand","containerElement","current","handleAutoExpand","dataset","replicatedValue","handleInput","event","currentTarget","textAreaElement","undefined","addEventListener","removeEventListener","createElement","BaseField","className","textAreaContainer","error","bordered","extraProps","Box","width","display","innerContainer","_objectSpread"],"mappings":";;;;;;;;;;AAuCMA,MAAAA,QAAQ,gBAAGC,KAAK,CAACC,UAAN,CAAqD,SAASF,QAAT,CAmBlEG,IAAAA,EAAAA,GAnBkE,EAmB/D;EAAA,IAlBH;AACIC,IAAAA,OAAO,GAAG,SADd;IAEIC,EAFJ;IAGIC,KAHJ;IAIIC,KAJJ;IAKIC,cALJ;IAMIC,OANJ;IAOIC,IAPJ;IAQIC,QARJ;IASIC,SATJ;IAUIC,MAVJ;AAWI,IAAA,kBAAA,EAAoBC,eAXxB;IAYIC,IAZJ;AAaIC,IAAAA,UAAU,GAAG,KAbjB;AAcIC,IAAAA,aAAa,GAAG,KAdpB;AAeIC,IAAAA,QAAQ,EAAEC,gBAAAA;GAGX,GAAA,IAAA;AAAA,MAFIC,KAEJ,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;AAEH,EAAA,MAAMC,YAAY,GAAGpB,KAAK,CAACqB,MAAN,CAA6B,IAA7B,CAArB,CAAA;AACA,EAAA,MAAMC,WAAW,GAAGtB,KAAK,CAACqB,MAAN,CAAkC,IAAlC,CAApB,CAAA;EACA,MAAME,WAAW,GAAGC,YAAY,CAAC,CAACtB,GAAD,EAAMoB,WAAN,CAAD,CAAhC,CAAA;EAEA,MAAMG,iBAAiB,GAAGC,UAAU,CAAC,CACjCX,UAAU,GAAGY,gBAAM,CAACX,aAAV,GAA0B,IADH,EAEjCA,aAAa,GAAGW,gBAAM,CAACX,aAAV,GAA0B,IAFN,CAAD,CAApC,CAAA;AAKAhB,EAAAA,KAAK,CAAC4B,SAAN,CACI,SAASC,eAAT,GAAwB;AACpB,IAAA,MAAMC,gBAAgB,GAAGV,YAAY,CAACW,OAAtC,CAAA;;IAEA,SAASC,gBAAT,CAA0B1B,KAA1B,EAAuC;AACnC,MAAA,IAAIwB,gBAAJ,EAAsB;AAClBA,QAAAA,gBAAgB,CAACG,OAAjB,CAAyBC,eAAzB,GAA2C5B,KAA3C,CAAA;AACH,OAAA;AACJ,KAAA;;IAED,SAAS6B,WAAT,CAAqBC,KAArB,EAAiC;AAC7BJ,MAAAA,gBAAgB,CAAEI,KAAK,CAACC,aAAN,CAA4C/B,KAA9C,CAAhB,CAAA;AACH,KAAA;;AAED,IAAA,MAAMgC,eAAe,GAAGhB,WAAW,CAACS,OAApC,CAAA;;AACA,IAAA,IAAI,CAACO,eAAD,IAAoB,CAACvB,UAAzB,EAAqC;AACjC,MAAA,OAAOwB,SAAP,CAAA;AACH,KAhBmB;;;AAmBpBP,IAAAA,gBAAgB,CAACM,eAAe,CAAChC,KAAjB,CAAhB,CAAA;AAEAgC,IAAAA,eAAe,CAACE,gBAAhB,CAAiC,OAAjC,EAA0CL,WAA1C,CAAA,CAAA;IACA,OAAO,MAAMG,eAAe,CAACG,mBAAhB,CAAoC,OAApC,EAA6CN,WAA7C,CAAb,CAAA;GAvBR,EAyBI,CAACpB,UAAD,CAzBJ,CAAA,CAAA;AA4BA,EAAA,oBACIf,KAAC,CAAA0C,aAAD,CAACC,SAAD,EACI;AAAAxC,IAAAA,OAAO,EAAEA,OAAT;AACAC,IAAAA,EAAE,EAAEA,EADJ;AAEAC,IAAAA,KAAK,EAAEA,KAFP;AAGAC,IAAAA,KAAK,EAAEA,KAHP;AAIAC,IAAAA,cAAc,EAAEA,cAJhB;AAKAC,IAAAA,OAAO,EAAEA,OALT;AAMAC,IAAAA,IAAI,EAAEA,IANN;AAOAG,IAAAA,MAAM,EAAEA,MAPR;wBAQkBC,eARlB;IASA+B,SAAS,EAAE,CACPjB,gBAAM,CAACkB,iBADA,EAEPpC,IAAI,KAAK,OAAT,GAAmBkB,gBAAM,CAACmB,KAA1B,GAAkC,IAF3B,EAGP3C,OAAO,KAAK,UAAZ,GAAyBwB,gBAAM,CAACoB,QAAhC,GAA2C,IAHpC,CATX;AAcArC,IAAAA,QAAQ,EAAEA,QAdV;AAeAC,IAAAA,SAAS,EAAEA,SAAAA;AAfX,GADJ,EAkBK,KAAA,IAAA;IAAA,IAAC;AAAEM,MAAAA,QAAAA;KAAH,GAAA,KAAA;AAAA,QAAgB+B,UAAhB,GAAA,wBAAA,CAAA,KAAA,EAAA,UAAA,CAAA,CAAA;;AAAA,IAAA,oBACGhD,KAAC,CAAA0C,aAAD,CAACO,GAAD;AACIC,MAAAA,KAAK,EAAC;AACNC,MAAAA,OAAO,EAAC;MACRP,SAAS,EAAEjB,gBAAM,CAACyB;AAClBlD,MAAAA,GAAG,EAAEkB,YAAAA;KAJT,eAMIpB,KACQ,CAAA0C,aADR,CACQ,UADR,EAAAW,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAA,EAAA,EACQlC,KADR,CAAA,EAEQ6B,UAFR,CAAA,EAAA,EAAA,EAAA;AAGI9C,MAAAA,GAAG,EAAEqB,WAHT;AAIIT,MAAAA,IAAI,EAAEA,IAJV;AAKI8B,MAAAA,SAAS,EAAEnB,iBALf;AAMId,MAAAA,SAAS,EAAEA,SANf;MAOIM,QAAQ,EAAGmB,KAAD,IAAU;AAChBlB,QAAAA,gBAAgB,IAAhB,IAAA,GAAA,KAAA,CAAA,GAAAA,gBAAgB,CAAGkB,KAAH,CAAhB,CAAA;AACAnB,QAAAA,QAAQ,IAAR,IAAA,GAAA,KAAA,CAAA,GAAAA,QAAQ,CAAGmB,KAAH,CAAR,CAAA;AACH,OAAA;AAVL,KAAA,CAAA,CANJ,CADH,CAAA;AAAA,GAlBL,CADJ,CAAA;AA0CH,CApGgB;;;;"}

package/lib/tabs/tabs.d.ts

@@ -38,6 +38,10 @@ interface TabProps extends ObfuscatedClassName, Omit<BaseTabProps, 'store' | 'cl
      * The tab's identifier. This must match its corresponding `<TabPanel>`'s id
      */
     id: string;
+    /**
+     * Defines wether or not the tab is disabled.
+     */
+    disabled?: boolean;
 }
 /**
  * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
@@ -66,11 +70,26 @@ type TabListProps = ({
      * Controls the spacing between tabs
      */
     space?: Space;
-};
+    /**
+     * The width of the tab list.
+     *
+     * - `'maxContent'`: Each tab will be as wide as its content.
+     * - `'full'`: Each tab will be as wide as the tab list.
+     *
+     * @default 'maxContent'
+     */
+    width?: 'maxContent' | 'full';
+    /**
+     * How to align the tabs within the tab list.
+     *
+     * @default 'start'
+     */
+    align?: 'start' | 'center' | 'end';
+} & ObfuscatedClassName;
 /**
  * A component used to group `<Tab>` elements together.
  */
-declare function TabList({ children, space, ...props }: TabListProps): React.ReactElement | null;
+declare function TabList({ children, space, width, align, exceptionallySetClassName, ...props }: TabListProps): React.ReactElement | null;
 interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement>, Pick<BaseTabPanelProps, 'render'> {
     /** The content to be rendered inside the tab */
     children?: React.ReactNode;

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"),n=require("@ariakit/react"),a=require("../inline/inline.js"),l=require("./tabs.module.css.js"),o=require("../box/box.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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 s=c(t),i=u(r);const d=["children","space"],f=["children","id","renderMode"],b=s.createContext(null),p=s.forwardRef((function({children:e,id:t,exceptionallySetClassName:r,render:a,onClick:o},u){const c=s.useContext(b);if(!c)return null;const{variant:d,tabStore:f}=c,p=i.default(r,l.default.tab,l.default["tab-"+d]);return s.createElement(n.Tab,{id:t,ref:u,store:f,render:a,className:p,onClick:o},e)})),S=s.forwardRef((function(t,r){let{children:a,id:l,renderMode:o="always"}=t,u=e.objectWithoutProperties(t,f);const c=s.useContext(b),[i,d]=s.useState(!1),p=(null==c?void 0:c.tabStore.useState("selectedId"))===l;if(s.useEffect((function(){!i&&p&&d(!0)}),[i,p]),!c)return null;const{tabStore:S}=c;return"always"===o||"active"===o&&p||"lazy"===o&&(p||i)?s.createElement(n.TabPanel,e.objectSpread2(e.objectSpread2({},u),{},{tabId:l,store:S,ref:r}),a):null}));exports.Tab=p,exports.TabAwareSlot=function({children:e}){const t=s.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}=t,c=e.objectWithoutProperties(t,d);const i=s.useContext(b);if(!i)return null;const{tabStore:f,variant:p}=i;return s.createElement("div",null,s.createElement(n.TabList,e.objectSpread2({store:f,render:s.createElement(o.Box,{position:"relative",width:"maxContent"})},c),s.createElement(o.Box,{className:[l.default.track,l.default["track-"+p]]}),s.createElement(a.Inline,{space:u},r)))},exports.TabPanel=S,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:r,variant:a="neutral",onSelectedIdChange:l}){const o=n.useTabStore({defaultSelectedId:r,selectedId:t,setSelectedId:l}),u=o.useState("selectedId"),c=s.useMemo(()=>{var e;return{tabStore:o,variant:a,selectedId:null!=(e=null!=t?t:u)?e:null}},[a,o,t,u]);return s.createElement(b.Provider,{value:c},e)};
+"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)};
 //# 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 { Inline } from '../inline'\nimport type { ObfuscatedClassName, Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\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/**\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, 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            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/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({ children, space, ...props }: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabStore, variant } = tabContextValue\n\n    return (\n        // The extra <div> prevents <Inline>'s negative margins from collapsing when used in a flex container\n        // which will render the track with the wrong height\n        <div>\n            <BaseTabList\n                store={tabStore}\n                render={<Box position=\"relative\" width=\"maxContent\" />}\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                <Inline space={space}>{children}</Inline>\n            </BaseTabList>\n        </div>\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","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","_excluded","BaseTabList","TabList","_objectSpread","Box","position","width","track","Inline","defaultSelectedId","onSelectedIdChange","useTabStore","setSelectedId","actualSelectedId","memoizedTabState","useMemo","_ref","Provider","value"],"mappings":"2sBAqBMA,EAAcC,EAAMC,cAAuC,MAwE3DC,EAAMF,EAAMG,YAAwC,UACtDC,SAAEA,EAAFC,GAAYA,EAAZC,0BAAgBA,EAAhBC,OAA2CA,EAA3CC,QAAmDA,GACnDC,GAEA,MAAMC,EAAkBV,EAAMW,WAAWZ,GACzC,IAAKW,EAAiB,OAAO,KAE7B,MAAME,QAAEA,EAAFC,SAAWA,GAAaH,EACxBI,EAAYC,UAAWT,EAA2BU,EAAM,QAACC,IAAKD,UAAcJ,OAAAA,IAElF,OACIZ,EAAAkB,cAACC,MAAO,CACJd,GAAIA,EACJI,IAAKA,EACLW,MAAOP,EACPN,OAAQA,EACRO,UAAWA,EACXN,QAASA,GAERJ,MAqFPiB,EAAWrB,EAAMG,YAA0C,SAE7DM,EAAAA,GAAG,IADHL,SAAEA,EAAFC,GAAYA,EAAZiB,WAAgBA,EAAa,UAC1BC,EADuCC,EACvCC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMjB,EAAkBV,EAAMW,WAAWZ,IAClC6B,EAAaC,GAAkB7B,EAAM8B,UAAS,GAE/CC,GADarB,MAAAA,OAAAA,EAAAA,EAAiBG,SAASiB,SAAS,iBACnBzB,EAWnC,GATAL,EAAMgC,WACF,YACSJ,GAAeG,GAChBF,GAAe,KAGvB,CAACD,EAAaG,KAGbrB,EACD,OAAO,KAGX,MAAMG,SAAEA,GAAaH,EAMrB,MAJmB,WAAfY,GACgB,WAAfA,GAA2BS,GACZ,SAAfT,IAA0BS,GAAeH,GAG1C5B,EAAAkB,cAACe,EAADZ,4CAAkBG,GAAlB,GAAA,CAAyBU,MAAO7B,EAAIe,MAAOP,EAAUJ,IAAKA,IACrDL,GAEL,2CAeR,UAAsBA,SAAEA,IACpB,MAAMM,EAAkBV,EAAMW,WAAWZ,GACnCoC,EAAazB,MAAAA,OAAAA,EAAAA,EAAiBG,SAASiB,SAAS,cACtD,OAAOpB,EAAkBN,EAAS,CAAE+B,WAAAA,IAAgB,sBAjGxD,SAA4DC,GAAA,IAA3ChC,SAAEA,EAAFiC,MAAYA,GAA+BD,EAArBZ,EAAqBC,EAAAC,wBAAAU,EAAAE,GACxD,MAAM5B,EAAkBV,EAAMW,WAAWZ,GAEzC,IAAKW,EACD,OAAO,KAGX,MAAMG,SAAEA,EAAFD,QAAYA,GAAYF,EAE9B,OAGIV,EAAAkB,cAAA,MAAA,KACIlB,EAACkB,cAAAqB,EAADC,QAAAC,gBAAA,CACIrB,MAAOP,EACPN,OAAQP,EAACkB,cAAAwB,OAAIC,SAAS,WAAWC,MAAM,gBACnCpB,GAEJxB,EAAAkB,cAACwB,EAAAA,IAAI,CAAA5B,UAAW,CAACE,EAAAA,QAAO6B,MAAO7B,EAAAA,QAAgBJ,SAAAA,MAC/CZ,EAACkB,cAAA4B,SAAO,CAAAT,MAAOA,GAAQjC,sCAlHvC,UAAcA,SACVA,EADU+B,WAEVA,EAFUY,kBAGVA,EAHUnC,QAIVA,EAAU,UAJAoC,mBAKVA,IAEA,MAAMnC,EAAWoC,EAAAA,YAAY,CACzBF,kBAAAA,EACAZ,WAAAA,EACAe,cAAeF,IAEbG,EAAmBtC,EAASiB,SAAS,cAErCsB,EAAmBpD,EAAMqD,QAC3B,KAAA,IAAAC,EAAA,MAAO,CAAEzC,SAAAA,EAAUD,QAAAA,EAASuB,WAA8C,SAApC,MAAEA,EAAAA,EAAcgB,GAAoBG,EAAA,OAC1E,CAAC1C,EAASC,EAAUsB,EAAYgB,IAEpC,OAAOnD,EAAAkB,cAACnB,EAAYwD,SAAQ,CAACC,MAAOJ,GAAmBhD"}
+{"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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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={tab:"faa5b46e",track:"_93de0ded","tab-neutral":"_82a91995","tab-themed":"f150e9da","track-neutral":"_10f229b4","track-themed":"_54f03992"};
+"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"};
 //# sourceMappingURL=tabs.module.css.js.map

package/lib/text-area/text-area.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseFieldVariantProps, FieldComponentProps } from '../base-field';
-interface TextAreaProps extends FieldComponentProps<HTMLTextAreaElement>, Omit<BaseFieldVariantProps, 'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition'> {
+interface TextAreaProps extends Omit<FieldComponentProps<HTMLTextAreaElement>, 'characterCountPosition'>, Omit<BaseFieldVariantProps, 'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition'> {
     /**
      * The number of visible text lines for the text area.
      *

package/lib/text-area/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ninterface TextAreaProps\n    extends FieldComponentProps<HTMLTextAreaElement>,\n        Omit<BaseFieldVariantProps, 'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition'> {\n    /**\n     * The number of visible text lines for the text area.\n     *\n     * If it is specified, it must be a positive integer. If it is not specified, the default\n     * value is 2 (set by the browser).\n     *\n     * When `autoExpand` is true, this value serves the purpose of specifying the minimum number\n     * of rows that the textarea will shrink to when the content is not large enough to make it\n     * expand.\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n     */\n    rows?: number\n\n    /**\n     * If `true`, the textarea will be automatically resized to fit the content, and the ability to\n     * manually resize the textarea will be disabled.\n     */\n    autoExpand?: boolean\n\n    /**\n     * If `true`, the ability to manually resize the textarea will be disabled.\n     *\n     * When `autoExpand` is true, this property serves no purpose, because the ability to manually\n     * resize the textarea is always disabled when `autoExpand` is true.\n     */\n    disableResize?: boolean\n}\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\n        disableResize = false,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    const textAreaClassName = classNames([\n        autoExpand ? styles.disableResize : null,\n        disableResize ? styles.disableResize : null,\n    ])\n\n    React.useEffect(\n        function setupAutoExpand() {\n            const containerElement = containerRef.current\n\n            function handleAutoExpand(value: string) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = value\n                }\n            }\n\n            function handleInput(event: Event) {\n                handleAutoExpand((event.currentTarget as HTMLTextAreaElement).value)\n            }\n\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand) {\n                return undefined\n            }\n\n            // Apply change initially, in case the text area has a non-empty initial value\n            handleAutoExpand(textAreaElement.value)\n\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand],\n    )\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n            maxLength={maxLength}\n        >\n            {({ onChange, ...extraProps }) => (\n                <Box\n                    width=\"full\"\n                    display=\"flex\"\n                    className={styles.innerContainer}\n                    ref={containerRef}\n                >\n                    <textarea\n                        {...props}\n                        {...extraProps}\n                        ref={combinedRef}\n                        rows={rows}\n                        className={textAreaClassName}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","aria-describedby","ariaDescribedBy","rows","autoExpand","disableResize","onChange","originalOnChange","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","containerRef","useRef","internalRef","combinedRef","useMergeRefs","textAreaClassName","classNames","styles","useEffect","containerElement","current","handleAutoExpand","dataset","replicatedValue","handleInput","event","currentTarget","textAreaElement","addEventListener","removeEventListener","createElement","BaseField","className","textAreaContainer","error","bordered","_ref2","extraProps","_excluded2","Box","width","display","innerContainer","_objectSpread","objectSpread2"],"mappings":"y2BAuCiBA,EAAMC,YAA+C,SAmBlEC,EAAAA,GAAG,IAlBHC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,MAIIA,EAJJC,eAKIA,EALJC,QAMIA,EANJC,KAOIA,EAPJC,SAQIA,EARJC,UASIA,EATJC,OAUIA,EACAC,mBAAoBC,EAXxBC,KAYIA,EAZJC,WAaIA,GAAa,EAbjBC,cAcIA,GAAgB,EAChBC,SAAUC,GAGXC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMC,EAAezB,EAAM0B,OAAuB,MAC5CC,EAAc3B,EAAM0B,OAA4B,MAChDE,EAAcC,EAAYA,aAAC,CAAC3B,EAAKyB,IAEjCG,EAAoBC,EAAAA,QAAW,CACjCf,EAAagB,EAAAA,QAAOf,cAAgB,KACpCA,EAAgBe,EAAM,QAACf,cAAgB,OA+B3C,OA5BAjB,EAAMiC,WACF,WACI,MAAMC,EAAmBT,EAAaU,QAEtC,SAASC,EAAiB9B,GAClB4B,IACAA,EAAiBG,QAAQC,gBAAkBhC,GAInD,SAASiC,EAAYC,GACjBJ,EAAkBI,EAAMC,cAAsCnC,OAGlE,MAAMoC,EAAkBf,EAAYQ,QACpC,GAAKO,GAAoB1B,EAQzB,OAHAoB,EAAiBM,EAAgBpC,OAEjCoC,EAAgBC,iBAAiB,QAASJ,GACnC,IAAMG,EAAgBE,oBAAoB,QAASL,KAE9D,CAACvB,IAIDhB,EAAC6C,cAAAC,YACG,CAAA3C,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,MAAOA,EACPC,eAAgBA,EAChBC,QAASA,EACTC,KAAMA,EACNG,OAAQA,qBACUE,EAClBiC,UAAW,CACPf,EAAM,QAACgB,kBACE,UAATvC,EAAmBuB,EAAM,QAACiB,MAAQ,KACtB,aAAZ9C,EAAyB6B,EAAAA,QAAOkB,SAAW,MAE/CxC,SAAUA,EACVC,UAAWA,GAEVwC,IAAA,IAACjC,SAAEA,GAAHiC,EAAgBC,EAAhB9B,EAAAC,wBAAA4B,EAAAE,GAAA,OACGrD,EAAC6C,cAAAS,OACGC,MAAM,OACNC,QAAQ,OACRT,UAAWf,EAAM,QAACyB,eAClBvD,IAAKuB,GAELzB,EACQ6C,cAAA,WADRa,EAAAC,cAAAD,EAAAC,cAAAD,gBAAA,GACQrC,GACA+B,GAFR,GAAA,CAGIlD,IAAK0B,EACLb,KAAMA,EACNgC,UAAWjB,EACXnB,UAAWA,EACXO,SAAWsB,IACP,MAAArB,GAAAA,EAAmBqB,GACnB,MAAAtB,GAAAA,EAAWsB"}
+{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ninterface TextAreaProps\n    extends Omit<FieldComponentProps<HTMLTextAreaElement>, 'characterCountPosition'>,\n        Omit<BaseFieldVariantProps, 'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition'> {\n    /**\n     * The number of visible text lines for the text area.\n     *\n     * If it is specified, it must be a positive integer. If it is not specified, the default\n     * value is 2 (set by the browser).\n     *\n     * When `autoExpand` is true, this value serves the purpose of specifying the minimum number\n     * of rows that the textarea will shrink to when the content is not large enough to make it\n     * expand.\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n     */\n    rows?: number\n\n    /**\n     * If `true`, the textarea will be automatically resized to fit the content, and the ability to\n     * manually resize the textarea will be disabled.\n     */\n    autoExpand?: boolean\n\n    /**\n     * If `true`, the ability to manually resize the textarea will be disabled.\n     *\n     * When `autoExpand` is true, this property serves no purpose, because the ability to manually\n     * resize the textarea is always disabled when `autoExpand` is true.\n     */\n    disableResize?: boolean\n}\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\n        disableResize = false,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    const textAreaClassName = classNames([\n        autoExpand ? styles.disableResize : null,\n        disableResize ? styles.disableResize : null,\n    ])\n\n    React.useEffect(\n        function setupAutoExpand() {\n            const containerElement = containerRef.current\n\n            function handleAutoExpand(value: string) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = value\n                }\n            }\n\n            function handleInput(event: Event) {\n                handleAutoExpand((event.currentTarget as HTMLTextAreaElement).value)\n            }\n\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand) {\n                return undefined\n            }\n\n            // Apply change initially, in case the text area has a non-empty initial value\n            handleAutoExpand(textAreaElement.value)\n\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand],\n    )\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n            maxLength={maxLength}\n        >\n            {({ onChange, ...extraProps }) => (\n                <Box\n                    width=\"full\"\n                    display=\"flex\"\n                    className={styles.innerContainer}\n                    ref={containerRef}\n                >\n                    <textarea\n                        {...props}\n                        {...extraProps}\n                        ref={combinedRef}\n                        rows={rows}\n                        className={textAreaClassName}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","maxWidth","maxLength","hidden","aria-describedby","ariaDescribedBy","rows","autoExpand","disableResize","onChange","originalOnChange","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","containerRef","useRef","internalRef","combinedRef","useMergeRefs","textAreaClassName","classNames","styles","useEffect","containerElement","current","handleAutoExpand","dataset","replicatedValue","handleInput","event","currentTarget","textAreaElement","addEventListener","removeEventListener","createElement","BaseField","className","textAreaContainer","error","bordered","_ref2","extraProps","_excluded2","Box","width","display","innerContainer","_objectSpread","objectSpread2"],"mappings":"y2BAuCiBA,EAAMC,YAA+C,SAmBlEC,EAAAA,GAAG,IAlBHC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,MAIIA,EAJJC,eAKIA,EALJC,QAMIA,EANJC,KAOIA,EAPJC,SAQIA,EARJC,UASIA,EATJC,OAUIA,EACAC,mBAAoBC,EAXxBC,KAYIA,EAZJC,WAaIA,GAAa,EAbjBC,cAcIA,GAAgB,EAChBC,SAAUC,GAGXC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMC,EAAezB,EAAM0B,OAAuB,MAC5CC,EAAc3B,EAAM0B,OAA4B,MAChDE,EAAcC,EAAYA,aAAC,CAAC3B,EAAKyB,IAEjCG,EAAoBC,EAAAA,QAAW,CACjCf,EAAagB,EAAAA,QAAOf,cAAgB,KACpCA,EAAgBe,EAAM,QAACf,cAAgB,OA+B3C,OA5BAjB,EAAMiC,WACF,WACI,MAAMC,EAAmBT,EAAaU,QAEtC,SAASC,EAAiB9B,GAClB4B,IACAA,EAAiBG,QAAQC,gBAAkBhC,GAInD,SAASiC,EAAYC,GACjBJ,EAAkBI,EAAMC,cAAsCnC,OAGlE,MAAMoC,EAAkBf,EAAYQ,QACpC,GAAKO,GAAoB1B,EAQzB,OAHAoB,EAAiBM,EAAgBpC,OAEjCoC,EAAgBC,iBAAiB,QAASJ,GACnC,IAAMG,EAAgBE,oBAAoB,QAASL,KAE9D,CAACvB,IAIDhB,EAAC6C,cAAAC,YACG,CAAA3C,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,MAAOA,EACPC,eAAgBA,EAChBC,QAASA,EACTC,KAAMA,EACNG,OAAQA,qBACUE,EAClBiC,UAAW,CACPf,EAAM,QAACgB,kBACE,UAATvC,EAAmBuB,EAAM,QAACiB,MAAQ,KACtB,aAAZ9C,EAAyB6B,EAAAA,QAAOkB,SAAW,MAE/CxC,SAAUA,EACVC,UAAWA,GAEVwC,IAAA,IAACjC,SAAEA,GAAHiC,EAAgBC,EAAhB9B,EAAAC,wBAAA4B,EAAAE,GAAA,OACGrD,EAAC6C,cAAAS,OACGC,MAAM,OACNC,QAAQ,OACRT,UAAWf,EAAM,QAACyB,eAClBvD,IAAKuB,GAELzB,EACQ6C,cAAA,WADRa,EAAAC,cAAAD,EAAAC,cAAAD,gBAAA,GACQrC,GACA+B,GAFR,GAAA,CAGIlD,IAAK0B,EACLb,KAAMA,EACNgC,UAAWjB,EACXnB,UAAWA,EACXO,SAAWsB,IACP,MAAArB,GAAAA,EAAmBqB,GACnB,MAAAtB,GAAAA,EAAWsB"}

package/package.json

@@ -6,7 +6,7 @@
         "email": "henning@doist.com",
         "url": "http://doist.com"
     },
-    "version": "27.5.0",
+    "version": "28.0.0",
     "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-background:var(--reactist-bg-default);--reactist-tab-themed-foreground:#006f85;--reactist-tab-themed-unselected:#006f85;--reactist-tab-themed-track:#f2f6f7;--reactist-tab-themed-border:var(--reactist-divider-secondary);--reactist-tab-neutral-background:var(--reactist-bg-default);--reactist-tab-neutral-foreground:var(--reactist-content-primary);--reactist-tab-neutral-unselected:var(--reactist-content-tertiary);--reactist-tab-neutral-track:var(--reactist-framework-fill-selected);--reactist-tab-neutral-border:var(--reactist-divider-primary);--reactist-tab-track-border-width:2px;--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}.faa5b46e{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)}._93de0ded{position:absolute;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-border-radius);border-width:var(--reactist-tab-track-border-width);border-style:solid}.faa5b46e,._82a91995{color:var(--reactist-tab-neutral-unselected)}._82a91995[aria-selected=true],.faa5b46e[aria-selected=true]{background-color:var(--reactist-tab-neutral-background);color:var(--reactist-tab-neutral-foreground);border-color:var(--reactist-tab-neutral-border)}.f150e9da{color:var(--reactist-tab-themed-unselected)}.f150e9da[aria-selected=true]{background-color:var(--reactist-tab-themed-background);color:var(--reactist-tab-themed-foreground);border-color:var(--reactist-tab-themed-border)}._93de0ded,._10f229b4{background:var(--reactist-tab-neutral-track);border-color:var(--reactist-tab-neutral-track)}._54f03992{background:var(--reactist-tab-themed-track);border-color:var(--reactist-tab-themed-track)}
+: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)}
 ._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

@@ -1,6 +1,6 @@
-:root{--reactist-tab-themed-background:var(--reactist-bg-default);--reactist-tab-themed-foreground:#006f85;--reactist-tab-themed-unselected:#006f85;--reactist-tab-themed-track:#f2f6f7;--reactist-tab-themed-border:var(--reactist-divider-secondary);--reactist-tab-neutral-background:var(--reactist-bg-default);--reactist-tab-neutral-foreground:var(--reactist-content-primary);--reactist-tab-neutral-unselected:var(--reactist-content-tertiary);--reactist-tab-neutral-track:var(--reactist-framework-fill-selected);--reactist-tab-neutral-border:var(--reactist-divider-primary);--reactist-tab-track-border-width:2px;--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}.faa5b46e{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)}._93de0ded{position:absolute;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-border-radius);border-width:var(--reactist-tab-track-border-width);border-style:solid}.faa5b46e,._82a91995{color:var(--reactist-tab-neutral-unselected)}._82a91995[aria-selected=true],.faa5b46e[aria-selected=true]{background-color:var(--reactist-tab-neutral-background);color:var(--reactist-tab-neutral-foreground);border-color:var(--reactist-tab-neutral-border)}.f150e9da{color:var(--reactist-tab-themed-unselected)}.f150e9da[aria-selected=true]{background-color:var(--reactist-tab-themed-background);color:var(--reactist-tab-themed-foreground);border-color:var(--reactist-tab-themed-border)}._93de0ded,._10f229b4{background:var(--reactist-tab-neutral-track);border-color:var(--reactist-tab-neutral-track)}._54f03992{background:var(--reactist-tab-themed-track);border-color:var(--reactist-tab-themed-track)}
 .fb8d74bb{box-sizing:border-box;border:0;margin:0;padding:0;font-size:var(--reactist-font-size-body);font-family:inherit;vertical-align:baseline;background-color:transparent;list-style:none}pre.fb8d74bb{font-family:var(--reactist-font-family-monospace)}.fb8d74bb[hidden]{display:none!important}._18f74af9{position:absolute}.b292fef1{position:fixed}.e4e217d4{position:relative}._66895b64{position:-webkit-sticky;position:sticky}@media (min-width:768px){._00e8a0ce{position:absolute}.efaf64be{position:fixed}._76e540fd{position:relative}.bd286900{position:-webkit-sticky;position:sticky}}@media (min-width:992px){._09e9f472{position:absolute}._893383f1{position:fixed}.dea3890d{position:relative}._6a61c94d{position:-webkit-sticky;position:sticky}}._64dcc902{display:block}._14423c92{display:flex}._6a38242d{display:inline}._348efc1f{display:inline-block}._150907c8{display:inline-flex}._3da48ad6{display:none}@media (min-width:768px){._0daac9f2{display:block}.f62c43b1{display:flex}._5839a4e4{display:inline}._8068aaf2{display:inline-block}._76562ea5{display:inline-flex}._4f7a886f{display:none}}@media (min-width:992px){._4fd4b789{display:block}._4d08e78f{display:flex}._0da15585{display:inline}.d0fcc019{display:inline-block}._79f967d4{display:inline-flex}._2ffa0d03{display:none}}._2d7320f2{flex-direction:column}._5f8879d9{flex-direction:row}@media (min-width:768px){._2c919a43{flex-direction:column}._4da1f194{flex-direction:row}}@media (min-width:992px){._66fd35ea{flex-direction:column}._4b79448d{flex-direction:row}}._202b0c8c{flex-wrap:wrap}._45a8f27f{flex-wrap:nowrap}._7d9ec5b0{flex-shrink:0}._9ce442fb{flex-grow:0}.c3b69d70{flex-grow:1}._7cc6458c{align-items:flex-start}.b76144ce{align-items:center}.e42ffab4{align-items:flex-end}._3975b234{align-items:baseline}@media (min-width:768px){.b670f77e{align-items:flex-start}._976e7156{align-items:center}._385c60b1{align-items:flex-end}._52b577fc{align-items:baseline}}@media (min-width:992px){._2e1cc27f{align-items:flex-start}._3a9e51e9{align-items:center}.dfc189b2{align-items:flex-end}._5fabaec4{align-items:baseline}}.a65d9c55{justify-content:flex-start}.b4e05554{justify-content:center}.f76804e6{justify-content:flex-end}._0095203e{justify-content:space-around}._6eb365d1{justify-content:space-between}._4111e641{justify-content:space-evenly}@media (min-width:768px){._6fda855d{justify-content:flex-start}.c2d359f8{justify-content:center}.e271941d{justify-content:flex-end}._2321488d{justify-content:space-around}.e4a9b2e3{justify-content:space-between}.bdc232f2{justify-content:space-evenly}}@media (min-width:992px){._0d16bb5c{justify-content:flex-start}.eca8082a{justify-content:center}._97ea6bb7{justify-content:flex-end}._2321488d{justify-content:space-around}._58e61602{justify-content:space-between}.bdc232f2{justify-content:space-evenly}}._794c8ab8{align-self:stretch}.c510efd5{align-self:flex-start}.b3f71626{align-self:center}._13771d73{align-self:flex-end}._64318454{align-self:baseline}@media (min-width:768px){._309c6ba7{align-self:stretch}._92dfd036{align-self:flex-start}._811f9906{align-self:center}._2cd2336e{align-self:flex-end}.bd2c9dad{align-self:baseline}}@media (min-width:992px){.d8215926{align-self:stretch}.b78f5c06{align-self:flex-start}._683e0cdb{align-self:center}._489f1dc8{align-self:flex-end}._4aca1032{align-self:baseline}}._68aab614{overflow:hidden}.ac28a3b1{overflow:auto}._50b88b52{overflow:visible}.c2fdd1c1{overflow:scroll}._75ca308a{height:100%}.a9ca9830{background-color:var(--reactist-bg-default)}.b9ff0c93{background-color:var(--reactist-bg-aside)}.efc303e5{background-color:var(--reactist-bg-highlight)}.ec657626{background-color:var(--reactist-bg-selected)}._00d3482f{background-color:var(--reactist-bg-toast);color:var(--reactist-content-primary);--reactist-content-primary:var(--reactist-toast-content-primary);--reactist-content-secondary:var(--reactist-toast-content-secondary);--reactist-text-link-idle-tint:var(--reactist-content-primary);--reactist-text-link-idle-decoration:var(--reactist-text-link-hover-decoration);--reactist-actionable-tertiary-idle-tint:var(--reactist-toast-actionable-primary-tint);--reactist-actionable-tertiary-hover-tint:var(--reactist-toast-actionable-primary-tint);--reactist-actionable-tertiary-hover-fill:var(--reactist-toast-actionable-hover-fill);--reactist-actionable-quaternary-idle-tint:var(--reactist-toast-actionable-secondary-tint);--reactist-actionable-quaternary-hover-tint:var(--reactist-toast-actionable-secondary-tint);--reactist-actionable-quaternary-hover-fill:var(--reactist-toast-actionable-hover-fill)}._958da546{border-radius:var(--reactist-border-radius-small)}._79077c62{border-radius:var(--reactist-border-radius-large)}._68981e89{border:1px solid var(--reactist-divider-primary)}._2bda8f7a{border:1px solid var(--reactist-divider-secondary)}._7152c573{border:1px solid var(--reactist-divider-tertiary)}._1f362dec{text-align:start}._1c09cd18{text-align:center}.b9663f5e{text-align:end}.a0eba489{text-align:justify}@media (min-width:768px){._60b9abf8{text-align:start}._2c70943c{text-align:center}.a512d4e1{text-align:end}._5d02c334{text-align:justify}}@media (min-width:992px){.ad2496a1{text-align:start}.ee87b016{text-align:center}._6dd48127{text-align:end}._1e70d216{text-align:justify}}
 .c4803194{padding-top:var(--reactist-spacing-xsmall)}._4e9ab24b{padding-top:var(--reactist-spacing-small)}._1d226e27{padding-top:var(--reactist-spacing-medium)}.eb6097f1{padding-top:var(--reactist-spacing-large)}.d3229ba4{padding-top:var(--reactist-spacing-xlarge)}._47978ba4{padding-top:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.f987719c{padding-top:var(--reactist-spacing-xsmall)}._8dbc4b4d{padding-top:var(--reactist-spacing-small)}.ae44fe07{padding-top:var(--reactist-spacing-medium)}.ffe9548d{padding-top:var(--reactist-spacing-large)}.f2b76a44{padding-top:var(--reactist-spacing-xlarge)}.c6eb8f43{padding-top:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._8699b560{padding-top:var(--reactist-spacing-xsmall)}._02c374b7{padding-top:var(--reactist-spacing-small)}._0dd0332f{padding-top:var(--reactist-spacing-medium)}.da55f1f6{padding-top:var(--reactist-spacing-large)}._8ef2a278{padding-top:var(--reactist-spacing-xlarge)}._8b493b28{padding-top:var(--reactist-spacing-xxlarge)}}._211eebc7{padding-right:var(--reactist-spacing-xsmall)}.ad0ccf15{padding-right:var(--reactist-spacing-small)}.a03e39af{padding-right:var(--reactist-spacing-medium)}.f0941ead{padding-right:var(--reactist-spacing-large)}.e47c5a43{padding-right:var(--reactist-spacing-xlarge)}.e849a5cf{padding-right:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._85374228{padding-right:var(--reactist-spacing-xsmall)}._89df37b9{padding-right:var(--reactist-spacing-small)}._1cc50ebe{padding-right:var(--reactist-spacing-medium)}._1060982b{padding-right:var(--reactist-spacing-large)}.be58847d{padding-right:var(--reactist-spacing-xlarge)}._45093484{padding-right:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.f8d99d6a{padding-right:var(--reactist-spacing-xsmall)}.efa076d9{padding-right:var(--reactist-spacing-small)}.e59caa64{padding-right:var(--reactist-spacing-medium)}.da42f46a{padding-right:var(--reactist-spacing-large)}.b3ee2580{padding-right:var(--reactist-spacing-xlarge)}._3ef94658{padding-right:var(--reactist-spacing-xxlarge)}}.b0e6eab4{padding-bottom:var(--reactist-spacing-xsmall)}._9510d053{padding-bottom:var(--reactist-spacing-small)}.d7af60c9{padding-bottom:var(--reactist-spacing-medium)}.b75f86cd{padding-bottom:var(--reactist-spacing-large)}.fbd4ce29{padding-bottom:var(--reactist-spacing-xlarge)}._33e3ad63{padding-bottom:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.f0302da7{padding-bottom:var(--reactist-spacing-xsmall)}._4f9b8012{padding-bottom:var(--reactist-spacing-small)}._4333e20e{padding-bottom:var(--reactist-spacing-medium)}._30bbc76c{padding-bottom:var(--reactist-spacing-large)}.ba5a4008{padding-bottom:var(--reactist-spacing-xlarge)}._423a3b1a{padding-bottom:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.b40139b7{padding-bottom:var(--reactist-spacing-xsmall)}.f96071fa{padding-bottom:var(--reactist-spacing-small)}.fe803c9a{padding-bottom:var(--reactist-spacing-medium)}._01686eb9{padding-bottom:var(--reactist-spacing-large)}.afa763d8{padding-bottom:var(--reactist-spacing-xlarge)}.a95785f1{padding-bottom:var(--reactist-spacing-xxlarge)}}.cad4e2ec{padding-left:var(--reactist-spacing-xsmall)}.d70b3c17{padding-left:var(--reactist-spacing-small)}._8c851bd6{padding-left:var(--reactist-spacing-medium)}._078feb3c{padding-left:var(--reactist-spacing-large)}._76ab968c{padding-left:var(--reactist-spacing-xlarge)}.aaca85d7{padding-left:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._5eb0e5aa{padding-left:var(--reactist-spacing-xsmall)}._0384fb4f{padding-left:var(--reactist-spacing-small)}.edffff6f{padding-left:var(--reactist-spacing-medium)}._873b9a46{padding-left:var(--reactist-spacing-large)}._89105db5{padding-left:var(--reactist-spacing-xlarge)}.db1966fe{padding-left:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.b17f826b{padding-left:var(--reactist-spacing-xsmall)}._6dc83610{padding-left:var(--reactist-spacing-small)}._3421b8b2{padding-left:var(--reactist-spacing-medium)}._68cec7a6{padding-left:var(--reactist-spacing-large)}._94bde020{padding-left:var(--reactist-spacing-xlarge)}.b94ee579{padding-left:var(--reactist-spacing-xxlarge)}}
 .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)}}
+._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)}

package/styles/tabs.module.css.css

@@ -1 +1 @@
-:root{--reactist-tab-themed-background:var(--reactist-bg-default);--reactist-tab-themed-foreground:#006f85;--reactist-tab-themed-unselected:#006f85;--reactist-tab-themed-track:#f2f6f7;--reactist-tab-themed-border:var(--reactist-divider-secondary);--reactist-tab-neutral-background:var(--reactist-bg-default);--reactist-tab-neutral-foreground:var(--reactist-content-primary);--reactist-tab-neutral-unselected:var(--reactist-content-tertiary);--reactist-tab-neutral-track:var(--reactist-framework-fill-selected);--reactist-tab-neutral-border:var(--reactist-divider-primary);--reactist-tab-track-border-width:2px;--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}.faa5b46e{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)}._93de0ded{position:absolute;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-border-radius);border-width:var(--reactist-tab-track-border-width);border-style:solid}.faa5b46e,._82a91995{color:var(--reactist-tab-neutral-unselected)}._82a91995[aria-selected=true],.faa5b46e[aria-selected=true]{background-color:var(--reactist-tab-neutral-background);color:var(--reactist-tab-neutral-foreground);border-color:var(--reactist-tab-neutral-border)}.f150e9da{color:var(--reactist-tab-themed-unselected)}.f150e9da[aria-selected=true]{background-color:var(--reactist-tab-themed-background);color:var(--reactist-tab-themed-foreground);border-color:var(--reactist-tab-themed-border)}._93de0ded,._10f229b4{background:var(--reactist-tab-neutral-track);border-color:var(--reactist-tab-neutral-track)}._54f03992{background:var(--reactist-tab-themed-track);border-color:var(--reactist-tab-themed-track)}
+: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)}