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

package/dist/src/desktop/components/TextField/TextField.js

@@ -1,43 +1,59 @@
 "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 __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]; } };
+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];
     }
-    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;
+    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 __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;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/jsx-no-bind */
 var react_1 = require("react");
@@ -50,365 +66,616 @@ var components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
 function TextField(_a) {
-    var _b;
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, inputMode = _a.inputMode, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, overrideIBtn1IconColorKey = _a.overrideIBtn1IconColorKey, overrideIBtn2IconColorKey = _a.overrideIBtn2IconColorKey, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.fontWeight, fontWeight = _u === void 0 ? 'regular' : _u, _v = _a.deleteBtnMode, deleteBtnMode = _v === void 0 ? 'use' : _v, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
-    var basicThemeIconColors = {
-        normal: 'ui_cpnt_button_icon_default',
-        read_only: 'ui_cpnt_button_icon_default',
-        disabled: 'ui_cpnt_button_icon_disabled'
-    };
-    var darkThemeIconColors = {
-        normal: 'ui_cpnt_textfield_icon_darktheme_default',
-        read_only: 'ui_cpnt_textfield_icon_darktheme_default',
-        disabled: 'ui_cpnt_textfield_icon_darktheme_disabled'
-    };
-    var transparentThemeIconColors = {
-        normal: 'ui_cpnt_textfield_icon_colortheme_transparent_default',
-        read_only: 'ui_cpnt_textfield_icon_colortheme_transparent_readonly',
-        disabled: 'ui_cpnt_textfield_icon_colortheme_transparent_disabled'
-    };
-    var _w = (0, react_1.useState)(false), isFocused = _w[0], setIsFocused = _w[1];
-    var _x = (0, react_hook_form_1.useFormContext)(), register = _x.register, trigger = _x.trigger, errors = _x.formState.errors;
-    var _y = register(name, validation), validateOnChange = _y.onChange, validateOnBlur = _y.onBlur;
-    var isError = (0, types_1.getErrorByName)(errors, name);
-    var handleClickIBtn1 = function () {
-        if (onClickIBtn1) {
-            onClickIBtn1();
-        }
-    };
-    var handleClickIBtn2 = function () {
-        if (onClickIBtn2) {
-            onClickIBtn2();
-        }
-    };
-    function handleFocus(e) {
-        if (state !== 'read_only') {
-            setIsFocused(true);
-        }
-        if (onFocus) {
-            onFocus(e);
-        }
+  var _b;
+  var name = _a.name,
+    hintText = _a.hintText,
+    defaultText = _a.defaultText,
+    _c = _a.textAlign,
+    textAlign = _c === void 0 ? 'left' : _c,
+    prefixText = _a.prefixText,
+    suffixText = _a.suffixText,
+    validation = _a.validation,
+    _d = _a.validationPoint,
+    validationPoint = _d === void 0 ? 'onBlur' : _d,
+    _e = _a.preventBlankMode,
+    preventBlankMode = _e === void 0 ? 'none' : _e,
+    _f = _a.enterSubmitMode,
+    enterSubmitMode = _f === void 0 ? 'none' : _f,
+    _g = _a.size,
+    size = _g === void 0 ? 'large' : _g,
+    _h = _a.responsiveMode,
+    responsiveMode = _h === void 0 ? 'none' : _h,
+    _j = _a.textLineType,
+    textLineType = _j === void 0 ? 'single' : _j,
+    _k = _a.multiRows,
+    multiRows = _k === void 0 ? 8 : _k,
+    _l = _a.autoMinRows,
+    autoMinRows = _l === void 0 ? 8 : _l,
+    autoMaxRows = _a.autoMaxRows,
+    _m = _a.inputType,
+    inputType = _m === void 0 ? 'text' : _m,
+    inputMode = _a.inputMode,
+    _o = _a.state,
+    state = _o === void 0 ? 'normal' : _o,
+    iBtn1IconName = _a.iBtn1IconName,
+    _p = _a.iBtn1IconFillType,
+    iBtn1IconFillType = _p === void 0 ? 'line' : _p,
+    iBtn2IconName = _a.iBtn2IconName,
+    _q = _a.iBtn2IconFillType,
+    iBtn2IconFillType = _q === void 0 ? 'line' : _q,
+    overrideIBtn1IconColorKey = _a.overrideIBtn1IconColorKey,
+    overrideIBtn2IconColorKey = _a.overrideIBtn2IconColorKey,
+    _r = _a.colorTheme,
+    colorTheme = _r === void 0 ? 'none' : _r,
+    max = _a.max,
+    maxLength = _a.maxLength,
+    min = _a.min,
+    customWidth = _a.customWidth,
+    _s = _a.autoComplete,
+    autoComplete = _s === void 0 ? 'on' : _s,
+    _t = _a.numberStepperMode,
+    numberStepperMode = _t === void 0 ? 'none' : _t,
+    numberStep = _a.numberStep,
+    _u = _a.fontWeight,
+    fontWeight = _u === void 0 ? 'regular' : _u,
+    _v = _a.deleteBtnMode,
+    deleteBtnMode = _v === void 0 ? 'use' : _v,
+    onBlur = _a.onBlur,
+    onChange = _a.onChange,
+    onClickIBtn1 = _a.onClickIBtn1,
+    onClickIBtn2 = _a.onClickIBtn2,
+    onFocus = _a.onFocus,
+    onKeyUp = _a.onKeyUp,
+    onKeyDown = _a.onKeyDown,
+    onTarget = _a.onTarget;
+  var basicThemeIconColors = {
+    normal: 'ui_cpnt_button_icon_default',
+    read_only: 'ui_cpnt_button_icon_default',
+    disabled: 'ui_cpnt_button_icon_disabled'
+  };
+  var darkThemeIconColors = {
+    normal: 'ui_cpnt_textfield_icon_darktheme_default',
+    read_only: 'ui_cpnt_textfield_icon_darktheme_default',
+    disabled: 'ui_cpnt_textfield_icon_darktheme_disabled'
+  };
+  var transparentThemeIconColors = {
+    normal: 'ui_cpnt_textfield_icon_colortheme_transparent_default',
+    read_only: 'ui_cpnt_textfield_icon_colortheme_transparent_readonly',
+    disabled: 'ui_cpnt_textfield_icon_colortheme_transparent_disabled'
+  };
+  var _w = (0, react_1.useState)(false),
+    isFocused = _w[0],
+    setIsFocused = _w[1];
+  var _x = (0, react_hook_form_1.useFormContext)(),
+    register = _x.register,
+    trigger = _x.trigger,
+    errors = _x.formState.errors;
+  var _y = register(name, validation),
+    validateOnChange = _y.onChange,
+    validateOnBlur = _y.onBlur;
+  var isError = (0, types_1.getErrorByName)(errors, name);
+  var handleClickIBtn1 = function () {
+    if (onClickIBtn1) {
+      onClickIBtn1();
     }
-    function handleTarget() {
-        if (onTarget) {
-            onTarget();
-        }
+  };
+  var handleClickIBtn2 = function () {
+    if (onClickIBtn2) {
+      onClickIBtn2();
     }
-    function handleKeyUp(e) {
-        if (onKeyUp) {
-            onKeyUp(e);
-        }
+  };
+  function handleFocus(e) {
+    if (state !== 'read_only') {
+      setIsFocused(true);
     }
-    function handleKeyDown(e) {
-        if (onKeyDown) {
-            onKeyDown(e);
-        }
+    if (onFocus) {
+      onFocus(e);
     }
-    function handleChange(e) {
-        if (validationPoint === 'onChange') {
-            validateOnChange(e);
-        }
-        if (onChange) {
-            onChange(e);
-        }
+  }
+  function handleTarget() {
+    if (onTarget) {
+      onTarget();
     }
-    function handleBlur(e) {
-        if (validationPoint === 'onBlur') {
-            validateOnBlur(e);
-        }
-        if (onBlur) {
-            onBlur(e);
-        }
-        setIsFocused(false);
-        trigger(name);
+  }
+  function handleKeyUp(e) {
+    if (onKeyUp) {
+      onKeyUp(e);
     }
-    var S_TextField = function () {
-        var deleteIconColor = 'ui_cpnt_button_icon_disabled';
-        switch (colorTheme) {
-            case 'dark': {
-                deleteIconColor = 'ui_cpnt_textfield_icon_darktheme_disabled';
-                break;
-            }
-            case 'transparent': {
-                deleteIconColor = 'ui_cpnt_textfield_icon_colortheme_transparent_disabled';
-                break;
-            }
-        }
-        if (textLineType === 'multi') {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox_Multi, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
-                                    (colorTheme &&
-                                        {
-                                            none: basicThemeIconColors[state],
-                                            dark: darkThemeIconColors[state],
-                                            transparent: transparentThemeIconColors[state]
-                                        }[colorTheme]), iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn2 })), iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn1IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn1IconColorKey ||
-                                    (colorTheme &&
-                                        {
-                                            none: basicThemeIconColors[state],
-                                            dark: darkThemeIconColors[state],
-                                            transparent: transparentThemeIconColors[state]
-                                        }[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
-        }
-        if (textLineType === 'auto') {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox_Auto, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
-                                    (colorTheme &&
-                                        {
-                                            none: basicThemeIconColors[state],
-                                            dark: darkThemeIconColors[state],
-                                            transparent: transparentThemeIconColors[state]
-                                        }[colorTheme]), iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn2 })), iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn1IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn1IconColorKey ||
-                                    (colorTheme &&
-                                        {
-                                            none: basicThemeIconColors[state],
-                                            dark: darkThemeIconColors[state],
-                                            transparent: transparentThemeIconColors[state]
-                                        }[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
+  }
+  function handleKeyDown(e) {
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
+  }
+  function handleChange(e) {
+    if (validationPoint === 'onChange') {
+      validateOnChange(e);
+    }
+    if (onChange) {
+      onChange(e);
+    }
+  }
+  function handleBlur(e) {
+    if (validationPoint === 'onBlur') {
+      validateOnBlur(e);
+    }
+    if (onBlur) {
+      onBlur(e);
+    }
+    setIsFocused(false);
+    trigger(name);
+  }
+  var S_TextField = function () {
+    var deleteIconColor = 'ui_cpnt_button_icon_disabled';
+    switch (colorTheme) {
+      case 'dark':
+        {
+          deleteIconColor = 'ui_cpnt_textfield_icon_darktheme_disabled';
+          break;
         }
-        if (textLineType === 'single') {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, inputMode: inputMode, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 8 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', stepperRightSpacing: size === 'large' || size === 'rlarge' ? 1 : -4, innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, suffixText: suffixText, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
-                                    (colorTheme &&
-                                        {
-                                            none: basicThemeIconColors[state],
-                                            dark: darkThemeIconColors[state],
-                                            transparent: transparentThemeIconColors[state]
-                                        }[colorTheme]), iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn2 })), iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn1IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn1IconColorKey ||
-                                    (colorTheme &&
-                                        {
-                                            none: basicThemeIconColors[state],
-                                            dark: darkThemeIconColors[state],
-                                            transparent: transparentThemeIconColors[state]
-                                        }[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
+      case 'transparent':
+        {
+          deleteIconColor = 'ui_cpnt_textfield_icon_colortheme_transparent_disabled';
+          break;
         }
-    };
-    return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: Boolean(isError), state: state, colorTheme: colorTheme, customWidth: customWidth }, { children: S_TextField() })), ((_b = (0, types_1.getErrorByName)(errors, name)) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: (0, types_1.getErrorByName)(errors, name).message })))] })));
+    }
+    if (textLineType === 'multi') {
+      return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+        children: [(0, jsx_runtime_1.jsx)(components_1.TextFieldBase, {
+          name: name,
+          hintText: hintText,
+          defaultText: defaultText,
+          textAlign: textAlign,
+          validation: validation,
+          textLineType: "multi",
+          multiRows: multiRows,
+          state: state,
+          colorTheme: colorTheme,
+          maxLength: maxLength,
+          textSize: "form2",
+          textWeight: fontWeight === 'bold' ? 'bold' : 'normal',
+          autoComplete: autoComplete,
+          onFocus: handleFocus,
+          onTarget: handleTarget,
+          onChange: handleChange,
+          onBlur: handleBlur,
+          onKeyUp: handleKeyUp,
+          onKeyDown: handleKeyDown
+        }), (0, jsx_runtime_1.jsxs)(S_RightBox_Multi, {
+          children: [iBtn2IconName && (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, {
+            iconName: iBtn2IconName,
+            baseSize: "small",
+            shapeType: "rectangle",
+            baseColorKey: "ui_cpnt_button_fill_base_transparent",
+            iconSize: size === 'large' || size === 'rlarge' ? 20 : 16,
+            iconColorKey: overrideIBtn2IconColorKey || colorTheme && {
+              none: basicThemeIconColors[state],
+              dark: darkThemeIconColors[state],
+              transparent: transparentThemeIconColors[state]
+            }[colorTheme],
+            iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line',
+            state: state === 'disabled' ? 'disabled' : 'normal',
+            onClick: handleClickIBtn2
+          }), iBtn1IconName && (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, {
+            iconName: iBtn1IconName,
+            baseSize: "small",
+            shapeType: "rectangle",
+            baseColorKey: "ui_cpnt_button_fill_base_transparent",
+            iconSize: size === 'large' || size === 'rlarge' ? 20 : 16,
+            iconColorKey: overrideIBtn1IconColorKey || colorTheme && {
+              none: basicThemeIconColors[state],
+              dark: darkThemeIconColors[state],
+              transparent: transparentThemeIconColors[state]
+            }[colorTheme],
+            iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line',
+            state: state === 'disabled' ? 'disabled' : 'normal',
+            onClick: handleClickIBtn1
+          })]
+        })]
+      });
+    }
+    if (textLineType === 'auto') {
+      return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+        children: [(0, jsx_runtime_1.jsx)(components_1.TextFieldBase, {
+          name: name,
+          hintText: hintText,
+          defaultText: defaultText,
+          textAlign: textAlign,
+          validation: validation,
+          textLineType: "auto",
+          autoMinRows: autoMinRows,
+          autoMaxRows: autoMaxRows,
+          state: state,
+          colorTheme: colorTheme,
+          maxLength: maxLength,
+          textSize: "form2",
+          textWeight: fontWeight === 'bold' ? 'bold' : 'normal',
+          autoComplete: autoComplete,
+          onFocus: handleFocus,
+          onTarget: handleTarget,
+          onChange: handleChange,
+          onBlur: handleBlur,
+          onKeyUp: handleKeyUp,
+          onKeyDown: handleKeyDown
+        }), (0, jsx_runtime_1.jsxs)(S_RightBox_Auto, {
+          children: [iBtn2IconName && (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, {
+            iconName: iBtn2IconName,
+            baseSize: "small",
+            shapeType: "rectangle",
+            baseColorKey: "ui_cpnt_button_fill_base_transparent",
+            iconSize: size === 'large' || size === 'rlarge' ? 20 : 16,
+            iconColorKey: overrideIBtn2IconColorKey || colorTheme && {
+              none: basicThemeIconColors[state],
+              dark: darkThemeIconColors[state],
+              transparent: transparentThemeIconColors[state]
+            }[colorTheme],
+            iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line',
+            state: state === 'disabled' ? 'disabled' : 'normal',
+            onClick: handleClickIBtn2
+          }), iBtn1IconName && (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, {
+            iconName: iBtn1IconName,
+            baseSize: "small",
+            shapeType: "rectangle",
+            baseColorKey: "ui_cpnt_button_fill_base_transparent",
+            iconSize: size === 'large' || size === 'rlarge' ? 20 : 16,
+            iconColorKey: overrideIBtn1IconColorKey || colorTheme && {
+              none: basicThemeIconColors[state],
+              dark: darkThemeIconColors[state],
+              transparent: transparentThemeIconColors[state]
+            }[colorTheme],
+            iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line',
+            state: state === 'disabled' ? 'disabled' : 'normal',
+            onClick: handleClickIBtn1
+          })]
+        })]
+      });
+    }
+    if (textLineType === 'single') {
+      return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+        children: [prefixText && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+          children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, {
+            text: prefixText,
+            styleTheme: "caption1Bold",
+            colorTheme: "sysTextTertiary",
+            singleLineMode: "use"
+          }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, {
+            size: "spacing_b",
+            spacingType: "width"
+          })]
+        }), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, {
+          name: name,
+          hintText: hintText,
+          defaultText: defaultText,
+          textAlign: textAlign,
+          validation: validation,
+          preventBlankMode: preventBlankMode,
+          enterSubmitMode: enterSubmitMode,
+          textLineType: "single",
+          inputType: inputType,
+          inputMode: inputMode,
+          state: state,
+          colorTheme: colorTheme,
+          min: min,
+          max: max,
+          maxLength: maxLength,
+          textSize: "form2",
+          textWeight: fontWeight === 'bold' ? 'bold' : 'normal',
+          fieldPaddingRight: size === 'large' || size === 'rlarge' ? 8 : undefined,
+          deleteIconMode: deleteBtnMode,
+          deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16,
+          deleteIconColor: deleteIconColor,
+          isFocused: isFocused,
+          autoComplete: autoComplete,
+          stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none',
+          stepperRightSpacing: size === 'large' || size === 'rlarge' ? 1 : -4,
+          innerSpinButtonSize: size === 'small' ? 12 : 16,
+          step: numberStep,
+          suffixText: suffixText,
+          suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none',
+          onFocus: handleFocus,
+          onTarget: handleTarget,
+          onChange: handleChange,
+          onBlur: handleBlur,
+          onKeyUp: handleKeyUp,
+          onKeyDown: handleKeyDown
+        }), (0, jsx_runtime_1.jsxs)(S_RightBox, {
+          children: [iBtn2IconName && (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, {
+            iconName: iBtn2IconName,
+            baseSize: "small",
+            shapeType: "rectangle",
+            baseColorKey: "ui_cpnt_button_fill_base_transparent",
+            iconSize: size === 'large' || size === 'rlarge' ? 20 : 16,
+            iconColorKey: overrideIBtn2IconColorKey || colorTheme && {
+              none: basicThemeIconColors[state],
+              dark: darkThemeIconColors[state],
+              transparent: transparentThemeIconColors[state]
+            }[colorTheme],
+            iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line',
+            state: state === 'disabled' ? 'disabled' : 'normal',
+            onClick: handleClickIBtn2
+          }), iBtn1IconName && (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, {
+            iconName: iBtn1IconName,
+            baseSize: "small",
+            shapeType: "rectangle",
+            baseColorKey: "ui_cpnt_button_fill_base_transparent",
+            iconSize: size === 'large' || size === 'rlarge' ? 20 : 16,
+            iconColorKey: overrideIBtn1IconColorKey || colorTheme && {
+              none: basicThemeIconColors[state],
+              dark: darkThemeIconColors[state],
+              transparent: transparentThemeIconColors[state]
+            }[colorTheme],
+            iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line',
+            state: state === 'disabled' ? 'disabled' : 'normal',
+            onClick: handleClickIBtn1
+          })]
+        })]
+      });
+    }
+  };
+  return (0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({
+    "x-pds-name": "TextField",
+    "x-pds-element-type": "component",
+    "x-pds-device-type": "desktop",
+    size: size,
+    responsiveMode: responsiveMode,
+    customWidth: customWidth
+  }, {
+    children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({
+      size: size,
+      responsiveMode: responsiveMode,
+      textLineType: textLineType,
+      isFocused: isFocused,
+      isError: Boolean(isError),
+      state: state,
+      colorTheme: colorTheme,
+      customWidth: customWidth
+    }, {
+      children: S_TextField()
+    })), ((_b = (0, types_1.getErrorByName)(errors, name)) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && (0, jsx_runtime_1.jsx)(S_Error, __assign({
+      colorTheme: colorTheme
+    }, {
+      children: (0, types_1.getErrorByName)(errors, name).message
+    }))]
+  }));
 }
 var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
