pds-dev-kit-web 2.2.311 → 2.2.313

package/dist/src/common/styles/colorSet/index.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
+var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
 var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
-var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
     SemanticColor: SemanticColor_json_1.default,
+    UIColor: UIColor_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
-    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
-    UIColor: UIColor_json_1.default
+    PaletteColor_Dark: PaletteColor_Dark_json_1.default
 };
 exports.default = colorSet;

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

@@ -13,11 +13,13 @@ export type ChipProps = {
     value?: PDSValueOption['value'];
     id?: PDSValueOption['value'];
     onClickChip?: (e: React.MouseEvent<HTMLDivElement>) => void;
-    onClickXMarkIcon?: () => void;
+    onClickXMarkIcon?: (e?: React.MouseEvent) => void;
+    imageMode?: 'none' | 'left';
+    imageSrc?: string;
     /** @deprecated value 필드를 대신 사용하세요. */
     activeChipId?: string | number;
     /** @deprecated id 필드를 대신 사용하세요. */
     chipId?: string | number;
 };
-export default function Chip({ displayType, shapeType, text, filterIconMode, iconFillType, iconName, overrideTextColorKey, overrideBackgroundColorKey, value, id, activeChipId, chipId, onClickChip, onClickXMarkIcon }: ChipProps): JSX.Element;
+export default function Chip({ displayType, shapeType, text, filterIconMode, iconFillType, iconName, overrideTextColorKey, overrideBackgroundColorKey, value, id, activeChipId, chipId, onClickChip, onClickXMarkIcon, imageMode, imageSrc }: ChipProps): JSX.Element;
 export {};

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

