pds-dev-kit-web-test 2.5.489 → 2.5.491

package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js

@@ -61,7 +61,7 @@ var common_1 = require("../../../../common");
 var IconButton_1 = require("../../../components/IconButton");
 var constants_1 = require("./constants");
 function TextFieldBase(_a) {
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.enterSubmitMode, enterSubmitMode = _d === void 0 ? 'none' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _f = _a.inputType, inputType = _f === void 0 ? 'text' : _f, inputMode = _a.inputMode, _g = _a.state, state = _g === void 0 ? 'normal' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, min = _a.min, max = _a.max, _j = _a.maxLength, maxLength = _j === void 0 ? Infinity : _j, _k = _a.textSize, textSize = _k === void 0 ? 'form2' : _k, _l = _a.textWeight, textWeight = _l === void 0 ? 'normal' : _l, fieldPaddingRight = _a.fieldPaddingRight, fieldPaddingLeft = _a.fieldPaddingLeft, textPadding = _a.textPadding, _m = _a.fieldHeight, fieldHeight = _m === void 0 ? 48 : _m, _o = _a.deleteIconMode, deleteIconMode = _o === void 0 ? 'use' : _o, _p = _a.deleteIconSize, deleteIconSize = _p === void 0 ? 20 : _p, _q = _a.deleteIconColor, deleteIconColor = _q === void 0 ? 'ui_cpnt_button_icon_disabled' : _q, suffixText = _a.suffixText, _r = _a.suffixTextRightSpacingMode, suffixTextRightSpacingMode = _r === void 0 ? 'none' : _r, isFocused = _a.isFocused, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.stepperMode, stepperMode = _t === void 0 ? 'none' : _t, _u = _a.stepperRightSpacing, stepperRightSpacing = _u === void 0 ? 1 : _u, _v = _a.innerSpinButtonSize, innerSpinButtonSize = _v === void 0 ? 16 : _v, step = _a.step, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, rest = __rest(_a, ["name", "hintText", "defaultText", "textAlign", "validation", "preventBlankMode", "enterSubmitMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "inputMode", "state", "colorTheme", "min", "max", "maxLength", "textSize", "textWeight", "fieldPaddingRight", "fieldPaddingLeft", "textPadding", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "suffixText", "suffixTextRightSpacingMode", "isFocused", "autoComplete", "stepperMode", "stepperRightSpacing", "innerSpinButtonSize", "step", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget"]);
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.enterSubmitMode, enterSubmitMode = _d === void 0 ? 'none' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _f = _a.inputType, inputType = _f === void 0 ? 'text' : _f, inputMode = _a.inputMode, _g = _a.state, state = _g === void 0 ? 'normal' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, min = _a.min, max = _a.max, _j = _a.maxLength, maxLength = _j === void 0 ? Infinity : _j, _k = _a.textSize, textSize = _k === void 0 ? 'form2' : _k, customFontSize = _a.customFontSize, _l = _a.textWeight, textWeight = _l === void 0 ? 'normal' : _l, fieldPaddingRight = _a.fieldPaddingRight, fieldPaddingLeft = _a.fieldPaddingLeft, textPadding = _a.textPadding, _m = _a.fieldHeight, fieldHeight = _m === void 0 ? 48 : _m, _o = _a.deleteIconMode, deleteIconMode = _o === void 0 ? 'use' : _o, _p = _a.deleteIconSize, deleteIconSize = _p === void 0 ? 20 : _p, _q = _a.deleteIconColor, deleteIconColor = _q === void 0 ? 'ui_cpnt_button_icon_disabled' : _q, suffixText = _a.suffixText, _r = _a.suffixTextRightSpacingMode, suffixTextRightSpacingMode = _r === void 0 ? 'none' : _r, isFocused = _a.isFocused, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.stepperMode, stepperMode = _t === void 0 ? 'none' : _t, _u = _a.stepperRightSpacing, stepperRightSpacing = _u === void 0 ? 1 : _u, _v = _a.innerSpinButtonSize, innerSpinButtonSize = _v === void 0 ? 16 : _v, step = _a.step, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, rest = __rest(_a, ["name", "hintText", "defaultText", "textAlign", "validation", "preventBlankMode", "enterSubmitMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "inputMode", "state", "colorTheme", "min", "max", "maxLength", "textSize", "customFontSize", "textWeight", "fieldPaddingRight", "fieldPaddingLeft", "textPadding", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "suffixText", "suffixTextRightSpacingMode", "isFocused", "autoComplete", "stepperMode", "stepperRightSpacing", "innerSpinButtonSize", "step", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget"]);
     var _w = (0, react_hook_form_1.useFormContext)(), register = _w.register, setValue = _w.setValue, getValues = _w.getValues, clearErrors = _w.clearErrors;
     var timeout;
     var suffixTextRef = (0, react_1.useRef)(null);
@@ -226,13 +226,13 @@ function TextFieldBase(_a) {
     }
     var S_TextFieldBase = function () {
         if (textLineType === 'single') {
-            return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize, isFocused: isFocused, stepperRightSpacing: stepperRightSpacing }, { children: [(0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_up_stepper", fillType: "fill", size: innerSpinButtonSize }), (0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_down_stepper", fillType: "fill", size: innerSpinButtonSize })] }))), (0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, inputMode: inputMode, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, deleteIconMode: deleteIconMode, suffixText: suffixText, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing, isFocused: isFocused, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: ref })), (deleteIconMode === 'use' || suffixText) && ((0, jsx_runtime_1.jsxs)(S_RightBox, __assign({ deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, innerSpinButtonSize: innerSpinButtonSize }, { children: [deleteIconMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconButtonWrapper, __assign({ innerSpinButtonSize: innerSpinButtonSize, deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, isFocused: isFocused, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing }, { children: isFocused && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue })) }))), suffixText && ((0, jsx_runtime_1.jsxs)(S_SuffixTextBox, __assign({ ref: suffixTextRef }, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", colorOverride: stepperMode === 'use' && isFocused ? 'ui_106' : undefined, textAlign: "right", singleLineMode: "use" }), suffixTextRightSpacingMode === 'use' && ((0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }))] })))] })))] }));
+            return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize, isFocused: isFocused, stepperRightSpacing: stepperRightSpacing }, { children: [(0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_up_stepper", fillType: "fill", size: innerSpinButtonSize }), (0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_down_stepper", fillType: "fill", size: innerSpinButtonSize })] }))), (0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, inputMode: inputMode, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, customFontSize: customFontSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, deleteIconMode: deleteIconMode, suffixText: suffixText, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing, isFocused: isFocused, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: ref })), (deleteIconMode === 'use' || suffixText) && ((0, jsx_runtime_1.jsxs)(S_RightBox, __assign({ deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, innerSpinButtonSize: innerSpinButtonSize }, { children: [deleteIconMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconButtonWrapper, __assign({ innerSpinButtonSize: innerSpinButtonSize, deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, isFocused: isFocused, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing }, { children: isFocused && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue })) }))), suffixText && ((0, jsx_runtime_1.jsxs)(S_SuffixTextBox, __assign({ ref: suffixTextRef }, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", colorOverride: stepperMode === 'use' && isFocused ? 'ui_106' : undefined, textAlign: "right", singleLineMode: "use" }), suffixTextRightSpacingMode === 'use' && ((0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }))] })))] })))] }));
         }
         if (textLineType === 'multi') {
-            return ((0, jsx_runtime_1.jsx)(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, textPadding: textPadding, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: ref })));
+            return ((0, jsx_runtime_1.jsx)(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, customFontSize: customFontSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, textPadding: textPadding, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: ref })));
         }
         if (textLineType === 'auto') {
-            return ((0, jsx_runtime_1.jsx)(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, textPadding: textPadding, fieldHeight: fieldHeight, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
+            return ((0, jsx_runtime_1.jsx)(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, customFontSize: customFontSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, textPadding: textPadding, fieldHeight: fieldHeight, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
                     ref(e);
                     textAreaRef.current = e;
                 }, onInput: handleResizeHeight })));
