pds-dev-kit-web 1.4.0 → 1.4.3

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 (40) hide show
  1. package/dist/src/common/assets/icons/fill/CheckboxOn.d.ts +1 -1
  2. package/dist/src/common/assets/icons/fill/CheckboxOn.js +24 -2
  3. package/dist/src/common/assets/icons/fill/index.d.ts +1 -1
  4. package/dist/src/common/styles/colorSet/SemanticColor.json +4 -4
  5. package/dist/src/common/styles/colorSet/UIColor.json +5 -4
  6. package/dist/src/common/styles/colorSet/index.d.ts +232 -231
  7. package/dist/src/common/styles/colorSet/index.js +5 -5
  8. package/dist/src/common/styles/colorSet/ui-type.d.ts +1 -0
  9. package/dist/src/desktop/components/Chip/Chip.js +7 -9
  10. package/dist/src/desktop/components/ContextMenu/ContextMenu.js +1 -1
  11. package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.js +1 -1
  12. package/dist/src/desktop/components/DesktopAlertDialog/DesktopAlertDialog.js +1 -1
  13. package/dist/src/desktop/components/EditApplyTextField/EditApplyTextField.js +3 -4
  14. package/dist/src/desktop/components/FloatingActionButton/FloatingActionButton.js +1 -1
  15. package/dist/src/desktop/components/IconButton/IconButton.js +1 -1
  16. package/dist/src/desktop/components/ImageSlide/ImageSlide.js +1 -1
  17. package/dist/src/desktop/components/MainButton/MainButton.js +1 -1
  18. package/dist/src/desktop/components/ReactionButton/ReactionButton.js +1 -1
  19. package/dist/src/desktop/components/Select/Select.js +1 -1
  20. package/dist/src/desktop/components/TextButton/TextButton.js +1 -1
  21. package/dist/src/desktop/components/UploadIconButton/UploadIconButton.js +1 -1
  22. package/dist/src/hybrid/components/Divider/Divider.js +12 -9
  23. package/dist/src/mobile/components/Card/Card.js +1 -1
  24. package/dist/src/mobile/components/Chip/Chip.js +8 -10
  25. package/dist/src/mobile/components/ContextMenu/ContextMenu.js +1 -1
  26. package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.js +1 -1
  27. package/dist/src/mobile/components/Dropdown/Dropdown.js +1 -1
  28. package/dist/src/mobile/components/IconButton/IconButton.js +1 -1
  29. package/dist/src/mobile/components/ImageSlide/ImageSlide.js +1 -1
  30. package/dist/src/mobile/components/MainButton/MainButton.js +3 -12
  31. package/dist/src/mobile/components/MobileAlertDialog/MobileAlertDialog.js +2 -2
  32. package/dist/src/mobile/components/MobileTabBar/MobileTabBar.js +1 -1
  33. package/dist/src/mobile/components/Radio/Radio.js +1 -1
  34. package/dist/src/mobile/components/ReactionButton/ReactionButton.js +2 -5
  35. package/dist/src/mobile/components/Select/Select.js +1 -1
  36. package/dist/src/mobile/components/TextButton/TextButton.js +1 -4
  37. package/dist/src/mobile/components/UploadIconButton/UploadIconButton.js +1 -1
  38. package/dist/src/mobile/components/UploadMainButton/UploadMainButton.js +2 -8
  39. package/package.json +1 -1
  40. package/release-note.md +2 -166
package/dist/src/desktop/components/Chip/Chip.js CHANGED
@@ -85,7 +85,7 @@ function Chip(_a) {
85
85
  return react_1.default.createElement(S_ChipWrapper, null, chipType());
86
86
  }
87
87
  exports.default = Chip;
88
- var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 16px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n gap: 4px;\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n ", ";\n"], ["\n border-radius: 16px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n gap: 4px;\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n ", ";\n"])), function (_a) {
88
+ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 16px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n ", ";\n"], ["\n border-radius: 16px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n ", ";\n"])), function (_a) {
89
89
  var theme = _a.theme, isActive = _a.isActive;
90
90
  return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : '';
91
91
  }, function (_a) {
@@ -103,11 +103,9 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
103
103
  });
104
104
  var S_CategoryIconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
105
105
  var theme = _a.theme, isActive = _a.isActive;
106
- return isActive
107
- ? "margin-left: " + theme.spacing.spacingA + "px"
108
- : "margin-right: " + theme.spacing.spacingA + "px";
106
+ return isActive ? "margin-left: " + theme.spacing.spacingA : "margin-right: " + theme.spacing.spacingA;
109
107
  });
110
- var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
108
+ var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
111
109
  var theme = _a.theme;
112
110
  return theme.ui_cpnt_chip_fill_base_inactive;
113
111
  }, function (_a) {
@@ -117,7 +115,7 @@ var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateO
117
115
  var theme = _a.theme;
118
116
  return theme.spacing.spacingC;
119
117
  });
120
- var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"], ["\n background-color: ", ";\n border-radius: 16px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"])), function (_a) {
118
+ var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"], ["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"])), function (_a) {
121
119
  var theme = _a.theme;
122
120
  return theme.ui_cpnt_chip_fill_base_inactive;
