pds-dev-kit-web-test 0.2.29 → 0.2.31

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -69,7 +73,7 @@ var WFA = function (_a) {
             window.removeEventListener('resize', handleResize);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey, hasScroll: hasScroll, ref: contentRef }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA" }, { children: content1 }), void 0) }), void 0) }, void 0)) }), void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey, hasScroll: hasScroll, ref: contentRef }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA" }, { children: content1 })) })) })) })) }));
 };
 var WFA_1ContainerStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n"], ["\n  align-items: flex-start;\n"])));
 var WFA_2ContainerStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start;\n"], ["\n  align-items: flex-start;\n"])));
@@ -102,7 +106,7 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_12 || (
     }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
-    return "background-color: " + containerColor;
+    return "background-color: ".concat(containerColor);
 }, scrollbarStyle_1.scrollbarWithPaddingStyle, overrideStyleContainer1);
 var S_ContentsArea = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 64px;\n  padding-top: 64px;\n\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 64px;\n  padding-top: 64px;\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
@@ -114,7 +118,7 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_13 || (templ
     }[layoutType]);
 }, function (_a) {
     var areaColor = _a.areaColor;
-    return "background-color: " + areaColor;
+    return "background-color: ".concat(areaColor);
 });
 var S_Content1 = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
 exports.default = WFA;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { UiColors } from '../../../../../../common';
-export declare type WFBProps = {
+export type WFBProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
     containerColor?: string;

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -40,7 +44,7 @@ var components_1 = require("../../../../../../common/components");
 var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
 var WFB = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFB", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFB", areaColor: areaColor }, { children: [(0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFB" }, { children: content1 }), void 0), (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFB" }, { children: content2 }), void 0)] }), void 0) }, void 0)) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFB", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFB", areaColor: areaColor }, { children: [(0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFB" }, { children: content1 })), (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFB" }, { children: content2 }))] })) })) })));
 };
 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;
@@ -51,11 +55,11 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (t
     return theme.ui_wizard_contentscontainer01_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
-    return "background-color: " + containerColor;
+    return "background-color: ".concat(containerColor);
 }, scrollbarStyle_1.scrollbarWithPaddingStyle, overrideStyleContainer1);
 var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  margin: 0 48px;\n  padding-bottom: 64px;\n  padding-top: 64px;\n  width: 100%;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  margin: 0 48px;\n  padding-bottom: 64px;\n  padding-top: 64px;\n  width: 100%;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
-    return "background-color: " + areaColor;
+    return "background-color: ".concat(areaColor);
 });
 var S_Content1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 360px;\n"], ["\n  width: 360px;\n"])));
 var S_Content2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: 48px;\n  width: 360px;\n"], ["\n  margin-left: 48px;\n  width: 360px;\n"])));

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { UiColors } from '../../../../../../common';
-export declare type WFCProps = {
+export type WFCProps = {
     content1?: JSX.Element;
     containerColor?: string;
     areaColor?: string;

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -39,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WFC = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFC", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFC", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFC" }, { children: content1 }), void 0) }), void 0)) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFC", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFC", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFC" }, { children: content1 })) }))) })));
 };
 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;
@@ -50,11 +54,11 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (t
     return theme.ui_contentscontainer01_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
-    return "background-color: " + containerColor;
+    return "background-color: ".concat(containerColor);
 }, overrideStyleContainer1);
 var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  margin: 0 auto;\n  max-width: 640px;\n  min-width: 480px;\n  padding-bottom: 88px;\n  width: 40%;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  margin: 0 auto;\n  max-width: 640px;\n  min-width: 480px;\n  padding-bottom: 88px;\n  width: 40%;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
-    return "background-color: " + areaColor;
+    return "background-color: ".concat(areaColor);
 });
 var S_Content1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 exports.default = WFC;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { UiColors } from '../../../../../../common';
