pds-dev-kit-web-test 0.0.7 → 0.0.8

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

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

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

@@ -32,11 +32,16 @@ function useAutoScrollToBottom(_a) {
     (0, react_1.useEffect)(function () {
         if (scrollRef.current) {
             scrollRef.current.scrollIntoView({ behavior: behavior });
+            // NOTE: 스크롤을 빠르게 하는 중에 scrollIntoView시 스크롤 영역만큼 렌더가 안되는 이슈에 대한 임시조치
+            setTimeout(function () {
+                var _a;
+                (_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: behavior });
+            }, 100);
         }
     }, [scrollTrigger]);
-    function triggerScrollToBottom() {
+    var triggerScrollToBottom = (0, react_1.useCallback)(function () {
         setScrollTrigger(function (prev) { return !prev; });
-    }
+    }, []);
     function EndOfList() {
         return react_1.default.createElement("li", { style: { listStyle: 'none', height: heightOfEndOfList + "px" }, ref: scrollRef });
     }

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

@@ -35,6 +35,7 @@ function DesktopTabBar(_a) {
     var history = (0, react_router_dom_1.useHistory)();
     var pathname = (0, react_router_dom_1.useLocation)().pathname;
     if (itemArray) {
+        var isSubTabBarActivated = itemArray.some(function (item) { return item.isActive && item.subArray; });
         var handelClickTabItem_1 = function (item, e) {
             if (item.onClick) {
                 item.onClick(e);
@@ -51,13 +52,14 @@ function DesktopTabBar(_a) {
                 return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
             }
         };
-        return (react_1.default.createElement(S_TabBox, null,
-            itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme },
-                react_1.default.createElement(S_TitleWrapper, { text: item.title, onClick: function (e) { return handelClickTabItem_1(item, e); } }, textLabel_1(item, false)),
-                item.isActive && item.subArray && (react_1.default.createElement(S_SubTabBox, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubWrapper, { key: subItem.title, text: subItem.title, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, textLabel_1(subItem, true))); }))))); }),
-            itemArray.map(function (item) { return item.isActive && item.subArray && react_1.default.createElement(S_SubBackground, { key: item.title }); })));
+        return (react_1.default.createElement(S_TabBarBox, null,
+            react_1.default.createElement(S_MainTabBarSpace, null, itemArray.map(function (item) { return (react_1.default.createElement(S_MainTabItemBox, { key: item.title },
+                react_1.default.createElement(S_MainTabItemWrapper, { text: item.title, styleTheme: styleTheme, isActive: item.isActive, onClick: function (e) { return handelClickTabItem_1(item, e); } }, textLabel_1(item, false)),
+                item.isActive && item.subArray && (react_1.default.createElement(S_SubTabBarWrapper, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubTabItemWrapper, { key: subItem.title, text: subItem.title, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, textLabel_1(subItem, true))); }))))); })),
+            isSubTabBarActivated && react_1.default.createElement(S_SubTabBarSpace, null)));
     }
     if (textArray) {
+        var isSubTabBarActivated = textArray.some(function (item) { return pathname.includes(item.path) && item.subArray; });
         var handleClick_1 = function (value) {
             if (value) {
                 history.push(value.path);
@@ -74,24 +76,26 @@ function DesktopTabBar(_a) {
                 return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
             }
         };
-        return (react_1.default.createElement(S_TabBox, null,
-            textArray.map(function (item) { return (react_1.default.createElement(S_TabWrapper, { key: item.path, isActive: pathname.includes(item.path), styleTheme: styleTheme },
-                react_1.default.createElement(S_TitleWrapper, { text: item.title, onClick: function () {
-                        handleClick_1(item);
-                    } }, textLabel_2(item, false)),
-                item.subArray && pathname.includes(item.path) && (react_1.default.createElement(S_SubTabBox, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubWrapper, { key: subItem.path, text: subItem.title, onClick: function () {
-                        handleClick_1(subItem);
-                    } }, textLabel_2(subItem, true))); }))))); }),
-            textArray.map(function (item) {
-                return item.subArray && pathname.includes(item.path) && react_1.default.createElement(S_SubBackground, { key: item.path });
-            })));
+        return (react_1.default.createElement(S_TabBarBox, null,
+            react_1.default.createElement(S_MainTabBarSpace, null, textArray.map(function (item) { return (react_1.default.createElement(S_MainTabItemBox, { key: item.path },
+                react_1.default.createElement(S_MainTabItemWrapper, { isActive: pathname.includes(item.path), styleTheme: styleTheme, text: item.title, onClick: function () { return handleClick_1(item); } }, textLabel_2(item, false)),
+                pathname.includes(item.path) && item.subArray && (react_1.default.createElement(S_SubTabBarWrapper, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubTabItemWrapper, { key: subItem.title, text: subItem.title, onClick: function () { return handleClick_1(subItem); } }, textLabel_2(subItem, true))); }))))); })),
+            isSubTabBarActivated && react_1.default.createElement(S_SubTabBarSpace, null)));
     }
     return react_1.default.createElement(react_1.default.Fragment, null);
 }
