pds-dev-kit-web-test 0.0.28 → 0.2.0-beta.0

package/dist/src/common/hooks/useAnimation.d.ts

@@ -0,0 +1,2 @@
+declare function useAnimation(isRender: boolean): [boolean, () => void, boolean];
+export default useAnimation;

package/dist/src/common/hooks/useAnimation.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+function useAnimation(isRender) {
+    var _a = (0, react_1.useState)(false), isComplete = _a[0], setIsComplete = _a[1];
+    (0, react_1.useEffect)(function () {
+        if (isRender) {
+            setIsComplete(true);
+        }
+    }, [isRender]);
+    var shouldRender = isRender || isComplete;
+    var isAnimationStart = isRender && isComplete;
+    var handleAnimationEnd = function () {
+        if (!isRender)
+            setIsComplete(false);
+    };
+    return [shouldRender, handleAnimationEnd, isAnimationStart];
+}
+exports.default = useAnimation;

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

@@ -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,6 +233,10 @@
     "sys_component_base_22": "grey950",
     "sys_component_base_21": "red500/opacity50",
     "sys_component_border_white_opacity20": "white/opacity20",
+    "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": "darkgrey100/opacity65",
     "sys_component_base_darkgreen": "darkgreen700",
     "sys_component_base_24": "black/opacity80",

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

@@ -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,6 +233,10 @@
     "sys_component_base_22": "grey950",
     "sys_component_base_21": "red500/opacity50",
     "sys_component_border_white_opacity20": "white/opacity20",
+    "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": "darkgrey100/opacity65",
     "sys_component_base_darkgreen": "darkgreen700",
     "sys_component_base_24": "black/opacity80",

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

@@ -79,6 +79,10 @@
     "facebookblue": "#1877F2",
     "opacity05": "0D",
     "opacity15": "26",
+    "test01": "#E9E9EC",
+    "test02": "#D3D3D6",
+    "test03": "#282829",
+    "test04": "#3E3E3F",
     "grey80": "#E9E9EC",
     "grey200": "#D3D3D6",
     "darkgrey80": "#282829",

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

@@ -651,6 +651,10 @@
     "ui_67": "sys_component_base_white_opacity50",
     "ui_cpnt_videoplayer_gradient_3": "sys_component_base_black_opacity50",
     "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",
     "ui_69": "sys_component_base_darkgreen",
     "ui_cpnt_divider_white_02": "sys_component_base_20",
     "ui_cpnt_list_chatbubble_base_brand_primary": "usr_brand_primary",

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

