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

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

@@ -42,12 +42,12 @@ var defaultPaginationTextArray = [
     }
 ];
 function AdminListHeader(_a) {
-    var _b = _a.headerBarSize, headerBarSize = _b === void 0 ? 'regular' : _b, headerBarTitleText = _a.headerBarTitleText, 
+    var _b = _a.headerBarSize, headerBarSize = _b === void 0 ? 'regular' : _b, headerBarTitleText = _a.headerBarTitleText, tooltipText = _a.tooltipText, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     _c = _a.itemCountUnit, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     itemCountUnit = _c === void 0 ? 15 : _c, _d = _a.currentPage, currentPage = _d === void 0 ? 1 : _d, _e = _a.totalPage, totalPage = _e === void 0 ? 1 : _e, contentText = _a.contentText, filterBar = _a.filterBar, _f = _a.dropdownTextArray, dropdownTextArray = _f === void 0 ? defaultPaginationTextArray : _f, dropdownDefaultValue = _a.dropdownDefaultValue, onChangeCount = _a.onChangeCount, onClickNextButton = _a.onClickNextButton, onClickPrevButton = _a.onClickPrevButton;
-    return ((0, jsx_runtime_1.jsxs)(S_AdminListHeader, __assign({ "x-pds-name": "AdminListHeader", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(HeaderBar_1.default, { titleText: headerBarTitleText, size: headerBarSize, currentPage: currentPage, totalPage: totalPage, dropdownTextArray: dropdownTextArray, dropdownDefaultValue: dropdownDefaultValue, onChangeDropdown: onChangeCount, onClickIBtn1: onClickNextButton, onClickIBtn2: onClickPrevButton }), headerBarTitleText && !contentText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), headerBarTitleText && contentText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), contentText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }) }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })), filterBar && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_FilterBarWrapper, { children: filterBar }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(S_AdminListHeader, __assign({ "x-pds-name": "AdminListHeader", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(HeaderBar_1.default, { titleText: headerBarTitleText, tooltipText: tooltipText, size: headerBarSize, currentPage: currentPage, totalPage: totalPage, dropdownTextArray: dropdownTextArray, dropdownDefaultValue: dropdownDefaultValue, onChangeDropdown: onChangeCount, onClickIBtn1: onClickNextButton, onClickIBtn2: onClickPrevButton }), headerBarTitleText && !contentText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), headerBarTitleText && contentText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), contentText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }) }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })), filterBar && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_FilterBarWrapper, { children: filterBar }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] }))] })));
 }
 var S_AdminListHeader = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 var S_ContentTextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {

package/dist/src/desktop/components/AdminListHeader/HeaderBar.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-import type { AdminListDropdownValueOption } from '@common/types';
+import type { AdminListDropdownValueOption } from '../../../common/types';
 import type { TFunctionResult } from 'i18next';
 type Props = {
     titleText?: TFunctionResult;
+    tooltipText?: TFunctionResult;
     size?: 'regular' | 'small';
     currentPage?: number;
     totalPage?: number;
@@ -12,5 +13,5 @@ type Props = {
     onClickIBtn1?: () => void;
     onClickIBtn2?: () => void;
 };
-declare function HeaderBar({ titleText, size, currentPage, totalPage, dropdownTextArray, dropdownDefaultValue, onChangeDropdown, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
+declare function HeaderBar({ titleText, tooltipText, size, currentPage, totalPage, dropdownTextArray, dropdownDefaultValue, onChangeDropdown, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
 export default HeaderBar;

package/dist/src/desktop/components/AdminListHeader/HeaderBar.js

@@ -46,14 +46,14 @@ var Dropdown_1 = require("../Dropdown");
 var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
 function HeaderBar(_a) {
-    var titleText = _a.titleText, _b = _a.size, size = _b === void 0 ? 'regular' : _b, _c = _a.currentPage, currentPage = _c === void 0 ? 1 : _c, _d = _a.totalPage, totalPage = _d === void 0 ? 1 : _d, dropdownTextArray = _a.dropdownTextArray, dropdownDefaultValue = _a.dropdownDefaultValue, onChangeDropdown = _a.onChangeDropdown, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2;
+    var titleText = _a.titleText, tooltipText = _a.tooltipText, _b = _a.size, size = _b === void 0 ? 'regular' : _b, _c = _a.currentPage, currentPage = _c === void 0 ? 1 : _c, _d = _a.totalPage, totalPage = _d === void 0 ? 1 : _d, dropdownTextArray = _a.dropdownTextArray, dropdownDefaultValue = _a.dropdownDefaultValue, onChangeDropdown = _a.onChangeDropdown, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
     var handleDropdown = function (option) {
         if (onChangeDropdown) {
             onChangeDropdown(option);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(S_HeaderBar, __assign({ size: size }, { children: [(0, jsx_runtime_1.jsx)(S_HeaderTitle, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: size === 'regular' ? 'headingBold' : 'body1Bold' }) }), (0, jsx_runtime_1.jsxs)(S_HeaderControl, { children: [(0, jsx_runtime_1.jsxs)(S_ListCount, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: t('str_rows_per_page'), styleTheme: "caption1Regular" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, { customWidth: "88px", size: "small", valueArray: dropdownTextArray, onChange: handleDropdown, defaultValue: dropdownDefaultValue !== null && dropdownDefaultValue !== void 0 ? dropdownDefaultValue : dropdownTextArray[0] })] }), (0, jsx_runtime_1.jsxs)(S_Page, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: currentPage, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: " / ", styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: totalPage, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary" })] }), (0, jsx_runtime_1.jsxs)(S_IconButtonBox, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_arrow_left", iconFillType: "line", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: onClickIBtn2 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_arrow_right", iconFillType: "line", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: onClickIBtn1 })] })] })] })));
+    return ((0, jsx_runtime_1.jsxs)(S_HeaderBar, __assign({ size: size }, { children: [(0, jsx_runtime_1.jsx)(S_HeaderTitle, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, tooltipText: tooltipText, styleTheme: size === 'regular' ? 'headingBold' : 'body1Bold' }) }), (0, jsx_runtime_1.jsxs)(S_HeaderControl, { children: [(0, jsx_runtime_1.jsxs)(S_ListCount, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: t('str_rows_per_page'), styleTheme: "caption1Regular" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, { customWidth: "88px", size: "small", valueArray: dropdownTextArray, onChange: handleDropdown, defaultValue: dropdownDefaultValue !== null && dropdownDefaultValue !== void 0 ? dropdownDefaultValue : dropdownTextArray[0] })] }), (0, jsx_runtime_1.jsxs)(S_Page, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: currentPage, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: " / ", styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: totalPage, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary" })] }), (0, jsx_runtime_1.jsxs)(S_IconButtonBox, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_arrow_left", iconFillType: "line", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: onClickIBtn2 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_arrow_right", iconFillType: "line", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: onClickIBtn1 })] })] })] })));
 }
 var regular = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 40px;\n"], ["\n  height: 40px;\n"])));
 var small = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n"], ["\n  height: 40px;\n"])));

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

@@ -13,6 +13,7 @@ export type AdminListItemProps = {
     imageScaleType?: 'fill' | 'contain' | 'cover' | 'none';
     imageRadius?: 8 | 16 | 24;
     imageRatio?: '16_9' | '4_3' | '1_1';
+    columnCount?: number;
     column2Text?: PDSTextType;
     column3Text?: PDSTextType;
     column3TextWidth?: ColumnWidthType;

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

@@ -47,13 +47,13 @@ var hybrid_1 = require("../../../hybrid");
 var Checkbox_1 = require("../Checkbox");
 var TextLabel_1 = require("../TextLabel");
 var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.rowSize, rowSize = _b === void 0 ? 'medium' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, _d = _a.selectionMode, selectionMode = _d === void 0 ? 'multi' : _d, _e = _a.column2Type, column2Type = _e === void 0 ? 'image_text' : _e, imageSrc = _a.imageSrc, _f = _a.imageShapeType, imageShapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.imageScaleType, imageScaleType = _g === void 0 ? 'cover' : _g, _h = _a.imageRadius, imageRadius = _h === void 0 ? 8 : _h, _j = _a.imageRatio, imageRatio = _j === void 0 ? '16_9' : _j, column2Text = _a.column2Text, column3Text = _a.column3Text, _k = _a.column3TextWidth, column3TextWidth = _k === void 0 ? 'small' : _k, _l = _a.column3TextStyleTheme, column3TextStyleTheme = _l === void 0 ? 'normal' : _l, column4Text = _a.column4Text, _m = _a.column4TextWidth, column4TextWidth = _m === void 0 ? 'small' : _m, _o = _a.column4TextStyleTheme, column4TextStyleTheme = _o === void 0 ? 'normal' : _o, column5Text = _a.column5Text, _p = _a.column5TextWidth, column5TextWidth = _p === void 0 ? 'small' : _p, _q = _a.column5TextStyleTheme, column5TextStyleTheme = _q === void 0 ? 'normal' : _q, column6Text = _a.column6Text, _r = _a.column6TextWidth, column6TextWidth = _r === void 0 ? 'small' : _r, _s = _a.column6TextStyleTheme, column6TextStyleTheme = _s === void 0 ? 'normal' : _s, column7Text = _a.column7Text, _t = _a.column7TextWidth, column7TextWidth = _t === void 0 ? 'small' : _t, _u = _a.column7TextStyleTheme, column7TextStyleTheme = _u === void 0 ? 'normal' : _u, column8Text = _a.column8Text, _v = _a.column8TextWidth, column8TextWidth = _v === void 0 ? 'small' : _v, _w = _a.column8TextStyleTheme, column8TextStyleTheme = _w === void 0 ? 'normal' : _w, column9Text = _a.column9Text, _x = _a.column9TextWidth, column9TextWidth = _x === void 0 ? 'small' : _x, _y = _a.column9TextStyleTheme, column9TextStyleTheme = _y === void 0 ? 'normal' : _y, column10Text = _a.column10Text, _z = _a.column10TextWidth, column10TextWidth = _z === void 0 ? 'small' : _z, _0 = _a.column10TextStyleTheme, column10TextStyleTheme = _0 === void 0 ? 'normal' : _0, _1 = _a.quickActionBtnMode, quickActionBtnMode = _1 === void 0 ? 'btn_amount2' : _1, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _2 = _a.quickActionBtnType, quickActionBtnType = _2 === void 0 ? 'fix' : _2, _3 = _a.quickActionBtn1State, quickActionBtn1State = _3 === void 0 ? 'normal' : _3, _4 = _a.quickActionBtn2State, quickActionBtn2State = _4 === void 0 ? 'normal' : _4, _5 = _a.quickActionBtn3State, quickActionBtn3State = _5 === void 0 ? 'normal' : _5, _6 = _a.selectedState, selectedState = _6 === void 0 ? 'basic' : _6, id = _a.id, _7 = _a.flexibleHideInfoMode, flexibleHideInfoMode = _7 === void 0 ? 'use' : _7, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onClickItem = _a.onClickItem;
+    var _b = _a.rowSize, rowSize = _b === void 0 ? 'medium' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, _d = _a.selectionMode, selectionMode = _d === void 0 ? 'multi' : _d, _e = _a.column2Type, column2Type = _e === void 0 ? 'image_text' : _e, imageSrc = _a.imageSrc, _f = _a.imageShapeType, imageShapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.imageScaleType, imageScaleType = _g === void 0 ? 'cover' : _g, _h = _a.imageRadius, imageRadius = _h === void 0 ? 8 : _h, _j = _a.imageRatio, imageRatio = _j === void 0 ? '16_9' : _j, _k = _a.columnCount, columnCount = _k === void 0 ? 2 : _k, column2Text = _a.column2Text, column3Text = _a.column3Text, _l = _a.column3TextWidth, column3TextWidth = _l === void 0 ? 'small' : _l, _m = _a.column3TextStyleTheme, column3TextStyleTheme = _m === void 0 ? 'normal' : _m, column4Text = _a.column4Text, _o = _a.column4TextWidth, column4TextWidth = _o === void 0 ? 'small' : _o, _p = _a.column4TextStyleTheme, column4TextStyleTheme = _p === void 0 ? 'normal' : _p, column5Text = _a.column5Text, _q = _a.column5TextWidth, column5TextWidth = _q === void 0 ? 'small' : _q, _r = _a.column5TextStyleTheme, column5TextStyleTheme = _r === void 0 ? 'normal' : _r, column6Text = _a.column6Text, _s = _a.column6TextWidth, column6TextWidth = _s === void 0 ? 'small' : _s, _t = _a.column6TextStyleTheme, column6TextStyleTheme = _t === void 0 ? 'normal' : _t, column7Text = _a.column7Text, _u = _a.column7TextWidth, column7TextWidth = _u === void 0 ? 'small' : _u, _v = _a.column7TextStyleTheme, column7TextStyleTheme = _v === void 0 ? 'normal' : _v, column8Text = _a.column8Text, _w = _a.column8TextWidth, column8TextWidth = _w === void 0 ? 'small' : _w, _x = _a.column8TextStyleTheme, column8TextStyleTheme = _x === void 0 ? 'normal' : _x, column9Text = _a.column9Text, _y = _a.column9TextWidth, column9TextWidth = _y === void 0 ? 'small' : _y, _z = _a.column9TextStyleTheme, column9TextStyleTheme = _z === void 0 ? 'normal' : _z, column10Text = _a.column10Text, _0 = _a.column10TextWidth, column10TextWidth = _0 === void 0 ? 'small' : _0, _1 = _a.column10TextStyleTheme, column10TextStyleTheme = _1 === void 0 ? 'normal' : _1, _2 = _a.quickActionBtnMode, quickActionBtnMode = _2 === void 0 ? 'btn_amount2' : _2, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _3 = _a.quickActionBtnType, quickActionBtnType = _3 === void 0 ? 'fix' : _3, _4 = _a.quickActionBtn1State, quickActionBtn1State = _4 === void 0 ? 'normal' : _4, _5 = _a.quickActionBtn2State, quickActionBtn2State = _5 === void 0 ? 'normal' : _5, _6 = _a.quickActionBtn3State, quickActionBtn3State = _6 === void 0 ? 'normal' : _6, _7 = _a.selectedState, selectedState = _7 === void 0 ? 'basic' : _7, id = _a.id, _8 = _a.flexibleHideInfoMode, flexibleHideInfoMode = _8 === void 0 ? 'use' : _8, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onClickItem = _a.onClickItem;
     var methods = (0, react_hook_form_1.useFormContext)();
     var isSelected = (0, react_hook_form_1.useWatch)({
         control: methods.control,
         name: id.toString()
     });
-    var _8 = (0, react_1.useState)(false), hasScroll = _8[0], setHasScroll = _8[1];
+    var _9 = (0, react_1.useState)(false), hasScroll = _9[0], setHasScroll = _9[1];
     var contentRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         if (!contentRef || !contentRef.current)
@@ -161,7 +161,13 @@ var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
             }
         }
     }
-    return ((0, jsx_runtime_1.jsxs)(S_AdminListItem, __assign({ "x-pds-name": "AdminListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", disabled: state === 'disabled', ref: ref, rowSize: rowSize, onClick: handleClick, isSelected: isSelected, quickActionBtnType: quickActionBtnType, flexibleHideInfoMode: flexibleHideInfoMode }, { children: [(0, jsx_runtime_1.jsx)(S_SelectionColumn, __assign({ rowSize: rowSize }, { children: selectionMode === 'multi' && ((0, jsx_runtime_1.jsx)(S_Selection, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { name: id.toString(), state: selectedState === 'maintain' || state === 'disabled' ? 'disabled' : 'normal' }) })) })), (0, jsx_runtime_1.jsxs)(S_ImageColumn, __assign({ rowSize: rowSize }, { children: [column2Type === 'image_text' && (rowSize === 'high' || rowSize === 'medium') && ((0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ rowSize: rowSize }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: imageShapeType, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType, radius: imageShapeType === 'round' ? imageRadius : undefined, backgroundFillMode: "use" }) }))), (rowSize === 'low' || rowSize === 'medium') && ((0, jsx_runtime_1.jsx)(S_RowTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 2 }) })), rowSize === 'high' && ((0, jsx_runtime_1.jsx)(S_HighTextWrapper, __assign({ ref: contentRef, hasScroll: hasScroll }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'sysTextPrimary' }) })))] })), column3Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column3TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column3Text, styleTheme: column3TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column3TextStyleTheme, state) }) }))), column4Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column4TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column4Text, styleTheme: column4TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column4TextStyleTheme, state) }) }))), column5Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column5TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column5Text, styleTheme: column5TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column5TextStyleTheme, state) }) }))), column6Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column6TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column6Text, styleTheme: column6TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column6TextStyleTheme, state) }) }))), column7Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column7TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column7Text, styleTheme: column7TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column7TextStyleTheme, state) }) }))), column8Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column8TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column8Text, styleTheme: column8TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column8TextStyleTheme, state) }) }))), column9Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column9TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column9Text, styleTheme: column9TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column9TextStyleTheme, state) }) }))), column10Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column10TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column10Text, styleTheme: column10TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column10TextStyleTheme, state) }) }))), quickActionBtnMode !== 'none' && ((0, jsx_runtime_1.jsx)(S_QuickActionButtonBox, __assign({ quickActionBtnType: quickActionBtnType }, { children: quickActionButtons() }))), quickActionBtnType === 'hover' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_f", spacingType: "width" })] })));
+    var renderColumn = function (columnIndex, text, width, styleTheme) {
+        if (columnIndex > columnCount) {
+            return null;
+        }
+        return ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: width, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text || '-', styleTheme: styleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(styleTheme, state) }) })));
+    };
+    return ((0, jsx_runtime_1.jsxs)(S_AdminListItem, __assign({ "x-pds-name": "AdminListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", disabled: state === 'disabled', ref: ref, rowSize: rowSize, onClick: handleClick, isSelected: isSelected, quickActionBtnType: quickActionBtnType, flexibleHideInfoMode: flexibleHideInfoMode }, { children: [(0, jsx_runtime_1.jsx)(S_SelectionColumn, __assign({ rowSize: rowSize }, { children: selectionMode === 'multi' && ((0, jsx_runtime_1.jsx)(S_Selection, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { name: id.toString(), state: selectedState === 'maintain' || state === 'disabled' ? 'disabled' : 'normal' }) })) })), (0, jsx_runtime_1.jsxs)(S_ImageColumn, __assign({ rowSize: rowSize }, { children: [column2Type === 'image_text' && (rowSize === 'high' || rowSize === 'medium') && ((0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ rowSize: rowSize }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: imageShapeType, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType, radius: imageShapeType === 'round' ? imageRadius : undefined, backgroundFillMode: "use" }) }))), (rowSize === 'low' || rowSize === 'medium') && ((0, jsx_runtime_1.jsx)(S_RowTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 2 }) })), rowSize === 'high' && ((0, jsx_runtime_1.jsx)(S_HighTextWrapper, __assign({ ref: contentRef, hasScroll: hasScroll }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'sysTextPrimary' }) })))] })), renderColumn(3, column3Text, column3TextWidth, column3TextStyleTheme), renderColumn(4, column4Text, column4TextWidth, column4TextStyleTheme), renderColumn(5, column5Text, column5TextWidth, column5TextStyleTheme), renderColumn(6, column6Text, column6TextWidth, column6TextStyleTheme), renderColumn(7, column7Text, column7TextWidth, column7TextStyleTheme), renderColumn(8, column8Text, column8TextWidth, column8TextStyleTheme), renderColumn(9, column9Text, column9TextWidth, column9TextStyleTheme), renderColumn(10, column10Text, column10TextWidth, column10TextStyleTheme), quickActionBtnMode !== 'none' && ((0, jsx_runtime_1.jsx)(S_QuickActionButtonBox, __assign({ quickActionBtnType: quickActionBtnType }, { children: quickActionButtons() }))), quickActionBtnType === 'hover' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_f", spacingType: "width" })] })));
 });
 var highRow = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 200px;\n  max-height: 200px;\n"], ["\n  height: 200px;\n  max-height: 200px;\n"])));
 var mediumRow = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100px;\n  max-height: 100px;\n"], ["\n  height: 100px;\n  max-height: 100px;\n"])));

