pds-dev-kit-web 1.3.28 → 1.4.2

package/dist/src/desktop/index.js

@@ -2,7 +2,7 @@
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_ReactionButton = exports.D_Select = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopBasicModal = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = void 0;
+exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_ReactionButton = exports.D_Select = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = void 0;
 // layoutWF
 var LayoutWF_1 = require("./layout/LayoutWF");
 Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
@@ -39,14 +39,15 @@ Object.defineProperty(exports, "D_Chip", { enumerable: true, get: function () {
 Object.defineProperty(exports, "D_ContextMenu", { enumerable: true, get: function () { return components_1.ContextMenu; } });
 Object.defineProperty(exports, "D_ContextMenuItem", { enumerable: true, get: function () { return components_1.ContextMenuItem; } });
 Object.defineProperty(exports, "D_DesktopAlertDialog", { enumerable: true, get: function () { return components_1.DesktopAlertDialog; } });
-Object.defineProperty(exports, "D_DesktopBasicModal", { enumerable: true, get: function () { return components_1.DesktopBasicModal; } });
 Object.defineProperty(exports, "D_DesktopHeaderBar", { enumerable: true, get: function () { return components_1.DesktopHeaderBar; } });
 Object.defineProperty(exports, "D_DesktopTabBar", { enumerable: true, get: function () { return components_1.DesktopTabBar; } });
 Object.defineProperty(exports, "D_Dropdown", { enumerable: true, get: function () { return components_1.Dropdown; } });
+Object.defineProperty(exports, "D_DynamicDesktopNavBar", { enumerable: true, get: function () { return components_1.DynamicDesktopNavBar; } });
 Object.defineProperty(exports, "D_EditApplyTextField", { enumerable: true, get: function () { return components_1.EditApplyTextField; } });
 Object.defineProperty(exports, "D_FilterBar", { enumerable: true, get: function () { return components_1.FilterBar; } });
 Object.defineProperty(exports, "D_FloatingActionButton", { enumerable: true, get: function () { return components_1.FloatingActionButton; } });
 Object.defineProperty(exports, "D_Hero", { enumerable: true, get: function () { return components_1.Hero; } });
+Object.defineProperty(exports, "D_HorizontalFormGroup", { enumerable: true, get: function () { return components_1.HorizontalFormGroup; } });
 Object.defineProperty(exports, "D_IconButton", { enumerable: true, get: function () { return components_1.IconButton; } });
 Object.defineProperty(exports, "D_ImageSlide", { enumerable: true, get: function () { return components_1.ImageSlide; } });
 Object.defineProperty(exports, "D_MainButton", { enumerable: true, get: function () { return components_1.MainButton; } });
@@ -63,3 +64,7 @@ Object.defineProperty(exports, "D_UploadMainButton", { enumerable: true, get: fu
 Object.defineProperty(exports, "D_UploadTextButton", { enumerable: true, get: function () { return components_1.UploadTextButton; } });
 Object.defineProperty(exports, "D_UserDesktopNavBar", { enumerable: true, get: function () { return components_1.UserDesktopNavBar; } });
 Object.defineProperty(exports, "D_UserDesktopTabBar", { enumerable: true, get: function () { return components_1.UserDesktopTabBar; } });
+// panels
+var panels_1 = require("./panels");
+Object.defineProperty(exports, "D_DesktopBasicModal", { enumerable: true, get: function () { return panels_1.DesktopBasicModal; } });
+Object.defineProperty(exports, "D_DesktopHeadlessModal", { enumerable: true, get: function () { return panels_1.DesktopHeadlessModal; } });

package/dist/src/desktop/{components → panels}/DesktopBasicModal/DesktopBasicModal.d.ts

@@ -15,7 +15,7 @@ declare type DesktopBasicModalProps = {
     mBtn1Type?: 'button' | 'submit';
     mBtn2Type?: 'button' | 'submit';
     mBtn3Type?: 'button' | 'submit';
-    size?: 'large' | 'medium' | 'small';
+    size?: 'large' | 'medium' | 'small' | 'rlarge';
     onClickMBtn1?: () => void;
     onClickMBtn2?: () => void;
     onClickMBtn3?: () => void;

package/dist/src/desktop/{components → panels}/DesktopBasicModal/DesktopBasicModal.js

@@ -30,8 +30,7 @@ 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");
+var components_1 = require("../../components");
 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 () {
@@ -56,22 +55,22 @@ function DesktopBasicModal(_a) {
         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(components_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" })),
+                contentText && (react_1.default.createElement(components_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, { fillType: "line", text: mBtn3Text, state: mBtn3State, type: mBtn3Type, size: "medium", onClick: onClickMBtn3 }))),
+                react_1.default.createElement(S_Left, null, btn3Mode.includes(btnMode) && mBtn3Text && (react_1.default.createElement(components_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, { fillType: "line", 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);
+                    react_1.default.createElement(S_Btn2Wrapper, null, btn2Mode.includes(btnMode) && mBtn2Text && (react_1.default.createElement(components_1.MainButton, { styleTheme: "secondary", text: mBtn2Text, state: mBtn2State, type: mBtn2Type, size: "medium", onClick: onClickMBtn2 }))),
+                    btn1Mode.includes(btnMode) && mBtn1Text && (react_1.default.createElement(components_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: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  max-height: 720px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  max-height: 720px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n"])), function (_a) {
+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) {
@@ -85,9 +84,13 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
     var sizes = {
         large: '960px',
         medium: '688px',
-        small: '400px'
+        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;
@@ -108,7 +111,7 @@ var S_Header = styled_components_1.default.div(templateObject_6 || (templateObje
     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  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  overflow: ", ";\n\n  ", "\n"], ["\n  flex: 1;\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  overflow: ", ";\n\n  ", "\n"])), function (_a) {
+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) {

package/dist/src/desktop/panels/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/panels/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/panels/DesktopHeadlessModal/index.d.ts

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

package/dist/src/desktop/panels/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/panels/index.d.ts

@@ -0,0 +1,3 @@
+import { DesktopBasicModal } from './DesktopBasicModal';
+import { DesktopHeadlessModal } from './DesktopHeadlessModal';
+export { DesktopBasicModal, DesktopHeadlessModal };

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesktopHeadlessModal = exports.DesktopBasicModal = void 0;
+var DesktopBasicModal_1 = require("./DesktopBasicModal");
+Object.defineProperty(exports, "DesktopBasicModal", { enumerable: true, get: function () { return DesktopBasicModal_1.DesktopBasicModal; } });
+var DesktopHeadlessModal_1 = require("./DesktopHeadlessModal");
+Object.defineProperty(exports, "DesktopHeadlessModal", { enumerable: true, get: function () { return DesktopHeadlessModal_1.DesktopHeadlessModal; } });

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

@@ -32,31 +32,34 @@ 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 horizontal = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  background-color: ", ";\n  width: 100%;\n"], ["\n  height: ", ";\n  background-color: ", ";\n  width: 100%;\n"])), function (_a) {
     var displayType = _a.displayType;
     return displayType &&
         {
             line: '1px',
             area: '16px'
         }[displayType];
+}, function (_a) {
+    var displayType = _a.displayType, theme = _a.theme;
+    return displayType &&
+        {
+            line: theme.ui_cpnt_divider,
+            area: theme.ui_cpnt_divider_area
+        }[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 S_Divider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", ";\n  ", "\n"])), 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;
+}, function (_a) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    return colorTheme === 'divider1' && "background-color: " + theme.ui_cpnt_divider_white_opacity30 + ";";
 });
 exports.default = Divider;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js

@@ -189,15 +189,15 @@ function TextFieldBase(_a) {
     return react_1.default.createElement(react_1.default.Fragment, null, S_TextFieldBase());
 }
 var S_InputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  width: 100%;\n"])));
-var read_only = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  -ms-user-select: none;\n  -moz-user-select: -moz-none;\n  -webkit-user-select: none;\n  user-select: none;\n"], ["\n  color: ", ";\n  -ms-user-select: none;\n  -moz-user-select: -moz-none;\n  -webkit-user-select: none;\n  user-select: none;\n"])), function (_a) {
+var read_only = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
     return colorTheme &&
-        { none: theme.ui_cpnt_textfield_text_hint, dark: theme.ui_cpnt_textfield_text_darktheme_hint }[colorTheme];
+        {
+            none: theme.ui_cpnt_textfield_text_disabled,
+            dark: theme.ui_cpnt_textfield_text_darktheme_disabled
+        }[colorTheme];
 });
-var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  color: ", ";\n"], ["\n  color: ", ";\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textfield_text_disabled;
-}, function (_a) {
+var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  pointer-events: none;\n"], ["\n  color: ", ";\n  pointer-events: none;\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
     return colorTheme &&
         {

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

@@ -115,8 +115,8 @@ function BasicListItem(_a) {
                 (displayType === 'ibtn_amount1' ||
                     displayType === 'ibtn_amount2' ||
                     displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
-                    displayType === 'ibtn_amount2' && (react_1.default.createElement(S_IconWrapper, null, iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn2IconName, iconFillType: iBtn2IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn2Click })))),
-                    react_1.default.createElement(S_IconWrapper, null, iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click }))))),
+                    displayType === 'ibtn_amount2' && (react_1.default.createElement(S_IconWrapper, null, iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn2IconName, iconFillType: iBtn2IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn2Click, iconColorKey: "ui_cpnt_button_icon_default" })))),
+                    react_1.default.createElement(S_IconWrapper, null, iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click, iconColorKey: "ui_cpnt_button_icon_default" }))))),
                 displayType === 'mbtn' && (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, fillType: mBtnFillType, size: "small", onMouseDown: handleMBtnClick }),
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
@@ -157,7 +157,7 @@ var S_RightBox = styled_components_1.default.div(templateObject_9 || (templateOb
     var displayType = _a.displayType;
     return (displayType === 'text' ? '40px' : 'auto');
 });
