npm - pds-dev-kit-web-test - Versions diffs - 0.0.23 → 0.0.25 - Mend

pds-dev-kit-web-test 0.0.23 → 0.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/dist/src/common/styles/colorSet/PaletteColor_Dark.json CHANGED Viewed

@@ -92,8 +92,8 @@
     "sys_component_base_05": "grey950",
     "sys_background_dimmed_65": "black/opacity65",
     "sys_temp_grey_06": "darkgrey70",
-    "sys_on_base_white_opacity10": "white/opacity10",
-    "sys_on_base_black_opacity10": "black/opacity10",
+    "sys_on_base_white_opacity10": "white/opacity20",
+    "sys_on_base_black_opacity10": "grey950/opacity15",
     "sys_component_base_05_opacity00": "grey950/opacity00",
     "sys_papp_post_notice_link": "darkskyblue500",
     "sys_component_base_navy_light": "darknavy100",
@@ -233,5 +233,9 @@
     "sys_component_base_22": "grey950",
     "sys_component_base_21": "darkred500/opacity40",
     "sys_component_border_white_opacity20": "white/opacity20",
-    "sys_component_base_23": "darkgrey100/opacity65"
+    "sys_transition_test_text_field_hover": "test03",
+    "sys_transition_test_text_field_active": "test04",
+    "sys_transition_test_main_button_secondary_hover": "white/opacity05",
+    "sys_transition_test_main_button_secondary_active": "white/opacity15",
+    "sys_component_base_23": "darkgrey30"
 }

package/dist/src/common/styles/colorSet/PaletteColor_light.json CHANGED Viewed

@@ -92,8 +92,8 @@
     "sys_component_base_05": "grey950",
     "sys_background_dimmed_65": "black/opacity65",
     "sys_temp_grey_06": "grey70",
-    "sys_on_base_white_opacity10": "white/opacity10",
-    "sys_on_base_black_opacity10": "black/opacity10",
+    "sys_on_base_white_opacity10": "white/opacity20",
+    "sys_on_base_black_opacity10": "grey950/opacity15",
     "sys_component_base_05_opacity00": "grey950/opacity00",
     "sys_papp_post_notice_link": "skyblue500",
     "sys_component_base_navy_light": "navy100",
@@ -233,5 +233,9 @@
     "sys_component_base_22": "grey950",
     "sys_component_base_21": "red500/opacity40",
     "sys_component_border_white_opacity20": "white/opacity20",
-    "sys_component_base_23": "darkgrey100/opacity65"
+    "sys_transition_test_text_field_hover": "test01",
+    "sys_transition_test_text_field_active": "test02",
+    "sys_transition_test_main_button_secondary_hover": "grey950/opacity05",
+    "ui_transition_test_main_button_secondary_active": "grey950/opacity15",
+    "sys_component_base_23": "grey30"
 }

package/dist/src/common/styles/colorSet/SemanticColor.json CHANGED Viewed

@@ -76,5 +76,11 @@
     "green50": "#CCF5E9",
     "darkgreen50": "#134034",
     "opacity90": "E6",
-    "facebookblue": "#1877F2"
+    "facebookblue": "#1877F2",
+    "opacity05": "0D",
+    "opacity15": "26",
+    "test01": "#E9E9EC",
+    "test02": "#D3D3D6",
+    "test03": "#282829",
+    "test04": "#3E3E3F"
 }

package/dist/src/common/styles/colorSet/UIColor.json CHANGED Viewed

@@ -192,7 +192,7 @@
     "ui_cpnt_datatable_text_textbutton": "sys_text_brand_primary",
     "ui_cpnt_datatable_text_active": "sys_text_active",
     "ui_cpnt_datatable_base_default": "sys_component_base_white_opacity00",
-    "ui_cpnt_datatable_base_hover": "sys_component_base_01",
+    "ui_cpnt_datatable_base_hover": "sys_component_base_23",
     "ui_cpnt_datatable_text_inactive": "sys_text_grey_03",
     "ui_cpnt_datatable_bulkaction_base": "sys_widget_black",
     "ui_cpnt_datatable_icon_01": "sys_widget_white",
@@ -650,5 +650,9 @@
     "ui_66": "sys_component_base_black_opacity50",
     "ui_67": "sys_component_base_white_opacity50",
     "ui_cpnt_videoplayer_gradient_3": "sys_component_base_black_opacity50",
-    "ui_68": "sys_component_base_22"
+    "ui_68": "sys_component_base_22",
+    "ui_transition_test_text_field_hover": "sys_transition_test_text_field_hover",
+    "ui_transition_test_text_field_active": "sys_transition_test_text_field_active",
+    "ui_transition_test_main_button_secondary_hover": "sys_transition_test_main_button_secondary_hover",
+    "ui_transition_test_main_button_secondary_active": "sys_transition_test_main_button_secondary_active"
 }

