pds-dev-kit-web 1.8.7 → 1.9.0-beta.0

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

@@ -0,0 +1,15 @@
+"use strict";
+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 variation_1 = require("./variation");
+var StepContainer = function (_a) {
+    var _b = _a.stepType, stepType = _b === void 0 ? 'step_864' : _b, stepContent = _a.stepContent;
+    return (react_1.default.createElement(react_1.default.Fragment, null, {
+        step_864: react_1.default.createElement(variation_1.Step, { stepContent: stepContent, containerWidth: 864 }),
+        step_1152: react_1.default.createElement(variation_1.Step, { stepContent: stepContent, containerWidth: 1152 })
+    }[stepType]));
+};
+exports.default = StepContainer;

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

@@ -0,0 +1 @@
+export { default as StepContainer } from './StepContainer';

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepContainer = void 0;
+var StepContainer_1 = require("./StepContainer");
+Object.defineProperty(exports, "StepContainer", { enumerable: true, get: function () { return __importDefault(StepContainer_1).default; } });

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

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

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

@@ -0,0 +1,31 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __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 Step = function (_a) {
+    var stepContent = _a.stepContent, containerWidth = _a.containerWidth;
+    return (react_1.default.createElement(S_StepContainer, { "x-pds-name": "StepContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", containerWidth: containerWidth },
+        react_1.default.createElement(S_StepArea, { "x-pds-name": "StepArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" },
+            react_1.default.createElement(S_StepContent, { "x-pds-name": "StepContent", "x-pds-element-type": "layout", "x-pds-device-type": "desktop" }, stepContent))));
+};
+var S_StepContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 80px;\n  width: ", "px;\n  min-width: ", "px;\n"], ["\n  background-color: ", ";\n  height: 80px;\n  width: ", "px;\n  min-width: ", "px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_stepcontainer_background;
+}, function (_a) {
+    var containerWidth = _a.containerWidth;
+    return containerWidth;
+}, function (_a) {
+    var containerWidth = _a.containerWidth;
+    return containerWidth;
+});
+var S_StepArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: 24px;\n"], ["\n  box-sizing: border-box;\n  padding-top: 24px;\n"])));
+var S_StepContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 56px;\n  width: 100%;\n  overflow: hidden;\n"], ["\n  height: 56px;\n  width: 100%;\n  overflow: hidden;\n"])));
+exports.default = Step;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1 @@
+export { default as Step } from './Step';

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Step = void 0;
+var Step_1 = require("./Step");
+Object.defineProperty(exports, "Step", { enumerable: true, get: function () { return __importDefault(Step_1).default; } });

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

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

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

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare type ContainersBoxProps = {
-    layoutType: 'WFA_1' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFE_2' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1';
+    layoutType: 'WFA_1' | 'WFA_2' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFE_2' | 'WFE_3' | 'WFE_4' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1' | 'WFL_1';
     pageMenuContent?: JSX.Element;
     subMenuContent?: JSX.Element;
     tabMenuContent?: JSX.Element;

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

@@ -3,77 +3,130 @@ 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 Containers_1 = require("../Containers");
 var ContainersBox = function (_a) {
     var layoutType = _a.layoutType, pageMenuContent = _a.pageMenuContent, subMenuContent = _a.subMenuContent, tabMenuContent = _a.tabMenuContent, stepContent = _a.stepContent, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
-    return (react_1.default.createElement(S_ContainersBox, null,
-        pageMenuContent && (react_1.default.createElement(S_TopWrapper, null,
-            react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuContent: pageMenuContent }))),
-        react_1.default.createElement(S_BottomBox, null,
-            {
-                WFA_1: react_1.default.createElement(react_1.default.Fragment, null),
-                WFB_1: react_1.default.createElement(react_1.default.Fragment, null),
-                WFC_1: react_1.default.createElement(react_1.default.Fragment, null),
-                WFD_1: react_1.default.createElement(react_1.default.Fragment, null),
-                WFD_2: react_1.default.createElement(react_1.default.Fragment, null),
-                WFE_1: react_1.default.createElement(react_1.default.Fragment, null),
-                WFE_2: react_1.default.createElement(react_1.default.Fragment, null),
-                WFF_1: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
-                WFG_1: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
-                WFG_2: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
-                WFG_3: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
-                WFG_4: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
-                WFG_5: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
-                WFG_6: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
-                WFH_1: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
-                WFI_1: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
-                WFI_2: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
-                WFI_3: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
-                WFI_4: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
-                WFI_5: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
-                WFI_6: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
-                WFJ_1: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
-                WFK_1: react_1.default.createElement(react_1.default.Fragment, null)
-            }[layoutType],
-            react_1.default.createElement(S_RightBox, null,
+    var isWizardLayout = layoutType.includes('WFA') ||
+        layoutType.includes('WFB') ||
+        layoutType.includes('WFE') ||
+        layoutType.includes('WFL');
+    var wizardContainerWidthType = layoutType === 'WFE_3' || layoutType === 'WFE_4' || layoutType === 'WFL_1' ? 'large' : 'small';
+    return (react_1.default.createElement(S_Wrapper, { isWizardLayout: isWizardLayout },
+        react_1.default.createElement(S_ContainersBox, { isWizardLayout: isWizardLayout },
+            pageMenuContent && (react_1.default.createElement(S_TopWrapper, null, isWizardLayout ? ({
+                small: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "wizard_page_menu_864", pageMenuContent: pageMenuContent })),
+                large: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "wizard_page_menu_1152", pageMenuContent: pageMenuContent }))
+            }[wizardContainerWidthType]) : (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuContent: pageMenuContent })))),
+            react_1.default.createElement(S_CenterBox, { isWizardLayout: isWizardLayout },
                 {
                     WFA_1: react_1.default.createElement(react_1.default.Fragment, null),
+                    WFA_2: react_1.default.createElement(react_1.default.Fragment, null),
                     WFB_1: react_1.default.createElement(react_1.default.Fragment, null),
                     WFC_1: react_1.default.createElement(react_1.default.Fragment, null),
                     WFD_1: react_1.default.createElement(react_1.default.Fragment, null),
                     WFD_2: react_1.default.createElement(react_1.default.Fragment, null),
                     WFE_1: react_1.default.createElement(react_1.default.Fragment, null),
                     WFE_2: react_1.default.createElement(react_1.default.Fragment, null),
-                    WFF_1: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
-                    WFG_1: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
-                    WFG_2: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
-                    WFG_3: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
-                    WFG_4: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
-                    WFG_5: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
-                    WFG_6: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
-                    WFH_1: react_1.default.createElement(react_1.default.Fragment, null),
-                    WFI_1: react_1.default.createElement(react_1.default.Fragment, null),
-                    WFI_2: react_1.default.createElement(react_1.default.Fragment, null),
-                    WFI_3: react_1.default.createElement(react_1.default.Fragment, null),
-                    WFI_4: react_1.default.createElement(react_1.default.Fragment, null),
-                    WFI_5: react_1.default.createElement(react_1.default.Fragment, null),
-                    WFI_6: react_1.default.createElement(react_1.default.Fragment, null),
-                    WFJ_1: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
-                    WFK_1: react_1.default.createElement(react_1.default.Fragment, null)
+                    WFE_3: react_1.default.createElement(react_1.default.Fragment, null),
+                    WFE_4: react_1.default.createElement(react_1.default.Fragment, null),
+                    WFF_1: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
+                    WFG_1: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
+                    WFG_2: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
+                    WFG_3: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
+                    WFG_4: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
+                    WFG_5: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
+                    WFG_6: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
+                    WFH_1: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
+                    WFI_1: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
+                    WFI_2: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
+                    WFI_3: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
+                    WFI_4: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
+                    WFI_5: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
+                    WFI_6: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
+                    WFJ_1: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
+                    WFK_1: react_1.default.createElement(react_1.default.Fragment, null),
+                    WFL_1: react_1.default.createElement(react_1.default.Fragment, null)
                 }[layoutType],
-                react_1.default.createElement(S_ContentsWrapper, null,
-                    react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, stepContent: stepContent, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 }))))));
+                react_1.default.createElement(S_RightBox, null,
+                    {
+                        WFA_1: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFA_2: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFB_1: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFC_1: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFD_1: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFD_2: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFE_1: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFE_2: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFE_3: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFE_4: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFF_1: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
+                        WFG_1: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
+                        WFG_2: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
+                        WFG_3: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
+                        WFG_4: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
+                        WFG_5: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
+                        WFG_6: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
+                        WFH_1: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFI_1: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFI_2: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFI_3: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFI_4: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFI_5: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFI_6: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFJ_1: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
+                        WFK_1: react_1.default.createElement(react_1.default.Fragment, null),
+                        WFL_1: react_1.default.createElement(react_1.default.Fragment, null)
+                    }[layoutType],
+                    react_1.default.createElement(S_ContentsWrapper, null,
+                        react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })))),
+            isWizardLayout && (react_1.default.createElement(S_BottomWrapper, null, {
+                small: react_1.default.createElement(Containers_1.StepContainer, { stepType: "step_864", stepContent: stepContent }),
+                large: react_1.default.createElement(Containers_1.StepContainer, { stepType: "step_1152", stepContent: stepContent })
+            }[wizardContainerWidthType])))));
 };
