pds-dev-kit-web-test 0.0.1

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

@@ -0,0 +1,210 @@
+"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 styled_components_1 = __importStar(require("styled-components"));
+var Containers_1 = require("../Containers");
+var ContainersBox = function (_a) {
+    var layoutType = _a.layoutType, pageMenuContent = _a.pageMenuContent, tabMenuContent = _a.tabMenuContent, subMenuContent = _a.subMenuContent, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, container1Ref = _a.container1Ref;
+    return (react_1.default.createElement(S_ContainersBox, null,
+        {
+            WTA_1: react_1.default.createElement(react_1.default.Fragment, null),
+            WTA_2: react_1.default.createElement(react_1.default.Fragment, null),
+            WTA_3: react_1.default.createElement(react_1.default.Fragment, null),
+            WTB_1: react_1.default.createElement(react_1.default.Fragment, null),
+            WTC_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "left_page_menu", pageMenuContent: pageMenuContent })),
+            WTD_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "left_page_menu", pageMenuContent: pageMenuContent })),
+            WTD_2: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "left_page_menu", pageMenuContent: pageMenuContent })),
+            WTD_3: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "left_page_menu", pageMenuContent: pageMenuContent })),
+            WTD_4: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "left_page_menu", pageMenuContent: pageMenuContent })),
+            WTD_5: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "left_page_menu", pageMenuContent: pageMenuContent })),
+            WTD_6: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "left_page_menu", pageMenuContent: pageMenuContent })),
+            WTE_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "left_page_menu", pageMenuContent: pageMenuContent })),
+            WTF_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "left_page_menu", pageMenuContent: pageMenuContent })),
+            WTF_2: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "left_page_menu", pageMenuContent: pageMenuContent })),
+            WTF_3: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "left_page_menu", pageMenuContent: pageMenuContent })),
+            WTF_4: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "left_page_menu", pageMenuContent: pageMenuContent })),
+            WTF_5: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "left_page_menu", pageMenuContent: pageMenuContent })),
+            WTF_6: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "left_page_menu", pageMenuContent: pageMenuContent })),
+            WTG_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "left_page_menu", pageMenuContent: pageMenuContent })),
+            WTH_1: react_1.default.createElement(react_1.default.Fragment, null),
+            WTH_2: react_1.default.createElement(react_1.default.Fragment, null),
+            WTH_3: react_1.default.createElement(react_1.default.Fragment, null),
+            WTI_1: react_1.default.createElement(react_1.default.Fragment, null),
+            WTI_2: react_1.default.createElement(react_1.default.Fragment, null),
+            WTJ_1: react_1.default.createElement(react_1.default.Fragment, null),
+            WTK_1: react_1.default.createElement(react_1.default.Fragment, null),
+            WTK_2: react_1.default.createElement(react_1.default.Fragment, null),
+            WTK_3: react_1.default.createElement(react_1.default.Fragment, null),
+            WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
+            WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
+            WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
+            WTN_1: react_1.default.createElement(react_1.default.Fragment, null),
+            WTN_2: react_1.default.createElement(react_1.default.Fragment, null),
+            WTN_3: react_1.default.createElement(react_1.default.Fragment, null),
+            WTO_1: react_1.default.createElement(react_1.default.Fragment, null),
+            WTP_1: react_1.default.createElement(react_1.default.Fragment, null),
+            WTQ_1: react_1.default.createElement(react_1.default.Fragment, null),
+            WTS_1: react_1.default.createElement(react_1.default.Fragment, null)
+        }[layoutType],
+        react_1.default.createElement(S_RightBox, null,
+            {
+                WTA_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu_mobile_480", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
+                WTA_2: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu_mobile_600", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
+                WTA_3: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu_mobile_768", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
+                WTB_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
+                WTC_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTD_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTD_2: react_1.default.createElement(react_1.default.Fragment, null),
+                WTD_3: react_1.default.createElement(react_1.default.Fragment, null),
+                WTD_4: react_1.default.createElement(react_1.default.Fragment, null),
+                WTD_5: react_1.default.createElement(react_1.default.Fragment, null),
+                WTD_6: react_1.default.createElement(react_1.default.Fragment, null),
+                WTE_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTF_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTF_2: react_1.default.createElement(react_1.default.Fragment, null),
+                WTF_3: react_1.default.createElement(react_1.default.Fragment, null),
+                WTF_4: react_1.default.createElement(react_1.default.Fragment, null),
+                WTF_5: react_1.default.createElement(react_1.default.Fragment, null),
+                WTF_6: react_1.default.createElement(react_1.default.Fragment, null),
+                WTG_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTH_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
+                WTH_2: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
+                WTH_3: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
+                WTI_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
+                WTI_2: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
+                WTJ_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTK_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTK_2: react_1.default.createElement(react_1.default.Fragment, null),
+                WTK_3: react_1.default.createElement(react_1.default.Fragment, null),
+                WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
+                WTN_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTN_2: react_1.default.createElement(react_1.default.Fragment, null),
+                WTN_3: react_1.default.createElement(react_1.default.Fragment, null),
+                WTO_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
+                WTP_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTQ_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTS_1: react_1.default.createElement(react_1.default.Fragment, null)
+            }[layoutType],
+            {
+                WTA_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTA_2: react_1.default.createElement(react_1.default.Fragment, null),
+                WTA_3: react_1.default.createElement(react_1.default.Fragment, null),
+                WTB_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTC_1: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
+                WTD_1: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
+                WTD_2: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
+                WTD_3: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
+                WTD_4: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
+                WTD_5: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
+                WTD_6: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
+                WTE_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTF_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTF_2: react_1.default.createElement(react_1.default.Fragment, null),
+                WTF_3: react_1.default.createElement(react_1.default.Fragment, null),
+                WTF_4: react_1.default.createElement(react_1.default.Fragment, null),
+                WTF_5: react_1.default.createElement(react_1.default.Fragment, null),
+                WTF_6: react_1.default.createElement(react_1.default.Fragment, null),
+                WTG_1: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
+                WTH_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTH_2: react_1.default.createElement(react_1.default.Fragment, null),
+                WTH_3: react_1.default.createElement(react_1.default.Fragment, null),
+                WTI_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTI_2: react_1.default.createElement(react_1.default.Fragment, null),
+                WTJ_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTK_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTK_2: react_1.default.createElement(react_1.default.Fragment, null),
+                WTK_3: react_1.default.createElement(react_1.default.Fragment, null),
+                WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
+                WTN_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTN_2: react_1.default.createElement(react_1.default.Fragment, null),
+                WTN_3: react_1.default.createElement(react_1.default.Fragment, null),
+                WTO_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTP_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTQ_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTS_1: react_1.default.createElement(react_1.default.Fragment, null)
+            }[layoutType],
+            react_1.default.createElement(S_BottomWrapper, { layoutType: layoutType },
+                {
+                    WTA_1: '',
+                    WTA_2: '',
+                    WTA_3: '',
+                    WTB_1: '',
+                    WTC_1: '',
+                    WTD_1: '',
+                    WTD_2: '',
+                    WTD_3: '',
+                    WTD_4: '',
+                    WTD_5: '',
+                    WTD_6: '',
+                    WTE_1: '',
+                    WTF_1: '',
+                    WTF_2: '',
+                    WTF_3: '',
+                    WTF_4: '',
+                    WTF_5: '',
+                    WTF_6: '',
+                    WTG_1: '',
+                    WTH_1: '',
+                    WTH_2: '',
+                    WTH_3: '',
+                    WTI_1: '',
+                    WTI_2: '',
+                    WTJ_1: '',
+                    WTK_1: '',
+                    WTK_2: '',
+                    WTK_3: '',
+                    WTL_1: '',
+                    WTM_1: '',
+                    WTM_2: '',
+                    WTN_1: '',
+                    WTN_2: '',
+                    WTN_3: '',
+                    WTO_1: (react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent })),
+                    WTP_1: (react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent })),
+                    WTQ_1: '',
+                    WTS_1: ''
+                }[layoutType],
+                react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })))));
+};
+var S_ContainersBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n"])));
+var S_RightBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n"])));
+var centerStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  // TODO: WTO_1, WTP_1, WTQ_1 \uC720\uD615\uC744 \uC704\uD574 \uC784\uC2DC\uB85C backgroundColor\uB97C \uBD80\uC5EC\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uBD80\uBD84 \uAE30\uD68D \uCCA0\uD559 \uAC1C\uC120\uC774 \uB418\uBA74 \uBCC0\uACBD\uB418\uC5B4\uC57C \uD568.\n  background-color: ", ";\n"], ["\n  display: flex;\n  justify-content: center;\n  // TODO: WTO_1, WTP_1, WTQ_1 \uC720\uD615\uC744 \uC704\uD574 \uC784\uC2DC\uB85C backgroundColor\uB97C \uBD80\uC5EC\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uBD80\uBD84 \uAE30\uD68D \uCCA0\uD559 \uAC1C\uC120\uC774 \uB418\uBA74 \uBCC0\uACBD\uB418\uC5B4\uC57C \uD568.\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_contentscontainer01_background;
+});
+var S_BottomWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n  ", ";\n"], ["\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return layoutType === 'WTO_1' || layoutType === 'WTP_1' || layoutType === 'WTQ_1' ? centerStyle : '';
+});
+exports.default = ContainersBox;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/desktop/layout/LayoutWT/ContainersBox/index.d.ts

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

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

