pds-dev-kit-web-test 0.1.3 → 0.1.5

package/dist/src/mobile/components/ChatList/ChatList.stories.js

@@ -0,0 +1,235 @@
+"use strict";
+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 __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));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithChatBubbleListItem = exports.AllIcon = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var hybrid_1 = require("../../../hybrid");
+var BasicChatListItem_1 = require("../BasicChatListItem");
+var ChatBubbleListItem_1 = require("../ChatBubbleListItem");
+var TextLabel_1 = require("../TextLabel");
+var ChatList_1 = __importDefault(require("./ChatList"));
+exports.default = {
+    title: 'mobile/components/ChatList',
+    component: ChatList_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'mobile환경에 최적화 된 ChatList 컴포넌트.'
+            },
+            source: { type: 'code' }
+        }
+    },
+    argTypes: {
+        colorTheme: {
+            description: '채팅 전역의 스타일을 교체할 수 있는 테마를 결정합니다.'
+        },
+        headerMode: {
+            description: 'header 영역의 사용여부를 결정합니다.'
+        },
+        titleText: {
+            description: '리스트의 제목을 입력합니다.',
+            control: { type: 'text' }
+        },
+        descText: {
+            description: '리스트의 간단 설명을 입력합니다.',
+            control: { type: 'text' }
+        },
+        captionText: {
+            description: '리스트의 세부 설명, 옵션용 텍스트를 입력합니다.',
+            control: { type: 'text' }
+        },
+        titleStyleTheme: {
+            description: 'titleText 영역의 스타일을 결정 합니다.'
+        },
+        headerDisplayType: {
+            description: 'header 영역의 표시방법을 결정 합니다.'
+        },
+        headerIBtn1IconName: {
+            description: 'header 영역에 우측 영역의 아이콘 이름을 결정합니다.',
+            control: { type: 'select' }
+        },
+        headerIBtn1IconFillType: {
+            description: '우측 영역의 아이콘 유형을 결정합니다.'
+        },
+        children: {
+            description: 'ChatList에 들어갈 자식 요소입니다. 현재는 ChatListItem 컴포넌트만 위치시킬 수 있습니다.',
+            control: { type: 'none' }
+        },
+        bodyChildren: {
+            description: 'ChatList의 body 영역에 들어갈 자식 요소입니다.',
+            control: { type: 'none' }
+        },
+        textFieldState: {
+            description: '텍스트 필드의 상태를 정합니다.'
+        },
+        textFieldHintText: {
+            description: '입력하기 전 미리 보여주는 텍스트 값입니다.',
+            control: { type: 'text' }
+        },
+        textFieldDefaultText: {
+            description: '하단 입력폼 내 텍스트 필드의 기본 값을 입력합니다.',
+            control: { type: 'text' }
+        },
+        textFieldMaxLength: {
+            description: '하단 입력폼 내 텍스트 필드의 최대 길이을 입력합니다.',
+            control: { type: 'number' }
+        },
+        scrollVisibleType: {
+            description: '스크롤을 표시할 지 여부를 결정합니다.'
+        },
+        footerChildren: {
+            description: 'TextField 아래에 위치할 자식 요소입니다. 여러가지 컴포넌트를 조합하여 위치시킬 수 있습니다.',
+            control: { type: 'none' }
+        },
+        submitIBtnState: {
+            description: '메세지 전송 버튼의 상태를 정합니다.'
+        },
+        bodyMBtnText: {
+            description: '바디 영역에 떠있는 버튼의 텍스트를 입력합니다.',
+            control: { type: 'text' }
+        },
+        bodySpacingMode: {
+            description: 'body 영역의 양 옆 여백 사용 여부를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        submitIBtnIconName: {
+            description: 'TextField 전송버튼의 아이콘 이름을 입력합니다',
+            control: { type: 'select' }
+        },
+        submitIBtnIconFillType: {
+            description: '우측 영역의 아이콘 유형을 결정합니다.'
+        },
+        footerIBtn1State: {
+            description: '우측 영역의 아이콘의 상태를 정합니다.'
+        },
+        footerIBtn1IconName: {
+            description: 'TextField 우측 첫번째 영역의 아이콘 이름을 결정합니다.',
+            control: { type: 'select' }
+        },
+        footerIBtn1IconFillType: {
+            description: '우측 영역의 아이콘 유형을 결정합니다.'
+        },
+        footerIBtn1Type: {
+            description: '우측 영역의 아이콘 버튼의 타입을 결정합니다.'
+        },
+        onClickFooterIBtn1: {
+            action: 'onClickFooterIBtn1'
+        },
+        footerIBtn2State: {
+            description: '좌측 두번째 영역의 아이콘 상태를 정합니다'
+        },
+        footerIBtn2IconName: {
+            description: 'TextField 좌측 두번째 영역의 아이콘 이름을 결정합니다.',
+            control: { type: 'select' }
+        },
+        footerIBtn2IconFillType: {
+            description: '좌측 영역의 아이콘 유형을 결정합니다.'
+        },
+        footerIBtn2Type: {
+            description: '좌측 영역의 아이콘 버튼의 타입을 결정합니다.'
+        },
+        onClickFooterIBtn2: {
+            action: 'onClickFooterIBtn2'
+        },
+        footerIBtn3State: {
+            description: '좌측 첫번째 영역의 아이콘 상태를 정합니다'
+        },
+        footerIBtn3IconName: {
+            description: 'TextField 좌측 첫번째 영역의 아이콘 이름을 결정합니다.',
+            control: { type: 'select' }
+        },
+        footerIBtn3IconFillType: {
+            description: '좌측 영역의 아이콘 유형을 결정합니다.'
+        },
+        footerIBtn3Type: {
+            description: '좌측 영역의 아이콘 버튼의 타입을 결정합니다.'
+        },
+        footerIBtn3Accept: {
+            description: '특정 확장자 혹은 타입의 파일만 선택할 수 있게 합니다.'
+        },
+        onClickFooterIBtn3: {
+            action: 'onClickFooterIBtn3'
+        },
+        onSubmit: {
+            action: 'onSubmit'
+        },
+        onClickHeaderIBtn1: {
+            action: 'onClickHeaderIBtn1'
+        }
+    }
+};
+var defaultArgs = {
+    colorTheme: 'solid',
+    headerMode: 'use',
+    titleStyleTheme: 'subTitleBold',
+    headerDisplayType: 'none',
+    headerIBtn1IconName: 'ic_xmark',
+    headerIBtn1IconFillType: 'line',
+    textFieldState: 'normal',
+    scrollVisibleType: 'moving',
+    submitIBtnState: 'normal',
+    submitIBtnIconName: 'ic_paper_plane',
+    submitIBtnIconFillType: 'fill',
+    footerIBtn1State: 'normal',
+    footerIBtn2State: 'normal',
+    footerIBtn3State: 'normal'
+};
+var DefaultChatList = function (args) {
+    var _a = (0, react_1.useState)(Array(50).fill('message')), messages = _a[0], setMessages = _a[1];
+    var ref = (0, react_1.useRef)(null);
+    var handleSubmit = function (message) {
+        setMessages(function (prev) { return __spreadArray(__spreadArray([], prev, true), [message], false); });
+    };
+    return ((0, jsx_runtime_1.jsx)(ChatList_1.default, __assign({}, args, { onSubmit: handleSubmit, ref: ref }, { children: messages.map(function (message, index) { return ((0, jsx_runtime_1.jsx)(BasicChatListItem_1.BasicChatListItem, { titleText: "titleText", contentText: "" + message + index, contextMenuOptionArray: [
+                { text: 'contextMenu1', value: 1 },
+                { text: 'contextMenu2', value: 2 }
+            ] }, index)); }) }), void 0));
+};
+exports.Default = DefaultChatList.bind({});
+exports.Default.args = __assign(__assign({}, defaultArgs), { titleText: 'titleText', descText: 'descText', captionText: 'captionText', textFieldHintText: 'hintText', footerChildren: ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: "footer children", colorTheme: "sysTextWhite", styleTheme: "body2Regular" }, void 0)), bodyMBtnText: 'bodyBtnText', bodyChildren: ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: "body children", colorTheme: "sysTextWhite", styleTheme: "body2Regular" }, void 0)) });
+exports.AllIcon = DefaultChatList.bind({});
+exports.AllIcon.args = __assign(__assign({}, defaultArgs), { titleText: 'titleText', captionText: 'captionText', textFieldHintText: 'hintText', footerChildren: ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: "footer children", colorTheme: "sysTextWhite", styleTheme: "body2Regular" }, void 0)), bodyMBtnText: 'bodyBtnText', footerIBtn1IconName: 'ic_face', footerIBtn2IconName: 'ic_menu', footerIBtn2State: 'disabled', footerIBtn3IconName: 'ic_plus', footerIBtn3Type: 'upload' });
+var BubbleChatList = function (args) {
+    var _a = (0, react_1.useState)(Array(20).fill('message')), messages = _a[0], setMessages = _a[1];
+    var handleSubmit = function (message) {
+        setMessages(function (prev) { return __spreadArray(__spreadArray([], prev, true), [message], false); });
+    };
+    var today = new Date();
+    var hours = today.getHours();
+    var minutes = today.getMinutes();
+    return ((0, jsx_runtime_1.jsx)(ChatList_1.default, __assign({}, args, { onSubmit: handleSubmit }, { children: messages.map(function (message, index) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChatBubbleListItem_1.ChatBubbleListItem, __assign({ styleTheme: "other_avatar_impact", titleText: "seller", imageSrc: "https://placekitten.com/300/300", timeText: hours + ":" + minutes, contextMenuOptionArray: [
+                        { text: 'contextMenu1', value: 1 },
+                        { text: 'contextMenu2 contextMenu2 contextMenu2', value: 2 }
+                    ] }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: "" + message + index, wordBreak: "break_all" }, void 0) }), index), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }, void 0), (0, jsx_runtime_1.jsx)(ChatBubbleListItem_1.ChatBubbleListItem, __assign({ styleTheme: "other_avatar", titleText: "subscriber", imageSrc: "https://placedog.net/300/300", timeText: hours + ":" + minutes, contextMenuOptionArray: [
+                        { text: 'contextMenu1', value: 1 },
+                        { text: 'contextMenu2 contextMenu2 contextMenu2', value: 2 }
+                    ] }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: "" + message + index, wordBreak: "break_all" }, void 0) }), index), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }, void 0), (0, jsx_runtime_1.jsx)(ChatBubbleListItem_1.ChatBubbleListItem, __assign({ styleTheme: "me", timeText: hours + ":" + minutes, contextMenuOptionArray: [
+                        { text: 'contextMenu1', value: 1 },
+                        { text: 'contextMenu2 contextMenu2 contextMenu2', value: 2 }
+                    ] }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: "" + message + index, wordBreak: "break_all" }, void 0) }), index), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }, void 0)] }, void 0)); }) }), void 0));
+};
+exports.WithChatBubbleListItem = BubbleChatList.bind({});
+exports.WithChatBubbleListItem.args = __assign(__assign({}, exports.Default.args), { bodySpacingMode: 'use' });