package/dist/src/desktop/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/desktop/components/BasicButtonGroup/BasicButtonGroup.js

@@ -41,9 +41,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_dom_1 = require("react-dom");
-var systemUI_1 = require("@common/styles/systemUI");
-var SystemUIPositionGenerator_1 = require("@common/utils/SystemUIPositionGenerator");
-var components_1 = require("@hybrid/components");
+var systemUI_1 = require("../../../common/styles/systemUI");
+var SystemUIPositionGenerator_1 = require("../../../common/utils/SystemUIPositionGenerator");
+var components_1 = require("../../../hybrid/components");
 var styled_components_1 = __importStar(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 var constants_1 = require("./constants");
@@ -105,7 +105,7 @@ function BasicButtonGroup(_a) {
             var isHoveredButton = index === hoveredButtonIndex;
             return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, onPointerEnter: function () { return setHoveredButtonIndex(index); }, onPointerLeave: function () { return setHoveredButtonIndex(null); }, disabled: state === 'disabled' || buttonState === 'disabled', backgroundColorTheme: backgroundColorTheme }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }), tooltipText &&
                         isHoveredButton &&
-                        (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, tooltipPositionCss: tooltipPositionCss, size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }) })), document.getElementById('tooltip-root'))] }), iconName + index));
+                        (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, tooltipPositionCss: tooltipPositionCss, size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }) })), document.body)] }), iconName + index));
         }) })));
 }
 var S_BasicButtonGroup = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {

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/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/desktop/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/desktop/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;

package/dist/src/desktop/components/BasicListItem/LeftBox/Checkbox.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_hook_form_1 = require("react-hook-form");
-var components_1 = require("@hybrid/components");
+var components_1 = require("../../../../hybrid/components");
 var Checkbox_1 = require("../../Checkbox");
 var Checkbox = function (_a) {
     var id = _a.id;

package/dist/src/desktop/components/BasicListItem/LeftBox/Icon.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 Icon = function (_a) {
     var name = _a.name, fill = _a.fill;

package/dist/src/desktop/components/BasicListItem/LeftBox/Image.js

@@ -1,7 +1,7 @@
 "use strict";
 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 Image = function (_a) {
     var src = _a.src, shape = _a.shape;
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.ImageView, { width: 40, height: 40, src: src, scaleType: "cover", shapeType: shape }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c", spacingType: "width" })] }));

package/dist/src/desktop/components/BasicListItem/LeftBox/Radio.js

@@ -1,7 +1,7 @@
 "use strict";
 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 Radio_1 = require("../../Radio");
 var Radio = function (_a) {
     var id = _a.id, value = _a.value, onChange = _a.onChange;

package/dist/src/desktop/components/BasicListItem/RightBox/Description.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { PDSTextType } from '@common/types';
+import type { PDSTextType } from '../../../../common/types';
 export type DescriptionPropTypes = {
     text: PDSTextType;
     icon?: React.ReactNode;

package/dist/src/desktop/components/BasicListItem/RightBox/Description.js

@@ -1,7 +1,7 @@
 "use strict";
 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 TextLabel_1 = require("../../TextLabel");
 var Description = function (_a) {
     var text = _a.text, icon = _a.icon;

package/dist/src/desktop/components/BasicListItem/RightBox/Switch.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 Switch = function (_a) {
     var name = _a.name, state = _a.state, status = _a.status, onClick = _a.onClick;

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

@@ -0,0 +1,68 @@
+/// <reference types="react" />
+import type { PDSIconType, PDSTextType, UiColors } from '../../../common/types';
+type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
+export type BoxItemProps = {
+    selectionMode?: 'none' | 'use';
+    state?: 'normal' | 'disabled';
+    checkboxMode?: 'none' | 'use';
+    checkboxState?: 'checked' | 'unchecked' | 'indeterminate';
+    indicatorMode?: 'none' | 'use';
+    selectState?: 'unselected' | 'selected';
+    titleText?: PDSTextType;
+    titleFontSize?: 'subTitleBold' | 'leadParaBold' | 'body2Bold' | 'headingBold';
+    titleTextLineLimit?: number;
+    titleTextColorKey?: UiColors;
+    titleTextWordBreak?: 'normal' | 'break_all' | 'keep_all' | 'break_word';
+    descText?: PDSTextType;
+    descTextColorKey?: UiColors;
+    descTextWordBreak?: 'normal' | 'break_all' | 'keep_all' | 'break_word';
+    descLineLimit?: number;
+    imageMode?: 'use' | 'none';
+    imageShapeType?: 'round' | 'circular' | 'rectangle';
+    imageSrc?: string;
+    imageWidth?: number | 'responsive';
+    imageRatio?: '16_9' | '4_3' | '1_1';
+    imageScaleType?: 'none' | 'cover' | 'contain' | 'fill';
+    chipMode?: 'use' | 'none';
+    chipText?: PDSTextType;
+    chipOverrideTextColorKey?: UiColors;
+    chipOverrideBackgroundColorKey?: UiColors;
+    displayType?: 'none' | 'ibtn_amount1' | 'ibtn_amount2' | 'ibtn_amount3';
+    iBtn1IconName?: PDSIconType;
+    iBtn1IconFillType?: 'fill' | 'line';
+    iBtn1IconColorKey?: UiColors;
+    iBtn2IconName?: PDSIconType;
+    iBtn2IconFillType?: 'fill' | 'line';
+    iBtn2IconColorKey?: UiColors;
+    iBtn3IconName?: PDSIconType;
+    iBtn3IconFillType?: 'fill' | 'line';
+    iBtn3IconColorKey?: UiColors;
+    overrideBorderColorKey?: UiColors;
+    paddingTop?: PaddingSpacingType;
+    paddingRight?: PaddingSpacingType;
+    paddingBottom?: PaddingSpacingType;
+    paddingLeft?: PaddingSpacingType;
+    id: number | string;
+    onClick?: (id: number | string) => void;
+    onClickIBtn1?: (id: number | string) => void;
+    onClickIBtn2?: (id: number | string) => void;
+    onClickIBtn3?: (id: number | string) => void;
+};
+declare const paddingSpacing: {
+    readonly spacing_a: "spacingA";
+    readonly spacing_b: "spacingB";
+    readonly spacing_c: "spacingC";
+    readonly spacing_d: "spacingD";
+    readonly spacing_e: "spacingE";
+    readonly spacing_f: "spacingF";
+    readonly spacing_g: "spacingG";
+    readonly spacing_h: "spacingH";
+    readonly spacing_i: "spacingI";
+    readonly spacing_j: "spacingJ";
+    readonly spacing_k: "spacingK";
+    readonly spacing_l: "spacingL";
+    readonly spacing_m: "spacingM";
+    readonly spacing_n: "spacingN";
+};
+declare function BoxItem({ selectionMode, checkboxMode, checkboxState, indicatorMode, state, selectState, titleText, titleFontSize, titleTextLineLimit, titleTextColorKey, titleTextWordBreak, descText, descTextColorKey, descTextWordBreak, descLineLimit, imageMode, imageShapeType, imageSrc, imageWidth, imageRatio, imageScaleType, chipMode, chipText, chipOverrideTextColorKey, chipOverrideBackgroundColorKey, displayType, iBtn1IconName, iBtn1IconFillType, iBtn1IconColorKey, iBtn2IconName, iBtn2IconFillType, iBtn2IconColorKey, iBtn3IconName, iBtn3IconFillType, iBtn3IconColorKey, overrideBorderColorKey, paddingTop, paddingRight, paddingBottom, paddingLeft, id, onClick, onClickIBtn1, onClickIBtn2, onClickIBtn3 }: BoxItemProps): JSX.Element;
+export default BoxItem;