-var S_ContainersBox = 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_TopWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
-var S_BottomBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n  overflow: hidden;\n  align-items: flex-start;\n  display: flex;\n"], ["\n  flex: 1;\n  overflow: hidden;\n  align-items: flex-start;\n  display: flex;\n"])));
-var S_RightBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n  max-width: 100%;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n  max-width: 100%;\n"])));
-var S_ContentsWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex: 1;\n  overflow: hidden;\n"], ["\n  flex: 1;\n  overflow: hidden;\n"])));
+var wizardBackgroundStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-image: url('https://publ-statics.s3.ap-northeast-2.amazonaws.com/pds_layout_background_gradient.jpg');\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n"], ["\n  background-image: url('https://publ-statics.s3.ap-northeast-2.amazonaws.com/pds_layout_background_gradient.jpg');\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n"])));
+var wizardContainersBoxStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
+var wizardCenterBoxStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: none;\n"], ["\n  flex: none;\n"])));
+var S_Wrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  ", "\n"])), function (_a) {
+    var isWizardLayout = _a.isWizardLayout;
+    return isWizardLayout && wizardBackgroundStyle;
+});
+var S_ContainersBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  ", "\n"])), function (_a) {
+    var isWizardLayout = _a.isWizardLayout;
+    return isWizardLayout && wizardContainersBoxStyle;
+});
+var S_TopWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_CenterBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex: 1;\n  overflow: hidden;\n  align-items: flex-start;\n  display: flex;\n\n  ", "\n"], ["\n  flex: 1;\n  overflow: hidden;\n  align-items: flex-start;\n  display: flex;\n\n  ", "\n"])), function (_a) {
+    var isWizardLayout = _a.isWizardLayout;
+    return isWizardLayout && wizardCenterBoxStyle;
+});
+var S_RightBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n  max-width: 100%;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n  max-width: 100%;\n"])));
+var S_ContentsWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex: 1;\n  overflow: hidden;\n"], ["\n  flex: 1;\n  overflow: hidden;\n"])));
+var S_BottomWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 exports.default = ContainersBox;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/dist/storybook-static/{0.1e64cc00.iframe.bundle.js → 0.ade47ed3.iframe.bundle.js}