package/dist/src/mobile/components/ChatList/ChatTextField.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { FillIconNameKeys, LineIconNameKeys } from '../../../common';
+/// <reference types="react" />
+import type { FillIconNameKeys, LineIconNameKeys } from '../../../common';
 import type { Props as ChatListProps } from './ChatList';
 declare type Props = Pick<ChatListProps, 'textFieldDefaultText' | 'textFieldHintText' | 'textFieldState' | 'textFieldMaxLength' | 'footerIBtn3Accept' | 'colorTheme'> & {
     isSubmitBtnActive?: boolean;

package/dist/src/mobile/components/ChatList/ChatTextField.js

@@ -3,11 +3,22 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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 __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 jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var IconButton_1 = require("../IconButton");
 var TextField_1 = require("../TextField");
@@ -21,26 +32,19 @@ function ChatTextField(_a) {
             return value.trim().length ? true : false;
         }
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_FooterContentWrapper, { footerIBtn2IconName: footerIBtn2IconName, footerIBtn3IconName: footerIBtn3IconName },
-            footerIBtn3IconName && (react_1.default.createElement(react_1.default.Fragment, null, footerIBtn3Type === 'button' ? (react_1.default.createElement(IconButton_1.IconButton, { iconName: footerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn3State === 'normal'
-                    ? 'ui_cpnt_button_icon_primary'
-                    : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn3IconFillType, iconSize: 24, state: footerIBtn3State, onClick: onClickFooterIBtn3 })) : (react_1.default.createElement(UploadIconButton_1.UploadIconButton, { iconName: footerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn3State === 'normal'
-                    ? 'ui_cpnt_button_icon_primary'
-                    : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn3IconFillType, iconSize: 24, state: footerIBtn3State, accept: footerIBtn3Accept, onClick: onClickFooterIBtn3 })))),
-            footerIBtn2IconName && (react_1.default.createElement(react_1.default.Fragment, null, footerIBtn2Type === 'button' ? (react_1.default.createElement(IconButton_1.IconButton, { iconName: footerIBtn2IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn2State === 'normal'
-                    ? 'ui_cpnt_button_icon_primary'
-                    : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn2IconFillType, iconSize: 24, state: footerIBtn2State, onClick: onClickFooterIBtn2 })) : (react_1.default.createElement(UploadIconButton_1.UploadIconButton, { iconName: footerIBtn2IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn2State === 'normal'
-                    ? 'ui_cpnt_button_icon_primary'
-                    : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn2IconFillType, iconSize: 24, state: footerIBtn2State, onClick: onClickFooterIBtn2 })))),
-            react_1.default.createElement(S_TextFieldWrapper, null,
-                react_1.default.createElement(TextField_1.TextField, { name: "chat", responsiveMode: "use", textLineType: "single", inputType: "text", hintText: textFieldHintText, defaultText: textFieldDefaultText, validation: chatValidation, maxLength: textFieldMaxLength, colorTheme: colorTheme === 'transparent' ? 'transparent' : 'none', enterSubmitMode: "use", validationPoint: "onChange", state: textFieldState, autoComplete: "off" })),
-            footerIBtn1IconName && (react_1.default.createElement(react_1.default.Fragment, null, footerIBtn1Type === 'button' ? (react_1.default.createElement(IconButton_1.IconButton, { iconName: footerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn1State === 'normal'
-                    ? 'ui_cpnt_button_icon_primary'
-                    : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn1IconFillType, iconSize: 24, state: footerIBtn1State, onClick: onClickFooterIBtn1 })) : (react_1.default.createElement(UploadIconButton_1.UploadIconButton, { iconName: footerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn1State === 'normal'
-                    ? 'ui_cpnt_button_icon_primary'
-                    : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn1IconFillType, iconSize: 24, state: footerIBtn1State, onClick: onClickFooterIBtn1 })))),
-            react_1.default.createElement(IconButton_1.IconButton, { iconName: submitIBtnIconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: isSubmitBtnActive ? 'ui_cpnt_button_icon_primary' : 'ui_cpnt_button_icon_disabled', iconFillType: submitIBtnIconFillType, iconSize: 24, type: "submit", state: isSubmitBtnActive ? 'normal' : 'disabled' }))));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_FooterContentWrapper, __assign({ footerIBtn2IconName: footerIBtn2IconName, footerIBtn3IconName: footerIBtn3IconName }, { children: [footerIBtn3IconName && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footerIBtn3Type === 'button' ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: footerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn3State === 'normal'
+                            ? 'ui_cpnt_button_icon_primary'
+                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn3IconFillType, iconSize: 24, state: footerIBtn3State, onClick: onClickFooterIBtn3 }, void 0)) : ((0, jsx_runtime_1.jsx)(UploadIconButton_1.UploadIconButton, { iconName: footerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn3State === 'normal'
+                            ? 'ui_cpnt_button_icon_primary'
+                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn3IconFillType, iconSize: 24, state: footerIBtn3State, accept: footerIBtn3Accept, onClick: onClickFooterIBtn3 }, void 0)) }, void 0)), footerIBtn2IconName && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footerIBtn2Type === 'button' ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: footerIBtn2IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn2State === 'normal'
+                            ? 'ui_cpnt_button_icon_primary'
+                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn2IconFillType, iconSize: 24, state: footerIBtn2State, onClick: onClickFooterIBtn2 }, void 0)) : ((0, jsx_runtime_1.jsx)(UploadIconButton_1.UploadIconButton, { iconName: footerIBtn2IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn2State === 'normal'
+                            ? 'ui_cpnt_button_icon_primary'
+                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn2IconFillType, iconSize: 24, state: footerIBtn2State, onClick: onClickFooterIBtn2 }, void 0)) }, void 0)), (0, jsx_runtime_1.jsx)(S_TextFieldWrapper, { children: (0, jsx_runtime_1.jsx)(TextField_1.TextField, { name: "chat", responsiveMode: "use", textLineType: "single", inputType: "text", hintText: textFieldHintText, defaultText: textFieldDefaultText, validation: chatValidation, maxLength: textFieldMaxLength, colorTheme: colorTheme === 'transparent' ? 'transparent' : 'none', enterSubmitMode: "use", validationPoint: "onChange", state: textFieldState, autoComplete: "off" }, void 0) }, void 0), footerIBtn1IconName && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footerIBtn1Type === 'button' ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: footerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn1State === 'normal'
+                            ? 'ui_cpnt_button_icon_primary'
+                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn1IconFillType, iconSize: 24, state: footerIBtn1State, onClick: onClickFooterIBtn1 }, void 0)) : ((0, jsx_runtime_1.jsx)(UploadIconButton_1.UploadIconButton, { iconName: footerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn1State === 'normal'
+                            ? 'ui_cpnt_button_icon_primary'
+                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn1IconFillType, iconSize: 24, state: footerIBtn1State, onClick: onClickFooterIBtn1 }, void 0)) }, void 0)), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: submitIBtnIconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: isSubmitBtnActive ? 'ui_cpnt_button_icon_primary' : 'ui_cpnt_button_icon_disabled', iconFillType: submitIBtnIconFillType, iconSize: 24, type: "submit", state: isSubmitBtnActive ? 'normal' : 'disabled' }, void 0)] }), void 0) }, void 0));
 }
 var S_FooterContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn3IconName = _a.footerIBtn3IconName;

