pds-dev-kit-web-test 0.1.0 → 0.1.2

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

@@ -50,9 +50,23 @@ function MainButton(_a) {
             onMouseDown(e);
         }
     };
+    var isLineColorTheme = colorTheme.includes('line');
+    var isPrimaryColorTheme = colorTheme.includes('primary');
+    var isSecondaryColorTheme = colorTheme.includes('secondary');
+    var lineColorThemeTextColor = function () {
+        if (colorTheme === 'line1') {
+            return 'ui_cpnt_button_text_error';
+        }
+        if (colorTheme === 'line2') {
+            return 'ui_cpnt_button_text_primary';
+        }
+        if (colorTheme === 'line3') {
+            return 'ui_cpnt_button_text_darktheme_enabled';
+        }
+    };
     var submittingProgressColor = function () {
-        if (fillType === 'line' && colorTheme !== 'none' && state !== 'disabled') {
-            return textThemeColorLineObj[colorTheme];
+        if (fillType === 'line' && isLineColorTheme && state !== 'disabled') {
+            return lineColorThemeTextColor();
         }
         if (fillType === 'fill') {
             return 'ui_cpnt_textlabel_usr_brandonprimary';
@@ -61,9 +75,15 @@ function MainButton(_a) {
             return 'ui_cpnt_textlabel_sys_primary';
         }
         if (styleTheme === 'primary') {
+            if (colorTheme === 'primary1') {
+                return 'ui_cpnt_textlabel_usr_brandprimary';
+            }
             return 'ui_cpnt_textlabel_usr_brandonprimary';
         }
         if (styleTheme === 'secondary') {
+            if (colorTheme === 'secondary1') {
+                return 'ui_cpnt_textlabel_sys_white';
+            }
             return 'ui_cpnt_textlabel_usr_brandprimary';
         }
         return 'ui_cpnt_textlabel_usr_brandonprimary';
@@ -75,11 +95,6 @@ function MainButton(_a) {
         small: 'caption1Bold',
         xsmall: 'caption1Regular'
     };
-    var textThemeColorLineObj = {
-        line1: 'ui_cpnt_button_text_error',
-        line2: 'ui_cpnt_button_text_primary',
-        line3: 'ui_cpnt_button_text_darktheme_enabled'
-    };
     var textColor = function () {
         if (fillType === 'fill') {
             return 'usrTextBrandOnPrimary';
@@ -88,50 +103,84 @@ function MainButton(_a) {
             return 'sysTextPrimary';
         }
         if (styleTheme === 'primary') {
+            if (colorTheme === 'primary1') {
+                return 'usrTextBrandPrimary';
+            }
             return 'usrTextBrandOnPrimary';
         }
         if (styleTheme === 'secondary') {
+            if (colorTheme === 'secondary1') {
+                return 'sysTextWhite';
+            }
             return 'usrTextBrandPrimary';
         }
         return 'usrTextBrandOnPrimary';
     };
-    var selectTextThemeColor = function () {
+    var textColorOverride = function () {
         if (colorTheme === 'line3' && state === 'disabled') {
             return 'ui_cpnt_button_text_darktheme_disabled';
         }
-        if (fillType === 'line' && colorTheme !== 'none' && state !== 'disabled') {
-            return textThemeColorLineObj[colorTheme];
+        if (fillType === 'line' && isLineColorTheme && state !== 'disabled') {
+            return lineColorThemeTextColor();
+        }
+        if (styleTheme === 'secondary' && colorTheme === 'secondary1' && state === 'disabled') {
+            return 'ui_cpnt_button_text_secondary_variation_disabled';
         }
         return undefined;
     };
-    var iconFillTypeColorObj = {
+    var iconFillTypeColors = {
         fill: 'ui_cpnt_button_icon_on_primary',
         line: 'ui_cpnt_button_icon_enabled'
     };
-    var iconStyleThemeColorObj = {
+    var iconStyleThemeColors = {
         primary: 'ui_cpnt_button_icon_on_primary',
         secondary: 'ui_cpnt_button_icon_primary'
     };
-    var iconColorThemeLineColorObj = {
-        line1: 'ui_cpnt_button_icon_error',
-        line2: 'ui_cpnt_button_icon_primary',
-        line3: 'ui_cpnt_button_icon_darktheme_enabled'
+    var lineColorThemeIconColor = function () {
+        if (colorTheme === 'line1') {
+            return 'ui_cpnt_button_icon_error';
+        }
+        if (colorTheme === 'line2') {
+            return 'ui_cpnt_button_icon_primary';
+        }
+        if (colorTheme === 'line3') {
+            return 'ui_cpnt_button_icon_darktheme_enabled';
+        }
+    };
+    var primaryColorThemeIconColor = function () {
+        if (colorTheme === 'primary1') {
+            return 'ui_cpnt_button_icon_primary';
+        }
+    };
+    var secondaryColorThemeIconColor = function () {
+        if (colorTheme === 'secondary1') {
+            return 'ui_cpnt_button_icon_on_primary';
+        }
     };
     var iconColor = function () {
         if (state === 'disabled') {
             if (colorTheme === 'line3') {
                 return 'ui_cpnt_button_icon_darktheme_disabled';
             }
+            if (styleTheme === 'secondary' && colorTheme === 'secondary1') {
+                return 'ui_cpnt_button_icon_secondary_variation_disabled';
+            }
             return 'ui_cpnt_button_icon_disabled';
         }
-        if (fillType === 'line' && colorTheme !== 'none') {
-            return iconColorThemeLineColorObj[colorTheme];
+        if (fillType === 'line' && isLineColorTheme) {
+            return lineColorThemeIconColor();
         }
         if (fillType) {
-            return iconFillTypeColorObj[fillType];
+            return iconFillTypeColors[fillType];
+        }
+        if (styleTheme === 'primary' && isPrimaryColorTheme) {
+            return primaryColorThemeIconColor();
+        }
+        if (styleTheme === 'secondary' && isSecondaryColorTheme) {
+            return secondaryColorThemeIconColor();
         }
         if (styleTheme) {
-            return iconStyleThemeColorObj[styleTheme];
+            return iconStyleThemeColors[styleTheme];
         }
     };
     var MainButtonVariation = function () {
@@ -142,11 +191,11 @@ function MainButton(_a) {
             return (react_1.default.createElement(S_SubmittingMainButton, { shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, colorTheme: colorTheme, state: "normal", disabled: true },
                 react_1.default.createElement(components_1.CircularProgress, { colorKey: submittingProgressColor(), size: size === 'rlarge' ? 'large' : size })));
         }
-        return (react_1.default.createElement(S_MainButton, { "x-pds-name": "MainButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown, "x-pds-component-id": "MainButton1", className: "MainButton2" },
+        return (react_1.default.createElement(S_MainButton, { "x-pds-name": "MainButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
             size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
                 react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: textColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
             size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
                 react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
@@ -237,7 +286,7 @@ var lineDisabled = (0, styled_components_1.css)(templateObject_11 || (templateOb
         ? theme.ui_cpnt_button_line_border_darktheme_disabled
         : theme.ui_cpnt_button_line_border_disabled;
 });
-var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n  ", "\n\n  ", ";\n  ", "\n"], ["\n  background-color: ", ";\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n  ", "\n\n  ", ";\n  ", "\n"])), function (_a) {
+var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n  ", "\n\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n  ", "\n\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
@@ -248,7 +297,18 @@ var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12
     return "background-color: " + theme.ui_cpnt_button_line_base_pressed + ";";
 }, transitionStyle_1.ButtonTransition, function (_a) {
     var colorTheme = _a.colorTheme;
-    return colorTheme && { none: none, line1: line1, line2: line2, line3: line3 }[colorTheme];
+    if (colorTheme === 'none') {
+        return none;
+    }
+    if (colorTheme === 'line1') {
+        return line1;
+    }
+    if (colorTheme === 'line2') {
+        return line2;
+    }
+    if (colorTheme === 'line3') {
+        return line3;
+    }
 }, function (_a) {
     var state = _a.state;
     return state === 'disabled' && lineDisabled;
@@ -257,7 +317,11 @@ var primaryDisabled = (0, styled_components_1.css)(templateObject_13 || (templat
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_disabled;
 });
-var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n"])), function (_a) {
+var primary1 = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_primary_variation_base_enabled;
+});
+var primary = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_primary;
 }, transitionStyle_1.ButtonTransition, function (_a) {
@@ -266,28 +330,51 @@ var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_on_base_pressed;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme === 'primary1' && primary1;
 }, function (_a) {
     var state = _a.state;
     return state === 'disabled' && primaryDisabled;
 });
-var secondaryDisabled = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+var secondary1Disabled = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_secondary_variation_base_default;
+});
+var secondaryDisabled = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme === 'secondary1' && secondary1Disabled;
 });
-var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n"])), function (_a) {
+var secondary1 = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_secondary_variation_base_default;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_secondary_variation_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_secondary_variation_base_pressed;
+}, transitionStyle_1.ButtonTransition);
+var secondary = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
 }, transitionStyle_1.ButtonTransition, function (_a) {
     var theme = _a.theme;
-    return theme.ui_transition_test_main_button_secondary_hover;
+    return theme.ui_cpnt_button_secondary_on_base_hover;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.ui_transition_test_main_button_secondary_active;
+    return theme.ui_cpnt_button_secondary_on_base_pressed;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme === 'secondary1' && secondary1;
 }, function (_a) {
     var state = _a.state;
     return state === 'disabled' && secondaryDisabled;
 });
-var S_MainButton = styled_components_1.default.button(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"])), function (_a) {
+var S_MainButton = styled_components_1.default.button(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"])), function (_a) {
     var state = _a.state;
     return (state === 'normal' ? 'pointer' : 'default');
 }, function (_a) {
@@ -310,7 +397,7 @@ var S_MainButton = styled_components_1.default.button(templateObject_17 || (temp
             regular: "font-weight: " + theme.fontWeight.normal
         }[fontWeight];
 });
-var S_LoadingMainButton = (0, styled_components_1.default)(S_MainButton)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
-var S_SubmittingMainButton = (0, styled_components_1.default)(S_MainButton)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
+var S_LoadingMainButton = (0, styled_components_1.default)(S_MainButton)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
+var S_SubmittingMainButton = (0, styled_components_1.default)(S_MainButton)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
 exports.default = MainButton;
-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;
+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;

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

@@ -94,9 +94,12 @@ function ReactionButton(_a) {
             react_1.default.createElement(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() }))),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })));
 }
