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/common/styles/movement/animationStyle.js CHANGED
@@ -4,20 +4,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
4
4
  return cooked;
5
5
  };
6
6
  Object.defineProperty(exports, "__esModule", { value: true });
7
- exports.contentSheetOnAni = exports.modalOffAni = exports.modalOnAni = exports.dialogOffAni = exports.dialogOnAni = exports.buttonOffAni = exports.buttonOnAni = void 0;
7
+ exports.modalOffAni = exports.modalOnAni = exports.dialogOffAni = exports.dialogOnAni = void 0;
8
8
  var styled_components_1 = require("styled-components");
9
9
  var keyframes_1 = require("./keyframes");
10
- exports.buttonOnAni = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n animation: backgroundImageFadeIn 0.1s ease-in both;\n\n @keyframes backgroundImageFadeIn {\n 0% {\n background-image: linear-gradient(to top, #ffffff00, #ffffff00);\n }\n 10% {\n background-image: linear-gradient(to top, #ffffff03, #ffffff03);\n }\n 20% {\n background-image: linear-gradient(to top, #ffffff05, #ffffff05);\n }\n 30% {\n background-image: linear-gradient(to top, #ffffff08, #ffffff08);\n }\n 40% {\n background-image: linear-gradient(to top, #ffffff0a, #ffffff0a);\n }\n 50% {\n background-image: linear-gradient(to top, #ffffff0d, #ffffff0d);\n }\n 60% {\n background-image: linear-gradient(to top, #ffffff0f, #ffffff0f);\n }\n 70% {\n background-image: linear-gradient(to top, #ffffff12, #ffffff12);\n }\n 80% {\n background-image: linear-gradient(to top, #ffffff14, #ffffff14);\n }\n 90% {\n background-image: linear-gradient(to top, #ffffff17, #ffffff17);\n }\n 100% {\n ", "\n }\n }\n"], ["\n animation: backgroundImageFadeIn 0.1s ease-in both;\n\n @keyframes backgroundImageFadeIn {\n 0% {\n background-image: linear-gradient(to top, #ffffff00, #ffffff00);\n }\n 10% {\n background-image: linear-gradient(to top, #ffffff03, #ffffff03);\n }\n 20% {\n background-image: linear-gradient(to top, #ffffff05, #ffffff05);\n }\n 30% {\n background-image: linear-gradient(to top, #ffffff08, #ffffff08);\n }\n 40% {\n background-image: linear-gradient(to top, #ffffff0a, #ffffff0a);\n }\n 50% {\n background-image: linear-gradient(to top, #ffffff0d, #ffffff0d);\n }\n 60% {\n background-image: linear-gradient(to top, #ffffff0f, #ffffff0f);\n }\n 70% {\n background-image: linear-gradient(to top, #ffffff12, #ffffff12);\n }\n 80% {\n background-image: linear-gradient(to top, #ffffff14, #ffffff14);\n }\n 90% {\n background-image: linear-gradient(to top, #ffffff17, #ffffff17);\n }\n 100% {\n ", "\n }\n }\n"])), function (_a) {
11
- var theme = _a.theme;
12
- 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 );";
13
- });
14
- exports.buttonOffAni = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n animation: backgroundImageFadeOut 0.1s ease-in both;\n\n @keyframes backgroundImageFadeOut {\n from {\n ", "\n }\n 10% {\n background-image: linear-gradient(to top, #ffffff17, #ffffff17);\n }\n 20% {\n background-image: linear-gradient(to top, #ffffff14, #ffffff14);\n }\n 30% {\n background-image: linear-gradient(to top, #ffffff12, #ffffff12);\n }\n 40% {\n background-image: linear-gradient(to top, #ffffff0f, #ffffff0f);\n }\n 50% {\n background-image: linear-gradient(to top, #ffffff0d, #ffffff0d);\n }\n 60% {\n background-image: linear-gradient(to top, #ffffff0a, #ffffff0a);\n }\n 70% {\n background-image: linear-gradient(to top, #ffffff08, #ffffff08);\n }\n 80% {\n background-image: linear-gradient(to top, #ffffff05, #ffffff05);\n }\n 90% {\n background-image: linear-gradient(to top, #ffffff03, #ffffff03);\n }\n to {\n background-image: linear-gradient(to top, #ffffff00, #ffffff00);\n }\n }\n"], ["\n animation: backgroundImageFadeOut 0.1s ease-in both;\n\n @keyframes backgroundImageFadeOut {\n from {\n ", "\n }\n 10% {\n background-image: linear-gradient(to top, #ffffff17, #ffffff17);\n }\n 20% {\n background-image: linear-gradient(to top, #ffffff14, #ffffff14);\n }\n 30% {\n background-image: linear-gradient(to top, #ffffff12, #ffffff12);\n }\n 40% {\n background-image: linear-gradient(to top, #ffffff0f, #ffffff0f);\n }\n 50% {\n background-image: linear-gradient(to top, #ffffff0d, #ffffff0d);\n }\n 60% {\n background-image: linear-gradient(to top, #ffffff0a, #ffffff0a);\n }\n 70% {\n background-image: linear-gradient(to top, #ffffff08, #ffffff08);\n }\n 80% {\n background-image: linear-gradient(to top, #ffffff05, #ffffff05);\n }\n 90% {\n background-image: linear-gradient(to top, #ffffff03, #ffffff03);\n }\n to {\n background-image: linear-gradient(to top, #ffffff00, #ffffff00);\n }\n }\n"])), function (_a) {
15
- var theme = _a.theme;
16
- 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 );";
17
- });
18
- exports.dialogOnAni = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both, ", " 0.2s ease-in-out both;\n"], ["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both, ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceInIncludeTranslate, keyframes_1.fadeIn);
19
- exports.dialogOffAni = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n"], ["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceOutIncludeTranslate, keyframes_1.fadeOut);
20
- exports.modalOnAni = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n"], ["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceInIncludeTranslate02, keyframes_1.fadeIn);
21
- exports.modalOffAni = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n"], ["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceOutIncludeTranslate02, keyframes_1.fadeOut);
22
- exports.contentSheetOnAni = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out both;\n"], ["\n animation: ", " 0.2s ease-in-out both;\n"])), keyframes_1.glow);
23
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
10
+ exports.dialogOnAni = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both, ", " 0.2s ease-in-out both;\n"], ["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both, ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceInIncludeTranslate, keyframes_1.fadeIn);
11
+ exports.dialogOffAni = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n"], ["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceOutIncludeTranslate, keyframes_1.fadeOut);
12
+ exports.modalOnAni = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n"], ["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceInIncludeTranslate02, keyframes_1.fadeIn);
13
+ exports.modalOffAni = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n"], ["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceOutIncludeTranslate02, keyframes_1.fadeOut);
14
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/dist/src/common/styles/movement/keyframes.js CHANGED
@@ -6,18 +6,18 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
6
6
  Object.defineProperty(exports, "__esModule", { value: true });
