pds-dev-kit-web-test 0.0.24 → 0.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +9 -5
  2. package/dist/src/common/styles/colorSet/PaletteColor_light.json +9 -5
  3. package/dist/src/common/styles/colorSet/SemanticColor.json +7 -1
  4. package/dist/src/common/styles/colorSet/UIColor.json +6 -2
  5. package/dist/src/common/styles/colorSet/index.d.ts +255 -237
  6. package/dist/src/common/styles/colorSet/index.js +3 -3
  7. package/dist/src/common/styles/colorSet/ui-type.d.ts +4 -0
  8. package/dist/src/common/styles/movement/animationStyle.d.ts +0 -3
  9. package/dist/src/common/styles/movement/animationStyle.js +6 -15
  10. package/dist/src/common/styles/movement/keyframes.js +14 -14
  11. package/dist/src/common/styles/movement/transitionStyle.d.ts +1 -1
  12. package/dist/src/common/styles/movement/transitionStyle.js +3 -3
  13. package/dist/src/desktop/components/AdminListItem/AdminListItem.js +2 -2
  14. package/dist/src/desktop/components/DesktopAlertDialog/DesktopAlertDialog.js +1 -1
  15. package/dist/src/desktop/components/Dropdown/Dropdown.js +14 -3
  16. package/dist/src/desktop/components/EditApplyTextField/EditApplyTextField.js +14 -4
  17. package/dist/src/desktop/components/FloatingActionButton/FloatingActionButton.js +7 -4
  18. package/dist/src/desktop/components/IconButton/IconButton.js +7 -6
  19. package/dist/src/desktop/components/LottieReactionButton/LottieReactionButton.js +4 -3
  20. package/dist/src/desktop/components/MainButton/MainButton.js +17 -14
  21. package/dist/src/desktop/components/ReactionButton/ReactionButton.js +2 -1
  22. package/dist/src/desktop/components/Select/Select.js +13 -2
  23. package/dist/src/desktop/components/TextButton/TextButton.js +3 -2
  24. package/dist/src/desktop/components/TextField/TextField.js +14 -4
  25. package/dist/src/desktop/components/UploadIconButton/UploadIconButton.js +7 -6
  26. package/dist/src/desktop/components/UploadMainButton/UploadMainButton.js +16 -21
  27. package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js +3 -2
  28. package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.js +4 -6
  29. package/dist/src/desktop/layout/LayoutWF/Containers/PageMenuContainer/variation/PageMenu.js +2 -5
  30. package/dist/src/desktop/layout/LayoutWF/ContainersBox/ContainersBox.js +2 -2
  31. package/dist/src/desktop/layout/LayoutWF/LayoutWF.js +1 -1
  32. package/dist/src/desktop/panels/ContentSheet/ContentSheet.js +2 -3
  33. package/dist/src/mobile/components/Dropdown/Dropdown.js +11 -3
  34. package/dist/src/mobile/components/FloatingActionButton/FloatingActionButton.js +4 -3
  35. package/dist/src/mobile/components/IconButton/IconButton.js +6 -5
  36. package/dist/src/mobile/components/LottieReactionButton/LottieReactionButton.js +3 -2
  37. package/dist/src/mobile/components/MainButton/MainButton.js +12 -11
  38. package/dist/src/mobile/components/MobileAlertDialog/MobileAlertDialog.js +3 -2
  39. package/dist/src/mobile/components/Select/Select.js +10 -2
  40. package/dist/src/mobile/components/TextButton/TextButton.js +2 -1
  41. package/dist/src/mobile/components/TextField/TextField.js +12 -4
  42. package/dist/src/mobile/components/UploadIconButton/UploadIconButton.js +6 -5
  43. package/dist/src/mobile/components/UploadMainButton/UploadMainButton.js +12 -14
  44. package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js +3 -2
  45. package/dist/src/mobile/panels/MobileBasicModal/MobileBasicModal.js +3 -2
  46. package/dist/src/sub/DynamicLayout/components/YouTubeIframe/YouTubeIframe.js +7 -5
  47. package/package.json +1 -1
  48. package/release-note.md +3 -6
package/dist/src/desktop/components/TextField/TextField.js CHANGED
@@ -271,7 +271,14 @@ var transparent_disabled = (0, styled_components_1.css)(templateObject_15 || (te
271
271
  var theme = _a.theme;
272
272
  return theme.ui_cpnt_textfield_border_colortheme_transparent_disabled;
273
273
  });
274
- 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 cursor: ", ";\n display: flex;\n ", ";\n ", ";\n ", ";\n ", "\n"], ["\n align-items: center;\n border-radius: 14px;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n ", ";\n ", ";\n ", ";\n ", "\n"])), function (_a) {
274
+ var normal_transition = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"], ["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"])), function (_a) {
275
+ var theme = _a.theme;
276
+ return theme.ui_transition_test_text_field_hover;
277
+ }, function (_a) {
278
+ var theme = _a.theme;
279
+ return theme.ui_transition_test_text_field_active;
280
+ });
281
+ 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 cursor: ", ";\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 cursor: ", ";\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n"])), function (_a) {
275
282
  var state = _a.state;
