pds-dev-kit-web 1.4.32 → 1.4.35

package/dist/src/mobile/components/ChatBubbleListItem/Popup.js

@@ -0,0 +1,238 @@
+"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 __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 });
+exports.Popup = exports.PopupProvider = void 0;
+var react_1 = __importStar(require("react"));
+var react_dom_1 = require("react-dom");
+var styled_components_1 = __importDefault(require("styled-components"));
+var PopupContext = (0, react_1.createContext)({
+    current: null
+});
+function getHAutoPlacement(_a) {
+    var targetRect = _a.targetRect, popupRect = _a.popupRect;
+    var leftSpaced = targetRect.right + popupRect.width > window.innerWidth;
+    var topSpaced = targetRect.bottom + popupRect.height > window.innerHeight;
+    return (leftSpaced ? 'left' : 'right') + "-" + (topSpaced ? 'end' : 'start');
+}
+function getVAutoPlacement(_a) {
+    var targetRect = _a.targetRect, popupRect = _a.popupRect, wrapperHeight = _a.wrapperHeight;
+    var leftSpaced = targetRect.right + popupRect.width > window.innerWidth;
+    var topSpaced = targetRect.bottom + popupRect.height > (wrapperHeight || window.innerWidth);
+    return (topSpaced ? 'top' : 'bottom') + "-" + (leftSpaced ? 'end' : 'start');
+}
+function getVCenterPlacement(_a) {
+    var targetRect = _a.targetRect, popupRect = _a.popupRect;
+    var leftSpaced = targetRect.right + popupRect.width > window.innerWidth;
+    return leftSpaced ? 'left-center' : 'right-center';
+}
+function getHCenterPlacement(_a) {
+    var targetRect = _a.targetRect, popupRect = _a.popupRect;
+    var topSpaced = targetRect.bottom + popupRect.height > window.innerHeight;
+    return topSpaced ? 'top-center' : 'bottom-center';
+}
+/**
+ * 위치 정규화
+ */
+function getNormalizedPlacement(_a) {
+    var placement = _a.placement, targetRect = _a.targetRect, popupRect = _a.popupRect, wrapperHeight = _a.wrapperHeight;
+    switch (placement) {
+        case 'v-auto':
+            return getVAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
+        case 'h-auto':
+            return getHAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
+        case 'v-center':
+            return getVCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
+        case 'h-center':
+            return getHCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
+        default:
+            return placement;
+    }
+}
+function updatePosition(_a) {
+    var targetElem = _a.targetElem, popupElem = _a.popupElem, placement = _a.placement, wrapperHeight = _a.wrapperHeight;
+    var targetRect = targetElem.getBoundingClientRect();
+    var popupRect = popupElem.getBoundingClientRect();
+    var normPlacement = getNormalizedPlacement({ placement: placement, targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
+    switch (normPlacement) {
+        case 'top':
+            popupElem.style.top = targetRect.top - popupRect.height + "px";
+            popupElem.style.left = targetRect.left - (popupRect.width - targetRect.width) / 2 + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'top-start':
+            popupElem.style.top = targetRect.top - popupRect.height + "px";
+            popupElem.style.left = targetRect.left + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'top-end':
+            popupElem.style.top = targetRect.top - popupRect.height + "px";
+            popupElem.style.left = targetRect.left + targetRect.width - popupRect.width + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'top-both':
+            popupElem.style.top = targetRect.top - popupRect.height + "px";
+            popupElem.style.left = targetRect.left + "px";
+            popupElem.style.width = targetRect.width + "px";
+            break;
+        case 'top-center':
+            popupElem.style.top = targetRect.top - popupRect.height + "px";
+            popupElem.style.left = targetRect.left - (popupRect.width - targetRect.width) / 2 + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'bottom':
+            popupElem.style.top = targetRect.bottom + "px";
+            popupElem.style.left = targetRect.left - (popupRect.width - targetRect.width) / 2 + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'bottom-start':
+            popupElem.style.top = targetRect.bottom + "px";
+            popupElem.style.left = targetRect.left + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'bottom-end':
+            popupElem.style.top = targetRect.bottom + "px";
+            popupElem.style.left = targetRect.right - popupRect.width + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'bottom-both':
+            popupElem.style.top = targetRect.bottom + "px";
+            popupElem.style.left = targetRect.left + "px";
+            popupElem.style.width = targetRect.width + "px";
+            break;
+        case 'bottom-center':
+            popupElem.style.top = targetRect.bottom + "px";
+            popupElem.style.left = targetRect.left - (popupRect.width - targetRect.width) / 2 + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'left':
+            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) / 2 + "px";
+            popupElem.style.left = targetRect.left - popupRect.width + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'left-start':
+            popupElem.style.top = targetRect.top + "px";
+            popupElem.style.left = targetRect.left - popupRect.width + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'left-end':
+            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) + "px";
+            popupElem.style.left = targetRect.left - popupRect.width + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'left-center':
+            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) / 2 + "px";
+            popupElem.style.left = targetRect.left - popupRect.width + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'right':
+            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) / 2 + "px";
+            popupElem.style.left = targetRect.left + targetRect.width + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'right-start':
+            popupElem.style.top = targetRect.top + "px";
+            popupElem.style.left = targetRect.left + targetRect.width + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'right-end':
+            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) + "px";
+            popupElem.style.left = targetRect.left + targetRect.width + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'right-center':
+            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) / 2 + "px";
+            popupElem.style.left = targetRect.left + targetRect.width + "px";
+            popupElem.style.width = 'auto';
+            break;
+        default:
+            break;
+    }
+    return normPlacement;
+}
+function Popup(_a) {
+    var targetRef = _a.targetRef, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClickOutside = _a.onClickOutside, onClick = _a.onClick, _c = _a.placement, placement = _c === void 0 ? 'bottom-start' : _c, wrapperHeight = _a.wrapperHeight, children = _a.children;
+    var popupRootRef = (0, react_1.useContext)(PopupContext);
+    var _d = (0, react_1.useState)('bottom'), normPlacement = _d[0], setNormPlacement = _d[1];
+    var popupRef = (0, react_1.useRef)(null);
+    /**
+     * 팝업 외의 다른 요소 클릭시 팝업이 닫히도록 합니다.
+     */
+    (0, react_1.useEffect)(function () {
+        function handleClickOutside(e) {
+            if (popupRootRef.current && !popupRootRef.current.contains(e.target)) {
+                if (onClickOutside) {
+                    onClickOutside();
+                }
+            }
+        }
+        window.document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            window.document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [popupRootRef, onClickOutside]);
+    /**
+     * 전체 UI 렌더링이 한 프레임 완료된 후에 팝업 위치를 결정합니다.
+     */
+    (0, react_1.useEffect)(function () {
+        window.requestAnimationFrame(function () {
+            if (!targetRef.current || !popupRef.current) {
+                return;
+            }
+            var targetElem = targetRef.current;
+            var popupElem = popupRef.current;
+            var updatedPlacement = updatePosition({ targetElem: targetElem, popupElem: popupElem, placement: placement, wrapperHeight: wrapperHeight });
+            setNormPlacement(updatedPlacement);
+        });
+    }, [isOpen, placement, wrapperHeight, targetRef, popupRef]);
+    function handlePopupClick(e) {
+        e.stopPropagation();
+        if (onClick) {
+            onClick(e);
+        }
+    }
+    if (!popupRootRef || !popupRootRef.current || !isOpen) {
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+    var popupComponent = (react_1.default.createElement(S_Popup, { ref: popupRef, onClick: function (e) { return handlePopupClick(e); } }, typeof children === 'function' ? children(normPlacement) : children));
+    return (0, react_dom_1.createPortal)(popupComponent, popupRootRef.current);
+}
+exports.Popup = Popup;
+var S_Popup = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  left: -1000px;\n  position: fixed;\n  top: -1000px;\n  z-index: 1000;\n"], ["\n  left: -1000px;\n  position: fixed;\n  top: -1000px;\n  z-index: 1000;\n"])));
+/**
+ * 팝업 루트 프로바이더
+ * 팝업을 사용하기 위해서는 팝업 프로바이더가 상위 컴포넌트로 있어야 합니다.
+ */
+function PopupProvider(_a) {
+    var children = _a.children;
+    var ref = (0, react_1.useRef)();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(PopupContext.Provider, { value: ref }, children),
+        react_1.default.createElement("div", { ref: ref })));
+}
+exports.PopupProvider = PopupProvider;
+var templateObject_1;

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

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

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

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { Props as ChatListProps } from './ChatList';
-declare type Props = Pick<ChatListProps, 'scrollVisibleType' | 'children' | 'bodyMBtnText'> & {
+declare type Props = Pick<ChatListProps, 'scrollVisibleType' | 'children' | 'bodyMBtnText' | 'bodySpacingMode'> & {
     isSubmitted: boolean;
 };
-declare function Body({ scrollVisibleType, children, isSubmitted, bodyMBtnText }: Props): JSX.Element;
+declare function Body({ scrollVisibleType, children, isSubmitted, bodyMBtnText, bodySpacingMode }: Props): JSX.Element;
 export default Body;

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

@@ -32,7 +32,7 @@ var MainButton_1 = require("../MainButton");
 var useAutoScrollToBottom_1 = __importDefault(require("./useAutoScrollToBottom"));
 var useTimeout_1 = __importDefault(require("./useTimeout"));
 function Body(_a) {
-    var scrollVisibleType = _a.scrollVisibleType, children = _a.children, isSubmitted = _a.isSubmitted, bodyMBtnText = _a.bodyMBtnText;
+    var scrollVisibleType = _a.scrollVisibleType, children = _a.children, isSubmitted = _a.isSubmitted, bodyMBtnText = _a.bodyMBtnText, bodySpacingMode = _a.bodySpacingMode;
     var _b = (0, react_1.useState)(false), isButtonShow = _b[0], setIsButtonShow = _b[1];
     var _c = (0, useAutoScrollToBottom_1.default)(), triggerScrollToBottom = _c.triggerScrollToBottom, EndOfList = _c.EndOfList;
     var scrollRef = (0, react_1.useRef)(null);
@@ -66,17 +66,27 @@ function Body(_a) {
             setIsButtonShow(true);
         }
     };
-    return (react_1.default.createElement(S_Body, null,
+    return (react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode },
         react_1.default.createElement(S_ChatMessageBox, { onScroll: handleScroll, ref: scrollRef, scrollVisibleType: scrollVisibleType },
             children,
             react_1.default.createElement(EndOfList, null)),
         isButtonShow && (react_1.default.createElement(S_BottomButtonWrapper, null,
             react_1.default.createElement(MainButton_1.MainButton, { text: bodyMBtnText, size: "small", onClick: handleClickMBtn })))));
 }
