pds-dev-kit-web-test 2.5.593 → 2.5.594

package/dist/src/desktop/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.D_StatusBlock = exports.D_Slider = exports.D_Select = exports.D_SegmentedButtonGroup = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_LottieReactionButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = 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_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_BasicButtonGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WHContainersBox = exports.LayoutWH = exports.WFContainersBox = exports.LayoutWF = void 0;
-exports.D_SectionSheet = exports.D_DesktopTutorialModal = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModalWithTab = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = void 0;
+exports.D_Select = exports.D_SegmentedButtonGroup = exports.D_RichTextEditor = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_LottieReactionButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = 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_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BoxItem = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_BasicButtonGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WHContainersBox = exports.LayoutWH = exports.WFContainersBox = exports.LayoutWF = void 0;
+exports.D_SectionSheet = exports.D_DesktopTutorialModal = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModalWithTab = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_Calendar = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_PriceTextLabel = exports.D_TextLabel = exports.D_TextField = exports.D_PriceTextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Snackbar = exports.D_Slider = void 0;
 // layoutWF
 var LayoutWF_1 = require("./layout/LayoutWF");
 Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
@@ -38,6 +38,7 @@ Object.defineProperty(exports, "D_BasicList", { enumerable: true, get: function
 Object.defineProperty(exports, "D_BasicListItem", { enumerable: true, get: function () { return components_1.BasicListItem; } });
 Object.defineProperty(exports, "D_BlogTextField", { enumerable: true, get: function () { return components_1.BlogTextField; } });
 Object.defineProperty(exports, "D_BodyTextGroup", { enumerable: true, get: function () { return components_1.BodyTextGroup; } });
+Object.defineProperty(exports, "D_BoxItem", { enumerable: true, get: function () { return components_1.BoxItem; } });
 Object.defineProperty(exports, "D_Card", { enumerable: true, get: function () { return components_1.Card; } });
 Object.defineProperty(exports, "D_CardList", { enumerable: true, get: function () { return components_1.CardList; } });
 Object.defineProperty(exports, "D_ChatBubbleListItem", { enumerable: true, get: function () { return components_1.ChatBubbleListItem; } });
@@ -64,19 +65,24 @@ Object.defineProperty(exports, "D_MainButton", { enumerable: true, get: function
 Object.defineProperty(exports, "D_PageTitleTextGroup", { enumerable: true, get: function () { return components_1.PageTitleTextGroup; } });
 Object.defineProperty(exports, "D_Radio", { enumerable: true, get: function () { return components_1.Radio; } });
 Object.defineProperty(exports, "D_ReactionButton", { enumerable: true, get: function () { return components_1.ReactionButton; } });
+Object.defineProperty(exports, "D_RichTextEditor", { enumerable: true, get: function () { return components_1.RichTextEditor; } });
 Object.defineProperty(exports, "D_SegmentedButtonGroup", { enumerable: true, get: function () { return components_1.SegmentedButtonGroup; } });
 Object.defineProperty(exports, "D_Select", { enumerable: true, get: function () { return components_1.Select; } });
 Object.defineProperty(exports, "D_Slider", { enumerable: true, get: function () { return components_1.Slider; } });
+Object.defineProperty(exports, "D_Snackbar", { enumerable: true, get: function () { return components_1.Snackbar; } });
 Object.defineProperty(exports, "D_StatusBlock", { enumerable: true, get: function () { return components_1.StatusBlock; } });
 Object.defineProperty(exports, "D_TextButton", { enumerable: true, get: function () { return components_1.TextButton; } });
+Object.defineProperty(exports, "D_PriceTextField", { enumerable: true, get: function () { return components_1.PriceTextField; } });
 Object.defineProperty(exports, "D_TextField", { enumerable: true, get: function () { return components_1.TextField; } });
 Object.defineProperty(exports, "D_TextLabel", { enumerable: true, get: function () { return components_1.TextLabel; } });
+Object.defineProperty(exports, "D_PriceTextLabel", { enumerable: true, get: function () { return components_1.PriceTextLabel; } });
 Object.defineProperty(exports, "D_UploadIconButton", { enumerable: true, get: function () { return components_1.UploadIconButton; } });
 Object.defineProperty(exports, "D_UploadMainButton", { enumerable: true, get: function () { return components_1.UploadMainButton; } });
 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; } });
 Object.defineProperty(exports, "D_UserDesktopSideTab", { enumerable: true, get: function () { return components_1.UserDesktopSideTab; } });
+Object.defineProperty(exports, "D_Calendar", { enumerable: true, get: function () { return components_1.Calendar; } });
 // panels
 var panels_1 = require("./panels");
 Object.defineProperty(exports, "D_AnnotationSheet", { enumerable: true, get: function () { return panels_1.AnnotationSheet; } });

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

@@ -93,7 +93,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  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  width: 864px;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  width: 864px;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  scrollbar-width: auto !important;\n  ", ";\n  ", ";\n  width: 864px;\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  scrollbar-width: auto !important;\n  ", ";\n  ", ";\n  width: 864px;\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/WFB.js

@@ -50,7 +50,7 @@ var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
     return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
 });
