pds-dev-kit-web-test 0.3.52 → 0.3.53

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

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -23,8 +34,8 @@ var iconColors = {
     transparent: 'ui_cpnt_button_icon_white'
 };
 function Header(_a) {
-    var colorTheme = _a.colorTheme, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, titleStyleTheme = _a.titleStyleTheme, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1;
-    return ((0, jsx_runtime_1.jsxs)(S_HeaderContentWrapper, { children: [(0, jsx_runtime_1.jsxs)(S_HeaderLeftBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[colorTheme], wordBreak: "break_all" })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: colorTheme === 'solid' ? 'sysTextSecondary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" })] })), captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'solid' ? 'sysTextTertiary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" })] }))] }), headerDisplayType === 'ibtn1' && headerIBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }))] }));
+    var colorTheme = _a.colorTheme, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, onClickCaptionText = _a.onClickCaptionText, titleStyleTheme = _a.titleStyleTheme, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType, headerIBtn2IconName = _a.headerIBtn2IconName, headerIBtn2IconFillType = _a.headerIBtn2IconFillType, headerIBtn3IconName = _a.headerIBtn3IconName, headerIBtn3IconFillType = _a.headerIBtn3IconFillType, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, onClickHeaderIBtn2 = _a.onClickHeaderIBtn2, onClickHeaderIBtn3 = _a.onClickHeaderIBtn3;
+    return ((0, jsx_runtime_1.jsxs)(S_HeaderContentWrapper, { children: [(0, jsx_runtime_1.jsxs)(S_HeaderLeftBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[colorTheme], wordBreak: "break_all" })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: colorTheme === 'solid' ? 'sysTextSecondary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" })] })), captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(S_CaptionTextWrapper, __assign({ onClick: onClickCaptionText, "$cursor": onClickCaptionText ? 'pointer' : 'default' }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'solid' ? 'sysTextTertiary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" }) }))] }))] }), headerDisplayType === 'ibtn3' && headerIBtn3IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn3IconFillType, onClick: onClickHeaderIBtn3 })), (headerDisplayType === 'ibtn2' || headerDisplayType === 'ibtn3') && headerIBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn2IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn2IconFillType, onClick: onClickHeaderIBtn2 })), headerDisplayType !== 'none' && headerIBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }))] }));
 }
 var S_HeaderContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -40,5 +51,9 @@ var S_HeaderContentWrapper = styled_components_1.default.div(templateObject_1 ||
     return theme.spacing.spacingD;
 });
 var S_HeaderLeftBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+var S_CaptionTextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: ", ";\n  width: fit-content;\n"], ["\n  cursor: ", ";\n  width: fit-content;\n"])), function (_a) {
+    var $cursor = _a.$cursor;
+    return $cursor;
+});
 exports.default = Header;
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/desktop/components/DesktopAlertDialog/DesktopAlertDialog.js

@@ -21,6 +21,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_dom_1 = __importDefault(require("react-dom"));
+var hooks_1 = require("../../../common/hooks");
 var styled_components_1 = __importDefault(require("styled-components"));
 var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
 var hybrid_1 = require("../../../hybrid");
@@ -43,6 +44,12 @@ function DesktopAlertDialog(_a) {
             root.removeChild(container);
         };
     }, []);
+    var handleClickTBtn1 = function () {
+        if (onClickTBtn1) {
+            onClickTBtn1();
+        }
+    };
+    (0, hooks_1.useShortcutKey)('enter', handleClickTBtn1);
     var btn1Mode = ['tbtn_amount1', 'tbtn_amount2', 'tbtn_amount3'];
     var btn2Mode = ['tbtn_amount2', 'tbtn_amount3'];
     var btn3Mode = ['tbtn_amount3'];
@@ -51,7 +58,7 @@ function DesktopAlertDialog(_a) {
             return ((0, jsx_runtime_1.jsxs)(S_IconWrapper, { children: [iconMode === 'success' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_success", size: 72, colorKey: "ui_cpnt_alertdialog_icon_success" })), iconMode === 'error' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_error", size: 72, colorKey: "ui_cpnt_alertdialog_icon_error" })), iconMode === 'warning' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_warning", size: 72, colorKey: "ui_cpnt_alertdialog_icon_warning" })), iconMode === 'information' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_information", size: 72, colorKey: "ui_cpnt_alertdialog_icon_information" }))] }));
         }
     };
