pds-dev-kit-web 0.6.1 → 0.6.4

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

@@ -101,6 +101,7 @@ function EditApplyTextField(_a) {
     }
     var handleKeyUp = function (e) {
         if (textLineType === 'single' && e.key === 'Enter') {
+            e.preventDefault();
             e.target.blur();
             handleSubmit();
         }

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

@@ -59,11 +59,11 @@ function FloatingActionButton(_a) {
         displayType === 'icon_only' && (react_1.default.createElement(S_ButtonIconOnly, { size: size, fontWeight: fontWeight, colorTheme: colorTheme, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
             react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' ? 20 : 24, colorKey: iconColor(), fillType: iconFillType }))),
         displayType !== 'icon_only' && (react_1.default.createElement(S_Button, { size: size, fontWeight: fontWeight, colorTheme: colorTheme, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
-            displayType === 'text_only' && (react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "body1Bold", btnMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disabled' ? 'ui_cpnt_button_text_darktheme_disabled' : undefined })),
+            displayType === 'text_only' && (react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "body1Bold", singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disabled' ? 'ui_cpnt_button_text_darktheme_disabled' : undefined })),
             displayType === 'icon_text' && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: 20, colorKey: iconColor(), fillType: iconFillType }),
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "body1Bold", btnMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disabled' ? 'ui_cpnt_button_text_darktheme_disabled' : undefined })))))));
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "body1Bold", singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disabled' ? 'ui_cpnt_button_text_darktheme_disabled' : undefined })))))));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 24px;\n  height: 48px;\n  width: 48px;\n"], ["\n  border-radius: 24px;\n  height: 48px;\n  width: 48px;\n"])));
 var xlarge = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 32px;\n  height: 64px;\n  width: 64px;\n"], ["\n  border-radius: 32px;\n  height: 64px;\n  width: 64px;\n"])));

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

@@ -73,7 +73,9 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
 });
 var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
-    return baseColorKey ? common_1.uiColors[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
+    return baseColorKey
+        ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[baseColorKey]
+        : theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
     return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
@@ -100,7 +102,9 @@ var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
     return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
     var theme = _a.theme, borderColorKey = _a.borderColorKey;
-    return borderColorKey ? common_1.uiColors[borderColorKey] : theme.ui_cpnt_button_line_border_enabled;
+    return borderColorKey
+        ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[borderColorKey]
+        : theme.ui_cpnt_button_line_border_enabled;
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     switch (colorTheme) {

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

@@ -98,7 +98,7 @@ function MainButton(_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: textStyle[size], btnMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[fillType], colorOverride: selectTextThemeColor() }),
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[fillType], colorOverride: selectTextThemeColor() }),
         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 })))));

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

@@ -100,7 +100,7 @@ function ReactionButton(_a) {
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
         react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: convertFormatHelper(text), styleTheme: "body2Regular", btnMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })));
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: convertFormatHelper(text), styleTheme: "body2Regular", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })));
 }
 var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  cursor: 'pointer';\n  display: flex;\n  justify-content: center;\n  padding: 0;\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  cursor: 'pointer';\n  display: flex;\n  justify-content: center;\n  padding: 0;\n"])));
 var S_ReactionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ReactionButtonStyle);

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

@@ -37,7 +37,7 @@ function StatusBlock(_a) {
         small: 'body2Bold'
     };
     return (react_1.default.createElement(S_StatusBlock, { size: size, state: state, "$width": width },
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", btnMode: "use", colorTheme: "sysTextWhite" })));
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite" })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 48px;\n"], ["\n  border-radius: 8px;\n  height: 48px;\n"])));
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 40px;\n"], ["\n  border-radius: 8px;\n  height: 40px;\n"])));

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

@@ -68,7 +68,7 @@ function TextButton(_a) {
         xsmall: 'caption1Regular'
     };
     return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled' }),
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', btnMode: "use" })));
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', singleLineMode: "use" })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  ", ";\n"], ["\n  height: 48px;\n  ", ";\n"])), function (_a) {
     var size = _a.size;

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