7
7
  exports.scaleBounceOutIncludeTranslate02 = exports.scaleBounceOutIncludeTranslate = exports.scaleBounceInIncludeTranslate02 = exports.scaleBounceInIncludeTranslate = exports.scaleBounceIn02 = exports.scaleBounceIn = exports.gelatine = exports.scaleDownIncludeTranslate = exports.scaleUpIncludeTranslate = exports.scaleDown = exports.scaleUp = exports.glow = exports.fadeOut = exports.fadeIn = void 0;
8
8
  var styled_components_1 = require("styled-components");
9
- exports.fadeIn = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from { opacity: 0.7; }\n to { opacity: 1; }\n"], ["\n from { opacity: 0.7; }\n to { opacity: 1; }\n"])));
10
- exports.fadeOut = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n from { opacity: 1; }\n to { opacity: 0.7; }\n"], ["\n from { opacity: 1; }\n to { opacity: 0.7; }\n"])));
11
- exports.glow = (0, styled_components_1.keyframes)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n from { transform: scale(1); }\n to { transform: scale(1.03); }\n"], ["\n from { transform: scale(1); }\n to { transform: scale(1.03); }\n"])));
12
- exports.scaleUp = (0, styled_components_1.keyframes)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n from { transform: scale(0.95); }\n to { transform: scale(1); }\n"], ["\n from { transform: scale(0.95); }\n to { transform: scale(1); }\n"])));
13
- exports.scaleDown = (0, styled_components_1.keyframes)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n from { transform: scale(1); }\n to { transform: scale(0.95); }\n"], ["\n from { transform: scale(1); }\n to { transform: scale(0.95); }\n"])));
14
- exports.scaleUpIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n from { transform: scale(0.97) translate(-50%, -50%); }\n to { transform: scale(1) translate(-50%, -50%); }\n"], ["\n from { transform: scale(0.97) translate(-50%, -50%); }\n to { transform: scale(1) translate(-50%, -50%); }\n"])));
15
- exports.scaleDownIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n from { transform: scale(1) translate(-50%, -50%); }\n to { transform: scale(0.97) translate(-50%, -50%); }\n"], ["\n from { transform: scale(1) translate(-50%, -50%); }\n to { transform: scale(0.97) translate(-50%, -50%); }\n"])));
16
- exports.gelatine = (0, styled_components_1.keyframes)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n from, to {\n transform: scale(1, 1);\n }\n 25% {\n transform: scale(0.95, 1.1);\n }\n 50% {\n transform: scale(1.05, 0.9);\n }\n 75% {\n transform: scale(0.97, 1.05);\n }\n"], ["\n from, to {\n transform: scale(1, 1);\n }\n 25% {\n transform: scale(0.95, 1.1);\n }\n 50% {\n transform: scale(1.05, 0.9);\n }\n 75% {\n transform: scale(0.97, 1.05);\n }\n"])));
17
- exports.scaleBounceIn = (0, styled_components_1.keyframes)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n from, to {\n transform: scale(1);\n }\n 23% {\n transform: scale(1.03);\n }\n 66% {\n transform: scale(0.99);\n }\n"], ["\n from, to {\n transform: scale(1);\n }\n 23% {\n transform: scale(1.03);\n }\n 66% {\n transform: scale(0.99);\n }\n"])));
18
- exports.scaleBounceIn02 = (0, styled_components_1.keyframes)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n from {\n transform: scale(0.9);\n }\n 50% {\n transform: scale(1.01);\n }\n to {\n transform: scale(1);\n }\n"], ["\n from {\n transform: scale(0.9);\n }\n 50% {\n transform: scale(1.01);\n }\n to {\n transform: scale(1);\n }\n"])));
19
- exports.scaleBounceInIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n from, to {\n transform: scale(1) translate(-50%, -50%);\n }\n 33% {\n transform: scale(1.03) translate(-50%, -50%);\n }\n 66% {\n transform: scale(0.99) translate(-50%, -50%);\n }\n"], ["\n from, to {\n transform: scale(1) translate(-50%, -50%);\n }\n 33% {\n transform: scale(1.03) translate(-50%, -50%);\n }\n 66% {\n transform: scale(0.99) translate(-50%, -50%);\n }\n"])));
20
- exports.scaleBounceInIncludeTranslate02 = (0, styled_components_1.keyframes)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n from {\n transform: scale(0.9) translate(-50%, -50%);\n }\n 50% {\n transform: scale(1.01) translate(-50%, -50%);\n }\n to {\n transform: scale(1) translate(-50%, -50%);\n }\n"], ["\n from {\n transform: scale(0.9) translate(-50%, -50%);\n }\n 50% {\n transform: scale(1.01) translate(-50%, -50%);\n }\n to {\n transform: scale(1) translate(-50%, -50%);\n }\n"])));
21
- exports.scaleBounceOutIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n from, to {\n transform: scale(1) translate(-50%, -50%);\n }\n 33% {\n transform: scale(0.99) translate(-50%, -50%);\n }\n 66% {\n transform: scale(1.03) translate(-50%, -50%);\n }\n"], ["\n from, to {\n transform: scale(1) translate(-50%, -50%);\n }\n 33% {\n transform: scale(0.99) translate(-50%, -50%);\n }\n 66% {\n transform: scale(1.03) translate(-50%, -50%);\n }\n"])));
22
- exports.scaleBounceOutIncludeTranslate02 = (0, styled_components_1.keyframes)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n from {\n transform: scale(1) translate(-50%, -50%);\n }\n 50% {\n transform: scale(1.01) translate(-50%, -50%);\n }\n to {\n transform: scale(0.9) translate(-50%, -50%);\n }\n"], ["\n from {\n transform: scale(1) translate(-50%, -50%);\n }\n 50% {\n transform: scale(1.01) translate(-50%, -50%);\n }\n to {\n transform: scale(0.9) translate(-50%, -50%);\n }\n"])));
9
+ exports.fadeIn = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from { opacity: 0.7; }\n to { opacity: 1; }\n"], ["\n from { opacity: 0.7; }\n to { opacity: 1; }\n"])));
10
+ exports.fadeOut = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n from { opacity: 1; }\n to { opacity: 0.7; }\n"], ["\n from { opacity: 1; }\n to { opacity: 0.7; }\n"])));
11
+ exports.glow = (0, styled_components_1.keyframes)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n from { transform: scale(1); }\n to { transform: scale(1.03); }\n"], ["\n from { transform: scale(1); }\n to { transform: scale(1.03); }\n"])));
12
+ exports.scaleUp = (0, styled_components_1.keyframes)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n from { transform: scale(0.95); }\n to { transform: scale(1); }\n"], ["\n from { transform: scale(0.95); }\n to { transform: scale(1); }\n"])));
13
+ exports.scaleDown = (0, styled_components_1.keyframes)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n from { transform: scale(1); }\n to { transform: scale(0.95); }\n"], ["\n from { transform: scale(1); }\n to { transform: scale(0.95); }\n"])));
14
+ exports.scaleUpIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n from { transform: scale(0.97) translate(-50%, -50%); }\n to { transform: scale(1) translate(-50%, -50%); }\n"], ["\n from { transform: scale(0.97) translate(-50%, -50%); }\n to { transform: scale(1) translate(-50%, -50%); }\n"])));
15
+ exports.scaleDownIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n from { transform: scale(1) translate(-50%, -50%); }\n to { transform: scale(0.97) translate(-50%, -50%); }\n"], ["\n from { transform: scale(1) translate(-50%, -50%); }\n to { transform: scale(0.97) translate(-50%, -50%); }\n"])));
16
+ exports.gelatine = (0, styled_components_1.keyframes)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n from, to {\n transform: scale(1, 1);\n }\n 25% {\n transform: scale(0.95, 1.1);\n }\n 50% {\n transform: scale(1.05, 0.9);\n }\n 75% {\n transform: scale(0.97, 1.05);\n }\n"], ["\n from, to {\n transform: scale(1, 1);\n }\n 25% {\n transform: scale(0.95, 1.1);\n }\n 50% {\n transform: scale(1.05, 0.9);\n }\n 75% {\n transform: scale(0.97, 1.05);\n }\n"])));
17
+ exports.scaleBounceIn = (0, styled_components_1.keyframes)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n from, to {\n transform: scale(1);\n }\n 23% {\n transform: scale(1.03);\n }\n 66% {\n transform: scale(0.99);\n }\n"], ["\n from, to {\n transform: scale(1);\n }\n 23% {\n transform: scale(1.03);\n }\n 66% {\n transform: scale(0.99);\n }\n"])));
18
+ exports.scaleBounceIn02 = (0, styled_components_1.keyframes)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n from {\n transform: scale(0.9);\n }\n 50% {\n transform: scale(1.01);\n }\n to {\n transform: scale(1);\n }\n"], ["\n from {\n transform: scale(0.9);\n }\n 50% {\n transform: scale(1.01);\n }\n to {\n transform: scale(1);\n }\n"])));
19
+ exports.scaleBounceInIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n from, to {\n transform: scale(1) translate(-50%, -50%);\n }\n 33% {\n transform: scale(1.03) translate(-50%, -50%);\n }\n 66% {\n transform: scale(0.99) translate(-50%, -50%);\n }\n"], ["\n from, to {\n transform: scale(1) translate(-50%, -50%);\n }\n 33% {\n transform: scale(1.03) translate(-50%, -50%);\n }\n 66% {\n transform: scale(0.99) translate(-50%, -50%);\n }\n"])));
20
+ exports.scaleBounceInIncludeTranslate02 = (0, styled_components_1.keyframes)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n from {\n transform: scale(0.9) translate(-50%, -50%);\n }\n 50% {\n transform: scale(1.01) translate(-50%, -50%);\n }\n to {\n transform: scale(1) translate(-50%, -50%);\n }\n"], ["\n from {\n transform: scale(0.9) translate(-50%, -50%);\n }\n 50% {\n transform: scale(1.01) translate(-50%, -50%);\n }\n to {\n transform: scale(1) translate(-50%, -50%);\n }\n"])));
21
+ exports.scaleBounceOutIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n from, to {\n transform: scale(1) translate(-50%, -50%);\n }\n 33% {\n transform: scale(0.99) translate(-50%, -50%);\n }\n 66% {\n transform: scale(1.03) translate(-50%, -50%);\n }\n"], ["\n from, to {\n transform: scale(1) translate(-50%, -50%);\n }\n 33% {\n transform: scale(0.99) translate(-50%, -50%);\n }\n 66% {\n transform: scale(1.03) translate(-50%, -50%);\n }\n"])));
22
+ exports.scaleBounceOutIncludeTranslate02 = (0, styled_components_1.keyframes)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n from {\n transform: scale(1) translate(-50%, -50%);\n }\n 50% {\n transform: scale(1.01) translate(-50%, -50%);\n }\n to {\n transform: scale(0.9) translate(-50%, -50%);\n }\n"], ["\n from {\n transform: scale(1) translate(-50%, -50%);\n }\n 50% {\n transform: scale(1.01) translate(-50%, -50%);\n }\n to {\n transform: scale(0.9) translate(-50%, -50%);\n }\n"])));
23
23
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
package/dist/src/common/styles/movement/transitionStyle.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export declare const AdminListItemTransition: import("styled-components").FlattenSimpleInterpolation;
2
2
  export declare const TextFieldTransition: import("styled-components").FlattenSimpleInterpolation;
