pds-dev-kit-web-test 0.1.4 → 0.1.6

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

@@ -1,6 +1,6 @@
-import { TFunctionResult } from 'i18next';
-import React from 'react';
-import { PDSTextType } from '../../../common';
+/// <reference types="react" />
+import type { PDSTextType } from '../../../common';
+import type { TFunctionResult } from 'i18next';
 declare type ColumnWidthType = 'small' | 'medium' | 'large';
 declare type ColumnTextType = 'normal' | 'active' | 'active2' | 'inactive' | 'report' | 'report2';
 export declare type AdminListItemProps = {
@@ -53,5 +53,5 @@ export declare type AdminListItemProps = {
     onClickQuickActionBtn3?: (id: number) => void;
     onClickItem?: (id: number) => void;
 };
-declare const AdminListItem: React.ForwardRefExoticComponent<AdminListItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const AdminListItem: import("react").ForwardRefExoticComponent<AdminListItemProps & import("react").RefAttributes<HTMLDivElement>>;
 export default AdminListItem;

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

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -23,7 +34,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
@@ -93,20 +105,14 @@ var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
     };
     var quickActionButtons = function () {
         if (quickActionBtnMode !== 'none' && quickActionBtn1Text) {
-            return (react_1.default.createElement(react_1.default.Fragment, null,
-                quickActionBtnMode === 'btn_amount3' && quickActionBtn3Text && (react_1.default.createElement(S_QuickActionButton, { onClick: handleClickQuickActionBtn3, disabled: quickActionBtn3State === 'disabled' },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: quickActionBtn3Text, styleTheme: "caption1Regular", colorTheme: "sysTextBrandPrimary", colorOverride: quickActionBtn3State === 'disabled'
-                            ? 'ui_cpnt_textlabel_sys_brand_primary_opacity50'
-                            : undefined, textAlign: "center" }))),
-                (quickActionBtnMode === 'btn_amount2' || quickActionBtnMode === 'btn_amount3') &&
-                    quickActionBtn2Text && (react_1.default.createElement(S_QuickActionButton, { onClick: handleClickQuickActionBtn2, disabled: quickActionBtn2State === 'disabled' },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: quickActionBtn2Text, styleTheme: "caption1Regular", colorTheme: "sysTextBrandPrimary", colorOverride: quickActionBtn2State === 'disabled'
-                            ? 'ui_cpnt_textlabel_sys_brand_primary_opacity50'
-                            : undefined, textAlign: "center" }))),
-                react_1.default.createElement(S_QuickActionButton, { onClick: handleClickQuickActionBtn1, disabled: quickActionBtn1State === 'disabled' },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: quickActionBtn1Text, styleTheme: "caption1Regular", colorTheme: "sysTextBrandPrimary", colorOverride: quickActionBtn1State === 'disabled'
-                            ? 'ui_cpnt_textlabel_sys_brand_primary_opacity50'
-                            : undefined, textAlign: "center" }))));
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [quickActionBtnMode === 'btn_amount3' && quickActionBtn3Text && ((0, jsx_runtime_1.jsx)(S_QuickActionButton, __assign({ onClick: handleClickQuickActionBtn3, disabled: quickActionBtn3State === 'disabled' }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: quickActionBtn3Text, styleTheme: "caption1Regular", colorTheme: "sysTextBrandPrimary", colorOverride: quickActionBtn3State === 'disabled'
+                                ? 'ui_cpnt_textlabel_sys_brand_primary_opacity50'
+                                : undefined, textAlign: "center" }, void 0) }), void 0)), (quickActionBtnMode === 'btn_amount2' || quickActionBtnMode === 'btn_amount3') &&
+                        quickActionBtn2Text && ((0, jsx_runtime_1.jsx)(S_QuickActionButton, __assign({ onClick: handleClickQuickActionBtn2, disabled: quickActionBtn2State === 'disabled' }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: quickActionBtn2Text, styleTheme: "caption1Regular", colorTheme: "sysTextBrandPrimary", colorOverride: quickActionBtn2State === 'disabled'
+                                ? 'ui_cpnt_textlabel_sys_brand_primary_opacity50'
+                                : undefined, textAlign: "center" }, void 0) }), void 0)), (0, jsx_runtime_1.jsx)(S_QuickActionButton, __assign({ onClick: handleClickQuickActionBtn1, disabled: quickActionBtn1State === 'disabled' }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: quickActionBtn1Text, styleTheme: "caption1Regular", colorTheme: "sysTextBrandPrimary", colorOverride: quickActionBtn1State === 'disabled'
+                                ? 'ui_cpnt_textlabel_sys_brand_primary_opacity50'
+                                : undefined, textAlign: "center" }, void 0) }), void 0)] }, void 0));
         }
     };
     var getColumnColorTheme = function (style) {
@@ -147,34 +153,7 @@ var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
             }
         }
     }