-    var size = _a.size;
-    return size &&
-        {
-            small: 'width: 188px;',
-            medium: 'width: 188px;',
-            large: 'width: 432px;',
-            rlarge: 'width: 100%'
-        }[size];
+  var size = _a.size;
+  return size && {
+    small: 'width: 188px;',
+    medium: 'width: 188px;',
+    large: 'width: 432px;',
+    rlarge: 'width: 100%'
+  }[size];
 }, function (_a) {
-    var responsiveMode = _a.responsiveMode;
-    return responsiveMode === 'use' && 'width: 100%';
+  var responsiveMode = _a.responsiveMode;
+  return responsiveMode === 'use' && 'width: 100%';
 }, function (_a) {
-    var customWidth = _a.customWidth;
-    return customWidth && "width: ".concat(customWidth, ";");
+  var customWidth = _a.customWidth;
+  return customWidth && "width: ".concat(customWidth, ";");
 });
 var multi = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: auto;\n  padding: 14px;\n"], ["\n  height: auto;\n  padding: 14px;\n"])));
 var auto = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: auto;\n  padding-bottom: ", "px;\n  padding-top: ", "px;\n"], ["\n  height: auto;\n  padding-bottom: ", "px;\n  padding-top: ", "px;\n"])), function (_a) {
-    var theme = _a.theme;
-    return (46 -
-        Number(theme.desktopFontSize.form2.substring(0, 2)) * Number(theme.desktopLineHeight.form2)) /
-        2;
+  var theme = _a.theme;
+  return (46 - Number(theme.desktopFontSize.form2.substring(0, 2)) * Number(theme.desktopLineHeight.form2)) / 2;
 }, function (_a) {
-    var theme = _a.theme;
-    return (46 -
-        Number(theme.desktopFontSize.form2.substring(0, 2)) * Number(theme.desktopLineHeight.form2)) /
-        2;
+  var theme = _a.theme;
+  return (46 - Number(theme.desktopFontSize.form2.substring(0, 2)) * Number(theme.desktopLineHeight.form2)) / 2;
 });
 var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"], ["\n  border-radius: 10px;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingC;
