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

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 (42) hide show
  1. package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +7 -3
  2. package/dist/src/common/styles/colorSet/PaletteColor_light.json +7 -3
  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 +18 -0
  6. package/dist/src/common/styles/colorSet/ui-type.d.ts +4 -0
  7. package/dist/src/common/styles/movement/animationStyle.d.ts +0 -3
  8. package/dist/src/common/styles/movement/animationStyle.js +6 -15
  9. package/dist/src/common/styles/movement/keyframes.js +14 -14
  10. package/dist/src/common/styles/movement/transitionStyle.d.ts +1 -1
  11. package/dist/src/common/styles/movement/transitionStyle.js +3 -3
  12. package/dist/src/desktop/components/AdminListItem/AdminListItem.js +2 -2
  13. package/dist/src/desktop/components/DesktopAlertDialog/DesktopAlertDialog.js +1 -1
  14. package/dist/src/desktop/components/Dropdown/Dropdown.js +14 -3
  15. package/dist/src/desktop/components/EditApplyTextField/EditApplyTextField.js +14 -4
  16. package/dist/src/desktop/components/FloatingActionButton/FloatingActionButton.js +7 -4
  17. package/dist/src/desktop/components/IconButton/IconButton.js +7 -6
  18. package/dist/src/desktop/components/LottieReactionButton/LottieReactionButton.js +4 -3
  19. package/dist/src/desktop/components/MainButton/MainButton.js +17 -14
  20. package/dist/src/desktop/components/ReactionButton/ReactionButton.js +2 -1
  21. package/dist/src/desktop/components/Select/Select.js +13 -2
  22. package/dist/src/desktop/components/TextButton/TextButton.js +3 -2
  23. package/dist/src/desktop/components/TextField/TextField.js +14 -4
  24. package/dist/src/desktop/components/UploadIconButton/UploadIconButton.js +7 -6
  25. package/dist/src/desktop/components/UploadMainButton/UploadMainButton.js +16 -21
  26. package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js +3 -2
  27. package/dist/src/desktop/panels/ContentSheet/ContentSheet.js +2 -3
  28. package/dist/src/mobile/components/Dropdown/Dropdown.js +11 -3
  29. package/dist/src/mobile/components/FloatingActionButton/FloatingActionButton.js +4 -3
  30. package/dist/src/mobile/components/IconButton/IconButton.js +6 -5
  31. package/dist/src/mobile/components/LottieReactionButton/LottieReactionButton.js +3 -2
  32. package/dist/src/mobile/components/MainButton/MainButton.js +12 -11
  33. package/dist/src/mobile/components/MobileAlertDialog/MobileAlertDialog.js +3 -2
  34. package/dist/src/mobile/components/Select/Select.js +10 -2
  35. package/dist/src/mobile/components/TextButton/TextButton.js +2 -1
  36. package/dist/src/mobile/components/TextField/TextField.js +12 -4
  37. package/dist/src/mobile/components/UploadIconButton/UploadIconButton.js +6 -5
  38. package/dist/src/mobile/components/UploadMainButton/UploadMainButton.js +12 -14
  39. package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js +3 -2
  40. package/dist/src/mobile/panels/MobileBasicModal/MobileBasicModal.js +3 -2
  41. package/package.json +1 -1
  42. package/release-note.md +41 -6
package/dist/src/desktop/components/MainButton/MainButton.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
  // NOTE : 기획상 아직 사용하지 않는 props
@@ -188,15 +188,15 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_5 || (templateObj
188
188
  var theme = _a.theme;
189
189
  return theme.ui_cpnt_button_fill_base_disabled;
190
190
  });
