pds-dev-kit-web-test 0.2.33 → 0.2.34

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

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import type { PDSTextType } from '../../../common';
+export type DesktopBasicModalWithTabInfoType = {
+    sideTabTitleText: PDSTextType;
+    bodyTitleText?: PDSTextType;
+    body: React.ReactNode;
+};
+type DesktopBasicModalWithTabProps = {
+    size?: 'large' | 'medium';
+    modalTitleText: PDSTextType;
+    infoArray: DesktopBasicModalWithTabInfoType[];
+    btnMode?: 'btn_amount1' | 'btn_amount2' | 'btn_amount3';
+    btn1Text: PDSTextType;
+    btn2Text?: PDSTextType;
+    btn3Text?: PDSTextType;
+    btn1State?: 'normal' | 'disabled';
+    btn2State?: 'normal' | 'disabled';
+    btn3State?: 'normal' | 'disabled';
+    btn1Type?: 'button' | 'submit';
+    btn2Type?: 'button' | 'submit';
+    btn3Type?: 'button' | 'submit';
+    onClickBtn1?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onClickBtn2?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onClickBtn3?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+declare function DesktopBasicModalWithTab({ size, modalTitleText, infoArray, btnMode, btn1Text, btn2Text, btn3Text, btn1State, btn2State, btn3State, btn1Type, btn2Type, btn3Type, onClickBtn1, onClickBtn2, onClickBtn3 }: DesktopBasicModalWithTabProps): import("react").ReactPortal;
+export default DesktopBasicModalWithTab;

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

@@ -0,0 +1,146 @@
+"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 styled_components_1 = __importDefault(require("styled-components"));
+var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
+var hybrid_1 = require("../../../hybrid");
+var components_1 = require("../../components");
+var Components_1 = require("./Components");
+function DesktopBasicModalWithTab(_a) {
+    var _b = _a.size, size = _b === void 0 ? 'large' : _b, modalTitleText = _a.modalTitleText, infoArray = _a.infoArray, _c = _a.btnMode, btnMode = _c === void 0 ? 'btn_amount2' : _c, btn1Text = _a.btn1Text, btn2Text = _a.btn2Text, btn3Text = _a.btn3Text, _d = _a.btn1State, btn1State = _d === void 0 ? 'normal' : _d, _e = _a.btn2State, btn2State = _e === void 0 ? 'normal' : _e, _f = _a.btn3State, btn3State = _f === void 0 ? 'normal' : _f, _g = _a.btn1Type, btn1Type = _g === void 0 ? 'button' : _g, _h = _a.btn2Type, btn2Type = _h === void 0 ? 'button' : _h, _j = _a.btn3Type, btn3Type = _j === void 0 ? 'button' : _j, onClickBtn1 = _a.onClickBtn1, onClickBtn2 = _a.onClickBtn2, onClickBtn3 = _a.onClickBtn3;
+    var container = (0, react_1.useState)(function () {
+        var modalRoot = document.createElement('div');
+        modalRoot.setAttribute('id', 'DesktopBasicModalWithTab');
+        return modalRoot;
+    })[0];
+    (0, react_1.useLayoutEffect)(function () {
+        var root = document.getElementById('root');
+        if (!root) {
+            return;
+        }
+        root.appendChild(container);
+        return function () {
+            root.removeChild(container);
+        };
+    }, []);
+    var _k = (0, react_1.useState)("".concat(infoArray[0].sideTabTitleText, "0")), selectedItem = _k[0], setSelectedItem = _k[1];
+    var sideTabTitleArray = infoArray.map(function (data, index) {
+        return {
+            title: data.sideTabTitleText,
+            isActive: selectedItem === "".concat(data.sideTabTitleText).concat(index),
+            onClick: function () { return setSelectedItem("".concat(data.sideTabTitleText).concat(index)); }
+        };
+    });
+    var btn1Mode = ['btn_amount1', 'btn_amount2', 'btn_amount3'];
+    var btn2Mode = ['btn_amount2', 'btn_amount3'];
+    var btn3Mode = ['btn_amount3'];
+    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "DesktopBasicModalWithTab", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", size: size }, { children: [(0, jsx_runtime_1.jsxs)(S_UpsidePanel, { children: [(0, jsx_runtime_1.jsxs)(S_LeftPanel, { children: [(0, jsx_runtime_1.jsx)(S_Header, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: modalTitleText, lineLimit: 2, ellipsisMode: "use", styleTheme: "headingBold" }) }), (0, jsx_runtime_1.jsxs)(S_SideTabWrapper, { children: [(0, jsx_runtime_1.jsx)(Components_1.SideTab, { itemArray: sideTabTitleArray }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_i" })] })] }), infoArray
+                                .filter(function (data, index) { return selectedItem === "".concat(data.sideTabTitleText).concat(index); })
+                                .map(function (data, index) { return ((0, jsx_runtime_1.jsx)(S_RightContainer, { children: (0, jsx_runtime_1.jsxs)(S_RightArea, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: data.bodyTitleText ? data.bodyTitleText : data.sideTabTitleText, styleTheme: "headingBold" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_e" }), (0, jsx_runtime_1.jsx)(S_Body, { children: data.body && data.body })] }) }, "".concat(data.sideTabTitleText).concat(index))); })] }), (0, jsx_runtime_1.jsxs)(S_Footer, { children: [(0, jsx_runtime_1.jsx)(S_Left, { children: btn3Mode.includes(btnMode) && btn3Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: btn3Text, state: btn3State, type: btn3Type, size: "medium", onClick: onClickBtn3 })) }), (0, jsx_runtime_1.jsxs)(S_Right, { children: [(0, jsx_runtime_1.jsx)(S_Btn2Wrapper, { children: btn2Mode.includes(btnMode) && btn2Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: btn2Text, state: btn2State, type: btn2Type, size: "medium", onClick: onClickBtn2 })) }), btn1Mode.includes(btnMode) && btn1Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { text: btn1Text, state: btn1State, type: btn1Type, size: "medium", onClick: onClickBtn1 }))] })] })] }))] }), 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  height: 80vh;\n  left: 50%;\n  max-height: 720px;\n  min-height: 560px;\n  overflow: hidden;\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 80vh;\n  left: 50%;\n  max-height: 720px;\n  min-height: 560px;\n  overflow: hidden;\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_modal_base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_modal_border;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.boxShadow.elevation5;
+}, function (_a) {
+    var size = _a.size;
+    return size &&
+        {
+            large: '960px',
+            medium: '688px'
+        }[size];
+}, animationStyle_1.modalOnAni);
+var S_UpsidePanel = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n"], ["\n  display: flex;\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_LeftPanel = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  min-width: 240px;\n  width: 240px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  min-width: 240px;\n  width: 240px;\n"])));
+var S_Header = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_modalwithtab_leftside_base;
+}, 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.spacingE;
+});
+var S_SideTabWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  flex: 1;\n  overflow-y: auto;\n"], ["\n  background-color: ", ";\n  flex: 1;\n  overflow-y: auto;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_modalwithtab_leftside_base;
+});
+var S_RightContainer = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: overlay;\n\n  ", "\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: overlay;\n\n  ", "\n"])), scrollbarStyle_1.scrollbarStyle);
+var S_RightArea = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingI;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var S_Body = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  overflow-x: hidden;\n"], ["\n  overflow-x: hidden;\n"])));
+var S_Footer = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __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_11 || (templateObject_11 = __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_12 || (templateObject_12 = __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_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+exports.default = DesktopBasicModalWithTab;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

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

@@ -0,0 +1,2 @@
+export type { DesktopBasicModalWithTabInfoType } from './DesktopBasicModalWithTab';
+export { default as DesktopBasicModalWithTab } from './DesktopBasicModalWithTab';

package/dist/src/desktop/panels/DesktopBasicModalWithTab/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.DesktopBasicModalWithTab = void 0;
+var DesktopBasicModalWithTab_1 = require("./DesktopBasicModalWithTab");
+Object.defineProperty(exports, "DesktopBasicModalWithTab", { enumerable: true, get: function () { return __importDefault(DesktopBasicModalWithTab_1).default; } });

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

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

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

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionSheet = exports.DesktopTutorialModal = exports.DesktopHeadlessModal = exports.DesktopBasicModal = exports.ContentSheet = exports.AnnotationSheet = void 0;
+exports.SectionSheet = 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");
 Object.defineProperty(exports, "ContentSheet", { enumerable: true, get: function () { return ContentSheet_1.ContentSheet; } });
 var DesktopBasicModal_1 = require("./DesktopBasicModal");
 Object.defineProperty(exports, "DesktopBasicModal", { enumerable: true, get: function () { return DesktopBasicModal_1.DesktopBasicModal; } });
+var DesktopBasicModalWithTab_1 = require("./DesktopBasicModalWithTab");
+Object.defineProperty(exports, "DesktopBasicModalWithTab", { enumerable: true, get: function () { return DesktopBasicModalWithTab_1.DesktopBasicModalWithTab; } });
 var DesktopHeadlessModal_1 = require("./DesktopHeadlessModal");
 Object.defineProperty(exports, "DesktopHeadlessModal", { enumerable: true, get: function () { return DesktopHeadlessModal_1.DesktopHeadlessModal; } });
 var DesktopTutorialModal_1 = require("./DesktopTutorialModal");

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

@@ -64,7 +64,7 @@ function BasicListItem(_a) {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsx)(S_BasicListItem, __assign({ "x-pds-name": "BasicListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isSelected: isSelected, onClick: handleClick, spacingMode: spacingMode }, { children: (0, jsx_runtime_1.jsxs)(S_BasicListItemBox, __assign({ imageIconMode: imageIconMode, captionText: captionText, spacingMode: spacingMode, dividerType: dividerType }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' }, { children: [selectionMode === 'check' && checkboxId && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { id: checkboxId }), selectionMode === 'radio' && radioValue && radioId && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Radio, { id: radioId, value: radioValue, onChange: onClickRadio })), badgeMode === 'left' && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Badge, { status: badgeStatus }), imageIconMode === 'image' && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { src: imageSrc, shape: imageShapeType }), imageIconMode === 'icon' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Icon, { name: iconName, fill: iconFillType === 'fill' })), (0, jsx_runtime_1.jsxs)(Contents_1.default, { children: [(0, jsx_runtime_1.jsx)(Contents_1.default.Title, { text: titleText, colorTheme: titleTextColorTheme === 'none' ? 'sysTextPrimary' : 'sysTextError', font: titleFontWeight === 'bold' ? 'body2Bold' : 'body2Regular' }), (0, jsx_runtime_1.jsx)(Contents_1.default.Caption, { text: captionText })] })] })), (0, jsx_runtime_1.jsxs)(RightBox_1.RightBox, __assign({ hasFixedHeight: displayType === 'text' }, { children: [(displayType === 'text' || displayType === 'ibtn_text') && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.Description, { text: descText, icon: displayType === 'ibtn_text' ? ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click })) : undefined })), displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn2IconName, fill: iBtn2IconFillType === 'fill', onClick: onClickIBtn2 }), (0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click })] })), displayType === 'mbtn' && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.MainButton, { text: mBtnText, fill: mBtnFillType === 'fill', onClick: onClickMBtn })), displayType === 'switch' && switchName && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.Switch, { name: switchName, state: switchState, status: switchStatus, onClick: onClickSwitch }))] }))] })) })));
+    return ((0, jsx_runtime_1.jsx)(S_BasicListItem, __assign({ "x-pds-name": "BasicListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isSelected: isSelected, onClick: handleClick, spacingMode: spacingMode }, { children: (0, jsx_runtime_1.jsxs)(S_BasicListItemBox, __assign({ imageIconMode: imageIconMode, captionText: captionText, spacingMode: spacingMode, dividerType: dividerType }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' }, { children: [selectionMode === 'check' && checkboxId && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { id: checkboxId }), selectionMode === 'radio' && radioValue && radioId && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Radio, { id: radioId, value: radioValue, onChange: onClickRadio })), badgeMode === 'left' && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Badge, { status: badgeStatus }), imageIconMode === 'image' && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { src: imageSrc, shape: imageShapeType }), imageIconMode === 'icon' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Icon, { name: iconName, fill: iconFillType === 'fill' })), (0, jsx_runtime_1.jsxs)(Contents_1.default, { children: [(0, jsx_runtime_1.jsx)(Contents_1.default.Title, { text: titleText, colorTheme: titleTextColorTheme === 'none' ? 'sysTextPrimary' : 'sysTextError', font: titleFontWeight === 'bold' ? 'body2Bold' : 'body2Regular' }), captionText && (0, jsx_runtime_1.jsx)(Contents_1.default.Caption, { text: captionText })] })] })), (0, jsx_runtime_1.jsxs)(RightBox_1.RightBox, __assign({ hasFixedHeight: displayType === 'text' }, { children: [(displayType === 'text' || displayType === 'ibtn_text') && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.Description, { text: descText, icon: displayType === 'ibtn_text' ? ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click })) : undefined })), displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn2IconName, fill: iBtn2IconFillType === 'fill', onClick: onClickIBtn2 }), (0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click })] })), displayType === 'mbtn' && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.MainButton, { text: mBtnText, fill: mBtnFillType === 'fill', onClick: onClickMBtn })), displayType === 'switch' && switchName && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.Switch, { name: switchName, state: switchState, status: switchStatus, onClick: onClickSwitch }))] }))] })) })));
 }
 var S_BasicListItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: ", ";\n"])), function (_a) {
     var theme = _a.theme, isSelected = _a.isSelected;

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

@@ -42,7 +42,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 function TextLabel(_a) {
-    var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.singleLineMode, singleLineMode = _e === void 0 ? 'none' : _e, _f = _a.ellipsisMode, ellipsisMode = _f === void 0 ? 'none' : _f, lineLimit = _a.lineLimit, _g = _a.userSelectMode, userSelectMode = _g === void 0 ? 'none' : _g, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _h = _a.textDecorationType, textDecorationType = _h === void 0 ? 'none' : _h, _j = _a.requirementMode, requirementMode = _j === void 0 ? 'none' : _j, _k = _a.bulletPointMode, bulletPointMode = _k === void 0 ? 'none' : _k, _l = _a.wordBreak, wordBreak = _l === void 0 ? 'keep_all' : _l, letterSpacing = _a.letterSpacing;
+    var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.singleLineMode, singleLineMode = _e === void 0 ? 'none' : _e, _f = _a.ellipsisMode, ellipsisMode = _f === void 0 ? 'none' : _f, lineLimit = _a.lineLimit, _g = _a.userSelectMode, userSelectMode = _g === void 0 ? 'none' : _g, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _h = _a.textDecorationType, textDecorationType = _h === void 0 ? 'none' : _h, _j = _a.requirementMode, requirementMode = _j === void 0 ? 'none' : _j, _k = _a.bulletPointMode, bulletPointMode = _k === void 0 ? 'none' : _k, wordBreak = _a.wordBreak, letterSpacing = _a.letterSpacing;
     return ((0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "mobile", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak, "$letterSpacing": letterSpacing }, { children: [text, requirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (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" }) }) })))] })));
 }
 var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
@@ -310,17 +310,22 @@ var ellipsisStyle = (0, styled_components_1.css)(templateObject_35 || (templateO
 });
 var userSelectModeStyle = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  -khtml-user-select: none;\n  -moz-user-select: -moz-none;\n  -ms-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"], ["\n  -khtml-user-select: none;\n  -moz-user-select: -moz-none;\n  -ms-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"])));
 var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n  padding-left: 16px;\n  ::before {\n    content: '\u2022';\n    left: 0;\n    position: absolute;\n    width: 16px;\n  }\n"], ["\n  padding-left: 16px;\n  ::before {\n    content: '\u2022';\n    left: 0;\n    position: absolute;\n    width: 16px;\n  }\n"])));
-var S_TextLabel = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TextLabel = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  text-align: ", ";\n  white-space: pre-wrap;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  text-align: ", ";\n  white-space: pre-wrap;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
+}, function (_a) {
+    var theme = _a.theme;
+    return ['ko', 'ko-KR', 'ko-kr'].includes(theme.language)
+        ? 'word-break: keep-all'
+        : 'word-break: normal';
 }, function (_a) {
     var wordBreak = _a.wordBreak;
     return wordBreak &&
         {
-            normal: 'normal',
-            break_all: 'break-all',
-            keep_all: 'keep-all',
-            break_word: 'break-word'
+            normal: 'word-break: normal',
+            break_all: 'word-break: break-all',
+            keep_all: 'word-break: keep-all',
+            break_word: 'word-break: break-word'
         }[wordBreak];
 }, function (_a) {
     var $letterSpacing = _a.$letterSpacing;

package/dist/src/sub/DynamicLayout/mock_customSection.js

@@ -75,6 +75,9 @@ exports.customSectionMock1 = {
     template: undefined,
     updatedAt: '2023-01-06T09:05:45',
     jsonProperties: {
+        CB_CONTENT_PROP_SECTION: {
+            CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE: true
+        },
         CB_CONTENT_PROP_VISIBILITY: {
             CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,
             CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB: true