package/dist/src/desktop/layout/LayoutWT/LayoutWT.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type LayoutWTProps = {
+    globalMenuContainer?: JSX.Element;
+    children?: React.ReactNode;
+};
+declare const LayoutWT: ({ globalMenuContainer, children }: LayoutWTProps) => JSX.Element;
+export default LayoutWT;

package/dist/src/desktop/layout/LayoutWT/LayoutWT.js

@@ -0,0 +1,24 @@
+"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 LayoutWT = function (_a) {
+    var globalMenuContainer = _a.globalMenuContainer, children = _a.children;
+    return (react_1.default.createElement(S_LayoutWT, null,
+        react_1.default.createElement(S_Box, null,
+            react_1.default.createElement(S_TopWrapper, null, globalMenuContainer),
+            react_1.default.createElement(S_BottomWrapper, null, children))));
+};
+var S_LayoutWT = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100vh;\n  width: 100vw;\n  min-width: 1200px;\n"], ["\n  height: 100vh;\n  width: 100vw;\n  min-width: 1200px;\n"])));
+var S_Box = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __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_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_BottomWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n"], ["\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n"])));
+exports.default = LayoutWT;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

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

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

package/dist/src/hybrid/components/Divider/Divider.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare type DividerProps = {
+    displayType?: 'line' | 'area';
+    direction?: 'vertical' | 'horizontal';
+    height?: number;
+    colorTheme?: 'none' | 'divider1';
+};
+declare function Divider({ displayType, direction, height, colorTheme }: DividerProps): JSX.Element;
+export default Divider;