-var mediumStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-end;\n  box-sizing: border-box;\n  justify-content: center;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  align-items: flex-end;\n  box-sizing: border-box;\n  justify-content: center;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
+var S_TabBarBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var S_MainTabBarSpace = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding-left: ", ";\n  height: 40px;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding-left: ", ";\n  height: 40px;\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingD;
+    return theme.ui_cpnt_tabbar_base_area;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider;
 }, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var tabIndicator = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    left: 0px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    left: 0px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme, styleTheme = _a.styleTheme;
     return styleTheme === 'content'
         ? theme.ui_cpnt_tabbar_border_active_indicator
@@ -101,51 +105,41 @@ var mediumStyle = (0, styled_components_1.css)(templateObject_1 || (templateObje
     return !isActive && "display: none;";
 });
 // NOTE: Tab item 활성화 시 text에 bold가 적용되는데, 이때 font-family에 따라 text 영역의 너비가 변경되어 시각적 변동을 일으키는 문제를 해결하기 위한 처리입니다.
-var textOffset = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  content: ", ";\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n"], ["\n  display: block;\n  content: ", ";\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n"])), function (_a) {
-    var text = _a.text;
-    return "'" + text + "'";
-});
-var S_TabWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  ", "\n"], ["\n  position: relative;\n  ", "\n"])), mediumStyle);
-var S_TitleWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  cursor: pointer;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n\n  & > div::before {\n    font-weight: ", ";\n    ", "\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    ", "\n  }\n"], ["\n  cursor: pointer;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n\n  & > div::before {\n    font-weight: ", ";\n    ", "\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    ", "\n  }\n"])), function (_a) {
+var textOffset = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  & > div::before {\n    font-weight: ", ";\n    display: block;\n    content: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    display: block;\n    content: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n"], ["\n  & > div::before {\n    font-weight: ", ";\n    display: block;\n    content: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    display: block;\n    content: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingA;
+    return theme.fontWeight.normal;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
+    var text = _a.text;
+    return "'" + text + "'";
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.normal;
-}, textOffset, function (_a) {
     var theme = _a.theme;
     return theme.fontWeight.bold;
-}, textOffset);
-var S_TabBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding-left: ", ";\n  position: relative;\n  height: 40px;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding-left: ", ";\n  position: relative;\n  height: 40px;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_tabbar_base_area;
 }, function (_a) {
+    var text = _a.text;
+    return "'" + text + "'";
+});
+var S_MainTabItemBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"], ["\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_divider;
+    return theme.spacing.spacingD;
+});
+var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: flex-end;\n  display: flex;\n  height: 100%;\n  box-sizing: border-box;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n  cursor: pointer;\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-end;\n  display: flex;\n  height: 100%;\n  box-sizing: border-box;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n  cursor: pointer;\n\n  ", "\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
-});
-var S_SubBackground = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 100%;\n  height: 32px;\n  background-color: ", ";\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n"], ["\n  width: 100%;\n  height: 32px;\n  background-color: ", ";\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n"])), function (_a) {
+    return theme.spacing.spacingB;
+}, tabIndicator, textOffset);
+var S_SubTabBarWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: max-content;\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n  height: 32px;\n  display: flex;\n"], ["\n  width: max-content;\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n  height: 32px;\n  display: flex;\n"])));
+var S_SubTabBarSpace = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 32px;\n  background-color: ", ";\n"], ["\n  height: 32px;\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_tabbar_base_area_sub;
 });
