pds-dev-kit-web-test 0.0.6 → 0.0.9

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

@@ -0,0 +1,105 @@
+"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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_hook_form_1 = require("react-hook-form");
+var styled_components_1 = __importDefault(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+var Body_1 = __importDefault(require("./Body"));
+var Footer_1 = __importDefault(require("./Footer"));
+var Header_1 = __importDefault(require("./Header"));
+var baseBackgroundColors = {
+    solid: 'ui_cpnt_list_base_area_solid',
+    translucent: 'ui_cpnt_list_base_area_translucent',
+    transparent: 'ui_cpnt_list_base_area_translucent'
+};
+var ChatList = react_1.default.forwardRef(function (_a, ref) {
+    var _b = _a.styleTheme, styleTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, _d = _a.titleStyleTheme, titleStyleTheme = _d === void 0 ? 'subTitleBold' : _d, _e = _a.headerDisplayType, headerDisplayType = _e === void 0 ? 'none' : _e, _f = _a.headerIBtn1IconName, headerIBtn1IconName = _f === void 0 ? 'ic_xmark' : _f, _g = _a.headerIBtn1IconFillType, headerIBtn1IconFillType = _g === void 0 ? 'line' : _g, children = _a.children, _h = _a.textFieldState, textFieldState = _h === void 0 ? 'normal' : _h, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _j = _a.scrollVisibleType, scrollVisibleType = _j === void 0 ? 'moving' : _j, footerChildren = _a.footerChildren, _k = _a.submitIBtnState, submitIBtnState = _k === void 0 ? 'normal' : _k, bodyMBtnText = _a.bodyMBtnText, _l = _a.bodySpacingMode, bodySpacingMode = _l === void 0 ? 'none' : _l, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, _m = _a.footerIBtn1State, footerIBtn1State = _m === void 0 ? 'normal' : _m, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, _o = _a.footerIBtn1Type, footerIBtn1Type = _o === void 0 ? 'button' : _o, onClickFooterIBtn1 = _a.onClickFooterIBtn1, _p = _a.footerIBtn2State, footerIBtn2State = _p === void 0 ? 'normal' : _p, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, _q = _a.footerIBtn2Type, footerIBtn2Type = _q === void 0 ? 'button' : _q, onClickFooterIBtn2 = _a.onClickFooterIBtn2, _r = _a.footerIBtn3State, footerIBtn3State = _r === void 0 ? 'normal' : _r, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, _s = _a.footerIBtn3Type, footerIBtn3Type = _s === void 0 ? 'button' : _s, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
+    var methods = (0, react_hook_form_1.useForm)({
+        mode: 'onChange',
+        defaultValues: {
+            chat: ''
+        }
+    });
+    var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _t = methods.formState, isValid = _t.isValid, isDirty = _t.isDirty, isSubmitSuccessful = _t.isSubmitSuccessful;
+    /**
+     * @when 폼 제출에 성공했을 시
+     * @expected 폼을 초기화합니다.
+     * @clear -
+     */
+    (0, react_1.useEffect)(function () {
+        if (isSubmitSuccessful) {
+            reset();
+        }
+    }, [isSubmitSuccessful]);
+    var inputValue = (0, react_hook_form_1.useWatch)({ name: 'chat', control: control });
+    var isSubmitButtonActive = (0, react_1.useMemo)(function () {
+        if (!submitIBtnState) {
+            return false;
+        }
+        return isDirty && isValid && inputValue.length > 0 && submitIBtnState === 'normal';
+    }, [isDirty, isValid, inputValue, submitIBtnState]);
+    var handleSubmitChat = function (_a) {
+        var chat = _a.chat;
+        if (!chat || !isSubmitButtonActive) {
+            return;
+        }
+        onSubmit(chat);
+    };
+    var callBackAfterScrollToBottom = function () {
+        reset();
+    };
+    return (react_1.default.createElement(S_ChatList, { backgroundColor: baseBackgroundColors[styleTheme], id: "chatList" },
+        headerMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Header_1.default, { styleTheme: styleTheme, titleText: titleText, descText: descText, captionText: captionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1 }),
+            react_1.default.createElement(hybrid_1.Divider, null))),
+        react_1.default.createElement(Body_1.default, { scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, ref: ref }, children),
+        react_1.default.createElement(hybrid_1.Divider, null),
+        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
+        react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, methods),
+            react_1.default.createElement("form", { onSubmit: handleSubmit(handleSubmitChat) },
+                react_1.default.createElement(Footer_1.default, { textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive, 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(hybrid_1.Spacing, { size: "spacing_d" })));
+});
+var S_ChatList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])), function (_a) {
+    var backgroundColor = _a.backgroundColor, theme = _a.theme;
+    return theme[backgroundColor];
+});
+exports.default = ChatList;
+var templateObject_1;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { FillIconNameKeys, LineIconNameKeys } from '../../../common';
+import type { Props as ChatListProps } from './ChatList';
+declare type Props = Pick<ChatListProps, 'textFieldDefaultText' | 'textFieldHintText' | 'textFieldState' | 'textFieldMaxLength' | 'footerIBtn3Accept'> & {
+    isSubmitBtnActive?: boolean;
+    submitIBtnIconName?: FillIconNameKeys | LineIconNameKeys;
+    submitIBtnIconFillType?: 'fill' | 'line';
+    footerIBtn1State?: 'disabled' | 'normal';
+    footerIBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
+    footerIBtn1IconFillType?: 'fill' | 'line';
+    footerIBtn1Type?: 'button' | 'upload';
+    onClickFooterIBtn1?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    footerIBtn2State?: 'disabled' | 'normal';
+    footerIBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
+    footerIBtn2IconFillType?: 'fill' | 'line';
+    footerIBtn2Type?: 'button' | 'upload';
+    onClickFooterIBtn2?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    footerIBtn3State?: 'disabled' | 'normal';
+    footerIBtn3IconName?: FillIconNameKeys | LineIconNameKeys;
+    footerIBtn3IconFillType?: 'fill' | 'line';
+    footerIBtn3Type?: 'button' | 'upload';
+    onClickFooterIBtn3?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+};
+declare function ChatTextField({ textFieldDefaultText, textFieldHintText, textFieldState, textFieldMaxLength, isSubmitBtnActive, submitIBtnIconName, submitIBtnIconFillType, footerIBtn1State, footerIBtn1IconName, footerIBtn1IconFillType, footerIBtn1Type, onClickFooterIBtn1, footerIBtn2State, footerIBtn2IconName, footerIBtn2IconFillType, footerIBtn2Type, onClickFooterIBtn2, footerIBtn3State, footerIBtn3IconName, footerIBtn3IconFillType, footerIBtn3Type, footerIBtn3Accept, onClickFooterIBtn3 }: Props): JSX.Element;
+export default ChatTextField;

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

