pds-dev-kit-web 0.6.14 → 0.7.0

package/dist/src/mobile/components/Dropdown/Dropdown.js

@@ -0,0 +1,160 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+var ContextMenu_1 = require("../ContextMenu");
+var ContextMenuItem_1 = require("../ContextMenuItem");
+var TextLabel_1 = require("../TextLabel");
+// TODO: selectMode의 multi 기능 구현 추가 필요
+function Dropdown(_a) {
+    var _b = _a.size, size = _b === void 0 ? 'large' : _b, hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _c = _a.selectMode, selectMode = _c === void 0 ? 'one' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, onChange = _a.onChange;
+    var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
+    var _g = (0, react_1.useState)(defaultValue), selectedOption = _g[0], setSelectedOption = _g[1];
+    var handleClick = function () {
+        if (state === 'disabled' || state === 'read_only') {
+            return;
+        }
+        setIsFocused(!isFocused);
+    };
+    var handleBlur = function () {
+        if (isFocused) {
+            setIsFocused(false);
+        }
+    };
+    var handleClickOption = function (value) {
+        setSelectedOption(value);
+        setIsFocused(false);
+        if (onChange) {
+            onChange(value);
+        }
+    };
+    var getIconColorKey = function () {
+        if (colorTheme === 'dark') {
+            if (state === 'disabled') {
+                return 'ui_cpnt_dropdown_text_darktheme_disabled';
+            }
+            return 'ui_cpnt_dropdown_icon_darktheme_default';
+        }
+        if (state === 'disabled') {
+            return 'ui_cpnt_dropdown_icon_02';
+        }
+        return 'ui_cpnt_dropdown_icon_01';
+    };
+    var getTextColorTheme = function () {
+        if (colorTheme === 'none') {
+            if (isFocused) {
+                return 'sysTextPrimary';
+            }
+            if (state === 'normal' || state === 'read_only') {
+                return 'sysTextSecondary';
+            }
+            if (state === 'disabled') {
+                return 'sysTextTertiary';
+            }
+            return 'sysTextPrimary';
+        }
+    };
+    var getDarkTextColor = function () {
+        if (colorTheme === 'dark') {
+            if (isFocused) {
+                return 'ui_cpnt_dropdown_text_darktheme_enabled';
+            }
+            if (state === 'normal' || state === 'read_only') {
+                return 'ui_cpnt_dropdown_text_darktheme_hint';
+            }
+            if (state === 'disabled') {
+                return 'ui_cpnt_dropdown_text_darktheme_disabled';
+            }
+            return 'ui_cpnt_dropdown_text_darktheme_enabled';
+        }
+    };
+    return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur },
+        react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme },
+            react_1.default.createElement(S_TextLabel, null,
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getDarkTextColor() })),
+            react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" })),
+        isFocused && (react_1.default.createElement(S_ContextMenuWrapper, null,
+            react_1.default.createElement(ContextMenu_1.ContextMenu, { autoWidthMode: "use" }, valueArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, size: size, text: el.text, value: el.value, isSelected: el.value === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value), onClick: function () { return handleClickOption(el); } })); }))))));
+}
+var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  flex: 1;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 48px;\n  width: 432px;\n"], ["\n  height: 48px;\n  width: 432px;\n"])));
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  width: 188px;\n"], ["\n  height: 32px;\n  width: 188px;\n"])));
+var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"], ["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"])), function (_a) {
+    var size = _a.size;
+    return size &&
+        {
+            large: large,
+            small: small
+        }[size];
+});
+var S_Select = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", "\n"])), function (_a) {
+    var state = _a.state, colorTheme = _a.colorTheme, theme = _a.theme;
+    switch (state) {
+        case 'disabled':
+        case 'read_only':
+            return colorTheme === 'none'
+                ? theme.ui_cpnt_dropdown_base_disabled
+                : theme.ui_cpnt_dropdown_base_darktheme_disabled;
+        case 'normal':
+            return theme.ui_cpnt_dropdown_base_normal;
+    }
+}, function (_a) {
+    var theme = _a.theme, isFocused = _a.isFocused, colorTheme = _a.colorTheme;
+    switch (colorTheme) {
+        case 'none':
+            return isFocused
+                ? theme.ui_cpnt_dropdown_border_focus
+                : theme.ui_cpnt_dropdown_border_normal;
+        case 'dark':
+            return isFocused
+                ? theme.ui_cpnt_dropdown_border_darktheme_focus
+                : theme.ui_cpnt_dropdown_border_darktheme_normal;
+    }
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_dropdown_text_hint;
+}, function (_a) {
+    var size = _a.size;
+    return size &&
+        {
+            large: large,
+            small: small
+        }[size];
+});
+var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"], ["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+exports.default = Dropdown;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/src/mobile/components/Dropdown/index.d.ts

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

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

