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

package/dist/src/mobile/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/mobile/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/mobile/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": "mobile" },
-        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": "mobile" }, { 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/mobile/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/mobile/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": "mobile" },
-        (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": "mobile" }, { 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/mobile/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/mobile/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": "mobile", isSelected: isSelected, onClick: handleClick, 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", onMouseDown: 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": "mobile", isSelected: isSelected, onClick: handleClick, 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", onMouseDown: 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  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;
@@ -186,11 +160,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/mobile/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/mobile/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": "mobile", 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": "mobile", 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  display: flex;\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  border: 1px solid transparent;\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  display: flex;\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {

package/dist/src/mobile/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;

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

@@ -1,20 +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 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 (react_1.default.createElement("div", { "x-pds-name": "BodyTextGroup", "x-pds-element-type": "component", "x-pds-device-type": "mobile" },
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, wordBreak: titleTextWordBreak, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }),
-        descText && (react_1.default.createElement("div", null,
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, wordBreak: descTextWordBreak, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }))),
-        contentText && (react_1.default.createElement("div", null,
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, wordBreak: contentTextWordBreak, styleTheme: contentFontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorTheme: "sysTextPrimary" })))));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BodyTextGroup", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, wordBreak: titleTextWordBreak, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }, void 0), descText && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, wordBreak: descTextWordBreak, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }, void 0)] }, void 0)), contentText && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, wordBreak: contentTextWordBreak, styleTheme: contentFontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorTheme: "sysTextPrimary" }, void 0)] }, void 0))] }), void 0));
 }
 exports.default = BodyTextGroup;

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

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

package/dist/src/mobile/components/Card/Card.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 styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
@@ -18,12 +29,7 @@ function Card(_a) {
             onClick(e);
         }
     };
