@doist/reactist 28.7.2 → 28.7.3

package/lib/tabs/tabs.js

@@ -1,2 +1,178 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("classnames"),n=require("@ariakit/react"),l=require("../box/box.js"),a=require("../inline/inline.js"),c=require("./tabs.module.css.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var o=s(t),i=u(r);const d=["children","space","width","align","exceptionallySetClassName"],f=["children","id","renderMode"],b=o.createContext(null),m=o.forwardRef((function({children:e,id:t,disabled:r,exceptionallySetClassName:l,render:a,onClick:u},s){const d=o.useContext(b);if(!d)return null;const{variant:f,tabStore:m}=d,p=i.default(l,c.default.tab,c.default["tab-"+f]);return o.createElement(n.Tab,{id:t,ref:s,disabled:r,store:m,render:a,className:p,onClick:u},e)})),p=o.forwardRef((function(t,r){let{children:l,id:a,renderMode:c="always"}=t,u=e.objectWithoutProperties(t,f);const s=o.useContext(b),[i,d]=o.useState(!1),m=(null==s?void 0:s.tabStore.useState("selectedId"))===a;if(o.useEffect((function(){!i&&m&&d(!0)}),[i,m]),!s)return null;const{tabStore:p}=s;return"always"===c||"active"===c&&m||"lazy"===c&&(m||i)?o.createElement(n.TabPanel,e.objectSpread2(e.objectSpread2({},u),{},{tabId:a,store:p,ref:r}),l):null}));exports.Tab=m,exports.TabAwareSlot=function({children:e}){const t=o.useContext(b),r=null==t?void 0:t.tabStore.useState("selectedId");return t?e({selectedId:r}):null},exports.TabList=function(t){let{children:r,space:u,width:s="maxContent",align:f="start",exceptionallySetClassName:m}=t,p=e.objectWithoutProperties(t,d);const S=o.useRef(null),x=o.useRef(0),v=o.useContext(b),[h,y]=o.useState(null),[j,C]=o.useState({}),E=null==v?void 0:v.tabStore.useState("selectedId"),I=o.useCallback((function(){if(!E||!S.current)return;const e=S.current.querySelectorAll('[role="tab"]'),t=Array.from(e).find(e=>e.getAttribute("id")===E);t&&(y(t),C({left:t.offsetLeft+"px",width:t.offsetWidth+"px"}))}),[E]);if(o.useEffect((function(){I()}),[E,I]),o.useEffect((function(){let e=null;const t=new ResizeObserver(([t])=>{const r=null==t?void 0:t.contentRect.width;r&&x.current!==r&&(x.current=r,null!==e&&cancelAnimationFrame(e),e=requestAnimationFrame(()=>{I(),e=null}))});return S.current&&t.observe(S.current),function(){e&&cancelAnimationFrame(e),t.disconnect()}}),[I]),!v)return null;const{tabStore:w,variant:T}=v;return o.createElement(l.Box,{display:"flex",justifyContent:"full"===s?"center":{start:"flexStart",end:"flexEnd",center:"center"}[f]},o.createElement(n.TabList,e.objectSpread2({store:w,render:o.createElement(l.Box,{position:"relative",width:s,className:m}),ref:S},p),o.createElement(l.Box,{className:[c.default.track,c.default["track-"+T]]}),h?o.createElement(l.Box,{className:[c.default.selected,c.default["selected-"+T]],style:j}):null,o.createElement(a.Inline,{space:u,exceptionallySetClassName:i.default("full"===s?c.default.fullTabList:null)},r)))},exports.TabPanel=p,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:r,variant:l="neutral",onSelectedIdChange:a}){const c=n.useTabStore({defaultSelectedId:r,selectedId:t,setSelectedId:a}),u=c.useState("selectedId"),s=o.useMemo(()=>({tabStore:c,variant:l,selectedId:t??u??null}),[l,c,t,u]);return o.createElement(b.Provider,{value:s},e)};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames');
+var react = require('@ariakit/react');
+var box = require('../box/box.js');
+var inline = require('../inline/inline.js');
+var tabs_module = require('./tabs.module.css.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+
+var TabsContext = React__namespace.createContext(null);
+/**
+ * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.
+ */
+function Tabs(_a) {
+    var children = _a.children, selectedId = _a.selectedId, defaultSelectedId = _a.defaultSelectedId, _b = _a.variant, variant = _b === void 0 ? 'neutral' : _b, onSelectedIdChange = _a.onSelectedIdChange;
+    var tabStore = react.useTabStore({
+        defaultSelectedId: defaultSelectedId,
+        selectedId: selectedId,
+        setSelectedId: onSelectedIdChange
+    });
+    var actualSelectedId = tabStore.useState('selectedId');
+    var memoizedTabState = React__namespace.useMemo(function () { var _a; return ({ tabStore: tabStore, variant: variant, selectedId: (_a = selectedId !== null && selectedId !== void 0 ? selectedId : actualSelectedId) !== null && _a !== void 0 ? _a : null }); }, [variant, tabStore, selectedId, actualSelectedId]);
+    return React__namespace.createElement(TabsContext.Provider, { value: memoizedTabState }, children);
+}
+/**
+ * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
+ */
+var Tab = React__namespace.forwardRef(function Tab(_a, ref) {
+    var children = _a.children, id = _a.id, disabled = _a.disabled, exceptionallySetClassName = _a.exceptionallySetClassName, render = _a.render, onClick = _a.onClick;
+    var tabContextValue = React__namespace.useContext(TabsContext);
+    if (!tabContextValue)
+        return null;
+    var variant = tabContextValue.variant, tabStore = tabContextValue.tabStore;
+    var className = classNames__default["default"](exceptionallySetClassName, tabs_module["default"].tab, tabs_module["default"]["tab-".concat(variant)]);
+    return (React__namespace.createElement(react.Tab, { id: id, ref: ref, disabled: disabled, store: tabStore, render: render, className: className, onClick: onClick }, children));
+});
+/**
+ * A component used to group `<Tab>` elements together.
+ */
+function TabList(_a) {
+    var children = _a.children, space = _a.space, _b = _a.width, width = _b === void 0 ? 'maxContent' : _b, _c = _a.align, align = _c === void 0 ? 'start' : _c, exceptionallySetClassName = _a.exceptionallySetClassName, props = tslib.__rest(_a, ["children", "space", "width", "align", "exceptionallySetClassName"]);
+    var tabListRef = React__namespace.useRef(null);
+    var tabListPrevWidthRef = React__namespace.useRef(0);
+    var tabContextValue = React__namespace.useContext(TabsContext);
+    var _d = React__namespace.useState(null), selectedTabElement = _d[0], setSelectedTabElement = _d[1];
+    var _e = React__namespace.useState({}), selectedTabStyle = _e[0], setSelectedTabStyle = _e[1];
+    var selectedId = tabContextValue === null || tabContextValue === void 0 ? void 0 : tabContextValue.tabStore.useState('selectedId');
+    var updateSelectedTabPosition = React__namespace.useCallback(function updateSelectedTabPositionCallback() {
+        if (!selectedId || !tabListRef.current) {
+            return;
+        }
+        var tabs = tabListRef.current.querySelectorAll('[role="tab"]');
+        var selectedTab = Array.from(tabs).find(function (tab) { return tab.getAttribute('id') === selectedId; });
+        if (selectedTab) {
+            setSelectedTabElement(selectedTab);
+            setSelectedTabStyle({
+                left: "".concat(selectedTab.offsetLeft, "px"),
+                width: "".concat(selectedTab.offsetWidth, "px")
+            });
+        }
+    }, [selectedId]);
+    React__namespace.useEffect(function updateSelectedTabPositionOnTabChange() {
+        updateSelectedTabPosition();
+    }, 
+    // `selectedId` is a dependency to ensure the effect runs when the selected tab changes
+    [selectedId, updateSelectedTabPosition]);
+    React__namespace.useEffect(function observeTabListWidthChange() {
+        var animationFrameId = null;
+        var tabListObserver = new ResizeObserver(function (_a) {
+            var entry = _a[0];
+            var width = entry === null || entry === void 0 ? void 0 : entry.contentRect.width;
+            if (width && tabListPrevWidthRef.current !== width) {
+                tabListPrevWidthRef.current = width;
+                if (animationFrameId !== null) {
+                    cancelAnimationFrame(animationFrameId);
+                }
+                animationFrameId = requestAnimationFrame(function () {
+                    updateSelectedTabPosition();
+                    animationFrameId = null;
+                });
+            }
+        });
+        if (tabListRef.current) {
+            tabListObserver.observe(tabListRef.current);
+        }
+        return function cleanupResizeObserver() {
+            if (animationFrameId) {
+                cancelAnimationFrame(animationFrameId);
+            }
+            tabListObserver.disconnect();
+        };
+    }, [updateSelectedTabPosition]);
+    if (!tabContextValue) {
+        return null;
+    }
+    var tabStore = tabContextValue.tabStore, variant = tabContextValue.variant;
+    var justifyContentAlignMap = {
+        start: 'flexStart',
+        end: 'flexEnd',
+        center: 'center'
+    };
+    return (
+    // This extra <Box> not only provides alignment for the tabs, but also prevents <Inline>'s
+    // negative margins from collapsing when used in a flex container which will render the
+    // track with the wrong height
+    React__namespace.createElement(box.Box, { display: "flex", justifyContent: width === 'full' ? 'center' : justifyContentAlignMap[align] },
+        React__namespace.createElement(react.TabList, tslib.__assign({ store: tabStore, render: React__namespace.createElement(box.Box, { position: "relative", width: width, className: exceptionallySetClassName }), ref: tabListRef }, props),
+            React__namespace.createElement(box.Box, { className: [tabs_module["default"].track, tabs_module["default"]["track-".concat(variant)]] }),
+            selectedTabElement ? (React__namespace.createElement(box.Box, { className: [tabs_module["default"].selected, tabs_module["default"]["selected-".concat(variant)]], style: selectedTabStyle })) : null,
+            React__namespace.createElement(inline.Inline, { space: space, exceptionallySetClassName: classNames__default["default"](width === 'full' ? tabs_module["default"].fullTabList : null) }, children))));
+}
+/**
+ * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a
+ * corresponding `<Tab>` component.
+ */
+var TabPanel = React__namespace.forwardRef(function TabPanel(_a, ref) {
+    var children = _a.children, id = _a.id, _b = _a.renderMode, renderMode = _b === void 0 ? 'always' : _b, props = tslib.__rest(_a, ["children", "id", "renderMode"]);
+    var tabContextValue = React__namespace.useContext(TabsContext);
+    var _c = React__namespace.useState(false), tabRendered = _c[0], setTabRendered = _c[1];
+    var selectedId = tabContextValue === null || tabContextValue === void 0 ? void 0 : tabContextValue.tabStore.useState('selectedId');
+    var tabIsActive = selectedId === id;
+    React__namespace.useEffect(function trackTabRenderedState() {
+        if (!tabRendered && tabIsActive) {
+            setTabRendered(true);
+        }
+    }, [tabRendered, tabIsActive]);
+    if (!tabContextValue) {
+        return null;
+    }
+    var tabStore = tabContextValue.tabStore;
+    var shouldRender = renderMode === 'always' ||
+        (renderMode === 'active' && tabIsActive) ||
+        (renderMode === 'lazy' && (tabIsActive || tabRendered));
+    return shouldRender ? (React__namespace.createElement(react.TabPanel, tslib.__assign({}, props, { tabId: id, store: tabStore, ref: ref }), children)) : null;
+});
+/**
+ * Allows content to be rendered based on the current tab being selected while outside of the
+ * TabPanel component. Can be placed freely within the main `<Tabs>` component.
+ */
+function TabAwareSlot(_a) {
+    var children = _a.children;
+    var tabContextValue = React__namespace.useContext(TabsContext);
+    var selectedId = tabContextValue === null || tabContextValue === void 0 ? void 0 : tabContextValue.tabStore.useState('selectedId');
+    return tabContextValue ? children({ selectedId: selectedId }) : null;
+}
+
+exports.Tab = Tab;
+exports.TabAwareSlot = TabAwareSlot;
+exports.TabList = TabList;
+exports.TabPanel = TabPanel;
+exports.Tabs = Tabs;
 //# sourceMappingURL=tabs.js.map

package/lib/tabs/tabs.js.map

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

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

@@ -1,2 +1,8 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={tab:"_33c9c271",fullTabList:"_479349aa",track:"_2862a4ba",selected:"_1161c811","tab-neutral":"_9502e79a","tab-themed":"c39f1053","track-neutral":"b3554a83","track-themed":"_511b0be0","selected-neutral":"c81dc609","selected-themed":"_87552972"};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_40c67f5b = {"tab":"_33c9c271","fullTabList":"_479349aa","track":"_2862a4ba","selected":"_1161c811","tab-neutral":"_9502e79a","tab-themed":"c39f1053","track-neutral":"b3554a83","track-themed":"_511b0be0","selected-neutral":"c81dc609","selected-themed":"_87552972"};
+
+exports["default"] = modules_40c67f5b;
 //# sourceMappingURL=tabs.module.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"tabs.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/lib/text/index.d.ts

@@ -1 +1 @@
-export * from './text';
+export * from './text';

package/lib/text/text.d.ts

@@ -1,47 +1,47 @@
-import * as React from 'react';
-import type { Tone } from '../utils/common-types';
-import type { BoxProps } from '../box';
-type TextProps = {
-    children: React.ReactNode;
-    /**
-     * The size of the text.
-     *
-     * The supported values, from smaller size to larger size, are:
-     * 'caption', 'copy', 'body', and 'subtitle'
-     *
-     * @default 'body'
-     */
-    size?: 'caption' | 'copy' | 'body' | 'subtitle';
-    /**
-     * The weight of the text font.
-     *
-     * @default 'regular'
-     */
-    weight?: 'regular' | 'semibold' | 'bold';
-    /**
-     * The tone (semantic color) of the text.
-     *
-     * @default 'normal'
-     */
-    tone?: Tone;
-    /**
-     * Used to truncate the text to a given number of lines.
-     *
-     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was
-     * truncated. If the text fits without it being truncated, no ellipsis is added.
-     *
-     * By default, the text is not truncated at all, no matter how many lines it takes to render it.
-     *
-     * @default undefined
-     */
-    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5';
-    /**
-     * How to align the text horizontally.
-     *
-     * @default 'start'
-     */
-    align?: BoxProps['textAlign'];
-};
-declare const Text: import("../utils/polymorphism").PolymorphicComponent<"div", TextProps, "obfuscateClassName">;
-export type { TextProps };
-export { Text };
+import * as React from 'react';
+import type { Tone } from '../utils/common-types';
+import type { BoxProps } from '../box';
+type TextProps = {
+    children: React.ReactNode;
+    /**
+     * The size of the text.
+     *
+     * The supported values, from smaller size to larger size, are:
+     * 'caption', 'copy', 'body', and 'subtitle'
+     *
+     * @default 'body'
+     */
+    size?: 'caption' | 'copy' | 'body' | 'subtitle';
+    /**
+     * The weight of the text font.
+     *
+     * @default 'regular'
+     */
+    weight?: 'regular' | 'semibold' | 'bold';
+    /**
+     * The tone (semantic color) of the text.
+     *
+     * @default 'normal'
+     */
+    tone?: Tone;
+    /**
+     * Used to truncate the text to a given number of lines.
+     *
+     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was
+     * truncated. If the text fits without it being truncated, no ellipsis is added.
+     *
+     * By default, the text is not truncated at all, no matter how many lines it takes to render it.
+     *
+     * @default undefined
+     */
+    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5';
+    /**
+     * How to align the text horizontally.
+     *
+     * @default 'start'
+     */
+    align?: BoxProps['textAlign'];
+};
+declare const Text: import("../utils/polymorphism").PolymorphicComponent<"div", TextProps, "obfuscateClassName">;
+export type { TextProps };
+export { Text };

package/lib/text/text.js

@@ -1,2 +1,50 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),l=require("../utils/responsive-props.js"),r=require("../box/box.js"),a=require("../utils/polymorphism.js"),s=require("./text.module.css.js");function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(l){if("default"!==l){var r=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(t,l,r.get?r:{enumerable:!0,get:function(){return e[l]}})}})),t.default=e,t}var n=i(t);const o=["as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName"];exports.Text=a.polymorphicComponent((function(t,a){let{as:i,size:u="body",weight:p="regular",tone:c="normal",align:d,children:m,lineClamp:g,exceptionallySetClassName:f}=t,b=e.objectWithoutProperties(t,o);const j="string"==typeof g?Number(g)>1:(g??1)>1;return n.createElement(r.Box,e.objectSpread2(e.objectSpread2({},b),{},{as:i,className:[f,s.default.text,"body"!==u?l.getClassNames(s.default,"size",u):null,"regular"!==p?l.getClassNames(s.default,"weight",p):null,"normal"!==c?l.getClassNames(s.default,"tone",c):null,j?s.default.lineClampMultipleLines:null,g?l.getClassNames(s.default,"lineClamp",g.toString()):null],textAlign:d,paddingRight:g?"xsmall":void 0,ref:a}),m)}));
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var responsiveProps = require('../utils/responsive-props.js');
+var box = require('../box/box.js');
+var polymorphism = require('../utils/polymorphism.js');
+var text_module = require('./text.module.css.js');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var Text = polymorphism.polymorphicComponent(function Text(_a, ref) {
+    var as = _a.as, _b = _a.size, size = _b === void 0 ? 'body' : _b, _c = _a.weight, weight = _c === void 0 ? 'regular' : _c, _d = _a.tone, tone = _d === void 0 ? 'normal' : _d, align = _a.align, children = _a.children, lineClamp = _a.lineClamp, exceptionallySetClassName = _a.exceptionallySetClassName, props = tslib.__rest(_a, ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"]);
+    var lineClampMultipleLines = typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp !== null && lineClamp !== void 0 ? lineClamp : 1) > 1;
+    return (React__namespace.createElement(box.Box, tslib.__assign({}, props, { as: as, className: [
+            exceptionallySetClassName,
+            text_module["default"].text,
+            size !== 'body' ? responsiveProps.getClassNames(text_module["default"], 'size', size) : null,
+            weight !== 'regular' ? responsiveProps.getClassNames(text_module["default"], 'weight', weight) : null,
+            tone !== 'normal' ? responsiveProps.getClassNames(text_module["default"], 'tone', tone) : null,
+            lineClampMultipleLines ? text_module["default"].lineClampMultipleLines : null,
+            lineClamp ? responsiveProps.getClassNames(text_module["default"], 'lineClamp', lineClamp.toString()) : null,
+        ], textAlign: align, 
+        // Prevents emojis from being cut-off
+        // See https://github.com/Doist/reactist/pull/528
+        paddingRight: lineClamp ? 'xsmall' : undefined, ref: ref }), children));
+});
+
+exports.Text = Text;
 //# sourceMappingURL=text.js.map