-var S_SwitchWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  min-width: 68px;\n  min-height: 32px;\n  position: relative;\n  right: 54px;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  min-width: 68px;\n  min-height: 32px;\n  position: relative;\n  right: 54px;\n"])));
+var S_SwitchWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  min-width: 68px;\n  min-height: 32px;\n  position: relative;\n  right: 0;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  min-width: 68px;\n  min-height: 32px;\n  position: relative;\n  right: 0;\n"])));
 var S_DividerWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  width: calc(100% - 24px);\n"], ["\n  width: calc(100% - 24px);\n"])));
 exports.default = BasicListItem;
 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/mobile/components/BlogTextField/BlogTextField.js

@@ -81,15 +81,15 @@ var rlarge = (0, styled_components_1.css)(templateObject_3 || (templateObject_3
 });
 var normal = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_textfield_base_normal;
+    return theme.ui_cpnt_blogtextfield_base_01;
 });
 var read_only = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_textfield_base_disabled;
+    return theme.ui_cpnt_blogtextfield_base_01;
 });
 var disabled = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_textfield_base_disabled;
+    return theme.ui_cpnt_blogtextfield_base_01;
 });
 var S_BlogTextFieldWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n  display: flex;\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n  display: flex;\n  ", ";\n  ", ";\n"])), function (_a) {
     var size = _a.size;

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