package/dist/src/mobile/components/ChatList/Footer.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { FillIconNameKeys, LineIconNameKeys } from '../../../common';
+/// <reference types="react" />
+import type { FillIconNameKeys, LineIconNameKeys } from '../../../common';
 import type { Props as ChatListProps } from './ChatList';
 declare type Props = Pick<ChatListProps, 'footerChildren' | 'textFieldDefaultText' | 'textFieldHintText' | 'textFieldState' | 'textFieldMaxLength' | 'footerIBtn3Accept' | 'colorTheme'> & {
     isSubmitBtnActive: boolean;

package/dist/src/mobile/components/ChatList/Footer.js

@@ -7,14 +7,12 @@ 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 jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var ChatTextField_1 = __importDefault(require("./ChatTextField"));
 function Footer(_a) {
     var colorTheme = _a.colorTheme, footerChildren = _a.footerChildren, textFieldDefaultText = _a.textFieldDefaultText, textFieldHintText = _a.textFieldHintText, textFieldState = _a.textFieldState, textFieldMaxLength = _a.textFieldMaxLength, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, isSubmitBtnActive = _a.isSubmitBtnActive, footerIBtn1State = _a.footerIBtn1State, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, footerIBtn1Type = _a.footerIBtn1Type, onClickFooterIBtn1 = _a.onClickFooterIBtn1, footerIBtn2State = _a.footerIBtn2State, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, footerIBtn2Type = _a.footerIBtn2Type, onClickFooterIBtn2 = _a.onClickFooterIBtn2, footerIBtn3State = _a.footerIBtn3State, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, footerIBtn3Type = _a.footerIBtn3Type, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(ChatTextField_1.default, { colorTheme: colorTheme, textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, isSubmitBtnActive: isSubmitBtnActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }),
-        react_1.default.createElement(S_FooterChildrenWrapper, null, footerChildren)));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChatTextField_1.default, { colorTheme: colorTheme, textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, isSubmitBtnActive: isSubmitBtnActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }, void 0), (0, jsx_runtime_1.jsx)(S_FooterChildrenWrapper, { children: footerChildren }, void 0)] }, void 0));
 }
 var S_FooterChildrenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/components/ChatList/Header.js

