pds-dev-kit-web 2.2.186 → 2.2.188

package/dist/index.d.ts

@@ -8,20 +8,20 @@ export { AdminListItemTransition, InputTransition, ButtonTransition } from './sr
 export { Form };
 import { Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch } from './src/hybrid';
 export { Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch };
-import { LayoutWF, WFContainersBox, LayoutWH, WHContainersBox, LayoutWS, WSGlobalMenuContainer, WSContainersBox, LayoutWT, WTGlobalMenuContainer, WTContainersBox, D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicButtonGroup, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_LottieReactionButton, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_SegmentedButtonGroup, D_Select, D_Slider, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab, D_AnnotationSheet, D_ContentSheet, D_DesktopBasicModal, D_DesktopBasicModalWithTab, DesktopBasicModalWithTabInfoType, D_DesktopHeadlessModal, D_DesktopTutorialModal, DesktopTutorialModalInfoType, D_SectionSheet } from './src/desktop';
+import { LayoutWF, WFContainersBox, LayoutWH, WHContainersBox, LayoutWS, WSGlobalMenuContainer, WSContainersBox, LayoutWT, WTGlobalMenuContainer, WTContainersBox, D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicButtonGroup, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_BoxItem, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_LottieReactionButton, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_SegmentedButtonGroup, D_Select, D_Slider, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab, D_AnnotationSheet, D_ContentSheet, D_DesktopBasicModal, D_DesktopBasicModalWithTab, DesktopBasicModalWithTabInfoType, D_DesktopHeadlessModal, D_DesktopTutorialModal, DesktopTutorialModalInfoType, D_SectionSheet } from './src/desktop';
 export { LayoutWF, WFContainersBox };
 export { LayoutWH, WHContainersBox };
 export { LayoutWS, WSGlobalMenuContainer, WSContainersBox };
 export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
-export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicButtonGroup, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_LottieReactionButton, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_SegmentedButtonGroup, D_Select, D_Slider, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab };
+export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicButtonGroup, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_BoxItem, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_LottieReactionButton, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_SegmentedButtonGroup, D_Select, D_Slider, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab };
 export { D_AnnotationSheet, D_ContentSheet, D_DesktopBasicModal, D_DesktopBasicModalWithTab, D_DesktopHeadlessModal, D_DesktopTutorialModal, D_SectionSheet };
 export type { DesktopBasicModalWithTabInfoType, DesktopTutorialModalInfoType };
-import { LayoutMF, MFContainersBox, LayoutMM, MMNavigationContainer, MMContainersBox, LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox, LayoutMS, MSNavigationContainer, MSContainersBox, M_BasicButtonGroup, M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_ChatBubbleListItem, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_DatePicker, M_Dropdown, M_FloatingActionButton, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_LottieReactionButton, M_MainButton, M_MobileAlertDialog, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_SegmentedButtonGroup, M_Select, M_Slider, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton, M_AnnotationSheet, M_ContentSheet, M_MobileBasicModal, M_SectionSheet } from './src/mobile';
+import { LayoutMF, MFContainersBox, LayoutMM, MMNavigationContainer, MMContainersBox, LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox, LayoutMS, MSNavigationContainer, MSContainersBox, M_BasicButtonGroup, M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_BoxItem, M_Card, M_CardList, M_ChatBubbleListItem, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_DatePicker, M_Dropdown, M_FloatingActionButton, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_LottieReactionButton, M_MainButton, M_MobileAlertDialog, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_SegmentedButtonGroup, M_Select, M_Slider, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton, M_AnnotationSheet, M_ContentSheet, M_MobileBasicModal, M_SectionSheet } from './src/mobile';
 export { LayoutMF, MFContainersBox };
 export { LayoutMM, MMNavigationContainer, MMContainersBox };
 export { LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox };
 export { LayoutMS, MSNavigationContainer, MSContainersBox };
-export { M_BasicButtonGroup, M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_ChatBubbleListItem, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_DatePicker, M_Dropdown, M_FloatingActionButton, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_LottieReactionButton, M_MainButton, M_MobileAlertDialog, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_SegmentedButtonGroup, M_Select, M_Slider, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton };
+export { M_BasicButtonGroup, M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_BoxItem, M_Card, M_CardList, M_ChatBubbleListItem, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_DatePicker, M_Dropdown, M_FloatingActionButton, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_LottieReactionButton, M_MainButton, M_MobileAlertDialog, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_SegmentedButtonGroup, M_Select, M_Slider, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton };
 export { M_AnnotationSheet, M_ContentSheet, M_MobileBasicModal, M_SectionSheet };
 import { DynamicLayout } from './src/sub';
 export { DynamicLayout };

