pds-dev-kit-web 2.2.311 → 2.2.313

package/dist/src/mobile/components/ComboBox/ComboBox.js

@@ -0,0 +1,463 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_hook_form_1 = require("react-hook-form");
+var components_1 = require("../../../hybrid/components");
+var components_2 = require("../../common/components");
+var styled_components_1 = __importStar(require("styled-components"));
+var Icon_1 = require("../../../hybrid/components/Icon");
+var Chip_1 = require("../Chip");
+var ContextMenu_1 = require("../ContextMenu");
+var IconButton_1 = require("../IconButton");
+var TextLabel_1 = require("../TextLabel");
+// 한 번에 렌더링할 개수 (무한 스크롤)
+var RENDER_LIST_COUNT = 20;
+var ComboBox = function (_a) {
+    var _b = _a.name, name = _b === void 0 ? 'comboBoxSearch' : _b, dropdownOptions = _a.dropdownOptions, noResultText = _a.noResultText, _c = _a.customWidth, customWidth = _c === void 0 ? '200px' : _c, _d = _a.customTextSize, customTextSize = _d === void 0 ? 'body2' : _d, _e = _a.customTextColor, customTextColor = _e === void 0 ? 'sysTextSecondary' : _e, _f = _a.useImageMode, useImageMode = _f === void 0 ? 'none' : _f, _g = _a.imageSize, imageSize = _g === void 0 ? 24 : _g, _h = _a.imageShape, imageShape = _h === void 0 ? 'circular' : _h, useMultipleMode = _a.useMultipleMode, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, values = _a.values, onChangeMultiple = _a.onChangeMultiple, placeholder = _a.placeholder, _j = _a.size, size = _j === void 0 ? 'large' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k;
+    var isMultiple = useMultipleMode === 'use';
+    // 드롭다운 오픈 상태
+    var _l = (0, react_1.useState)(false), showDropdown = _l[0], setShowDropdown = _l[1];
+    // 검색 상태
+    var _m = (0, react_1.useState)(false), isSearching = _m[0], setIsSearching = _m[1];
+    // 호버 style을 위한 상태
+    var _o = (0, react_1.useState)(null), hoveredValue = _o[0], setHoveredValue = _o[1];
+    // 렌더링 개수 제어를 위한 상태 (랜더 성능 최적화)
+    var _p = (0, react_1.useState)(RENDER_LIST_COUNT), displayCount = _p[0], setDisplayCount = _p[1];
+    // react-hook-form
+    // 외부 상태 연동
+    var _q = (0, react_hook_form_1.useFormContext)(), setValue = _q.setValue, watch = _q.watch;
+    var currentValue = watch(name);
+    // input 표현을 위한 내부 상태
+    var _r = (0, react_1.useState)(currentValue || ''), localInputValue = _r[0], setLocalInputValue = _r[1];
+    // 외부(watch)에서 오는 값이 변경될 때만 로컬 값을 동기화
+    (0, react_1.useEffect)(function () {
+        setLocalInputValue(currentValue || '');
+    }, [currentValue]);
+    var dropdownRef = (0, react_1.useRef)(null);
+    var valueRef = (0, react_1.useRef)(value);
+    if (!isMultiple) {
+        valueRef.current = value;
+    }
+    var valuesRef = (0, react_1.useRef)(values);
+    (0, react_1.useEffect)(function () {
+        valuesRef.current = values;
+    }, [values]);
+    // ---- 유틸 ----
+    var getOptionText = function (val) {
+        var _a, _b;
+        return (_b = (_a = dropdownOptions.find(function (opt) { return opt.value === val; })) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : '';
+    };
+    var getOptionImageSrc = function (val) {
+        var _a, _b;
+        if (useImageMode === 'none' || !val)
+            return '';
+        return (_b = (_a = dropdownOptions.find(function (opt) { return opt.value === val; })) === null || _a === void 0 ? void 0 : _a.imageSrc) !== null && _b !== void 0 ? _b : '';
+    };
+    /**
+     * @when : 선택된 값이 변경될 때 (단일선택 모드)
+     * @expected : 검색 입력창의 텍스트를 현재 선택된 값으로 동기화합니다.
+     * @clear : -
+     */
+    (0, react_1.useEffect)(function () {
+        if (isMultiple)
+            return;
+        if (isSearching)
+            return;
+        setValue(name, value ? getOptionText(value) : getOptionText(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''));
+    }, [isSearching, dropdownOptions]);
+    /**
+     * @when : 드롭다운 외부 클릭 시
+     * @expected : 드롭다운 목록을 닫고, 단일선택 시 텍스트를 현재 선택된 값으로 되돌립니다.
+     * @clear : -
+     */
+    (0, react_1.useEffect)(function () {
+        var handleClickOutside = function (event) {
+            var _a, _b;
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setShowDropdown(false);
+                setIsSearching(false);
+                setHoveredValue(null);
+                if (isMultiple) {
+                    setValue(name, '');
+                    setLocalInputValue('');
+                }
+                else {
+                    setValue(name, getOptionText((_a = valueRef.current) !== null && _a !== void 0 ? _a : ''));
+                    setLocalInputValue(getOptionText((_b = valueRef.current) !== null && _b !== void 0 ? _b : ''));
+                }
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [dropdownOptions, isMultiple]);
+    var valuesSet = (0, react_1.useMemo)(function () { return new Set(values); }, [values]);
+    // ---- 옵션 필터링 ----
+    var lowercaseOptions = (0, react_1.useMemo)(function () {
+        if (!showDropdown)
+            return [];
+        return dropdownOptions.map(function (opt) { return (__assign(__assign({}, opt), { lowerText: opt.text.toLowerCase() })); });
+    }, [showDropdown, dropdownOptions]);
+    var filteredOptions = (0, react_1.useMemo)(function () {
+        if (!showDropdown)
+            return [];
+        // 명시적으로 검색 중이 아닐 때는 전체 리스트를 보여줍니다.
+        if (!isSearching || !localInputValue)
+            return lowercaseOptions;
+        var query = localInputValue.toLowerCase();
+        return lowercaseOptions.filter(function (opt) { return opt.lowerText.includes(query); });
+    }, [showDropdown, isSearching, lowercaseOptions, localInputValue]);
+    // 실제 렌더링할 개수 (스크롤 시 확장됨)
+    var displayOptions = (0, react_1.useMemo)(function () {
+        return filteredOptions.slice(0, displayCount);
+    }, [filteredOptions, displayCount]);
+    // 검색어가 바뀌면 렌더링 개수 초기화
+    (0, react_1.useEffect)(function () {
+        setDisplayCount(RENDER_LIST_COUNT);
+    }, [localInputValue]);
+    // --- 옵션 리스트 무한 스크롤 로직 ---
+    var filteredLengthRef = (0, react_1.useRef)(filteredOptions.length);
+    filteredLengthRef.current = filteredOptions.length;
+    var handleScroll = (0, react_1.useCallback)(function (e) {
+        var _a = e.currentTarget, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
+        if (scrollHeight - scrollTop <= clientHeight + RENDER_LIST_COUNT) {
+            setDisplayCount(function (prev) {
+                if (prev < filteredLengthRef.current)
+                    return prev + RENDER_LIST_COUNT;
+                return prev;
+            });
+        }
+    }, []);
+    // 렌더링 시점에 첫 번째 항목을 기본 하이라이트로 결정 (Double Render 방지)
+    var defaultHoveredValue = (0, react_1.useMemo)(function () {
+        return isSearching && displayOptions.length > 0 ? displayOptions[0].value : null;
+    }, [isSearching, displayOptions]);
+    var effectiveHoveredValue = hoveredValue !== null ? hoveredValue : defaultHoveredValue;
+    /** 다중선택: 옵션 토글 */
+    var handleToggleOption = (0, react_1.useCallback)(function (opt) {
+        var currentValues = valuesRef.current;
+        if (!isMultiple || !currentValues || !onChangeMultiple || opt.disabled)
+            return;
+        var newValues = currentValues.includes(opt.value)
+            ? currentValues.filter(function (v) { return v !== opt.value; })
+            : __spreadArray(__spreadArray([], currentValues, true), [opt.value], false);
+        onChangeMultiple(newValues);
+    }, [isMultiple, onChangeMultiple]);
+    /** 다중선택: 칩 제거 */
+    var handleRemoveChip = (0, react_1.useCallback)(function (optValue) {
+        var currentValues = valuesRef.current;
+        if (!isMultiple || !currentValues || !onChangeMultiple)
+            return;
+        onChangeMultiple(currentValues.filter(function (v) { return v !== optValue; }));
+    }, [isMultiple, onChangeMultiple]);
+    /** 단일선택: 옵션 선택 */
+    var handleSelectSingle = (0, react_1.useCallback)(function (opt) {
+        if (isMultiple || !onChange || opt.disabled)
+            return;
+        onChange(opt.value);
+        setValue(name, opt.text);
+        setLocalInputValue(opt.text);
+        setShowDropdown(false);
+        setIsSearching(false);
+        setHoveredValue(null);
+    }, [isMultiple, onChange, setValue, name]);
+    var handleHover = (0, react_1.useCallback)(function (val) {
+        setHoveredValue(function (prev) { return (prev === val ? prev : val); });
+    }, []);
+    var onKeyDown = function (e) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (state === 'disabled' || state === 'read_only')
+            return;
+        if (!showDropdown) {
+            if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
+                setShowDropdown(true);
+            }
+            return;
+        }
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                var currentIndex = displayOptions.findIndex(function (o) { return o.value === effectiveHoveredValue; });
+                var nextIndex = currentIndex < displayOptions.length - 1 ? currentIndex + 1 : currentIndex;
+                setHoveredValue((_b = (_a = displayOptions[nextIndex]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null);
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                var currentIndex = displayOptions.findIndex(function (o) { return o.value === effectiveHoveredValue; });
+                var nextIndex = currentIndex > 0 ? currentIndex - 1 : currentIndex;
+                setHoveredValue((_d = (_c = displayOptions[nextIndex]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : null);
+                break;
+            }
+            case 'Enter': {
+                e.preventDefault();
+                var opt = displayOptions.find(function (o) { return o.value === effectiveHoveredValue; });
+                if (opt) {
+                    if (isMultiple) {
+                        handleToggleOption(opt);
+                    }
+                    else {
+                        handleSelectSingle(opt);
+                    }
+                }
+                break;
+            }
+            case 'Escape':
+                e.preventDefault();
+                setShowDropdown(false);
+                setIsSearching(false);
+                setHoveredValue(null);
+                if (isMultiple) {
+                    setValue(name, '');
+                    setLocalInputValue('');
+                }
+                else {
+                    setValue(name, getOptionText((_e = valueRef.current) !== null && _e !== void 0 ? _e : ''));
+                    setLocalInputValue(getOptionText((_f = valueRef.current) !== null && _f !== void 0 ? _f : ''));
+                }
+                break;
+            case 'Tab':
+                setShowDropdown(false);
+                setIsSearching(false);
+                setHoveredValue(null);
+                if (isMultiple) {
+                    setValue(name, '');
+                    setLocalInputValue('');
+                }
+                else {
+                    setValue(name, getOptionText((_g = valueRef.current) !== null && _g !== void 0 ? _g : ''));
+                    setLocalInputValue(getOptionText((_h = valueRef.current) !== null && _h !== void 0 ? _h : ''));
+                }
+                break;
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(S_ComboBox, __assign({ "x-pds-name": "ComboBox", ref: dropdownRef, customWidth: customWidth, isFocused: showDropdown, isMultiple: isMultiple, size: size, state: state }, { children: [isMultiple && values && values.length > 0 && ((0, jsx_runtime_1.jsx)(S_ChipsArea, { children: values.map(function (val) { return ((0, jsx_runtime_1.jsx)(ComboBoxChip, { val: val, text: getOptionText(val), imageSrc: getOptionImageSrc(val), onRemove: handleRemoveChip }, val)); }) })), (0, jsx_runtime_1.jsxs)(S_InputRow, __assign({ isMultiple: isMultiple, size: size }, { children: [useImageMode === 'use' && !isMultiple && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.ImageView, { src: getOptionImageSrc(localInputValue), shapeType: imageShape, width: imageSize, height: imageSize }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_a" })] })), (0, jsx_runtime_1.jsx)(components_2.TextFieldBase, { name: name, value: localInputValue, placeholder: placeholder, state: state, isFocused: showDropdown, onFocus: function () {
+                            setShowDropdown(true);
+                            setIsSearching(false);
+                        }, onChange: function (e) {
+                            var val = e.target.value;
+                            setLocalInputValue(val);
+                            setIsSearching(true);
+                            setHoveredValue(null);
+                            if (val === '') {
+                                setValue(name, '', { shouldValidate: true });
+                            }
+                            else {
+                                setValue(name, val);
+                            }
+                        }, onKeyDown: onKeyDown, validationPoint: "onChange", responsiveMode: "use", customWidth: "100%", textSize: customTextSize, customTextColor: customTextColor, textWeight: "normal", hintText: placeholder, disabled: state === 'disabled', readOnly: state === 'read_only', autoComplete: "off" }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_arrow_down", iconColorKey: state === 'disabled'
+                            ? 'ui_cpnt_dropdown_base_disabled'
+                            : 'ui_cpnt_textlabel_sys_primary', baseColorKey: "ui_menu_background_transparent", baseSize: "xsmall", shapeType: "round", iconSize: 20, state: state === 'disabled' ? 'disabled' : 'normal', onClick: function () {
+                            if (state === 'disabled' || state === 'read_only')
+                                return;
+                            setShowDropdown(!showDropdown);
+                            setIsSearching(false);
+                            setHoveredValue(null);
+                        } })] })), showDropdown && ((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ customWidth: customWidth || '100%' }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ maxHeight: 200, customWidth: customWidth || '100%', onScroll: handleScroll, autoWidthMode: customWidth ? 'none' : 'use' }, { children: displayOptions.length > 0 ? (displayOptions.map(function (opt) {
+                        var _a;
+                        return ((0, jsx_runtime_1.jsx)(ComboBoxOption, { opt: opt, isMultiple: isMultiple, isSelected: isMultiple ? valuesSet.has(opt.value) : opt.value === value, isDisabled: (_a = opt.disabled) !== null && _a !== void 0 ? _a : false, isHovered: effectiveHoveredValue === opt.value, useImageMode: useImageMode, imageShape: useImageMode === 'use' ? imageShape : 'rectangle', imageSize: useImageMode === 'use' ? imageSize : 0, customTextSize: customTextSize, onSelect: isMultiple ? handleToggleOption : handleSelectSingle, onHover: handleHover }, opt.value));
+                    })) : ((0, jsx_runtime_1.jsx)(S_NoResult, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: noResultText !== null && noResultText !== void 0 ? noResultText : (isSearching ? 'No Result' : ''), styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }) })) })) })))] })));
+};
+exports.default = ComboBox;
+/**
+ * @component : ComboBox의 개별 옵션 항목
+ * @description : React.memo를 사용하여 성능을 최적화합니다.
+ */
+var ComboBoxOption = (0, react_1.memo)(function (_a) {
+    var opt = _a.opt, isMultiple = _a.isMultiple, isSelected = _a.isSelected, isDisabled = _a.isDisabled, isHovered = _a.isHovered, useImageMode = _a.useImageMode, imageShape = _a.imageShape, imageSize = _a.imageSize, customTextSize = _a.customTextSize, onSelect = _a.onSelect, onHover = _a.onHover;
+    return ((0, jsx_runtime_1.jsxs)(S_ContextItemBox, __assign({ onMouseDown: function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            onSelect(opt);
+        }, onMouseEnter: function () { return onHover(opt.value); }, isSelected: isSelected, isDisabled: isDisabled, isHovered: isHovered }, { children: [isMultiple && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 16, iconName: isSelected ? 'ic_checkbox_on' : 'ic_checkbox_off', fillType: isSelected ? 'fill' : 'line', colorKey: isDisabled
+                    ? 'ui_cpnt_selcontrols_icon_disabled'
+                    : isSelected
+                        ? 'ui_cpnt_selcontrols_icon_primary'
+                        : 'ui_cpnt_selcontrols_icon_default' })), useImageMode === 'use' && imageSize > 0 && opt.imageSrc && ((0, jsx_runtime_1.jsx)(components_1.ImageView, { src: opt.imageSrc, shapeType: imageShape, width: imageSize, height: imageSize, ratio: "1_1", scaleType: "cover" })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: opt.text, customFontSize: customTextSize, colorTheme: isDisabled ? 'sysTextTertiary' : 'sysTextPrimary' })] })));
+}, function (prev, next) {
+    // onSelect, onHover등 함수 레퍼런스 변경으로 인한 리렌더링 완벽 차단
+    return (prev.opt.value === next.opt.value &&
+        prev.isSelected === next.isSelected &&
+        prev.isDisabled === next.isDisabled &&
+        prev.isHovered === next.isHovered &&
+        prev.imageShape === next.imageShape &&
+        prev.imageSize === next.imageSize &&
+        prev.customTextSize === next.customTextSize);
+});
+ComboBoxOption.displayName = 'ComboBoxOption';
+/**
+ * @component : 콤보박스 상단에 표시되는 선택된 옵션 칩 (메모이징)
+ */
+var ComboBoxChip = (0, react_1.memo)(function (_a) {
+    var val = _a.val, text = _a.text, imageSrc = _a.imageSrc, onRemove = _a.onRemove;
+    return ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { displayType: "removable", text: text, onClickXMarkIcon: function (e) {
+            e.stopPropagation();
+            onRemove(val);
+        }, imageMode: "left", imageSrc: imageSrc }));
+});
+ComboBoxChip.displayName = 'ComboBoxChip';
+var small = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"], ["\n  border-radius: 10px;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+});
+var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"], ["\n  border-radius: 12px;\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+});
+var large = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var size = _a.size;
+    return (size === 'rlarge' ? '100%' : '432px');
+});
+var S_ComboBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  ", "\n  ", "\n  \n\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n\n  box-sizing: border-box;\n  display: flex;\n\n  /* TextField \uC2A4\uD0C0\uC77C \uB3D9\uAE30\uD654 */\n  flex-direction: ", ";\n\n  padding-right: 4px;\n\n  position: relative;\n  transition: all 0.2s ease-in-out;\n\n  &:hover {\n    ", "\n  }\n\n  &:active {\n    ", "\n  }\n\n  width: ", ";\n"], ["\n  ", ";\n  ", "\n  ", "\n  \n\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n\n  box-sizing: border-box;\n  display: flex;\n\n  /* TextField \uC2A4\uD0C0\uC77C \uB3D9\uAE30\uD654 */\n  flex-direction: ", ";\n\n  padding-right: 4px;\n\n  position: relative;\n  transition: all 0.2s ease-in-out;\n\n  &:hover {\n    ", "\n  }\n\n  &:active {\n    ", "\n  }\n\n  width: ", ";\n"])), function (_a) {
+    var size = _a.size;
+    return size &&
+        {
+            small: small,
+            medium: medium,
+            large: large,
+            rlarge: large
+        }[size];
+}, function (_a) {
+    var isMultiple = _a.isMultiple;
+    return !isMultiple && 'align-items: center;';
+}, function (_a) {
+    var isMultiple = _a.isMultiple;
+    return isMultiple && "height: auto;";
+}, function (_a) {
+    var theme = _a.theme, state = _a.state;
+    return state === 'normal'
+        ? theme.ui_cpnt_textfield_base_normal
+        : theme.ui_cpnt_textfield_base_disabled;
+}, function (_a) {
+    var theme = _a.theme, isFocused = _a.isFocused, state = _a.state;
+    if (state === 'disabled' || state === 'read_only')
+        return theme.ui_cpnt_textfield_border_disabled;
+    return isFocused
+        ? theme.ui_cpnt_textfield_border_focus
+        : theme.ui_cpnt_textfield_border_normal;
+}, function (_a) {
+    var isMultiple = _a.isMultiple;
+    return (isMultiple ? 'column' : 'row');
+}, function (_a) {
+    var state = _a.state, theme = _a.theme;
+    return state === 'normal' && "background-color: ".concat(theme.ui_cpnt_textfield_base_hover, ";");
+}, function (_a) {
+    var state = _a.state, theme = _a.theme;
+    return state === 'normal' && "background-color: ".concat(theme.ui_cpnt_textfield_base_pressed, ";");
+}, function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth;
+});
+var S_InputRow = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  ", ";\n\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  ", ";\n\n  width: 100%;\n"])), function (_a) {
+    var isMultiple = _a.isMultiple, size = _a.size;
+    return isMultiple && "height: ".concat(size === 'small' ? 32 : size === 'medium' ? 40 : 48, "px;");
+});
+var S_ChipsArea = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n  padding-bottom: ", ";\n  padding-top: ", ";\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n  padding-bottom: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: block;\n  left: 0;\n  min-width: ", ";\n  padding-top: 4px;\n  position: absolute;\n  top: 100%;\n  z-index: 10;\n\n  & > ul {\n    &::-webkit-scrollbar {\n      display: initial;\n      height: 8px;\n      padding-right: 10px;\n      width: 8px;\n    }\n    &::-webkit-scrollbar-thumb {\n      background-color: #ccc;\n      border-radius: 32px;\n    }\n    &::-webkit-scrollbar-track {\n      background-color: #e3e3e3;\n      border-radius: 32px;\n      margin-bottom: 7px;\n      margin-top: 7px;\n    }\n  }\n"], ["\n  display: block;\n  left: 0;\n  min-width: ", ";\n  padding-top: 4px;\n  position: absolute;\n  top: 100%;\n  z-index: 10;\n\n  & > ul {\n    &::-webkit-scrollbar {\n      display: initial;\n      height: 8px;\n      padding-right: 10px;\n      width: 8px;\n    }\n    &::-webkit-scrollbar-thumb {\n      background-color: #ccc;\n      border-radius: 32px;\n    }\n    &::-webkit-scrollbar-track {\n      background-color: #e3e3e3;\n      border-radius: 32px;\n      margin-bottom: 7px;\n      margin-top: 7px;\n    }\n  }\n"])), function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth;
+});
+var S_NoResult = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding: ", ";\n  text-align: center;\n"], ["\n  padding: ", ";\n  text-align: center;\n"])), function (_a) {
+    var theme = _a.theme;
+    return "".concat(theme.spacing.spacingB, " ").concat(theme.spacing.spacingE);
+});
+var S_ContextItemBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: ", ";\n  display: flex;\n  gap: ", ";\n  opacity: ", ";\n  padding: ", ";\n\n  & > div:nth-child(2) {\n    opacity: ", ";\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: ", ";\n  display: flex;\n  gap: ", ";\n  opacity: ", ";\n  padding: ", ";\n\n  & > div:nth-child(2) {\n    opacity: ", ";\n  }\n\n  ", "\n"])), function (_a) {
+    var isHovered = _a.isHovered, isSelected = _a.isSelected, theme = _a.theme, isDisabled = _a.isDisabled;
+    if (isDisabled)
+        return 'transparent';
+    if (isHovered)
+        return theme.ui_cpnt_contextmenu_menu_base_hover;
+    if (isSelected)
+        return theme.ui_cpnt_contextmenu_menu_base_selected;
+    return 'transparent';
+}, function (_a) {
+    var isDisabled = _a.isDisabled;
+    return (isDisabled ? 'not-allowed' : 'pointer');
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var isDisabled = _a.isDisabled;
+    return (isDisabled ? 0.5 : 1);
+}, function (_a) {
+    var theme = _a.theme;
+    return "".concat(theme.spacing.spacingB, " ").concat(theme.spacing.spacingE);
+}, function (_a) {
+    var isDisabled = _a.isDisabled;
+    return (isDisabled ? 0.4 : 1);
+}, function (_a) {
+    var isDisabled = _a.isDisabled, theme = _a.theme;
+    return !isDisabled &&
+        "\n    &:hover {\n      background-color: ".concat(theme.ui_cpnt_contextmenu_menu_base_hover, ";\n    }\n  ");
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/src/mobile/components/ComboBox/index.d.ts

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

package/dist/src/mobile/components/ComboBox/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.ComboBox = void 0;
+var ComboBox_1 = require("./ComboBox");
+Object.defineProperty(exports, "ComboBox", { enumerable: true, get: function () { return __importDefault(ComboBox_1).default; } });

package/dist/src/mobile/components/ContextMenu/ContextMenu.d.ts

@@ -4,6 +4,7 @@ type ContextMenuProps = {
     autoWidthMode?: 'none' | 'use';
     maxHeight?: number;
     customWidth?: string;
+    onScroll?: (e: React.UIEvent<HTMLUListElement>) => void;
 };
-declare function ContextMenu({ children, autoWidthMode, maxHeight, customWidth }: ContextMenuProps): JSX.Element;
+declare function ContextMenu({ children, autoWidthMode, maxHeight, customWidth, onScroll }: ContextMenuProps): JSX.Element;
 export default ContextMenu;

package/dist/src/mobile/components/ContextMenu/ContextMenu.js

@@ -21,8 +21,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 function ContextMenu(_a) {
-    var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b, maxHeight = _a.maxHeight, customWidth = _a.customWidth;
-    return ((0, jsx_runtime_1.jsx)(S_ContextMenu, __assign({ "x-pds-name": "ContextMenu", "x-pds-element-type": "component", "x-pds-device-type": "mobile", autoWidth: autoWidthMode === 'use', maxHeight: maxHeight, customWidth: customWidth }, { children: children })));
+    var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b, maxHeight = _a.maxHeight, customWidth = _a.customWidth, onScroll = _a.onScroll;
+    return ((0, jsx_runtime_1.jsx)(S_ContextMenu, __assign({ "x-pds-name": "ContextMenu", "x-pds-element-type": "component", "x-pds-device-type": "mobile", autoWidth: autoWidthMode === 'use', maxHeight: maxHeight, customWidth: customWidth, onScroll: onScroll }, { children: children })));
 }
 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  box-sizing: border-box;\n  list-style: none;\n  margin: 0;\n  max-height: ", ";\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n\n  z-index: 400;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  list-style: none;\n  margin: 0;\n  max-height: ", ";\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n\n  z-index: 400;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/components/index.d.ts

@@ -12,6 +12,7 @@ import { ChatBubbleListItem } from './ChatBubbleListItem';
 import { ChatList } from './ChatList';
 import { Checkbox } from './Checkbox';
 import { Chip } from './Chip';
+import { ComboBox } from './ComboBox';
 import { ContextMenu } from './ContextMenu';
 import { ContextMenuItem } from './ContextMenuItem';
 import { DatePicker } from './DatePicker';
@@ -42,4 +43,4 @@ import { TextLabel } from './TextLabel';
 import { UploadIconButton } from './UploadIconButton';
 import { UploadMainButton } from './UploadMainButton';
 import { UploadTextButton } from './UploadTextButton';
-export { BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, BoxItem, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DatePicker, Dropdown, FloatingActionButton, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, MobileAlertDialog, MobileHeaderBar, MobileTabBar, PriceTextField, PriceTextLabel, Radio, ReactionButton, SegmentedButtonGroup, Select, Slider, Snackbar, SpeechBubble, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, RichTextEditor };
+export { BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, BoxItem, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ComboBox, ContextMenu, ContextMenuItem, DatePicker, Dropdown, FloatingActionButton, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, MobileAlertDialog, MobileHeaderBar, MobileTabBar, PriceTextField, PriceTextLabel, Radio, ReactionButton, SegmentedButtonGroup, Select, Slider, Snackbar, SpeechBubble, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, RichTextEditor };

package/dist/src/mobile/components/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RichTextEditor = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.SpeechBubble = exports.Snackbar = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.ReactionButton = exports.Radio = exports.PriceTextLabel = exports.PriceTextField = exports.MobileTabBar = exports.MobileHeaderBar = exports.MobileAlertDialog = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.FloatingActionButton = exports.Dropdown = exports.DatePicker = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BoxItem = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.BasicButtonGroup = void 0;
+exports.RichTextEditor = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.SpeechBubble = exports.Snackbar = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.ReactionButton = exports.Radio = exports.PriceTextLabel = exports.PriceTextField = exports.MobileTabBar = exports.MobileHeaderBar = exports.MobileAlertDialog = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.FloatingActionButton = exports.Dropdown = exports.DatePicker = exports.ContextMenuItem = exports.ContextMenu = exports.ComboBox = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BoxItem = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.BasicButtonGroup = void 0;
 var BasicButtonGroup_1 = require("./BasicButtonGroup");
 Object.defineProperty(exports, "BasicButtonGroup", { enumerable: true, get: function () { return BasicButtonGroup_1.BasicButtonGroup; } });
 var BasicChatListItem_1 = require("./BasicChatListItem");
@@ -29,6 +29,8 @@ var Checkbox_1 = require("./Checkbox");
 Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
 var Chip_1 = require("./Chip");
 Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return Chip_1.Chip; } });
