pds-dev-kit-web-test 2.5.706 → 2.5.708

package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.js

@@ -1,54 +1,67 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+
+var __makeTemplateObject = this && this.__makeTemplateObject || function (cooked, raw) {
+  if (Object.defineProperty) {
+    Object.defineProperty(cooked, "raw", {
+      value: raw
+    });
+  } else {
+    cooked.raw = raw;
+  }
+  return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
+  Object.defineProperty(o, "default", {
+    enumerable: true,
+    value: v
+  });
+} : function (o, v) {
+  o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importStar = this && this.__importStar || function (mod) {
+  if (mod && mod.__esModule) return mod;
+  var result = {};
+  if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+  __setModuleDefault(result, mod);
+  return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable better-styled-components/sort-declarations-alphabetically */
 /* eslint-disable react/jsx-no-bind */
@@ -61,455 +74,692 @@ var common_1 = require("../../../../common");
 var IconButton_1 = require("../../../components/IconButton");
 var constants_1 = require("./constants");
 function TextFieldBase(_a) {
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.enterSubmitMode, enterSubmitMode = _d === void 0 ? 'none' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _f = _a.inputType, inputType = _f === void 0 ? 'text' : _f, inputMode = _a.inputMode, _g = _a.state, state = _g === void 0 ? 'normal' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, min = _a.min, max = _a.max, _j = _a.maxLength, maxLength = _j === void 0 ? Infinity : _j, _k = _a.textSize, textSize = _k === void 0 ? 'form2' : _k, _l = _a.textWeight, textWeight = _l === void 0 ? 'normal' : _l, fieldPaddingRight = _a.fieldPaddingRight, fieldPaddingLeft = _a.fieldPaddingLeft, _m = _a.fieldHeight, fieldHeight = _m === void 0 ? 48 : _m, _o = _a.deleteIconMode, deleteIconMode = _o === void 0 ? 'use' : _o, _p = _a.deleteIconSize, deleteIconSize = _p === void 0 ? 20 : _p, _q = _a.deleteIconColor, deleteIconColor = _q === void 0 ? 'ui_cpnt_button_icon_disabled' : _q, suffixText = _a.suffixText, _r = _a.suffixTextRightSpacingMode, suffixTextRightSpacingMode = _r === void 0 ? 'none' : _r, isFocused = _a.isFocused, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.stepperMode, stepperMode = _t === void 0 ? 'none' : _t, _u = _a.stepperRightSpacing, stepperRightSpacing = _u === void 0 ? 1 : _u, _v = _a.innerSpinButtonSize, innerSpinButtonSize = _v === void 0 ? 16 : _v, step = _a.step, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, inputRef = _a.inputRef, rest = __rest(_a, ["name", "hintText", "defaultText", "textAlign", "validation", "preventBlankMode", "enterSubmitMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "inputMode", "state", "colorTheme", "min", "max", "maxLength", "textSize", "textWeight", "fieldPaddingRight", "fieldPaddingLeft", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "suffixText", "suffixTextRightSpacingMode", "isFocused", "autoComplete", "stepperMode", "stepperRightSpacing", "innerSpinButtonSize", "step", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget", "inputRef"]);
-    var _w = (0, react_hook_form_1.useFormContext)(), register = _w.register, setValue = _w.setValue, getValues = _w.getValues, clearErrors = _w.clearErrors;
-    var timeout;
-    var suffixTextRef = (0, react_1.useRef)(null);
-    var _x = (0, react_1.useState)(0), suffixTextWidth = _x[0], setSuffixTextWidth = _x[1];
-    // NOTE suffixText가 변할때마다 suffixText가 차지하는 너비를 알아내어 suffixTextWidth에 담는다.
-    (0, react_1.useEffect)(function () {
-        var calculateDivWidth = function () {
-            if (suffixTextRef.current) {
-                var width = suffixTextRef.current.offsetWidth;
-                setSuffixTextWidth(width);
-            }
-        };
-        calculateDivWidth();
-    }, [suffixText]);
-    (0, react_1.useEffect)(function () {
-        return function () { return clearTimeout(timeout); };
-    }, []);
-    function handleFocus(e) {
-        if (onFocus) {
-            onFocus(e);
-        }
-        clearErrors(name);
+  var name = _a.name,
+    hintText = _a.hintText,
+    defaultText = _a.defaultText,
+    _b = _a.textAlign,
+    textAlign = _b === void 0 ? 'left' : _b,
+    validation = _a.validation,
+    _c = _a.preventBlankMode,
+    preventBlankMode = _c === void 0 ? 'none' : _c,
+    _d = _a.enterSubmitMode,
+    enterSubmitMode = _d === void 0 ? 'none' : _d,
+    _e = _a.textLineType,
+    textLineType = _e === void 0 ? 'single' : _e,
+    multiRows = _a.multiRows,
+    autoMinRows = _a.autoMinRows,
+    autoMaxRows = _a.autoMaxRows,
+    _f = _a.inputType,
+    inputType = _f === void 0 ? 'text' : _f,
+    inputMode = _a.inputMode,
+    _g = _a.state,
+    state = _g === void 0 ? 'normal' : _g,
+    _h = _a.colorTheme,
+    colorTheme = _h === void 0 ? 'none' : _h,
+    min = _a.min,
+    max = _a.max,
+    _j = _a.maxLength,
+    maxLength = _j === void 0 ? Infinity : _j,
+    _k = _a.textSize,
+    textSize = _k === void 0 ? 'form2' : _k,
+    _l = _a.textWeight,
+    textWeight = _l === void 0 ? 'normal' : _l,
+    fieldPaddingRight = _a.fieldPaddingRight,
+    fieldPaddingLeft = _a.fieldPaddingLeft,
+    _m = _a.fieldHeight,
+    fieldHeight = _m === void 0 ? 48 : _m,
+    _o = _a.deleteIconMode,
+    deleteIconMode = _o === void 0 ? 'use' : _o,
+    _p = _a.deleteIconSize,
+    deleteIconSize = _p === void 0 ? 20 : _p,
+    _q = _a.deleteIconColor,
+    deleteIconColor = _q === void 0 ? 'ui_cpnt_button_icon_disabled' : _q,
+    suffixText = _a.suffixText,
+    _r = _a.suffixTextRightSpacingMode,
+    suffixTextRightSpacingMode = _r === void 0 ? 'none' : _r,
+    isFocused = _a.isFocused,
+    _s = _a.autoComplete,
+    autoComplete = _s === void 0 ? 'on' : _s,
+    _t = _a.stepperMode,
+    stepperMode = _t === void 0 ? 'none' : _t,
+    _u = _a.stepperRightSpacing,
+    stepperRightSpacing = _u === void 0 ? 1 : _u,
+    _v = _a.innerSpinButtonSize,
+    innerSpinButtonSize = _v === void 0 ? 16 : _v,
+    step = _a.step,
+    onBlur = _a.onBlur,
+    onChange = _a.onChange,
+    onFocus = _a.onFocus,
+    onKeyDown = _a.onKeyDown,
+    onKeyUp = _a.onKeyUp,
+    onTarget = _a.onTarget,
+    inputRef = _a.inputRef,
+    rest = __rest(_a, ["name", "hintText", "defaultText", "textAlign", "validation", "preventBlankMode", "enterSubmitMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "inputMode", "state", "colorTheme", "min", "max", "maxLength", "textSize", "textWeight", "fieldPaddingRight", "fieldPaddingLeft", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "suffixText", "suffixTextRightSpacingMode", "isFocused", "autoComplete", "stepperMode", "stepperRightSpacing", "innerSpinButtonSize", "step", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget", "inputRef"]);
+  var _w = (0, react_hook_form_1.useFormContext)(),
+    register = _w.register,
+    setValue = _w.setValue,
+    getValues = _w.getValues,
+    clearErrors = _w.clearErrors;
+  var timeout;
+  var suffixTextRef = (0, react_1.useRef)(null);
+  var _x = (0, react_1.useState)(0),
+    suffixTextWidth = _x[0],
+    setSuffixTextWidth = _x[1];
+  // NOTE suffixText가 변할때마다 suffixText가 차지하는 너비를 알아내어 suffixTextWidth에 담는다.
+  (0, react_1.useEffect)(function () {
+    var calculateDivWidth = function () {
+      if (suffixTextRef.current) {
+        var width = suffixTextRef.current.offsetWidth;
+        setSuffixTextWidth(width);
+      }
+    };
+    calculateDivWidth();
+  }, [suffixText]);
+  (0, react_1.useEffect)(function () {
+    return function () {
+      return clearTimeout(timeout);
+    };
+  }, []);
+  function handleFocus(e) {
+    if (onFocus) {
+      onFocus(e);
     }
-    function handleKeyDown(e) {
-        if (textLineType === 'single' && enterSubmitMode === 'none' && e.key === 'Enter') {
-            e.preventDefault();
-        }
-        if (inputType === 'number') {
-            preventEKeyword(e);
-        }
-        if (onKeyDown) {
-            onKeyDown(e);
-        }
+    clearErrors(name);
+  }
+  function handleKeyDown(e) {
+    if (textLineType === 'single' && enterSubmitMode === 'none' && e.key === 'Enter') {
+      e.preventDefault();
     }
-    function handleKeyUp(e) {
-        if (onKeyUp) {
-            onKeyUp(e);
-        }
-        if (inputType === 'number' && maxLength) {
-            checkMaxLength(e);
-        }
+    if (inputType === 'number') {
+      preventEKeyword(e);
     }
-    function handleKeyPress(e) {
-        if (textLineType === 'single' && inputType === 'number' && inputMode === 'numeric') {
-            handleNumericKeypress(e);
-        }
+    if (onKeyDown) {
+      onKeyDown(e);
     }
-    /**
-     * 제어키(31 이하) 또는 숫자(0-9)만 입력 허용하는 키보드 이벤트 핸들러
-     * 제어키 예시: Backspace(8), Tab(9), Enter(13)
-     */
-    var handleNumericKeypress = function (e) {
-        // 제어키(31 이하)는 허용
-        var CONTROL_KEY_CODE = 31;
-        var code = e.which || e.keyCode;
-        if (code <= CONTROL_KEY_CODE) {
-            return;
-        }
-        // 숫자가 아니면 이벤트 중단
-        var char = String.fromCharCode(code);
-        if (!/^\d*$/.test(char)) {
-            e.preventDefault();
-        }
-    };
-    function handleChange(e) {
-        // NOTE: preventBlankMode는 input에만 적용 가능
-        // NOTE: preventBlankMode === 'all'일 경우에는 무조건 onChange 시점에 적용
-        if (textLineType === 'single' && preventBlankMode === 'all') {
-            var value = e.target.value;
-            if (value != null) {
-                e.target.value = value.replace(/ /g, '');
-            }
-        }
-        // 숫자만 필터링
-        if (textLineType === 'single' && inputType === 'number' && inputMode === 'numeric') {
-            var value = e.target.value;
-            if (!/^\d*$/.test(value)) {
-                e.target.value = value.replace(/\D/g, '');
-            }
-        }
-        if (onChange) {
-            onChange(e);
-        }
+  }
+  function handleKeyUp(e) {
+    if (onKeyUp) {
+      onKeyUp(e);
     }
-    function handleBlur(e) {
-        // NOTE: preventBlankMode는 input에만 적용 가능
-        // NOTE: preventBlankMode === 'trim'일 경우에는 무조건 onBlur 시점에 적용
-        if (textLineType === 'single' && preventBlankMode === 'trim') {
-            if (e.target.value != null) {
-                setValue(name, e.target.value.replace(/^\s+|\s+$/gm, ''));
-            }
-        }
-        if (onBlur && onTarget) {
-            var relatedTarget = e.relatedTarget;
-            if (relatedTarget) {
-                onTarget();
-                onBlur(e);
-                return;
+    if (inputType === 'number' && maxLength) {
+      checkMaxLength(e);
+    }
+  }
+  function handleKeyPress(e) {
+    if (textLineType === 'single' && inputType === 'number' && inputMode === 'numeric') {
+      handleNumericKeypress(e);
+    }
+  }
+  /**
+   * 제어키(31 이하) 또는 숫자(0-9)만 입력 허용하는 키보드 이벤트 핸들러
+   * 제어키 예시: Backspace(8), Tab(9), Enter(13)
+   */
+  var handleNumericKeypress = function (e) {
+    // 제어키(31 이하)는 허용
+    var CONTROL_KEY_CODE = 31;
+    var code = e.which || e.keyCode;
+    if (code <= CONTROL_KEY_CODE) {
+      return;
+    }
+    // 숫자가 아니면 이벤트 중단
+    var char = String.fromCharCode(code);
+    if (!/^\d*$/.test(char)) {
+      e.preventDefault();
+    }
+  };
+  function handleChange(e) {
+    // NOTE: preventBlankMode는 input에만 적용 가능
+    // NOTE: preventBlankMode === 'all'일 경우에는 무조건 onChange 시점에 적용
+    if (textLineType === 'single' && preventBlankMode === 'all') {
+      var value = e.target.value;
+      if (value != null) {
+        e.target.value = value.replace(/ /g, '');
+      }
+    }
+    // 숫자만 필터링
+    if (textLineType === 'single' && inputType === 'number' && inputMode === 'numeric') {
+      var value = e.target.value;
+      if (!/^\d*$/.test(value)) {
+        e.target.value = value.replace(/\D/g, '');
+      }
+    }
+    if (onChange) {
+      onChange(e);
+    }
+  }
+  function handleBlur(e) {
+    // NOTE: preventBlankMode는 input에만 적용 가능
+    // NOTE: preventBlankMode === 'trim'일 경우에는 무조건 onBlur 시점에 적용
+    if (textLineType === 'single' && preventBlankMode === 'trim') {
+      if (e.target.value != null) {
+        setValue(name, e.target.value.replace(/^\s+|\s+$/gm, ''));
+      }
+    }
+    if (onBlur && onTarget) {
+      var relatedTarget = e.relatedTarget;
+      if (relatedTarget) {
+        onTarget();
+        onBlur(e);
+        return;
+      }
+      onBlur(e);
+    }
+  }
+  var textAreaRef = (0, react_1.useRef)(null);
+  var _y = register(name, validation),
+    ref = _y.ref,
+    refRest = __rest(_y, ["ref"]);
+  (0, react_1.useEffect)(function () {
+    if (textAreaRef === null || textAreaRef.current === null) {
+      return;
+    }
+    if (autoMinRows === 1) {
+      textAreaRef.current.style.height = '0';
+      textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight, "px");
+      return;
+    }
+    textAreaRef.current.style.height = "".concat(fieldHeight - 2, "px");
+    textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight, "px");
+  }, []);
+  /**
+   * 텍스트 필드 내부 value에 맞게 초기 height 값을 부여한다.
+   *
+   * @param getValues(fieldName)
+   * @when 텍스트 필드에 value가 있을 때
+   */
+  (0, react_1.useEffect)(function () {
+    if (!textAreaRef || !textAreaRef.current) {
+      return;
+    }
+    if (getValues(name)) {
+      textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight, "px");
+    }
+  }, [getValues(name)]);
+  var handleResizeHeight = (0, react_1.useCallback)(function () {
+    if (ref === null || textAreaRef.current === null) {
+      return;
+    }
+    if (autoMinRows === 1) {
+      textAreaRef.current.style.height = '0';
+      textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight, "px");
+      return;
+    }
+    textAreaRef.current.style.height = "".concat(fieldHeight - 2, "px");
+    textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight, "px");
+  }, []);
+  function deleteValue() {
+    setValue(name, '', {
+      shouldDirty: true
+    });
+  }
+  // NOTE: input의 type이 number일때, e나 E의 경우 숫자로 취급되어 입력이 가능하지만, publ의 기획상 막아야하기 때문에 생성한 함수
+  var preventEKeyword = function (e) {
+    if (e.key === 'e' || e.key === 'E') {
+      e.preventDefault();
+    }
+  };
+  // NOTE: input의 type이 number일때, maxLength를 사용할 수 없으나 기획상 필요해서 생성한 함수
+  function checkMaxLength(e) {
+    if (e.target.value.length >= maxLength) {
+      e.target.value = e.target.value.substring(0, maxLength);
+      timeout = setTimeout(function () {
+        return setValue(name, e.target.value, {
+          shouldValidate: true
+        });
+      }, 800);
+    }
+  }
+  var S_TextFieldBase = function () {
+    if (textLineType === 'single') {
+      return (0, jsx_runtime_1.jsxs)(S_InputWrapper, {
+        children: [stepperMode === 'use' && (0, jsx_runtime_1.jsxs)(S_IconBox, __assign({
+          innerSpinButtonSize: innerSpinButtonSize,
+          isFocused: isFocused,
+          stepperRightSpacing: stepperRightSpacing
+        }, {
+          children: [(0, jsx_runtime_1.jsx)(components_2.Icon, {
+            iconName: "ic_arrow_up_stepper",
+            fillType: "fill",
+            size: innerSpinButtonSize
+          }), (0, jsx_runtime_1.jsx)(components_2.Icon, {
+            iconName: "ic_arrow_down_stepper",
+            fillType: "fill",
+            size: innerSpinButtonSize
+          })]
+        })), (0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, {
+          name: name,
+          defaultValue: defaultText,
+          placeholder: hintText,
+          textAlign: textAlign,
+          type: inputType,
+          inputMode: inputMode,
+          state: state,
+          readOnly: state === 'read_only',
+          disabled: state === 'disabled',
+          maxLength: maxLength,
+          textSize: textSize,
+          textWeight: textWeight,
+          fieldPaddingRight: fieldPaddingRight,
+          fieldPaddingLeft: fieldPaddingLeft,
+          colorTheme: colorTheme,
+          min: min,
+          max: max,
+          autoComplete: autoComplete,
+          stepperMode: stepperMode,
+          innerSpinButtonSize: innerSpinButtonSize,
+          step: step,
+          deleteIconMode: deleteIconMode,
+          suffixText: suffixText,
+          suffixTextWidth: suffixTextWidth,
+          stepperRightSpacing: stepperRightSpacing,
+          isFocused: isFocused,
+          onFocus: handleFocus,
+          onChange: handleChange,
+          onBlur: handleBlur,
+          onKeyDown: handleKeyDown,
+          onKeyUp: handleKeyUp,
+          onKeyPress: handleKeyPress,
+          ref: function (e) {
+            ref(e);
+            if (inputRef) {
+              inputRef.current = e;
             }
-            onBlur(e);
-        }
+          }
+        })), (deleteIconMode === 'use' || suffixText) && (0, jsx_runtime_1.jsxs)(S_RightBox, __assign({
+          deleteIconMode: deleteIconMode,
+          stepperMode: stepperMode,
+          suffixText: suffixText,
+          innerSpinButtonSize: innerSpinButtonSize
+        }, {
+          children: [deleteIconMode === 'use' && (0, jsx_runtime_1.jsx)(S_IconButtonWrapper, __assign({
+            innerSpinButtonSize: innerSpinButtonSize,
+            deleteIconMode: deleteIconMode,
+            stepperMode: stepperMode,
+            suffixText: suffixText,
+            isFocused: isFocused,
+            suffixTextWidth: suffixTextWidth,
+            stepperRightSpacing: stepperRightSpacing
+          }, {
+            children: isFocused && (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, {
+              iconName: "ic_delete",
+              baseSize: "small",
+              shapeType: "rectangle",
+              baseColorKey: "ui_cpnt_button_fill_base_transparent",
+              iconSize: deleteIconSize,
+              iconColorKey: deleteIconColor,
+              iconFillType: "fill",
+              state: state === 'disabled' ? 'disabled' : 'normal',
+              tabIndex: -1,
+              onMouseDown: deleteValue
+            })
+          })), suffixText && (0, jsx_runtime_1.jsxs)(S_SuffixTextBox, __assign({
+            ref: suffixTextRef
+          }, {
+            children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, {
+              size: "spacing_b",
+              spacingType: "width"
+            }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, {
+              text: suffixText,
+              styleTheme: "caption1Bold",
+              colorTheme: "sysTextTertiary",
+              colorOverride: stepperMode === 'use' && isFocused ? 'ui_106' : undefined,
+              textAlign: "right",
+              singleLineMode: "use"
+            }), suffixTextRightSpacingMode === 'use' && (0, jsx_runtime_1.jsx)(components_2.Spacing, {
+              size: "spacing_b",
+              spacingType: "width"
+            })]
+          }))]
+        }))]
+      });
     }
-    var textAreaRef = (0, react_1.useRef)(null);
-    var _y = register(name, validation), ref = _y.ref, refRest = __rest(_y, ["ref"]);
-    (0, react_1.useEffect)(function () {
-        if (textAreaRef === null || textAreaRef.current === null) {
-            return;
-        }
-        if (autoMinRows === 1) {
-            textAreaRef.current.style.height = '0';
-            textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight, "px");
-            return;
-        }
-        textAreaRef.current.style.height = "".concat(fieldHeight - 2, "px");
-        textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight, "px");
-    }, []);
-    /**
-     * 텍스트 필드 내부 value에 맞게 초기 height 값을 부여한다.
-     *
-     * @param getValues(fieldName)
-     * @when 텍스트 필드에 value가 있을 때
-     */
-    (0, react_1.useEffect)(function () {
-        if (!textAreaRef || !textAreaRef.current) {
-            return;
-        }
-        if (getValues(name)) {
-            textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight, "px");
-        }
-    }, [getValues(name)]);
-    var handleResizeHeight = (0, react_1.useCallback)(function () {
-        if (ref === null || textAreaRef.current === null) {
-            return;
-        }
-        if (autoMinRows === 1) {
-            textAreaRef.current.style.height = '0';
-            textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight, "px");
-            return;
-        }
-        textAreaRef.current.style.height = "".concat(fieldHeight - 2, "px");
-        textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight, "px");
-    }, []);
-    function deleteValue() {
-        setValue(name, '', { shouldDirty: true });
-    }
-    // NOTE: input의 type이 number일때, e나 E의 경우 숫자로 취급되어 입력이 가능하지만, publ의 기획상 막아야하기 때문에 생성한 함수
-    var preventEKeyword = function (e) {
-        if (e.key === 'e' || e.key === 'E') {
-            e.preventDefault();
-        }
-    };
-    // NOTE: input의 type이 number일때, maxLength를 사용할 수 없으나 기획상 필요해서 생성한 함수
-    function checkMaxLength(e) {
-        if (e.target.value.length >= maxLength) {
-            e.target.value = e.target.value.substring(0, maxLength);
-            timeout = setTimeout(function () {
-                return setValue(name, e.target.value, {
-                    shouldValidate: true
-                });
-            }, 800);
-        }
+    if (textLineType === 'multi') {
+      return (0, jsx_runtime_1.jsx)(S_Multi, __assign({}, register(name, validation), rest, {
+        name: name,
+        defaultValue: defaultText,
+        placeholder: hintText,
+        textAlign: textAlign,
+        state: state,
+        readOnly: state === 'read_only' && true,
+        disabled: state === 'disabled' && true,
+        maxLength: maxLength,
+        rows: multiRows,
+        textSize: textSize,
+        textWeight: textWeight,
+        fieldPaddingRight: fieldPaddingRight,
+        fieldPaddingLeft: fieldPaddingLeft,
+        colorTheme: colorTheme,
+        autoComplete: autoComplete,
+        onFocus: handleFocus,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        onKeyPress: handleKeyPress,
+        ref: function (e) {
+          ref(e);
+          if (inputRef) {
+            inputRef.current = e;
+          }
+        }
+      }));
     }
-    var S_TextFieldBase = function () {
-        if (textLineType === 'single') {
-            return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize, isFocused: isFocused, stepperRightSpacing: stepperRightSpacing }, { children: [(0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_up_stepper", fillType: "fill", size: innerSpinButtonSize }), (0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_down_stepper", fillType: "fill", size: innerSpinButtonSize })] }))), (0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, inputMode: inputMode, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, deleteIconMode: deleteIconMode, suffixText: suffixText, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing, isFocused: isFocused, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
-                            ref(e);
-                            if (inputRef) {
-                                inputRef.current = e;
-                            }
-                        } })), (deleteIconMode === 'use' || suffixText) && ((0, jsx_runtime_1.jsxs)(S_RightBox, __assign({ deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, innerSpinButtonSize: innerSpinButtonSize }, { children: [deleteIconMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconButtonWrapper, __assign({ innerSpinButtonSize: innerSpinButtonSize, deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, isFocused: isFocused, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing }, { children: isFocused && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue })) }))), suffixText && ((0, jsx_runtime_1.jsxs)(S_SuffixTextBox, __assign({ ref: suffixTextRef }, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", colorOverride: stepperMode === 'use' && isFocused ? 'ui_106' : undefined, textAlign: "right", singleLineMode: "use" }), suffixTextRightSpacingMode === 'use' && ((0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }))] })))] })))] }));
-        }
-        if (textLineType === 'multi') {
-            return ((0, jsx_runtime_1.jsx)(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
-                    ref(e);
-                    if (inputRef) {
-                        inputRef.current = e;
-                    }
-                } })));
-        }
-        if (textLineType === 'auto') {
-            return ((0, jsx_runtime_1.jsx)(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, fieldHeight: fieldHeight, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
-                    ref(e);
-                    if (textAreaRef) {
-                        textAreaRef.current = e;
-                    }
-                    if (inputRef) {
-                        inputRef.current = e;
-                    }
-                }, onInput: handleResizeHeight })));
-        }
-    };
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: S_TextFieldBase() });
+    if (textLineType === 'auto') {
+      return (0, jsx_runtime_1.jsx)(S_Auto, __assign({}, refRest, rest, {
+        name: name,
+        defaultValue: defaultText,
+        placeholder: hintText,
+        textAlign: textAlign,
+        autoMinRows: autoMinRows,
+        autoMaxRows: autoMaxRows,
+        state: state,
+        readOnly: state === 'read_only' && true,
+        disabled: state === 'disabled' && true,
+        maxLength: maxLength,
+        textSize: textSize,
+        textWeight: textWeight,
+        fieldPaddingRight: fieldPaddingRight,
+        fieldPaddingLeft: fieldPaddingLeft,
+        fieldHeight: fieldHeight,
+        colorTheme: colorTheme,
+        autoComplete: autoComplete,
+        onFocus: handleFocus,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        onKeyPress: handleKeyPress,
+        ref: function (e) {
+          ref(e);
+          if (textAreaRef) {
+            textAreaRef.current = e;
+          }
+          if (inputRef) {
+            inputRef.current = e;
+          }
+        },
+        onInput: handleResizeHeight
+      }));
+    }
+  };
+  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {
+    children: S_TextFieldBase()
+  });
 }
 var stepper_and_delete_style = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n"], ["\n  position: absolute;\n  right: ", ";\n"])), function (_a) {
