pds-dev-kit-web-test 2.7.4 → 2.7.6

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/LocalizedContentModal/LocalizedContentModal.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import type { LanguageCode } from '../../../common/types';
+import type { RichTextEditorProps } from '../../components/RichTextEditor/RichTextEditor';
+import type { ImageViewProps } from '../../../hybrid/components/ImageView/ImageView';
+import type { ImageUploadHandler } from '../../../mobile/components/RichTextEditor';
+export type RichEditorConfig = Omit<RichTextEditorProps, 'toolbar'> & {
+    toolbar?: string[];
+    onImageUpload: ImageUploadHandler;
+};
+export type ImageConfig = ImageViewProps & {
+    accept?: string;
+    onValid: (file: File) => boolean;
+    onImageUpload: ImageUploadHandler;
+};
+export type LocalizedContentModalProps = {
+    isOpen: boolean;
+    size?: 'large' | 'medium' | 'small' | 'rlarge';
+    originalFieldType?: 'text' | 'image';
+    textFieldLineType?: 'single' | 'multi' | 'auto' | 'tinyeditor';
+    originalText?: string;
+    initialValues?: {
+        [key in LanguageCode]?: string;
+    };
+    visibleLanguages?: LanguageCode[];
+    richEditorConfig?: RichEditorConfig;
+    imageConfig?: ImageConfig;
+    readonly?: boolean;
+    onClose: () => void;
+    onApply?: (values: {
+        [key in LanguageCode]?: string;
+    }) => void;
+};
+declare function LocalizedContentModal({ isOpen, originalFieldType, size, textFieldLineType, originalText, initialValues, visibleLanguages, readonly, richEditorConfig, imageConfig, onClose, onApply }: LocalizedContentModalProps): JSX.Element | null;
+export default LocalizedContentModal;

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