-var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  width: 864px;\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  width: 864px;\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  scrollbar-width: auto !important;\n  width: 864px;\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  scrollbar-width: auto !important;\n  width: 864px;\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/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/DesktopHeadlessModal/DesktopHeadlessModal.d.ts

@@ -1,10 +1,25 @@
 /// <reference types="react" />
+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';
+    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,11 +44,12 @@ 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 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');
@@ -87,13 +88,16 @@ function DesktopHeadlessModal(_a) {
             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({ ref: targetRef, 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,14 +108,16 @@ 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);
@@ -128,5 +134,30 @@ var S_Body = styled_components_1.default.div(templateObject_4 || (templateObject
     var scrollVisibleType = _a.scrollVisibleType;
     return scrollVisibleType === 'moving' && scrollbarStyle_1.scrollbarWithPaddingStyle;
 });
+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 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/MultilingualModal/MultilingualModal.d.ts

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

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

@@ -0,0 +1,213 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 react_hook_form_1 = require("react-hook-form");
+var react_i18next_1 = require("react-i18next");
+var editorContentStyle_1 = require("../../../common/styles/editorContentStyle");
+var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
+var components_1 = require("../../components");
+var components_2 = require("../../../hybrid/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+var AnnotationSheet_1 = require("../AnnotationSheet");
+var LANGUAGE_I18N_KEYS = {
+    en: 'str_multilingual_en',
+    ko: 'str_multilingual_ko',
+    ja: 'str_multilingual_ja',
+    zh: 'str_multilingual_zh_cn',
+    'zh-Hant': 'str_multilingual_zh_tw',
+    fr: 'str_multilingual_fr',
+    es: 'str_multilingual_es'
+};
+function MultilingualModal(_a) {
+    var _b, _c;
+    var isOpen = _a.isOpen, onClose = _a.onClose, config = _a.config, richEditorConfig = _a.richEditorConfig, _d = _a.size, size = _d === void 0 ? 'medium' : _d, onHiddenInputUpdate = _a.onHiddenInputUpdate;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var allLangInReadonly = (_b = config === null || config === void 0 ? void 0 : config.visibleLanguages) === null || _b === void 0 ? void 0 : _b.every(function (item) { var _a; return (_a = config === null || config === void 0 ? void 0 : config.readonlyLanguages) === null || _a === void 0 ? void 0 : _a.includes(item); });
+    // FormProvider에서 사용할 기본값 계산
+    var getDefaultValues = function () {
+        if (!config)
+            return {};
+        // 먼저 hiddenInput에 저장된 값이 있는지 확인
+        if (config.hiddenInputId) {
+            var hiddenInputId = "hiddenInput_".concat(config.hiddenInputId);
+            var hiddenInput = document.getElementById(hiddenInputId);
+            if (hiddenInput && hiddenInput.value) {
+                var existingValues = JSON.parse(hiddenInput.value);
+                // 빈 객체가 아닌 경우에만 사용
+                if (Object.keys(existingValues).length > 0) {
+                    return existingValues;
+                }
+            }
+        }
+        // hiddenInput에 값이 없으면 config.initialValues 사용
+        return config.initialValues || {};
+    };
+    var methods = (0, react_hook_form_1.useForm)({
+        defaultValues: getDefaultValues()
+    });
+    var container = (0, react_1.useState)(function () {
+        var modalRoot = document.createElement('div');
+        modalRoot.setAttribute('id', 'MultilingualModal');
+        return modalRoot;
+    })[0];
+    (0, react_1.useLayoutEffect)(function () {
+        if (!isOpen)
+            return;
+        var root = document.getElementById('root');
+        if (!root)
+            return;
+        root.appendChild(container);
+        return function () {
+            if (root.contains(container)) {
+                root.removeChild(container);
+            }
+        };
+    }, [isOpen, container]);
+    (0, react_1.useLayoutEffect)(function () {
+        if (isOpen && config) {
+            var newDefaultValues = getDefaultValues();
+            methods.reset(newDefaultValues);
+        }
+    }, [isOpen, config]);
+    var handleConfirm = function () {
+        var formValues = methods.getValues();
+        // hidden input에 다국어 값들을 JSON 형태로 저장
+        var newValue = JSON.stringify(formValues);
+        if (config === null || config === void 0 ? void 0 : config.hiddenInputId) {
+            var hiddenInputId = "hiddenInput_".concat(config.hiddenInputId);
+            var hiddenInput = document.getElementById(hiddenInputId);
+            if (hiddenInput) {
+                // BasicFormGroup의 state 업데이트
+                if (onHiddenInputUpdate) {
+                    onHiddenInputUpdate(newValue);
+                }
+                // input change 이벤트 발생시켜서 form validation 등이 동작하도록 함
+                var event_1 = new Event('change', { bubbles: true });
+                hiddenInput.dispatchEvent(event_1);
+            }
+        }
+        if (config === null || config === void 0 ? void 0 : config.onApply) {
+            config.onApply(formValues);
+        }
+        onClose();
+    };
+    var handleCancel = function () {
+        onClose();
+    };
+    if (!isOpen)
+        return null;
+    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(react_hook_form_1.FormProvider, __assign({}, methods, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, { onClick: handleCancel }), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "MultiLanguageModal", "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: t('str_multilingual_settings'), colorTheme: "sysTextPrimary", styleTheme: "headingBold" }) }), (0, jsx_runtime_1.jsxs)(S_Body, { children: [(config === null || config === void 0 ? void 0 : config.originalText) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.BodyTextGroup, { titleText: t('str_original_text'), contentText: config.originalText }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f" }), (0, jsx_runtime_1.jsx)(components_2.Divider, {}), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f" })] })), (_c = config === null || config === void 0 ? void 0 : config.visibleLanguages) === null || _c === void 0 ? void 0 : _c.map(function (languageCode, index) {
+                                var _a, _b, _c, _d;
+                                var isReadonly = (_a = config.readonlyLanguages) === null || _a === void 0 ? void 0 : _a.includes(languageCode);
+                                return ((0, jsx_runtime_1.jsxs)(S_LanguageField, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "".concat(t(LANGUAGE_I18N_KEYS[languageCode])), styleTheme: "subTitleBold", colorTheme: "sysTextPrimary" }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" }), config.textFieldLineType === 'tinyeditor' ? (isReadonly ? ((0, jsx_runtime_1.jsx)(AnnotationSheet_1.AnnotationSheet, __assign({ width: "100%", height: "240px", backgroundColorTheme: "base3", shapeType: "round", radius: 16, paddingTop: "spacing_d", paddingRight: "spacing_d", paddingBottom: "spacing_d", paddingLeft: "spacing_d" }, { children: (0, jsx_runtime_1.jsx)(S_ReadonlyContent, { dangerouslySetInnerHTML: {
+                                                    __html: ((_b = config.initialValues) === null || _b === void 0 ? void 0 : _b[languageCode]) || ''
+                                                } }) }))) : ((0, jsx_runtime_1.jsx)(components_1.RichTextEditor, __assign({}, richEditorConfig, { defaultText: ((_c = config.initialValues) === null || _c === void 0 ? void 0 : _c[languageCode]) || '', toolbar: (richEditorConfig === null || richEditorConfig === void 0 ? void 0 : richEditorConfig.toolbar) || [
+                                                'blocks',
+                                                'bold italic underline strikethrough',
+                                                'alignleft aligncenter alignright alignjustify',
+                                                'outdent indent',
+                                                'forecolor backcolor numlist bullist blockquote',
+                                                'link insertfile image media',
+                                                'undo redo',
+                                                'code'
+                                            ] })))) : ((0, jsx_runtime_1.jsx)(components_1.TextField, { responsiveMode: "use", multiRows: config.textFieldLineType === 'multi' ? 5 : undefined, autoMaxRows: config.textFieldLineType === 'auto' ? 5 : undefined, autoMinRows: config.textFieldLineType === 'auto' ? 1 : undefined, name: languageCode, hintText: t('str_9071'), placeholder: "Input Text", textLineType: config.textFieldLineType, state: isReadonly ? 'disabled' : 'normal' })), index < (((_d = config.visibleLanguages) === null || _d === void 0 ? void 0 : _d.length) || 0) - 1 && (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f" })] }, "".concat(languageCode, "_field")));
+                            })] }), (0, jsx_runtime_1.jsxs)(S_Footer, { children: [(0, jsx_runtime_1.jsx)(S_Left, {}), (0, jsx_runtime_1.jsxs)(S_Right, { children: [!allLangInReadonly && ((0, jsx_runtime_1.jsx)(S_Btn2Wrapper, { children: (0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: t('str_cancel'), size: "medium", onClick: handleCancel }) })), (0, jsx_runtime_1.jsx)(components_1.MainButton, { text: allLangInReadonly ? t('str_confirm') : t('str_apply'), size: "medium", onClick: handleConfirm })] })] })] }))] })), 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  flex-direction: column;\n  left: 50%;\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  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) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_modal_border;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.boxShadow.elevation4;
+}, function (_a) {
+    var size = _a.size;
+    var sizes = {
+        large: '960px',
+        medium: '688px',
+        small: '400px',
+        rlarge: '80vw'
+    };
+    return size && sizes[size];
+}, animationStyle_1.modalOnAni);
+var S_Header = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __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) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var S_Body = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  max-height: 60vh;\n  overflow: auto;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  flex: 1;\n  max-height: 60vh;\n  overflow: auto;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+var S_Footer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __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 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;
+});
+var S_Left = 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_Btn2Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __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_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_LanguageField = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var S_ReadonlyContent = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n  height: 100%;\n  overflow-y: auto;\n"], ["\n  ", "\n  height: 100%;\n  overflow-y: auto;\n"])), editorContentStyle_1.editorContentStyle);
+exports.default = MultilingualModal;
+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/MultilingualModal/index.d.ts

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

