pds-dev-kit-web 1.4.61 → 1.4.63

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

@@ -180,5 +180,12 @@
     "sys_text_lighttone_grey_01": "grey900",
     "sys_widget_lighttone_primary_01": "blue500",
     "sys_text_lighttone_grey_02": "grey500",
-    "sys_component_base_09": "darkgrey70"
+    "sys_component_base_09": "darkgrey70",
+    "sys_component_base_darktheme_opacity20": "darkgrey900/opacity20",
+    "sys_component_base_darktheme_disabled_opacity20": "darkgrey70/opacity20",
+    "sys_border_white_opacity00": "white/opacity00",
+    "sys_border_line_darktheme_07_opacity00": "darkgrey50/opacity00",
+    "sys_border_line_darktheme_02_opacity20": "darkgrey400/opacity20",
+    "sys_border_line_darktheme_03_opacity20": "darkred500/opacity20",
+    "sys_border_line_darktheme_07_opacity20": "darkgrey50/opacity20"
 }

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

@@ -180,5 +180,12 @@
     "sys_text_lighttone_grey_01": "grey900",
     "sys_widget_lighttone_primary_01": "blue500",
     "sys_text_lighttone_grey_02": "grey500",
-    "sys_component_base_09": "white"
+    "sys_component_base_09": "white",
+    "sys_component_base_darktheme_opacity20": "darkgrey900/opacity20",
+    "sys_component_base_darktheme_disabled_opacity20": "darkgrey70/opacity20",
+    "sys_border_white_opacity00": "white/opacity00",
+    "sys_border_line_darktheme_07_opacity00": "darkgrey50/opacity00",
+    "sys_border_line_darktheme_02_opacity20": "darkgrey400/opacity20",
+    "sys_border_line_darktheme_03_opacity20": "darkred500/opacity20",
+    "sys_border_line_darktheme_07_opacity20": "darkgrey50/opacity20"
 }

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

@@ -514,7 +514,7 @@
     "ui_cpnt_divider_area": "sys_border_area_01",
     "ui_cpnt_button_white_base_hover": "sys_component_base_darktheme_01",
     "ui_cpnt_button_white_base_pressed": "sys_component_base_darktheme_03",
-    "ui_cpnt_list_base_area_hover": "sys_container_background_02",
+    "ui_cpnt_list_base_area_hover": "sys_component_base_02",
     "ui_cpnt_sheet_border_01": "sys_border_line_01",
     "ui_cpnt_sheet_border_02": "sys_border_line_03",
     "ui_cpnt_sheet_border_03": "sys_border_line_11",
@@ -547,5 +547,27 @@
     "ui_54": "sys_text_lighttone_grey_01",
     "ui_55": "sys_widget_lighttone_primary_01",
     "ui_56": "sys_text_lighttone_grey_02",
-    "ui_cpnt_sheet_base_04": "sys_component_base_09"
+    "ui_cpnt_sheet_base_04": "sys_component_base_09",
+    "ui_cpnt_masking_base_01": "sys_component_base_03",
+    "ui_cpnt_masking_icon_01": "sys_widget_grey_03",
+    "ui_cpnt_list_base_area_transparent_seller": "sys_cpnt_base_white_opacity50",
+    "ui_57": "sys_component_base_darktheme_opacity20",
+    "ui_58": "sys_component_base_darktheme_disabled_opacity20",
+    "ui_cpnt_divider_white_opacity00": "sys_border_white_opacity00",
+    "ui_cpnt_textfield_text_colortheme_transparent_enabled": "sys_text_grey_darktheme_01",
+    "ui_cpnt_textfield_text_colortheme_transparent_hint": "sys_text_grey_darktheme_02",
+    "ui_cpnt_textfield_text_colortheme_transparent_disabled": "sys_text_grey_darktheme_03",
+    "ui_cpnt_textfield_icon_colortheme_transparent_default": "sys_widget_grey_darktheme_02",
+    "ui_cpnt_textfield_icon_colortheme_transparent_disabled": "sys_widget_grey_darktheme_03",
+    "ui_cpnt_textfield_border_colortheme_transparent_normal": "sys_border_line_darktheme_07_opacity00",
+    "ui_cpnt_textfield_border_colortheme_transparent_focus": "sys_border_line_darktheme_07_opacity20",
+    "ui_cpnt_textfield_border_colortheme_transparent_error": "sys_border_line_darktheme_02_opacity20",
+    "ui_cpnt_textfield_text_colortheme_transparent_error": "sys_border_line_darktheme_03_opacity20",
+    "ui_cpnt_textfield_base_colortheme_transparent_disabled": "sys_component_base_darktheme_disabled_opacity20",
+    "ui_cpnt_textfield_base_colortheme_transparent_normal": "sys_component_base_darktheme_opacity20",
+    "ui_cpnt_textfield_text_colortheme_transparent_readonly": "sys_text_grey_darktheme_03",
+    "ui_cpnt_textfield_icon_colortheme_transparent_readonly": "sys_widget_grey_darktheme_03",
+    "ui_cpnt_textfield_base_colortheme_transparent_readonly": "sys_component_base_darktheme_disabled_opacity20",
+    "ui_cpnt_textfield_border_colortheme_transparent_disabled": "sys_border_line_darktheme_07_opacity00",
+    "ui_cpnt_textfield_border_colortheme_transparent_readonly": "sys_border_line_darktheme_07_opacity00"
 }

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