@@ -0,0 +1,59 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var IconButton_1 = require("../IconButton");
+var TextField_1 = require("../TextField");
+var UploadIconButton_1 = require("../UploadIconButton");
+function ChatTextField(_a) {
+    var textFieldDefaultText = _a.textFieldDefaultText, textFieldHintText = _a.textFieldHintText, textFieldState = _a.textFieldState, textFieldMaxLength = _a.textFieldMaxLength, isSubmitBtnActive = _a.isSubmitBtnActive, _b = _a.submitIBtnIconName, submitIBtnIconName = _b === void 0 ? 'ic_paper_plane' : _b, _c = _a.submitIBtnIconFillType, submitIBtnIconFillType = _c === void 0 ? 'fill' : _c, 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;
+    var chatValidation = {
+        validate: function (value) {
+            if (!value)
+                return true;
+            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, 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' }))));
+}
+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;
+    return footerIBtn2IconName || footerIBtn3IconName
+        ? "" + theme.spacing.spacingC
+        : "" + theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+});
+var S_TextFieldWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n  margin-right: ", ";\n"], ["\n  flex: 1;\n  margin-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+exports.default = ChatTextField;
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { FillIconNameKeys, LineIconNameKeys } from '../../../common';
+import type { Props as ChatListProps } from './ChatList';
+declare type Props = Pick<ChatListProps, 'footerChildren' | 'textFieldDefaultText' | 'textFieldHintText' | 'textFieldState' | 'textFieldMaxLength' | 'footerIBtn3Accept'> & {
+    isSubmitBtnActive: boolean;
+    submitIBtnIconName?: FillIconNameKeys | LineIconNameKeys;
+    submitIBtnIconFillType?: 'fill' | 'line';
+    footerIBtn1State?: 'disabled' | 'normal';
+    footerIBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
+    footerIBtn1IconFillType?: 'fill' | 'line';
+    footerIBtn1Type?: 'button' | 'upload';
+    onClickFooterIBtn1?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    footerIBtn2State?: 'disabled' | 'normal';
+    footerIBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
+    footerIBtn2IconFillType?: 'fill' | 'line';
+    footerIBtn2Type?: 'button' | 'upload';
+    onClickFooterIBtn2?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    footerIBtn3State?: 'disabled' | 'normal';
+    footerIBtn3IconName?: FillIconNameKeys | LineIconNameKeys;
+    footerIBtn3IconFillType?: 'fill' | 'line';
+    footerIBtn3Type?: 'button' | 'upload';
+    onClickFooterIBtn3?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+};
+declare function Footer({ footerChildren, textFieldDefaultText, textFieldHintText, textFieldState, textFieldMaxLength, submitIBtnIconName, submitIBtnIconFillType, isSubmitBtnActive, footerIBtn1State, footerIBtn1IconName, footerIBtn1IconFillType, footerIBtn1Type, onClickFooterIBtn1, footerIBtn2State, footerIBtn2IconName, footerIBtn2IconFillType, footerIBtn2Type, onClickFooterIBtn2, footerIBtn3State, footerIBtn3IconName, footerIBtn3IconFillType, footerIBtn3Type, footerIBtn3Accept, onClickFooterIBtn3 }: Props): JSX.Element;
+export default Footer;

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