-var S_Body = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  position: relative;\n"], ["\n  flex: 1;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  position: relative;\n"])));
-var scrollVisibleStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    display: block;\n  }\n"], ["\n  ::-webkit-scrollbar {\n    display: block;\n  }\n"])));
-var scrollHiddenStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
-var S_ChatMessageBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n  overflow-y: auto;\n\n  ", "\n"], ["\n  height: 100%;\n  overflow-y: auto;\n\n  ", "\n"])), function (_a) {
+var bodySpacing = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-right: ", ";\n  padding-left: ", ";\n"], ["\n  box-sizing: border-box;\n  padding-right: ", ";\n  padding-left: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var S_Body = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  position: relative;\n\n  ", ";\n"], ["\n  flex: 1;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  position: relative;\n\n  ", ";\n"])), function (_a) {
+    var bodySpacingMode = _a.bodySpacingMode;
+    return bodySpacingMode === 'use' && bodySpacing;
+});
+var scrollVisibleStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    display: block;\n  }\n"], ["\n  ::-webkit-scrollbar {\n    display: block;\n  }\n"])));
+var scrollHiddenStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
+var S_ChatMessageBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  overflow-y: auto;\n\n  ", "\n"], ["\n  height: 100%;\n  overflow-y: auto;\n\n  ", "\n"])), function (_a) {
     var scrollVisibleType = _a.scrollVisibleType;
     if (!scrollVisibleType || scrollVisibleType === 'moving') {
         return;
@@ -86,9 +96,9 @@ var S_ChatMessageBox = styled_components_1.default.div(templateObject_4 || (temp
         hidden: scrollHiddenStyle
     }[scrollVisibleType];
 });
