pds-dev-kit-web-test 2.2.99 → 2.2.652

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

@@ -52,7 +52,15 @@ function UserDesktopTabBar(_a) {
                 item.onClick(e);
             }
         };
-        return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: itemArray.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), index)); }) })));
+        return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", styleTheme: styleTheme }, { children: itemArray.map(function (item, index) {
+                if (styleTheme === 'content') {
+                    return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: "content", text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "headingBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), index));
+                }
+                if (styleTheme === 'content2') {
+                    return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: "content2", text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "leadParaBold", colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }) }), index));
+                }
+                return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), index));
+            }) })));
     }
     if (textArray) {
         var handleClick_1 = function (value) {
@@ -60,7 +68,7 @@ function UserDesktopTabBar(_a) {
                 history.push(value.path);
             }
         };
-        return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: textArray.map(function (item) { return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ styleTheme: styleTheme, isActive: pathname === item.path, onClick: function () {
+        return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", styleTheme: styleTheme }, { children: textArray.map(function (item) { return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ styleTheme: styleTheme, isActive: pathname === item.path, onClick: function () {
                     handleClick_1(item);
                 } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, styleTheme: pathname === item.path ? 'body2Bold' : 'body2Regular', colorTheme: pathname === item.path ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), item.path)); }) })));
     }
@@ -75,7 +83,11 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (template
     var styleTheme = _a.styleTheme;
     switch (styleTheme) {
         case 'main':
-            return mainStyle; // TODO : 추후 styleTheme 의 enum 값이 추가되면 수정
+            return mainStyle;
+        case 'content':
+            return contentStyle;
+        case 'content2':
+            return content2Style;
         default:
             return mainStyle;
     }
@@ -99,12 +111,51 @@ var mainStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject
     var isActive = _a.isActive;
     return !isActive && "display: none;";
 });
-var S_TabBar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"])), function (_a) {
+var contentStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\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: center;\n  background-color: ", ";\n  cursor: pointer;\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 isActive = _a.isActive, theme = _a.theme;
+    return isActive && theme.ui_cpnt_tabbar_base_area;
+}, function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_tabbar_base_area;
+    return theme.spacing.spacingF;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_19;
+}, function (_a) {
+    var isActive = _a.isActive;
+    return !isActive && "display: none;";
+});
+var content2Style = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 48px;\n  margin-right: ", ";\n  padding: ", ";\n  position: relative;\n\n  ", "\n\n  &:last-child {\n    margin-right: 0;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 48px;\n  margin-right: ", ";\n  padding: ", ";\n  position: relative;\n\n  ", "\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])), function (_a) {
+    var isActive = _a.isActive, theme = _a.theme;
+    return isActive ? theme.ui_123 : theme.ui_cpnt_sheet_base_03;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_divider;
+    return "0 ".concat(theme.spacing.spacingD);
+}, function (_a) {
+    var isActive = _a.isActive;
+    return isActive && "border-radius: 24px;";
+});
+var S_TabBar = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: ", ";\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: ", ";\n  justify-content: center;\n"], ["\n  align-items: ", ";\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: ", ";\n  justify-content: center;\n"])), function (_a) {
+    var styleTheme = _a.styleTheme;
+    return styleTheme === 'content2' && 'center';
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_tabbar_base_area;
+}, function (_a) {
+    var styleTheme = _a.styleTheme, theme = _a.theme;
+    return styleTheme !== 'content2' && "1px solid ".concat(theme.ui_cpnt_divider);
+}, function (_a) {
+    var styleTheme = _a.styleTheme;
+    switch (styleTheme) {
+        case 'content':
+            return '64px';
+        case 'content2':
+            return '96px';
+        default:
+            return '48px';
+    }
 });
 exports.default = UserDesktopTabBar;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -8,6 +8,8 @@ import { BasicList } from './BasicList';
 import { BasicListItem } from './BasicListItem';
 import { BlogTextField } from './BlogTextField';
 import { BodyTextGroup } from './BodyTextGroup';
+import { BoxItem } from './BoxItem';
+import { Calendar } from './Calendar';
 import { Card } from './Card';
 import { CardList } from './CardList';
 import { ChatBubbleListItem } from './ChatBubbleListItem';
