pds-dev-kit-web-test 0.0.7 → 0.0.8

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

@@ -11,9 +11,9 @@ 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, isSubmitBtnActive = _a.isSubmitBtnActive;
+    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 }),
+        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) {

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

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

@@ -23,13 +23,16 @@ var iconColors = {
     transparent: 'ui_cpnt_button_icon_white'
 };
 function Header(_a) {
-    var styleTheme = _a.styleTheme, titleText = _a.titleText, captionText = _a.captionText, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1;
+    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: "body1Bold", colorTheme: titleTextColors[styleTheme] })),
+            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: "sysTextSecondary", colorOverride: styleTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined })))),
+                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) {

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

@@ -32,11 +32,16 @@ function useAutoScrollToBottom(_a) {
     (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]);
-    function triggerScrollToBottom() {
+    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 });
     }

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

@@ -7,7 +7,7 @@ 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';

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

@@ -37,17 +37,32 @@ function Dropdown(_a) {
     // selectionMode = 'single',
     size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, onChange = _a.onChange;
     var _g = (0, react_1.useState)(false), isFocused = _g[0], setIsFocused = _g[1];
-    var _h = (0, react_1.useState)(defaultValue), selectedValue = _h[0], setSelectedValue = _h[1];
+    var _h = (0, react_1.useState)(null), selectedValue = _h[0], setSelectedValue = _h[1];
+    /**
+     * @when value 프롭의 값에 따라
+     * @expected 값이 null일 때 드롭다운을 초기화하고, 값이 있다면 해당 값으로 설정해줍니다.
+     * @clear -
+     */
     (0, react_1.useEffect)(function () {
-        if (defaultValue) {
-            setSelectedValue(defaultValue);
+        if (value === null) {
+            setSelectedValue(null);
+            return;
         }
-    }, [defaultValue]);
-    (0, react_1.useEffect)(function () {
-        if (value) {
+        if (value !== undefined) {
             setSelectedValue(value);
         }
     }, [value]);
+    /**
+     * @when defaultValue 프롭에 값이 있을 시
+     * @expected Dropdown의 초기값을 설정해줍니다.
+     * @clear -
+     */
+    (0, react_1.useEffect)(function () {
+        if (!defaultValue) {
+            return;
+        }
+        setSelectedValue(defaultValue);
+    }, [defaultValue]);
     var handleClick = function () {
         if (state === 'disabled' || state === 'read_only') {
             return;
@@ -61,7 +76,7 @@ function Dropdown(_a) {
     };
     var handleClickOption = function (option) {
         setIsFocused(false);
-        if (!value) {
+        if (value === undefined) {
             setSelectedValue(option);
         }
         if (onChange) {
@@ -150,7 +165,7 @@ function Dropdown(_a) {
     }, [size, maxHeightItemNumber]);
     return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth },
         react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth },
-            react_1.default.createElement(S_TextLabel, { size: size },
+            react_1.default.createElement(S_TextLabel, { size: size, responsiveMode: responsiveMode },
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })),
             react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" })),

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

@@ -3,6 +3,7 @@ import { FillIconNameKeys, LineIconNameKeys, PDSTextType, UiColors } from '../..
 declare type Props = {
     titleType?: 'text' | 'profile' | 'image';
     titleText?: PDSTextType;
+    captionText?: PDSTextType;
     leftBtnMode?: 'none' | 'back' | 'menu' | 'close';
     displayType?: 'none' | 'ibtn_amount1' | 'ibtn_amount2';
     iBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
@@ -21,5 +22,5 @@ declare type Props = {
     onClickIBtn1?: () => void;
     onClickIBtn2?: () => void;
 };
-declare function MobileHeaderBar({ titleType, titleText, leftBtnMode, displayType, iBtn1IconName, iBtn1IconFillType, iBtn1IconColorKey, iBtn2IconName, iBtn2IconFillType, iBtn2IconColorKey, dividerMode, imageSrc, iBtn1State, iBtn1Type, iBtn2State, iBtn2Type, onClickLeftBtn, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
+declare function MobileHeaderBar({ titleType, titleText, captionText, leftBtnMode, displayType, iBtn1IconName, iBtn1IconFillType, iBtn1IconColorKey, iBtn2IconName, iBtn2IconFillType, iBtn2IconColorKey, dividerMode, imageSrc, iBtn1State, iBtn1Type, iBtn2State, iBtn2Type, onClickLeftBtn, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
 export default MobileHeaderBar;

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

@@ -13,7 +13,7 @@ var hybrid_1 = require("../../../hybrid");
 var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
 function MobileHeaderBar(_a) {
-    var _b = _a.titleType, titleType = _b === void 0 ? 'text' : _b, titleText = _a.titleText, _c = _a.leftBtnMode, leftBtnMode = _c === void 0 ? 'back' : _c, _d = _a.displayType, displayType = _d === void 0 ? 'none' : _d, iBtn1IconName = _a.iBtn1IconName, _e = _a.iBtn1IconFillType, iBtn1IconFillType = _e === void 0 ? 'line' : _e, _f = _a.iBtn1IconColorKey, iBtn1IconColorKey = _f === void 0 ? 'ui_cpnt_button_icon_enabled' : _f, iBtn2IconName = _a.iBtn2IconName, _g = _a.iBtn2IconFillType, iBtn2IconFillType = _g === void 0 ? 'line' : _g, _h = _a.iBtn2IconColorKey, iBtn2IconColorKey = _h === void 0 ? 'ui_cpnt_button_icon_enabled' : _h, _j = _a.dividerMode, dividerMode = _j === void 0 ? 'none' : _j, imageSrc = _a.imageSrc, _k = _a.iBtn1State, iBtn1State = _k === void 0 ? 'normal' : _k, _l = _a.iBtn1Type, iBtn1Type = _l === void 0 ? 'button' : _l, _m = _a.iBtn2State, iBtn2State = _m === void 0 ? 'normal' : _m, _o = _a.iBtn2Type, iBtn2Type = _o === void 0 ? 'button' : _o, onClickLeftBtn = _a.onClickLeftBtn, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2;
+    var _b = _a.titleType, titleType = _b === void 0 ? 'text' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.leftBtnMode, leftBtnMode = _c === void 0 ? 'back' : _c, _d = _a.displayType, displayType = _d === void 0 ? 'none' : _d, iBtn1IconName = _a.iBtn1IconName, _e = _a.iBtn1IconFillType, iBtn1IconFillType = _e === void 0 ? 'line' : _e, _f = _a.iBtn1IconColorKey, iBtn1IconColorKey = _f === void 0 ? 'ui_cpnt_button_icon_enabled' : _f, iBtn2IconName = _a.iBtn2IconName, _g = _a.iBtn2IconFillType, iBtn2IconFillType = _g === void 0 ? 'line' : _g, _h = _a.iBtn2IconColorKey, iBtn2IconColorKey = _h === void 0 ? 'ui_cpnt_button_icon_enabled' : _h, _j = _a.dividerMode, dividerMode = _j === void 0 ? 'none' : _j, imageSrc = _a.imageSrc, _k = _a.iBtn1State, iBtn1State = _k === void 0 ? 'normal' : _k, _l = _a.iBtn1Type, iBtn1Type = _l === void 0 ? 'button' : _l, _m = _a.iBtn2State, iBtn2State = _m === void 0 ? 'normal' : _m, _o = _a.iBtn2Type, iBtn2Type = _o === void 0 ? 'button' : _o, onClickLeftBtn = _a.onClickLeftBtn, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2;
     var handleClickLeftBtn = function () {
         if (onClickLeftBtn) {
             onClickLeftBtn();
@@ -52,14 +52,22 @@ function MobileHeaderBar(_a) {
     var title = function () {
         switch (titleType) {
             case 'text': {
-                return (react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "body2Bold", singleLineMode: "use" }));
+                if (captionText) {
+                    return (react_1.default.createElement(S_CaptionTextBox, null,
+                        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }),
+                        react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }),
+                        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "height" }),
+                        react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption2Regular", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 })));
+                }
+                return (react_1.default.createElement(S_TextTypeBox, null,
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 })));
             }
             case 'profile': {
                 return (react_1.default.createElement(S_ProfileWrapper, null,
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),
                     react_1.default.createElement(hybrid_1.ImageView, { src: imageSrc, shapeType: "circular", width: 40, ratio: "1_1", scaleType: "cover", borderMode: "use" }),
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "caption1Regular", singleLineMode: "use" }),
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "caption1Regular", singleLineMode: "use", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }),
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" })));
             }
             case 'image': {
@@ -75,19 +83,19 @@ function MobileHeaderBar(_a) {
             displayType === 'ibtn_amount2' && iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn2IconName, fillType: "fill", onClick: handleClickIBtn2, iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn2Type, state: iBtn2State })),
             (displayType === 'ibtn_amount1' || displayType === 'ibtn_amount2') && iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn1IconName, fillType: "fill", onClick: handleClickIBtn1, iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn1Type, state: iBtn1State }))));
     };