-    return (react_1.default.createElement(S_AdminListItem, { "x-pds-name": "AdminListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", ref: ref, rowSize: rowSize, onClick: handleClick, isSelected: isSelected, quickActionBtnType: quickActionBtnType, flexibleHideInfoMode: flexibleHideInfoMode },
-        react_1.default.createElement(S_SelectionColumn, { rowSize: rowSize }, selectionMode === 'multi' && (react_1.default.createElement(S_Selection, null,
-            react_1.default.createElement(Checkbox_1.Checkbox, { name: id.toString(), state: selectedState === 'maintain' ? 'disabled' : 'normal' })))),
-        react_1.default.createElement(S_ImageColumn, { rowSize: rowSize },
-            column2Type === 'image_text' && (rowSize === 'high' || rowSize === 'medium') && (react_1.default.createElement(S_ImageWrapper, { rowSize: rowSize },
-                react_1.default.createElement(hybrid_1.ImageView, { src: imageSrc, shapeType: imageShapeType, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType, radius: imageShapeType === 'round' ? imageRadius : undefined, backgroundFillMode: "use" }))),
-            (rowSize === 'low' || rowSize === 'medium') && (react_1.default.createElement(S_RowTextWrapper, null,
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 2 }))),
-            rowSize === 'high' && (react_1.default.createElement(S_HighTextWrapper, { ref: contentRef, hasScroll: hasScroll },
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary" })))),
-        column3Text && (react_1.default.createElement(S_Column, { columnSize: column3TextWidth, className: "hidableColumn" },
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: column3Text, styleTheme: column3TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column3TextStyleTheme) }))),
-        column4Text && (react_1.default.createElement(S_Column, { columnSize: column4TextWidth, className: "hidableColumn" },
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: column4Text, styleTheme: column4TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column4TextStyleTheme) }))),
-        column5Text && (react_1.default.createElement(S_Column, { columnSize: column5TextWidth, className: "hidableColumn" },
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: column5Text, styleTheme: column5TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column5TextStyleTheme) }))),
-        column6Text && (react_1.default.createElement(S_Column, { columnSize: column6TextWidth, className: "hidableColumn" },
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: column6Text, styleTheme: column6TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column6TextStyleTheme) }))),
-        column7Text && (react_1.default.createElement(S_Column, { columnSize: column7TextWidth, className: "hidableColumn" },
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: column7Text, styleTheme: column7TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column7TextStyleTheme) }))),
-        column8Text && (react_1.default.createElement(S_Column, { columnSize: column8TextWidth, className: "hidableColumn" },
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: column8Text, styleTheme: column8TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column8TextStyleTheme) }))),
-        column9Text && (react_1.default.createElement(S_Column, { columnSize: column9TextWidth, className: "hidableColumn" },
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: column9Text, styleTheme: column9TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column9TextStyleTheme) }))),
-        column10Text && (react_1.default.createElement(S_Column, { columnSize: column10TextWidth, className: "hidableColumn" },
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: column10Text, styleTheme: column10TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column10TextStyleTheme) }))),
-        quickActionBtnMode !== 'none' && (react_1.default.createElement(S_QuickActionButtonBox, { quickActionBtnType: quickActionBtnType }, quickActionButtons())),
-        quickActionBtnType === 'hover' && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_f", spacingType: "width" })));
+    return ((0, jsx_runtime_1.jsxs)(S_AdminListItem, __assign({ "x-pds-name": "AdminListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", 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' ? 'disabled' : 'normal' }, void 0) }, void 0)) }), void 0), (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" }, void 0) }), void 0)), (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: "sysTextPrimary", ellipsisMode: "use", lineLimit: 2 }, void 0) }, void 0)), 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: "sysTextPrimary" }, void 0) }), void 0))] }), void 0), 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) }, void 0) }), void 0)), 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) }, void 0) }), void 0)), 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) }, void 0) }), void 0)), 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) }, void 0) }), void 0)), 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) }, void 0) }), void 0)), 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) }, void 0) }), void 0)), 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) }, void 0) }), void 0)), 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) }, void 0) }), void 0)), quickActionBtnMode !== 'none' && ((0, jsx_runtime_1.jsx)(S_QuickActionButtonBox, __assign({ quickActionBtnType: quickActionBtnType }, { children: quickActionButtons() }), void 0)), quickActionBtnType === 'hover' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_f", spacingType: "width" }, void 0)] }), void 0));
 });
 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/BasicChatListItem/BasicChatListItem.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PDSTextType, PDSValueOption } from '../../../common';
+import type { PDSTextType, PDSValueOption } from '../../../common';
 declare type Props = {
     titleText?: PDSTextType;
     contentText?: PDSTextType;

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

@@ -3,30 +3,23 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+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 react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var ContextMenu_1 = require("../ContextMenu");
@@ -74,19 +67,7 @@ function BasicChatListItem(_a) {
         }
         setIsContextMenuOpen(false);
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_BasicChatListItem, { "x-pds-name": "BasicChatListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", colorTheme: colorTheme },
-            leftImageMode === 'use' && (react_1.default.createElement(S_ImageViewWrapper, null,
-                react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }))),
-            react_1.default.createElement(S_TitleTextWrapper, null,
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] })),
-            react_1.default.createElement(S_ContentTextWrapper, null,
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'subscriber_transparent' ? 'sysTextWhite' : 'sysTextPrimary', wordBreak: "break_all" })),
-            hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
-                react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }))),
-            react_1.default.createElement(Popup_1.PopupProvider, null,
-                react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
-                    react_1.default.createElement(ContextMenu_1.ContextMenu, null, contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, onClick: handleContextMenuItemClick, state: contextMenuState })); })))))));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_BasicChatListItem, __assign({ "x-pds-name": "BasicChatListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", colorTheme: colorTheme }, { children: [leftImageMode === 'use' && ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }, void 0) }, void 0)), (0, jsx_runtime_1.jsx)(S_TitleTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'subscriber_transparent' ? 'sysTextWhite' : 'sysTextPrimary', wordBreak: "break_all" }, void 0) }, void 0), hoverMode === 'use' && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }, void 0) }), void 0)), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }, void 0) }), void 0) }, void 0)] }), void 0) }, void 0));
 }
 var S_BasicChatListItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n  min-height: 24px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  background-color: ", ";\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n  min-height: 24px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;