package/lib/text/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../src/text/text.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../utils/polymorphism'\n\nimport type { Tone } from '../utils/common-types'\nimport type { BoxProps } from '../box'\n\nimport styles from './text.module.css'\n\ntype TextProps = {\n    children: React.ReactNode\n    /**\n     * The size of the text.\n     *\n     * The supported values, from smaller size to larger size, are:\n     * 'caption', 'copy', 'body', and 'subtitle'\n     *\n     * @default 'body'\n     */\n    size?: 'caption' | 'copy' | 'body' | 'subtitle'\n    /**\n     * The weight of the text font.\n     *\n     * @default 'regular'\n     */\n    weight?: 'regular' | 'semibold' | 'bold'\n    /**\n     * The tone (semantic color) of the text.\n     *\n     * @default 'normal'\n     */\n    tone?: Tone\n    /**\n     * Used to truncate the text to a given number of lines.\n     *\n     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was\n     * truncated. If the text fits without it being truncated, no ellipsis is added.\n     *\n     * By default, the text is not truncated at all, no matter how many lines it takes to render it.\n     *\n     * @default undefined\n     */\n    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n    /**\n     * How to align the text horizontally.\n     *\n     * @default 'start'\n     */\n    align?: BoxProps['textAlign']\n}\n\nconst Text = polymorphicComponent<'div', TextProps>(function Text(\n    {\n        as,\n        size = 'body',\n        weight = 'regular',\n        tone = 'normal',\n        align,\n        children,\n        lineClamp,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const lineClampMultipleLines =\n        typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp ?? 1) > 1\n\n    return (\n        <Box\n            {...props}\n            as={as}\n            className={[\n                exceptionallySetClassName,\n                styles.text,\n                size !== 'body' ? getClassNames(styles, 'size', size) : null,\n                weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n                tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n                lineClampMultipleLines ? styles.lineClampMultipleLines : null,\n                lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null,\n            ]}\n            textAlign={align}\n            // Prevents emojis from being cut-off\n            // See https://github.com/Doist/reactist/pull/528\n            paddingRight={lineClamp ? 'xsmall' : undefined}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type { TextProps }\nexport { Text }\n"],"names":["polymorphicComponent","_ref","ref","as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName","props","_objectWithoutProperties","objectWithoutProperties","_excluded","lineClampMultipleLines","Number","React","createElement","Box","className","styles","text","getClassNames","toString","textAlign","paddingRight","undefined"],"mappings":"uqBAoDaA,EAAAA,sBAAuC,SAAAC,EAYhDC,GAAG,IAXHC,GACIA,EADJC,KAEIA,EAAO,OAFXC,OAGIA,EAAS,UAHbC,KAIIA,EAAO,SAJXC,MAKIA,EALJC,SAMIA,EANJC,UAOIA,EAPJC,0BAQIA,GAGDT,EAFIU,EAEJC,EAAAC,wBAAAZ,EAAAa,GAEH,MAAMC,EACmB,iBAAdN,EAAyBO,OAAOP,GAAa,GAAKA,GAAa,GAAK,EAE/E,OACIQ,EAACC,cAAAC,yCACOR,GADR,GAAA,CAEIR,GAAIA,EACJiB,UAAW,CACPV,EACAW,UAAOC,KACE,SAATlB,EAAkBmB,EAAaA,cAACF,UAAQ,OAAQjB,GAAQ,KAC7C,YAAXC,EAAuBkB,EAAaA,cAACF,UAAQ,SAAUhB,GAAU,KACxD,WAATC,EAAoBiB,EAAaA,cAACF,UAAQ,OAAQf,GAAQ,KAC1DS,EAAyBM,EAAM,QAACN,uBAAyB,KACzDN,EAAYc,EAAAA,cAAcF,EAAD,QAAS,YAAaZ,EAAUe,YAAc,MAE3EC,UAAWlB,EAGXmB,aAAcjB,EAAY,cAAWkB,EACrCzB,IAAKA,IAEJM"}
+{"version":3,"file":"text.js","sources":["../../src/text/text.tsx"],"sourcesContent":[null],"names":["polymorphicComponent","__rest","React","Box","__assign","styles","getClassNames"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDM,IAAA,IAAI,GAAGA,iCAAoB,CAAmB,SAAS,IAAI,CAC7D,EAUC,EACD,GAAG,EAAA;AAVC,IAAA,IAAA,EAAE,GAAA,EAAA,CAAA,EAAA,EACF,EAAa,GAAA,EAAA,CAAA,IAAA,EAAb,IAAI,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,MAAM,GAAA,EAAA,EACb,cAAkB,EAAlB,MAAM,mBAAG,SAAS,GAAA,EAAA,EAClB,EAAe,GAAA,EAAA,CAAA,IAAA,EAAf,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAQ,GAAA,EAAA,EACf,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,yBAAyB,GAAA,EAAA,CAAA,yBAAA,EACtB,KAAK,GAAAC,YAAA,CAAA,EAAA,EATZ,+FAUC,CADW,CAAA;AAIZ,IAAA,IAAM,sBAAsB,GACxB,OAAO,SAAS,KAAK,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,KAAT,IAAA,IAAA,SAAS,KAAT,KAAA,CAAA,GAAA,SAAS,GAAI,CAAC,IAAI,CAAC,CAAA;IAEhF,QACIC,gBAAC,CAAA,aAAA,CAAAC,OAAG,EACIC,cAAA,CAAA,EAAA,EAAA,KAAK,EACT,EAAA,EAAE,EAAE,EAAE,EACN,SAAS,EAAE;YACP,yBAAyB;AACzB,YAAAC,sBAAM,CAAC,IAAI;AACX,YAAA,IAAI,KAAK,MAAM,GAAGC,6BAAa,CAACD,sBAAM,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,IAAI;AAC5D,YAAA,MAAM,KAAK,SAAS,GAAGC,6BAAa,CAACD,sBAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,GAAG,IAAI;AACrE,YAAA,IAAI,KAAK,QAAQ,GAAGC,6BAAa,CAACD,sBAAM,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,IAAI;YAC9D,sBAAsB,GAAGA,sBAAM,CAAC,sBAAsB,GAAG,IAAI;AAC7D,YAAA,SAAS,GAAGC,6BAAa,CAACD,sBAAM,EAAE,WAAW,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,GAAG,IAAI;SAC9E,EACD,SAAS,EAAE,KAAK;;;AAGhB,QAAA,YAAY,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,EAC9C,GAAG,EAAE,GAAG,KAEP,QAAQ,CACP,EACT;AACL,CAAC;;;;"}

package/lib/text/text.module.css.js

@@ -1,2 +1,8 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={text:"a83bd4e0","size-caption":"_266d6623","size-copy":"a8d37c6e","size-subtitle":"_39f4eb1f","weight-semibold":"_7be5c531","weight-bold":"e214ff2e","tone-secondary":"_6a3e5ade","tone-danger":"_8f5b5f2b","tone-positive":"_9ae47ae4",lineClampMultipleLines:"_969f18f7","lineClamp-1":"_2f303ac3","lineClamp-2":"d3e04245","lineClamp-3":"_33411704","lineClamp-4":"bfc32640","lineClamp-5":"f813c82f"};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_a9637dd3 = {"text":"a83bd4e0","size-caption":"_266d6623","size-copy":"a8d37c6e","size-subtitle":"_39f4eb1f","weight-semibold":"_7be5c531","weight-bold":"e214ff2e","tone-secondary":"_6a3e5ade","tone-danger":"_8f5b5f2b","tone-positive":"_9ae47ae4","lineClampMultipleLines":"_969f18f7","lineClamp-1":"_2f303ac3","lineClamp-2":"d3e04245","lineClamp-3":"_33411704","lineClamp-4":"bfc32640","lineClamp-5":"f813c82f"};
+
+exports["default"] = modules_a9637dd3;
 //# sourceMappingURL=text.module.css.js.map

package/lib/text/text.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"text.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

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

@@ -1 +1 @@
-export * from './text-area';
+export * from './text-area';

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

@@ -1,39 +1,39 @@
-import * as React from 'react';
-import { BaseFieldVariantProps, FieldComponentProps } from '../base-field';
-interface TextAreaProps extends Omit<FieldComponentProps<HTMLTextAreaElement>, 'characterCountPosition'>, Omit<BaseFieldVariantProps, 'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition' | 'value'> {
-    /**
-     * The value of the text area.
-     *
-     * If this prop is not specified, the text area will be uncontrolled and the component will
-     * manage its own state.
-     */
-    value?: string;
-    /**
-     * The number of visible text lines for the text area.
-     *
-     * If it is specified, it must be a positive integer. If it is not specified, the default
-     * value is 2 (set by the browser).
-     *
-     * When `autoExpand` is true, this value serves the purpose of specifying the minimum number
-     * of rows that the textarea will shrink to when the content is not large enough to make it
-     * expand.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows
-     */
-    rows?: number;
-    /**
-     * If `true`, the textarea will be automatically resized to fit the content, and the ability to
-     * manually resize the textarea will be disabled.
-     */
-    autoExpand?: boolean;
-    /**
-     * If `true`, the ability to manually resize the textarea will be disabled.
-     *
-     * When `autoExpand` is true, this property serves no purpose, because the ability to manually
-     * resize the textarea is always disabled when `autoExpand` is true.
-     */
-    disableResize?: boolean;
-}
-declare const TextArea: React.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
-export { TextArea };
-export type { TextAreaProps };
+import * as React from 'react';
+import { BaseFieldVariantProps, FieldComponentProps } from '../base-field';
+interface TextAreaProps extends Omit<FieldComponentProps<HTMLTextAreaElement>, 'characterCountPosition'>, Omit<BaseFieldVariantProps, 'supportsStartAndEndSlots' | 'endSlot' | 'endSlotPosition' | 'value'> {
+    /**
+     * The value of the text area.
+     *
+     * If this prop is not specified, the text area will be uncontrolled and the component will
+     * manage its own state.
+     */
+    value?: string;
+    /**
+     * The number of visible text lines for the text area.
+     *
+     * If it is specified, it must be a positive integer. If it is not specified, the default
+     * value is 2 (set by the browser).
+     *
+     * When `autoExpand` is true, this value serves the purpose of specifying the minimum number
+     * of rows that the textarea will shrink to when the content is not large enough to make it
+     * expand.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows
+     */
+    rows?: number;
+    /**
+     * If `true`, the textarea will be automatically resized to fit the content, and the ability to
+     * manually resize the textarea will be disabled.
+     */
+    autoExpand?: boolean;
+    /**
+     * If `true`, the ability to manually resize the textarea will be disabled.
+     *
+     * When `autoExpand` is true, this property serves no purpose, because the ability to manually
+     * resize the textarea is always disabled when `autoExpand` is true.
+     */
+    disableResize?: boolean;
+}
+declare const TextArea: React.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export { TextArea };
+export type { TextAreaProps };