package/dist/src/common/styles/colorSet/index.d.ts CHANGED Viewed

@@ -78,6 +78,12 @@ declare const colorSet: {
         darkgreen50: string;
         opacity90: string;
         facebookblue: string;
+        opacity05: string;
+        opacity15: string;
+        test01: string;
+        test02: string;
+        test03: string;
+        test04: string;
     };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
@@ -314,6 +320,10 @@ declare const colorSet: {
         sys_component_base_22: string;
         sys_component_base_21: string;
         sys_component_border_white_opacity20: string;
+        sys_transition_test_text_field_hover: string;
+        sys_transition_test_text_field_active: string;
+        sys_transition_test_main_button_secondary_hover: string;
+        ui_transition_test_main_button_secondary_active: string;
         sys_component_base_23: string;
     };
     readonly PaletteColor_Dark: {
@@ -551,6 +561,10 @@ declare const colorSet: {
         sys_component_base_22: string;
         sys_component_base_21: string;
         sys_component_border_white_opacity20: string;
+        sys_transition_test_text_field_hover: string;
+        sys_transition_test_text_field_active: string;
+        sys_transition_test_main_button_secondary_hover: string;
+        sys_transition_test_main_button_secondary_active: string;
         sys_component_base_23: string;
     };
     readonly UIColor: {
@@ -1206,6 +1220,10 @@ declare const colorSet: {
         ui_67: string;
         ui_cpnt_videoplayer_gradient_3: string;
         ui_68: string;
+        ui_transition_test_text_field_hover: string;
+        ui_transition_test_text_field_active: string;
+        ui_transition_test_main_button_secondary_hover: string;
+        ui_transition_test_main_button_secondary_active: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts CHANGED Viewed

@@ -651,4 +651,8 @@ export interface UITheme {
     ui_67: string;
     ui_cpnt_videoplayer_gradient_3: string;
     ui_68: string;
+    ui_transition_test_text_field_hover: string;
+    ui_transition_test_text_field_active: string;
+    ui_transition_test_main_button_secondary_hover: string;
+    ui_transition_test_main_button_secondary_active: string;
 }

package/dist/src/common/styles/movement/animationStyle.d.ts CHANGED Viewed

@@ -1,7 +1,4 @@
-export declare const buttonOnAni: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-export declare const buttonOffAni: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
 export declare const dialogOnAni: import("styled-components").FlattenSimpleInterpolation;
 export declare const dialogOffAni: import("styled-components").FlattenSimpleInterpolation;
 export declare const modalOnAni: import("styled-components").FlattenSimpleInterpolation;
 export declare const modalOffAni: import("styled-components").FlattenSimpleInterpolation;
-export declare const contentSheetOnAni: import("styled-components").FlattenSimpleInterpolation;

package/dist/src/common/styles/movement/animationStyle.js CHANGED Viewed

@@ -4,20 +4,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.contentSheetOnAni = exports.modalOffAni = exports.modalOnAni = exports.dialogOffAni = exports.dialogOnAni = exports.buttonOffAni = exports.buttonOnAni = void 0;
+exports.modalOffAni = exports.modalOnAni = exports.dialogOffAni = exports.dialogOnAni = void 0;
 var styled_components_1 = require("styled-components");
 var keyframes_1 = require("./keyframes");
-exports.buttonOnAni = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  animation: backgroundImageFadeIn 0.1s ease-in both;\n\n  @keyframes backgroundImageFadeIn {\n    0% {\n      background-image: linear-gradient(to top, #ffffff00, #ffffff00);\n    }\n    10% {\n      background-image: linear-gradient(to top, #ffffff03, #ffffff03);\n    }\n    20% {\n      background-image: linear-gradient(to top, #ffffff05, #ffffff05);\n    }\n    30% {\n      background-image: linear-gradient(to top, #ffffff08, #ffffff08);\n    }\n    40% {\n      background-image: linear-gradient(to top, #ffffff0a, #ffffff0a);\n    }\n    50% {\n      background-image: linear-gradient(to top, #ffffff0d, #ffffff0d);\n    }\n    60% {\n      background-image: linear-gradient(to top, #ffffff0f, #ffffff0f);\n    }\n    70% {\n      background-image: linear-gradient(to top, #ffffff12, #ffffff12);\n    }\n    80% {\n      background-image: linear-gradient(to top, #ffffff14, #ffffff14);\n    }\n    90% {\n      background-image: linear-gradient(to top, #ffffff17, #ffffff17);\n    }\n    100% {\n      ", "\n    }\n  }\n"], ["\n  animation: backgroundImageFadeIn 0.1s ease-in both;\n\n  @keyframes backgroundImageFadeIn {\n    0% {\n      background-image: linear-gradient(to top, #ffffff00, #ffffff00);\n    }\n    10% {\n      background-image: linear-gradient(to top, #ffffff03, #ffffff03);\n    }\n    20% {\n      background-image: linear-gradient(to top, #ffffff05, #ffffff05);\n    }\n    30% {\n      background-image: linear-gradient(to top, #ffffff08, #ffffff08);\n    }\n    40% {\n      background-image: linear-gradient(to top, #ffffff0a, #ffffff0a);\n    }\n    50% {\n      background-image: linear-gradient(to top, #ffffff0d, #ffffff0d);\n    }\n    60% {\n      background-image: linear-gradient(to top, #ffffff0f, #ffffff0f);\n    }\n    70% {\n      background-image: linear-gradient(to top, #ffffff12, #ffffff12);\n    }\n    80% {\n      background-image: linear-gradient(to top, #ffffff14, #ffffff14);\n    }\n    90% {\n      background-image: linear-gradient(to top, #ffffff17, #ffffff17);\n    }\n    100% {\n      ", "\n    }\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return "background-image: linear-gradient(\n        to top,\n        " + theme.ui_cpnt_button_fill_on_base_hover + ",\n        " + theme.ui_cpnt_button_fill_on_base_hover + "\n      );";
-});
-exports.buttonOffAni = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  animation: backgroundImageFadeOut 0.1s ease-in both;\n\n  @keyframes backgroundImageFadeOut {\n    from {\n      ", "\n    }\n    10% {\n      background-image: linear-gradient(to top, #ffffff17, #ffffff17);\n    }\n    20% {\n      background-image: linear-gradient(to top, #ffffff14, #ffffff14);\n    }\n    30% {\n      background-image: linear-gradient(to top, #ffffff12, #ffffff12);\n    }\n    40% {\n      background-image: linear-gradient(to top, #ffffff0f, #ffffff0f);\n    }\n    50% {\n      background-image: linear-gradient(to top, #ffffff0d, #ffffff0d);\n    }\n    60% {\n      background-image: linear-gradient(to top, #ffffff0a, #ffffff0a);\n    }\n    70% {\n      background-image: linear-gradient(to top, #ffffff08, #ffffff08);\n    }\n    80% {\n      background-image: linear-gradient(to top, #ffffff05, #ffffff05);\n    }\n    90% {\n      background-image: linear-gradient(to top, #ffffff03, #ffffff03);\n    }\n    to {\n      background-image: linear-gradient(to top, #ffffff00, #ffffff00);\n    }\n  }\n"], ["\n  animation: backgroundImageFadeOut 0.1s ease-in both;\n\n  @keyframes backgroundImageFadeOut {\n    from {\n      ", "\n    }\n    10% {\n      background-image: linear-gradient(to top, #ffffff17, #ffffff17);\n    }\n    20% {\n      background-image: linear-gradient(to top, #ffffff14, #ffffff14);\n    }\n    30% {\n      background-image: linear-gradient(to top, #ffffff12, #ffffff12);\n    }\n    40% {\n      background-image: linear-gradient(to top, #ffffff0f, #ffffff0f);\n    }\n    50% {\n      background-image: linear-gradient(to top, #ffffff0d, #ffffff0d);\n    }\n    60% {\n      background-image: linear-gradient(to top, #ffffff0a, #ffffff0a);\n    }\n    70% {\n      background-image: linear-gradient(to top, #ffffff08, #ffffff08);\n    }\n    80% {\n      background-image: linear-gradient(to top, #ffffff05, #ffffff05);\n    }\n    90% {\n      background-image: linear-gradient(to top, #ffffff03, #ffffff03);\n    }\n    to {\n      background-image: linear-gradient(to top, #ffffff00, #ffffff00);\n    }\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return "background-image: linear-gradient(\n        to top,\n        " + theme.ui_cpnt_button_fill_on_base_hover + ",\n        " + theme.ui_cpnt_button_fill_on_base_hover + "\n      );";
-});
-exports.dialogOnAni = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both, ", " 0.2s ease-in-out both;\n"], ["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both, ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceInIncludeTranslate, keyframes_1.fadeIn);
-exports.dialogOffAni = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"], ["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceOutIncludeTranslate, keyframes_1.fadeOut);
-exports.modalOnAni = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"], ["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceInIncludeTranslate02, keyframes_1.fadeIn);
-exports.modalOffAni = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"], ["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceOutIncludeTranslate02, keyframes_1.fadeOut);
-exports.contentSheetOnAni = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out both;\n"], ["\n  animation: ", " 0.2s ease-in-out both;\n"])), keyframes_1.glow);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+exports.dialogOnAni = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both, ", " 0.2s ease-in-out both;\n"], ["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both, ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceInIncludeTranslate, keyframes_1.fadeIn);
+exports.dialogOffAni = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"], ["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceOutIncludeTranslate, keyframes_1.fadeOut);
+exports.modalOnAni = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"], ["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceInIncludeTranslate02, keyframes_1.fadeIn);
+exports.modalOffAni = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"], ["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceOutIncludeTranslate02, keyframes_1.fadeOut);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/common/styles/movement/keyframes.js CHANGED Viewed