-    return (react_1.default.createElement(S_MobileHeaderBar, { hasBorder: dividerMode === 'solid', expand: titleType === 'profile' },
+    return (react_1.default.createElement(S_MobileHeaderBar, { hasBorder: dividerMode === 'solid', hasCaptionText: (captionText === null || captionText === void 0 ? void 0 : captionText.toString) ? true : false, expand: titleType === 'profile' },
         react_1.default.createElement(S_ButtonWrapper, null,
-            titleType === 'profile' && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
+            (titleType === 'profile' || captionText) && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
             leftIcon()),
         displayType === 'ibtn_amount2' && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" }),
         react_1.default.createElement(S_Title, null, title()),
         react_1.default.createElement(S_ButtonWrapper, null,
-            titleType === 'profile' && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
+            (titleType === 'profile' || captionText) && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
             iBtn())));
 }
 var S_MobileHeaderBar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: ", ";\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: space-between;\n  padding: 0 ", ";\n"], ["\n  align-items: ", ";\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: space-between;\n  padding: 0 ", ";\n"])), function (_a) {
-    var expand = _a.expand;
-    return (expand ? 'flex-start' : 'center');
+    var expand = _a.expand, hasCaptionText = _a.hasCaptionText;
+    return expand || hasCaptionText ? 'flex-start' : 'center';
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_headerbar_base_area;
@@ -95,8 +103,8 @@ var S_MobileHeaderBar = styled_components_1.default.div(templateObject_1 || (tem
     var hasBorder = _a.hasBorder, theme = _a.theme;
     return hasBorder && "1px solid " + theme.ui_cpnt_divider;
 }, function (_a) {
-    var expand = _a.expand;
-    return (expand ? 'auto' : '56px');
+    var expand = _a.expand, hasCaptionText = _a.hasCaptionText;
+    return (expand || hasCaptionText ? 'auto' : '56px');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
@@ -107,7 +115,9 @@ var S_Title = styled_components_1.default.div(templateObject_3 || (templateObjec
     return theme.spacing.spacingD;
 });
 var S_ProfileWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
-var S_IBtnBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
-var S_LeftButtonBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var S_CaptionTextBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 72px;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 72px;\n"])));
+var S_TextTypeBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
+var S_IBtnBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
+var S_LeftButtonBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 exports.default = MobileHeaderBar;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -28,6 +28,7 @@ export declare type TextFieldProps = {
     maxLength?: number;
     min?: number;
     customWidth?: string;
+    autoComplete?: string;
     onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     onClickIBtn1?: () => void;
@@ -36,5 +37,5 @@ export declare type TextFieldProps = {
     onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onTarget?: () => void;
 };
-declare function TextField({ name, hintText, defaultText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onTarget }: TextFieldProps): JSX.Element;
+declare function TextField({ name, hintText, defaultText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onTarget }: TextFieldProps): JSX.Element;
 export default TextField;

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

@@ -31,7 +31,7 @@ var components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
 function TextField(_a) {
     var _b;
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.validationPoint, validationPoint = _c === void 0 ? 'onBlur' : _c, _d = _a.preventBlankMode, preventBlankMode = _d === void 0 ? 'none' : _d, _e = _a.enterSubmitMode, enterSubmitMode = _e === void 0 ? 'none' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.responsiveMode, responsiveMode = _g === void 0 ? 'none' : _g, _h = _a.textLineType, textLineType = _h === void 0 ? 'single' : _h, _j = _a.multiRows, multiRows = _j === void 0 ? 8 : _j, _k = _a.autoMinRows, autoMinRows = _k === void 0 ? 8 : _k, autoMaxRows = _a.autoMaxRows, _l = _a.inputType, inputType = _l === void 0 ? 'text' : _l, _m = _a.state, state = _m === void 0 ? 'normal' : _m, iBtn1IconName = _a.iBtn1IconName, _o = _a.iBtn1IconFillType, iBtn1IconFillType = _o === void 0 ? 'line' : _o, iBtn2IconName = _a.iBtn2IconName, _p = _a.iBtn2IconFillType, iBtn2IconFillType = _p === void 0 ? 'line' : _p, _q = _a.colorTheme, colorTheme = _q === void 0 ? 'none' : _q, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.validationPoint, validationPoint = _c === void 0 ? 'onBlur' : _c, _d = _a.preventBlankMode, preventBlankMode = _d === void 0 ? 'none' : _d, _e = _a.enterSubmitMode, enterSubmitMode = _e === void 0 ? 'none' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.responsiveMode, responsiveMode = _g === void 0 ? 'none' : _g, _h = _a.textLineType, textLineType = _h === void 0 ? 'single' : _h, _j = _a.multiRows, multiRows = _j === void 0 ? 8 : _j, _k = _a.autoMinRows, autoMinRows = _k === void 0 ? 8 : _k, autoMaxRows = _a.autoMaxRows, _l = _a.inputType, inputType = _l === void 0 ? 'text' : _l, _m = _a.state, state = _m === void 0 ? 'normal' : _m, iBtn1IconName = _a.iBtn1IconName, _o = _a.iBtn1IconFillType, iBtn1IconFillType = _o === void 0 ? 'line' : _o, iBtn2IconName = _a.iBtn2IconName, _p = _a.iBtn2IconFillType, iBtn2IconFillType = _p === void 0 ? 'line' : _p, _q = _a.colorTheme, colorTheme = _q === void 0 ? 'none' : _q, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _r = _a.autoComplete, autoComplete = _r === void 0 ? 'on' : _r, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget;
     var iconThemeColorNoneObj = {
         normal: 'ui_cpnt_button_icon_default',
         read_only: 'ui_cpnt_button_icon_default',
@@ -42,9 +42,9 @@ function TextField(_a) {
         read_only: 'ui_cpnt_textfield_icon_darktheme_default',
         disabled: 'ui_cpnt_textfield_icon_darktheme_disabled'
     };
-    var _r = (0, react_1.useState)(false), isFocused = _r[0], setIsFocused = _r[1];
-    var _s = (0, react_hook_form_1.useFormContext)(), register = _s.register, trigger = _s.trigger, errors = _s.formState.errors;
-    var _t = register(name, validation), validateOnChange = _t.onChange, validateOnBlur = _t.onBlur;
+    var _s = (0, react_1.useState)(false), isFocused = _s[0], setIsFocused = _s[1];
+    var _t = (0, react_hook_form_1.useFormContext)(), register = _t.register, trigger = _t.trigger, errors = _t.formState.errors;
+    var _u = register(name, validation), validateOnChange = _u.onChange, validateOnBlur = _u.onBlur;
     var isError = Object.keys(errors).some(function (error) { return error === name; });
     var handleClickIBtn1 = function () {
         if (onClickIBtn1) {
@@ -94,14 +94,14 @@ function TextField(_a) {
     }
     var S_TextField = function () {
         if (textLineType === 'multi') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }));
         }
         if (textLineType === 'auto') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }));
         }
         if (textLineType === 'single') {
             return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: "use", deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, isFocused: isFocused, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }),
