@ringcentral/spring-ui 1.11.2 → 1.13.0

package/Tag.js

@@ -1,28 +1,63 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useClasses, getTitle } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { I as Icon } from './chunks/Icon.js';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { getTitle, useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { Icon as Icon_Icon } from "./chunks/8307.js";
 
-var Tag$1 = {"sui-tag-root":"sui-tag-root","sui-tag-has-start-icon":"sui-tag-has-start-icon","sui-tag-default":"sui-tag-default","sui-tag-neutral":"sui-tag-neutral","sui-tag-secondary":"sui-tag-secondary","sui-tag-primary":"sui-tag-primary","sui-tag-success":"sui-tag-success","sui-tag-warning":"sui-tag-warning","sui-tag-danger":"sui-tag-danger","sui-tag-outlined":"sui-tag-outlined","sui-tag-filled-default":"sui-tag-filled-default","sui-tag-filled-neutral":"sui-tag-filled-neutral","sui-tag-filled-secondary":"sui-tag-filled-secondary","sui-tag-filled-primary":"sui-tag-filled-primary","sui-tag-filled-success":"sui-tag-filled-success","sui-tag-filled-warning":"sui-tag-filled-warning","sui-tag-filled-danger":"sui-tag-filled-danger","sui-tag-inverted-default":"sui-tag-inverted-default","sui-tag-inverted-neutral":"sui-tag-inverted-neutral","sui-tag-inverted-secondary":"sui-tag-inverted-secondary","sui-tag-inverted-primary":"sui-tag-inverted-primary","sui-tag-inverted-success":"sui-tag-inverted-success","sui-tag-inverted-warning":"sui-tag-inverted-warning","sui-tag-inverted-danger":"sui-tag-inverted-danger","sui-tag-label":"sui-tag-label","sui-tag-start-icon":"sui-tag-start-icon"};
 
-const Tag = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Tag' });
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Tag = ({"sui-tag-root":"sui-tag-root","sui-tag-has-start-icon":"sui-tag-has-start-icon","sui-tag-default":"sui-tag-default","sui-tag-neutral":"sui-tag-neutral","sui-tag-secondary":"sui-tag-secondary","sui-tag-primary":"sui-tag-primary","sui-tag-success":"sui-tag-success","sui-tag-warning":"sui-tag-warning","sui-tag-danger":"sui-tag-danger","sui-tag-outlined":"sui-tag-outlined","sui-tag-filled-default":"sui-tag-filled-default","sui-tag-filled-neutral":"sui-tag-filled-neutral","sui-tag-filled-secondary":"sui-tag-filled-secondary","sui-tag-filled-primary":"sui-tag-filled-primary","sui-tag-filled-success":"sui-tag-filled-success","sui-tag-filled-warning":"sui-tag-filled-warning","sui-tag-filled-danger":"sui-tag-filled-danger","sui-tag-inverted-default":"sui-tag-inverted-default","sui-tag-inverted-neutral":"sui-tag-inverted-neutral","sui-tag-inverted-secondary":"sui-tag-inverted-secondary","sui-tag-inverted-primary":"sui-tag-inverted-primary","sui-tag-inverted-success":"sui-tag-inverted-success","sui-tag-inverted-warning":"sui-tag-inverted-warning","sui-tag-inverted-danger":"sui-tag-inverted-danger","sui-tag-label":"sui-tag-label","sui-tag-start-icon":"sui-tag-start-icon"});
+
+
+
+
+
+
+const Tag_Tag = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Tag'
+    });
     const { classes, className, children, label: labelProp, startIcon, variant = 'outlined', color = 'default', title, ...rest } = props;
     const cls = useClasses('tag', classes, className);
     const label = children ?? labelProp;
     let tagContent = null;
     if (startIcon) {
-        tagContent = (jsxs(Fragment, { children: [jsx(Icon, { className: cls('start-icon'), symbol: startIcon, size: 'xsmall' }), jsx("span", { className: cls('label'), children: label })] }));
-    }
-    else {
+        tagContent = /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(Icon_Icon, {
+                    className: cls('start-icon'),
+                    symbol: startIcon,
+                    size: 'xsmall'
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: cls('label'),
+                    children: label
+                })
+            ]
+        });
+    } else {
         tagContent = label;
     }
