pds-dev-kit-web 0.4.2 → 0.5.0

package/dist/src/desktop/components/ImageSlide/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageSlide = void 0;
+var ImageSlide_1 = require("./ImageSlide");
+Object.defineProperty(exports, "ImageSlide", { enumerable: true, get: function () { return __importDefault(ImageSlide_1).default; } });

package/dist/src/desktop/components/MainButton/MainButton.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import fillIcons from '../../../common/assets/icons/fill';
+import lineIcons from '../../../common/assets/icons/line';
+export declare type FillIconNameKeys = keyof typeof fillIcons;
+export declare type LineIconNameKeys = keyof typeof lineIcons;
+export declare type MainButtonProps = {
+    text?: string;
+    fillType?: 'fill' | 'line';
+    size?: 'large' | 'medium' | 'small' | 'xsmall' | 'rlarge';
+    fontWeight?: 'bold' | 'regular';
+    iconMode?: 'none' | 'left' | 'right';
+    iconFillType?: 'fill' | 'line';
+    iconName?: FillIconNameKeys | LineIconNameKeys;
+    colorTheme?: 'none' | 'line1' | 'line2' | 'line3';
+    type?: 'button' | 'submit';
+    state?: 'normal' | 'disabled';
+    onClick?: (...args: any) => any;
+    onMouseDown?: (...args: any) => any;
+};
+declare function MainButton({ text, fillType, size, fontWeight, iconMode, iconFillType, iconName, colorTheme, type, state, onClick, onMouseDown }: MainButtonProps): JSX.Element;
+export default MainButton;

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