package/dist/src/mobile/components/MobileAlertDialog/MobileAlertDialog.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { PDSTextType } from '../../../common';
+declare type MobileAlertDialogProps = {
+    iconMode?: 'none' | 'success' | 'error' | 'warning' | 'information';
+    titleText?: PDSTextType;
+    contentText: PDSTextType;
+    btnMode: 'tbtn_amount1' | 'tbtn_amount2' | 'tbtn_amount3';
+    btnStack?: 'side' | 'stack';
+    tBtn1Text?: PDSTextType;
+    tBtn2Text?: PDSTextType;
+    tBtn3Text?: PDSTextType;
+    onClickTBtn1?: () => any;
+    onClickTBtn2?: () => any;
+    onClickTBtn3?: () => any;
+};
+declare function MobileAlertDialog({ iconMode, titleText, contentText, btnStack, btnMode, tBtn1Text, tBtn2Text, tBtn3Text, onClickTBtn1, onClickTBtn2, onClickTBtn3 }: MobileAlertDialogProps): React.ReactPortal;
+export default MobileAlertDialog;

package/dist/src/mobile/components/MobileAlertDialog/MobileAlertDialog.js

@@ -0,0 +1,125 @@
+"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 = __importStar(require("react"));
+var react_dom_1 = __importDefault(require("react-dom"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+var TextButton_1 = require("../TextButton");
+var TextLabel_1 = require("../TextLabel");
+function MobileAlertDialog(_a) {
+    var _b = _a.iconMode, iconMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, contentText = _a.contentText, _c = _a.btnStack, btnStack = _c === void 0 ? 'side' : _c, _d = _a.btnMode, btnMode = _d === void 0 ? 'tbtn_amount1' : _d, tBtn1Text = _a.tBtn1Text, tBtn2Text = _a.tBtn2Text, tBtn3Text = _a.tBtn3Text, onClickTBtn1 = _a.onClickTBtn1, onClickTBtn2 = _a.onClickTBtn2, onClickTBtn3 = _a.onClickTBtn3;
+    var container = (0, react_1.useState)(function () {
+        var modalRoot = document.createElement('div');
+        modalRoot.setAttribute('id', 'MobileAlertDialog');
+        return modalRoot;
+    })[0];
+    (0, react_1.useLayoutEffect)(function () {
+        var root = document.getElementById('root');
+        if (!root) {
+            return;
+        }
+        root.appendChild(container);
+        return function () {
+            root.removeChild(container);
+        };
+    }, []);
+    var btn1Mode = ['tbtn_amount1', 'tbtn_amount2', 'tbtn_amount3'];
+    var btn2Mode = ['tbtn_amount2', 'tbtn_amount3'];
+    var btn3Mode = ['tbtn_amount3'];
+    var iconContainer = function () {
+        if (iconMode !== 'none') {
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                iconMode === 'success' && (react_1.default.createElement(hybrid_1.Icon, { iconName: "ic_success", size: 72, colorKey: "ui_cpnt_alertdialog_icon_success" })),
+                iconMode === 'error' && (react_1.default.createElement(hybrid_1.Icon, { iconName: "ic_error", size: 72, colorKey: "ui_cpnt_alertdialog_icon_error" })),
+                iconMode === 'warning' && (react_1.default.createElement(hybrid_1.Icon, { iconName: "ic_warning", size: 72, colorKey: "ui_cpnt_alertdialog_icon_warning" })),
+                iconMode === 'information' && (react_1.default.createElement(hybrid_1.Icon, { iconName: "ic_information", size: 72, colorKey: "ui_cpnt_alertdialog_icon_information" }))));
+        }
+    };
+    var renderingSpacing = function () {
+        if (titleText || iconMode !== 'none')
+            return react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c" });
+    };
+    return react_dom_1.default.createPortal(react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(S_ModalOverlay, null),
+        react_1.default.createElement(S_ModalWrapper, null,
+            react_1.default.createElement(S_UpperBox, null,
+                iconContainer(),
+                iconMode !== 'none' && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
+                titleText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "leadParaBold" })),
+                renderingSpacing(),
+                contentText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextPrimary", styleTheme: "body2Regular" }))),
+            react_1.default.createElement(S_Footer, { btnStack: btnStack },
+                btn3Mode.includes(btnMode) && tBtn3Text && (react_1.default.createElement(TextButton_1.TextButton, { text: tBtn3Text, size: "large", onClick: onClickTBtn3 })),
+                react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: btnStack === 'side' ? 'width' : 'height' }),
+                btn2Mode.includes(btnMode) && tBtn2Text && (react_1.default.createElement(TextButton_1.TextButton, { text: tBtn2Text, size: "large", onClick: onClickTBtn2 })),
+                react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: btnStack === 'side' ? 'width' : 'height' }),
+                btn1Mode.includes(btnMode) && tBtn1Text && (react_1.default.createElement(TextButton_1.TextButton, { text: tBtn1Text, size: "large", onClick: onClickTBtn1 }))))), container);
+}
+var S_UpperBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var S_ModalOverlay = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_modal_dimmed;
+});
+var S_ModalWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 16px;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  max-height: 720px;\n  width: calc(100% - 80px);\n  max-width: 512px;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 16px;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  max-height: 720px;\n  width: calc(100% - 80px);\n  max-width: 512px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_alertdialog_base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_alertdialog_border;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.boxShadow.elevation5;
+});
+var S_Footer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+    var btnStack = _a.btnStack;
+    return (btnStack === 'side' ? 'row' : 'column-reverse');
+}, function (_a) {
+    var btnStack = _a.btnStack;
+    return (btnStack === 'side' ? 'center' : 'flex-end');
+}, function (_a) {
+    var btnStack = _a.btnStack;
+    return (btnStack === 'side' ? 'flex-end' : 'center');
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+exports.default = MobileAlertDialog;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/mobile/components/MobileAlertDialog/index.d.ts

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

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

package/dist/src/mobile/components/MobileBasicModal/MobileBasicModal.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PDSTextType } from '../../../common';
+declare type MobileBasicModalProps = {
+    titleText: PDSTextType;
+    contentText?: PDSTextType;
+    mBtnText?: PDSTextType;
+    onClickMBtn?: () => void;
+    onClickXMarkIcon?: () => void;
+    children?: React.ReactNode;
+};
+declare function MobileBasicModal({ titleText, contentText, mBtnText, onClickMBtn, onClickXMarkIcon, children }: MobileBasicModalProps): React.ReactPortal;
+export default MobileBasicModal;

