pds-dev-kit-web-test 0.0.1

package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.js

@@ -0,0 +1,100 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_router_dom_1 = require("react-router-dom");
+var styled_components_1 = __importStar(require("styled-components"));
+var TextLabel_1 = require("../TextLabel");
+function UserDesktopTabBar(_a) {
+    var itemArray = _a.itemArray, _b = _a.styleTheme, styleTheme = _b === void 0 ? 'main' : _b, textArray = _a.textArray;
+    var history = (0, react_router_dom_1.useHistory)();
+    var pathname = (0, react_router_dom_1.useLocation)().pathname;
+    if (itemArray) {
+        var handleClickTabItem_1 = function (item) {
+            if (item.onClick) {
+                item.onClick();
+            }
+        };
+        return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function () { return handleClickTabItem_1(item); } },
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }))); })));
+    }
+    if (textArray) {
+        var handleClick_1 = function (value) {
+            if (value) {
+                history.push(value.path);
+            }
+        };
+        return (react_1.default.createElement(S_TabBar, null, textArray.map(function (item) { return (react_1.default.createElement(S_TabWrapper, { key: item.path, styleTheme: styleTheme, isActive: pathname === item.path, onClick: function () {
+                handleClick_1(item);
+            } },
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, styleTheme: pathname === item.path ? 'body2Bold' : 'body2Regular', colorTheme: pathname === item.path ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }))); })));
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null);
+}
+// NOTE: Tab item 활성화 시 text에 bold가 적용되는데, 이때 font-family에 따라 text 영역의 너비가 변경되어 시각적 변동을 일으키는 문제를 해결하기 위한 처리입니다.
+var textOffset = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  content: ", ";\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n"], ["\n  display: block;\n  content: ", ";\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n"])), function (_a) {
+    var text = _a.text;
+    return "'" + text + "'";
+});
+var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n\n  & > div::before {\n    font-weight: ", ";\n    ", "\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    ", "\n  }\n"], ["\n  ", "\n\n  & > div::before {\n    font-weight: ", ";\n    ", "\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    ", "\n  }\n"])), function (_a) {
+    var styleTheme = _a.styleTheme;
+    switch (styleTheme) {
+        case 'main':
+            return mainStyle; // TODO : 추후 styleTheme 의 enum 값이 추가되면 수정
+        default:
+            return mainStyle;
+    }
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fontWeight.normal;
+}, textOffset, function (_a) {
+    var theme = _a.theme;
+    return theme.fontWeight.bold;
+}, textOffset);
+var mainStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  background-color: ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  background-color: ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var isActive = _a.isActive, theme = _a.theme;
+    return isActive && theme.ui_cpnt_tabbar_base_area;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_tabbar_border_active_indicator_primary;
+}, function (_a) {
+    var isActive = _a.isActive;
+    return !isActive && "display: none;";
+});
+var S_TabBar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_tabbar_base_area;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider;
+});
+exports.default = UserDesktopTabBar;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/desktop/components/UserDesktopTabBar/index.d.ts

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

package/dist/src/desktop/components/UserDesktopTabBar/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.UserDesktopTabBar = void 0;
+var UserDesktopTabBar_1 = require("./UserDesktopTabBar");
+Object.defineProperty(exports, "UserDesktopTabBar", { enumerable: true, get: function () { return __importDefault(UserDesktopTabBar_1).default; } });

package/dist/src/desktop/components/index.d.ts