-    return (react_1.default.createElement(S_CardGroups, { "x-pds-name": "Card", "x-pds-element-type": "component", "x-pds-device-type": "mobile", selectState: selectState, onClick: handleClick },
-        imageIconMode !== 'none' && (react_1.default.createElement(S_ImageIconModeBox, null, imageIconMode === 'image' && imageSrc && (react_1.default.createElement(hybrid_1.ImageView, { shapeType: "rectangle", width: "responsive", ratio: "16_9", scaleType: "cover", src: imageSrc })))),
-        react_1.default.createElement(S_Content, null,
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "body2Bold", colorTheme: "sysTextPrimary" }),
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c" }),
-            descText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" })))));
+    return ((0, jsx_runtime_1.jsxs)(S_CardGroups, __assign({ "x-pds-name": "Card", "x-pds-element-type": "component", "x-pds-device-type": "mobile", selectState: selectState, onClick: handleClick }, { children: [imageIconMode !== 'none' && ((0, jsx_runtime_1.jsx)(S_ImageIconModeBox, { children: imageIconMode === 'image' && imageSrc && ((0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "rectangle", width: "responsive", ratio: "16_9", scaleType: "cover", src: imageSrc }, void 0)) }, void 0)), (0, jsx_runtime_1.jsxs)(S_Content, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "body2Bold", colorTheme: "sysTextPrimary" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }, void 0), descText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }, void 0))] }, void 0)] }), void 0));
 }
 var S_CardGroups = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  min-width: 144px;\n  position: relative;\n\n  &::after {\n    border-radius: 16px;\n    box-shadow: ", ";\n    content: '';\n    height: 100%;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  min-width: 144px;\n  position: relative;\n\n  &::after {\n    border-radius: 16px;\n    box-shadow: ", ";\n    content: '';\n    height: 100%;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 declare type CardListProps = {
     children: React.ReactNode;
     rows?: number;

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

@@ -3,15 +3,26 @@ 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"));
 function CardList(_a) {
     var children = _a.children, rows = _a.rows, columns = _a.columns, rowGap = _a.rowGap, columnGap = _a.columnGap;
-    return (react_1.default.createElement(S_CardList, { "x-pds-name": "CardList", "x-pds-element-type": "component", "x-pds-device-type": "mobile", rows: rows, columns: columns, rowGap: rowGap, columnGap: columnGap }, children));
+    return ((0, jsx_runtime_1.jsx)(S_CardList, __assign({ "x-pds-name": "CardList", "x-pds-element-type": "component", "x-pds-device-type": "mobile", rows: rows, columns: columns, rowGap: rowGap, columnGap: columnGap }, { children: children }), void 0));
 }
 var S_CardList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  display: grid;\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
     var rows = _a.rows;

package/dist/src/mobile/components/ChatBubbleListItem/ChatBubble.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 export declare type ChatBubbleProps = {
     colorTheme?: 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
     tailType?: 'none' | 'left_top' | 'right_top';

package/dist/src/mobile/components/ChatBubbleListItem/ChatBubble.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,11 +33,8 @@ 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 react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var backgroundColorTheme = {
     grey: 'ui_cpnt_list_chatbubble_base_grey',
@@ -36,32 +44,29 @@ var backgroundColorTheme = {
 };
 function ChatBubble(_a) {
     var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'grey' : _b, _c = _a.tailType, tailType = _c === void 0 ? 'left_top' : _c, children = _a.children;
-    return (react_1.default.createElement(S_ChatBubbleWrapper, null,
-        react_1.default.createElement(S_Tail, { width: "8", height: "11", viewBox: "0 0 8 11", tailType: tailType, colorTheme: colorTheme },
-            react_1.default.createElement("path", { d: "M1107,336.800385 C1107,341.257979 1107.46413,342.87441 1108.33566,344.50404 C1108.99708,345.740772 1109.89313,346.775532 1110.99903,347.583527 L1111,347.618755 L1110.99894,347.618755 C1108.35845,347.618755 1105.83748,347.107028 1103.52979,346.177337 C1104.54074,345.507794 1105.3496,344.61519 1105.93147,343.527194 C1106.6287,342.22349 1107,340.8866 1107,337.582996 L1107,337.582996 Z", transform: "rotate(180 555.765 173.81)" })),
-        react_1.default.createElement(S_ChatBubble, { colorTheme: colorTheme }, children)));
+    return ((0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, { children: [(0, jsx_runtime_1.jsx)(S_Tail, __assign({ width: "8", height: "11", viewBox: "0 0 8 11", tailType: tailType, colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M1107,336.800385 C1107,341.257979 1107.46413,342.87441 1108.33566,344.50404 C1108.99708,345.740772 1109.89313,346.775532 1110.99903,347.583527 L1111,347.618755 L1110.99894,347.618755 C1108.35845,347.618755 1105.83748,347.107028 1103.52979,346.177337 C1104.54074,345.507794 1105.3496,344.61519 1105.93147,343.527194 C1106.6287,342.22349 1107,340.8866 1107,337.582996 L1107,337.582996 Z", transform: "rotate(180 555.765 173.81)" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(S_ChatBubble, __assign({ colorTheme: colorTheme }, { children: children }), void 0)] }, void 0));
 }
 var none = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
 var left_top = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  left: -4px;\n  top: 0;\n"], ["\n  left: -4px;\n  top: 0;\n"])));
-var right_top = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  transform: scaleX(-1);\n  right: -4px;\n  top: 0;\n"], ["\n  transform: scaleX(-1);\n  right: -4px;\n  top: 0;\n"])));
+var right_top = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  right: -4px;\n  top: 0;\n  transform: scaleX(-1);\n"], ["\n  right: -4px;\n  top: 0;\n  transform: scaleX(-1);\n"])));
 var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n"], ["\n  display: inline-block;\n  position: relative;\n"])));
-var S_ChatBubble = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n\n  background-color: ", ";\n  border-radius: 8px;\n  position: relative;\n  max-width: 960px;\n  min-width: 32px;\n"], ["\n  box-sizing: border-box;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n\n  background-color: ", ";\n  border-radius: 8px;\n  position: relative;\n  max-width: 960px;\n  min-width: 32px;\n"])), function (_a) {
+var S_ChatBubble = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n  max-width: 960px;\n  min-width: 32px;\n\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  position: relative;\n"], ["\n  background-color: ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n  max-width: 960px;\n  min-width: 32px;\n\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  position: relative;\n"])), function (_a) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    return colorTheme && theme[backgroundColorTheme[colorTheme]];
+}, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 }, function (_a) {
-    var colorTheme = _a.colorTheme, theme = _a.theme;
-    return colorTheme && theme[backgroundColorTheme[colorTheme]];
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
 });
-var S_Tail = styled_components_1.default.svg(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  fill: ", ";\n\n  ", ";\n"], ["\n  position: absolute;\n  fill: ", ";\n\n  ", ";\n"])), function (_a) {
+var S_Tail = styled_components_1.default.svg(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  fill: ", ";\n  position: absolute;\n\n  ", ";\n"], ["\n  fill: ", ";\n  position: absolute;\n\n  ", ";\n"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;
     return colorTheme && theme[backgroundColorTheme[colorTheme]];
 }, function (_a) {

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { PDSTextType, PDSValueOption } from '../../../common';
+/// <reference types="react" />
+import type { PDSTextType, PDSValueOption } from '../../../common';
 declare type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
 export declare type ChatBubbleListItemProps = {
     titleText?: PDSTextType;