-    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "DesktopAlertDialog", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsxs)(S_UpperBox, { children: [icon(), iconMode !== 'none' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsxs)(S_TextBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "leadParaBold" })), titleText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }), contentText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextPrimary", styleTheme: "body1Regular" }))] })] }), (0, jsx_runtime_1.jsxs)(S_Footer, { children: [btn3Mode.includes(btnMode) && tBtn3Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn3Text, state: tBtn3State, type: tBtn3Type, size: "large", onClick: onClickTBtn3, colorTheme: "grey_01" })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), btn2Mode.includes(btnMode) && tBtn2Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn2Text, state: tBtn2State, type: tBtn2Type, size: "large", onClick: onClickTBtn2, colorTheme: "grey_01" })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), btn1Mode.includes(btnMode) && tBtn1Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn1Text, state: tBtn1State, type: tBtn1Type, size: "large", onClick: onClickTBtn1 }))] })] }))] }), container);
+    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "DesktopAlertDialog", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsxs)(S_UpperBox, { children: [icon(), iconMode !== 'none' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsxs)(S_TextBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "leadParaBold" })), titleText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }), contentText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextPrimary", styleTheme: "body1Regular" }))] })] }), (0, jsx_runtime_1.jsxs)(S_Footer, { children: [btn3Mode.includes(btnMode) && tBtn3Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn3Text, state: tBtn3State, type: tBtn3Type, size: "large", onClick: onClickTBtn3, colorTheme: "grey_01" })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), btn2Mode.includes(btnMode) && tBtn2Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn2Text, state: tBtn2State, type: tBtn2Type, size: "large", onClick: onClickTBtn2, colorTheme: "grey_01" })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), btn1Mode.includes(btnMode) && tBtn1Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn1Text, state: tBtn1State, type: tBtn1Type, size: "large", onClick: handleClickTBtn1 }))] })] }))] }), container);
 }
 var S_UpperBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  margin: ", ";\n"], ["\n  display: flex;\n  margin: ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/InternalLinkMenuItemNav.js

@@ -5,28 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var react_router_dom_1 = require("react-router-dom");
 var Navigations_1 = require("../../../../../../common/components/Navigations");
 var DynamicDesktopNavBar_1 = require("../../../DynamicDesktopNavBar");
-var utils_1 = require("../../../utils");
 var IconNav_1 = __importDefault(require("../../IconNav"));
 var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
 function InternalLinkMenuItemNav(_a) {
     var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, isContextMenu = _a.isContextMenu;
-    var location = (0, react_router_dom_1.useLocation)();
-    var _b = (0, react_1.useContext)(DynamicDesktopNavBar_1.BasePathContext), basePath = _b.basePath, activeMode = _b.activeMode, handleClickInternalMenuItemNav = _b.handleClickInternalMenuItemNav;
-    var _c = getInternalLink(basePath, menu.conversionLinkSrc), internalPath = _c.internalPath, pathname = _c.pathname, search = _c.search;
-    var isActive = (0, react_1.useMemo)(function () {
-        if (activeMode === 'BY_URL') {
-            return false;
-        }
-        // NOTE: 'from' keyword를 예외로 삭제하고 비교합니다.
-        var locationSearch = (0, utils_1.getSearchExceptGivenName)(location.search, 'from');
-        if (pathname + search === location.pathname + locationSearch) {
-            return true;
-        }
-        return false;
-    }, [activeMode, location]);
+    var _b = (0, react_1.useContext)(DynamicDesktopNavBar_1.BasePathContext), basePath = _b.basePath, handleClickInternalMenuItemNav = _b.handleClickInternalMenuItemNav;
+    var internalPath = getInternalLink(basePath, menu.conversionLinkSrc).internalPath;
     var onClickNav = function () {
         handleClickInternalMenuItemNav(internalPath);
     };
@@ -38,13 +24,18 @@ function InternalLinkMenuItemNav(_a) {
             return ((0, jsx_runtime_1.jsx)(IconNav_1.default, { onClick: onClickNav, to: internalPath, iconName: menu.iconName, openNewTab: false }));
         }
     }
-    return isContextMenu ? ((0, jsx_runtime_1.jsx)(Navigations_1.ContextTextLabelNav, { onClick: onClickNav, preventLineChange: true, openNewTab: false, to: internalPath, text: menu.name })) : ((0, jsx_runtime_1.jsx)(Navigations_1.TextLabelNav, { onClick: onClickNav, isActive: isActive, preventLineChange: true, openNewTab: false, to: internalPath, text: menu.name }));
+    return isContextMenu ? ((0, jsx_runtime_1.jsx)(Navigations_1.ContextTextLabelNav, { onClick: onClickNav, preventLineChange: true, openNewTab: false, to: internalPath, text: menu.name })) : ((0, jsx_runtime_1.jsx)(Navigations_1.TextLabelNav, { onClick: onClickNav, preventLineChange: true, openNewTab: false, to: internalPath, text: menu.name }));
 }
 function getInternalLink(basePath, url) {
     var _a = new URL(url), pathname = _a.pathname, search = _a.search;
     var splitPath = pathname.split(basePath).pop();
     var PAPP_CODE_INDEX = 1;
     var pAppCode = splitPath === null || splitPath === void 0 ? void 0 : splitPath.split('/')[PAPP_CODE_INDEX];
-    return { internalPath: basePath + splitPath + search, pAppCode: pAppCode, pathname: pathname, search: search };
+    return {
+        internalPath: basePath + splitPath + search,
+        pAppCode: pAppCode,
+        pathname: pathname,
+        search: search
+    };
 }
 exports.default = InternalLinkMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/PAppMenuItemNav.js

