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

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

@@ -72,15 +72,15 @@ function TextButton(_a) {
         }
     };
     return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, colorTheme: colorTheme }),
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use" })));
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
 }
-var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n"])), function (_a) {
+var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var size = _a.size;
     return size === 'rlarge' && 'width: 100%';
 });
-var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n"], ["\n  border-radius: 14px;\n  height: 40px;\n"])));
-var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n"], ["\n  border-radius: 10px;\n  height: 32px;\n"])));
-var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 24px;\n"], ["\n  border-radius: 8px;\n  height: 24px;\n"])));
+var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])));
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
+var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])));
 var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"])), function (_a) {
     var state = _a.state;
     return (state === 'normal' ? 'pointer' : 'default');

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

@@ -27,6 +27,7 @@ export declare type TextFieldProps = {
     max?: number;
     maxLength?: number;
     min?: number;
+    customWidth?: string;
     onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     onClickIBtn1?: () => void;
@@ -35,5 +36,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, 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, 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, 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, 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',
@@ -115,11 +115,11 @@ function TextField(_a) {
                             }[colorTheme], iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 })))));
         }
     };
-    return (react_1.default.createElement(S_TextFieldBox, { size: size, responsiveMode: responsiveMode },
-        react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme }, S_TextField()),
+    return (react_1.default.createElement(S_TextFieldBox, { size: size, responsiveMode: responsiveMode, customWidth: customWidth },
+        react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme, customWidth: customWidth }, S_TextField()),
         ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, errors[name].message)));
 }
-var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
@@ -131,6 +131,9 @@ var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templa
 }, function (_a) {
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
+}, function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth && "width: " + customWidth + ";";
 });
 var multi = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: auto;\n  padding: 14px;\n"], ["\n  height: auto;\n  padding: 14px;\n"])));
 var auto = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: auto;\n  padding-bottom: ", "px;\n  padding-top: ", "px;\n"], ["\n  height: auto;\n  padding-bottom: ", "px;\n  padding-top: ", "px;\n"])), function (_a) {
@@ -224,7 +227,7 @@ var dark_disabled = (0, styled_components_1.css)(templateObject_12 || (templateO
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_border_darktheme_normal;
 });
-var S_TextFieldWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_TextFieldWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n"], ["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var state = _a.state;
     return (state === 'disabled' ? 'not-allowed' : 'text');
 }, function (_a) {
@@ -257,6 +260,9 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_13 || (t
 }, function (_a) {
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
+}, function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth && "width: " + customWidth + ";";
 });
 var S_IconBox = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var S_Error = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"])), function (_a) {

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

@@ -84,12 +84,12 @@ function UploadMainButton(_a) {
         size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
             react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor() }),
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
         size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
             react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
 }
-var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  min-width: 96px;\n  padding: 0 ", ";\n  ", "\n  ", ";\n"], ["\n  height: 48px;\n  min-width: 96px;\n  padding: 0 ", ";\n  ", "\n  ", ";\n"])), function (_a) {
+var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  min-width: 96px;\n  padding: 0 ", ";\n  ", "\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  height: 48px;\n  min-width: 96px;\n  padding: 0 ", ";\n  ", "\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 }, function (_a) {
@@ -99,21 +99,21 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
     var size = _a.size;
     return size === 'rlarge' && 'width: 100%';
 });
-var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n  min-width: 64px;\n  padding: 0 ", ";\n  ", "\n"], ["\n  height: 40px;\n  min-width: 64px;\n  padding: 0 ", ";\n  ", "\n"])), function (_a) {
+var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n  min-width: 64px;\n  padding: 0 ", ";\n  ", "\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  height: 40px;\n  min-width: 64px;\n  padding: 0 ", ";\n  ", "\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 }, function (_a) {
     var shapeType = _a.shapeType;
     return shapeType === 'round' && 'border-radius: 14px;';
 });