@@ -314,8 +314,8 @@ var basicStyle = (0, styled_components_1.css)(templateObject_9 || (templateObjec
             transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_enabled
         }[colorTheme];
 }, function (_a) {
-    var textSize = _a.textSize;
-    return common_1.desktopFontSize[textSize];
+    var textSize = _a.textSize, customFontSize = _a.customFontSize;
+    return customFontSize ? customFontSize : common_1.desktopFontSize[textSize];
 }, function (_a) {
     var textWeight = _a.textWeight;
     return common_1.fontWeight[textWeight];
@@ -334,8 +334,8 @@ var basicStyle = (0, styled_components_1.css)(templateObject_9 || (templateObjec
             transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_hint
         }[colorTheme];
 }, function (_a) {
-    var textSize = _a.textSize;
-    return common_1.desktopFontSize[textSize];
+    var textSize = _a.textSize, customFontSize = _a.customFontSize;
+    return customFontSize ? customFontSize : common_1.desktopFontSize[textSize];
 }, function (_a) {
     var textWeight = _a.textWeight;
     return common_1.fontWeight[textWeight];
@@ -478,19 +478,23 @@ var S_Input = styled_components_1.default.input(templateObject_15 || (templateOb
     return theme.ui_cpnt_textfield_text_typed;
 });
 var S_Auto = styled_components_1.default.textarea(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"])), basicStyle, function (_a) {
-    var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
+    var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight, customFontSize = _a.customFontSize;
     return autoMaxRows &&
         fieldHeight &&
-        "max-height: ".concat(Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
-            Number(common_1.desktopLineHeight[textSize]) *
-            autoMaxRows, "px;");
+        "max-height: ".concat(customFontSize
+            ? Number(customFontSize.substring(0, 2)) * Number(common_1.desktopLineHeight[textSize]) * autoMaxRows
+            : Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
+                Number(common_1.desktopLineHeight[textSize]) *
+                autoMaxRows, "px;");
 }, function (_a) {
-    var autoMinRows = _a.autoMinRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
+    var autoMinRows = _a.autoMinRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight, customFontSize = _a.customFontSize;
     return autoMinRows &&
         fieldHeight &&
-        "min-height: ".concat(Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
-            Number(common_1.desktopLineHeight[textSize]) *
-            autoMinRows, "px;");
+        "min-height: ".concat(customFontSize
+            ? Number(customFontSize.substring(0, 2)) * Number(common_1.desktopLineHeight[textSize]) * autoMinRows
+            : Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
+                Number(common_1.desktopLineHeight[textSize]) *
+                autoMinRows, "px;");
 });
 var S_Multi = styled_components_1.default.textarea(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"])), basicStyle);
 exports.default = TextFieldBase;

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

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

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

@@ -0,0 +1,104 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("../../../hybrid/components");
+var index_1 = require("../../index");
+var panels_1 = require("../../panels");
+var styled_components_1 = __importDefault(require("styled-components"));
+var Chip_1 = require("../Chip");
+var LeftBox_1 = require("./LeftBox");
+var paddingSpacing = {
+    spacing_a: 'spacingA',
+    spacing_b: 'spacingB',
+    spacing_c: 'spacingC',
+    spacing_d: 'spacingD',
+    spacing_e: 'spacingE',
+    spacing_f: 'spacingF',
+    spacing_g: 'spacingG',
+    spacing_h: 'spacingH',
+    spacing_i: 'spacingI',
+    spacing_j: 'spacingJ',
+    spacing_k: 'spacingK',
+    spacing_l: 'spacingL',
+    spacing_m: 'spacingM',
+    spacing_n: 'spacingN'
+};
+function BoxItem(_a) {
+    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.checkboxMode, checkboxMode = _c === void 0 ? 'none' : _c, _d = _a.indicatorMode, indicatorMode = _d === void 0 ? 'none' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.selectState, selectState = _f === void 0 ? 'unselected' : _f, titleText = _a.titleText, titleFontSize = _a.titleFontSize, _g = _a.titleTextLineLimit, titleTextLineLimit = _g === void 0 ? 2 : _g, _h = _a.titleTextColorKey, titleTextColorKey = _h === void 0 ? 'ui_cpnt_textlabel_sys_primary' : _h, descText = _a.descText, _j = _a.descTextColorKey, descTextColorKey = _j === void 0 ? 'ui_cpnt_textlabel_sys_secondary' : _j, _k = _a.descLineLimit, descLineLimit = _k === void 0 ? 2 : _k, _l = _a.imageMode, imageMode = _l === void 0 ? 'none' : _l, _m = _a.imageShapeType, imageShapeType = _m === void 0 ? 'round' : _m, imageSrc = _a.imageSrc, imageWidth = _a.imageWidth, _o = _a.imageRatio, imageRatio = _o === void 0 ? '1_1' : _o, _p = _a.imageScaleType, imageScaleType = _p === void 0 ? 'cover' : _p, _q = _a.chipMode, chipMode = _q === void 0 ? 'none' : _q, chipText = _a.chipText, _r = _a.displayType, displayType = _r === void 0 ? 'none' : _r, iBtn1IconName = _a.iBtn1IconName, _s = _a.iBtn1IconFillType, iBtn1IconFillType = _s === void 0 ? 'line' : _s, iBtn1IconColorKey = _a.iBtn1IconColorKey, iBtn2IconName = _a.iBtn2IconName, _t = _a.iBtn2IconFillType, iBtn2IconFillType = _t === void 0 ? 'line' : _t, iBtn2IconColorKey = _a.iBtn2IconColorKey, iBtn3IconName = _a.iBtn3IconName, _u = _a.iBtn3IconFillType, iBtn3IconFillType = _u === void 0 ? 'line' : _u, iBtn3IconColorKey = _a.iBtn3IconColorKey, _v = _a.paddingTop, paddingTop = _v === void 0 ? 'spacing_d' : _v, _w = _a.paddingRight, paddingRight = _w === void 0 ? 'spacing_d' : _w, _x = _a.paddingBottom, paddingBottom = _x === void 0 ? 'spacing_d' : _x, _y = _a.paddingLeft, paddingLeft = _y === void 0 ? 'spacing_d' : _y, id = _a.id, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickIBtn3 = _a.onClickIBtn3;
+    var handleClick = function () {
+        if (state === 'disabled') {
+            return;
+        }
+        if (onClick) {
+            onClick(id);
+        }
+    };
+    var handleIBtn1Click = function (e) {
+        e.stopPropagation();
+        if (state === 'disabled') {
+            return;
+        }
+        if (onClickIBtn1) {
+            onClickIBtn1(id);
+        }
+    };
+    var handleIBtn2Click = function (e) {
+        e.stopPropagation();
+        if (state === 'disabled') {
+            return;
+        }
+        if (onClickIBtn2) {
+            onClickIBtn2(id);
+        }
+    };
+    var handleIBtn3Click = function (e) {
+        e.stopPropagation();
+        if (state === 'disabled') {
+            return;
+        }
+        if (onClickIBtn3) {
+            onClickIBtn3(id);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(S_BoxItem, __assign({ "x-pds-name": "BoxItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", onClick: handleClick }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ shapeType: "round", radius: 16, width: "100%", height: "responsive", paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, borderMode: "use", borderColorTheme: state === 'disabled' ? undefined : selectState === 'selected' ? 'blue' : undefined, overrideBorderColorKey: state === 'disabled'
+                ? 'ui_cpnt_sheet_base'
+                : selectState === 'selected'
+                    ? undefined
+                    : 'ui_cpnt_sheet_base', borderWidth: selectionMode === 'use' ? 2 : undefined, overrideCSS: {
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                cursor: state === 'disabled' ? 'default' : selectionMode === 'use' ? 'pointer' : 'default'
+            } }, { children: [(0, jsx_runtime_1.jsxs)(S_LeftBox, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox, __assign({ hasRightBox: true }, { children: (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { selected: selectState === 'selected', isIndeterminate: checkboxMode === 'indeterminate' }) }))), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: titleText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : titleTextColorKey, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, ellipsisMode: "use" })), descText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: descText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : descTextColorKey, lineLimit: descLineLimit, ellipsisMode: "use", styleTheme: "caption1Regular" }))] })] }), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [chipMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, onClick: handleIBtn3Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] })] })) })));
+}
+var S_BoxItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n  width: 100%;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+var S_TextGroup = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n"], ["\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+});
+var S_LeftBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n"])));
+var S_RightBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n"])));
+exports.default = BoxItem;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/mobile/components/BoxItem/LeftBox/Checkbox.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export type CheckboxPropTypes = {
+    selected?: boolean;
+    isIndeterminate?: boolean;
+};
+declare const Checkbox: React.FC<CheckboxPropTypes>;
+export default Checkbox;

