pds-dev-kit-web-test 0.1.0 → 0.1.2

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;

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

@@ -29,21 +29,36 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var Containers_1 = require("../Containers");
-var StepContainer_1 = require("../Containers/StepContainer");
 var ContainersBox = function (_a) {
-    var layoutType = _a.layoutType, pageMenuContent = _a.pageMenuContent, subMenuContent = _a.subMenuContent, tabMenuContent = _a.tabMenuContent, stepContent = _a.stepContent, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
-    return (react_1.default.createElement(S_Wrapper, { layoutType: layoutType },
-        react_1.default.createElement(S_ContainersBox, { layoutType: layoutType },
-            pageMenuContent && (react_1.default.createElement(S_TopWrapper, null, layoutType === 'WFA_1' ? (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "wizard_page_menu", pageMenuContent: pageMenuContent })) : (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuContent: pageMenuContent })))),
-            react_1.default.createElement(S_CenterBox, { layoutType: layoutType },
+    var layoutType = _a.layoutType, pageMenuContent = _a.pageMenuContent, subMenuContent = _a.subMenuContent, tabMenuContent = _a.tabMenuContent, stepContent = _a.stepContent, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
+    var isWizardLayout = layoutType.includes('WFA') ||
+        layoutType.includes('WFB') ||
+        layoutType.includes('WFE') ||
+        layoutType.includes('WFL');
+    var wizardContainerWidthType = layoutType === 'WFE_3' ||
+        layoutType === 'WFE_4' ||
+        layoutType === 'WFL_1' ||
+        layoutType === 'WFL_2'
+        ? 'large'
+        : 'small';
+    return (react_1.default.createElement(S_Wrapper, { isWizardLayout: isWizardLayout },
+        react_1.default.createElement(S_ContainersBox, { isWizardLayout: isWizardLayout },
+            pageMenuContent && (react_1.default.createElement(S_TopWrapper, null, isWizardLayout ? ({
+                small: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "wizard_page_menu_864", pageMenuContent: pageMenuContent })),
+                large: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "wizard_page_menu_1152", pageMenuContent: pageMenuContent }))
+            }[wizardContainerWidthType]) : (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuContent: pageMenuContent })))),
+            react_1.default.createElement(S_CenterBox, { isWizardLayout: isWizardLayout },
                 {
                     WFA_1: react_1.default.createElement(react_1.default.Fragment, null),
+                    WFA_2: react_1.default.createElement(react_1.default.Fragment, null),
                     WFB_1: react_1.default.createElement(react_1.default.Fragment, null),
                     WFC_1: react_1.default.createElement(react_1.default.Fragment, null),
                     WFD_1: react_1.default.createElement(react_1.default.Fragment, null),
                     WFD_2: react_1.default.createElement(react_1.default.Fragment, null),
                     WFE_1: react_1.default.createElement(react_1.default.Fragment, null),
                     WFE_2: react_1.default.createElement(react_1.default.Fragment, null),
+                    WFE_3: react_1.default.createElement(react_1.default.Fragment, null),
+                    WFE_4: react_1.default.createElement(react_1.default.Fragment, null),
                     WFF_1: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
                     WFG_1: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
                     WFG_2: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
@@ -59,17 +74,22 @@ var ContainersBox = function (_a) {
                     WFI_5: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
                     WFI_6: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
                     WFJ_1: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
-                    WFK_1: react_1.default.createElement(react_1.default.Fragment, null)
+                    WFK_1: react_1.default.createElement(react_1.default.Fragment, null),
+                    WFL_1: react_1.default.createElement(react_1.default.Fragment, null),
+                    WFL_2: react_1.default.createElement(react_1.default.Fragment, null)
                 }[layoutType],
                 react_1.default.createElement(S_RightBox, null,
                     {
                         WFA_1: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFA_2: react_1.default.createElement(react_1.default.Fragment, null),
                         WFB_1: react_1.default.createElement(react_1.default.Fragment, null),
                         WFC_1: react_1.default.createElement(react_1.default.Fragment, null),
                         WFD_1: react_1.default.createElement(react_1.default.Fragment, null),
                         WFD_2: react_1.default.createElement(react_1.default.Fragment, null),
                         WFE_1: react_1.default.createElement(react_1.default.Fragment, null),
                         WFE_2: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFE_3: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFE_4: react_1.default.createElement(react_1.default.Fragment, null),
                         WFF_1: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
                         WFG_1: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
                         WFG_2: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
@@ -85,31 +105,35 @@ var ContainersBox = function (_a) {
                         WFI_5: react_1.default.createElement(react_1.default.Fragment, null),
                         WFI_6: react_1.default.createElement(react_1.default.Fragment, null),
                         WFJ_1: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
-                        WFK_1: react_1.default.createElement(react_1.default.Fragment, null)
+                        WFK_1: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFL_1: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFL_2: react_1.default.createElement(react_1.default.Fragment, null)
                     }[layoutType],
                     react_1.default.createElement(S_ContentsWrapper, null,
-                        react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, stepContent: stepContent, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })))),
-            layoutType === 'WFA_1' && stepContent && (react_1.default.createElement(S_BottomWrapper, null,
-                react_1.default.createElement(StepContainer_1.StepContainer, { stepContent: stepContent }))))));
+                        react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })))),
+            isWizardLayout && (react_1.default.createElement(S_BottomWrapper, null, {
+                small: react_1.default.createElement(Containers_1.StepContainer, { stepType: "step_864", stepContent: stepContent }),
+                large: react_1.default.createElement(Containers_1.StepContainer, { stepType: "step_1152", stepContent: stepContent })
+            }[wizardContainerWidthType])))));
 };
 var wizardBackgroundStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-image: url('https://publ-statics.s3.ap-northeast-2.amazonaws.com/pds_layout_background_gradient.jpg');\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n"], ["\n  background-image: url('https://publ-statics.s3.ap-northeast-2.amazonaws.com/pds_layout_background_gradient.jpg');\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n"])));