@@ -6,18 +6,18 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.scaleBounceOutIncludeTranslate02 = exports.scaleBounceOutIncludeTranslate = exports.scaleBounceInIncludeTranslate02 = exports.scaleBounceInIncludeTranslate = exports.scaleBounceIn02 = exports.scaleBounceIn = exports.gelatine = exports.scaleDownIncludeTranslate = exports.scaleUpIncludeTranslate = exports.scaleDown = exports.scaleUp = exports.glow = exports.fadeOut = exports.fadeIn = void 0;
 var styled_components_1 = require("styled-components");
-exports.fadeIn = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from { opacity: 0.7; }\n  to { opacity: 1; }\n"], ["\n  from { opacity: 0.7; }\n  to { opacity: 1; }\n"])));
-exports.fadeOut = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from { opacity: 1; }\n  to { opacity: 0.7; }\n"], ["\n  from { opacity: 1; }\n  to { opacity: 0.7; }\n"])));
-exports.glow = (0, styled_components_1.keyframes)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  from { transform: scale(1); }\n  to { transform: scale(1.03); }\n"], ["\n  from { transform: scale(1); }\n  to { transform: scale(1.03); }\n"])));
-exports.scaleUp = (0, styled_components_1.keyframes)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  from { transform: scale(0.95); }\n  to { transform: scale(1); }\n"], ["\n  from { transform: scale(0.95); }\n  to { transform: scale(1); }\n"])));
-exports.scaleDown = (0, styled_components_1.keyframes)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  from { transform: scale(1); }\n  to { transform: scale(0.95); }\n"], ["\n  from { transform: scale(1); }\n  to { transform: scale(0.95); }\n"])));
-exports.scaleUpIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  from { transform: scale(0.97)  translate(-50%, -50%); }\n  to { transform: scale(1)  translate(-50%, -50%); }\n"], ["\n  from { transform: scale(0.97)  translate(-50%, -50%); }\n  to { transform: scale(1)  translate(-50%, -50%); }\n"])));
-exports.scaleDownIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  from { transform: scale(1)  translate(-50%, -50%); }\n  to { transform: scale(0.97)  translate(-50%, -50%); }\n"], ["\n  from { transform: scale(1)  translate(-50%, -50%); }\n  to { transform: scale(0.97)  translate(-50%, -50%); }\n"])));
-exports.gelatine = (0, styled_components_1.keyframes)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  from, to {\n    transform: scale(1, 1);\n  }\n  25% {\n    transform: scale(0.95, 1.1);\n  }\n  50% {\n    transform: scale(1.05, 0.9);\n  }\n  75% {\n    transform: scale(0.97, 1.05);\n  }\n"], ["\n  from, to {\n    transform: scale(1, 1);\n  }\n  25% {\n    transform: scale(0.95, 1.1);\n  }\n  50% {\n    transform: scale(1.05, 0.9);\n  }\n  75% {\n    transform: scale(0.97, 1.05);\n  }\n"])));
-exports.scaleBounceIn = (0, styled_components_1.keyframes)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  from, to {\n    transform: scale(1);\n  }\n  23% {\n    transform: scale(1.03);\n  }\n  66% {\n    transform: scale(0.99);\n  }\n"], ["\n  from, to {\n    transform: scale(1);\n  }\n  23% {\n    transform: scale(1.03);\n  }\n  66% {\n    transform: scale(0.99);\n  }\n"])));
-exports.scaleBounceIn02 = (0, styled_components_1.keyframes)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  from {\n    transform: scale(0.9);\n  }\n  50% {\n    transform: scale(1.01);\n  }\n  to {\n    transform: scale(1);\n  }\n"], ["\n  from {\n    transform: scale(0.9);\n  }\n  50% {\n    transform: scale(1.01);\n  }\n  to {\n    transform: scale(1);\n  }\n"])));
-exports.scaleBounceInIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  from, to {\n    transform: scale(1) translate(-50%, -50%);\n  }\n  33% {\n    transform: scale(1.03) translate(-50%, -50%);\n  }\n  66% {\n    transform: scale(0.99) translate(-50%, -50%);\n  }\n"], ["\n  from, to {\n    transform: scale(1) translate(-50%, -50%);\n  }\n  33% {\n    transform: scale(1.03) translate(-50%, -50%);\n  }\n  66% {\n    transform: scale(0.99) translate(-50%, -50%);\n  }\n"])));
-exports.scaleBounceInIncludeTranslate02 = (0, styled_components_1.keyframes)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  from {\n    transform: scale(0.9) translate(-50%, -50%);\n  }\n  50% {\n    transform: scale(1.01) translate(-50%, -50%);\n  }\n  to {\n    transform: scale(1) translate(-50%, -50%);\n  }\n"], ["\n  from {\n    transform: scale(0.9) translate(-50%, -50%);\n  }\n  50% {\n    transform: scale(1.01) translate(-50%, -50%);\n  }\n  to {\n    transform: scale(1) translate(-50%, -50%);\n  }\n"])));
-exports.scaleBounceOutIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  from, to {\n    transform: scale(1) translate(-50%, -50%);\n  }\n  33% {\n    transform: scale(0.99) translate(-50%, -50%);\n  }\n  66% {\n    transform: scale(1.03) translate(-50%, -50%);\n  }\n"], ["\n  from, to {\n    transform: scale(1) translate(-50%, -50%);\n  }\n  33% {\n    transform: scale(0.99) translate(-50%, -50%);\n  }\n  66% {\n    transform: scale(1.03) translate(-50%, -50%);\n  }\n"])));
-exports.scaleBounceOutIncludeTranslate02 = (0, styled_components_1.keyframes)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  from {\n    transform: scale(1) translate(-50%, -50%);\n  }\n  50% {\n    transform: scale(1.01) translate(-50%, -50%);\n  }\n  to {\n    transform: scale(0.9) translate(-50%, -50%);\n  }\n"], ["\n  from {\n    transform: scale(1) translate(-50%, -50%);\n  }\n  50% {\n    transform: scale(1.01) translate(-50%, -50%);\n  }\n  to {\n    transform: scale(0.9) translate(-50%, -50%);\n  }\n"])));
+exports.fadeIn = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    from { opacity: 0.7; }\n    to { opacity: 1; }\n"], ["\n    from { opacity: 0.7; }\n    to { opacity: 1; }\n"])));
+exports.fadeOut = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    from { opacity: 1; }\n    to { opacity: 0.7; }\n"], ["\n    from { opacity: 1; }\n    to { opacity: 0.7; }\n"])));
+exports.glow = (0, styled_components_1.keyframes)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    from { transform: scale(1); }\n    to { transform: scale(1.03); }\n"], ["\n    from { transform: scale(1); }\n    to { transform: scale(1.03); }\n"])));
+exports.scaleUp = (0, styled_components_1.keyframes)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    from { transform: scale(0.95); }\n    to { transform: scale(1); }\n"], ["\n    from { transform: scale(0.95); }\n    to { transform: scale(1); }\n"])));
+exports.scaleDown = (0, styled_components_1.keyframes)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    from { transform: scale(1); }\n    to { transform: scale(0.95); }\n"], ["\n    from { transform: scale(1); }\n    to { transform: scale(0.95); }\n"])));
+exports.scaleUpIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    from { transform: scale(0.97)  translate(-50%, -50%); }\n    to { transform: scale(1)  translate(-50%, -50%); }\n"], ["\n    from { transform: scale(0.97)  translate(-50%, -50%); }\n    to { transform: scale(1)  translate(-50%, -50%); }\n"])));
+exports.scaleDownIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    from { transform: scale(1)  translate(-50%, -50%); }\n    to { transform: scale(0.97)  translate(-50%, -50%); }\n"], ["\n    from { transform: scale(1)  translate(-50%, -50%); }\n    to { transform: scale(0.97)  translate(-50%, -50%); }\n"])));
+exports.gelatine = (0, styled_components_1.keyframes)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    from, to {\n        transform: scale(1, 1);\n    }\n    25% {\n        transform: scale(0.95, 1.1);\n    }\n    50% {\n        transform: scale(1.05, 0.9);\n    }\n    75% {\n        transform: scale(0.97, 1.05);\n    }\n"], ["\n    from, to {\n        transform: scale(1, 1);\n    }\n    25% {\n        transform: scale(0.95, 1.1);\n    }\n    50% {\n        transform: scale(1.05, 0.9);\n    }\n    75% {\n        transform: scale(0.97, 1.05);\n    }\n"])));
+exports.scaleBounceIn = (0, styled_components_1.keyframes)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    from, to {\n        transform: scale(1);\n    }\n    23% {\n        transform: scale(1.03);\n    }\n    66% {\n        transform: scale(0.99);\n    }\n"], ["\n    from, to {\n        transform: scale(1);\n    }\n    23% {\n        transform: scale(1.03);\n    }\n    66% {\n        transform: scale(0.99);\n    }\n"])));
+exports.scaleBounceIn02 = (0, styled_components_1.keyframes)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    from {\n        transform: scale(0.9);\n    }\n    50% {\n        transform: scale(1.01);\n    }\n    to {\n        transform: scale(1);\n    }\n"], ["\n    from {\n        transform: scale(0.9);\n    }\n    50% {\n        transform: scale(1.01);\n    }\n    to {\n        transform: scale(1);\n    }\n"])));
+exports.scaleBounceInIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    from, to {\n        transform: scale(1) translate(-50%, -50%);\n    }\n    33% {\n        transform: scale(1.03) translate(-50%, -50%);\n    }\n    66% {\n        transform: scale(0.99) translate(-50%, -50%);\n    }\n"], ["\n    from, to {\n        transform: scale(1) translate(-50%, -50%);\n    }\n    33% {\n        transform: scale(1.03) translate(-50%, -50%);\n    }\n    66% {\n        transform: scale(0.99) translate(-50%, -50%);\n    }\n"])));
+exports.scaleBounceInIncludeTranslate02 = (0, styled_components_1.keyframes)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    from {\n        transform: scale(0.9) translate(-50%, -50%);\n    }\n    50% {\n        transform: scale(1.01) translate(-50%, -50%);\n    }\n    to {\n        transform: scale(1) translate(-50%, -50%);\n    }\n"], ["\n    from {\n        transform: scale(0.9) translate(-50%, -50%);\n    }\n    50% {\n        transform: scale(1.01) translate(-50%, -50%);\n    }\n    to {\n        transform: scale(1) translate(-50%, -50%);\n    }\n"])));
+exports.scaleBounceOutIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    from, to {\n        transform: scale(1) translate(-50%, -50%);\n    }\n    33% {\n        transform: scale(0.99) translate(-50%, -50%);\n    }\n    66% {\n        transform: scale(1.03) translate(-50%, -50%);\n    }\n"], ["\n    from, to {\n        transform: scale(1) translate(-50%, -50%);\n    }\n    33% {\n        transform: scale(0.99) translate(-50%, -50%);\n    }\n    66% {\n        transform: scale(1.03) translate(-50%, -50%);\n    }\n"])));
+exports.scaleBounceOutIncludeTranslate02 = (0, styled_components_1.keyframes)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    from {\n        transform: scale(1) translate(-50%, -50%);\n    }\n    50% {\n        transform: scale(1.01) translate(-50%, -50%);\n    }\n    to {\n        transform: scale(0.9) translate(-50%, -50%);\n    }\n"], ["\n    from {\n        transform: scale(1) translate(-50%, -50%);\n    }\n    50% {\n        transform: scale(1.01) translate(-50%, -50%);\n    }\n    to {\n        transform: scale(0.9) translate(-50%, -50%);\n    }\n"])));
 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;

