pds-dev-kit-web-test 0.0.27 → 0.0.28

package/dist/src/mobile/components/LottieReactionButton/LottieReactionButton.js

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

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

@@ -30,7 +30,6 @@ 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 transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 // NOTE : 기획상 아직 사용하지 않는 props
@@ -188,12 +187,12 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_5 || (templateObj
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_disabled;
 });
-var fill = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n"])), function (_a) {
+var fill = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_primary;
-}, transitionStyle_1.ButtonTransition, function (_a) {
+}, function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_button_fill_on_base_pressed;
+    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) {
     var state = _a.state;
     return state === 'disabled' && fillDisabled;
@@ -231,13 +230,13 @@ var lineDisabled = (0, styled_components_1.css)(templateObject_11 || (templateOb
         ? theme.ui_cpnt_button_line_border_darktheme_disabled
         : theme.ui_cpnt_button_line_border_disabled;
 });
-var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:active:enabled {\n    ", "\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n  ", "\n\n  ", ";\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:active:enabled {\n    ", "\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n  ", "\n\n  ", ";\n  ", "\n"])), function (_a) {
+var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
     var theme = _a.theme;
     return "background-color: " + theme.ui_cpnt_button_line_base_pressed + ";";
-}, transitionStyle_1.ButtonTransition, function (_a) {
+}, function (_a) {
     var colorTheme = _a.colorTheme;
     return colorTheme && { none: none, line1: line1, line2: line2, line3: line3 }[colorTheme];
 }, function (_a) {
@@ -248,12 +247,12 @@ var primaryDisabled = (0, styled_components_1.css)(templateObject_13 || (templat
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_disabled;
 });
-var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n"])), function (_a) {
+var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_primary;
-}, transitionStyle_1.ButtonTransition, function (_a) {
+}, function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_button_fill_on_base_pressed;
+    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) {
     var state = _a.state;
     return state === 'disabled' && primaryDisabled;
@@ -262,12 +261,12 @@ var secondaryDisabled = (0, styled_components_1.css)(templateObject_15 || (templ
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
 });
-var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n"])), function (_a) {
+var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
-}, transitionStyle_1.ButtonTransition, function (_a) {
+}, function (_a) {
     var theme = _a.theme;
-    return theme.ui_transition_test_main_button_secondary_active;
+    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) {
     var state = _a.state;
     return state === 'disabled' && secondaryDisabled;

package/dist/src/mobile/components/MobileAlertDialog/MobileAlertDialog.js

@@ -29,7 +29,6 @@ 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");
@@ -90,7 +89,7 @@ var S_ModalOverlay = styled_components_1.default.div(templateObject_2 || (templa
     var theme = _a.theme;
     return theme.ui_cpnt_modal_dimmed;
 });
-var S_ModalWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __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  max-height: 720px;\n  width: calc(100% - 80px);\n  max-width: 512px;\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  max-height: 720px;\n  width: calc(100% - 80px);\n  max-width: 512px;\n  ", "\n"])), function (_a) {
+var S_ModalWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __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  max-height: 720px;\n  width: calc(100% - 80px);\n  max-width: 512px;\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  max-height: 720px;\n  width: calc(100% - 80px);\n  max-width: 512px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_alertdialog_base;
 }, function (_a) {
@@ -99,7 +98,7 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_3 || (templa
 }, function (_a) {
     var theme = _a.theme;
     return theme.boxShadow.elevation5;
-}, animationStyle_1.dialogOnAni);
+});
 var S_Footer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var btnStack = _a.btnStack;
     return (btnStack === 'side' ? 'row' : 'column-reverse');

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

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
-var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
 var HINT = 'HINT_VALUE';
 function Select(_a) {
@@ -109,11 +108,7 @@ var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templa
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });
-var normal_transition = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  &:active {\n    background-color: ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_transition_test_text_field_active;
-});
-var S_Select = styled_components_1.default.select(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  appearance: none;\n  background-color: ", ";\n  border: 2px solid ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 100%;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-all;\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n    opacity: 1;\n  }\n\n  :focus {\n    border: 2px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  appearance: none;\n  background-color: ", ";\n  border: 2px solid ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 100%;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-all;\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n    opacity: 1;\n  }\n\n  :focus {\n    border: 2px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var S_Select = styled_components_1.default.select(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  appearance: none;\n  background-color: ", ";\n  border: 2px solid ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 100%;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-all;\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n    opacity: 1;\n  }\n\n  :focus {\n    border: 2px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n"], ["\n  appearance: none;\n  background-color: ", ";\n  border: 2px solid ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 100%;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-all;\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n    opacity: 1;\n  }\n\n  :focus {\n    border: 2px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_select_base_normal;
 }, function (_a) {
@@ -154,9 +149,6 @@ var S_Select = styled_components_1.default.select(templateObject_9 || (templateO
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     return colorTheme === 'dark' && dark;
-}, transitionStyle_1.TextFieldTransition, function (_a) {
-    var state = _a.state;
-    return state === 'normal' && normal_transition;
 });
 exports.default = Select;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -50,7 +50,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
-var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var TextLabel_1 = require("../TextLabel");
 var textStyle = {
     rlarge: 'body1Bold',
@@ -82,7 +81,7 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])));
 var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])));