@@ -112,7 +93,7 @@ var S_ContentTextWrapper = styled_components_1.default.div(templateObject_3 || (
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_SeeMoreButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: ", ";\n  position: relative;\n  opacity: ", ";\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"], ["\n  margin-left: ", ";\n  position: relative;\n  opacity: ", ";\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"])), function (_a) {
+var S_SeeMoreButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: ", ";\n  opacity: ", ";\n  position: relative;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"], ["\n  margin-left: ", ";\n  opacity: ", ";\n  position: relative;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
 }, function (_a) {

package/dist/src/desktop/components/BasicChatListItem/Popup.d.ts

@@ -1,4 +1,4 @@
-import React, { MutableRefObject } from 'react';
+import { MutableRefObject } from 'react';
 declare type Props = {
     targetRef: MutableRefObject<HTMLElement | null>;
     isOpen: boolean;

package/dist/src/desktop/components/BasicChatListItem/Popup.js

@@ -3,31 +3,24 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+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 });
 exports.Popup = exports.PopupProvider = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var react_dom_1 = require("react-dom");
 var styled_components_1 = __importDefault(require("styled-components"));
 var PopupContext = (0, react_1.createContext)({
@@ -216,9 +209,9 @@ function Popup(_a) {
         }
     }
     if (!popupRootRef || !popupRootRef.current || !isOpen) {
-        return react_1.default.createElement(react_1.default.Fragment, null);
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
     }
-    var popupComponent = (react_1.default.createElement(S_Popup, { ref: popupRef, onClick: function (e) { return handlePopupClick(e); } }, typeof children === 'function' ? children(normPlacement) : children));
+    var popupComponent = ((0, jsx_runtime_1.jsx)(S_Popup, __assign({ ref: popupRef, onClick: function (e) { return handlePopupClick(e); } }, { children: typeof children === 'function' ? children(normPlacement) : children }), void 0));
     return (0, react_dom_1.createPortal)(popupComponent, popupRootRef.current);
 }
 exports.Popup = Popup;
@@ -230,9 +223,7 @@ var S_Popup = styled_components_1.default.div(templateObject_1 || (templateObjec
 function PopupProvider(_a) {
     var children = _a.children;
     var ref = (0, react_1.useRef)();
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(PopupContext.Provider, { value: ref }, children),
-        react_1.default.createElement("div", { ref: ref })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PopupContext.Provider, __assign({ value: ref }, { children: children }), void 0), (0, jsx_runtime_1.jsx)("div", { ref: ref }, void 0)] }, void 0));
 }
 exports.PopupProvider = PopupProvider;
 var templateObject_1;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PDSTextType } from '../../../common';