-var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n"], ["\n  height: 32px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n"])), function (_a) {
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  height: 32px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 }, function (_a) {
     var shapeType = _a.shapeType;
     return shapeType === 'round' && 'border-radius: 10px;';
 });
-var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 24px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n"], ["\n  height: 24px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n"])), function (_a) {
+var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 24px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  height: 24px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 }, function (_a) {
@@ -193,7 +193,7 @@ var primaryDisabled = (0, styled_components_1.css)(templateObject_13 || (templat
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_disabled;
 });
-var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
+var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n\n  &:hover:not([disabled]) {\n    ", "\n  }\n\n  &:active:not([disabled]) {\n    ", "\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n\n  &:hover:not([disabled]) {\n    ", "\n  }\n\n  &:active:not([disabled]) {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
@@ -210,7 +210,7 @@ var secondaryDisabled = (0, styled_components_1.css)(templateObject_15 || (templ
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
 });
-var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
+var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n\n  &:hover:not([disabled]) {\n    ", "\n  }\n\n  &:active:not([disabled]) {\n    ", "\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n\n  &:hover:not([disabled]) {\n    ", "\n  }\n\n  &:active:not([disabled]) {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
 }, function (_a) {

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

@@ -51,15 +51,15 @@ function UploadTextButton(_a) {
     };
     return (react_1.default.createElement(S_UploadTextButton, { size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled' },
         react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use" })));
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
 }
-var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  width: ", ";\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  width: ", ";\n"])), function (_a) {
+var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  width: ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  width: ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var size = _a.size;
     return size === 'rlarge' && '100%';
 });
-var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n"], ["\n  border-radius: 14px;\n  height: 40px;\n"])));
-var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n"], ["\n  border-radius: 10px;\n  height: 32px;\n"])));
-var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 24px;\n"], ["\n  border-radius: 8px;\n  height: 24px;\n"])));
+var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])));
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
+var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])));
 var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'default' : 'pointer');

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

@@ -1,6 +1,7 @@
 import { AdminList } from './AdminList';
 import { AdminListHeader } from './AdminListHeader';
 import { AdminListItem } from './AdminListItem';
+import { BasicChatListItem } from './BasicChatListItem';
 import { BasicFormGroup } from './BasicFormGroup';
 import { BasicList } from './BasicList';
 import { BasicListItem } from './BasicListItem';
@@ -8,6 +9,7 @@ import { BlogTextField } from './BlogTextField';
 import { BodyTextGroup } from './BodyTextGroup';
 import { Card } from './Card';
 import { CardList } from './CardList';
+import { ChatList } from './ChatList';
 import { Checkbox } from './Checkbox';
 import { Chip } from './Chip';
 import { ContextMenu } from './ContextMenu';
@@ -39,4 +41,4 @@ import { UploadTextButton } from './UploadTextButton';
 import { UserDesktopNavBar } from './UserDesktopNavBar';
 import { UserDesktopSideTab } from './UserDesktopSideTab';
 import { UserDesktopTabBar } from './UserDesktopTabBar';
-export { AdminList, AdminListHeader, AdminListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, 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, 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,12 +1,14 @@
 "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.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = 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.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");
 Object.defineProperty(exports, "AdminListHeader", { enumerable: true, get: function () { return AdminListHeader_1.AdminListHeader; } });
 var AdminListItem_1 = require("./AdminListItem");
 Object.defineProperty(exports, "AdminListItem", { enumerable: true, get: function () { return AdminListItem_1.AdminListItem; } });
+var BasicChatListItem_1 = require("./BasicChatListItem");
+Object.defineProperty(exports, "BasicChatListItem", { enumerable: true, get: function () { return BasicChatListItem_1.BasicChatListItem; } });
 var BasicFormGroup_1 = require("./BasicFormGroup");
 Object.defineProperty(exports, "BasicFormGroup", { enumerable: true, get: function () { return BasicFormGroup_1.BasicFormGroup; } });
 var BasicList_1 = require("./BasicList");