@@ -7,7 +7,7 @@ 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 jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var IconButton_1 = require("../IconButton");
@@ -24,16 +24,7 @@ var iconColors = {
 };
 function Header(_a) {
     var colorTheme = _a.colorTheme, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, titleStyleTheme = _a.titleStyleTheme, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1;
-    return (react_1.default.createElement(S_HeaderContentWrapper, null,
-        react_1.default.createElement(S_HeaderLeftBox, null,
-            titleText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[colorTheme], wordBreak: "break_all" })),
-            descText && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c" }),
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: colorTheme === 'solid' ? 'sysTextSecondary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" }))),
-            captionText && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'solid' ? 'sysTextTertiary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" })))),
-        headerDisplayType === 'ibtn1' && headerIBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }))));
+    return ((0, jsx_runtime_1.jsxs)(S_HeaderContentWrapper, { children: [(0, jsx_runtime_1.jsxs)(S_HeaderLeftBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[colorTheme], wordBreak: "break_all" }, void 0)), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: colorTheme === 'solid' ? 'sysTextSecondary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" }, void 0)] }, void 0)), captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'solid' ? 'sysTextTertiary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" }, void 0)] }, void 0))] }, void 0), headerDisplayType === 'ibtn1' && headerIBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }, void 0))] }, void 0));
 }
 var S_HeaderContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/components/ChatList/useAutoScrollToBottom.js

@@ -1,25 +1,7 @@
 "use strict";
-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 jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 function useAutoScrollToBottom(_a) {
     var _b = _a === void 0 ? {} : _a, _c = _b.behavior, behavior = _c === void 0 ? 'auto' : _c, _d = _b.heightOfEndOfList, heightOfEndOfList = _d === void 0 ? 10 : _d;
     var scrollRef = (0, react_1.useRef)(null);
@@ -43,7 +25,7 @@ function useAutoScrollToBottom(_a) {
         setScrollTrigger(function (prev) { return !prev; });
     }, []);
     function EndOfList() {
-        return react_1.default.createElement("li", { style: { listStyle: 'none', height: heightOfEndOfList + "px" }, ref: scrollRef });
+        return (0, jsx_runtime_1.jsx)("li", { style: { listStyle: 'none', height: heightOfEndOfList + "px" }, ref: scrollRef }, void 0);
     }
     return {
         triggerScrollToBottom: triggerScrollToBottom,

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

@@ -1,6 +1,6 @@
-import React from 'react';
+/// <reference types="react" />
 import { Path } from 'react-hook-form';
-import { IFormValues, PDSTextType } from '../../../common';
+import type { IFormValues, PDSTextType } from '../../../common';
 declare type CheckboxProps = {
     text?: PDSTextType;
     fontWeight?: 'bold' | 'regular';

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

@@ -18,7 +18,7 @@ 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 jsx_runtime_1 = require("react/jsx-runtime");
 var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
@@ -37,24 +37,16 @@ function Checkbox(_a) {
     var icon = function () {
         switch (state) {
             case 'normal': {
-                return isChecked ? (react_1.default.createElement(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" })) : (react_1.default.createElement(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_default" }));
+                return isChecked ? ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" }, void 0)) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_default" }, void 0));
             }
             case 'disabled': {
-                return isChecked ? (react_1.default.createElement(S_OverrideIconWrapper, null,
-                    react_1.default.createElement(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_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_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_on_base_hover" })))) : (react_1.default.createElement(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_disabled" }));
+                return isChecked ? ((0, jsx_runtime_1.jsxs)(S_OverrideIconWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" }, void 0), (0, jsx_runtime_1.jsx)(S_OverrideIcon, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_on_base_hover" }, void 0) }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_disabled" }, void 0));
             }
         }
     };