3
- export declare const ContentSheetTransition: import("styled-components").FlattenSimpleInterpolation;
3
+ export declare const ButtonTransition: import("styled-components").FlattenSimpleInterpolation;
package/dist/src/common/styles/movement/transitionStyle.js CHANGED
@@ -4,9 +4,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
4
4
  return cooked;
5
5
  };
6
6
  Object.defineProperty(exports, "__esModule", { value: true });
7
- exports.ContentSheetTransition = exports.TextFieldTransition = exports.AdminListItemTransition = void 0;
7
+ exports.ButtonTransition = exports.TextFieldTransition = exports.AdminListItemTransition = void 0;
8
8
  var styled_components_1 = require("styled-components");
9
9
  exports.AdminListItemTransition = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n transition: background-color 0.15s ease-out;\n"], ["\n transition: background-color 0.15s ease-out;\n"])));
10
- exports.TextFieldTransition = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n transition: background-color 0.15s ease-out;\n\n :hover {\n background-color: #eff0f3;\n }\n"], ["\n transition: background-color 0.15s ease-out;\n\n :hover {\n background-color: #eff0f3;\n }\n"])));
11
- exports.ContentSheetTransition = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n transition: transform 0.2s ease-out;\n\n :hover {\n transform: scale(1.015);\n }\n"], ["\n transition: transform 0.2s ease-out;\n\n :hover {\n transform: scale(1.015);\n }\n"])));
10
+ exports.TextFieldTransition = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n transition: background-color 0.15s ease-out;\n"], ["\n transition: background-color 0.15s ease-out;\n"])));
11
+ exports.ButtonTransition = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n transition: background-color 0.1s ease-out;\n"], ["\n transition: background-color 0.1s ease-out;\n"])));
12
12
  var templateObject_1, templateObject_2, templateObject_3;
package/dist/src/desktop/components/AdminListItem/AdminListItem.js CHANGED
@@ -255,13 +255,13 @@ var S_SelectionColumn = styled_components_1.default.div(templateObject_23 || (te
255
255
  });
256
256
  var hoverAdminListItem = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n align-items: center;\n position: relative;\n"], ["\n align-items: center;\n position: relative;\n"])));
257
257
  var fixedAdminListItem = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n justify-content: space-between;\n"], ["\n justify-content: space-between;\n"])));
258
- var S_AdminListItem = styled_components_1.default.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", ";\n ", "\n\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: visible;\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n"], ["\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", ";\n ", "\n\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: visible;\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n"])), function (_a) {
258
+ var S_AdminListItem = styled_components_1.default.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", "\n\n ", ";\n ", "\n\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: visible;\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n"], ["\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", "\n\n ", ";\n ", "\n\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: visible;\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n"])), function (_a) {
259
259
  var theme = _a.theme, isSelected = _a.isSelected;
260
260
  return isSelected ? theme.ui_cpnt_datatable_base_selected : theme.ui_cpnt_datatable_base_default;
261
261
  }, function (_a) {
262
262
  var theme = _a.theme;
263
263
  return theme.spacing.spacingC;
264
- }, function (_a) {
264
+ }, transitionStyle_1.AdminListItemTransition, function (_a) {
265
265
  var rowSize = _a.rowSize;
266
266
  return rowSize && { high: highRow, medium: mediumRow, low: lowRow }[rowSize];
267
267
  }, function (_a) {
package/dist/src/desktop/components/DesktopAlertDialog/DesktopAlertDialog.js CHANGED
@@ -89,7 +89,7 @@ var S_ModalOverlay = styled_components_1.default.div(templateObject_4 || (templa
89
89
  var theme = _a.theme;
90
90
  return theme.ui_cpnt_alertdialog_dimmed;
91
91
  });
92
- var S_ModalWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-sizing: border-box;\n box-shadow: ", ";\n position: fixed;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: auto;\n min-width: 480px;\n max-width: 560px;\n\n ", "\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-sizing: border-box;\n box-shadow: ", ";\n position: fixed;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: auto;\n min-width: 480px;\n max-width: 560px;\n\n ", "\n"])), function (_a) {
92
+ var S_ModalWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-sizing: border-box;\n box-shadow: ", ";\n position: fixed;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: auto;\n min-width: 480px;\n max-width: 560px;\n ", "\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-sizing: border-box;\n box-shadow: ", ";\n position: fixed;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: auto;\n min-width: 480px;\n max-width: 560px;\n ", "\n"])), function (_a) {
93
93
  var theme = _a.theme;
94
94
  return theme.ui_cpnt_alertdialog_base;
95
95
  }, function (_a) {
package/dist/src/desktop/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,14 @@ 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 box-sizing: border-box;\n background-color: ", ";\n border: 2px solid\n ", ";\n border-radius: 14px;\n cursor: ", ";\n display: flex;\n justify-content: space-between;\n\n ", ";\n\n ", "\n"], ["\n align-items: center;\n box-sizing: border-box;\n background-color: ", ";\n border: 2px solid\n ", ";\n border-radius: 14px;\n cursor: ", ";\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 &: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_Select = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: center;\n box-sizing: border-box;\n background-color: ", ";\n border: 2px solid\n ", ";\n border-radius: 14px;\n cursor: ", ";\n display: flex;\n justify-content: space-between;\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n"], ["\n align-items: center;\n box-sizing: border-box;\n background-color: ", ";\n border: 2px solid\n ", ";\n border-radius: 14px;\n cursor: ", ";\n display: flex;\n justify-content: space-between;\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n"])), function (_a) {
274
282
  var state = _a.state;
275
283
  switch (state) {
276
284
  case 'disabled':
@@ -310,10 +318,13 @@ var S_Select = styled_components_1.default.div(templateObject_11 || (templateObj
310
318
  }, function (_a) {
311
319
  var customWidth = _a.customWidth;
312
320
  return customWidth && "width: " + customWidth + ";";
321
+ }, transitionStyle_1.TextFieldTransition, function (_a) {
322
+ var state = _a.state;
323
+ return state === 'normal' && normal_transition;
313
324
  });
314
- 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) {
325
+ 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) {
315
326
  var theme = _a.theme;
316
327
  return theme.spacing.spacingB;
317
328
  });