+  var theme = _a.theme;
+  return theme.spacing.spacingC;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingC;
+  var theme = _a.theme;
+  return theme.spacing.spacingC;
 });
 var medium = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"], ["\n  border-radius: 12px;\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingC;
+  var theme = _a.theme;
+  return theme.spacing.spacingC;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingC;
+  var theme = _a.theme;
+  return theme.spacing.spacingC;
 });
 var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
+  var theme = _a.theme;
+  return theme.spacing.spacingD;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
+  var theme = _a.theme;
+  return theme.spacing.spacingB;
 }, function (_a) {
-    var size = _a.size;
-    return (size === 'rlarge' ? '100%' : '432px');
+  var size = _a.size;
+  return size === 'rlarge' ? '100%' : '432px';
 }, function (_a) {
-    var textLineType = _a.textLineType;
-    return textLineType === 'multi' && multi;
+  var textLineType = _a.textLineType;
+  return textLineType === 'multi' && multi;
 }, function (_a) {
-    var textLineType = _a.textLineType;
-    return textLineType === 'auto' && auto;
+  var textLineType = _a.textLineType;
+  return textLineType === 'auto' && auto;
 });
 var normal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textfield_base_normal;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textfield_base_normal;
 }, function (_a) {
-    var theme = _a.theme, isError = _a.isError, isFocused = _a.isFocused;
-    if (isError)
-        return theme.ui_cpnt_textfield_border_error;
-    if (isFocused)
-        return theme.ui_cpnt_textfield_border_focus;
-    return theme.ui_cpnt_textfield_border_normal;
+  var theme = _a.theme,
+    isError = _a.isError,
+    isFocused = _a.isFocused;
+  if (isError) return theme.ui_cpnt_textfield_border_error;
+  if (isFocused) return theme.ui_cpnt_textfield_border_focus;
+  return theme.ui_cpnt_textfield_border_normal;
 });
 var read_only = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textfield_base_disabled;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textfield_base_disabled;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textfield_border_disabled;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textfield_border_disabled;
 });
 var disabled = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textfield_base_disabled;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textfield_base_disabled;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textfield_border_disabled;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textfield_border_disabled;
 });
 var dark_normal = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textfield_base_darktheme_normal;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textfield_base_darktheme_normal;
 }, function (_a) {
-    var theme = _a.theme, isError = _a.isError, isFocused = _a.isFocused;
-    if (isError)
-        return theme.ui_cpnt_textfield_border_darktheme_error;
-    if (isFocused)
-        return theme.ui_cpnt_textfield_border_darktheme_focus;
-    return theme.ui_cpnt_textfield_border_darktheme_normal;
+  var theme = _a.theme,
+    isError = _a.isError,
+    isFocused = _a.isFocused;
+  if (isError) return theme.ui_cpnt_textfield_border_darktheme_error;
+  if (isFocused) return theme.ui_cpnt_textfield_border_darktheme_focus;
+  return theme.ui_cpnt_textfield_border_darktheme_normal;
 });
 var dark_read_only = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textfield_base_darktheme_disabled;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textfield_base_darktheme_disabled;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textfield_border_darktheme_normal;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textfield_border_darktheme_normal;
 });
 var dark_disabled = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textfield_base_darktheme_disabled;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textfield_base_darktheme_disabled;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textfield_border_darktheme_normal;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textfield_border_darktheme_normal;
 });
 var transparent_normal = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textfield_base_colortheme_transparent_normal;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textfield_base_colortheme_transparent_normal;
 }, function (_a) {
-    var theme = _a.theme, isError = _a.isError, isFocused = _a.isFocused;
-    if (isError)
-        return theme.ui_cpnt_textfield_border_colortheme_transparent_error;
-    if (isFocused)
-        return theme.ui_cpnt_textfield_border_colortheme_transparent_focus;
-    return theme.ui_cpnt_textfield_border_colortheme_transparent_normal;
+  var theme = _a.theme,
+    isError = _a.isError,
+    isFocused = _a.isFocused;
+  if (isError) return theme.ui_cpnt_textfield_border_colortheme_transparent_error;
+  if (isFocused) return theme.ui_cpnt_textfield_border_colortheme_transparent_focus;
+  return theme.ui_cpnt_textfield_border_colortheme_transparent_normal;
 });
 var transparent_read_only = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textfield_base_colortheme_transparent_readonly;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textfield_base_colortheme_transparent_readonly;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textfield_border_colortheme_transparent_readonly;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textfield_border_colortheme_transparent_readonly;
 });
 var transparent_disabled = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textfield_base_colortheme_transparent_disabled;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textfield_base_colortheme_transparent_disabled;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textfield_border_colortheme_transparent_disabled;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textfield_border_colortheme_transparent_disabled;
 });
 var backgroundHoverColor = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