@@ -21,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 ChatList_1 = require("./ChatList");
+Object.defineProperty(exports, "ChatList", { enumerable: true, get: function () { return ChatList_1.ChatList; } });
 var Checkbox_1 = require("./Checkbox");
 Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
 var Chip_1 = require("./Chip");

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, 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, 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_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, 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, 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 { 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_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 = 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_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = 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 = void 0;
+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;
 // layoutWF
 var LayoutWF_1 = require("./layout/LayoutWF");
 Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
@@ -28,6 +28,7 @@ var components_1 = require("./components");
 Object.defineProperty(exports, "D_AdminList", { enumerable: true, get: function () { return components_1.AdminList; } });
 Object.defineProperty(exports, "D_AdminListHeader", { enumerable: true, get: function () { return components_1.AdminListHeader; } });
 Object.defineProperty(exports, "D_AdminListItem", { enumerable: true, get: function () { return components_1.AdminListItem; } });
+Object.defineProperty(exports, "D_BasicChatListItem", { enumerable: true, get: function () { return components_1.BasicChatListItem; } });
 Object.defineProperty(exports, "D_BasicFormGroup", { enumerable: true, get: function () { return components_1.BasicFormGroup; } });
 Object.defineProperty(exports, "D_BasicList", { enumerable: true, get: function () { return components_1.BasicList; } });
 Object.defineProperty(exports, "D_BasicListItem", { enumerable: true, get: function () { return components_1.BasicListItem; } });
@@ -35,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_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; } });
 Object.defineProperty(exports, "D_ContextMenu", { enumerable: true, get: function () { return components_1.ContextMenu; } });

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

@@ -3,7 +3,7 @@ export declare type ContentsContainerProps = {
     stepContent?: JSX.Element;
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'WFA_1' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1';
+    layoutType: 'WFA_1' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFE_2' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1';
     containerColor?: string;
     areaColor?: string;
 };

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