-var wizardStyle01 = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
-var wizardStyle02 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: none;\n"], ["\n  flex: none;\n"])));
+var wizardContainersBoxStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
+var wizardCenterBoxStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: none;\n"], ["\n  flex: none;\n"])));
 var S_Wrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  ", "\n"])), function (_a) {
-    var layoutType = _a.layoutType;
-    return layoutType === 'WFA_1' && wizardBackgroundStyle;
+    var isWizardLayout = _a.isWizardLayout;
+    return isWizardLayout && wizardBackgroundStyle;
 });
 var S_ContainersBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  ", "\n"])), function (_a) {
-    var layoutType = _a.layoutType;
-    return layoutType === 'WFA_1' && wizardStyle01;
+    var isWizardLayout = _a.isWizardLayout;
+    return isWizardLayout && wizardContainersBoxStyle;
 });
 var S_TopWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 var S_CenterBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex: 1;\n  overflow: hidden;\n  align-items: flex-start;\n  display: flex;\n\n  ", "\n"], ["\n  flex: 1;\n  overflow: hidden;\n  align-items: flex-start;\n  display: flex;\n\n  ", "\n"])), function (_a) {
-    var layoutType = _a.layoutType;
-    return layoutType === 'WFA_1' && wizardStyle02;
+    var isWizardLayout = _a.isWizardLayout;
+    return isWizardLayout && wizardCenterBoxStyle;
 });
 var S_RightBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n  max-width: 100%;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n  max-width: 100%;\n"])));
-var S_ContentsWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex: 1;\n  overflow: hidden;\n  border-radius: 0 0 16px 16px;\n"], ["\n  flex: 1;\n  overflow: hidden;\n  border-radius: 0 0 16px 16px;\n"])));
+var S_ContentsWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex: 1;\n  overflow: hidden;\n"], ["\n  flex: 1;\n  overflow: hidden;\n"])));
 var S_BottomWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 exports.default = ContainersBox;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

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

@@ -13,6 +13,6 @@ var LayoutWF = function (_a) {
     var children = _a.children;
     return (react_1.default.createElement(S_LayoutWF, { "x-pds-name": "LayoutWF", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" }, children));
 };
-var S_LayoutWF = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100vh;\n  width: 100vw;\n  min-width: 1200px;\n  background-image: url('https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/uq7JQlKJo7KBETXnVuTf.jpg?auto=format&w=1600');\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n"], ["\n  height: 100vh;\n  width: 100vw;\n  min-width: 1200px;\n  background-image: url('https://web-dev.imgix.net/image/j2RDdG43oidUy6AL6LovThjeX9c2/uq7JQlKJo7KBETXnVuTf.jpg?auto=format&w=1600');\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n"])));
+var S_LayoutWF = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100vh;\n  width: 100vw;\n  min-width: 1200px;\n"], ["\n  height: 100vh;\n  width: 100vw;\n  min-width: 1200px;\n"])));
 exports.default = LayoutWF;
 var templateObject_1;

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

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

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

@@ -6,24 +6,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var variation_1 = require("./variation");
 var ContentsContainer = function (_a) {
-    var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
+    var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
     return (react_1.default.createElement(react_1.default.Fragment, null, {
-        WHA_1: (react_1.default.createElement(variation_1.WHA, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
-        WHB_1: (react_1.default.createElement(variation_1.WHB, { layoutType: "WHB_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
-        WHB_2: (react_1.default.createElement(variation_1.WHB, { layoutType: "WHB_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
-        WHB_3: (react_1.default.createElement(variation_1.WHB, { layoutType: "WHB_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
-        WHB_4: (react_1.default.createElement(variation_1.WHB, { layoutType: "WHB_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
-        WHB_5: (react_1.default.createElement(variation_1.WHB, { layoutType: "WHB_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
-        WHB_6: (react_1.default.createElement(variation_1.WHB, { layoutType: "WHB_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
-        WHC_1: (react_1.default.createElement(variation_1.WHC, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
-        WHD_1: (react_1.default.createElement(variation_1.WHD, { layoutType: "WHD_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
-        WHD_2: (react_1.default.createElement(variation_1.WHD, { layoutType: "WHD_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
-        WHD_3: (react_1.default.createElement(variation_1.WHD, { layoutType: "WHD_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
-        WHD_4: (react_1.default.createElement(variation_1.WHD, { layoutType: "WHD_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
-        WHD_5: (react_1.default.createElement(variation_1.WHD, { layoutType: "WHD_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
-        WHD_6: (react_1.default.createElement(variation_1.WHD, { layoutType: "WHD_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
-        WHE_1: (react_1.default.createElement(variation_1.WHE, { layoutType: "WHE_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
-        WHE_2: (react_1.default.createElement(variation_1.WHE, { layoutType: "WHE_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 }))
+        WHA_1: (react_1.default.createElement(variation_1.WHA, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
+        WHB_1: (react_1.default.createElement(variation_1.WHB, { layoutType: "WHB_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
+        WHB_2: (react_1.default.createElement(variation_1.WHB, { layoutType: "WHB_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
+        WHB_3: (react_1.default.createElement(variation_1.WHB, { layoutType: "WHB_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
+        WHB_4: (react_1.default.createElement(variation_1.WHB, { layoutType: "WHB_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
+        WHB_5: (react_1.default.createElement(variation_1.WHB, { layoutType: "WHB_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
+        WHB_6: (react_1.default.createElement(variation_1.WHB, { layoutType: "WHB_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
+        WHC_1: (react_1.default.createElement(variation_1.WHC, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
+        WHD_1: (react_1.default.createElement(variation_1.WHD, { layoutType: "WHD_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
+        WHD_2: (react_1.default.createElement(variation_1.WHD, { layoutType: "WHD_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
+        WHD_3: (react_1.default.createElement(variation_1.WHD, { layoutType: "WHD_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
+        WHD_4: (react_1.default.createElement(variation_1.WHD, { layoutType: "WHD_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
+        WHD_5: (react_1.default.createElement(variation_1.WHD, { layoutType: "WHD_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
+        WHD_6: (react_1.default.createElement(variation_1.WHD, { layoutType: "WHD_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
+        WHE_1: (react_1.default.createElement(variation_1.WHE, { layoutType: "WHE_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
+        WHE_2: (react_1.default.createElement(variation_1.WHE, { layoutType: "WHE_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }))
     }[layoutType]));
 };
 exports.default = ContentsContainer;

package/dist/src/desktop/layout/LayoutWH/Containers/ContentsContainer/variation/WHA.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
+import { UiColors } from '../../../../../../common';
 export declare type WHAProps = {
     content1?: JSX.Element;
     containerColor?: string;
     areaColor?: string;
     isLoadingContainer1?: boolean;
+    overrideContainer1ColorKey?: UiColors;
 };
-declare const WHA: ({ content1, containerColor, areaColor, isLoadingContainer1 }: WHAProps) => JSX.Element;
+declare const WHA: ({ content1, containerColor, areaColor, isLoadingContainer1, overrideContainer1ColorKey }: WHAProps) => JSX.Element;
 export default WHA;

package/dist/src/desktop/layout/LayoutWH/Containers/ContentsContainer/variation/WHA.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 WHA = 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": "WHA", 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": "WHA", 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": "WHA", 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": "WHA", 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": "WHA" }, 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  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\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  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\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  max-width: 720px;\n  min-width: 512px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  width: 53%;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  max-width: 720px;\n  min-width: 512px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  width: 53%;\n  ", ";\n"])), function (_a) {
+}, overrideStyleContainer1);
+var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  max-width: 720px;\n  min-width: 512px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  width: 53%;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  max-width: 720px;\n  min-width: 512px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  width: 53%;\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"], ["\n  height: 100%;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
 exports.default = WHA;
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/desktop/layout/LayoutWH/Containers/ContentsContainer/variation/WHB.d.ts

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