@@ -5,21 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var react_router_dom_1 = require("react-router-dom");
 var Navigations_1 = require("../../../../../../common/components/Navigations");
 var DynamicDesktopNavBar_1 = require("../../../DynamicDesktopNavBar");
 var IconNav_1 = __importDefault(require("../../IconNav"));
 var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
 function PAppMenuItemNav(_a) {
     var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, _b = _a.isContextMenu, isContextMenu = _b === void 0 ? false : _b;
-    var _c = (0, react_1.useContext)(DynamicDesktopNavBar_1.BasePathContext), basePath = _c.basePath, activeMode = _c.activeMode;
-    var activeMatch = (0, react_router_dom_1.useRouteMatch)("".concat(basePath, "/:activeKey"));
-    var isActive = (0, react_1.useMemo)(function () {
-        if (activeMode === 'BY_CLICK') {
-            return false;
-        }
-        return (activeMatch === null || activeMatch === void 0 ? void 0 : activeMatch.params.activeKey) === menu.pAppCode;
-    }, [activeMode, menu, activeMatch]);
+    var basePath = (0, react_1.useContext)(DynamicDesktopNavBar_1.BasePathContext).basePath;
     if (showMenuAsIcon) {
         if (menu.iconSrc) {
             return ((0, jsx_runtime_1.jsx)(ImageIconNav_1.default, { to: "".concat(basePath, "/").concat(menu.pAppCode), iconSrc: menu.iconSrc, openNewTab: false }));
@@ -28,6 +20,6 @@ function PAppMenuItemNav(_a) {
             return ((0, jsx_runtime_1.jsx)(IconNav_1.default, { to: "".concat(basePath, "/").concat(menu.pAppCode), iconName: menu.iconName, openNewTab: false }));
         }
     }
-    return isContextMenu ? ((0, jsx_runtime_1.jsx)(Navigations_1.ContextTextLabelNav, { preventLineChange: true, openNewTab: false, to: "".concat(basePath, "/").concat(menu.pAppCode), text: menu.name })) : ((0, jsx_runtime_1.jsx)(Navigations_1.TextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: "".concat(basePath, "/").concat(menu.pAppCode), text: menu.name }));
+    return isContextMenu ? ((0, jsx_runtime_1.jsx)(Navigations_1.ContextTextLabelNav, { preventLineChange: true, openNewTab: false, to: "".concat(basePath, "/").concat(menu.pAppCode), text: menu.name })) : ((0, jsx_runtime_1.jsx)(Navigations_1.TextLabelNav, { preventLineChange: true, openNewTab: false, to: "".concat(basePath, "/").concat(menu.pAppCode), text: menu.name }));
 }
 exports.default = PAppMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/PageMenuItemNav.js

@@ -5,21 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var react_router_dom_1 = require("react-router-dom");
 var Navigations_1 = require("../../../../../../common/components/Navigations");
 var DynamicDesktopNavBar_1 = require("../../../DynamicDesktopNavBar");
 var IconNav_1 = __importDefault(require("../../IconNav"));
 var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
 function PageMenuItemNav(_a) {
     var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, _b = _a.isContextMenu, isContextMenu = _b === void 0 ? false : _b;
-    var _c = (0, react_1.useContext)(DynamicDesktopNavBar_1.BasePathContext), basePath = _c.basePath, activeMode = _c.activeMode;
-    var activeMatch = (0, react_router_dom_1.useRouteMatch)("".concat(basePath, "/pages/:activeKey"));
-    var isActive = (0, react_1.useMemo)(function () {
-        if (activeMode === 'BY_CLICK') {
-            return false;
-        }
-        return (activeMatch === null || activeMatch === void 0 ? void 0 : activeMatch.params.activeKey) === menu.slug;
-    }, [activeMode, menu, activeMatch]);
+    var basePath = (0, react_1.useContext)(DynamicDesktopNavBar_1.BasePathContext).basePath;
     if (showMenuAsIcon) {
         if (menu.iconSrc) {
             return ((0, jsx_runtime_1.jsx)(ImageIconNav_1.default, { to: "".concat(basePath, "/pages/").concat(menu.slug), iconSrc: menu.iconSrc, openNewTab: false }));
@@ -28,6 +20,6 @@ function PageMenuItemNav(_a) {
             return ((0, jsx_runtime_1.jsx)(IconNav_1.default, { to: "".concat(basePath, "/pages/").concat(menu.slug), iconName: menu.iconName, openNewTab: false }));
         }
     }
-    return isContextMenu ? ((0, jsx_runtime_1.jsx)(Navigations_1.ContextTextLabelNav, { preventLineChange: true, openNewTab: false, to: "".concat(basePath, "/pages/").concat(menu.slug), text: menu.name })) : ((0, jsx_runtime_1.jsx)(Navigations_1.TextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: "".concat(basePath, "/pages/").concat(menu.slug), text: menu.name }));
+    return isContextMenu ? ((0, jsx_runtime_1.jsx)(Navigations_1.ContextTextLabelNav, { preventLineChange: true, openNewTab: false, to: "".concat(basePath, "/pages/").concat(menu.slug), text: menu.name })) : ((0, jsx_runtime_1.jsx)(Navigations_1.TextLabelNav, { preventLineChange: true, openNewTab: false, to: "".concat(basePath, "/pages/").concat(menu.slug), text: menu.name }));
 }
 exports.default = PageMenuItemNav;

