@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/tag/types.d.ts

@@ -1,18 +1,20 @@
 import * as React from 'react';
 import { AvatarProps } from '../avatar';
 import { Override } from '../overrides';
-import { ClassName } from '../types';
-export declare type Intent = 'success' | 'error' | 'warning' | 'info' | 'default' | 'ai';
-export declare type Variant = 'solid' | 'light';
-export declare type Size = 'xxxs' | 'sm' | 'lg';
-export declare type TagOverrides = {
+import { ClassName, SpacewebComponentProps } from '../types';
+export type Intent = 'success' | 'error' | 'warning' | 'info' | 'default' | 'ai';
+export type Appearance = 'gray' | 'white' | 'outline';
+export type Variant = 'solid' | 'light';
+export type Size = 'xxxs' | 'sm' | 'lg' | 'small' | 'medium' | 'large';
+export type Shape = 'default' | 'pill';
+export type TagOverrides = {
     Root?: Override<SharedProps & Record<string, any>>;
     Action?: Override<SharedProps & Record<string, any>>;
     ActionIcon?: Override<SharedProps & Record<string, any>>;
     Text?: Override<SharedProps & Record<string, any>>;
     StartEnhancer?: Override<SharedProps & Record<string, any>>;
 };
-export declare type TagProps = {
+export type TagProps = SpacewebComponentProps<{
     closeable?: boolean;
     isFocused?: boolean;
     isHovered?: boolean;
@@ -26,28 +28,46 @@ export declare type TagProps = {
     overrides?: TagOverrides;
     startEnhancer?: React.ReactNode | ((props: {
         $withStartEnhancer: boolean;
+        $withChildren: boolean;
         $size: Size;
         $intent: Intent;
+        $appearance: Appearance;
+        /**
+         * @deprecated: Check designs for HDS 2.0
+         */
         $variant: Variant;
     }) => React.ReactNode);
     intent?: Intent;
+    appearance?: Appearance;
+    /**
+     * @deprecated: Check designs for HDS 2.0
+     */
     variant?: Variant;
     size?: Size;
-};
-export declare type AvatarTagProps = Omit<TagProps, 'overrides'> & {
+    shape?: Shape;
+    noTooltipOnTruncation?: boolean;
+}>;
+export type AvatarTagProps = Omit<TagProps, 'overrides'> & {
     avatarProps: AvatarProps;
     overrides?: TagProps['overrides'] & {
         StartEnhancer?: Override<Record<string, any>>;
     };
 };
-export declare type SharedProps = {
+export type SharedProps = {
     $clickable?: boolean;
     $closeable?: boolean;
     $isFocused?: boolean;
     $isHovered?: boolean;
     $isFocusVisible: boolean;
     $withStartEnhancer: boolean;
+    $withChildren: boolean;
     $intent?: Intent;
+    $appearance?: Appearance;
+    /**
+     * @deprecated: Check designs for HDS 2.0
+     */
     $variant?: Variant;
     $size?: Size;
+    $shape?: Shape;
+    $addHoverStyles?: boolean;
 };

package/esm/tag/utils.d.ts

@@ -1,52 +1,38 @@
 import * as React from 'react';
 import { Theme } from '@sprinklrjs/spaceweb-themes/types';
+export declare const getActionIconButtonOverrides: (size: any) => "h-3.5 w-3.5 rounded-2" | "h-4 w-4 rounded-3" | "h-4.5 w-4.5 rounded-3" | "h-6 w-6 rounded-4";
 export declare function getTextFromChildren(children: React.ReactNode): string | null;
 export declare const getDefaultTagSize: (theme: Theme) => 'xxxs' | 'sm' | 'lg';
 export declare const tagSizeMap: {
     xxxs: {
-        paddingY: string;
-        paddingX: string;
-        height: string;
-        fontSize: string;
-        lineHeight: string;
         borderRadius: string;
         avatarIconSize: number;
         clearableIconSize: string;
-        clearableIconButtonSize: string;
-        clearableIconButtonBorderRadius: string;
-        clearableIconMarginX: string;
-        startEnhancerMarginLeft: string;
-        startEnhancerMarginRight: string;
     };
     sm: {
-        paddingY: string;
-        paddingX: string;
-        height: string;
-        fontSize: string;
-        lineHeight: string;
         borderRadius: string;
         avatarIconSize: number;
         clearableIconSize: string;
-        clearableIconButtonSize: string;
-        clearableIconButtonBorderRadius: string;
-        clearableIconMarginX: string;
-        startEnhancerMarginLeft: string;
-        startEnhancerMarginRight: string;
     };
     lg: {
-        paddingY: string;
-        paddingX: string;
-        height: string;
-        fontSize: string;
-        lineHeight: string;
         borderRadius: string;
         avatarIconSize: number;
         clearableIconSize: string;
-        clearableIconButtonSize: string;
-        clearableIconButtonBorderRadius: string;
-        clearableIconMarginX: string;
-        startEnhancerMarginLeft: string;
-        startEnhancerMarginRight: string;
+    };
+    small: {
+        borderRadius: string;
+        avatarIconSize: number;
+        clearableIconSize: string;
+    };
+    medium: {
+        borderRadius: string;
+        avatarIconSize: number;
+        clearableIconSize: string;
+    };
+    large: {
+        borderRadius: string;
+        avatarIconSize: number;
+        clearableIconSize: string;
     };
 };
 export declare const getTagSizeTheme: (theme: any, size: any) => any;

package/esm/tag/utils.js

@@ -1,6 +1,21 @@
 import * as React from 'react';
 import { getComponentSizeTheme } from '../helpers/themeHelpers';
 var JOINABLE_TYPES = new Set(['string', 'number']);
+export var getActionIconButtonOverrides = function (size) {
+    switch (size) {
+        case 'xxxs':
+            return 'h-3.5 w-3.5 rounded-2';
+        case 'sm':
+            return 'h-4 w-4 rounded-3';
+        case 'lg':
+        default:
+            return 'h-4.5 w-4.5 rounded-3';
+        case 'small':
+        case 'medium':
+        case 'large':
+            return 'h-6 w-6 rounded-4';
+    }
+};
 // Checks the children of a React component to ensure every value is a number
 // or a string. If they are, they are joined and returned. Useful for collecting
 // text from the child of a node to use as an attribute.
@@ -32,49 +47,34 @@ export var getDefaultTagSize = function (theme) {
 };
 export var tagSizeMap = {
     xxxs: {
-        paddingY: '1px',
-        paddingX: '6px',
-        height: '18px',
-        fontSize: '13px',
-        lineHeight: '16px',
         borderRadius: '4px',
         avatarIconSize: 12,
         clearableIconSize: '8px',
-        clearableIconButtonSize: '14px',
-        clearableIconButtonBorderRadius: '2px',
-        clearableIconMarginX: '3px',
-        startEnhancerMarginLeft: '6px',
-        startEnhancerMarginRight: '2px',
     },
     sm: {
-        paddingY: '2px',
-        paddingX: '8px',
-        height: '22px',
-        fontSize: '14px',
-        lineHeight: '18px',
         borderRadius: '5px',
         avatarIconSize: 14,
         clearableIconSize: '9px',
-        clearableIconButtonSize: '16px',
-        clearableIconButtonBorderRadius: '3px',
-        clearableIconMarginX: '5px',
-        startEnhancerMarginLeft: '8px',
-        startEnhancerMarginRight: '3px',
     },
     lg: {
-        paddingY: '7px',
-        paddingX: '12px',
-        height: '34px',
-        fontSize: '16px',
-        lineHeight: '18px',
         borderRadius: '6px',
         avatarIconSize: 20,
         clearableIconSize: '10px',
-        clearableIconButtonSize: '18px',
-        clearableIconButtonBorderRadius: '3px',
-        clearableIconMarginX: '7px',
-        startEnhancerMarginLeft: '12px',
-        startEnhancerMarginRight: '4px',
+    },
+    small: {
+        borderRadius: '4px',
+        avatarIconSize: 16,
+        clearableIconSize: '12px',
+    },
+    medium: {
+        borderRadius: '8px',
+        avatarIconSize: 16,
+        clearableIconSize: '12px',
+    },
+    large: {
+        borderRadius: '8px',
+        avatarIconSize: 16,
+        clearableIconSize: '12px',
     },
 };
 export var getTagSizeTheme = function (theme, size) {

package/esm/test-utils/helper.d.ts

@@ -0,0 +1,2 @@
+export declare const setDimension: (scrollWidth: number, clientWidth: number, scrollHeight: number, clientHeight: number) => void;
+export declare const wait: (milliseconds: number) => Promise<void>;

package/esm/test-utils/helper.js

@@ -0,0 +1,19 @@
+export var setDimension = function (scrollWidth, clientWidth, scrollHeight, clientHeight) {
+    Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
+        writable: true,
+        value: clientHeight,
+    });
+    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+        writable: true,
+        value: clientWidth,
+    });
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+        writable: true,
+        value: scrollHeight,
+    });
+    Object.defineProperty(HTMLElement.prototype, 'scrollWidth', {
+        writable: true,
+        value: scrollWidth,
+    });
+};
+export var wait = function (milliseconds) { return new Promise(function (resolve) { return setTimeout(resolve, milliseconds); }); };