@@ -13,7 +13,8 @@ var ContentsContainer = function (_a) {
         WFC_1: react_1.default.createElement(variation_1.WFC, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
         WFD_1: (react_1.default.createElement(variation_1.WFD, { layoutType: "WFD_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WFD_2: (react_1.default.createElement(variation_1.WFD, { layoutType: "WFD_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WFE_1: (react_1.default.createElement(variation_1.WFE, { stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor })),
+        WFE_1: (react_1.default.createElement(variation_1.WFE, { layoutType: "WFE_1", stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor })),
+        WFE_2: (react_1.default.createElement(variation_1.WFE, { layoutType: "WFE_2", stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WFF_1: react_1.default.createElement(variation_1.WFF, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
         WFG_1: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
         WFG_2: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),

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

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 export declare type WFEProps = {
+    layoutType: 'WFE_1' | 'WFE_2';
     stepContent?: JSX.Element;
     content1?: JSX.Element;
     containerColor?: string;
     areaColor?: string;
 };
-declare const WFE: ({ stepContent, content1, containerColor, areaColor }: WFEProps) => JSX.Element;
+declare const WFE: ({ layoutType, stepContent, content1, containerColor, areaColor }: WFEProps) => JSX.Element;
 export default WFE;

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

@@ -10,29 +10,59 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var WFE = function (_a) {
-    var stepContent = _a.stepContent, content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor },
-        react_1.default.createElement(S_SideArea, { areaColor: areaColor },
-            react_1.default.createElement(S_StepContent, null, stepContent)),
-        react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-            react_1.default.createElement(S_Content1, null, content1))));
+    var layoutType = _a.layoutType, stepContent = _a.stepContent, content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor },
+        react_1.default.createElement(S_SideArea, { layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_StepContent, { layoutType: layoutType }, stepContent)),
+        react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  min-width: 1200px;\n  ", ";\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  min-width: 1200px;\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer01_background;
+}, function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WFE_1: 'height: 100%;',
+        WFE_2: 'overflow-x: hidden;overflow-y: auto;height: 100%;'
+    }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_SideArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 240px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 240px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n"])), function (_a) {
+var S_SideArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  min-width: 240px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  min-width: 240px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WFE_1: 'height: 100%;',
+        WFE_2: ''
+    }[layoutType]);
+}, function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_StepContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
-var S_ContentsArea = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  max-width: 1680px;\n  min-width: 960px;\n  width: 100%;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  max-width: 1680px;\n  min-width: 960px;\n  width: 100%;\n  ", ";\n"])), function (_a) {
+var S_StepContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WFE_1: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
+        WFE_2: ''
+    }[layoutType]);
+});
+var S_ContentsArea = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  max-width: 1680px;\n  min-width: 960px;\n  width: 100%;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  max-width: 1680px;\n  min-width: 960px;\n  width: 100%;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WFE_1: 'height: 100%;',
+        WFE_2: ''
+    }[layoutType]);
+}, function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WFE_1: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
+        WFE_2: ''
+    }[layoutType]);
+});
 exports.default = WFE;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare type ContainersBoxProps = {
-    layoutType: 'WFA_1' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1';
+    layoutType: 'WFA_1' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFE_2' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1';
     pageMenuContent?: JSX.Element;
     subMenuContent?: JSX.Element;
     tabMenuContent?: JSX.Element;

package/dist/src/desktop/layout/LayoutWF/ContainersBox/ContainersBox.js

@@ -23,6 +23,7 @@ var ContainersBox = function (_a) {
                 WFD_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WFD_2: react_1.default.createElement(react_1.default.Fragment, null),
                 WFE_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WFE_2: react_1.default.createElement(react_1.default.Fragment, null),
                 WFF_1: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
                 WFG_1: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
                 WFG_2: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
@@ -48,6 +49,7 @@ var ContainersBox = function (_a) {
                     WFD_1: react_1.default.createElement(react_1.default.Fragment, null),
                     WFD_2: react_1.default.createElement(react_1.default.Fragment, null),
                     WFE_1: react_1.default.createElement(react_1.default.Fragment, null),
+                    WFE_2: react_1.default.createElement(react_1.default.Fragment, null),
                     WFF_1: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
                     WFG_1: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
                     WFG_2: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),

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

@@ -2,7 +2,7 @@
 export declare type ContentsContainerProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'WSA_1' | 'WSB_1' | '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';
+    layoutType: 'WSA_1' | 'WSB_1' | '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';
     containerColor?: string;
     areaColor?: string;
 };

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

@@ -23,7 +23,8 @@ var ContentsContainer = function (_a) {
         WSG_1: (react_1.default.createElement(variation_1.WSG, { layoutType: "WSG_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
         WSG_2: (react_1.default.createElement(variation_1.WSG, { layoutType: "WSG_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
         WSG_3: (react_1.default.createElement(variation_1.WSG, { layoutType: "WSG_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WSG_4: (react_1.default.createElement(variation_1.WSG, { layoutType: "WSG_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor }))
+        WSG_4: (react_1.default.createElement(variation_1.WSG, { layoutType: "WSG_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WSG_5: (react_1.default.createElement(variation_1.WSG, { layoutType: "WSG_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor }))
     }[layoutType]));
 };
 exports.default = ContentsContainer;

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

@@ -2,7 +2,7 @@
 export declare type WSGProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'WSG_1' | 'WSG_2' | 'WSG_3' | 'WSG_4';
+    layoutType: 'WSG_1' | 'WSG_2' | 'WSG_3' | 'WSG_4' | 'WSG_5';
     containerColor?: string;
     areaColor?: string;
 };

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

@@ -29,7 +29,8 @@ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (
         WSG_1: 'height: 100%;',
         WSG_2: 'overflow-x: hidden;overflow-y: auto;',
         WSG_3: 'overflow-x: hidden;overflow-y: auto;',
-        WSG_4: 'overflow-x: hidden;overflow-y: auto;width: 480px'
+        WSG_4: 'overflow-x: hidden;overflow-y: auto;width: 480px',
+        WSG_5: 'overflow-x: hidden;overflow-y: auto;width: 480px'
     }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
@@ -47,7 +48,8 @@ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (
         WSG_1: 'height: 100%;',
         WSG_2: 'overflow-x: hidden;overflow-y: auto;',
         WSG_3: 'height: 100%;',
-        WSG_4: 'height: 100%; flex: 1'
+        WSG_4: 'height: 100%; flex: 1',
+        WSG_5: 'height: 100%; flex: 1'
     }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
@@ -59,19 +61,21 @@ var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templ
         WSG_1: 'height: 100%;',
         WSG_2: 'padding-left: 24px;padding-right: 24px;padding-bottom: 88px;',
         WSG_3: 'padding-left: 24px;padding-right: 24px;padding-bottom: 88px;',
-        WSG_4: 'padding-left: 24px;padding-right: 24px;padding-bottom: 88px;'
+        WSG_4: 'padding-left: 24px;padding-right: 24px;padding-bottom: 88px;',
+        WSG_5: 'padding-left: 24px;padding-right: 24px;padding-bottom: 88px;'
     }[layoutType]);
 }, function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __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 S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
