npm - pds-dev-kit-web-test - Versions diffs - 0.1.0 → 0.1.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (397) hide show

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPC.js CHANGED Viewed

@@ -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 MPC = 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": "mobile", "x-pds-layout-type": "MPC", 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": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType, areaColor: areaColor },
+        react_1.default.createElement(S_ContentsContainer1, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPC", 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": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType, areaColor: areaColor },
             react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType }, content1)))),
-        react_1.default.createElement(S_ContentsContainer2, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPC", 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": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType, areaColor: areaColor },
+        react_1.default.createElement(S_ContentsContainer2, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPC", 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": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType, areaColor: areaColor },
             react_1.default.createElement(S_Content2, { "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPC", layoutType: layoutType }, content2))))));
 };
-var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
-var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 360px;\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  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
+var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_m_contentscontainer01_background;
 }, function (_a) {
@@ -31,23 +58,23 @@ 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  flex: 1;\n  height: 100%;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  background-color: ", ";\n  flex: 1;\n  height: 100%;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
+}, overrideStyleContainer1);
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  flex: 1;\n  height: 100%;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  flex: 1;\n  height: 100%;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_m_contentscontainer02_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
-});
-var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
+}, overrideStyleContainer2);
+var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
-var S_Content2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_Content2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 exports.default = MPC;
-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/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPD.d.ts CHANGED Viewed

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

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPD.js CHANGED Viewed

@@ -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 MPD = 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": "mobile", "x-pds-layout-type": "MPD", 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": "mobile", "x-pds-layout-type": "MPD", 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": "mobile", "x-pds-layout-type": "MPD", 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": "mobile", "x-pds-layout-type": "MPD", areaColor: areaColor },
         react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPD" }, content1)))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\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  height: 100%;\n  min-width: 360px;\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_m_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  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
+}, overrideStyleContainer1);
+var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
 exports.default = MPD;
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPE.d.ts CHANGED Viewed

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

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPE.js CHANGED Viewed

@@ -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 MPE = 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": "mobile", "x-pds-layout-type": "MPE", 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": "mobile", "x-pds-layout-type": "MPE", 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": "mobile", "x-pds-layout-type": "MPE", 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": "mobile", "x-pds-layout-type": "MPE", areaColor: areaColor },
         react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPE" }, content1)))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\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  height: 100%;\n  min-width: 360px;\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_m_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  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
+}, overrideStyleContainer1);
+var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
 exports.default = MPE;
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPF.d.ts CHANGED Viewed

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

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPF.js CHANGED Viewed

@@ -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 MPF = 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": "mobile", "x-pds-layout-type": "MPF", 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": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType, areaColor: areaColor },
+        react_1.default.createElement(S_ContentsContainer1, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPF", 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": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType, areaColor: areaColor },
             react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType }, content1)))),
-        react_1.default.createElement(S_ContentsContainer2, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPF", 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": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType, areaColor: areaColor },
+        react_1.default.createElement(S_ContentsContainer2, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPF", 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": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType, areaColor: areaColor },
             react_1.default.createElement(S_Content2, { "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MPF", layoutType: layoutType }, content2))))));
 };
-var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
-var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 360px;\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  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
+var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_m_contentscontainer01_background;
 }, function (_a) {
@@ -31,23 +58,23 @@ 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  flex: 1;\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  background-color: ", ";\n  flex: 1;\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
+}, overrideStyleContainer1);
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  flex: 1;\n  height: 100%;\n  min-width: 360px;\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  flex: 1;\n  height: 100%;\n  min-width: 360px;\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_m_contentscontainer02_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
-});
-var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
+}, overrideStyleContainer2);
+var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  height: 100%;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: 100%;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  height: 100%;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
-var S_Content2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_Content2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
 exports.default = MPF;
-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/mobile/layout/LayoutMS/Containers/ContentsContainer/ContentsContainer.d.ts CHANGED Viewed

@@ -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/mobile/layout/LayoutMS/Containers/ContentsContainer/ContentsContainer.js CHANGED Viewed