package/dist/src/mobile/components/BoxItem/LeftBox/Checkbox.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("../../../../hybrid/components");
+var Checkbox = function (_a) {
+    var selected = _a.selected, isIndeterminate = _a.isIndeterminate;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selected ? (isIndeterminate ? ((0, jsx_runtime_1.jsx)(components_1.Icon, { size: 20, iconName: "ic_checkbox_indeterminate", colorKey: "ui_cpnt_selcontrols_icon_primary", fillType: "fill" })) : ((0, jsx_runtime_1.jsx)(components_1.Icon, { size: 20, iconName: "ic_checkbox_on", colorKey: "ui_cpnt_selcontrols_icon_primary", fillType: "fill" }))) : ((0, jsx_runtime_1.jsx)(components_1.Icon, { size: 20, iconName: "ic_checkbox_off", colorKey: "ui_cpnt_selcontrols_icon_default", fillType: "line" })), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c", spacingType: "width" })] }));
+};
+exports.default = Checkbox;

package/dist/src/mobile/components/BoxItem/LeftBox/Image.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { BoxItemProps } from '../BoxItem';
+export type ImagePropTypes = {
+    src: BoxItemProps['imageSrc'];
+    shape: BoxItemProps['imageShapeType'];
+    ratio: BoxItemProps['imageRatio'];
+    width: BoxItemProps['imageWidth'];
+    scaleType: BoxItemProps['imageScaleType'];
+};
+declare const Image: React.FC<ImagePropTypes>;
+export default Image;

