pds-dev-kit-web 1.4.35 → 1.4.38

package/dist/src/common/styles/colorSet/UIColor.json

@@ -530,7 +530,15 @@
     "ui_51": "sys_background_dimmed_65",
     "ui_cpnt_list_text_caption_03": "sys_text_grey_darktheme_03",
     "ui_cpnt_list_chatbubble_base_area": "sys_component_base_01",
-    "ui_cpnt_list_chatbubble_base_area_my": "usr_brand_primary",
-    "ui_cpnt_list_chatbubble_text_my": "usr_on_brand_primary",
-    "ui_papp_livechat_link": "sys_papp_post_notice_link"
+    "ui_cpnt_list_chatbubble_base_area_my": "sys_component_base_01",
+    "ui_cpnt_list_chatbubble_text_my": "sys_text_grey_01",
+    "ui_papp_livechat_link": "sys_papp_livechat_link",
+    "ui_cpnt_list_chatbubble_base_area_seller_color": "usr_brand_primary",
+    "ui_cpnt_list_chatbubble_text_seller_color": "usr_on_brand_primary",
+    "ui_cpnt_list_chatbubble_base_area_subscriber": "sys_component_base_01",
+    "ui_cpnt_list_chatbubble_text_subscriber": "sys_text_grey_01",
+    "ui_cpnt_list_chatbubble_base_area_my_color": "usr_brand_primary",
+    "ui_cpnt_list_chatbubble_text_my_color": "usr_on_brand_primary",
+    "ui_cpnt_list_chatbubble_base_area_seller": "usr_brand_primary",
+    "ui_cpnt_list_chatbubble_text_seller": "usr_on_brand_primary"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -954,6 +954,14 @@ declare const colorSet: {
         ui_cpnt_list_chatbubble_base_area_my: string;
         ui_cpnt_list_chatbubble_text_my: string;
         ui_papp_livechat_link: string;
+        ui_cpnt_list_chatbubble_base_area_seller_color: string;
+        ui_cpnt_list_chatbubble_text_seller_color: string;
+        ui_cpnt_list_chatbubble_base_area_subscriber: string;
+        ui_cpnt_list_chatbubble_text_subscriber: string;
+        ui_cpnt_list_chatbubble_base_area_my_color: string;
+        ui_cpnt_list_chatbubble_text_my_color: string;
+        ui_cpnt_list_chatbubble_base_area_seller: string;
+        ui_cpnt_list_chatbubble_text_seller: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -533,4 +533,12 @@ export interface UITheme {
     ui_cpnt_list_chatbubble_base_area_my: string;
     ui_cpnt_list_chatbubble_text_my: string;
     ui_papp_livechat_link: string;
+    ui_cpnt_list_chatbubble_base_area_seller_color: string;
+    ui_cpnt_list_chatbubble_text_seller_color: string;
+    ui_cpnt_list_chatbubble_base_area_subscriber: string;
+    ui_cpnt_list_chatbubble_text_subscriber: string;
+    ui_cpnt_list_chatbubble_base_area_my_color: string;
+    ui_cpnt_list_chatbubble_text_my_color: string;
+    ui_cpnt_list_chatbubble_base_area_seller: string;
+    ui_cpnt_list_chatbubble_text_seller: string;
 }

package/dist/src/desktop/components/ChatBubbleListItem/ChatBubble.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare type ChatBubbleProps = {
-    colorTheme?: 'grey_01' | 'primary';
+    colorTheme?: 'my' | 'seller' | 'subscriber';
     tailType?: 'none' | 'left_top' | 'right_top';
     children?: React.ReactNode;
 };

package/dist/src/desktop/components/ChatBubbleListItem/ChatBubble.js

@@ -29,11 +29,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var backgroundColorTheme = {
-    primary: 'ui_cpnt_list_chatbubble_base_area_my',
-    grey_01: 'ui_cpnt_list_chatbubble_base_area'
+    my: 'ui_cpnt_list_chatbubble_base_area_my',
+    seller: 'ui_cpnt_list_chatbubble_base_area_seller',
+    subscriber: 'ui_cpnt_list_chatbubble_base_area_subscriber'
 };
 function ChatBubble(_a) {
-    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'grey_01' : _b, _c = _a.tailType, tailType = _c === void 0 ? 'left_top' : _c, children = _a.children;
+    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'seller' : _b, _c = _a.tailType, tailType = _c === void 0 ? 'left_top' : _c, children = _a.children;
     return (react_1.default.createElement(S_ChatBubbleWrapper, null,
         react_1.default.createElement(S_Tail, { width: "8", height: "11", viewBox: "0 0 8 11", tailType: tailType, colorTheme: colorTheme },
             react_1.default.createElement("path", { d: "M1107,336.800385 C1107,341.257979 1107.46413,342.87441 1108.33566,344.50404 C1108.99708,345.740772 1109.89313,346.775532 1110.99903,347.583527 L1111,347.618755 L1110.99894,347.618755 C1108.35845,347.618755 1105.83748,347.107028 1103.52979,346.177337 C1104.54074,345.507794 1105.3496,344.61519 1105.93147,343.527194 C1106.6287,342.22349 1107,340.8866 1107,337.582996 L1107,337.582996 Z", transform: "rotate(180 555.765 173.81)" })),

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

@@ -36,12 +36,12 @@ var TextLabel_1 = require("../TextLabel");
 var ChatBubble_1 = __importDefault(require("./ChatBubble"));
 var Popup_1 = require("./Popup");
 var ChatBubbleColorTheme = {
-    seller_tail: 'grey_01',
-    seller: 'grey_01',
-    subscriber_tail: 'grey_01',
-    subscriber: 'grey_01',
-    my_tail: 'primary',
-    my: 'primary'
+    seller_tail: 'seller',
+    seller: 'seller',
+    subscriber_tail: 'subscriber',
+    subscriber: 'subscriber',
+    my_tail: 'my',
+    my: 'my'
 };
 var ChatBubbleTailType = {
     seller_tail: 'left_top',
@@ -85,7 +85,7 @@ function ChatBubbleListItem(_a) {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(S_ChatBubbleListItem, { hoverMode: hoverMode, isMy: isMy, imageMode: imageMode },
             imageMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null, isTail && !isMy ? (react_1.default.createElement(S_ImageViewWrapper, { isSeller: isSeller },
-                react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: 38 }))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })))),
+                react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: 40 }))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })))),
             react_1.default.createElement(S_RightBox, null,
                 isTail && !isMy && (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: isSeller ? 'usrTextBrandPrimary' : 'sysTextPrimary' }),
