pds-dev-kit-web-test 2.5.720 → 2.5.721

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

@@ -60,7 +60,7 @@ var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_11 ||
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
     return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
 });
-var S_ContentsContainer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  scrollbar-width: auto !important;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  scrollbar-width: auto !important;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_wizard_contentscontainer01_background;
 }, function (_a) {

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

@@ -61,7 +61,7 @@ var WFL_4Area2Style = (0, styled_components_1.css)(templateObject_12 || (templat
 var WFL_1Content2Style = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
 var WFL_2Content2Style = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
 var S_Box = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n"], ["\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n"])));
-var S_ContentsContainer1 = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 24px 0 0 24px;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 480px;\n\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 24px 0 0 24px;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 480px;\n\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+var S_ContentsContainer1 = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 24px 0 0 24px;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  scrollbar-width: auto !important;\n\n  ", ";\n  ", ";\n\n  width: 480px;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 24px 0 0 24px;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  scrollbar-width: auto !important;\n\n  ", ";\n  ", ";\n\n  width: 480px;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_wizard_contentscontainer01_background;
 }, function (_a) {
@@ -75,8 +75,8 @@ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_16 ||
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: ".concat(containerColor);
-}, scrollbarStyle_1.scrollbarStyle);
-var S_ContentsContainer2 = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 0 24px 24px 0;\n  width: 672px;\n\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  border-radius: 0 24px 24px 0;\n  width: 672px;\n\n  ", ";\n  ", ";\n"])), function (_a) {
+}, scrollbarStyle_1.scrollbarWithPaddingStyle);
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 0 24px 24px 0;\n\n  scrollbar-width: auto !important;\n\n  ", ";\n  ", ";\n\n  width: 672px;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 0 24px 24px 0;\n\n  scrollbar-width: auto !important;\n\n  ", ";\n  ", ";\n\n  width: 672px;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_wizard_contentscontainer02_background;
 }, function (_a) {
@@ -90,12 +90,15 @@ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_17 ||
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: ".concat(containerColor);
-});
+}, scrollbarStyle_1.scrollbarWithPaddingStyle);
 var S_ContentsArea1 = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 64px;\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 64px;\n\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: ".concat(areaColor);
 });
-var S_ContentsArea2 = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  box-sizing: border-box;\n\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_ContentsArea2 = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-left: ", ";\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-left: ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+}, function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WFL_1: WFL_1Area2Style,

package/dist/src/desktop/panels/DesktopBasicModal/DesktopBasicModal.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
 import type { PDSTextType } from '../../../common';
 type DesktopBasicModalProps = {
     titleText: PDSTextType;
@@ -16,7 +17,7 @@ type DesktopBasicModalProps = {
     mBtn2Type?: 'button' | 'submit';
     mBtn3Type?: 'button' | 'submit';
     size?: 'large' | 'medium' | 'small' | 'rlarge';
-    scrollVisibleType?: 'hidden' | 'visible';
+    scrollVisibleType?: ScrollVisibleType;
     onClickMBtn1?: () => void;
     onClickMBtn2?: () => void;
     onClickMBtn3?: () => void;

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

@@ -44,9 +44,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_dom_1 = __importDefault(require("react-dom"));
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 var styled_components_1 = __importStar(require("styled-components"));
 var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
-var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 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 ? 'overlay' : _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, _m = _a.scrollVisibleType, scrollVisibleType = _m === void 0 ? 'visible' : _m, children = _a.children;
@@ -70,13 +70,12 @@ function DesktopBasicModal(_a) {
     var btn3Mode = ['mbtn_amount3'];
     return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "DesktopBasicModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", size: size }, { children: [(0, jsx_runtime_1.jsx)(S_Header, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "headingBold" }) }), (0, jsx_runtime_1.jsxs)(S_Body, __assign({ bodySpacingMode: bodySpacingMode, bodyOverflowType: bodyOverflowType, scrollVisibleType: scrollVisibleType }, { children: [contentText && ((0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: contentText, colorTheme: "sysTextSecondary", styleTheme: "subTitleRegular" })), children && children] })), (0, jsx_runtime_1.jsxs)(S_Footer, { children: [(0, jsx_runtime_1.jsx)(S_Left, { children: btn3Mode.includes(btnMode) && mBtn3Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: mBtn3Text, state: mBtn3State, type: mBtn3Type, size: "medium", onClick: onClickMBtn3 })) }), (0, jsx_runtime_1.jsxs)(S_Right, { children: [(0, jsx_runtime_1.jsx)(S_Btn2Wrapper, { children: btn2Mode.includes(btnMode) && mBtn2Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: mBtn2Text, state: mBtn2State, type: mBtn2Type, size: "medium", onClick: onClickMBtn2 })) }), btn1Mode.includes(btnMode) && mBtn1Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { text: mBtn1Text, state: mBtn1State, type: mBtn1Type, size: "medium", onClick: onClickMBtn1 }))] })] })] }))] }), container);
 }