package/dist/src/hybrid/components/Divider/Divider.js

@@ -0,0 +1,62 @@
+"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 styled_components_1 = __importStar(require("styled-components"));
+function Divider(_a) {
+    var _b = _a.displayType, displayType = _b === void 0 ? 'line' : _b, _c = _a.direction, direction = _c === void 0 ? 'horizontal' : _c, height = _a.height, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d;
+    return (react_1.default.createElement(S_Divider, { displayType: displayType, "$height": height, "$direction": direction, colorTheme: colorTheme }));
+}
+var horizontal = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  width: 100%;\n"], ["\n  height: ", ";\n  width: 100%;\n"])), function (_a) {
+    var displayType = _a.displayType;
+    return displayType &&
+        {
+            line: '1px',
+            area: '16px'
+        }[displayType];
+});
+var vertical = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-block;\n  height: ", ";\n  width: 1px;\n"], ["\n  display: inline-block;\n  height: ", ";\n  width: 1px;\n"])), function (_a) {
+    var $height = _a.$height;
+    return ($height ? $height + "px" : '100%');
+});
+var S_Divider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    return colorTheme &&
+        {
+            none: "background-color: " + theme.ui_cpnt_divider + ";",
+            divider1: "background-color: " + theme.ui_cpnt_divider_white_opacity30 + ";"
+        }[colorTheme];
+}, function (_a) {
+    var $direction = _a.$direction;
+    return $direction === 'horizontal' && horizontal;
+}, function (_a) {
+    var $direction = _a.$direction, displayType = _a.displayType;
+    return $direction === 'vertical' && displayType === 'line' && vertical;
+});
+exports.default = Divider;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/hybrid/components/Divider/index.d.ts

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

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

