pds-dev-kit-web 2.2.197 → 2.2.198

package/dist/src/common/assets/icons/fill/Translate.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type IconType from '../IconType';
+declare const Translate: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default Translate;

package/dist/src/common/assets/icons/fill/Translate.js

@@ -0,0 +1,30 @@
+"use strict";
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Translate = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M7.097,7.947 C6.356,6.96 5.801,5.917 5.413,4.781 L8.679,4.781 C8.263,6.029 7.742,7.072 7.097,7.947 L7.097,7.947 Z M16.353,12.562 L13.833,12.562 L15.099,8.982 L16.353,12.562 Z M16.608,5.369 L16.497,5.076 L13.666,5.076 L11.391,11.25 C10.424,10.814 9.569,10.32 8.882,9.798 C9.972,8.418 10.808,6.734 11.37,4.781 L13.655,4.781 L13.655,2.413 L8.256,2.413 L8.256,0 L5.743,0 L5.743,2.413 L0.454,2.413 L0.454,4.781 L2.778,4.781 C3.348,6.624 4.211,8.335 5.295,9.767 C4.321,10.562 2.798,11.553 0.706,12.205 L0,12.431 L1.355,14.732 L1.819,14.559 C3.726,13.858 5.579,12.815 7.075,11.604 C7.998,12.353 9.19,13.082 10.491,13.693 L8.813,18.245 L11.805,18.245 L12.945,15.022 L17.221,15.022 L18.363,18.245 L21.389,18.245 L16.608,5.369 Z", transform: "translate(2 2.85)" }) })));
+};
+exports.default = Translate;

package/dist/src/common/assets/icons/fill/index.d.ts