276
283
  return (state === 'disabled' ? 'not-allowed' : 'text');
277
284
  }, function (_a) {
@@ -302,6 +309,9 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_16 || (t
302
309
  }
303
310
  }
304
311
  }
312
+ }, transitionStyle_1.TextFieldTransition, function (_a) {
313
+ var state = _a.state;
314
+ return state === 'normal' && normal_transition;
305
315
  }, function (_a) {
306
316
  var responsiveMode = _a.responsiveMode;
307
317
  return responsiveMode === 'use' && 'width: 100%';
@@ -309,8 +319,8 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_16 || (t
309
319
  var customWidth = _a.customWidth;
310
320
  return customWidth && "width: " + customWidth + ";";
311
321
  });
312
- var S_IconBox = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
313
- 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) {
322
+ var S_IconBox = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
323
+ 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) {
314
324
  var theme = _a.theme, colorTheme = _a.colorTheme;
315
325
  switch (colorTheme) {
316
326
  case 'none': {
@@ -335,4 +345,4 @@ var S_Error = styled_components_1.default.div(templateObject_18 || (templateObje
335
345
  return theme.spacing.spacingA;
336
346
  });
337
347
  exports.default = TextField;
338
- 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;
348
+ 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;
package/dist/src/desktop/components/UploadIconButton/UploadIconButton.js CHANGED
@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
+ var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
31
32
  var hybrid_1 = require("../../../hybrid");
32
33
  var types_1 = require("./types");
33
34
  function UploadIconButton(_a) {
@@ -60,19 +61,19 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
60
61
  ? ''
61
62
  : theme.ui_cpnt_button_fill_base_disabled;
62
63
  });
63
- var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n\n &:hover:not([disabled]) {\n ", "\n }\n\n &:active:not([disabled]) {\n background-image: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n\n &:hover:not([disabled]) {\n ", "\n }\n\n &:active:not([disabled]) {\n background-image: ", ";\n }\n\n ", ";\n"])), function (_a) {
64
+ var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n ", "\n }\n\n &:hover:not([disabled])::before {\n background-color: ", ";\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 &:hover:not([disabled])::before {\n background-color: ", ";\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
64
65
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
65
66
  return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
66
- }, function (_a) {
67
+ }, transitionStyle_1.ButtonTransition, function (_a) {
67
68
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
68
69
  return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
69
70
  ? ''
70
- : "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 );";
71
+ : theme.ui_cpnt_button_fill_on_base_hover;
71
72
  }, function (_a) {
72
73
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
73
74
  return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
74
75
  ? ''
75
- : "linear-gradient(\n to top,\n " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n " + theme.ui_cpnt_button_fill_on_base_pressed + "\n )";
76
+ : theme.ui_cpnt_button_fill_on_base_pressed;
76
77
  }, function (_a) {
77
78
  var isDisabled = _a.isDisabled;
78
79
  return isDisabled && fillDisabled;
@@ -92,7 +93,7 @@ var lineDisabled = (0, styled_components_1.css)(templateObject_5 || (templateObj
92
93
  var theme = _a.theme;
93
94
  return theme.ui_cpnt_button_line_base_default;
94
95
  });
95
- var line = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n\n ", ";\n\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n border-color: ", ";\n\n ", ";\n\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
96
+ var line = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n\n ", ";\n\n &:hover:not([disabled]) {\n background-color: ", ";\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 &:hover:not([disabled]) {\n background-color: ", ";\n }\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n ", "\n\n ", ";\n"])), function (_a) {
96
97
  var theme = _a.theme;
97
98
  return theme.ui_cpnt_button_line_base_default;
98
99
  }, function (_a) {
@@ -114,7 +115,7 @@ var line = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
114
115
  }, function (_a) {
115
116
  var theme = _a.theme;
116
117
  return theme.ui_cpnt_button_line_base_pressed;
117
- }, function (_a) {
118
+ }, transitionStyle_1.ButtonTransition, function (_a) {
118
119
  var isDisabled = _a.isDisabled;
119
120
  return isDisabled && lineDisabled;
120
121
  });
package/dist/src/desktop/components/UploadMainButton/UploadMainButton.js CHANGED
@@ -30,7 +30,7 @@ var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  var components_1 = require("../../../common/components");
32
32
  var styles_1 = require("../../../common/styles");
33
- var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
33
+ var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
34
34
  var hybrid_1 = require("../../../hybrid");
35
35
  var TextLabel_1 = require("../TextLabel");
36
36
  var types_1 = require("./types");
@@ -158,17 +158,15 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_5 || (templateObj
158
158
  var theme = _a.theme;
159
159
  return theme.ui_cpnt_button_fill_base_disabled;
160
160
  });
161
- var fill = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n\n &:hover:not([disabled]) {\n background-image: ", ";\n }\n\n &:active:not([disabled]) {\n background-image: ", ";\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n\n &:hover:not([disabled]) {\n background-image: ", ";\n }\n\n &:active:not([disabled]) {\n background-image: ", ";\n }\n\n ", "\n"])), function (_a) {
161
+ 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 &:hover:not([disabled])::before {\n background-color: ", ";\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 &:hover:not([disabled])::before {\n background-color: ", ";\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", "\n"])), function (_a) {
162
162
  var theme = _a.theme;
163
163
  return theme.ui_cpnt_button_fill_base_primary;
164
- }, function (_a) {
164
+ }, transitionStyle_1.ButtonTransition, function (_a) {
165
165
  var theme = _a.theme, isSubmitting = _a.isSubmitting;
166
- return !isSubmitting &&
167
- "linear-gradient(\n to top,\n " + theme.ui_cpnt_button_fill_on_base_hover + ",\n " + theme.ui_cpnt_button_fill_on_base_hover + "\n )";
166
+ return !isSubmitting && theme.ui_cpnt_button_fill_on_base_hover;
168
167
  }, function (_a) {
169
168
  var theme = _a.theme, isSubmitting = _a.isSubmitting;
170
- return !isSubmitting &&
171
- "linear-gradient(\n to top,\n " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n " + theme.ui_cpnt_button_fill_on_base_pressed + "\n )";
169
+ return !isSubmitting && theme.ui_cpnt_button_fill_on_base_pressed;
172
170
  }, function (_a) {
173
171
  var disabled = _a.disabled;
174
172
  return disabled && fillDisabled;
@@ -209,7 +207,7 @@ var lineDisabled = (0, styled_components_1.css)(templateObject_11 || (templateOb
209
207
  ? theme.ui_cpnt_button_line_border_darktheme_disabled
210
208
  : theme.ui_cpnt_button_line_border_disabled;
211
209
  });
212
- var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n ", ";\n ", "\n"], ["\n background-color: ", ";\n\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n ", ";\n ", "\n"])), function (_a) {
210
+ var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n\n &:hover:not([disabled]) {\n background-color: ", ";\n }\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 &:hover:not([disabled]) {\n background-color: ", ";\n }\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) {
213
211
  var theme = _a.theme;
214
212
  return theme.ui_cpnt_button_line_base_default;
215
213
  }, function (_a) {
@@ -218,7 +216,7 @@ var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12
218
216
  }, function (_a) {
219
217
  var theme = _a.theme, isSubmitting = _a.isSubmitting;
220
218
  return !isSubmitting && theme.ui_cpnt_button_line_base_pressed;
221
- }, function (_a) {
219
+ }, transitionStyle_1.ButtonTransition, function (_a) {
222
220
  var colorTheme = _a.colorTheme;
223
221
  return colorTheme && { none: none, line1: line1, line2: line2, line3: line3 }[colorTheme];
224
222
  }, function (_a) {
@@ -229,16 +227,15 @@ var primaryDisabled = (0, styled_components_1.css)(templateObject_13 || (templat
229
227
  var theme = _a.theme;
230
228
  return theme.ui_cpnt_button_fill_base_disabled;
231
229
  });
232
- var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n\n &:hover:not([disabled]) {\n ", "\n }\n\n &:active:not([disabled]) {\n ", "\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n\n &:hover:not([disabled]) {\n ", "\n }\n\n &:active:not([disabled]) {\n ", "\n }\n\n ", "\n"])), function (_a) {
230
+ 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 &:hover:not([disabled])::before {\n background-color: ", ";\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 &:hover:not([disabled])::before {\n background-color: ", ";\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", "\n"])), function (_a) {
233
231
  var theme = _a.theme;
234
232
  return theme.ui_cpnt_button_fill_base_primary;
235
- }, function (_a) {
236
- var isSubmitting = _a.isSubmitting;
237
- return !isSubmitting && animationStyle_1.buttonOnAni;
233
+ }, transitionStyle_1.ButtonTransition, function (_a) {
234
+ var theme = _a.theme, isSubmitting = _a.isSubmitting;
235
+ return !isSubmitting && theme.ui_cpnt_button_fill_on_base_hover;
238
236
  }, function (_a) {
239
237
  var theme = _a.theme, isSubmitting = _a.isSubmitting;
240
- return !isSubmitting &&
241
- "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 );";
238
+ return !isSubmitting && theme.ui_cpnt_button_fill_on_base_pressed;
242
239
  }, function (_a) {
243
240
  var disabled = _a.disabled;
244
241
  return disabled && primaryDisabled;
@@ -247,17 +244,15 @@ var secondaryDisabled = (0, styled_components_1.css)(templateObject_15 || (templ
247
244
  var theme = _a.theme;
248
245
  return theme.ui_cpnt_button_line_base_hover;
249
246
  });
250
- var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n\n &:hover:not([disabled]) {\n ", "\n }\n\n &:active:not([disabled]) {\n ", "\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n\n &:hover:not([disabled]) {\n ", "\n }\n\n &:active:not([disabled]) {\n ", "\n }\n\n ", "\n"])), function (_a) {
247
+ 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 &:hover:not([disabled])::before {\n background-color: ", ";\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 &:hover:not([disabled])::before {\n background-color: ", ";\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", "\n"])), function (_a) {
251
248
  var theme = _a.theme;
252
249
  return theme.ui_cpnt_button_line_base_hover;
253
- }, function (_a) {
250
+ }, transitionStyle_1.ButtonTransition, function (_a) {
254
251
  var theme = _a.theme, isSubmitting = _a.isSubmitting;
255
- return !isSubmitting &&
256
- "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 );";
252
+ return !isSubmitting && theme.ui_transition_test_main_button_secondary_hover;
257
253
  }, function (_a) {
258
254
  var theme = _a.theme, isSubmitting = _a.isSubmitting;
259
- return !isSubmitting &&
260
- "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 );";
255
+ return !isSubmitting && theme.ui_transition_test_main_button_secondary_active;
261
256
  }, function (_a) {
262
257
  var disabled = _a.disabled;
263
258
  return disabled && secondaryDisabled;
package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js CHANGED
@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
+ var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
31
32
  var TextLabel_1 = require("../TextLabel");
32
33
  var textStyle = {
33
34
  rlarge: 'body1Bold',
@@ -61,13 +62,13 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
61
62
  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"])));
62
63
  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"])));
63
64
  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"])));
64
- 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 cursor: ", ";\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n &:hover:not([disabled]) {\n background-color: ", ";\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 cursor: ", ";\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"])), function (_a) {
65
+ 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 cursor: ", ";\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n ", "\n\n &:hover:not([disabled]) {\n background-color: ", ";\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 cursor: ", ";\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n ", "\n\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"])), function (_a) {
65
66
  var disabled = _a.disabled;
66
67
  return (disabled ? 'default' : 'pointer');
67
68
  }, function (_a) {
68
69
  var theme = _a.theme;
69
70
  return theme.spacing.spacingB;
70
- }, function (_a) {
71
+ }, transitionStyle_1.ButtonTransition, function (_a) {
71
72
  var theme = _a.theme;
72
73
  return theme.ui_cpnt_button_line_base_hover;
73
74
  }, function (_a) {
package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.js CHANGED
@@ -14,14 +14,12 @@ var WFA = function (_a) {
14
14
  var stepContent = _a.stepContent, content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
15
15
  return (react_1.default.createElement(react_1.default.Fragment, null,
16
16
  react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA", containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
17
- react_1.default.createElement(S_StepArea, { "x-pds-name": "StepArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA", areaColor: areaColor },
18
- react_1.default.createElement(S_StepContent, { "x-pds-name": "StepContent", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA" }, stepContent)),
19
17
  react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA", areaColor: areaColor },
20
18
  react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA" }, content1)))))));
21
19
  };
22
- var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n height: 100%;\n justify-content: center;\n min-width: 1200px;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"], ["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n height: 100%;\n justify-content: center;\n min-width: 1200px;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"])), function (_a) {
20
+ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n height: 100%;\n justify-content: center;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"], ["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n height: 100%;\n justify-content: center;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"])), function (_a) {
23
21
  var theme = _a.theme;
24
- return theme.ui_contentscontainer01_background;
22
+ return theme.ui_temp_white;
25
23
  }, function (_a) {
26
24
  var containerColor = _a.containerColor;
27
25
  return "background-color: " + containerColor;
@@ -31,10 +29,10 @@ var S_StepArea = styled_components_1.default.div(templateObject_2 || (templateOb
31
29
  return "background-color: " + areaColor;
32
30
  });
33
31
  var S_StepContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
34
- var S_ContentsArea = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-sizing: border-box;\n margin: 0 24px;\n max-width: 1632px;\n min-width: 912px;\n padding-bottom: 88px;\n width: 100%;\n ", ";\n"], ["\n box-sizing: border-box;\n margin: 0 24px;\n max-width: 1632px;\n min-width: 912px;\n padding-bottom: 88px;\n width: 100%;\n ", ";\n"])), function (_a) {
32
+ var S_ContentsArea = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-bottom: 88px;\n ", ";\n"], ["\n box-sizing: border-box;\n padding-bottom: 88px;\n ", ";\n"])), function (_a) {
35
33
  var areaColor = _a.areaColor;
36
34
  return "background-color: " + areaColor;
37
35
  });
38
- var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n max-width: 720px;\n min-width: 512px;\n width: 56%;\n"], ["\n max-width: 720px;\n min-width: 512px;\n width: 56%;\n"])));
36
+ var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n max-width: 900px;\n min-width: 512px;\n"], ["\n max-width: 900px;\n min-width: 512px;\n"])));
39
37
  exports.default = WFA;
40
38
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/src/desktop/layout/LayoutWF/Containers/PageMenuContainer/variation/PageMenu.js CHANGED
@@ -15,11 +15,8 @@ var PageMenu = function (_a) {
15
15
  react_1.default.createElement(S_PageMenuArea, { "x-pds-name": "PageMenuArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" },
16
16
  react_1.default.createElement(S_PageMenuContent, { "x-pds-name": "PageMenuContent", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" }, pageMenuContent))));
17
17
  };
18
- var S_PageMenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
19
- var theme = _a.theme;
20
- return theme.ui_pagemenucontainer_background;
21
- });
18
+ var S_PageMenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 16px 16px 0 0;\n background-color: #fff;\n"], ["\n border-radius: 16px 16px 0 0;\n background-color: #fff;\n"])));
22
19
  var S_PageMenuArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
23
- var S_PageMenuContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 64px;\n overflow: hidden;\n"], ["\n height: 64px;\n overflow: hidden;\n"])));
20
+ var S_PageMenuContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 16px 16px 0 0;\n height: 160px;\n overflow: hidden;\n"], ["\n border-radius: 16px 16px 0 0;\n height: 160px;\n overflow: hidden;\n"])));
24
21
  exports.default = PageMenu;
25
22
  var templateObject_1, templateObject_2, templateObject_3;
package/dist/src/desktop/layout/LayoutWF/ContainersBox/ContainersBox.js CHANGED
@@ -70,10 +70,10 @@ var ContainersBox = function (_a) {
70
70
  react_1.default.createElement(S_ContentsWrapper, null,
71
71
  react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, stepContent: stepContent, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 }))))));
72
72
  };
73
- var S_ContainersBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
73
+ var S_ContainersBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: 80%;\n width: 900px;\n border-radius: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n height: 80%;\n width: 900px;\n border-radius: 16px;\n"])));
74
74
  var S_TopWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
75
75
  var S_BottomBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 1;\n overflow: hidden;\n align-items: flex-start;\n display: flex;\n"], ["\n flex: 1;\n overflow: hidden;\n align-items: flex-start;\n display: flex;\n"])));
76
76
  var S_RightBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex: 1;\n flex-direction: column;\n height: 100%;\n max-width: 100%;\n"], ["\n display: flex;\n flex: 1;\n flex-direction: column;\n height: 100%;\n max-width: 100%;\n"])));
77
- var S_ContentsWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n flex: 1;\n overflow: hidden;\n"], ["\n flex: 1;\n overflow: hidden;\n"])));
77
+ var S_ContentsWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n flex: 1;\n overflow: hidden;\n border-radius: 0 0 16px 16px;\n"], ["\n flex: 1;\n overflow: hidden;\n border-radius: 0 0 16px 16px;\n"])));
78
78
  exports.default = ContainersBox;
79
79
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/src/desktop/layout/LayoutWF/LayoutWF.js CHANGED
@@ -13,6 +13,6 @@ var LayoutWF = function (_a) {
13
13
  var children = _a.children;
14
14
  return (react_1.default.createElement(S_LayoutWF, { "x-pds-name": "LayoutWF", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" }, children));
15
15
  };
16
- var S_LayoutWF = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100vh;\n width: 100vw;\n min-width: 1200px;\n"], ["\n height: 100vh;\n width: 100vw;\n min-width: 1200px;\n"])));
16
+ var S_LayoutWF = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100vh;\n width: 100vw;\n min-width: 1200px;\n background-image: url('https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/uq7JQlKJo7KBETXnVuTf.jpg?auto=format&w=1600');\n display: flex;\n justify-content: center;\n align-items: center;\n background-repeat: no-repeat;\n background-size: cover;\n"], ["\n height: 100vh;\n width: 100vw;\n min-width: 1200px;\n background-image: url('https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/uq7JQlKJo7KBETXnVuTf.jpg?auto=format&w=1600');\n display: flex;\n justify-content: center;\n align-items: center;\n background-repeat: no-repeat;\n background-size: cover;\n"])));
17
17
  exports.default = LayoutWF;
18
18
  var templateObject_1;
package/dist/src/desktop/panels/ContentSheet/ContentSheet.js CHANGED
@@ -29,7 +29,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  var styles_1 = require("../../../common/styles");
32
- var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
33
32
  var backgroundColorTheme = {
34
33
  transparent: 'ui_cpnt_sheet_base_03',
35
34
  white: 'ui_cpnt_sheet_base_white',
@@ -101,7 +100,7 @@ var overrideStyle = (0, styled_components_1.css)(templateObject_6 || (templateOb
101
100
  var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
102
101
  return overrideBorderColorKey && theme[overrideBorderColorKey];
103
102
  });
104
- 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) {
103
+ 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) {
105
104
  var $width = _a.$width;
106
105
  return $width;
107
106
  }, function (_a) {
@@ -137,7 +136,7 @@ var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templa
137
136
  }, function (_a) {
138
137
  var paddingLeft = _a.paddingLeft;
139
138
  return paddingLeft !== 'none' && paddingLeftStyle;
140
- }, overrideStyle, transitionStyle_1.ContentSheetTransition);
139
+ }, overrideStyle);
141
140
  var S_LoadingContentSheet = (0, styled_components_1.default)(S_ContentSheet)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), styles_1.skeletonLoadingStyle);
142
141
  exports.default = ContentSheet;
143
142
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
package/dist/src/mobile/components/Dropdown/Dropdown.js CHANGED
@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
26
  var react_1 = __importStar(require("react"));
27
27
  var styled_components_1 = __importStar(require("styled-components"));
28
+ var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
28
29
  var hybrid_1 = require("../../../hybrid");
29
30
  var ContextMenu_1 = require("../ContextMenu");
30
31
  var ContextMenuItem_1 = require("../ContextMenuItem");
@@ -270,7 +271,11 @@ var borderColor = (0, styled_components_1.css)(templateObject_10 || (templateObj
270
271
  return theme.ui_cpnt_dropdown_border_normal;
271
272
  }
272
273
  });
273
- var S_Select = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border: 2px solid\n ", ";\n border-radius: 14px;\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n\n ", ";\n\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n border: 2px solid\n ", ";\n border-radius: 14px;\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n\n ", ";\n\n ", "\n"])), function (_a) {
274
+ var normal_transition = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n &:active {\n background-color: ", ";\n }\n"], ["\n &:active {\n background-color: ", ";\n }\n"])), function (_a) {
275
+ var theme = _a.theme;
276
+ return theme.ui_transition_test_text_field_active;
277
+ });
278
+ var S_Select = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border: 2px solid\n ", ";\n border-radius: 14px;\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n border: 2px solid\n ", ";\n border-radius: 14px;\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n"])), function (_a) {
274
279
  var state = _a.state;
275
280
  switch (state) {
276
281
  case 'disabled':
@@ -300,10 +305,13 @@ var S_Select = styled_components_1.default.div(templateObject_11 || (templateObj
300
305
  }, function (_a) {
301
306
  var customWidth = _a.customWidth;
302
307
  return customWidth && "width: " + customWidth + ";";
308
+ }, transitionStyle_1.TextFieldTransition, function (_a) {
309
+ var state = _a.state;
310
+ return state === 'normal' && normal_transition;
303
311
  });
304
- var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: block;\n margin-top: ", ";\n position: absolute;\n width: inherit;\n"], ["\n display: block;\n margin-top: ", ";\n position: absolute;\n width: inherit;\n"])), function (_a) {
312
+ var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: block;\n margin-top: ", ";\n position: absolute;\n width: inherit;\n"], ["\n display: block;\n margin-top: ", ";\n position: absolute;\n width: inherit;\n"])), function (_a) {
305
313
  var theme = _a.theme;
306
314
  return theme.spacing.spacingB;
307
315
  });
308
316
  exports.default = Dropdown;
309
- 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;
317
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
package/dist/src/mobile/components/FloatingActionButton/FloatingActionButton.js CHANGED
@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
+ var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
31
32
  var hybrid_1 = require("../../../hybrid");
32
33
  var TextLabel_1 = require("../TextLabel");
33
34
  function FloatingActionButton(_a) {
@@ -64,15 +65,15 @@ var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_
64
65
  var theme = _a.theme;
65
66
  return theme.ui_cpnt_button_fill_base_disabled;
66
67
  });
67
- var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n right: 24px;\n bottom: 24px;\n background-color: ", ";\n border: none;\n box-sizing: border-box;\n box-shadow: ", ";\n z-index: 101;\n\n &:focus {\n outline: none;\n }\n\n &:active:enabled {\n ", "\n }\n\n ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n right: 24px;\n bottom: 24px;\n background-color: ", ";\n border: none;\n box-sizing: border-box;\n box-shadow: ", ";\n z-index: 101;\n\n &:focus {\n outline: none;\n }\n\n &:active:enabled {\n ", "\n }\n\n ", ";\n"])), function (_a) {
68
+ var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n right: 24px;\n bottom: 24px;\n background-color: ", ";\n border: none;\n box-sizing: border-box;\n box-shadow: ", ";\n z-index: 101;\n\n &:focus {\n outline: none;\n }\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n padding: 0;\n ", "\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n right: 24px;\n bottom: 24px;\n background-color: ", ";\n border: none;\n box-sizing: border-box;\n box-shadow: ", ";\n z-index: 101;\n\n &:focus {\n outline: none;\n }\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n padding: 0;\n ", "\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
68
69
  var theme = _a.theme;
69
70
  return theme.ui_cpnt_button_fill_base_primary;
70
71
  }, function (_a) {
71
72
  var theme = _a.theme;
72
73
  return theme.boxShadow.elevation3;
73
- }, function (_a) {
74
+ }, transitionStyle_1.ButtonTransition, function (_a) {
74
75
  var theme = _a.theme;
75
- 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 );";
76
+ return theme.ui_cpnt_button_fill_on_base_pressed;
76
77
  }, function (_a) {
77
78
  var state = _a.state;
78
79
  return state === 'disable' && disabled;
package/dist/src/mobile/components/IconButton/IconButton.js CHANGED
@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
+ var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
31
32
  var hybrid_1 = require("../../../hybrid");
32
33
  function IconButton(_a) {
33
34
  var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, iconName = _a.iconName, iconColorKey = _a.iconColorKey, _g = _a.shadow, shadow = _g === void 0 ? 'hidden' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, tabIndex = _a.tabIndex, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
@@ -73,14 +74,14 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
73
74
  ? ''
74
75
  : theme.ui_cpnt_button_fill_base_disabled;
75
76
  });
76
- var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n\n &:active:enabled {\n ", "\n }\n\n ", ";\n"], ["\n background-color: ", ";\n\n &:active:enabled {\n ", "\n }\n\n ", ";\n"])), function (_a) {
77
+ 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:enabled::before {\n background-color: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n ", "\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
77
78
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
78
79
  return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
79
- }, function (_a) {
80
+ }, transitionStyle_1.ButtonTransition, function (_a) {
80
81
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
81
82
  return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
82
83
  ? ''
83
- : "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 );";
84
+ : theme.ui_cpnt_button_fill_on_base_pressed;
84
85
  }, function (_a) {
85
86
  var state = _a.state;
86
87
  return state === 'disabled' && fillDisabled;
@@ -92,7 +93,7 @@ var lineDisabled = (0, styled_components_1.css)(templateObject_3 || (templateObj
92
93
  var theme = _a.theme;
93
94
  return theme.ui_cpnt_button_line_border_disabled;
94
95
  });
95
- var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n\n ", ";\n\n &:active:enabled {\n ", "\n }\n\n ", ";\n"], ["\n background-color: ", ";\n border-color: ", ";\n\n ", ";\n\n &:active:enabled {\n ", "\n }\n\n ", ";\n"])), function (_a) {
96
+ var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n\n ", ";\n\n &:active:enabled {\n ", "\n }\n\n ", "\n\n ", ";\n"], ["\n background-color: ", ";\n border-color: ", ";\n\n ", ";\n\n &:active:enabled {\n ", "\n }\n\n ", "\n\n ", ";\n"])), function (_a) {
96
97
  var theme = _a.theme;
97
98
  return theme.ui_cpnt_button_line_base_default;
98
99
  }, function (_a) {
@@ -111,7 +112,7 @@ var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
111
112
  }, function (_a) {
112
113
  var theme = _a.theme;
113
114
  return "background-color: " + theme.ui_cpnt_button_line_base_pressed + "\n ;";
114
- }, function (_a) {
115
+ }, transitionStyle_1.ButtonTransition, function (_a) {
115
116
  var state = _a.state;
116
117
  return state === 'disabled' && lineDisabled;
117
118
  });
