pds-dev-kit-web 1.7.0 → 1.7.2

package/dist/src/common/assets/icons/line/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 declare const lineIcons: {
+    readonly ic_analytics_search_tools: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_arrow_down: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_arrow_down_bold: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_arrow_left: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
@@ -40,6 +41,7 @@ declare const lineIcons: {
     readonly ic_design_preference: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_developer: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_download: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_dynamic_layout: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_edit: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_editor: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_end: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
@@ -68,6 +70,7 @@ declare const lineIcons: {
     readonly ic_minus_circle: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_open_page: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_order: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_pages: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_page_size_expand: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_page_size_reduce: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_papp: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
@@ -107,6 +110,30 @@ declare const lineIcons: {
     readonly ic_requirement: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_sales: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_search: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_content_32: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_content_40: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_contents_carousel_32: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_contents_carousel_40: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_divider_32: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_divider_40: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_footer_32: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_footer_40: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_info_box_32: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_info_box_40: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_intro_32: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_intro_40: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_map_32: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_map_40: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_price_box_32: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_price_box_40: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_products_carousel_32: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_products_carousel_40: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_review_32: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_review_40: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_slider_32: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_slider_40: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_tab_32: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_section_tab_40: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_seller_info: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_seller_intro: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_seller_page: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

package/dist/src/common/assets/icons/line/index.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var AnalyticsSearchTools_1 = __importDefault(require("./AnalyticsSearchTools"));
 var ArrowDown_1 = __importDefault(require("./ArrowDown"));
 var ArrowDownBold_1 = __importDefault(require("./ArrowDownBold"));
 var ArrowLeft_1 = __importDefault(require("./ArrowLeft"));
@@ -43,6 +44,7 @@ var Dashboard_1 = __importDefault(require("./Dashboard"));
 var DesignPreference_1 = __importDefault(require("./DesignPreference"));
 var Developer_1 = __importDefault(require("./Developer"));
 var Download_1 = __importDefault(require("./Download"));
+var DynamicLayout_1 = __importDefault(require("./DynamicLayout"));
 var Edit_1 = __importDefault(require("./Edit"));
 var Editor_1 = __importDefault(require("./Editor"));
 var End_1 = __importDefault(require("./End"));
@@ -71,6 +73,7 @@ var MicOn_1 = __importDefault(require("./MicOn"));
 var MinusCircle_1 = __importDefault(require("./MinusCircle"));
 var OpenPage_1 = __importDefault(require("./OpenPage"));
 var Order_1 = __importDefault(require("./Order"));
+var Pages_1 = __importDefault(require("./Pages"));
 var PageSizeExpand_1 = __importDefault(require("./PageSizeExpand"));
 var PageSizeReduce_1 = __importDefault(require("./PageSizeReduce"));
 var Papp_1 = __importDefault(require("./Papp"));
@@ -110,6 +113,30 @@ var Report_1 = __importDefault(require("./Report"));
 var Requirement_1 = __importDefault(require("./Requirement"));
 var Sales_1 = __importDefault(require("./Sales"));
 var Search_1 = __importDefault(require("./Search"));
+var SectionContent32_1 = __importDefault(require("./SectionContent32"));
+var SectionContent40_1 = __importDefault(require("./SectionContent40"));
+var SectionContentsCarousel32_1 = __importDefault(require("./SectionContentsCarousel32"));
+var SectionContentsCarousel40_1 = __importDefault(require("./SectionContentsCarousel40"));
+var SectionDivider32_1 = __importDefault(require("./SectionDivider32"));
+var SectionDivider40_1 = __importDefault(require("./SectionDivider40"));
+var SectionFooter32_1 = __importDefault(require("./SectionFooter32"));
+var SectionFooter40_1 = __importDefault(require("./SectionFooter40"));
+var SectionInfoBox32_1 = __importDefault(require("./SectionInfoBox32"));
+var SectionInfoBox40_1 = __importDefault(require("./SectionInfoBox40"));
+var SectionIntro32_1 = __importDefault(require("./SectionIntro32"));
+var SectionIntro40_1 = __importDefault(require("./SectionIntro40"));
+var SectionMap32_1 = __importDefault(require("./SectionMap32"));
+var SectionMap40_1 = __importDefault(require("./SectionMap40"));
+var SectionPriceBox32_1 = __importDefault(require("./SectionPriceBox32"));
+var SectionPriceBox40_1 = __importDefault(require("./SectionPriceBox40"));
+var SectionProductsCarousel32_1 = __importDefault(require("./SectionProductsCarousel32"));
+var SectionProductsCarousel40_1 = __importDefault(require("./SectionProductsCarousel40"));
+var SectionReview32_1 = __importDefault(require("./SectionReview32"));
+var SectionReview40_1 = __importDefault(require("./SectionReview40"));
+var SectionSlider32_1 = __importDefault(require("./SectionSlider32"));
+var SectionSlider40_1 = __importDefault(require("./SectionSlider40"));
+var SectionTab32_1 = __importDefault(require("./SectionTab32"));
+var SectionTab40_1 = __importDefault(require("./SectionTab40"));
 var SellerInfo_1 = __importDefault(require("./SellerInfo"));
 var SellerIntro_1 = __importDefault(require("./SellerIntro"));
 var SellerPage_1 = __importDefault(require("./SellerPage"));
@@ -155,6 +182,7 @@ var Warning_1 = __importDefault(require("./Warning"));
 var Weblink_1 = __importDefault(require("./Weblink"));
 var Xmark_1 = __importDefault(require("./Xmark"));
 var lineIcons = {
+    ic_analytics_search_tools: AnalyticsSearchTools_1.default,
     ic_arrow_down: ArrowDown_1.default,
     ic_arrow_down_bold: ArrowDownBold_1.default,
     ic_arrow_left: ArrowLeft_1.default,
@@ -195,6 +223,7 @@ var lineIcons = {
     ic_design_preference: DesignPreference_1.default,
     ic_developer: Developer_1.default,
     ic_download: Download_1.default,
+    ic_dynamic_layout: DynamicLayout_1.default,
     ic_edit: Edit_1.default,
     ic_editor: Editor_1.default,
     ic_end: End_1.default,
@@ -223,6 +252,7 @@ var lineIcons = {
     ic_minus_circle: MinusCircle_1.default,
     ic_open_page: OpenPage_1.default,
     ic_order: Order_1.default,
+    ic_pages: Pages_1.default,
     ic_page_size_expand: PageSizeExpand_1.default,
     ic_page_size_reduce: PageSizeReduce_1.default,
     ic_papp: Papp_1.default,
@@ -262,6 +292,30 @@ var lineIcons = {
     ic_requirement: Requirement_1.default,
     ic_sales: Sales_1.default,
     ic_search: Search_1.default,
+    ic_section_content_32: SectionContent32_1.default,
+    ic_section_content_40: SectionContent40_1.default,
+    ic_section_contents_carousel_32: SectionContentsCarousel32_1.default,
+    ic_section_contents_carousel_40: SectionContentsCarousel40_1.default,
+    ic_section_divider_32: SectionDivider32_1.default,
+    ic_section_divider_40: SectionDivider40_1.default,
+    ic_section_footer_32: SectionFooter32_1.default,
+    ic_section_footer_40: SectionFooter40_1.default,
+    ic_section_info_box_32: SectionInfoBox32_1.default,
+    ic_section_info_box_40: SectionInfoBox40_1.default,
+    ic_section_intro_32: SectionIntro32_1.default,
+    ic_section_intro_40: SectionIntro40_1.default,
+    ic_section_map_32: SectionMap32_1.default,
+    ic_section_map_40: SectionMap40_1.default,
+    ic_section_price_box_32: SectionPriceBox32_1.default,
+    ic_section_price_box_40: SectionPriceBox40_1.default,
+    ic_section_products_carousel_32: SectionProductsCarousel32_1.default,
+    ic_section_products_carousel_40: SectionProductsCarousel40_1.default,
+    ic_section_review_32: SectionReview32_1.default,
+    ic_section_review_40: SectionReview40_1.default,
+    ic_section_slider_32: SectionSlider32_1.default,
+    ic_section_slider_40: SectionSlider40_1.default,
+    ic_section_tab_32: SectionTab32_1.default,
+    ic_section_tab_40: SectionTab40_1.default,
     ic_seller_info: SellerInfo_1.default,
     ic_seller_intro: SellerIntro_1.default,
     ic_seller_page: SellerPage_1.default,

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

@@ -221,5 +221,8 @@
     "sys_widget_orange_01": "darkorange500",
     "sys_text_warning_01": "darkorange500",
     "sys_component_base_18": "darkgrey400",
-    "sys_cpnt_sheet_base_04": "darkblue500"
+    "sys_cpnt_sheet_base_04": "darkblue500",
+    "sys_cpnt_sheet_base_05": "grey950",
+    "sys_cpnt_sheet_base_06": "darkgreen500",
+    "sys_facebook": "facebookblue"
 }

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

@@ -221,5 +221,8 @@
     "sys_widget_orange_01": "orange500",
     "sys_text_warning_01": "orange500",
     "sys_component_base_18": "grey400",
-    "sys_cpnt_sheet_base_04": "blue500"
+    "sys_cpnt_sheet_base_04": "blue500",
+    "sys_cpnt_sheet_base_05": "grey950",
+    "sys_cpnt_sheet_base_06": "green500",
+    "sys_facebook": "facebookblue"
 }

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

@@ -75,5 +75,6 @@
     "darkorange30": "#2C2015",
     "green50": "#CCF5E9",
     "darkgreen50": "#134034",
-    "opacity90": "E6"
+    "opacity90": "E6",
+    "facebookblue": "#1877F2"
 }

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

@@ -631,5 +631,13 @@
     "ui_cpnt_calendar_text_today": "sys_widget_red_01",
     "ui_cpnt_textlabel_sys_warning": "sys_text_warning_01",
     "ui_cpnt_lottiereactionbutton_base_default": "sys_component_base_18",
-    "ui_cpnt_sheet_base_06": "sys_cpnt_sheet_base_04"
+    "ui_cpnt_sheet_base_06": "sys_cpnt_sheet_base_04",
+    "ui_cpnt_sheet_base_07": "sys_cpnt_sheet_base_05",
+    "ui_cpnt_sheet_base_08": "sys_cpnt_sheet_base_06",
+    "ui_cpnt_pagination_dot_01": "sys_widget_white",
+    "ui_cpnt_pagination_dot_02": "sys_cpnt_base_white_opacity50",
+    "ui_cpnt_pagination_dot_border": "sys_border_line_01",
+    "ui_63": "sys_facebook",
+    "ui_64": "sys_text_white",
+    "ui_cpnt_sheet_border_04": "sys_border_line_02"
 }

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

@@ -1,84 +1,5 @@
 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;
-        pastelblue500: string;
-        pastelpink500: string;
-        pastelorange500: string;
-        pastelgreen500: string;
-        pastelpurple500: string;
-        darkpastelblue500: string;
-        darkpastelpink500: string;
-        darkpastelorange500: string;
-        darkpastelgreen500: string;
-        darkpastelpurple500: string;
-        green30: string;
-        darkgreen30: string;
-        orange50: string;
-        darkorange50: string;
-        orange30: string;
-        darkorange30: string;
-        green50: string;
-        darkgreen50: string;
-        opacity90: string;
-    };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -302,8 +223,11 @@ declare const colorSet: {
         sys_text_warning_01: string;
         sys_component_base_18: string;
         sys_cpnt_sheet_base_04: string;
+        sys_cpnt_sheet_base_05: string;
+        sys_cpnt_sheet_base_06: string;
+        sys_facebook: string;
     };
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -527,6 +451,89 @@ declare const colorSet: {
         sys_text_warning_01: string;
         sys_component_base_18: string;
         sys_cpnt_sheet_base_04: string;
+        sys_cpnt_sheet_base_05: string;
+        sys_cpnt_sheet_base_06: string;
+        sys_facebook: 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;
+        pastelblue500: string;
+        pastelpink500: string;
+        pastelorange500: string;
+        pastelgreen500: string;
+        pastelpurple500: string;
+        darkpastelblue500: string;
+        darkpastelpink500: string;
+        darkpastelorange500: string;
+        darkpastelgreen500: string;
+        darkpastelpurple500: string;
+        green30: string;
+        darkgreen30: string;
+        orange50: string;
+        darkorange50: string;
+        orange30: string;
+        darkorange30: string;
+        green50: string;
+        darkgreen50: string;
+        opacity90: string;
+        facebookblue: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -1162,6 +1169,14 @@ declare const colorSet: {
         ui_cpnt_textlabel_sys_warning: string;
         ui_cpnt_lottiereactionbutton_base_default: string;
         ui_cpnt_sheet_base_06: string;
+        ui_cpnt_sheet_base_07: string;
+        ui_cpnt_sheet_base_08: string;
+        ui_cpnt_pagination_dot_01: string;
+        ui_cpnt_pagination_dot_02: string;
+        ui_cpnt_pagination_dot_border: string;
+        ui_63: string;
+        ui_64: string;
+        ui_cpnt_sheet_border_04: 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_light_json_1 = __importDefault(require("./PaletteColor_light.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_light: PaletteColor_light_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

@@ -632,4 +632,12 @@ export interface UITheme {
     ui_cpnt_textlabel_sys_warning: string;
     ui_cpnt_lottiereactionbutton_base_default: string;
     ui_cpnt_sheet_base_06: string;
+    ui_cpnt_sheet_base_07: string;
+    ui_cpnt_sheet_base_08: string;
+    ui_cpnt_pagination_dot_01: string;
+    ui_cpnt_pagination_dot_02: string;
+    ui_cpnt_pagination_dot_border: string;
+    ui_63: string;
+    ui_64: string;
+    ui_cpnt_sheet_border_04: string;
 }

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

@@ -50,7 +50,6 @@ 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 _g = (0, react_1.useState)(0), contentWidth = _g[0], setContentWidth = _g[1];
     var chatBody = document.querySelector('#chatMessageBox');
     var chatBodyRect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
     /**
@@ -75,16 +74,13 @@ function BasicChatListItem(_a) {
         }
         setIsContextMenuOpen(false);
     };
-    function getContentTextWidth(ref) {
-        setContentWidth(ref.getBoundingClientRect().width);
-    }
     return (react_1.default.createElement(react_1.default.Fragment, null,
         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(S_TitleTextWrapper, { targetWidth: contentWidth },
+            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, { ref: function (ref) { return ref && getContentTextWidth(ref); } },
+            react_1.default.createElement(S_ContentTextWrapper, null,
                 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 }))),
@@ -112,7 +108,7 @@ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_2 || (te
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_ContentTextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 3;\n  margin-left: ", ";\n"], ["\n  flex: 3;\n  margin-left: ", ";\n"])), function (_a) {
+var S_ContentTextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n  margin-left: ", ";\n"], ["\n  flex: 1;\n  margin-left: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
@@ -126,9 +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  flex: 1;\n  max-width: ", ";\n"], ["\n  flex: 1;\n  max-width: ", ";\n"])), function (_a) {
-    var targetWidth = _a.targetWidth;
-    return targetWidth && targetWidth / 3 + "px";
-});
+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, templateObject_5;

package/dist/src/desktop/index.d.ts

@@ -1,6 +1,9 @@
 import { LayoutWF } from './layout/LayoutWF';
 import { ContainersBox as WFContainersBox } from './layout/LayoutWF/ContainersBox';
 export { LayoutWF, WFContainersBox };
+import { LayoutWH } from './layout/LayoutWH';
+import { ContainersBox as WHContainersBox } from './layout/LayoutWH/ContainersBox';
+export { LayoutWH, WHContainersBox };
 import { LayoutWS } from './layout/LayoutWS';
 import { GlobalMenuContainer as WSGlobalMenuContainer } from './layout/LayoutWS/Containers';
 import { ContainersBox as WSContainersBox } from './layout/LayoutWS/ContainersBox';

package/dist/src/desktop/index.js

@@ -2,27 +2,32 @@
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_ReactionButton = exports.D_Select = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_LottieReactionButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = void 0;
-exports.D_SectionSheet = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = void 0;
+exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_ReactionButton = exports.D_Select = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_LottieReactionButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WHContainersBox = exports.LayoutWH = exports.WFContainersBox = exports.LayoutWF = void 0;
+exports.D_SectionSheet = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = void 0;
 // layoutWF
 var LayoutWF_1 = require("./layout/LayoutWF");
 Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
 var ContainersBox_1 = require("./layout/LayoutWF/ContainersBox");
 Object.defineProperty(exports, "WFContainersBox", { enumerable: true, get: function () { return ContainersBox_1.ContainersBox; } });
+// layoutWH
+var LayoutWH_1 = require("./layout/LayoutWH");
+Object.defineProperty(exports, "LayoutWH", { enumerable: true, get: function () { return LayoutWH_1.LayoutWH; } });
+var ContainersBox_2 = require("./layout/LayoutWH/ContainersBox");
+Object.defineProperty(exports, "WHContainersBox", { enumerable: true, get: function () { return ContainersBox_2.ContainersBox; } });
 // layoutWS
 var LayoutWS_1 = require("./layout/LayoutWS");
 Object.defineProperty(exports, "LayoutWS", { enumerable: true, get: function () { return LayoutWS_1.LayoutWS; } });
 var Containers_1 = require("./layout/LayoutWS/Containers");
 Object.defineProperty(exports, "WSGlobalMenuContainer", { enumerable: true, get: function () { return Containers_1.GlobalMenuContainer; } });
-var ContainersBox_2 = require("./layout/LayoutWS/ContainersBox");
-Object.defineProperty(exports, "WSContainersBox", { enumerable: true, get: function () { return ContainersBox_2.ContainersBox; } });
+var ContainersBox_3 = require("./layout/LayoutWS/ContainersBox");
+Object.defineProperty(exports, "WSContainersBox", { enumerable: true, get: function () { return ContainersBox_3.ContainersBox; } });
 // layoutWT
 var LayoutWT_1 = require("./layout/LayoutWT");
 Object.defineProperty(exports, "LayoutWT", { enumerable: true, get: function () { return LayoutWT_1.LayoutWT; } });
 var Containers_2 = require("./layout/LayoutWT/Containers");
 Object.defineProperty(exports, "WTGlobalMenuContainer", { enumerable: true, get: function () { return Containers_2.GlobalMenuContainer; } });
-var ContainersBox_3 = require("./layout/LayoutWT/ContainersBox");
-Object.defineProperty(exports, "WTContainersBox", { enumerable: true, get: function () { return ContainersBox_3.ContainersBox; } });
+var ContainersBox_4 = require("./layout/LayoutWT/ContainersBox");
+Object.defineProperty(exports, "WTContainersBox", { enumerable: true, get: function () { return ContainersBox_4.ContainersBox; } });
 // components
 var components_1 = require("./components");
 Object.defineProperty(exports, "D_AdminList", { enumerable: true, get: function () { return components_1.AdminList; } });

package/dist/src/desktop/layout/LayoutWH/Containers/ContentsContainer/ContentsContainer.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare type ContentsContainerProps = {
+    content1?: JSX.Element;
+    content2?: JSX.Element;
+    layoutType: 'WHA_1' | 'WHB_1' | 'WHB_2' | 'WHB_3' | 'WHB_4' | 'WHB_5' | 'WHB_6' | 'WHC_1' | 'WHD_1' | 'WHD_2' | 'WHD_3' | 'WHD_4' | 'WHD_5' | 'WHD_6' | 'WHE_1' | 'WHE_2';
+    containerColor?: string;
+    areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
+};
+declare const ContentsContainer: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: ContentsContainerProps) => JSX.Element;
+export default ContentsContainer;

package/dist/src/desktop/layout/LayoutWH/Containers/ContentsContainer/ContentsContainer.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var variation_1 = require("./variation");
+var ContentsContainer = function (_a) {
+    var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
+    return (react_1.default.createElement(react_1.default.Fragment, null, {
+        WHA_1: (react_1.default.createElement(variation_1.WHA, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WHB_1: (react_1.default.createElement(variation_1.WHB, { layoutType: "WHB_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WHB_2: (react_1.default.createElement(variation_1.WHB, { layoutType: "WHB_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WHB_3: (react_1.default.createElement(variation_1.WHB, { layoutType: "WHB_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WHB_4: (react_1.default.createElement(variation_1.WHB, { layoutType: "WHB_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WHB_5: (react_1.default.createElement(variation_1.WHB, { layoutType: "WHB_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WHB_6: (react_1.default.createElement(variation_1.WHB, { layoutType: "WHB_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WHC_1: (react_1.default.createElement(variation_1.WHC, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WHD_1: (react_1.default.createElement(variation_1.WHD, { layoutType: "WHD_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WHD_2: (react_1.default.createElement(variation_1.WHD, { layoutType: "WHD_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WHD_3: (react_1.default.createElement(variation_1.WHD, { layoutType: "WHD_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WHD_4: (react_1.default.createElement(variation_1.WHD, { layoutType: "WHD_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WHD_5: (react_1.default.createElement(variation_1.WHD, { layoutType: "WHD_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WHD_6: (react_1.default.createElement(variation_1.WHD, { layoutType: "WHD_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WHE_1: (react_1.default.createElement(variation_1.WHE, { layoutType: "WHE_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WHE_2: (react_1.default.createElement(variation_1.WHE, { layoutType: "WHE_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 }))
+    }[layoutType]));
+};
+exports.default = ContentsContainer;

package/dist/src/desktop/layout/LayoutWH/Containers/ContentsContainer/index.d.ts

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

package/dist/src/desktop/layout/LayoutWH/Containers/ContentsContainer/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentsContainer = void 0;
+var ContentsContainer_1 = require("./ContentsContainer");
+Object.defineProperty(exports, "ContentsContainer", { enumerable: true, get: function () { return __importDefault(ContentsContainer_1).default; } });

package/dist/src/desktop/layout/LayoutWH/Containers/ContentsContainer/variation/WHA.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare type WHAProps = {
+    content1?: JSX.Element;
+    containerColor?: string;
+    areaColor?: string;
+    isLoadingContainer1?: boolean;
+};
+declare const WHA: ({ content1, containerColor, areaColor, isLoadingContainer1 }: WHAProps) => JSX.Element;
+export default WHA;