-    return (jsx("div", { ...rest, ref: ref, className: cls('root', color, variant !== 'outlined' && `${variant}-${color}`, {
+    return /*#__PURE__*/ jsx("div", {
+        ...rest,
+        ref: ref,
+        className: cls('root', color, variant !== 'outlined' && `${variant}-${color}`, {
             'has-start-icon': !!startIcon,
-            outlined: variant === 'outlined',
-        }), title: title ?? getTitle(label), children: tagContent }));
+            outlined: variant === 'outlined'
+        }),
+        title: title ?? getTitle(label),
+        children: tagContent
+    });
 });
-Tag.displayName = 'SuiTag';
+Tag_Tag.displayName = 'SuiTag';
+
+
+
+
+
 
-export { Tag, Tag$1 as tagStyle };
+export { Tag as tagStyle, Tag_Tag as Tag };

package/Text.js

@@ -1,44 +1,57 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef } from 'react';
-import clsx from 'clsx';
-import isString from 'lodash/isString';
-import { useForkRef, useOverflow, useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { T as Tooltip } from './chunks/Tooltip.js';
-import 'framer-motion';
-import './chunks/Icon.js';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/getFade.js';
-import './Popper.js';
-import '@floating-ui/react-dom';
-import './chunks/Modal.js';
-import '@mui/base';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-import './chunks/PopperPaper.js';
-
-var Text$1 = {"sui-text-root":"sui-text-root","sui-text-no-wrap":"sui-text-no-wrap","sui-text-highlight-term":"sui-text-highlight-term"};
-
-const Text = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Text' });
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState } from "react";
+import clsx from "clsx";
+import isString from "lodash/isString";
+import { useClasses, useForkRef, useOverflow } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import "./Tooltip.js";
+import { Tooltip } from "./chunks/4535.js";
+
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Text = ({"sui-text-root":"sui-text-root","sui-text-no-wrap":"sui-text-no-wrap","sui-text-highlight-term":"sui-text-highlight-term"});
+
+
+
+
+
+
+
+
+const Text_Text = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Text'
+    });
     const { component: TextRoot = 'span', children, className, flexFull, highlight, title: _title, titleWhenOverflow, useTooltip, TooltipProps, noWrap = false, ...rest } = props;
     const [isShowTitle, setIsShowTitle] = useState(false);
     const innerRef = useRef(null);
     const textRef = useForkRef(innerRef, ref);
+    // * here put hook in if else, titleWhenOverflow not change any more
     if (titleWhenOverflow) {
-        useOverflow(innerRef, (state) => setIsShowTitle(state));
+        // oxlint-disable-next-line react-hooks/rules-of-hooks
+        useOverflow(innerRef, (state)=>setIsShowTitle(state));
     }
     const cls = useClasses('text', {}, className);