191
- var fill = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"])), function (_a) {
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 &:hover:enabled::before {\n background-color: ", ";\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n padding: 0;\n ", "\n }\n\n &:hover:enabled::before {\n background-color: ", ";\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", "\n"])), function (_a) {
192
192
  var theme = _a.theme;
193
193
  return theme.ui_cpnt_button_fill_base_primary;
194
- }, function (_a) {
194
+ }, transitionStyle_1.ButtonTransition, function (_a) {
195
195
  var theme = _a.theme;
196
- return "background-image: linear-gradient(\n to top,\n " + theme.ui_cpnt_button_fill_on_base_hover + ",\n " + theme.ui_cpnt_button_fill_on_base_hover + "\n );";
196
+ return theme.ui_cpnt_button_fill_on_base_hover;
197
197
  }, function (_a) {
198
198
  var theme = _a.theme;
199
- 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 );";
199
+ return theme.ui_cpnt_button_fill_on_base_pressed;
200
200
  }, function (_a) {
201
201
  var state = _a.state;
202
202
  return state === 'disabled' && fillDisabled;
@@ -237,7 +237,7 @@ var lineDisabled = (0, styled_components_1.css)(templateObject_11 || (templateOb
237
237
  ? theme.ui_cpnt_button_line_border_darktheme_disabled
238
238
  : theme.ui_cpnt_button_line_border_disabled;
239
239
  });
240
- var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", ";\n ", "\n"], ["\n background-color: ", ";\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", ";\n ", "\n"])), function (_a) {
240
+ var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n &::before {\n content: '';\n display: none;\n }\n ", "\n\n ", ";\n ", "\n"], ["\n background-color: ", ";\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n &::before {\n content: '';\n display: none;\n }\n ", "\n\n ", ";\n ", "\n"])), function (_a) {
241
241
  var theme = _a.theme;
242
242
  return theme.ui_cpnt_button_line_base_default;
243
243
  }, function (_a) {
@@ -246,7 +246,7 @@ var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12
246
246
  }, function (_a) {
247
247
  var theme = _a.theme;
248
248
  return "background-color: " + theme.ui_cpnt_button_line_base_pressed + ";";
249
- }, function (_a) {
249
+ }, transitionStyle_1.ButtonTransition, function (_a) {
250
250
  var colorTheme = _a.colorTheme;
251
251
  return colorTheme && { none: none, line1: line1, line2: line2, line3: line3 }[colorTheme];
252
252
  }, function (_a) {
@@ -257,12 +257,15 @@ var primaryDisabled = (0, styled_components_1.css)(templateObject_13 || (templat
257
257
  var theme = _a.theme;
258
258
  return theme.ui_cpnt_button_fill_base_disabled;
259
259
  });
260
- var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"])), function (_a) {
260
+ 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:enabled::before {\n background-color: ", ";\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n padding: 0;\n ", "\n }\n\n &:hover:enabled::before {\n background-color: ", ";\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", "\n"])), function (_a) {
261
261
  var theme = _a.theme;
262
262
  return theme.ui_cpnt_button_fill_base_primary;
263
- }, animationStyle_1.buttonOnAni, function (_a) {
263
+ }, transitionStyle_1.ButtonTransition, function (_a) {
264
264
  var theme = _a.theme;
265
- 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 );";
265
+ return theme.ui_cpnt_button_fill_on_base_hover;
266
+ }, function (_a) {
267
+ var theme = _a.theme;
268
+ return theme.ui_cpnt_button_fill_on_base_pressed;
266
269
  }, function (_a) {
267
270
  var state = _a.state;
268
271
  return state === 'disabled' && primaryDisabled;
@@ -271,15 +274,15 @@ var secondaryDisabled = (0, styled_components_1.css)(templateObject_15 || (templ
271
274
  var theme = _a.theme;
272
275
  return theme.ui_cpnt_button_line_base_hover;
273
276
  });
274
- var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"])), function (_a) {
277
+ 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:enabled::before {\n background-color: ", ";\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n padding: 0;\n ", "\n }\n\n &:hover:enabled::before {\n background-color: ", ";\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", "\n"])), function (_a) {
275
278
  var theme = _a.theme;
276
279
  return theme.ui_cpnt_button_line_base_hover;
277
- }, function (_a) {
280
+ }, transitionStyle_1.ButtonTransition, function (_a) {
278
281
  var theme = _a.theme;
279
- return "background-image: linear-gradient(\n to top,\n " + theme.ui_cpnt_button_fill_on_base_hover + ",\n " + theme.ui_cpnt_button_fill_on_base_hover + "\n );";
282
+ return theme.ui_transition_test_main_button_secondary_hover;
280
283
  }, function (_a) {
281
284
  var theme = _a.theme;
282
- 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 );";
285
+ return theme.ui_transition_test_main_button_secondary_active;
283
286
  }, function (_a) {
284
287
  var state = _a.state;
285
288
  return state === 'disabled' && secondaryDisabled;
package/dist/src/desktop/components/ReactionButton/ReactionButton.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 numberHelper_1 = require("../../../common/utils/numberHelper");
32
33
  var hybrid_1 = require("../../../hybrid");
33
34
  var TextLabel_1 = require("../TextLabel");
@@ -93,7 +94,7 @@ function ReactionButton(_a) {
93
94
  react_1.default.createElement(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() }))),
