pds-dev-kit-web-test 0.0.19 → 0.0.21

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

@@ -224,5 +224,8 @@
     "sys_cpnt_sheet_base_04": "darkblue500",
     "sys_cpnt_sheet_base_05": "grey950",
     "sys_cpnt_sheet_base_06": "darkgreen500",
-    "sys_facebook": "facebookblue"
+    "sys_facebook": "facebookblue",
+    "sys_component_base_19": "white/opacity65",
+    "sys_cpnt_pagination_dot_01": "white",
+    "sys_cpnt_pagination_dot_02": "white/opacity50"
 }

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

@@ -224,5 +224,8 @@
     "sys_cpnt_sheet_base_04": "blue500",
     "sys_cpnt_sheet_base_05": "grey950",
     "sys_cpnt_sheet_base_06": "green500",
-    "sys_facebook": "facebookblue"
+    "sys_facebook": "facebookblue",
+    "sys_component_base_19": "white/opacity65",
+    "sys_cpnt_pagination_dot_01": "grey400",
+    "sys_cpnt_pagination_dot_02": "white/opacity50"
 }

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

@@ -634,12 +634,17 @@
     "ui_cpnt_sheet_base_06": "sys_cpnt_sheet_base_04",
     "ui_cpnt_sheet_base_07": "sys_cpnt_sheet_base_05",
     "ui_cpnt_sheet_base_08": "sys_cpnt_sheet_base_06",
-    "ui_cpnt_pagination_dot_01": "sys_widget_white",
-    "ui_cpnt_pagination_dot_02": "sys_cpnt_base_white_opacity50",
-    "ui_cpnt_pagination_dot_border": "sys_border_line_01",
+    "ui_cpnt_pagination_dot_01": "sys_cpnt_pagination_dot_01",
+    "ui_cpnt_pagination_dot_02": "sys_cpnt_pagination_dot_02",
+    "ui_cpnt_pagination_dot_border": "sys_border_line_02",
     "ui_63": "sys_facebook",
     "ui_64": "sys_text_white",
     "ui_cpnt_sheet_border_04": "sys_border_line_02",
     "ui_cpnt_button_fill_base_01": "sys_component_base_05",
-    "ui_cpnt_button_fill_base_hangup": "sys_component_base_red"
+    "ui_cpnt_button_fill_base_hangup": "sys_component_base_red",
+    "ui_cpnt_refund_text_status_issued": "sys_widget_orange_01",
+    "ui_cpnt_refund_text_status_refunded": "sys_widget_success_01",
+    "ui_cpnt_divider_white_01": "sys_component_base_19",
+    "ui_cpnt_timer_base_01": "sys_background_dimmed",
+    "ui_cpnt_timer_base_timeup": "sys_component_base_17"
 }

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

@@ -306,6 +306,9 @@ declare const colorSet: {
         sys_cpnt_sheet_base_05: string;
         sys_cpnt_sheet_base_06: string;
         sys_facebook: string;
+        sys_component_base_19: string;
+        sys_cpnt_pagination_dot_01: string;
+        sys_cpnt_pagination_dot_02: string;
     };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
@@ -534,6 +537,9 @@ declare const colorSet: {
         sys_cpnt_sheet_base_05: string;
         sys_cpnt_sheet_base_06: string;
         sys_facebook: string;
+        sys_component_base_19: string;
+        sys_cpnt_pagination_dot_01: string;
+        sys_cpnt_pagination_dot_02: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -1179,6 +1185,11 @@ declare const colorSet: {
         ui_cpnt_sheet_border_04: string;
         ui_cpnt_button_fill_base_01: string;
         ui_cpnt_button_fill_base_hangup: string;
+        ui_cpnt_refund_text_status_issued: string;
+        ui_cpnt_refund_text_status_refunded: string;
+        ui_cpnt_divider_white_01: string;
+        ui_cpnt_timer_base_01: string;
+        ui_cpnt_timer_base_timeup: string;
     };
 };
 export default colorSet;

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

@@ -642,4 +642,9 @@ export interface UITheme {
     ui_cpnt_sheet_border_04: string;
     ui_cpnt_button_fill_base_01: string;
     ui_cpnt_button_fill_base_hangup: string;
+    ui_cpnt_refund_text_status_issued: string;
+    ui_cpnt_refund_text_status_refunded: string;
+    ui_cpnt_divider_white_01: string;
+    ui_cpnt_timer_base_01: string;
+    ui_cpnt_timer_base_timeup: string;
 }

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

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