@@ -31,11 +33,15 @@ import { ImageSlide } from './ImageSlide';
 import { LottieReactionButton } from './LottieReactionButton';
 import { MainButton } from './MainButton';
 import { PageTitleTextGroup } from './PageTitleTextGroup';
+import { PriceTextField } from './PriceTextField';
+import { PriceTextLabel } from './PriceTextLabel';
 import { Radio } from './Radio';
 import { ReactionButton } from './ReactionButton';
+import { RichTextEditor } from './RichTextEditor';
 import { SegmentedButtonGroup } from './SegmentedButtonGroup';
 import { Select } from './Select';
 import { Slider } from './Slider';
+import { Snackbar } from './Snackbar';
 import { StatusBlock } from './StatusBlock';
 import { TextButton } from './TextButton';
 import { TextField } from './TextField';
@@ -46,4 +52,4 @@ import { UploadTextButton } from './UploadTextButton';
 import { UserDesktopNavBar } from './UserDesktopNavBar';
 import { UserDesktopSideTab } from './UserDesktopSideTab';
 import { UserDesktopTabBar } from './UserDesktopTabBar';
-export { AdminList, AdminListHeader, AdminListItem, BasicButtonGroup, 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, LottieReactionButton, MainButton, PageTitleTextGroup, Radio, ReactionButton, SegmentedButtonGroup, Select, Slider, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab };
+export { AdminList, AdminListHeader, AdminListItem, BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, BoxItem, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, PageTitleTextGroup, PriceTextField, Radio, ReactionButton, RichTextEditor, SegmentedButtonGroup, Select, Slider, Snackbar, StatusBlock, TextButton, TextField, TextLabel, PriceTextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab, Calendar };

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

@@ -1,6 +1,7 @@
 "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.Slider = exports.Select = exports.SegmentedButtonGroup = exports.ReactionButton = exports.Radio = exports.PageTitleTextGroup = exports.MainButton = exports.LottieReactionButton = 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.BasicButtonGroup = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
+exports.UploadMainButton = exports.UploadIconButton = exports.PriceTextLabel = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Snackbar = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.RichTextEditor = exports.ReactionButton = exports.Radio = exports.PriceTextField = exports.PageTitleTextGroup = exports.MainButton = exports.LottieReactionButton = 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.BoxItem = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.BasicButtonGroup = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
+exports.Calendar = exports.UserDesktopSideTab = exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = void 0;
 var AdminList_1 = require("./AdminList");
 Object.defineProperty(exports, "AdminList", { enumerable: true, get: function () { return AdminList_1.AdminList; } });
 var AdminListHeader_1 = require("./AdminListHeader");
@@ -21,6 +22,10 @@ var BlogTextField_1 = require("./BlogTextField");
 Object.defineProperty(exports, "BlogTextField", { enumerable: true, get: function () { return BlogTextField_1.BlogTextField; } });
 var BodyTextGroup_1 = require("./BodyTextGroup");
 Object.defineProperty(exports, "BodyTextGroup", { enumerable: true, get: function () { return BodyTextGroup_1.BodyTextGroup; } });
+var BoxItem_1 = require("./BoxItem");
+Object.defineProperty(exports, "BoxItem", { enumerable: true, get: function () { return BoxItem_1.BoxItem; } });
+var Calendar_1 = require("./Calendar");
+Object.defineProperty(exports, "Calendar", { enumerable: true, get: function () { return Calendar_1.Calendar; } });
 var Card_1 = require("./Card");
 Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
 var CardList_1 = require("./CardList");
@@ -68,16 +73,24 @@ var MainButton_1 = require("./MainButton");
 Object.defineProperty(exports, "MainButton", { enumerable: true, get: function () { return MainButton_1.MainButton; } });
 var PageTitleTextGroup_1 = require("./PageTitleTextGroup");
 Object.defineProperty(exports, "PageTitleTextGroup", { enumerable: true, get: function () { return PageTitleTextGroup_1.PageTitleTextGroup; } });