package/dist/src/common/styles/movement/transitionStyle.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 export declare const AdminListItemTransition: import("styled-components").FlattenSimpleInterpolation;
 export declare const TextFieldTransition: import("styled-components").FlattenSimpleInterpolation;
-export declare const ContentSheetTransition: import("styled-components").FlattenSimpleInterpolation;
+export declare const ButtonTransition: import("styled-components").FlattenSimpleInterpolation;

package/dist/src/common/styles/movement/transitionStyle.js CHANGED Viewed

@@ -4,9 +4,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContentSheetTransition = exports.TextFieldTransition = exports.AdminListItemTransition = void 0;
+exports.ButtonTransition = exports.TextFieldTransition = exports.AdminListItemTransition = void 0;
 var styled_components_1 = require("styled-components");
 exports.AdminListItemTransition = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transition: background-color 0.15s ease-out;\n"], ["\n  transition: background-color 0.15s ease-out;\n"])));
-exports.TextFieldTransition = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  transition: background-color 0.15s ease-out;\n\n  :hover {\n    background-color: #eff0f3;\n  }\n"], ["\n  transition: background-color 0.15s ease-out;\n\n  :hover {\n    background-color: #eff0f3;\n  }\n"])));
-exports.ContentSheetTransition = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  transition: transform 0.2s ease-out;\n\n  :hover {\n    transform: scale(1.015);\n  }\n"], ["\n  transition: transform 0.2s ease-out;\n\n  :hover {\n    transform: scale(1.015);\n  }\n"])));
+exports.TextFieldTransition = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  transition: background-color 0.15s ease-out;\n"], ["\n  transition: background-color 0.15s ease-out;\n"])));
+exports.ButtonTransition = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  transition: background-color 0.1s ease-out;\n"], ["\n  transition: background-color 0.1s ease-out;\n"])));
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/desktop/components/AdminListItem/AdminListItem.js CHANGED Viewed

@@ -255,13 +255,13 @@ var S_SelectionColumn = styled_components_1.default.div(templateObject_23 || (te
 });
 var hoverAdminListItem = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  align-items: center;\n  position: relative;\n"], ["\n  align-items: center;\n  position: relative;\n"])));
 var fixedAdminListItem = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  justify-content: space-between;\n"], ["\n  justify-content: space-between;\n"])));
-var S_AdminListItem = styled_components_1.default.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  padding-left: ", ";\n\n  ", ";\n  ", "\n\n  ", "\n\n  :hover {\n    background-color: ", ";\n\n    ", " {\n      display: ", ";\n      visibility: visible;\n    }\n  }\n\n  &:last-child {\n    margin-bottom: 88px;\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  padding-left: ", ";\n\n  ", ";\n  ", "\n\n  ", "\n\n  :hover {\n    background-color: ", ";\n\n    ", " {\n      display: ", ";\n      visibility: visible;\n    }\n  }\n\n  &:last-child {\n    margin-bottom: 88px;\n  }\n"])), function (_a) {
+var S_AdminListItem = styled_components_1.default.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  padding-left: ", ";\n\n  ", "\n\n  ", ";\n  ", "\n\n  ", "\n\n  :hover {\n    background-color: ", ";\n\n    ", " {\n      display: ", ";\n      visibility: visible;\n    }\n  }\n\n  &:last-child {\n    margin-bottom: 88px;\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  padding-left: ", ";\n\n  ", "\n\n  ", ";\n  ", "\n\n  ", "\n\n  :hover {\n    background-color: ", ";\n\n    ", " {\n      display: ", ";\n      visibility: visible;\n    }\n  }\n\n  &:last-child {\n    margin-bottom: 88px;\n  }\n"])), function (_a) {
     var theme = _a.theme, isSelected = _a.isSelected;
     return isSelected ? theme.ui_cpnt_datatable_base_selected : theme.ui_cpnt_datatable_base_default;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
-}, function (_a) {
+}, transitionStyle_1.AdminListItemTransition, function (_a) {
     var rowSize = _a.rowSize;
     return rowSize && { high: highRow, medium: mediumRow, low: lowRow }[rowSize];
 }, function (_a) {

package/dist/src/desktop/components/DesktopAlertDialog/DesktopAlertDialog.js CHANGED Viewed

@@ -89,7 +89,7 @@ var S_ModalOverlay = styled_components_1.default.div(templateObject_4 || (templa
     var theme = _a.theme;
     return theme.ui_cpnt_alertdialog_dimmed;
 });
-var S_ModalWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n  min-width: 480px;\n  max-width: 560px;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n  min-width: 480px;\n  max-width: 560px;\n\n  ", "\n"])), function (_a) {
+var S_ModalWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n  min-width: 480px;\n  max-width: 560px;\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n  min-width: 480px;\n  max-width: 560px;\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_alertdialog_base;
 }, function (_a) {

package/dist/src/desktop/components/Dropdown/Dropdown.js CHANGED Viewed

@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
 var ContextMenu_1 = require("../ContextMenu");
 var ContextMenuItem_1 = require("../ContextMenuItem");
@@ -270,7 +271,14 @@ var borderColor = (0, styled_components_1.css)(templateObject_10 || (templateObj
             return theme.ui_cpnt_dropdown_border_normal;
     }
 });
-var S_Select = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n"])), function (_a) {
+var normal_transition = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __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 S_Select = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var state = _a.state;
     switch (state) {
         case 'disabled':
@@ -310,10 +318,13 @@ var S_Select = styled_components_1.default.div(templateObject_11 || (templateObj
 }, function (_a) {
     var customWidth = _a.customWidth;
     return customWidth && "width: " + customWidth + ";";
+}, transitionStyle_1.TextFieldTransition, function (_a) {
+    var state = _a.state;
+    return state === 'normal' && normal_transition;
 });
-var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"], ["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"])), function (_a) {
+var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"], ["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
 exports.default = Dropdown;
-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;
+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;

package/dist/src/desktop/components/EditApplyTextField/EditApplyTextField.js CHANGED Viewed

@@ -230,7 +230,14 @@ var disabled = (0, styled_components_1.css)(templateObject_9 || (templateObject_
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_border_disabled;
 });
-var S_S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\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"])), function (_a) {
+var normal_transition = (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"])), 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 S_S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __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  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"])), function (_a) {
     var state = _a.state;
     return (state === 'disabled' ? 'not-allowed' : 'text');
 }, function (_a) {
@@ -252,8 +259,11 @@ var S_S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_10
 }, function (_a) {
     var customWidth = _a.customWidth;
     return customWidth && "width: " + customWidth + ";";
+}, transitionStyle_1.TextFieldTransition, function (_a) {
+    var state = _a.state;
+    return state === 'normal' && normal_transition;
 });