-var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  height: 32px;\n\n  ", "\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  height: 32px;\n\n  ", "\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n"])), transitionStyle_1.ButtonTransition, function (_a) {
+var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  height: 32px;\n\n  ", "\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  height: 32px;\n\n  ", "\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n"])), transitionStyle_1.ButtonTransition, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_reactionbutton_base_01;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_reactionbutton_base_02;
 });
 var S_ReactionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ReactionButtonStyle);
 exports.default = ReactionButton;

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

@@ -113,14 +113,30 @@ var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templa
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });
-var normal_transition = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __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"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_transition_test_text_field_hover;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_transition_test_text_field_active;
+var backgroundHoverColor = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __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_select_base_hover_darktheme;
+        default:
+            return theme.ui_cpnt_textfield_base_hover;
+    }
+});
+var backgroundActiveColor = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __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_select_base_hover_darktheme;
+        default:
+            return theme.ui_cpnt_textfield_base_pressed;
+    }
 });
-var S_Select = styled_components_1.default.select(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  appearance: none;\n  background-color: ", ";\n  border: 2px solid ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  color: ", ";\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 100%;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-all;\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n    cursor: ", ";\n    opacity: 1;\n  }\n\n  :focus {\n    border: 2px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  appearance: none;\n  background-color: ", ";\n  border: 2px solid ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  color: ", ";\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 100%;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-all;\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n    cursor: ", ";\n    opacity: 1;\n  }\n\n  :focus {\n    border: 2px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var normalActionColor = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __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_Select = styled_components_1.default.select(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  appearance: none;\n  background-color: ", ";\n  border: 2px solid ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  color: ", ";\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 100%;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-all;\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n    cursor: ", ";\n    opacity: 1;\n  }\n\n  :focus {\n    border: 2px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  appearance: none;\n  background-color: ", ";\n  border: 2px solid ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  color: ", ";\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 100%;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-all;\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n    cursor: ", ";\n    opacity: 1;\n  }\n\n  :focus {\n    border: 2px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_select_base_normal;
 }, function (_a) {
@@ -171,9 +187,9 @@ var S_Select = styled_components_1.default.select(templateObject_9 || (templateO
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     return colorTheme === 'dark' && dark;
-}, transitionStyle_1.TextFieldTransition, function (_a) {
+}, transitionStyle_1.InputTransition, function (_a) {
     var state = _a.state;
-    return state === 'normal' && normal_transition;
+    return state === 'normal' && normalActionColor;
 });
 exports.default = Select;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/dist/src/desktop/components/TextButton/TextButton.d.ts

@@ -7,7 +7,7 @@ export declare type TextButtonProps = {
     fontWeight?: 'bold' | 'regular';
     type?: 'submit' | 'reset' | 'button';
     state?: 'normal' | 'disabled';
-    colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
 declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;

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

@@ -63,7 +63,8 @@ var textColor = {
     none: 'usrTextBrandPrimary',
     red: 'sysTextError',
     grey_01: 'sysTextPrimary',
-    white: 'sysTextWhite'
+    white: 'sysTextWhite',
+    white2: 'sysTextWhite'
 };
 function TextButton(_a) {
     var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick"]);
@@ -82,19 +83,44 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])));
 var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])));