@@ -10,7 +10,6 @@ export declare type TextLabelProps = {
     singleLineMode?: 'none' | 'use';
     ellipsisMode?: 'none' | 'use';
     lineLimit?: number;
-    btnMode?: 'none' | 'use';
 };
 export declare type TextStyleProps = {
     textAlign?: 'left' | 'center' | 'right';
@@ -21,7 +20,6 @@ export declare type TextStyleProps = {
     singleLineMode?: 'none' | 'use';
     ellipsisMode?: 'none' | 'use';
     lineLimit?: number;
-    btnMode?: 'none' | 'use';
 };
-declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, underline, singleLineMode, ellipsisMode, lineLimit, btnMode }: TextLabelProps): JSX.Element;
+declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, underline, singleLineMode, ellipsisMode, lineLimit }: TextLabelProps): JSX.Element;
 export default TextLabel;

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

@@ -30,8 +30,8 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var common_1 = require("../../../common");
 function TextLabel(_a) {
-    var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.underline, underline = _e === void 0 ? 'none' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit, _h = _a.btnMode, btnMode = _h === void 0 ? 'none' : _h;
-    return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, underline: underline, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, btnMode: btnMode }, text));
+    var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.underline, underline = _e === void 0 ? 'none' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit;
+    return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, underline: underline, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit }, text));
 }
 var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -245,13 +245,13 @@ var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_27 || (t
 });
 var colorOverrideStyle = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var colorOverride = _a.colorOverride;
-    return colorOverride && common_1.uiColors[colorOverride];
+    return colorOverride && (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[colorOverride];
 });
 var ellipsisStyle = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (_a) {
     var lineLimit = _a.lineLimit;
     return lineLimit;
 });
-var S_TextLabel = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: break-all;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: break-all;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TextLabel = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: break-all;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: break-all;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {
@@ -295,11 +295,10 @@ var S_TextLabel = styled_components_1.default.div(templateObject_30 || (template
             usrTextBrandOnPrimary: usrTextBrandOnPrimary
         }[colorTheme];
 }, function (_a) {
-    var singleLineMode = _a.singleLineMode, theme = _a.theme;
-    return singleLineMode === 'use' && "line-height: " + theme.desktopLineHeight.singleLine;
-}, function (_a) {
-    var btnMode = _a.btnMode, theme = _a.theme;
-    return btnMode === 'use' && "line-height: " + theme.desktopLineHeight.btn;
+    var singleLineMode = _a.singleLineMode, ellipsisMode = _a.ellipsisMode, theme = _a.theme;
+    return singleLineMode === 'use' &&
+        ellipsisMode === 'none' &&
+        "line-height: " + theme.desktopLineHeight.singleLine;
 }, function (_a) {
     var ellipsisMode = _a.ellipsisMode, lineLimit = _a.lineLimit;
     return ellipsisMode === 'use' && lineLimit && ellipsisStyle;

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

@@ -62,7 +62,9 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
 });
 var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    ", "\n  }\n\n  &:active:not([disabled]) {\n    background-image: ", ";\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    ", "\n  }\n\n  &:active:not([disabled]) {\n    background-image: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
-    return baseColorKey ? common_1.uiColors[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
+    return baseColorKey
+        ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[baseColorKey]
+        : theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
     return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
@@ -97,7 +99,9 @@ var line = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
     return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
     var theme = _a.theme, borderColorKey = _a.borderColorKey;
-    return borderColorKey ? common_1.uiColors[borderColorKey] : theme.ui_cpnt_button_line_border_enabled;
+    return borderColorKey
+        ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[borderColorKey]
+        : theme.ui_cpnt_button_line_border_enabled;
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     switch (colorTheme) {

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

@@ -64,7 +64,7 @@ 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], btnMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : types_1.textColors[fillType], colorOverride: selectTextThemeColor() }),
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : types_1.textColors[fillType], colorOverride: selectTextThemeColor() }),
         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 })))));

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

@@ -45,7 +45,7 @@ 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' : 'usrTextBrandPrimary', btnMode: "use" })));
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', singleLineMode: "use" })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  width: ", ";\n"], ["\n  height: 48px;\n  width: ", ";\n"])), function (_a) {
     var size = _a.size;

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