+import type { PDSTextType } from '../../../common';
 declare type BasicFormGroupProps = {
     titleStyleTheme?: 'headingBold' | 'leadParaBold' | 'subTitleBold';
     titleText?: PDSTextType;

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

@@ -1,23 +1,21 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var hybrid_1 = require("../../../hybrid");
 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;
-    return (react_1.default.createElement("div", { "x-pds-name": "BasicFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
-        titleText && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }),
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }))),
-        descText && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }),
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }))),
-        inputForm,
-        captionText && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" })))));
+    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.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }, void 0)] }, void 0)), 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" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0)] }, void 0)), inputForm, captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" }, void 0)] }, void 0))] }), void 0));
 }
 exports.default = BasicFormGroup;

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { PDSTextType } from '../../../common';
+/// <reference types="react" />
+import type { PDSTextType } from '../../../common';
 declare type BasicListProps = {
     children: React.ReactNode;
     titleStyleTheme?: 'headingBold' | 'leadParaBold' | 'subTitleBold';

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

@@ -3,22 +3,28 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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 react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function BasicList(_a) {
     var children = _a.children, _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'headingBold' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.columns, columns = _c === void 0 ? 1 : _c, _d = _a.columnSpacing, columnSpacing = _d === void 0 ? 16 : _d, _e = _a.rowSpacing, rowSpacing = _e === void 0 ? 0 : _e, _f = _a.spacingMode, spacingMode = _f === void 0 ? 'use' : _f;
-    return (react_1.default.createElement("div", { "x-pds-name": "BasicList", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
-        (titleText || captionText) && (react_1.default.createElement(S_TitleBox, { spacingMode: spacingMode },
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme }),
-            titleText && captionText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }),
-            captionText && react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "body2Regular" }))),
-        react_1.default.createElement(S_BasicListWrapper, { columns: columns, columnSpacing: columnSpacing, rowSpacing: rowSpacing }, children)));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BasicList", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(titleText || captionText) && ((0, jsx_runtime_1.jsxs)(S_TitleBox, __assign({ spacingMode: spacingMode }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme }, void 0), titleText && captionText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }, void 0), captionText && (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "body2Regular" }, void 0)] }), void 0)), (0, jsx_runtime_1.jsx)(S_BasicListWrapper, __assign({ columns: columns, columnSpacing: columnSpacing, rowSpacing: rowSpacing }, { children: children }), void 0)] }), void 0));
 }
 var S_TitleBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  padding: ", ";\n"], ["\n  margin-bottom: ", ";\n  padding: ", ";\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