@@ -0,0 +1,43 @@
+import { AdminList } from './AdminList';
+import { AdminListHeader } from './AdminListHeader';
+import { AdminListItem } from './AdminListItem';
+import { BasicFormGroup } from './BasicFormGroup';
+import { BasicList } from './BasicList';
+import { BasicListItem } from './BasicListItem';
+import { BlogTextField } from './BlogTextField';
+import { BodyTextGroup } from './BodyTextGroup';
+import { Card } from './Card';
+import { CardList } from './CardList';
+import { Checkbox } from './Checkbox';
+import { Chip } from './Chip';
+import { ContextMenu } from './ContextMenu';
+import { ContextMenuItem } from './ContextMenuItem';
+import { DesktopAlertDialog } from './DesktopAlertDialog';
+import { DesktopBasicModal } from './DesktopBasicModal';
+import { DesktopHeaderBar } from './DesktopHeaderBar';
+import { DesktopHeadlessModal } from './DesktopHeadlessModal';
+import { DesktopTabBar } from './DesktopTabBar';
+import { Dropdown } from './Dropdown';
+import { DynamicDesktopNavBar } from './DynamicDesktopNavBar';
+import { EditApplyTextField } from './EditApplyTextField';
+import { FilterBar } from './FilterBar';
+import { FloatingActionButton } from './FloatingActionButton';
+import { Hero } from './Hero';
+import { HorizontalFormGroup } from './HorizontalFormGroup';
+import { IconButton } from './IconButton';
+import { ImageSlide } from './ImageSlide';
+import { MainButton } from './MainButton';
+import { PageTitleTextGroup } from './PageTitleTextGroup';
+import { Radio } from './Radio';
+import { ReactionButton } from './ReactionButton';
+import { Select } from './Select';
+import { StatusBlock } from './StatusBlock';
+import { TextButton } from './TextButton';
+import { TextField } from './TextField';
+import { TextLabel } from './TextLabel';
+import { UploadIconButton } from './UploadIconButton';
+import { UploadMainButton } from './UploadMainButton';
+import { UploadTextButton } from './UploadTextButton';
+import { UserDesktopNavBar } from './UserDesktopNavBar';
+import { UserDesktopTabBar } from './UserDesktopTabBar';
+export { AdminList, AdminListHeader, AdminListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopBasicModal, DesktopHeaderBar, DesktopHeadlessModal, DesktopTabBar, Dropdown, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, MainButton, PageTitleTextGroup, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, DynamicDesktopNavBar };