-var S_SubTabBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100vw;\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n  height: 32px;\n  display: flex;\n  z-index: 1;\n"], ["\n  width: 100vw;\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n  height: 32px;\n  display: flex;\n  z-index: 1;\n"])));
-var S_SubWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  & > div::before {\n    font-weight: ", ";\n    ", "\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    ", "\n  }\n"], ["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  & > div::before {\n    font-weight: ", ";\n    ", "\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    ", "\n  }\n"])), function (_a) {
+var S_SubTabItemWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.normal;
-}, textOffset, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.bold;
 }, textOffset);
 exports.default = DesktopTabBar;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

@@ -9,7 +9,7 @@ declare type Props = {
     hintText?: TFunctionResult;
     maxHeightItemNumber?: number;
     defaultValue?: PDSValueOption;
-    value?: PDSValueOption;
+    value?: PDSValueOption | null;
     responsiveMode?: 'none' | 'use';
     size?: 'large' | 'small';
     state?: 'normal' | 'read_only' | 'disabled';

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

@@ -37,17 +37,32 @@ function Dropdown(_a) {
     // selectionMode = 'single',
     size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, onChange = _a.onChange;
     var _g = (0, react_1.useState)(false), isFocused = _g[0], setIsFocused = _g[1];
-    var _h = (0, react_1.useState)(defaultValue), selectedValue = _h[0], setSelectedValue = _h[1];
+    var _h = (0, react_1.useState)(null), selectedValue = _h[0], setSelectedValue = _h[1];
+    /**
+     * @when value 프롭의 값에 따라
+     * @expected 값이 null일 때 드롭다운을 초기화하고, 값이 있다면 해당 값으로 설정해줍니다.
+     * @clear -
+     */
     (0, react_1.useEffect)(function () {
-        if (defaultValue) {
-            setSelectedValue(defaultValue);
+        if (value === null) {
+            setSelectedValue(null);
+            return;
         }
-    }, [defaultValue]);
-    (0, react_1.useEffect)(function () {
-        if (value) {
+        if (value !== undefined) {
             setSelectedValue(value);
         }
     }, [value]);
+    /**
+     * @when defaultValue 프롭에 값이 있을 시
+     * @expected Dropdown의 초기값을 설정해줍니다.
+     * @clear -
+     */
+    (0, react_1.useEffect)(function () {
+        if (!defaultValue) {
+            return;
+        }
+        setSelectedValue(defaultValue);
+    }, [defaultValue]);
     var handleClick = function () {
         if (state === 'disabled' || state === 'read_only') {
             return;
@@ -61,7 +76,7 @@ function Dropdown(_a) {
     };
     var handleClickOption = function (option) {
         setIsFocused(false);
-        if (!value) {
+        if (value === undefined) {
             setSelectedValue(option);
         }
         if (onChange) {
@@ -150,7 +165,7 @@ function Dropdown(_a) {
     }, [size, maxHeightItemNumber]);
     return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth },
         react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth },
-            react_1.default.createElement(S_TextLabel, { size: size },
+            react_1.default.createElement(S_TextLabel, { size: size, responsiveMode: responsiveMode },
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })),
             react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" })),

package/dist/src/desktop/components/DynamicDesktopNavBar/components/ContextMenuNavs/ContextMenuItemNav.js

@@ -30,7 +30,7 @@ function ContextMenuItemNavBox(_a) {
         menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), isContextMenu: true })),
         menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { openNewTab: true, isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) })),
         menu.menuItemType === 'INTERNAL_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(InternalLinkMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) })),