package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js

@@ -86,7 +86,7 @@ function TextFieldBase(_a) {
         clearErrors(name);
     }
     function handleKeyDown(e) {
-        if (textLineType === 'single' && enterSubmitMode === 'none' && e.code === 'Enter') {
+        if (textLineType === 'single' && enterSubmitMode === 'none' && e.key === 'Enter') {
             e.preventDefault();
         }
         if (inputType === 'number') {

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

@@ -20,6 +20,7 @@ export type BasicListItemProps = {
     iBtn2IconFillType?: 'fill' | 'line';
     mBtnFillType?: 'fill' | 'line';
     mBtnText?: PDSTextType;
+    mBtnState?: 'normal' | 'disabled';
     dividerType?: 'none' | 'solid';
     titleFontWeight?: 'bold' | 'regular';
     checkboxId?: number | string;
@@ -47,5 +48,5 @@ export type StyleProps = {
     spacingMode?: 'none' | 'use';
     onlyLeftArea?: boolean;
 };
-declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, spacingMode, onClick, onClickRadio, onClickSwitch, onClickIBtn1, onClickIBtn2, onClickMBtn }: BasicListItemProps): JSX.Element;
+declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, mBtnState, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, spacingMode, onClick, onClickRadio, onClickSwitch, onClickIBtn1, onClickIBtn2, onClickMBtn }: BasicListItemProps): JSX.Element;
 export default BasicListItem;

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

