@doist/reactist 13.0.0 → 14.0.0

package/es/components/tooltip/tooltip.js

@@ -33,9 +33,13 @@ function Tooltip(_ref) {
   });
   const child = React__default.Children.only(children);
 
-  if (!content) {
+  if (!content || !child) {
     return child;
   }
+
+  if (typeof child.ref === 'string') {
+    throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded');
+  }
   /**
    * Prevents the tooltip from automatically firing on focus all the time. This is to prevent
    * tooltips from showing when the trigger element is focused back after a popover or dialog that
@@ -67,13 +71,15 @@ function Tooltip(_ref) {
     child == null ? void 0 : (_child$props = child.props) == null ? void 0 : _child$props.onFocus == null ? void 0 : _child$props.onFocus(event);
   }
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TooltipAnchor, _objectSpread2(_objectSpread2({
-    state: state
-  }, child.props), {}, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TooltipAnchor, {
+    state: state,
     ref: child.ref,
     onFocus: handleFocus
-  }), anchorProps => {
-    return /*#__PURE__*/React__default.cloneElement(child, anchorProps);
+  }, anchorProps => {
+    // Let child props override anchor props so user can specify attributes like tabIndex
+    // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems
+    // by applying the replacement component/element twice
+    return /*#__PURE__*/React__default.cloneElement(child, _objectSpread2(_objectSpread2({}, anchorProps), child.props));
   }), state.visible ? /*#__PURE__*/React__default.createElement(Tooltip$1, _objectSpread2(_objectSpread2({}, props), {}, {
     state: state,
     className: classNames('reactist_tooltip', className)

package/es/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport {\n    useTooltipState as useAriakitTooltipState,\n    TooltipStateProps as AriakitTooltipStateProps,\n    Tooltip as AriakitTooltip,\n    TooltipProps as AriakitTooltipProps,\n    TooltipAnchor,\n    TooltipAnchorProps,\n} from 'ariakit/tooltip'\nimport type { PopoverState } from 'ariakit/popover'\n\nimport './tooltip.less'\n\ntype TooltipProps = Omit<AriakitTooltipProps, 'children' | 'state'> & {\n    children: React.ReactNode\n    content: React.ReactNode | (() => React.ReactNode)\n    position?: PopoverState['placement']\n    gapSize?: number\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: AriakitTooltipStateProps) {\n    const tooltipState = useAriakitTooltipState(initialState)\n    const delay = useDelay()\n    return React.useMemo(\n        () => ({\n            ...tooltipState,\n            show: delay(() => tooltipState.show(), SHOW_DELAY),\n            hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n        }),\n        [delay, tooltipState],\n    )\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    className,\n    ...props\n}: TooltipProps) {\n    const state = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div'] | null>,\n    )\n    if (!content) {\n        return child\n    }\n\n    /**\n     * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n     * tooltips from showing when the trigger element is focused back after a popover or dialog that\n     * it opened was closed. See link below for more details.\n     * @see https://github.com/reakit/reakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n        // If focus is not followed by a key up event, does it mean that it's not\n        // an intentional keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of reakit:\n        // https://github.com/reakit/reakit/issues/750\n        function handleKeyUp(e: Event) {\n            const eventKey = (e as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                state.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        // Prevent tooltip.show from being called by TooltipReference\n        event.preventDefault()\n        child?.props?.onFocus?.(event)\n    }\n\n    return (\n        <>\n            <TooltipAnchor state={state} {...child.props} ref={child.ref} onFocus={handleFocus}>\n                {(anchorProps: TooltipAnchorProps) => {\n                    return React.cloneElement(child, anchorProps)\n                }}\n            </TooltipAnchor>\n            {state.visible ? (\n                <AriakitTooltip\n                    {...props}\n                    state={state}\n                    className={classNames('reactist_tooltip', className)}\n                >\n                    {typeof content === 'function' ? content() : content}\n                </AriakitTooltip>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n    const clearTimeouts = React.useCallback(function clearTimeouts() {\n        if (timeoutRef.current != null) {\n            clearTimeout(timeoutRef.current)\n        }\n    }, [])\n\n    // Runs clearTimeouts when the component is unmounted\n    React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n    return React.useCallback(\n        function delay(fn: () => void, delay: number) {\n            return () => {\n                clearTimeouts()\n                timeoutRef.current = setTimeout(fn, delay)\n            }\n        },\n        [clearTimeouts],\n    )\n}\n"],"names":["SHOW_DELAY","HIDE_DELAY","useDelayedTooltipState","initialState","tooltipState","useAriakitTooltipState","delay","useDelay","React","useMemo","show","hide","Tooltip","children","content","position","gapSize","className","props","state","placement","gutter","child","Children","only","handleFocus","event","handleKeyUp","e","eventKey","key","currentTarget","addEventListener","once","preventDefault","onFocus","TooltipAnchor","ref","anchorProps","cloneElement","visible","AriakitTooltip","classNames","timeoutRef","useRef","clearTimeouts","useCallback","current","clearTimeout","useEffect","fn","setTimeout"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport {\n    useTooltipState as useAriakitTooltipState,\n    TooltipStateProps as AriakitTooltipStateProps,\n    Tooltip as AriakitTooltip,\n    TooltipProps as AriakitTooltipProps,\n    TooltipAnchor,\n    TooltipAnchorProps,\n} from 'ariakit/tooltip'\nimport type { PopoverState } from 'ariakit/popover'\n\nimport './tooltip.less'\n\ntype TooltipProps = Omit<AriakitTooltipProps, 'children' | 'state'> & {\n    children: React.ReactNode\n    content: React.ReactNode | (() => React.ReactNode)\n    position?: PopoverState['placement']\n    gapSize?: number\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: AriakitTooltipStateProps) {\n    const tooltipState = useAriakitTooltipState(initialState)\n    const delay = useDelay()\n    return React.useMemo(\n        () => ({\n            ...tooltipState,\n            show: delay(() => tooltipState.show(), SHOW_DELAY),\n            hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n        }),\n        [delay, tooltipState],\n    )\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    className,\n    ...props\n}: TooltipProps) {\n    const state = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n    )\n\n    if (!content || !child) {\n        return child\n    }\n\n    if (typeof child.ref === 'string') {\n        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n    }\n\n    /**\n     * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n     * tooltips from showing when the trigger element is focused back after a popover or dialog that\n     * it opened was closed. See link below for more details.\n     * @see https://github.com/reakit/reakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n        // If focus is not followed by a key up event, does it mean that it's not\n        // an intentional keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of reakit:\n        // https://github.com/reakit/reakit/issues/750\n        function handleKeyUp(e: Event) {\n            const eventKey = (e as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                state.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        // Prevent tooltip.show from being called by TooltipReference\n        event.preventDefault()\n        child?.props?.onFocus?.(event)\n    }\n\n    return (\n        <>\n            <TooltipAnchor state={state} ref={child.ref} onFocus={handleFocus}>\n                {(anchorProps: TooltipAnchorProps) => {\n                    // Let child props override anchor props so user can specify attributes like tabIndex\n                    // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems\n                    // by applying the replacement component/element twice\n                    return React.cloneElement(child, { ...anchorProps, ...child.props })\n                }}\n            </TooltipAnchor>\n            {state.visible ? (\n                <AriakitTooltip\n                    {...props}\n                    state={state}\n                    className={classNames('reactist_tooltip', className)}\n                >\n                    {typeof content === 'function' ? content() : content}\n                </AriakitTooltip>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n    const clearTimeouts = React.useCallback(function clearTimeouts() {\n        if (timeoutRef.current != null) {\n            clearTimeout(timeoutRef.current)\n        }\n    }, [])\n\n    // Runs clearTimeouts when the component is unmounted\n    React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n    return React.useCallback(\n        function delay(fn: () => void, delay: number) {\n            return () => {\n                clearTimeouts()\n                timeoutRef.current = setTimeout(fn, delay)\n            }\n        },\n        [clearTimeouts],\n    )\n}\n"],"names":["SHOW_DELAY","HIDE_DELAY","useDelayedTooltipState","initialState","tooltipState","useAriakitTooltipState","delay","useDelay","React","useMemo","show","hide","Tooltip","children","content","position","gapSize","className","props","state","placement","gutter","child","Children","only","ref","Error","handleFocus","event","handleKeyUp","e","eventKey","key","currentTarget","addEventListener","once","preventDefault","onFocus","TooltipAnchor","anchorProps","cloneElement","visible","AriakitTooltip","classNames","timeoutRef","useRef","clearTimeouts","useCallback","current","clearTimeout","useEffect","fn","setTimeout"],"mappings":"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"}

package/es/new-components/tabs/tabs.js

@@ -2,6 +2,7 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import { useEffect, useMemo, createElement, useContext, useState, createContext } from 'react';
 import classNames from 'classnames';
 import { polymorphicComponent } from '../../utils/polymorphism.js';
+import { Box } from '../box/box.js';
 import { Inline } from '../inline/inline.js';
 import { useTabState, Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1 } from 'ariakit/tab';
 import { usePrevious } from '../../hooks/use-previous/use-previous.js';
@@ -19,8 +20,7 @@ function Tabs({
   children,
   selectedId,
   defaultSelectedId,
-  color = 'primary',
-  variant = 'normal',
+  variant = 'neutral',
   onSelectedIdChange
 }) {
   const tabState = useTabState({
@@ -40,10 +40,9 @@ function Tabs({
   const memoizedTabState = useMemo(function memoizeTabState() {
     return {
       tabState,
-      color,
       variant
     };
-  }, [color, variant, tabState]);
+  }, [variant, tabState]);
   return /*#__PURE__*/createElement(TabsContext.Provider, {
     value: memoizedTabState
   }, children);
@@ -68,13 +67,12 @@ const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
   }
 
   const {
-    color,
     variant,
     tabState
   } = tabContextValue;
   return /*#__PURE__*/createElement(Tab$1, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
-    className: classNames(exceptionallySetClassName, styles.tab, styles["tab-" + (variant != null ? variant : '')], styles["tab-" + (color != null ? color : '')]),
+    className: classNames(exceptionallySetClassName, styles.tab, styles["tab-" + variant]),
     id: id,
     state: tabState,
     ref: ref
@@ -87,7 +85,7 @@ const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
 function TabList(_ref2) {
   let {
     children,
-    space = 'medium'
+    space = 'xsmall'
   } = _ref2,
       props = _objectWithoutProperties(_ref2, _excluded2);
 
@@ -98,13 +96,24 @@ function TabList(_ref2) {
   }
 
   const {
-    tabState
+    tabState,
+    variant
   } = tabContextValue;
-  return /*#__PURE__*/createElement(TabList$1, _objectSpread2({
-    state: tabState
-  }, props), /*#__PURE__*/createElement(Inline, {
-    space: space
-  }, children));
+  return (
+    /*#__PURE__*/
+    // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container
+    // which will render the track with the wrong height
+    createElement(Box, null, /*#__PURE__*/createElement(TabList$1, _objectSpread2({
+      state: tabState,
+      as: Box,
+      position: "relative",
+      width: "maxContent"
+    }, props), /*#__PURE__*/createElement(Box, {
+      className: classNames(styles.track, styles["track-" + space], styles["track-" + variant])
+    }), /*#__PURE__*/createElement(Inline, {
+      space: space
+    }, children)))
+  );
 }
 /**
  * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.
@@ -135,13 +144,14 @@ const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref3, ref)
   const {
     tabState
   } = tabContextValue;
-  return /*#__PURE__*/createElement(TabPanel$1, _objectSpread2(_objectSpread2({
+  const shouldRender = render === 'always' || render === 'active' && tabIsActive || render === 'lazy' && (tabIsActive || tabRendered);
+  return shouldRender ? /*#__PURE__*/createElement(TabPanel$1, _objectSpread2(_objectSpread2({
     tabId: id
   }, props), {}, {
     state: tabState,
     as: as,
     ref: ref
-  }), render === 'always' ? children : null, render === 'active' && tabIsActive ? children : null, render === 'lazy' && (tabIsActive || tabRendered) ? children : null);
+  }), children) : null;
 });
 /**
  * Allows content to be rendered based on the current tab being selected while outside of the TabPanel

package/es/new-components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../src/new-components/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabState,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabState,\n} from 'ariakit/tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../../hooks/use-previous'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { Space } from '../common-types'\n\nimport styles from './tabs.module.css'\n\ntype TabsContextValue = {\n    tabState: TabState\n} & Pick<TabsProps, 'color' | 'variant'>\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ntype TabsProps = {\n    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */\n    children: React.ReactNode\n    /**\n     * Determines the primary colour of the tabs\n     */\n    color?: 'primary' | 'secondary' | 'tertiary'\n    /**\n     * Determines the style of the tabs\n     */\n    variant?: 'normal' | 'plain'\n    /**\n     * The id of the selected tab. Assigning a value makes this a\n     * controlled component\n     */\n    selectedId?: string | null\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     * 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 */\nexport function Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    color = 'primary',\n    variant = 'normal',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabState = useTabState({ selectedId, setSelectedId: onSelectedIdChange })\n    const previousDefaultSelectedId = usePrevious(defaultSelectedId)\n    const { selectedId: actualSelectedId, select } = tabState\n\n    React.useEffect(\n        function selectDefaultTab() {\n            if (\n                !selectedId &&\n                defaultSelectedId !== previousDefaultSelectedId &&\n                defaultSelectedId !== actualSelectedId &&\n                defaultSelectedId !== undefined\n            ) {\n                select(defaultSelectedId)\n            }\n        },\n        [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId],\n    )\n\n    const memoizedTabState = React.useMemo(\n        function memoizeTabState() {\n            return {\n                tabState,\n                color,\n                variant,\n            }\n        },\n        [color, variant, tabState],\n    )\n\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ntype TabProps = {\n    /** The content to render inside of the tab button */\n    children: React.ReactNode\n\n    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */\n    id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nexport const Tab = polymorphicComponent<'button', TabProps>(function Tab(\n    { as, children, id, exceptionallySetClassName, ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { color, variant, tabState } = tabContextValue\n\n    return (\n        <BaseTab\n            {...props}\n            as={as}\n            className={classNames(\n                exceptionallySetClassName,\n                styles.tab,\n                styles[`tab-${variant ?? ''}`],\n                styles[`tab-${color ?? ''}`],\n            )}\n            id={id}\n            state={tabState}\n            ref={ref}\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?: ResponsiveProp<Space>\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nexport function TabList({\n    children,\n    space = 'medium',\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState } = tabContextValue\n\n    return (\n        <BaseTabList state={tabState} {...props}>\n            <Inline space={space}>{children}</Inline>\n        </BaseTabList>\n    )\n}\n\ntype TabPanelProps = {\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 behaviour can be changed to\n     * 'active', which renders only when the tab is active, and 'lazy', meaning while inactive tab panels will not be rendered\n     * initially, they will remain mounted once they are active until the entire Tabs tree is unmounted.\n     */\n    render?: '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 corresponding `<Tab>` component.\n */\nexport const TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(\n    function TabPanel(\n        { children, id, as, render = 'always', ...props },\n        ref,\n    ): React.ReactElement | null {\n        const tabContextValue = React.useContext(TabsContext)\n        const [tabRendered, setTabRendered] = React.useState(false)\n        const tabIsActive = tabContextValue?.tabState.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 { tabState } = tabContextValue\n\n        return (\n            <BaseTabPanel tabId={id} {...props} state={tabState} as={as} ref={ref}>\n                {render === 'always' ? children : null}\n                {render === 'active' && tabIsActive ? children : null}\n                {render === 'lazy' && (tabIsActive || tabRendered) ? children : null}\n            </BaseTabPanel>\n        )\n    },\n)\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will be\n     * 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 TabPanel\n * component. Can be placed freely within the main `<Tabs>` component.\n */\nexport function TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    return tabContextValue ? children({ selectedId: tabContextValue?.tabState.selectedId }) : null\n}\n"],"names":["TabsContext","React","Tabs","children","selectedId","defaultSelectedId","color","variant","onSelectedIdChange","tabState","useTabState","setSelectedId","previousDefaultSelectedId","usePrevious","actualSelectedId","select","selectDefaultTab","undefined","memoizedTabState","memoizeTabState","Provider","value","Tab","polymorphicComponent","ref","as","id","exceptionallySetClassName","props","tabContextValue","BaseTab","className","classNames","styles","tab","state","TabList","space","BaseTabList","Inline","TabPanel","render","tabRendered","setTabRendered","tabIsActive","trackTabRenderedState","BaseTabPanel","tabId","TabAwareSlot"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../../src/new-components/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabState,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabState,\n} from 'ariakit/tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../../hooks/use-previous'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport type { Space } from '../common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\n\ntype TabsContextValue = {\n    tabState: TabState\n} & Required<Pick<TabsProps, 'variant'>>\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ntype TabsProps = {\n    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */\n    children: React.ReactNode\n    /**\n     * Determines the look and feel of the tabs.\n     */\n    variant?: 'themed' | 'neutral'\n    /**\n     * The id of the selected tab. Assigning a value makes this a\n     * controlled component\n     */\n    selectedId?: string | null\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     * 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 */\nexport function Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    variant = 'neutral',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabState = useTabState({ selectedId, setSelectedId: onSelectedIdChange })\n    const previousDefaultSelectedId = usePrevious(defaultSelectedId)\n    const { selectedId: actualSelectedId, select } = tabState\n\n    React.useEffect(\n        function selectDefaultTab() {\n            if (\n                !selectedId &&\n                defaultSelectedId !== previousDefaultSelectedId &&\n                defaultSelectedId !== actualSelectedId &&\n                defaultSelectedId !== undefined\n            ) {\n                select(defaultSelectedId)\n            }\n        },\n        [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId],\n    )\n\n    const memoizedTabState = React.useMemo(\n        function memoizeTabState() {\n            return {\n                tabState,\n                variant,\n            }\n        },\n        [variant, tabState],\n    )\n\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ntype TabProps = {\n    /** The content to render inside of the tab button */\n    children: React.ReactNode\n\n    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */\n    id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nexport const Tab = polymorphicComponent<'button', TabProps>(function Tab(\n    { as, children, id, exceptionallySetClassName, ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { variant, tabState } = tabContextValue\n\n    return (\n        <BaseTab\n            {...props}\n            as={as}\n            className={classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])}\n            id={id}\n            state={tabState}\n            ref={ref}\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 */\nexport function TabList({\n    children,\n    space = 'xsmall',\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState, variant } = tabContextValue\n\n    return (\n        // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container\n        // which will render the track with the wrong height\n        <Box>\n            <BaseTabList\n                state={tabState}\n                as={Box}\n                position=\"relative\"\n                width=\"maxContent\"\n                {...props}\n            >\n                <Box\n                    className={classNames(\n                        styles.track,\n                        styles[`track-${space}`],\n                        styles[`track-${variant}`],\n                    )}\n                />\n                <Inline space={space}>{children}</Inline>\n            </BaseTabList>\n        </Box>\n    )\n}\n\ntype TabPanelProps = {\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 behaviour can be changed to\n     * 'active', which renders only when the tab is active, and 'lazy', meaning while inactive tab panels will not be rendered\n     * initially, they will remain mounted once they are active until the entire Tabs tree is unmounted.\n     */\n    render?: '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 corresponding `<Tab>` component.\n */\nexport const TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(\n    function TabPanel(\n        { children, id, as, render = 'always', ...props },\n        ref,\n    ): React.ReactElement | null {\n        const tabContextValue = React.useContext(TabsContext)\n        const [tabRendered, setTabRendered] = React.useState(false)\n        const tabIsActive = tabContextValue?.tabState.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 { tabState } = tabContextValue\n        const shouldRender =\n            render === 'always' ||\n            (render === 'active' && tabIsActive) ||\n            (render === 'lazy' && (tabIsActive || tabRendered))\n\n        return shouldRender ? (\n            <BaseTabPanel tabId={id} {...props} state={tabState} as={as} ref={ref}>\n                {children}\n            </BaseTabPanel>\n        ) : null\n    },\n)\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will be\n     * 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 TabPanel\n * component. Can be placed freely within the main `<Tabs>` component.\n */\nexport function TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    return tabContextValue ? children({ selectedId: tabContextValue?.tabState.selectedId }) : null\n}\n"],"names":["TabsContext","React","Tabs","children","selectedId","defaultSelectedId","variant","onSelectedIdChange","tabState","useTabState","setSelectedId","previousDefaultSelectedId","usePrevious","actualSelectedId","select","selectDefaultTab","undefined","memoizedTabState","memoizeTabState","Provider","value","Tab","polymorphicComponent","ref","as","id","exceptionallySetClassName","props","tabContextValue","BaseTab","className","classNames","styles","tab","state","TabList","space","Box","BaseTabList","position","width","track","Inline","TabPanel","render","tabRendered","setTabRendered","tabIsActive","trackTabRenderedState","shouldRender","BaseTabPanel","tabId","TabAwareSlot"],"mappings":"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"}

package/es/new-components/tabs/tabs.module.css.js

@@ -1,4 +1,4 @@
-var modules_40c67f5b = {"tab":"_15d4bbf4","tab-normal":"ca31866d","tab-primary":"_421272bd","tab-secondary":"acbdf95a","tab-tertiary":"_8c59ab40","tab-plain":"a41904c9"};
+var modules_40c67f5b = {"tab":"_76bbcdaa","track":"_531eb92b","tab-neutral":"_13321d47","tab-themed":"_58c4d63d","track-neutral":"_11ef0184","track-themed":"ce590259","track-xsmall":"d8366aff","track-small":"e28fbcf0","track-medium":"_1e1d7d0e","track-large":"_611e18a3","track-xlarge":"_7e083426","track-xxlarge":"_37c54913"};
 
 export default modules_40c67f5b;
 //# sourceMappingURL=tabs.module.css.js.map

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

@@ -10,6 +10,6 @@ declare type TooltipProps = Omit<AriakitTooltipProps, 'children' | 'state'> & {
 };
 export declare const SHOW_DELAY = 500;
 export declare const HIDE_DELAY = 100;
-declare function Tooltip({ children, content, position, gapSize, className, ...props }: TooltipProps): JSX.Element;
+declare function Tooltip({ children, content, position, gapSize, className, ...props }: TooltipProps): JSX.Element | null;
 export type { TooltipProps };
 export { Tooltip };

package/lib/components/tooltip/tooltip.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport {\n    useTooltipState as useAriakitTooltipState,\n    TooltipStateProps as AriakitTooltipStateProps,\n    Tooltip as AriakitTooltip,\n    TooltipProps as AriakitTooltipProps,\n    TooltipAnchor,\n    TooltipAnchorProps,\n} from 'ariakit/tooltip'\nimport type { PopoverState } from 'ariakit/popover'\n\nimport './tooltip.less'\n\ntype TooltipProps = Omit<AriakitTooltipProps, 'children' | 'state'> & {\n    children: React.ReactNode\n    content: React.ReactNode | (() => React.ReactNode)\n    position?: PopoverState['placement']\n    gapSize?: number\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: AriakitTooltipStateProps) {\n    const tooltipState = useAriakitTooltipState(initialState)\n    const delay = useDelay()\n    return React.useMemo(\n        () => ({\n            ...tooltipState,\n            show: delay(() => tooltipState.show(), SHOW_DELAY),\n            hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n        }),\n        [delay, tooltipState],\n    )\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    className,\n    ...props\n}: TooltipProps) {\n    const state = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div'] | null>,\n    )\n    if (!content) {\n        return child\n    }\n\n    /**\n     * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n     * tooltips from showing when the trigger element is focused back after a popover or dialog that\n     * it opened was closed. See link below for more details.\n     * @see https://github.com/reakit/reakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n        // If focus is not followed by a key up event, does it mean that it's not\n        // an intentional keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of reakit:\n        // https://github.com/reakit/reakit/issues/750\n        function handleKeyUp(e: Event) {\n            const eventKey = (e as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                state.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        // Prevent tooltip.show from being called by TooltipReference\n        event.preventDefault()\n        child?.props?.onFocus?.(event)\n    }\n\n    return (\n        <>\n            <TooltipAnchor state={state} {...child.props} ref={child.ref} onFocus={handleFocus}>\n                {(anchorProps: TooltipAnchorProps) => {\n                    return React.cloneElement(child, anchorProps)\n                }}\n            </TooltipAnchor>\n            {state.visible ? (\n                <AriakitTooltip\n                    {...props}\n                    state={state}\n                    className={classNames('reactist_tooltip', className)}\n                >\n                    {typeof content === 'function' ? content() : content}\n                </AriakitTooltip>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n    const clearTimeouts = React.useCallback(function clearTimeouts() {\n        if (timeoutRef.current != null) {\n            clearTimeout(timeoutRef.current)\n        }\n    }, [])\n\n    // Runs clearTimeouts when the component is unmounted\n    React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n    return React.useCallback(\n        function delay(fn: () => void, delay: number) {\n            return () => {\n                clearTimeouts()\n                timeoutRef.current = setTimeout(fn, delay)\n            }\n        },\n        [clearTimeouts],\n    )\n}\n"],"names":["children","content","position","gapSize","className","props","state","initialState","tooltipState","useAriakitTooltipState","delay","timeoutRef","React","useRef","clearTimeouts","useCallback","current","clearTimeout","useEffect","fn","setTimeout","useDelay","useMemo","show","hide","useDelayedTooltipState","placement","gutter","child","Children","only","TooltipAnchor","ref","onFocus","event","currentTarget","addEventListener","e","eventKey","key","once","preventDefault","anchorProps","cloneElement","visible","AriakitTooltip","classNames"],"mappings":"wWAwB0B,uBADA,oBAgB1B,gBAAiBA,SACbA,EADaC,QAEbA,EAFaC,SAGbA,EAAW,MAHEC,QAIbA,EAAU,EAJGC,UAKbA,KACGC,iCAEH,MAAMC,EArBV,SAAgCC,GAC5B,MAAMC,EAAeC,kBAAuBF,GACtCG,EAwFV,WACI,MAAMC,EAAaC,EAAMC,SAEnBC,EAAgBF,EAAMG,aAAY,WACV,MAAtBJ,EAAWK,SACXC,aAAaN,EAAWK,WAE7B,IAKH,OAFAJ,EAAMM,UAAU,IAAMJ,EAAe,CAACA,IAE/BF,EAAMG,aACT,SAAeI,EAAgBT,GAC3B,MAAO,KACHI,IACAH,EAAWK,QAAUI,WAAWD,EAAIT,MAG5C,CAACI,IA3GSO,GACd,OAAOT,EAAMU,QACT,uCACOd,OACHe,KAAMb,EAAM,IAAMF,EAAae,OATjB,KAUdC,KAAMd,EAAM,IAAMF,EAAagB,OATjB,OAWlB,CAACd,EAAOF,IAYEiB,CAAuB,CAAEC,UAAWxB,EAAUyB,OAAQxB,IAE9DyB,EAAQhB,EAAMiB,SAASC,KACzB9B,GAEJ,OAAKC,EA4BDW,gCACIA,gBAACmB,iDAAczB,MAAOA,GAAWsB,EAAMvB,WAAO2B,IAAKJ,EAAMI,IAAKC,QAnBtE,SAAqBC,SAWjBA,EAAMC,cAAcC,iBAAiB,SANrC,SAAqBC,GACjB,MAAMC,EAAYD,EAAoBE,IACrB,WAAbD,GAAsC,UAAbA,GAAqC,UAAbA,GACjDhC,EAAMiB,SAG6C,CAAEiB,MAAM,IAEnEN,EAAMO,uBACNb,YAAAA,EAAOvB,gBAAO4B,WAAAA,QAAUC,MAMdQ,GACS9B,EAAM+B,aAAaf,EAAOc,IAGxCpC,EAAMsC,QACHhC,gBAACiC,6CACOxC,OACJC,MAAOA,EACPF,UAAW0C,EAAW,mBAAoB1C,KAEtB,mBAAZH,EAAyBA,IAAYA,GAEjD,MAzCD2B"}
+{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport {\n    useTooltipState as useAriakitTooltipState,\n    TooltipStateProps as AriakitTooltipStateProps,\n    Tooltip as AriakitTooltip,\n    TooltipProps as AriakitTooltipProps,\n    TooltipAnchor,\n    TooltipAnchorProps,\n} from 'ariakit/tooltip'\nimport type { PopoverState } from 'ariakit/popover'\n\nimport './tooltip.less'\n\ntype TooltipProps = Omit<AriakitTooltipProps, 'children' | 'state'> & {\n    children: React.ReactNode\n    content: React.ReactNode | (() => React.ReactNode)\n    position?: PopoverState['placement']\n    gapSize?: number\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: AriakitTooltipStateProps) {\n    const tooltipState = useAriakitTooltipState(initialState)\n    const delay = useDelay()\n    return React.useMemo(\n        () => ({\n            ...tooltipState,\n            show: delay(() => tooltipState.show(), SHOW_DELAY),\n            hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n        }),\n        [delay, tooltipState],\n    )\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    className,\n    ...props\n}: TooltipProps) {\n    const state = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n    )\n\n    if (!content || !child) {\n        return child\n    }\n\n    if (typeof child.ref === 'string') {\n        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n    }\n\n    /**\n     * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n     * tooltips from showing when the trigger element is focused back after a popover or dialog that\n     * it opened was closed. See link below for more details.\n     * @see https://github.com/reakit/reakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n        // If focus is not followed by a key up event, does it mean that it's not\n        // an intentional keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of reakit:\n        // https://github.com/reakit/reakit/issues/750\n        function handleKeyUp(e: Event) {\n            const eventKey = (e as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                state.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        // Prevent tooltip.show from being called by TooltipReference\n        event.preventDefault()\n        child?.props?.onFocus?.(event)\n    }\n\n    return (\n        <>\n            <TooltipAnchor state={state} ref={child.ref} onFocus={handleFocus}>\n                {(anchorProps: TooltipAnchorProps) => {\n                    // Let child props override anchor props so user can specify attributes like tabIndex\n                    // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems\n                    // by applying the replacement component/element twice\n                    return React.cloneElement(child, { ...anchorProps, ...child.props })\n                }}\n            </TooltipAnchor>\n            {state.visible ? (\n                <AriakitTooltip\n                    {...props}\n                    state={state}\n                    className={classNames('reactist_tooltip', className)}\n                >\n                    {typeof content === 'function' ? content() : content}\n                </AriakitTooltip>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n    const clearTimeouts = React.useCallback(function clearTimeouts() {\n        if (timeoutRef.current != null) {\n            clearTimeout(timeoutRef.current)\n        }\n    }, [])\n\n    // Runs clearTimeouts when the component is unmounted\n    React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n    return React.useCallback(\n        function delay(fn: () => void, delay: number) {\n            return () => {\n                clearTimeouts()\n                timeoutRef.current = setTimeout(fn, delay)\n            }\n        },\n        [clearTimeouts],\n    )\n}\n"],"names":["children","content","position","gapSize","className","props","state","initialState","tooltipState","useAriakitTooltipState","delay","timeoutRef","React","useRef","clearTimeouts","useCallback","current","clearTimeout","useEffect","fn","setTimeout","useDelay","useMemo","show","hide","useDelayedTooltipState","placement","gutter","child","Children","only","ref","Error","TooltipAnchor","onFocus","event","currentTarget","addEventListener","e","eventKey","key","once","preventDefault","anchorProps","cloneElement","visible","AriakitTooltip","classNames"],"mappings":"wWAwB0B,uBADA,oBAgB1B,gBAAiBA,SACbA,EADaC,QAEbA,EAFaC,SAGbA,EAAW,MAHEC,QAIbA,EAAU,EAJGC,UAKbA,KACGC,iCAEH,MAAMC,EArBV,SAAgCC,GAC5B,MAAMC,EAAeC,kBAAuBF,GACtCG,EAgGV,WACI,MAAMC,EAAaC,EAAMC,SAEnBC,EAAgBF,EAAMG,aAAY,WACV,MAAtBJ,EAAWK,SACXC,aAAaN,EAAWK,WAE7B,IAKH,OAFAJ,EAAMM,UAAU,IAAMJ,EAAe,CAACA,IAE/BF,EAAMG,aACT,SAAeI,EAAgBT,GAC3B,MAAO,KACHI,IACAH,EAAWK,QAAUI,WAAWD,EAAIT,MAG5C,CAACI,IAnHSO,GACd,OAAOT,EAAMU,QACT,uCACOd,OACHe,KAAMb,EAAM,IAAMF,EAAae,OATjB,KAUdC,KAAMd,EAAM,IAAMF,EAAagB,OATjB,OAWlB,CAACd,EAAOF,IAYEiB,CAAuB,CAAEC,UAAWxB,EAAUyB,OAAQxB,IAE9DyB,EAAQhB,EAAMiB,SAASC,KACzB9B,GAGJ,IAAKC,IAAY2B,EACb,OAAOA,EAGX,GAAyB,iBAAdA,EAAMG,IACb,MAAM,IAAIC,MAAM,mEA0BpB,OACIpB,gCACIA,gBAACqB,iBAAc3B,MAAOA,EAAOyB,IAAKH,EAAMG,IAAKG,QAnBrD,SAAqBC,SAWjBA,EAAMC,cAAcC,iBAAiB,SANrC,SAAqBC,GACjB,MAAMC,EAAYD,EAAoBE,IACrB,WAAbD,GAAsC,UAAbA,GAAqC,UAAbA,GACjDjC,EAAMiB,SAG6C,CAAEkB,MAAM,IAEnEN,EAAMO,uBACNd,YAAAA,EAAOvB,gBAAO6B,WAAAA,QAAUC,KAMdQ,GAIS/B,EAAMgC,aAAahB,qCAAYe,GAAgBf,EAAMvB,SAGnEC,EAAMuC,QACHjC,gBAACkC,6CACOzC,OACJC,MAAOA,EACPF,UAAW2C,EAAW,mBAAoB3C,KAEtB,mBAAZH,EAAyBA,IAAYA,GAEjD"}

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

@@ -1,17 +1,12 @@
 import * as React from 'react';
-import type { ResponsiveProp } from '../responsive-props';
 import type { Space } from '../common-types';
 declare type TabsProps = {
     /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */
     children: React.ReactNode;
     /**
-     * Determines the primary colour of the tabs
+     * Determines the look and feel of the tabs.
      */
-    color?: 'primary' | 'secondary' | 'tertiary';
-    /**
-     * Determines the style of the tabs
-     */
-    variant?: 'normal' | 'plain';
+    variant?: 'themed' | 'neutral';
     /**
      * The id of the selected tab. Assigning a value makes this a
      * controlled component
@@ -30,7 +25,7 @@ declare type TabsProps = {
 /**
  * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.
  */
-export declare function Tabs({ children, selectedId, defaultSelectedId, color, variant, onSelectedIdChange, }: TabsProps): React.ReactElement;
+export declare function Tabs({ children, selectedId, defaultSelectedId, variant, onSelectedIdChange, }: TabsProps): React.ReactElement;
 declare type TabProps = {
     /** The content to render inside of the tab button */
     children: React.ReactNode;
@@ -63,7 +58,7 @@ declare type TabListProps = ({
     /**
      * Controls the spacing between tabs
      */
-    space?: ResponsiveProp<Space>;
+    space?: Space;
 };
 /**
  * A component used to group `<Tab>` elements together.
@@ -71,7 +66,7 @@ declare type TabListProps = ({
 export declare function TabList({ children, space, ...props }: TabListProps): React.ReactElement | null;
 declare type TabPanelProps = {
     /** The content to be rendered inside the tab */
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */
     id: string;
     /**

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

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),a=(e(r),e(require("classnames"))),n=require("../../utils/polymorphism.js"),l=require("../inline/inline.js"),s=require("ariakit/tab"),o=require("../../hooks/use-previous/use-previous.js"),u=require("./tabs.module.css.js");const i=["as","children","id","exceptionallySetClassName"],c=["children","space"],d=["children","id","as","render"],p=r.createContext(null),b=n.polymorphicComponent((function(e,n){let{as:l,children:o,id:c,exceptionallySetClassName:d}=e,b=t.objectWithoutProperties(e,i);const f=r.useContext(p);if(!f)return null;const{color:m,variant:S,tabState:h}=f;return r.createElement(s.Tab,t.objectSpread2(t.objectSpread2({},b),{},{as:l,className:a(d,u.default.tab,u.default["tab-"+(null!=S?S:"")],u.default["tab-"+(null!=m?m:"")]),id:c,state:h,ref:n}),o)})),f=n.polymorphicComponent((function(e,a){let{children:n,id:l,as:o,render:u="always"}=e,i=t.objectWithoutProperties(e,d);const c=r.useContext(p),[b,f]=r.useState(!1),m=(null==c?void 0:c.tabState.selectedId)===l;if(r.useEffect((function(){!b&&m&&f(!0)}),[b,m]),!c)return null;const{tabState:S}=c;return r.createElement(s.TabPanel,t.objectSpread2(t.objectSpread2({tabId:l},i),{},{state:S,as:o,ref:a}),"always"===u?n:null,"active"===u&&m?n:null,"lazy"===u&&(m||b)?n:null)}));exports.Tab=b,exports.TabAwareSlot=function({children:e}){const t=r.useContext(p);return t?e({selectedId:null==t?void 0:t.tabState.selectedId}):null},exports.TabList=function(e){let{children:a,space:n="medium"}=e,o=t.objectWithoutProperties(e,c);const u=r.useContext(p);if(!u)return null;const{tabState:i}=u;return r.createElement(s.TabList,t.objectSpread2({state:i},o),r.createElement(l.Inline,{space:n},a))},exports.TabPanel=f,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:a,color:n="primary",variant:l="normal",onSelectedIdChange:u}){const i=s.useTabState({selectedId:t,setSelectedId:u}),c=o.usePrevious(a),{selectedId:d,select:b}=i;r.useEffect((function(){t||a===c||a===d||void 0===a||b(a)}),[t,a,d,b,c]);const f=r.useMemo((function(){return{tabState:i,color:n,variant:l}}),[n,l,i]);return r.createElement(p.Provider,{value:f},e)};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),r=(e(a),e(require("classnames"))),n=require("../../utils/polymorphism.js"),l=require("../box/box.js"),s=require("../inline/inline.js"),o=require("ariakit/tab"),i=require("../../hooks/use-previous/use-previous.js"),c=require("./tabs.module.css.js");const u=["as","children","id","exceptionallySetClassName"],d=["children","space"],p=["children","id","as","render"],b=a.createContext(null),f=n.polymorphicComponent((function(e,n){let{as:l,children:s,id:i,exceptionallySetClassName:d}=e,p=t.objectWithoutProperties(e,u);const f=a.useContext(b);if(!f)return null;const{variant:m,tabState:x}=f;return a.createElement(o.Tab,t.objectSpread2(t.objectSpread2({},p),{},{as:l,className:r(d,c.default.tab,c.default["tab-"+m]),id:i,state:x,ref:n}),s)})),m=n.polymorphicComponent((function(e,r){let{children:n,id:l,as:s,render:i="always"}=e,c=t.objectWithoutProperties(e,p);const u=a.useContext(b),[d,f]=a.useState(!1),m=(null==u?void 0:u.tabState.selectedId)===l;if(a.useEffect((function(){!d&&m&&f(!0)}),[d,m]),!u)return null;const{tabState:x}=u;return"always"===i||"active"===i&&m||"lazy"===i&&(m||d)?a.createElement(o.TabPanel,t.objectSpread2(t.objectSpread2({tabId:l},c),{},{state:x,as:s,ref:r}),n):null}));exports.Tab=f,exports.TabAwareSlot=function({children:e}){const t=a.useContext(b);return t?e({selectedId:null==t?void 0:t.tabState.selectedId}):null},exports.TabList=function(e){let{children:n,space:i="xsmall"}=e,u=t.objectWithoutProperties(e,d);const p=a.useContext(b);if(!p)return null;const{tabState:f,variant:m}=p;return a.createElement(l.Box,null,a.createElement(o.TabList,t.objectSpread2({state:f,as:l.Box,position:"relative",width:"maxContent"},u),a.createElement(l.Box,{className:r(c.default.track,c.default["track-"+i],c.default["track-"+m])}),a.createElement(s.Inline,{space:i},n)))},exports.TabPanel=m,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:r,variant:n="neutral",onSelectedIdChange:l}){const s=o.useTabState({selectedId:t,setSelectedId:l}),c=i.usePrevious(r),{selectedId:u,select:d}=s;a.useEffect((function(){t||r===c||r===u||void 0===r||d(r)}),[t,r,u,d,c]);const p=a.useMemo((function(){return{tabState:s,variant:n}}),[n,s]);return a.createElement(b.Provider,{value:p},e)};
 //# sourceMappingURL=tabs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../src/new-components/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabState,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabState,\n} from 'ariakit/tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../../hooks/use-previous'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { Space } from '../common-types'\n\nimport styles from './tabs.module.css'\n\ntype TabsContextValue = {\n    tabState: TabState\n} & Pick<TabsProps, 'color' | 'variant'>\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ntype TabsProps = {\n    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */\n    children: React.ReactNode\n    /**\n     * Determines the primary colour of the tabs\n     */\n    color?: 'primary' | 'secondary' | 'tertiary'\n    /**\n     * Determines the style of the tabs\n     */\n    variant?: 'normal' | 'plain'\n    /**\n     * The id of the selected tab. Assigning a value makes this a\n     * controlled component\n     */\n    selectedId?: string | null\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     * 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 */\nexport function Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    color = 'primary',\n    variant = 'normal',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabState = useTabState({ selectedId, setSelectedId: onSelectedIdChange })\n    const previousDefaultSelectedId = usePrevious(defaultSelectedId)\n    const { selectedId: actualSelectedId, select } = tabState\n\n    React.useEffect(\n        function selectDefaultTab() {\n            if (\n                !selectedId &&\n                defaultSelectedId !== previousDefaultSelectedId &&\n                defaultSelectedId !== actualSelectedId &&\n                defaultSelectedId !== undefined\n            ) {\n                select(defaultSelectedId)\n            }\n        },\n        [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId],\n    )\n\n    const memoizedTabState = React.useMemo(\n        function memoizeTabState() {\n            return {\n                tabState,\n                color,\n                variant,\n            }\n        },\n        [color, variant, tabState],\n    )\n\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ntype TabProps = {\n    /** The content to render inside of the tab button */\n    children: React.ReactNode\n\n    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */\n    id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nexport const Tab = polymorphicComponent<'button', TabProps>(function Tab(\n    { as, children, id, exceptionallySetClassName, ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { color, variant, tabState } = tabContextValue\n\n    return (\n        <BaseTab\n            {...props}\n            as={as}\n            className={classNames(\n                exceptionallySetClassName,\n                styles.tab,\n                styles[`tab-${variant ?? ''}`],\n                styles[`tab-${color ?? ''}`],\n            )}\n            id={id}\n            state={tabState}\n            ref={ref}\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?: ResponsiveProp<Space>\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nexport function TabList({\n    children,\n    space = 'medium',\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState } = tabContextValue\n\n    return (\n        <BaseTabList state={tabState} {...props}>\n            <Inline space={space}>{children}</Inline>\n        </BaseTabList>\n    )\n}\n\ntype TabPanelProps = {\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 behaviour can be changed to\n     * 'active', which renders only when the tab is active, and 'lazy', meaning while inactive tab panels will not be rendered\n     * initially, they will remain mounted once they are active until the entire Tabs tree is unmounted.\n     */\n    render?: '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 corresponding `<Tab>` component.\n */\nexport const TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(\n    function TabPanel(\n        { children, id, as, render = 'always', ...props },\n        ref,\n    ): React.ReactElement | null {\n        const tabContextValue = React.useContext(TabsContext)\n        const [tabRendered, setTabRendered] = React.useState(false)\n        const tabIsActive = tabContextValue?.tabState.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 { tabState } = tabContextValue\n\n        return (\n            <BaseTabPanel tabId={id} {...props} state={tabState} as={as} ref={ref}>\n                {render === 'always' ? children : null}\n                {render === 'active' && tabIsActive ? children : null}\n                {render === 'lazy' && (tabIsActive || tabRendered) ? children : null}\n            </BaseTabPanel>\n        )\n    },\n)\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will be\n     * 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 TabPanel\n * component. Can be placed freely within the main `<Tabs>` component.\n */\nexport function TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    return tabContextValue ? children({ selectedId: tabContextValue?.tabState.selectedId }) : null\n}\n"],"names":["TabsContext","React","Tab","polymorphicComponent","ref","as","children","id","exceptionallySetClassName","props","tabContextValue","color","variant","tabState","BaseTab","className","classNames","styles","tab","state","TabPanel","render","tabRendered","setTabRendered","tabIsActive","selectedId","BaseTabPanel","tabId","space","BaseTabList","Inline","defaultSelectedId","onSelectedIdChange","useTabState","setSelectedId","previousDefaultSelectedId","usePrevious","actualSelectedId","select","undefined","memoizedTabState","Provider","value"],"mappings":"2iBAqBMA,EAAcC,gBAA6C,MAmFpDC,EAAMC,wBAAyC,WAExDC,OADAC,GAAEA,EAAFC,SAAMA,EAANC,GAAgBA,EAAhBC,0BAAoBA,KAA8BC,iCAGlD,MAAMC,EAAkBT,aAAiBD,GAEzC,IAAKU,EACD,OAAO,KAGX,MAAMC,MAAEA,EAAFC,QAASA,EAATC,SAAkBA,GAAaH,EAErC,OACIT,gBAACa,yCACOL,OACJJ,GAAIA,EACJU,UAAWC,EACPR,EACAS,UAAOC,IACPD,wBAAcL,EAAAA,EAAW,KACzBK,wBAAcN,EAAAA,EAAS,MAE3BJ,GAAIA,EACJY,MAAON,EACPT,IAAKA,IAEJE,MA4EAc,EAAWjB,wBACpB,WAEIC,OADAE,SAAEA,EAAFC,GAAYA,EAAZF,GAAgBA,EAAhBgB,OAAoBA,EAAS,YAAaZ,iCAG1C,MAAMC,EAAkBT,aAAiBD,IAClCsB,EAAaC,GAAkBtB,YAAe,GAC/CuB,SAAcd,SAAAA,EAAiBG,SAASY,cAAelB,EAW7D,GATAN,aACI,YACSqB,GAAeE,GAChBD,GAAe,KAGvB,CAACD,EAAaE,KAGbd,EACD,OAAO,KAGX,MAAMG,SAAEA,GAAaH,EAErB,OACIT,gBAACyB,4CAAaC,MAAOpB,GAAQE,OAAOU,MAAON,EAAUR,GAAIA,EAAID,IAAKA,IAClD,WAAXiB,EAAsBf,EAAW,KACtB,WAAXe,GAAuBG,EAAclB,EAAW,KACrC,SAAXe,IAAsBG,GAAeF,GAAehB,EAAW,sDAkBnDA,SAAEA,IAC3B,MAAMI,EAAkBT,aAAiBD,GAEzC,OAAOU,EAAkBJ,EAAS,CAAEmB,iBAAYf,SAAAA,EAAiBG,SAASY,aAAgB,sCAvFtEnB,SACpBA,EADoBsB,MAEpBA,EAAQ,YACLnB,iCAEH,MAAMC,EAAkBT,aAAiBD,GAEzC,IAAKU,EACD,OAAO,KAGX,MAAMG,SAAEA,GAAaH,EAErB,OACIT,gBAAC4B,2BAAYV,MAAON,GAAcJ,GAC9BR,gBAAC6B,UAAOF,MAAOA,GAAQtB,+CAlIdA,SACjBA,EADiBmB,WAEjBA,EAFiBM,kBAGjBA,EAHiBpB,MAIjBA,EAAQ,UAJSC,QAKjBA,EAAU,SALOoB,mBAMjBA,IAEA,MAAMnB,EAAWoB,cAAY,CAAER,WAAAA,EAAYS,cAAeF,IACpDG,EAA4BC,cAAYL,IACtCN,WAAYY,EAAdC,OAAgCA,GAAWzB,EAEjDZ,aACI,WAESwB,GACDM,IAAsBI,GACtBJ,IAAsBM,QACAE,IAAtBR,GAEAO,EAAOP,KAGf,CAACN,EAAYM,EAAmBM,EAAkBC,EAAQH,IAG9D,MAAMK,EAAmBvC,WACrB,WACI,MAAO,CACHY,SAAAA,EACAF,MAAAA,EACAC,QAAAA,KAGR,CAACD,EAAOC,EAASC,IAGrB,OAAOZ,gBAACD,EAAYyC,UAASC,MAAOF,GAAmBlC"}
+{"version":3,"file":"tabs.js","sources":["../../../src/new-components/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabState,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabState,\n} from 'ariakit/tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../../hooks/use-previous'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport type { Space } from '../common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\n\ntype TabsContextValue = {\n    tabState: TabState\n} & Required<Pick<TabsProps, 'variant'>>\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ntype TabsProps = {\n    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */\n    children: React.ReactNode\n    /**\n     * Determines the look and feel of the tabs.\n     */\n    variant?: 'themed' | 'neutral'\n    /**\n     * The id of the selected tab. Assigning a value makes this a\n     * controlled component\n     */\n    selectedId?: string | null\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     * 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 */\nexport function Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    variant = 'neutral',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabState = useTabState({ selectedId, setSelectedId: onSelectedIdChange })\n    const previousDefaultSelectedId = usePrevious(defaultSelectedId)\n    const { selectedId: actualSelectedId, select } = tabState\n\n    React.useEffect(\n        function selectDefaultTab() {\n            if (\n                !selectedId &&\n                defaultSelectedId !== previousDefaultSelectedId &&\n                defaultSelectedId !== actualSelectedId &&\n                defaultSelectedId !== undefined\n            ) {\n                select(defaultSelectedId)\n            }\n        },\n        [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId],\n    )\n\n    const memoizedTabState = React.useMemo(\n        function memoizeTabState() {\n            return {\n                tabState,\n                variant,\n            }\n        },\n        [variant, tabState],\n    )\n\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ntype TabProps = {\n    /** The content to render inside of the tab button */\n    children: React.ReactNode\n\n    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */\n    id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nexport const Tab = polymorphicComponent<'button', TabProps>(function Tab(\n    { as, children, id, exceptionallySetClassName, ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { variant, tabState } = tabContextValue\n\n    return (\n        <BaseTab\n            {...props}\n            as={as}\n            className={classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])}\n            id={id}\n            state={tabState}\n            ref={ref}\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 */\nexport function TabList({\n    children,\n    space = 'xsmall',\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState, variant } = tabContextValue\n\n    return (\n        // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container\n        // which will render the track with the wrong height\n        <Box>\n            <BaseTabList\n                state={tabState}\n                as={Box}\n                position=\"relative\"\n                width=\"maxContent\"\n                {...props}\n            >\n                <Box\n                    className={classNames(\n                        styles.track,\n                        styles[`track-${space}`],\n                        styles[`track-${variant}`],\n                    )}\n                />\n                <Inline space={space}>{children}</Inline>\n            </BaseTabList>\n        </Box>\n    )\n}\n\ntype TabPanelProps = {\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 behaviour can be changed to\n     * 'active', which renders only when the tab is active, and 'lazy', meaning while inactive tab panels will not be rendered\n     * initially, they will remain mounted once they are active until the entire Tabs tree is unmounted.\n     */\n    render?: '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 corresponding `<Tab>` component.\n */\nexport const TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(\n    function TabPanel(\n        { children, id, as, render = 'always', ...props },\n        ref,\n    ): React.ReactElement | null {\n        const tabContextValue = React.useContext(TabsContext)\n        const [tabRendered, setTabRendered] = React.useState(false)\n        const tabIsActive = tabContextValue?.tabState.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 { tabState } = tabContextValue\n        const shouldRender =\n            render === 'always' ||\n            (render === 'active' && tabIsActive) ||\n            (render === 'lazy' && (tabIsActive || tabRendered))\n\n        return shouldRender ? (\n            <BaseTabPanel tabId={id} {...props} state={tabState} as={as} ref={ref}>\n                {children}\n            </BaseTabPanel>\n        ) : null\n    },\n)\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will be\n     * 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 TabPanel\n * component. Can be placed freely within the main `<Tabs>` component.\n */\nexport function TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    return tabContextValue ? children({ selectedId: tabContextValue?.tabState.selectedId }) : null\n}\n"],"names":["TabsContext","React","Tab","polymorphicComponent","ref","as","children","id","exceptionallySetClassName","props","tabContextValue","variant","tabState","BaseTab","className","classNames","styles","tab","state","TabPanel","render","tabRendered","setTabRendered","tabIsActive","selectedId","BaseTabPanel","tabId","space","Box","BaseTabList","position","width","track","Inline","defaultSelectedId","onSelectedIdChange","useTabState","setSelectedId","previousDefaultSelectedId","usePrevious","actualSelectedId","select","undefined","memoizedTabState","Provider","value"],"mappings":"skBAqBMA,EAAcC,gBAA6C,MA6EpDC,EAAMC,wBAAyC,WAExDC,OADAC,GAAEA,EAAFC,SAAMA,EAANC,GAAgBA,EAAhBC,0BAAoBA,KAA8BC,iCAGlD,MAAMC,EAAkBT,aAAiBD,GAEzC,IAAKU,EACD,OAAO,KAGX,MAAMC,QAAEA,EAAFC,SAAWA,GAAaF,EAE9B,OACIT,gBAACY,yCACOJ,OACJJ,GAAIA,EACJS,UAAWC,EAAWP,EAA2BQ,UAAOC,IAAKD,iBAAcL,IAC3EJ,GAAIA,EACJW,MAAON,EACPR,IAAKA,IAEJE,MA6FAa,EAAWhB,wBACpB,WAEIC,OADAE,SAAEA,EAAFC,GAAYA,EAAZF,GAAgBA,EAAhBe,OAAoBA,EAAS,YAAaX,iCAG1C,MAAMC,EAAkBT,aAAiBD,IAClCqB,EAAaC,GAAkBrB,YAAe,GAC/CsB,SAAcb,SAAAA,EAAiBE,SAASY,cAAejB,EAW7D,GATAN,aACI,YACSoB,GAAeE,GAChBD,GAAe,KAGvB,CAACD,EAAaE,KAGbb,EACD,OAAO,KAGX,MAAME,SAAEA,GAAaF,EAMrB,MAJe,WAAXU,GACY,WAAXA,GAAuBG,GACZ,SAAXH,IAAsBG,GAAeF,GAGtCpB,gBAACwB,4CAAaC,MAAOnB,GAAQE,OAAOS,MAAON,EAAUP,GAAIA,EAAID,IAAKA,IAC7DE,GAEL,qDAgBiBA,SAAEA,IAC3B,MAAMI,EAAkBT,aAAiBD,GAEzC,OAAOU,EAAkBJ,EAAS,CAAEkB,iBAAYd,SAAAA,EAAiBE,SAASY,aAAgB,sCA1GtElB,SACpBA,EADoBqB,MAEpBA,EAAQ,YACLlB,iCAEH,MAAMC,EAAkBT,aAAiBD,GAEzC,IAAKU,EACD,OAAO,KAGX,MAAME,SAAEA,EAAFD,QAAYA,GAAYD,EAE9B,OAGIT,gBAAC2B,WACG3B,gBAAC4B,2BACGX,MAAON,EACPP,GAAIuB,MACJE,SAAS,WACTC,MAAM,cACFtB,GAEJR,gBAAC2B,OACGd,UAAWC,EACPC,UAAOgB,MACPhB,mBAAgBW,GAChBX,mBAAgBL,MAGxBV,gBAACgC,UAAON,MAAOA,GAAQrB,gDA3IlBA,SACjBA,EADiBkB,WAEjBA,EAFiBU,kBAGjBA,EAHiBvB,QAIjBA,EAAU,UAJOwB,mBAKjBA,IAEA,MAAMvB,EAAWwB,cAAY,CAAEZ,WAAAA,EAAYa,cAAeF,IACpDG,EAA4BC,cAAYL,IACtCV,WAAYgB,EAAdC,OAAgCA,GAAW7B,EAEjDX,aACI,WAESuB,GACDU,IAAsBI,GACtBJ,IAAsBM,QACAE,IAAtBR,GAEAO,EAAOP,KAGf,CAACV,EAAYU,EAAmBM,EAAkBC,EAAQH,IAG9D,MAAMK,EAAmB1C,WACrB,WACI,MAAO,CACHW,SAAAA,EACAD,QAAAA,KAGR,CAACA,EAASC,IAGd,OAAOX,gBAACD,EAAY4C,UAASC,MAAOF,GAAmBrC"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={tab:"_15d4bbf4","tab-normal":"ca31866d","tab-primary":"_421272bd","tab-secondary":"acbdf95a","tab-tertiary":"_8c59ab40","tab-plain":"a41904c9"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={tab:"_76bbcdaa",track:"_531eb92b","tab-neutral":"_13321d47","tab-themed":"_58c4d63d","track-neutral":"_11ef0184","track-themed":"ce590259","track-xsmall":"d8366aff","track-small":"e28fbcf0","track-medium":"_1e1d7d0e","track-large":"_611e18a3","track-xlarge":"_7e083426","track-xxlarge":"_37c54913"};
 //# sourceMappingURL=tabs.module.css.js.map

package/package.json

@@ -2,7 +2,7 @@
     "name": "@doist/reactist",
     "description": "Open source React components by Doist",
     "author": "Henning Muszynski <henning@doist.com> (http://doist.com)",
-    "version": "13.0.0",
+    "version": "14.0.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": "git+https://github.com/Doist/reactist.git",

package/styles/reactist.css

@@ -23,7 +23,7 @@
 .ec63c3f1,.ec63c3f1 *{font-family:var(--reactist-font-family);cursor:pointer}.ec63c3f1._7de9c06d,.ec63c3f1._7de9c06d *{cursor:not-allowed}.ec63c3f1._7de9c06d.a37981fc ._2a17ac45,.ec63c3f1._7de9c06d ._68cc9707{opacity:.5}._2a17ac45{--tmp-switch-width:32px;--tmp-switch-height:18px;--tmp-inner-padding:3px;--tmp-handle-size:calc(var(--tmp-switch-height) - 2*var(--tmp-inner-padding));--tmp-slide-length:calc(var(--tmp-switch-width) - var(--tmp-handle-size) - var(--tmp-inner-padding));min-height:auto;border-radius:calc(var(--tmp-switch-height)/2);background-color:var(--reactist-framework-fill-summit);cursor:pointer;position:relative}._2a17ac45,._2a17ac45>div,._2a17ac45 input[type=checkbox]{width:var(--tmp-switch-width);height:var(--tmp-switch-height)}._91409c7f{position:absolute;display:block;padding:0;top:var(--tmp-inner-padding);left:var(--tmp-inner-padding);width:var(--tmp-handle-size);height:var(--tmp-handle-size);border-radius:50%;background:var(--reactist-bg-default);transition:left .28s cubic-bezier(.4,0,.2,1)}.a37981fc ._2a17ac45{background-color:var(--reactist-switch-checked)}.a37981fc ._2a17ac45 ._91409c7f{left:var(--tmp-slide-length)}.ec63c3f1.a6490371 ._2a17ac45:after{border-radius:calc(var(--tmp-switch-height) + 4px);border:2px solid var(--reactist-actionable-primary-idle-fill);bottom:-4px;content:"";left:-4px;position:absolute;right:-4px;top:-4px}
 .d6ec37c5{width:-webkit-min-content;width:-moz-min-content;width:min-content}.d6ec37c5 textarea{outline:none;border:none;padding:0;box-sizing:border-box;font-family:var(--reactist-font-family)}.d6ec37c5:not(.a60d6043) textarea{border-radius:var(--reactist-border-radius-small);padding:var(--reactist-spacing-small)}.d6ec37c5.a60d6043{border-radius:var(--reactist-border-radius-large)}.d6ec37c5.a60d6043,.d6ec37c5:not(.a60d6043) textarea{border:1px solid var(--reactist-divider-secondary)}.d6ec37c5.a60d6043:focus-within,.d6ec37c5:not(.a60d6043) textarea:focus{border-color:var(--reactist-divider-primary)}.d6ec37c5.a60d6043.bef49c61,.d6ec37c5.bef49c61:not(.a60d6043) textarea{border-color:var(--reactist-alert-tone-critical-border)!important}
 ._9d172ece:not(.c59d0239){border-radius:var(--reactist-border-radius-small);border:1px solid var(--reactist-divider-secondary);overflow:clip}._9d172ece.c59d0239 input{padding:0;height:24px}._9d172ece:not(.c59d0239):focus-within{border-color:var(--reactist-divider-primary)}._9d172ece:not(.c59d0239)._7e63ee20{border-color:var(--reactist-alert-tone-critical-border)!important}._9d172ece input{color:var(--reactist-content-primary);flex:1;outline:none;box-sizing:border-box;width:100%;background:transparent;border:none;--tmp-desired-height:30px;--tmp-line-height-increase:4px;--tmp-vertical-padding:calc((var(--tmp-desired-height) - var(--reactist-font-size-body) - var(--tmp-line-height-increase))/2);font-size:var(--reactist-font-size-body);line-height:calc(var(--reactist-font-size-body) + 4px);margin:0}._9d172ece:not(.c59d0239) input{padding:var(--tmp-vertical-padding) 10px}
-:root{--reactist-tab-primary-background:#246fe0;--reactist-tab-primary-foreground:var(--reactist-content-light-on-dark);--reactist-tab-primary-unselected:#246fe0;--reactist-tab-secondary-background:var(--reactist-framework-fill-selected);--reactist-tab-secondary-foreground:#246fe0;--reactist-tab-secondary-unselected:#246fe0;--reactist-tab-tertiary-background:grey;--reactist-tab-tertiary-foreground:var(--reactist-content-light-on-dark);--reactist-tab-tertiary-unselected:var(--reactist-content-tertiary)}._15d4bbf4{box-sizing:border-box;border:none;border-radius:var(--reactist-border-radius-small);background:none;cursor:pointer;font-weight:var(--reactist-font-weight-medium);text-decoration:none}.ca31866d{padding:0 var(--reactist-spacing-medium);font-size:var(--reactist-font-size-body);line-height:32px;border-radius:20px}.ca31866d._421272bd{color:var(--reactist-tab-primary-unselected)}.ca31866d._421272bd[aria-selected=true]{background-color:var(--reactist-tab-primary-background);color:var(--reactist-tab-primary-foreground)}.ca31866d.acbdf95a{color:var(--reactist-tab-secondary-unselected)}.ca31866d.acbdf95a[aria-selected=true]{background-color:var(--reactist-tab-secondary-background);color:var(--reactist-tab-secondary-foreground)}.ca31866d._8c59ab40{color:var(--reactist-tab-tertiary-unselected)}.ca31866d._8c59ab40[aria-selected=true]{background-color:var(--reactist-tab-tertiary-background);color:var(--reactist-tab-tertiary-foreground)}.a41904c9{padding:var(--reactist-spacing-xsmall);color:var(--reactist-content-secondary);font-size:var(--reactist-font-size-subtitle);font-weight:var(--reactist-font-weight-strong)}.a41904c9[aria-selected=true]{color:var(--reactist-content-primary)}
+: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}._76bbcdaa{box-sizing:border-box;padding:0 var(--reactist-spacing-medium);border:none;background:none;cursor:pointer;font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-medium);line-height:32px;z-index:1;text-decoration:none;border:var(--reactist-tab-border-width) solid transparent;border-radius:var(--reactist-tab-border-radius)}._531eb92b{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));margin-top:var(--reactist-spacing-large);border-radius:var(--reactist-tab-border-radius);border-width:var(--reactist-tab-track-border-width);border-style:solid}._76bbcdaa,._13321d47{color:var(--reactist-tab-neutral-unselected)}._13321d47[aria-selected=true],._76bbcdaa[aria-selected=true]{background-color:var(--reactist-tab-neutral-background);color:var(--reactist-tab-neutral-foreground);border-color:var(--reactist-tab-neutral-border)}._58c4d63d{color:var(--reactist-tab-themed-unselected)}._58c4d63d[aria-selected=true]{background-color:var(--reactist-tab-themed-background);color:var(--reactist-tab-themed-foreground);border-color:var(--reactist-tab-themed-border)}._531eb92b,._11ef0184{background:var(--reactist-tab-neutral-track);border-color:var(--reactist-tab-neutral-track)}.ce590259{background:var(--reactist-tab-themed-track);border-color:var(--reactist-tab-themed-track)}.d8366aff{margin-top:var(--reactist-spacing-xsmall)}.e28fbcf0{margin-top:var(--reactist-spacing-small)}._1e1d7d0e{margin-top:var(--reactist-spacing-medium)}._611e18a3{margin-top:var(--reactist-spacing-large)}._7e083426{margin-top:var(--reactist-spacing-xlarge)}._37c54913{margin-top:var(--reactist-spacing-xxlarge)}
 @-webkit-keyframes _77f9687f{0%{opacity:0}to{opacity:1}}@keyframes _77f9687f{0%{opacity:0}to{opacity:1}}:root{--reach-dialog:1;--reactist-modal-overlay-fill:rgba(0,0,0,0.5);--reactist-modal-padding-top:13vh}._37bef8d8{isolation:isolate}[data-reach-dialog-overlay]{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--reactist-modal-overlay-fill);-webkit-animation:_77f9687f .2s;animation:_77f9687f .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,1)}[data-reach-dialog-overlay]>[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)}[data-reach-dialog-overlay].bcc4e0a5>[data-focus-lock-disabled]{padding-top:var(--reactist-modal-padding-top)}[data-reach-dialog-overlay].bcc4e0a5>[data-focus-lock-disabled] .d4832c2d{max-height:calc(100vh - 2*var(--reactist-modal-padding-top))}[data-reach-dialog-content]{background:var(--reactist-bg-default);padding:0;outline:none;transition:box-shadow .5s}.d4832c2d{box-shadow:0 2px 8px 0 rgba(0,0,0,.16);transition:width .2s ease-in-out;max-width:100%}.b0c3b021 .d4832c2d{width:100%}._573d6aa5 .d4832c2d{width:768px}._8550d996 .d4832c2d{width:580px}._43bb18f5 .d4832c2d{width:450px}@media (min-width:992px){._57b4159d .d4832c2d{width:960px}}@media (min-width:1200px){._57b4159d .d4832c2d{width:1060px}}@media (max-width:1000px){._57b4159d .d4832c2d{width:768px}}@media (max-width:580px){.cb63f300:not(._43bb18f5) .d4832c2d{width:100%!important;max-height:none}.cb63f300.e741893e:not(._43bb18f5)>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}.cb63f300.e741893e:not(._43bb18f5) .d4832c2d{border-bottom-left-radius:0;border-bottom-right-radius:0}}@media (max-width:400px){.d4832c2d{width:100%!important;max-height:none}.cb63f300.e741893e>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}.cb63f300.e741893e .d4832c2d{border-bottom-left-radius:0;border-bottom-right-radius:0}}.bb1ce281{display:flex;align-items:center;height:32px}.c5ef989c{min-height:32px}
 :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)}}
 .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 @@
+._6b1279e0{margin:calc(var(--reactist-spacing-xsmall)*-1) 0 0 calc(var(--reactist-spacing-xsmall)*-1)}._6b1279e0>*{margin:var(--reactist-spacing-xsmall) 0 0 var(--reactist-spacing-xsmall)}._0d82c42d{margin:calc(var(--reactist-spacing-small)*-1) 0 0 calc(var(--reactist-spacing-small)*-1)}._0d82c42d>*{margin:var(--reactist-spacing-small) 0 0 var(--reactist-spacing-small)}._556714e1{margin:calc(var(--reactist-spacing-medium)*-1) 0 0 calc(var(--reactist-spacing-medium)*-1)}._556714e1>*{margin:var(--reactist-spacing-medium) 0 0 var(--reactist-spacing-medium)}.e90b43fb{margin:calc(var(--reactist-spacing-large)*-1) 0 0 calc(var(--reactist-spacing-large)*-1)}.e90b43fb>*{margin:var(--reactist-spacing-large) 0 0 var(--reactist-spacing-large)}.a9c34345{margin:calc(var(--reactist-spacing-xlarge)*-1) 0 0 calc(var(--reactist-spacing-xlarge)*-1)}.a9c34345>*{margin:var(--reactist-spacing-xlarge) 0 0 var(--reactist-spacing-xlarge)}.aa102efe{margin:calc(var(--reactist-spacing-xxlarge)*-1) 0 0 calc(var(--reactist-spacing-xxlarge)*-1)}.aa102efe>*{margin:var(--reactist-spacing-xxlarge) 0 0 var(--reactist-spacing-xxlarge)}@media (min-width:768px){._34d16157{margin:calc(var(--reactist-spacing-xsmall)*-1) 0 0 calc(var(--reactist-spacing-xsmall)*-1)}._34d16157>*{margin:var(--reactist-spacing-xsmall) 0 0 var(--reactist-spacing-xsmall)}.c7e0e54f{margin:calc(var(--reactist-spacing-small)*-1) 0 0 calc(var(--reactist-spacing-small)*-1)}.c7e0e54f>*{margin:var(--reactist-spacing-small) 0 0 var(--reactist-spacing-small)}._7f2a4e4b{margin:calc(var(--reactist-spacing-medium)*-1) 0 0 calc(var(--reactist-spacing-medium)*-1)}._7f2a4e4b>*{margin:var(--reactist-spacing-medium) 0 0 var(--reactist-spacing-medium)}.ae256487{margin:calc(var(--reactist-spacing-large)*-1) 0 0 calc(var(--reactist-spacing-large)*-1)}.ae256487>*{margin:var(--reactist-spacing-large) 0 0 var(--reactist-spacing-large)}.e88be0f7{margin:calc(var(--reactist-spacing-xlarge)*-1) 0 0 calc(var(--reactist-spacing-xlarge)*-1)}.e88be0f7>*{margin:var(--reactist-spacing-xlarge) 0 0 var(--reactist-spacing-xlarge)}.dc7bcb18{margin:calc(var(--reactist-spacing-xxlarge)*-1) 0 0 calc(var(--reactist-spacing-xxlarge)*-1)}.dc7bcb18>*{margin:var(--reactist-spacing-xxlarge) 0 0 var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._853f3012{margin:calc(var(--reactist-spacing-xsmall)*-1) 0 0 calc(var(--reactist-spacing-xsmall)*-1)}._853f3012>*{margin:var(--reactist-spacing-xsmall) 0 0 var(--reactist-spacing-xsmall)}._3bfaf758{margin:calc(var(--reactist-spacing-small)*-1) 0 0 calc(var(--reactist-spacing-small)*-1)}._3bfaf758>*{margin:var(--reactist-spacing-small) 0 0 var(--reactist-spacing-small)}._36462a93{margin:calc(var(--reactist-spacing-medium)*-1) 0 0 calc(var(--reactist-spacing-medium)*-1)}._36462a93>*{margin:var(--reactist-spacing-medium) 0 0 var(--reactist-spacing-medium)}.e73081b7{margin:calc(var(--reactist-spacing-large)*-1) 0 0 calc(var(--reactist-spacing-large)*-1)}.e73081b7>*{margin:var(--reactist-spacing-large) 0 0 var(--reactist-spacing-large)}.e22ec9dd{margin:calc(var(--reactist-spacing-xlarge)*-1) 0 0 calc(var(--reactist-spacing-xlarge)*-1)}.e22ec9dd>*{margin:var(--reactist-spacing-xlarge) 0 0 var(--reactist-spacing-xlarge)}._4a20bd12{margin:calc(var(--reactist-spacing-xxlarge)*-1) 0 0 calc(var(--reactist-spacing-xxlarge)*-1)}._4a20bd12>*{margin:var(--reactist-spacing-xxlarge) 0 0 var(--reactist-spacing-xxlarge)}}
+: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}._76bbcdaa{box-sizing:border-box;padding:0 var(--reactist-spacing-medium);border:none;background:none;cursor:pointer;font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-medium);line-height:32px;z-index:1;text-decoration:none;border:var(--reactist-tab-border-width) solid transparent;border-radius:var(--reactist-tab-border-radius)}._531eb92b{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));margin-top:var(--reactist-spacing-large);border-radius:var(--reactist-tab-border-radius);border-width:var(--reactist-tab-track-border-width);border-style:solid}._76bbcdaa,._13321d47{color:var(--reactist-tab-neutral-unselected)}._13321d47[aria-selected=true],._76bbcdaa[aria-selected=true]{background-color:var(--reactist-tab-neutral-background);color:var(--reactist-tab-neutral-foreground);border-color:var(--reactist-tab-neutral-border)}._58c4d63d{color:var(--reactist-tab-themed-unselected)}._58c4d63d[aria-selected=true]{background-color:var(--reactist-tab-themed-background);color:var(--reactist-tab-themed-foreground);border-color:var(--reactist-tab-themed-border)}._531eb92b,._11ef0184{background:var(--reactist-tab-neutral-track);border-color:var(--reactist-tab-neutral-track)}.ce590259{background:var(--reactist-tab-themed-track);border-color:var(--reactist-tab-themed-track)}.d8366aff{margin-top:var(--reactist-spacing-xsmall)}.e28fbcf0{margin-top:var(--reactist-spacing-small)}._1e1d7d0e{margin-top:var(--reactist-spacing-medium)}._611e18a3{margin-top:var(--reactist-spacing-large)}._7e083426{margin-top:var(--reactist-spacing-xlarge)}._37c54913{margin-top:var(--reactist-spacing-xxlarge)}
 .f9408a0e{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.f9408a0e{font-family:monospace}.f9408a0e[hidden]{display:none!important}._7807dcdd{position:absolute}.dc5f328c{position:fixed}._0e4ff085{position:relative}._4019d94a{position:-webkit-sticky;position:sticky}@media (min-width:768px){.b1865c0f{position:absolute}.af8c5967{position:fixed}.ef2b609f{position:relative}._04935ffd{position:-webkit-sticky;position:sticky}}@media (min-width:992px){.bda94091{position:absolute}._691dfd31{position:fixed}.efda904e{position:relative}.bcf04687{position:-webkit-sticky;position:sticky}}.b5b9f34a{display:block}._6e9db9aa{display:flex}.ece6d246{display:inline}.e5e2223f{display:inline-block}.f344a0e2{display:inline-flex}._9002f8c2{display:none}@media (min-width:768px){.d896f0ff{display:block}._56412665{display:flex}._6b430cc5{display:inline}._4158c5ad{display:inline-block}.c598eaab{display:inline-flex}._5a2a6d3f{display:none}}@media (min-width:992px){._132ef8fb{display:block}._5bd11385{display:flex}.a51c2ec9{display:inline}._93506988{display:inline-block}._385d45a5{display:inline-flex}._921732eb{display:none}}._41ef5755{flex-direction:column}._6cad1a19{flex-direction:row}@media (min-width:768px){.f1c16205{flex-direction:column}._65305ae1{flex-direction:row}}@media (min-width:992px){._4916f0f9{flex-direction:column}._430dfc8e{flex-direction:row}}._3d2d56fe{flex-wrap:wrap}._826e4adf{flex-wrap:nowrap}.f8344e0f{flex-shrink:0}.f117e2ab{flex-grow:0}._1355325c{flex-grow:1}.c5b05c6a{align-items:flex-start}._21b8bafa{align-items:center}._56d73c9b{align-items:flex-end}._052e0707{align-items:baseline}@media (min-width:768px){._90048c98{align-items:flex-start}._7e189a0b{align-items:center}.b8aefb5c{align-items:flex-end}._4c1a5ef9{align-items:baseline}}@media (min-width:992px){.f4d052ef{align-items:flex-start}.e5478926{align-items:center}.b4f5051a{align-items:flex-end}.b21adace{align-items:baseline}}.be6deb6a{justify-content:flex-start}.d8eaf780{justify-content:center}._9212ca89{justify-content:flex-end}._5d2cd095{justify-content:space-around}._00d5fe7e{justify-content:space-between}.ce4f4c2d{justify-content:space-evenly}@media (min-width:768px){._6580dbbc{justify-content:flex-start}._3f689891{justify-content:center}._628df8db{justify-content:flex-end}._3ea88b4f{justify-content:space-around}._4554d93d{justify-content:space-between}.eb13fb50{justify-content:space-evenly}}@media (min-width:992px){._36dc744d{justify-content:flex-start}.ee7077ab{justify-content:center}._4edc8c86{justify-content:flex-end}._3ea88b4f{justify-content:space-around}._7e147696{justify-content:space-between}.eb13fb50{justify-content:space-evenly}}.c0655cd6{align-self:stretch}._11863030{align-self:flex-start}.c6d86139{align-self:center}.c0bd1f82{align-self:flex-end}._95686aec{align-self:baseline}@media (min-width:768px){._9b712cc7{align-self:stretch}.f7b935f7{align-self:flex-start}.bf9ad125{align-self:center}._3b4f8c3c{align-self:flex-end}._49d27079{align-self:baseline}}@media (min-width:992px){._63d27ffa{align-self:stretch}.d45796cc{align-self:flex-start}.c91c7bf7{align-self:center}.f2453212{align-self:flex-end}._3882757c{align-self:baseline}}._473810b4{overflow:hidden}._051c2340{overflow:auto}._14e451d1{overflow:visible}._4d8555f8{overflow:scroll}._867d251e{height:100%}._2d928bf8{background-color:var(--reactist-bg-default)}.db3f5af6{background-color:var(--reactist-bg-aside)}.c990fcc3{background-color:var(--reactist-bg-highlight)}._976a662f{background-color:var(--reactist-bg-selected)}._46b52f05{border-radius:var(--reactist-border-radius-small)}._1c8b326b{border-radius:var(--reactist-border-radius-large)}._0ef8c314{border:1px solid var(--reactist-divider-primary)}._14871605{border:1px solid var(--reactist-divider-secondary)}._36c045c3{border:1px solid var(--reactist-divider-tertiary)}.d745aa1e{text-align:start}._31cf99c5{text-align:center}._10a7a030{text-align:end}._2cfc8b46{text-align:justify}@media (min-width:768px){.e6b7bb40{text-align:start}._47dcb91c{text-align:center}._1d4011ce{text-align:end}._18407499{text-align:justify}}@media (min-width:992px){._565de5cf{text-align:start}._64254ba3{text-align:center}._3cc6a504{text-align:end}._0efec659{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)}
-._6b1279e0{margin:calc(var(--reactist-spacing-xsmall)*-1) 0 0 calc(var(--reactist-spacing-xsmall)*-1)}._6b1279e0>*{margin:var(--reactist-spacing-xsmall) 0 0 var(--reactist-spacing-xsmall)}._0d82c42d{margin:calc(var(--reactist-spacing-small)*-1) 0 0 calc(var(--reactist-spacing-small)*-1)}._0d82c42d>*{margin:var(--reactist-spacing-small) 0 0 var(--reactist-spacing-small)}._556714e1{margin:calc(var(--reactist-spacing-medium)*-1) 0 0 calc(var(--reactist-spacing-medium)*-1)}._556714e1>*{margin:var(--reactist-spacing-medium) 0 0 var(--reactist-spacing-medium)}.e90b43fb{margin:calc(var(--reactist-spacing-large)*-1) 0 0 calc(var(--reactist-spacing-large)*-1)}.e90b43fb>*{margin:var(--reactist-spacing-large) 0 0 var(--reactist-spacing-large)}.a9c34345{margin:calc(var(--reactist-spacing-xlarge)*-1) 0 0 calc(var(--reactist-spacing-xlarge)*-1)}.a9c34345>*{margin:var(--reactist-spacing-xlarge) 0 0 var(--reactist-spacing-xlarge)}.aa102efe{margin:calc(var(--reactist-spacing-xxlarge)*-1) 0 0 calc(var(--reactist-spacing-xxlarge)*-1)}.aa102efe>*{margin:var(--reactist-spacing-xxlarge) 0 0 var(--reactist-spacing-xxlarge)}@media (min-width:768px){._34d16157{margin:calc(var(--reactist-spacing-xsmall)*-1) 0 0 calc(var(--reactist-spacing-xsmall)*-1)}._34d16157>*{margin:var(--reactist-spacing-xsmall) 0 0 var(--reactist-spacing-xsmall)}.c7e0e54f{margin:calc(var(--reactist-spacing-small)*-1) 0 0 calc(var(--reactist-spacing-small)*-1)}.c7e0e54f>*{margin:var(--reactist-spacing-small) 0 0 var(--reactist-spacing-small)}._7f2a4e4b{margin:calc(var(--reactist-spacing-medium)*-1) 0 0 calc(var(--reactist-spacing-medium)*-1)}._7f2a4e4b>*{margin:var(--reactist-spacing-medium) 0 0 var(--reactist-spacing-medium)}.ae256487{margin:calc(var(--reactist-spacing-large)*-1) 0 0 calc(var(--reactist-spacing-large)*-1)}.ae256487>*{margin:var(--reactist-spacing-large) 0 0 var(--reactist-spacing-large)}.e88be0f7{margin:calc(var(--reactist-spacing-xlarge)*-1) 0 0 calc(var(--reactist-spacing-xlarge)*-1)}.e88be0f7>*{margin:var(--reactist-spacing-xlarge) 0 0 var(--reactist-spacing-xlarge)}.dc7bcb18{margin:calc(var(--reactist-spacing-xxlarge)*-1) 0 0 calc(var(--reactist-spacing-xxlarge)*-1)}.dc7bcb18>*{margin:var(--reactist-spacing-xxlarge) 0 0 var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._853f3012{margin:calc(var(--reactist-spacing-xsmall)*-1) 0 0 calc(var(--reactist-spacing-xsmall)*-1)}._853f3012>*{margin:var(--reactist-spacing-xsmall) 0 0 var(--reactist-spacing-xsmall)}._3bfaf758{margin:calc(var(--reactist-spacing-small)*-1) 0 0 calc(var(--reactist-spacing-small)*-1)}._3bfaf758>*{margin:var(--reactist-spacing-small) 0 0 var(--reactist-spacing-small)}._36462a93{margin:calc(var(--reactist-spacing-medium)*-1) 0 0 calc(var(--reactist-spacing-medium)*-1)}._36462a93>*{margin:var(--reactist-spacing-medium) 0 0 var(--reactist-spacing-medium)}.e73081b7{margin:calc(var(--reactist-spacing-large)*-1) 0 0 calc(var(--reactist-spacing-large)*-1)}.e73081b7>*{margin:var(--reactist-spacing-large) 0 0 var(--reactist-spacing-large)}.e22ec9dd{margin:calc(var(--reactist-spacing-xlarge)*-1) 0 0 calc(var(--reactist-spacing-xlarge)*-1)}.e22ec9dd>*{margin:var(--reactist-spacing-xlarge) 0 0 var(--reactist-spacing-xlarge)}._4a20bd12{margin:calc(var(--reactist-spacing-xxlarge)*-1) 0 0 calc(var(--reactist-spacing-xxlarge)*-1)}._4a20bd12>*{margin:var(--reactist-spacing-xxlarge) 0 0 var(--reactist-spacing-xxlarge)}}
-:root{--reactist-tab-primary-background:#246fe0;--reactist-tab-primary-foreground:var(--reactist-content-light-on-dark);--reactist-tab-primary-unselected:#246fe0;--reactist-tab-secondary-background:var(--reactist-framework-fill-selected);--reactist-tab-secondary-foreground:#246fe0;--reactist-tab-secondary-unselected:#246fe0;--reactist-tab-tertiary-background:grey;--reactist-tab-tertiary-foreground:var(--reactist-content-light-on-dark);--reactist-tab-tertiary-unselected:var(--reactist-content-tertiary)}._15d4bbf4{box-sizing:border-box;border:none;border-radius:var(--reactist-border-radius-small);background:none;cursor:pointer;font-weight:var(--reactist-font-weight-medium);text-decoration:none}.ca31866d{padding:0 var(--reactist-spacing-medium);font-size:var(--reactist-font-size-body);line-height:32px;border-radius:20px}.ca31866d._421272bd{color:var(--reactist-tab-primary-unselected)}.ca31866d._421272bd[aria-selected=true]{background-color:var(--reactist-tab-primary-background);color:var(--reactist-tab-primary-foreground)}.ca31866d.acbdf95a{color:var(--reactist-tab-secondary-unselected)}.ca31866d.acbdf95a[aria-selected=true]{background-color:var(--reactist-tab-secondary-background);color:var(--reactist-tab-secondary-foreground)}.ca31866d._8c59ab40{color:var(--reactist-tab-tertiary-unselected)}.ca31866d._8c59ab40[aria-selected=true]{background-color:var(--reactist-tab-tertiary-background);color:var(--reactist-tab-tertiary-foreground)}.a41904c9{padding:var(--reactist-spacing-xsmall);color:var(--reactist-content-secondary);font-size:var(--reactist-font-size-subtitle);font-weight:var(--reactist-font-weight-strong)}.a41904c9[aria-selected=true]{color:var(--reactist-content-primary)}
+._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)}

package/styles/tabs.module.css.css

@@ -1 +1 @@
-:root{--reactist-tab-primary-background:#246fe0;--reactist-tab-primary-foreground:var(--reactist-content-light-on-dark);--reactist-tab-primary-unselected:#246fe0;--reactist-tab-secondary-background:var(--reactist-framework-fill-selected);--reactist-tab-secondary-foreground:#246fe0;--reactist-tab-secondary-unselected:#246fe0;--reactist-tab-tertiary-background:grey;--reactist-tab-tertiary-foreground:var(--reactist-content-light-on-dark);--reactist-tab-tertiary-unselected:var(--reactist-content-tertiary)}._15d4bbf4{box-sizing:border-box;border:none;border-radius:var(--reactist-border-radius-small);background:none;cursor:pointer;font-weight:var(--reactist-font-weight-medium);text-decoration:none}.ca31866d{padding:0 var(--reactist-spacing-medium);font-size:var(--reactist-font-size-body);line-height:32px;border-radius:20px}.ca31866d._421272bd{color:var(--reactist-tab-primary-unselected)}.ca31866d._421272bd[aria-selected=true]{background-color:var(--reactist-tab-primary-background);color:var(--reactist-tab-primary-foreground)}.ca31866d.acbdf95a{color:var(--reactist-tab-secondary-unselected)}.ca31866d.acbdf95a[aria-selected=true]{background-color:var(--reactist-tab-secondary-background);color:var(--reactist-tab-secondary-foreground)}.ca31866d._8c59ab40{color:var(--reactist-tab-tertiary-unselected)}.ca31866d._8c59ab40[aria-selected=true]{background-color:var(--reactist-tab-tertiary-background);color:var(--reactist-tab-tertiary-foreground)}.a41904c9{padding:var(--reactist-spacing-xsmall);color:var(--reactist-content-secondary);font-size:var(--reactist-font-size-subtitle);font-weight:var(--reactist-font-weight-strong)}.a41904c9[aria-selected=true]{color:var(--reactist-content-primary)}
+: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}._76bbcdaa{box-sizing:border-box;padding:0 var(--reactist-spacing-medium);border:none;background:none;cursor:pointer;font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-medium);line-height:32px;z-index:1;text-decoration:none;border:var(--reactist-tab-border-width) solid transparent;border-radius:var(--reactist-tab-border-radius)}._531eb92b{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));margin-top:var(--reactist-spacing-large);border-radius:var(--reactist-tab-border-radius);border-width:var(--reactist-tab-track-border-width);border-style:solid}._76bbcdaa,._13321d47{color:var(--reactist-tab-neutral-unselected)}._13321d47[aria-selected=true],._76bbcdaa[aria-selected=true]{background-color:var(--reactist-tab-neutral-background);color:var(--reactist-tab-neutral-foreground);border-color:var(--reactist-tab-neutral-border)}._58c4d63d{color:var(--reactist-tab-themed-unselected)}._58c4d63d[aria-selected=true]{background-color:var(--reactist-tab-themed-background);color:var(--reactist-tab-themed-foreground);border-color:var(--reactist-tab-themed-border)}._531eb92b,._11ef0184{background:var(--reactist-tab-neutral-track);border-color:var(--reactist-tab-neutral-track)}.ce590259{background:var(--reactist-tab-themed-track);border-color:var(--reactist-tab-themed-track)}.d8366aff{margin-top:var(--reactist-spacing-xsmall)}.e28fbcf0{margin-top:var(--reactist-spacing-small)}._1e1d7d0e{margin-top:var(--reactist-spacing-medium)}._611e18a3{margin-top:var(--reactist-spacing-large)}._7e083426{margin-top:var(--reactist-spacing-xlarge)}._37c54913{margin-top:var(--reactist-spacing-xxlarge)}