@@ -1,4 +1,4 @@
-(window.webpackJsonp = window.webpackJsonp || []).push([[0], { 2157: function (module, exports) { var hasElementType = "undefined" != typeof Element, hasMap = "function" == typeof Map, hasSet = "function" == typeof Set, hasArrayBuffer = "function" == typeof ArrayBuffer && !!ArrayBuffer.isView; function equal(a, b) { if (a === b)
+(window.webpackJsonp = window.webpackJsonp || []).push([[0], { 2177: function (module, exports) { var hasElementType = "undefined" != typeof Element, hasMap = "function" == typeof Map, hasSet = "function" == typeof Set, hasArrayBuffer = "function" == typeof ArrayBuffer && !!ArrayBuffer.isView; function equal(a, b) { if (a === b)
             return !0; if (a && b && "object" == typeof a && "object" == typeof b) {
             if (a.constructor !== b.constructor)
                 return !1;
@@ -62,15 +62,15 @@
             if ((error.message || "").match(/stack|recursion/i))
                 return console.warn("react-fast-compare cannot handle circular refs"), !1;
             throw error;
-        } }; }, 2158: function (module, exports, __webpack_require__) {
+        } }; }, 2178: function (module, exports, __webpack_require__) {
             "use strict";
             var warning = function () { };
             module.exports = warning;
-        }, 700: function (module, __webpack_exports__, __webpack_require__) {
+        }, 689: function (module, __webpack_exports__, __webpack_require__) {
             "use strict";
             __webpack_require__.r(__webpack_exports__), __webpack_require__.d(__webpack_exports__, "WithTooltipPure", (function () { return WithTooltip_WithTooltipPure; })), __webpack_require__.d(__webpack_exports__, "WithToolTipState", (function () { return WithTooltip_WithToolTipState; })), __webpack_require__.d(__webpack_exports__, "WithTooltip", (function () { return WithTooltip_WithToolTipState; }));
-            __webpack_require__(16), __webpack_require__(43), __webpack_require__(26), __webpack_require__(7), __webpack_require__(19), __webpack_require__(12), __webpack_require__(10), __webpack_require__(21), __webpack_require__(15), __webpack_require__(17), __webpack_require__(9), __webpack_require__(30), __webpack_require__(18), __webpack_require__(51);
-            var react = __webpack_require__(0), react_default = __webpack_require__.n(react), esm = __webpack_require__(3), global_window = __webpack_require__(11), window_default = __webpack_require__.n(global_window), objectWithoutPropertiesLoose = __webpack_require__(114), esm_extends = __webpack_require__(23), inheritsLoose = __webpack_require__(58), react_dom = __webpack_require__(61), ManagerReferenceNodeContext = react.createContext(), ManagerReferenceNodeSetterContext = react.createContext();
+            __webpack_require__(16), __webpack_require__(44), __webpack_require__(26), __webpack_require__(7), __webpack_require__(19), __webpack_require__(12), __webpack_require__(10), __webpack_require__(21), __webpack_require__(15), __webpack_require__(17), __webpack_require__(9), __webpack_require__(30), __webpack_require__(18), __webpack_require__(53);
+            var react = __webpack_require__(0), react_default = __webpack_require__.n(react), esm = __webpack_require__(3), global_window = __webpack_require__(11), window_default = __webpack_require__.n(global_window), objectWithoutPropertiesLoose = __webpack_require__(116), esm_extends = __webpack_require__(23), inheritsLoose = __webpack_require__(59), react_dom = __webpack_require__(62), ManagerReferenceNodeContext = react.createContext(), ManagerReferenceNodeSetterContext = react.createContext();
             function Manager(_ref) { var children = _ref.children, _React$useState = react.useState(null), referenceNode = _React$useState[0], setReferenceNode = _React$useState[1], hasUnmounted = react.useRef(!1); react.useEffect((function () { return function () { hasUnmounted.current = !0; }; }), []); var handleSetReferenceNode = react.useCallback((function (node) { hasUnmounted.current || setReferenceNode(node); }), []); return react.createElement(ManagerReferenceNodeContext.Provider, { value: referenceNode }, react.createElement(ManagerReferenceNodeSetterContext.Provider, { value: handleSetReferenceNode }, children)); }
             var unwrapArray = function unwrapArray(arg) { return Array.isArray(arg) ? arg[0] : arg; }, safeInvoke = function safeInvoke(fn) { if ("function" == typeof fn) {
                 for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++)
@@ -227,12 +227,12 @@
                         } }, requiresIfExists: ["offset"] }, { name: "arrow", enabled: !0, phase: "main", fn: function arrow(_ref) { var _state$modifiersData$, state = _ref.state, name = _ref.name, options = _ref.options, arrowElement = state.elements.arrow, popperOffsets = state.modifiersData.popperOffsets, basePlacement = getBasePlacement(state.placement), axis = getMainAxisFromPlacement(basePlacement), len = [left, right].indexOf(basePlacement) >= 0 ? "height" : "width"; if (arrowElement && popperOffsets) {
                             var paddingObject = function toPaddingObject(padding, state) { return mergePaddingObject("number" != typeof (padding = "function" == typeof padding ? padding(Object.assign({}, state.rects, { placement: state.placement })) : padding) ? padding : expandToHashMap(padding, basePlacements)); }(options.padding, state), arrowRect = getLayoutRect(arrowElement), minProp = "y" === axis ? enums_top : left, maxProp = "y" === axis ? bottom : right, endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len], startDiff = popperOffsets[axis] - state.rects.reference[axis], arrowOffsetParent = getOffsetParent(arrowElement), clientSize = arrowOffsetParent ? "y" === axis ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0, centerToReference = endDiff / 2 - startDiff / 2, min = paddingObject[minProp], max = clientSize - arrowRect[len] - paddingObject[maxProp], center = clientSize / 2 - arrowRect[len] / 2 + centerToReference, offset = within(min, center, max), axisProp = axis;
                             state.modifiersData[name] = ((_state$modifiersData$ = {})[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$);
-                        } }, effect: function arrow_effect(_ref2) { var state = _ref2.state, _options$element = _ref2.options.element, arrowElement = void 0 === _options$element ? "[data-popper-arrow]" : _options$element; null != arrowElement && ("string" != typeof arrowElement || (arrowElement = state.elements.popper.querySelector(arrowElement))) && contains(state.elements.popper, arrowElement) && (state.elements.arrow = arrowElement); }, requires: ["popperOffsets"], requiresIfExists: ["preventOverflow"] }, { name: "hide", enabled: !0, phase: "main", requiresIfExists: ["preventOverflow"], fn: function hide(_ref) { var state = _ref.state, name = _ref.name, referenceRect = state.rects.reference, popperRect = state.rects.popper, preventedOffsets = state.modifiersData.preventOverflow, referenceOverflow = detectOverflow(state, { elementContext: "reference" }), popperAltOverflow = detectOverflow(state, { altBoundary: !0 }), referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect), popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets), isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets), hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets); state.modifiersData[name] = { referenceClippingOffsets: referenceClippingOffsets, popperEscapeOffsets: popperEscapeOffsets, isReferenceHidden: isReferenceHidden, hasPopperEscaped: hasPopperEscaped }, state.attributes.popper = Object.assign({}, state.attributes.popper, { "data-popper-reference-hidden": isReferenceHidden, "data-popper-escaped": hasPopperEscaped }); } }] }), react_fast_compare = __webpack_require__(2157), react_fast_compare_default = __webpack_require__.n(react_fast_compare), EMPTY_MODIFIERS = [], NOOP = function NOOP() { }, NOOP_PROMISE = function NOOP_PROMISE() { return Promise.resolve(null); }, Popper_EMPTY_MODIFIERS = [];
+                        } }, effect: function arrow_effect(_ref2) { var state = _ref2.state, _options$element = _ref2.options.element, arrowElement = void 0 === _options$element ? "[data-popper-arrow]" : _options$element; null != arrowElement && ("string" != typeof arrowElement || (arrowElement = state.elements.popper.querySelector(arrowElement))) && contains(state.elements.popper, arrowElement) && (state.elements.arrow = arrowElement); }, requires: ["popperOffsets"], requiresIfExists: ["preventOverflow"] }, { name: "hide", enabled: !0, phase: "main", requiresIfExists: ["preventOverflow"], fn: function hide(_ref) { var state = _ref.state, name = _ref.name, referenceRect = state.rects.reference, popperRect = state.rects.popper, preventedOffsets = state.modifiersData.preventOverflow, referenceOverflow = detectOverflow(state, { elementContext: "reference" }), popperAltOverflow = detectOverflow(state, { altBoundary: !0 }), referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect), popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets), isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets), hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets); state.modifiersData[name] = { referenceClippingOffsets: referenceClippingOffsets, popperEscapeOffsets: popperEscapeOffsets, isReferenceHidden: isReferenceHidden, hasPopperEscaped: hasPopperEscaped }, state.attributes.popper = Object.assign({}, state.attributes.popper, { "data-popper-reference-hidden": isReferenceHidden, "data-popper-escaped": hasPopperEscaped }); } }] }), react_fast_compare = __webpack_require__(2177), react_fast_compare_default = __webpack_require__.n(react_fast_compare), EMPTY_MODIFIERS = [], NOOP = function NOOP() { }, NOOP_PROMISE = function NOOP_PROMISE() { return Promise.resolve(null); }, Popper_EMPTY_MODIFIERS = [];
             function Popper(_ref) { var _ref$placement = _ref.placement, placement = void 0 === _ref$placement ? "bottom" : _ref$placement, _ref$strategy = _ref.strategy, strategy = void 0 === _ref$strategy ? "absolute" : _ref$strategy, _ref$modifiers = _ref.modifiers, modifiers = void 0 === _ref$modifiers ? Popper_EMPTY_MODIFIERS : _ref$modifiers, referenceElement = _ref.referenceElement, onFirstUpdate = _ref.onFirstUpdate, innerRef = _ref.innerRef, children = _ref.children, referenceNode = react.useContext(ManagerReferenceNodeContext), _React$useState = react.useState(null), popperElement = _React$useState[0], setPopperElement = _React$useState[1], _React$useState2 = react.useState(null), arrowElement = _React$useState2[0], setArrowElement = _React$useState2[1]; react.useEffect((function () { setRef(innerRef, popperElement); }), [innerRef, popperElement]); var options = react.useMemo((function () { return { placement: placement, strategy: strategy, onFirstUpdate: onFirstUpdate, modifiers: [].concat(modifiers, [{ name: "arrow", enabled: null != arrowElement, options: { element: arrowElement } }]) }; }), [placement, strategy, onFirstUpdate, modifiers, arrowElement]), _usePopper = function usePopper(referenceElement, popperElement, options) { void 0 === options && (options = {}); var prevOptions = react.useRef(null), optionsWithDefaults = { onFirstUpdate: options.onFirstUpdate, placement: options.placement || "bottom", strategy: options.strategy || "absolute", modifiers: options.modifiers || EMPTY_MODIFIERS }, _React$useState = react.useState({ styles: { popper: { position: optionsWithDefaults.strategy, left: "0", top: "0" }, arrow: { position: "absolute" } }, attributes: {} }), state = _React$useState[0], setState = _React$useState[1], updateStateModifier = react.useMemo((function () { return { name: "updateState", enabled: !0, phase: "write", fn: function fn(_ref) { var state = _ref.state, elements = Object.keys(state.elements); setState({ styles: fromEntries(elements.map((function (element) { return [element, state.styles[element] || {}]; }))), attributes: fromEntries(elements.map((function (element) { return [element, state.attributes[element]]; }))) }); }, requires: ["computeStyles"] }; }), []), popperOptions = react.useMemo((function () { var newOptions = { onFirstUpdate: optionsWithDefaults.onFirstUpdate, placement: optionsWithDefaults.placement, strategy: optionsWithDefaults.strategy, modifiers: [].concat(optionsWithDefaults.modifiers, [updateStateModifier, { name: "applyStyles", enabled: !1 }]) }; return react_fast_compare_default()(prevOptions.current, newOptions) ? prevOptions.current || newOptions : (prevOptions.current = newOptions, newOptions); }), [optionsWithDefaults.onFirstUpdate, optionsWithDefaults.placement, optionsWithDefaults.strategy, optionsWithDefaults.modifiers, updateStateModifier]), popperInstanceRef = react.useRef(); return useIsomorphicLayoutEffect((function () { popperInstanceRef.current && popperInstanceRef.current.setOptions(popperOptions); }), [popperOptions]), useIsomorphicLayoutEffect((function () { if (null != referenceElement && null != popperElement) {
                 var popperInstance = (options.createPopper || popper_createPopper)(referenceElement, popperElement, popperOptions);
                 return popperInstanceRef.current = popperInstance, function () { popperInstance.destroy(), popperInstanceRef.current = null; };
             } }), [referenceElement, popperElement, options.createPopper]), { state: popperInstanceRef.current ? popperInstanceRef.current.state : null, styles: state.styles, attributes: state.attributes, update: popperInstanceRef.current ? popperInstanceRef.current.update : null, forceUpdate: popperInstanceRef.current ? popperInstanceRef.current.forceUpdate : null }; }(referenceElement || referenceNode, popperElement, options), state = _usePopper.state, styles = _usePopper.styles, forceUpdate = _usePopper.forceUpdate, update = _usePopper.update, childrenProps = react.useMemo((function () { return { ref: setPopperElement, style: styles.popper, placement: state ? state.placement : placement, hasPopperEscaped: state && state.modifiersData.hide ? state.modifiersData.hide.hasPopperEscaped : null, isReferenceHidden: state && state.modifiersData.hide ? state.modifiersData.hide.isReferenceHidden : null, arrowProps: { style: styles.arrow, ref: setArrowElement }, forceUpdate: forceUpdate || NOOP, update: update || NOOP_PROMISE }; }), [setPopperElement, setArrowElement, placement, state, styles, update, forceUpdate]); return unwrapArray(children)(childrenProps); }