94
95
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })));
95
96
  }
96
- var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n border-radius: 8px;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n justify-content: center;\n padding: 0;\n height: 32px;\n\n &:hover:enabled {\n background-color: ", ";\n }\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n border-radius: 8px;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n justify-content: center;\n padding: 0;\n height: 32px;\n\n &:hover:enabled {\n background-color: ", ";\n }\n"])), function (_a) {
97
+ var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n border-radius: 8px;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n justify-content: center;\n padding: 0;\n height: 32px;\n\n ", "\n\n &:hover:enabled {\n background-color: ", ";\n }\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n border-radius: 8px;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n justify-content: center;\n padding: 0;\n height: 32px;\n\n ", "\n\n &:hover:enabled {\n background-color: ", ";\n }\n"])), transitionStyle_1.ButtonTransition, function (_a) {
97
98
  var theme = _a.theme;
98
99
  return theme.ui_cpnt_reactionbutton_base_01;
99
100
  });
package/dist/src/desktop/components/Select/Select.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 HINT = 'HINT_VALUE';
33
34
  function Select(_a) {
@@ -112,7 +113,14 @@ var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templa
112
113
  var theme = _a.theme;
113
114
  return theme.spacing.spacingD;
114
115
  });
115
- 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 cursor: pointer;\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 cursor: ", ";\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 cursor: pointer;\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 cursor: ", ";\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) {
116
+ var normal_transition = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __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) {
117
+ var theme = _a.theme;
118
+ return theme.ui_transition_test_text_field_hover;
119
+ }, function (_a) {
120
+ var theme = _a.theme;
121
+ return theme.ui_transition_test_text_field_active;
122
+ });
123
+ 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 cursor: pointer;\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 cursor: ", ";\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 cursor: pointer;\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 cursor: ", ";\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) {
116
124
  var theme = _a.theme;
117
125
  return theme.ui_cpnt_select_base_normal;
118
126
  }, function (_a) {
@@ -163,6 +171,9 @@ var S_Select = styled_components_1.default.select(templateObject_8 || (templateO
163
171
  }, function (_a) {
164
172
  var colorTheme = _a.colorTheme;
165
173
  return colorTheme === 'dark' && dark;
174
+ }, transitionStyle_1.TextFieldTransition, function (_a) {
175
+ var state = _a.state;
176
+ return state === 'normal' && normal_transition;
166
177
  });
167
178
  exports.default = Select;
168
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
179
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
package/dist/src/desktop/components/TextButton/TextButton.js CHANGED
@@ -50,6 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
50
50
  Object.defineProperty(exports, "__esModule", { value: true });
51
51
  var react_1 = __importDefault(require("react"));
52
52
  var styled_components_1 = __importStar(require("styled-components"));
53
+ var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
53
54
  var TextLabel_1 = require("../TextLabel");
54
55
  var textStyle = {
55
56
  rlarge: 'body1Bold',
@@ -81,10 +82,10 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
81
82
  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"])));
82
83
  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"])));
83
84
  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"])));
84
- 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 cursor: ", ";\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n &:hover:enabled {\n background-color: ", ";\n }\n &:active:enabled {\n background-color: ", ";\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 cursor: ", ";\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n &:hover:enabled {\n background-color: ", ";\n }\n &:active:enabled {\n background-color: ", ";\n }\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"])), function (_a) {
85
+ 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 cursor: ", ";\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n ", "\n\n &:hover:enabled {\n background-color: ", ";\n }\n &:active:enabled {\n background-color: ", ";\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 cursor: ", ";\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n ", "\n\n &:hover:enabled {\n background-color: ", ";\n }\n &:active:enabled {\n background-color: ", ";\n }\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"])), function (_a) {
85
86
  var state = _a.state;
86
87
  return (state === 'normal' ? 'pointer' : 'default');
87
- }, function (_a) {
88
+ }, transitionStyle_1.ButtonTransition, function (_a) {
88
89
  var theme = _a.theme, colorTheme = _a.colorTheme;
89
90
  return colorTheme === 'white'
90
91
  ? theme.ui_cpnt_button_white_base_hover
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/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"])));