@@ -25,7 +25,7 @@ var Contents_1 = __importDefault(require("./Contents"));
 var LeftBox_1 = require("./LeftBox");
 var RightBox_1 = require("./RightBox");
 function BasicListItem(_a) {
-    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _q = _a.switchState, switchState = _q === void 0 ? 'normal' : _q, _r = _a.switchStatus, switchStatus = _r === void 0 ? 'off' : _r, _s = _a.spacingMode, spacingMode = _s === void 0 ? 'use' : _s, onClick = _a.onClick, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn;
+    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.mBtnState, mBtnState = _o === void 0 ? 'normal' : _o, _p = _a.dividerType, dividerType = _p === void 0 ? 'none' : _p, _q = _a.titleFontWeight, titleFontWeight = _q === void 0 ? 'regular' : _q, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _r = _a.switchState, switchState = _r === void 0 ? 'normal' : _r, _s = _a.switchStatus, switchStatus = _s === void 0 ? 'off' : _s, _t = _a.spacingMode, spacingMode = _t === void 0 ? 'use' : _t, onClick = _a.onClick, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn;
     var methods = (0, react_hook_form_1.useFormContext)();
     var isSelected = methods === null || methods === void 0 ? void 0 : methods.watch((checkboxId === null || checkboxId === void 0 ? void 0 : checkboxId.toString()) || '');
     var handleIBtn1Click = function (e) {
@@ -64,7 +64,7 @@ function BasicListItem(_a) {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsx)(S_BasicListItem, __assign({ "x-pds-name": "BasicListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isSelected: isSelected, onClick: handleClick, spacingMode: spacingMode }, { children: (0, jsx_runtime_1.jsxs)(S_BasicListItemBox, __assign({ imageIconMode: imageIconMode, captionText: captionText, spacingMode: spacingMode, dividerType: dividerType }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' }, { children: [selectionMode === 'check' && checkboxId && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { id: checkboxId }), selectionMode === 'radio' && radioValue && radioId && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Radio, { id: radioId, value: radioValue, onChange: onClickRadio })), badgeMode === 'left' && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Badge, { status: badgeStatus }), imageIconMode === 'image' && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { src: imageSrc, shape: imageShapeType }), imageIconMode === 'icon' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Icon, { name: iconName, fill: iconFillType === 'fill' })), (0, jsx_runtime_1.jsxs)(Contents_1.default, { children: [(0, jsx_runtime_1.jsx)(Contents_1.default.Title, { text: titleText, colorTheme: titleTextColorTheme === 'none' ? 'sysTextPrimary' : 'sysTextError', font: titleFontWeight === 'bold' ? 'body2Bold' : 'body2Regular' }), captionText && (0, jsx_runtime_1.jsx)(Contents_1.default.Caption, { text: captionText })] })] })), (0, jsx_runtime_1.jsxs)(RightBox_1.RightBox, __assign({ hasFixedHeight: displayType === 'text' }, { children: [(displayType === 'text' || displayType === 'ibtn_text') && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.Description, { text: descText, icon: displayType === 'ibtn_text' ? ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click })) : undefined })), displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn2IconName, fill: iBtn2IconFillType === 'fill', onClick: onClickIBtn2 }), (0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click })] })), displayType === 'mbtn' && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.MainButton, { text: mBtnText, fill: mBtnFillType === 'fill', onClick: onClickMBtn })), displayType === 'switch' && switchName && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.Switch, { name: switchName, state: switchState, status: switchStatus, onClick: onClickSwitch }))] }))] })) })));
+    return ((0, jsx_runtime_1.jsx)(S_BasicListItem, __assign({ "x-pds-name": "BasicListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isSelected: isSelected, onClick: handleClick, spacingMode: spacingMode }, { children: (0, jsx_runtime_1.jsxs)(S_BasicListItemBox, __assign({ imageIconMode: imageIconMode, captionText: captionText, spacingMode: spacingMode, dividerType: dividerType }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' }, { children: [selectionMode === 'check' && checkboxId && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { id: checkboxId }), selectionMode === 'radio' && radioValue && radioId && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Radio, { id: radioId, value: radioValue, onChange: onClickRadio })), badgeMode === 'left' && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Badge, { status: badgeStatus }), imageIconMode === 'image' && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { src: imageSrc, shape: imageShapeType }), imageIconMode === 'icon' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Icon, { name: iconName, fill: iconFillType === 'fill' })), (0, jsx_runtime_1.jsxs)(Contents_1.default, { children: [(0, jsx_runtime_1.jsx)(Contents_1.default.Title, { text: titleText, colorTheme: titleTextColorTheme === 'none' ? 'sysTextPrimary' : 'sysTextError', font: titleFontWeight === 'bold' ? 'body2Bold' : 'body2Regular' }), captionText && (0, jsx_runtime_1.jsx)(Contents_1.default.Caption, { text: captionText })] })] })), (0, jsx_runtime_1.jsxs)(RightBox_1.RightBox, __assign({ hasFixedHeight: displayType === 'text' }, { children: [(displayType === 'text' || displayType === 'ibtn_text') && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.Description, { text: descText, icon: displayType === 'ibtn_text' ? ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click })) : undefined })), displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn2IconName, fill: iBtn2IconFillType === 'fill', onClick: onClickIBtn2 }), (0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click })] })), displayType === 'mbtn' && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.MainButton, { text: mBtnText, fill: mBtnFillType === 'fill', state: mBtnState, onClick: onClickMBtn })), displayType === 'switch' && switchName && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.Switch, { name: switchName, state: switchState, status: switchStatus, onClick: onClickSwitch }))] }))] })) })));
 }
 var S_BasicListItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: ", ";\n"])), function (_a) {
     var theme = _a.theme, isSelected = _a.isSelected;

package/dist/src/mobile/components/BasicListItem/RightBox/MainButton.d.ts

@@ -2,6 +2,7 @@
 import type { BasicListItemProps } from '../BasicListItem';
 export type MainButtonPropTypes = {
     text: BasicListItemProps['mBtnText'];
+    state: 'disabled' | 'normal';
     fill: boolean;
     onClick: BasicListItemProps['onClickMBtn'];
 };

package/dist/src/mobile/components/BasicListItem/RightBox/MainButton.js

@@ -4,7 +4,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var components_1 = require("../../../../hybrid/components");
 var MainButton_1 = require("../../MainButton");
 var MainButton = function (_a) {
-    var text = _a.text, fill = _a.fill, onClick = _a.onClick;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: text, fillType: fill ? 'fill' : 'line', size: "small", onClick: onClick }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c", spacingType: "width" })] }));
+    var text = _a.text, state = _a.state, fill = _a.fill, onClick = _a.onClick;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: text, state: state, fillType: fill ? 'fill' : 'line', size: "small", onClick: onClick }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c", spacingType: "width" })] }));
 };
 exports.default = MainButton;

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

@@ -14,7 +14,9 @@ export type ChatBubbleListItemProps = {
     contextMenuOptionArray?: PDSValueOption[];
     contextMenuState?: 'normal' | 'disabled';
     children?: React.ReactNode;
+    downloadIBtnMode?: 'use' | 'none';
     onClickContextMenuItem?: (option: PDSValueOption) => void;
+    onClickDownloadIBtn?: () => void;
 };
-declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, countMode, countText, contextMenuOptionArray, contextMenuState, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
+declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, countMode, countText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, onClickContextMenuItem, onClickDownloadIBtn }: ChatBubbleListItemProps): JSX.Element;
 export default ChatBubbleListItem;

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

@@ -68,8 +68,8 @@ var profileImageBorderColorTheme = {
     transparent: 'ui_cpnt_list_chatbubble_base_transparent'
 };
 function ChatBubbleListItem(_a) {
-    var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, _e = _a.countMode, countMode = _e === void 0 ? 'none' : _e, countText = _a.countText, contextMenuOptionArray = _a.contextMenuOptionArray, _f = _a.contextMenuState, contextMenuState = _f === void 0 ? 'normal' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
-    var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
+    var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, _e = _a.countMode, countMode = _e === void 0 ? 'none' : _e, countText = _a.countText, contextMenuOptionArray = _a.contextMenuOptionArray, _f = _a.contextMenuState, contextMenuState = _f === void 0 ? 'normal' : _f, children = _a.children, _g = _a.downloadIBtnMode, downloadIBtnMode = _g === void 0 ? 'none' : _g, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn;
+    var _h = (0, react_1.useState)(false), isContextMenuOpen = _h[0], setIsContextMenuOpen = _h[1];
     var contextMenuRef = (0, react_1.useRef)(null);
     var chatBody = document.querySelector('#chatMessageBox');
     var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -142,7 +142,7 @@ function ChatBubbleListItem(_a) {
         }
         setIsContextMenuOpen(false);
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] }))), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] })))] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] }))] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] }))] }))] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
 }
 var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -168,13 +168,24 @@ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_5 || (te
     return (isOtherAvatarImpact ? ImageViewBrandPrimary : ImageViewDefault);
 });
 var S_RightBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-var S_ChatBubbleBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