+var PriceTextField_1 = require("./PriceTextField");
+Object.defineProperty(exports, "PriceTextField", { enumerable: true, get: function () { return PriceTextField_1.PriceTextField; } });
+var PriceTextLabel_1 = require("./PriceTextLabel");
+Object.defineProperty(exports, "PriceTextLabel", { enumerable: true, get: function () { return PriceTextLabel_1.PriceTextLabel; } });
 var Radio_1 = require("./Radio");
 Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_1.Radio; } });
 var ReactionButton_1 = require("./ReactionButton");
 Object.defineProperty(exports, "ReactionButton", { enumerable: true, get: function () { return ReactionButton_1.ReactionButton; } });
+var RichTextEditor_1 = require("./RichTextEditor");
+Object.defineProperty(exports, "RichTextEditor", { enumerable: true, get: function () { return RichTextEditor_1.RichTextEditor; } });
 var SegmentedButtonGroup_1 = require("./SegmentedButtonGroup");
 Object.defineProperty(exports, "SegmentedButtonGroup", { enumerable: true, get: function () { return SegmentedButtonGroup_1.SegmentedButtonGroup; } });
 var Select_1 = require("./Select");
 Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
 var Slider_1 = require("./Slider");
 Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
+var Snackbar_1 = require("./Snackbar");
+Object.defineProperty(exports, "Snackbar", { enumerable: true, get: function () { return Snackbar_1.Snackbar; } });
 var StatusBlock_1 = require("./StatusBlock");
 Object.defineProperty(exports, "StatusBlock", { enumerable: true, get: function () { return StatusBlock_1.StatusBlock; } });
 var TextButton_1 = require("./TextButton");

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

@@ -8,5 +8,5 @@ export { ContainersBox as WSContainersBox } from './layout/LayoutWS/ContainersBo
 export { LayoutWT } from './layout/LayoutWT';
 export { GlobalMenuContainer as WTGlobalMenuContainer } from './layout/LayoutWT/Containers';
 export { ContainersBox as WTContainersBox } from './layout/LayoutWT/ContainersBox';
-export { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicButtonGroup as D_BasicButtonGroup, 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, LottieReactionButton as D_LottieReactionButton, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, SegmentedButtonGroup as D_SegmentedButtonGroup, Select as D_Select, Slider as D_Slider, 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 { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicButtonGroup as D_BasicButtonGroup, BasicChatListItem as D_BasicChatListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, BoxItem as D_BoxItem, 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, LottieReactionButton as D_LottieReactionButton, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, RichTextEditor as D_RichTextEditor, SegmentedButtonGroup as D_SegmentedButtonGroup, Select as D_Select, Slider as D_Slider, Snackbar as D_Snackbar, StatusBlock as D_StatusBlock, TextButton as D_TextButton, PriceTextField as D_PriceTextField, TextField as D_TextField, TextLabel as D_TextLabel, PriceTextLabel as D_PriceTextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab, Calendar as D_Calendar } from './components';
 export { AnnotationSheet as D_AnnotationSheet, ContentSheet as D_ContentSheet, DesktopBasicModal as D_DesktopBasicModal, DesktopBasicModalWithTab as D_DesktopBasicModalWithTab, DesktopBasicModalWithTabInfoType, DesktopHeadlessModal as D_DesktopHeadlessModal, DesktopTutorialModal as D_DesktopTutorialModal, DesktopTutorialModalInfoType, SectionSheet as D_SectionSheet } from './panels';

package/dist/src/desktop/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.D_StatusBlock = exports.D_Slider = exports.D_Select = exports.D_SegmentedButtonGroup = exports.D_ReactionButton = 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_BasicButtonGroup = 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_DesktopTutorialModal = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModalWithTab = 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 = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = void 0;
+exports.D_Select = exports.D_SegmentedButtonGroup = exports.D_RichTextEditor = exports.D_ReactionButton = 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_BoxItem = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_BasicButtonGroup = 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_DesktopTutorialModal = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModalWithTab = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_Calendar = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_PriceTextLabel = exports.D_TextLabel = exports.D_TextField = exports.D_PriceTextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Snackbar = exports.D_Slider = void 0;
 // layoutWF
 var LayoutWF_1 = require("./layout/LayoutWF");
 Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
@@ -38,6 +38,7 @@ Object.defineProperty(exports, "D_BasicList", { enumerable: true, get: function
 Object.defineProperty(exports, "D_BasicListItem", { enumerable: true, get: function () { return components_1.BasicListItem; } });
 Object.defineProperty(exports, "D_BlogTextField", { enumerable: true, get: function () { return components_1.BlogTextField; } });
 Object.defineProperty(exports, "D_BodyTextGroup", { enumerable: true, get: function () { return components_1.BodyTextGroup; } });
+Object.defineProperty(exports, "D_BoxItem", { enumerable: true, get: function () { return components_1.BoxItem; } });
 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; } });