@@ -133,15 +133,15 @@ var S_ChatBubbleListItem = styled_components_1.default.div(templateObject_4 || (
     var imageMode = _a.imageMode;
     return imageMode === 'none' && NoImageChatBubbleListItem;
 });
-var ImageViewSeller = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border: 1px solid ", ";\n"], ["\n  border: 1px solid ", ";\n"])), function (_a) {
+var ImageViewSeller = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-shadow: 0 0 0 2px ", " inset;\n"], ["\n  box-shadow: 0 0 0 2px ", " inset;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_profile_image_border_brandprimary;
 });
-var ImageViewDefault = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border: 1px solid ", ";\n"], ["\n  border: 1px solid ", ";\n"])), function (_a) {
+var ImageViewDefault = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-shadow: 0 0 0 1px ", " inset;\n"], ["\n  box-shadow: 0 0 0 1px ", " inset;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_profile_image_border;
 });
-var S_ImageViewWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-radius: 50%;\n  height: fit-content;\n  min-width: fit-content;\n  width: fit-content;\n  margin-right: ", ";\n\n  ", ";\n"], ["\n  border-radius: 50%;\n  height: fit-content;\n  min-width: fit-content;\n  width: fit-content;\n  margin-right: ", ";\n\n  ", ";\n"])), function (_a) {
+var S_ImageViewWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-radius: 50%;\n  height: fit-content;\n  min-width: fit-content;\n  width: fit-content;\n  margin-right: ", ";\n  position: relative;\n\n  &::after {\n    content: '';\n    box-sizing: border-box;\n    border-radius: 50%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  border-radius: 50%;\n  height: fit-content;\n  min-width: fit-content;\n  width: fit-content;\n  margin-right: ", ";\n  position: relative;\n\n  &::after {\n    content: '';\n    box-sizing: border-box;\n    border-radius: 50%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {

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

@@ -36,9 +36,10 @@ export declare type Props = {
     footerIBtn3IconName?: FillIconNameKeys | LineIconNameKeys;
     footerIBtn3IconFillType?: 'fill' | 'line';
     footerIBtn3Type?: 'button' | 'upload';
+    footerIBtn3Accept?: string;
     onClickFooterIBtn3?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     onSubmit: (value: string) => void;
     onClickHeaderIBtn1?: () => void;
 };
-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;
+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, footerIBtn3Accept, onClickFooterIBtn3 }: Props): JSX.Element;
 export default ChatList;

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

@@ -50,7 +50,7 @@ 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, 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 _b = _a.styleTheme, styleTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, _d = _a.titleStyleTheme, titleStyleTheme = _d === void 0 ? 'subTitleBold' : _d, _e = _a.headerDisplayType, headerDisplayType = _e === void 0 ? 'none' : _e, _f = _a.headerIBtn1IconName, headerIBtn1IconName = _f === void 0 ? 'ic_xmark' : _f, _g = _a.headerIBtn1IconFillType, headerIBtn1IconFillType = _g === void 0 ? 'line' : _g, children = _a.children, _h = _a.textFieldState, textFieldState = _h === void 0 ? 'normal' : _h, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _j = _a.scrollVisibleType, scrollVisibleType = _j === void 0 ? 'moving' : _j, footerChildren = _a.footerChildren, _k = _a.submitIBtnState, submitIBtnState = _k === void 0 ? 'normal' : _k, bodyMBtnText = _a.bodyMBtnText, _l = _a.bodySpacingMode, bodySpacingMode = _l === void 0 ? 'none' : _l, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, _m = _a.footerIBtn1State, footerIBtn1State = _m === void 0 ? 'normal' : _m, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, _o = _a.footerIBtn1Type, footerIBtn1Type = _o === void 0 ? 'button' : _o, onClickFooterIBtn1 = _a.onClickFooterIBtn1, _p = _a.footerIBtn2State, footerIBtn2State = _p === void 0 ? 'normal' : _p, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, _q = _a.footerIBtn2Type, footerIBtn2Type = _q === void 0 ? 'button' : _q, onClickFooterIBtn2 = _a.onClickFooterIBtn2, _r = _a.footerIBtn3State, footerIBtn3State = _r === void 0 ? 'normal' : _r, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, _s = _a.footerIBtn3Type, footerIBtn3Type = _s === void 0 ? 'button' : _s, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
     var methods = (0, react_hook_form_1.useForm)({
         mode: 'onChange',
         defaultValues: {
@@ -82,7 +82,7 @@ function ChatList(_a) {
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
         react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, methods),
             react_1.default.createElement("form", { onSubmit: handleSubmit(handleSubmitChat) },
-                react_1.default.createElement(Footer_1.default, { textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, onClickFooterIBtn3: onClickFooterIBtn3 }))),
+                react_1.default.createElement(Footer_1.default, { textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }))),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" })));
 }
 var S_ChatList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])), function (_a) {

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

@@ -1,7 +1,7 @@
 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'> & {
+declare type Props = Pick<ChatListProps, 'textFieldDefaultText' | 'textFieldHintText' | 'textFieldState' | 'textFieldMaxLength' | 'footerIBtn3Accept'> & {
     isSubmitBtnActive?: boolean;
     submitIBtnIconName?: FillIconNameKeys | LineIconNameKeys;
     submitIBtnIconFillType?: 'fill' | 'line';
@@ -21,5 +21,5 @@ declare type Props = Pick<ChatListProps, 'textFieldDefaultText' | 'textFieldHint
     footerIBtn3Type?: 'button' | 'upload';
     onClickFooterIBtn3?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
-declare function ChatTextField({ textFieldDefaultText, textFieldHintText, textFieldState, textFieldMaxLength, isSubmitBtnActive, submitIBtnIconName, submitIBtnIconFillType, footerIBtn1State, footerIBtn1IconName, footerIBtn1IconFillType, footerIBtn1Type, onClickFooterIBtn1, footerIBtn2State, footerIBtn2IconName, footerIBtn2IconFillType, footerIBtn2Type, onClickFooterIBtn2, footerIBtn3State, footerIBtn3IconName, footerIBtn3IconFillType, footerIBtn3Type, onClickFooterIBtn3 }: 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, footerIBtn3Accept, onClickFooterIBtn3 }: Props): JSX.Element;
 export default ChatTextField;

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

@@ -13,7 +13,7 @@ var IconButton_1 = require("../IconButton");
 var TextField_1 = require("../TextField");
 var UploadIconButton_1 = require("../UploadIconButton");
 function ChatTextField(_a) {
-    var textFieldDefaultText = _a.textFieldDefaultText, textFieldHintText = _a.textFieldHintText, textFieldState = _a.textFieldState, textFieldMaxLength = _a.textFieldMaxLength, isSubmitBtnActive = _a.isSubmitBtnActive, _b = _a.submitIBtnIconName, submitIBtnIconName = _b === void 0 ? 'ic_paper_plane' : _b, _c = _a.submitIBtnIconFillType, submitIBtnIconFillType = _c === void 0 ? 'fill' : _c, footerIBtn1State = _a.footerIBtn1State, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, footerIBtn1Type = _a.footerIBtn1Type, onClickFooterIBtn1 = _a.onClickFooterIBtn1, footerIBtn2State = _a.footerIBtn2State, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, footerIBtn2Type = _a.footerIBtn2Type, onClickFooterIBtn2 = _a.onClickFooterIBtn2, footerIBtn3State = _a.footerIBtn3State, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, footerIBtn3Type = _a.footerIBtn3Type, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
+    var textFieldDefaultText = _a.textFieldDefaultText, textFieldHintText = _a.textFieldHintText, textFieldState = _a.textFieldState, textFieldMaxLength = _a.textFieldMaxLength, isSubmitBtnActive = _a.isSubmitBtnActive, _b = _a.submitIBtnIconName, submitIBtnIconName = _b === void 0 ? 'ic_paper_plane' : _b, _c = _a.submitIBtnIconFillType, submitIBtnIconFillType = _c === void 0 ? 'fill' : _c, footerIBtn1State = _a.footerIBtn1State, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, footerIBtn1Type = _a.footerIBtn1Type, onClickFooterIBtn1 = _a.onClickFooterIBtn1, footerIBtn2State = _a.footerIBtn2State, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, footerIBtn2Type = _a.footerIBtn2Type, onClickFooterIBtn2 = _a.onClickFooterIBtn2, footerIBtn3State = _a.footerIBtn3State, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, footerIBtn3Type = _a.footerIBtn3Type, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
     var chatValidation = {
         validate: function (value) {
             if (!value)
@@ -22,12 +22,12 @@ function ChatTextField(_a) {
         }
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_FooterContentWrapper, null,
+        react_1.default.createElement(S_FooterContentWrapper, { footerIBtn2IconName: footerIBtn2IconName, footerIBtn3IconName: footerIBtn3IconName },
             footerIBtn3IconName && (react_1.default.createElement(react_1.default.Fragment, null, footerIBtn3Type === 'button' ? (react_1.default.createElement(IconButton_1.IconButton, { iconName: footerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn3State === 'normal'
                     ? 'ui_cpnt_button_icon_primary'
                     : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn3IconFillType, iconSize: 24, state: footerIBtn3State, onClick: onClickFooterIBtn3 })) : (react_1.default.createElement(UploadIconButton_1.UploadIconButton, { iconName: footerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn3State === 'normal'
                     ? 'ui_cpnt_button_icon_primary'
-                    : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn3IconFillType, iconSize: 24, state: footerIBtn3State, onClick: onClickFooterIBtn3 })))),
+                    : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn3IconFillType, iconSize: 24, state: footerIBtn3State, onClick: onClickFooterIBtn3, accept: footerIBtn3Accept })))),
             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'
