pds-dev-kit-web-test 0.0.1

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

@@ -0,0 +1,148 @@
+"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 = __importStar(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+var MainButton_1 = require("../MainButton");
+var TextLabel_1 = require("../TextLabel");
+function DesktopBasicModal(_a) {
+    var titleText = _a.titleText, contentText = _a.contentText, _b = _a.bodySpacingMode, bodySpacingMode = _b === void 0 ? 'use' : _b, _c = _a.bodyOverflowType, bodyOverflowType = _c === void 0 ? 'auto' : _c, _d = _a.btnMode, btnMode = _d === void 0 ? 'mbtn_amount2' : _d, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, _e = _a.mBtn1State, mBtn1State = _e === void 0 ? 'normal' : _e, _f = _a.mBtn2State, mBtn2State = _f === void 0 ? 'normal' : _f, _g = _a.mBtn3State, mBtn3State = _g === void 0 ? 'normal' : _g, _h = _a.mBtn1Type, mBtn1Type = _h === void 0 ? 'button' : _h, _j = _a.mBtn2Type, mBtn2Type = _j === void 0 ? 'button' : _j, _k = _a.mBtn3Type, mBtn3Type = _k === void 0 ? 'button' : _k, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3, _l = _a.size, size = _l === void 0 ? 'large' : _l, children = _a.children;
+    var container = (0, react_1.useState)(function () {
+        var modalRoot = document.createElement('div');
+        modalRoot.setAttribute('id', 'DesktopBasicModal');
+        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 = ['mbtn_amount1', 'mbtn_amount2', 'mbtn_amount3'];
+    var btn2Mode = ['mbtn_amount2', 'mbtn_amount3'];
+    var btn3Mode = ['mbtn_amount3'];
+    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, { size: size },
+            react_1.default.createElement(S_Header, null,
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "headingBold" })),
+            react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode, bodyOverflowType: bodyOverflowType },
+                contentText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextSecondary", styleTheme: "subTitleRegular" })),
+                children && children),
+            react_1.default.createElement(hybrid_1.Divider, null),
+            react_1.default.createElement(S_Footer, null,
+                react_1.default.createElement(S_Left, null, btn3Mode.includes(btnMode) && mBtn3Text && (react_1.default.createElement(MainButton_1.MainButton, { styleTheme: "secondary", text: mBtn3Text, state: mBtn3State, type: mBtn3Type, size: "medium", onClick: onClickMBtn3 }))),
+                react_1.default.createElement(S_Right, null,
+                    react_1.default.createElement(S_Btn2Wrapper, null, btn2Mode.includes(btnMode) && mBtn2Text && (react_1.default.createElement(MainButton_1.MainButton, { styleTheme: "secondary", text: mBtn2Text, state: mBtn2State, type: mBtn2Type, size: "medium", onClick: onClickMBtn2 }))),
+                    btn1Mode.includes(btnMode) && mBtn1Text && (react_1.default.createElement(MainButton_1.MainButton, { text: mBtn1Text, state: mBtn1State, type: mBtn1Type, size: "medium", onClick: onClickMBtn1 })))))), 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: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  ", ";\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;
+}, function (_a) {
+    var size = _a.size;
+    var sizes = {
+        large: '960px',
+        medium: '688px',
+        small: '400px',
+        rlarge: '60vw'
+    };
+    return size && sizes[size];
+}, function (_a) {
+    var size = _a.size;
+    return size === 'rlarge' && 'min-width: 960px;';
+});
+var S_Left = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+var S_Btn2Wrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+var S_Right = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_Header = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: 0 ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n"], ["\n  margin: 0 ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var S_Body = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  flex: 1;\n  max-height: 50vh;\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  overflow: ", ";\n\n  ", "\n"], ["\n  flex: 1;\n  max-height: 50vh;\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  overflow: ", ";\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+}, 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.spacingD;
+}, function (_a) {
+    var bodyOverflowType = _a.bodyOverflowType;
+    return bodyOverflowType;
+}, function (_a) {
+    var bodySpacingMode = _a.bodySpacingMode;
+    return bodySpacingMode === 'none' && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      margin-bottom: 0;\n      margin-left: 0;\n      margin-right: 0;\n    "], ["\n      margin-bottom: 0;\n      margin-left: 0;\n      margin-right: 0;\n    "])));
+});
+var S_Footer = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\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.spacingD;
+});
+exports.default = DesktopBasicModal;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

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

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

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
+declare type DesktopHeaderBarProps = {
+    text?: PDSTextType;
+    size?: 'xlarge' | 'large';
+    leftDisplayType?: 'text' | 'icon' | 'back';
+    iconName?: FillIconNameKeys | LineIconNameKeys;
+    rightBtnMode?: 'none' | 'close' | 'mbtn' | 'mbtn_fill' | 'help_window';
+    rightBtn2Mode?: 'none' | 'mbtn' | 'mbtn_fill' | 'help_window';
+    rightBtn3Mode?: 'none' | 'help_window';
+    mBtnText?: PDSTextType;
+    mBtn2Text?: PDSTextType;
+    mBtnState?: 'normal' | 'disabled';
+    mBtn2State?: 'normal' | 'disabled';
+    dividerType?: 'none' | 'solid';
+    onClickLeftBtn?: () => void;
+    onClickRightBtn?: () => void;
+    onClickRightBtn2?: () => void;
+    onClickRightBtn3?: () => void;
+};
+declare function DesktopHeaderBar({ text, size, leftDisplayType, iconName, rightBtnMode, rightBtn2Mode, rightBtn3Mode, mBtnText, mBtn2Text, mBtnState, mBtn2State, dividerType, onClickLeftBtn, onClickRightBtn, onClickRightBtn2, onClickRightBtn3 }: DesktopHeaderBarProps): JSX.Element;
+export default DesktopHeaderBar;

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