package/esm/test-utils/index.d.ts

@@ -0,0 +1 @@
+export { getSelectedOptions } from '../select/utils/test-utils';

package/esm/test-utils/index.js

@@ -0,0 +1 @@
+export { getSelectedOptions } from '../select/utils/test-utils';

package/esm/test-utils/test-provider/TestProvider.d.ts

@@ -1,6 +1,13 @@
-import { ReactElement } from 'react';
-import * as React from 'react';
+import { ReactElement, ComponentProps } from 'react';
 import SpacewebProvider from '../../spacewebProvider';
-declare type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
-declare const TestProvider: (props: WithOptional<WithOptional<React.ComponentProps<typeof SpacewebProvider>, 'theme'>, 'styleEngine'>) => ReactElement;
+type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+/**
+ * @param {boolean} [injectStylesheets=undefined] - it lowers CSS size so react-testing-library has to parse less CSS while running. It only needs to be enabled for tests that read element.style that's passed from a classname
+ */
+declare const TestProvider: (props: Omit<import("../../spacewebProvider/SpacewebProvider").Props, "theme" | "styleEngine"> & Partial<Pick<import("../../spacewebProvider/SpacewebProvider").Props, "theme" | "styleEngine">> & {
+    /**
+     * CSS injection/parsing is disabled by default for performance reasons. Enable it if you need to test styles applied from className.
+     */
+    injectStylesheets?: boolean | undefined;
+}) => ReactElement;
 export default TestProvider;