123
121
  }, function (_a) {
@@ -131,7 +129,7 @@ var S_XIconWrapper = styled_components_1.default.div(templateObject_5 || (templa
131
129
  var theme = _a.theme;
132
130
  return theme.spacing.spacingB;
133
131
  });
134
- var S_FilterSingleChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border-radius: 16px;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"], ["\n border-radius: 16px;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"])), function (_a) {
132
+ var S_FilterSingleChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"], ["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"])), function (_a) {
135
133
  var theme = _a.theme, isActive = _a.isActive;
136
134
  return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : theme.ui_cpnt_chip_fill_base_inactive;
137
135
  }, function (_a) {
@@ -145,14 +143,14 @@ var S_FilterIconWrapper = styled_components_1.default.div(templateObject_7 || (t
145
143
  var theme = _a.theme;
146
144
  return theme.spacing.spacingA;
147
145
  });
148
- var S_LabelChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: 1px solid ", ";\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n"], ["\n border: 1px solid ", ";\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n"])), function (_a) {
146
+ var S_LabelChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n"], ["\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n"])), function (_a) {
149
147
  var theme = _a.theme;
150
148
  return theme.ui_cpnt_chip_line_border_01;
151
149
  }, function (_a) {
152
150
  var theme = _a.theme;
153
151
  return theme.spacing.spacingB;
154
152
  });
155
- var S_TimeChip = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 10px;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n background-color: ", ";\n border-radius: 10px;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (_a) {
153
+ var S_TimeChip = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (_a) {
156
154
  var theme = _a.theme;
157
155
  return theme.ui_cpnt_chip_base_playtime;
158
156
  }, function (_a) {
package/dist/src/desktop/components/ContextMenu/ContextMenu.js CHANGED
@@ -13,7 +13,7 @@ function ContextMenu(_a) {
13
13
  var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b, maxHeight = _a.maxHeight;
14
14
  return (react_1.default.createElement(S_ContextMenu, { autoWidth: autoWidthMode === 'use', maxHeight: maxHeight }, children));
15
15
  }
16
- var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 14px;\n box-shadow: ", ";\n list-style: none;\n margin: 0;\n min-width: 128px;\n overflow-y: auto;\n padding: ", " 0;\n position: relative;\n vertical-align: baseline;\n width: ", ";\n z-index: 3;\n\n max-height: ", ";\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 14px;\n box-shadow: ", ";\n list-style: none;\n margin: 0;\n min-width: 128px;\n overflow-y: auto;\n padding: ", " 0;\n position: relative;\n vertical-align: baseline;\n width: ", ";\n z-index: 3;\n\n max-height: ", ";\n"])), function (_a) {
16
+ var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 14px;\n box-sizing: border-box;\n box-shadow: ", ";\n list-style: none;\n margin: 0;\n min-width: 128px;\n overflow-y: auto;\n padding: ", " 0;\n position: relative;\n vertical-align: baseline;\n width: ", ";\n z-index: 3;\n\n max-height: ", ";\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 14px;\n box-sizing: border-box;\n box-shadow: ", ";\n list-style: none;\n margin: 0;\n min-width: 128px;\n overflow-y: auto;\n padding: ", " 0;\n position: relative;\n vertical-align: baseline;\n width: ", ";\n z-index: 3;\n\n max-height: ", ";\n"])), function (_a) {
17
17
  var theme = _a.theme;
18
18
  return theme.ui_cpnt_contextmenu_base;
19
19
  }, function (_a) {
package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.js CHANGED
@@ -67,7 +67,7 @@ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 =
67
67
  var theme = _a.theme;
68
68
  return theme.spacing.spacingD;
69
69
  });
70
- var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n cursor: pointer;\n display: flex;\n\n ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n cursor: pointer;\n display: flex;\n\n ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
70
+ var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n\n ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n\n ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
71
71
  var theme = _a.theme, selected = _a.selected;
72
72
  return selected
73
73
  ? theme.ui_cpnt_contextmenu_menu_base_selected
package/dist/src/desktop/components/DesktopAlertDialog/DesktopAlertDialog.js CHANGED
@@ -88,7 +88,7 @@ var S_ModalOverlay = styled_components_1.default.div(templateObject_4 || (templa
88
88
  var theme = _a.theme;
89
89
  return theme.ui_cpnt_alertdialog_dimmed;
90
90
  });
91
- 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-shadow: ", ";\n position: fixed;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: auto;\n min-width: 480px;\n max-width: 560px;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-shadow: ", ";\n position: fixed;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: auto;\n min-width: 480px;\n max-width: 560px;\n"])), function (_a) {
91
+ var S_ModalWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-sizing: border-box;\n box-shadow: ", ";\n position: fixed;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: auto;\n min-width: 480px;\n max-width: 560px;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-sizing: border-box;\n box-shadow: ", ";\n position: fixed;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: auto;\n min-width: 480px;\n max-width: 560px;\n"])), function (_a) {
92
92
  var theme = _a.theme;
93
93
  return theme.ui_cpnt_alertdialog_base;