-var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"])), function (_a) {
+var colorThemeDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n"], ["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_pressed;
+});
+var colorThemeWhite = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n"], ["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_white_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_white_base_pressed;
+});
+var colorThemeWhite2 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n"], ["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textbutton_white_variation_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textbutton_white_variation_base_pressed;
+});
+var S_Button = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"])), function (_a) {
     var state = _a.state;
     return (state === 'normal' ? 'pointer' : 'default');
 }, transitionStyle_1.ButtonTransition, function (_a) {
-    var theme = _a.theme, colorTheme = _a.colorTheme;
-    return colorTheme === 'white'
-        ? theme.ui_cpnt_button_white_base_hover
-        : theme.ui_cpnt_button_line_base_hover;
-}, function (_a) {
-    var theme = _a.theme, colorTheme = _a.colorTheme;
-    return colorTheme === 'white'
-        ? theme.ui_cpnt_button_white_base_pressed
-        : theme.ui_cpnt_button_line_base_pressed;
+    var colorTheme = _a.colorTheme;
+    switch (colorTheme) {
+        case 'none':
+        case 'red':
+        case 'grey_01':
+            return colorThemeDefault;
+        case 'white':
+            return colorThemeWhite;
+        case 'white2':
+            return colorThemeWhite2;
+        default:
+            return colorThemeDefault;
+    }
 }, function (_a) {
     var size = _a.size;
     return size &&
@@ -117,4 +143,4 @@ var S_Button = styled_components_1.default.button(templateObject_5 || (templateO
     return responsiveMode === 'use' && 'width: 100%';
 });
 exports.default = TextButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/src/desktop/components/TextField/TextField.d.ts

@@ -35,7 +35,8 @@ export declare type TextFieldProps = {
     onClickIBtn2?: () => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onTarget?: () => void;
 };
-declare function TextField({ name, hintText, defaultText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onTarget }: TextFieldProps): JSX.Element;
+declare function TextField({ name, hintText, defaultText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
 export default TextField;

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

@@ -32,7 +32,7 @@ var components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
 function TextField(_a) {
     var _b;
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.validationPoint, validationPoint = _c === void 0 ? 'onBlur' : _c, _d = _a.preventBlankMode, preventBlankMode = _d === void 0 ? 'none' : _d, _e = _a.enterSubmitMode, enterSubmitMode = _e === void 0 ? 'none' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.responsiveMode, responsiveMode = _g === void 0 ? 'none' : _g, _h = _a.textLineType, textLineType = _h === void 0 ? 'single' : _h, _j = _a.multiRows, multiRows = _j === void 0 ? 8 : _j, _k = _a.autoMinRows, autoMinRows = _k === void 0 ? 8 : _k, autoMaxRows = _a.autoMaxRows, _l = _a.inputType, inputType = _l === void 0 ? 'text' : _l, _m = _a.state, state = _m === void 0 ? 'normal' : _m, iBtn1IconName = _a.iBtn1IconName, _o = _a.iBtn1IconFillType, iBtn1IconFillType = _o === void 0 ? 'line' : _o, iBtn2IconName = _a.iBtn2IconName, _p = _a.iBtn2IconFillType, iBtn2IconFillType = _p === void 0 ? 'line' : _p, _q = _a.colorTheme, colorTheme = _q === void 0 ? 'none' : _q, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _r = _a.autoComplete, autoComplete = _r === void 0 ? 'on' : _r, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.validationPoint, validationPoint = _c === void 0 ? 'onBlur' : _c, _d = _a.preventBlankMode, preventBlankMode = _d === void 0 ? 'none' : _d, _e = _a.enterSubmitMode, enterSubmitMode = _e === void 0 ? 'none' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.responsiveMode, responsiveMode = _g === void 0 ? 'none' : _g, _h = _a.textLineType, textLineType = _h === void 0 ? 'single' : _h, _j = _a.multiRows, multiRows = _j === void 0 ? 8 : _j, _k = _a.autoMinRows, autoMinRows = _k === void 0 ? 8 : _k, autoMaxRows = _a.autoMaxRows, _l = _a.inputType, inputType = _l === void 0 ? 'text' : _l, _m = _a.state, state = _m === void 0 ? 'normal' : _m, iBtn1IconName = _a.iBtn1IconName, _o = _a.iBtn1IconFillType, iBtn1IconFillType = _o === void 0 ? 'line' : _o, iBtn2IconName = _a.iBtn2IconName, _p = _a.iBtn2IconFillType, iBtn2IconFillType = _p === void 0 ? 'line' : _p, _q = _a.colorTheme, colorTheme = _q === void 0 ? 'none' : _q, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _r = _a.autoComplete, autoComplete = _r === void 0 ? 'on' : _r, 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',
@@ -80,6 +80,11 @@ function TextField(_a) {
             onKeyUp(e);
         }
     }
+    function handleKeyDown(e) {
+        if (onKeyDown) {
+            onKeyDown(e);
+        }
+    }
     function handleChange(e) {
         if (validationPoint === 'onChange') {
             validateOnChange(e);
@@ -100,10 +105,10 @@ function TextField(_a) {
     }
     var S_TextField = function () {
         if (textLineType === 'multi') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }));
         }
         if (textLineType === 'auto') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }));
         }
         if (textLineType === 'single') {
             var deleteIconColor = 'ui_cpnt_button_icon_disabled';
@@ -118,7 +123,7 @@ function TextField(_a) {
                 }
             }
             return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: "use", deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }),