-        menu.menuItemType === 'DISPLAY_ONLY' && (react_1.default.createElement(DisplayOnlyMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }) }))));
+        menu.menuItemType === 'DISPLAY_ONLY' && (react_1.default.createElement(DisplayOnlyMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }) }))));
 }
 var S_ContextMenuItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -18,7 +18,7 @@ function FilterBar(_a) {
             return textArray.map(function (option) {
                 var _a;
                 return (react_1.default.createElement(S_ChipWrapper, { key: option.value },
-                    react_1.default.createElement(Chip_1.Chip, { displayType: "filter_single", text: option.text, value: (value === null || value === void 0 ? void 0 : value.value) || undefined, id: option.value, onClickChip: function () { return onClickChip && onClickChip(option); }, activeChipId: activeChipId, chipId: (_a = option.value) === null || _a === void 0 ? void 0 : _a.toString() })));
+                    react_1.default.createElement(Chip_1.Chip, { displayType: "filter_single", text: option.text, value: value === null || value === void 0 ? void 0 : value.value, id: option.value, onClickChip: function () { return onClickChip && onClickChip(option); }, activeChipId: activeChipId, chipId: (_a = option.value) === null || _a === void 0 ? void 0 : _a.toString() })));
             });
         }
     };

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

@@ -28,6 +28,7 @@ export declare type TextFieldProps = {
     maxLength?: number;
     min?: number;
     customWidth?: string;
+    autoComplete?: string;
     onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     onClickIBtn1?: () => void;
@@ -36,5 +37,5 @@ export declare type TextFieldProps = {
     onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onTarget?: () => void;
 };
-declare function TextField({ name, hintText, defaultText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onTarget }: TextFieldProps): JSX.Element;
+declare function TextField({ name, hintText, defaultText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onTarget }: TextFieldProps): JSX.Element;
 export default TextField;

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

@@ -31,7 +31,7 @@ var components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
 function TextField(_a) {
     var _b;
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.validationPoint, validationPoint = _c === void 0 ? 'onBlur' : _c, _d = _a.preventBlankMode, preventBlankMode = _d === void 0 ? 'none' : _d, _e = _a.enterSubmitMode, enterSubmitMode = _e === void 0 ? 'none' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.responsiveMode, responsiveMode = _g === void 0 ? 'none' : _g, _h = _a.textLineType, textLineType = _h === void 0 ? 'single' : _h, _j = _a.multiRows, multiRows = _j === void 0 ? 8 : _j, _k = _a.autoMinRows, autoMinRows = _k === void 0 ? 8 : _k, autoMaxRows = _a.autoMaxRows, _l = _a.inputType, inputType = _l === void 0 ? 'text' : _l, _m = _a.state, state = _m === void 0 ? 'normal' : _m, iBtn1IconName = _a.iBtn1IconName, _o = _a.iBtn1IconFillType, iBtn1IconFillType = _o === void 0 ? 'line' : _o, iBtn2IconName = _a.iBtn2IconName, _p = _a.iBtn2IconFillType, iBtn2IconFillType = _p === void 0 ? 'line' : _p, _q = _a.colorTheme, colorTheme = _q === void 0 ? 'none' : _q, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.validationPoint, validationPoint = _c === void 0 ? 'onBlur' : _c, _d = _a.preventBlankMode, preventBlankMode = _d === void 0 ? 'none' : _d, _e = _a.enterSubmitMode, enterSubmitMode = _e === void 0 ? 'none' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.responsiveMode, responsiveMode = _g === void 0 ? 'none' : _g, _h = _a.textLineType, textLineType = _h === void 0 ? 'single' : _h, _j = _a.multiRows, multiRows = _j === void 0 ? 8 : _j, _k = _a.autoMinRows, autoMinRows = _k === void 0 ? 8 : _k, autoMaxRows = _a.autoMaxRows, _l = _a.inputType, inputType = _l === void 0 ? 'text' : _l, _m = _a.state, state = _m === void 0 ? 'normal' : _m, iBtn1IconName = _a.iBtn1IconName, _o = _a.iBtn1IconFillType, iBtn1IconFillType = _o === void 0 ? 'line' : _o, iBtn2IconName = _a.iBtn2IconName, _p = _a.iBtn2IconFillType, iBtn2IconFillType = _p === void 0 ? 'line' : _p, _q = _a.colorTheme, colorTheme = _q === void 0 ? 'none' : _q, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _r = _a.autoComplete, autoComplete = _r === void 0 ? 'on' : _r, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget;
     var iconThemeColorNoneObj = {
         normal: 'ui_cpnt_button_icon_default',
         read_only: 'ui_cpnt_button_icon_default',
@@ -42,9 +42,9 @@ function TextField(_a) {
         read_only: 'ui_cpnt_textfield_icon_darktheme_default',
         disabled: 'ui_cpnt_textfield_icon_darktheme_disabled'
     };
-    var _r = (0, react_1.useState)(false), isFocused = _r[0], setIsFocused = _r[1];
-    var _s = (0, react_hook_form_1.useFormContext)(), register = _s.register, trigger = _s.trigger, errors = _s.formState.errors;
-    var _t = register(name, validation), validateOnChange = _t.onChange, validateOnBlur = _t.onBlur;
+    var _s = (0, react_1.useState)(false), isFocused = _s[0], setIsFocused = _s[1];
+    var _t = (0, react_hook_form_1.useFormContext)(), register = _t.register, trigger = _t.trigger, errors = _t.formState.errors;
+    var _u = register(name, validation), validateOnChange = _u.onChange, validateOnBlur = _u.onBlur;
     var isError = Object.keys(errors).some(function (error) { return error === name; });
     var handleClickIBtn1 = function () {
         if (onClickIBtn1) {
@@ -94,14 +94,14 @@ function TextField(_a) {
     }
     var S_TextField = function () {
         if (textLineType === 'multi') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }));
         }
         if (textLineType === 'auto') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }));
         }
         if (textLineType === 'single') {
             return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: "use", deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, isFocused: isFocused, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }),