-export declare type WFDProps = {
+export type WFDProps = {
     content1?: JSX.Element;
     layoutType: 'WFD_1' | 'WFD_2';
     containerColor?: string;

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -39,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WFD = function (_a) {
     var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFD", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFD", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFD", layoutType: layoutType }, { children: content1 }), void 0) }), void 0)) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFD", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFD", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFD", layoutType: layoutType }, { children: content1 })) }))) })));
 };
 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;
@@ -56,7 +60,7 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (t
     }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
-    return "background-color: " + containerColor;
+    return "background-color: ".concat(containerColor);
 }, overrideStyleContainer1);
 var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  margin: 0 auto;\n  min-width: 1200px;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  margin: 0 auto;\n  min-width: 1200px;\n  ", ";\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
@@ -66,7 +70,7 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templa
     }[layoutType]);
 }, function (_a) {
     var areaColor = _a.areaColor;
-    return "background-color: " + areaColor;
+    return "background-color: ".concat(areaColor);
 });
 var S_Content1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { UiColors } from '../../../../../../common';
-export declare type WFEProps = {
+export type WFEProps = {
     layoutType: 'WFE_1' | 'WFE_2' | 'WFE_3' | 'WFE_4';
     content1?: JSX.Element;
     containerColor?: string;

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -40,7 +44,7 @@ var components_1 = require("../../../../../../common/components");
 var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
 var WFE = function (_a) {
     var layoutType = _a.layoutType, content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFE", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFE", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFE", layoutType: layoutType }, { children: content1 }), void 0) }), void 0) }, void 0)) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFE", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFE", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFE", layoutType: layoutType }, { children: content1 })) })) })) })));
 };
 var WFE_1ContainerStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 24px;\n  overflow: hidden;\n  width: 864px;\n"], ["\n  border-radius: 24px;\n  overflow: hidden;\n  width: 864px;\n"])));
 var WFE_2ContainerStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 24px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 864px;\n"], ["\n  border-radius: 24px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 864px;\n"])));
@@ -69,7 +73,7 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_12 || (
     }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
-    return "background-color: " + containerColor;
+    return "background-color: ".concat(containerColor);
 }, scrollbarStyle_1.scrollbarWithPaddingStyle, overrideStyleContainer1);
 var S_ContentsArea = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
@@ -81,7 +85,7 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_13 || (templ
     }[layoutType]);
 }, function (_a) {
     var areaColor = _a.areaColor;
-    return "background-color: " + areaColor;
+    return "background-color: ".concat(areaColor);
 });
 var S_Content1 = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { UiColors } from '../../../../../../common';
-export declare type WFFProps = {
+export type WFFProps = {
     content1?: JSX.Element;
     containerColor?: string;
     areaColor?: string;

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -39,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WFF = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFF", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFF", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFF" }, { children: content1 }), void 0) }), void 0)) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFF", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFF", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFF" }, { children: content1 })) }))) })));
 };
 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;
@@ -50,11 +54,11 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (t
     return theme.ui_contentscontainer01_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
-    return "background-color: " + containerColor;
+    return "background-color: ".concat(containerColor);
 }, 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;
+    return "background-color: ".concat(areaColor);
 });
 var S_Content1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
 exports.default = WFF;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { UiColors } from '../../../../../../common';
-export declare type WFGProps = {
+export type WFGProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
     layoutType: 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6';

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -39,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WFG = function (_a) {
     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 ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFG", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFG", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFG", layoutType: layoutType }, { children: content1 }), void 0) }), void 0)) }), void 0), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFG", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFG", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFG", layoutType: layoutType }, { children: content2 }), void 0) }), void 0)) }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFG", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFG", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFG", layoutType: layoutType }, { children: content1 })) }))) })), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFG", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFG", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFG", layoutType: layoutType }, { children: content2 })) }))) }))] }));
 };
 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;
@@ -65,7 +69,7 @@ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (
     }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
-    return "background-color: " + containerColor;
+    return "background-color: ".concat(containerColor);
 }, 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;