-var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"])), transitionStyle_1.ButtonTransition, function (_a) {
+var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
     return colorTheme === 'white'
         ? theme.ui_cpnt_button_white_base_pressed

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

@@ -27,7 +27,6 @@ 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) {
@@ -271,11 +270,7 @@ var transparent_disabled = (0, styled_components_1.css)(templateObject_15 || (te
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_border_colortheme_transparent_disabled;
 });
-var normal_transition = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  &:active {\n    background-color: ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_transition_test_text_field_active;
-});
-var S_TextFieldWrapper = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", ";\n  ", "\n"], ["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", ";\n  ", "\n"])), function (_a) {
+var S_TextFieldWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", "\n"], ["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
@@ -303,9 +298,6 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_17 || (t
             }
         }
     }
-}, transitionStyle_1.TextFieldTransition, function (_a) {
-    var state = _a.state;
-    return state === 'normal' && normal_transition;
 }, function (_a) {
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
@@ -313,8 +305,8 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_17 || (t
     var customWidth = _a.customWidth;
     return customWidth && "width: " + customWidth + ";";
 });
-var S_IconBox = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var S_Error = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"])), function (_a) {
+var S_IconBox = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_Error = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
     switch (colorTheme) {
         case 'none': {
@@ -339,4 +331,4 @@ var S_Error = styled_components_1.default.div(templateObject_19 || (templateObje
     return theme.spacing.spacingA;
 });
 exports.default = TextField;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;

package/dist/src/mobile/components/UploadIconButton/UploadIconButton.js

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
-var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
 var types_1 = require("./types");
 function UploadIconButton(_a) {
@@ -61,14 +60,14 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
         ? ''
         : theme.ui_cpnt_button_fill_base_disabled;
 });
-var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
+var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:active:not([disabled]) {\n    background-image: ", ";\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n\n  &:active:not([disabled]) {\n    background-image: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
     return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
-}, transitionStyle_1.ButtonTransition, function (_a) {
+}, function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
     return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
         ? ''
-        : theme.ui_cpnt_button_fill_on_base_pressed;
+        : "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) {
     var isDisabled = _a.isDisabled;
     return isDisabled && fillDisabled;
@@ -88,7 +87,7 @@ var lineDisabled = (0, styled_components_1.css)(templateObject_5 || (templateObj
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_default;
 });
-var line = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  ", "\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  ", "\n\n  ", ";\n"])), function (_a) {
+var line = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
@@ -107,7 +106,7 @@ var line = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_pressed;
-}, transitionStyle_1.ButtonTransition, function (_a) {
+}, function (_a) {
     var isDisabled = _a.isDisabled;
     return isDisabled && lineDisabled;
 });

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

@@ -30,7 +30,6 @@ 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 transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 var types_1 = require("./types");
@@ -158,12 +157,13 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_5 || (templateObj
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_disabled;
 });