94
94
  }, function (_a) {
package/dist/src/desktop/components/EditApplyTextField/EditApplyTextField.js CHANGED
@@ -28,6 +28,7 @@ var react_1 = __importStar(require("react"));
28
28
  var react_hook_form_1 = require("react-hook-form");
29
29
  var react_i18next_1 = require("react-i18next");
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
+ var hybrid_1 = require("../../../hybrid");
31
32
  var components_1 = require("../../common/components");
32
33
  var IconButton_1 = require("../IconButton");
33
34
  function EditApplyTextField(_a) {
@@ -154,6 +155,7 @@ function EditApplyTextField(_a) {
154
155
  react_1.default.createElement(S_S_TextFieldBaseWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state }, S_TextFieldBase()),
155
156
  isOpen === true && (react_1.default.createElement(S_ButtonBox, null,
156
157
  react_1.default.createElement(IconButton_1.IconButton, { iconName: "ic_xmark", fillType: "line", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_white", borderColorKey: "ui_cpnt_button_line_border_default", tabIndex: -1, onMouseDown: handleCancel }),
158
+ react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
157
159
  react_1.default.createElement(IconButton_1.IconButton, { iconName: "ic_check", fillType: "fill", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_on_primary", baseColorKey: "ui_cpnt_button_fill_base_primary", state: isError === true ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: handleMouseDown, type: "submit" })))),
158
160
  ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && (react_1.default.createElement(S_Error, { isFocused: isFocused }, t(errors[name].message))))));
159
161
  }
@@ -270,9 +272,6 @@ var S_Error = styled_components_1.default.div(templateObject_11 || (templateObje
270
272
  var theme = _a.theme, isFocused = _a.isFocused;
271
273
  return isFocused ? theme.spacing.spacingI : theme.spacing.spacingA;
272
274
  });
273
- var S_ButtonBox = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n bottom: -36px;\n display: flex;\n gap: ", ";\n position: absolute;\n right: 0;\n z-index: 1;\n"], ["\n bottom: -36px;\n display: flex;\n gap: ", ";\n position: absolute;\n right: 0;\n z-index: 1;\n"])), function (_a) {
274
- var theme = _a.theme;
275
- return theme.spacing.spacingB;
276
- });
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"])));
277
276
  exports.default = EditApplyTextField;
278
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;
package/dist/src/desktop/components/FloatingActionButton/FloatingActionButton.js CHANGED
@@ -68,7 +68,7 @@ var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_
68
68
  var theme = _a.theme;
69
69
  return theme.ui_cpnt_button_fill_base_disabled;
70
70
  });
71
- 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-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-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) {
71
+ 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
72
  var theme = _a.theme;
73
73
  return theme.ui_cpnt_button_fill_base_primary;
74
74
  }, function (_a) {
package/dist/src/desktop/components/IconButton/IconButton.js CHANGED
@@ -141,7 +141,7 @@ var line2ColorTheme = (0, styled_components_1.css)(templateObject_11 || (templat
141
141
  var theme = _a.theme;
142
142
  return theme.ui_cpnt_button_line_border_primary;
143
143
  });
144
- var iconButtonStyle = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n cursor: ", ";\n display: flex;\n justify-content: center;\n ", ";\n ", ";\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n cursor: ", ";\n display: flex;\n justify-content: center;\n ", ";\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
144
+ var iconButtonStyle = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n justify-content: center;\n ", ";\n ", ";\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n justify-content: center;\n ", ";\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
145
145
  var state = _a.state;
146
146
  return (state === 'normal' ? 'pointer' : 'default');
147
147
  }, function (_a) {
package/dist/src/desktop/components/ImageSlide/ImageSlide.js CHANGED
@@ -68,7 +68,7 @@ var S_Dot = styled_components_1.default.div(templateObject_3 || (templateObject_
68
68
  return theme.ui_cpnt_imageslide_inactive;
69
69
  });
70
70
  });
71
- var S_ImageSlideWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n min-width: ", ";\n padding: ", ";\n width: ", ";\n\n & > .slider {\n height: auto !important;\n }\n & div:focus {\n outline: none;\n }\n"], ["\n align-items: center;\n display: flex;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n min-width: ", ";\n padding: ", ";\n width: ", ";\n\n & > .slider {\n height: auto !important;\n }\n & div:focus {\n outline: none;\n }\n"])), function (_a) {
71
+ var S_ImageSlideWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n min-width: ", ";\n padding: ", ";\n width: ", ";\n\n & > .slider {\n height: auto !important;\n }\n & div:focus {\n outline: none;\n }\n"], ["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n min-width: ", ";\n padding: ", ";\n width: ", ";\n\n & > .slider {\n height: auto !important;\n }\n & div:focus {\n outline: none;\n }\n"])), function (_a) {
72
72
  var imageWidth = _a.imageWidth;
73
73
  return imageWidth === 'responsive' ? "calc(100% - 48px)" : imageWidth + "px";
74
74
  }, function (_a) {
package/dist/src/desktop/components/MainButton/MainButton.js CHANGED
@@ -244,7 +244,7 @@ var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObjec
244
244
  var state = _a.state;
245
245
  return state === 'disabled' && secondaryDisabled;
246
246
  });