+import type { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
 export declare type BasicListItemProps = {
     selectionMode?: 'none' | 'check' | 'radio';
     titleText: PDSTextType;

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

@@ -3,11 +3,22 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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 react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
@@ -114,46 +125,9 @@ function BasicListItem(_a) {
         }
         return true;
     };
-    return (react_1.default.createElement(S_BasicListItem, { "x-pds-name": "BasicListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", displayType: displayType, selectionMode: selectionMode, isSelected: isSelected, onClick: handleClick, hasOnClick: !!onClick, spacingMode: spacingMode },
-        react_1.default.createElement(S_BasicListItemBox, { imageIconMode: imageIconMode, captionText: captionText, spacingMode: spacingMode },
-            react_1.default.createElement(S_LeftBox, { onlyLeftArea: onlyLeftArea },
-                selectionMode !== 'none' && (react_1.default.createElement(S_SelectionBoxWrapper, { selectionMode: selectionMode },
-                    selectionMode === 'check' && checkboxId && (react_1.default.createElement(Checkbox_1.Checkbox, { name: checkboxId.toString(), state: "normal", onChange: handleCheckBoxClick })),
-                    selectionMode === 'radio' && radioValue && radioId && (react_1.default.createElement(Radio_1.Radio, { name: radioId, value: radioValue, onChange: handleRadioClick, checked: radioId === radioValue })))),
-                badgeMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
-                    isBadgeLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
-                    react_1.default.createElement(S_Badge, { badgeStatus: badgeStatus }))),
-                imageIconMode === 'image' && (react_1.default.createElement(react_1.default.Fragment, null,
-                    isImageIconLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
-                    react_1.default.createElement(hybrid_1.ImageView, { width: 40, height: 40, src: imageSrc, scaleType: "cover", shapeType: imageShapeType }))),
-                imageIconMode === 'icon' && (react_1.default.createElement(react_1.default.Fragment, null,
-                    isImageIconLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
-                    react_1.default.createElement(S_IconWrapper, null,
-                        react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, fillType: iconFillType, size: 24, colorKey: "ui_cpnt_list_icon_02" })))),
-                isTextLabelLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
-                react_1.default.createElement(S_TextBox, null,
-                    react_1.default.createElement(S_TextWrapper, null,
-                        react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleTextColorTheme === 'none' ? 'sysTextPrimary' : 'sysTextError', styleTheme: titleFontWeight === 'bold' ? 'body2Bold' : 'body2Regular', singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })),
-                    captionText && (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
-                        react_1.default.createElement(S_TextWrapper, null,
-                            react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", textAlign: "left", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
-            react_1.default.createElement(S_RightBox, { displayType: displayType },
-                (displayType === 'text' || displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
-                    isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
-                (displayType === 'ibtn_amount1' ||
-                    displayType === 'ibtn_amount2' ||
-                    displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
-                    displayType === 'ibtn_amount2' && (react_1.default.createElement(S_IconWrapper, null, iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn2IconName, iconFillType: iBtn2IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn2Click, iconColorKey: "ui_cpnt_button_icon_default" })))),
-                    react_1.default.createElement(S_IconWrapper, null, iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click, iconColorKey: "ui_cpnt_button_icon_default" }))))),
-                displayType === 'mbtn' && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, fillType: mBtnFillType, size: "small", onClick: handleMBtnClick }),
-                    isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
-                displayType === 'switch' && switchName && (react_1.default.createElement(S_SwitchWrapper, null,
-                    react_1.default.createElement(hybrid_1.Switch, { name: switchName, onClick: handleSwitchClick, state: switchState, status: switchStatus }),
-                    isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))))),
-        react_1.default.createElement(S_DividerWrapper, { spacingMode: spacingMode }, dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }))));
+    return ((0, jsx_runtime_1.jsxs)(S_BasicListItem, __assign({ "x-pds-name": "BasicListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", displayType: displayType, selectionMode: selectionMode, isSelected: isSelected, onClick: handleClick, hasOnClick: !!onClick, spacingMode: spacingMode }, { children: [(0, jsx_runtime_1.jsxs)(S_BasicListItemBox, __assign({ imageIconMode: imageIconMode, captionText: captionText, spacingMode: spacingMode }, { children: [(0, jsx_runtime_1.jsxs)(S_LeftBox, __assign({ onlyLeftArea: onlyLeftArea }, { children: [selectionMode !== 'none' && ((0, jsx_runtime_1.jsxs)(S_SelectionBoxWrapper, __assign({ selectionMode: selectionMode }, { children: [selectionMode === 'check' && checkboxId && ((0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { name: checkboxId.toString(), state: "normal", onChange: handleCheckBoxClick }, void 0)), selectionMode === 'radio' && radioValue && radioId && ((0, jsx_runtime_1.jsx)(Radio_1.Radio, { name: radioId, value: radioValue, onChange: handleRadioClick, checked: radioId === radioValue }, void 0))] }), void 0)), badgeMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isBadgeLeftSpacingChecker('none') && ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }, void 0)), (0, jsx_runtime_1.jsx)(S_Badge, { badgeStatus: badgeStatus }, void 0)] }, void 0)), imageIconMode === 'image' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isImageIconLeftSpacingChecker('none') && ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }, void 0)), (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { width: 40, height: 40, src: imageSrc, scaleType: "cover", shapeType: imageShapeType }, void 0)] }, void 0)), imageIconMode === 'icon' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isImageIconLeftSpacingChecker('none') && ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }, void 0)), (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, fillType: iconFillType, size: 24, colorKey: "ui_cpnt_list_icon_02" }, void 0) }, void 0)] }, void 0)), isTextLabelLeftSpacingChecker('none') && ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }, void 0)), (0, jsx_runtime_1.jsxs)(S_TextBox, { children: [(0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleTextColorTheme === 'none' ? 'sysTextPrimary' : 'sysTextError', styleTheme: titleFontWeight === 'bold' ? 'body2Bold' : 'body2Regular', singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }, void 0) }, void 0), captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }, void 0), (0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", textAlign: "left", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }, void 0) }, void 0)] }, void 0))] }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)(S_RightBox, __assign({ displayType: displayType }, { children: [(displayType === 'text' || displayType === 'ibtn_text') && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }, void 0), isRightSpacingChecker('none') && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }, void 0)] }, void 0)), (displayType === 'ibtn_amount1' ||
+                                displayType === 'ibtn_amount2' ||
+                                displayType === 'ibtn_text') && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsx)(S_IconWrapper, { children: iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, iconFillType: iBtn2IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn2Click, iconColorKey: "ui_cpnt_button_icon_default" }, void 0)) }, void 0)), (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click, iconColorKey: "ui_cpnt_button_icon_default" }, void 0)) }, void 0)] }, void 0)), displayType === 'mbtn' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: mBtnText, fillType: mBtnFillType, size: "small", onClick: handleMBtnClick }, void 0), isRightSpacingChecker('none') && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }, void 0)] }, void 0)), displayType === 'switch' && switchName && ((0, jsx_runtime_1.jsxs)(S_SwitchWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Switch, { name: switchName, onClick: handleSwitchClick, state: switchState, status: switchStatus }, void 0), isRightSpacingChecker('none') && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }, void 0)] }, void 0))] }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)(S_DividerWrapper, __assign({ spacingMode: spacingMode }, { children: dividerType === 'solid' && (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }, void 0) }), void 0)] }), void 0));
 }
 var S_BasicListItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: ", ";\n"])), function (_a) {
     var theme = _a.theme, isSelected = _a.isSelected;