@@ -1,64 +1,4 @@
 declare const colorSet: {
-    readonly SemanticColor: {
-        blue500: string;
-        blue700: string;
-        blue300: string;
-        green700: string;
-        green500: string;
-        green300: string;
-        red500: string;
-        grey900: string;
-        grey500: string;
-        grey400: string;
-        grey100: string;
-        grey50: string;
-        white: string;
-        black: string;
-        darkblue500: string;
-        grey950: string;
-        darkgrey900: string;
-        darkgrey500: string;
-        darkgrey400: string;
-        darkgrey100: string;
-        darkgrey50: string;
-        darkred500: string;
-        darkgreen700: string;
-        orange500: string;
-        darkorange500: string;
-        opacity00: string;
-        opacity20: string;
-        opacity30: string;
-        opacity65: string;
-        darkgreen500: string;
-        grey70: string;
-        navy500: string;
-        lightgreen500: string;
-        pink500: string;
-        darkgrey70: string;
-        darknavy500: string;
-        darkpink500: string;
-        darklightgreen500: string;
-        opacity10: string;
-        grey600: string;
-        darkgrey600: string;
-        skyblue500: string;
-        skyblue300: string;
-        pink300: string;
-        lightpink500: string;
-        darkblue300: string;
-        darkblue700: string;
-        darkgreen300: string;
-        darkskyblue500: string;
-        navy100: string;
-        darknavy100: string;
-        opacity80: string;
-        opacity50: string;
-        grey30: string;
-        opacity95: string;
-        darkgrey30: string;
-        opacity40: string;
-        kakaoyellow: string;
-    };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
@@ -242,6 +182,13 @@ declare const colorSet: {
         sys_widget_lighttone_primary_01: string;
         sys_text_lighttone_grey_02: string;
         sys_component_base_09: string;
+        sys_component_base_darktheme_opacity20: string;
+        sys_component_base_darktheme_disabled_opacity20: string;
+        sys_border_white_opacity00: string;
+        sys_border_line_darktheme_07_opacity00: string;
+        sys_border_line_darktheme_02_opacity20: string;
+        sys_border_line_darktheme_03_opacity20: string;
+        sys_border_line_darktheme_07_opacity20: string;
     };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
@@ -426,6 +373,73 @@ declare const colorSet: {
         sys_widget_lighttone_primary_01: string;
         sys_text_lighttone_grey_02: string;
         sys_component_base_09: string;
+        sys_component_base_darktheme_opacity20: string;
+        sys_component_base_darktheme_disabled_opacity20: string;
+        sys_border_white_opacity00: string;
+        sys_border_line_darktheme_07_opacity00: string;
+        sys_border_line_darktheme_02_opacity20: string;
+        sys_border_line_darktheme_03_opacity20: string;
+        sys_border_line_darktheme_07_opacity20: string;
+    };
+    readonly SemanticColor: {
+        blue500: string;
+        blue700: string;
+        blue300: string;
+        green700: string;
+        green500: string;
+        green300: string;
+        red500: string;
+        grey900: string;
+        grey500: string;
+        grey400: string;
+        grey100: string;
+        grey50: string;
+        white: string;
+        black: string;
+        darkblue500: string;
+        grey950: string;
+        darkgrey900: string;
+        darkgrey500: string;
+        darkgrey400: string;
+        darkgrey100: string;
+        darkgrey50: string;
+        darkred500: string;
+        darkgreen700: string;
+        orange500: string;
+        darkorange500: string;
+        opacity00: string;
+        opacity20: string;
+        opacity30: string;
+        opacity65: string;
+        darkgreen500: string;
+        grey70: string;
+        navy500: string;
+        lightgreen500: string;
+        pink500: string;
+        darkgrey70: string;
+        darknavy500: string;
+        darkpink500: string;
+        darklightgreen500: string;
+        opacity10: string;
+        grey600: string;
+        darkgrey600: string;
+        skyblue500: string;
+        skyblue300: string;
+        pink300: string;
+        lightpink500: string;
+        darkblue300: string;
+        darkblue700: string;
+        darkgreen300: string;
+        darkskyblue500: string;
+        navy100: string;
+        darknavy100: string;
+        opacity80: string;
+        opacity50: string;
+        grey30: string;
+        opacity95: string;
+        darkgrey30: string;
+        opacity40: string;
+        kakaoyellow: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -977,6 +991,28 @@ declare const colorSet: {
         ui_55: string;
         ui_56: string;
         ui_cpnt_sheet_base_04: string;
+        ui_cpnt_masking_base_01: string;
+        ui_cpnt_masking_icon_01: string;
+        ui_cpnt_list_base_area_transparent_seller: string;
+        ui_57: string;
+        ui_58: string;
+        ui_cpnt_divider_white_opacity00: string;
+        ui_cpnt_textfield_text_colortheme_transparent_enabled: string;
+        ui_cpnt_textfield_text_colortheme_transparent_hint: string;
+        ui_cpnt_textfield_text_colortheme_transparent_disabled: string;
+        ui_cpnt_textfield_icon_colortheme_transparent_default: string;
+        ui_cpnt_textfield_icon_colortheme_transparent_disabled: string;
+        ui_cpnt_textfield_border_colortheme_transparent_normal: string;
+        ui_cpnt_textfield_border_colortheme_transparent_focus: string;
+        ui_cpnt_textfield_border_colortheme_transparent_error: string;
+        ui_cpnt_textfield_text_colortheme_transparent_error: string;
+        ui_cpnt_textfield_base_colortheme_transparent_disabled: string;
+        ui_cpnt_textfield_base_colortheme_transparent_normal: string;
+        ui_cpnt_textfield_text_colortheme_transparent_readonly: string;
+        ui_cpnt_textfield_icon_colortheme_transparent_readonly: string;
+        ui_cpnt_textfield_base_colortheme_transparent_readonly: string;
+        ui_cpnt_textfield_border_colortheme_transparent_disabled: string;
+        ui_cpnt_textfield_border_colortheme_transparent_readonly: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/index.js

@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
-var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
+var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
-    SemanticColor: SemanticColor_json_1.default,
     PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
+    SemanticColor: SemanticColor_json_1.default,
     UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

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

@@ -548,4 +548,26 @@ export interface UITheme {
     ui_55: string;
     ui_56: string;
     ui_cpnt_sheet_base_04: string;
+    ui_cpnt_masking_base_01: string;
+    ui_cpnt_masking_icon_01: string;
+    ui_cpnt_list_base_area_transparent_seller: string;
+    ui_57: string;
+    ui_58: string;
+    ui_cpnt_divider_white_opacity00: string;
+    ui_cpnt_textfield_text_colortheme_transparent_enabled: string;
+    ui_cpnt_textfield_text_colortheme_transparent_hint: string;
+    ui_cpnt_textfield_text_colortheme_transparent_disabled: string;
+    ui_cpnt_textfield_icon_colortheme_transparent_default: string;
+    ui_cpnt_textfield_icon_colortheme_transparent_disabled: string;
+    ui_cpnt_textfield_border_colortheme_transparent_normal: string;
+    ui_cpnt_textfield_border_colortheme_transparent_focus: string;
+    ui_cpnt_textfield_border_colortheme_transparent_error: string;
+    ui_cpnt_textfield_text_colortheme_transparent_error: string;
+    ui_cpnt_textfield_base_colortheme_transparent_disabled: string;
+    ui_cpnt_textfield_base_colortheme_transparent_normal: string;
+    ui_cpnt_textfield_text_colortheme_transparent_readonly: string;
+    ui_cpnt_textfield_icon_colortheme_transparent_readonly: string;
+    ui_cpnt_textfield_base_colortheme_transparent_readonly: string;
+    ui_cpnt_textfield_border_colortheme_transparent_disabled: string;
+    ui_cpnt_textfield_border_colortheme_transparent_readonly: string;
 }

package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.d.ts

@@ -16,7 +16,7 @@ export declare type TextFieldBaseProps = {
     autoMaxRows?: number;
     inputType?: string;
     state?: 'normal' | 'read_only' | 'disabled';
-    colorTheme?: 'none' | 'dark';
+    colorTheme?: 'none' | 'dark' | 'transparent';
     min?: number;
     max?: number;
     maxLength?: number;

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

@@ -209,7 +209,8 @@ var read_only = (0, styled_components_1.css)(templateObject_2 || (templateObject
     return colorTheme &&
         {
             none: theme.ui_cpnt_textfield_text_disabled,
-            dark: theme.ui_cpnt_textfield_text_darktheme_disabled
+            dark: theme.ui_cpnt_textfield_text_darktheme_disabled,
+            transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_readonly
         }[colorTheme];
 });
 var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  pointer-events: none;\n"], ["\n  color: ", ";\n  pointer-events: none;\n"])), function (_a) {
@@ -217,7 +218,8 @@ var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_
     return colorTheme &&
         {
             none: theme.ui_cpnt_textfield_text_disabled,
-            dark: theme.ui_cpnt_textfield_text_darktheme_disabled
+            dark: theme.ui_cpnt_textfield_text_darktheme_disabled,
+            transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_disabled
         }[colorTheme];
 });
 var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  cursor: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  cursor: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"])), function (_a) {
@@ -225,7 +227,8 @@ var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObjec
     return colorTheme &&
         {
             none: theme.ui_cpnt_textfield_text_typed,
-            dark: theme.ui_cpnt_textfield_text_darktheme_enabled
+            dark: theme.ui_cpnt_textfield_text_darktheme_enabled,
+            transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_enabled
         }[colorTheme];
 }, function (_a) {
     var state = _a.state;
@@ -244,7 +247,8 @@ var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObjec
     return colorTheme &&
         {
             none: theme.ui_cpnt_textfield_text_hint,
-            dark: theme.ui_cpnt_textfield_text_darktheme_hint
+            dark: theme.ui_cpnt_textfield_text_darktheme_hint,
+            transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_hint
         }[colorTheme];
 }, function (_a) {
     var textSize = _a.textSize;

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

@@ -8,7 +8,7 @@ declare type Props = {
     hoverMode?: 'none' | 'use';
     contextMenuOptionArray?: PDSValueOption[];
     contextMenuState?: 'normal' | 'disabled';
-    colorTheme?: 'seller' | 'subscriber';
+    colorTheme?: 'seller' | 'subscriber' | 'seller_transparent' | 'subscriber_transparent';
     onClickContextMenuItem?: (option: PDSValueOption) => void;
 };
 declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;

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

@@ -36,11 +36,15 @@ var TextLabel_1 = require("../TextLabel");
 var Popup_1 = require("./Popup");
 var titleTextColors = {
     seller: 'usrTextBrandPrimary',
-    subscriber: 'sysTextSecondary'
+    subscriber: 'sysTextSecondary',
+    seller_transparent: 'usrTextBrandPrimary',
+    subscriber_transparent: 'sysTextWhite'
 };
 var backgroundColorTheme = {
     seller: 'ui_cpnt_list_base_area_seller',
-    subscriber: 'ui_cpnt_list_base_area'
+    subscriber: 'ui_cpnt_list_base_area',
+    seller_transparent: 'ui_cpnt_list_base_area_transparent_seller',
+    subscriber_transparent: 'ui_cpnt_list_base_area_transparent'
 };
 function BasicChatListItem(_a) {
     var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenuItem = _a.onClickContextMenuItem, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'subscriber' : _e;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Props as ChatListProps } from './ChatList';
-declare const Body: React.ForwardRefExoticComponent<Pick<ChatListProps, "children" | "scrollVisibleType" | "bodyMBtnText" | "bodySpacingMode"> & {
+declare const Body: React.ForwardRefExoticComponent<Pick<ChatListProps, "children" | "scrollVisibleType" | "bodyMBtnText" | "bodySpacingMode" | "bodyChildren"> & {
     isSubmitted: boolean;
     callBackAfterScrollToBottom: () => void;
 } & React.RefAttributes<HTMLDivElement>>;

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

@@ -31,7 +31,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var MainButton_1 = require("../MainButton");
 var useAutoScrollToBottom_1 = __importDefault(require("./useAutoScrollToBottom"));
 var Body = react_1.default.forwardRef(function (_a, ref) {
-    var scrollVisibleType = _a.scrollVisibleType, children = _a.children, isSubmitted = _a.isSubmitted, bodyMBtnText = _a.bodyMBtnText, bodySpacingMode = _a.bodySpacingMode, callBackAfterScrollToBottom = _a.callBackAfterScrollToBottom;
+    var bodyChildren = _a.bodyChildren, scrollVisibleType = _a.scrollVisibleType, children = _a.children, isSubmitted = _a.isSubmitted, bodyMBtnText = _a.bodyMBtnText, bodySpacingMode = _a.bodySpacingMode, callBackAfterScrollToBottom = _a.callBackAfterScrollToBottom;
     var _b = (0, react_1.useState)(false), isButtonShow = _b[0], setIsButtonShow = _b[1];
     var _c = (0, useAutoScrollToBottom_1.default)(), triggerScrollToBottom = _c.triggerScrollToBottom, EndOfList = _c.EndOfList;
     /**
@@ -73,6 +73,7 @@ var Body = react_1.default.forwardRef(function (_a, ref) {
         react_1.default.createElement(S_ChatMessageBox, { id: "chatMessageBox", onScroll: handleScroll, scrollVisibleType: scrollVisibleType, ref: ref },
             children,
             react_1.default.createElement(EndOfList, null)),
+        bodyChildren,
         isButtonShow && (react_1.default.createElement(S_BottomButtonWrapper, null,
             react_1.default.createElement(MainButton_1.MainButton, { text: bodyMBtnText, size: "small", onClick: handleClickMBtn })))));
 });

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
 export declare type Props = {
-    styleTheme?: 'solid' | 'translucent' | 'transparent';
+    colorTheme?: 'solid' | 'translucent' | 'transparent';
     headerMode?: 'none' | 'use';
     titleText?: PDSTextType;
     descText?: PDSTextType;
@@ -11,6 +11,7 @@ export declare type Props = {
     headerIBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
     headerIBtn1IconFillType?: 'line' | 'fill';
     children?: React.ReactNode;
+    bodyChildren?: React.ReactNode;
     textFieldState?: 'normal' | 'read_only' | 'disabled';
     textFieldHintText?: PDSTextType;
     textFieldDefaultText?: PDSTextType;

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

@@ -47,10 +47,10 @@ var Header_1 = __importDefault(require("./Header"));
 var baseBackgroundColors = {
     solid: 'ui_cpnt_list_base_area_solid',
     translucent: 'ui_cpnt_list_base_area_translucent',
-    transparent: 'ui_cpnt_list_base_area_translucent'
+    transparent: 'ui_cpnt_list_base_area_transparent'
 };
 var ChatList = react_1.default.forwardRef(function (_a, ref) {
-    var _b = _a.styleTheme, styleTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, _d = _a.titleStyleTheme, titleStyleTheme = _d === void 0 ? 'subTitleBold' : _d, _e = _a.headerDisplayType, headerDisplayType = _e === void 0 ? 'none' : _e, _f = _a.headerIBtn1IconName, headerIBtn1IconName = _f === void 0 ? 'ic_xmark' : _f, _g = _a.headerIBtn1IconFillType, headerIBtn1IconFillType = _g === void 0 ? 'line' : _g, children = _a.children, _h = _a.textFieldState, textFieldState = _h === void 0 ? 'normal' : _h, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _j = _a.scrollVisibleType, scrollVisibleType = _j === void 0 ? 'moving' : _j, footerChildren = _a.footerChildren, _k = _a.submitIBtnState, submitIBtnState = _k === void 0 ? 'normal' : _k, bodyMBtnText = _a.bodyMBtnText, _l = _a.bodySpacingMode, bodySpacingMode = _l === void 0 ? 'none' : _l, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, _m = _a.footerIBtn1State, footerIBtn1State = _m === void 0 ? 'normal' : _m, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, _o = _a.footerIBtn1Type, footerIBtn1Type = _o === void 0 ? 'button' : _o, onClickFooterIBtn1 = _a.onClickFooterIBtn1, _p = _a.footerIBtn2State, footerIBtn2State = _p === void 0 ? 'normal' : _p, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, _q = _a.footerIBtn2Type, footerIBtn2Type = _q === void 0 ? 'button' : _q, onClickFooterIBtn2 = _a.onClickFooterIBtn2, _r = _a.footerIBtn3State, footerIBtn3State = _r === void 0 ? 'normal' : _r, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, _s = _a.footerIBtn3Type, footerIBtn3Type = _s === void 0 ? 'button' : _s, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
+    var _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 methods = (0, react_hook_form_1.useForm)({
         mode: 'onChange',
         defaultValues: {
@@ -85,16 +85,16 @@ var ChatList = react_1.default.forwardRef(function (_a, ref) {
     var callBackAfterScrollToBottom = function () {
         reset();
     };
-    return (react_1.default.createElement(S_ChatList, { backgroundColor: baseBackgroundColors[styleTheme], id: "chatList" },
+    return (react_1.default.createElement(S_ChatList, { backgroundColor: baseBackgroundColors[colorTheme], id: "chatList" },
         headerMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(Header_1.default, { styleTheme: styleTheme, titleText: titleText, descText: descText, captionText: captionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1 }),
-            react_1.default.createElement(hybrid_1.Divider, null))),
-        react_1.default.createElement(Body_1.default, { scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, ref: ref }, children),
-        react_1.default.createElement(hybrid_1.Divider, null),
+            react_1.default.createElement(Header_1.default, { colorTheme: colorTheme, titleText: titleText, descText: descText, captionText: captionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1 }),
+            react_1.default.createElement(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider1' : 'none' }))),
+        react_1.default.createElement(Body_1.default, { scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, bodyChildren: bodyChildren, ref: ref }, children),
+        react_1.default.createElement(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider1' : 'none' }),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
         react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, methods),
             react_1.default.createElement("form", { onSubmit: handleSubmit(handleSubmitChat) },
-                react_1.default.createElement(Footer_1.default, { textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }))),
+                react_1.default.createElement(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 }))),
         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' | 'footerIBtn3Accept'> & {
+declare type Props = Pick<ChatListProps, 'textFieldDefaultText' | 'textFieldHintText' | 'textFieldState' | 'textFieldMaxLength' | 'footerIBtn3Accept' | 'colorTheme'> & {
     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, footerIBtn3Accept, onClickFooterIBtn3 }: Props): JSX.Element;
+declare function ChatTextField({ colorTheme, 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, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
+    var colorTheme = _a.colorTheme, 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)
@@ -34,7 +34,7 @@ function ChatTextField(_a) {
                     ? 'ui_cpnt_button_icon_primary'
                     : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn2IconFillType, iconSize: 24, state: footerIBtn2State, onClick: onClickFooterIBtn2 })))),
             react_1.default.createElement(S_TextFieldWrapper, null,
-                react_1.default.createElement(TextField_1.TextField, { name: "chat", responsiveMode: "use", textLineType: "single", inputType: "text", hintText: textFieldHintText, defaultText: textFieldDefaultText, validation: chatValidation, maxLength: textFieldMaxLength, enterSubmitMode: "use", validationPoint: "onChange", state: textFieldState, autoComplete: "off" })),
+                react_1.default.createElement(TextField_1.TextField, { name: "chat", responsiveMode: "use", textLineType: "single", inputType: "text", hintText: textFieldHintText, defaultText: textFieldDefaultText, validation: chatValidation, maxLength: textFieldMaxLength, colorTheme: colorTheme === 'transparent' ? 'transparent' : 'none', enterSubmitMode: "use", validationPoint: "onChange", state: textFieldState, autoComplete: "off" })),
             footerIBtn1IconName && (react_1.default.createElement(react_1.default.Fragment, null, footerIBtn1Type === 'button' ? (react_1.default.createElement(IconButton_1.IconButton, { iconName: footerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn1State === 'normal'
                     ? 'ui_cpnt_button_icon_primary'
                     : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn1IconFillType, iconSize: 24, state: footerIBtn1State, onClick: onClickFooterIBtn1 })) : (react_1.default.createElement(UploadIconButton_1.UploadIconButton, { iconName: footerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn1State === 'normal'

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' | 'footerIBtn3Accept'> & {
+declare type Props = Pick<ChatListProps, 'footerChildren' | 'textFieldDefaultText' | 'textFieldHintText' | 'textFieldState' | 'textFieldMaxLength' | 'footerIBtn3Accept' | 'colorTheme'> & {
     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, footerIBtn3Accept, onClickFooterIBtn3 }: Props): JSX.Element;
+declare function Footer({ colorTheme, 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, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
+    var colorTheme = _a.colorTheme, footerChildren = _a.footerChildren, textFieldDefaultText = _a.textFieldDefaultText, textFieldHintText = _a.textFieldHintText, textFieldState = _a.textFieldState, textFieldMaxLength = _a.textFieldMaxLength, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, isSubmitBtnActive = _a.isSubmitBtnActive, footerIBtn1State = _a.footerIBtn1State, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, footerIBtn1Type = _a.footerIBtn1Type, onClickFooterIBtn1 = _a.onClickFooterIBtn1, footerIBtn2State = _a.footerIBtn2State, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, footerIBtn2Type = _a.footerIBtn2Type, onClickFooterIBtn2 = _a.onClickFooterIBtn2, footerIBtn3State = _a.footerIBtn3State, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, footerIBtn3Type = _a.footerIBtn3Type, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(ChatTextField_1.default, { textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, isSubmitBtnActive: isSubmitBtnActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }),
+        react_1.default.createElement(ChatTextField_1.default, { colorTheme: colorTheme, 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.d.ts

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

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

@@ -23,17 +23,17 @@ var iconColors = {
     transparent: 'ui_cpnt_button_icon_white'
 };
 function Header(_a) {
-    var styleTheme = _a.styleTheme, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, titleStyleTheme = _a.titleStyleTheme, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1;
+    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 (react_1.default.createElement(S_HeaderContentWrapper, null,
         react_1.default.createElement(S_HeaderLeftBox, null,
-            titleText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[styleTheme], wordBreak: "break_all" })),
+            titleText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[colorTheme], wordBreak: "break_all" })),
             descText && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c" }),
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: "sysTextSecondary", colorOverride: styleTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" }))),
+                react_1.default.createElement(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 && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary", colorOverride: styleTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" })))),
-        headerDisplayType === 'ibtn1' && headerIBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[styleTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }))));
+                react_1.default.createElement(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 && (react_1.default.createElement(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;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
 export declare type FloatingActionButtonProps = {
     text?: PDSTextType;
@@ -9,8 +9,8 @@ export declare type FloatingActionButtonProps = {
     iconName?: FillIconNameKeys | LineIconNameKeys;
     colorTheme?: 'none' | 'theme1' | 'theme2' | 'theme3';
     state?: 'normal' | 'disabled';
-    onClick?: (...args: any) => any;
-    onMouseDown?: (...args: any) => any;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => any;
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => any;
 };
 declare function FloatingActionButton({ text, displayType, size, fontWeight, iconFillType, iconName, colorTheme, state, onClick, onMouseDown }: FloatingActionButtonProps): JSX.Element;
 export default FloatingActionButton;