package/dist/src/mobile/components/LottieReactionButton/LottieReactionButton.js CHANGED
@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
26
  var react_1 = __importStar(require("react"));
27
27
  var styled_components_1 = __importStar(require("styled-components"));
28
+ var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
28
29
  var numberHelper_1 = require("../../../common/utils/numberHelper");
29
30
  var hybrid_1 = require("../../../hybrid");
30
31
  var TextLabel_1 = require("../TextLabel");
@@ -78,9 +79,9 @@ var disabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_
78
79
  var theme = _a.theme;
79
80
  return theme.ui_cpnt_button_fill_base_disabled;
80
81
  });
81
- 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) {
82
+ 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) {
82
83
  var theme = _a.theme;
83
- 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 );";
84
+ return theme.ui_transition_test_main_button_secondary_active;
84
85
  });
85
86
  var view_only = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: default;\n"], ["\n cursor: default;\n"])));
86
87
  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 CHANGED
@@ -30,6 +30,7 @@ var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  var components_1 = require("../../../common/components");
32
32
  var styles_1 = require("../../../common/styles");
33
+ var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
33
34
  var hybrid_1 = require("../../../hybrid");
34
35
  var TextLabel_1 = require("../TextLabel");
35
36
  // NOTE : 기획상 아직 사용하지 않는 props