package/esm/test-utils/test-provider/TestProvider.js

@@ -1,14 +1,28 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import { useLayoutEffect, useMemo } from 'react';
 import SpacewebProvider from '../../spacewebProvider';
-import { getStyleEngine } from '../../styleEngine';
 import { useTheme } from '../../theme';
 import { convertToTestableTheme } from './helpers';
+import fs from 'fs';
+var css = fs.readFileSync(require.resolve('@sprinklrjs/spaceweb-themes/styles/tailwind-test-classes.css'), 'utf-8');
+/**
+ * @param {boolean} [injectStylesheets=undefined] - it lowers CSS size so react-testing-library has to parse less CSS while running. It only needs to be enabled for tests that read element.style that's passed from a classname
+ */
 var TestProvider = function (props) {
     var themeModule = useTheme();
     var testableTheme = useMemo(function () { return convertToTestableTheme(themeModule); }, [themeModule]);
-    var _a = props.styleEngine, styleEngine = _a === void 0 ? getStyleEngine() : _a, _b = props.theme, theme = _b === void 0 ? testableTheme : _b;
-    return _jsx(SpacewebProvider, __assign({ theme: theme, styleEngine: styleEngine }, props, { debug: true }), void 0);
+    var styleEngine = props.styleEngine, _a = props.theme, theme = _a === void 0 ? testableTheme : _a, injectStylesheets = props.injectStylesheets;
+    useLayoutEffect(function () {
+        if (!injectStylesheets)
+            return undefined;
+        var style = window.document.createElement('style');
+        style.textContent = css;
+        window.document.head.appendChild(style);
+        return function () {
+            window.document.head.removeChild(style);
+        };
+    }, [injectStylesheets]);
+    return _jsx(SpacewebProvider, __assign({ theme: theme, styleEngine: styleEngine }, props, { debug: true }));
 };
 export default TestProvider;