@@ -0,0 +1,27 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var ChatTextField_1 = __importDefault(require("./ChatTextField"));
+function Footer(_a) {
+    var 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, { 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)));
+}
+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;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+});
+exports.default = Footer;
+var templateObject_1;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { Props as ChatListProps } from './ChatList';
+declare type Props = Required<Pick<ChatListProps, 'styleTheme'>> & Pick<ChatListProps, 'titleText' | 'descText' | 'captionText' | 'titleStyleTheme' | 'headerDisplayType' | 'headerIBtn1IconName' | 'headerIBtn1IconFillType' | 'onClickHeaderIBtn1'>;
+declare function Header({ styleTheme, titleText, descText, captionText, titleStyleTheme, headerDisplayType, headerIBtn1IconName, headerIBtn1IconFillType, onClickHeaderIBtn1 }: Props): JSX.Element;
+export default Header;

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

@@ -0,0 +1,53 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+var IconButton_1 = require("../IconButton");
+var TextLabel_1 = require("../TextLabel");
+var titleTextColors = {
+    solid: 'sysTextPrimary',
+    translucent: 'sysTextWhite',
+    transparent: 'sysTextWhite'
+};
+var iconColors = {
+    solid: 'ui_cpnt_button_icon_enabled',
+    translucent: 'ui_cpnt_button_icon_white',
+    transparent: 'ui_cpnt_button_icon_white'
+};
+function Header(_a) {
+    var styleTheme = _a.styleTheme, 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[styleTheme], 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: "sysTextSecondary", colorOverride: styleTheme === '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: "sysTextTertiary", colorOverride: styleTheme === '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[styleTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }))));
+}
+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;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+var S_HeaderLeftBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+exports.default = Header;
+var templateObject_1, templateObject_2;

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

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

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

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare type Props = {
+    behavior?: 'auto' | 'smooth';
+    heightOfEndOfList?: number;
+};
+declare function useAutoScrollToBottom({ behavior, heightOfEndOfList }?: Props): {
+    triggerScrollToBottom: () => void;
+    EndOfList: () => JSX.Element;
+};
+export default useAutoScrollToBottom;

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

