pds-dev-kit-web-test 0.0.11 → 0.0.13

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

@@ -36,18 +36,22 @@ 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;
     var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
     var contextMenuRef = (0, react_1.useRef)(null);
     var chatBody = document.querySelector('#chatMessageBox');
-    var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
+    var chatBodyRect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
     /**
      * @when contextMenu가 열려 있을 때
      * @expected ChatList body의 스크롤을 숨기고, contextMenu의 외부를 클릭하면 contextMenu가 닫히도록 합니다.
@@ -71,16 +75,17 @@ function BasicChatListItem(_a) {
         setIsContextMenuOpen(false);
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme },
+        react_1.default.createElement(S_BasicChatListItem, { "x-pds-name": "BasicChatListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", colorTheme: colorTheme },
             leftImageMode === 'use' && (react_1.default.createElement(S_ImageViewWrapper, null,
                 react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }))),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColors[colorTheme] }),
+            react_1.default.createElement(S_TitleTextWrapper, null,
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] })),
             react_1.default.createElement(S_ContentTextWrapper, null,
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary", wordBreak: "break_all" })),
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'subscriber_transparent' ? 'sysTextWhite' : 'sysTextPrimary', wordBreak: "break_all" })),
             hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
                 react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }))),
             react_1.default.createElement(Popup_1.PopupProvider, null,
-                react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
+                react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
                     react_1.default.createElement(ContextMenu_1.ContextMenu, null, contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, onClick: handleContextMenuItemClick, state: contextMenuState })); })))))));
 }
 var S_BasicChatListItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n  min-height: 24px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  background-color: ", ";\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n  min-height: 24px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
@@ -117,5 +122,6 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_4 || (templ
     var hoverMode = _a.hoverMode;
     return hoverMode === 'use' && '1';
 });
+var S_TitleTextWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  max-width: 120px;\n  min-width: 56px;\n"], ["\n  max-width: 120px;\n  min-width: 56px;\n"])));
 exports.default = BasicChatListItem;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -8,7 +8,7 @@ var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function BasicFormGroup(_a) {
     var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, inputForm = _a.inputForm;
-    return (react_1.default.createElement("div", null,
+    return (react_1.default.createElement("div", { "x-pds-name": "BasicFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
         titleText && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }),
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }))),

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

@@ -8,6 +8,7 @@ declare type BasicListProps = {
     columns?: 1 | 2 | 3 | 4 | 5 | 6;
     columnSpacing?: 0 | 16 | 24;
     rowSpacing?: 0 | 24 | 32 | 48 | 64;
+    spacingMode?: 'none' | 'use';
 };
-declare function BasicList({ children, titleStyleTheme, titleText, captionText, columns, columnSpacing, rowSpacing }: BasicListProps): JSX.Element;
+declare function BasicList({ children, titleStyleTheme, titleText, captionText, columns, columnSpacing, rowSpacing, spacingMode }: BasicListProps): JSX.Element;
 export default BasicList;

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

@@ -12,9 +12,9 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function BasicList(_a) {
-    var children = _a.children, _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'headingBold' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.columns, columns = _c === void 0 ? 1 : _c, _d = _a.columnSpacing, columnSpacing = _d === void 0 ? 16 : _d, _e = _a.rowSpacing, rowSpacing = _e === void 0 ? 0 : _e;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        (titleText || captionText) && (react_1.default.createElement(S_TitleBox, null,
+    var children = _a.children, _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'headingBold' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.columns, columns = _c === void 0 ? 1 : _c, _d = _a.columnSpacing, columnSpacing = _d === void 0 ? 16 : _d, _e = _a.rowSpacing, rowSpacing = _e === void 0 ? 0 : _e, _f = _a.spacingMode, spacingMode = _f === void 0 ? 'use' : _f;
+    return (react_1.default.createElement("div", { "x-pds-name": "BasicList", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
+        (titleText || captionText) && (react_1.default.createElement(S_TitleBox, { spacingMode: spacingMode },
             react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme }),
             titleText && captionText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }),
             captionText && react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "body2Regular" }))),
@@ -24,8 +24,8 @@ var S_TitleBox = styled_components_1.default.div(templateObject_1 || (templateOb
     var theme = _a.theme;
     return "" + theme.spacing.spacingD;
 }, function (_a) {
-    var theme = _a.theme;
-    return "0 " + theme.spacing.spacingE;
+    var spacingMode = _a.spacingMode, theme = _a.theme;
+    return spacingMode === 'use' && "0 " + theme.spacing.spacingE;
 });
 var S_BasicListWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  column-gap: ", ";\n  display: grid;\n  grid-template-columns: ", ";\n  row-gap: ", ";\n"], ["\n  column-gap: ", ";\n  display: grid;\n  grid-template-columns: ", ";\n  row-gap: ", ";\n"])), function (_a) {
     var columnSpacing = _a.columnSpacing;

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

@@ -28,6 +28,7 @@ export declare type BasicListItemProps = {
     switchName?: string;
     switchState?: 'normal' | 'disabled';
     switchStatus?: 'off' | 'on';
+    spacingMode?: 'none' | 'use';
     onClick?: () => void;
     onClickIBtn1?: () => void;
     onClickIBtn2?: () => void;
@@ -42,6 +43,9 @@ export declare type StyleProps = {
     badgeStatus?: 'cancel' | 'active' | 'inactive';
     imageIconMode?: 'none' | 'image' | 'icon';
     displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
+    hasOnClick?: boolean;
+    spacingMode?: 'none' | 'use';
+    onlyLeftArea?: boolean;
 };
-declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, onClick, onClickIBtn1, onClickIBtn2, onClickMBtn, onClickRadio, onClickSwitch }: BasicListItemProps): JSX.Element;
+declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, spacingMode, onClick, onClickIBtn1, onClickIBtn2, onClickMBtn, onClickRadio, onClickSwitch }: BasicListItemProps): JSX.Element;
 export default BasicListItem;

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

@@ -17,9 +17,10 @@ var MainButton_1 = require("../MainButton");
 var Radio_1 = require("../Radio");
 var TextLabel_1 = require("../TextLabel");
 function BasicListItem(_a) {
-    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _q = _a.switchState, switchState = _q === void 0 ? 'normal' : _q, _r = _a.switchStatus, switchStatus = _r === void 0 ? 'off' : _r, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch;
+    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _q = _a.switchState, switchState = _q === void 0 ? 'normal' : _q, _r = _a.switchStatus, switchStatus = _r === void 0 ? 'off' : _r, _s = _a.spacingMode, spacingMode = _s === void 0 ? 'use' : _s, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch;
     var methods = (0, react_hook_form_1.useFormContext)();
     var isSelected = methods === null || methods === void 0 ? void 0 : methods.watch((checkboxId === null || checkboxId === void 0 ? void 0 : checkboxId.toString()) || '');
+    var onlyLeftArea = displayType === 'none';
     var handleCheckBoxClick = function (e) {
         e.preventDefault();
         if (!checkboxId) {
@@ -84,34 +85,63 @@ function BasicListItem(_a) {
             }
         }
     };
-    return (react_1.default.createElement(S_BasicListItem, { displayType: displayType, selectionMode: selectionMode, isSelected: isSelected, onClick: handleClick },
-        react_1.default.createElement(S_BasicListItemBox, { imageIconMode: imageIconMode, captionText: captionText },
-            react_1.default.createElement(S_LeftBox, null,
+    var isBadgeLeftSpacingChecker = function (value) {
+        if (spacingMode !== value || selectionMode !== value) {
+            return true;
+        }
+        return false;
+    };
+    var isImageIconLeftSpacingChecker = function (value) {
+        if (selectionMode !== value ||
+            badgeMode !== value ||
+            (selectionMode === value && badgeMode === value && spacingMode !== value)) {
+            return true;
+        }
+        return false;
+    };
+    var isTextLabelLeftSpacingChecker = function (value) {
+        if (selectionMode !== value ||
+            badgeMode !== value ||
+            imageIconMode !== value ||
+            (selectionMode && badgeMode && imageIconMode && spacingMode) !== value) {
+            return true;
+        }
+        return false;
+    };
+    var isRightSpacingChecker = function (value) {
+        if (spacingMode === value) {
+            return false;
+        }
+        return true;
+    };
+    return (react_1.default.createElement(S_BasicListItem, { "x-pds-name": "BasicListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", displayType: displayType, selectionMode: selectionMode, isSelected: isSelected, onClick: handleClick, hasOnClick: !!onClick, spacingMode: spacingMode },
+        react_1.default.createElement(S_BasicListItemBox, { imageIconMode: imageIconMode, captionText: captionText, spacingMode: spacingMode },
+            react_1.default.createElement(S_LeftBox, { onlyLeftArea: onlyLeftArea },
                 selectionMode !== 'none' && (react_1.default.createElement(S_SelectionBoxWrapper, { selectionMode: selectionMode },
                     selectionMode === 'check' && checkboxId && (react_1.default.createElement(Checkbox_1.Checkbox, { name: checkboxId.toString(), state: "normal", onChange: handleCheckBoxClick })),
                     selectionMode === 'radio' && radioValue && radioId && (react_1.default.createElement(Radio_1.Radio, { name: radioId, value: radioValue, onChange: handleRadioClick, checked: radioId === radioValue })))),
                 badgeMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
+                    isBadgeLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
                     react_1.default.createElement(S_Badge, { badgeStatus: badgeStatus }))),
                 imageIconMode === 'image' && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
+                    isImageIconLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
                     react_1.default.createElement(hybrid_1.ImageView, { width: 40, height: 40, src: imageSrc, scaleType: "cover", shapeType: imageShapeType }))),
                 imageIconMode === 'icon' && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
+                    isImageIconLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
                     react_1.default.createElement(S_IconWrapper, null,
                         react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, fillType: iconFillType, size: 24, colorKey: "ui_cpnt_list_icon_02" })))),
-                react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
+                isTextLabelLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
                 react_1.default.createElement(S_TextBox, null,
                     react_1.default.createElement(S_TextWrapper, null,
                         react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleTextColorTheme === 'none' ? 'sysTextPrimary' : 'sysTextError', styleTheme: titleFontWeight === 'bold' ? 'body2Bold' : 'body2Regular', singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })),
                     captionText && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
                         react_1.default.createElement(S_TextWrapper, null,
-                            react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
+                            react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", textAlign: "left", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
             react_1.default.createElement(S_RightBox, { displayType: displayType },
                 (displayType === 'text' || displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
-                    react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
+                    isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
                 (displayType === 'ibtn_amount1' ||
                     displayType === 'ibtn_amount2' ||
                     displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
@@ -119,19 +149,19 @@ function BasicListItem(_a) {
                     react_1.default.createElement(S_IconWrapper, null, iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click, iconColorKey: "ui_cpnt_button_icon_default" }))))),
                 displayType === 'mbtn' && (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, fillType: mBtnFillType, size: "small", onClick: handleMBtnClick }),
-                    react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
+                    isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
                 displayType === 'switch' && switchName && (react_1.default.createElement(S_SwitchWrapper, null,
                     react_1.default.createElement(hybrid_1.Switch, { name: switchName, onClick: handleSwitchClick, state: switchState, status: switchStatus }),
-                    react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))))),
-        react_1.default.createElement(S_DividerWrapper, null, dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }))));
+                    isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))))),
+        react_1.default.createElement(S_DividerWrapper, { spacingMode: spacingMode }, dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }))));
 }
 var S_BasicListItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: ", ";\n"])), function (_a) {
     var theme = _a.theme, isSelected = _a.isSelected;
     return isSelected ? theme.ui_cpnt_list_base_area_select : theme.ui_cpnt_list_base_area;
 }, function (_a) {
-    var displayType = _a.displayType, selectionMode = _a.selectionMode, onClick = _a.onClick;
+    var displayType = _a.displayType, selectionMode = _a.selectionMode, hasOnClick = _a.hasOnClick;
     if (displayType === 'ibtn_amount1' || displayType === 'ibtn_text' || displayType === 'none') {
-        if (onClick) {
+        if (hasOnClick) {
             return 'pointer';
         }
     }
@@ -140,17 +170,20 @@ var S_BasicListItem = styled_components_1.default.li(templateObject_1 || (templa
     }
     return 'default';
 }, function (_a) {
-    var theme = _a.theme;
-    return "0 " + theme.spacing.spacingC;
+    var spacingMode = _a.spacingMode, theme = _a.theme;
+    return spacingMode === 'use' && "0 " + theme.spacing.spacingC;
 });
 var S_BasicListItemBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: ", ";\n  padding: ", ";\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  height: ", ";\n  padding: ", ";\n  width: 100%;\n"])), function (_a) {
     var imageIconMode = _a.imageIconMode, captionText = _a.captionText;
     return imageIconMode === 'image' || captionText ? '80px' : '56px';
 }, function (_a) {
-    var theme = _a.theme;
-    return "0 " + theme.spacing.spacingC;
+    var spacingMode = _a.spacingMode, theme = _a.theme;
+    return spacingMode === 'use' && "0 " + theme.spacing.spacingC;
+});
+var S_LeftBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex: ", ";\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  flex: ", ";\n  width: 100%;\n"])), function (_a) {
+    var onlyLeftArea = _a.onlyLeftArea;
+    return (onlyLeftArea ? 'auto' : 7);
 });
-var S_LeftBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex: 7;\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  flex: 7;\n  width: 100%;\n"])));
 var S_SelectionBoxWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  width: 40px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  width: 40px;\n"])));
 var S_IconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n"])));
 var S_TextBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  width: 100%;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  width: 100%;\n"])));
@@ -169,6 +202,9 @@ var S_RightBox = styled_components_1.default.div(templateObject_9 || (templateOb
     return (displayType === 'text' ? '40px' : 'auto');
 });
 var S_SwitchWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  min-width: 68px;\n  min-height: 32px;\n  position: relative;\n  right: 0;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  min-width: 68px;\n  min-height: 32px;\n  position: relative;\n  right: 0;\n"])));
-var S_DividerWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  width: calc(100% - 24px);\n"], ["\n  width: calc(100% - 24px);\n"])));
+var S_DividerWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  width: ", ";\n"], ["\n  width: ", ";\n"])), function (_a) {
+    var spacingMode = _a.spacingMode;
+    return (spacingMode !== 'none' ? 'calc(100% - 24px)' : '100%');
+});
 exports.default = BasicListItem;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

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

@@ -65,7 +65,7 @@ function BlogTextField(_a) {
         }
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_BlogTextFieldWrapper, { size: size, textLineType: textLineType, state: state, spacingMode: spacingMode }, S_BlogTextField())));
+        react_1.default.createElement(S_BlogTextFieldWrapper, { "x-pds-name": "BlogTextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, textLineType: textLineType, state: state, spacingMode: spacingMode }, S_BlogTextField())));
 }
 var multi = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: auto;\n"], ["\n  height: auto;\n"])));
 var auto = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: auto;\n"], ["\n  height: auto;\n"])));

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

@@ -8,12 +8,12 @@ var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function BodyTextGroup(_a) {
     var titleText = _a.titleText, descText = _a.descText, contentText = _a.contentText, _b = _a.titleTextWordBreak, titleTextWordBreak = _b === void 0 ? 'keep_all' : _b, _c = _a.descTextWordBreak, descTextWordBreak = _c === void 0 ? 'keep_all' : _c, _d = _a.contentTextWordBreak, contentTextWordBreak = _d === void 0 ? 'keep_all' : _d, _e = _a.contentFontWeight, contentFontWeight = _e === void 0 ? 'regular' : _e;
-    return (react_1.default.createElement("div", null,
+    return (react_1.default.createElement("div", { "x-pds-name": "BodyTextGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
         react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, wordBreak: titleTextWordBreak, styleTheme: "subTitleBold", colorTheme: "sysTextPrimary" }),
-        descText && (react_1.default.createElement(react_1.default.Fragment, null,
+        descText && (react_1.default.createElement("div", null,
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
             react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, wordBreak: descTextWordBreak, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }))),
-        contentText && (react_1.default.createElement(react_1.default.Fragment, null,
+        contentText && (react_1.default.createElement("div", null,
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
             react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, wordBreak: contentTextWordBreak, styleTheme: contentFontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorTheme: "sysTextPrimary" })))));
 }

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { PDSTextType } from '../../../common';
 export declare type CardProps = {
     titleText?: PDSTextType;
@@ -6,7 +6,7 @@ export declare type CardProps = {
     imageIconMode?: 'none' | 'image' | 'icon';
     imageSrc?: string;
     selectState?: 'unselected' | 'selected';
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
 declare function Card({ titleText, descText, imageIconMode, imageSrc, selectState, onClick }: CardProps): JSX.Element;
 export default Card;

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

@@ -13,12 +13,12 @@ var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function Card(_a) {
     var titleText = _a.titleText, descText = _a.descText, _b = _a.imageIconMode, imageIconMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.selectState, selectState = _c === void 0 ? 'unselected' : _c, onClick = _a.onClick;
-    var handleClick = function () {
+    var handleClick = function (e) {
         if (onClick) {
-            onClick();
+            onClick(e);
         }
     };
-    return (react_1.default.createElement(S_CardGroups, { selectState: selectState, onClick: handleClick },
+    return (react_1.default.createElement(S_CardGroups, { "x-pds-name": "Card", "x-pds-element-type": "component", "x-pds-device-type": "desktop", selectState: selectState, onClick: handleClick },
         imageIconMode !== 'none' && (react_1.default.createElement(S_ImageIconModeBox, null, imageIconMode === 'image' && imageSrc && (react_1.default.createElement(hybrid_1.ImageView, { shapeType: "rectangle", width: "responsive", ratio: "16_9", scaleType: "cover", src: imageSrc })))),
         react_1.default.createElement(S_Content, null,
             react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "body2Bold", colorTheme: "sysTextPrimary" }),

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

@@ -11,7 +11,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function CardList(_a) {
     var children = _a.children, rows = _a.rows, columns = _a.columns, rowGap = _a.rowGap, columnGap = _a.columnGap;
-    return (react_1.default.createElement(S_CardList, { rows: rows, columns: columns, rowGap: rowGap, columnGap: columnGap }, children));
+    return (react_1.default.createElement(S_CardList, { "x-pds-name": "CardList", "x-pds-element-type": "component", "x-pds-device-type": "desktop", rows: rows, columns: columns, rowGap: rowGap, columnGap: columnGap }, children));
 }
 var S_CardList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  display: grid;\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
     var rows = _a.rows;

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

@@ -83,7 +83,7 @@ function ChatBubbleListItem(_a) {
         setIsContextMenuOpen(false);
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_ChatBubbleListItem, { isMy: isMy, imageMode: imageMode },
+        react_1.default.createElement(S_ChatBubbleListItem, { "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", 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: isSeller ? 36 : 38 }))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })))),
             react_1.default.createElement(S_RightBox, null,

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, { "x-pds-name": "ChatList", "x-pds-element-type": "component", "x-pds-device-type": "desktop", 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' ? 'divider2' : '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' ? 'divider2' : '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;