package/dist/src/desktop/components/index.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DynamicDesktopNavBar = exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.PageTitleTextGroup = exports.MainButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeadlessModal = exports.DesktopHeaderBar = exports.DesktopBasicModal = exports.DesktopAlertDialog = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
+var AdminList_1 = require("./AdminList");
+Object.defineProperty(exports, "AdminList", { enumerable: true, get: function () { return AdminList_1.AdminList; } });
+var AdminListHeader_1 = require("./AdminListHeader");
+Object.defineProperty(exports, "AdminListHeader", { enumerable: true, get: function () { return AdminListHeader_1.AdminListHeader; } });
+var AdminListItem_1 = require("./AdminListItem");
+Object.defineProperty(exports, "AdminListItem", { enumerable: true, get: function () { return AdminListItem_1.AdminListItem; } });
+var BasicFormGroup_1 = require("./BasicFormGroup");
+Object.defineProperty(exports, "BasicFormGroup", { enumerable: true, get: function () { return BasicFormGroup_1.BasicFormGroup; } });
+var BasicList_1 = require("./BasicList");
+Object.defineProperty(exports, "BasicList", { enumerable: true, get: function () { return BasicList_1.BasicList; } });
+var BasicListItem_1 = require("./BasicListItem");
+Object.defineProperty(exports, "BasicListItem", { enumerable: true, get: function () { return BasicListItem_1.BasicListItem; } });
+var BlogTextField_1 = require("./BlogTextField");
+Object.defineProperty(exports, "BlogTextField", { enumerable: true, get: function () { return BlogTextField_1.BlogTextField; } });
+var BodyTextGroup_1 = require("./BodyTextGroup");
+Object.defineProperty(exports, "BodyTextGroup", { enumerable: true, get: function () { return BodyTextGroup_1.BodyTextGroup; } });
+var Card_1 = require("./Card");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
+var CardList_1 = require("./CardList");
+Object.defineProperty(exports, "CardList", { enumerable: true, get: function () { return CardList_1.CardList; } });
+var Checkbox_1 = require("./Checkbox");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
+var Chip_1 = require("./Chip");
+Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return Chip_1.Chip; } });
+var ContextMenu_1 = require("./ContextMenu");
+Object.defineProperty(exports, "ContextMenu", { enumerable: true, get: function () { return ContextMenu_1.ContextMenu; } });
+var ContextMenuItem_1 = require("./ContextMenuItem");
+Object.defineProperty(exports, "ContextMenuItem", { enumerable: true, get: function () { return ContextMenuItem_1.ContextMenuItem; } });
+var DesktopAlertDialog_1 = require("./DesktopAlertDialog");
+Object.defineProperty(exports, "DesktopAlertDialog", { enumerable: true, get: function () { return DesktopAlertDialog_1.DesktopAlertDialog; } });
+var DesktopBasicModal_1 = require("./DesktopBasicModal");
+Object.defineProperty(exports, "DesktopBasicModal", { enumerable: true, get: function () { return DesktopBasicModal_1.DesktopBasicModal; } });
+var DesktopHeaderBar_1 = require("./DesktopHeaderBar");
+Object.defineProperty(exports, "DesktopHeaderBar", { enumerable: true, get: function () { return DesktopHeaderBar_1.DesktopHeaderBar; } });
+var DesktopHeadlessModal_1 = require("./DesktopHeadlessModal");
+Object.defineProperty(exports, "DesktopHeadlessModal", { enumerable: true, get: function () { return DesktopHeadlessModal_1.DesktopHeadlessModal; } });
+var DesktopTabBar_1 = require("./DesktopTabBar");
+Object.defineProperty(exports, "DesktopTabBar", { enumerable: true, get: function () { return DesktopTabBar_1.DesktopTabBar; } });
+var Dropdown_1 = require("./Dropdown");
+Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return Dropdown_1.Dropdown; } });
+var DynamicDesktopNavBar_1 = require("./DynamicDesktopNavBar");
+Object.defineProperty(exports, "DynamicDesktopNavBar", { enumerable: true, get: function () { return DynamicDesktopNavBar_1.DynamicDesktopNavBar; } });
+var EditApplyTextField_1 = require("./EditApplyTextField");
+Object.defineProperty(exports, "EditApplyTextField", { enumerable: true, get: function () { return EditApplyTextField_1.EditApplyTextField; } });
+var FilterBar_1 = require("./FilterBar");
+Object.defineProperty(exports, "FilterBar", { enumerable: true, get: function () { return FilterBar_1.FilterBar; } });
+var FloatingActionButton_1 = require("./FloatingActionButton");
+Object.defineProperty(exports, "FloatingActionButton", { enumerable: true, get: function () { return FloatingActionButton_1.FloatingActionButton; } });
+var Hero_1 = require("./Hero");
+Object.defineProperty(exports, "Hero", { enumerable: true, get: function () { return Hero_1.Hero; } });
+var HorizontalFormGroup_1 = require("./HorizontalFormGroup");
+Object.defineProperty(exports, "HorizontalFormGroup", { enumerable: true, get: function () { return HorizontalFormGroup_1.HorizontalFormGroup; } });
+var IconButton_1 = require("./IconButton");
+Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return IconButton_1.IconButton; } });
+var ImageSlide_1 = require("./ImageSlide");
+Object.defineProperty(exports, "ImageSlide", { enumerable: true, get: function () { return ImageSlide_1.ImageSlide; } });
+var MainButton_1 = require("./MainButton");
+Object.defineProperty(exports, "MainButton", { enumerable: true, get: function () { return MainButton_1.MainButton; } });
+var PageTitleTextGroup_1 = require("./PageTitleTextGroup");
+Object.defineProperty(exports, "PageTitleTextGroup", { enumerable: true, get: function () { return PageTitleTextGroup_1.PageTitleTextGroup; } });
+var Radio_1 = require("./Radio");
+Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_1.Radio; } });
+var ReactionButton_1 = require("./ReactionButton");
+Object.defineProperty(exports, "ReactionButton", { enumerable: true, get: function () { return ReactionButton_1.ReactionButton; } });
+var Select_1 = require("./Select");
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
+var StatusBlock_1 = require("./StatusBlock");
+Object.defineProperty(exports, "StatusBlock", { enumerable: true, get: function () { return StatusBlock_1.StatusBlock; } });
+var TextButton_1 = require("./TextButton");
+Object.defineProperty(exports, "TextButton", { enumerable: true, get: function () { return TextButton_1.TextButton; } });
+var TextField_1 = require("./TextField");
+Object.defineProperty(exports, "TextField", { enumerable: true, get: function () { return TextField_1.TextField; } });
+var TextLabel_1 = require("./TextLabel");
+Object.defineProperty(exports, "TextLabel", { enumerable: true, get: function () { return TextLabel_1.TextLabel; } });
+var UploadIconButton_1 = require("./UploadIconButton");
+Object.defineProperty(exports, "UploadIconButton", { enumerable: true, get: function () { return UploadIconButton_1.UploadIconButton; } });
+var UploadMainButton_1 = require("./UploadMainButton");
+Object.defineProperty(exports, "UploadMainButton", { enumerable: true, get: function () { return UploadMainButton_1.UploadMainButton; } });
+var UploadTextButton_1 = require("./UploadTextButton");
+Object.defineProperty(exports, "UploadTextButton", { enumerable: true, get: function () { return UploadTextButton_1.UploadTextButton; } });
+var UserDesktopNavBar_1 = require("./UserDesktopNavBar");
+Object.defineProperty(exports, "UserDesktopNavBar", { enumerable: true, get: function () { return UserDesktopNavBar_1.UserDesktopNavBar; } });
+var UserDesktopTabBar_1 = require("./UserDesktopTabBar");
+Object.defineProperty(exports, "UserDesktopTabBar", { enumerable: true, get: function () { return UserDesktopTabBar_1.UserDesktopTabBar; } });