247
- var S_Button = styled_components_1.default.button(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n\n &:focus {\n outline: none;\n }\n ", "\n ", "\n ", "\n ", ";\n\n & > div {\n ", ";\n }\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n\n &:focus {\n outline: none;\n }\n ", "\n ", "\n ", "\n ", ";\n\n & > div {\n ", ";\n }\n"])), function (_a) {
247
+ var S_Button = styled_components_1.default.button(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n\n &:focus {\n outline: none;\n }\n ", "\n ", "\n ", "\n ", ";\n\n & > div {\n ", ";\n }\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n\n &:focus {\n outline: none;\n }\n ", "\n ", "\n ", "\n ", ";\n\n & > div {\n ", ";\n }\n"])), function (_a) {
248
248
  var state = _a.state;
249
249
  return (state === 'normal' ? 'pointer' : 'default');
250
250
  }, function (_a) {
package/dist/src/desktop/components/ReactionButton/ReactionButton.js CHANGED
@@ -103,7 +103,7 @@ function ReactionButton(_a) {
103
103
  react_1.default.createElement(TextLabel_1.TextLabel, { text: convertFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() }),
104
104
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })));
105
105
  }
106
- 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 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 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) {
106
+ 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) {
107
107
  var theme = _a.theme;
108
108
  return theme.ui_cpnt_reactionbutton_base_01;
109
109
  });
package/dist/src/desktop/components/Select/Select.js CHANGED
@@ -110,7 +110,7 @@ var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templa
110
110
  var theme = _a.theme;
111
111
  return theme.spacing.spacingD;
112
112
  });
113
- 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 cursor: pointer;\n color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n width: 100%;\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 cursor: pointer;\n color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n width: 100%;\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) {
113
+ 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 width: 100%;\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 width: 100%;\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) {
114
114
  var theme = _a.theme;
115
115
  return theme.ui_cpnt_select_base_normal;
116
116
  }, function (_a) {
package/dist/src/desktop/components/TextButton/TextButton.js CHANGED
@@ -80,7 +80,7 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
80
80
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n"], ["\n border-radius: 14px;\n height: 40px;\n"])));
81
81
  var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n"], ["\n border-radius: 10px;\n height: 32px;\n"])));
82
82
  var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 8px;\n height: 24px;\n"], ["\n border-radius: 8px;\n height: 24px;\n"])));
83
- 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 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 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) {
83
+ 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) {
84
84
  var state = _a.state;
85
85
  return (state === 'normal' ? 'pointer' : 'default');
86
86
  }, function (_a) {
package/dist/src/desktop/components/UploadIconButton/UploadIconButton.js CHANGED
@@ -127,7 +127,7 @@ var large = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 =
127
127
  var medium = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
128
128
  var small = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n height: 32px;\n width: 32px;\n"], ["\n height: 32px;\n width: 32px;\n"])));
129
129
  var xsmall = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n height: 24px;\n width: 24px;\n"], ["\n height: 24px;\n width: 24px;\n"])));
130
- var S_UploadIconButton = styled_components_1.default.label(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: ", ";\n box-shadow: ", ";\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n\n ", ";\n\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: ", ";\n box-shadow: ", ";\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n\n ", ";\n\n ", ";\n"])), function (_a) {
130
+ var S_UploadIconButton = styled_components_1.default.label(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: ", ";\n box-sizing: border-box;\n box-shadow: ", ";\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n\n ", ";\n\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: ", ";\n box-sizing: border-box;\n box-shadow: ", ";\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n\n ", ";\n\n ", ";\n"])), function (_a) {
131
131
  var shapeType = _a.shapeType;
132
132
  return shapeType === 'circular' && '50%';
133
133
  }, function (_a) {
package/dist/src/hybrid/components/Divider/Divider.js CHANGED
@@ -32,31 +32,34 @@ function Divider(_a) {
32
32
  var _b = _a.displayType, displayType = _b === void 0 ? 'line' : _b, _c = _a.direction, direction = _c === void 0 ? 'horizontal' : _c, height = _a.height, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d;
33
33
  return (react_1.default.createElement(S_Divider, { displayType: displayType, "$height": height, "$direction": direction, colorTheme: colorTheme }));
34
34
  }
35
- var horizontal = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: ", ";\n width: 100%;\n"], ["\n height: ", ";\n width: 100%;\n"])), function (_a) {
35
+ var horizontal = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: ", ";\n background-color: ", ";\n width: 100%;\n"], ["\n height: ", ";\n background-color: ", ";\n width: 100%;\n"])), function (_a) {
36
36
  var displayType = _a.displayType;
37
37
  return displayType &&
38
38
  {
39
39
  line: '1px',
40
40
  area: '16px'
41
41
  }[displayType];
42
+ }, function (_a) {
43
+ var displayType = _a.displayType, theme = _a.theme;
44
+ return displayType &&
45
+ {
46
+ line: theme.ui_cpnt_divider,
47
+ area: theme.ui_cpnt_divider_area
48
+ }[displayType];
42
49
  });
43
50
  var vertical = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: inline-block;\n height: ", ";\n width: 1px;\n"], ["\n display: inline-block;\n height: ", ";\n width: 1px;\n"])), function (_a) {
44
51
  var $height = _a.$height;
45
52
  return ($height ? $height + "px" : '100%');
46
53
  });