-    const title = isShowTitle || useTooltip
-        ?
-            (_title ?? (isString(children) ? children : undefined))
-        : undefined;
+    const title = isShowTitle || useTooltip // * if useTooltip always keep title pass into
+     ? _title ?? (isString(children) ? children : undefined) : undefined;
     const showTooltip = Boolean(useTooltip) && isShowTitle && !!title && !!children;
     if (!showTooltip) {
-        return (jsx(TextRoot, { ref: textRef, title: isShowTitle ? title : undefined, className: cls('root', {
+        return /*#__PURE__*/ jsx(TextRoot, {
+            ref: textRef,
+            title: isShowTitle ? title : undefined,
+            className: cls('root', {
                 'no-wrap': noWrap,
-                'highlight-term': highlight,
-            }), ...rest, children: children }));
+                'highlight-term': highlight
+            }),
+            ...rest,
+            children: children
+        });
     }
     const lineClamp = [
         'line-clamp-none',
@@ -47,13 +60,31 @@ const Text = forwardRef((inProps, ref) => {
         'line-clamp-3',
         'line-clamp-4',
         'line-clamp-5',
-        'line-clamp-6',
+        'line-clamp-6'
     ][titleWhenOverflow ?? -1];
-    return (jsx(Tooltip, { ...TooltipProps, title: title, PopperProps: { offset: 8 }, motionProps: null, children: jsx(TextRoot, { ref: textRef, className: clsx(cls('root', {
+    return /*#__PURE__*/ jsx(Tooltip, {
+        ...TooltipProps,
+        title: title,
+        PopperProps: {
+            offset: 8
+        },
+        motionProps: null,
+        children: /*#__PURE__*/ jsx(TextRoot, {
+            ref: textRef,
+            className: clsx(cls('root', {
                 'no-wrap': noWrap,
-                'highlight-term': highlight,
-            }), lineClamp), ...rest, children: children }) }));
+                'highlight-term': highlight
+            }), lineClamp),
+            ...rest,
+            children: children
+        })
+    });
 });
-Text.displayName = 'SuiText';
+Text_Text.displayName = 'SuiText';
+
+
+
+
+
 
-export { Text, Text$1 as textStyle };
+export { Text as textStyle, Text_Text as Text };

package/TextField.js