-    var innerSpinButtonSize = _a.innerSpinButtonSize, stepperRightSpacing = _a.stepperRightSpacing;
-    return innerSpinButtonSize && stepperRightSpacing && "".concat(innerSpinButtonSize + stepperRightSpacing, "px");
+  var innerSpinButtonSize = _a.innerSpinButtonSize,
+    stepperRightSpacing = _a.stepperRightSpacing;
+  return innerSpinButtonSize && stepperRightSpacing && "".concat(innerSpinButtonSize + stepperRightSpacing, "px");
 });
 var S_IconButtonWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n\n  ", "\n"], ["\n  ", ";\n\n  ", "\n"])), function (_a) {
-    var deleteIconMode = _a.deleteIconMode, stepperMode = _a.stepperMode, suffixText = _a.suffixText;
-    return deleteIconMode === 'use' && stepperMode === 'use' && !suffixText && stepper_and_delete_style;
+  var deleteIconMode = _a.deleteIconMode,
+    stepperMode = _a.stepperMode,
+    suffixText = _a.suffixText;
+  return deleteIconMode === 'use' && stepperMode === 'use' && !suffixText && stepper_and_delete_style;
 }, function (_a) {
-    var innerSpinButtonSize = _a.innerSpinButtonSize, deleteIconMode = _a.deleteIconMode, stepperMode = _a.stepperMode, suffixText = _a.suffixText, isFocused = _a.isFocused, suffixTextWidth = _a.suffixTextWidth, stepperRightSpacing = _a.stepperRightSpacing;
-    if (deleteIconMode === 'use' && stepperMode === 'use' && suffixText && stepperRightSpacing) {
-        if (isFocused) {
-            if (innerSpinButtonSize) {
-                if (innerSpinButtonSize + constants_1.DELETE_BUTTON_BASE_SIZE > suffixTextWidth) {
-                    return "margin-right: ".concat(innerSpinButtonSize - suffixTextWidth + stepperRightSpacing, "px;");
-                }
-                return;
-            }
-            return;
+  var innerSpinButtonSize = _a.innerSpinButtonSize,
+    deleteIconMode = _a.deleteIconMode,
+    stepperMode = _a.stepperMode,
+    suffixText = _a.suffixText,
+    isFocused = _a.isFocused,
+    suffixTextWidth = _a.suffixTextWidth,
+    stepperRightSpacing = _a.stepperRightSpacing;
+  if (deleteIconMode === 'use' && stepperMode === 'use' && suffixText && stepperRightSpacing) {
+    if (isFocused) {
+      if (innerSpinButtonSize) {
+        if (innerSpinButtonSize + constants_1.DELETE_BUTTON_BASE_SIZE > suffixTextWidth) {
+          return "margin-right: ".concat(innerSpinButtonSize - suffixTextWidth + stepperRightSpacing, "px;");
         }
         return;
+      }
+      return;
     }
     return;
+  }
+  return;
 });
 var S_RightBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: ", ";\n  height: 100%;\n  display: flex;\n  align-items: center;\n  right: 0;\n"], ["\n  position: ", ";\n  height: 100%;\n  display: flex;\n  align-items: center;\n  right: 0;\n"])), function (_a) {
-    var deleteIconMode = _a.deleteIconMode, stepperMode = _a.stepperMode, suffixText = _a.suffixText;
-    if ((deleteIconMode === 'use' && stepperMode === 'use' && suffixText) ||
-        (deleteIconMode === 'use' && stepperMode === 'use') ||
-        stepperMode === 'use') {
-        return 'absolute';
-    }
-    return 'relative';
+  var deleteIconMode = _a.deleteIconMode,
+    stepperMode = _a.stepperMode,
+    suffixText = _a.suffixText;
+  if (deleteIconMode === 'use' && stepperMode === 'use' && suffixText || deleteIconMode === 'use' && stepperMode === 'use' || stepperMode === 'use') {
+    return 'absolute';
+  }
+  return 'relative';
 });
 var S_IconBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  height: ", ";\n  justify-content: center;\n  position: absolute;\n  right: ", ";\n  width: ", ";\n  visibility: hidden;\n\n  ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  height: ", ";\n  justify-content: center;\n  position: absolute;\n  right: ", ";\n  width: ", ";\n  visibility: hidden;\n\n  ", ";\n"])), function (_a) {