47
- var S_Divider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n ", ";\n ", ";\n"], ["\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
48
- var colorTheme = _a.colorTheme, theme = _a.theme;
49
- return colorTheme &&
50
- {
51
- none: "background-color: " + theme.ui_cpnt_divider + ";",
52
- divider1: "background-color: " + theme.ui_cpnt_divider_white_opacity30 + ";"
53
- }[colorTheme];
54
- }, function (_a) {
54
+ var S_Divider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n ", ";\n ", "\n"], ["\n ", ";\n ", ";\n ", "\n"])), function (_a) {
55
55
  var $direction = _a.$direction;
56
56
  return $direction === 'horizontal' && horizontal;
57
57
  }, function (_a) {
58
58
  var $direction = _a.$direction, displayType = _a.displayType;
59
59
  return $direction === 'vertical' && displayType === 'line' && vertical;
60
+ }, function (_a) {
61
+ var colorTheme = _a.colorTheme, theme = _a.theme;
62
+ return colorTheme === 'divider1' && "background-color: " + theme.ui_cpnt_divider_white_opacity30 + ";";
60
63
  });
61
64
  exports.default = Divider;
62
65
  var templateObject_1, templateObject_2, templateObject_3;
package/dist/src/mobile/components/Card/Card.js CHANGED
@@ -35,7 +35,7 @@ var S_CardGroups = styled_components_1.default.div(templateObject_1 || (template
35
35
  return theme.boxShadow.elevation2 + ", 0 0 0 2px " + theme.ui_cpnt_card_selected_border + " inset";
36
36
  });
37
37
  var S_ImageIconModeBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n div {\n border-radius: 16px 16px 0 0;\n }\n"], ["\n div {\n border-radius: 16px 16px 0 0;\n }\n"])));
38
- var S_Content = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: ", "; ;\n"], ["\n display: flex;\n flex-direction: column;\n padding: ", "; ;\n"])), function (_a) {
38
+ var S_Content = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n padding: ", "; ;\n"], ["\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n padding: ", "; ;\n"])), function (_a) {
39
39
  var theme = _a.theme;
40
40
  return theme.spacing.spacingD;
41
41
  });
package/dist/src/mobile/components/Chip/Chip.js CHANGED
@@ -56,7 +56,7 @@ function Chip(_a) {
56
56
  switch (displayType) {
57
57
  case 'category_choice':
58
58
  return (react_1.default.createElement(S_CategoryChoiceChip, { isActive: isActive, onClick: handleClickChip },
59
- id !== value && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
59
+ !isActive && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
60
60
  react_1.default.createElement(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }))),
61
61
  react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
62
62
  isActive && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
@@ -85,7 +85,7 @@ function Chip(_a) {
85
85
  return react_1.default.createElement(S_ChipWrapper, null, chipType());
86
86
  }
87
87
  exports.default = Chip;
88
- var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 16px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n gap: 4px;\n ", ";\n"], ["\n border-radius: 16px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n gap: 4px;\n ", ";\n"])), function (_a) {
88
+ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 16px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n ", ";\n"], ["\n border-radius: 16px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n ", ";\n"])), function (_a) {
89
89
  var theme = _a.theme, isActive = _a.isActive;
90
90
  return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : '';
91
91
  }, function (_a) {
@@ -100,11 +100,9 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
100
100
  });
101
101
  var S_CategoryIconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
102
102
  var theme = _a.theme, isActive = _a.isActive;
103
- return isActive
104
- ? "margin-left: " + theme.spacing.spacingA + "px"
105
- : "margin-right: " + theme.spacing.spacingA + "px";
103
+ return isActive ? "margin-left: " + theme.spacing.spacingA : "margin-right: " + theme.spacing.spacingA;
106
104
  });
107
- var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
105
+ var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
108
106
  var theme = _a.theme;
109
107
  return theme.ui_cpnt_chip_fill_base_inactive;
110
108
  }, function (_a) {
@@ -114,7 +112,7 @@ var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateO
114
112
  var theme = _a.theme;
115
113
  return theme.spacing.spacingC;
116
114
  });
117
- var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n background-color: ", ";\n border-radius: 16px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
115
+ var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
118
116
  var theme = _a.theme;
119
117
  return theme.ui_cpnt_chip_fill_base_inactive;
120
118
  }, function (_a) {
@@ -128,7 +126,7 @@ var S_XIconWrapper = styled_components_1.default.div(templateObject_5 || (templa
128
126
  var theme = _a.theme;
129
127
  return theme.spacing.spacingB;
130
128
  });
131
- var S_FilterSingleChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border-radius: 16px;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n border-radius: 16px;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
129
+ var S_FilterSingleChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
132
130
  var theme = _a.theme, isActive = _a.isActive;
133
131
  return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : theme.ui_cpnt_chip_fill_base_inactive;
134
132
  }, function (_a) {
@@ -142,14 +140,14 @@ var S_FilterIconWrapper = styled_components_1.default.div(templateObject_7 || (t
142
140
  var theme = _a.theme;
143
141
  return theme.spacing.spacingA;
144
142
  });
145
- var S_LabelChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: 1px solid ", ";\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n"], ["\n border: 1px solid ", ";\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n"])), function (_a) {
143
+ var S_LabelChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n"], ["\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n"])), function (_a) {
146
144
  var theme = _a.theme;
147
145
  return theme.ui_cpnt_chip_line_border_01;
148
146
  }, function (_a) {
149
147
  var theme = _a.theme;
150
148
  return theme.spacing.spacingB;
151
149
  });