@@ -43,8 +43,10 @@ function ChatTextField(_a) {
             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;
-    return theme.spacing.spacingE;
+    var theme = _a.theme, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn3IconName = _a.footerIBtn3IconName;
+    return footerIBtn2IconName || footerIBtn3IconName
+        ? "" + theme.spacing.spacingC
+        : "" + theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;

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

@@ -1,7 +1,7 @@
 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'> & {
+declare type Props = Pick<ChatListProps, 'footerChildren' | 'textFieldDefaultText' | 'textFieldHintText' | 'textFieldState' | 'textFieldMaxLength' | 'footerIBtn3Accept'> & {
     isSubmitBtnActive: boolean;
     submitIBtnIconName?: FillIconNameKeys | LineIconNameKeys;
     submitIBtnIconFillType?: 'fill' | 'line';
@@ -21,5 +21,5 @@ declare type Props = Pick<ChatListProps, 'footerChildren' | 'textFieldDefaultTex
     footerIBtn3Type?: 'button' | 'upload';
     onClickFooterIBtn3?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
-declare function Footer({ footerChildren, textFieldDefaultText, textFieldHintText, textFieldState, textFieldMaxLength, submitIBtnIconName, submitIBtnIconFillType, isSubmitBtnActive, footerIBtn1State, footerIBtn1IconName, footerIBtn1IconFillType, footerIBtn1Type, onClickFooterIBtn1, footerIBtn2State, footerIBtn2IconName, footerIBtn2IconFillType, footerIBtn2Type, onClickFooterIBtn2, footerIBtn3State, footerIBtn3IconName, footerIBtn3IconFillType, footerIBtn3Type, onClickFooterIBtn3 }: 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, footerIBtn3Accept, onClickFooterIBtn3 }: Props): JSX.Element;
 export default Footer;

package/dist/src/desktop/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, 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;
+    var footerChildren = _a.footerChildren, textFieldDefaultText = _a.textFieldDefaultText, textFieldHintText = _a.textFieldHintText, textFieldState = _a.textFieldState, textFieldMaxLength = _a.textFieldMaxLength, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, isSubmitBtnActive = _a.isSubmitBtnActive, footerIBtn1State = _a.footerIBtn1State, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, footerIBtn1Type = _a.footerIBtn1Type, onClickFooterIBtn1 = _a.onClickFooterIBtn1, footerIBtn2State = _a.footerIBtn2State, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, footerIBtn2Type = _a.footerIBtn2Type, onClickFooterIBtn2 = _a.onClickFooterIBtn2, footerIBtn3State = _a.footerIBtn3State, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, footerIBtn3Type = _a.footerIBtn3Type, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(ChatTextField_1.default, { textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, isSubmitBtnActive: isSubmitBtnActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, onClickFooterIBtn3: onClickFooterIBtn3 }),
+        react_1.default.createElement(ChatTextField_1.default, { textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, isSubmitBtnActive: isSubmitBtnActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }),
         react_1.default.createElement(S_FooterChildrenWrapper, null, footerChildren)));
 }
 var S_FooterChildrenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {

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

@@ -26,13 +26,13 @@ function Header(_a) {
     var styleTheme = _a.styleTheme, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, titleStyleTheme = _a.titleStyleTheme, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1;
     return (react_1.default.createElement(S_HeaderContentWrapper, null,
         react_1.default.createElement(S_HeaderLeftBox, null,
-            titleText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[styleTheme] })),
+            titleText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[styleTheme], wordBreak: "break_all" })),
             descText && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c" }),
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: "sysTextSecondary", colorOverride: styleTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined }))),
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: "sysTextSecondary", colorOverride: styleTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" }))),
             captionText && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary", colorOverride: styleTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined })))),
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary", colorOverride: styleTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" })))),
         headerDisplayType === 'ibtn1' && headerIBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[styleTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }))));
 }
 var S_HeaderContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTU.js