package/dist/index.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutWF = exports.Switch = exports.Spacing = exports.LottieIcon = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = exports.Form = exports.ButtonTransition = exports.InputTransition = exports.AdminListItemTransition = exports.scaleBounceOutIncludeTranslate02 = exports.scaleBounceInIncludeTranslate02 = exports.scaleBounceOutIncludeTranslate = exports.scaleBounceInIncludeTranslate = exports.scaleBounceOut02 = exports.scaleBounceOut = exports.scaleBounceIn02 = exports.scaleBounceIn = exports.gelatine = exports.scaleDownIncludeTranslate = exports.scaleUpIncludeTranslate = exports.scaleDown = exports.scaleUp = exports.glow = exports.fadeOut = exports.fadeIn = exports.modalOverlayOffAni = exports.modalOverlayOnAni = exports.modalOffAni = exports.modalOnAni = exports.dialogOverlayOffAni = exports.dialogOverlayOnAni = exports.dialogOffAni = exports.dialogOnAni = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileEditorLineHeight = exports.mobileEditorFontSize = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopEditorLineHeight = exports.desktopEditorFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
-exports.D_TextButton = exports.D_StatusBlock = exports.D_Slider = exports.D_Select = exports.D_SegmentedButtonGroup = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_LottieReactionButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_BasicButtonGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WHContainersBox = exports.LayoutWH = exports.WFContainersBox = void 0;
-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 = exports.D_SectionSheet = exports.D_DesktopTutorialModal = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModalWithTab = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = void 0;
-exports.ToolBar = exports.BulkActionBar = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = exports.DynamicLayout = exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = 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 = void 0;
+exports.D_StatusBlock = exports.D_Slider = exports.D_Select = exports.D_SegmentedButtonGroup = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_LottieReactionButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BoxItem = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_BasicButtonGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WHContainersBox = exports.LayoutWH = exports.WFContainersBox = void 0;
+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 = exports.D_SectionSheet = exports.D_DesktopTutorialModal = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModalWithTab = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = void 0;
+exports.ToolBar = exports.BulkActionBar = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = exports.DynamicLayout = exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = 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 = void 0;
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 // common
@@ -87,6 +87,7 @@ Object.defineProperty(exports, "D_BasicList", { enumerable: true, get: function
 Object.defineProperty(exports, "D_BasicListItem", { enumerable: true, get: function () { return desktop_1.D_BasicListItem; } });
 Object.defineProperty(exports, "D_BlogTextField", { enumerable: true, get: function () { return desktop_1.D_BlogTextField; } });
 Object.defineProperty(exports, "D_BodyTextGroup", { enumerable: true, get: function () { return desktop_1.D_BodyTextGroup; } });
+Object.defineProperty(exports, "D_BoxItem", { enumerable: true, get: function () { return desktop_1.D_BoxItem; } });
 Object.defineProperty(exports, "D_Card", { enumerable: true, get: function () { return desktop_1.D_Card; } });
 Object.defineProperty(exports, "D_CardList", { enumerable: true, get: function () { return desktop_1.D_CardList; } });
 Object.defineProperty(exports, "D_ChatBubbleListItem", { enumerable: true, get: function () { return desktop_1.D_ChatBubbleListItem; } });
@@ -154,6 +155,7 @@ Object.defineProperty(exports, "M_BasicList", { enumerable: true, get: function
 Object.defineProperty(exports, "M_BasicListItem", { enumerable: true, get: function () { return mobile_1.M_BasicListItem; } });
 Object.defineProperty(exports, "M_BlogTextField", { enumerable: true, get: function () { return mobile_1.M_BlogTextField; } });
 Object.defineProperty(exports, "M_BodyTextGroup", { enumerable: true, get: function () { return mobile_1.M_BodyTextGroup; } });
+Object.defineProperty(exports, "M_BoxItem", { enumerable: true, get: function () { return mobile_1.M_BoxItem; } });
 Object.defineProperty(exports, "M_Card", { enumerable: true, get: function () { return mobile_1.M_Card; } });
 Object.defineProperty(exports, "M_CardList", { enumerable: true, get: function () { return mobile_1.M_CardList; } });
 Object.defineProperty(exports, "M_ChatBubbleListItem", { enumerable: true, get: function () { return mobile_1.M_ChatBubbleListItem; } });

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

@@ -0,0 +1,64 @@
+/// <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;
+    chipOverrideTextColorKey?: UiColors;
+    chipOverrideBackgroundColorKey?: UiColors;
+    displayType?: 'none' | 'ibtn_amount1' | 'ibtn_amount2' | 'ibtn_amount3';
+    iBtn1IconName?: PDSIconType;
+    iBtn1IconFillType?: 'fill' | 'line';
+    iBtn1IconColorKey?: UiColors;
+    iBtn2IconName?: PDSIconType;
+    iBtn2IconFillType?: 'fill' | 'line';
+    iBtn2IconColorKey?: UiColors;
+    iBtn3IconName?: PDSIconType;
+    iBtn3IconFillType?: 'fill' | 'line';
+    iBtn3IconColorKey?: UiColors;
+    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, chipOverrideTextColorKey, chipOverrideBackgroundColorKey, 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/desktop/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 index_1 = require("../../index");
+var panels_1 = require("../../panels");
+var components_1 = require("../../../hybrid/components");
+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, chipOverrideTextColorKey = _a.chipOverrideTextColorKey, chipOverrideBackgroundColorKey = _a.chipOverrideBackgroundColorKey, _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": "desktop", 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.D_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.D_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, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }), (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.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, iconSize: 20, state: state, 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.D_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.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state, onClick: handleIBtn2Click, 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.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, state: state, onClick: handleIBtn1Click, 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.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state, onClick: handleIBtn2Click, 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.D_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, state: state, onClick: handleIBtn3Click, 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/desktop/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/desktop/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/desktop/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/desktop/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/desktop/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/desktop/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/desktop/components/BoxItem/LeftBox/index.d.ts

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

package/dist/src/desktop/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/desktop/components/BoxItem/index.d.ts

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

package/dist/src/desktop/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/desktop/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/desktop/components/index.d.ts

@@ -8,6 +8,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';
@@ -46,4 +47,4 @@ import { UploadTextButton } from './UploadTextButton';
 import { UserDesktopNavBar } from './UserDesktopNavBar';
 import { UserDesktopSideTab } from './UserDesktopSideTab';
 import { UserDesktopTabBar } from './UserDesktopTabBar';
-export { AdminList, AdminListHeader, AdminListItem, BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, PageTitleTextGroup, Radio, ReactionButton, SegmentedButtonGroup, Select, Slider, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab };
+export { AdminList, AdminListHeader, AdminListItem, BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, BoxItem, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, PageTitleTextGroup, Radio, ReactionButton, SegmentedButtonGroup, Select, Slider, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab };

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserDesktopSideTab = exports.UserDesktopTabBar = exports.UserDesktopNavBar = 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.PageTitleTextGroup = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeaderBar = exports.DesktopAlertDialog = 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 = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
+exports.UserDesktopSideTab = exports.UserDesktopTabBar = exports.UserDesktopNavBar = 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.PageTitleTextGroup = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeaderBar = exports.DesktopAlertDialog = 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 = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
 var AdminList_1 = require("./AdminList");
 Object.defineProperty(exports, "AdminList", { enumerable: true, get: function () { return AdminList_1.AdminList; } });
 var AdminListHeader_1 = require("./AdminListHeader");
@@ -21,6 +21,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/desktop/index.d.ts

@@ -8,5 +8,5 @@ export { ContainersBox as WSContainersBox } from './layout/LayoutWS/ContainersBo
 export { LayoutWT } from './layout/LayoutWT';
 export { GlobalMenuContainer as WTGlobalMenuContainer } from './layout/LayoutWT/Containers';
 export { ContainersBox as WTContainersBox } from './layout/LayoutWT/ContainersBox';
-export { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicButtonGroup as D_BasicButtonGroup, BasicChatListItem as D_BasicChatListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, Card as D_Card, CardList as D_CardList, ChatBubbleListItem as D_ChatBubbleListItem, ChatList as D_ChatList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, LottieReactionButton as D_LottieReactionButton, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, SegmentedButtonGroup as D_SegmentedButtonGroup, Select as D_Select, Slider as D_Slider, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab } from './components';
+export { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicButtonGroup as D_BasicButtonGroup, BasicChatListItem as D_BasicChatListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, BoxItem as D_BoxItem, Card as D_Card, CardList as D_CardList, ChatBubbleListItem as D_ChatBubbleListItem, ChatList as D_ChatList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, LottieReactionButton as D_LottieReactionButton, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, SegmentedButtonGroup as D_SegmentedButtonGroup, Select as D_Select, Slider as D_Slider, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab } from './components';
 export { AnnotationSheet as D_AnnotationSheet, ContentSheet as D_ContentSheet, DesktopBasicModal as D_DesktopBasicModal, DesktopBasicModalWithTab as D_DesktopBasicModalWithTab, DesktopBasicModalWithTabInfoType, DesktopHeadlessModal as D_DesktopHeadlessModal, DesktopTutorialModal as D_DesktopTutorialModal, DesktopTutorialModalInfoType, SectionSheet as D_SectionSheet } from './panels';

package/dist/src/desktop/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.D_StatusBlock = exports.D_Slider = exports.D_Select = exports.D_SegmentedButtonGroup = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_LottieReactionButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_BasicButtonGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WHContainersBox = exports.LayoutWH = exports.WFContainersBox = exports.LayoutWF = void 0;
-exports.D_SectionSheet = exports.D_DesktopTutorialModal = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModalWithTab = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = void 0;
+exports.D_Slider = exports.D_Select = exports.D_SegmentedButtonGroup = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_LottieReactionButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BoxItem = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_BasicButtonGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WHContainersBox = exports.LayoutWH = exports.WFContainersBox = exports.LayoutWF = void 0;
+exports.D_SectionSheet = exports.D_DesktopTutorialModal = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModalWithTab = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = void 0;
 // layoutWF
 var LayoutWF_1 = require("./layout/LayoutWF");
 Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
@@ -38,6 +38,7 @@ Object.defineProperty(exports, "D_BasicList", { enumerable: true, get: function
 Object.defineProperty(exports, "D_BasicListItem", { enumerable: true, get: function () { return components_1.BasicListItem; } });
 Object.defineProperty(exports, "D_BlogTextField", { enumerable: true, get: function () { return components_1.BlogTextField; } });
 Object.defineProperty(exports, "D_BodyTextGroup", { enumerable: true, get: function () { return components_1.BodyTextGroup; } });
+Object.defineProperty(exports, "D_BoxItem", { enumerable: true, get: function () { return components_1.BoxItem; } });
 Object.defineProperty(exports, "D_Card", { enumerable: true, get: function () { return components_1.Card; } });
 Object.defineProperty(exports, "D_CardList", { enumerable: true, get: function () { return components_1.CardList; } });
 Object.defineProperty(exports, "D_ChatBubbleListItem", { enumerable: true, get: function () { return components_1.ChatBubbleListItem; } });

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

@@ -0,0 +1,64 @@
+/// <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;
+    chipOverrideTextColorKey?: UiColors;
+    chipOverrideBackgroundColorKey?: UiColors;
+    displayType?: 'none' | 'ibtn_amount1' | 'ibtn_amount2' | 'ibtn_amount3';
+    iBtn1IconName?: PDSIconType;
+    iBtn1IconFillType?: 'fill' | 'line';
+    iBtn1IconColorKey?: UiColors;
+    iBtn2IconName?: PDSIconType;
+    iBtn2IconFillType?: 'fill' | 'line';
+    iBtn2IconColorKey?: UiColors;
+    iBtn3IconName?: PDSIconType;
+    iBtn3IconFillType?: 'fill' | 'line';
+    iBtn3IconColorKey?: UiColors;
+    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, chipOverrideTextColorKey, chipOverrideBackgroundColorKey, 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, chipOverrideTextColorKey = _a.chipOverrideTextColorKey, chipOverrideBackgroundColorKey = _a.chipOverrideBackgroundColorKey, _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, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }), (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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "2.2.186",
+  "version": "2.2.188",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,6 +1,6 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.186]
+## [v2.2.188]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* [PDS-1318] 비디오 CB 개선 건 - 트래픽 비용 절감 작업
+* [PDS-1324] 칩 컬러 prop 추가