package/dist/src/desktop/index.d.ts

@@ -0,0 +1,13 @@
+import { LayoutWF } from './layout/LayoutWF';
+import { ContainersBox as WFContainersBox } from './layout/LayoutWF/ContainersBox';
+export { LayoutWF, WFContainersBox };
+import { LayoutWS } from './layout/LayoutWS';
+import { GlobalMenuContainer as WSGlobalMenuContainer } from './layout/LayoutWS/Containers';
+import { ContainersBox as WSContainersBox } from './layout/LayoutWS/ContainersBox';
+export { LayoutWS, WSGlobalMenuContainer, WSContainersBox };
+import { LayoutWT } from './layout/LayoutWT';
+import { GlobalMenuContainer as WTGlobalMenuContainer } from './layout/LayoutWT/Containers';
+import { ContainersBox as WTContainersBox } from './layout/LayoutWT/ContainersBox';
+export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
+import { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, Card as D_Card, CardList as D_CardList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopBasicModal as D_DesktopBasicModal, DesktopHeaderBar as D_DesktopHeaderBar, DesktopHeadlessModal as D_DesktopHeadlessModal, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, Select as D_Select, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, DynamicDesktopNavBar as D_DynamicDesktopNavBar } from './components';
+export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_Select, D_ReactionButton, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_DynamicDesktopNavBar };

package/dist/src/desktop/index.js