-    var colorTheme = _a.colorTheme, theme = _a.theme;
-    switch (colorTheme) {
-        case 'none':
-            return theme.ui_cpnt_textfield_base_hover;
-        case 'dark':
-            return theme.ui_cpnt_textfield_base_hover_darktheme;
-        case 'transparent':
-            return theme.ui_cpnt_textfield_base_hover_transparent;
-        default:
-            return theme.ui_cpnt_textfield_base_hover;
-    }
+  var colorTheme = _a.colorTheme,
+    theme = _a.theme;
+  switch (colorTheme) {
+    case 'none':
+      return theme.ui_cpnt_textfield_base_hover;
+    case 'dark':
+      return theme.ui_cpnt_textfield_base_hover_darktheme;
+    case 'transparent':
+      return theme.ui_cpnt_textfield_base_hover_transparent;
+    default:
+      return theme.ui_cpnt_textfield_base_hover;
+  }
 });
 var backgroundActiveColor = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
-    var colorTheme = _a.colorTheme, theme = _a.theme;
-    switch (colorTheme) {
-        case 'none':
-            return theme.ui_cpnt_textfield_base_pressed;
-        case 'dark':
-            return theme.ui_cpnt_textfield_base_pressed_darktheme;
-        case 'transparent':
-            return theme.ui_cpnt_textfield_base_pressed_transparent;
-        default:
-            return theme.ui_cpnt_textfield_base_pressed;
-    }
+  var colorTheme = _a.colorTheme,
+    theme = _a.theme;
+  switch (colorTheme) {
+    case 'none':
+      return theme.ui_cpnt_textfield_base_pressed;
+    case 'dark':
+      return theme.ui_cpnt_textfield_base_pressed_darktheme;
+    case 'transparent':
+      return theme.ui_cpnt_textfield_base_pressed_transparent;
+    default:
+      return theme.ui_cpnt_textfield_base_pressed;
+  }
 });
 var normalActionColor = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), backgroundHoverColor, backgroundActiveColor);
 var S_TextFieldWrapper = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", ";\n  ", "\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", ";\n  ", "\n"])), 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 size = _a.size;