package/dist/src/mobile/components/MobileBasicModal/MobileBasicModal.js

@@ -0,0 +1,119 @@
+"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 = __importStar(require("react"));
+var react_dom_1 = __importDefault(require("react-dom"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var IconButton_1 = require("../IconButton");
+var MainButton_1 = require("../MainButton");
+var TextLabel_1 = require("../TextLabel");
+function MobileBasicModal(_a) {
+    var titleText = _a.titleText, contentText = _a.contentText, mBtnText = _a.mBtnText, onClickMBtn = _a.onClickMBtn, onClickXMarkIcon = _a.onClickXMarkIcon, children = _a.children;
+    var container = (0, react_1.useState)(function () {
+        var modalRoot = document.createElement('div');
+        modalRoot.setAttribute('id', 'MobileBasicModal');
+        return modalRoot;
+    })[0];
+    (0, react_1.useLayoutEffect)(function () {
+        var root = document.getElementById('root');
+        if (!root) {
+            return;
+        }
+        root.appendChild(container);
+        return function () {
+            root.removeChild(container);
+        };
+    }, []);
+    return react_dom_1.default.createPortal(react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(S_ModalOverlay, null),
+        react_1.default.createElement(S_ModalWrapper, null,
+            react_1.default.createElement(S_Header, null,
+                react_1.default.createElement(S_TitleWrapper, null,
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "headingBold" })),
+                react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 24, shapeType: "rectangle", iconName: "ic_xmark", iconColorKey: "ui_cpnt_modal_header_icon_02", iconFillType: "line", onClick: onClickXMarkIcon })),
+            react_1.default.createElement(S_Body, null,
+                contentText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextSecondary", styleTheme: "subTitleRegular" })),
+                children && children),
+            react_1.default.createElement(S_Footer, null, mBtnText && react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, size: "rlarge", onClick: onClickMBtn })))), container);
+}
+var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_modal_dimmed;
+});
+var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n\n  max-height: 720px;\n  width: calc(100% - 48px);\n  max-width: 560px;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n\n  max-height: 720px;\n  width: calc(100% - 48px);\n  max-width: 560px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_modal_base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_modal_border;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.boxShadow.elevation4;
+});
+var S_Header = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-bottom: ", ";\n  display: flex;\n  justify-content: space-between;\n"], ["\n  padding-bottom: ", ";\n  display: flex;\n  justify-content: space-between;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+});
+var S_Body = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-top: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  margin-bottom: ", ";\n  overflow-y: scroll;\n  max-height: 480px;\n"], ["\n  padding-top: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  margin-bottom: ", ";\n  overflow-y: scroll;\n  max-height: 480px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var S_Footer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  padding-top: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  margin-bottom: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  padding-top: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  margin-bottom: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var S_TitleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-right: ", ";\n  margin-top: ", ";\n  margin-left: ", ";\n"], ["\n  margin-right: ", ";\n  margin-top: ", ";\n  margin-left: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+exports.default = MobileBasicModal;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/src/mobile/components/MobileBasicModal/index.d.ts

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

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

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