@@ -0,0 +1,171 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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_hook_form_1 = require("react-hook-form");
+var react_i18next_1 = require("react-i18next");
+var editorContentStyle_1 = require("../../../common/styles/editorContentStyle");
+var components_1 = require("../../components");
+var HTMLReader_1 = require("../../components/RichTextEditor/HTMLReader");
+var index_1 = require("../../index");
+var components_2 = require("../../../hybrid/components");
+var components_3 = require("../../../sub/DynamicLayout/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+var AnnotationSheet_1 = require("../AnnotationSheet");
+var DesktopBasicModal_1 = require("../DesktopBasicModal");
+var LANGUAGE_I18N_KEYS = {
+    ko: 'str_multilingual_ko',
+    en: 'str_multilingual_en',
+    ja: 'str_multilingual_ja',
+    zh: 'str_multilingual_zh_cn',
+    'zh-Hant': 'str_multilingual_zh_tw',
+    fr: 'str_multilingual_fr',
+    es: 'str_multilingual_es'
+};
+var LANGUAGE_DESC_TEXT_KEYS = {
+    ko: 'str_9064',
+    en: 'str_9065',
+    ja: 'str_9066',
+    zh: 'str_9067',
+    'zh-Hant': 'str_9068',
+    fr: 'str_9069',
+    es: 'str_9070'
+};
+function LocalizedContentModal(_a) {
+    var _this = this;
+    var isOpen = _a.isOpen, _b = _a.originalFieldType, originalFieldType = _b === void 0 ? 'text' : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, textFieldLineType = _a.textFieldLineType, originalText = _a.originalText, initialValues = _a.initialValues, visibleLanguages = _a.visibleLanguages, readonly = _a.readonly, richEditorConfig = _a.richEditorConfig, imageConfig = _a.imageConfig, onClose = _a.onClose, onApply = _a.onApply;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var form = (0, react_hook_form_1.useForm)({
+        defaultValues: initialValues
+    });
+    var watchedValues = (0, react_hook_form_1.useWatch)({
+        control: form.control
+    });
+    (0, react_1.useLayoutEffect)(function () {
+        if (isOpen && initialValues) {
+            form.reset(initialValues);
+        }
+    }, [isOpen, initialValues]);
+    var handleImageUpload = function (e, lang) { return __awaiter(_this, void 0, void 0, function () {
+        var file, isValid, result, error_1;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!((_a = e.target.files) === null || _a === void 0 ? void 0 : _a.length))
+                        return [2 /*return*/];
+                    file = e.target.files[0];
+                    if (imageConfig === null || imageConfig === void 0 ? void 0 : imageConfig.onValid) {
+                        isValid = imageConfig.onValid(file);
+                        if (!isValid)
+                            return [2 /*return*/];
+                    }
+                    if (!(imageConfig === null || imageConfig === void 0 ? void 0 : imageConfig.onImageUpload)) return [3 /*break*/, 4];
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, imageConfig.onImageUpload(file)];
+                case 2:
+                    result = _b.sent();
+                    if (result.location) {
+                        form.setValue(lang, result.location);
+                    }
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _b.sent();
+                    // eslint-disable-next-line no-console
+                    console.error('Image upload failed', error_1);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleDelete = function (code) {
+        form.setValue(code, '');
+    };
+    var handleApply = function () {
+        var formValues = form.getValues();
+        if (onApply) {
+            onApply(formValues);
+        }
+        onClose();
+    };
+    var handleCancel = function () {
+        onClose();
+    };
+    if (!isOpen)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(DesktopBasicModal_1.DesktopBasicModal, __assign({ titleText: t('str_multilingual_settings'), btnMode: readonly ? 'mbtn_amount1' : 'mbtn_amount2', mBtn1Text: readonly ? t('str_confirm') : t('str_apply'), mBtn2Text: t('str_cancel'), size: size, onClickMBtn1: handleApply, onClickMBtn2: handleCancel }, { children: (0, jsx_runtime_1.jsxs)(react_hook_form_1.FormProvider, __assign({}, form, { children: [originalText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: t('str_original_text'), wordBreak: "keep_all", styleTheme: "subTitleBold", colorTheme: "sysTextPrimary" }), originalFieldType === 'text' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: textFieldLineType === 'tinyeditor' ? ((0, jsx_runtime_1.jsx)(S_ReadonlyContent, { children: (0, jsx_runtime_1.jsx)(HTMLReader_1.HTMLReader, { data: originalText }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: originalText, wordBreak: "keep_all", styleTheme: "body2Regular", colorTheme: "sysTextPrimary" })] })) })), originalFieldType === 'image' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(components_3.ImageView, __assign({ width: "responsive", height: "responsive" }, imageConfig, { src: 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" })] })), visibleLanguages === null || visibleLanguages === void 0 ? void 0 : visibleLanguages.map(function (languageCode, index) {
+                    return ((0, jsx_runtime_1.jsxs)(S_LanguageField, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: t(LANGUAGE_I18N_KEYS[languageCode]), styleTheme: "subTitleBold", colorTheme: "sysTextPrimary" }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: t(LANGUAGE_DESC_TEXT_KEYS[languageCode]), styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" }), originalFieldType === 'text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [textFieldLineType === 'tinyeditor' && readonly && ((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: (initialValues === null || initialValues === void 0 ? void 0 : initialValues[languageCode]) || ''
+                                            } }) }))), textFieldLineType === 'tinyeditor' && !readonly && ((0, jsx_runtime_1.jsx)(components_1.RichTextEditor, __assign({}, richEditorConfig, { onChange: function (value) { return form.setValue(languageCode, value); }, defaultText: form.getValues(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'
+                                        ] }))), textFieldLineType !== 'tinyeditor' && ((0, jsx_runtime_1.jsx)(components_1.TextField, { responsiveMode: "use", multiRows: textFieldLineType === 'multi' ? 5 : undefined, autoMaxRows: textFieldLineType === 'auto' ? 5 : undefined, autoMinRows: textFieldLineType === 'auto' ? 1 : undefined, name: languageCode, hintText: t('str_9071'), placeholder: "Input Text", textLineType: textFieldLineType, state: readonly ? 'disabled' : 'normal' }))] })), originalFieldType === 'image' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!readonly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsxs)(S_ImageUploadButtonWrapper, { children: [(0, jsx_runtime_1.jsx)(index_1.D_UploadMainButton, { text: t('str_upload'), styleTheme: "secondary", size: "small", accept: (imageConfig === null || imageConfig === void 0 ? void 0 : imageConfig.accept) || 'image/png, image/jpg, image/jpeg, image/gif', onClick: function (e) { return handleImageUpload(e, languageCode); } }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.MainButton, { text: t('str_delete'), styleTheme: "secondary", size: "small", state: (watchedValues === null || watchedValues === void 0 ? void 0 : watchedValues[languageCode]) ? 'normal' : 'disabled', onClick: function () { return handleDelete(languageCode); } })] })] })), (watchedValues === null || watchedValues === void 0 ? void 0 : watchedValues[languageCode]) && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(components_3.ImageView, __assign({ width: "responsive", height: "responsive" }, imageConfig, { src: watchedValues === null || watchedValues === void 0 ? void 0 : watchedValues[languageCode] }))] })), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f" })] })), index < ((visibleLanguages === null || visibleLanguages === void 0 ? void 0 : visibleLanguages.length) || 0) - 1 && (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f" })] }, "".concat(languageCode, "_field")));
+                })] })) })));
+}
+var S_LanguageField = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var S_ReadonlyContent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  height: 100%;\n  overflow-y: auto;\n"], ["\n  ", "\n  height: 100%;\n  overflow-y: auto;\n"])), editorContentStyle_1.editorContentStyle);
+var S_ImageUploadButtonWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+exports.default = LocalizedContentModal;
+var templateObject_1, templateObject_2, templateObject_3;

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

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

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var LocalizedContentModal_1 = require("./LocalizedContentModal");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(LocalizedContentModal_1).default; } });

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