152
- var S_TimeChip = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 10px;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n background-color: ", ";\n border-radius: 10px;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (_a) {
150
+ var S_TimeChip = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (_a) {
153
151
  var theme = _a.theme;
154
152
  return theme.ui_cpnt_chip_base_playtime;
155
153
  }, function (_a) {
package/dist/src/mobile/components/ContextMenu/ContextMenu.js CHANGED
@@ -13,7 +13,7 @@ function ContextMenu(_a) {
13
13
  var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b, maxHeight = _a.maxHeight;
14
14
  return (react_1.default.createElement(S_ContextMenu, { autoWidth: autoWidthMode === 'use', maxHeight: maxHeight }, children));
15
15
  }
16
- var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 14px;\n box-shadow: ", ";\n list-style: none;\n margin: 0;\n min-width: 128px;\n overflow-y: auto;\n padding: ", " 0;\n vertical-align: baseline;\n width: ", ";\n max-height: ", ";\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 14px;\n box-shadow: ", ";\n list-style: none;\n margin: 0;\n min-width: 128px;\n overflow-y: auto;\n padding: ", " 0;\n vertical-align: baseline;\n width: ", ";\n max-height: ", ";\n"])), function (_a) {
16
+ var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 14px;\n box-sizing: border-box;\n box-shadow: ", ";\n list-style: none;\n margin: 0;\n min-width: 128px;\n overflow-y: auto;\n padding: ", " 0;\n vertical-align: baseline;\n width: ", ";\n max-height: ", ";\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 14px;\n box-sizing: border-box;\n box-shadow: ", ";\n list-style: none;\n margin: 0;\n min-width: 128px;\n overflow-y: auto;\n padding: ", " 0;\n vertical-align: baseline;\n width: ", ";\n max-height: ", ";\n"])), function (_a) {
17
17
  var theme = _a.theme;
18
18
  return theme.ui_cpnt_contextmenu_base;
19
19
  }, function (_a) {
package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.js CHANGED
@@ -67,7 +67,7 @@ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 =
67
67
  var theme = _a.theme;
68
68
  return theme.spacing.spacingD;
69
69
  });
70
- var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n\n ", ";\n"])), function (_a) {
70
+ var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n\n ", ";\n"])), function (_a) {
71
71
  var theme = _a.theme, selected = _a.selected;
72
72
  return selected
73
73
  ? theme.ui_cpnt_contextmenu_menu_base_selected
package/dist/src/mobile/components/Dropdown/Dropdown.js CHANGED
@@ -233,7 +233,7 @@ var borderColor = (0, styled_components_1.css)(templateObject_10 || (templateObj
233
233
  return theme.ui_cpnt_dropdown_border_normal;
234
234
  }
235
235
  });
236
- 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 display: flex;\n justify-content: space-between;\n\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border: 2px solid\n ", ";\n border-radius: 14px;\n display: flex;\n justify-content: space-between;\n\n ", ";\n"])), function (_a) {
236
+ 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 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"])), function (_a) {
237
237
  var state = _a.state;
238
238
  switch (state) {
239
239
  case 'disabled':
package/dist/src/mobile/components/IconButton/IconButton.js CHANGED
@@ -133,7 +133,7 @@ var line2ColorTheme = (0, styled_components_1.css)(templateObject_11 || (templat
133
133
  var theme = _a.theme;
134
134
  return theme.ui_cpnt_button_line_border_primary;
135
135
  });
136
- var iconButtonStyle = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n display: flex;\n justify-content: center;\n ", ";\n ", ";\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n display: flex;\n justify-content: center;\n ", ";\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
136
+ var iconButtonStyle = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n ", ";\n ", ";\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n ", ";\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
137
137
  var shapeType = _a.shapeType;
138
138
  return shapeType && { circular: 'border-radius: 50%', rectangle: '' }[shapeType];
139
139
  }, function (_a) {
package/dist/src/mobile/components/ImageSlide/ImageSlide.js CHANGED
@@ -68,7 +68,7 @@ var S_Dot = styled_components_1.default.div(templateObject_3 || (templateObject_
68
68
  return theme.ui_cpnt_imageslide_inactive;
69
69
  });
70
70
  });
71
- var S_ImageSlideWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n min-width: ", ";\n padding: ", ";\n width: ", ";\n\n & > .slider {\n height: auto !important;\n }\n & div:focus {\n outline: none;\n }\n"], ["\n align-items: center;\n display: flex;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n min-width: ", ";\n padding: ", ";\n width: ", ";\n\n & > .slider {\n height: auto !important;\n }\n & div:focus {\n outline: none;\n }\n"])), function (_a) {
71
+ var S_ImageSlideWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n min-width: ", ";\n padding: ", ";\n width: ", ";\n\n & > .slider {\n height: auto !important;\n }\n & div:focus {\n outline: none;\n }\n"], ["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n min-width: ", ";\n padding: ", ";\n width: ", ";\n\n & > .slider {\n height: auto !important;\n }\n & div:focus {\n outline: none;\n }\n"])), function (_a) {
72
72
  var imageWidth = _a.imageWidth;