+                react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: "use", deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, isFocused: isFocused, autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }),
                 react_1.default.createElement(S_IconBox, null,
                     iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
                             {

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

@@ -6,6 +6,7 @@ import { BlogTextField } from './BlogTextField';
 import { BodyTextGroup } from './BodyTextGroup';
 import { Card } from './Card';
 import { CardList } from './CardList';
+import { ChatBubbleListItem } from './ChatBubbleListItem';
 import { ChatList } from './ChatList';
 import { Checkbox } from './Checkbox';
 import { Chip } from './Chip';
@@ -29,4 +30,4 @@ import { TextLabel } from './TextLabel';
 import { UploadIconButton } from './UploadIconButton';
 import { UploadMainButton } from './UploadMainButton';
 import { UploadTextButton } from './UploadTextButton';
-export { BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, Dropdown, HorizontalFormGroup, IconButton, ImageSlide, MainButton, MobileAlertDialog, MobileHeaderBar, MobileTabBar, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton };
+export { BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, Dropdown, HorizontalFormGroup, IconButton, ImageSlide, MainButton, MobileAlertDialog, MobileHeaderBar, MobileTabBar, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton };

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.MobileTabBar = exports.MobileHeaderBar = exports.MobileAlertDialog = exports.MainButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Dropdown = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = void 0;
+exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.MobileTabBar = exports.MobileHeaderBar = exports.MobileAlertDialog = exports.MainButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Dropdown = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = void 0;
 var BasicChatListItem_1 = require("./BasicChatListItem");
 Object.defineProperty(exports, "BasicChatListItem", { enumerable: true, get: function () { return BasicChatListItem_1.BasicChatListItem; } });
 var BasicFormGroup_1 = require("./BasicFormGroup");
@@ -17,6 +17,8 @@ var Card_1 = require("./Card");
 Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
 var CardList_1 = require("./CardList");
 Object.defineProperty(exports, "CardList", { enumerable: true, get: function () { return CardList_1.CardList; } });
+var ChatBubbleListItem_1 = require("./ChatBubbleListItem");
+Object.defineProperty(exports, "ChatBubbleListItem", { enumerable: true, get: function () { return ChatBubbleListItem_1.ChatBubbleListItem; } });
 var ChatList_1 = require("./ChatList");
 Object.defineProperty(exports, "ChatList", { enumerable: true, get: function () { return ChatList_1.ChatList; } });
 var Checkbox_1 = require("./Checkbox");

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

@@ -13,7 +13,7 @@ import { LayoutMS } from './layout/LayoutMS';
 import { NavigationContainer as MSNavigationContainer } from './layout/LayoutMS/Containers';
 import { ContainersBox as MSContainersBox } from './layout/LayoutMS/ContainersBox';
 export { LayoutMS, MSNavigationContainer, MSContainersBox };
-import { BasicChatListItem as M_BasicChatListItem, BasicFormGroup as M_BasicFormGroup, BasicList as M_BasicList, BasicListItem as M_BasicListItem, BlogTextField as M_BlogTextField, BodyTextGroup as M_BodyTextGroup, Card as M_Card, CardList as M_CardList, ChatList as M_ChatList, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, Dropdown as M_Dropdown, HorizontalFormGroup as M_HorizontalFormGroup, IconButton as M_IconButton, ImageSlide as M_ImageSlide, MainButton as M_MainButton, MobileAlertDialog as M_MobileAlertDialog, MobileHeaderBar as M_MobileHeaderBar, MobileTabBar as M_MobileTabBar, Radio as M_Radio, ReactionButton as M_ReactionButton, Select as M_Select, StatusBlock as M_StatusBlock, TextButton as M_TextButton, TextField as M_TextField, TextLabel as M_TextLabel, UploadIconButton as M_UploadIconButton, UploadMainButton as M_UploadMainButton, UploadTextButton as M_UploadTextButton } from './components';
-export { M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_MainButton, M_MobileAlertDialog, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton };
+import { BasicChatListItem as M_BasicChatListItem, BasicFormGroup as M_BasicFormGroup, BasicList as M_BasicList, BasicListItem as M_BasicListItem, BlogTextField as M_BlogTextField, BodyTextGroup as M_BodyTextGroup, Card as M_Card, CardList as M_CardList, ChatBubbleListItem as M_ChatBubbleListItem, ChatList as M_ChatList, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, Dropdown as M_Dropdown, HorizontalFormGroup as M_HorizontalFormGroup, IconButton as M_IconButton, ImageSlide as M_ImageSlide, MainButton as M_MainButton, MobileAlertDialog as M_MobileAlertDialog, MobileHeaderBar as M_MobileHeaderBar, MobileTabBar as M_MobileTabBar, Radio as M_Radio, ReactionButton as M_ReactionButton, Select as M_Select, StatusBlock as M_StatusBlock, TextButton as M_TextButton, TextField as M_TextField, TextLabel as M_TextLabel, UploadIconButton as M_UploadIconButton, UploadMainButton as M_UploadMainButton, UploadTextButton as M_UploadTextButton } from './components';
+export { M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_ChatBubbleListItem, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_MainButton, M_MobileAlertDialog, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton };
 import { MobileBasicModal as M_MobileBasicModal } from './panels';
 export { M_MobileBasicModal };

package/dist/src/mobile/index.js

@@ -2,7 +2,7 @@
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.M_MobileBasicModal = exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = void 0;
+exports.M_MobileBasicModal = exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = void 0;
 // layoutMF
 var LayoutMF_1 = require("./layout/LayoutMF");
 Object.defineProperty(exports, "LayoutMF", { enumerable: true, get: function () { return LayoutMF_1.LayoutMF; } });
@@ -40,6 +40,7 @@ Object.defineProperty(exports, "M_BlogTextField", { enumerable: true, get: funct
 Object.defineProperty(exports, "M_BodyTextGroup", { enumerable: true, get: function () { return components_1.BodyTextGroup; } });
 Object.defineProperty(exports, "M_Card", { enumerable: true, get: function () { return components_1.Card; } });
 Object.defineProperty(exports, "M_CardList", { enumerable: true, get: function () { return components_1.CardList; } });
+Object.defineProperty(exports, "M_ChatBubbleListItem", { enumerable: true, get: function () { return components_1.ChatBubbleListItem; } });
 Object.defineProperty(exports, "M_ChatList", { enumerable: true, get: function () { return components_1.ChatList; } });
 Object.defineProperty(exports, "M_Checkbox", { enumerable: true, get: function () { return components_1.Checkbox; } });
 Object.defineProperty(exports, "M_Chip", { enumerable: true, get: function () { return components_1.Chip; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,5 +1,6 @@
 # PDS-DEV-KIT-WEB-TEST Release Notes
-## [v0.0.7]
+## [v0.0.8]
+
+* theme의 font-size 크게 변경
 
-* EditApplyTextField의 keyup삭제
 

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

@@ -1,6 +0,0 @@
-declare type Props = {
-    callback: () => void;
-    target: unknown;
-};
-declare function useTimeout({ callback, target }: Props, delay: number): void;
-export default useTimeout;

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

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-function useTimeout(_a, delay) {
-    var callback = _a.callback, target = _a.target;
-    (0, react_1.useEffect)(function () {
-        var timeout = setTimeout(function () { return callback(); }, delay);
-        return function () { return clearTimeout(timeout); };
-    }, [target]);
-}
-exports.default = useTimeout;