@@ -197,11 +171,11 @@ var S_Badge = styled_components_1.default.div(templateObject_8 || (templateObjec
             inactive: "" + theme.ui_cpnt_list_badge_disabled
         }[badgeStatus];
 });
-var S_RightBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  flex: 3;\n  height: ", ";\n  display: flex;\n  justify-content: flex-end;\n"], ["\n  align-items: center;\n  flex: 3;\n  height: ", ";\n  display: flex;\n  justify-content: flex-end;\n"])), function (_a) {
+var S_RightBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex: 3;\n  height: ", ";\n  justify-content: flex-end;\n"], ["\n  align-items: center;\n  display: flex;\n  flex: 3;\n  height: ", ";\n  justify-content: flex-end;\n"])), function (_a) {
     var displayType = _a.displayType;
     return (displayType === 'text' ? '40px' : 'auto');
 });
-var S_SwitchWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  min-width: 68px;\n  min-height: 32px;\n  position: relative;\n  right: 0;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  min-width: 68px;\n  min-height: 32px;\n  position: relative;\n  right: 0;\n"])));
+var S_SwitchWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  min-height: 32px;\n  min-width: 68px;\n  position: relative;\n  right: 0;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  min-height: 32px;\n  min-width: 68px;\n  position: relative;\n  right: 0;\n"])));
 var S_DividerWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  width: ", ";\n"], ["\n  width: ", ";\n"])), function (_a) {
     var spacingMode = _a.spacingMode;
     return (spacingMode !== 'none' ? 'calc(100% - 24px)' : '100%');

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