@@ -187,12 +188,12 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_5 || (templateObj
187
188
  var theme = _a.theme;
188
189
  return theme.ui_cpnt_button_fill_base_disabled;
189
190
  });
190
- 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) {
191
+ 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) {
191
192
  var theme = _a.theme;
192
193
  return theme.ui_cpnt_button_fill_base_primary;
193
- }, function (_a) {
194
+ }, transitionStyle_1.ButtonTransition, function (_a) {
194
195
  var theme = _a.theme;
195
- 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 );";
196
+ return theme.ui_cpnt_button_fill_on_base_pressed;
196
197
  }, function (_a) {
197
198
  var state = _a.state;
198
199
  return state === 'disabled' && fillDisabled;
@@ -230,13 +231,13 @@ var lineDisabled = (0, styled_components_1.css)(templateObject_11 || (templateOb
230
231
  ? theme.ui_cpnt_button_line_border_darktheme_disabled
231
232
  : theme.ui_cpnt_button_line_border_disabled;
232
233
  });
233
- 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) {
234
+ 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) {
234
235
  var theme = _a.theme;
235
236
  return theme.ui_cpnt_button_line_base_default;
236
237
  }, function (_a) {
237
238
  var theme = _a.theme;
238
239
  return "background-color: " + theme.ui_cpnt_button_line_base_pressed + ";";
239
- }, function (_a) {
240
+ }, transitionStyle_1.ButtonTransition, function (_a) {
240
241
  var colorTheme = _a.colorTheme;
241
242
  return colorTheme && { none: none, line1: line1, line2: line2, line3: line3 }[colorTheme];
242
243
  }, function (_a) {
@@ -247,12 +248,12 @@ var primaryDisabled = (0, styled_components_1.css)(templateObject_13 || (templat
247
248
  var theme = _a.theme;
248
249
  return theme.ui_cpnt_button_fill_base_disabled;
249
250
  });
250
- 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) {
251
+ 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) {
251
252
  var theme = _a.theme;
252
253
  return theme.ui_cpnt_button_fill_base_primary;
253
- }, function (_a) {
254
+ }, transitionStyle_1.ButtonTransition, function (_a) {
254
255
  var theme = _a.theme;
255
- 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 );";
256
+ return theme.ui_cpnt_button_fill_on_base_pressed;
256
257
  }, function (_a) {
257
258
  var state = _a.state;
258
259
  return state === 'disabled' && primaryDisabled;
@@ -261,12 +262,12 @@ var secondaryDisabled = (0, styled_components_1.css)(templateObject_15 || (templ
261
262
  var theme = _a.theme;
262
263
  return theme.ui_cpnt_button_line_base_hover;
263
264
  });
264
- 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) {
265
+ 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) {
265
266
  var theme = _a.theme;
266
267
  return theme.ui_cpnt_button_line_base_hover;
267
- }, function (_a) {
268
+ }, transitionStyle_1.ButtonTransition, function (_a) {
268
269
  var theme = _a.theme;
269
- 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 );";
270
+ return theme.ui_transition_test_main_button_secondary_active;
270
271
  }, function (_a) {
271
272
  var state = _a.state;
272
273
  return state === 'disabled' && secondaryDisabled;
package/dist/src/mobile/components/MobileAlertDialog/MobileAlertDialog.js CHANGED
@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importStar(require("react"));
30
30
  var react_dom_1 = __importDefault(require("react-dom"));
31
31
  var styled_components_1 = __importDefault(require("styled-components"));
32
+ var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
32
33
  var hybrid_1 = require("../../../hybrid");
33
34
  var TextButton_1 = require("../TextButton");
34
35
  var TextLabel_1 = require("../TextLabel");
@@ -89,7 +90,7 @@ var S_ModalOverlay = styled_components_1.default.div(templateObject_2 || (templa
89
90
  var theme = _a.theme;
90
91
  return theme.ui_cpnt_modal_dimmed;
91
92
  });
92
- 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) {
93
+ 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) {
93
94
  var theme = _a.theme;
94
95
  return theme.ui_cpnt_alertdialog_base;
95
96
  }, function (_a) {
@@ -98,7 +99,7 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_3 || (templa
98
99
  }, function (_a) {
99
100
  var theme = _a.theme;
100
101
  return theme.boxShadow.elevation5;
101
- });
102
+ }, animationStyle_1.dialogOnAni);
102
103
  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) {
103
104
  var btnStack = _a.btnStack;
104
105
  return (btnStack === 'side' ? 'row' : 'column-reverse');