@@ -64,19 +65,24 @@ Object.defineProperty(exports, "D_MainButton", { enumerable: true, get: function
 Object.defineProperty(exports, "D_PageTitleTextGroup", { enumerable: true, get: function () { return components_1.PageTitleTextGroup; } });
 Object.defineProperty(exports, "D_Radio", { enumerable: true, get: function () { return components_1.Radio; } });
 Object.defineProperty(exports, "D_ReactionButton", { enumerable: true, get: function () { return components_1.ReactionButton; } });
+Object.defineProperty(exports, "D_RichTextEditor", { enumerable: true, get: function () { return components_1.RichTextEditor; } });
 Object.defineProperty(exports, "D_SegmentedButtonGroup", { enumerable: true, get: function () { return components_1.SegmentedButtonGroup; } });
 Object.defineProperty(exports, "D_Select", { enumerable: true, get: function () { return components_1.Select; } });
 Object.defineProperty(exports, "D_Slider", { enumerable: true, get: function () { return components_1.Slider; } });
+Object.defineProperty(exports, "D_Snackbar", { enumerable: true, get: function () { return components_1.Snackbar; } });
 Object.defineProperty(exports, "D_StatusBlock", { enumerable: true, get: function () { return components_1.StatusBlock; } });
 Object.defineProperty(exports, "D_TextButton", { enumerable: true, get: function () { return components_1.TextButton; } });
+Object.defineProperty(exports, "D_PriceTextField", { enumerable: true, get: function () { return components_1.PriceTextField; } });
 Object.defineProperty(exports, "D_TextField", { enumerable: true, get: function () { return components_1.TextField; } });
 Object.defineProperty(exports, "D_TextLabel", { enumerable: true, get: function () { return components_1.TextLabel; } });
+Object.defineProperty(exports, "D_PriceTextLabel", { enumerable: true, get: function () { return components_1.PriceTextLabel; } });
 Object.defineProperty(exports, "D_UploadIconButton", { enumerable: true, get: function () { return components_1.UploadIconButton; } });
 Object.defineProperty(exports, "D_UploadMainButton", { enumerable: true, get: function () { return components_1.UploadMainButton; } });
 Object.defineProperty(exports, "D_UploadTextButton", { enumerable: true, get: function () { return components_1.UploadTextButton; } });
 Object.defineProperty(exports, "D_UserDesktopNavBar", { enumerable: true, get: function () { return components_1.UserDesktopNavBar; } });
 Object.defineProperty(exports, "D_UserDesktopTabBar", { enumerable: true, get: function () { return components_1.UserDesktopTabBar; } });
 Object.defineProperty(exports, "D_UserDesktopSideTab", { enumerable: true, get: function () { return components_1.UserDesktopSideTab; } });
+Object.defineProperty(exports, "D_Calendar", { enumerable: true, get: function () { return components_1.Calendar; } });
 // panels
 var panels_1 = require("./panels");
 Object.defineProperty(exports, "D_AnnotationSheet", { enumerable: true, get: function () { return panels_1.AnnotationSheet; } });

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.js

@@ -93,7 +93,7 @@ var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_11 ||
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
     return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
 });
-var S_ContentsContainer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  width: 864px;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  width: 864px;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  scrollbar-width: auto !important;\n  ", ";\n  ", ";\n  width: 864px;\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  scrollbar-width: auto !important;\n  ", ";\n  ", ";\n  width: 864px;\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_wizard_contentscontainer01_background;
 }, function (_a) {

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFB.js

@@ -50,7 +50,7 @@ var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
     return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
 });