@@ -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.contentSheetOnAni = exports.modalOffAni = exports.modalOnAni = exports.dialogOffAni = exports.dialogOnAni = exports.buttonOffAni = exports.buttonOnAni = 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;

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 ContentSheetTransition: 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.ContentSheetTransition = 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"])));
+var templateObject_1, templateObject_2, templateObject_3;

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,7 +255,7 @@ 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  :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 theme = _a.theme, isSelected = _a.isSelected;
     return isSelected ? theme.ui_cpnt_datatable_base_selected : theme.ui_cpnt_datatable_base_default;
 }, function (_a) {
@@ -267,7 +268,7 @@ var S_AdminListItem = styled_components_1.default.div(templateObject_26 || (temp
     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"], ["\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 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/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;

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 animationStyle_1 = require("../../../common/styles/movement/animationStyle");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 // NOTE : 기획상 아직 사용하지 않는 props
@@ -77,10 +78,7 @@ var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 ||
 }, function (_a) {
     var state = _a.state;
     return (state === 'normal' ? 'pointer' : 'default');
-}, 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  );";
-}, function (_a) {
+}, animationStyle_1.buttonOnAni, 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  );";
 }, function (_a) {

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

@@ -30,6 +30,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../common/components");
 var styles_1 = require("../../../common/styles");
+var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 // NOTE : 기획상 아직 사용하지 않는 props
@@ -259,10 +260,7 @@ var primaryDisabled = (0, styled_components_1.css)(templateObject_13 || (templat
 var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_primary;
-}, 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  );";
-}, function (_a) {
+}, animationStyle_1.buttonOnAni, 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  );";
 }, function (_a) {

package/dist/src/desktop/components/TextField/TextField.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 components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
 function TextField(_a) {
@@ -195,7 +196,7 @@ var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
     var textLineType = _a.textLineType;
     return textLineType === 'auto' && auto;
 });
-var normal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n"])), function (_a) {
+var normal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_base_normal;
 }, function (_a) {
@@ -205,7 +206,7 @@ var normal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7
     if (isFocused)
         return theme.ui_cpnt_textfield_border_focus;
     return theme.ui_cpnt_textfield_border_normal;
-});
+}, transitionStyle_1.TextFieldTransition);
 var read_only = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_base_disabled;

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

@@ -30,6 +30,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../common/components");
 var styles_1 = require("../../../common/styles");
+var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 var types_1 = require("./types");
@@ -232,9 +233,8 @@ var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
-    var theme = _a.theme, isSubmitting = _a.isSubmitting;
-    return !isSubmitting &&
-        "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  );";
+    var isSubmitting = _a.isSubmitting;
+    return !isSubmitting && animationStyle_1.buttonOnAni;
 }, function (_a) {
     var theme = _a.theme, isSubmitting = _a.isSubmitting;
     return !isSubmitting &&

package/dist/src/desktop/panels/ContentSheet/ContentSheet.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var styles_1 = require("../../../common/styles");
+var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var backgroundColorTheme = {
     transparent: 'ui_cpnt_sheet_base_03',
     white: 'ui_cpnt_sheet_base_white',
@@ -100,7 +101,7 @@ var overrideStyle = (0, styled_components_1.css)(templateObject_6 || (templateOb
     var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
     return overrideBorderColorKey && theme[overrideBorderColorKey];
 });
-var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var $width = _a.$width;
     return $width;
 }, function (_a) {
@@ -136,7 +137,7 @@ var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templa
 }, function (_a) {
     var paddingLeft = _a.paddingLeft;
     return paddingLeft !== 'none' && paddingLeftStyle;
-}, overrideStyle);
+}, overrideStyle, transitionStyle_1.ContentSheetTransition);
 var S_LoadingContentSheet = (0, styled_components_1.default)(S_ContentSheet)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
 exports.default = ContentSheet;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/src/desktop/panels/DesktopBasicModal/DesktopBasicModal.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 = __importStar(require("styled-components"));
+var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
 var hybrid_1 = require("../../../hybrid");
 var components_1 = require("../../components");
 function DesktopBasicModal(_a) {
@@ -70,7 +71,7 @@ var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templa
     var theme = _a.theme;
     return theme.ui_cpnt_modal_dimmed;
 });
-var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  ", ";\n"])), function (_a) {
+var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_base;
 }, function (_a) {
@@ -91,7 +92,7 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
 }, function (_a) {
     var size = _a.size;
     return size === 'rlarge' && 'min-width: 960px;';
-});
+}, animationStyle_1.modalOnAni);
 var S_Left = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;

package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.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 = __importStar(require("styled-components"));
+var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
 function DesktopHeadlessModal(_a) {
     var body = _a.body, _b = _a.size, size = _b === void 0 ? 'rlarge' : _b, _c = _a.dimmedClickCloseMode, dimmedClickCloseMode = _c === void 0 ? 'none' : _c, _d = _a.scrollVisibleType, scrollVisibleType = _d === void 0 ? 'hidden' : _d, onClose = _a.onClose;
     var container = (0, react_1.useState)(function () {
@@ -78,7 +79,7 @@ var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templa
     var theme = _a.theme;
     return theme.ui_cpnt_modal_dimmed;
 });
-var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  left: 50%;\n  max-height: 80vh;\n  min-width: ", ";\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  left: 50%;\n  max-height: 80vh;\n  min-width: ", ";\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n"])), function (_a) {
+var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  left: 50%;\n  max-height: 80vh;\n  min-width: ", ";\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  left: 50%;\n  max-height: 80vh;\n  min-width: ", ";\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_base;
 }, function (_a) {
@@ -99,7 +100,7 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
         rlarge: '60vw'
     };
     return sizes[size];