@@ -0,0 +1,190 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+var TextLabel_1 = require("../TextLabel");
+// NOTE : 기획상 아직 사용하지 않는 props
+// shapeType?: 'round' | 'circular' | 'rectangle';
+// textColorKey?: string;
+// baseColorKey?: string;
+// borderColorKey?: string;
+// shadow?: 'hidden' | 'visible';
+function MainButton(_a) {
+    var text = _a.text, _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, fontWeight = _a.fontWeight, _d = _a.iconMode, iconMode = _d === void 0 ? 'none' : _d, _e = _a.iconFillType, iconFillType = _e === void 0 ? 'line' : _e, iconName = _a.iconName, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, _g = _a.type, type = _g === void 0 ? 'button' : _g, _h = _a.state, state = _h === void 0 ? 'normal' : _h, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    var textStyle = {
+        rlarge: 'body1Bold',
+        large: 'body1Bold',
+        medium: 'body2Bold',
+        small: 'caption1Bold',
+        xsmall: 'caption1Regular'
+    };
+    var textThemeColorLineObj = {
+        line1: 'ui_cpnt_button_text_error',
+        line2: 'ui_cpnt_button_text_primary',
+        line3: 'ui_cpnt_button_text_darktheme_enabled'
+    };
+    var textColor = {
+        fill: 'usrTextBrandOnPrimary',
+        line: 'sysTextPrimary'
+    };
+    var selectTextThemeColor = function () {
+        if (colorTheme === 'line3' && state === 'disabled') {
+            return 'ui_cpnt_button_text_darktheme_disabled';
+        }
+        if (fillType === 'line' && colorTheme !== 'none' && state !== 'disabled') {
+            return textThemeColorLineObj[colorTheme];
+        }
+        return undefined;
+    };
+    var iconFillTypeColorObj = {
+        fill: 'ui_cpnt_button_icon_on_primary',
+        line: 'ui_cpnt_button_icon_enabled'
+    };
+    var iconColorThemeLineColorObj = {
+        line1: 'ui_cpnt_button_icon_error',
+        line2: 'ui_cpnt_button_icon_primary',
+        line3: 'ui_cpnt_button_icon_darktheme_enabled'
+    };
+    var iconColor = function () {
+        if (state === 'disabled') {
+            if (colorTheme === 'line3') {
+                return 'ui_cpnt_button_icon_darktheme_disabled';
+            }
+            return 'ui_cpnt_button_icon_disabled';
+        }
+        if (fillType === 'line' && colorTheme !== 'none') {
+            return iconColorThemeLineColorObj[colorTheme];
+        }
+        return iconFillTypeColorObj[fillType];
+    };
+    return (react_1.default.createElement(S_Button, { fillType: fillType, size: size, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: onClick, onMouseDown: onMouseDown },
+        size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
+            react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], btnMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[fillType], colorOverride: selectTextThemeColor() }),
+        size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
+            react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
+}
+var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 24px;\n  height: 48px;\n  min-width: 96px;\n  padding: 0 24px;\n  ", ";\n"], ["\n  border-radius: 24px;\n  height: 48px;\n  min-width: 96px;\n  padding: 0 24px;\n  ", ";\n"])), function (_a) {
+    var size = _a.size;
+    return size === 'rlarge' && 'width: 100%';
+});
+var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 20px;\n  height: 40px;\n  padding: 0 24px;\n"], ["\n  border-radius: 20px;\n  height: 40px;\n  padding: 0 24px;\n"])));
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 16px;\n  height: 32px;\n  padding: 0 16px;\n"], ["\n  border-radius: 16px;\n  height: 32px;\n  padding: 0 16px;\n"])));
+var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: 24px;\n  padding: 0 16px;\n"], ["\n  border-radius: 12px;\n  height: 24px;\n  padding: 0 16px;\n"])));
+var fillDisabled = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_disabled;
+});
+var fill = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n\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) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_primary;
+}, function (_a) {
+    var theme = _a.theme;
+    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  );";
+}, function (_a) {
+    var theme = _a.theme;
+    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
+}, function (_a) {
+    var state = _a.state;
+    return state === 'disabled' && fillDisabled;
+});
+var none = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: solid 1px ", ";\n"], ["\n  border: solid 1px ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_border_enabled;
+});
+var line1 = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border: solid 1px ", ";\n"], ["\n  border: solid 1px ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_border_error;
+});
+var line2 = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  border: solid 1px ", ";\n"], ["\n  border: solid 1px ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_border_primary;
+});
+var line3 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px ", ";\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n"], ["\n  background-color: ", ";\n  border: solid 1px ", ";\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_darktheme_default;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_border_darktheme_enabled;
+}, function (_a) {
+    var theme = _a.theme;
+    return "background-color: " + theme.ui_cpnt_button_line_base_darktheme_hover + ";";
+}, function (_a) {
+    var theme = _a.theme;
+    return "background-color: " + theme.ui_cpnt_button_line_base_darktheme_pressed + ";";
+});
+var lineDisabled = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"])), function (_a) {
+    var theme = _a.theme, colorTheme = _a.colorTheme;
+    return colorTheme === 'line3'
+        ? theme.ui_cpnt_button_line_base_darktheme_default
+        : theme.ui_cpnt_button_line_base_default;
+}, function (_a) {
+    var theme = _a.theme, colorTheme = _a.colorTheme;
+    return colorTheme === 'line3'
+        ? theme.ui_cpnt_button_line_border_darktheme_disabled
+        : theme.ui_cpnt_button_line_border_disabled;
+});
+var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n  &: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) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_default;
+}, function (_a) {
+    var theme = _a.theme;
+    return "background-color: " + theme.ui_cpnt_button_line_base_hover + ";";
+}, function (_a) {
+    var theme = _a.theme;
+    return "background-color: " + theme.ui_cpnt_button_line_base_pressed + ";";
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme && { none: none, line1: line1, line2: line2, line3: line3 }[colorTheme];
+}, function (_a) {
+    var state = _a.state;
+    return state === 'disabled' && lineDisabled;
+});
+var S_Button = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __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  & > 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  & > div {\n    ", ";\n  }\n"])), function (_a) {
+    var state = _a.state;
+    return (state === 'normal' ? 'pointer' : 'default');
+}, function (_a) {
+    var fillType = _a.fillType;
+    return fillType && { fill: fill, line: line }[fillType];
+}, function (_a) {
+    var size = _a.size;
+    return size && { large: large, medium: medium, small: small, xsmall: xsmall, rlarge: large }[size];
+}, function (_a) {
+    var theme = _a.theme, fontWeight = _a.fontWeight;
+    return fontWeight &&
+        {
+            bold: "font-weight: " + theme.fontWeight.bold,
+            regular: "font-weight: " + theme.fontWeight.normal
+        }[fontWeight];
+});
+exports.default = MainButton;
+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/MainButton/index.d.ts