-var S_Error = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\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  margin-right: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"])), function (_a) {
+var S_Error = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\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  margin-right: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_text_error;
 }, function (_a) {
@@ -272,6 +282,6 @@ var S_Error = styled_components_1.default.div(templateObject_11 || (templateObje
     var theme = _a.theme, isFocused = _a.isFocused;
     return isFocused ? theme.spacing.spacingI : theme.spacing.spacingA;
 });
-var S_ButtonBox = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  bottom: -36px;\n  display: flex;\n  position: absolute;\n  right: 0;\n  z-index: 1;\n"], ["\n  bottom: -36px;\n  display: flex;\n  position: absolute;\n  right: 0;\n  z-index: 1;\n"])));
+var S_ButtonBox = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  bottom: -36px;\n  display: flex;\n  position: absolute;\n  right: 0;\n  z-index: 1;\n"], ["\n  bottom: -36px;\n  display: flex;\n  position: absolute;\n  right: 0;\n  z-index: 1;\n"])));
 exports.default = EditApplyTextField;
-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;
+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;

package/dist/src/desktop/components/FloatingActionButton/FloatingActionButton.js CHANGED Viewed

@@ -28,7 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
-var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
+var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 // NOTE : 기획상 아직 사용하지 않는 props
@@ -69,7 +69,7 @@ var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_disabled;
 });