+var ComboBox_1 = require("./ComboBox");
+Object.defineProperty(exports, "ComboBox", { enumerable: true, get: function () { return ComboBox_1.ComboBox; } });
 var ContextMenu_1 = require("./ContextMenu");
 Object.defineProperty(exports, "ContextMenu", { enumerable: true, get: function () { return ContextMenu_1.ContextMenu; } });
 var ContextMenuItem_1 = require("./ContextMenuItem");

package/dist/src/mobile/index.d.ts

@@ -9,5 +9,5 @@ export { ContainersBox as MPContainersBox } from './layout/LayoutMP/ContainersBo
 export { LayoutMS } from './layout/LayoutMS';
 export { NavigationContainer as MSNavigationContainer } from './layout/LayoutMS/Containers';
 export { ContainersBox as MSContainersBox } from './layout/LayoutMS/ContainersBox';
-export { BasicButtonGroup as M_BasicButtonGroup, BasicChatListItem as M_BasicChatListItem, BasicFormGroup as M_BasicFormGroup, BasicList as M_BasicList, BasicListItem as M_BasicListItem, BlogTextField as M_BlogTextField, BodyTextGroup as M_BodyTextGroup, BoxItem as M_BoxItem, Card as M_Card, CardList as M_CardList, ChatBubbleListItem as M_ChatBubbleListItem, ChatList as M_ChatList, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, DatePicker as M_DatePicker, Dropdown as M_Dropdown, FloatingActionButton as M_FloatingActionButton, HorizontalFormGroup as M_HorizontalFormGroup, IconButton as M_IconButton, ImageSlide as M_ImageSlide, LottieReactionButton as M_LottieReactionButton, MainButton as M_MainButton, MobileAlertDialog as M_MobileAlertDialog, MobileHeaderBar as M_MobileHeaderBar, MobileTabBar as M_MobileTabBar, Radio as M_Radio, ReactionButton as M_ReactionButton, SegmentedButtonGroup as M_SegmentedButtonGroup, Select as M_Select, Slider as M_Slider, Snackbar as M_Snackbar, SpeechBubble as M_SpeechBubble, StatusBlock as M_StatusBlock, TextButton as M_TextButton, PriceTextField as M_PriceTextField, TextField as M_TextField, TextLabel as M_TextLabel, PriceTextLabel as M_PriceTextLabel, UploadIconButton as M_UploadIconButton, UploadMainButton as M_UploadMainButton, UploadTextButton as M_UploadTextButton, RichTextEditor as M_RichTextEditor } from './components';
+export { BasicButtonGroup as M_BasicButtonGroup, BasicChatListItem as M_BasicChatListItem, BasicFormGroup as M_BasicFormGroup, BasicList as M_BasicList, BasicListItem as M_BasicListItem, BlogTextField as M_BlogTextField, BodyTextGroup as M_BodyTextGroup, BoxItem as M_BoxItem, Card as M_Card, CardList as M_CardList, ChatBubbleListItem as M_ChatBubbleListItem, ChatList as M_ChatList, Checkbox as M_Checkbox, Chip as M_Chip, ComboBox as M_ComboBox, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, DatePicker as M_DatePicker, Dropdown as M_Dropdown, FloatingActionButton as M_FloatingActionButton, HorizontalFormGroup as M_HorizontalFormGroup, IconButton as M_IconButton, ImageSlide as M_ImageSlide, LottieReactionButton as M_LottieReactionButton, MainButton as M_MainButton, MobileAlertDialog as M_MobileAlertDialog, MobileHeaderBar as M_MobileHeaderBar, MobileTabBar as M_MobileTabBar, Radio as M_Radio, ReactionButton as M_ReactionButton, SegmentedButtonGroup as M_SegmentedButtonGroup, Select as M_Select, Slider as M_Slider, Snackbar as M_Snackbar, SpeechBubble as M_SpeechBubble, StatusBlock as M_StatusBlock, TextButton as M_TextButton, PriceTextField as M_PriceTextField, TextField as M_TextField, TextLabel as M_TextLabel, PriceTextLabel as M_PriceTextLabel, UploadIconButton as M_UploadIconButton, UploadMainButton as M_UploadMainButton, UploadTextButton as M_UploadTextButton, RichTextEditor as M_RichTextEditor } from './components';
 export { AnnotationSheet as M_AnnotationSheet, ContentSheet as M_ContentSheet, MobileBasicModal as M_MobileBasicModal, SectionSheet as M_SectionSheet } from './panels';