-var scrollInvisible = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
-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  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
+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  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_dimmed;
 }, animationStyle_1.modalOverlayOnAni);
-var rlarge = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  max-width: 1400px;\n  min-width: 960px;\n"], ["\n  max-width: 1400px;\n  min-width: 960px;\n"])));
-var S_ModalWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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  ", "\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\n  ", "\n"])), function (_a) {
+var rlarge = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-width: 1400px;\n  min-width: 960px;\n"], ["\n  max-width: 1400px;\n  min-width: 960px;\n"])));
+var S_ModalWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __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  ", "\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\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_base;
 }, function (_a) {
@@ -98,16 +97,16 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_4 || (templa
     var size = _a.size;
     return size === 'rlarge' && rlarge;
 }, animationStyle_1.modalOnAni);
-var S_Left = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
+var S_Left = 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_Btn2Wrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
+var S_Btn2Wrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __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_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var S_Header = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+var S_Right = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_Header = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 }, function (_a) {
@@ -120,7 +119,7 @@ var S_Header = styled_components_1.default.div(templateObject_8 || (templateObje
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-var S_Body = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  flex: 1;\n  max-height: 60vh;\n  overflow: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n\n  ", "\n"], ["\n  flex: 1;\n  max-height: 60vh;\n  overflow: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var S_Body = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex: 1;\n  max-height: 60vh;\n  overflow: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n  ", ";\n"], ["\n  flex: 1;\n  max-height: 60vh;\n  overflow: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n  ", ";\n"])), function (_a) {
     var bodyOverflowType = _a.bodyOverflowType;
     return bodyOverflowType;
 }, function (_a) {
@@ -140,15 +139,14 @@ var S_Body = styled_components_1.default.div(templateObject_10 || (templateObjec
     return bodyOverflowType !== 'visible' &&
         scrollVisibleType &&
         {
-            moving: scrollInvisible,
             visible: scrollbarStyle_1.scrollbarStyle,
-            hidden: scrollInvisible
+            hidden: scrollbarStyle_1.scrollInvisible
         }[scrollVisibleType];
 }, function (_a) {
     var bodySpacingMode = _a.bodySpacingMode;
-    return bodySpacingMode === 'none' && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      padding-bottom: 0;\n      padding-left: 0;\n      padding-right: 0;\n    "], ["\n      padding-bottom: 0;\n      padding-left: 0;\n      padding-right: 0;\n    "])));
+    return bodySpacingMode === 'none' && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      padding-bottom: 0;\n      padding-left: 0;\n      padding-right: 0;\n    "], ["\n      padding-bottom: 0;\n      padding-left: 0;\n      padding-right: 0;\n    "])));
 });
-var S_Footer = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+var S_Footer = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_border;
 }, function (_a) {
@@ -165,4 +163,4 @@ var S_Footer = styled_components_1.default.div(templateObject_11 || (templateObj
     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, templateObject_10, templateObject_11;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/dist/src/desktop/panels/DesktopBasicModalWithTab/DesktopBasicModalWithTab.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
 import type { PDSTextType } from '../../../common';
 export type DesktopBasicModalWithTabInfoType = {
     sideTabTitleText: PDSTextType;
@@ -9,6 +10,7 @@ type DesktopBasicModalWithTabProps = {
     size?: 'large' | 'medium';
     modalTitleText: PDSTextType;
     infoArray: DesktopBasicModalWithTabInfoType[];
+    scrollVisibleType?: ScrollVisibleType;
     btnMode?: 'btn_amount1' | 'btn_amount2' | 'btn_amount3';
     btn1Text: PDSTextType;
     btn2Text?: PDSTextType;
@@ -23,5 +25,5 @@ type DesktopBasicModalWithTabProps = {
     onClickBtn2?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onClickBtn3?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
-declare function DesktopBasicModalWithTab({ size, modalTitleText, infoArray, btnMode, btn1Text, btn2Text, btn3Text, btn1State, btn2State, btn3State, btn1Type, btn2Type, btn3Type, onClickBtn1, onClickBtn2, onClickBtn3 }: DesktopBasicModalWithTabProps): import("react").ReactPortal;
+declare function DesktopBasicModalWithTab({ size, modalTitleText, infoArray, scrollVisibleType, btnMode, btn1Text, btn2Text, btn3Text, btn1State, btn2State, btn3State, btn1Type, btn2Type, btn3Type, onClickBtn1, onClickBtn2, onClickBtn3 }: DesktopBasicModalWithTabProps): import("react").ReactPortal;
 export default DesktopBasicModalWithTab;

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

@@ -21,14 +21,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_dom_1 = __importDefault(require("react-dom"));
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 var styled_components_1 = __importDefault(require("styled-components"));
 var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
-var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 var hybrid_1 = require("../../../hybrid");
 var components_1 = require("../../components");
 var Components_1 = require("./Components");
 function DesktopBasicModalWithTab(_a) {
-    var _b = _a.size, size = _b === void 0 ? 'large' : _b, modalTitleText = _a.modalTitleText, infoArray = _a.infoArray, _c = _a.btnMode, btnMode = _c === void 0 ? 'btn_amount2' : _c, btn1Text = _a.btn1Text, btn2Text = _a.btn2Text, btn3Text = _a.btn3Text, _d = _a.btn1State, btn1State = _d === void 0 ? 'normal' : _d, _e = _a.btn2State, btn2State = _e === void 0 ? 'normal' : _e, _f = _a.btn3State, btn3State = _f === void 0 ? 'normal' : _f, _g = _a.btn1Type, btn1Type = _g === void 0 ? 'button' : _g, _h = _a.btn2Type, btn2Type = _h === void 0 ? 'button' : _h, _j = _a.btn3Type, btn3Type = _j === void 0 ? 'button' : _j, onClickBtn1 = _a.onClickBtn1, onClickBtn2 = _a.onClickBtn2, onClickBtn3 = _a.onClickBtn3;
+    var _b = _a.size, size = _b === void 0 ? 'large' : _b, modalTitleText = _a.modalTitleText, infoArray = _a.infoArray, _c = _a.scrollVisibleType, scrollVisibleType = _c === void 0 ? 'visible' : _c, _d = _a.btnMode, btnMode = _d === void 0 ? 'btn_amount2' : _d, btn1Text = _a.btn1Text, btn2Text = _a.btn2Text, btn3Text = _a.btn3Text, _e = _a.btn1State, btn1State = _e === void 0 ? 'normal' : _e, _f = _a.btn2State, btn2State = _f === void 0 ? 'normal' : _f, _g = _a.btn3State, btn3State = _g === void 0 ? 'normal' : _g, _h = _a.btn1Type, btn1Type = _h === void 0 ? 'button' : _h, _j = _a.btn2Type, btn2Type = _j === void 0 ? 'button' : _j, _k = _a.btn3Type, btn3Type = _k === void 0 ? 'button' : _k, onClickBtn1 = _a.onClickBtn1, onClickBtn2 = _a.onClickBtn2, onClickBtn3 = _a.onClickBtn3;
     var container = (0, react_1.useState)(function () {
         var modalRoot = document.createElement('div');
         modalRoot.setAttribute('id', 'DesktopBasicModalWithTab');
@@ -44,7 +44,7 @@ function DesktopBasicModalWithTab(_a) {
             root.removeChild(container);
         };
     }, []);
-    var _k = (0, react_1.useState)("".concat(infoArray[0].sideTabTitleText, "0")), selectedItem = _k[0], setSelectedItem = _k[1];
+    var _l = (0, react_1.useState)("".concat(infoArray[0].sideTabTitleText, "0")), selectedItem = _l[0], setSelectedItem = _l[1];
     var sideTabTitleArray = infoArray.map(function (data, index) {
         return {
             title: data.sideTabTitleText,
@@ -57,7 +57,7 @@ function DesktopBasicModalWithTab(_a) {
     var btn3Mode = ['btn_amount3'];
     return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "DesktopBasicModalWithTab", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", size: size }, { children: [(0, jsx_runtime_1.jsxs)(S_UpsidePanel, { children: [(0, jsx_runtime_1.jsxs)(S_LeftPanel, { children: [(0, jsx_runtime_1.jsx)(S_Header, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: modalTitleText, lineLimit: 2, ellipsisMode: "use", styleTheme: "headingBold" }) }), (0, jsx_runtime_1.jsxs)(S_SideTabWrapper, { children: [(0, jsx_runtime_1.jsx)(Components_1.SideTab, { itemArray: sideTabTitleArray }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_i" })] })] }), infoArray
                                 .filter(function (data, index) { return selectedItem === "".concat(data.sideTabTitleText).concat(index); })
-                                .map(function (data, index) { return ((0, jsx_runtime_1.jsx)(S_RightContainer, { children: (0, jsx_runtime_1.jsxs)(S_RightArea, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: data.bodyTitleText ? data.bodyTitleText : data.sideTabTitleText, styleTheme: "headingBold" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_e" }), (0, jsx_runtime_1.jsx)(S_Body, { children: data.body && data.body })] }) }, "".concat(data.sideTabTitleText).concat(index))); })] }), (0, jsx_runtime_1.jsxs)(S_Footer, { children: [(0, jsx_runtime_1.jsx)(S_Left, { children: btn3Mode.includes(btnMode) && btn3Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: btn3Text, state: btn3State, type: btn3Type, size: "medium", onClick: onClickBtn3 })) }), (0, jsx_runtime_1.jsxs)(S_Right, { children: [(0, jsx_runtime_1.jsx)(S_Btn2Wrapper, { children: btn2Mode.includes(btnMode) && btn2Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: btn2Text, state: btn2State, type: btn2Type, size: "medium", onClick: onClickBtn2 })) }), btn1Mode.includes(btnMode) && btn1Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { text: btn1Text, state: btn1State, type: btn1Type, size: "medium", onClick: onClickBtn1 }))] })] })] }))] }), container);
+                                .map(function (data, index) { return ((0, jsx_runtime_1.jsx)(S_RightContainer, __assign({ scrollVisibleType: scrollVisibleType }, { children: (0, jsx_runtime_1.jsxs)(S_RightArea, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: data.bodyTitleText ? data.bodyTitleText : data.sideTabTitleText, styleTheme: "headingBold" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_e" }), (0, jsx_runtime_1.jsx)(S_Body, { children: data.body && data.body })] }) }), "".concat(data.sideTabTitleText).concat(index))); })] }), (0, jsx_runtime_1.jsxs)(S_Footer, { children: [(0, jsx_runtime_1.jsx)(S_Left, { children: btn3Mode.includes(btnMode) && btn3Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: btn3Text, state: btn3State, type: btn3Type, size: "medium", onClick: onClickBtn3 })) }), (0, jsx_runtime_1.jsxs)(S_Right, { children: [(0, jsx_runtime_1.jsx)(S_Btn2Wrapper, { children: btn2Mode.includes(btnMode) && btn2Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: btn2Text, state: btn2State, type: btn2Type, size: "medium", onClick: onClickBtn2 })) }), btn1Mode.includes(btnMode) && btn1Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { text: btn1Text, state: btn1State, type: btn1Type, size: "medium", onClick: onClickBtn1 }))] })] })] }))] }), 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  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
@@ -102,21 +102,27 @@ var S_SideTabWrapper = styled_components_1.default.div(templateObject_6 || (temp
     var theme = _a.theme;
     return theme.ui_cpnt_modalwithtab_leftside_base;
 });
-var S_RightContainer = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: overlay;\n\n  ", "\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: overlay;\n\n  ", "\n"])), scrollbarStyle_1.scrollbarStyle);
-var S_RightArea = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+var S_RightContainer = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n  margin-top: ", ";\n  overflow-x: hidden;\n  overflow-y: overlay;\n\n  ", "\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n  margin-top: ", ";\n  overflow-x: hidden;\n  overflow-y: overlay;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingI;
+    return theme.spacing.spacingE;
 }, function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType;
+    return ({
+        visible: scrollbarStyle_1.scrollbarStyle,
+        hidden: scrollbarStyle_1.scrollInvisible
+    }[scrollVisibleType]);
+});
+var S_RightArea = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingF;
+    return theme.spacing.spacingI;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingF;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingF;
 });
-var S_Body = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  overflow-x: hidden;\n"], ["\n  overflow-x: hidden;\n"])));
+var S_Body = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  overflow-wrap: break-word;\n  overflow-x: hidden;\n  white-space: pre-wrap;\n"], ["\n  overflow-wrap: break-word;\n  overflow-x: hidden;\n  white-space: pre-wrap;\n"])));
 var S_Footer = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_border;

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

@@ -1,10 +1,26 @@
 /// <reference types="react" />
+import { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
+import type { PDSTextType } from '../../../common/types';
 type DesktopHeadlessModalProps = {
     body: React.ReactNode;
-    size?: 'large' | 'medium' | 'small' | 'rlarge';
+    size?: 'large' | 'medium' | 'small' | 'rlarge' | 'xlarge' | 'rxlarge';
     dimmedClickCloseMode?: 'use' | 'none';
-    scrollVisibleType?: 'hidden' | 'moving' | 'visible';
+    scrollVisibleType?: ScrollVisibleType;
+    footerMode?: 'use' | 'none';
+    btnMode?: 'mbtn_amount1' | 'mbtn_amount2' | 'mbtn_amount3';
+    mBtn1Text?: PDSTextType;
+    mBtn2Text?: PDSTextType;
+    mBtn3Text?: PDSTextType;
+    mBtn1State?: 'normal' | 'disabled';
+    mBtn2State?: 'normal' | 'disabled';
+    mBtn3State?: 'normal' | 'disabled';
+    mBtn1Type?: 'button' | 'submit';
+    mBtn2Type?: 'button' | 'submit';
+    mBtn3Type?: 'button' | 'submit';
+    onClickMBtn1?: () => void;
+    onClickMBtn2?: () => void;
+    onClickMBtn3?: () => void;
     onClose?: () => void;
 };
-declare function DesktopHeadlessModal({ body, size, dimmedClickCloseMode, scrollVisibleType, onClose }: DesktopHeadlessModalProps): import("react").ReactPortal;
+declare function DesktopHeadlessModal({ body, size, dimmedClickCloseMode, scrollVisibleType, onClose, footerMode, btnMode, mBtn1Text, mBtn2Text, mBtn3Text, mBtn1State, mBtn2State, mBtn3State, mBtn1Type, mBtn2Type, mBtn3Type, onClickMBtn1, onClickMBtn2, onClickMBtn3 }: DesktopHeadlessModalProps): import("react").ReactPortal;
 export default DesktopHeadlessModal;

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

@@ -44,17 +44,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_dom_1 = __importDefault(require("react-dom"));
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
+var components_1 = require("../../components");
 var styled_components_1 = __importStar(require("styled-components"));
 var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
-var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 function DesktopHeadlessModal(_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 ? 'visible' : _d, onClose = _a.onClose;
+    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 ? 'visible' : _d, onClose = _a.onClose, _e = _a.footerMode, footerMode = _e === void 0 ? 'none' : _e, _f = _a.btnMode, btnMode = _f === void 0 ? 'mbtn_amount2' : _f, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, _g = _a.mBtn1State, mBtn1State = _g === void 0 ? 'normal' : _g, _h = _a.mBtn2State, mBtn2State = _h === void 0 ? 'normal' : _h, _j = _a.mBtn3State, mBtn3State = _j === void 0 ? 'normal' : _j, _k = _a.mBtn1Type, mBtn1Type = _k === void 0 ? 'button' : _k, _l = _a.mBtn2Type, mBtn2Type = _l === void 0 ? 'button' : _l, _m = _a.mBtn3Type, mBtn3Type = _m === void 0 ? 'button' : _m, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3;
     var container = (0, react_1.useState)(function () {
         var modalRoot = document.createElement('div');
         modalRoot.setAttribute('id', 'DesktopHeadlessModal');
         return modalRoot;
     })[0];
-    var targetRef = (0, react_1.useRef)(null);
     var handleClickOutside = function (e) {
         e.stopPropagation();
         if (dimmedClickCloseMode === 'use') {
@@ -65,35 +65,24 @@ function DesktopHeadlessModal(_a) {
     };
     (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((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, { "x-pds-name": "DesktopHeadlessModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", onMouseDown: handleClickOutside }), (0, jsx_runtime_1.jsx)(S_ModalWrapper, __assign({ size: size }, { children: (0, jsx_runtime_1.jsx)(S_Body, __assign({ ref: targetRef, scrollVisibleType: scrollVisibleType }, { children: body && body })) }))] }), 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((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, { "x-pds-name": "DesktopHeadlessModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", onMouseDown: handleClickOutside }), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ size: size }, { children: [(0, jsx_runtime_1.jsx)(S_Body, __assign({ scrollVisibleType: scrollVisibleType }, { children: body && body })), footerMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_Footer, { children: [(0, jsx_runtime_1.jsx)(S_Left, { children: btn3Mode.includes(btnMode) && mBtn3Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: mBtn3Text, state: mBtn3State, type: mBtn3Type, size: "medium", onClick: onClickMBtn3 })) }), (0, jsx_runtime_1.jsxs)(S_Right, { children: [(0, jsx_runtime_1.jsx)(S_Btn2Wrapper, { children: btn2Mode.includes(btnMode) && mBtn2Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: mBtn2Text, state: mBtn2State, type: mBtn2Type, size: "medium", onClick: onClickMBtn2 })) }), btn1Mode.includes(btnMode) && mBtn1Text && ((0, jsx_runtime_1.jsx)(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  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_dimmed;
 }, animationStyle_1.modalOverlayOnAni);
-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  ", "\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\n  ", "\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  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  ", "\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  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  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_base;
 }, function (_a) {
@@ -104,29 +93,51 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
     return theme.boxShadow.elevation4;
 }, function (_a) {
     var size = _a.size;
-    return size === 'rlarge' && '960px';
+    return size === 'rlarge' ? '960px' : size === 'rxlarge' ? '1200px' : undefined;
 }, function (_a) {
     var size = _a.size;
     var sizes = {
         small: '400px',
         medium: '688px',
         large: '960px',
-        rlarge: '60vw'
+        rlarge: '60vw',
+        xlarge: '1200px',
+        rxlarge: '70vw'
     };
     return sizes[size];
 }, animationStyle_1.modalOnAni);
 var scrollInvisible = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __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_4 || (templateObject_4 = __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 S_Body = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  overflow: auto;\n  overflow-y: overlay;\n  width: 100%;\n\n  ", "\n"], ["\n  overflow: auto;\n  overflow-y: overlay;\n  width: 100%;\n\n  ", "\n"])), function (_a) {
     var scrollVisibleType = _a.scrollVisibleType;
-    return scrollVisibleType &&
-        {
-            moving: scrollInvisible,
-            visible: scrollbarStyle_1.scrollbarWithPaddingStyle,
-            hidden: scrollInvisible
-        }[scrollVisibleType];
+    return ({
+        visible: scrollbarStyle_1.scrollbarWithPaddingStyle,
+        hidden: scrollInvisible
+    }[scrollVisibleType]);
+});
+var S_Left = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __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_6 || (templateObject_6 = __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_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_Footer = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_modal_border;
 }, function (_a) {
-    var scrollVisibleType = _a.scrollVisibleType;
-    return scrollVisibleType === 'moving' && scrollbarStyle_1.scrollbarWithPaddingStyle;
+    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 = DesktopHeadlessModal;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/src/desktop/panels/DesktopTutorialModal/DesktopTutorialModal.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
 import type { PDSTextType } from '../../../common';
 export type DesktopTutorialModalInfoType = {
     sideTabTitleText: PDSTextType;
@@ -13,7 +14,8 @@ type DesktopTutorialModalProps = {
     modalTitleText: PDSTextType;
     infoArray: DesktopTutorialModalInfoType[];
     sequenceMode?: 'use' | 'none';
+    scrollVisibleType?: ScrollVisibleType;
     onClose: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
-declare function DesktopTutorialModal({ modalTitleText, infoArray, sequenceMode, onClose }: DesktopTutorialModalProps): import("react").ReactPortal;
+declare function DesktopTutorialModal({ modalTitleText, infoArray, sequenceMode, scrollVisibleType, onClose }: DesktopTutorialModalProps): import("react").ReactPortal;
 export default DesktopTutorialModal;

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

@@ -21,14 +21,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_dom_1 = __importDefault(require("react-dom"));
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 var styled_components_1 = __importDefault(require("styled-components"));
 var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
-var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 var hybrid_1 = require("../../../hybrid");
 var components_1 = require("../../components");
 var Components_1 = require("./Components");
 function DesktopTutorialModal(_a) {
-    var modalTitleText = _a.modalTitleText, infoArray = _a.infoArray, _b = _a.sequenceMode, sequenceMode = _b === void 0 ? 'use' : _b, onClose = _a.onClose;
+    var modalTitleText = _a.modalTitleText, infoArray = _a.infoArray, _b = _a.sequenceMode, sequenceMode = _b === void 0 ? 'use' : _b, _c = _a.scrollVisibleType, scrollVisibleType = _c === void 0 ? 'visible' : _c, onClose = _a.onClose;
     var container = (0, react_1.useState)(function () {
         var modalRoot = document.createElement('div');
         modalRoot.setAttribute('id', 'DesktopTutorialModal');
@@ -44,7 +44,7 @@ function DesktopTutorialModal(_a) {
             root.removeChild(container);
         };
     }, []);
-    var _c = (0, react_1.useState)("".concat(infoArray[0].sideTabTitleText, "0")), selectedItem = _c[0], setSelectedItem = _c[1];
+    var _d = (0, react_1.useState)("".concat(infoArray[0].sideTabTitleText, "0")), selectedItem = _d[0], setSelectedItem = _d[1];
     var sideTabTitleArray = infoArray.map(function (data, index) {
         return {
             title: data.sideTabTitleText,
@@ -70,7 +70,7 @@ function DesktopTutorialModal(_a) {
     };
     return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "DesktopTutorialModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsxs)(S_LeftPanel, { children: [(0, jsx_runtime_1.jsx)(S_Header, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: modalTitleText, lineLimit: 2, ellipsisMode: "use", styleTheme: "headingBold" }) }), (0, jsx_runtime_1.jsxs)(S_SideTabWrapper, { children: [(0, jsx_runtime_1.jsx)(Components_1.SideTab, { itemArray: sideTabTitleArray }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_i" })] })] }), infoArray
                         .filter(function (data, index) { return selectedItem === "".concat(data.sideTabTitleText).concat(index); })
-                        .map(function (data, index) { return ((0, jsx_runtime_1.jsxs)(S_RightPanel, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: data.imageSrc, shapeType: "rectangle", width: "responsive", ratio: "16_9", scaleType: "cover", backgroundFillMode: "use" }), (0, jsx_runtime_1.jsxs)(S_InfoBox, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: data.infoTitleText ? data.infoTitleText : data.sideTabTitleText, styleTheme: "headingBold" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: data.infoDescText, styleTheme: "body2Regular", colorTheme: "sysTextSecondary" })] }), data.btnMode === 'btn_amount1' && ((0, jsx_runtime_1.jsx)(S_Footer, { children: (0, jsx_runtime_1.jsx)(components_1.MainButton, { text: data.btn1Text, type: "button", size: "medium", onClick: data.onClickBtn1 }) }))] }, "".concat(data.sideTabTitleText).concat(index))); }), (0, jsx_runtime_1.jsx)(S_IconButtonWrapper, { children: sequenceMode === 'use' && selectedItemIndex !== lastIndex ? ((0, jsx_runtime_1.jsx)(components_1.IconButton, { shapeType: "circular", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_tutorialmodal", iconName: "ic_arrow_right", iconColorKey: "ui_cpnt_button_icon_white", onClick: handleClickNextBtn })) : ((0, jsx_runtime_1.jsx)(components_1.IconButton, { shapeType: "circular", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_tutorialmodal", iconName: "ic_xmark", iconColorKey: "ui_cpnt_button_icon_white", onClick: handleClickCloseBtn })) })] }))] }), container);
+                        .map(function (data, index) { return ((0, jsx_runtime_1.jsxs)(S_RightPanel, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: data.imageSrc, shapeType: "rectangle", width: "responsive", ratio: "16_9", scaleType: "cover", backgroundFillMode: "use" }), (0, jsx_runtime_1.jsxs)(S_InfoBox, __assign({ scrollVisibleType: scrollVisibleType }, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: data.infoTitleText ? data.infoTitleText : data.sideTabTitleText, styleTheme: "headingBold" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: data.infoDescText, styleTheme: "body2Regular", colorTheme: "sysTextSecondary" })] })), data.btnMode === 'btn_amount1' && ((0, jsx_runtime_1.jsx)(S_Footer, { children: (0, jsx_runtime_1.jsx)(components_1.MainButton, { text: data.btn1Text, type: "button", size: "medium", onClick: data.onClickBtn1 }) }))] }, "".concat(data.sideTabTitleText).concat(index))); }), (0, jsx_runtime_1.jsx)(S_IconButtonWrapper, { children: sequenceMode === 'use' && selectedItemIndex !== lastIndex ? ((0, jsx_runtime_1.jsx)(components_1.IconButton, { shapeType: "circular", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_tutorialmodal", iconName: "ic_arrow_right", iconColorKey: "ui_cpnt_button_icon_white", onClick: handleClickNextBtn })) : ((0, jsx_runtime_1.jsx)(components_1.IconButton, { shapeType: "circular", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_tutorialmodal", iconName: "ic_xmark", iconColorKey: "ui_cpnt_button_icon_white", onClick: handleClickCloseBtn })) })] }))] }), 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  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
@@ -114,7 +114,13 @@ var S_InfoBox = styled_components_1.default.div(templateObject_7 || (templateObj
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingF;
-}, scrollbarStyle_1.scrollbarStyle);
+}, function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType;
+    return ({
+        visible: scrollbarStyle_1.scrollbarStyle,
+        hidden: scrollbarStyle_1.scrollInvisible
+    }[scrollVisibleType]);
+});
 var S_Footer = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: flex-end;\n  box-sizing: border-box;\n  display: flex;\n  height: 88px;\n  min-height: 88px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: flex-end;\n  box-sizing: border-box;\n  display: flex;\n  height: 88px;\n  min-height: 88px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingF;

package/dist/src/desktop/panels/MultilingualModal/MultilingualModal.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
+import type { MultilingualConfig } from '../../../common/types';
+type MultilingualModalModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    config?: MultilingualConfig;
+    size?: 'large' | 'medium' | 'small' | 'rlarge';
+    onHiddenInputUpdate?: (newValue: string) => void;
+    scrollVisibleType?: ScrollVisibleType;
+};
+declare function MultilingualModal({ isOpen, onClose, config, size, onHiddenInputUpdate, scrollVisibleType }: MultilingualModalModalProps): import("react").ReactPortal | null;
+export default MultilingualModal;