-var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  bottom: 24px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  bottom: 24px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
+var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  bottom: 24px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\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  align-items: center;\n  background-color: ", ";\n  border: none;\n  bottom: 24px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\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 theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
@@ -78,9 +78,12 @@ var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 ||
 }, function (_a) {
     var state = _a.state;
     return (state === 'normal' ? 'pointer' : 'default');
-}, animationStyle_1.buttonOnAni, function (_a) {
+}, transitionStyle_1.ButtonTransition, function (_a) {
     var theme = _a.theme;
-    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
+    return theme.ui_cpnt_button_fill_on_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_on_base_pressed;
 }, function (_a) {
     var state = _a.state;
     return state === 'disabled' && disabled;

package/dist/src/desktop/components/IconButton/IconButton.js CHANGED Viewed

@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
 function IconButton(_a) {
     var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, iconName = _a.iconName, iconColorKey = _a.iconColorKey, _g = _a.shadow, shadow = _g === void 0 ? 'hidden' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, tabIndex = _a.tabIndex, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
@@ -73,19 +74,19 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
         ? ''
         : theme.ui_cpnt_button_fill_base_disabled;
 });
-var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"])), function (_a) {
+var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __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    ", "\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    ", "\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 theme = _a.theme, baseColorKey = _a.baseColorKey;
     return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