package/dist/src/{sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList → desktop/panels/MultilingualModal}/index.js

@@ -3,6 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContentsList = void 0;
-var ContentsList_1 = require("./ContentsList");
-Object.defineProperty(exports, "ContentsList", { enumerable: true, get: function () { return __importDefault(ContentsList_1).default; } });
+exports.default = void 0;
+var MultilingualModal_1 = require("./MultilingualModal");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(MultilingualModal_1).default; } });

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

@@ -4,7 +4,8 @@ import { DesktopBasicModal } from './DesktopBasicModal';
 import { DesktopBasicModalWithTab, DesktopBasicModalWithTabInfoType } from './DesktopBasicModalWithTab';
 import { DesktopHeadlessModal } from './DesktopHeadlessModal';
 import { DesktopTutorialModal, DesktopTutorialModalInfoType } from './DesktopTutorialModal';
+import MultilingualModal from './MultilingualModal';
 import { SectionSheet } from './SectionSheet';
-export { AnnotationSheet, ContentSheet, DesktopBasicModal, DesktopBasicModalWithTab, DesktopHeadlessModal, DesktopTutorialModal, SectionSheet };
+export { AnnotationSheet, ContentSheet, DesktopBasicModal, DesktopBasicModalWithTab, DesktopHeadlessModal, DesktopTutorialModal, MultilingualModal, SectionSheet };
 export { DesktopBasicModalWithTabInfoType };
 export { DesktopTutorialModalInfoType };

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