package/dist/src/hybrid/components/Icon/Icon.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
+export declare type IconProps = {
+    iconName?: FillIconNameKeys | LineIconNameKeys;
+    size?: 12 | 16 | 20 | 24 | 32 | 48 | 56 | 64 | 72;
+    colorKey?: UiColors;
+    fillType?: 'line' | 'fill';
+} & Record<string, any>;
+declare const Icon: ({ iconName, size, colorKey, fillType }: IconProps) => JSX.Element;
+export default Icon;

package/dist/src/hybrid/components/Icon/Icon.js

@@ -0,0 +1,17 @@
+"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 common_1 = require("../../../common");
+var fill_1 = __importDefault(require("../../../common/assets/icons/fill"));
+var line_1 = __importDefault(require("../../../common/assets/icons/line"));
+var Icon = function (_a) {
+    var _b = _a.iconName, iconName = _b === void 0 ? 'ic_unavailable' : _b, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.colorKey, colorKey = _d === void 0 ? 'ui_cpnt_icon_sys_grey_01' : _d, _e = _a.fillType, fillType = _e === void 0 ? 'line' : _e;
+    var SelectedIcon = fillType === 'line'
+        ? line_1.default[iconName] || fill_1.default[iconName]
+        : fill_1.default[iconName] || line_1.default[iconName];
+    return (react_1.default.createElement(SelectedIcon, { color: (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {})[colorKey], size: size, style: { minWidth: size, minHeight: size } }));
+};
+exports.default = Icon;

package/dist/src/hybrid/components/Icon/index.d.ts

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

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

package/dist/src/hybrid/components/ImageView/ImageView.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare type ImageViewProps = {
+    src?: string;
+    shapeType?: 'round' | 'circular' | 'rectangle';
+    radius?: 8 | 16 | 24;
+    width?: number | 'responsive';
+    height?: number | 'responsive';
+    noImageHeight?: number;
+    noImageWidth?: number;
+    ratio?: '16_9' | '9_16' | '16_10' | '10_16' | '4_3' | '3_4' | '1_1' | 'auto';
+    scaleType?: 'fill' | 'contain' | 'cover' | 'none';
+    borderMode?: 'use' | 'none';
+    backgroundFillMode?: 'use' | 'none';
+};
+declare const ImageView: ({ src, shapeType, radius, width, height, noImageHeight, noImageWidth, ratio, scaleType, borderMode, backgroundFillMode }: ImageViewProps) => JSX.Element;
+export default ImageView;

package/dist/src/hybrid/components/ImageView/ImageView.js

