pds-dev-kit-web-test 2.6.8 → 2.6.10

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

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

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

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

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

@@ -0,0 +1,206 @@
+"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 animationStyle_1 = require("../../../common/styles/movement/animationStyle");
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
+var components_1 = require("../../components");
+var components_2 = require("../../../hybrid/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+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, _d = _a.size, size = _d === void 0 ? 'medium' : _d, onHiddenInputUpdate = _a.onHiddenInputUpdate, _e = _a.scrollVisibleType, scrollVisibleType = _e === void 0 ? 'visible' : _e;
+    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, __assign({ scrollVisibleType: scrollVisibleType }, { 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;
+                                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" }), (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 < (((_b = config.visibleLanguages) === null || _b === void 0 ? void 0 : _b.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  ", "\n"], ["\n  flex: 1;\n  max-height: 60vh;\n  overflow: auto;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType;
+    return ({
+        visible: scrollbarStyle_1.scrollbarStyle,
+        hidden: scrollbarStyle_1.scrollInvisible
+    }[scrollVisibleType]);
+});
+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"])));
+exports.default = MultilingualModal;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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/hybrid/components/Switch/Switch.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { UiColors } from '@common/types';
+import type { UiColors } from '../../../common/types';
 type SwitchProps = {
     name: string;
     status?: 'off' | 'on';

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;

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

@@ -54,18 +54,18 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/jsx-no-bind */
 var react_1 = require("react");
 var react_hook_form_1 = require("react-hook-form");
-var components_1 = require("@desktop/components");
-var components_2 = require("@hybrid/components");
+var components_1 = require("../../../../desktop/components");
+var components_2 = require("../../../../hybrid/components");
 var styled_components_1 = __importStar(require("styled-components"));
 var common_1 = require("../../../../common");
 var IconButton_1 = require("../../../components/IconButton");
 var constants_1 = require("./constants");
 function TextFieldBase(_a) {
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.enterSubmitMode, enterSubmitMode = _d === void 0 ? 'none' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _f = _a.inputType, inputType = _f === void 0 ? 'text' : _f, inputMode = _a.inputMode, _g = _a.state, state = _g === void 0 ? 'normal' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, min = _a.min, max = _a.max, _j = _a.maxLength, maxLength = _j === void 0 ? Infinity : _j, _k = _a.textSize, textSize = _k === void 0 ? 'form2' : _k, _l = _a.textWeight, textWeight = _l === void 0 ? 'normal' : _l, fieldPaddingRight = _a.fieldPaddingRight, fieldPaddingLeft = _a.fieldPaddingLeft, textPadding = _a.textPadding, _m = _a.fieldHeight, fieldHeight = _m === void 0 ? 48 : _m, _o = _a.deleteIconMode, deleteIconMode = _o === void 0 ? 'use' : _o, _p = _a.deleteIconSize, deleteIconSize = _p === void 0 ? 20 : _p, _q = _a.deleteIconColor, deleteIconColor = _q === void 0 ? 'ui_cpnt_button_icon_disabled' : _q, suffixText = _a.suffixText, _r = _a.suffixTextRightSpacingMode, suffixTextRightSpacingMode = _r === void 0 ? 'none' : _r, isFocused = _a.isFocused, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.stepperMode, stepperMode = _t === void 0 ? 'none' : _t, _u = _a.stepperRightSpacing, stepperRightSpacing = _u === void 0 ? 1 : _u, _v = _a.innerSpinButtonSize, innerSpinButtonSize = _v === void 0 ? 16 : _v, step = _a.step, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, rest = __rest(_a, ["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"]);
-    var _w = (0, react_hook_form_1.useFormContext)(), register = _w.register, setValue = _w.setValue, getValues = _w.getValues, clearErrors = _w.clearErrors;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.enterSubmitMode, enterSubmitMode = _d === void 0 ? 'none' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _f = _a.inputType, inputType = _f === void 0 ? 'text' : _f, inputMode = _a.inputMode, _g = _a.state, state = _g === void 0 ? 'normal' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, min = _a.min, max = _a.max, _j = _a.maxLength, maxLength = _j === void 0 ? Infinity : _j, _k = _a.textSize, textSize = _k === void 0 ? 'form2' : _k, customFontSize = _a.customFontSize, _l = _a.textWeight, textWeight = _l === void 0 ? 'normal' : _l, _m = _a.hintTextWeight, hintTextWeight = _m === void 0 ? 'normal' : _m, fieldPaddingRight = _a.fieldPaddingRight, fieldPaddingLeft = _a.fieldPaddingLeft, textPadding = _a.textPadding, _o = _a.fieldHeight, fieldHeight = _o === void 0 ? 48 : _o, _p = _a.deleteIconMode, deleteIconMode = _p === void 0 ? 'use' : _p, _q = _a.deleteIconSize, deleteIconSize = _q === void 0 ? 20 : _q, _r = _a.deleteIconColor, deleteIconColor = _r === void 0 ? 'ui_cpnt_button_icon_disabled' : _r, suffixText = _a.suffixText, _s = _a.suffixTextRightSpacingMode, suffixTextRightSpacingMode = _s === void 0 ? 'none' : _s, isFocused = _a.isFocused, _t = _a.autoComplete, autoComplete = _t === void 0 ? 'on' : _t, _u = _a.stepperMode, stepperMode = _u === void 0 ? 'none' : _u, _v = _a.stepperRightSpacing, stepperRightSpacing = _v === void 0 ? 1 : _v, _w = _a.innerSpinButtonSize, innerSpinButtonSize = _w === void 0 ? 16 : _w, step = _a.step, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, rest = __rest(_a, ["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"]);
+    var _x = (0, react_hook_form_1.useFormContext)(), register = _x.register, setValue = _x.setValue, getValues = _x.getValues, clearErrors = _x.clearErrors;
     var timeout;
     var suffixTextRef = (0, react_1.useRef)(null);
-    var _x = (0, react_1.useState)(0), suffixTextWidth = _x[0], setSuffixTextWidth = _x[1];
+    var _y = (0, react_1.useState)(0), suffixTextWidth = _y[0], setSuffixTextWidth = _y[1];
     // NOTE suffixText가 변할때마다 suffixText가 차지하는 너비를 알아내어 suffixTextWidth에 담는다.
     (0, react_1.useEffect)(function () {
         var calculateDivWidth = function () {
@@ -165,7 +165,7 @@ function TextFieldBase(_a) {
         }
     }
     var textAreaRef = (0, react_1.useRef)(null);
-    var _y = register(name, validation), ref = _y.ref, refRest = __rest(_y, ["ref"]);
+    var _z = register(name, validation), ref = _z.ref, refRest = __rest(_z, ["ref"]);
     (0, react_1.useEffect)(function () {
         if (textAreaRef === null || textAreaRef.current === null) {
             return;
@@ -226,13 +226,13 @@ function TextFieldBase(_a) {
     }
     var S_TextFieldBase = function () {
         if (textLineType === 'single') {
-            return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize, isFocused: isFocused, stepperRightSpacing: stepperRightSpacing }, { children: [(0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_up_stepper", fillType: "fill", size: innerSpinButtonSize }), (0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_down_stepper", fillType: "fill", size: innerSpinButtonSize })] }))), (0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, inputMode: inputMode, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, deleteIconMode: deleteIconMode, suffixText: suffixText, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing, isFocused: isFocused, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: ref })), (deleteIconMode === 'use' || suffixText) && ((0, jsx_runtime_1.jsxs)(S_RightBox, __assign({ deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, innerSpinButtonSize: innerSpinButtonSize }, { children: [deleteIconMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconButtonWrapper, __assign({ innerSpinButtonSize: innerSpinButtonSize, deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, isFocused: isFocused, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing }, { children: isFocused && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue })) }))), suffixText && ((0, jsx_runtime_1.jsxs)(S_SuffixTextBox, __assign({ ref: suffixTextRef }, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", colorOverride: stepperMode === 'use' && isFocused ? 'ui_106' : undefined, textAlign: "right", singleLineMode: "use" }), suffixTextRightSpacingMode === 'use' && ((0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }))] })))] })))] }));
+            return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize, isFocused: isFocused, stepperRightSpacing: stepperRightSpacing }, { children: [(0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_up_stepper", fillType: "fill", size: innerSpinButtonSize }), (0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_down_stepper", fillType: "fill", size: innerSpinButtonSize })] }))), (0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, inputMode: inputMode, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, customFontSize: customFontSize, textWeight: textWeight, hintTextWeight: hintTextWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, deleteIconMode: deleteIconMode, suffixText: suffixText, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing, isFocused: isFocused, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: ref })), (deleteIconMode === 'use' || suffixText) && ((0, jsx_runtime_1.jsxs)(S_RightBox, __assign({ deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, innerSpinButtonSize: innerSpinButtonSize }, { children: [deleteIconMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconButtonWrapper, __assign({ innerSpinButtonSize: innerSpinButtonSize, deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, isFocused: isFocused, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing }, { children: isFocused && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue })) }))), suffixText && ((0, jsx_runtime_1.jsxs)(S_SuffixTextBox, __assign({ ref: suffixTextRef }, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", colorOverride: stepperMode === 'use' && isFocused ? 'ui_106' : undefined, textAlign: "right", singleLineMode: "use" }), suffixTextRightSpacingMode === 'use' && ((0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }))] })))] })))] }));
         }
         if (textLineType === 'multi') {
-            return ((0, jsx_runtime_1.jsx)(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, textPadding: textPadding, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: ref })));
+            return ((0, jsx_runtime_1.jsx)(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, customFontSize: customFontSize, textWeight: textWeight, hintTextWeight: hintTextWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, textPadding: textPadding, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: ref })));
         }
         if (textLineType === 'auto') {
-            return ((0, jsx_runtime_1.jsx)(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, textPadding: textPadding, fieldHeight: fieldHeight, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
+            return ((0, jsx_runtime_1.jsx)(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, customFontSize: customFontSize, textWeight: textWeight, hintTextWeight: hintTextWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, textPadding: textPadding, fieldHeight: fieldHeight, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
                     ref(e);
                     textAreaRef.current = e;
                 }, onInput: handleResizeHeight })));