73
73
  return imageWidth === 'responsive' ? "calc(100% - 48px)" : imageWidth + "px";
74
74
  }, function (_a) {
package/dist/src/mobile/components/MainButton/MainButton.js CHANGED
@@ -205,12 +205,9 @@ var primaryDisabled = (0, styled_components_1.css)(templateObject_13 || (templat
205
205
  var theme = _a.theme;
206
206
  return theme.ui_cpnt_button_fill_base_disabled;
207
207
  });
208
- 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) {
208
+ var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"])), function (_a) {
209
209
  var theme = _a.theme;
210
210
  return theme.ui_cpnt_button_fill_base_primary;
211
- }, function (_a) {
212
- var theme = _a.theme;
213
- 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 );";
214
211
  }, function (_a) {
215
212
  var theme = _a.theme;
216
213
  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 );";
@@ -222,12 +219,9 @@ var secondaryDisabled = (0, styled_components_1.css)(templateObject_15 || (templ
222
219
  var theme = _a.theme;
223
220
  return theme.ui_cpnt_button_line_base_hover;
224
221
  });
225
- 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) {
222
+ var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"])), function (_a) {
226
223
  var theme = _a.theme;
227
224
  return theme.ui_cpnt_button_line_base_hover;
228
- }, function (_a) {
229
- var theme = _a.theme;
230
- 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 );";
231
225
  }, function (_a) {
232
226
  var theme = _a.theme;
233
227
  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 );";
@@ -235,10 +229,7 @@ var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObjec
235
229
  var state = _a.state;
236
230
  return state === 'disabled' && secondaryDisabled;
237
231
  });
238
- var S_Button = styled_components_1.default.button(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n cursor: ", ";\n display: flex;\n justify-content: center;\n\n &:focus {\n outline: none;\n }\n\n ", "\n ", "\n ", "\n ", ";\n\n & > div {\n ", ";\n }\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n cursor: ", ";\n display: flex;\n justify-content: center;\n\n &:focus {\n outline: none;\n }\n\n ", "\n ", "\n ", "\n ", ";\n\n & > div {\n ", ";\n }\n"])), function (_a) {
239
- var state = _a.state;
240
- return (state === 'normal' ? 'pointer' : 'default');
241
- }, function (_a) {
232
+ var S_Button = styled_components_1.default.button(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n\n &:focus {\n outline: none;\n }\n\n ", "\n ", "\n ", "\n ", ";\n\n & > div {\n ", ";\n }\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n\n &:focus {\n outline: none;\n }\n\n ", "\n ", "\n ", "\n ", ";\n\n & > div {\n ", ";\n }\n"])), function (_a) {
242
233
  var styleTheme = _a.styleTheme;
243
234
  return styleTheme && { primary: primary, secondary: secondary }[styleTheme];
244
235
  }, function (_a) {
package/dist/src/mobile/components/MobileAlertDialog/MobileAlertDialog.js CHANGED
@@ -89,7 +89,7 @@ var S_ModalOverlay = styled_components_1.default.div(templateObject_2 || (templa
89
89
  var theme = _a.theme;
90
90
  return theme.ui_cpnt_modal_dimmed;
91
91
  });
92
- var S_ModalWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-shadow: ", ";\n position: fixed;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n max-height: 720px;\n width: calc(100% - 80px);\n max-width: 512px;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-shadow: ", ";\n position: fixed;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n max-height: 720px;\n width: calc(100% - 80px);\n max-width: 512px;\n"])), function (_a) {
92
+ var S_ModalWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-sizing: border-box;\n box-shadow: ", ";\n position: fixed;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n max-height: 720px;\n width: calc(100% - 80px);\n max-width: 512px;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-sizing: border-box;\n box-shadow: ", ";\n position: fixed;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n max-height: 720px;\n width: calc(100% - 80px);\n max-width: 512px;\n"])), function (_a) {
93
93
  var theme = _a.theme;
94
94
  return theme.ui_cpnt_alertdialog_base;
95
95
  }, function (_a) {
@@ -99,7 +99,7 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_3 || (templa
99
99
  var theme = _a.theme;
100
100
  return theme.boxShadow.elevation5;
101
101
  });
102
- var S_Footer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n justify-content: ", ";\n\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n justify-content: ", ";\n\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
102
+ var S_Footer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n justify-content: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n justify-content: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
103
103
  var btnStack = _a.btnStack;
104
104
  return (btnStack === 'side' ? 'row' : 'column-reverse');
105
105
  }, function (_a) {
package/dist/src/mobile/components/MobileTabBar/MobileTabBar.js CHANGED
@@ -35,7 +35,7 @@ function MobileTabBar(_a) {
35
35
  }
36
36
  return react_1.default.createElement(react_1.default.Fragment, null);
37
37
  }