-    return (react_1.default.createElement(S_Checkbox, { "x-pds-name": "Checkbox", "x-pds-element-type": "component", "x-pds-device-type": "mobile" },
-        react_1.default.createElement(S_Label, { htmlFor: name },
-            icon(),
-            text && (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", __assign({ hidden: true, type: "checkbox" }, checkboxFormRegister, { id: name, disabled: state === 'disabled', onChange: handleChange })))));
+    return ((0, jsx_runtime_1.jsx)(S_Checkbox, __assign({ "x-pds-name": "Checkbox", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: (0, jsx_runtime_1.jsxs)(S_Label, __assign({ htmlFor: name }, { children: [icon(), text && ((0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorOverride: state === 'normal'
+                            ? 'ui_cpnt_selcontrols_text_default'
+                            : 'ui_cpnt_selcontrols_text_disabled' }, void 0) }, void 0)), (0, jsx_runtime_1.jsx)("input", __assign({ hidden: true, type: "checkbox" }, checkboxFormRegister, { id: name, disabled: state === 'disabled', onChange: handleChange }), void 0)] }), void 0) }), void 0));
 }
 var S_Checkbox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"])));
 var S_Label = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));

package/dist/src/mobile/components/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,5 @@
+import Checkbox from './Checkbox';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof Checkbox>;
+export default _default;
+export declare const Default: ComponentStory<typeof Checkbox>;