@@ -0,0 +1 @@
+export { default as MainButton } from './MainButton';

package/dist/src/desktop/components/MainButton/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MainButton = void 0;
+var MainButton_1 = require("./MainButton");
+Object.defineProperty(exports, "MainButton", { enumerable: true, get: function () { return __importDefault(MainButton_1).default; } });

package/dist/src/desktop/components/Radio/Radio.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare type RadioProps = {
+    text?: string;
+    fontWeight?: 'bold' | 'regular';
+    state?: 'normal' | 'disabled';
+    checked?: boolean;
+    name: string;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+declare function Radio({ text, fontWeight, state, checked, name, value, onChange }: RadioProps): JSX.Element;
+export default Radio;

package/dist/src/desktop/components/Radio/Radio.js

@@ -0,0 +1,45 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+var TextLabel_1 = require("../TextLabel");
+function Radio(_a) {
+    var text = _a.text, _b = _a.fontWeight, fontWeight = _b === void 0 ? 'regular' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, name = _a.name, value = _a.value, onChange = _a.onChange;
+    var icon = function () {
+        switch (state) {
+            case 'normal': {
+                return checked ? (react_1.default.createElement(hybrid_1.Icon, { size: 16, iconName: "ic_radio_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" })) : (react_1.default.createElement(hybrid_1.Icon, { size: 16, iconName: "ic_radio_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_default" }));
+            }
+            case 'disabled': {
+                return checked ? (react_1.default.createElement(S_OverrideIconWrapper, null,
+                    react_1.default.createElement(hybrid_1.Icon, { size: 16, iconName: "ic_radio_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" }),
+                    react_1.default.createElement(S_OverrideIcon, null,
+                        react_1.default.createElement(hybrid_1.Icon, { size: 16, iconName: "ic_radio_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_on_base_hover" })))) : (react_1.default.createElement(hybrid_1.Icon, { size: 16, iconName: "ic_radio_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_disabled" }));
+            }
+        }
+    };
+    return (react_1.default.createElement(S_Label, { htmlFor: value },
+        icon(),
+        react_1.default.createElement(S_TextWrapper, null,
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorOverride: state === 'normal'
+                    ? 'ui_cpnt_selcontrols_text_default'
+                    : 'ui_cpnt_selcontrols_text_disabled' })),
+        react_1.default.createElement("input", { hidden: true, id: value, type: "radio", name: name, value: value, checked: checked, color: value, onChange: onChange, disabled: state === 'disabled' })));
+}
+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"])));
+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"])));
+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"])));
+var S_TextWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+exports.default = Radio;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/desktop/components/Radio/index.d.ts

@@ -0,0 +1 @@
+export { default as Radio } from './Radio';

package/dist/src/desktop/components/Radio/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Radio = void 0;
+var Radio_1 = require("./Radio");
+Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return __importDefault(Radio_1).default; } });

package/dist/src/desktop/components/ReactionButton/ReactionButton.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare type ReactionButtonProps = {
+    text: string | number;
+    iconName?: 'ic_thumb_up' | 'ic_heart' | 'ic_thumb_down' | 'ic_reply';
+    status?: 'default' | 'select';
+    colorTheme?: 'none' | 'dark';
+    onClick?: (e?: Event, ...args: any) => void;
+    onMouseDown?: (e?: Event, ...args: any) => void;
+};
+declare function ReactionButton({ text, iconName, status, colorTheme, onClick, onMouseDown }: ReactionButtonProps): JSX.Element;
+export default ReactionButton;

package/dist/src/desktop/components/ReactionButton/ReactionButton.js