+                react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: "use", deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, isFocused: isFocused, autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }),
                 react_1.default.createElement(S_IconBox, null,
                     iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
                             {

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

@@ -108,6 +108,9 @@ var S_VisiblePAppWrapper = styled_components_1.default.div(templateObject_10 ||
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-var S_ImageViewWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  height: 32px;\n"], ["\n  height: 32px;\n"])));
+var S_ImageViewWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  border-radius: 50%;\n  cursor: ", ";\n  height: 32px;\n"], ["\n  border-radius: 50%;\n  cursor: ", ";\n  height: 32px;\n"])), function (_a) {
+    var onClick = _a.onClick;
+    return (onClick ? 'pointer' : 'default');
+});
 exports.default = UserDesktopNavBar;
 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/index.d.ts

@@ -9,6 +9,7 @@ import { BlogTextField } from './BlogTextField';
 import { BodyTextGroup } from './BodyTextGroup';
 import { Card } from './Card';
 import { CardList } from './CardList';
+import { ChatBubbleListItem } from './ChatBubbleListItem';
 import { ChatList } from './ChatList';
 import { Checkbox } from './Checkbox';
 import { Chip } from './Chip';
@@ -41,4 +42,4 @@ import { UploadTextButton } from './UploadTextButton';
 import { UserDesktopNavBar } from './UserDesktopNavBar';
 import { UserDesktopSideTab } from './UserDesktopSideTab';
 import { UserDesktopTabBar } from './UserDesktopTabBar';
-export { AdminList, AdminListHeader, AdminListItem, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, MainButton, PageTitleTextGroup, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab };
+export { AdminList, AdminListHeader, AdminListItem, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, MainButton, PageTitleTextGroup, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab };

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserDesktopSideTab = exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.PageTitleTextGroup = exports.MainButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeaderBar = exports.DesktopAlertDialog = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
+exports.UserDesktopSideTab = exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.PageTitleTextGroup = exports.MainButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeaderBar = exports.DesktopAlertDialog = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
 var AdminList_1 = require("./AdminList");
 Object.defineProperty(exports, "AdminList", { enumerable: true, get: function () { return AdminList_1.AdminList; } });
 var AdminListHeader_1 = require("./AdminListHeader");
@@ -23,6 +23,8 @@ var Card_1 = require("./Card");
 Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
 var CardList_1 = require("./CardList");
 Object.defineProperty(exports, "CardList", { enumerable: true, get: function () { return CardList_1.CardList; } });
+var ChatBubbleListItem_1 = require("./ChatBubbleListItem");
+Object.defineProperty(exports, "ChatBubbleListItem", { enumerable: true, get: function () { return ChatBubbleListItem_1.ChatBubbleListItem; } });
 var ChatList_1 = require("./ChatList");
 Object.defineProperty(exports, "ChatList", { enumerable: true, get: function () { return ChatList_1.ChatList; } });
 var Checkbox_1 = require("./Checkbox");

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

@@ -9,7 +9,7 @@ import { LayoutWT } from './layout/LayoutWT';
 import { GlobalMenuContainer as WTGlobalMenuContainer } from './layout/LayoutWT/Containers';
 import { ContainersBox as WTContainersBox } from './layout/LayoutWT/ContainersBox';
 export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
-import { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicChatListItem as D_BasicChatListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, Card as D_Card, CardList as D_CardList, ChatList as D_ChatList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, Select as D_Select, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab } from './components';
-export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_Select, D_ReactionButton, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab };
+import { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicChatListItem as D_BasicChatListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, Card as D_Card, CardList as D_CardList, ChatBubbleListItem as D_ChatBubbleListItem, ChatList as D_ChatList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, Select as D_Select, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab } from './components';
+export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_Select, D_ReactionButton, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab };
 import { DesktopBasicModal as D_DesktopBasicModal, DesktopHeadlessModal as D_DesktopHeadlessModal } from './panels';
 export { D_DesktopBasicModal, D_DesktopHeadlessModal };