@@ -124,6 +124,7 @@ declare const fillIcons: {
     readonly ic_toggle_down: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_toggle_up: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_trashcan: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_translate: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_typeface_system: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_unavailable: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_upload: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

package/dist/src/common/assets/icons/fill/index.js

@@ -145,6 +145,7 @@ var ThumbDown_1 = __importDefault(require("./ThumbDown"));
 var ThumbUp_1 = __importDefault(require("./ThumbUp"));
 var ToggleDown_1 = __importDefault(require("./ToggleDown"));
 var ToggleUp_1 = __importDefault(require("./ToggleUp"));
+var Translate_1 = __importDefault(require("./Translate"));
 var Trashcan_1 = __importDefault(require("./Trashcan"));
 var TypefaceSystem_1 = __importDefault(require("./TypefaceSystem"));
 var Unavailable_1 = __importDefault(require("./Unavailable"));
@@ -293,6 +294,7 @@ var fillIcons = {
     ic_toggle_down: ToggleDown_1.default,
     ic_toggle_up: ToggleUp_1.default,
     ic_trashcan: Trashcan_1.default,
+    ic_translate: Translate_1.default,
     ic_typeface_system: TypefaceSystem_1.default,
     ic_unavailable: Unavailable_1.default,
     ic_upload: Upload_1.default,

package/dist/src/common/assets/icons/line/Translate.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type IconType from '../IconType';
+declare const Translate: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default Translate;

package/dist/src/common/assets/icons/line/Translate.js

@@ -0,0 +1,30 @@
+"use strict";
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Translate = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M6.497,8.1963 C5.449,6.9073 4.718,5.5273 4.267,3.9813 L8.624,3.9813 C8.109,5.7143 7.413,7.0933 6.497,8.1963 L6.497,8.1963 Z M14.519,7.4273 L16.317,12.5623 L12.667,12.5623 L14.483,7.4273 L14.519,7.4273 Z M15.634,5.1083 L15.622,5.0763 L13.345,5.0763 L11.021,11.3853 C9.701,10.8303 8.56,10.1643 7.716,9.4583 C8.954,8.0013 9.879,6.1593 10.467,3.9813 L12.655,3.9813 L12.655,2.4133 L7.256,2.4133 L7.256,0.0003 L5.543,0.0003 L5.543,2.4133 L0.254,2.4133 L0.254,3.9813 L2.476,3.9813 C3.068,6.0193 4.025,7.9003 5.247,9.4253 C4.261,10.2833 2.599,11.4483 0.228,12.1863 L8.8817842e-16,12.2593 L0.911,13.8033 L0.932,13.8403 L1.081,13.7843 C3.06,13.0563 4.974,11.9563 6.476,10.6833 C7.479,11.5503 8.867,12.4003 10.394,13.0843 L8.788,17.4453 L10.923,17.4453 L12.062,14.2223 L16.904,14.2223 L18.031,17.4123 L18.043,17.4453 L20.215,17.4453 L15.634,5.1083 Z", transform: "translate(2 3.2)" }) })));
+};
+exports.default = Translate;

package/dist/src/common/assets/icons/line/index.d.ts

@@ -257,6 +257,7 @@ declare const lineIcons: {
     readonly ic_toggle_down: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_toggle_up: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_trashcan: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_translate: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_typeface_blackletter_20: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_typeface_deco_20: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_typeface_display_20: ({ color, ...rest }: import("../IconType").default) => JSX.Element;

package/dist/src/common/assets/icons/line/index.js

@@ -287,6 +287,7 @@ var Ticket_1 = __importDefault(require("./Ticket"));
 var Time_1 = __importDefault(require("./Time"));
 var ToggleDown_1 = __importDefault(require("./ToggleDown"));
 var ToggleUp_1 = __importDefault(require("./ToggleUp"));
+var Translate_1 = __importDefault(require("./Translate"));
 var Trashcan_1 = __importDefault(require("./Trashcan"));
 var TypefaceBlackLetter20_1 = __importDefault(require("./TypefaceBlackLetter20"));
 var TypefaceDeco20_1 = __importDefault(require("./TypefaceDeco20"));
@@ -586,6 +587,7 @@ var lineIcons = {
     ic_toggle_down: ToggleDown_1.default,
     ic_toggle_up: ToggleUp_1.default,
     ic_trashcan: Trashcan_1.default,
+    ic_translate: Translate_1.default,
     ic_typeface_blackletter_20: TypefaceBlackLetter20_1.default,
     ic_typeface_deco_20: TypefaceDeco20_1.default,
     ic_typeface_display_20: TypefaceDisplay20_1.default,

package/dist/src/common/services/i18n/resources/en.json

@@ -34,6 +34,20 @@
         "str_3891": "Fri",
         "str_3892": "Sat",
         "str_3893": "Sun",
+        "multilingual_settings": "Multilingual Settings",
+        "str_multilingual_ko": "Korean",
+        "str_multilingual_en": "English",
+        "str_multilingual_ja": "Japanese",
+        "str_multilingual_zh_cn": "Chinese - Simplified",
+        "str_multilingual_zh_tw": "Chinese - Traditional",
+        "str_multilingual_fr": "French",
+        "str_multilingual_es": "Spanish",
+        "str_9071": "Please enter the text in the appropriate language for your country.",
+        "str_original_text": "Original Text",
+        "str_apply": "Apply",
+        "str_cancel": "Cancel",
+        "str_confirm": "Confirm",
+        "str_multilingual_settings": "Multilingual Settings",
         "str_min_price": "Please enter at least {{currency}} {{minPrice}}",
         "str_max_price": "You can enter up to {{currency}} {{maxPrice}}",
         "str_price_unit": "Please enter in increments of {{currency}} {{priceUnit}}",

package/dist/src/common/services/i18n/resources/es.json

@@ -34,6 +34,20 @@
         "str_3891": "Fri",
         "str_3892": "Sat",
         "str_3893": "Sun",
+        "multilingual_settings": "Configuración Multiidioma",
+        "str_multilingual_ko": "Coreano",
+        "str_multilingual_en": "Inglés",
+        "str_multilingual_ja": "Japonés",
+        "str_multilingual_zh_cn": "Chino - Simplificado",
+        "str_multilingual_zh_tw": "Chino - Tradicional",
+        "str_multilingual_fr": "Francés",
+        "str_multilingual_es": "Español",
+        "str_9071": "Por favor, ingrese el texto en el idioma apropiado para su país.",
+        "str_original_text": "Texto Original",
+        "str_apply": "Aplicar",
+        "str_cancel": "Cancelar",
+        "str_multilingual_settings": "Configuración Multilingüe",
+        "str_confirm": "controlar",
         "str_min_price": "Ingrese al menos {{minPrice}} {{currency}} o más.",
         "str_max_price": "Puede ingresar hasta {{maxPrice}} {{currency}}.",
         "str_price_unit": "Por favor, introduzca en unidades de {{priceUnit}} {{currency}}.",

package/dist/src/common/services/i18n/resources/fil.json

@@ -34,6 +34,20 @@
         "str_3891": "Fri",
         "str_3892": "Sat",
         "str_3893": "Sun",
+        "multilingual_settings": "Multilingual Settings",
+        "str_multilingual_ko": "Korean",
+        "str_multilingual_en": "English",
+        "str_multilingual_ja": "Japanese",
+        "str_multilingual_zh_cn": "Chinese - Simplified",
+        "str_multilingual_zh_tw": "Chinese - Traditional",
+        "str_multilingual_fr": "French",
+        "str_multilingual_es": "Spanish",
+        "str_9071": "Mangyaring ilagay ang teksto sa naaangkop na wika para sa inyong bansa.",
+        "str_original_text": "Orihinal na Teksto",
+        "str_apply": "Apply",
+        "str_cancel": "Cancel",
+        "str_confirm": "Kumpirmahin",
+        "str_multilingual_settings": "Multilingual Settings",
         "str_min_price": "Mangyaring maglagay ng hindi bababa sa {{minPrice}} {{currency}} o higit pa.",
         "str_max_price": "Maaari kang mag-input ng hanggang {{maxPrice}} {{currency}}.",
         "str_price_unit": "Pakipasok sa mga unit ng {{priceUnit}} {{currency}}.",

package/dist/src/common/services/i18n/resources/index.d.ts

@@ -35,6 +35,20 @@ declare const locale: {
             str_3891: string;
             str_3892: string;
             str_3893: string;
+            multilingual_settings: string;
+            str_multilingual_ko: string;
+            str_multilingual_en: string;
+            str_multilingual_ja: string;
+            str_multilingual_zh_cn: string;
+            str_multilingual_zh_tw: string;
+            str_multilingual_fr: string;
+            str_multilingual_es: string;
+            str_9071: string;
+            str_original_text: string;
+            str_apply: string;
+            str_cancel: string;
+            str_multilingual_settings: string;
+            str_confirm: string;
             str_min_price: string;
             str_max_price: string;
             str_price_unit: string;
@@ -81,6 +95,20 @@ declare const locale: {
             str_3891: string;
             str_3892: string;
             str_3893: string;
+            multilingual_settings: string;
+            str_multilingual_ko: string;
+            str_multilingual_en: string;
+            str_multilingual_ja: string;
+            str_multilingual_zh_cn: string;
+            str_multilingual_zh_tw: string;
+            str_multilingual_fr: string;
+            str_multilingual_es: string;
+            str_9071: string;
+            str_original_text: string;
+            str_apply: string;
+            str_cancel: string;
+            str_confirm: string;
+            str_multilingual_settings: string;
             str_min_price: string;
             str_max_price: string;
             str_price_unit: string;
@@ -127,6 +155,20 @@ declare const locale: {
             str_3891: string;
             str_3892: string;
             str_3893: string;
+            multilingual_settings: string;
+            str_multilingual_ko: string;
+            str_multilingual_en: string;
+            str_multilingual_ja: string;
+            str_multilingual_zh_cn: string;
+            str_multilingual_zh_tw: string;
+            str_multilingual_fr: string;
+            str_multilingual_es: string;
+            str_9071: string;
+            str_original_text: string;
+            str_apply: string;
+            str_cancel: string;
+            str_confirm: string;
+            str_multilingual_settings: string;
             str_min_price: string;
             str_max_price: string;
             str_price_unit: string;
@@ -173,6 +215,20 @@ declare const locale: {
             str_3891: string;
             str_3892: string;
             str_3893: string;
+            multilingual_settings: string;
+            str_multilingual_ko: string;
+            str_multilingual_en: string;
+            str_multilingual_ja: string;
+            str_multilingual_zh_cn: string;
+            str_multilingual_zh_tw: string;
+            str_multilingual_fr: string;
+            str_multilingual_es: string;
+            str_9071: string;
+            str_original_text: string;
+            str_apply: string;
+            str_cancel: string;
+            str_multilingual_settings: string;
+            str_confirm: string;
             str_min_price: string;
             str_max_price: string;
             str_price_unit: string;
@@ -219,6 +275,20 @@ declare const locale: {
             str_3891: string;
             str_3892: string;
             str_3893: string;
+            multilingual_settings: string;
+            str_multilingual_ko: string;
+            str_multilingual_en: string;
+            str_multilingual_ja: string;
+            str_multilingual_zh_cn: string;
+            str_multilingual_zh_tw: string;
+            str_multilingual_fr: string;
+            str_multilingual_es: string;
+            str_9071: string;
+            str_original_text: string;
+            str_apply: string;
+            str_cancel: string;
+            str_multilingual_settings: string;
+            str_confirm: string;
             str_min_price: string;
             str_max_price: string;
             str_price_unit: string;
@@ -265,6 +335,20 @@ declare const locale: {
             str_3891: string;
             str_3892: string;
             str_3893: string;
+            multilingual_settings: string;
+            str_multilingual_ko: string;
+            str_multilingual_en: string;
+            str_multilingual_ja: string;
+            str_multilingual_zh_cn: string;
+            str_multilingual_zh_tw: string;
+            str_multilingual_fr: string;
+            str_multilingual_es: string;
+            str_9071: string;
+            str_original_text: string;
+            str_apply: string;
+            str_cancel: string;
+            str_multilingual_settings: string;
+            str_confirm: string;
             str_min_price: string;
             str_max_price: string;
             str_price_unit: string;
@@ -311,6 +395,20 @@ declare const locale: {
             str_3891: string;
             str_3892: string;
             str_3893: string;
+            multilingual_settings: string;
+            str_multilingual_ko: string;
+            str_multilingual_en: string;
+            str_multilingual_ja: string;
+            str_multilingual_zh_cn: string;
+            str_multilingual_zh_tw: string;
+            str_multilingual_fr: string;
+            str_multilingual_es: string;
+            str_9071: string;
+            str_original_text: string;
+            str_apply: string;
+            str_cancel: string;
+            str_confirm: string;
+            str_multilingual_settings: string;
             str_min_price: string;
             str_max_price: string;
             str_price_unit: string;

package/dist/src/common/services/i18n/resources/ja.json

@@ -34,6 +34,20 @@
         "str_3891": "金",
         "str_3892": "土",
         "str_3893": "日",
+        "multilingual_settings": "多言語設定",
+        "str_multilingual_ko": "韓国語",
+        "str_multilingual_en": "英語",
+        "str_multilingual_ja": "日本語",
+        "str_multilingual_zh_cn": "中国語 - 簡体",
+        "str_multilingual_zh_tw": "中国語 - 繁体",
+        "str_multilingual_fr": "フランス語",
+        "str_multilingual_es": "スペイン語",
+        "str_9071": "国に適した言語を入力してください。",
+        "str_original_text": "原文",
+        "str_apply": "適用",
+        "str_cancel": "キャンセル",
+        "str_confirm": "確認",
+        "str_multilingual_settings": "多言語設定",
         "str_min_price": "最小 {{minPrice}} {{currency}} 以上入力してください。",
         "str_max_price": "最大 {{maxPrice}} {{currency}} まで入力できます。",
         "str_price_unit": "{{priceUnit}} {{currency}}単位で入力してください。",

package/dist/src/common/services/i18n/resources/ko.json

@@ -34,6 +34,20 @@
         "str_3891": "금",
         "str_3892": "토",
         "str_3893": "일",
+        "multilingual_settings": "다국어 설정",
+        "str_multilingual_ko": "한국어",
+        "str_multilingual_en": "영어",
+        "str_multilingual_ja": "일본어",
+        "str_multilingual_zh_cn": "중국어 - 간체",
+        "str_multilingual_zh_tw": "중국어 - 번체",
+        "str_multilingual_fr": "프랑스어",
+        "str_multilingual_es": "스페인어",
+        "str_9071": "국가에 맞는 언어를 입력해 주세요.",
+        "str_original_text": "원문",
+        "str_apply": "적용",
+        "str_cancel": "취소",
+        "str_multilingual_settings": "다국어 설정",
+        "str_confirm": "확인",
         "str_min_price": "최소 {{minPrice}} {{currency}} 이상 입력해 주세요.",
         "str_max_price": "최대 {{maxPrice}} {{currency}} 까지 입력할 수 있습니다.",
         "str_price_unit": "{{priceUnit}} {{currency}} 단위로 입력해 주세요.",

package/dist/src/common/services/i18n/resources/zh-cn.json

@@ -34,6 +34,20 @@
         "str_3891": "Fri",
         "str_3892": "Sat",
         "str_3893": "Sun",
+        "multilingual_settings": "多语言设置",
+        "str_multilingual_ko": "韩语",
+        "str_multilingual_en": "英语",
+        "str_multilingual_ja": "日语",
+        "str_multilingual_zh_cn": "中文 - 简体",
+        "str_multilingual_zh_tw": "中文 - 繁体",
+        "str_multilingual_fr": "法语",
+        "str_multilingual_es": "西班牙语",
+        "str_9071": "请输入适合您国家的语言。",
+        "str_original_text": "原文",
+        "str_apply": "应用",
+        "str_cancel": "取消",
+        "str_multilingual_settings": "多语言设置",
+        "str_confirm": "确认",
         "str_min_price": "请至少输入{{minPrice}}、{{currency}}或更多。",
         "str_max_price": "最多可以输入{{maxPrice}} {{currency}}。",
         "str_price_unit": "请以{{priceUnit}} {{currency}}为单位输入。",

package/dist/src/common/services/i18n/resources/zh-tw.json

@@ -34,6 +34,20 @@
         "str_3891": "Fri",
         "str_3892": "Sat",
         "str_3893": "Sun",
+        "multilingual_settings": "多語言設置",
+        "str_multilingual_ko": "韓語",
+        "str_multilingual_en": "英語",
+        "str_multilingual_ja": "日語",
+        "str_multilingual_zh_cn": "中文 - 簡體",
+        "str_multilingual_zh_tw": "中文 - 繁體",
+        "str_multilingual_fr": "法語",
+        "str_multilingual_es": "西班牙語",
+        "str_9071": "請輸入適合您國家的語言。",
+        "str_original_text": "原文",
+        "str_apply": "應用",
+        "str_cancel": "取消",
+        "str_multilingual_settings": "多語言設定",
+        "str_confirm": "確認",
         "str_min_price": "請至少輸入{{minPrice}}、{{currency}}或更多。",
         "str_max_price": "最多可輸入{{maxPrice}} {{currency}}。",
         "str_price_unit": "請以{{priceUnit}} {{currency}}為單位輸入。",

package/dist/src/common/types/components.d.ts

@@ -55,3 +55,12 @@ export type SegmentedButtonGroupValueOption = Pick<PDSValueOption, 'value'> & {
     tooltipPosition?: IconCaseTooltipPositionType;
 };
 export type ForwardedRefType<T> = ForwardedRef<T | null>;
+export interface IFormValues {
+    [key: string]: string;
+}
+/**
+ * 중첩된 객체 구조에서 점(.)으로 구분된 경로를 통해 에러 객체를 조회합니다
+ */
+export declare const getErrorByName: (errors: {
+    [x: string]: any;
+}, name: string) => any;

package/dist/src/common/types/components.js

@@ -1,2 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getErrorByName = void 0;
+/**
+ * 중첩된 객체 구조에서 점(.)으로 구분된 경로를 통해 에러 객체를 조회합니다
+ */
+var getErrorByName = function (errors, name) {
+    return name.split('.').reduce(function (errors, property) { return errors && errors[property]; }, errors);
+};
+exports.getErrorByName = getErrorByName;

package/dist/src/common/types/index.d.ts

@@ -1,6 +1,6 @@
-export * from './form';
 export * from './icon';
 export * from './styled-components';
 export * from './text';
 export * from './uiColors';
 export * from './components';
+export * from './multilingual';

package/dist/src/common/types/index.js

@@ -14,9 +14,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./form"), exports);
 __exportStar(require("./icon"), exports);
 __exportStar(require("./styled-components"), exports);
 __exportStar(require("./text"), exports);
 __exportStar(require("./uiColors"), exports);
 __exportStar(require("./components"), exports);
+__exportStar(require("./multilingual"), exports);

package/dist/src/common/types/multilingual.d.ts

@@ -0,0 +1,16 @@
+type LanguageCode = 'en' | 'ko' | 'ja' | 'zh' | 'zh-Hant' | 'fr' | 'de' | 'es' | 'it' | 'pt' | 'ru' | 'vi' | 'th' | 'id' | 'ms' | 'ar' | 'tr' | 'pl' | 'nl' | 'sv' | 'fi' | 'no' | 'da' | 'he' | 'hi' | 'bn' | 'ta' | 'el' | 'cs' | 'ro';
+type MultilingualConfig = {
+    textFieldLineType?: 'single' | 'multi' | 'auto' | 'tinyeditor';
+    originalText?: string;
+    initialValues?: {
+        [key in LanguageCode]?: string;
+    };
+    visibleLanguages?: LanguageCode[];
+    readonlyLanguages?: LanguageCode[];
+    hiddenInputId: string;
+    onApply?: (values: {
+        [key in LanguageCode]?: string;
+    }) => void;
+    onTinyEditorAction?: () => void;
+};
+export type { LanguageCode, MultilingualConfig };

package/dist/src/common/types/multilingual.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/desktop/components/BasicFormGroup/BasicFormGroup.d.ts

@@ -1,12 +1,16 @@
 /// <reference types="react" />
-import type { PDSTextType } from '../../../common';
+import type { PDSTextType, MultilingualConfig } from '../../../common/types';
 type BasicFormGroupProps = {
     titleStyleTheme?: 'headingBold' | 'leadParaBold' | 'subTitleBold';
+    headerSize?: 'small' | 'medium' | 'large' | 'rlarge';
     titleText?: PDSTextType;
     descText?: PDSTextType;
     captionText?: PDSTextType;
     inputForm?: JSX.Element;
     titleRequirementMode?: 'use' | 'none';
+    multilingualBtnMode?: 'use' | 'none';
+    multilingualBtnState?: 'normal' | 'disabled';
+    multilingualConfig?: MultilingualConfig;
 };
-declare function BasicFormGroup({ titleStyleTheme, titleText, descText, captionText, inputForm, titleRequirementMode }: BasicFormGroupProps): JSX.Element;
+declare function BasicFormGroup({ titleStyleTheme, headerSize, titleText, descText, captionText, inputForm, titleRequirementMode, multilingualBtnMode, multilingualBtnState, multilingualConfig }: BasicFormGroupProps): JSX.Element;
 export default BasicFormGroup;

package/dist/src/desktop/components/BasicFormGroup/BasicFormGroup.js

@@ -19,17 +19,78 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var MultilingualModal_1 = __importDefault(require("../../panels/MultilingualModal"));
+var components_1 = require("../../../hybrid/components");
 var styled_components_1 = __importDefault(require("styled-components"));
-var hybrid_1 = require("../../../hybrid");
+var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
 function BasicFormGroup(_a) {
-    var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, inputForm = _a.inputForm, _c = _a.titleRequirementMode, titleRequirementMode = _c === void 0 ? 'none' : _c;
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BasicFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [titleText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(S_TitleTextWrapper, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }), titleRequirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }))] }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })), inputForm, captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" })] }))] })));
+    var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, _c = _a.headerSize, headerSize = _c === void 0 ? 'rlarge' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, inputForm = _a.inputForm, _d = _a.titleRequirementMode, titleRequirementMode = _d === void 0 ? 'none' : _d, _e = _a.multilingualBtnMode, multilingualBtnMode = _e === void 0 ? 'none' : _e, _f = _a.multilingualBtnState, multilingualBtnState = _f === void 0 ? 'normal' : _f, multilingualConfig = _a.multilingualConfig;
+    var _g = (0, react_1.useState)(false), isMultiLanguageModalOpen = _g[0], setIsMultiLanguageModalOpen = _g[1];
+    var _h = (0, react_1.useState)(false), hasMultilingualValues = _h[0], setHasMultilingualValues = _h[1];
+    var _j = (0, react_1.useState)(function () {
+        return JSON.stringify((multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.initialValues) || {});
+    }), hiddenInputValue = _j[0], setHiddenInputValue = _j[1];
+    // hiddenInput의 값이 있는지 확인하는 함수
+    var checkMultilingualValues = function () {
+        try {
+            var values = JSON.parse(hiddenInputValue || '{}');
+            var hasValues = Object.values(values).some(function (value) { return value && value.toString().trim() !== ''; });
+            setHasMultilingualValues(hasValues);
+        }
+        catch (_a) {
+            setHasMultilingualValues(false);
+        }
+    };
+    // initialValues가 변경될 때 hiddenInputValue 업데이트
+    (0, react_1.useEffect)(function () {
+        var newValue = JSON.stringify((multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.initialValues) || {});
+        setHiddenInputValue(newValue);
+    }, [multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.initialValues]);
+    // hiddenInputValue가 변경될 때마다 체크
+    (0, react_1.useEffect)(function () {
+        checkMultilingualValues();
+    }, [hiddenInputValue]);
+    var handleLanguageButtonClick = function () {
+        // TinyEditor 모드일 때는 모달을 열지 않고 onTinyEditorAction 실행
+        if ((multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.textFieldLineType) === 'tinyeditor') {
+            if (multilingualConfig.onTinyEditorAction) {
+                multilingualConfig.onTinyEditorAction();
+            }
+            return;
+        }
+        setIsMultiLanguageModalOpen(true);
+    };
+    var handleLanguageModalClose = function () {
+        setIsMultiLanguageModalOpen(false);
+    };
+    var handleHiddenInputUpdate = function (newValue) {
+        setHiddenInputValue(newValue);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BasicFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [titleText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(S_TitleTextWrapper, __assign({ "$headerSize": headerSize }, { children: [(0, jsx_runtime_1.jsxs)(S_TitleText, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }), titleRequirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }))] }), multilingualBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(S_MultilingualButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconFillType: "line", iconName: "ic_translate", baseSize: "small", shapeType: "round", baseColorKey: "ui_cpnt_button_fill_base_default", iconColorKey: hasMultilingualValues
+                                        ? 'ui_cpnt_button_icon_primary'
+                                        : 'ui_cpnt_icon_sys_grey_02', state: multilingualBtnState, onClick: multilingualBtnState === 'normal' ? handleLanguageButtonClick : undefined }) }))] })), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" })] })), multilingualBtnMode === 'use' && multilingualConfig && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", id: "hiddenInput_".concat(multilingualConfig.hiddenInputId), name: multilingualConfig.hiddenInputId, value: hiddenInputValue }), (0, jsx_runtime_1.jsx)(MultilingualModal_1.default, { isOpen: isMultiLanguageModalOpen, onClose: handleLanguageModalClose, config: multilingualConfig, onHiddenInputUpdate: handleHiddenInputUpdate })] })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_d" })] })), inputForm, captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" })] }))] })));
 }