package/dist/src/mobile/components/Checkbox/Checkbox.stories.js

@@ -0,0 +1,59 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_hook_form_1 = require("react-hook-form");
+var components_1 = require("../../../common/components");
+var hybrid_1 = require("../../../hybrid");
+var TextLabel_1 = require("../TextLabel");
+var Checkbox_1 = __importDefault(require("./Checkbox"));
+exports.default = {
+    title: 'mobile/components/Checkbox',
+    component: Checkbox_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'mobile환경에 최적화 된 Checkbox 컴포넌트. react-hook-form의 FormProvider와 pds-dev-kit의 Form 컴포넌트로 감싸서 사용해야 작동합니다.'
+            },
+            source: { type: 'code' }
+        }
+    },
+    argTypes: {
+        text: {
+            description: '체크박스 옆의 텍스트입니다.'
+        },
+        fontWeight: {
+            description: '텍스트의 두께를 결정합니다.'
+        },
+        state: {
+            description: '체크박스의 활성화 상태입니다.'
+        },
+        name: {
+            description: '체크박스의 이름으로 고유한 값입니다.'
+        },
+        onChange: {
+            action: 'onChange'
+        }
+    }
+};
+var DefaultCheckbox = function () {
+    var methods = (0, react_hook_form_1.useForm)({
+        defaultValues: { disabledSelectedCheckbox: true, boldDisabledSelectedCheckbox: true }
+    });
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsxs)(components_1.Form, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: "Regular", styleTheme: "leadParaBold" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(Checkbox_1.default, { text: "Checkbox", name: "checkbox" }, void 0), (0, jsx_runtime_1.jsx)(Checkbox_1.default, { text: "Disabled and Selected Checkbox", name: "disabledSelectedCheckbox", state: "disabled" }, void 0), (0, jsx_runtime_1.jsx)(Checkbox_1.default, { text: "Disabled and Unselected Checkbox", name: "disabledUnselectedCheckbox", state: "disabled" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_f" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: "Bold", styleTheme: "leadParaBold" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(Checkbox_1.default, { text: "Checkbox", name: "boldCheckbox", fontWeight: "bold" }, void 0), (0, jsx_runtime_1.jsx)(Checkbox_1.default, { text: "Disabled and Selected Checkbox", name: "boldDisabledSelectedCheckbox", state: "disabled", fontWeight: "bold" }, void 0), (0, jsx_runtime_1.jsx)(Checkbox_1.default, { text: "Disabled and Unselected Checkbox", name: "boldDisabledUnselectedCheckbox", state: "disabled", fontWeight: "bold" }, void 0)] }, void 0) }), void 0));
+};
+exports.Default = DefaultCheckbox.bind({});

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption, UiColors } from '../../../common';
+/// <reference types="react" />
+import type { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption, UiColors } from '../../../common';
 declare type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information';
 export declare type ChipProps = {
     displayType?: DisplayType;