package/dist/src/desktop/index.js

@@ -2,8 +2,8 @@
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.D_UserDesktopNavBar = exports.D_UploadTextButton = 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_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_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_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = void 0;
+exports.D_UploadTextButton = 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_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_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = void 0;
 // layoutWF
 var LayoutWF_1 = require("./layout/LayoutWF");
 Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
@@ -36,6 +36,7 @@ Object.defineProperty(exports, "D_BlogTextField", { enumerable: true, get: funct
 Object.defineProperty(exports, "D_BodyTextGroup", { enumerable: true, get: function () { return components_1.BodyTextGroup; } });
 Object.defineProperty(exports, "D_Card", { enumerable: true, get: function () { return components_1.Card; } });
 Object.defineProperty(exports, "D_CardList", { enumerable: true, get: function () { return components_1.CardList; } });
+Object.defineProperty(exports, "D_ChatBubbleListItem", { enumerable: true, get: function () { return components_1.ChatBubbleListItem; } });
 Object.defineProperty(exports, "D_ChatList", { enumerable: true, get: function () { return components_1.ChatList; } });
 Object.defineProperty(exports, "D_Checkbox", { enumerable: true, get: function () { return components_1.Checkbox; } });
 Object.defineProperty(exports, "D_Chip", { enumerable: true, get: function () { return components_1.Chip; } });

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

@@ -2,7 +2,7 @@ import { MutableRefObject } from 'react';
 export declare type ContentsContainerProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2';
+    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
     containerColor?: string;
     areaColor?: string;
     container1Ref?: MutableRefObject<HTMLDivElement | null>;

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

@@ -39,16 +39,17 @@ var ContentsContainer = function (_a) {
         WTL_1: react_1.default.createElement(variation_1.WTL, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
         WTM_1: (react_1.default.createElement(variation_1.WTM, { layoutType: "WTM_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WTM_2: (react_1.default.createElement(variation_1.WTM, { layoutType: "WTM_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTN_1: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTN_2: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTN_3: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_3", content1: content1, containerColor: containerColor, areaColor: areaColor })),
+        WTN_1: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_1", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
+        WTN_2: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_2", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
+        WTN_3: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_3", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
         WTO_1: (react_1.default.createElement(variation_1.WTO, { layoutType: "WTO_1", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
         WTP_1: (react_1.default.createElement(variation_1.WTP, { layoutType: "WTP_1", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
         WTQ_1: (react_1.default.createElement(variation_1.WTQ, { layoutType: "WTQ_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
         WTS_1: (react_1.default.createElement(variation_1.WTS, { layoutType: "WTS_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
         WTS_2: (react_1.default.createElement(variation_1.WTS, { layoutType: "WTS_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
         WTT_1: (react_1.default.createElement(variation_1.WTT, { layoutType: "WTT_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
-        WTT_2: (react_1.default.createElement(variation_1.WTT, { layoutType: "WTT_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref }))
+        WTT_2: (react_1.default.createElement(variation_1.WTT, { layoutType: "WTT_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
+        WTU_1: (react_1.default.createElement(variation_1.WTU, { layoutType: "WTU_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor }))
     }[layoutType]));
 };
 exports.default = ContentsContainer;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTN.d.ts

@@ -1,9 +1,10 @@
-/// <reference types="react" />
+import { MutableRefObject } from 'react';
 export declare type WTNProps = {
     content1?: JSX.Element;
     layoutType: 'WTN_1' | 'WTN_2' | 'WTN_3';
     containerColor?: string;
     areaColor?: string;
+    container1Ref?: MutableRefObject<HTMLDivElement | null>;
 };
-declare const WTN: ({ content1, containerColor, areaColor, layoutType }: WTNProps) => JSX.Element;
+declare const WTN: ({ content1, containerColor, areaColor, layoutType, container1Ref }: WTNProps) => JSX.Element;
 export default WTN;

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

@@ -10,8 +10,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var WTN = function (_a) {
-    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType;
-    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor },
+    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType, container1Ref = _a.container1Ref;
+    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor, ref: container1Ref },
         react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
             react_1.default.createElement(S_Content1, null, content1))));
 };

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

@@ -20,7 +20,7 @@ var WTQ = function (_a) {
                 react_1.default.createElement(S_Content2, { layoutType: layoutType }, content2)))));
 };
 var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
-var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: end;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: calc(50% + 220px);\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: end;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: calc(50% + 220px);\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: flex-end;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: calc(50% + 220px);\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: flex-end;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: calc(50% + 220px);\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer01_background;
 }, function (_a) {

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare type WTUProps = {
+    content1?: JSX.Element;
+    content2?: JSX.Element;
+    layoutType?: 'WTU_1';
+    containerColor?: string;
+    areaColor?: string;
+};
+export declare type StyleProps = {
+    $contentsArea2Width?: number;
+};
+declare const WTU: ({ content1, content2, layoutType, containerColor, areaColor }: WTUProps) => JSX.Element;
+export default WTU;