@@ -69,9 +69,12 @@ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  width: ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  width: ", ";\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  height: 100%;\n  width: ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  height: 100%;\n  width: ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer02_background;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_container_divider;
 }, function (_a) {
     var $contentsArea2Width = _a.$contentsArea2Width;
     return "calc(50% + (" + $contentsArea2Width + "px - 480px) / 2)";

package/dist/src/desktop/panels/DesktopBasicModal/DesktopBasicModal.js

@@ -101,7 +101,10 @@ var S_Btn2Wrapper = styled_components_1.default.div(templateObject_4 || (templat
     return theme.spacing.spacingB;
 });
 var S_Right = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var S_Header = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: 0 ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n"], ["\n  margin: 0 ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n"])), function (_a) {
+var S_Header = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-top: ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 }, function (_a) {
@@ -111,7 +114,7 @@ var S_Header = styled_components_1.default.div(templateObject_6 || (templateObje
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-var S_Body = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  flex: 1;\n  max-height: 50vh;\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  overflow: ", ";\n\n  ", "\n"], ["\n  flex: 1;\n  max-height: 50vh;\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  overflow: ", ";\n\n  ", "\n"])), function (_a) {
+var S_Body = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  flex: 1;\n  max-height: 50vh;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  overflow: ", ";\n\n  ", "\n"], ["\n  flex: 1;\n  max-height: 50vh;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  overflow: ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingF;
 }, function (_a) {
@@ -128,9 +131,9 @@ var S_Body = styled_components_1.default.div(templateObject_8 || (templateObject
     return bodyOverflowType;
 }, function (_a) {
     var bodySpacingMode = _a.bodySpacingMode;
-    return bodySpacingMode === 'none' && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      margin-bottom: 0;\n      margin-left: 0;\n      margin-right: 0;\n    "], ["\n      margin-bottom: 0;\n      margin-left: 0;\n      margin-right: 0;\n    "])));
+    return bodySpacingMode === 'none' && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-bottom: 0;\n      padding-left: 0;\n      padding-right: 0;\n    "], ["\n      padding-bottom: 0;\n      padding-left: 0;\n      padding-right: 0;\n    "])));
 });
-var S_Footer = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n"])), function (_a) {
+var S_Footer = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 }, function (_a) {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare type ChatBubbleProps = {
-    colorTheme?: 'grey_01' | 'primary';
+    colorTheme?: 'my' | 'seller' | 'subscriber';
     tailType?: 'none' | 'left_top' | 'right_top';
     children?: React.ReactNode;
 };

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

@@ -29,11 +29,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var backgroundColorTheme = {
-    primary: 'ui_cpnt_list_chatbubble_base_area_my',
-    grey_01: 'ui_cpnt_list_chatbubble_base_area'
+    my: 'ui_cpnt_list_chatbubble_base_area_my',
+    seller: 'ui_cpnt_list_chatbubble_base_area_seller',
+    subscriber: 'ui_cpnt_list_chatbubble_base_area_subscriber'
 };
 function ChatBubble(_a) {
-    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'grey_01' : _b, _c = _a.tailType, tailType = _c === void 0 ? 'left_top' : _c, children = _a.children;
+    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'seller' : _b, _c = _a.tailType, tailType = _c === void 0 ? 'left_top' : _c, children = _a.children;
     return (react_1.default.createElement(S_ChatBubbleWrapper, null,
         react_1.default.createElement(S_Tail, { width: "8", height: "11", viewBox: "0 0 8 11", tailType: tailType, colorTheme: colorTheme },
             react_1.default.createElement("path", { d: "M1107,336.800385 C1107,341.257979 1107.46413,342.87441 1108.33566,344.50404 C1108.99708,345.740772 1109.89313,346.775532 1110.99903,347.583527 L1111,347.618755 L1110.99894,347.618755 C1108.35845,347.618755 1105.83748,347.107028 1103.52979,346.177337 C1104.54074,345.507794 1105.3496,344.61519 1105.93147,343.527194 C1106.6287,342.22349 1107,340.8866 1107,337.582996 L1107,337.582996 Z", transform: "rotate(180 555.765 173.81)" })),

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

@@ -36,12 +36,12 @@ var TextLabel_1 = require("../TextLabel");
 var ChatBubble_1 = __importDefault(require("./ChatBubble"));
 var Popup_1 = require("./Popup");
 var ChatBubbleColorTheme = {
-    seller_tail: 'grey_01',
-    seller: 'grey_01',
-    subscriber_tail: 'grey_01',
-    subscriber: 'grey_01',
-    my_tail: 'primary',
-    my: 'primary'
+    seller_tail: 'seller',
+    seller: 'seller',
+    subscriber_tail: 'subscriber',
+    subscriber: 'subscriber',
+    my_tail: 'my',
+    my: 'my'
 };
 var ChatBubbleTailType = {
     seller_tail: 'left_top',
@@ -85,7 +85,7 @@ function ChatBubbleListItem(_a) {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(S_ChatBubbleListItem, { hoverMode: hoverMode, isMy: isMy, imageMode: imageMode },
             imageMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null, isTail && !isMy ? (react_1.default.createElement(S_ImageViewWrapper, { isSeller: isSeller },
-                react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: 38 }))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })))),
+                react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: 40 }))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })))),
             react_1.default.createElement(S_RightBox, null,
                 isTail && !isMy && (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: isSeller ? 'usrTextBrandPrimary' : 'sysTextPrimary' }),
