@doist/reactist 13.0.0 → 14.1.1

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:"a1064a3b",track:"_06f1b8a1","tab-neutral":"dabbec7d","tab-themed":"e6f5ae4e","track-neutral":"_43913ce5","track-themed":"_39bdfdde","track-xsmall":"_1c148f4e","track-small":"_2a370df5","track-medium":"_77430437","track-large":"_33db5352","track-xlarge":"_60bf9564","track-xxlarge":"_29a35080"};
 //# 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.1.1",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": "git+https://github.com/Doist/reactist.git",
@@ -62,7 +62,7 @@
         "@doist/eslint-config": "^7.1.2",
         "@doist/prettier-config": "^3.0.5",
         "@doist/tsconfig": "^1.0.0",
-        "@geometricpanda/storybook-addon-badges": "^0.0.4",
+        "@geometricpanda/storybook-addon-badges": "^0.2.2",
         "@storybook/addon-actions": "^6.5.3",
         "@storybook/addon-controls": "^6.5.3",
         "@storybook/addon-docs": "^6.5.3",
@@ -89,8 +89,6 @@
         "classnames": "^2.2.5",
         "css-loader": "^4.2.2",
         "cssnano": "^4.1.10",
-        "enzyme": "^3.11.0",
-        "enzyme-to-json": "^3.6.1",
         "eslint": "^8.16.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-formatter-codeframe": "^7.32.1",
@@ -131,8 +129,8 @@
     },
     "dependencies": {
         "@reach/dialog": "^0.16.0",
-        "ariakit": "^2.0.0-next.27",
-        "ariakit-utils": "^0.17.0-next.18",
+        "ariakit": "2.0.0-next.27",
+        "ariakit-utils": "0.17.0-next.18",
         "dayjs": "^1.8.10",
         "patch-package": "^6.4.6",
         "react-focus-lock": "^2.5.2",

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;--reactist-tab-height:30px}.a1064a3b{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:var(--reactist-tab-height);z-index:1;text-decoration:none;border:var(--reactist-tab-border-width) solid transparent;border-radius:var(--reactist-tab-border-radius)}._06f1b8a1{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}.a1064a3b,.dabbec7d{color:var(--reactist-tab-neutral-unselected)}.dabbec7d[aria-selected=true],.a1064a3b[aria-selected=true]{background-color:var(--reactist-tab-neutral-background);color:var(--reactist-tab-neutral-foreground);border-color:var(--reactist-tab-neutral-border)}.e6f5ae4e{color:var(--reactist-tab-themed-unselected)}.e6f5ae4e[aria-selected=true]{background-color:var(--reactist-tab-themed-background);color:var(--reactist-tab-themed-foreground);border-color:var(--reactist-tab-themed-border)}._06f1b8a1,._43913ce5{background:var(--reactist-tab-neutral-track);border-color:var(--reactist-tab-neutral-track)}._39bdfdde{background:var(--reactist-tab-themed-track);border-color:var(--reactist-tab-themed-track)}._1c148f4e{margin-top:var(--reactist-spacing-xsmall)}._2a370df5{margin-top:var(--reactist-spacing-small)}._77430437{margin-top:var(--reactist-spacing-medium)}._33db5352{margin-top:var(--reactist-spacing-large)}._60bf9564{margin-top:var(--reactist-spacing-xlarge)}._29a35080{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;--reactist-tab-height:30px}.a1064a3b{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:var(--reactist-tab-height);z-index:1;text-decoration:none;border:var(--reactist-tab-border-width) solid transparent;border-radius:var(--reactist-tab-border-radius)}._06f1b8a1{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}.a1064a3b,.dabbec7d{color:var(--reactist-tab-neutral-unselected)}.dabbec7d[aria-selected=true],.a1064a3b[aria-selected=true]{background-color:var(--reactist-tab-neutral-background);color:var(--reactist-tab-neutral-foreground);border-color:var(--reactist-tab-neutral-border)}.e6f5ae4e{color:var(--reactist-tab-themed-unselected)}.e6f5ae4e[aria-selected=true]{background-color:var(--reactist-tab-themed-background);color:var(--reactist-tab-themed-foreground);border-color:var(--reactist-tab-themed-border)}._06f1b8a1,._43913ce5{background:var(--reactist-tab-neutral-track);border-color:var(--reactist-tab-neutral-track)}._39bdfdde{background:var(--reactist-tab-themed-track);border-color:var(--reactist-tab-themed-track)}._1c148f4e{margin-top:var(--reactist-spacing-xsmall)}._2a370df5{margin-top:var(--reactist-spacing-small)}._77430437{margin-top:var(--reactist-spacing-medium)}._33db5352{margin-top:var(--reactist-spacing-large)}._60bf9564{margin-top:var(--reactist-spacing-xlarge)}._29a35080{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;--reactist-tab-height:30px}.a1064a3b{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:var(--reactist-tab-height);z-index:1;text-decoration:none;border:var(--reactist-tab-border-width) solid transparent;border-radius:var(--reactist-tab-border-radius)}._06f1b8a1{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}.a1064a3b,.dabbec7d{color:var(--reactist-tab-neutral-unselected)}.dabbec7d[aria-selected=true],.a1064a3b[aria-selected=true]{background-color:var(--reactist-tab-neutral-background);color:var(--reactist-tab-neutral-foreground);border-color:var(--reactist-tab-neutral-border)}.e6f5ae4e{color:var(--reactist-tab-themed-unselected)}.e6f5ae4e[aria-selected=true]{background-color:var(--reactist-tab-themed-background);color:var(--reactist-tab-themed-foreground);border-color:var(--reactist-tab-themed-border)}._06f1b8a1,._43913ce5{background:var(--reactist-tab-neutral-track);border-color:var(--reactist-tab-neutral-track)}._39bdfdde{background:var(--reactist-tab-themed-track);border-color:var(--reactist-tab-themed-track)}._1c148f4e{margin-top:var(--reactist-spacing-xsmall)}._2a370df5{margin-top:var(--reactist-spacing-small)}._77430437{margin-top:var(--reactist-spacing-medium)}._33db5352{margin-top:var(--reactist-spacing-large)}._60bf9564{margin-top:var(--reactist-spacing-xlarge)}._29a35080{margin-top:var(--reactist-spacing-xxlarge)}