@@ -0,0 +1,68 @@
+"use strict";
+/* eslint-disable import/order */
+/* eslint-disable import/first */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.D_DynamicDesktopNavBar = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_ReactionButton = exports.D_Select = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeadlessModal = exports.D_DesktopHeaderBar = exports.D_DesktopBasicModal = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = void 0;
+// layoutWF
+var LayoutWF_1 = require("./layout/LayoutWF");
+Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
+var ContainersBox_1 = require("./layout/LayoutWF/ContainersBox");
+Object.defineProperty(exports, "WFContainersBox", { enumerable: true, get: function () { return ContainersBox_1.ContainersBox; } });
+// layoutWS
+var LayoutWS_1 = require("./layout/LayoutWS");
+Object.defineProperty(exports, "LayoutWS", { enumerable: true, get: function () { return LayoutWS_1.LayoutWS; } });
+var Containers_1 = require("./layout/LayoutWS/Containers");
+Object.defineProperty(exports, "WSGlobalMenuContainer", { enumerable: true, get: function () { return Containers_1.GlobalMenuContainer; } });
+var ContainersBox_2 = require("./layout/LayoutWS/ContainersBox");
+Object.defineProperty(exports, "WSContainersBox", { enumerable: true, get: function () { return ContainersBox_2.ContainersBox; } });
+// layoutWT
+var LayoutWT_1 = require("./layout/LayoutWT");
+Object.defineProperty(exports, "LayoutWT", { enumerable: true, get: function () { return LayoutWT_1.LayoutWT; } });
+var Containers_2 = require("./layout/LayoutWT/Containers");
+Object.defineProperty(exports, "WTGlobalMenuContainer", { enumerable: true, get: function () { return Containers_2.GlobalMenuContainer; } });
+var ContainersBox_3 = require("./layout/LayoutWT/ContainersBox");
+Object.defineProperty(exports, "WTContainersBox", { enumerable: true, get: function () { return ContainersBox_3.ContainersBox; } });
+// components
+var components_1 = require("./components");
+Object.defineProperty(exports, "D_AdminList", { enumerable: true, get: function () { return components_1.AdminList; } });
+Object.defineProperty(exports, "D_AdminListHeader", { enumerable: true, get: function () { return components_1.AdminListHeader; } });
+Object.defineProperty(exports, "D_AdminListItem", { enumerable: true, get: function () { return components_1.AdminListItem; } });
+Object.defineProperty(exports, "D_BasicFormGroup", { enumerable: true, get: function () { return components_1.BasicFormGroup; } });
+Object.defineProperty(exports, "D_BasicList", { enumerable: true, get: function () { return components_1.BasicList; } });
+Object.defineProperty(exports, "D_BasicListItem", { enumerable: true, get: function () { return components_1.BasicListItem; } });
+Object.defineProperty(exports, "D_BlogTextField", { enumerable: true, get: function () { return components_1.BlogTextField; } });
+Object.defineProperty(exports, "D_BodyTextGroup", { enumerable: true, get: function () { return components_1.BodyTextGroup; } });
+Object.defineProperty(exports, "D_Card", { enumerable: true, get: function () { return components_1.Card; } });
+Object.defineProperty(exports, "D_CardList", { enumerable: true, get: function () { return components_1.CardList; } });
+Object.defineProperty(exports, "D_Checkbox", { enumerable: true, get: function () { return components_1.Checkbox; } });
+Object.defineProperty(exports, "D_Chip", { enumerable: true, get: function () { return components_1.Chip; } });
+Object.defineProperty(exports, "D_ContextMenu", { enumerable: true, get: function () { return components_1.ContextMenu; } });
+Object.defineProperty(exports, "D_ContextMenuItem", { enumerable: true, get: function () { return components_1.ContextMenuItem; } });
+Object.defineProperty(exports, "D_DesktopAlertDialog", { enumerable: true, get: function () { return components_1.DesktopAlertDialog; } });
+Object.defineProperty(exports, "D_DesktopBasicModal", { enumerable: true, get: function () { return components_1.DesktopBasicModal; } });
+Object.defineProperty(exports, "D_DesktopHeaderBar", { enumerable: true, get: function () { return components_1.DesktopHeaderBar; } });
+Object.defineProperty(exports, "D_DesktopHeadlessModal", { enumerable: true, get: function () { return components_1.DesktopHeadlessModal; } });
+Object.defineProperty(exports, "D_DesktopTabBar", { enumerable: true, get: function () { return components_1.DesktopTabBar; } });
+Object.defineProperty(exports, "D_Dropdown", { enumerable: true, get: function () { return components_1.Dropdown; } });
+Object.defineProperty(exports, "D_EditApplyTextField", { enumerable: true, get: function () { return components_1.EditApplyTextField; } });
+Object.defineProperty(exports, "D_FilterBar", { enumerable: true, get: function () { return components_1.FilterBar; } });
+Object.defineProperty(exports, "D_FloatingActionButton", { enumerable: true, get: function () { return components_1.FloatingActionButton; } });
+Object.defineProperty(exports, "D_Hero", { enumerable: true, get: function () { return components_1.Hero; } });
+Object.defineProperty(exports, "D_HorizontalFormGroup", { enumerable: true, get: function () { return components_1.HorizontalFormGroup; } });
+Object.defineProperty(exports, "D_IconButton", { enumerable: true, get: function () { return components_1.IconButton; } });
+Object.defineProperty(exports, "D_ImageSlide", { enumerable: true, get: function () { return components_1.ImageSlide; } });
+Object.defineProperty(exports, "D_MainButton", { enumerable: true, get: function () { return components_1.MainButton; } });
+Object.defineProperty(exports, "D_PageTitleTextGroup", { enumerable: true, get: function () { return components_1.PageTitleTextGroup; } });
+Object.defineProperty(exports, "D_Radio", { enumerable: true, get: function () { return components_1.Radio; } });
+Object.defineProperty(exports, "D_ReactionButton", { enumerable: true, get: function () { return components_1.ReactionButton; } });
+Object.defineProperty(exports, "D_Select", { enumerable: true, get: function () { return components_1.Select; } });
+Object.defineProperty(exports, "D_StatusBlock", { enumerable: true, get: function () { return components_1.StatusBlock; } });
+Object.defineProperty(exports, "D_TextButton", { enumerable: true, get: function () { return components_1.TextButton; } });
+Object.defineProperty(exports, "D_TextField", { enumerable: true, get: function () { return components_1.TextField; } });
+Object.defineProperty(exports, "D_TextLabel", { enumerable: true, get: function () { return components_1.TextLabel; } });
+Object.defineProperty(exports, "D_UploadIconButton", { enumerable: true, get: function () { return components_1.UploadIconButton; } });
+Object.defineProperty(exports, "D_UploadMainButton", { enumerable: true, get: function () { return components_1.UploadMainButton; } });
+Object.defineProperty(exports, "D_UploadTextButton", { enumerable: true, get: function () { return components_1.UploadTextButton; } });
+Object.defineProperty(exports, "D_UserDesktopNavBar", { enumerable: true, get: function () { return components_1.UserDesktopNavBar; } });
+Object.defineProperty(exports, "D_UserDesktopTabBar", { enumerable: true, get: function () { return components_1.UserDesktopTabBar; } });
+Object.defineProperty(exports, "D_DynamicDesktopNavBar", { enumerable: true, get: function () { return components_1.DynamicDesktopNavBar; } });

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare type ContentsContainerProps = {
+    stepContent?: JSX.Element;
+    content1?: JSX.Element;
+    content2?: JSX.Element;
+    layoutType: 'WFA_1' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | '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';
+    containerColor?: string;
+    areaColor?: string;
+};
+declare const ContentsContainer: ({ stepContent, content1, content2, layoutType, containerColor, areaColor }: ContentsContainerProps) => JSX.Element;
+export default ContentsContainer;

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