@@ -0,0 +1,53 @@
+"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"));
+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);
+    var _e = (0, react_1.useState)(false), scrollTrigger = _e[0], setScrollTrigger = _e[1];
+    /**
+     * @when scrollTrigger가 변할 때마다(false -> true, vice versa)
+     * @expected EndOfList가 화면에 보이도록 스크롤 한다.
+     * @clear -
+     */
+    (0, react_1.useEffect)(function () {
+        if (scrollRef.current) {
+            scrollRef.current.scrollIntoView({ behavior: behavior });
+            // NOTE: 스크롤을 빠르게 하는 중에 scrollIntoView시 스크롤 영역만큼 렌더가 안되는 이슈에 대한 임시조치
+            setTimeout(function () {
+                var _a;
+                (_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: behavior });
+            }, 100);
+        }
+    }, [scrollTrigger]);
+    var triggerScrollToBottom = (0, react_1.useCallback)(function () {
+        setScrollTrigger(function (prev) { return !prev; });
+    }, []);
+    function EndOfList() {
+        return react_1.default.createElement("li", { style: { listStyle: 'none', height: heightOfEndOfList + "px" }, ref: scrollRef });
+    }
+    return {
+        triggerScrollToBottom: triggerScrollToBottom,
+        EndOfList: EndOfList
+    };
+}
+exports.default = useAutoScrollToBottom;

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

@@ -60,48 +60,48 @@ function Chip(_a) {
                     !isActive && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }),
                         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }))),
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1 }),
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
                     isActive && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
                         react_1.default.createElement(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
             case 'information':
                 return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1 })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
             case 'label':
                 return (react_1.default.createElement(S_LabelChip, { onClick: handleClickChip },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1 })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
             case 'time':
                 return (react_1.default.createElement(S_TimeChip, { onClick: handleClickChip },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1 })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
             case 'removable':
                 return (react_1.default.createElement(S_RemovableChip, { onClick: handleClickChip },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1 }),
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
                     react_1.default.createElement(S_XIconWrapper, { onClick: handleClickXMarkIcon },
                         react_1.default.createElement(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }))));
             default:
                 return (react_1.default.createElement(S_FilterSingleChip, { isActive: isActive, onClick: handleClickChip },
                     filterIconMode === 'left' && (react_1.default.createElement(S_FilterIconWrapper, null,
                         react_1.default.createElement(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }))),
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1 })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
         }
     };
     return react_1.default.createElement(S_ChipWrapper, null, chipType());
 }
 exports.default = Chip;