@@ -1,13 +1,20 @@
+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 { Dropdown } from './Dropdown';
 import { IconButton } from './IconButton';
 import { ImageSlide } from './ImageSlide';
 import { MainButton } from './MainButton';
+import { MobileAlertDialog } from './MobileAlertDialog';
+import { MobileBasicModal } from './MobileBasicModal';
 import { MobileHeaderBar } from './MobileHeaderBar';
 import { MobileTabBar } from './MobileTabBar';
 import { Radio } from './Radio';
@@ -20,4 +27,4 @@ import { TextLabel } from './TextLabel';
 import { UploadIconButton } from './UploadIconButton';
 import { UploadMainButton } from './UploadMainButton';
 import { UploadTextButton } from './UploadTextButton';
-export { BlogTextField, Card, CardList, Checkbox, Chip, ContextMenu, ContextMenuItem, IconButton, ImageSlide, MainButton, MobileHeaderBar, MobileTabBar, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton };
+export { BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, Checkbox, Chip, ContextMenu, ContextMenuItem, Dropdown, IconButton, ImageSlide, MainButton, MobileAlertDialog, MobileBasicModal, MobileHeaderBar, MobileTabBar, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton };

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

@@ -1,8 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.MobileTabBar = exports.MobileHeaderBar = exports.MainButton = exports.ImageSlide = exports.IconButton = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.CardList = exports.Card = exports.BlogTextField = void 0;
+exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.MobileTabBar = exports.MobileHeaderBar = exports.MobileBasicModal = exports.MobileAlertDialog = exports.MainButton = exports.ImageSlide = exports.IconButton = exports.Dropdown = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = void 0;
+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");
@@ -15,12 +23,18 @@ 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 Dropdown_1 = require("./Dropdown");
+Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return Dropdown_1.Dropdown; } });
 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 MobileAlertDialog_1 = require("./MobileAlertDialog");