package/dist/src/mobile/components/BoxItem/LeftBox/Image.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("../../../../hybrid/components");
+var Image = function (_a) {
+    var src = _a.src, shape = _a.shape, ratio = _a.ratio, width = _a.width, scaleType = _a.scaleType;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.ImageView, { width: width, height: 40, src: src, scaleType: scaleType, shapeType: shape, ratio: ratio }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c", spacingType: "width" })] }));
+};
+exports.default = Image;

package/dist/src/mobile/components/BoxItem/LeftBox/LeftBox.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { CheckboxPropTypes } from './Checkbox';
+import type { ImagePropTypes } from './Image';
+type LeftBoxPropTypes = React.FunctionComponent<{
+    hasRightBox: boolean;
+}> & {
+    Checkbox: React.FC<CheckboxPropTypes>;
+    Image: React.FC<ImagePropTypes>;
+};
+declare const LeftBox: LeftBoxPropTypes;
+export default LeftBox;

package/dist/src/mobile/components/BoxItem/LeftBox/LeftBox.js

@@ -0,0 +1,36 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var Checkbox_1 = __importDefault(require("./Checkbox"));
+var Image_1 = __importDefault(require("./Image"));
+var LeftBox = function (_a) {
+    var children = _a.children, hasRightBox = _a.hasRightBox;
+    return ((0, jsx_runtime_1.jsx)(S_LeftBox, __assign({ hasRightBox: hasRightBox }, { children: children })));
+};
+var S_LeftBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  flex: ", ";\n"])), function (_a) {
+    var hasRightBox = _a.hasRightBox;
+    return (hasRightBox ? 7 : 'auto');
+});
+LeftBox.Checkbox = Checkbox_1.default;
+LeftBox.Image = Image_1.default;
+exports.default = LeftBox;
+var templateObject_1;