@@ -1,6 +1,6 @@
-import React from 'react';
+/// <reference types="react" />
 import { Path } from 'react-hook-form';
-import { IFormValues, PDSTextType } from '../../../common';
+import type { IFormValues, PDSTextType } from '../../../common';
 export declare type BlogTextFieldProps = {
     hintText?: PDSTextType;
     defaultText?: PDSTextType;

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

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -22,12 +33,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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");
 /* eslint-disable react/jsx-no-bind */
-var react_1 = __importDefault(require("react"));
 var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../common/components");
@@ -58,14 +66,13 @@ function BlogTextField(_a) {
     }
     var S_BlogTextField = function () {
         if (textLineType === 'multi') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, validationPoint: "onChange" }));
+            return ((0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, validationPoint: "onChange" }, void 0));
         }
         if (textLineType === 'auto') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, validationPoint: "onChange" }));
+            return ((0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, validationPoint: "onChange" }, void 0));
         }
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_BlogTextFieldWrapper, { "x-pds-name": "BlogTextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, textLineType: textLineType, state: state, spacingMode: spacingMode }, S_BlogTextField())));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_BlogTextFieldWrapper, __assign({ "x-pds-name": "BlogTextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, textLineType: textLineType, state: state, spacingMode: spacingMode }, { children: S_BlogTextField() }), void 0) }, void 0));
 }
 var multi = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: auto;\n"], ["\n  height: auto;\n"])));
 var auto = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: auto;\n"], ["\n  height: auto;\n"])));
@@ -91,7 +98,7 @@ var disabled = (0, styled_components_1.css)(templateObject_6 || (templateObject_
     var theme = _a.theme;
     return theme.ui_cpnt_blogtextfield_base_01;
 });
-var S_BlogTextFieldWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_BlogTextFieldWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n"])), function (_a) {
     var state = _a.state;
     return (state === 'disabled' ? 'not-allowed' : 'text');
 }, function (_a) {

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PDSTextType } from '../../../common';
+import type { PDSTextType } from '../../../common';
 declare type BodyTextGroupProps = {
     titleStyleTheme?: 'headingBold' | 'leadParaBold' | 'subTitleBold';
     titleText: PDSTextType;