@@ -0,0 +1,159 @@
+"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 styled_components_1 = __importStar(require("styled-components"));
+var ImageView = function (_a) {
+    var src = _a.src, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, _c = _a.radius, radius = _c === void 0 ? 8 : _c, width = _a.width, height = _a.height, noImageHeight = _a.noImageHeight, noImageWidth = _a.noImageWidth, _d = _a.ratio, ratio = _d === void 0 ? 'auto' : _d, _e = _a.scaleType, scaleType = _e === void 0 ? 'none' : _e, _f = _a.borderMode, borderMode = _f === void 0 ? 'none' : _f, _g = _a.backgroundFillMode, backgroundFillMode = _g === void 0 ? 'none' : _g;
+    return (react_1.default.createElement(react_1.default.Fragment, null, ratio === 'auto' ? (react_1.default.createElement(S_AutoImageViewWrapper, { "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode, "$src": src }, src && (react_1.default.createElement(S_AutoImageView, { src: src, "$height": height, "$width": width, scaleType: scaleType })))) : (react_1.default.createElement(S_RatioImageViewWrapper, { "$width": width, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode },
+        react_1.default.createElement(S_RatioImageView, { "$src": src, scaleType: scaleType, ratio: ratio })))));
+};
+var wrapperStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme, backgroundFillMode = _a.backgroundFillMode;
+    return backgroundFillMode === 'use' ? "background-color: " + theme.ui_temp_grey_04 : '';
+}, function (_a) {
+    var borderMode = _a.borderMode, theme = _a.theme;
+    return borderMode === 'use' && "border: 1px solid " + theme.ui_profile_image_border;
+}, function (_a) {
+    var shapeType = _a.shapeType, $radius = _a.$radius;
+    return shapeType &&
+        {
+            round: "border-radius: " + $radius + "px",
+            circular: 'border-radius: 50%',
+            rectangle: ''
+        }[shapeType];
+});
+var S_RatioImageViewWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  min-width: ", ";\n  width: ", ";\n"], ["\n  ", "\n  min-width: ", ";\n  width: ", ";\n"])), wrapperStyle, function (_a) {
+    var $width = _a.$width;
+    return ($width === 'responsive' ? '100%' : $width + "px");
+}, function (_a) {
+    var $width = _a.$width;
+    return ($width === 'responsive' ? '100%' : $width + "px");
+});
+var S_RatioImageView = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-position: center;\n  background-repeat: no-repeat;\n  width: 100%;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  background-position: center;\n  background-repeat: no-repeat;\n  width: 100%;\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme, $src = _a.$src;
+    return $src ? "background-image: url(" + $src + ")" : "background-color: " + theme.ui_temp_grey_04;
+}, function (_a) {
+    var scaleType = _a.scaleType;
+    return scaleType &&
+        {
+            fill: 'background-size: 100% 100%',
+            contain: "background-size: " + scaleType,
+            cover: "background-size: " + scaleType,
+            none: 'background-size: auto'
+        }[scaleType];
+}, function (_a) {
+    var ratio = _a.ratio;
+    return ratio &&
+        ratio !== 'auto' &&
+        {
+            '16_9': 'padding-top: 56.25%',
+            '9_16': 'padding-top: 177.77%',
+            '16_10': 'padding-top: 62.5%',
+            '10_16': 'padding-top: 159.74%',
+            '4_3': 'padding-top: 75%',
+            '3_4': 'padding-top: 133.33%',
+            '1_1': 'padding-top: 100%'
+        }[ratio];
+});
+var onlyWidthWrapperStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
+    var noImageHeight = _a.noImageHeight, $src = _a.$src;
+    return !$src && noImageHeight ? noImageHeight + "px" : 'auto';
+}, function (_a) {
+    var $width = _a.$width;
+    return ($width === 'responsive' ? '100%' : $width + "px");
+}, function (_a) {
+    var noImageHeight = _a.noImageHeight, $src = _a.$src;
+    return (!$src && noImageHeight ? noImageHeight + "px" : 'auto');
+}, function (_a) {
+    var $width = _a.$width;
+    return ($width === 'responsive' ? '100%' : $width + "px");
+}, function (_a) {
+    var theme = _a.theme, noImageHeight = _a.noImageHeight, $src = _a.$src;
+    return !$src && noImageHeight ? "background-color: " + theme.ui_temp_grey_04 : '';
+});
+var onlyHeightWrapperStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
+    var $height = _a.$height;
+    return ($height === 'responsive' ? '100%' : $height + "px");
+}, function (_a) {
+    var noImageWidth = _a.noImageWidth, $src = _a.$src;
+    return (!$src && noImageWidth ? noImageWidth + "px" : 'auto');
+}, function (_a) {
+    var $height = _a.$height;
+    return ($height === 'responsive' ? '100%' : $height + "px");
+}, function (_a) {
+    var noImageWidth = _a.noImageWidth, $src = _a.$src;
+    return (!$src && noImageWidth ? noImageWidth + "px" : 'auto');
+}, function (_a) {
+    var theme = _a.theme, noImageWidth = _a.noImageWidth, $src = _a.$src;
+    return !$src && noImageWidth ? "background-color: " + theme.ui_temp_grey_04 : '';
+});
+var bothWrapperStyle = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  min-height: ", ";\n  height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  min-height: ", ";\n  height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
+    var $height = _a.$height;
+    return ($height === 'responsive' ? '100%' : $height + "px");
+}, function (_a) {
+    var $height = _a.$height;
+    return ($height === 'responsive' ? '100%' : $height + "px");
+}, function (_a) {
+    var $width = _a.$width;
+    return ($width === 'responsive' ? '100%' : $width + "px");
+}, function (_a) {
+    var $width = _a.$width;
+    return ($width === 'responsive' ? '100%' : $width + "px");
+}, function (_a) {
+    var theme = _a.theme, $src = _a.$src;
+    return (!$src ? "background-color: " + theme.ui_temp_grey_04 : '');
+});
+var onlyWidthStyle = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n"], ["\n  width: 100%;\n  height: auto;\n"])));
+var onlyHeightStyle = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: auto;\n  height: 100%;\n"], ["\n  width: auto;\n  height: 100%;\n"])));
+var bothStyle = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
+var S_AutoImageViewWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  ", "\n  ", ";\n  ", ";\n  ", ";\n"])), wrapperStyle, function (_a) {
+    var $width = _a.$width, $height = _a.$height;
+    return $width && !$height && onlyWidthWrapperStyle;
+}, function (_a) {
+    var $width = _a.$width, $height = _a.$height;
+    return !$width && $height && onlyHeightWrapperStyle;
+}, function (_a) {
+    var $width = _a.$width, $height = _a.$height;
+    return $width && $height && bothWrapperStyle;
+});
+var S_AutoImageView = styled_components_1.default.img(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  vertical-align: bottom;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  vertical-align: bottom;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var scaleType = _a.scaleType;
+    return (scaleType !== 'none' ? "object-fit: " + scaleType + ";" : '');
+}, function (_a) {
+    var $width = _a.$width, $height = _a.$height;
+    return $width && !$height && onlyWidthStyle;
+}, function (_a) {
+    var $width = _a.$width, $height = _a.$height;
+    return !$width && $height && onlyHeightStyle;
+}, function (_a) {
+    var $width = _a.$width, $height = _a.$height;
+    return $width && $height && bothStyle;
+});
+exports.default = ImageView;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/dist/src/hybrid/components/ImageView/index.d.ts

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

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

package/dist/src/hybrid/components/Spacing/Spacing.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare type SpacingProps = {
+    size: 'spacing_a' | 'spacing_b' | 'spacing_c' | 'spacing_d' | 'spacing_e' | 'spacing_f' | 'spacing_g' | 'spacing_h' | 'spacing_i' | 'spacing_j' | 'spacing_k' | 'spacing_l' | 'spacing_m' | 'spacing_n';
+    spacingType?: 'height' | 'width';
+};
+declare function Spacing({ size, spacingType }: SpacingProps): JSX.Element;
+export default Spacing;