318
329
  exports.default = Dropdown;
319
- 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;
330
+ 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/desktop/components/EditApplyTextField/EditApplyTextField.js CHANGED
@@ -230,7 +230,14 @@ var disabled = (0, styled_components_1.css)(templateObject_9 || (templateObject_
230
230
  var theme = _a.theme;
231
231
  return theme.ui_cpnt_textfield_border_disabled;
232
232
  });
233
- var S_S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-items: center;\n border-radius: 14px;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\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"])), function (_a) {
233
+ var normal_transition = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __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) {
234
+ var theme = _a.theme;
235
+ return theme.ui_transition_test_text_field_hover;
236
+ }, function (_a) {
237
+ var theme = _a.theme;
238
+ return theme.ui_transition_test_text_field_active;
239
+ });
240
+ var S_S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __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 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"])), function (_a) {
234
241
  var state = _a.state;
235
242
  return (state === 'disabled' ? 'not-allowed' : 'text');
236
243
  }, function (_a) {
@@ -252,8 +259,11 @@ var S_S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_10
252
259
  }, function (_a) {
253
260
  var customWidth = _a.customWidth;
254
261
  return customWidth && "width: " + customWidth + ";";
262
+ }, transitionStyle_1.TextFieldTransition, function (_a) {
263
+ var state = _a.state;
264
+ return state === 'normal' && normal_transition;
255
265
  });