-var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 16px;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  ", ";\n"], ["\n  border-radius: 16px;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  ", ";\n"])), function (_a) {
+var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 20px;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n\n  ", ";\n"], ["\n  border-radius: 20px;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\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) {
     var theme = _a.theme;
-    return theme.spacing.spacingC;
+    return theme.spacing.spacingD;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingC;
+    return theme.spacing.spacingD;
 }, function (_a) {
     var theme = _a.theme, isActive = _a.isActive;
     return isActive ? '' : "border: 1px solid " + 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  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
@@ -111,7 +111,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  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\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) {
@@ -125,7 +125,7 @@ var S_XIconWrapper = styled_components_1.default.div(templateObject_4 || (templa
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\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) {
@@ -139,14 +139,14 @@ var S_FilterIconWrapper = styled_components_1.default.div(templateObject_6 || (t
     var theme = _a.theme;
     return theme.spacing.spacingA;
 });
-var S_LabelChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n"], ["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n"])), function (_a) {
+var S_LabelChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"], ["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n\n  & > div {\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) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_TimeChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
+var S_TimeChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_base_playtime;
 }, function (_a) {

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

@@ -3,6 +3,7 @@ declare type ContextMenuProps = {
     children: React.ReactNode;
     autoWidthMode?: 'none' | 'use';
     maxHeight?: number;
+    customWidth?: string;
 };
-declare function ContextMenu({ children, autoWidthMode, maxHeight }: ContextMenuProps): JSX.Element;
+declare function ContextMenu({ children, autoWidthMode, maxHeight, customWidth }: ContextMenuProps): JSX.Element;
 export default ContextMenu;

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

@@ -10,10 +10,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 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;
-    return (react_1.default.createElement(S_ContextMenu, { autoWidth: autoWidthMode === 'use', maxHeight: maxHeight }, children));
+    var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b, maxHeight = _a.maxHeight, customWidth = _a.customWidth;
+    return (react_1.default.createElement(S_ContextMenu, { autoWidth: autoWidthMode === 'use', maxHeight: maxHeight, customWidth: customWidth }, 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-sizing: border-box;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  vertical-align: baseline;\n  width: ", ";\n  max-height: ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  vertical-align: baseline;\n  width: ", ";\n  max-height: ", ";\n"])), function (_a) {
+var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  vertical-align: baseline;\n  width: ", ";\n  max-height: ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  vertical-align: baseline;\n  width: ", ";\n  max-height: ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_contextmenu_base;
 }, function (_a) {
@@ -26,11 +26,20 @@ var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (template
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {
-    var autoWidth = _a.autoWidth;
-    return (autoWidth ? 'inherit' : 'auto');
+    var autoWidth = _a.autoWidth, customWidth = _a.customWidth;
+    if (autoWidth) {
+        return 'inherit';
+    }
+    if (customWidth) {
+        return 'auto';
+    }
+    return 'max-content';
 }, function (_a) {
     var maxHeight = _a.maxHeight;
     return (maxHeight ? maxHeight + "px" : 'none');
+}, function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth && "width: " + customWidth + ";min-width: " + customWidth + ";";
 });
 exports.default = ContextMenu;
 var templateObject_1;

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

@@ -53,17 +53,17 @@ function ContextMenuItem(_a) {
         textColorTheme = 'sysTextTertiary';
     }
     return (react_1.default.createElement(S_ContextMenuItem, { size: size, onClick: handleClick, selected: isSelected, disabled: state === 'disabled' },
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: textColorTheme })));
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: textColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
 }
-var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  padding: 0 ", ";\n"], ["\n  height: 48px;\n  padding: 0 ", ";\n"])), function (_a) {
+var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  height: 48px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n  padding: 0 ", ";\n"], ["\n  height: 40px;\n  padding: 0 ", ";\n"])), function (_a) {
+var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  height: 40px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });
-var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  padding: 0 ", ";\n"], ["\n  height: 32px;\n  padding: 0 ", ";\n"])), function (_a) {
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  height: 32px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });

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

@@ -7,15 +7,15 @@ declare type DropDownValues = PDSValueOption & {
 declare type Props = {
     colorTheme?: 'none' | 'dark' | 'white';
     defaultValue?: PDSValueOption;
-    value?: PDSValueOption;
+    value?: PDSValueOption | null;
     hintText?: TFunctionResult;
     maxHeightItemNumber?: number;
     responsiveMode?: 'none' | 'use';
-    selectionMode?: 'single' | 'multi';
     size?: 'large' | 'small';
     state?: 'normal' | 'read_only' | 'disabled';
     valueArray: DropDownValues[];
+    customWidth?: string;
     onChange?: (option: PDSValueOption) => void;
 };
-declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, selectionMode, size, state, valueArray, onChange }: Props): JSX.Element;
+declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, size, state, valueArray, customWidth, onChange }: Props): JSX.Element;
 export default Dropdown;