-    return size &&
-        {
-            small: small,
-            medium: medium,
-            large: large,
-            rlarge: large
-        }[size];
+  var size = _a.size;
+  return size && {
+    small: small,
+    medium: medium,
+    large: large,
+    rlarge: large
+  }[size];
 }, function (_a) {
-    var state = _a.state, colorTheme = _a.colorTheme;
-    if (state) {
-        switch (colorTheme) {
-            case 'none': {
-                return { normal: normal, read_only: read_only, disabled: disabled }[state];
-            }
-            case 'dark': {
-                return { normal: dark_normal, read_only: dark_read_only, disabled: dark_disabled }[state];
-            }
-            case 'transparent': {
-                return {
-                    normal: transparent_normal,
-                    read_only: transparent_read_only,
-                    disabled: transparent_disabled
-                }[state];
-            }
+  var state = _a.state,
+    colorTheme = _a.colorTheme;
+  if (state) {
+    switch (colorTheme) {
+      case 'none':
+        {
+          return {
+            normal: normal,
+            read_only: read_only,
+            disabled: disabled
+          }[state];
+        }
+      case 'dark':
+        {
+          return {
+            normal: dark_normal,
+            read_only: dark_read_only,
+            disabled: dark_disabled
+          }[state];
+        }
+      case 'transparent':
+        {
+          return {
+            normal: transparent_normal,
+            read_only: transparent_read_only,
+            disabled: transparent_disabled
+          }[state];
         }
     }
+  }
 }, transitionStyle_1.InputTransition, function (_a) {
-    var state = _a.state;
-    return state === 'normal' && normalActionColor;
+  var state = _a.state;
+  return state === 'normal' && normalActionColor;
 }, function (_a) {
-    var responsiveMode = _a.responsiveMode;
-    return responsiveMode === 'use' && 'width: 100%';
+  var responsiveMode = _a.responsiveMode;
+  return responsiveMode === 'use' && 'width: 100%';
 }, function (_a) {
-    var customWidth = _a.customWidth;
-    return customWidth && "width: ".concat(customWidth, ";");
+  var customWidth = _a.customWidth;
+  return customWidth && "width: ".concat(customWidth, ";");
 });
 var S_RightBox = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
 var S_RightBox_Auto = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  align-items: center;\n  align-self: end;\n  display: flex;\n"], ["\n  align-items: center;\n  align-self: end;\n  display: flex;\n"])));
 var S_RightBox_Multi = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  align-items: center;\n  align-self: end;\n  display: flex;\n"], ["\n  align-items: center;\n  align-self: end;\n  display: flex;\n"])));
 var S_Error = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"])), function (_a) {
-    var theme = _a.theme, colorTheme = _a.colorTheme;
-    switch (colorTheme) {
-        case 'none': {
-            return theme.ui_cpnt_textfield_text_error;
-        }
-        case 'dark':
-        case 'transparent': {
-            return theme.ui_cpnt_textfield_text_colortheme_transparent_error;
-        }
-    }
+  var theme = _a.theme,
+    colorTheme = _a.colorTheme;
+  switch (colorTheme) {
+    case 'none':
+      {
+        return theme.ui_cpnt_textfield_text_error;
+      }
+    case 'dark':
+    case 'transparent':
+      {
+        return theme.ui_cpnt_textfield_text_colortheme_transparent_error;
+      }
+  }
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.desktopFontSize.caption2;
+  var theme = _a.theme;
+  return theme.desktopFontSize.caption2;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.normal;
+  var theme = _a.theme;
+  return theme.fontWeight.normal;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.desktopLineHeight.caption2;
+  var theme = _a.theme;
+  return theme.desktopLineHeight.caption2;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
+  var theme = _a.theme;
+  return theme.spacing.spacingA;
 });
 exports.default = TextField;
-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, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
+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, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;