-var S_BottomButtonWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  bottom: ", ";\n  left: 50%;\n  transform: translate(-50%, 0);\n"], ["\n  position: absolute;\n  bottom: ", ";\n  left: 50%;\n  transform: translate(-50%, 0);\n"])), function (_a) {
+var S_BottomButtonWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  bottom: ", ";\n  left: 50%;\n  transform: translate(-50%, 0);\n"], ["\n  position: absolute;\n  bottom: ", ";\n  left: 50%;\n  transform: translate(-50%, 0);\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
 exports.default = Body;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -4,7 +4,9 @@ export declare type Props = {
     styleTheme?: 'solid' | 'translucent' | 'transparent';
     headerMode?: 'none' | 'use';
     titleText?: PDSTextType;
+    descText?: PDSTextType;
     captionText?: PDSTextType;
+    titleStyleTheme?: 'headingBold' | 'subTitleBold';
     headerDisplayType?: 'none' | 'ibtn1';
     headerIBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
     headerIBtn1IconFillType?: 'line' | 'fill';
@@ -17,8 +19,26 @@ export declare type Props = {
     footerChildren?: React.ReactNode;
     submitIBtnState?: 'disabled' | 'normal';
     bodyMBtnText?: PDSTextType;
+    bodySpacingMode?: 'none' | 'use';
+    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;
     onSubmit: (value: string) => void;
     onClickHeaderIBtn1?: () => void;
 };
-declare function ChatList({ styleTheme, headerMode, titleText, captionText, headerDisplayType, headerIBtn1IconName, headerIBtn1IconFillType, children, textFieldState, textFieldHintText, textFieldDefaultText, textFieldMaxLength, scrollVisibleType, footerChildren, submitIBtnState, bodyMBtnText, onSubmit, onClickHeaderIBtn1 }: Props): JSX.Element;
+declare function ChatList({ styleTheme, headerMode, titleText, descText, captionText, titleStyleTheme, headerDisplayType, headerIBtn1IconName, headerIBtn1IconFillType, children, textFieldState, textFieldHintText, textFieldDefaultText, textFieldMaxLength, scrollVisibleType, footerChildren, submitIBtnState, bodyMBtnText, bodySpacingMode, onSubmit, onClickHeaderIBtn1, submitIBtnIconName, submitIBtnIconFillType, footerIBtn1State, footerIBtn1IconName, footerIBtn1IconFillType, footerIBtn1Type, onClickFooterIBtn1, footerIBtn2State, footerIBtn2IconName, footerIBtn2IconFillType, footerIBtn2Type, onClickFooterIBtn2, footerIBtn3State, footerIBtn3IconName, footerIBtn3IconFillType, footerIBtn3Type, onClickFooterIBtn3 }: Props): JSX.Element;
 export default ChatList;

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

@@ -50,14 +50,14 @@ var baseBackgroundColors = {
     transparent: 'ui_cpnt_list_base_area_translucent'
 };
 function ChatList(_a) {
-    var _b = _a.styleTheme, styleTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, captionText = _a.captionText, _d = _a.headerDisplayType, headerDisplayType = _d === void 0 ? 'none' : _d, _e = _a.headerIBtn1IconName, headerIBtn1IconName = _e === void 0 ? 'ic_xmark' : _e, _f = _a.headerIBtn1IconFillType, headerIBtn1IconFillType = _f === void 0 ? 'line' : _f, children = _a.children, _g = _a.textFieldState, textFieldState = _g === void 0 ? 'normal' : _g, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _h = _a.scrollVisibleType, scrollVisibleType = _h === void 0 ? 'moving' : _h, footerChildren = _a.footerChildren, _j = _a.submitIBtnState, submitIBtnState = _j === void 0 ? 'normal' : _j, bodyMBtnText = _a.bodyMBtnText, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1;
+    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, 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, _k = methods.formState, isSubmitted = _k.isSubmitted, isValid = _k.isValid, isDirty = _k.isDirty;
+    var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _t = methods.formState, isSubmitted = _t.isSubmitted, isValid = _t.isValid, isDirty = _t.isDirty;
     var inputValue = (0, react_hook_form_1.useWatch)({ name: 'chat', control: control });
     var isSubmitButtonActive = (0, react_1.useMemo)(function () {
         if (!submitIBtnState) {
@@ -75,14 +75,14 @@ function ChatList(_a) {
     };
     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, captionText: captionText, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1 }),
+            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: isSubmitted, bodyMBtnText: bodyMBtnText }, children),
+        react_1.default.createElement(Body_1.default, { scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitted, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode }, 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 }))),
+                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, 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) {

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

@@ -1,7 +1,25 @@
-/// <reference types="react" />
+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'> & {
-    isSubmitBtnActive: boolean;
+    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 }: Props): JSX.Element;
+declare function ChatTextField({ textFieldDefaultText, textFieldHintText, textFieldState, textFieldMaxLength, isSubmitBtnActive, submitIBtnIconName, submitIBtnIconFillType, footerIBtn1State, footerIBtn1IconName, footerIBtn1IconFillType, footerIBtn1Type, onClickFooterIBtn1, footerIBtn2State, footerIBtn2IconName, footerIBtn2IconFillType, footerIBtn2Type, onClickFooterIBtn2, footerIBtn3State, footerIBtn3IconName, footerIBtn3IconFillType, footerIBtn3Type, onClickFooterIBtn3 }: Props): JSX.Element;
 export default ChatTextField;

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

@@ -11,8 +11,9 @@ 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;
+    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, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
     var chatValidation = {
         validate: function (value) {
             if (!value)
@@ -22,9 +23,24 @@ function ChatTextField(_a) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(S_FooterContentWrapper, null,
+            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, 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 })),
-            react_1.default.createElement(IconButton_1.IconButton, { iconName: "ic_paper_plane", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: isSubmitBtnActive ? 'ui_cpnt_button_icon_primary' : 'ui_cpnt_button_icon_disabled', iconSize: 24, type: "submit", state: isSubmitBtnActive ? 'normal' : 'disabled' }))));
+            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;

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

@@ -1,7 +1,25 @@
-/// <reference types="react" />
+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'> & {
     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, isSubmitBtnActive }: Props): JSX.Element;
+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, onClickFooterIBtn3 }: Props): JSX.Element;
 export default Footer;

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, 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, 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] })),
+            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 }))),
             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 })))),
         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/Dropdown/Dropdown.js

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