@@ -1,4 +1,5 @@
 import type { UiColors } from '../../../common';
+import type { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
 import type { CSSProperties } from 'react';
 type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
 export type SectionSheetProps = {
@@ -18,6 +19,7 @@ export type SectionSheetProps = {
     paddingLeft?: PaddingSpacingType;
     overrideCSS?: CSSProperties;
     children: React.ReactNode;
+    scrollVisibleType?: ScrollVisibleType;
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
 export type StyleProps = {
@@ -36,6 +38,7 @@ export type StyleProps = {
     paddingBottom?: PaddingSpacingType;
     paddingLeft?: PaddingSpacingType;
     hasOnClick?: boolean;
+    scrollVisibleType?: ScrollVisibleType;
 };
 declare const paddingSpacing: {
     readonly spacing_a: "spacingA";
@@ -53,5 +56,5 @@ declare const paddingSpacing: {
     readonly spacing_m: "spacingM";
     readonly spacing_n: "spacingN";
 };
-declare function SectionSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, onClick }: SectionSheetProps): JSX.Element;
+declare function SectionSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, scrollVisibleType, onClick }: SectionSheetProps): JSX.Element;
 export default SectionSheet;

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

@@ -39,6 +39,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 var styled_components_1 = __importStar(require("styled-components"));
 var backgroundColorTheme = {
     transparent: 'ui_cpnt_sheet_base_03',
@@ -70,13 +71,13 @@ var paddingSpacing = {
     spacing_n: 'spacingN'
 };
 function SectionSheet(_a) {
-    var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'transparent' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, onClick = _a.onClick;
+    var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'transparent' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, _m = _a.scrollVisibleType, scrollVisibleType = _m === void 0 ? 'visible' : _m, onClick = _a.onClick;
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(S_SectionSheet, __assign({ "x-pds-name": "SectionSheet", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(S_SectionSheet, __assign({ "x-pds-name": "SectionSheet", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick, scrollVisibleType: scrollVisibleType }, { children: children })));
 }
 var radiusStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
     var $radius = _a.$radius;
@@ -105,7 +106,7 @@ var advancedCSS = (0, styled_components_1.css)(templateObject_6 || (templateObje
     var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
     return overrideBorderColorKey && theme[overrideBorderColorKey];
 });
-var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  overflow-y: auto;\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  overflow-y: auto;\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme, $backgroundColorTheme = _a.$backgroundColorTheme;
     return $backgroundColorTheme && theme[backgroundColorTheme[$backgroundColorTheme]];
 }, function (_a) {
@@ -141,6 +142,13 @@ var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templa
 }, function (_a) {
     var paddingLeft = _a.paddingLeft;
     return paddingLeft !== 'none' && paddingLeftStyle;
+}, function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType;
+    return scrollVisibleType &&
+        {
+            visible: scrollbarStyle_1.scrollbarStyle,
+            hidden: scrollbarStyle_1.scrollInvisible
+        }[scrollVisibleType];
 }, advancedCSS);
 exports.default = SectionSheet;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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 LocalizedContentModal from './LocalizedContentModal';
 import { SectionSheet } from './SectionSheet';
-export { AnnotationSheet, ContentSheet, DesktopBasicModal, DesktopBasicModalWithTab, DesktopHeadlessModal, DesktopTutorialModal, SectionSheet };
+export { AnnotationSheet, ContentSheet, DesktopBasicModal, DesktopBasicModalWithTab, DesktopHeadlessModal, DesktopTutorialModal, LocalizedContentModal, 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.LocalizedContentModal = 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 LocalizedContentModal_1 = __importDefault(require("./LocalizedContentModal"));
+exports.LocalizedContentModal = LocalizedContentModal_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;