@@ -34,7 +34,7 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_4 || (templa
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex-grow: 1;\n  margin: 0;\n"], ["\n  flex-grow: 1;\n  margin: 0;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex-grow: 1;\n  margin: 0;\n  max-width: 720px;\n  min-width: 512px;\n"], ["\n  flex-grow: 1;\n  margin: 0;\n  max-width: 720px;\n  min-width: 512px;\n"])));
 var S_Content2 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-left: 24px;\n  width: 360px;\n"], ["\n  margin-left: 24px;\n  width: 360px;\n"])));
 exports.default = WFB;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -23,11 +23,11 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (t
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  min-width: 912px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  min-width: 912px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-grow: 1;\n  max-width: 720px;\n  min-width: 512px;\n"], ["\n  flex-grow: 1;\n  max-width: 720px;\n  min-width: 512px;\n"])));
 var S_Content2 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: 24px;\n  min-width: 360px;\n  width: 360px;\n"], ["\n  margin-left: 24px;\n  min-width: 360px;\n  width: 360px;\n"])));
 exports.default = WSE;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -2,7 +2,7 @@
 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' | 'WTI_1' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1';
+    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' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2';
     containerColor?: string;
     areaColor?: string;
 };

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

@@ -29,7 +29,8 @@ var ContentsContainer = function (_a) {
         WTG_1: react_1.default.createElement(variation_1.WTG, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
         WTH_1: (react_1.default.createElement(variation_1.WTH, { layoutType: "WTH_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WTH_2: (react_1.default.createElement(variation_1.WTH, { layoutType: "WTH_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTI_1: react_1.default.createElement(variation_1.WTI, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
+        WTI_1: (react_1.default.createElement(variation_1.WTI, { layoutType: "WTI_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
+        WTI_2: (react_1.default.createElement(variation_1.WTI, { layoutType: "WTI_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WTJ_1: (react_1.default.createElement(variation_1.WTJ, { content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
         WTK_1: (react_1.default.createElement(variation_1.WTK, { layoutType: "WTK_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WTK_2: (react_1.default.createElement(variation_1.WTK, { layoutType: "WTK_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
@@ -37,7 +38,8 @@ var ContentsContainer = function (_a) {
         WTL_1: react_1.default.createElement(variation_1.WTL, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
         WTM_1: (react_1.default.createElement(variation_1.WTM, { layoutType: "WTM_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WTM_2: (react_1.default.createElement(variation_1.WTM, { layoutType: "WTM_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTN_1: react_1.default.createElement(variation_1.WTN, { content1: content1, containerColor: containerColor, areaColor: areaColor })
+        WTN_1: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
+        WTN_2: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_2", content1: content1, containerColor: containerColor, areaColor: areaColor }))
     }[layoutType]));
 };
 exports.default = ContentsContainer;

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

@@ -17,7 +17,7 @@ var WTA = function (_a) {
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  ", ";\n\n  /* NOTE: Container \uB0B4\uC5D0\uC11C area\uAC00 \uC911\uC559\uC815\uB82C\uC77C \uACBD\uC6B0 Container\uC758 min-width\uB97C area\uC640 \uB9DE\uCDB0\uC8FC\uC5B4\uC57C \uD655\uB300\uD558\uAC70\uB098 \uD588\uC744\uB54C \uB0B4\uC6A9\uC774 \uC9E4\uB9AC\uC9C0 \uC54A\uB294\uB2E4. */\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  ", ";\n\n  /* NOTE: Container \uB0B4\uC5D0\uC11C area\uAC00 \uC911\uC559\uC815\uB82C\uC77C \uACBD\uC6B0 Container\uC758 min-width\uB97C area\uC640 \uB9DE\uCDB0\uC8FC\uC5B4\uC57C \uD655\uB300\uD558\uAC70\uB098 \uD588\uC744\uB54C \uB0B4\uC6A9\uC774 \uC9E4\uB9AC\uC9C0 \uC54A\uB294\uB2E4. */\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.ui_contentscontainer01_background;
+    return theme.ui_contentscontainer_background_wt_m;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
@@ -29,7 +29,10 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (t
         WTA_3: 'min-width: 768px;'
     }[layoutType]);
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n  height: 100%;\n  overflow: auto;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n  height: 100%;\n  overflow: auto;\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n  height: 100%;\n  overflow: auto;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n  height: 100%;\n  overflow: auto;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_contentsarea_background_wt_m;
+}, function (_a) {
     var theme = _a.theme;
     return theme.ui_area_divider;
 }, function (_a) {

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 export declare type WTIProps = {
     content1?: JSX.Element;
+    layoutType: 'WTI_1' | 'WTI_2';
     containerColor?: string;
     areaColor?: string;
 };
-declare const WTI: ({ content1, containerColor, areaColor }: WTIProps) => JSX.Element;
+declare const WTI: ({ content1, containerColor, areaColor, layoutType }: WTIProps) => JSX.Element;
 export default WTI;

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

@@ -10,19 +10,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var WTI = function (_a) {
-    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor },
-        react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
+    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType;
+    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor },
+        react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer01_background;
+}, function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WTI_1: 'min-width: 1200px;',
+        WTI_2: 'min-width: 960px;'
+    }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n  width: 1200px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n  width: 1200px;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WTI_1: 'min-width: 1200px;',
+        WTI_2: 'min-width: 960px;'
+    }[layoutType]);
+}, function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });

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

@@ -17,7 +17,7 @@ var WTK = function (_a) {
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  ", ";\n\n  /* NOTE: Container \uB0B4\uC5D0\uC11C area\uAC00 \uC911\uC559\uC815\uB82C\uC77C \uACBD\uC6B0 Container\uC758 min-width\uB97C area\uC640 \uB9DE\uCDB0\uC8FC\uC5B4\uC57C \uD655\uB300\uD558\uAC70\uB098 \uD588\uC744\uB54C \uB0B4\uC6A9\uC774 \uC9E4\uB9AC\uC9C0 \uC54A\uB294\uB2E4. */\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  ", ";\n\n  /* NOTE: Container \uB0B4\uC5D0\uC11C area\uAC00 \uC911\uC559\uC815\uB82C\uC77C \uACBD\uC6B0 Container\uC758 min-width\uB97C area\uC640 \uB9DE\uCDB0\uC8FC\uC5B4\uC57C \uD655\uB300\uD558\uAC70\uB098 \uD588\uC744\uB54C \uB0B4\uC6A9\uC774 \uC9E4\uB9AC\uC9C0 \uC54A\uB294\uB2E4. */\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.ui_contentscontainer01_background;
+    return theme.ui_contentscontainer_background_wt_m;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
@@ -29,7 +29,10 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (t
         WTK_3: 'min-width: 768px;'
     }[layoutType]);
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n  height: 100%;\n  overflow: auto;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n  height: 100%;\n  overflow: auto;\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n  height: 100%;\n  overflow: auto;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n  height: 100%;\n  overflow: auto;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_contentsarea_background_wt_m;
+}, function (_a) {
     var theme = _a.theme;
     return theme.ui_area_divider;
 }, function (_a) {

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

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

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

@@ -10,19 +10,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var WTN = function (_a) {
-    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor },
-        react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
+    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType;
+    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor },
+        react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer01_background;
+}, function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WTN_1: 'min-width: 1200px;',
+        WTN_2: 'min-width: 960px;'
+    }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n  width: 1200px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n  width: 1200px;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WTN_1: 'min-width: 1200px;',
+        WTN_2: 'min-width: 960px;'
+    }[layoutType]);
+}, function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });

package/dist/src/desktop/layout/LayoutWT/Containers/PageMenuContainer/variation/TopPageMenu.js

@@ -43,7 +43,7 @@ var areaLineStyle = (0, styled_components_1.css)(templateObject_1 || (templateOb
 });
 var S_TopPageMenuContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.ui_pagemenucontainer_background;
+    return theme.ui_toppagemenucontainer_background_wt_m;
 }, function (_a) {
     var mobileWidth = _a.mobileWidth;
     return mobileWidth &&
@@ -52,7 +52,10 @@ var S_TopPageMenuContainer = styled_components_1.default.div(templateObject_2 ||
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_TopPageMenuArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  margin: 0;\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_TopPageMenuArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  margin: 0;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  margin: 0;\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_toppagemenuarea_background_wt_m;
+}, function (_a) {
     var mobileWidth = _a.mobileWidth;
     return mobileWidth && "width: " + mobileWidth + "px;";
 }, function (_a) {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare type ContainersBoxProps = {
-    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' | 'WTI_1' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1';
+    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' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_2' | 'WTN_1';
     pageMenuContent?: JSX.Element;
     tabMenuContent?: JSX.Element;
     content1?: JSX.Element;

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

@@ -36,6 +36,7 @@ var ContainersBox = function (_a) {
             WTH_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTH_2: react_1.default.createElement(react_1.default.Fragment, null),
             WTI_1: react_1.default.createElement(react_1.default.Fragment, null),
+            WTI_2: react_1.default.createElement(react_1.default.Fragment, null),
             WTJ_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTK_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTK_2: react_1.default.createElement(react_1.default.Fragment, null),
@@ -43,7 +44,8 @@ var ContainersBox = function (_a) {
             WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
-            WTN_1: react_1.default.createElement(react_1.default.Fragment, null)
+            WTN_1: react_1.default.createElement(react_1.default.Fragment, null),
+            WTN_2: react_1.default.createElement(react_1.default.Fragment, null)
         }[layoutType],
         react_1.default.createElement(S_RightBox, null,
             {
@@ -69,6 +71,7 @@ var ContainersBox = function (_a) {
                 WTH_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
                 WTH_2: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
                 WTI_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
+                WTI_2: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
                 WTJ_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTK_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTK_2: react_1.default.createElement(react_1.default.Fragment, null),
@@ -76,7 +79,8 @@ var ContainersBox = function (_a) {
                 WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
-                WTN_1: react_1.default.createElement(react_1.default.Fragment, null)
+                WTN_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTN_2: react_1.default.createElement(react_1.default.Fragment, null)
             }[layoutType],
             {
                 WTA_1: react_1.default.createElement(react_1.default.Fragment, null),
@@ -101,6 +105,7 @@ var ContainersBox = function (_a) {
                 WTH_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTH_2: react_1.default.createElement(react_1.default.Fragment, null),
                 WTI_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTI_2: react_1.default.createElement(react_1.default.Fragment, null),
                 WTJ_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTK_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTK_2: react_1.default.createElement(react_1.default.Fragment, null),
@@ -108,7 +113,8 @@ var ContainersBox = function (_a) {
                 WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
-                WTN_1: react_1.default.createElement(react_1.default.Fragment, null)
+                WTN_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTN_2: react_1.default.createElement(react_1.default.Fragment, null)
             }[layoutType],
             react_1.default.createElement(S_BottomWrapper, { layoutType: layoutType },
                 react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })))));

package/dist/src/hybrid/components/Icon/Icon.d.ts

@@ -1,10 +1,5 @@
 /// <reference types="react" />
-import fillIcons from '../../../common/assets/icons/fill';
-import lineIcons from '../../../common/assets/icons/line';
-import { uiColors } from '../../../common/styles/ui-colors';
-export declare type FillIconNameKeys = keyof typeof fillIcons;
-export declare type LineIconNameKeys = keyof typeof lineIcons;
-export declare type UiColors = keyof typeof uiColors;
+import { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
 export declare type IconProps = {
     iconName?: FillIconNameKeys | LineIconNameKeys;
     size?: 12 | 16 | 20 | 24 | 32 | 48 | 56 | 64 | 72;

package/dist/src/hybrid/components/Icon/Icon.js

@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
+var common_1 = require("../../../common");
 var fill_1 = __importDefault(require("../../../common/assets/icons/fill"));
 var line_1 = __importDefault(require("../../../common/assets/icons/line"));
-var ui_colors_1 = require("../../../common/styles/ui-colors");
 var Icon = function (_a) {
     var _b = _a.iconName, iconName = _b === void 0 ? 'ic_unavailable' : _b, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.colorKey, colorKey = _d === void 0 ? 'ui_cpnt_icon_sys_grey_01' : _d, _e = _a.fillType, fillType = _e === void 0 ? 'line' : _e;
     var SelectedIcon = fillType === 'line'
         ? line_1.default[iconName] || fill_1.default[iconName]
         : fill_1.default[iconName] || line_1.default[iconName];
-    return react_1.default.createElement(SelectedIcon, { color: ui_colors_1.uiColors[colorKey], size: size });
+    return (react_1.default.createElement(SelectedIcon, { color: (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[colorKey], size: size }));
 };
 exports.default = Icon;

package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js

@@ -202,7 +202,7 @@ var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_
             dark: theme.ui_cpnt_textfield_text_darktheme_disabled
         }[colorTheme];
 });
-var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n  }\n\n  ", ";\n  ", "\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n  }\n\n  ", ";\n  ", "\n"])), function (_a) {
+var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
     return colorTheme &&
         {
@@ -225,6 +225,15 @@ var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObjec
             none: theme.ui_cpnt_textfield_text_hint,
             dark: theme.ui_cpnt_textfield_text_darktheme_hint
         }[colorTheme];
+}, function (_a) {
+    var textSize = _a.textSize;
+    return common_1.desktopFontSize[textSize];
+}, function (_a) {
+    var textWeight = _a.textWeight;
+    return common_1.fontWeight[textWeight];
+}, function (_a) {
+    var textSize = _a.textSize;
+    return common_1.desktopLineHeight[textSize];
 }, function (_a) {
     var state = _a.state;
     return state &&