-            var warning = __webpack_require__(2158), warning_default = __webpack_require__.n(warning);
+            var warning = __webpack_require__(2178), warning_default = __webpack_require__.n(warning);
             function Reference(_ref) { var children = _ref.children, innerRef = _ref.innerRef, setReferenceNode = react.useContext(ManagerReferenceNodeSetterContext), refHandler = react.useCallback((function (node) { setRef(innerRef, node), safeInvoke(setReferenceNode, node); }), [innerRef, setReferenceNode]); return react.useEffect((function () { return function () { return setRef(innerRef, null); }; })), react.useEffect((function () { warning_default()(Boolean(setReferenceNode), "`Reference` should not be used outside of a `Manager` component."); }), [setReferenceNode]), unwrapArray(children)({ ref: refHandler }); }
             var TooltipContext = react_default.a.createContext({}), callAll = function callAll() { for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++)
                 fns[_key] = arguments[_key]; return function () { for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++)
@@ -258,7 +258,7 @@
                 style.transform = "translate3d(" + x + "px, " + y + "px, 0";
             } return react_default.a.createElement(react_popper_tooltip_Tooltip, Object(esm_extends.a)({ arrowProps: arrowProps, closeOnReferenceHidden: closeOnReferenceHidden, isReferenceHidden: isReferenceHidden, placement: placement, update: update, style: style, tooltip: tooltip, trigger: trigger, mutationObserverOptions: mutationObserverOptions }, { clearScheduled: _this2.clearScheduled, hideTooltip: _this2.hideTooltip, innerRef: ref })); })); return react_default.a.createElement(Manager, null, react_default.a.createElement(Reference, { innerRef: getTriggerRef }, (function (_ref4) { var ref = _ref4.ref; return children({ getTriggerProps: _this2.getTriggerProps, triggerRef: ref }); })), this.getState() && (usePortal ? Object(react_dom.createPortal)(popper, portalContainer) : popper)); }, _proto.isControlled = function isControlled() { return void 0 !== this.props.tooltipShown; }, _proto.getState = function getState() { return this.isControlled() ? this.props.tooltipShown : this.state.tooltipShown; }, _proto.isTriggeredBy = function isTriggeredBy(event) { var trigger = this.props.trigger; return trigger === event || Array.isArray(trigger) && trigger.includes(event); }, TooltipTrigger; }(react.Component);
             react_popper_tooltip_TooltipTrigger.defaultProps = { closeOnReferenceHidden: !0, defaultTooltipShown: !1, delayHide: 0, delayShow: 0, followCursor: !1, onVisibilityChange: function noop() { }, placement: "right", portalContainer: canUseDOM() ? document.body : null, trigger: "hover", usePortal: canUseDOM(), mutationObserverOptions: { childList: !0, subtree: !0 }, modifiers: [] };
-            var react_popper_tooltip = react_popper_tooltip_TooltipTrigger, memoizerific = (__webpack_require__(84), __webpack_require__(32), __webpack_require__(176), __webpack_require__(24), __webpack_require__(163)), memoizerific_default = __webpack_require__.n(memoizerific), utils = __webpack_require__(110);
+            var react_popper_tooltip = react_popper_tooltip_TooltipTrigger, memoizerific = (__webpack_require__(84), __webpack_require__(32), __webpack_require__(176), __webpack_require__(24), __webpack_require__(163)), memoizerific_default = __webpack_require__.n(memoizerific), utils = __webpack_require__(112);
             function _extends() { return _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) {
                 var source = arguments[i];
                 for (var key in source)