-});
+}, animationStyle_1.modalOnAni);
 var scrollVisible = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 3px;\n  }\n\n  ::-webkit-scrollbar {\n    display: block;\n    width: 6px;\n  }\n"], ["\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 3px;\n  }\n\n  ::-webkit-scrollbar {\n    display: block;\n    width: 6px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_border;

package/dist/src/sub/DynamicLayout/DynamicLayout.js

@@ -1,4 +1,13 @@
 "use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -9,9 +18,11 @@ var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
 var mobile_1 = require("./mobile");
 function DynamicLayout(_a) {
     var device = _a.device, isPreview = _a.isPreview, sections = _a.sections, navigationHandler = _a.navigationHandler;
+    var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
+        .sort(function (a, b) { return a.order - b.order; });
     return (react_1.default.createElement(dynamicLayoutContext_1.dynamicLayoutContext.Provider, { value: { isPreview: isPreview, navigationHandler: navigationHandler } }, {
-        MOBILE: react_1.default.createElement(mobile_1.MobileWeb, { sections: sections }),
-        DESKTOP: react_1.default.createElement(desktop_1.DesktopWeb, { sections: sections })
+        MOBILE: react_1.default.createElement(mobile_1.MobileWeb, { sections: filteredSortedSection }),
+        DESKTOP: react_1.default.createElement(desktop_1.DesktopWeb, { sections: filteredSortedSection })
     }[device]));
 }
 exports.default = DynamicLayout;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/styles/colorSet/PaletteColor_Dark.json

@@ -224,5 +224,8 @@
     "sys_cpnt_sheet_base_04": "darkblue500",
     "sys_cpnt_sheet_base_05": "grey950",
     "sys_cpnt_sheet_base_06": "darkgreen500",
-    "sys_facebook": "facebookblue"
+    "sys_facebook": "facebookblue",
+    "sys_component_base_19": "white/opacity65",
+    "sys_cpnt_pagination_dot_01": "white",
+    "sys_cpnt_pagination_dot_02": "white/opacity50"
 }

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/styles/colorSet/PaletteColor_light.json

@@ -224,5 +224,8 @@
     "sys_cpnt_sheet_base_04": "blue500",
     "sys_cpnt_sheet_base_05": "grey950",
     "sys_cpnt_sheet_base_06": "green500",
-    "sys_facebook": "facebookblue"
+    "sys_facebook": "facebookblue",
+    "sys_component_base_19": "white/opacity65",
+    "sys_cpnt_pagination_dot_01": "grey400",
+    "sys_cpnt_pagination_dot_02": "white/opacity50"
 }

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/styles/colorSet/UIColor.json

@@ -634,10 +634,17 @@
     "ui_cpnt_sheet_base_06": "sys_cpnt_sheet_base_04",
     "ui_cpnt_sheet_base_07": "sys_cpnt_sheet_base_05",
     "ui_cpnt_sheet_base_08": "sys_cpnt_sheet_base_06",
-    "ui_cpnt_pagination_dot_01": "sys_widget_white",
-    "ui_cpnt_pagination_dot_02": "sys_cpnt_base_white_opacity50",
-    "ui_cpnt_pagination_dot_border": "sys_border_line_01",
+    "ui_cpnt_pagination_dot_01": "sys_cpnt_pagination_dot_01",
+    "ui_cpnt_pagination_dot_02": "sys_cpnt_pagination_dot_02",
+    "ui_cpnt_pagination_dot_border": "sys_border_line_02",
     "ui_63": "sys_facebook",
     "ui_64": "sys_text_white",
-    "ui_cpnt_sheet_border_04": "sys_border_line_02"
+    "ui_cpnt_sheet_border_04": "sys_border_line_02",
+    "ui_cpnt_button_fill_base_01": "sys_component_base_05",
+    "ui_cpnt_button_fill_base_hangup": "sys_component_base_red",
+    "ui_cpnt_refund_text_status_issued": "sys_widget_orange_01",
+    "ui_cpnt_refund_text_status_refunded": "sys_widget_success_01",
+    "ui_cpnt_divider_white_01": "sys_component_base_19",
+    "ui_cpnt_timer_base_01": "sys_background_dimmed",
+    "ui_cpnt_timer_base_timeup": "sys_component_base_17"
 }