@@ -1,6 +1,9 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionSheet = exports.DesktopTutorialModal = exports.DesktopHeadlessModal = exports.DesktopBasicModalWithTab = exports.DesktopBasicModal = exports.ContentSheet = exports.AnnotationSheet = void 0;
+exports.SectionSheet = exports.MultilingualModal = exports.DesktopTutorialModal = exports.DesktopHeadlessModal = exports.DesktopBasicModalWithTab = exports.DesktopBasicModal = exports.ContentSheet = exports.AnnotationSheet = void 0;
 var AnnotationSheet_1 = require("./AnnotationSheet");
 Object.defineProperty(exports, "AnnotationSheet", { enumerable: true, get: function () { return AnnotationSheet_1.AnnotationSheet; } });
 var ContentSheet_1 = require("./ContentSheet");
@@ -13,5 +16,7 @@ var DesktopHeadlessModal_1 = require("./DesktopHeadlessModal");
 Object.defineProperty(exports, "DesktopHeadlessModal", { enumerable: true, get: function () { return DesktopHeadlessModal_1.DesktopHeadlessModal; } });
 var DesktopTutorialModal_1 = require("./DesktopTutorialModal");
 Object.defineProperty(exports, "DesktopTutorialModal", { enumerable: true, get: function () { return DesktopTutorialModal_1.DesktopTutorialModal; } });