-    var innerSpinButtonSize = _a.innerSpinButtonSize;
-    return innerSpinButtonSize && "".concat(innerSpinButtonSize * 2, "px");
+  var innerSpinButtonSize = _a.innerSpinButtonSize;
+  return innerSpinButtonSize && "".concat(innerSpinButtonSize * 2, "px");
 }, function (_a) {
-    var stepperRightSpacing = _a.stepperRightSpacing;
-    return stepperRightSpacing && "".concat(stepperRightSpacing, "px");
+  var stepperRightSpacing = _a.stepperRightSpacing;
+  return stepperRightSpacing && "".concat(stepperRightSpacing, "px");
 }, function (_a) {
-    var innerSpinButtonSize = _a.innerSpinButtonSize;
-    return innerSpinButtonSize && "".concat(innerSpinButtonSize, "px");
+  var innerSpinButtonSize = _a.innerSpinButtonSize;
+  return innerSpinButtonSize && "".concat(innerSpinButtonSize, "px");
 }, function (_a) {
-    var isFocused = _a.isFocused;
-    return isFocused && 'visibility: visible;';
+  var isFocused = _a.isFocused;
+  return isFocused && 'visibility: visible;';
 });
 var S_SuffixTextBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var S_InputWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  position: relative;\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  position: relative;\n  width: 100%;\n"])));
 var read_only = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme, colorTheme = _a.colorTheme;