@@ -6,19 +6,19 @@ 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, {
-        MSA_1: (react_1.default.createElement(variation_1.MSA, { layoutType: "MSA_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
-        MSA_2: (react_1.default.createElement(variation_1.MSA, { layoutType: "MSA_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
-        MSB_1: (react_1.default.createElement(variation_1.MSB, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
-        MSC_1: (react_1.default.createElement(variation_1.MSC, { layoutType: "MSC_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
-        MSC_2: (react_1.default.createElement(variation_1.MSC, { layoutType: "MSC_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
-        MSD_1: (react_1.default.createElement(variation_1.MSD, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
-        MSE_1: (react_1.default.createElement(variation_1.MSE, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
-        MSF_1: (react_1.default.createElement(variation_1.MSF, { layoutType: "MSF_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
-        MSF_2: (react_1.default.createElement(variation_1.MSF, { layoutType: "MSF_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
-        MSG_1: (react_1.default.createElement(variation_1.MSG, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
-        MSH_1: (react_1.default.createElement(variation_1.MSH, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 }))
+        MSA_1: (react_1.default.createElement(variation_1.MSA, { layoutType: "MSA_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
+        MSA_2: (react_1.default.createElement(variation_1.MSA, { layoutType: "MSA_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
+        MSB_1: (react_1.default.createElement(variation_1.MSB, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
+        MSC_1: (react_1.default.createElement(variation_1.MSC, { layoutType: "MSC_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
+        MSC_2: (react_1.default.createElement(variation_1.MSC, { layoutType: "MSC_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
+        MSD_1: (react_1.default.createElement(variation_1.MSD, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
+        MSE_1: (react_1.default.createElement(variation_1.MSE, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
+        MSF_1: (react_1.default.createElement(variation_1.MSF, { layoutType: "MSF_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
+        MSF_2: (react_1.default.createElement(variation_1.MSF, { layoutType: "MSF_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
+        MSG_1: (react_1.default.createElement(variation_1.MSG, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
+        MSH_1: (react_1.default.createElement(variation_1.MSH, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }))
     }[layoutType]));
 };
 exports.default = ContentsContainer;

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSA.d.ts CHANGED Viewed

@@ -1,10 +1,12 @@
 /// <reference types="react" />
+import { UiColors } from '../../../../../../common';
 export declare type MSAProps = {
     content1?: JSX.Element;
     layoutType: 'MSA_1' | 'MSA_2';
     containerColor?: string;
     areaColor?: string;
     isLoadingContainer1?: boolean;
+    overrideContainer1ColorKey?: UiColors;
 };
-declare const MSA: ({ content1, layoutType, containerColor, areaColor, isLoadingContainer1 }: MSAProps) => JSX.Element;
+declare const MSA: ({ content1, layoutType, containerColor, areaColor, isLoadingContainer1, overrideContainer1ColorKey }: MSAProps) => JSX.Element;
 export default MSA;

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSA.js CHANGED Viewed

@@ -3,26 +3,49 @@ 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 MSA = function (_a) {
-    var content1 = _a.content1, layoutType = _a.layoutType, 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": "mobile", "x-pds-layout-type": "MSA", layoutType: layoutType, 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": "mobile", "x-pds-layout-type": "MSA", layoutType: layoutType, areaColor: areaColor },
+    var content1 = _a.content1, layoutType = _a.layoutType, 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": "mobile", "x-pds-layout-type": "MSA", layoutType: layoutType, 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": "mobile", "x-pds-layout-type": "MSA", layoutType: layoutType, areaColor: areaColor },
         react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSA" }, content1)))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n"])), function (_a) {
+var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
+    return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
+});
+var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_m_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  min-width: 360px;\n  ", ";\n  ", ";\n"], ["\n  min-width: 360px;\n  ", ";\n  ", ";\n"])), function (_a) {
+}, overrideStyleContainer1);
+var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  min-width: 360px;\n  ", ";\n  ", ";\n"], ["\n  min-width: 360px;\n  ", ";\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
         MSA_1: 'padding-bottom: 88px;',
@@ -32,6 +55,6 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templa
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 exports.default = MSA;
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSB.d.ts CHANGED Viewed

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

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSB.js CHANGED Viewed

@@ -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 MSB = 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": "mobile", "x-pds-layout-type": "MSB", 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": "mobile", "x-pds-layout-type": "MSB", 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": "mobile", "x-pds-layout-type": "MSB", 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": "mobile", "x-pds-layout-type": "MSB", areaColor: areaColor },
         react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSB" }, content1)))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n"])), function (_a) {
+var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
+    return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
+});
+var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_m_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  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
+}, overrideStyleContainer1);
+var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 exports.default = MSB;
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;