@@ -35,7 +35,7 @@ var S_CardGroups = styled_components_1.default.div(templateObject_1 || (template
     return theme.boxShadow.elevation2 + ", 0 0 0 2px " + theme.ui_cpnt_card_selected_border + " inset";
 });
 var S_ImageIconModeBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  div {\n    border-radius: 16px 16px 0 0;\n  }\n"], ["\n  div {\n    border-radius: 16px 16px 0 0;\n  }\n"])));
-var S_Content = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding: ", "; ;\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding: ", "; ;\n"])), function (_a) {
+var S_Content = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  padding: ", "; ;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  padding: ", "; ;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });

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

@@ -56,7 +56,7 @@ function Chip(_a) {
         switch (displayType) {
             case 'category_choice':
                 return (react_1.default.createElement(S_CategoryChoiceChip, { isActive: isActive, onClick: handleClickChip },
-                    id !== value && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
+                    !isActive && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
                         react_1.default.createElement(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }))),
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
                     isActive && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
@@ -85,7 +85,7 @@ function Chip(_a) {
     return react_1.default.createElement(S_ChipWrapper, null, chipType());
 }
 exports.default = Chip;
-var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 16px;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  gap: 4px;\n  ", ";\n"], ["\n  border-radius: 16px;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  gap: 4px;\n  ", ";\n"])), function (_a) {
+var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 16px;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  ", ";\n"], ["\n  border-radius: 16px;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, isActive = _a.isActive;
     return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : '';
 }, function (_a) {
@@ -100,11 +100,9 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
 });
 var S_CategoryIconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var theme = _a.theme, isActive = _a.isActive;