package/esm/test-utils/test-provider/helpers.d.ts

@@ -1,7 +1,7 @@
 import { Direction, ThemeModule } from '@sprinklrjs/spaceweb-themes/types';
 import { StyleUtils } from '../../types';
-declare type Breakpoint = [string, string];
-declare type ScreenList = {
+type Breakpoint = [string, string];
+type ScreenList = {
     [name: string]: string;
 };
 /**

package/esm/test-utils/test-provider/testableThemes.d.ts

@@ -1,5 +1,3 @@
 import { ThemeModule } from '@sprinklrjs/spaceweb-themes/types';
-export declare const sprLight: ThemeModule;
-export declare const sprDark: ThemeModule;
 export declare const hyperspaceLight: ThemeModule;
 export declare const hyperspaceDark: ThemeModule;

package/esm/test-utils/test-provider/testableThemes.js

@@ -1,9 +1,5 @@
-import baseSprLight from '@sprinklrjs/spaceweb-themes/space/light';
-import baseSprDark from '@sprinklrjs/spaceweb-themes/space/dark';
 import baseHyperspaceLight from '@sprinklrjs/spaceweb-themes/hyperspace/light';
 import baseHyperspaceDark from '@sprinklrjs/spaceweb-themes/hyperspace/dark';
 import { convertToTestableTheme } from './helpers';
-export var sprLight = convertToTestableTheme(baseSprLight);
-export var sprDark = convertToTestableTheme(baseSprDark);
 export var hyperspaceLight = convertToTestableTheme(baseHyperspaceLight);
 export var hyperspaceDark = convertToTestableTheme(baseHyperspaceDark);

package/esm/textarea/cvaConfig.d.ts

@@ -0,0 +1,3 @@
+export declare const textareaRootCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;
+export declare const textareaContainerCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;
+export declare const textareaInputCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;

package/esm/textarea/cvaConfig.js

@@ -0,0 +1,79 @@
+import { cvaWrapper } from '../style/cvaWrapper';
+export var textareaRootCVA = cvaWrapper('textarea', 'root', [
+    'ease-outbox-border flex w-full duration-200 bg-transparent border-none rounded-none transition-border',
+    {
+        variants: {
+            $intent: {
+                default: 'overflow-hidden',
+                success: 'overflow-hidden',
+                error: 'overflow-hidden',
+                warning: 'overflow-hidden',
+                ai: '',
+            },
+        },
+        defaultVariants: {
+            $intent: 'default',
+            $deprecatedAIThemeEnabled: false,
+        },
+        compoundVariants: [{ $intent: 'ai', $deprecatedAIThemeEnabled: false, className: 'overflow-hidden' }],
+    },
+]);
+export var textareaContainerCVA = cvaWrapper('textarea', 'container', [
+    'max-w-full w-min flex',
+    {
+        variants: {
+            $maxCharLimit: {
+                true: 'relative',
+            },
+            $disabled: {
+                true: 'cursor-not-allowed',
+                false: 'cursor-text',
+            },
+            $resize: {
+                vertical: 'w-full',
+            },
+        },
+        defaultVariants: {
+            $maxCharLimit: undefined,
+            $disabled: false,
+        },
+    },
+]);
+export var textareaInputCVA = cvaWrapper('textarea', 'input', [
+    'box-border border-transparent border-0 border-none bg-transparent w-full p-0 m-0 min-w-full min-w-0 outline-none resize w-screen placeholder:spr-text-placeholder spr-text-primary placeholder:font-normal font-normal',
+    {
+        variants: {
+            $size: {
+                xxxs: 'px-1.75 py-0.75 text-13 leading-4',
+                xs: 'px-2.75 py-1.5 text-14 leading-4.5',
+                sm: 'px-2.75 py-2 text-14 leading-4.5',
+                md: 'px-2.75 py-2.5 text-14 leading-4.5',
+                lg: 'px-2.75 py-2.5 text-14 leading-4.5',
+                medium: 'px-3 py-2 text-14 leading-150',
+            },
+            $variant: {
+                line: 'px-0',
+            },
+            $isMaxCharFooterPreset: {
+                true: 'relative pb-8',
+            },
+            $disabled: {
+                true: 'cursor-not-allowed',
+                false: 'cursor-text',
+            },
+            $resize: {
+                vertical: 'w-full',
+            },
+            $autoSize: {
+                true: 'overflow-hidden resize-none',
+            },
+        },
+        defaultVariants: {
+            $autoSize: false,
+            $isMaxCharFooterPreset: false,
+            $size: 'md',
+            $variant: 'default',
+            $disabled: false,
+        },
+    },
+]);

package/esm/textarea/index.d.ts

@@ -1,3 +1,5 @@
-export { Textarea, StatefulTextarea } from './textarea';
-export { StatefulContainer, StyledTextareaContainer, StyledTextarea, STATE_CHANGE_TYPE } from '../baseui/textarea';
+export { default as Textarea } from './textarea';
+export { default as StatefulTextarea } from './stateful-textarea';
+export { STATE_CHANGE_TYPE } from '../input';
+export { StyledTextareaContainer, StyledTextarea } from './styled-components';
 export * from './types';

package/esm/textarea/index.js

@@ -1,3 +1,5 @@
-export { Textarea, StatefulTextarea } from './textarea';
-export { StatefulContainer, StyledTextareaContainer, StyledTextarea, STATE_CHANGE_TYPE } from '../baseui/textarea';
+export { default as Textarea } from './textarea';
+export { default as StatefulTextarea } from './stateful-textarea';
+export { STATE_CHANGE_TYPE } from '../input';
+export { StyledTextareaContainer, StyledTextarea } from './styled-components';
 export * from './types';

package/esm/textarea/stateful-textarea.js

@@ -0,0 +1,9 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import Textarea from './textarea';
+import useStatefulInput from '../input/useStatefulInput';
+export default function StatefulTextarea(props) {
+    var initialState = props.initialState, stateReducer = props.stateReducer, onChange = props.onChange, restProps = __rest(props, ["initialState", "stateReducer", "onChange"]);
+    var adaptedProps = useStatefulInput({ initialState: initialState, onChange: onChange, stateReducer: stateReducer });
+    return _jsx(Textarea, __assign({}, restProps, adaptedProps));
+}

package/esm/textarea/styled-components.d.ts

@@ -1,11 +1,3 @@
-export declare const getTextareaInputStyles: (import("..").StyleFn<Partial<Pick<import("../input").SharedProps, "$size" | "$disabled" | "$variant">>> | (({}: {}, { $autoSize }: {
-    $autoSize: any;
-}) => "overflow-hidden" | "resize") | (({ theme }: {
-    theme: any;
-}) => {
-    width: string;
-    '::placeholder': {
-        color: any;
-    };
-}))[];
-export declare const getTextareaInputContainerStyles: import("..").Styles[];
+export declare const StyledTextAreaRoot: import("../style").StyledComponent;
+export declare const StyledTextareaContainer: import("../style").StyledComponent;
+export declare const StyledTextarea: import("../style").StyledComponent;

package/esm/textarea/styled-components.js

@@ -1,14 +1,36 @@
-import { getInputContainerStyles, getInputStyles } from '../input/styled-components';
-//todo: need to use withThemeOverride to create overriden styled version of comps
-export var getTextareaInputStyles = [
-    getInputStyles,
-    function (_a, _b) {
-        var $autoSize = _b.$autoSize;
-        return ($autoSize ? 'overflow-hidden' : 'resize');
-    },
-    function (_a) {
-        var theme = _a.theme;
-        return ({ width: '100vw', '::placeholder': { color: theme.spr.textPlaceholder } });
-    },
-];
-export var getTextareaInputContainerStyles = [getInputContainerStyles, 'max-w-full', { width: 'min-content' }];
+import { getInputContainerStyles, inputContainerStyleVariables } from '../input/styled-components';
+import { styled, styledWithCssVariables } from '../style';
+import { textareaContainerCVA, textareaInputCVA, textareaRootCVA } from './cvaConfig';
+import { getComponentTheme } from '../helpers/themeHelpers';
+import { getSprinklrAIAnimatedGradientBorderClassNames } from '../helpers/commonStyles';
+export var StyledTextAreaRoot = styled('div', textareaRootCVA, function (_, _a) {
+    var $resize = _a.$resize;
+    return !$resize || $resize === 'vertical' ? 'w-full' : 'w-fit';
+});
+StyledTextAreaRoot.displayName = 'StyledTextAreaRoot';
+export var StyledTextareaContainer = styledWithCssVariables('div', inputContainerStyleVariables, getInputContainerStyles, textareaContainerCVA, function (_, _a) {
+    var $resize = _a.$resize;
+    return ($resize === 'vertical' ? 'w-full' : '');
+}, function (utils, props) {
+    return props.$intent === 'ai' && utils.deprecatedAIThemeEnabled && props.$variant !== 'line' && !props.$disabled
+        ? getSprinklrAIAnimatedGradientBorderClassNames()
+        : '';
+});
+StyledTextareaContainer.displayName = 'StyledTextareaContainer';
+export var StyledTextarea = styledWithCssVariables('textarea', function (_, _a) {
+    var $resize = _a.$resize;
+    return ({ '--sw-resize': $resize });
+}, textareaInputCVA, function (_, _a) {
+    var $resize = _a.$resize;
+    return ($resize ? 'resize-[--sw-resize]' : '');
+}, function (_, _a) {
+    var $resize = _a.$resize;
+    return ($resize === 'vertical' ? 'w-full' : '');
+}, 
+// @ts-ignore -- CSS-in-JS -- overrides from theme
+function (_a) {
+    var theme = _a.theme;
+    var inputTheme = getComponentTheme(theme, 'input');
+    return (inputTheme === null || inputTheme === void 0 ? void 0 : inputTheme.fontWeight) ? { fontWeight: inputTheme.fontWeight } : undefined;
+});
+StyledTextarea.displayName = 'StyledTextarea';

package/esm/textarea/textarea.d.ts

@@ -1,10 +1,6 @@
-import { ReactElement } from 'react';
-import { TextareaProps, StatefulTextareaProps } from './types';
-export declare const Textarea: {
-    (props: TextareaProps): ReactElement;
-    displayName: string;
-};
-export declare const StatefulTextarea: {
-    (props: StatefulTextareaProps): ReactElement;
-    displayName: string;
+import type { TextareaProps } from './types';
+declare const Textarea: {
+    ({ autoFocus, disabled, readOnly, onBlur, onFocus, overrides, required, rows: _rows, style, className, resize, size: _size, inputRef: _inputRef, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
+    __standard: string;
 };
+export default Textarea;

package/esm/textarea/textarea.js

@@ -1,29 +1,59 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Textarea as BaseTextarea, StatefulTextarea as BaseStatefulTextarea, } from '../baseui/textarea';
-import useTextareaAdapter from './basewebAdapters';
+import { useState, useCallback, useMemo } from 'react';
+import { mergeOverrides, useOverrides } from '../overrides';
+import { CUSTOM_INPUT_TYPE, BaseInput } from '../input';
+import { StyledTextarea, StyledTextareaContainer, StyledTextAreaRoot } from './styled-components';
+import { useContextualFormProps } from '../form-control/context';
+import { add$props } from '../helpers';
 import useAutoFocus from '../hooks/useAutoFocus';
 import useAutoSizeTextarea from './useAutoSizeTextarea';
-// @ts-ignore
-BaseTextarea.displayName = 'BaseUITextarea';
-// @ts-ignore
-BaseStatefulTextarea.displayName = 'BaseUIStatefulTextarea';
-export var Textarea = function (props) {
-    var autoFocus = props.autoFocus, restProps = __rest(props, ["autoFocus"]);
-    var autoFocusRef = useAutoFocus({ autoFocus: autoFocus, inputRef: restProps.inputRef });
-    var inputRef = useAutoSizeTextarea({
-        value: restProps.value,
-        autoSize: restProps.autoSize,
-        inputRef: autoFocusRef,
+import _noop from 'lodash/noop';
+import { getDefaultSize } from '../helpers/themeHelpers';
+import { useStyle } from '../style';
+var Textarea = function (_a) {
+    var _b = _a.autoFocus, autoFocus = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.readOnly, readOnly = _d === void 0 ? false : _d, _e = _a.onBlur, onBlur = _e === void 0 ? _noop : _e, _f = _a.onFocus, onFocus = _f === void 0 ? _noop : _f, _g = _a.overrides, overrides = _g === void 0 ? {} : _g, _h = _a.required, required = _h === void 0 ? false : _h, _rows = _a.rows, style = _a.style, className = _a.className, resize = _a.resize, _size = _a.size, _inputRef = _a.inputRef, props = __rest(_a, ["autoFocus", "disabled", "readOnly", "onBlur", "onFocus", "overrides", "required", "rows", "style", "className", "resize", "size", "inputRef"]);
+    var inputRef = useAutoFocus({ autoFocus: autoFocus, inputRef: _inputRef });
+    useAutoSizeTextarea({
+        value: props.value,
+        autoSize: props.autoSize,
+        inputRef: inputRef,
     });
-    var adaptedProps = useTextareaAdapter(restProps);
-    return (_jsx(BaseTextarea, __assign({}, adaptedProps, { overrides: adaptedProps.overrides, inputRef: inputRef }), void 0));
+    var theme = useStyle().theme;
+    var size = _size !== null && _size !== void 0 ? _size : getDefaultSize(theme);
+    var _j = useContextualFormProps(props), _k = _j.variant, variant = _k === void 0 ? 'default' : _k, _intent = _j.intent, _l = _j.autoSize, autoSize = _l === void 0 ? false : _l, restProps = __rest(_j, ["variant", "intent", "autoSize"]);
+    var maxCharLimit = restProps.maxCharLimit, value = restProps.value;
+    var intent = typeof value === 'string' && value.length > (maxCharLimit !== null && maxCharLimit !== void 0 ? maxCharLimit : Infinity) ? 'error' : _intent;
+    var rows = _rows !== null && _rows !== void 0 ? _rows : (autoSize ? 1 : 3);
+    var _m = __read(useState(autoFocus), 2), isFocused = _m[0], setIsFocused = _m[1];
+    var sharedProps = useMemo(function () { return add$props({ size: size, variant: variant, intent: intent, autoSize: autoSize, resize: resize }); }, [size, variant, intent, autoSize, resize]);
+    var handleFocus = useCallback(function (e) {
+        setIsFocused(true);
+        onFocus(e);
+    }, [onFocus]);
+    var handleBlur = useCallback(function (e) {
+        setIsFocused(false);
+        onBlur(e);
+    }, [onBlur]);
+    var handleContainerClick = useCallback(function (e) {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        setIsFocused(true);
+    }, [inputRef]);
+    var _o = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledTextAreaRoot), 2), Root = _o[0], rootProps = _o[1];
+    var inputOverrides = useMemo(function () {
+        return mergeOverrides({
+            InputContainer: {
+                component: StyledTextareaContainer,
+                props: __assign(__assign({}, sharedProps), { onClick: handleContainerClick }),
+            },
+            Input: {
+                component: StyledTextarea,
+                props: __assign({ 'aria-required': restProps['aria-required'] }, sharedProps),
+            },
+        }, overrides);
+    }, [sharedProps, handleContainerClick, restProps, overrides]);
+    return (_jsx(Root, __assign({ "data-spaceweb": "textarea", "$isFocused": isFocused, "$isReadOnly": readOnly, "$disabled": disabled, "$required": required, "$resize": resize }, sharedProps, rootProps, { className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className], style: [style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style] }, { children: _jsx(BaseInput, __assign({}, props, { inputRef: inputRef, readOnly: readOnly, disabled: disabled, rows: rows, size: size, resize: resize, type: CUSTOM_INPUT_TYPE.textarea, overrides: inputOverrides, onFocus: handleFocus, onBlur: handleBlur })) })));
 };
-Textarea.displayName = 'Textarea';
-export var StatefulTextarea = function (props) {
-    var autoFocus = props.autoFocus, restProps = __rest(props, ["autoFocus"]);
-    var autoFocusRef = useAutoFocus({ autoFocus: autoFocus, inputRef: restProps.inputRef });
-    var adaptedProps = useTextareaAdapter(restProps);
-    return (_jsx(BaseStatefulTextarea, __assign({}, adaptedProps, { overrides: adaptedProps.overrides, inputRef: autoFocusRef }), void 0));
-};
-StatefulTextarea.displayName = 'StatefulTextarea';
+Textarea.__standard = 'Component';
+export default Textarea;