@@ -133,15 +133,15 @@ var S_ChatBubbleListItem = styled_components_1.default.div(templateObject_4 || (
     var imageMode = _a.imageMode;
     return imageMode === 'none' && NoImageChatBubbleListItem;
 });
-var ImageViewSeller = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border: 1px solid ", ";\n"], ["\n  border: 1px solid ", ";\n"])), function (_a) {
+var ImageViewSeller = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-shadow: 0 0 0 2px ", " inset;\n"], ["\n  box-shadow: 0 0 0 2px ", " inset;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_profile_image_border_brandprimary;
 });
-var ImageViewDefault = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border: 1px solid ", ";\n"], ["\n  border: 1px solid ", ";\n"])), function (_a) {
+var ImageViewDefault = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-shadow: 0 0 0 1px ", " inset;\n"], ["\n  box-shadow: 0 0 0 1px ", " inset;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_profile_image_border;
 });
-var S_ImageViewWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-radius: 50%;\n  height: fit-content;\n  min-width: fit-content;\n  width: fit-content;\n  margin-right: ", ";\n\n  ", ";\n"], ["\n  border-radius: 50%;\n  height: fit-content;\n  min-width: fit-content;\n  width: fit-content;\n  margin-right: ", ";\n\n  ", ";\n"])), function (_a) {
+var S_ImageViewWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-radius: 50%;\n  height: fit-content;\n  min-width: fit-content;\n  width: fit-content;\n  margin-right: ", ";\n  position: relative;\n\n  &::after {\n    content: '';\n    box-sizing: border-box;\n    border-radius: 50%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  border-radius: 50%;\n  height: fit-content;\n  min-width: fit-content;\n  width: fit-content;\n  margin-right: ", ";\n  position: relative;\n\n  &::after {\n    content: '';\n    box-sizing: border-box;\n    border-radius: 50%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {

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

@@ -36,9 +36,10 @@ export declare type Props = {
     footerIBtn3IconName?: FillIconNameKeys | LineIconNameKeys;
     footerIBtn3IconFillType?: 'fill' | 'line';
     footerIBtn3Type?: 'button' | 'upload';
+    footerIBtn3Accept?: string;
     onClickFooterIBtn3?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     onSubmit: (value: string) => void;
     onClickHeaderIBtn1?: () => void;
 };
-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;
+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, footerIBtn3Accept, onClickFooterIBtn3 }: Props): JSX.Element;
 export default ChatList;

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

@@ -50,7 +50,7 @@ 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, 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 _b = _a.styleTheme, styleTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, _d = _a.titleStyleTheme, titleStyleTheme = _d === void 0 ? 'subTitleBold' : _d, _e = _a.headerDisplayType, headerDisplayType = _e === void 0 ? 'none' : _e, _f = _a.headerIBtn1IconName, headerIBtn1IconName = _f === void 0 ? 'ic_xmark' : _f, _g = _a.headerIBtn1IconFillType, headerIBtn1IconFillType = _g === void 0 ? 'line' : _g, children = _a.children, _h = _a.textFieldState, textFieldState = _h === void 0 ? 'normal' : _h, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _j = _a.scrollVisibleType, scrollVisibleType = _j === void 0 ? 'moving' : _j, footerChildren = _a.footerChildren, _k = _a.submitIBtnState, submitIBtnState = _k === void 0 ? 'normal' : _k, bodyMBtnText = _a.bodyMBtnText, _l = _a.bodySpacingMode, bodySpacingMode = _l === void 0 ? 'none' : _l, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, _m = _a.footerIBtn1State, footerIBtn1State = _m === void 0 ? 'normal' : _m, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, _o = _a.footerIBtn1Type, footerIBtn1Type = _o === void 0 ? 'button' : _o, onClickFooterIBtn1 = _a.onClickFooterIBtn1, _p = _a.footerIBtn2State, footerIBtn2State = _p === void 0 ? 'normal' : _p, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, _q = _a.footerIBtn2Type, footerIBtn2Type = _q === void 0 ? 'button' : _q, onClickFooterIBtn2 = _a.onClickFooterIBtn2, _r = _a.footerIBtn3State, footerIBtn3State = _r === void 0 ? 'normal' : _r, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, _s = _a.footerIBtn3Type, footerIBtn3Type = _s === void 0 ? 'button' : _s, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
     var methods = (0, react_hook_form_1.useForm)({
         mode: 'onChange',
         defaultValues: {
@@ -82,7 +82,7 @@ function ChatList(_a) {
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
         react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, methods),
             react_1.default.createElement("form", { onSubmit: handleSubmit(handleSubmitChat) },
-                react_1.default.createElement(Footer_1.default, { textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, onClickFooterIBtn3: onClickFooterIBtn3 }))),
+                react_1.default.createElement(Footer_1.default, { textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }))),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" })));
 }
 var S_ChatList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])), function (_a) {

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

@@ -1,7 +1,7 @@
 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'> & {
+declare type Props = Pick<ChatListProps, 'textFieldDefaultText' | 'textFieldHintText' | 'textFieldState' | 'textFieldMaxLength' | 'footerIBtn3Accept'> & {
     isSubmitBtnActive?: boolean;
     submitIBtnIconName?: FillIconNameKeys | LineIconNameKeys;
     submitIBtnIconFillType?: 'fill' | 'line';
@@ -21,5 +21,5 @@ declare type Props = Pick<ChatListProps, 'textFieldDefaultText' | 'textFieldHint
     footerIBtn3Type?: 'button' | 'upload';
     onClickFooterIBtn3?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
-declare function ChatTextField({ textFieldDefaultText, textFieldHintText, textFieldState, textFieldMaxLength, isSubmitBtnActive, submitIBtnIconName, submitIBtnIconFillType, footerIBtn1State, footerIBtn1IconName, footerIBtn1IconFillType, footerIBtn1Type, onClickFooterIBtn1, footerIBtn2State, footerIBtn2IconName, footerIBtn2IconFillType, footerIBtn2Type, onClickFooterIBtn2, footerIBtn3State, footerIBtn3IconName, footerIBtn3IconFillType, footerIBtn3Type, onClickFooterIBtn3 }: 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, footerIBtn3Accept, onClickFooterIBtn3 }: Props): JSX.Element;
 export default ChatTextField;

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

@@ -13,7 +13,7 @@ var IconButton_1 = require("../IconButton");
 var TextField_1 = require("../TextField");
 var UploadIconButton_1 = require("../UploadIconButton");
 function ChatTextField(_a) {
-    var textFieldDefaultText = _a.textFieldDefaultText, textFieldHintText = _a.textFieldHintText, textFieldState = _a.textFieldState, textFieldMaxLength = _a.textFieldMaxLength, isSubmitBtnActive = _a.isSubmitBtnActive, _b = _a.submitIBtnIconName, submitIBtnIconName = _b === void 0 ? 'ic_paper_plane' : _b, _c = _a.submitIBtnIconFillType, submitIBtnIconFillType = _c === void 0 ? 'fill' : _c, footerIBtn1State = _a.footerIBtn1State, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, footerIBtn1Type = _a.footerIBtn1Type, onClickFooterIBtn1 = _a.onClickFooterIBtn1, footerIBtn2State = _a.footerIBtn2State, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, footerIBtn2Type = _a.footerIBtn2Type, onClickFooterIBtn2 = _a.onClickFooterIBtn2, footerIBtn3State = _a.footerIBtn3State, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, footerIBtn3Type = _a.footerIBtn3Type, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
+    var textFieldDefaultText = _a.textFieldDefaultText, textFieldHintText = _a.textFieldHintText, textFieldState = _a.textFieldState, textFieldMaxLength = _a.textFieldMaxLength, isSubmitBtnActive = _a.isSubmitBtnActive, _b = _a.submitIBtnIconName, submitIBtnIconName = _b === void 0 ? 'ic_paper_plane' : _b, _c = _a.submitIBtnIconFillType, submitIBtnIconFillType = _c === void 0 ? 'fill' : _c, footerIBtn1State = _a.footerIBtn1State, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, footerIBtn1Type = _a.footerIBtn1Type, onClickFooterIBtn1 = _a.onClickFooterIBtn1, footerIBtn2State = _a.footerIBtn2State, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, footerIBtn2Type = _a.footerIBtn2Type, onClickFooterIBtn2 = _a.onClickFooterIBtn2, footerIBtn3State = _a.footerIBtn3State, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, footerIBtn3Type = _a.footerIBtn3Type, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
     var chatValidation = {
         validate: function (value) {
             if (!value)
@@ -22,12 +22,12 @@ function ChatTextField(_a) {
         }
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_FooterContentWrapper, null,
+        react_1.default.createElement(S_FooterContentWrapper, { footerIBtn2IconName: footerIBtn2IconName, footerIBtn3IconName: footerIBtn3IconName },
             footerIBtn3IconName && (react_1.default.createElement(react_1.default.Fragment, null, footerIBtn3Type === 'button' ? (react_1.default.createElement(IconButton_1.IconButton, { iconName: footerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn3State === 'normal'
                     ? 'ui_cpnt_button_icon_primary'
                     : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn3IconFillType, iconSize: 24, state: footerIBtn3State, onClick: onClickFooterIBtn3 })) : (react_1.default.createElement(UploadIconButton_1.UploadIconButton, { iconName: footerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn3State === 'normal'
                     ? 'ui_cpnt_button_icon_primary'
-                    : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn3IconFillType, iconSize: 24, state: footerIBtn3State, onClick: onClickFooterIBtn3 })))),
+                    : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn3IconFillType, iconSize: 24, state: footerIBtn3State, accept: footerIBtn3Accept, onClick: onClickFooterIBtn3 })))),
             footerIBtn2IconName && (react_1.default.createElement(react_1.default.Fragment, null, footerIBtn2Type === 'button' ? (react_1.default.createElement(IconButton_1.IconButton, { iconName: footerIBtn2IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn2State === 'normal'
                     ? 'ui_cpnt_button_icon_primary'
                     : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn2IconFillType, iconSize: 24, state: footerIBtn2State, onClick: onClickFooterIBtn2 })) : (react_1.default.createElement(UploadIconButton_1.UploadIconButton, { iconName: footerIBtn2IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn2State === 'normal'
@@ -43,8 +43,10 @@ function ChatTextField(_a) {
             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;
-    return theme.spacing.spacingE;
+    var theme = _a.theme, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn3IconName = _a.footerIBtn3IconName;
+    return footerIBtn2IconName || footerIBtn3IconName
+        ? "" + theme.spacing.spacingC
+        : "" + theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;

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

@@ -1,7 +1,7 @@
 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'> & {
+declare type Props = Pick<ChatListProps, 'footerChildren' | 'textFieldDefaultText' | 'textFieldHintText' | 'textFieldState' | 'textFieldMaxLength' | 'footerIBtn3Accept'> & {
     isSubmitBtnActive: boolean;
     submitIBtnIconName?: FillIconNameKeys | LineIconNameKeys;
     submitIBtnIconFillType?: 'fill' | 'line';
@@ -21,5 +21,5 @@ declare type Props = Pick<ChatListProps, 'footerChildren' | 'textFieldDefaultTex
     footerIBtn3Type?: 'button' | 'upload';
     onClickFooterIBtn3?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
-declare function Footer({ footerChildren, textFieldDefaultText, textFieldHintText, textFieldState, textFieldMaxLength, submitIBtnIconName, submitIBtnIconFillType, isSubmitBtnActive, footerIBtn1State, footerIBtn1IconName, footerIBtn1IconFillType, footerIBtn1Type, onClickFooterIBtn1, footerIBtn2State, footerIBtn2IconName, footerIBtn2IconFillType, footerIBtn2Type, onClickFooterIBtn2, footerIBtn3State, footerIBtn3IconName, footerIBtn3IconFillType, footerIBtn3Type, onClickFooterIBtn3 }: 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, footerIBtn3Accept, 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, 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;
+    var footerChildren = _a.footerChildren, textFieldDefaultText = _a.textFieldDefaultText, textFieldHintText = _a.textFieldHintText, textFieldState = _a.textFieldState, textFieldMaxLength = _a.textFieldMaxLength, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, isSubmitBtnActive = _a.isSubmitBtnActive, footerIBtn1State = _a.footerIBtn1State, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, footerIBtn1Type = _a.footerIBtn1Type, onClickFooterIBtn1 = _a.onClickFooterIBtn1, footerIBtn2State = _a.footerIBtn2State, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, footerIBtn2Type = _a.footerIBtn2Type, onClickFooterIBtn2 = _a.onClickFooterIBtn2, footerIBtn3State = _a.footerIBtn3State, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, footerIBtn3Type = _a.footerIBtn3Type, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(ChatTextField_1.default, { textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, isSubmitBtnActive: isSubmitBtnActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, onClickFooterIBtn3: onClickFooterIBtn3 }),
+        react_1.default.createElement(ChatTextField_1.default, { textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, isSubmitBtnActive: isSubmitBtnActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }),
         react_1.default.createElement(S_FooterChildrenWrapper, null, footerChildren)));
 }
 var S_FooterChildrenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {

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

@@ -26,13 +26,13 @@ function Header(_a) {
     var styleTheme = _a.styleTheme, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, titleStyleTheme = _a.titleStyleTheme, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1;
     return (react_1.default.createElement(S_HeaderContentWrapper, null,
         react_1.default.createElement(S_HeaderLeftBox, null,
-            titleText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[styleTheme] })),
+            titleText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[styleTheme], wordBreak: "break_all" })),
             descText && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c" }),
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: "sysTextSecondary", colorOverride: styleTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined }))),
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: "sysTextSecondary", colorOverride: styleTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" }))),
             captionText && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary", colorOverride: styleTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined })))),
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary", colorOverride: styleTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" })))),
         headerDisplayType === 'ibtn1' && headerIBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[styleTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }))));
 }
 var S_HeaderContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {

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

@@ -55,19 +55,19 @@ function MobileHeaderBar(_a) {
                 if (captionText) {
                     return (react_1.default.createElement(S_CaptionTextBox, null,
                         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }),
-                        react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center" }),
+                        react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }),
                         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "height" }),