+Object.defineProperty(exports, "MobileAlertDialog", { enumerable: true, get: function () { return MobileAlertDialog_1.MobileAlertDialog; } });
+var MobileBasicModal_1 = require("./MobileBasicModal");
+Object.defineProperty(exports, "MobileBasicModal", { enumerable: true, get: function () { return MobileBasicModal_1.MobileBasicModal; } });
 var MobileHeaderBar_1 = require("./MobileHeaderBar");
 Object.defineProperty(exports, "MobileHeaderBar", { enumerable: true, get: function () { return MobileHeaderBar_1.MobileHeaderBar; } });
 var MobileTabBar_1 = require("./MobileTabBar");

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

@@ -13,5 +13,5 @@ import { LayoutMS } from './layout/LayoutMS';
 import { NavigationContainer as MSNavigationContainer } from './layout/LayoutMS/Containers';
 import { ContainersBox as MSContainersBox } from './layout/LayoutMS/ContainersBox';
 export { LayoutMS, MSNavigationContainer, MSContainersBox };
-import { BlogTextField as M_BlogTextField, Card as M_Card, CardList as M_CardList, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, IconButton as M_IconButton, ImageSlide as M_ImageSlide, MainButton as M_MainButton, MobileHeaderBar as M_MobileHeaderBar, MobileTabBar as M_MobileTabBar, Radio as M_Radio, ReactionButton as M_ReactionButton, Select as M_Select, StatusBlock as M_StatusBlock, TextButton as M_TextButton, TextField as M_TextField, TextLabel as M_TextLabel, UploadIconButton as M_UploadIconButton, UploadMainButton as M_UploadMainButton, UploadTextButton as M_UploadTextButton } from './components';
-export { M_BlogTextField, M_Card, M_CardList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_IconButton, M_ImageSlide, M_MainButton, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton };
+import { BasicFormGroup as M_BasicFormGroup, BasicList as M_BasicList, BasicListItem as M_BasicListItem, BlogTextField as M_BlogTextField, BodyTextGroup as M_BodyTextGroup, Card as M_Card, CardList as M_CardList, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, Dropdown as M_Dropdown, IconButton as M_IconButton, ImageSlide as M_ImageSlide, MainButton as M_MainButton, MobileAlertDialog as M_MobileAlertDialog, MobileBasicModal as M_MobileBasicModal, MobileHeaderBar as M_MobileHeaderBar, MobileTabBar as M_MobileTabBar, Radio as M_Radio, ReactionButton as M_ReactionButton, Select as M_Select, StatusBlock as M_StatusBlock, TextButton as M_TextButton, TextField as M_TextField, TextLabel as M_TextLabel, UploadIconButton as M_UploadIconButton, UploadMainButton as M_UploadMainButton, UploadTextButton as M_UploadTextButton } from './components';
+export { M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_IconButton, M_ImageSlide, M_MainButton, M_MobileAlertDialog, M_MobileBasicModal, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton };

package/dist/src/mobile/index.js

