pds-dev-kit-web-test 0.1.0-beta.0 → 0.1.1

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

@@ -3,29 +3,52 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WFJ = function (_a) {
-    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
-    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFJ", containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFJ", areaColor: areaColor },
+    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
+    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFJ", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFJ", areaColor: areaColor },
         react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFJ" }, content1)))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  ", ";\n"])), function (_a) {
+var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
+    return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
+});
+var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer01_background;
 }, 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  height: 100%;\n  min-width: 960px;\n  padding-top: 24px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  padding-top: 24px;\n  ", ";\n"])), function (_a) {
+}, overrideStyleContainer1);
+var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  padding-top: 24px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\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  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
 exports.default = WFJ;
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { UiColors } from '../../../../../../common';
 export declare type WFKProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
@@ -6,6 +7,8 @@ export declare type WFKProps = {
     areaColor?: string;
     isLoadingContainer1?: boolean;
     isLoadingContainer2?: boolean;
+    overrideContainer1ColorKey?: UiColors;
+    overrideContainer2ColorKey?: UiColors;
 };
-declare const WFK: ({ content1, content2, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: WFKProps) => JSX.Element;
+declare const WFK: ({ content1, content2, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, overrideContainer1ColorKey, overrideContainer2ColorKey }: WFKProps) => JSX.Element;
 export default WFK;

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

@@ -3,30 +3,57 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WFK = function (_a) {
-    var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
+    var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
     return (react_1.default.createElement(S_Box, null,
-        react_1.default.createElement(S_ContentsContainer1, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFK", containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea1, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFK", areaColor: areaColor },
+        react_1.default.createElement(S_ContentsContainer1, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFK", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea1, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFK", areaColor: areaColor },
             react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFK" }, content1)))),
-        react_1.default.createElement(S_ContentsContainer2, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFK", containerColor: containerColor }, isLoadingContainer2 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea2, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFK", areaColor: areaColor },
+        react_1.default.createElement(S_ContentsContainer2, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFK", containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, isLoadingContainer2 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea2, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFK", areaColor: areaColor },
             react_1.default.createElement(S_Content2, { "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFK" }, content2))))));
 };
-var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
-var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  width: 40%;\n  height: 100%;\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  width: 40%;\n  height: 100%;\n  ", ";\n"])), function (_a) {
+var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
+    return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
+});
+var overrideStyleContainer2 = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
+    return overrideContainer2ColorKey && theme[overrideContainer2ColorKey];
+});
+var S_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
+var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  width: 40%;\n  height: 100%;\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  width: 40%;\n  height: 100%;\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer01_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
-});
-var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  min-width: 360px;\n  width: 60%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  min-width: 360px;\n  width: 60%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
+}, overrideStyleContainer1);
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  min-width: 360px;\n  width: 60%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  min-width: 360px;\n  width: 60%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer02_background;
 }, function (_a) {
@@ -35,16 +62,16 @@ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
-});
-var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  ", ";\n"])), function (_a) {
+}, overrideStyleContainer2);
+var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  ", ";\n"])), 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  padding-left: 24px;\n  padding-right: 24px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-top: 24px;\n  padding-left: 24px;\n  padding-right: 24px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: 24px;\n  padding-left: 24px;\n  padding-right: 24px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-top: 24px;\n  padding-left: 24px;\n  padding-right: 24px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
-var S_Content2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_Content2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 exports.default = WFK;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { UiColors } from '../../../../../../common';
+export declare type WFLProps = {
+    layoutType: 'WFL_1' | 'WFL_2';
+    content1?: JSX.Element;
+    content2?: JSX.Element;
+    containerColor?: string;
+    areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
+    overrideContainer1ColorKey?: UiColors;
+    overrideContainer2ColorKey?: UiColors;
+};
+declare const WFL: ({ layoutType, content1, content2, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, overrideContainer1ColorKey, overrideContainer2ColorKey }: WFLProps) => JSX.Element;
+export default WFL;

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