@@ -0,0 +1,35 @@
+"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 ContentsContainer = function (_a) {
+    var stepContent = _a.stepContent, content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    return (react_1.default.createElement(react_1.default.Fragment, null, {
+        WFA_1: (react_1.default.createElement(variation_1.WFA, { stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor })),
+        WFB_1: (react_1.default.createElement(variation_1.WFB, { stepContent: stepContent, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFC_1: react_1.default.createElement(variation_1.WFC, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
+        WFD_1: (react_1.default.createElement(variation_1.WFD, { layoutType: "WFD_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
+        WFD_2: (react_1.default.createElement(variation_1.WFD, { layoutType: "WFD_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
+        WFE_1: (react_1.default.createElement(variation_1.WFE, { stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor })),
+        WFF_1: react_1.default.createElement(variation_1.WFF, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
+        WFG_1: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFG_2: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFG_3: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFG_4: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFG_5: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFG_6: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFH_1: react_1.default.createElement(variation_1.WFH, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
+        WFI_1: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFI_2: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFI_3: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFI_4: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFI_5: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFI_6: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFJ_1: react_1.default.createElement(variation_1.WFJ, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
+        WFK_1: (react_1.default.createElement(variation_1.WFK, { content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor }))
+    }[layoutType]));
+};
+exports.default = ContentsContainer;

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

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

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/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.ContentsContainer = void 0;
+var ContentsContainer_1 = require("./ContentsContainer");
+Object.defineProperty(exports, "ContentsContainer", { enumerable: true, get: function () { return __importDefault(ContentsContainer_1).default; } });

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare type WFAProps = {
+    stepContent?: JSX.Element;
+    content1?: JSX.Element;
+    containerColor?: string;
+    areaColor?: string;
+};
+declare const WFA: ({ stepContent, content1, containerColor, areaColor }: WFAProps) => JSX.Element;
+export default WFA;

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

@@ -0,0 +1,38 @@
+"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 WFA = function (_a) {
+    var stepContent = _a.stepContent, content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor },
+        react_1.default.createElement(S_SideArea, { areaColor: areaColor },
+            react_1.default.createElement(S_StepContent, null, stepContent)),
+        react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
+            react_1.default.createElement(S_Content1, null, content1))));
+};
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_contentscontainer01_background;
+}, function (_a) {
+    var containerColor = _a.containerColor;
+    return "background-color: " + containerColor;
+});
+var S_SideArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  min-width: 240px;\n  padding-bottom: 88px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  min-width: 240px;\n  padding-bottom: 88px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n"])), function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
+});
+var S_StepContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_ContentsArea = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  margin: 0 24px;\n  max-width: 1632px;\n  min-width: 912px;\n  padding-bottom: 88px;\n  width: 100%;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  margin: 0 24px;\n  max-width: 1632px;\n  min-width: 912px;\n  padding-bottom: 88px;\n  width: 100%;\n  ", ";\n"])), function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
+});
+var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  max-width: 720px;\n  min-width: 512px;\n  width: 56%;\n"], ["\n  max-width: 720px;\n  min-width: 512px;\n  width: 56%;\n"])));
+exports.default = WFA;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare type WFBProps = {
+    stepContent?: JSX.Element;
+    content1?: JSX.Element;
+    content2?: JSX.Element;
+    containerColor?: string;
+    areaColor?: string;
+};
+declare const WFB: ({ stepContent, content1, content2, containerColor, areaColor }: WFBProps) => JSX.Element;
+export default WFB;

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

@@ -0,0 +1,40 @@
+"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 WFB = function (_a) {
+    var stepContent = _a.stepContent, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor },
+        react_1.default.createElement(S_SideArea, { areaColor: areaColor },
+            react_1.default.createElement(S_StepContent, null, stepContent)),
+        react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
+            react_1.default.createElement(S_Content1, null, content1),
+            react_1.default.createElement(S_Content2, null, content2))));
+};
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_contentscontainer01_background;
+}, function (_a) {
+    var containerColor = _a.containerColor;
+    return "background-color: " + containerColor;
+});
+var S_SideArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  min-width: 240px;\n  padding-bottom: 88px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  min-width: 240px;\n  padding-bottom: 88px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n"])), function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
+});
+var S_StepContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_ContentsArea = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  margin: 0 24px;\n  max-width: 1632px;\n  min-width: 912px;\n  padding-bottom: 88px;\n  width: 100%;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  margin: 0 24px;\n  max-width: 1632px;\n  min-width: 912px;\n  padding-bottom: 88px;\n  width: 100%;\n  ", ";\n"])), function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
+});
+var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex-grow: 1;\n  margin: 0;\n  max-width: 720px;\n  min-width: 512px;\n"], ["\n  flex-grow: 1;\n  margin: 0;\n  max-width: 720px;\n  min-width: 512px;\n"])));
+var S_Content2 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-left: 24px;\n  width: 360px;\n"], ["\n  margin-left: 24px;\n  width: 360px;\n"])));
+exports.default = WFB;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type WFCProps = {
+    content1?: JSX.Element;
+    containerColor?: string;
+    areaColor?: string;
+};
+declare const WFC: ({ content1, containerColor, areaColor }: WFCProps) => JSX.Element;
+export default WFC;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFC.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 WFC = function (_a) {
+    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor },
+        react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
+            react_1.default.createElement(S_Content1, null, content1))));
+};
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_contentscontainer01_background;
+}, function (_a) {
+    var containerColor = _a.containerColor;
+    return "background-color: " + containerColor;
+});
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  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;
+});
+var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+exports.default = WFC;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare type WFDProps = {
+    content1?: JSX.Element;
+    layoutType: 'WFD_1' | 'WFD_2';
+    containerColor?: string;
+    areaColor?: string;
+};
+declare const WFD: ({ content1, layoutType, containerColor, areaColor }: WFDProps) => JSX.Element;
+export default WFD;

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

@@ -0,0 +1,49 @@
+"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 WFD = function (_a) {
+    var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor },
+        react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1))));
+};
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_contentscontainer01_background;
+}, function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WFD_1: 'height: 100%;',
+        WFD_2: 'padding-left: 24px;padding-right: 24px;overflow-x: hidden;overflow-y: auto;height: 100%;'
+    }[layoutType]);
+}, function (_a) {
+    var containerColor = _a.containerColor;
+    return "background-color: " + containerColor;
+});
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  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;
+    return ({
+        WFD_1: 'height: 100%;',
+        WFD_2: 'padding-bottom: 88px;'
+    }[layoutType]);
+}, function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
+});
+var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WFD_1: 'height: 100%;overflow: hidden;',
+        WFD_2: ''
+    }[layoutType]);
+});
+exports.default = WFD;
+var templateObject_1, templateObject_2, templateObject_3;