@@ -1,29 +1,209 @@
-export { T as TextField } from './chunks/TextField.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@mui/base';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-icon';
-import '@ringcentral/spring-theme';
-import 'framer-motion';
-import './chunks/Icon.js';
-import './chunks/ShowHideEye.js';
-import './chunks/useMotionSafeTransition.js';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/useHelperTextId.js';
-import 'clsx';
-import './chunks/IconButtonLabel.js';
-import './chunks/Squircle.js';
-import './chunks/withTooltip.js';
-import './chunks/Tooltip.js';
-import './chunks/getFade.js';
-import './Popper.js';
-import '@floating-ui/react-dom';
-import './chunks/Modal.js';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-import './chunks/PopperPaper.js';
-
-var TextField = {"sui-text-field-clear":"sui-text-field-clear","sui-text-field-mask-value-button":"sui-text-field-mask-value-button","sui-text-field-form-field-content":"sui-text-field-form-field-content","sui-text-field-root":"sui-text-field-root","sui-focused":"sui-focused","sui-disabled":"sui-disabled","sui-text-field-full-width":"sui-text-field-full-width","sui-text-field-input":"sui-text-field-input","sui-text-field-end-adornment":"sui-text-field-end-adornment","sui-text-field-start-adornment":"sui-text-field-start-adornment","sui-text-field-outlined":"sui-text-field-outlined","sui-text-field-standard":"sui-text-field-standard","sui-text-field-quiet":"sui-text-field-quiet","sui-text-field-helper-text":"sui-text-field-helper-text","sui-text-field-hide-native-clear":"sui-text-field-hide-native-clear"};
-
-export { TextField as textFieldStyle };
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { useInput } from "@mui/base";
+import { combineProps, useClasses, useControlled, useEventCallback, useForkRef, useId } from "@ringcentral/spring-base";
+import { Xmd } from "@ringcentral/spring-icon";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { ShowHideEye as ShowHideEye_ShowHideEye } from "./chunks/4476.js";
+import { useHelperTextId, FormField as FormField_FormField } from "./FormField.js";
+import { IconButton as IconButton_IconButton } from "./IconButton.js";
+
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var TextField = ({"sui-text-field-clear":"sui-text-field-clear","sui-text-field-mask-value-button":"sui-text-field-mask-value-button","sui-text-field-form-field-content":"sui-text-field-form-field-content","sui-text-field-root":"sui-text-field-root","sui-focused":"sui-focused","sui-disabled":"sui-disabled","sui-text-field-full-width":"sui-text-field-full-width","sui-text-field-input":"sui-text-field-input","sui-text-field-end-adornment":"sui-text-field-end-adornment","sui-text-field-start-adornment":"sui-text-field-start-adornment","sui-text-field-outlined":"sui-text-field-outlined","sui-text-field-standard":"sui-text-field-standard","sui-text-field-quiet":"sui-text-field-quiet","sui-text-field-helper-text":"sui-text-field-helper-text","sui-text-field-hide-native-clear":"sui-text-field-hide-native-clear"});
+
+
+
+
+
+
+
+
+
+
+const TextFieldComponent = (inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'TextField'
+    });
+    const { classes, className, clearBtn = true, clearText = 'clear', showCharacterCount = false, useNativeClearBtn = false, size, endAdornment, fullWidth, helperText: helperTextProp, inputProps, label, onClear, placeholder: placeholderProp, RootProps, startAdornment, type, variant = 'outlined', inputComponent: InputComponent = 'input', autoFocus, ClearButtonProps, id: idProp, onKeyDown, onKeyUp, readOnly, onClick, focused, FormHelperTextProps, showMaskValueToggleButton = type === 'password', maskValue: maskValueProps, MaskValueButtonProps, ShowHideEyeIconProps } = props;
+    const placeholder = placeholderProp || ' ';
+    const defaultId = useId();
+    const id = idProp ?? inputProps?.id ?? defaultId;
+    const cls = useClasses('text-field', classes, className);
+    const { disabled, required, error, getInputProps } = useInput(props);
+    const states = {
+        disabled,
+        required,
+        error,
+        focused
+    };
+    const idForHelperText = useHelperTextId({
+        helperText: helperTextProp,
+        id,
+        FormHelperTextProps
+    });
+    const widgetProps = getInputProps({
+        'aria-describedby': idForHelperText,
+        ...inputProps,
+        placeholder,
+        id,
+        type
+    });
+    const inputRef = useRef();
+    const handlerClear = (e)=>{
+        if (disabled) return;
+        const el = inputRef.current;
+        if (el) {
+            onClear?.(e);
+            const host = Object.getPrototypeOf(el);
+            Object.getOwnPropertyDescriptor(host, 'value')?.set?.call(el, '');
+            el.focus();
+            el.dispatchEvent(new InputEvent('input', {
+                bubbles: true
+            }));
+        }
+    };
+    let helperText = helperTextProp;
+    if (showCharacterCount && inputProps?.maxLength !== undefined && props.value !== undefined) {
+        helperText = /*#__PURE__*/ jsxs("div", {
+            className: cls('helper-text'),
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    children: helperText
+                }),
+                /*#__PURE__*/ jsxs("span", {
+                    children: [
+                        props.value?.length ?? 0,
+                        "/",
+                        inputProps.maxLength
+                    ]
+                })
+            ]
+        });
+    }
+    const [maskValue, setMaskValue] = useControlled({
+        controlled: maskValueProps,
+        default: false,
+        name: 'TextField',
+        state: 'showPassword'
+    });
+    let inputType = type;
+    const shouldShowMaskToggleButton = showMaskValueToggleButton && type === 'password';
+    const isSearchInput = type === 'search';
+    const shouldHideNativeClear = isSearchInput && !useNativeClearBtn;
+    if (shouldShowMaskToggleButton) {
+        if (maskValue) {
+            inputType = 'text';
+        } else {
+            inputType = 'password';
+        }
+    }
+    const handleMaskValueChange = useEventCallback(()=>{
+        setMaskValue(!maskValue);
+        if (props.onMaskValueChange) {
+            props.onMaskValueChange(!maskValue);
+        }
+    });
+    return /*#__PURE__*/ jsxs(FormField_FormField, {
+        ...combineProps({
+            classes: {
+                root: cls('root', {
+                    'full-width': fullWidth,
+                    'hide-native-clear': shouldHideNativeClear
+                }),
+                content: cls('form-field-content'),
+                outlined: cls('outlined'),
+                standard: cls('standard'),
+                quiet: cls('quiet')
+            },
+            contentProps: {
+                onClick: (e)=>{
+                    onClick?.(e);
+                    if (e.target === e.currentTarget && !disabled) {
+                        inputRef.current?.focus();
+                    }
+                }
+            }
+        }, RootProps),
+        ...states,
+        htmlFor: id,
+        label: label,
+        ref: ref,
+        helperText: helperText,
+        variant: variant,
+        size: size,
+        FormHelperTextProps: {
+            id: idForHelperText,
+            ...FormHelperTextProps
+        },
+        children: [
+            startAdornment && /*#__PURE__*/ jsx("div", {
+                className: cls('start-adornment'),
+                children: startAdornment
+            }),
+            /*#__PURE__*/ jsx(InputComponent, {
+                readOnly: readOnly,
+                autoComplete: "off",
+                autoFocus: autoFocus,
+                onKeyDown: onKeyDown,
+                onKeyUp: onKeyUp,
+                ...widgetProps,
+                className: cls('input'),
+                ref: useForkRef(widgetProps.ref, inputRef),
+                type: inputType
+            }),
+            clearBtn && /*#__PURE__*/ jsx(IconButton_IconButton, {
+                symbol: Xmd,
+                shape: 'squircle',
+                background: false,
+                color: 'secondary',
+                variant: "contained",
+                size: "small",
+                title: clearText,
+                "aria-label": clearText,
+                disabled: disabled,
+                ...combineProps({
+                    className: cls('clear'),
+                    onClick: handlerClear
+                }, ClearButtonProps)
+            }),
+            shouldShowMaskToggleButton && /*#__PURE__*/ jsx(IconButton_IconButton, {
+                disabled: disabled,
+                shape: 'squircle',
+                background: false,
+                color: 'neutral',
+                variant: "icon",
+                size: "small",
+                ...combineProps({
+                    className: cls('mask-value-button'),
+                    onClick: handleMaskValueChange,
+                    'aria-label': maskValue ? 'eye-visible' : 'eye'
+                }, MaskValueButtonProps),
+                children: /*#__PURE__*/ jsx(ShowHideEye_ShowHideEye, {
+                    hide: !maskValue,
+                    size: ShowHideEyeIconProps?.size ?? MaskValueButtonProps?.iconSize ?? 'small',
+                    ...ShowHideEyeIconProps
+                })
+            }),
+            endAdornment && /*#__PURE__*/ jsx("div", {
+                className: cls('end-adornment'),
+                children: endAdornment
+            })
+        ]
+    });
+};
+const TextField_TextField = /*#__PURE__*/ forwardRef(TextFieldComponent);
+TextField_TextField.displayName = 'SuiTextField';
+
+
+
+
+
+
+export { TextField as textFieldStyle, TextField_TextField as TextField };