-var MyChatBubble = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  justify-content: flex-end;\n"], ["\n  justify-content: flex-end;\n"])));
-var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n\n  ", ";\n"], ["\n  display: flex;\n  flex: 1;\n\n  ", ";\n"])), function (_a) {
+var S_DownloadIconWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-left: ", ";\n  margin-right: ", ";\n"], ["\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (_a) {
+    var isMe = _a.isMe, theme = _a.theme;
+    return !isMe && theme.spacing.spacingB;
+}, function (_a) {
+    var isMe = _a.isMe, theme = _a.theme;
+    return isMe && theme.spacing.spacingB;
+});
+var S_Box = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n"])));
+var S_ChatBubbleBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
+var MyChatBubble = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  justify-content: flex-end;\n"], ["\n  justify-content: flex-end;\n"])));
+var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n\n  ", ";\n"], ["\n  display: flex;\n  flex: 1;\n\n  ", ";\n"])), function (_a) {
     var isMe = _a.isMe;
     return isMe && MyChatBubble;
 });
-var S_TimeWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  align-items: ", ";\n  align-self: flex-end;\n  display: flex;\n  flex-direction: column;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: ", ";\n  align-self: flex-end;\n  display: flex;\n  flex-direction: column;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: ", ";\n  align-self: ", ";\n  display: flex;\n  flex-direction: column;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: ", ";\n  align-self: ", ";\n  display: flex;\n  flex-direction: column;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+    var isMe = _a.isMe;
+    return isMe && 'flex-end';
+}, function (_a) {
     var isMe = _a.isMe;
     return isMe && 'flex-end';
 }, function (_a) {
@@ -184,7 +195,7 @@ var S_TimeWrapper = styled_components_1.default.div(templateObject_10 || (templa
     var isMe = _a.isMe, theme = _a.theme;
     return isMe && theme.spacing.spacingA;
 });
-var S_SeeMoreButton = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  justify-content: right;\n  margin-top: ", ";\n  min-width: 48px;\n  opacity: ", ";\n  padding-right: ", ";\n  position: relative;\n  width: 48px;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  justify-content: right;\n  margin-top: ", ";\n  min-width: 48px;\n  opacity: ", ";\n  padding-right: ", ";\n  position: relative;\n  width: 48px;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"])), function (_a) {
+var S_SeeMoreButton = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  justify-content: right;\n  margin-top: ", ";\n  min-width: 48px;\n  opacity: ", ";\n  padding-right: ", ";\n  position: relative;\n  width: 48px;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  justify-content: right;\n  margin-top: ", ";\n  min-width: 48px;\n  opacity: ", ";\n  padding-right: ", ";\n  position: relative;\n  width: 48px;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {
@@ -198,4 +209,4 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_11 || (temp
     return hoverMode === 'use' && '1';
 });
 exports.default = ChatBubbleListItem;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

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

@@ -6,10 +6,15 @@ export type Props = {
     titleText?: PDSTextType;
     descText?: PDSTextType;
     captionText?: PDSTextType;
+    onClickCaptionText?: () => void;
     titleStyleTheme?: 'headingBold' | 'subTitleBold';
-    headerDisplayType?: 'none' | 'ibtn1';
+    headerDisplayType?: 'none' | 'ibtn1' | 'ibtn2' | 'ibtn3';
     headerIBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
     headerIBtn1IconFillType?: 'line' | 'fill';
+    headerIBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
+    headerIBtn2IconFillType?: 'line' | 'fill';
+    headerIBtn3IconName?: FillIconNameKeys | LineIconNameKeys;
+    headerIBtn3IconFillType?: 'line' | 'fill';
     children?: React.ReactNode;
     bodyChildren?: React.ReactNode;
     textFieldState?: 'normal' | 'read_only' | 'disabled';
@@ -41,6 +46,8 @@ export type Props = {
     onClickFooterIBtn3?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     onSubmit: (value: string) => void;
     onClickHeaderIBtn1?: () => void;
+    onClickHeaderIBtn2?: () => void;
+    onClickHeaderIBtn3?: () => void;
 };
 declare const ChatList: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default ChatList;

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

@@ -55,14 +55,14 @@ var baseBackgroundColors = {
     transparent: 'ui_cpnt_list_base_area_transparent'
 };
 var ChatList = react_1.default.forwardRef(function (_a, ref) {
-    var _b = _a.colorTheme, colorTheme = _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, bodyChildren = _a.bodyChildren, _h = _a.textFieldState, textFieldState = _h === void 0 ? 'normal' : _h, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _j = _a.scrollVisibleType, scrollVisibleType = _j === void 0 ? 'moving' : _j, footerChildren = _a.footerChildren, _k = _a.submitIBtnState, submitIBtnState = _k === void 0 ? 'normal' : _k, bodyMBtnText = _a.bodyMBtnText, _l = _a.bodySpacingMode, bodySpacingMode = _l === void 0 ? 'none' : _l, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, _m = _a.footerIBtn1State, footerIBtn1State = _m === void 0 ? 'normal' : _m, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, _o = _a.footerIBtn1Type, footerIBtn1Type = _o === void 0 ? 'button' : _o, onClickFooterIBtn1 = _a.onClickFooterIBtn1, _p = _a.footerIBtn2State, footerIBtn2State = _p === void 0 ? 'normal' : _p, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, _q = _a.footerIBtn2Type, footerIBtn2Type = _q === void 0 ? 'button' : _q, onClickFooterIBtn2 = _a.onClickFooterIBtn2, _r = _a.footerIBtn3State, footerIBtn3State = _r === void 0 ? 'normal' : _r, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, _s = _a.footerIBtn3Type, footerIBtn3Type = _s === void 0 ? 'button' : _s, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
+    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, onClickCaptionText = _a.onClickCaptionText, _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, headerIBtn2IconName = _a.headerIBtn2IconName, _h = _a.headerIBtn2IconFillType, headerIBtn2IconFillType = _h === void 0 ? 'line' : _h, headerIBtn3IconName = _a.headerIBtn3IconName, _j = _a.headerIBtn3IconFillType, headerIBtn3IconFillType = _j === void 0 ? 'line' : _j, children = _a.children, bodyChildren = _a.bodyChildren, _k = _a.textFieldState, textFieldState = _k === void 0 ? 'normal' : _k, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _l = _a.scrollVisibleType, scrollVisibleType = _l === void 0 ? 'moving' : _l, footerChildren = _a.footerChildren, _m = _a.submitIBtnState, submitIBtnState = _m === void 0 ? 'normal' : _m, bodyMBtnText = _a.bodyMBtnText, _o = _a.bodySpacingMode, bodySpacingMode = _o === void 0 ? 'none' : _o, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, onClickHeaderIBtn2 = _a.onClickHeaderIBtn2, onClickHeaderIBtn3 = _a.onClickHeaderIBtn3, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, _p = _a.footerIBtn1State, footerIBtn1State = _p === void 0 ? 'normal' : _p, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, _q = _a.footerIBtn1Type, footerIBtn1Type = _q === void 0 ? 'button' : _q, onClickFooterIBtn1 = _a.onClickFooterIBtn1, _r = _a.footerIBtn2State, footerIBtn2State = _r === void 0 ? 'normal' : _r, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, _s = _a.footerIBtn2Type, footerIBtn2Type = _s === void 0 ? 'button' : _s, onClickFooterIBtn2 = _a.onClickFooterIBtn2, _t = _a.footerIBtn3State, footerIBtn3State = _t === void 0 ? 'normal' : _t, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, _u = _a.footerIBtn3Type, footerIBtn3Type = _u === void 0 ? 'button' : _u, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
     var methods = (0, react_hook_form_1.useForm)({
         mode: 'onChange',
         defaultValues: {
             chat: ''
         }
     });
-    var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _t = methods.formState, isValid = _t.isValid, isDirty = _t.isDirty, isSubmitSuccessful = _t.isSubmitSuccessful;
+    var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _v = methods.formState, isValid = _v.isValid, isDirty = _v.isDirty, isSubmitSuccessful = _v.isSubmitSuccessful;
     /**
      * @when 폼 제출에 성공했을 시
      * @expected 폼을 초기화합니다.
@@ -90,7 +90,7 @@ var ChatList = react_1.default.forwardRef(function (_a, ref) {
     var callBackAfterScrollToBottom = function () {
         reset();
     };
-    return ((0, jsx_runtime_1.jsxs)(S_ChatList, __assign({ "x-pds-name": "ChatList", "x-pds-element-type": "component", "x-pds-device-type": "mobile", backgroundColor: baseBackgroundColors[colorTheme], id: "chatList" }, { children: [headerMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { colorTheme: colorTheme, titleText: titleText, descText: descText, captionText: captionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' })] })), (0, jsx_runtime_1.jsx)(Body_1.default, __assign({ scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, bodyChildren: bodyChildren, ref: ref }, { children: children })), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsx)("form", __assign({ onSubmit: handleSubmit(handleSubmitChat) }, { children: (0, jsx_runtime_1.jsx)(Footer_1.default, { colorTheme: colorTheme, textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }) })) })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })));
+    return ((0, jsx_runtime_1.jsxs)(S_ChatList, __assign({ "x-pds-name": "ChatList", "x-pds-element-type": "component", "x-pds-device-type": "mobile", backgroundColor: baseBackgroundColors[colorTheme], id: "chatList" }, { children: [headerMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { colorTheme: colorTheme, titleText: titleText, descText: descText, captionText: captionText, onClickCaptionText: onClickCaptionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, headerIBtn2IconName: headerIBtn2IconName, headerIBtn2IconFillType: headerIBtn2IconFillType, headerIBtn3IconName: headerIBtn3IconName, headerIBtn3IconFillType: headerIBtn3IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1, onClickHeaderIBtn2: onClickHeaderIBtn2, onClickHeaderIBtn3: onClickHeaderIBtn3 }), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' })] })), (0, jsx_runtime_1.jsx)(Body_1.default, __assign({ scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, bodyChildren: bodyChildren, ref: ref }, { children: children })), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsx)("form", __assign({ onSubmit: handleSubmit(handleSubmitChat) }, { children: (0, jsx_runtime_1.jsx)(Footer_1.default, { colorTheme: colorTheme, textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }) })) })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })));
 });
 var S_ChatList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])), function (_a) {
     var backgroundColor = _a.backgroundColor, theme = _a.theme;

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

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

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

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -23,8 +34,8 @@ var iconColors = {
     transparent: 'ui_cpnt_button_icon_white'
 };
 function Header(_a) {
-    var colorTheme = _a.colorTheme, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, titleStyleTheme = _a.titleStyleTheme, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1;
-    return ((0, jsx_runtime_1.jsxs)(S_HeaderContentWrapper, { children: [(0, jsx_runtime_1.jsxs)(S_HeaderLeftBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[colorTheme], wordBreak: "break_all" })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: colorTheme === 'solid' ? 'sysTextSecondary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" })] })), captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'solid' ? 'sysTextTertiary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" })] }))] }), headerDisplayType === 'ibtn1' && headerIBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }))] }));
+    var colorTheme = _a.colorTheme, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, onClickCaptionText = _a.onClickCaptionText, titleStyleTheme = _a.titleStyleTheme, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType, headerIBtn2IconName = _a.headerIBtn2IconName, headerIBtn2IconFillType = _a.headerIBtn2IconFillType, headerIBtn3IconName = _a.headerIBtn3IconName, headerIBtn3IconFillType = _a.headerIBtn3IconFillType, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, onClickHeaderIBtn2 = _a.onClickHeaderIBtn2, onClickHeaderIBtn3 = _a.onClickHeaderIBtn3;
+    return ((0, jsx_runtime_1.jsxs)(S_HeaderContentWrapper, { children: [(0, jsx_runtime_1.jsxs)(S_HeaderLeftBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[colorTheme], wordBreak: "break_all" })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: colorTheme === 'solid' ? 'sysTextSecondary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" })] })), captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(S_CaptionTextWrapper, __assign({ onClick: onClickCaptionText }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'solid' ? 'sysTextTertiary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" }) }))] }))] }), headerDisplayType === 'ibtn3' && headerIBtn3IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn3IconFillType, onClick: onClickHeaderIBtn3 })), (headerDisplayType === 'ibtn2' || headerDisplayType === 'ibtn3') && headerIBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn2IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn2IconFillType, onClick: onClickHeaderIBtn2 })), headerDisplayType !== 'none' && headerIBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }))] }));
 }
 var S_HeaderContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -40,5 +51,6 @@ var S_HeaderContentWrapper = styled_components_1.default.div(templateObject_1 ||
     return theme.spacing.spacingD;
 });
 var S_HeaderLeftBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+var S_CaptionTextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: fit-content;\n"], ["\n  width: fit-content;\n"])));
 exports.default = Header;
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;