@@ -80,6 +80,10 @@ declare const colorSet: {
         facebookblue: string;
         opacity05: string;
         opacity15: string;
+        test01: string;
+        test02: string;
+        test03: string;
+        test04: string;
         grey80: string;
         grey200: string;
         darkgrey80: string;
@@ -320,6 +324,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;
         sys_component_base_darkgreen: string;
         sys_component_base_24: string;
@@ -987,6 +995,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;
         ui_69: string;
         ui_cpnt_divider_white_02: string;
         ui_cpnt_list_chatbubble_base_brand_primary: string;
@@ -1240,6 +1252,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;
         sys_component_base_darkgreen: string;
         sys_component_base_24: string;

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

@@ -651,6 +651,10 @@ 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;
     ui_69: string;
     ui_cpnt_divider_white_02: string;
     ui_cpnt_list_chatbubble_base_brand_primary: string;

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

@@ -0,0 +1,4 @@
+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;

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

@@ -0,0 +1,14 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.modalOffAni = exports.modalOnAni = exports.dialogOffAni = exports.dialogOnAni = void 0;
+var styled_components_1 = require("styled-components");
+var keyframes_1 = require("./keyframes");
+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.d.ts

@@ -0,0 +1,14 @@
+export declare const fadeIn: import("styled-components").Keyframes;
+export declare const fadeOut: import("styled-components").Keyframes;
+export declare const glow: import("styled-components").Keyframes;
+export declare const scaleUp: import("styled-components").Keyframes;
+export declare const scaleDown: import("styled-components").Keyframes;
+export declare const scaleUpIncludeTranslate: import("styled-components").Keyframes;
+export declare const scaleDownIncludeTranslate: import("styled-components").Keyframes;
+export declare const gelatine: import("styled-components").Keyframes;
+export declare const scaleBounceIn: import("styled-components").Keyframes;
+export declare const scaleBounceIn02: import("styled-components").Keyframes;
+export declare const scaleBounceInIncludeTranslate: import("styled-components").Keyframes;
+export declare const scaleBounceInIncludeTranslate02: import("styled-components").Keyframes;
+export declare const scaleBounceOutIncludeTranslate: import("styled-components").Keyframes;
+export declare const scaleBounceOutIncludeTranslate02: import("styled-components").Keyframes;

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

@@ -0,0 +1,23 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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"])));
+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

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

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

@@ -0,0 +1,12 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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  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/common/styles/theme.js

@@ -18,10 +18,10 @@ exports.fontWeight = {
     bold: '700'
 };
 exports.desktopFontSize = {
-    displayHeading: '40px',
-    heading: '24px',
-    leadParagraph: '20px',
-    subtitle: '18px',
+    displayHeading: '44px',
+    heading: '28px',
+    leadParagraph: '24px',
+    subtitle: '22px',
     body1: '18px',
     body2: '16px',
     caption1: '14px',
@@ -57,10 +57,10 @@ exports.desktopEditorLineHeight = {
     p: '1.8'
 };
 exports.mobileFontSize = {
-    displayHeading: '32px',
-    heading: '24px',
-    leadParagraph: '20px',
-    subtitle: '18px',
+    displayHeading: '36px',
+    heading: '28px',
+    leadParagraph: '24px',
+    subtitle: '22px',
     body1: '18px',
     body2: '16px',
     caption1: '14px',
@@ -108,11 +108,11 @@ exports.spacing = {
     spacingB: '8px',
     spacingC: '12px',
     spacingD: '16px',
-    spacingE: '24px',
-    spacingF: '32px',
-    spacingG: '48px',
-    spacingH: '64px',
-    spacingI: '88px',
+    spacingE: "calc(24px * 1.1)",
+    spacingF: "calc(32px * 1.2)",
+    spacingG: "calc(48px * 1.3)",
+    spacingH: "calc(64px * 1.2)",
+    spacingI: "calc(88px * 1.1)",
     spacingJ: '120px',
     spacingK: '160px',
     spacingL: '240px',

package/dist/src/common/types/styled-components.d.ts

@@ -95,11 +95,11 @@ export interface PdsDevKitTheme {
         spacingB: '8px';
         spacingC: '12px';
         spacingD: '16px';
-        spacingE: '24px';
-        spacingF: '32px';
-        spacingG: '48px';
-        spacingH: '64px';
-        spacingI: '88px';
+        spacingE: `calc(24px * 1.1)`;
+        spacingF: `calc(32px * 1.2)`;
+        spacingG: `calc(48px * 1.3)`;
+        spacingH: `calc(64px * 1.2)`;
+        spacingI: `calc(88px * 1.1)`;
         spacingJ: '120px';
         spacingK: '160px';
         spacingL: '240px';

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

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importStar(require("styled-components"));
+var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
 var Checkbox_1 = require("../Checkbox");
 var TextLabel_1 = require("../TextLabel");
@@ -254,20 +255,20 @@ 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  :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  :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) {
     var quickActionBtnType = _a.quickActionBtnType;
     return quickActionBtnType &&
         { fix: fixedAdminListItem, hover: hoverAdminListItem }[quickActionBtnType];
-}, function (_a) {
+}, transitionStyle_1.AdminListItemTransition, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_datatable_base_hover;
 }, S_QuickActionButtonBox, function (_a) {

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

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
 var hybrid_1 = require("../../../hybrid");
 var TextButton_1 = require("../TextButton");
 var TextLabel_1 = require("../TextLabel");
@@ -88,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  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"])), 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) {
@@ -97,7 +98,7 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_5 || (templa
 }, function (_a) {
     var theme = _a.theme;
     return theme.boxShadow.elevation5;
-});
+}, animationStyle_1.dialogOnAni);
 var S_Footer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;

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

@@ -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

@@ -27,6 +27,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importStar(require("styled-components"));
+var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
 var components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
@@ -204,7 +205,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  ", ";\n"], ["\n  background-color: ", ";\n  ", ";\n"])), function (_a) {
+var normal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_base_normal;
 }, function (_a) {
@@ -214,7 +215,7 @@ var normal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7
     if (isFocused)
         return "box-shadow: 0 0 0 2px " + theme.ui_cpnt_textfield_border_focus + " inset;";
     return "box-shadow: 0 0 0 1px " + theme.ui_cpnt_textfield_border_normal + " inset;";
-});
+}, 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;
@@ -229,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) {
@@ -251,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) {
@@ -271,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

@@ -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");
 var TextLabel_1 = require("../TextLabel");
 // NOTE : 기획상 아직 사용하지 않는 props
@@ -68,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) {
@@ -77,12 +78,12 @@ var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 ||
 }, function (_a) {
     var state = _a.state;
     return (state === 'normal' ? 'pointer' : 'default');
-}, 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_hover + ",\n    " + theme.ui_cpnt_button_fill_on_base_hover + "\n  );";
+    return theme.ui_cpnt_button_fill_on_base_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_cpnt_button_fill_on_base_pressed;
 }, function (_a) {
     var state = _a.state;
     return state === 'disabled' && disabled;

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

@@ -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

@@ -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"])));