-var fill = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n"])), function (_a) {
+var fill = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n\n  &:active:not([disabled]) {\n    background-image: ", ";\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n\n  &:active:not([disabled]) {\n    background-image: ", ";\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_primary;
-}, transitionStyle_1.ButtonTransition, function (_a) {
+}, function (_a) {
     var theme = _a.theme, isSubmitting = _a.isSubmitting;
-    return !isSubmitting && theme.ui_cpnt_button_fill_on_base_pressed;
+    return !isSubmitting &&
+        "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) {
     var disabled = _a.disabled;
     return disabled && fillDisabled;
@@ -201,13 +201,13 @@ var lineDisabled = (0, styled_components_1.css)(templateObject_11 || (templateOb
         ? theme.ui_cpnt_button_line_border_darktheme_disabled
         : theme.ui_cpnt_button_line_border_disabled;
 });
-var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n  ", "\n\n  ", ";\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n  ", "\n\n  ", ";\n  ", "\n"])), function (_a) {
+var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  ", ";\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  ", ";\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
     var theme = _a.theme, isSubmitting = _a.isSubmitting;
     return !isSubmitting && theme.ui_cpnt_button_line_base_pressed;
-}, transitionStyle_1.ButtonTransition, function (_a) {
+}, function (_a) {
     var colorTheme = _a.colorTheme;
     return colorTheme && { none: none, line1: line1, line2: line2, line3: line3 }[colorTheme];
 }, function (_a) {
@@ -218,12 +218,13 @@ var primaryDisabled = (0, styled_components_1.css)(templateObject_13 || (templat
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_disabled;
 });
-var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n"])), function (_a) {
+var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n\n  &:active:not([disabled]) {\n    ", "\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n\n  &:active:not([disabled]) {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_primary;
-}, transitionStyle_1.ButtonTransition, function (_a) {
+}, function (_a) {
     var theme = _a.theme, isSubmitting = _a.isSubmitting;
-    return !isSubmitting && theme.ui_cpnt_button_fill_on_base_pressed;
+    return !isSubmitting &&
+        "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) {
     var disabled = _a.disabled;
     return disabled && primaryDisabled;
@@ -232,12 +233,13 @@ var secondaryDisabled = (0, styled_components_1.css)(templateObject_15 || (templ
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
 });
-var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n"])), function (_a) {
+var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n\n  &:active:not([disabled]) {\n    ", "\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n\n  &:active:not([disabled]) {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
-}, transitionStyle_1.ButtonTransition, function (_a) {
+}, function (_a) {
     var theme = _a.theme, isSubmitting = _a.isSubmitting;
-    return !isSubmitting && theme.ui_transition_test_main_button_secondary_active;
+    return !isSubmitting &&
+        "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) {
     var disabled = _a.disabled;
     return disabled && secondaryDisabled;

package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
-var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var TextLabel_1 = require("../TextLabel");
 var textStyle = {
     rlarge: 'body1Bold',
@@ -62,10 +61,10 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])));
 var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])));
-var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  ", "\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  ", "\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
-}, transitionStyle_1.ButtonTransition, function (_a) {
+}, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_pressed;
 }, function (_a) {

package/dist/src/mobile/panels/MobileBasicModal/MobileBasicModal.js

@@ -29,7 +29,6 @@ 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 MobileBasicModal(_a) {
@@ -70,7 +69,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  left: 50%;\n  max-width: 560px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: calc(100% - 48px);\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  left: 50%;\n  max-width: 560px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: calc(100% - 48px);\n\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  left: 50%;\n  max-width: 560px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: calc(100% - 48px);\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  left: 50%;\n  max-width: 560px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: calc(100% - 48px);\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_base;
 }, function (_a) {
@@ -79,7 +78,7 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
 }, function (_a) {
     var theme = _a.theme;
     return theme.boxShadow.elevation4;
-}, animationStyle_1.modalOnAni);
+});
 var S_Header = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { DynamicLayoutProps } from './types';