package/Textarea.js

@@ -1,33 +1,29 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { TextareaAutosize } from '@mui/base';
-import { logInDev, useClasses, combineProps } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { T as TextField } from './chunks/TextField.js';
-import '@ringcentral/spring-icon';
-import 'framer-motion';
-import './chunks/Icon.js';
-import './chunks/ShowHideEye.js';
-import './chunks/useMotionSafeTransition.js';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/useHelperTextId.js';
-import 'clsx';
-import './chunks/IconButtonLabel.js';
-import './chunks/Squircle.js';
-import './chunks/withTooltip.js';
-import './chunks/Tooltip.js';
-import './chunks/getFade.js';
-import './Popper.js';
-import '@floating-ui/react-dom';
-import './chunks/Modal.js';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-import './chunks/PopperPaper.js';
-
-var Textarea$1 = {"sui-textarea-form-field-content":"sui-textarea-form-field-content","sui-textarea-form-field-content-xlarge":"sui-textarea-form-field-content-xlarge","sui-textarea-form-field-content-large":"sui-textarea-form-field-content-large","sui-textarea-form-field-content-medium":"sui-textarea-form-field-content-medium","sui-textarea-input":"sui-textarea-input","sui-textarea-clear":"sui-textarea-clear","sui-textarea-input-xlarge":"sui-textarea-input-xlarge","sui-textarea-input-large":"sui-textarea-input-large","sui-textarea-input-medium":"sui-textarea-input-medium","sui-textarea-standard-input":"sui-textarea-standard-input","sui-textarea-clear-xlarge":"sui-textarea-clear-xlarge","sui-textarea-clear-large":"sui-textarea-clear-large","sui-textarea-clear-medium":"sui-textarea-clear-medium","sui-textarea-clear-standard":"sui-textarea-clear-standard"};
-
-const Textarea = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Textarea' });
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { TextareaAutosize } from "@mui/base";
+import { combineProps, logInDev, useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { TextField as TextField_TextField } from "./TextField.js";
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Textarea = ({"sui-textarea-form-field-content":"sui-textarea-form-field-content","sui-textarea-form-field-content-xlarge":"sui-textarea-form-field-content-xlarge","sui-textarea-form-field-content-large":"sui-textarea-form-field-content-large","sui-textarea-form-field-content-medium":"sui-textarea-form-field-content-medium","sui-textarea-input":"sui-textarea-input","sui-textarea-clear":"sui-textarea-clear","sui-textarea-input-xlarge":"sui-textarea-input-xlarge","sui-textarea-input-large":"sui-textarea-input-large","sui-textarea-input-medium":"sui-textarea-input-medium","sui-textarea-standard-input":"sui-textarea-standard-input","sui-textarea-clear-xlarge":"sui-textarea-clear-xlarge","sui-textarea-clear-large":"sui-textarea-clear-large","sui-textarea-clear-medium":"sui-textarea-clear-medium","sui-textarea-clear-standard":"sui-textarea-clear-standard"});
+
+
+
+
+
+
+
+const Textarea_Textarea = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Textarea'
+    });
     const { classes, className, rows, minRows, maxRows, variant = 'outlined', inputProps: inputPropsProp, size = 'xlarge', ClearButtonProps, ...rest } = props;
     let inputProps = inputPropsProp;
     if (rows) {
@@ -35,33 +31,48 @@ const Textarea = forwardRef((inProps, ref) => {
             logInDev({
                 scope: 'Textarea',
                 message: 'You can not use the `minRows` or `maxRows` props when the input `rows` prop is set.',
-                level: 'warn',
+                level: 'warn'
             });
         }
         inputProps = {
             ...inputProps,
             minRows: rows,
-            maxRows: rows,
+            maxRows: rows
         };
-    }
-    else {
+    } else {
         inputProps = {
             ...inputProps,
             maxRows,
-            minRows,
+            minRows
         };
     }
     const cls = useClasses('textarea', classes, className);
-    return (jsx(TextField, { ...rest, size: size, variant: variant, inputProps: inputProps, inputComponent: TextareaAutosize, ClearButtonProps: combineProps({ background: true }, ClearButtonProps), ref: ref, classes: {
+    return /*#__PURE__*/ jsx(TextField_TextField, {
+        ...rest,
+        size: size,
+        variant: variant,
+        inputProps: inputProps,
+        inputComponent: TextareaAutosize,
+        ClearButtonProps: combineProps({
+            background: true
+        }, ClearButtonProps),
+        ref: ref,
+        classes: {
             ...classes,
             root: cls('root'),
             outlined: cls('outlined'),
             standard: cls('standard'),
             input: cls('input', `${variant}-input`, `input-${size}`),
             formFieldContent: cls('form-field-content', `form-field-content-${size}`, `${variant}-form-field-content`),
-            clear: cls('clear', `clear-${variant}`, `clear-${size}`),
-        } }));
+            clear: cls('clear', `clear-${variant}`, `clear-${size}`)
+        }
+    });
 });
-Textarea.displayName = 'SuiTextarea';
+Textarea_Textarea.displayName = 'SuiTextarea';
+
+
+
+
+
 
-export { Textarea, Textarea$1 as textareaStyle };
+export { Textarea as textareaStyle, Textarea_Textarea as Textarea };