-        WSG_1: 'height: 100%;',
-        WSG_2: 'padding-left: 24px;padding-right: 24px;padding-bottom: 88px;',
-        WSG_3: 'height: 100%;',
-        WSG_4: 'height: 100%;'
+        WSG_1: 'height: 100%;padding-top: 24px;',
+        WSG_2: 'padding-left: 24px;padding-right: 24px;padding-bottom: 88px;padding-top: 24px;',
+        WSG_3: 'height: 100%;padding-top: 24px;',
+        WSG_4: 'height: 100%;padding-top: 24px;',
+        WSG_5: 'height: 100%;'
     }[layoutType]);
 }, function (_a) {
     var areaColor = _a.areaColor;
@@ -83,7 +87,8 @@ var S_Content1 = styled_components_1.default.div(templateObject_6 || (templateOb
         WSG_1: 'height: 100%;overflow: hidden;',
         WSG_2: '',
         WSG_3: '',
-        WSG_4: ''
+        WSG_4: '',
+        WSG_5: ''
     }[layoutType]);
 });
 var S_Content2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
@@ -92,7 +97,8 @@ var S_Content2 = styled_components_1.default.div(templateObject_7 || (templateOb
         WSG_1: 'height: 100%;overflow: hidden;',
         WSG_2: '',
         WSG_3: 'height: 100%;overflow: hidden;',
-        WSG_4: 'height: 100%;overflow: hidden;'
+        WSG_4: 'height: 100%;overflow: hidden;',
+        WSG_5: 'height: 100%;overflow: hidden;'
     }[layoutType]);
 });
 exports.default = WSG;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare type ContainersBoxProps = {
-    layoutType: 'WSA_1' | 'WSB_1' | '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';
+    layoutType: 'WSA_1' | 'WSB_1' | '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';
     pageMenuContent?: JSX.Element;
     tabMenuContent?: JSX.Element;
     content1?: JSX.Element;

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';
+    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';
     containerColor?: string;
     areaColor?: string;
     container1Ref?: MutableRefObject<HTMLDivElement | null>;

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

@@ -42,11 +42,13 @@ var ContentsContainer = function (_a) {
         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 })),
-        WTO_1: (react_1.default.createElement(variation_1.WTO, { layoutType: "WTO_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTP_1: (react_1.default.createElement(variation_1.WTP, { layoutType: "WTP_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
+        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 }))
+        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 }))
     }[layoutType]));
 };
 exports.default = ContentsContainer;