-    return colorTheme &&
-        {
-            none: theme.ui_cpnt_textfield_text_disabled,
-            dark: theme.ui_cpnt_textfield_text_darktheme_disabled,
-            transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_readonly
-        }[colorTheme];
+  var theme = _a.theme,
+    colorTheme = _a.colorTheme;
+  return colorTheme && {
+    none: theme.ui_cpnt_textfield_text_disabled,
+    dark: theme.ui_cpnt_textfield_text_darktheme_disabled,
+    transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_readonly
+  }[colorTheme];
 });
 var disabled = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  color: ", ";\n  pointer-events: none;\n"], ["\n  color: ", ";\n  pointer-events: none;\n"])), function (_a) {
-    var theme = _a.theme, colorTheme = _a.colorTheme;
-    return colorTheme &&
-        {
-            none: theme.ui_cpnt_textfield_text_disabled,
-            dark: theme.ui_cpnt_textfield_text_darktheme_disabled,
-            transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_disabled
-        }[colorTheme];
+  var theme = _a.theme,
+    colorTheme = _a.colorTheme;
+  return colorTheme && {
+    none: theme.ui_cpnt_textfield_text_disabled,
+    dark: theme.ui_cpnt_textfield_text_darktheme_disabled,
+    transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_disabled
+  }[colorTheme];
 });
 var basicStyle = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  cursor: ", ";\n  display: inline-flex;\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  justify-content: center;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  text-align: ", ";\n  width: 100%;\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n  ", "\n\n  ", "\n"], ["\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  cursor: ", ";\n  display: inline-flex;\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  justify-content: center;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  text-align: ", ";\n  width: 100%;\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n  ", "\n\n  ", "\n"])), function (_a) {