-    return isActive
-        ? "margin-left: " + theme.spacing.spacingA + "px"
-        : "margin-right: " + theme.spacing.spacingA + "px";
+    return isActive ? "margin-left: " + theme.spacing.spacingA : "margin-right: " + theme.spacing.spacingA;
 });
-var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
@@ -114,7 +112,7 @@ var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateO
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 16px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  background-color: ", ";\n  border-radius: 16px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
@@ -128,7 +126,7 @@ var S_XIconWrapper = styled_components_1.default.div(templateObject_5 || (templa
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_FilterSingleChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-radius: 16px;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  border-radius: 16px;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+var S_FilterSingleChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme, isActive = _a.isActive;
     return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
@@ -142,14 +140,14 @@ var S_FilterIconWrapper = styled_components_1.default.div(templateObject_7 || (t
     var theme = _a.theme;
     return theme.spacing.spacingA;
 });
-var S_LabelChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n"], ["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n"])), function (_a) {
+var S_LabelChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n"], ["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_line_border_01;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_TimeChip = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 10px;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-radius: 10px;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
+var S_TimeChip = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_base_playtime;
 }, function (_a) {

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

@@ -2,6 +2,7 @@ import React from 'react';
 declare type ContextMenuProps = {
     children: React.ReactNode;
     autoWidthMode?: 'none' | 'use';
+    maxHeight?: number;
 };
-declare function ContextMenu({ children, autoWidthMode }: ContextMenuProps): JSX.Element;
+declare function ContextMenu({ children, autoWidthMode, maxHeight }: ContextMenuProps): JSX.Element;
 export default ContextMenu;

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

@@ -10,10 +10,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function ContextMenu(_a) {
-    var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b;
-    return react_1.default.createElement(S_ContextMenu, { autoWidth: autoWidthMode === 'use' }, children);
+    var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b, maxHeight = _a.maxHeight;
+    return (react_1.default.createElement(S_ContextMenu, { autoWidth: autoWidthMode === 'use', maxHeight: maxHeight }, children));
 }
-var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  vertical-align: baseline;\n  width: ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  vertical-align: baseline;\n  width: ", ";\n"])), function (_a) {
+var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  vertical-align: baseline;\n  width: ", ";\n  max-height: ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  vertical-align: baseline;\n  width: ", ";\n  max-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_contextmenu_base;
 }, function (_a) {
@@ -28,6 +28,9 @@ var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (template
 }, function (_a) {
     var autoWidth = _a.autoWidth;
     return (autoWidth ? 'inherit' : 'auto');
+}, function (_a) {
+    var maxHeight = _a.maxHeight;
+    return (maxHeight ? maxHeight + "px" : 'none');
 });
 exports.default = ContextMenu;
 var templateObject_1;

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

@@ -67,7 +67,7 @@ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 =
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });
-var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n\n  ", ";\n"])), function (_a) {
+var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, selected = _a.selected;
     return selected
         ? theme.ui_cpnt_contextmenu_menu_base_selected

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

@@ -1,16 +1,20 @@
 /// <reference types="react" />
 import { TFunctionResult } from 'i18next';
 import { PDSValueOption } from '../../../common';
+declare type DropDownValues = PDSValueOption & {
+    state?: 'normal' | 'disabled';
+};
 declare type Props = {
-    colorTheme?: 'none' | 'dark';
+    colorTheme?: 'none' | 'dark' | 'white';
     defaultValue?: PDSValueOption;
     hintText?: TFunctionResult;
+    maxHeightItemNumber?: number;
     responsiveMode?: 'none' | 'use';
     selectionMode?: 'single' | 'multi';
     size?: 'large' | 'small';
     state?: 'normal' | 'read_only' | 'disabled';
-    valueArray: PDSValueOption[];
+    valueArray: DropDownValues[];
     onChange?: (option: PDSValueOption) => void;
 };
-declare function Dropdown({ colorTheme, defaultValue, hintText, responsiveMode, selectionMode, size, state, valueArray, onChange }: Props): JSX.Element;
+declare function Dropdown({ colorTheme, defaultValue, hintText, maxHeightItemNumber, responsiveMode, selectionMode, size, state, valueArray, onChange }: Props): JSX.Element;
 export default Dropdown;