@@ -0,0 +1,75 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
+var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
+var WFL = function (_a) {
+    var layoutType = _a.layoutType, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
+    return (react_1.default.createElement(S_Box, null,
+        react_1.default.createElement(S_ContentsContainer1, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFL", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea1, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFL", layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFL", layoutType: layoutType }, content1)))),
+        react_1.default.createElement(S_ContentsContainer2, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFL", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, isLoadingContainer2 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea2, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFL", layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content2, { "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFL", layoutType: layoutType }, content2))))));
+};
+var WFL_1ContainerStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 48px;\n"], ["\n  padding: 0 48px;\n"])));
+var WFL_2ContainerStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0 24px;\n"], ["\n  padding: 0 24px;\n"])));
+var S_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n"], ["\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n"])));
+var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  width: 480px;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  border-radius: 24px 0 0 24px;\n\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  width: 480px;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  border-radius: 24px 0 0 24px;\n\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_wizard_contentscontainer01_background;
+}, function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WFL_1: WFL_1ContainerStyle,
+        WFL_2: WFL_2ContainerStyle
+    }[layoutType]);
+}, function (_a) {
+    var containerColor = _a.containerColor;
+    return "background-color: " + containerColor;
+}, scrollbarStyle_1.scrollbarStyle);
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  width: 672px;\n  border-radius: 0 24px 24px 0;\n  overflow: hidden;\n\n  ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  width: 672px;\n  border-radius: 0 24px 24px 0;\n  overflow: hidden;\n\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_wizard_contentscontainer02_background;
+}, function (_a) {
+    var containerColor = _a.containerColor;
+    return "background-color: " + containerColor;
+});
+var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 64px;\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 64px;\n\n  ", ";\n"])), function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
+});
+var S_ContentsArea2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: 100%;\n\n  ", ";\n"], ["\n  height: 100%;\n\n  ", ";\n"])), function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
+});
+var S_Content1 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_Content2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+exports.default = WFL;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

@@ -9,3 +9,4 @@ export { default as WFH } from './WFH';
 export { default as WFI } from './WFI';
 export { default as WFJ } from './WFJ';
 export { default as WFK } from './WFK';
+export { default as WFL } from './WFL';

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WFK = exports.WFJ = exports.WFI = exports.WFH = exports.WFG = exports.WFF = exports.WFE = exports.WFD = exports.WFC = exports.WFB = exports.WFA = void 0;
+exports.WFL = exports.WFK = exports.WFJ = exports.WFI = exports.WFH = exports.WFG = exports.WFF = exports.WFE = exports.WFD = exports.WFC = exports.WFB = exports.WFA = void 0;
 var WFA_1 = require("./WFA");
 Object.defineProperty(exports, "WFA", { enumerable: true, get: function () { return __importDefault(WFA_1).default; } });
 var WFB_1 = require("./WFB");
@@ -26,3 +26,5 @@ var WFJ_1 = require("./WFJ");
 Object.defineProperty(exports, "WFJ", { enumerable: true, get: function () { return __importDefault(WFJ_1).default; } });
 var WFK_1 = require("./WFK");
 Object.defineProperty(exports, "WFK", { enumerable: true, get: function () { return __importDefault(WFK_1).default; } });
+var WFL_1 = require("./WFL");
+Object.defineProperty(exports, "WFL", { enumerable: true, get: function () { return __importDefault(WFL_1).default; } });

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare type PageMenuContainerProps = {
-    pageMenuType?: 'page_menu' | 'wizard_page_menu';
+    pageMenuType?: 'page_menu' | 'wizard_page_menu_864' | 'wizard_page_menu_1152';
     pageMenuContent?: JSX.Element;
 };
 declare const PageMenuContainer: ({ pageMenuType, pageMenuContent }: PageMenuContainerProps) => JSX.Element;

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

@@ -9,7 +9,8 @@ var PageMenuContainer = function (_a) {
     var _b = _a.pageMenuType, pageMenuType = _b === void 0 ? 'page_menu' : _b, pageMenuContent = _a.pageMenuContent;
     return (react_1.default.createElement(react_1.default.Fragment, null, {
         page_menu: react_1.default.createElement(variation_1.PageMenu, { pageMenuContent: pageMenuContent }),
-        wizard_page_menu: react_1.default.createElement(variation_1.WizardPageMenu, { pageMenuContent: pageMenuContent })
+        wizard_page_menu_864: (react_1.default.createElement(variation_1.WizardPageMenu, { pageMenuContent: pageMenuContent, containerWidth: 864 })),
+        wizard_page_menu_1152: (react_1.default.createElement(variation_1.WizardPageMenu, { pageMenuContent: pageMenuContent, containerWidth: 1152 }))
     }[pageMenuType]));
 };
 exports.default = PageMenuContainer;

package/dist/src/desktop/layout/LayoutWF/Containers/PageMenuContainer/variation/PageMenu.js