-    var theme = _a.theme, colorTheme = _a.colorTheme;
-    return colorTheme &&
-        {
-            none: theme.ui_cpnt_textfield_text_typed,
-            dark: theme.ui_cpnt_textfield_text_darktheme_enabled,
-            transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_enabled
-        }[colorTheme];
+  var theme = _a.theme,
+    colorTheme = _a.colorTheme;
+  return colorTheme && {
+    none: theme.ui_cpnt_textfield_text_typed,
+    dark: theme.ui_cpnt_textfield_text_darktheme_enabled,
+    transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_enabled
+  }[colorTheme];
 }, function (_a) {
-    var state = _a.state;
-    return (state === 'disabled' ? 'not-allowed' : 'text');
+  var state = _a.state;
+  return state === 'disabled' ? 'not-allowed' : 'text';
 }, function (_a) {
-    var textSize = _a.textSize;
-    return common_1.desktopFontSize[textSize];
+  var textSize = _a.textSize;
+  return common_1.desktopFontSize[textSize];
 }, function (_a) {
-    var textWeight = _a.textWeight;
-    return common_1.fontWeight[textWeight];
+  var textWeight = _a.textWeight;
+  return common_1.fontWeight[textWeight];
 }, function (_a) {
-    var textSize = _a.textSize;
-    return common_1.desktopLineHeight[textSize];
+  var textSize = _a.textSize;
+  return common_1.desktopLineHeight[textSize];
 }, function (_a) {
-    var textAlign = _a.textAlign;
-    return textAlign;
+  var textAlign = _a.textAlign;
+  return textAlign;
 }, function (_a) {
-    var theme = _a.theme, colorTheme = _a.colorTheme;
-    return colorTheme &&
-        {
-            none: theme.ui_cpnt_textfield_text_hint,
-            dark: theme.ui_cpnt_textfield_text_darktheme_hint,
-            transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_hint
-        }[colorTheme];
+  var theme = _a.theme,
+    colorTheme = _a.colorTheme;
+  return colorTheme && {
+    none: theme.ui_cpnt_textfield_text_hint,
+    dark: theme.ui_cpnt_textfield_text_darktheme_hint,
+    transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_hint
+  }[colorTheme];
 }, function (_a) {
-    var textSize = _a.textSize;
-    return common_1.desktopFontSize[textSize];
+  var textSize = _a.textSize;
+  return common_1.desktopFontSize[textSize];
 }, function (_a) {
-    var textWeight = _a.textWeight;
-    return common_1.fontWeight[textWeight];
+  var textWeight = _a.textWeight;
+  return common_1.fontWeight[textWeight];
 }, function (_a) {
-    var textSize = _a.textSize;
-    return common_1.desktopLineHeight[textSize];
+  var textSize = _a.textSize;
+  return common_1.desktopLineHeight[textSize];
 }, function (_a) {
-    var state = _a.state;
-    return state &&
-        {
-            normal: '',
-            read_only: read_only,
-            disabled: disabled
-        }[state];
+  var state = _a.state;
+  return state && {
+    normal: '',
+    read_only: read_only,
+    disabled: disabled
+  }[state];
 }, function (_a) {
-    var fieldPaddingRight = _a.fieldPaddingRight;
-    return fieldPaddingRight && "padding-right: ".concat(fieldPaddingRight, "px;");
+  var fieldPaddingRight = _a.fieldPaddingRight;
+  return fieldPaddingRight && "padding-right: ".concat(fieldPaddingRight, "px;");
 }, function (_a) {
-    var fieldPaddingLeft = _a.fieldPaddingLeft;
-    return fieldPaddingLeft && "padding-left: ".concat(fieldPaddingLeft, "px;");
+  var fieldPaddingLeft = _a.fieldPaddingLeft;
+  return fieldPaddingLeft && "padding-left: ".concat(fieldPaddingLeft, "px;");
 }, function (_a) {
-    var deleteIconMode = _a.deleteIconMode, stepperMode = _a.stepperMode, suffixText = _a.suffixText;
-    if (deleteIconMode === 'use' && stepperMode === 'use' && suffixText) {
-        return delete_stepper_suffix;
-    }
-    if (deleteIconMode === 'use' && stepperMode === 'use' && !suffixText) {
-        return delete_stepper;
-    }
-    if (deleteIconMode === 'none' && stepperMode === 'use' && suffixText) {
-        return stepper_suffix;
-    }
-    if (deleteIconMode === 'none' && stepperMode === 'use' && !suffixText) {
-        return stepper;
-    }
-    return;
+  var deleteIconMode = _a.deleteIconMode,
+    stepperMode = _a.stepperMode,
+    suffixText = _a.suffixText;
+  if (deleteIconMode === 'use' && stepperMode === 'use' && suffixText) {
+    return delete_stepper_suffix;
+  }
+  if (deleteIconMode === 'use' && stepperMode === 'use' && !suffixText) {
+    return delete_stepper;
+  }
+  if (deleteIconMode === 'none' && stepperMode === 'use' && suffixText) {
+    return stepper_suffix;
+  }
+  if (deleteIconMode === 'none' && stepperMode === 'use' && !suffixText) {
+    return stepper;
+  }
+  return;
 });
 var delete_stepper_suffix = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (_a) {
-    var innerSpinButtonSize = _a.innerSpinButtonSize, fieldPaddingRight = _a.fieldPaddingRight, isFocused = _a.isFocused, suffixTextWidth = _a.suffixTextWidth, stepperRightSpacing = _a.stepperRightSpacing;
-    if (innerSpinButtonSize && stepperRightSpacing) {
-        if (isFocused) {
-            if (innerSpinButtonSize + constants_1.DELETE_BUTTON_BASE_SIZE + stepperRightSpacing <
-                constants_1.DELETE_BUTTON_BASE_SIZE + suffixTextWidth) {
-                if (fieldPaddingRight) {
-                    return "".concat(constants_1.DELETE_BUTTON_BASE_SIZE + suffixTextWidth + fieldPaddingRight, "px");
-                }
-                return "".concat(constants_1.DELETE_BUTTON_BASE_SIZE + suffixTextWidth, "px");
-            }
-            if (fieldPaddingRight) {
-                return "".concat(constants_1.DELETE_BUTTON_BASE_SIZE + innerSpinButtonSize + fieldPaddingRight + stepperRightSpacing, "px");
-            }
-            return "".concat(constants_1.DELETE_BUTTON_BASE_SIZE + innerSpinButtonSize + stepperRightSpacing, "px");
-        }
+  var innerSpinButtonSize = _a.innerSpinButtonSize,
+    fieldPaddingRight = _a.fieldPaddingRight,
+    isFocused = _a.isFocused,
+    suffixTextWidth = _a.suffixTextWidth,
+    stepperRightSpacing = _a.stepperRightSpacing;
+  if (innerSpinButtonSize && stepperRightSpacing) {
+    if (isFocused) {
+      if (innerSpinButtonSize + constants_1.DELETE_BUTTON_BASE_SIZE + stepperRightSpacing < constants_1.DELETE_BUTTON_BASE_SIZE + suffixTextWidth) {
         if (fieldPaddingRight) {
-            return "".concat(suffixTextWidth + fieldPaddingRight, "px");
-        }
-        return "".concat(suffixTextWidth, "px");
+          return "".concat(constants_1.DELETE_BUTTON_BASE_SIZE + suffixTextWidth + fieldPaddingRight, "px");
+        }
+        return "".concat(constants_1.DELETE_BUTTON_BASE_SIZE + suffixTextWidth, "px");
+      }
+      if (fieldPaddingRight) {
+        return "".concat(constants_1.DELETE_BUTTON_BASE_SIZE + innerSpinButtonSize + fieldPaddingRight + stepperRightSpacing, "px");
+      }
+      return "".concat(constants_1.DELETE_BUTTON_BASE_SIZE + innerSpinButtonSize + stepperRightSpacing, "px");
     }
-    return;
+    if (fieldPaddingRight) {
+      return "".concat(suffixTextWidth + fieldPaddingRight, "px");
+    }
+    return "".concat(suffixTextWidth, "px");
+  }
+  return;
 });
 var delete_stepper = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (_a) {
-    var innerSpinButtonSize = _a.innerSpinButtonSize, fieldPaddingRight = _a.fieldPaddingRight, isFocused = _a.isFocused, stepperRightSpacing = _a.stepperRightSpacing;
-    if (innerSpinButtonSize && stepperRightSpacing) {
-        if (isFocused) {
-            if (fieldPaddingRight) {
-                return "".concat(innerSpinButtonSize + constants_1.DELETE_BUTTON_BASE_SIZE + fieldPaddingRight + stepperRightSpacing, "px");
-            }
-            return "".concat(innerSpinButtonSize + constants_1.DELETE_BUTTON_BASE_SIZE + stepperRightSpacing, "px");
-        }
-        if (fieldPaddingRight) {
-            return "".concat(fieldPaddingRight, "px");
-        }
-        return;
+  var innerSpinButtonSize = _a.innerSpinButtonSize,
+    fieldPaddingRight = _a.fieldPaddingRight,
+    isFocused = _a.isFocused,
+    stepperRightSpacing = _a.stepperRightSpacing;
+  if (innerSpinButtonSize && stepperRightSpacing) {
+    if (isFocused) {
+      if (fieldPaddingRight) {
+        return "".concat(innerSpinButtonSize + constants_1.DELETE_BUTTON_BASE_SIZE + fieldPaddingRight + stepperRightSpacing, "px");
+      }
+      return "".concat(innerSpinButtonSize + constants_1.DELETE_BUTTON_BASE_SIZE + stepperRightSpacing, "px");
+    }
+    if (fieldPaddingRight) {
+      return "".concat(fieldPaddingRight, "px");
     }
     return;
+  }
+  return;
 });
 var stepper_suffix = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (_a) {
-    var innerSpinButtonSize = _a.innerSpinButtonSize, fieldPaddingRight = _a.fieldPaddingRight, isFocused = _a.isFocused, suffixTextWidth = _a.suffixTextWidth, stepperRightSpacing = _a.stepperRightSpacing;
-    if (innerSpinButtonSize && stepperRightSpacing) {
-        if (isFocused) {
-            if (innerSpinButtonSize + stepperRightSpacing < suffixTextWidth) {
-                if (fieldPaddingRight) {
-                    return "".concat(suffixTextWidth + fieldPaddingRight, "px");
-                }
-                return "".concat(suffixTextWidth, "px");
-            }
-            if (fieldPaddingRight) {
-                return "".concat(innerSpinButtonSize + stepperRightSpacing + fieldPaddingRight, "px");
-            }
-            return "".concat(innerSpinButtonSize + stepperRightSpacing, "px");
-        }
+  var innerSpinButtonSize = _a.innerSpinButtonSize,
+    fieldPaddingRight = _a.fieldPaddingRight,
+    isFocused = _a.isFocused,
+    suffixTextWidth = _a.suffixTextWidth,
+    stepperRightSpacing = _a.stepperRightSpacing;
+  if (innerSpinButtonSize && stepperRightSpacing) {
+    if (isFocused) {
+      if (innerSpinButtonSize + stepperRightSpacing < suffixTextWidth) {
         if (fieldPaddingRight) {
-            return "".concat(suffixTextWidth + fieldPaddingRight, "px");
+          return "".concat(suffixTextWidth + fieldPaddingRight, "px");
         }
         return "".concat(suffixTextWidth, "px");
+      }
+      if (fieldPaddingRight) {
+        return "".concat(innerSpinButtonSize + stepperRightSpacing + fieldPaddingRight, "px");
+      }
+      return "".concat(innerSpinButtonSize + stepperRightSpacing, "px");
     }
-    return;
+    if (fieldPaddingRight) {
+      return "".concat(suffixTextWidth + fieldPaddingRight, "px");
+    }
+    return "".concat(suffixTextWidth, "px");
+  }
+  return;
 });
 var stepper = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (_a) {
-    var innerSpinButtonSize = _a.innerSpinButtonSize, fieldPaddingRight = _a.fieldPaddingRight, isFocused = _a.isFocused, stepperRightSpacing = _a.stepperRightSpacing;
-    if (innerSpinButtonSize && stepperRightSpacing) {
-        if (isFocused) {
-            if (fieldPaddingRight) {
-                return "".concat(innerSpinButtonSize + stepperRightSpacing + fieldPaddingRight, "px");
-            }
-            return "".concat(innerSpinButtonSize + stepperRightSpacing, "px");
-        }
-        if (fieldPaddingRight) {
-            return "".concat(fieldPaddingRight, "px");
-        }
-        return;
+  var innerSpinButtonSize = _a.innerSpinButtonSize,
+    fieldPaddingRight = _a.fieldPaddingRight,
+    isFocused = _a.isFocused,
+    stepperRightSpacing = _a.stepperRightSpacing;
+  if (innerSpinButtonSize && stepperRightSpacing) {
+    if (isFocused) {
+      if (fieldPaddingRight) {
+        return "".concat(innerSpinButtonSize + stepperRightSpacing + fieldPaddingRight, "px");
+      }
+      return "".concat(innerSpinButtonSize + stepperRightSpacing, "px");
+    }
+    if (fieldPaddingRight) {
+      return "".concat(fieldPaddingRight, "px");
     }
     return;
+  }
+  return;
 });
 var inputInnerSpinButtonStyle = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  -webkit-appearance: none;\n  z-index: 1;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n  position: absolute;\n  right: ", ";\n  top: calc(\n    50% - ", "\n  );\n"], ["\n  -webkit-appearance: none;\n  z-index: 1;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n  position: absolute;\n  right: ", ";\n  top: calc(\n    50% - ", "\n  );\n"])), function (_a) {