@@ -85,7 +89,7 @@ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (
     }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
-    return "background-color: " + containerColor;
+    return "background-color: ".concat(containerColor);
 }, 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;
@@ -99,7 +103,7 @@ var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templ
     }[layoutType]);
 }, function (_a) {
     var areaColor = _a.areaColor;
-    return "background-color: " + areaColor;
+    return "background-color: ".concat(areaColor);
 });
 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;
@@ -113,7 +117,7 @@ var S_ContentsArea2 = styled_components_1.default.div(templateObject_7 || (templ
     }[layoutType]);
 }, function (_a) {
     var areaColor = _a.areaColor;
-    return "background-color: " + areaColor;
+    return "background-color: ".concat(areaColor);
 });
 var S_Content1 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { UiColors } from '../../../../../../common';
-export declare type WFHProps = {
+export type WFHProps = {
     content1?: JSX.Element;
     containerColor?: string;
     areaColor?: string;

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -39,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WFH = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFH", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFH", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFH" }, { children: content1 }), void 0) }), void 0)) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFH", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFH", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFH" }, { children: content1 })) }))) })));
 };
 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;
@@ -50,11 +54,11 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (t
     return theme.ui_contentscontainer01_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
-    return "background-color: " + containerColor;
+    return "background-color: ".concat(containerColor);
 }, 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;
+    return "background-color: ".concat(areaColor);
 });
 var S_Content1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
 exports.default = WFH;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { UiColors } from '../../../../../../common';
-export declare type WFIProps = {
+export type WFIProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
     layoutType: 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6';

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -39,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WFI = function (_a) {
     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 ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFI", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFI", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFI", layoutType: layoutType }, { children: content1 }), void 0) }), void 0)) }), void 0), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFI", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFI", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFI", layoutType: layoutType }, { children: content2 }), void 0) }), void 0)) }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFI", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFI", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFI", layoutType: layoutType }, { children: content1 })) }))) })), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFI", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFI", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFI", layoutType: layoutType }, { children: content2 })) }))) }))] }));
 };
 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;
@@ -65,7 +69,7 @@ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (
     }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
-    return "background-color: " + containerColor;
+    return "background-color: ".concat(containerColor);
 }, 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;
@@ -85,7 +89,7 @@ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (
     }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
-    return "background-color: " + containerColor;
+    return "background-color: ".concat(containerColor);
 }, 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;
@@ -99,7 +103,7 @@ var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templ
     }[layoutType]);
 }, function (_a) {
     var areaColor = _a.areaColor;
-    return "background-color: " + areaColor;
+    return "background-color: ".concat(areaColor);
 });
 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;
@@ -113,7 +117,7 @@ var S_ContentsArea2 = styled_components_1.default.div(templateObject_7 || (templ
     }[layoutType]);
 }, function (_a) {
     var areaColor = _a.areaColor;
-    return "background-color: " + areaColor;
+    return "background-color: ".concat(areaColor);
 });
 var S_Content1 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { UiColors } from '../../../../../../common';
-export declare type WFJProps = {
+export type WFJProps = {
     content1?: JSX.Element;
     containerColor?: string;
     areaColor?: string;

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -39,7 +43,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WFJ = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFJ", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFJ", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFJ" }, { children: content1 }), void 0) }), void 0)) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFJ", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFJ", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFJ" }, { children: content1 })) }))) })));
 };
 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;
@@ -50,11 +54,11 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (t
     return theme.ui_contentscontainer01_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
-    return "background-color: " + containerColor;
+    return "background-color: ".concat(containerColor);
 }, overrideStyleContainer1);
 var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  padding-top: 24px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  padding-top: 24px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
-    return "background-color: " + areaColor;
+    return "background-color: ".concat(areaColor);
 });
 var S_Content1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
 exports.default = WFJ;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { UiColors } from '../../../../../../common';
-export declare type WFKProps = {
+export type WFKProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
     containerColor?: string;