package/dist/src/mobile/components/BoxItem/LeftBox/index.d.ts

@@ -0,0 +1,2 @@
+import LeftBox from './LeftBox';
+export { LeftBox };

package/dist/src/mobile/components/BoxItem/LeftBox/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LeftBox = void 0;
+var LeftBox_1 = __importDefault(require("./LeftBox"));
+exports.LeftBox = LeftBox_1.default;

package/dist/src/mobile/components/BoxItem/index.d.ts

@@ -0,0 +1 @@
+export { default as BoxItem } from './BoxItem';

package/dist/src/mobile/components/BoxItem/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoxItem = void 0;
+var BoxItem_1 = require("./BoxItem");
+Object.defineProperty(exports, "BoxItem", { enumerable: true, get: function () { return __importDefault(BoxItem_1).default; } });

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

@@ -9,8 +9,7 @@ export type ChatBubbleListItemProps = {
     colorTheme?: ColorThemeType;
     timeMode?: 'none' | 'use';
     timeText?: PDSTextType;
-    countMode?: 'none' | 'use';
-    countText?: PDSTextType;
+    labelText?: PDSTextType;
     contextMenuOptionArray?: PDSValueOption[];
     contextMenuState?: 'normal' | 'disabled';
     children?: React.ReactNode;
@@ -18,5 +17,5 @@ export type ChatBubbleListItemProps = {
     onClickContextMenuItem?: (option: PDSValueOption) => void;
     onClickDownloadIBtn?: () => void;
 };
-declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, countMode, countText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, onClickContextMenuItem, onClickDownloadIBtn }: ChatBubbleListItemProps): JSX.Element;
+declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, labelText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, onClickContextMenuItem, onClickDownloadIBtn }: ChatBubbleListItemProps): JSX.Element;
 export default ChatBubbleListItem;

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