@@ -0,0 +1,145 @@
+"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 hybrid_1 = require("../../../hybrid");
+var IconButton_1 = require("../IconButton");
+var MainButton_1 = require("../MainButton");
+var TextLabel_1 = require("../TextLabel");
+function DesktopHeaderBar(_a) {
+    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'xlarge' : _b, _c = _a.leftDisplayType, leftDisplayType = _c === void 0 ? 'text' : _c, iconName = _a.iconName, _d = _a.rightBtnMode, rightBtnMode = _d === void 0 ? 'none' : _d, _e = _a.rightBtn2Mode, rightBtn2Mode = _e === void 0 ? 'none' : _e, _f = _a.rightBtn3Mode, rightBtn3Mode = _f === void 0 ? 'none' : _f, mBtnText = _a.mBtnText, mBtn2Text = _a.mBtn2Text, _g = _a.mBtnState, mBtnState = _g === void 0 ? 'normal' : _g, _h = _a.mBtn2State, mBtn2State = _h === void 0 ? 'normal' : _h, _j = _a.dividerType, dividerType = _j === void 0 ? 'none' : _j, onClickLeftBtn = _a.onClickLeftBtn, onClickRightBtn = _a.onClickRightBtn, onClickRightBtn2 = _a.onClickRightBtn2, onClickRightBtn3 = _a.onClickRightBtn3;
+    var isLastButtonIcon = rightBtnMode === 'close' ||
+        rightBtnMode === 'help_window' ||
+        (rightBtnMode === 'none' && rightBtn2Mode === 'help_window') ||
+        (rightBtnMode === 'none' && rightBtn2Mode === 'none' && rightBtn3Mode === 'help_window');
+    var handleClickLeftBtn = function () {
+        if (onClickLeftBtn) {
+            onClickLeftBtn();
+        }
+    };
+    var handleClickRightBtn = function () {
+        if (onClickRightBtn) {
+            onClickRightBtn();
+        }
+    };
+    var handleClickRightBtn2 = function () {
+        if (onClickRightBtn2) {
+            onClickRightBtn2();
+        }
+    };
+    var handleClickRightBtn3 = function () {
+        if (onClickRightBtn3) {
+            onClickRightBtn3();
+        }
+    };
+    var mBtnElement = function (text, state, handleClick) {
+        return size === 'xlarge' && (react_1.default.createElement(MainButton_1.MainButton, { text: text, size: "small", styleTheme: "secondary", onClick: handleClick, state: state }));
+    };
+    var mBtnFillElement = function (text, state, handleClick) {
+        return size === 'xlarge' && (react_1.default.createElement(MainButton_1.MainButton, { text: text, size: "small", onClick: handleClick, state: state }));
+    };
+    var iconButtonElement = function (iconName, handleClick) { return (react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", iconSize: 24, shapeType: "rectangle", iconName: iconName, iconFillType: "line", onClick: handleClick, iconColorKey: iconName === 'ic_help_window'
+            ? 'ui_cpnt_button_icon_disabled'
+            : 'ui_cpnt_button_icon_enabled', baseColorKey: "ui_cpnt_button_fill_base_transparent" })); };
+    var leftDisplayMode = function () {
+        switch (leftDisplayType) {
+            case 'icon': {
+                return (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, colorKey: "ui_cpnt_headerbar_icon" }),
+                    react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })));
+            }
+            case 'back': {
+                return iconButtonElement('ic_arrow_left', handleClickLeftBtn);
+            }
+            case 'text': {
+                return;
+            }
+        }
+    };
+    var rightButton3Mode = function () {
+        switch (rightBtn3Mode) {
+            case 'help_window': {
+                return iconButtonElement('ic_help_window', handleClickRightBtn3);
+            }
+            case 'none': {
+                return;
+            }
+        }
+    };
+    var rightButton2Mode = function () {
+        switch (rightBtn2Mode) {
+            case 'mbtn': {
+                return mBtnElement(mBtn2Text, mBtn2State, handleClickRightBtn2);
+            }
+            case 'mbtn_fill': {
+                return mBtnFillElement(mBtn2Text, mBtn2State, handleClickRightBtn2);
+            }
+            case 'help_window': {
+                return iconButtonElement('ic_help_window', handleClickRightBtn2);
+            }
+            case 'none': {
+                return;
+            }
+        }
+    };
+    var rightButtonMode = function () {
+        switch (rightBtnMode) {
+            case 'close': {
+                return iconButtonElement('ic_xmark', handleClickRightBtn);
+            }
+            case 'mbtn': {
+                return mBtnElement(mBtnText, mBtnState, handleClickRightBtn);
+            }
+            case 'mbtn_fill': {
+                return mBtnFillElement(mBtnText, mBtnState, handleClickRightBtn);
+            }
+            case 'help_window': {
+                return iconButtonElement('ic_help_window', handleClickRightBtn);
+            }
+            case 'none': {
+                return;
+            }
+        }
+    };
+    return (react_1.default.createElement(S_DesktopHeaderBar, { size: size, hasDivider: dividerType === 'solid', hasBackIcon: leftDisplayType === 'back' },
+        react_1.default.createElement(S_LeftDisplayBox, null,
+            leftDisplayMode(),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "body1Bold", singleLineMode: "use", colorTheme: "sysTextPrimary" })),
+        react_1.default.createElement(S_ButtonBox, { isLastButtonIcon: isLastButtonIcon },
+            rightButton3Mode(),
+            rightButton2Mode(),
+            rightButtonMode())));
+}
+var S_DesktopHeaderBar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: space-between;\n  padding-left: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: space-between;\n  padding-left: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_headerbar_base_area;
+}, function (_a) {
+    var theme = _a.theme, hasDivider = _a.hasDivider;
+    return hasDivider && "1px solid " + theme.ui_cpnt_divider;
+}, function (_a) {
+    var size = _a.size;
+    return (size === 'xlarge' ? '64px' : '48px');
+}, function (_a) {
+    var hasBackIcon = _a.hasBackIcon, theme = _a.theme;
+    return hasBackIcon ? theme.spacing.spacingC : theme.spacing.spacingE;
+});
+var S_LeftDisplayBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  margin-right: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  margin-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+var S_ButtonBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  margin-right: ", ";\n\n  & > :not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  margin-right: ", ";\n\n  & > :not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {
+    var isLastButtonIcon = _a.isLastButtonIcon, theme = _a.theme;
+    return isLastButtonIcon ? theme.spacing.spacingB : theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+exports.default = DesktopHeaderBar;
+var templateObject_1, templateObject_2, templateObject_3;

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

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+declare type DesktopBasicModalProps = {
+    body: React.ReactNode;
+    size?: 'large' | 'medium' | 'small' | 'rlarge';
+    dimmedClickCloseMode?: 'use' | 'none';
+    scrollVisibleType?: 'hidden' | 'moving' | 'visible';
+    onClose?: () => void;
+};
+declare function DesktopBasicModal({ body, size, dimmedClickCloseMode, scrollVisibleType, onClose }: DesktopBasicModalProps): React.ReactPortal;
+export default DesktopBasicModal;

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

@@ -0,0 +1,121 @@
+"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 = __importStar(require("styled-components"));
+function DesktopBasicModal(_a) {
+    var body = _a.body, _b = _a.size, size = _b === void 0 ? 'rlarge' : _b, _c = _a.dimmedClickCloseMode, dimmedClickCloseMode = _c === void 0 ? 'none' : _c, _d = _a.scrollVisibleType, scrollVisibleType = _d === void 0 ? 'hidden' : _d, onClose = _a.onClose;
+    var container = (0, react_1.useState)(function () {
+        var modalRoot = document.createElement('div');
+        modalRoot.setAttribute('id', 'DesktopBasicModal');
+        return modalRoot;
+    })[0];
+    var targetRef = (0, react_1.useRef)(null);
+    var handleClickOutside = function (e) {
+        e.stopPropagation();
+        if (dimmedClickCloseMode === 'use') {
+            if (onClose) {
+                onClose();
+            }
+        }
+    };
+    (0, react_1.useLayoutEffect)(function () {
+        var root = document.getElementById('root');
+        var isScrolling;
+        var handleScroll = function () {
+            if (targetRef.current) {
+                targetRef.current.classList.add('scrollMoving');
+            }
+            isScrolling = setTimeout(function () {
+                var _a;
+                (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.classList.remove('scrollMoving');
+            }, 500);
+        };
+        if (!root) {
+            return;
+        }
+        if (targetRef.current) {
+            targetRef.current.onscroll = handleScroll;
+        }
+        root.appendChild(container);
+        return function () {
+            root.removeChild(container);
+            clearTimeout(isScrolling);
+        };
+    }, []);
+    return react_dom_1.default.createPortal(react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(S_ModalOverlay, { onMouseDown: handleClickOutside }),
+        react_1.default.createElement(S_ModalWrapper, { size: size },
+            react_1.default.createElement(S_Body, { ref: targetRef, scrollVisibleType: scrollVisibleType }, body && body))), 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: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  left: 50%;\n  max-height: 80vh;\n  min-width: ", ";\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  left: 50%;\n  max-height: 80vh;\n  min-width: ", ";\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\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;
+}, function (_a) {
+    var size = _a.size;
+    return size === 'rlarge' && '960px';
+}, function (_a) {
+    var size = _a.size;
+    var sizes = {
+        small: '400px',
+        medium: '688px',
+        large: '960px',
+        rlarge: '60vw'
+    };
+    return sizes[size];
+});
+var scrollVisible = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 3px;\n  }\n\n  ::-webkit-scrollbar {\n    display: block;\n    width: 6px;\n  }\n"], ["\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 3px;\n  }\n\n  ::-webkit-scrollbar {\n    display: block;\n    width: 6px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_modal_border;
+});
+var scrollInvisible = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
+var S_Body = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  overflow: auto;\n  overflow-y: overlay;\n  width: 100%;\n\n  ", "\n\n  &.scrollMoving {\n    ", "\n  }\n"], ["\n  overflow: auto;\n  overflow-y: overlay;\n  width: 100%;\n\n  ", "\n\n  &.scrollMoving {\n    ", "\n  }\n"])), function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType;
+    return scrollVisibleType &&
+        {
+            moving: scrollInvisible,
+            visible: scrollVisible,
+            hidden: scrollInvisible
+        }[scrollVisibleType];
+}, function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType;
+    return scrollVisibleType === 'moving' && scrollVisible;
+});
+exports.default = DesktopBasicModal;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

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

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

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { PDSTabItemOption, PDSTextType } from '../../../common/types';
+declare type ItemArray = PDSTabItemOption & {
+    subArray?: PDSTabItemOption[];
+};
+declare type TextObj = {
+    title: PDSTextType;
+    path: string;
+    subArray?: {
+        title: PDSTextType;
+        path: string;
+    }[];
+};
+declare type DesktopTabBarProps = {
+    itemArray?: ItemArray[];
+    styleTheme?: 'main' | 'content';
+    /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
+    textArray?: TextObj[];
+};
+declare function DesktopTabBar({ itemArray, styleTheme, textArray }: DesktopTabBarProps): JSX.Element;
+export default DesktopTabBar;