-}, function (_a) {
+}, transitionStyle_1.ButtonTransition, function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
     return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
         ? ''
-        : "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_hover + ",\n    " + theme.ui_cpnt_button_fill_on_base_hover + "\n  );";
+        : theme.ui_cpnt_button_fill_on_base_hover;
 }, function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
     return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
         ? ''
-        : "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
+        : theme.ui_cpnt_button_fill_on_base_pressed;
 }, function (_a) {
     var state = _a.state;
     return state === 'disabled' && fillDisabled;
@@ -97,7 +98,7 @@ var lineDisabled = (0, styled_components_1.css)(templateObject_3 || (templateObj
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_border_disabled;
 });
-var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"])), function (_a) {
+var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
@@ -119,7 +120,7 @@ var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
 }, function (_a) {
     var theme = _a.theme;
     return "background-color: " + theme.ui_cpnt_button_line_base_pressed + "\n  ;";
-}, function (_a) {
+}, transitionStyle_1.ButtonTransition, function (_a) {
     var state = _a.state;
     return state === 'disabled' && lineDisabled;
 });

package/dist/src/desktop/components/LottieReactionButton/LottieReactionButton.js CHANGED Viewed

@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var numberHelper_1 = require("../../../common/utils/numberHelper");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
@@ -77,12 +78,12 @@ var disabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_disabled;
 });
