pds-dev-kit-web-test 0.0.20 → 0.0.22

package/dist/src/common/assets/icons/fill/More.js

@@ -28,7 +28,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var More = function (_a) {
     var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
-    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 20 20" }, rest),
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
         react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M6.256,10.413 C7.132,10.413 7.843,11.123 7.843,12 C7.843,12.877 7.132,13.587 6.256,13.587 C5.379,13.587 4.668,12.877 4.668,12 C4.668,11.123 5.379,10.413 6.256,10.413 Z M12.0006,10.413 C12.8766,10.413 13.5876,11.123 13.5876,12 C13.5876,12.877 12.8766,13.587 12.0006,13.587 C11.1236,13.587 10.4126,12.877 10.4126,12 C10.4126,11.123 11.1236,10.413 12.0006,10.413 Z M17.7452,10.413 C18.6212,10.413 19.3322,11.123 19.3322,12 C19.3322,12.877 18.6212,13.587 17.7452,13.587 C16.8682,13.587 16.1572,12.877 16.1572,12 C16.1572,11.123 16.8682,10.413 17.7452,10.413 Z" })));
 };
 exports.default = More;

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

@@ -227,5 +227,6 @@
     "sys_facebook": "facebookblue",
     "sys_component_base_19": "white/opacity65",
     "sys_cpnt_pagination_dot_01": "white",
-    "sys_cpnt_pagination_dot_02": "white/opacity50"
+    "sys_cpnt_pagination_dot_02": "white/opacity50",
+    "sys_component_base_white_opacity50": "white/opacity50"
 }

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

@@ -227,5 +227,6 @@
     "sys_facebook": "facebookblue",
     "sys_component_base_19": "white/opacity65",
     "sys_cpnt_pagination_dot_01": "grey400",
-    "sys_cpnt_pagination_dot_02": "white/opacity50"
+    "sys_cpnt_pagination_dot_02": "white/opacity50",
+    "sys_component_base_white_opacity50": "white/opacity50"
 }

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

@@ -646,5 +646,7 @@
     "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"
+    "ui_cpnt_timer_base_timeup": "sys_component_base_17",
+    "ui_66": "sys_component_base_black_opacity50",
+    "ui_67": "sys_component_base_white_opacity50"
 }

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

@@ -309,6 +309,7 @@ declare const colorSet: {
         sys_component_base_19: string;
         sys_cpnt_pagination_dot_01: string;
         sys_cpnt_pagination_dot_02: string;
+        sys_component_base_white_opacity50: string;
     };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
@@ -540,6 +541,7 @@ declare const colorSet: {
         sys_component_base_19: string;
         sys_cpnt_pagination_dot_01: string;
         sys_cpnt_pagination_dot_02: string;
+        sys_component_base_white_opacity50: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -1190,6 +1192,8 @@ declare const colorSet: {
         ui_cpnt_divider_white_01: string;
         ui_cpnt_timer_base_01: string;
         ui_cpnt_timer_base_timeup: string;
+        ui_66: string;
+        ui_67: string;
     };
 };
 export default colorSet;

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

@@ -647,4 +647,6 @@ export interface UITheme {
     ui_cpnt_divider_white_01: string;
     ui_cpnt_timer_base_01: string;
     ui_cpnt_timer_base_timeup: string;
+    ui_66: string;
+    ui_67: 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/DynamicDesktopNavBar/components/ContextMenuNavs/ContextMenuItemNav.js

@@ -22,6 +22,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var DisplayOnlyMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/DisplayOnlyMenuItemNav"));
 var InternalLinkMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/InternalLinkMenuItemNav"));
+var PageMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/PageMenuItemNav"));
 var PAppMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/PAppMenuItemNav"));
 var WebMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/WebMenuItemNav"));
 function ContextMenuItemNavBox(_a) {
@@ -30,7 +31,8 @@ function ContextMenuItemNavBox(_a) {
         menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), isContextMenu: true })),
         menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { openNewTab: true, isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) })),
         menu.menuItemType === 'INTERNAL_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(InternalLinkMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) })),
-        menu.menuItemType === 'DISPLAY_ONLY' && (react_1.default.createElement(DisplayOnlyMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }) }))));
+        menu.menuItemType === 'DISPLAY_ONLY' && (react_1.default.createElement(DisplayOnlyMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }) })),
+        menu.menuItemType === 'NAV_PAGE' && menu.slug && (react_1.default.createElement(PageMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { slug: menu.slug }) }))));
 }
 var S_ContextMenuItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;

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.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { DynamicLayoutProps } from './types';
-declare function DynamicLayout({ device, isPreview, sections, navigationHandler }: DynamicLayoutProps): JSX.Element;
+declare function DynamicLayout({ device, mode, isPreview, sections, navigationHandler }: DynamicLayoutProps): JSX.Element;
 export default DynamicLayout;

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

@@ -1,4 +1,26 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 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)) {
@@ -13,16 +35,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var desktop_1 = require("./desktop");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
-var mobile_1 = require("./mobile");
+var sections_1 = require("./sections");
 function DynamicLayout(_a) {
-    var device = _a.device, isPreview = _a.isPreview, sections = _a.sections, navigationHandler = _a.navigationHandler;
+    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, 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: filteredSortedSection }),
-        DESKTOP: react_1.default.createElement(desktop_1.DesktopWeb, { sections: filteredSortedSection })
-    }[device]));
+    return (react_1.default.createElement(dynamicLayoutContext_1.dynamicLayoutContext.Provider, { value: { device: device, mode: mode, isPreview: isPreview, navigationHandler: navigationHandler } }, filteredSortedSection.map(function (section) { return (react_1.default.createElement(SectionMatcher, __assign({ key: section.id }, section))); })));
+}
+function SectionMatcher(_a) {
+    var props = __rest(_a, []);
+    var schema = props.manifest.schema;
+    switch (schema) {
+        case 'BASE_INTRO':
+            return react_1.default.createElement(sections_1.IntroSection, __assign({}, props));
+        case 'BASE_CONTENTS':
+            return react_1.default.createElement(sections_1.ContentsSection, __assign({}, props));
+        case 'BASE_CONTENTS_CAROUSEL':
+            return react_1.default.createElement(sections_1.ContentsCarouselSection, __assign({}, props));
+        case 'BASE_FOOTER':
+            return react_1.default.createElement(sections_1.FooterSection, __assign({}, props));
+        case 'BASE_INFO_BOX':
+            return react_1.default.createElement(sections_1.InfoBoxSection, __assign({}, props));
+        default:
+            return react_1.default.createElement(react_1.default.Fragment, null);
+    }
 }
 exports.default = DynamicLayout;

package/dist/src/sub/DynamicLayout/components/Section/Section.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ISection } from '../../types';
+declare function Section({ children, ...props }: ISection & {
+    children?: React.ReactNode;
+}): JSX.Element;
+export default Section;