+var MultilingualModal_1 = __importDefault(require("./MultilingualModal"));
+exports.MultilingualModal = MultilingualModal_1.default;
 var SectionSheet_1 = require("./SectionSheet");
 Object.defineProperty(exports, "SectionSheet", { enumerable: true, get: function () { return SectionSheet_1.SectionSheet; } });

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

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

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

@@ -30,8 +30,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 function Divider(_a) {
-    var _b = _a.displayType, displayType = _b === void 0 ? 'line' : _b, _c = _a.direction, direction = _c === void 0 ? 'horizontal' : _c, height = _a.height, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d;
-    return ((0, jsx_runtime_1.jsx)(S_Divider, { "x-pds-name": "Divider", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", displayType: displayType, "$height": height, "$direction": direction, colorTheme: colorTheme }));
+    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, overrideColorKey = _a.overrideColorKey;
+    return ((0, jsx_runtime_1.jsx)(S_Divider, { "x-pds-name": "Divider", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", displayType: displayType, "$height": height, "$direction": direction, colorTheme: colorTheme, overrideColorKey: overrideColorKey }));
 }
 var horizontal = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: ", ";\n  width: 100%;\n"], ["\n  background-color: ", ";\n  height: ", ";\n  width: 100%;\n"])), function (_a) {
     var displayType = _a.displayType, theme = _a.theme;
@@ -63,20 +63,22 @@ var divider2Color = (0, styled_components_1.css)(templateObject_4 || (templateOb
     var theme = _a.theme;
     return theme.ui_cpnt_divider_white_opacity00;
 });
-var S_Divider = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_Divider = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n  ", ";\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;
-    return colorTheme &&
+    var overrideColorKey = _a.overrideColorKey, theme = _a.theme, colorTheme = _a.colorTheme;
+    if (overrideColorKey)
+        return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        background-color: ", ";\n      "], ["\n        background-color: ", ";\n      "])), theme[overrideColorKey]);
+    return (colorTheme &&
         {
             divider1: divider1Color,
             divider2: divider2Color,
             none: ''
-        }[colorTheme];
+        }[colorTheme]);
 });
 exports.default = Divider;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.d.ts

@@ -23,7 +23,9 @@ export type TextFieldBaseProps = {
     max?: number;
     maxLength?: number;
     textSize: DesktopFontSize;
+    customFontSize?: string;
     textWeight: FontWeight;
+    hintTextWeight?: FontWeight;
     fieldPaddingRight?: number;
     fieldPaddingLeft?: number;
     fieldHeight?: number;
@@ -46,5 +48,5 @@ export type TextFieldBaseProps = {
     onTarget?: () => void;
     [x: string]: any;
 } & Record<string, any>;
-declare function TextFieldBase({ name, hintText, defaultText, textAlign, validation, preventBlankMode, enterSubmitMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, inputMode, state, colorTheme, min, max, maxLength, textSize, textWeight, fieldPaddingRight, fieldPaddingLeft, textPadding, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, suffixText, suffixTextRightSpacingMode, isFocused, autoComplete, stepperMode, stepperRightSpacing, innerSpinButtonSize, step, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, ...rest }: TextFieldBaseProps): JSX.Element;
+declare function TextFieldBase({ name, hintText, defaultText, textAlign, validation, preventBlankMode, enterSubmitMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, inputMode, state, colorTheme, min, max, maxLength, textSize, customFontSize, textWeight, hintTextWeight, fieldPaddingRight, fieldPaddingLeft, textPadding, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, suffixText, suffixTextRightSpacingMode, isFocused, autoComplete, stepperMode, stepperRightSpacing, innerSpinButtonSize, step, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, ...rest }: TextFieldBaseProps): JSX.Element;
 export default TextFieldBase;