-var S_TitleTextWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
-var S_IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  height: 16px;\n  justify-content: center;\n  padding: 0 ", ";\n  width: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  height: 16px;\n  justify-content: center;\n  padding: 0 ", ";\n  width: 16px;\n"])), function (_a) {
+var S_TitleTextWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  width: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  width: ", ";\n"])), function (_a) {
+    var $headerSize = _a.$headerSize;
+    if ($headerSize === 'small')
+        return '188px';
+    if ($headerSize === 'medium')
+        return '188px';
+    if ($headerSize === 'large')
+        return '432px';
+    if ($headerSize === 'rlarge')
+        return '100%';
+});
+var S_TitleText = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
+var S_IconWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  height: 16px;\n  justify-content: center;\n  padding: 0 ", ";\n  width: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  height: 16px;\n  justify-content: center;\n  padding: 0 ", ";\n  width: 16px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
 });
+var S_MultilingualButtonWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  margin-left: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  margin-left: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
 exports.default = BasicFormGroup;
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/desktop/components/BodyTextGroup/BodyTextGroup.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import type { PDSTextType } from '../../../common';
+import type { MultilingualConfig } from '../../../common/types';
 type BodyTextGroupProps = {
     titleStyleTheme?: 'headingBold' | 'leadParaBold' | 'subTitleBold';
+    headerSize?: 'small' | 'medium' | 'large' | 'rlarge';
     titleText: PDSTextType;
     descText?: PDSTextType;
     contentText?: PDSTextType;
@@ -9,6 +11,9 @@ type BodyTextGroupProps = {
     descTextWordBreak?: 'normal' | 'break_all' | 'keep_all' | 'break_word';
     contentTextWordBreak?: 'normal' | 'break_all' | 'keep_all' | 'break_word';
     contentFontWeight?: 'regular' | 'bold';
+    multilingualBtnMode?: 'use' | 'none';
+    multilingualBtnState?: 'normal' | 'disabled';
+    multilingualConfig?: MultilingualConfig;
 };
-declare function BodyTextGroup({ titleStyleTheme, titleText, descText, contentText, titleTextWordBreak, descTextWordBreak, contentTextWordBreak, contentFontWeight }: BodyTextGroupProps): JSX.Element;
+declare function BodyTextGroup({ titleStyleTheme, headerSize, titleText, descText, contentText, titleTextWordBreak, descTextWordBreak, contentTextWordBreak, contentFontWeight, multilingualBtnMode, multilingualBtnState, multilingualConfig }: BodyTextGroupProps): JSX.Element;
 export default BodyTextGroup;

package/dist/src/desktop/components/BodyTextGroup/BodyTextGroup.js

@@ -1,4 +1,8 @@
 "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++) {
@@ -10,12 +14,76 @@ var __assign = (this && this.__assign) || function () {
     };
     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 panels_1 = require("../../panels");
+var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
+var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
 function BodyTextGroup(_a) {
-    var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, titleText = _a.titleText, descText = _a.descText, contentText = _a.contentText, _c = _a.titleTextWordBreak, titleTextWordBreak = _c === void 0 ? 'keep_all' : _c, _d = _a.descTextWordBreak, descTextWordBreak = _d === void 0 ? 'keep_all' : _d, _e = _a.contentTextWordBreak, contentTextWordBreak = _e === void 0 ? 'keep_all' : _e, _f = _a.contentFontWeight, contentFontWeight = _f === void 0 ? 'regular' : _f;
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BodyTextGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, wordBreak: titleTextWordBreak, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }), descText && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, wordBreak: descTextWordBreak, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" })] })), contentText && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, wordBreak: contentTextWordBreak, styleTheme: contentFontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorTheme: "sysTextPrimary" })] }))] })));
+    var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, _c = _a.headerSize, headerSize = _c === void 0 ? 'rlarge' : _c, titleText = _a.titleText, descText = _a.descText, contentText = _a.contentText, _d = _a.titleTextWordBreak, titleTextWordBreak = _d === void 0 ? 'keep_all' : _d, _e = _a.descTextWordBreak, descTextWordBreak = _e === void 0 ? 'keep_all' : _e, _f = _a.contentTextWordBreak, contentTextWordBreak = _f === void 0 ? 'keep_all' : _f, _g = _a.contentFontWeight, contentFontWeight = _g === void 0 ? 'regular' : _g, _h = _a.multilingualBtnMode, multilingualBtnMode = _h === void 0 ? 'none' : _h, _j = _a.multilingualBtnState, multilingualBtnState = _j === void 0 ? 'normal' : _j, multilingualConfig = _a.multilingualConfig;
+    var _k = (0, react_1.useState)(false), isMultiLanguageModalOpen = _k[0], setIsMultiLanguageModalOpen = _k[1];
+    var _l = (0, react_1.useState)(false), hasMultilingualValues = _l[0], setHasMultilingualValues = _l[1];
+    var _m = (0, react_1.useState)(function () {
+        return JSON.stringify((multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.initialValues) || {});
+    }), hiddenInputValue = _m[0], setHiddenInputValue = _m[1];
+    // hiddenInput의 값이 있는지 확인하는 함수
+    var checkMultilingualValues = function () {
+        try {
+            var values = JSON.parse(hiddenInputValue || '{}');
+            var hasValues = Object.values(values).some(function (value) { return value && value.toString().trim() !== ''; });
+            setHasMultilingualValues(hasValues);
+        }
+        catch (_a) {
+            setHasMultilingualValues(false);
+        }
+    };
+    // initialValues가 변경될 때 hiddenInputValue 업데이트
+    (0, react_1.useEffect)(function () {
+        var newValue = JSON.stringify((multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.initialValues) || {});
+        setHiddenInputValue(newValue);
+    }, [multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.initialValues]);
+    // hiddenInputValue가 변경될 때마다 체크
+    (0, react_1.useEffect)(function () {
+        checkMultilingualValues();
+    }, [hiddenInputValue]);
+    var handleLanguageButtonClick = function () {
+        // TinyEditor 모드일 때는 모달을 열지 않고 onTinyEditorAction 실행
+        if ((multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.textFieldLineType) === 'tinyeditor') {
+            if (multilingualConfig.onTinyEditorAction) {
+                multilingualConfig.onTinyEditorAction();
+            }
+            return;
+        }
+        setIsMultiLanguageModalOpen(true);
+    };
+    var handleLanguageModalClose = function () {
+        setIsMultiLanguageModalOpen(false);
+    };
+    var handleHiddenInputUpdate = function (newValue) {
+        setHiddenInputValue(newValue);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BodyTextGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsxs)(S_TitleTextWrapper, __assign({ "$headerSize": headerSize }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, wordBreak: titleTextWordBreak, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }), multilingualBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(S_MultilingualButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconFillType: "line", iconName: "ic_translate", baseSize: "small", shapeType: "round", baseColorKey: "ui_cpnt_button_fill_base_default", iconColorKey: hasMultilingualValues ? 'ui_cpnt_button_icon_primary' : 'ui_cpnt_icon_sys_grey_02', state: multilingualBtnState, onClick: multilingualBtnState === 'normal' ? handleLanguageButtonClick : undefined }) }))] })), multilingualBtnMode === 'use' && multilingualConfig && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", id: "hiddenInput_".concat(multilingualConfig.hiddenInputId), name: multilingualConfig.hiddenInputId, value: hiddenInputValue }), (0, jsx_runtime_1.jsx)(panels_1.MultilingualModal, { isOpen: isMultiLanguageModalOpen, onClose: handleLanguageModalClose, config: multilingualConfig, onHiddenInputUpdate: handleHiddenInputUpdate })] })), descText && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, wordBreak: descTextWordBreak, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" })] })), contentText && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, wordBreak: contentTextWordBreak, styleTheme: contentFontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorTheme: "sysTextPrimary" })] }))] })));
 }