256
- var S_Error = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n margin-right: ", ";\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 margin-right: ", ";\n text-align: left;\n white-space: pre-wrap;\n"])), function (_a) {
266
+ var S_Error = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n margin-right: ", ";\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 margin-right: ", ";\n text-align: left;\n white-space: pre-wrap;\n"])), function (_a) {
257
267
  var theme = _a.theme;
258
268
  return theme.ui_cpnt_textfield_text_error;
259
269
  }, function (_a) {
@@ -272,6 +282,6 @@ var S_Error = styled_components_1.default.div(templateObject_11 || (templateObje
272
282
  var theme = _a.theme, isFocused = _a.isFocused;
273
283
  return isFocused ? theme.spacing.spacingI : theme.spacing.spacingA;
274
284
  });
275
- var S_ButtonBox = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n bottom: -36px;\n display: flex;\n position: absolute;\n right: 0;\n z-index: 1;\n"], ["\n bottom: -36px;\n display: flex;\n position: absolute;\n right: 0;\n z-index: 1;\n"])));
285
+ var S_ButtonBox = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n bottom: -36px;\n display: flex;\n position: absolute;\n right: 0;\n z-index: 1;\n"], ["\n bottom: -36px;\n display: flex;\n position: absolute;\n right: 0;\n z-index: 1;\n"])));
276
286
  exports.default = EditApplyTextField;
277
- 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;
287
+ 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/desktop/components/FloatingActionButton/FloatingActionButton.js CHANGED
@@ -28,7 +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 animationStyle_1 = require("../../../common/styles/movement/animationStyle");
31
+ var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
32
32
  var hybrid_1 = require("../../../hybrid");
33
33
  var TextLabel_1 = require("../TextLabel");
34
34
  // NOTE : 기획상 아직 사용하지 않는 props
@@ -69,7 +69,7 @@ var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_
69
69
  var theme = _a.theme;
70
70
  return theme.ui_cpnt_button_fill_base_disabled;
71
71
  });