@@ -2,7 +2,7 @@
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MainButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_CardList = exports.M_Card = exports.M_BlogTextField = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = void 0;
+exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileBasicModal = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = void 0;
 // layoutMF
 var LayoutMF_1 = require("./layout/LayoutMF");
 Object.defineProperty(exports, "LayoutMF", { enumerable: true, get: function () { return LayoutMF_1.LayoutMF; } });
@@ -32,16 +32,23 @@ var ContainersBox_4 = require("./layout/LayoutMS/ContainersBox");
 Object.defineProperty(exports, "MSContainersBox", { enumerable: true, get: function () { return ContainersBox_4.ContainersBox; } });
 // components
 var components_1 = require("./components");
+Object.defineProperty(exports, "M_BasicFormGroup", { enumerable: true, get: function () { return components_1.BasicFormGroup; } });
+Object.defineProperty(exports, "M_BasicList", { enumerable: true, get: function () { return components_1.BasicList; } });
+Object.defineProperty(exports, "M_BasicListItem", { enumerable: true, get: function () { return components_1.BasicListItem; } });
 Object.defineProperty(exports, "M_BlogTextField", { enumerable: true, get: function () { return components_1.BlogTextField; } });
+Object.defineProperty(exports, "M_BodyTextGroup", { enumerable: true, get: function () { return components_1.BodyTextGroup; } });
 Object.defineProperty(exports, "M_Card", { enumerable: true, get: function () { return components_1.Card; } });
 Object.defineProperty(exports, "M_CardList", { enumerable: true, get: function () { return components_1.CardList; } });
 Object.defineProperty(exports, "M_Checkbox", { enumerable: true, get: function () { return components_1.Checkbox; } });
 Object.defineProperty(exports, "M_Chip", { enumerable: true, get: function () { return components_1.Chip; } });
 Object.defineProperty(exports, "M_ContextMenu", { enumerable: true, get: function () { return components_1.ContextMenu; } });
 Object.defineProperty(exports, "M_ContextMenuItem", { enumerable: true, get: function () { return components_1.ContextMenuItem; } });
+Object.defineProperty(exports, "M_Dropdown", { enumerable: true, get: function () { return components_1.Dropdown; } });
 Object.defineProperty(exports, "M_IconButton", { enumerable: true, get: function () { return components_1.IconButton; } });
 Object.defineProperty(exports, "M_ImageSlide", { enumerable: true, get: function () { return components_1.ImageSlide; } });
 Object.defineProperty(exports, "M_MainButton", { enumerable: true, get: function () { return components_1.MainButton; } });
+Object.defineProperty(exports, "M_MobileAlertDialog", { enumerable: true, get: function () { return components_1.MobileAlertDialog; } });
+Object.defineProperty(exports, "M_MobileBasicModal", { enumerable: true, get: function () { return components_1.MobileBasicModal; } });
 Object.defineProperty(exports, "M_MobileHeaderBar", { enumerable: true, get: function () { return components_1.MobileHeaderBar; } });
 Object.defineProperty(exports, "M_MobileTabBar", { enumerable: true, get: function () { return components_1.MobileTabBar; } });
 Object.defineProperty(exports, "M_Radio", { enumerable: true, get: function () { return components_1.Radio; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "0.6.14",
+  "version": "0.7.0",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,6 +1,22 @@
 # UW Release Notes
-## [v0.6.14]
+## [v0.7.0]
 
 
-### Package
-   * react-hook-form v7.28.1에서 v7.7.1로 다운그레이드
+### Component
+* Desktop
+  * BasicFormGroup 생성
+  * BasicList 생성
+  * BasicListItem 생성
+  * BodyTextGroup 생성
+  * DesktopAlertDialog 생성
+  * DesktopBasicModal 생성
+  * Dropdown 생성
+  * PageTitleTextGroup 생성
+* Mobile 
+  * BasicFormGroup 생성
+  * BasicList 생성
+  * BasicListItem 생성
+  * BodyTextGroup 생성
+  * Dropdown 생성
+  * MobileAlertDialog 생성
+  * MobileBasicModal 생성