-    var innerSpinButtonSize = _a.innerSpinButtonSize;
-    return innerSpinButtonSize && "".concat(innerSpinButtonSize * 2, "px");
+  var innerSpinButtonSize = _a.innerSpinButtonSize;
+  return innerSpinButtonSize && "".concat(innerSpinButtonSize * 2, "px");
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
+  var theme = _a.theme;
+  return theme.spacing.spacingB;
 }, function (_a) {
-    var innerSpinButtonSize = _a.innerSpinButtonSize;
-    return innerSpinButtonSize && "".concat(innerSpinButtonSize, "px");
+  var innerSpinButtonSize = _a.innerSpinButtonSize;
+  return innerSpinButtonSize && "".concat(innerSpinButtonSize, "px");
 }, function (_a) {
-    var stepperRightSpacing = _a.stepperRightSpacing;
-    return stepperRightSpacing && "".concat(stepperRightSpacing, "px");
+  var stepperRightSpacing = _a.stepperRightSpacing;
+  return stepperRightSpacing && "".concat(stepperRightSpacing, "px");
 }, function (_a) {
-    var innerSpinButtonSize = _a.innerSpinButtonSize;
-    return innerSpinButtonSize && "".concat(innerSpinButtonSize, "px");
+  var innerSpinButtonSize = _a.innerSpinButtonSize;
+  return innerSpinButtonSize && "".concat(innerSpinButtonSize, "px");
 });
 var S_Input = styled_components_1.default.input(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n  flex: 1;\n  line-height: ", ";\n  position: relative;\n\n  ::-webkit-inner-spin-button {\n    ", "\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    -webkit-text-fill-color: ", " !important;\n    transition: background-color 9999s ease-in-out 0s !important;\n  }\n"], ["\n  ", "\n  flex: 1;\n  line-height: ", ";\n  position: relative;\n\n  ::-webkit-inner-spin-button {\n    ", "\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    -webkit-text-fill-color: ", " !important;\n    transition: background-color 9999s ease-in-out 0s !important;\n  }\n"])), basicStyle, function (_a) {
-    var theme = _a.theme;
-    return theme.desktopLineHeight.singleLine;
+  var theme = _a.theme;
+  return theme.desktopLineHeight.singleLine;
 }, function (_a) {
-    var stepperMode = _a.stepperMode, type = _a.type, isFocused = _a.isFocused;
-    return stepperMode === 'use' && type === 'number' && isFocused
-        ? inputInnerSpinButtonStyle
-        : '-webkit-appearance: none; margin: 0;';
+  var stepperMode = _a.stepperMode,
+    type = _a.type,
+    isFocused = _a.isFocused;
+  return stepperMode === 'use' && type === 'number' && isFocused ? inputInnerSpinButtonStyle : '-webkit-appearance: none; margin: 0;';
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textfield_text_typed;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textfield_text_typed;
 });
 var S_Auto = styled_components_1.default.textarea(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"])), basicStyle, function (_a) {
-    var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
-    return autoMaxRows &&
-        fieldHeight &&
-        "max-height: ".concat(Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
-            Number(common_1.desktopLineHeight[textSize]) *
-            autoMaxRows, "px;");
+  var autoMaxRows = _a.autoMaxRows,
+    textSize = _a.textSize,
+    fieldHeight = _a.fieldHeight;
+  return autoMaxRows && fieldHeight && "max-height: ".concat(Number(common_1.desktopFontSize[textSize].substring(0, 2)) * Number(common_1.desktopLineHeight[textSize]) * autoMaxRows, "px;");
 }, function (_a) {
-    var autoMinRows = _a.autoMinRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
-    return autoMinRows &&
-        fieldHeight &&
-        "min-height: ".concat(Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
-            Number(common_1.desktopLineHeight[textSize]) *
-            autoMinRows, "px;");
+  var autoMinRows = _a.autoMinRows,
+    textSize = _a.textSize,
+    fieldHeight = _a.fieldHeight;
+  return autoMinRows && fieldHeight && "min-height: ".concat(Number(common_1.desktopFontSize[textSize].substring(0, 2)) * Number(common_1.desktopLineHeight[textSize]) * autoMinRows, "px;");
 });
 var S_Multi = styled_components_1.default.textarea(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"])), basicStyle);
 exports.default = TextFieldBase;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;