@@ -45,7 +45,7 @@ var hybrid_1 = require("../../../hybrid");
 var Icon_1 = require("../../../hybrid/components/Icon");
 var TextLabel_1 = require("../TextLabel");
 function Chip(_a) {
-    var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'round' : _c, text = _a.text, _d = _a.filterIconMode, filterIconMode = _d === void 0 ? 'none' : _d, _e = _a.iconFillType, iconFillType = _e === void 0 ? 'line' : _e, iconName = _a.iconName, overrideTextColorKey = _a.overrideTextColorKey, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, value = _a.value, id = _a.id, activeChipId = _a.activeChipId, chipId = _a.chipId, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon;
+    var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'round' : _c, text = _a.text, _d = _a.filterIconMode, filterIconMode = _d === void 0 ? 'none' : _d, _e = _a.iconFillType, iconFillType = _e === void 0 ? 'line' : _e, iconName = _a.iconName, overrideTextColorKey = _a.overrideTextColorKey, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, value = _a.value, id = _a.id, activeChipId = _a.activeChipId, chipId = _a.chipId, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon, _f = _a.imageMode, imageMode = _f === void 0 ? 'none' : _f, imageSrc = _a.imageSrc;
     var isActive = (0, react_1.useMemo)(function () {
         if (activeChipId !== undefined && chipId !== undefined) {
             return activeChipId === chipId;
@@ -63,7 +63,7 @@ function Chip(_a) {
     var handleClickXMarkIcon = function (e) {
         e.stopPropagation();
         if (onClickXMarkIcon) {
-            onClickXMarkIcon();
+            onClickXMarkIcon(e);
         }
         else
             onClickChip === null || onClickChip === void 0 ? void 0 : onClickChip(e);
@@ -71,27 +71,27 @@ function Chip(_a) {
     var chipType = function () {
         switch (displayType) {
             case 'category_choice':
-                return ((0, jsx_runtime_1.jsxs)(S_CategoryChoiceChip, __assign({ isActive: isActive, shapeType: shapeType, onClick: handleClickChip }, { children: [!isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_XIconWrapper, __assign({ onClick: handleClickXMarkIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" }) }))] }))] })));
+                return ((0, jsx_runtime_1.jsxs)(S_CategoryChoiceChip, __assign({ isActive: isActive, shapeType: shapeType, onClick: handleClickChip }, { children: [!isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), imageMode === 'left' && imageSrc && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, ratio: "1_1", width: 16, height: 16, shapeType: "circular", scaleType: "cover" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_XIconWrapper, __assign({ onClick: handleClickXMarkIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" }) }))] }))] })));
             case 'information':
-                return ((0, jsx_runtime_1.jsx)(S_InfoChip, __assign({ onClick: handleClickChip, shapeType: shapeType, overrideBackgroundColorKey: overrideBackgroundColorKey }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", colorOverride: overrideTextColorKey, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
+                return ((0, jsx_runtime_1.jsxs)(S_InfoChip, __assign({ onClick: handleClickChip, shapeType: shapeType, overrideBackgroundColorKey: overrideBackgroundColorKey }, { children: [imageMode === 'left' && imageSrc && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, ratio: "1_1", width: 16, height: 16, shapeType: "circular", scaleType: "cover" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", colorOverride: overrideTextColorKey, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
             case 'label':
-                return ((0, jsx_runtime_1.jsx)(S_LabelChip, __assign({ shapeType: shapeType, onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
+                return ((0, jsx_runtime_1.jsxs)(S_LabelChip, __assign({ shapeType: shapeType, onClick: handleClickChip }, { children: [imageMode === 'left' && imageSrc && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, ratio: "1_1", width: 16, height: 16, shapeType: "circular", scaleType: "cover" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
             case 'time':
-                return ((0, jsx_runtime_1.jsx)(S_TimeChip, __assign({ shapeType: shapeType, onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
+                return ((0, jsx_runtime_1.jsxs)(S_TimeChip, __assign({ shapeType: shapeType, onClick: handleClickChip }, { children: [imageMode === 'left' && imageSrc && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, ratio: "1_1", width: 16, height: 16, shapeType: "circular", scaleType: "cover" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
             case 'removable':
-                return ((0, jsx_runtime_1.jsxs)(S_RemovableChip, __assign({ shapeType: shapeType, onClick: handleClickChip }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_XIconWrapper, __assign({ onClick: handleClickXMarkIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }) }))] })));
+                return ((0, jsx_runtime_1.jsxs)(S_RemovableChip, __assign({ shapeType: shapeType, onClick: handleClickChip }, { children: [imageMode === 'left' && imageSrc && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, ratio: "1_1", width: 16, height: 16, shapeType: "circular", scaleType: "cover" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_XIconWrapper, __assign({ onClick: handleClickXMarkIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }) }))] })));
             case 'information2':
-                return ((0, jsx_runtime_1.jsxs)(S_Information2, __assign({ shapeType: shapeType }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_usr_brandprimary" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "usrTextBrandPrimary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] })));
+                return ((0, jsx_runtime_1.jsxs)(S_Information2, __assign({ shapeType: shapeType }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_usr_brandprimary" }), imageMode === 'left' && imageSrc && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, ratio: "1_1", width: 16, height: 16, shapeType: "circular", scaleType: "cover" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "usrTextBrandPrimary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] })));
             case 'information3':
-                return ((0, jsx_runtime_1.jsxs)(S_Information3, __assign({ shapeType: shapeType }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_sys_white" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] })));
+                return ((0, jsx_runtime_1.jsxs)(S_Information3, __assign({ shapeType: shapeType }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_sys_white" }), imageMode === 'left' && imageSrc && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, ratio: "1_1", width: 16, height: 16, shapeType: "circular", scaleType: "cover" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] })));
             default:
-                return ((0, jsx_runtime_1.jsxs)(S_FilterSingleChip, __assign({ isActive: isActive, shapeType: shapeType, onClick: handleClickChip }, { children: [filterIconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
+                return ((0, jsx_runtime_1.jsxs)(S_FilterSingleChip, __assign({ isActive: isActive, shapeType: shapeType, onClick: handleClickChip }, { children: [filterIconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), imageMode === 'left' && imageSrc && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, ratio: "1_1", width: 16, height: 16, shapeType: "circular", scaleType: "cover" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
         }
     };
     return ((0, jsx_runtime_1.jsx)(S_ChipWrapper, __assign({ "x-pds-name": "Chip", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: chipType() })));
 }
 exports.default = Chip;
-var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n\n  ", ";\n"])), function (_a) {
+var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & > div:not([x-pds-name='ImageView']) {\n    height: 40px;\n    line-height: 40px;\n  }\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & > div:not([x-pds-name='ImageView']) {\n    height: 40px;\n    line-height: 40px;\n  }\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, isActive = _a.isActive;
     return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : '';
 }, function (_a) {
@@ -110,7 +110,7 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
     var theme = _a.theme, isActive = _a.isActive;
     return isActive ? '' : "border: 1px solid ".concat(theme.ui_cpnt_chip_line_border_01);
 });
-var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])), function (_a) {
+var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div:not([x-pds-name='ImageView']) {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div:not([x-pds-name='ImageView']) {\n    height: 24px;\n    line-height: 24px;\n  }\n"])), function (_a) {
     var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
     return overrideBackgroundColorKey
         ? theme[overrideBackgroundColorKey]
@@ -125,7 +125,7 @@ var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateO
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
+var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div:not([x-pds-name='ImageView']) {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div:not([x-pds-name='ImageView']) {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
@@ -139,7 +139,7 @@ var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templ
     return theme.spacing.spacingC;
 });
 var S_XIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n"])));
-var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
+var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div:not([x-pds-name='ImageView']) {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div:not([x-pds-name='ImageView']) {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
     var theme = _a.theme, isActive = _a.isActive;
     return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
@@ -152,7 +152,7 @@ var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (te
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_LabelChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  border: 1px solid ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"], ["\n  align-items: center;\n  border: 1px solid ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"])), function (_a) {
+var S_LabelChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  border: 1px solid ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div:not([x-pds-name='ImageView']) {\n    height: 20px;\n    line-height: 20px;\n  }\n"], ["\n  align-items: center;\n  border: 1px solid ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div:not([x-pds-name='ImageView']) {\n    height: 20px;\n    line-height: 20px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_line_border_01;
 }, function (_a) {
@@ -162,7 +162,7 @@ var S_LabelChip = styled_components_1.default.div(templateObject_6 || (templateO
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_TimeChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"])), function (_a) {
+var S_TimeChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div:not([x-pds-name='ImageView']) {\n    height: 20px;\n    line-height: 20px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div:not([x-pds-name='ImageView']) {\n    height: 20px;\n    line-height: 20px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_base_playtime;
 }, function (_a) {
@@ -172,7 +172,7 @@ var S_TimeChip = styled_components_1.default.div(templateObject_7 || (templateOb
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var informationBase = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
+var informationBase = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div:not([x-pds-name='ImageView']) {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div:not([x-pds-name='ImageView']) {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {

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

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import { Path } from 'react-hook-form';
+import type { DesktopFontSize, IFormValues } from '../../../common/types';
+type DropdownOption = {
+    text: string;
+    value: string;
+    imageSrc?: string;
+    disabled?: boolean;
+};
+type CommonProps = {
+    name: Path<IFormValues>;
+    dropdownOptions: DropdownOption[];
+    noResultText?: string;
+    customWidth?: string;
+    customTextSize?: DesktopFontSize;
+    customTextColor?: string;
+    useImageMode?: 'none' | 'use';
+    imageSize?: number;
+    imageShape?: 'circular' | 'round' | 'rectangle';
+    placeholder?: string;
+    size?: 'small' | 'medium' | 'large' | 'rlarge';
+    state?: 'normal' | 'read_only' | 'disabled';
+};
+type SingleSelectProps = CommonProps & {
+    useMultipleMode?: 'none';
+    value: string;
+    defaultValue: string;
+    onChange: (value: string) => void;
+    values?: never;
+    onChangeMultiple?: never;
+};
+type MultiSelectProps = CommonProps & {
+    useMultipleMode: 'use';
+    values: string[];
+    onChangeMultiple: (values: string[]) => void;
+    value?: never;
+    defaultValue?: never;
+    onChange?: never;
+};
+type Props = SingleSelectProps | MultiSelectProps;
+declare const ComboBox: ({ name, dropdownOptions, noResultText, customWidth, customTextSize, customTextColor, useImageMode, imageSize, imageShape, useMultipleMode, value, defaultValue, onChange, values, onChangeMultiple, placeholder, size, state }: Props) => JSX.Element;
+export default ComboBox;