-var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  width: 864px;\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  width: 864px;\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  scrollbar-width: auto !important;\n  width: 864px;\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  scrollbar-width: auto !important;\n  width: 864px;\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_wizard_contentscontainer01_background;
 }, function (_a) {

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFE.js

@@ -60,7 +60,7 @@ var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_11 ||
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
     return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
 });
-var S_ContentsContainer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  scrollbar-width: auto !important;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  scrollbar-width: auto !important;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_wizard_contentscontainer01_background;
 }, function (_a) {

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFL.js

@@ -61,7 +61,7 @@ var WFL_4Area2Style = (0, styled_components_1.css)(templateObject_12 || (templat
 var WFL_1Content2Style = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
 var WFL_2Content2Style = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
 var S_Box = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n"], ["\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n"])));
-var S_ContentsContainer1 = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 24px 0 0 24px;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 480px;\n\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 24px 0 0 24px;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 480px;\n\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+var S_ContentsContainer1 = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 24px 0 0 24px;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  scrollbar-width: auto !important;\n\n  ", ";\n  ", ";\n\n  width: 480px;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 24px 0 0 24px;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  scrollbar-width: auto !important;\n\n  ", ";\n  ", ";\n\n  width: 480px;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_wizard_contentscontainer01_background;
 }, function (_a) {
@@ -75,8 +75,8 @@ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_16 ||
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: ".concat(containerColor);
-}, scrollbarStyle_1.scrollbarStyle);
-var S_ContentsContainer2 = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 0 24px 24px 0;\n  width: 672px;\n\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  border-radius: 0 24px 24px 0;\n  width: 672px;\n\n  ", ";\n  ", ";\n"])), function (_a) {
+}, scrollbarStyle_1.scrollbarWithPaddingStyle);
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 0 24px 24px 0;\n\n  scrollbar-width: auto !important;\n\n  ", ";\n  ", ";\n\n  width: 672px;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 0 24px 24px 0;\n\n  scrollbar-width: auto !important;\n\n  ", ";\n  ", ";\n\n  width: 672px;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_wizard_contentscontainer02_background;
 }, function (_a) {
@@ -90,12 +90,15 @@ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_17 ||
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: ".concat(containerColor);
-});
+}, scrollbarStyle_1.scrollbarWithPaddingStyle);
 var S_ContentsArea1 = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 64px;\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 64px;\n\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: ".concat(areaColor);
 });
-var S_ContentsArea2 = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  box-sizing: border-box;\n\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_ContentsArea2 = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-left: ", ";\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-left: ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+}, function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WFL_1: WFL_1Area2Style,

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

@@ -3,7 +3,7 @@ import type { UiColors } from '../../../../../common';
 export type ContentsContainerProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'WSA_1' | 'WSB_1' | 'WSB_2' | 'WSC_1' | 'WSD_1' | 'WSE_1' | 'WSF_1' | 'WSF_2' | 'WSF_3' | 'WSF_4' | 'WSF_5' | 'WSF_6' | 'WSF_7' | 'WSG_1' | 'WSG_2' | 'WSG_3' | 'WSG_4' | 'WSG_5' | 'WSH_1' | 'WSI_1' | 'WSJ_1';
+    layoutType: 'WSA_1' | 'WSB_1' | 'WSB_2' | 'WSC_1' | 'WSD_1' | 'WSE_1' | 'WSF_1' | 'WSF_2' | 'WSF_3' | 'WSF_4' | 'WSF_5' | 'WSF_6' | 'WSF_7' | 'WSG_1' | 'WSG_2' | 'WSG_3' | 'WSG_4' | 'WSG_5' | 'WSH_1' | 'WSI_1' | 'WSI_2' | 'WSJ_1';
     containerColor?: string;
     areaColor?: string;
     isLoadingContainer1?: boolean;

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