+var S_TitleTextWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  width: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  width: ", ";\n"])), function (_a) {
+    var $headerSize = _a.$headerSize;
+    if ($headerSize === 'small')
+        return '188px';
+    if ($headerSize === 'medium')
+        return '188px';
+    if ($headerSize === 'large')
+        return '432px';
+    if ($headerSize === 'rlarge')
+        return '100%';
+});
+var S_MultilingualButtonWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  margin-left: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  margin-left: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
 exports.default = BodyTextGroup;
+var templateObject_1, templateObject_2;

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

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

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

@@ -0,0 +1,199 @@
+"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 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;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var allLangInReadonly = (_b = config === null || config === void 0 ? void 0 : config.visibleLanguages) === null || _b === void 0 ? void 0 : _b.every(function (item) { var _a; return (_a = config === null || config === void 0 ? void 0 : config.readonlyLanguages) === null || _a === void 0 ? void 0 : _a.includes(item); });
+    // FormProvider에서 사용할 기본값 계산
+    var getDefaultValues = function () {
+        if (!config)
+            return {};
+        // 먼저 hiddenInput에 저장된 값이 있는지 확인
+        if (config.hiddenInputId) {
+            var hiddenInputId = "hiddenInput_".concat(config.hiddenInputId);
+            var hiddenInput = document.getElementById(hiddenInputId);
+            if (hiddenInput && hiddenInput.value) {
+                var existingValues = JSON.parse(hiddenInput.value);
+                // 빈 객체가 아닌 경우에만 사용
+                if (Object.keys(existingValues).length > 0) {
+                    return existingValues;
+                }
+            }
+        }
+        // hiddenInput에 값이 없으면 config.initialValues 사용
+        return config.initialValues || {};
+    };
+    var methods = (0, react_hook_form_1.useForm)({
+        defaultValues: getDefaultValues()
+    });
+    var container = (0, react_1.useState)(function () {
+        var modalRoot = document.createElement('div');
+        modalRoot.setAttribute('id', 'MultilingualModal');
+        return modalRoot;
+    })[0];
+    (0, react_1.useLayoutEffect)(function () {
+        if (!isOpen)
+            return;
+        var root = document.getElementById('root');
+        if (!root)
+            return;
+        root.appendChild(container);
+        return function () {
+            if (root.contains(container)) {
+                root.removeChild(container);
+            }
+        };
+    }, [isOpen, container]);
+    (0, react_1.useLayoutEffect)(function () {
+        if (isOpen && config) {
+            var newDefaultValues = getDefaultValues();
+            methods.reset(newDefaultValues);
+        }
+    }, [isOpen, config]);
+    var handleConfirm = function () {
+        var formValues = methods.getValues();
+        // hidden input에 다국어 값들을 JSON 형태로 저장
+        var newValue = JSON.stringify(formValues);
+        if (config === null || config === void 0 ? void 0 : config.hiddenInputId) {
+            var hiddenInputId = "hiddenInput_".concat(config.hiddenInputId);
+            var hiddenInput = document.getElementById(hiddenInputId);
+            if (hiddenInput) {
+                // BasicFormGroup의 state 업데이트
+                if (onHiddenInputUpdate) {
+                    onHiddenInputUpdate(newValue);
+                }
+                // input change 이벤트 발생시켜서 form validation 등이 동작하도록 함
+                var event_1 = new Event('change', { bubbles: true });
+                hiddenInput.dispatchEvent(event_1);
+            }
+        }
+        if (config === null || config === void 0 ? void 0 : config.onApply) {
+            config.onApply(formValues);
+        }
+        onClose();
+    };
+    var handleCancel = function () {
+        onClose();
+    };
+    if (!isOpen)
+        return null;
+    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(react_hook_form_1.FormProvider, __assign({}, methods, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, { onClick: handleCancel }), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "MultiLanguageModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", size: size }, { children: [(0, jsx_runtime_1.jsx)(S_Header, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: t('str_multilingual_settings'), colorTheme: "sysTextPrimary", styleTheme: "headingBold" }) }), (0, jsx_runtime_1.jsxs)(S_Body, { children: [(config === null || config === void 0 ? void 0 : config.originalText) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.BodyTextGroup, { titleText: t('str_original_text'), contentText: config.originalText }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f" }), (0, jsx_runtime_1.jsx)(components_2.Divider, {}), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f" })] })), (_c = config === null || config === void 0 ? void 0 : config.visibleLanguages) === null || _c === void 0 ? void 0 : _c.map(function (languageCode, index) {
+                                var _a, _b;
+                                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]), " (").concat(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  flex: 1;\n  max-height: 60vh;\n  overflow: auto;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+var S_Footer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_modal_border;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+var S_Left = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+var S_Btn2Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+var S_Right = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_LanguageField = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+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/desktop/panels/MultilingualModal/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 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "2.2.197",
+  "version": "2.2.198",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,7 +1,7 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.197]
+## [v2.2.198]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-*  [FIX] PriceTextField onExChange 추가
+*  [PDS-1323] 다국어 관련 컴포넌트 변경 및 추가 건
   

package/dist/src/common/types/form.d.ts

@@ -1,9 +0,0 @@
-export interface IFormValues {
-    [key: string]: string;
-}
-/**
- * 중첩된 객체 구조에서 점(.)으로 구분된 경로를 통해 에러 객체를 조회합니다
- */
-export declare const getErrorByName: (errors: {
-    [x: string]: any;
-}, name: string) => any;

package/dist/src/common/types/form.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getErrorByName = void 0;
-/**
- * 중첩된 객체 구조에서 점(.)으로 구분된 경로를 통해 에러 객체를 조회합니다
- */
-var getErrorByName = function (errors, name) {
-    return name.split('.').reduce(function (errors, property) { return errors && errors[property]; }, errors);
-};
-exports.getErrorByName = getErrorByName;