@@ -68,8 +68,8 @@ var profileImageBorderColorTheme = {
     transparent: 'ui_cpnt_list_chatbubble_base_transparent'
 };
 function ChatBubbleListItem(_a) {
-    var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, _e = _a.countMode, countMode = _e === void 0 ? 'none' : _e, countText = _a.countText, contextMenuOptionArray = _a.contextMenuOptionArray, _f = _a.contextMenuState, contextMenuState = _f === void 0 ? 'normal' : _f, children = _a.children, _g = _a.downloadIBtnMode, downloadIBtnMode = _g === void 0 ? 'none' : _g, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn;
-    var _h = (0, react_1.useState)(false), isContextMenuOpen = _h[0], setIsContextMenuOpen = _h[1];
+    var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, labelText = _a.labelText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, _f = _a.downloadIBtnMode, downloadIBtnMode = _f === void 0 ? 'none' : _f, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn;
+    var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
     var contextMenuRef = (0, react_1.useRef)(null);
     var chatBody = document.querySelector('#chatMessageBox');
     var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -80,26 +80,21 @@ function ChatBubbleListItem(_a) {
         styleTheme === 'other_avatar' ||
         styleTheme === 'other_avatar_sub';
     var titleTextColorTheme = 'sysTextPrimary';
-    var countTextColorTheme = 'sysTextPrimary';
     switch (colorTheme) {
         case 'grey': {
             titleTextColorTheme = 'sysTextPrimary';
-            countTextColorTheme = 'sysTextPrimary';
             break;
         }
         case 'brand_primary': {
             titleTextColorTheme = 'usrTextBrandPrimary';
-            countTextColorTheme = 'sysTextPrimary';
             break;
         }
         case 'translucent_white': {
             titleTextColorTheme = 'sysTextBlack';
-            countTextColorTheme = 'sysTextPrimary';
             break;
         }
         case 'translucent_black': {
             titleTextColorTheme = 'sysTextWhite';
-            countTextColorTheme = 'sysTextPrimary';
         }
     }
     /**
@@ -142,7 +137,7 @@ function ChatBubbleListItem(_a) {
         }
         setIsContextMenuOpen(false);
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] }))] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] }))] }))] })), hoverMode === 'use' && !isMe && ((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 }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.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)); }) }) })) })] })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] }))] })), hoverMode === 'use' && !isMe && ((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 }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.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)); }) }) })) })] })) }));
 }
 var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/components/ChatList/Body.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Props as ChatListProps } from './ChatList';
-declare const Body: React.ForwardRefExoticComponent<Pick<ChatListProps, "children" | "scrollVisibleType" | "bodyMBtnText" | "bodySpacingMode" | "bodyChildren"> & {
+declare const Body: React.ForwardRefExoticComponent<Pick<ChatListProps, "children" | "scrollVisibleType" | "bodySpacingMode" | "bodyMBtnText" | "bodyChildren"> & {
     isSubmitted: boolean;
     callBackAfterScrollToBottom: () => void;
 } & React.RefAttributes<HTMLDivElement>>;

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

@@ -5,6 +5,7 @@ import { BasicList } from './BasicList';
 import { BasicListItem } from './BasicListItem';
 import { BlogTextField } from './BlogTextField';
 import { BodyTextGroup } from './BodyTextGroup';
+import { BoxItem } from './BoxItem';
 import { Card } from './Card';
 import { CardList } from './CardList';
 import { ChatBubbleListItem } from './ChatBubbleListItem';
@@ -36,4 +37,4 @@ import { TextLabel } from './TextLabel';
 import { UploadIconButton } from './UploadIconButton';
 import { UploadMainButton } from './UploadMainButton';
 import { UploadTextButton } from './UploadTextButton';
-export { BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DatePicker, Dropdown, FloatingActionButton, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, MobileAlertDialog, MobileHeaderBar, MobileTabBar, Radio, ReactionButton, SegmentedButtonGroup, Select, Slider, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton };
+export { BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, BoxItem, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DatePicker, Dropdown, FloatingActionButton, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, MobileAlertDialog, MobileHeaderBar, MobileTabBar, Radio, ReactionButton, SegmentedButtonGroup, Select, Slider, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton };

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.ReactionButton = exports.Radio = exports.MobileTabBar = exports.MobileHeaderBar = exports.MobileAlertDialog = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.FloatingActionButton = exports.Dropdown = exports.DatePicker = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.BasicButtonGroup = void 0;
+exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.ReactionButton = exports.Radio = exports.MobileTabBar = exports.MobileHeaderBar = exports.MobileAlertDialog = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.FloatingActionButton = exports.Dropdown = exports.DatePicker = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BoxItem = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.BasicButtonGroup = void 0;
 var BasicButtonGroup_1 = require("./BasicButtonGroup");
 Object.defineProperty(exports, "BasicButtonGroup", { enumerable: true, get: function () { return BasicButtonGroup_1.BasicButtonGroup; } });
 var BasicChatListItem_1 = require("./BasicChatListItem");
@@ -15,6 +15,8 @@ var BlogTextField_1 = require("./BlogTextField");
 Object.defineProperty(exports, "BlogTextField", { enumerable: true, get: function () { return BlogTextField_1.BlogTextField; } });
 var BodyTextGroup_1 = require("./BodyTextGroup");
 Object.defineProperty(exports, "BodyTextGroup", { enumerable: true, get: function () { return BodyTextGroup_1.BodyTextGroup; } });
+var BoxItem_1 = require("./BoxItem");
+Object.defineProperty(exports, "BoxItem", { enumerable: true, get: function () { return BoxItem_1.BoxItem; } });
 var Card_1 = require("./Card");
 Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
 var CardList_1 = require("./CardList");

package/dist/src/mobile/index.d.ts

@@ -9,5 +9,5 @@ export { ContainersBox as MPContainersBox } from './layout/LayoutMP/ContainersBo
 export { LayoutMS } from './layout/LayoutMS';
 export { NavigationContainer as MSNavigationContainer } from './layout/LayoutMS/Containers';
 export { ContainersBox as MSContainersBox } from './layout/LayoutMS/ContainersBox';
-export { BasicButtonGroup as M_BasicButtonGroup, BasicChatListItem as M_BasicChatListItem, BasicFormGroup as M_BasicFormGroup, BasicList as M_BasicList, BasicListItem as M_BasicListItem, BlogTextField as M_BlogTextField, BodyTextGroup as M_BodyTextGroup, Card as M_Card, CardList as M_CardList, ChatBubbleListItem as M_ChatBubbleListItem, ChatList as M_ChatList, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, DatePicker as M_DatePicker, Dropdown as M_Dropdown, FloatingActionButton as M_FloatingActionButton, HorizontalFormGroup as M_HorizontalFormGroup, IconButton as M_IconButton, ImageSlide as M_ImageSlide, LottieReactionButton as M_LottieReactionButton, MainButton as M_MainButton, MobileAlertDialog as M_MobileAlertDialog, MobileHeaderBar as M_MobileHeaderBar, MobileTabBar as M_MobileTabBar, Radio as M_Radio, ReactionButton as M_ReactionButton, SegmentedButtonGroup as M_SegmentedButtonGroup, Select as M_Select, Slider as M_Slider, StatusBlock as M_StatusBlock, TextButton as M_TextButton, TextField as M_TextField, TextLabel as M_TextLabel, UploadIconButton as M_UploadIconButton, UploadMainButton as M_UploadMainButton, UploadTextButton as M_UploadTextButton } from './components';
+export { BasicButtonGroup as M_BasicButtonGroup, BasicChatListItem as M_BasicChatListItem, BasicFormGroup as M_BasicFormGroup, BasicList as M_BasicList, BasicListItem as M_BasicListItem, BlogTextField as M_BlogTextField, BodyTextGroup as M_BodyTextGroup, BoxItem as M_BoxItem, Card as M_Card, CardList as M_CardList, ChatBubbleListItem as M_ChatBubbleListItem, ChatList as M_ChatList, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, DatePicker as M_DatePicker, Dropdown as M_Dropdown, FloatingActionButton as M_FloatingActionButton, HorizontalFormGroup as M_HorizontalFormGroup, IconButton as M_IconButton, ImageSlide as M_ImageSlide, LottieReactionButton as M_LottieReactionButton, MainButton as M_MainButton, MobileAlertDialog as M_MobileAlertDialog, MobileHeaderBar as M_MobileHeaderBar, MobileTabBar as M_MobileTabBar, Radio as M_Radio, ReactionButton as M_ReactionButton, SegmentedButtonGroup as M_SegmentedButtonGroup, Select as M_Select, Slider as M_Slider, StatusBlock as M_StatusBlock, TextButton as M_TextButton, TextField as M_TextField, TextLabel as M_TextLabel, UploadIconButton as M_UploadIconButton, UploadMainButton as M_UploadMainButton, UploadTextButton as M_UploadTextButton } from './components';
 export { AnnotationSheet as M_AnnotationSheet, ContentSheet as M_ContentSheet, MobileBasicModal as M_MobileBasicModal, SectionSheet as M_SectionSheet } from './panels';

package/dist/src/mobile/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Slider = exports.M_Select = exports.M_SegmentedButtonGroup = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_FloatingActionButton = exports.M_Dropdown = exports.M_DatePicker = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.M_BasicButtonGroup = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = void 0;
-exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = void 0;
+exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Slider = exports.M_Select = exports.M_SegmentedButtonGroup = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_FloatingActionButton = exports.M_Dropdown = exports.M_DatePicker = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BoxItem = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.M_BasicButtonGroup = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = void 0;
+exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = exports.M_UploadTextButton = void 0;
 // layoutMF
 var LayoutMF_1 = require("./layout/LayoutMF");
 Object.defineProperty(exports, "LayoutMF", { enumerable: true, get: function () { return LayoutMF_1.LayoutMF; } });
@@ -38,6 +38,7 @@ Object.defineProperty(exports, "M_BasicList", { enumerable: true, get: function
 Object.defineProperty(exports, "M_BasicListItem", { enumerable: true, get: function () { return components_1.BasicListItem; } });
 Object.defineProperty(exports, "M_BlogTextField", { enumerable: true, get: function () { return components_1.BlogTextField; } });
 Object.defineProperty(exports, "M_BodyTextGroup", { enumerable: true, get: function () { return components_1.BodyTextGroup; } });
+Object.defineProperty(exports, "M_BoxItem", { enumerable: true, get: function () { return components_1.BoxItem; } });
 Object.defineProperty(exports, "M_Card", { enumerable: true, get: function () { return components_1.Card; } });
 Object.defineProperty(exports, "M_CardList", { enumerable: true, get: function () { return components_1.CardList; } });
 Object.defineProperty(exports, "M_ChatBubbleListItem", { enumerable: true, get: function () { return components_1.ChatBubbleListItem; } });

package/dist/src/sub/DynamicLayout/CompositionRenderer/ComponentBlockMatcher.js

@@ -46,12 +46,9 @@ function ComponentBlockMatcher(_a) {
             return (0, jsx_runtime_1.jsx)(Youtube_1.Youtube, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_EMBED:
             return (0, jsx_runtime_1.jsx)(Embed_1.default, __assign({}, propsWithValue, { index: index }));
-        case types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL: {
+        case types_1.CB_ALL_CODES.CB_CONTENTS_CAROUSEL: {
             return (0, jsx_runtime_1.jsx)("div", { children: "NOT SUPPORTED NESTED CAROUSEL" });
         }
-        case types_1.CB_ALL_CODES.CB_LIST: {
-            return (0, jsx_runtime_1.jsx)("div", { children: "NOT SUPPORTED NESTED CONTENTSLIST" });
-        }
         default:
             return (0, jsx_runtime_1.jsx)("div", { children: "Error: not supported CB" });
     }

package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.d.ts

@@ -1,11 +1,9 @@
 import React from 'react';
-import type { IComposition } from '../types';
-import type { Layout } from 'publ-echo-test/dist/lib/GridLayoutEditor/types';
+import type { ISection } from '../types';
+import type { Layout } from 'publ-echo/dist/lib/GridLayoutEditor/types';
 export type LayoutsType = {
     sm: Layout;
     lg: Layout;
 };
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IComposition & {
-    device?: "DESKTOP" | "MOBILE" | undefined;
-} & React.RefAttributes<unknown>>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ISection & React.RefAttributes<unknown>>>;
 export default _default;