@@ -0,0 +1,108 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+var TextLabel_1 = require("../TextLabel");
+function ReactionButton(_a) {
+    var text = _a.text, _b = _a.iconName, iconName = _b === void 0 ? 'ic_thumb_up' : _b, _c = _a.status, status = _c === void 0 ? 'default' : _c, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    var handleClick = function () {
+        if (onClick) {
+            onClick();
+        }
+    };
+    var handleMouseDown = function () {
+        if (onMouseDown) {
+            onMouseDown();
+        }
+    };
+    var IconColorByStatus = function () {
+        switch (status) {
+            case 'default':
+                return 'ui_cpnt_button_icon_default';
+            case 'select':
+                return 'ui_cpnt_button_icon_primary';
+            default:
+                return 'ui_cpnt_button_icon_default';
+        }
+    };
+    var IconColorByColorByTheme = function () {
+        if (status === 'default' && colorTheme === 'dark') {
+            return 'ui_cpnt_button_icon_darktheme_default';
+        }
+        if (status === 'select' && colorTheme === 'dark') {
+            return 'ui_cpnt_button_icon_darktheme_primary';
+        }
+    };
+    var TextLabelColorBySelect = function () {
+        switch (true) {
+            case status === 'default' && colorTheme === 'none':
+                return 'sysTextSecondary';
+            case status === 'select' && colorTheme === 'none':
+                return 'sysTextBrandPrimary';
+            default:
+                return 'sysTextSecondary';
+        }
+    };
+    var TextLabelColorByByColorTheme = function () {
+        if (status === 'default' && colorTheme === 'dark') {
+            return 'ui_cpnt_button_text_darktheme_default';
+        }
+        if (status === 'select' && colorTheme === 'dark') {
+            return 'ui_cpnt_button_text_darktheme_primary';
+        }
+        return;
+    };
+    // TODO : 추 후 유틸로 편성 예정
+    var convertFormatHelper = function (value) {
+        if (typeof value !== 'number')
+            return value;
+        switch (true) {
+            case value >= 1000 && value < 1000000:
+                return Math.floor(value / 1000)
+                    .toString()
+                    .replace(/\.0$/, '') + "K";
+            case value >= 1000000:
+                return Math.floor(value / 1000000)
+                    .toString()
+                    .replace(/\.0$/, '') + "M";
+            default:
+                return value;
+        }
+    };
+    return (react_1.default.createElement(S_ReactionButton, { onClick: handleClick, onMouseDown: handleMouseDown },
+        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
+        react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }),
+        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: convertFormatHelper(text), styleTheme: "body2Regular", btnMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })));
+}
+var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  cursor: 'pointer';\n  display: flex;\n  justify-content: center;\n  padding: 0;\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  cursor: 'pointer';\n  display: flex;\n  justify-content: center;\n  padding: 0;\n"])));
+var S_ReactionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ReactionButtonStyle);
+exports.default = ReactionButton;
+var templateObject_1, templateObject_2;

package/dist/src/desktop/components/ReactionButton/index.d.ts

@@ -0,0 +1 @@
+export { default as ReactionButton } from './ReactionButton';

package/dist/src/desktop/components/ReactionButton/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactionButton = void 0;
+var ReactionButton_1 = require("./ReactionButton");
+Object.defineProperty(exports, "ReactionButton", { enumerable: true, get: function () { return __importDefault(ReactionButton_1).default; } });

package/dist/src/desktop/components/Select/Select.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+declare type Value = {
+    text: string;
+    value: string | number;
+};
+declare type SelectProps = {
+    hintText?: string;
+    defaultValue?: Value;
+    valueArray: Value[];
+    size?: 'large' | 'medium' | 'small' | 'rlarge';
+    state?: 'normal' | 'read_only' | 'disabled';
+    onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+    colorTheme?: 'none' | 'dark';
+};
+declare function Select({ hintText, defaultValue, valueArray, size, state, onChange, colorTheme }: SelectProps): JSX.Element;
+export default Select;

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