-                        react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption2Regular", singleLineMode: "use", textAlign: "center" })));
+                        react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption2Regular", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 })));
                 }
                 return (react_1.default.createElement(S_TextTypeBox, null,
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center" })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 })));
             }
             case 'profile': {
                 return (react_1.default.createElement(S_ProfileWrapper, null,
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),
                     react_1.default.createElement(hybrid_1.ImageView, { src: imageSrc, shapeType: "circular", width: 40, ratio: "1_1", scaleType: "cover", borderMode: "use" }),
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "caption1Regular", singleLineMode: "use" }),
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "caption1Regular", singleLineMode: "use", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }),
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" })));
             }
             case 'image': {

package/package.json

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

package/release-note.md

@@ -1,31 +1,9 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v1.4.35]
+## [v1.4.38]
 
 ### Component
-* ChatBubbleListItem 생성
 * ChatList
-  * bodySpacingMode prop 추가
-  * descText prop 추가
-  * titleStyleTheme prop 추가
-  * submitIBtnIconName prop 추가
-  * submitIBtnIconFillType prop 추가
-  * footerIBtn1State prop 추가
-  * footerIBtn1IconName prop 추가
-  * footerIBtn1IconFillType prop 추가
-  * footerIBtn1Type prop 추가
-  * onClickFooterIBtn1 prop 추가
-  * footerIBtn2State prop 추가
-  * footerIBtn2IconName prop 추가
-  * footerIBtn2IconFillType prop 추가
-  * footerIBtn2Type prop 추가
-  * onClickFooterIBtn2 prop 추가
-  * footerIBtn3State prop 추가
-  * footerIBtn3IconName prop 추가
-  * footerIBtn3IconFillType prop 추가
-  * footerIBtn3Type prop 추가
-  * onClickFooterIBtn3 prop 추가
+  * Header부분 text들에 wordBreak='break_all'을 추가
+  * footer 부분 좌측에 버튼이 있을 경우 간격을 12px로 변경
 * MobileHeaderBar
-  * captionText prop 추가
-
-### Color
-* 컬러 키 값 22.08.05 16시 50분 기준 싱크
+  * titleText와 captionText이 1줄 이상 표시되지 않도록 수정