-declare function DynamicLayout({ device, mode, isPreview, sections, navigationHandler, scrollDownTargetSectionId, onClickEditSection }: 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,8 +1,4 @@
 "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;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -14,25 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 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)
@@ -57,18 +34,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var react_1 = __importDefault(require("react"));
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
 var sections_1 = require("./sections");
 function DynamicLayout(_a) {
-    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, navigationHandler = _a.navigationHandler, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, onClickEditSection = _a.onClickEditSection;
+    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: { device: device, mode: mode, isPreview: isPreview, navigationHandler: navigationHandler } },
-        mode === 'EDIT' && onClickEditSection && (react_1.default.createElement(EditModeSections, { scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })),
-        mode !== 'EDIT' &&
-            filteredSortedSection.map(function (section) { return react_1.default.createElement(SectionMatcher, __assign({ key: section.id }, section)); })));
+    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, []);
@@ -89,39 +62,3 @@ function SectionMatcher(_a) {
     }
 }
 exports.default = DynamicLayout;
-function EditModeSections(_a) {
-    var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, onClickEditSection = _a.onClickEditSection;
-    return (react_1.default.createElement(react_1.default.Fragment, null, filteredSortedSection.map(function (section) { return (react_1.default.createElement(SectionBox, { scrollIntoThisSection: section.id === scrollDownTargetSectionId, key: section.id, onClick: function () { return onClickEditSection(section); } },
-        react_1.default.createElement(SectionMatcher, __assign({ key: section.id }, section)))); })));
-}
-function SectionBox(_a) {
-    var scrollIntoThisSection = _a.scrollIntoThisSection, children = _a.children, onClick = _a.onClick;
-    var _b = (0, react_1.useState)(false), isHover = _b[0], setHover = _b[1];
-    var sectionRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(function () {
-        var _a;
-        if (!sectionRef) {
-            return;
-        }
-        if (scrollIntoThisSection) {
-            (_a = sectionRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
-        }
-    }, [scrollIntoThisSection]);
-    var onMouseEnter = function () {
-        setHover(true);
-    };
-    var onMouseLeave = function () {
-        setHover(false);
-    };
-    return (react_1.default.createElement(S_SectionBox, { ref: sectionRef, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
-        isHover && (react_1.default.createElement(DimmedEditOverlay, null,
-            react_1.default.createElement(S_EditButton, null, "\uC774 Section \uC218\uC815\uD558\uAE30"))),
-        children));
-}
-var S_EditButton = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: #ddf68c;\n  font-weight: bold;\n  padding: ", ";\n"], ["\n  background-color: #ddf68c;\n  font-weight: bold;\n  padding: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
-});
-var S_SectionBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-var DimmedEditOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  background-color: #f7f7f7c4;\n  z-index: 10;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: absolute;\n  background-color: #f7f7f7c4;\n  z-index: 10;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/sub/DynamicLayout/sections/ContentsCarouselSection/templates/TemplateA/desktop/D_TemplateA.js

@@ -96,7 +96,7 @@ var S_Wrapper = styled_components_1.default.div(templateObject_1 || (templateObj
     var hasNothing = _a.hasNothing;
     return (hasNothing ? 0 : '160px');
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"])));
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"])));
 var S_SectionTitleBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;

package/dist/src/sub/DynamicLayout/sections/ContentsCarouselSection/templates/TemplateB/desktop/D_TemplateB.js

@@ -96,7 +96,7 @@ var S_Wrapper = styled_components_1.default.div(templateObject_1 || (templateObj
     var hasNothing = _a.hasNothing;
     return (hasNothing ? 0 : '160px');
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"])));
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"])));
 var S_SectionTitleBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;

package/dist/src/sub/DynamicLayout/sections/ContentsSection/templates/TemplateA/desktop/D_TemplateA.js

@@ -67,7 +67,7 @@ var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (tem
     var hasNothing = _a.hasNothing;
     return (hasNothing ? 0 : '160px');
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"])));
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"])));
 var S_ImageBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-right: ", ";\n"], ["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingI;

package/dist/src/sub/DynamicLayout/sections/ContentsSection/templates/TemplateB/desktop/D_TemplateB.js

@@ -67,7 +67,7 @@ var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (tem
     var hasNothing = _a.hasNothing;
     return (hasNothing ? 0 : '160px');
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"])));
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"])));
 var S_ImageBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-left: ", ";\n"], ["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-left: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingI;