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

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

@@ -29,21 +29,38 @@ 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_VideoWrapper, null,
+            react_1.default.createElement(S_Video, { autoPlay: true, muted: true, playsInline: true, loop: true, src: "https://wp-s3-publ-landing.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/07/03200435/AdobeStock_478805549.mp4" })),
+        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 +76,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 +107,37 @@ 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 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 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  position: relative;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  position: relative;\n\n  ", "\n"])), function (_a) {
+    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 S_VideoWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n"])));
+var S_Video = styled_components_1.default.video(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n"])));
+var S_ContainersBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  position: relative;\n  z-index: 1;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  position: relative;\n  z-index: 1;\n\n  ", "\n"])), function (_a) {
+    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 S_TopWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_CenterBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __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 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_BottomWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_RightBox = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __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_11 || (templateObject_11 = __makeTemplateObject(["\n  flex: 1;\n  overflow: hidden;\n"], ["\n  flex: 1;\n  overflow: hidden;\n"])));
+var S_BottomWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __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;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;

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;

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

@@ -3,23 +3,50 @@ 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 WHB = 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(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": "WHB", layoutType: layoutType, 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": "WHB", layoutType: layoutType, 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": "WHB", 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": "WHB", 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": "WHB", 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": "WHB", layoutType: layoutType, 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": "WHB", layoutType: layoutType, 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": "WHB", 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": "WHB", 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": "WHB", layoutType: layoutType }, 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: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\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: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer01_background;
 }, function (_a) {
@@ -35,8 +62,8 @@ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (
 }, 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: 480px;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  min-width: 480px;\n  ", ";\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: 480px;\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  min-width: 480px;\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer02_background;
 }, function (_a) {
@@ -55,8 +82,8 @@ 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  padding-top: 24px;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n  ", ";\n"])), function (_a) {
+}, overrideStyleContainer2);
+var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WHB_1: 'height: 100%;',
@@ -70,7 +97,7 @@ var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templ
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_ContentsArea2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WHB_1: 'height: 100%;',
@@ -84,7 +111,7 @@ var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templ
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var S_Content1 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WHB_1: 'height: 100%;overflow: hidden;',
@@ -95,7 +122,7 @@ var S_Content1 = styled_components_1.default.div(templateObject_6 || (templateOb
         WHB_6: 'height: 100%;overflow: hidden;'
     }[layoutType]);
 });
-var S_Content2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var S_Content2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WHB_1: 'height: 100%;overflow: hidden;',
@@ -107,4 +134,4 @@ var S_Content2 = styled_components_1.default.div(templateObject_7 || (templateOb
     }[layoutType]);
 });
 exports.default = WHB;
-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/LayoutWH/Containers/ContentsContainer/variation/WHC.d.ts

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

package/dist/src/desktop/layout/LayoutWH/Containers/ContentsContainer/variation/WHC.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 WHC = 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": "WHC", 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": "WHC", 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": "WHC", 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": "WHC", 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": "WHC" }, 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  padding-right: 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  padding-right: 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  padding-right: 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  padding-right: 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  min-width: 912px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  min-width: 912px;\n  padding-bottom: 88px;\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  min-width: 912px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  min-width: 912px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  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 = WHC;
-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/WHD.d.ts

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