-var normal = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n"], ["\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n"])), function (_a) {
+var normal = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n  border: none;\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\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  cursor: pointer;\n  border: none;\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\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"])), transitionStyle_1.ButtonTransition, function (_a) {
     var theme = _a.theme;
-    return "background-image: linear-gradient(\n      to top,\n      " + theme.ui_cpnt_button_fill_on_base_hover + ",\n      " + theme.ui_cpnt_button_fill_on_base_hover + "\n      );";
+    return theme.ui_transition_test_main_button_secondary_hover;
 }, function (_a) {
     var theme = _a.theme;
-    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n    );";
+    return theme.ui_transition_test_main_button_secondary_active;
 });
 var view_only = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
 var buttonAnimation = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  @keyframes gelatine {\n    from,\n    to {\n      transform: scale(1, 1);\n    }\n    25% {\n      transform: scale(0.95, 1.1);\n    }\n    50% {\n      transform: scale(1.05, 0.9);\n    }\n    75% {\n      transform: scale(0.97, 1.05);\n    }\n  }\n\n  animation: gelatine 1s 1;\n"], ["\n  @keyframes gelatine {\n    from,\n    to {\n      transform: scale(1, 1);\n    }\n    25% {\n      transform: scale(0.95, 1.1);\n    }\n    50% {\n      transform: scale(1.05, 0.9);\n    }\n    75% {\n      transform: scale(0.97, 1.05);\n    }\n  }\n\n  animation: gelatine 1s 1;\n"])));