@@ -25,6 +25,7 @@ var ContentsContainer = function (_a) {
             WSG_5: ((0, jsx_runtime_1.jsx)(variation_1.WSG, { layoutType: "WSG_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
             WSH_1: ((0, jsx_runtime_1.jsx)(variation_1.WSH, { layoutType: "WSH_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
             WSI_1: ((0, jsx_runtime_1.jsx)(variation_1.WSI, { layoutType: "WSI_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
+            WSI_2: ((0, jsx_runtime_1.jsx)(variation_1.WSI, { layoutType: "WSI_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
             WSJ_1: ((0, jsx_runtime_1.jsx)(variation_1.WSJ, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }))
         }[layoutType] }));
 };

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSI.d.ts

@@ -3,7 +3,7 @@ import type { UiColors } from '../../../../../../common';
 export type WSIProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'WSI_1';
+    layoutType: 'WSI_1' | 'WSI_2';
     containerColor?: string;
     areaColor?: string;
     isLoadingContainer1?: boolean;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSI.js

@@ -56,20 +56,23 @@ var overrideStyleContainer2 = (0, styled_components_1.css)(templateObject_2 || (
 });
 var S_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
 var WSI_1Container1Style = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 720px;\n"], ["\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 720px;\n"])));
-var S_ContentsContainer1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
+var WSI_2Container1Style = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 720px;\n"], ["\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 720px;\n"])));
+var S_ContentsContainer1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer01_background;
 }, function (_a) {
     var layoutType = _a.layoutType;
     return ({
-        WSI_1: WSI_1Container1Style
+        WSI_1: WSI_1Container1Style,
+        WSI_2: WSI_2Container1Style
     }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: ".concat(containerColor);
 }, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer1);
-var WSI_1Container2Style = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex: 1;\n  height: 100%;\n"], ["\n  flex: 1;\n  height: 100%;\n"])));
-var S_ContentsContainer2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
+var WSI_1Container2Style = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex: 1;\n  height: 100%;\n"], ["\n  flex: 1;\n  height: 100%;\n"])));
+var WSI_2Container2Style = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  flex: 1;\n  height: 100%;\n"], ["\n  flex: 1;\n  height: 100%;\n"])));
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer02_background;
 }, function (_a) {
@@ -78,44 +81,52 @@ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_7 || (
 }, function (_a) {
     var layoutType = _a.layoutType;
     return ({
-        WSI_1: WSI_1Container2Style
+        WSI_1: WSI_1Container2Style,
+        WSI_2: WSI_2Container2Style
     }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: ".concat(containerColor);
 }, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer2);
-var WSI_1Area1Style = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding-bottom: 88px;\n  padding-left: 24px;\n  padding-right: 24px;\n"], ["\n  padding-bottom: 88px;\n  padding-left: 24px;\n  padding-right: 24px;\n"])));
-var S_ContentsArea1 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n  ", ";\n"])), function (_a) {
+var WSI_1Area1Style = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  padding-bottom: 88px;\n  padding-left: 24px;\n  padding-right: 24px;\n"], ["\n  padding-bottom: 88px;\n  padding-left: 24px;\n  padding-right: 24px;\n"])));
+var WSI_2Area1Style = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  padding-bottom: 88px;\n  padding-left: 24px;\n  padding-right: 24px;\n"], ["\n  padding-bottom: 88px;\n  padding-left: 24px;\n  padding-right: 24px;\n"])));
+var S_ContentsArea1 = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
-        WSI_1: WSI_1Area1Style
+        WSI_1: WSI_1Area1Style,
+        WSI_2: WSI_2Area1Style
     }[layoutType]);
 }, function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: ".concat(areaColor);
 });
-var WSI_1Area2Style = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  height: 100%;\n  padding-top: 24px;\n  width: 240px;\n"], ["\n  height: 100%;\n  padding-top: 24px;\n  width: 240px;\n"])));
-var S_ContentsArea2 = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"])), function (_a) {
+var WSI_1Area2Style = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  height: 100%;\n  padding-top: 24px;\n  width: 240px;\n"], ["\n  height: 100%;\n  padding-top: 24px;\n  width: 240px;\n"])));
+var WSI_2Area2Style = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  height: 100%;\n  padding-top: 24px;\n  width: 360px;\n"], ["\n  height: 100%;\n  padding-top: 24px;\n  width: 360px;\n"])));
+var S_ContentsArea2 = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
-        WSI_1: WSI_1Area2Style
+        WSI_1: WSI_1Area2Style,
+        WSI_2: WSI_2Area2Style
     }[layoutType]);
 }, function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: ".concat(areaColor);
 });