@@ -314,8 +314,8 @@ var basicStyle = (0, styled_components_1.css)(templateObject_9 || (templateObjec
             transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_enabled
         }[colorTheme];
 }, function (_a) {
-    var textSize = _a.textSize;
-    return common_1.desktopFontSize[textSize];
+    var textSize = _a.textSize, customFontSize = _a.customFontSize;
+    return customFontSize ? customFontSize : common_1.desktopFontSize[textSize];
 }, function (_a) {
     var textWeight = _a.textWeight;
     return common_1.fontWeight[textWeight];
@@ -334,11 +334,11 @@ var basicStyle = (0, styled_components_1.css)(templateObject_9 || (templateObjec
             transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_hint
         }[colorTheme];
 }, function (_a) {
-    var textSize = _a.textSize;
-    return common_1.desktopFontSize[textSize];
+    var textSize = _a.textSize, customFontSize = _a.customFontSize;
+    return customFontSize ? customFontSize : common_1.desktopFontSize[textSize];
 }, function (_a) {
-    var textWeight = _a.textWeight;
-    return common_1.fontWeight[textWeight];
+    var textWeight = _a.textWeight, hintTextWeight = _a.hintTextWeight;
+    return common_1.fontWeight[hintTextWeight || textWeight];
 }, function (_a) {
     var textSize = _a.textSize;
     return common_1.desktopLineHeight[textSize];
@@ -449,7 +449,7 @@ var stepper = (0, styled_components_1.css)(templateObject_13 || (templateObject_
     }
     return;
 });
-var inputInnerSpinButtonStyle = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  -webkit-appearance: none;\n  z-index: 1;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n  position: absolute;\n  right: ", ";\n  top: calc(\n    50% - ", "\n  );\n"], ["\n  -webkit-appearance: none;\n  z-index: 1;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n  position: absolute;\n  right: ", ";\n  top: calc(\n    50% - ", "\n  );\n"])), function (_a) {
+var inputInnerSpinButtonStyle = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  -webkit-appearance: none;\n  appearance: none;\n  z-index: 1;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n  position: absolute;\n  right: ", ";\n  top: calc(\n    50% - ", "\n  );\n"], ["\n  -webkit-appearance: none;\n  appearance: none;\n  z-index: 1;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n  position: absolute;\n  right: ", ";\n  top: calc(\n    50% - ", "\n  );\n"])), function (_a) {
     var innerSpinButtonSize = _a.innerSpinButtonSize;
     return innerSpinButtonSize && "".concat(innerSpinButtonSize * 2, "px");
 }, function (_a) {
@@ -478,19 +478,23 @@ var S_Input = styled_components_1.default.input(templateObject_15 || (templateOb
     return theme.ui_cpnt_textfield_text_typed;
 });
 var S_Auto = styled_components_1.default.textarea(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"])), basicStyle, function (_a) {
-    var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
+    var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight, customFontSize = _a.customFontSize;
     return autoMaxRows &&
         fieldHeight &&
-        "max-height: ".concat(Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
-            Number(common_1.desktopLineHeight[textSize]) *
-            autoMaxRows, "px;");
+        "max-height: ".concat(customFontSize
+            ? Number(customFontSize.substring(0, 2)) * Number(common_1.desktopLineHeight[textSize]) * autoMaxRows
+            : Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
+                Number(common_1.desktopLineHeight[textSize]) *
+                autoMaxRows, "px;");
 }, function (_a) {
-    var autoMinRows = _a.autoMinRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
+    var autoMinRows = _a.autoMinRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight, customFontSize = _a.customFontSize;
     return autoMinRows &&
         fieldHeight &&
-        "min-height: ".concat(Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
-            Number(common_1.desktopLineHeight[textSize]) *
-            autoMinRows, "px;");
+        "min-height: ".concat(customFontSize
+            ? Number(customFontSize.substring(0, 2)) * Number(common_1.desktopLineHeight[textSize]) * autoMinRows
+            : Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
+                Number(common_1.desktopLineHeight[textSize]) *
+                autoMinRows, "px;");
 });
 var S_Multi = styled_components_1.default.textarea(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"])), basicStyle);
 exports.default = TextFieldBase;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { BasicButtonGroupValueOption } from '@common/types';
+import type { BasicButtonGroupValueOption } from '../../../common/types';
 export type BasicButtonGroupProps = {
     size?: 'large' | 'medium' | 'small';
     valueArray: BasicButtonGroupValueOption[];

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

@@ -39,7 +39,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var components_1 = require("@hybrid/components");
+var components_1 = require("../../../hybrid/components");
 var styled_components_1 = __importStar(require("styled-components"));
 function BasicButtonGroup(_a) {
     var _b = _a.size, size = _b === void 0 ? 'medium' : _b, valueArray = _a.valueArray, _c = _a.state, state = _c === void 0 ? 'normal' : _c;

package/dist/src/mobile/components/BasicListItem/Contents.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { TextLabelProps } from '../TextLabel/TextLabel';
-import type { PDSTextType } from '@common/types';
+import type { PDSTextType } from '../../../common/types';
 type ContentsPropTypes = React.FunctionComponent & {
     Title: React.FC<TitlePropTypes>;
     Caption: React.FC<CaptionPropTypes>;

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

@@ -8,7 +8,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var components_1 = require("@hybrid/components");
+var components_1 = require("../../../hybrid/components");
 var styled_components_1 = __importDefault(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 var Contents = function (_a) {

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

@@ -8,7 +8,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var components_1 = require("@hybrid/components");
+var components_1 = require("../../../../hybrid/components");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Badge = function (_a) {
     var status = _a.status;