72
- var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border: none;\n bottom: 24px;\n box-sizing: border-box;\n box-shadow: ", ";\n cursor: ", ";\n display: flex;\n justify-content: center;\n position: fixed;\n right: 24px;\n /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n z-index: 101;\n\n &:focus {\n outline: none;\n }\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n border: none;\n bottom: 24px;\n box-sizing: border-box;\n box-shadow: ", ";\n cursor: ", ";\n display: flex;\n justify-content: center;\n position: fixed;\n right: 24px;\n /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n z-index: 101;\n\n &:focus {\n outline: none;\n }\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"])), function (_a) {
72
+ var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border: none;\n bottom: 24px;\n box-sizing: border-box;\n box-shadow: ", ";\n cursor: ", ";\n display: flex;\n justify-content: center;\n position: fixed;\n right: 24px;\n /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\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 &:hover:enabled::before {\n background-color: ", ";\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n border: none;\n bottom: 24px;\n box-sizing: border-box;\n box-shadow: ", ";\n cursor: ", ";\n display: flex;\n justify-content: center;\n position: fixed;\n right: 24px;\n /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\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 &:hover:enabled::before {\n background-color: ", ";\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", "\n"])), function (_a) {
73
73
  var theme = _a.theme;
74
74
  return theme.ui_cpnt_button_fill_base_primary;
75
75
  }, function (_a) {
@@ -78,9 +78,12 @@ var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 ||
78
78
  }, function (_a) {
79
79
  var state = _a.state;
80
80
  return (state === 'normal' ? 'pointer' : 'default');
81
- }, animationStyle_1.buttonOnAni, function (_a) {
81
+ }, transitionStyle_1.ButtonTransition, function (_a) {
82
82
  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 );";
83
+ return theme.ui_cpnt_button_fill_on_base_hover;
84
+ }, function (_a) {
85
+ var theme = _a.theme;
86
+ return theme.ui_cpnt_button_fill_on_base_pressed;
84
87
  }, function (_a) {
85
88
  var state = _a.state;
86
89
  return state === 'disabled' && disabled;
package/dist/src/desktop/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,19 +74,19 @@ 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 &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", ";\n"], ["\n background-color: ", ";\n\n &:hover:enabled {\n ", "\n }\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 &: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 ", "\n }\n\n &:hover:enabled::before {\n background-color: ", ";\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_hover + ",\n " + theme.ui_cpnt_button_fill_on_base_hover + "\n );";
84
+ : theme.ui_cpnt_button_fill_on_base_hover;
84
85
  }, function (_a) {
85
86
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
86
87
  return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
87
88
  ? ''
88
- : "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 );";
89
+ : theme.ui_cpnt_button_fill_on_base_pressed;
89
90
  }, function (_a) {
90
91
  var state = _a.state;
91
92
  return state === 'disabled' && fillDisabled;
@@ -97,7 +98,7 @@ var lineDisabled = (0, styled_components_1.css)(templateObject_3 || (templateObj
97
98
  var theme = _a.theme;
98
99
  return theme.ui_cpnt_button_line_border_disabled;
99
100
  });
100
- var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n\n ", ";\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", ";\n"], ["\n background-color: ", ";\n border-color: ", ";\n\n ", ";\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", ";\n"])), function (_a) {
101
+ var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n\n ", ";\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", "\n\n ", ";\n"], ["\n background-color: ", ";\n border-color: ", ";\n\n ", ";\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", "\n\n ", ";\n"])), function (_a) {
101
102
  var theme = _a.theme;
102
103
  return theme.ui_cpnt_button_line_base_default;
103
104
  }, function (_a) {
@@ -119,7 +120,7 @@ var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
119
120
  }, function (_a) {
120
121
  var theme = _a.theme;
121
122
  return "background-color: " + theme.ui_cpnt_button_line_base_pressed + "\n ;";
122
- }, function (_a) {
123
+ }, transitionStyle_1.ButtonTransition, function (_a) {
123
124
  var state = _a.state;
124
125
  return state === 'disabled' && lineDisabled;
125
126
  });
package/dist/src/desktop/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");
@@ -77,12 +78,12 @@ var disabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_
77
78
  var theme = _a.theme;
78
79
  return theme.ui_cpnt_button_fill_base_disabled;
79
80
  });
80
- var normal = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n cursor: pointer;\n\n &:focus {\n outline: none;\n }\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n"], ["\n cursor: pointer;\n\n &:focus {\n outline: none;\n }\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n"])), function (_a) {
81
+ 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 &:hover:enabled::before {\n background-color: ", ";\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 &:hover:enabled::before {\n background-color: ", ";\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n"])), transitionStyle_1.ButtonTransition, function (_a) {
81
82
  var theme = _a.theme;
82
- 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 );";
83
+ return theme.ui_transition_test_main_button_secondary_hover;
83
84
  }, function (_a) {
84
85
  var theme = _a.theme;
85
- 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 );";
86
+ return theme.ui_transition_test_main_button_secondary_active;
86
87
  });
87
88
  var view_only = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: default;\n"], ["\n cursor: default;\n"])));
88
89
  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/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