-var S_Content1 = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var S_Content1 = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
-        WSI_1: ''
+        WSI_1: '',
+        WSI_2: ''
     }[layoutType]);
 });
-var WSI_1Content2Style = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
-var S_Content2 = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var WSI_1Content2Style = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var WSI_2Content2Style = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_Content2 = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
-        WSI_1: WSI_1Content2Style
+        WSI_1: WSI_1Content2Style,
+        WSI_2: WSI_2Content2Style
     }[layoutType]);
 });
 exports.default = WSI;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSJ.js

@@ -50,14 +50,14 @@ var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
     return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
 });
-var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  ", ";\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer01_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: ".concat(containerColor);
 }, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer1);
-var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  min-width: 912px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  min-width: 912px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  min-width: 912px;\n  padding-bottom: 88px;\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  min-width: 912px;\n  padding-bottom: 88px;\n\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: ".concat(areaColor);
 });

package/dist/src/desktop/layout/LayoutWS/ContainersBox/ContainersBox.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { UiColors } from '../../../../common';
 export type ContainersBoxProps = {
-    layoutType: 'WSA_1' | 'WSB_1' | 'WSB_2' | 'WSC_1' | 'WSD_1' | 'WSE_1' | 'WSF_1' | 'WSF_2' | 'WSF_3' | 'WSF_4' | 'WSF_5' | 'WSF_6' | 'WSF_7' | 'WSG_1' | 'WSG_2' | 'WSG_3' | 'WSG_4' | 'WSG_5' | 'WSH_1' | 'WSI_1' | 'WSJ_1';
+    layoutType: 'WSA_1' | 'WSB_1' | 'WSB_2' | 'WSC_1' | 'WSD_1' | 'WSE_1' | 'WSF_1' | 'WSF_2' | 'WSF_3' | 'WSF_4' | 'WSF_5' | 'WSF_6' | 'WSF_7' | 'WSG_1' | 'WSG_2' | 'WSG_3' | 'WSG_4' | 'WSG_5' | 'WSH_1' | 'WSI_1' | 'WSI_2' | 'WSJ_1';
     pageMenuContent?: JSX.Element;
     tabMenuContent?: JSX.Element;
     content1?: JSX.Element;

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

@@ -98,7 +98,7 @@ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (
     var containerColor = _a.containerColor;
     return "background-color: ".concat(containerColor);
 }, overrideStyleContainer2);
-var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  max-width: 480px;\n  padding-bottom: 88px;\n  padding-left: 24px;\n  padding-right: 24px;\n  width: 480px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  max-width: 480px;\n  padding-bottom: 88px;\n  padding-left: 24px;\n  padding-right: 24px;\n  width: 480px;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  max-width: 480px;\n  width: 480px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  max-width: 480px;\n  width: 480px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: ".concat(areaColor);
 });
@@ -106,7 +106,7 @@ var S_ContentsArea2 = styled_components_1.default.div(templateObject_7 || (templ
     var areaColor = _a.areaColor;
     return "background-color: ".concat(areaColor);
 });
-var S_Content1 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
 var S_Content2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
 exports.default = WTU;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/src/desktop/panels/DesktopBasicModal/DesktopBasicModal.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
 import type { PDSTextType } from '../../../common';
 type DesktopBasicModalProps = {
     titleText: PDSTextType;
@@ -16,7 +17,7 @@ type DesktopBasicModalProps = {
     mBtn2Type?: 'button' | 'submit';
     mBtn3Type?: 'button' | 'submit';
     size?: 'large' | 'medium' | 'small' | 'rlarge';
-    scrollVisibleType?: 'hidden' | 'visible';
+    scrollVisibleType?: ScrollVisibleType;
     onClickMBtn1?: () => void;
     onClickMBtn2?: () => void;
     onClickMBtn3?: () => void;