+                react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: "use", deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }),
                 react_1.default.createElement(S_IconBox, null,
                     iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
                             {
@@ -196,7 +201,7 @@ var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
     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  ", "\n"], ["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n\n  ", "\n"])), function (_a) {
+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;
 }, function (_a) {
@@ -206,7 +211,7 @@ var normal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7
     if (isFocused)
         return theme.ui_cpnt_textfield_border_focus;
     return theme.ui_cpnt_textfield_border_normal;
-}, transitionStyle_1.TextFieldTransition);
+});
 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;
@@ -271,14 +276,34 @@ var transparent_disabled = (0, styled_components_1.css)(templateObject_15 || (te
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_border_colortheme_transparent_disabled;
 });
-var normal_transition = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __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"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_transition_test_text_field_hover;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_transition_test_text_field_active;
+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 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 S_TextFieldWrapper = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 14px;\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  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", ";\n  ", "\n"])), function (_a) {
+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  border-radius: 14px;\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  border-radius: 14px;\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');
 }, function (_a) {
@@ -309,9 +334,9 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_17 || (t
             }
         }
     }
-}, transitionStyle_1.TextFieldTransition, function (_a) {
+}, transitionStyle_1.InputTransition, function (_a) {
     var state = _a.state;
-    return state === 'normal' && normal_transition;
+    return state === 'normal' && normalActionColor;
 }, function (_a) {
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
@@ -319,8 +344,8 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_17 || (t
     var customWidth = _a.customWidth;
     return customWidth && "width: " + customWidth + ";";
 });
-var S_IconBox = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var S_Error = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __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 S_IconBox = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_Error = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __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': {
@@ -345,4 +370,4 @@ var S_Error = styled_components_1.default.div(templateObject_19 || (templateObje
     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;
+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;