package/dist/src/mobile/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.M_TextField = exports.M_PriceTextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_SpeechBubble = exports.M_Snackbar = exports.M_Slider = exports.M_Select = exports.M_SegmentedButtonGroup = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_FloatingActionButton = exports.M_Dropdown = exports.M_DatePicker = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BoxItem = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.M_BasicButtonGroup = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = void 0;
-exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = exports.M_RichTextEditor = exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_PriceTextLabel = exports.M_TextLabel = void 0;
+exports.M_PriceTextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_SpeechBubble = exports.M_Snackbar = exports.M_Slider = exports.M_Select = exports.M_SegmentedButtonGroup = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_FloatingActionButton = exports.M_Dropdown = exports.M_DatePicker = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_ComboBox = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BoxItem = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.M_BasicButtonGroup = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = void 0;
+exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = exports.M_RichTextEditor = exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_PriceTextLabel = exports.M_TextLabel = exports.M_TextField = void 0;
 // layoutMF
 var LayoutMF_1 = require("./layout/LayoutMF");
 Object.defineProperty(exports, "LayoutMF", { enumerable: true, get: function () { return LayoutMF_1.LayoutMF; } });
@@ -45,6 +45,7 @@ Object.defineProperty(exports, "M_ChatBubbleListItem", { enumerable: true, get:
 Object.defineProperty(exports, "M_ChatList", { enumerable: true, get: function () { return components_1.ChatList; } });
 Object.defineProperty(exports, "M_Checkbox", { enumerable: true, get: function () { return components_1.Checkbox; } });
 Object.defineProperty(exports, "M_Chip", { enumerable: true, get: function () { return components_1.Chip; } });
+Object.defineProperty(exports, "M_ComboBox", { enumerable: true, get: function () { return components_1.ComboBox; } });
 Object.defineProperty(exports, "M_ContextMenu", { enumerable: true, get: function () { return components_1.ContextMenu; } });
 Object.defineProperty(exports, "M_ContextMenuItem", { enumerable: true, get: function () { return components_1.ContextMenuItem; } });
 Object.defineProperty(exports, "M_DatePicker", { enumerable: true, get: function () { return components_1.DatePicker; } });