@ringcentral/juno 2.46.0 → 3.0.0-alpha.1

package/components/Forms/TextField/TextField.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcTextField = exports.RcOutlineTextFieldIconSizes = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var TextField_1 = tslib_1.__importDefault(require("@material-ui/core/TextField"));
@@ -8,14 +9,14 @@ var foundation_1 = require("../../../foundation");
 var FormContext_1 = require("../Form/Form/FormContext");
 var styles_1 = require("./styles");
 var utils_1 = require("./utils");
-exports.RcOutlineTextFieldIconSizes = utils_1.RcOutlineTextFieldIconSizes;
-var combineOutlineClasses = foundation_1.combineClasses(utils_1.RcTextFieldInputClasses, utils_1.RcOutlineTextFieldInputClasses);
+Object.defineProperty(exports, "RcOutlineTextFieldIconSizes", { enumerable: true, get: function () { return utils_1.RcOutlineTextFieldIconSizes; } });
+var combineOutlineClasses = (0, foundation_1.combineClasses)(utils_1.RcTextFieldInputClasses, utils_1.RcOutlineTextFieldInputClasses);
 var displayName = 'RcTextField';
-var _RcTextField = react_1.forwardRef(function (inProps, ref) {
-    var props = foundation_1.useThemeProps({ props: inProps, name: 'RcTextField' });
+var _RcTextField = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, foundation_1.useThemeProps)({ props: inProps, name: 'RcTextField' });
     if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        foundation_1.useDeprecatedCheck(RcTextField, props, [
+        (0, foundation_1.useDeprecatedCheck)(RcTextField, props, [
             {
                 prop: 'focusOnMount',
                 time: '2021-4',
@@ -49,11 +50,11 @@ var _RcTextField = react_1.forwardRef(function (inProps, ref) {
     variant = props.variant, radius = props.radius, size = props.size, align = props.align, textVariant = props.textVariant, gutterBottom = props.gutterBottom, color = props.color, 
     // #endregion
     rest = tslib_1.__rest(props, ["classes", "InputLabelProps", "FormHelperTextProps", "value", "focusOnMount", "selectOnMount", "clearAriaLabel", "autoFocus", "InputProps", "error", "helperText", "defaultValue", "inputRef", "autoSelect", "autoFocusDelay", "clearLabel", "clearButtonProps", "clearBtn", "validate", "onChange", "onBlur", "onFocus", "onClear", "id", "variant", "radius", "size", "align", "textVariant", "gutterBottom", "color"]);
-    var formContext = FormContext_1.useRcFormContext();
-    var innerRef = react_1.useRef();
-    var inputRef = foundation_1.useForkRef(inputRefProp, innerRef);
-    var _c = tslib_1.__read(react_1.useState(''), 2), validateMessage = _c[0], setValidateMessage = _c[1];
-    var runValidate = foundation_1.useEventCallback(function (value) {
+    var formContext = (0, FormContext_1.useRcFormContext)();
+    var innerRef = (0, react_1.useRef)();
+    var inputRef = (0, foundation_1.useForkRef)(inputRefProp, innerRef);
+    var _c = tslib_1.__read((0, react_1.useState)(''), 2), validateMessage = _c[0], setValidateMessage = _c[1];
+    var runValidate = (0, foundation_1.useEventCallback)(function (value) {
         if (value === void 0) { value = valueProp; }
         var validateMessage = false;
         if (validate) {
@@ -62,7 +63,7 @@ var _RcTextField = react_1.forwardRef(function (inProps, ref) {
         }
         return validateMessage;
     });
-    var handleClear = foundation_1.useEventCallback(function (event) {
+    var handleClear = (0, foundation_1.useEventCallback)(function (event) {
         var fakeEvent = { target: { value: '' } };
         onClear === null || onClear === void 0 ? void 0 : onClear(event);
         onChange === null || onChange === void 0 ? void 0 : onChange(fakeEvent);
@@ -71,7 +72,7 @@ var _RcTextField = react_1.forwardRef(function (inProps, ref) {
     var endAdornment = (function () {
         var getCleanButton = function () {
             var iconTitle = clearLabel || (clearButtonProps === null || clearButtonProps === void 0 ? void 0 : clearButtonProps.title);
-            var combineClearProps = foundation_1.combineProps({
+            var combineClearProps = (0, foundation_1.combineProps)({
                 TooltipProps: {
                     tooltipForceHide: !iconTitle,
                 },
@@ -90,7 +91,7 @@ var _RcTextField = react_1.forwardRef(function (inProps, ref) {
         }
         return clearBtn ? getCleanButton() : undefined;
     })();
-    var events = foundation_1.combineProps({
+    var events = (0, foundation_1.combineProps)({
         onBlur: function () {
             runValidate();
         },
@@ -103,19 +104,19 @@ var _RcTextField = react_1.forwardRef(function (inProps, ref) {
         onBlur: onBlur,
         onFocus: onFocus,
     });
-    var classes = react_1.useMemo(function () { return foundation_1.combineClasses(utils_1.RcTextFieldClasses, classesProp); }, [classesProp]);
+    var classes = (0, react_1.useMemo)(function () { return (0, foundation_1.combineClasses)(utils_1.RcTextFieldClasses, classesProp); }, [classesProp]);
     var additionClasses = {
         outline: combineOutlineClasses,
         borderLess: undefined,
         standard: undefined,
     }[variant];
-    var InputProps = foundation_1.combineProps({
+    var InputProps = (0, foundation_1.combineProps)({
         classes: additionClasses || utils_1.RcTextFieldInputClasses,
         disableUnderline: ['outline', 'borderLess', 'inline'].includes(variant),
     }, tslib_1.__assign(tslib_1.__assign({}, InputPropsProp), { endAdornment: endAdornment }));
-    var FormHelperTextProps = foundation_1.combineProps({ classes: utils_1.RcTextFieldFormHelperTextClasses }, FormHelperTextPropsProp);
-    var InputLabelProps = foundation_1.combineProps({ classes: utils_1.RcTextFieldInputLabelClasses, shrink: true }, InputLabelPropsProp);
-    react_1.useLayoutEffect(function () {
+    var FormHelperTextProps = (0, foundation_1.combineProps)({ classes: utils_1.RcTextFieldFormHelperTextClasses }, FormHelperTextPropsProp);
+    var InputLabelProps = (0, foundation_1.combineProps)({ classes: utils_1.RcTextFieldInputLabelClasses, shrink: true }, InputLabelPropsProp);
+    (0, react_1.useLayoutEffect)(function () {
         var inputElm = innerRef.current;
         var autoFocus = autoFocusProp || (InputPropsProp === null || InputPropsProp === void 0 ? void 0 : InputPropsProp.autoFocus);
         var timerId = null;
@@ -137,14 +138,14 @@ var _RcTextField = react_1.forwardRef(function (inProps, ref) {
             if (timerId)
                 clearTimeout(timerId);
             if (inputElm) {
-                foundation_1.clearReactReferencesInNode(inputElm);
+                (0, foundation_1.clearReactReferencesInNode)(inputElm);
             }
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     // TODO: remove this after upgrade to Mui5
-    var id = foundation_1.useId(idProp);
-    react_1.useEffect(function () {
+    var id = (0, foundation_1.useId)(idProp);
+    (0, react_1.useEffect)(function () {
         if (id)
             formContext.set(id, { validate: function () { return runValidate(); } });
         return function () {
@@ -156,9 +157,9 @@ var _RcTextField = react_1.forwardRef(function (inProps, ref) {
     return (react_1.default.createElement(TextField_1.default, tslib_1.__assign({}, rest, events, { id: id, value: valueProp, onChange: onChange, error: validate ? !!validateMessage : error, helperText: validateMessage || helperText, classes: classes, FormHelperTextProps: FormHelperTextProps, InputLabelProps: InputLabelProps, InputProps: InputProps, inputRef: inputRef, ref: ref })));
 });
 /** @release */
-var RcTextField = foundation_1.styled(_RcTextField).attrs(function (_a) {
+var RcTextField = (0, foundation_1.styled)(_RcTextField).attrs(function (_a) {
     var _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b, valueProp = _a.value, onChangeProp = _a.onChange, rest = tslib_1.__rest(_a, ["defaultValue", "value", "onChange"]);
-    var _c = tslib_1.__read(foundation_1.useControlled({
+    var _c = tslib_1.__read((0, foundation_1.useControlled)({
         default: defaultValue,
         controlled: valueProp,
         name: displayName,

package/components/Forms/TextField/styles/ClearIconButton.d.ts

@@ -1,5 +1,12 @@
 import React from 'react';
 import { WithTooltipProps } from '../../../Tooltip';
-export declare const ClearIconButton: React.ComponentType<WithTooltipProps<Pick<import("styled-components").ThemedOuterStyledProps<Pick<{}, never> & Pick<Pick<Pick<WithTooltipProps<Pick<import("../../../Buttons/IconButton/IconButton").RcIconButtonProps, "symbol" | "key" | "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "elevation" | "href" | "radius" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "download" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "variant" | "innerRef" | "disabled" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "loading" | "CircularProgressProps" | "iconColor" | "iconSize" | "invisible" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "IconProps" | "focusVariant" | "shouldPersistBg" | "stretchIcon" | "useColorWhenDisabled" | "activeElevation" | "disabledFakeBorder" | "alwaysEnableTooltip" | "tooltipTitle" | "tooltipPlacement" | "disableToolTip" | "popperProps" | "tooltipForceHide" | "externalLink" | "ariaLabel" | "aRef"> & React.RefAttributes<HTMLButtonElement>>, "symbol" | "key" | "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "elevation" | "href" | "radius" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "download" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "variant" | "innerRef" | "disabled" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "loading" | "CircularProgressProps" | "iconColor" | "iconSize" | "invisible" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "IconProps" | "focusVariant" | "useRcTooltip" | "TooltipProps" | "shouldPersistBg" | "stretchIcon" | "useColorWhenDisabled" | "activeElevation" | "disabledFakeBorder" | "alwaysEnableTooltip" | "tooltipTitle" | "tooltipPlacement" | "disableToolTip" | "popperProps" | "tooltipForceHide" | "externalLink" | "ariaLabel" | "aRef"> & React.RefAttributes<any>, "symbol" | "ref" | "key" | "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "elevation" | "href" | "radius" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "download" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "variant" | "innerRef" | "disabled" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "loading" | "CircularProgressProps" | "iconColor" | "iconSize" | "invisible" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "IconProps" | "focusVariant" | "useRcTooltip" | "TooltipProps" | "shouldPersistBg" | "stretchIcon" | "useColorWhenDisabled" | "activeElevation" | "disabledFakeBorder" | "alwaysEnableTooltip" | "tooltipTitle" | "tooltipPlacement" | "disableToolTip" | "popperProps" | "tooltipForceHide" | "externalLink" | "ariaLabel" | "aRef"> & {
+export declare const ClearIconButton: React.ComponentType<WithTooltipProps<Omit<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
     theme?: import("../../../../foundation").RcTheme | undefined;
-}, "symbol" | "ref" | "key" | "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "elevation" | "href" | "radius" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "download" | "theme" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "variant" | "innerRef" | "disabled" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "loading" | "CircularProgressProps" | "iconColor" | "iconSize" | "invisible" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "IconProps" | "focusVariant" | "useRcTooltip" | "TooltipProps" | "shouldPersistBg" | "stretchIcon" | "useColorWhenDisabled" | "activeElevation" | "disabledFakeBorder" | "alwaysEnableTooltip" | "tooltipTitle" | "tooltipPlacement" | "disableToolTip" | "popperProps" | "tooltipForceHide" | "externalLink" | "ariaLabel" | "aRef">, import("../../../../foundation").RcTheme>, "symbol" | "key" | "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "elevation" | "href" | "radius" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "download" | "theme" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "variant" | "innerRef" | "disabled" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "loading" | "CircularProgressProps" | "iconColor" | "iconSize" | "invisible" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "IconProps" | "focusVariant" | "useRcTooltip" | "TooltipProps" | "shouldPersistBg" | "stretchIcon" | "useColorWhenDisabled" | "activeElevation" | "disabledFakeBorder" | "alwaysEnableTooltip" | "tooltipTitle" | "tooltipPlacement" | "disableToolTip" | "popperProps" | "tooltipForceHide" | "externalLink" | "ariaLabel" | "aRef" | "as"> & React.RefAttributes<any>>>;
+} & {
+    as?: string | React.ComponentType<any> | undefined;
+    forwardedAs?: string | React.ComponentType<any> | undefined;
+}, "ref"> & React.RefAttributes<any>>>;

package/components/Forms/TextField/styles/ClearIconButton.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClearIconButton = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var juno_icon_1 = require("@ringcentral/juno-icon");
@@ -7,8 +8,8 @@ var foundation_1 = require("../../../../foundation");
 var IconButton_1 = require("../../../Buttons/IconButton");
 var Box_1 = require("../../../Box");
 var Tooltip_1 = require("../../../Tooltip");
-var FakeButton = foundation_1.styled(IconButton_1.RcIconButton)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  right: 0;\n  pointer-events: none;\n"])));
-var _ClearIconButton = react_1.forwardRef(function (_a, ref) {
+var FakeButton = (0, foundation_1.styled)(IconButton_1.RcIconButton)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  right: 0;\n  pointer-events: none;\n"])));
+var _ClearIconButton = (0, react_1.forwardRef)(function (_a, ref) {
     var onMouseDown = _a.onMouseDown, size = _a.size, iconSize = _a.iconSize, rest = tslib_1.__rest(_a, ["onMouseDown", "size", "iconSize"]);
     return (react_1.default.createElement(Box_1.RcBox, { display: "inline-flex", alignItems: "center", position: "relative" },
         react_1.default.createElement(IconButton_1.RcIconButton, tslib_1.__assign({ type: "button", "aria-hidden": true, variant: "plain", symbol: juno_icon_1.DeleteCircle, tabIndex: -1, 
@@ -20,6 +21,6 @@ var _ClearIconButton = react_1.forwardRef(function (_a, ref) {
         react_1.default.createElement(FakeButton, { variant: "plain", as: "div", size: size, ref: ref })));
 });
 // TODO: fix this after upgarde ts
-exports.ClearIconButton = foundation_1.styled(Tooltip_1.withTooltip(_ClearIconButton))(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  position: relative;\n"])));
+exports.ClearIconButton = (0, foundation_1.styled)((0, Tooltip_1.withTooltip)(_ClearIconButton))(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  position: relative;\n"])));
 exports.ClearIconButton.defaultProps = { useRcTooltip: true };
 var templateObject_1, templateObject_2;

package/components/Forms/TextField/styles/OutlineTextFieldStyle.js

@@ -1,18 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.OutlineTextFieldStyle = void 0;
 var tslib_1 = require("tslib");
 var foundation_1 = require("../../../../foundation");
 var utils_1 = require("../utils");
-exports.OutlineTextFieldStyle = function (_a) {
+var OutlineTextFieldStyle = function (_a) {
     var radius = _a.radius, size = _a.size, colorProp = _a.color, multiline = _a.multiline;
-    var height = foundation_1.px(utils_1.RcOutlineTextFieldHeights[size]);
+    var height = (0, foundation_1.px)(utils_1.RcOutlineTextFieldHeights[size]);
     var _b = utils_1.RcOutlineTextFieldSpaces[size], inside = _b.inside, outside = _b.outside, insideLeft = _b.insideLeft, y = _b.y;
     var labelMargin = utils_1.RcOutlineTextFieldLabelMargins[size];
     var typographyToken = utils_1.RcOutlineTextFieldFontStyles[size];
-    var currRadius = foundation_1.radius(radius);
-    var borderColor = foundation_1.getParsePaletteColor(colorProp, foundation_1.palette2('neutral', 'l03'));
-    var focusBorderColor = foundation_1.getParsePaletteColor(colorProp, foundation_1.palette2('interactive', 'f01'));
+    var currRadius = (0, foundation_1.radius)(radius);
+    var borderColor = (0, foundation_1.getParsePaletteColor)(colorProp, (0, foundation_1.palette2)('neutral', 'l03'));
+    var focusBorderColor = (0, foundation_1.getParsePaletteColor)(colorProp, (0, foundation_1.palette2)('interactive', 'f01'));
     // `-webkit-tap-highlight-color` for cover background color, prevent color be cover by browser
-    return foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    .", " {\n      ", ";\n    }\n\n    ", ";\n\n    * + .", " {\n      margin-left: ", ";\n    }\n\n    &.", " {\n      label + .", " {\n        margin-top: ", ";\n      }\n    }\n\n    .", " {\n      -webkit-tap-highlight-color: transparent;\n      min-height: ", ";\n      background: ", ";\n      padding: ", ";\n      border-radius: ", ";\n\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        border-radius: ", ";\n        transition: none;\n        border-bottom: none !important;\n        pointer-events: none;\n        ", ";\n      }\n\n      &:not(.", "):not(.", "):hover {\n        background: ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      background: ", ";\n      &:before {\n        ", ";\n      }\n    }\n  "], ["\n    .", " {\n      ", ";\n    }\n\n    ", ";\n\n    * + .", " {\n      margin-left: ", ";\n    }\n\n    &.", " {\n      label + .", " {\n        margin-top: ", ";\n      }\n    }\n\n    .", " {\n      -webkit-tap-highlight-color: transparent;\n      min-height: ", ";\n      background: ", ";\n      padding: ", ";\n      border-radius: ", ";\n\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        border-radius: ", ";\n        transition: none;\n        border-bottom: none !important;\n        pointer-events: none;\n        ", ";\n      }\n\n      &:not(.", "):not(.", "):hover {\n        background: ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      background: ", ";\n      &:before {\n        ", ";\n      }\n    }\n  "])), utils_1.RcOutlineTextFieldInputClasses.input, foundation_1.typography(typographyToken), utils_1.belowIconButtonSpacing(foundation_1.spacing(inside)), utils_1.RcOutlineTextFieldInputClasses.input, foundation_1.spacing(insideLeft || inside), utils_1.RcTextFieldClasses.root, utils_1.RcOutlineTextFieldInputClasses.root, foundation_1.spacing(labelMargin), utils_1.RcOutlineTextFieldInputClasses.root, height, foundation_1.palette2('neutral', 'b01'), foundation_1.spacing(multiline ? y : 0, outside), currRadius, currRadius, foundation_1.fakeBorder({ color: borderColor }), utils_1.RcOutlineTextFieldInputClasses.focused, utils_1.RcOutlineTextFieldInputClasses.disabled, foundation_1.palette2('neutral', 'b02'), utils_1.RcOutlineTextFieldInputClasses.focused, foundation_1.fakeBorder({ color: focusBorderColor }), utils_1.RcOutlineTextFieldInputClasses.error, foundation_1.fakeBorder({ color: foundation_1.palette2('danger', 'f02') }), utils_1.RcOutlineTextFieldInputClasses.disabled, foundation_1.palette2('neutral', 'b03'), foundation_1.fakeBorder({ color: foundation_1.palette2('disabled', 'f02') }));
+    return (0, foundation_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    .", " {\n      ", ";\n    }\n\n    ", ";\n\n    * + .", " {\n      margin-left: ", ";\n    }\n\n    &.", " {\n      label + .", " {\n        margin-top: ", ";\n      }\n    }\n\n    .", " {\n      -webkit-tap-highlight-color: transparent;\n      min-height: ", ";\n      background: ", ";\n      padding: ", ";\n      border-radius: ", ";\n\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        border-radius: ", ";\n        transition: none;\n        border-bottom: none !important;\n        pointer-events: none;\n        ", ";\n      }\n\n      &:not(.", "):not(.", "):hover {\n        background: ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      background: ", ";\n      &:before {\n        ", ";\n      }\n    }\n  "], ["\n    .", " {\n      ", ";\n    }\n\n    ", ";\n\n    * + .", " {\n      margin-left: ", ";\n    }\n\n    &.", " {\n      label + .", " {\n        margin-top: ", ";\n      }\n    }\n\n    .", " {\n      -webkit-tap-highlight-color: transparent;\n      min-height: ", ";\n      background: ", ";\n      padding: ", ";\n      border-radius: ", ";\n\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        border-radius: ", ";\n        transition: none;\n        border-bottom: none !important;\n        pointer-events: none;\n        ", ";\n      }\n\n      &:not(.", "):not(.", "):hover {\n        background: ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      background: ", ";\n      &:before {\n        ", ";\n      }\n    }\n  "])), utils_1.RcOutlineTextFieldInputClasses.input, (0, foundation_1.typography)(typographyToken), (0, utils_1.belowIconButtonSpacing)((0, foundation_1.spacing)(inside)), utils_1.RcOutlineTextFieldInputClasses.input, (0, foundation_1.spacing)(insideLeft || inside), utils_1.RcTextFieldClasses.root, utils_1.RcOutlineTextFieldInputClasses.root, (0, foundation_1.spacing)(labelMargin), utils_1.RcOutlineTextFieldInputClasses.root, height, (0, foundation_1.palette2)('neutral', 'b01'), (0, foundation_1.spacing)(multiline ? y : 0, outside), currRadius, currRadius, (0, foundation_1.fakeBorder)({ color: borderColor }), utils_1.RcOutlineTextFieldInputClasses.focused, utils_1.RcOutlineTextFieldInputClasses.disabled, (0, foundation_1.palette2)('neutral', 'b02'), utils_1.RcOutlineTextFieldInputClasses.focused, (0, foundation_1.fakeBorder)({ color: focusBorderColor }), utils_1.RcOutlineTextFieldInputClasses.error, (0, foundation_1.fakeBorder)({ color: (0, foundation_1.palette2)('danger', 'f02') }), utils_1.RcOutlineTextFieldInputClasses.disabled, (0, foundation_1.palette2)('neutral', 'b03'), (0, foundation_1.fakeBorder)({ color: (0, foundation_1.palette2)('disabled', 'f02') }));
 };
+exports.OutlineTextFieldStyle = OutlineTextFieldStyle;
 var templateObject_1;

package/components/Forms/TextField/styles/TextFieldStyle.d.ts

@@ -4,5 +4,5 @@ export declare const textColor: import("../../../../foundation/styles/newPalette
 export declare const disabledColor: import("../../../../foundation/styles/newPalette").PaletteReturnType;
 export declare const placeholderColor: import("../../../../foundation/styles/newPalette").PaletteReturnType;
 export declare const RcDefaultTextFieldWidth = "168px";
-export declare const clearBtnInactiveStyle: import("styled-components").InterpolationValue[];
+export declare const clearBtnInactiveStyle: import("styled-components").FlattenSimpleInterpolation;
 export declare const TextFieldStyle: RcThemedStyled<RcTextFieldProps, any>;

package/components/Forms/TextField/styles/TextFieldStyle.js

@@ -1,32 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextFieldStyle = exports.clearBtnInactiveStyle = exports.RcDefaultTextFieldWidth = exports.placeholderColor = exports.disabledColor = exports.textColor = void 0;
 var tslib_1 = require("tslib");
 var foundation_1 = require("../../../../foundation");
 var utils_1 = require("../../../Buttons/IconButton/utils");
 var utils_2 = require("../utils");
 var ClearIconButton_1 = require("./ClearIconButton");
 var OutlineTextFieldStyle_1 = require("./OutlineTextFieldStyle");
-var idleColor = foundation_1.palette2('neutral', 'f04');
-var errorTextColor = foundation_1.palette2('danger', 'f02');
-var errorColor = foundation_1.palette2('danger', 'f02');
-exports.textColor = foundation_1.palette2('neutral', 'f06');
-exports.disabledColor = foundation_1.palette2('disabled', 'f02');
-exports.placeholderColor = foundation_1.palette2('neutral', 'f03');
+var idleColor = (0, foundation_1.palette2)('neutral', 'f04');
+var errorTextColor = (0, foundation_1.palette2)('danger', 'f02');
+var errorColor = (0, foundation_1.palette2)('danger', 'f02');
+exports.textColor = (0, foundation_1.palette2)('neutral', 'f06');
+exports.disabledColor = (0, foundation_1.palette2)('disabled', 'f02');
+exports.placeholderColor = (0, foundation_1.palette2)('neutral', 'f03');
 exports.RcDefaultTextFieldWidth = '168px';
-var focusWithNotDisabled = "." + utils_2.RcTextFieldInputClasses.root + ":hover:not(." + utils_2.RcTextFieldInputClasses.disabled + ")";
-var TextFieldInputHoverFocusStyle = foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", " {\n    display: inline-flex;\n  }\n"], ["\n  ", " {\n    display: inline-flex;\n  }\n"])), ClearIconButton_1.ClearIconButton);
-exports.clearBtnInactiveStyle = foundation_1.css(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", " {\n    ", " {\n      ", "\n    }\n  }\n\n  .", " {\n    ", "\n  }\n"], ["\n  ", " {\n    ", " {\n      ", "\n    }\n  }\n\n  .", " {\n    ", "\n  }\n"])), foundation_1.nonTouchHoverMedia, focusWithNotDisabled, TextFieldInputHoverFocusStyle, utils_2.RcTextFieldInputClasses.focused, TextFieldInputHoverFocusStyle);
-exports.TextFieldStyle = function (props) {
+var focusWithNotDisabled = ".".concat(utils_2.RcTextFieldInputClasses.root, ":hover:not(.").concat(utils_2.RcTextFieldInputClasses.disabled, ")");
+var TextFieldInputHoverFocusStyle = (0, foundation_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", " {\n    display: inline-flex;\n  }\n"], ["\n  ", " {\n    display: inline-flex;\n  }\n"])), ClearIconButton_1.ClearIconButton);
+exports.clearBtnInactiveStyle = (0, foundation_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", " {\n    ", " {\n      ", "\n    }\n  }\n\n  .", " {\n    ", "\n  }\n"], ["\n  ", " {\n    ", " {\n      ", "\n    }\n  }\n\n  .", " {\n    ", "\n  }\n"])), foundation_1.nonTouchHoverMedia, focusWithNotDisabled, TextFieldInputHoverFocusStyle, utils_2.RcTextFieldInputClasses.focused, TextFieldInputHoverFocusStyle);
+var TextFieldStyle = function (props) {
     var value = props.value, variant = props.variant, fullWidth = props.fullWidth, clearBtn = props.clearBtn, size = props.size, textVariant = props.textVariant, gutterBottom = props.gutterBottom, align = props.align, colorProp = props.color;
-    var showClean = foundation_1.isFilled({ value: value });
-    var color = foundation_1.getParsePaletteColor(colorProp, foundation_1.palette2('interactive', 'f01'));
-    var labelRootColor = foundation_1.getParsePaletteColor(colorProp, idleColor);
-    var underlineColor = foundation_1.getParsePaletteColor(colorProp, foundation_1.palette2('neutral', 'f02'));
-    var underlineFocusColor = foundation_1.getParsePaletteColor(colorProp, foundation_1.palette2('neutral', 'f06'));
-    return foundation_1.css(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n    ", ";\n\n    width: ", ";\n\n    ", ";\n\n    .", " {\n      ", ";\n      color: ", ";\n      transform: scale(1);\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      color: ", ";\n\n      ", " {\n        display: none;\n      }\n    }\n\n    ", ";\n\n    .", " {\n      ", ";\n      text-align: ", ";\n\n      ::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n\n      &:placeholder-shown {\n        ", "\n      }\n\n      ", ";\n    }\n\n    .", " {\n      &:before {\n        border-bottom-color: ", ";\n      }\n\n      ", " {\n        &:hover:not(.", ") {\n          &:before {\n            border-bottom-color: ", ";\n          }\n        }\n      }\n\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n      // * safari need that in disabled input\n      -webkit-text-fill-color: ", ";\n      ::placeholder {\n        color: ", ";\n      }\n      &:before {\n        border-bottom-style: solid;\n        border-bottom-color: ", ";\n      }\n      &:after {\n        border-bottom-style: none;\n      }\n    }\n\n    .", " {\n      ", ";\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    /* clears the 'X' from Internet Explorer */\n    input[type='search']::-ms-clear,\n    input[type='search']::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n\n    /* clears the 'X' from Chrome */\n    input[type='search']::-webkit-search-decoration,\n    input[type='search']::-webkit-search-cancel-button,\n    input[type='search']::-webkit-search-results-button,\n    input[type='search']::-webkit-search-results-decoration {\n      display: none;\n    }\n\n    ", "\n  "], ["\n    ", ";\n\n    width: ", ";\n\n    ",
-        ";\n\n    .", " {\n      ", ";\n      color: ", ";\n      transform: scale(1);\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      color: ", ";\n\n      ", " {\n        display: none;\n      }\n    }\n\n    ", ";\n\n    .", " {\n      ", ";\n      text-align: ", ";\n\n      ::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n\n      &:placeholder-shown {\n        ", "\n      }\n\n      ",
-        ";\n    }\n\n    .", " {\n      &:before {\n        border-bottom-color: ", ";\n      }\n\n      ", " {\n        &:hover:not(.", ") {\n          &:before {\n            border-bottom-color: ", ";\n          }\n        }\n      }\n\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n      // * safari need that in disabled input\n      -webkit-text-fill-color: ", ";\n      ::placeholder {\n        color: ", ";\n      }\n      &:before {\n        border-bottom-style: solid;\n        border-bottom-color: ", ";\n      }\n      &:after {\n        border-bottom-style: none;\n      }\n    }\n\n    .", " {\n      ", ";\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    /* clears the 'X' from Internet Explorer */\n    input[type='search']::-ms-clear,\n    input[type='search']::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n\n    /* clears the 'X' from Chrome */\n    input[type='search']::-webkit-search-decoration,\n    input[type='search']::-webkit-search-cancel-button,\n    input[type='search']::-webkit-search-results-button,\n    input[type='search']::-webkit-search-results-decoration {\n      display: none;\n    }\n\n    ", "\n  "])), utils_2.belowIconButtonSpacing(foundation_1.spacing(3)), !fullWidth && exports.RcDefaultTextFieldWidth, gutterBottom && foundation_1.css(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n      &.", " {\n        margin: 0 0 ", " 0;\n      }\n    "], ["\n      &.", " {\n        margin: 0 0 ", " 0;\n      }\n    "])), utils_2.RcTextFieldClasses.root, foundation_1.spacing(4)), utils_2.RcTextFieldInputLabelClasses.root, foundation_1.typography('caption2'), labelRootColor, utils_2.RcTextFieldInputLabelClasses.focused, color, utils_2.RcTextFieldInputClasses.root, exports.textColor, ClearIconButton_1.ClearIconButton, showClean && exports.clearBtnInactiveStyle, utils_2.RcTextFieldInputClasses.input, foundation_1.typography(variant === 'borderLess' ? textVariant : 'subheading1'), align, exports.placeholderColor, foundation_1.ellipsis, clearBtn &&
+    var showClean = (0, foundation_1.isFilled)({ value: value });
+    var color = (0, foundation_1.getParsePaletteColor)(colorProp, (0, foundation_1.palette2)('interactive', 'f01'));
+    var labelRootColor = (0, foundation_1.getParsePaletteColor)(colorProp, idleColor);
+    var underlineColor = (0, foundation_1.getParsePaletteColor)(colorProp, (0, foundation_1.palette2)('neutral', 'f02'));
+    var underlineFocusColor = (0, foundation_1.getParsePaletteColor)(colorProp, (0, foundation_1.palette2)('neutral', 'f06'));
+    return (0, foundation_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n    ", ";\n\n    width: ", ";\n\n    ", ";\n\n    .", " {\n      ", ";\n      color: ", ";\n      transform: scale(1);\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      color: ", ";\n\n      ", " {\n        display: none;\n      }\n    }\n\n    ", ";\n\n    .", " {\n      ", ";\n      text-align: ", ";\n\n      ::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n\n      &:placeholder-shown {\n        ", "\n      }\n\n      ", ";\n    }\n\n    .", " {\n      &:before {\n        border-bottom-color: ", ";\n      }\n\n      ", " {\n        &:hover:not(.", ") {\n          &:before {\n            border-bottom-color: ", ";\n          }\n        }\n      }\n\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n      // * safari need that in disabled input\n      -webkit-text-fill-color: ", ";\n      ::placeholder {\n        color: ", ";\n      }\n      &:before {\n        border-bottom-style: solid;\n        border-bottom-color: ", ";\n      }\n      &:after {\n        border-bottom-style: none;\n      }\n    }\n\n    .", " {\n      ", ";\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    /* clears the 'X' from Internet Explorer */\n    input[type='search']::-ms-clear,\n    input[type='search']::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n\n    /* clears the 'X' from Chrome */\n    input[type='search']::-webkit-search-decoration,\n    input[type='search']::-webkit-search-cancel-button,\n    input[type='search']::-webkit-search-results-button,\n    input[type='search']::-webkit-search-results-decoration {\n      display: none;\n    }\n\n    ", "\n  "], ["\n    ", ";\n\n    width: ", ";\n\n    ", ";\n\n    .", " {\n      ", ";\n      color: ", ";\n      transform: scale(1);\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      color: ", ";\n\n      ", " {\n        display: none;\n      }\n    }\n\n    ", ";\n\n    .", " {\n      ", ";\n      text-align: ", ";\n\n      ::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n\n      &:placeholder-shown {\n        ", "\n      }\n\n      ", ";\n    }\n\n    .", " {\n      &:before {\n        border-bottom-color: ", ";\n      }\n\n      ", " {\n        &:hover:not(.", ") {\n          &:before {\n            border-bottom-color: ", ";\n          }\n        }\n      }\n\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n      // * safari need that in disabled input\n      -webkit-text-fill-color: ", ";\n      ::placeholder {\n        color: ", ";\n      }\n      &:before {\n        border-bottom-style: solid;\n        border-bottom-color: ", ";\n      }\n      &:after {\n        border-bottom-style: none;\n      }\n    }\n\n    .", " {\n      ", ";\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    /* clears the 'X' from Internet Explorer */\n    input[type='search']::-ms-clear,\n    input[type='search']::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n\n    /* clears the 'X' from Chrome */\n    input[type='search']::-webkit-search-decoration,\n    input[type='search']::-webkit-search-cancel-button,\n    input[type='search']::-webkit-search-results-button,\n    input[type='search']::-webkit-search-results-decoration {\n      display: none;\n    }\n\n    ", "\n  "])), (0, utils_2.belowIconButtonSpacing)((0, foundation_1.spacing)(3)), !fullWidth && exports.RcDefaultTextFieldWidth, gutterBottom && (0, foundation_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n      &.", " {\n        margin: 0 0 ", " 0;\n      }\n    "], ["\n      &.", " {\n        margin: 0 0 ", " 0;\n      }\n    "])), utils_2.RcTextFieldClasses.root, (0, foundation_1.spacing)(4)), utils_2.RcTextFieldInputLabelClasses.root, (0, foundation_1.typography)('caption2'), labelRootColor, utils_2.RcTextFieldInputLabelClasses.focused, color, utils_2.RcTextFieldInputClasses.root, exports.textColor, ClearIconButton_1.ClearIconButton, showClean && exports.clearBtnInactiveStyle, utils_2.RcTextFieldInputClasses.input, (0, foundation_1.typography)(variant === 'borderLess' ? textVariant : 'subheading1'), align, exports.placeholderColor, foundation_1.ellipsis, clearBtn &&
         align &&
-        align !== 'left' && foundation_1.css(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n        width: calc(100% - ", ");\n      "], ["\n        width: calc(100% - ", ");\n      "])), foundation_1.px(utils_1.RcIconButtonSizes[size])), utils_2.RcTextFieldInputClasses.underline, underlineColor, foundation_1.nonTouchHoverMedia, utils_2.RcTextFieldInputClasses.disabled, underlineFocusColor, color, utils_2.RcTextFieldInputClasses.error, errorColor, utils_2.RcTextFieldInputClasses.disabled, exports.disabledColor, exports.disabledColor, exports.disabledColor, exports.disabledColor, utils_2.RcTextFieldFormHelperTextClasses.root, foundation_1.typography('caption1'), idleColor, utils_2.RcTextFieldFormHelperTextClasses.error, utils_2.RcTextFieldInputLabelClasses.error, errorTextColor, utils_2.RcTextFieldFormHelperTextClasses.disabled, utils_2.RcTextFieldInputLabelClasses.disabled, exports.disabledColor, variant === 'outline' && OutlineTextFieldStyle_1.OutlineTextFieldStyle);
+        align !== 'left' && (0, foundation_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n        width: calc(100% - ", ");\n      "], ["\n        width: calc(100% - ", ");\n      "])), (0, foundation_1.px)(utils_1.RcIconButtonSizes[size])), utils_2.RcTextFieldInputClasses.underline, underlineColor, foundation_1.nonTouchHoverMedia, utils_2.RcTextFieldInputClasses.disabled, underlineFocusColor, color, utils_2.RcTextFieldInputClasses.error, errorColor, utils_2.RcTextFieldInputClasses.disabled, exports.disabledColor, exports.disabledColor, exports.disabledColor, exports.disabledColor, utils_2.RcTextFieldFormHelperTextClasses.root, (0, foundation_1.typography)('caption1'), idleColor, utils_2.RcTextFieldFormHelperTextClasses.error, utils_2.RcTextFieldInputLabelClasses.error, errorTextColor, utils_2.RcTextFieldFormHelperTextClasses.disabled, utils_2.RcTextFieldInputLabelClasses.disabled, exports.disabledColor, variant === 'outline' && OutlineTextFieldStyle_1.OutlineTextFieldStyle);
 };
+exports.TextFieldStyle = TextFieldStyle;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/components/Forms/TextField/utils/OutlineTextFieldUtils.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcOutlineTextFieldIconSizes = exports.RcOutlineTextFieldFontStyles = exports.RcOutlineTextFieldHeights = exports.RcOutlineTextFieldLabelMargins = exports.RcOutlineTextFieldSpaces = exports.RcOutlineTextFieldInputClasses = void 0;
 var foundation_1 = require("../../../../foundation");
-exports.RcOutlineTextFieldInputClasses = foundation_1.RcClasses(['input', 'root', 'focused', 'disabled', 'error'], 'RcOutlineTextFieldInput');
+exports.RcOutlineTextFieldInputClasses = (0, foundation_1.RcClasses)(['input', 'root', 'focused', 'disabled', 'error'], 'RcOutlineTextFieldInput');
 exports.RcOutlineTextFieldSpaces = {
     small: {
         outside: 3,

package/components/Forms/TextField/utils/TextFieldUtils.d.ts

@@ -1,7 +1,7 @@
-import { RcThemedStyled } from '../../../../foundation';
+import { RcThemedStyled, spacing } from '../../../../foundation';
 import { RcTextFieldProps } from '../TextField';
 export declare const RcTextFieldClasses: Partial<import("../../../../foundation").UnitMap<"root", any>>;
 export declare const RcTextFieldInputClasses: Partial<import("../../../../foundation").UnitMap<import("@material-ui/core").InputClassKey, any>>;
 export declare const RcTextFieldInputLabelClasses: Partial<import("../../../../foundation").UnitMap<import("@material-ui/core").InputLabelClassKey, any>>;
 export declare const RcTextFieldFormHelperTextClasses: Partial<import("../../../../foundation").UnitMap<import("@material-ui/core").FormHelperTextClassKey, any>>;
-export declare const belowIconButtonSpacing: (spaceNum: ({ theme }: import("../../../../foundation").RcThemeProps) => string) => RcThemedStyled<RcTextFieldProps, any>;
+export declare const belowIconButtonSpacing: (spaceNum: ReturnType<typeof spacing>) => RcThemedStyled<RcTextFieldProps, any>;

package/components/Forms/TextField/utils/TextFieldUtils.js

@@ -1,20 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.belowIconButtonSpacing = exports.RcTextFieldFormHelperTextClasses = exports.RcTextFieldInputLabelClasses = exports.RcTextFieldInputClasses = exports.RcTextFieldClasses = void 0;
 var tslib_1 = require("tslib");
 var foundation_1 = require("../../../../foundation");
 var IconButton_1 = require("../../../Buttons/IconButton");
-exports.RcTextFieldClasses = foundation_1.RcClasses(['root'], 'RcTextField');
-exports.RcTextFieldInputClasses = foundation_1.RcClasses(['root', 'underline', 'error', 'focused', 'disabled', 'input'], 'RcTextFieldInput');
-exports.RcTextFieldInputLabelClasses = foundation_1.RcClasses(['root', 'error', 'focused', 'disabled'], 'RcTextFieldInputLabel');
-exports.RcTextFieldFormHelperTextClasses = foundation_1.RcClasses(['root', 'error', 'disabled'], 'RcTextFieldFormHelperText');
-exports.belowIconButtonSpacing = function (spaceNum) {
+exports.RcTextFieldClasses = (0, foundation_1.RcClasses)(['root'], 'RcTextField');
+exports.RcTextFieldInputClasses = (0, foundation_1.RcClasses)(['root', 'underline', 'error', 'focused', 'disabled', 'input'], 'RcTextFieldInput');
+exports.RcTextFieldInputLabelClasses = (0, foundation_1.RcClasses)(['root', 'error', 'focused', 'disabled'], 'RcTextFieldInputLabel');
+exports.RcTextFieldFormHelperTextClasses = (0, foundation_1.RcClasses)(['root', 'error', 'disabled'], 'RcTextFieldFormHelperText');
+var belowIconButtonSpacing = function (spaceNum) {
     var themeFn = function (_a) {
         var clearBtn = _a.clearBtn;
         if (clearBtn) {
-            return foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n        *:not(input) + ", " {\n          margin-left: ", ";\n        }\n      "], ["\n        *:not(input) + ", " {\n          margin-left: ", ";\n        }\n      "])), IconButton_1.RcIconButton, spaceNum);
+            return (0, foundation_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n        *:not(input) + ", " {\n          margin-left: ", ";\n        }\n      "], ["\n        *:not(input) + ", " {\n          margin-left: ", ";\n        }\n      "])), IconButton_1.RcIconButton, spaceNum);
         }
-        return foundation_1.css(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n      ", " {\n        margin-left: ", ";\n      }\n    "], ["\n      ", " {\n        margin-left: ", ";\n      }\n    "])), IconButton_1.RcIconButton, spaceNum);
+        return (0, foundation_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n      ", " {\n        margin-left: ", ";\n      }\n    "], ["\n      ", " {\n        margin-left: ", ";\n      }\n    "])), IconButton_1.RcIconButton, spaceNum);
     };
     return themeFn;
 };
+exports.belowIconButtonSpacing = belowIconButtonSpacing;
 var templateObject_1, templateObject_2;

package/components/Forms/Textarea/Textarea.d.ts

@@ -1,10 +1,8 @@
 import React from 'react';
 import { RcBaseProps } from '../../../foundation';
 import { RcTextFieldProps } from '../TextField';
-declare type RcTextareaProps = {} & RcBaseProps<RcTextFieldProps, 'clearBtn' | 'clearButtonProps' | 'clearLabel' | 'clearAriaLabel' | 'variant'>;
+type RcTextareaProps = {} & RcBaseProps<RcTextFieldProps, 'clearBtn' | 'clearButtonProps' | 'clearLabel' | 'clearAriaLabel' | 'variant'>;
 /** @release */
-declare const RcTextarea: import("styled-components").StyledComponentClass<Pick<Pick<RcTextFieldProps, "ref" | "key" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "radius" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "slot" | "title" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "innerRef" | "disabled" | "focused" | "autoFocus" | "fullWidth" | "error" | "inputProps" | "inputRef" | "required" | "InputProps" | "autoComplete" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "multiline" | "rows" | "maxRows" | "minRows" | "align" | "gutterBottom" | "onClear" | "textVariant" | "autoSelect" | "focusOnMount" | "selectOnMount" | "autoFocusDelay" | "validate">, "key" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "radius" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "slot" | "title" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "innerRef" | "disabled" | "focused" | "autoFocus" | "fullWidth" | "error" | "inputProps" | "inputRef" | "required" | "InputProps" | "autoComplete" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "multiline" | "rows" | "maxRows" | "minRows" | "align" | "gutterBottom" | "onClear" | "textVariant" | "autoSelect" | "focusOnMount" | "selectOnMount" | "autoFocusDelay" | "validate"> & React.RefAttributes<any>, import("../../../foundation").RcTheme, Pick<Pick<Pick<RcTextFieldProps, "ref" | "key" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "radius" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "slot" | "title" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "innerRef" | "disabled" | "focused" | "autoFocus" | "fullWidth" | "error" | "inputProps" | "inputRef" | "required" | "InputProps" | "autoComplete" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "multiline" | "rows" | "maxRows" | "minRows" | "align" | "gutterBottom" | "onClear" | "textVariant" | "autoSelect" | "focusOnMount" | "selectOnMount" | "autoFocusDelay" | "validate">, "key" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "radius" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "slot" | "title" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "innerRef" | "disabled" | "focused" | "autoFocus" | "fullWidth" | "error" | "inputProps" | "inputRef" | "required" | "InputProps" | "autoComplete" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "multiline" | "rows" | "maxRows" | "minRows" | "align" | "gutterBottom" | "onClear" | "textVariant" | "autoSelect" | "focusOnMount" | "selectOnMount" | "autoFocusDelay" | "validate"> & React.RefAttributes<any>, "ref" | "key" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "radius" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "slot" | "title" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "innerRef" | "disabled" | "focused" | "autoFocus" | "fullWidth" | "error" | "inputProps" | "inputRef" | "required" | "InputProps" | "autoComplete" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "multiline" | "rows" | "maxRows" | "minRows" | "align" | "gutterBottom" | "onClear" | "textVariant" | "autoSelect" | "focusOnMount" | "selectOnMount" | "autoFocusDelay" | "validate"> & {
-    theme?: import("../../../foundation").RcTheme | undefined;
-}>;
+declare const RcTextarea: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<RcBaseProps<RcTextFieldProps, "variant" | "clearBtn" | "clearButtonProps" | "clearLabel" | "clearAriaLabel">, "ref"> & React.RefAttributes<any>>, import("../../../foundation").RcTheme, {}, never>;
 export { RcTextarea };
 export type { RcTextareaProps };

package/components/Forms/Textarea/Textarea.js

@@ -1,16 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcTextarea = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var foundation_1 = require("../../../foundation");
 var TextField_1 = require("../TextField");
 var styles_1 = require("./styles");
 var utils_1 = require("./utils");
-var _RcTextarea = react_1.forwardRef(function (inProps, ref) {
-    var props = foundation_1.useThemeProps({ props: inProps, name: 'RcTextarea' });
+var _RcTextarea = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, foundation_1.useThemeProps)({ props: inProps, name: 'RcTextarea' });
     var classes = props.classes, InputPropsProp = props.InputProps, rowsProp = props.rows, minRows = props.minRows, maxRows = props.maxRows, rest = tslib_1.__rest(props, ["classes", "InputProps", "rows", "minRows", "maxRows"]);
-    var InputProps = react_1.useMemo(function () {
-        return foundation_1.combineProps({
+    var InputProps = (0, react_1.useMemo)(function () {
+        return (0, foundation_1.combineProps)({
             classes: utils_1.RcTextareaInputClasses,
         }, InputPropsProp);
     }, [InputPropsProp]);
@@ -22,7 +23,7 @@ var _RcTextarea = react_1.forwardRef(function (inProps, ref) {
     return (react_1.default.createElement(TextField_1.RcTextField, tslib_1.__assign({}, rest, { rows: rows, minRows: minRows, maxRows: maxRows, multiline: true, InputProps: InputProps, clearBtn: false, ref: ref })));
 });
 /** @release */
-var RcTextarea = foundation_1.styled(_RcTextarea)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.TextareaStyle);
+var RcTextarea = (0, foundation_1.styled)(_RcTextarea)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.TextareaStyle);
 exports.RcTextarea = RcTextarea;
 RcTextarea.defaultProps = {
     rows: 3,