@@ -0,0 +1,136 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+function Select(_a) {
+    var hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, onChange = _a.onChange, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d;
+    var _e = (0, react_1.useState)(false), isFocused = _e[0], setIsFocused = _e[1];
+    var handleClick = function () { return setIsFocused(true); };
+    var handleBlur = function () { return setIsFocused(false); };
+    var handleChange = function (e) {
+        setIsFocused(false);
+        if (onChange) {
+            onChange(e);
+        }
+    };
+    var getIconColorKey = function () {
+        if (state === 'disabled') {
+            if (colorTheme === 'dark') {
+                return 'ui_cpnt_select_icon_darktheme_disabled';
+            }
+            if (colorTheme === 'none') {
+                return 'ui_cpnt_select_icon_02';
+            }
+        }
+        if (colorTheme === 'dark') {
+            return 'ui_cpnt_select_icon_darktheme_default';
+        }
+        if (colorTheme === 'none') {
+            return 'ui_cpnt_select_icon_01';
+        }
+    };
+    return (react_1.default.createElement(S_Box, { size: size, onClick: handleClick, onBlur: handleBlur, tabIndex: 0 },
+        react_1.default.createElement(S_Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
+        react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', defaultValue: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '', state: state, colorTheme: colorTheme, onChange: handleChange },
+            react_1.default.createElement("option", { disabled: true, value: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '' }, (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText),
+            valueArray.map(function (el) { return (react_1.default.createElement("option", { key: el.value, value: el.value }, el.text)); }))));
+}
+var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  width: 432px;\n"], ["\n  height: 48px;\n  width: 432px;\n"])));
+var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n  width: 188px;\n"], ["\n  height: 40px;\n  width: 188px;\n"])));
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  width: 188px;\n"], ["\n  height: 32px;\n  width: 188px;\n"])));
+var rlarge = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 48px;\n  width: 100%;\n"], ["\n  height: 48px;\n  width: 100%;\n"])));
+var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  color: ", ";\n\n  :disabled {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  :focus {\n    border: 0.5px solid ", " !important;\n    color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  color: ", ";\n\n  :disabled {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  :focus {\n    border: 0.5px solid ", " !important;\n    color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_select_base_normal;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_select_border_darktheme_normal;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_select_text_darktheme_hint;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_select_base_darktheme_disabled;
+}, function (_a) {
+    var theme = _a.theme, state = _a.state;
+    return state === 'read_only'
+        ? theme.ui_cpnt_select_text_darktheme_enabled
+        : theme.ui_cpnt_select_text_darktheme_disabled;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_select_border_darktheme_focus;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_select_text_darktheme_enabled;
+});
+var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  z-index: 0;\n\n  ", "\n"], ["\n  position: relative;\n  z-index: 0;\n\n  ", "\n"])), function (_a) {
+    var size = _a.size;
+    return size &&
+        {
+            large: large,
+            medium: medium,
+            small: small,
+            rlarge: rlarge
+        }[size];
+});
+var S_Icon = (0, styled_components_1.default)(hybrid_1.Icon)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 2;\n"], ["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 2;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+var S_Select = styled_components_1.default.select(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  appearance: none;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\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    color: ", ";\n    cursor: not-allowed;\n  }\n\n  :focus {\n    border: 0.5px 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: 1px solid ", ";\n  border-radius: 8px;\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    color: ", ";\n    cursor: not-allowed;\n  }\n\n  :focus {\n    border: 0.5px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_select_base_normal;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_select_border_normal;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_select_text_hint;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.desktopFontSize.form2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_select_base_disabled;
+}, function (_a) {
+    var theme = _a.theme, state = _a.state;
+    return state === 'read_only' ? theme.ui_cpnt_select_text_hint : theme.ui_cpnt_select_text_disabled;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_select_border_focus;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_select_text_selected;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme === 'dark' && dark;
+});
+exports.default = Select;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/src/desktop/components/Select/index.d.ts

@@ -0,0 +1 @@
+export { default as Select } from './Select';

package/dist/src/desktop/components/Select/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+var Select_1 = require("./Select");
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return __importDefault(Select_1).default; } });

package/dist/src/desktop/components/StatusBlock/StatusBlock.js

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
-var ui_colors_1 = require("../../../common/styles/ui-colors");
 var TextLabel_1 = require("../TextLabel");
 function StatusBlock(_a) {
     var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.state, state = _c === void 0 ? 'basic' : _c, _d = _a.width, width = _d === void 0 ? 'responsive' : _d;
@@ -37,9 +36,8 @@ function StatusBlock(_a) {
         medium: 'body1Bold',
         small: 'body2Bold'
     };
-    (0, ui_colors_1.setTone)('dark');
     return (react_1.default.createElement(S_StatusBlock, { size: size, state: state, "$width": width },
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite" })));
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", btnMode: "use", colorTheme: "sysTextWhite" })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 48px;\n"], ["\n  border-radius: 8px;\n  height: 48px;\n"])));
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 40px;\n"], ["\n  border-radius: 8px;\n  height: 40px;\n"])));