38
- var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n cursor: pointer;\n display: flex;\n position: relative;\n background-color: ", ";\n padding: 0 ", ";\n flex: 1;\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"], ["\n align-items: center;\n justify-content: center;\n cursor: pointer;\n display: flex;\n position: relative;\n background-color: ", ";\n padding: 0 ", ";\n flex: 1;\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"])), function (_a) {
38
+ var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n display: flex;\n position: relative;\n background-color: ", ";\n padding: 0 ", ";\n flex: 1;\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"], ["\n align-items: center;\n justify-content: center;\n display: flex;\n position: relative;\n background-color: ", ";\n padding: 0 ", ";\n flex: 1;\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"])), function (_a) {
39
39
  var isActive = _a.isActive, theme = _a.theme;
40
40
  return isActive && theme.ui_cpnt_tabbar_base_area;
41
41
  }, function (_a) {
package/dist/src/mobile/components/Radio/Radio.js CHANGED
@@ -39,7 +39,7 @@ function Radio(_a) {
39
39
  : 'ui_cpnt_selcontrols_text_disabled' })),
40
40
  react_1.default.createElement("input", { hidden: true, id: value, type: "radio", name: name, value: value, checked: checked, color: value, onChange: handleChange, disabled: state === 'disabled' })));
41
41
  }
42
- var S_Label = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n cursor: pointer;\n display: flex;\n height: 24px;\n"], ["\n align-items: center;\n cursor: pointer;\n display: flex;\n height: 24px;\n"])));
42
+ var S_Label = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 24px;\n"], ["\n align-items: center;\n display: flex;\n height: 24px;\n"])));
43
43
  var S_OverrideIconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n position: relative;\n"], ["\n align-items: center;\n display: flex;\n position: relative;\n"])));
44
44
  var S_OverrideIcon = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n left: 0;\n position: absolute;\n top: 0;\n"], ["\n left: 0;\n position: absolute;\n top: 0;\n"])));
45
45
  var S_TextWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding-left: ", ";\n"], ["\n padding-left: ", ";\n"])), function (_a) {
package/dist/src/mobile/components/ReactionButton/ReactionButton.js CHANGED
@@ -65,7 +65,7 @@ function ReactionButton(_a) {
65
65
  case status === 'default' && colorTheme === 'none':
66
66
  return 'sysTextSecondary';
67
67
  case status === 'select' && colorTheme === 'none':
68
- return 'sysTextBrandPrimary';
68
+ return 'usrTextBrandPrimary';
69
69
  default:
70
70
  return 'sysTextSecondary';
71
71
  }
@@ -103,10 +103,7 @@ function ReactionButton(_a) {
103
103
  react_1.default.createElement(TextLabel_1.TextLabel, { text: convertFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() }),
104
104
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })));
105
105
  }
106
- 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 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 display: flex;\n justify-content: center;\n padding: 0;\n height: 32px;\n\n &:hover:enabled {\n background-color: ", ";\n }\n"])), function (_a) {
107
- var theme = _a.theme;
108
- return theme.ui_cpnt_reactionbutton_base_01;
109
- });
106
+ 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 display: flex;\n justify-content: center;\n padding: 0;\n height: 32px;\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding: 0;\n height: 32px;\n"])));
110
107
  var S_ReactionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), ReactionButtonStyle);
111
108
  exports.default = ReactionButton;
112
109
  var templateObject_1, templateObject_2;
package/dist/src/mobile/components/Select/Select.js CHANGED
@@ -106,7 +106,7 @@ var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templa
106
106
  var theme = _a.theme;
107
107
  return theme.spacing.spacingD;
108
108
  });
109
- 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 color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n width: 100%;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n"], ["\n appearance: none;\n background-color: ", ";\n border: 2px solid ", ";\n border-radius: ", ";\n color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n width: 100%;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n"])), function (_a) {
109
+ var S_Select = styled_components_1.default.select(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n appearance: none;\n background-color: ", ";\n border: 2px solid ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n width: 100%;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n"], ["\n appearance: none;\n background-color: ", ";\n border: 2px solid ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n width: 100%;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n"])), function (_a) {
110
110
  var theme = _a.theme;
111
111
  return theme.ui_cpnt_select_base_normal;
112
112
  }, function (_a) {
package/dist/src/mobile/components/TextButton/TextButton.js CHANGED
@@ -80,10 +80,7 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
80
80
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n"], ["\n border-radius: 14px;\n height: 40px;\n"])));
81
81
  var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n"], ["\n border-radius: 10px;\n height: 32px;\n"])));
82
82
  var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 8px;\n height: 24px;\n"], ["\n border-radius: 8px;\n height: 24px;\n"])));
83
- 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 cursor: ", ";\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n &:active:enabled {\n background-color: ", ";\n }\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n cursor: ", ";\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n &:active:enabled {\n background-color: ", ";\n }\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"])), function (_a) {
84
- var state = _a.state;
85
- return (state === 'normal' ? 'pointer' : 'default');
86
- }, function (_a) {
83
+ var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n &:active:enabled {\n background-color: ", ";\n }\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n &:active:enabled {\n background-color: ", ";\n }\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"])), function (_a) {
87
84
  var theme = _a.theme;
88
85
  return theme.ui_cpnt_button_line_base_pressed;
89
86
  }, function (_a) {