@@ -15,8 +15,11 @@ var PageMenu = function (_a) {
         react_1.default.createElement(S_PageMenuArea, { "x-pds-name": "PageMenuArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" },
             react_1.default.createElement(S_PageMenuContent, { "x-pds-name": "PageMenuContent", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" }, pageMenuContent))));
 };
-var S_PageMenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 16px 16px 0 0;\n  background-color: #fff;\n"], ["\n  border-radius: 16px 16px 0 0;\n  background-color: #fff;\n"])));
+var S_PageMenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_pagemenucontainer_background;
+});
 var S_PageMenuArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
-var S_PageMenuContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 16px 16px 0 0;\n  height: 160px;\n  overflow: hidden;\n"], ["\n  border-radius: 16px 16px 0 0;\n  height: 160px;\n  overflow: hidden;\n"])));
+var S_PageMenuContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 64px;\n  overflow: hidden;\n"], ["\n  height: 64px;\n  overflow: hidden;\n"])));
 exports.default = PageMenu;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/desktop/layout/LayoutWF/Containers/PageMenuContainer/variation/WizardPageMenu.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export declare type PageMenuProps = {
     pageMenuContent?: JSX.Element;
+    containerWidth: number;
 };
-declare const WizardPageMenu: ({ pageMenuContent }: PageMenuProps) => JSX.Element;
+declare const WizardPageMenu: ({ pageMenuContent, containerWidth }: PageMenuProps) => JSX.Element;
 export default WizardPageMenu;

package/dist/src/desktop/layout/LayoutWF/Containers/PageMenuContainer/variation/WizardPageMenu.js

@@ -10,13 +10,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var WizardPageMenu = function (_a) {
-    var pageMenuContent = _a.pageMenuContent;
-    return (react_1.default.createElement(S_PageMenuContainer, { "x-pds-name": "PageMenuContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" },
+    var pageMenuContent = _a.pageMenuContent, containerWidth = _a.containerWidth;
+    return (react_1.default.createElement(S_PageMenuContainer, { "x-pds-name": "PageMenuContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", containerWidth: containerWidth },
         react_1.default.createElement(S_PageMenuArea, { "x-pds-name": "PageMenuArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" },
             react_1.default.createElement(S_PageMenuContent, { "x-pds-name": "PageMenuContent", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" }, pageMenuContent))));
 };
-var S_PageMenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 128px;\n"], ["\n  height: 128px;\n"])));
-var S_PageMenuArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-bottom: 32px;\n"], ["\n  padding-bottom: 32px;\n"])));
-var S_PageMenuContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 96px;\n  width: 864px;\n  overflow: hidden;\n"], ["\n  height: 96px;\n  width: 864px;\n  overflow: hidden;\n"])));
+var S_PageMenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 176px;\n  width: ", "px;\n  min-width: ", "px;\n"], ["\n  background-color: ", ";\n  height: 176px;\n  width: ", "px;\n  min-width: ", "px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_wizard_pagemenucontainer_background;
+}, function (_a) {
+    var containerWidth = _a.containerWidth;
+    return containerWidth;
+}, function (_a) {
+    var containerWidth = _a.containerWidth;
+    return containerWidth;
+});
+var S_PageMenuArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 32px;\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 32px;\n"])));
+var S_PageMenuContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 144px;\n  width: 100%;\n  overflow: hidden;\n"], ["\n  height: 144px;\n  width: 100%;\n  overflow: hidden;\n"])));
 exports.default = WizardPageMenu;
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare type StepContainerProps = {
-    stepType?: 'step';
+    stepType?: 'step_864' | 'step_1152';
     stepContent?: JSX.Element;
 };
 declare const StepContainer: ({ stepType, stepContent }: StepContainerProps) => JSX.Element;

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

@@ -6,9 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var variation_1 = require("./variation");
 var StepContainer = function (_a) {
-    var _b = _a.stepType, stepType = _b === void 0 ? 'step' : _b, stepContent = _a.stepContent;
+    var _b = _a.stepType, stepType = _b === void 0 ? 'step_864' : _b, stepContent = _a.stepContent;
     return (react_1.default.createElement(react_1.default.Fragment, null, {
-        step: react_1.default.createElement(variation_1.Step, { stepContent: stepContent })
+        step_864: react_1.default.createElement(variation_1.Step, { stepContent: stepContent, containerWidth: 864 }),
+        step_1152: react_1.default.createElement(variation_1.Step, { stepContent: stepContent, containerWidth: 1152 })
     }[stepType]));
 };
 exports.default = StepContainer;

package/dist/src/desktop/layout/LayoutWF/Containers/StepContainer/variation/Step.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export declare type StepProps = {
     stepContent?: JSX.Element;
+    containerWidth: number;
 };
-declare const Step: ({ stepContent }: StepProps) => JSX.Element;
+declare const Step: ({ stepContent, containerWidth }: StepProps) => JSX.Element;
 export default Step;

package/dist/src/desktop/layout/LayoutWF/Containers/StepContainer/variation/Step.js

@@ -10,13 +10,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Step = function (_a) {
-    var stepContent = _a.stepContent;
-    return (react_1.default.createElement(S_StepContainer, { "x-pds-name": "StepContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" },
+    var stepContent = _a.stepContent, containerWidth = _a.containerWidth;
+    return (react_1.default.createElement(S_StepContainer, { "x-pds-name": "StepContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", containerWidth: containerWidth },
         react_1.default.createElement(S_StepArea, { "x-pds-name": "StepArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" },
             react_1.default.createElement(S_StepContent, { "x-pds-name": "StepContent", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" }, stepContent))));
 };
-var S_StepContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 80px;\n"], ["\n  height: 80px;\n"])));
-var S_StepArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-top: 24px;\n"], ["\n  padding-top: 24px;\n"])));
-var S_StepContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 56px;\n  width: 864px;\n  overflow: hidden;\n"], ["\n  height: 56px;\n  width: 864px;\n  overflow: hidden;\n"])));
+var S_StepContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 80px;\n  width: ", "px;\n  min-width: ", "px;\n"], ["\n  background-color: ", ";\n  height: 80px;\n  width: ", "px;\n  min-width: ", "px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_stepcontainer_background;
+}, function (_a) {
+    var containerWidth = _a.containerWidth;
+    return containerWidth;
+}, function (_a) {
+    var containerWidth = _a.containerWidth;
+    return containerWidth;
+});
+var S_StepArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: 24px;\n"], ["\n  box-sizing: border-box;\n  padding-top: 24px;\n"])));
+var S_StepContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 56px;\n  width: 100%;\n  overflow: hidden;\n"], ["\n  height: 56px;\n  width: 100%;\n  overflow: hidden;\n"])));
 exports.default = Step;
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -2,3 +2,4 @@ export { ContentsContainer } from './ContentsContainer';
 export { PageMenuContainer } from './PageMenuContainer';
 export { TabMenuContainer } from './TabMenuContainer';
 export { SubMenuContainer } from './SubMenuContainer';
+export { StepContainer } from './StepContainer';

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubMenuContainer = exports.TabMenuContainer = exports.PageMenuContainer = exports.ContentsContainer = void 0;
+exports.StepContainer = exports.SubMenuContainer = exports.TabMenuContainer = exports.PageMenuContainer = exports.ContentsContainer = void 0;
 var ContentsContainer_1 = require("./ContentsContainer");
 Object.defineProperty(exports, "ContentsContainer", { enumerable: true, get: function () { return ContentsContainer_1.ContentsContainer; } });
 var PageMenuContainer_1 = require("./PageMenuContainer");
@@ -9,3 +9,5 @@ var TabMenuContainer_1 = require("./TabMenuContainer");
 Object.defineProperty(exports, "TabMenuContainer", { enumerable: true, get: function () { return TabMenuContainer_1.TabMenuContainer; } });
 var SubMenuContainer_1 = require("./SubMenuContainer");
 Object.defineProperty(exports, "SubMenuContainer", { enumerable: true, get: function () { return SubMenuContainer_1.SubMenuContainer; } });
+var StepContainer_1 = require("./StepContainer");
+Object.defineProperty(exports, "StepContainer", { enumerable: true, get: function () { return StepContainer_1.StepContainer; } });

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

@@ -1,6 +1,7 @@
 import React from 'react';
+import { UiColors } from '../../../../common';
 export declare type ContainersBoxProps = {
-    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';
+    layoutType: 'WFA_1' | 'WFA_2' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFE_2' | 'WFE_3' | 'WFE_4' | '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' | 'WFL_1' | 'WFL_2';
     pageMenuContent?: JSX.Element;
     subMenuContent?: JSX.Element;
     tabMenuContent?: JSX.Element;
@@ -12,6 +13,8 @@ export declare type ContainersBoxProps = {
     areaColor?: string;
     isLoadingContainer1?: boolean;
     isLoadingContainer2?: boolean;
+    overrideContainer1ColorKey?: UiColors;
+    overrideContainer2ColorKey?: UiColors;
 };
-declare const ContainersBox: ({ layoutType, pageMenuContent, subMenuContent, tabMenuContent, stepContent, content1, content2, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: ContainersBoxProps) => JSX.Element;
+declare const ContainersBox: ({ layoutType, pageMenuContent, subMenuContent, tabMenuContent, stepContent, content1, content2, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, overrideContainer1ColorKey, overrideContainer2ColorKey }: ContainersBoxProps) => JSX.Element;
 export default ContainersBox;