pds-dev-kit-web-test 0.2.29 → 0.2.31

package/dist/src/desktop/components/AdminList/HeaderRow.js

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -41,9 +45,9 @@ var Checkbox_1 = require("../Checkbox");
 var TextLabel_1 = require("../TextLabel");
 function HeaderRow(_a) {
     var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'multi' : _b, column2HeaderText = _a.column2HeaderText, column3HeaderText = _a.column3HeaderText, _c = _a.column3HeaderWidth, column3HeaderWidth = _c === void 0 ? 'small' : _c, column4HeaderText = _a.column4HeaderText, _d = _a.column4HeaderWidth, column4HeaderWidth = _d === void 0 ? 'small' : _d, column5HeaderText = _a.column5HeaderText, _e = _a.column5HeaderWidth, column5HeaderWidth = _e === void 0 ? 'small' : _e, column6HeaderText = _a.column6HeaderText, _f = _a.column6HeaderWidth, column6HeaderWidth = _f === void 0 ? 'small' : _f, column7HeaderText = _a.column7HeaderText, _g = _a.column7HeaderWidth, column7HeaderWidth = _g === void 0 ? 'small' : _g, column8HeaderText = _a.column8HeaderText, _h = _a.column8HeaderWidth, column8HeaderWidth = _h === void 0 ? 'small' : _h, column9HeaderText = _a.column9HeaderText, _j = _a.column9HeaderWidth, column9HeaderWidth = _j === void 0 ? 'small' : _j, column10HeaderText = _a.column10HeaderText, _k = _a.column10HeaderWidth, column10HeaderWidth = _k === void 0 ? 'small' : _k, _l = _a.quickActionBtnType, quickActionBtnType = _l === void 0 ? 'fix' : _l, _m = _a.quickActionButtonCount, quickActionButtonCount = _m === void 0 ? 2 : _m, _o = _a.headerRowCheckboxName, headerRowCheckboxName = _o === void 0 ? 'all' : _o, _p = _a.flexibleHideInfoMode, flexibleHideInfoMode = _p === void 0 ? 'use' : _p, onClickSelectAllCheckbox = _a.onClickSelectAllCheckbox;
-    return ((0, jsx_runtime_1.jsxs)(S_HeaderRow, __assign({ flexibleHideInfoMode: flexibleHideInfoMode }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }, void 0), selectionMode === 'multi' && ((0, jsx_runtime_1.jsx)(S_CheckBox, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { name: headerRowCheckboxName, onChange: onClickSelectAllCheckbox }, void 0) }, void 0)), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(S_FlexColumn, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column2HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }, void 0) }, void 0), column3HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column3HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column3HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }, void 0) }), void 0)), column4HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column4HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column4HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }, void 0) }), void 0)), column5HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column5HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column5HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }, void 0) }), void 0)), column6HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column6HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column6HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }, void 0) }), void 0)), column7HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column7HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column7HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }, void 0) }), void 0)), column8HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column8HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column8HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }, void 0) }), void 0)), column9HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column9HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column9HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }, void 0) }), void 0)), column10HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column10HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column10HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }, void 0) }), void 0)), quickActionBtnType === 'hover' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_f", spacingType: "width" }, void 0), quickActionBtnType === 'fix' && quickActionButtonCount > 0 && ((0, jsx_runtime_1.jsx)(S_QuickActionButtonBox, { children: Array(quickActionButtonCount)
+    return ((0, jsx_runtime_1.jsxs)(S_HeaderRow, __assign({ flexibleHideInfoMode: flexibleHideInfoMode }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }), selectionMode === 'multi' && ((0, jsx_runtime_1.jsx)(S_CheckBox, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { name: headerRowCheckboxName, onChange: onClickSelectAllCheckbox }) })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_FlexColumn, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column2HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }), column3HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column3HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column3HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), column4HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column4HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column4HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), column5HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column5HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column5HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), column6HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column6HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column6HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), column7HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column7HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column7HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), column8HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column8HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column8HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), column9HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column9HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column9HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), column10HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column10HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column10HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), quickActionBtnType === 'hover' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_f", spacingType: "width" }), quickActionBtnType === 'fix' && quickActionButtonCount > 0 && ((0, jsx_runtime_1.jsx)(S_QuickActionButtonBox, { children: Array(quickActionButtonCount)
                     .fill(0)
-                    .map(function (el, i) { return ((0, jsx_runtime_1.jsx)(S_EmptyDiv, {}, "" + el + i)); }) }, void 0))] }), void 0));
+                    .map(function (el, i) { return ((0, jsx_runtime_1.jsx)(S_EmptyDiv, {}, "".concat(el).concat(i))); }) }))] })));
 }
 var small = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 56px;\n"], ["\n  width: 56px;\n"])));
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 80px;\n"], ["\n  width: 80px;\n"])));

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { AdminListDropdownValueOption } from '../../../common';
 import type { TFunctionResult } from 'i18next';
-declare type Props = {
+type Props = {
     headerBarSize?: 'regular' | 'small';
     headerBarTitleText?: TFunctionResult;
     currentPage?: number;

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

@@ -47,7 +47,7 @@ function AdminListHeader(_a) {
     _c = _a.itemCountUnit, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     itemCountUnit = _c === void 0 ? 15 : _c, _d = _a.currentPage, currentPage = _d === void 0 ? 1 : _d, _e = _a.totalPage, totalPage = _e === void 0 ? 1 : _e, contentText = _a.contentText, filterBar = _a.filterBar, _f = _a.dropdownTextArray, dropdownTextArray = _f === void 0 ? defaultPaginationTextArray : _f, dropdownDefaultValue = _a.dropdownDefaultValue, onChangeCount = _a.onChangeCount, onClickNextButton = _a.onClickNextButton, onClickPrevButton = _a.onClickPrevButton;
-    return ((0, jsx_runtime_1.jsxs)(S_AdminListHeader, __assign({ "x-pds-name": "AdminListHeader", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(HeaderBar_1.default, { titleText: headerBarTitleText, size: headerBarSize, currentPage: currentPage, totalPage: totalPage, dropdownTextArray: dropdownTextArray, dropdownDefaultValue: dropdownDefaultValue, onChangeDropdown: onChangeCount, onClickIBtn1: onClickNextButton, onClickIBtn2: onClickPrevButton }, void 0), headerBarTitleText && !contentText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), headerBarTitleText && contentText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }, void 0), contentText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0)] }, void 0)), filterBar && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_FilterBarWrapper, { children: filterBar }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0)] }, void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_AdminListHeader, __assign({ "x-pds-name": "AdminListHeader", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(HeaderBar_1.default, { titleText: headerBarTitleText, size: headerBarSize, currentPage: currentPage, totalPage: totalPage, dropdownTextArray: dropdownTextArray, dropdownDefaultValue: dropdownDefaultValue, onChangeDropdown: onChangeCount, onClickIBtn1: onClickNextButton, onClickIBtn2: onClickPrevButton }), headerBarTitleText && !contentText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), headerBarTitleText && contentText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), contentText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }) }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })), filterBar && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_FilterBarWrapper, { children: filterBar }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] }))] })));
 }
 var S_AdminListHeader = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 var S_ContentTextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {

package/dist/src/desktop/components/AdminListHeader/HeaderBar.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { AdminListDropdownValueOption } from '../../../common/types';
 import type { TFunctionResult } from 'i18next';
-declare type Props = {
+type Props = {
     titleText?: TFunctionResult;
     size?: 'regular' | 'small';
     currentPage?: number;

package/dist/src/desktop/components/AdminListHeader/HeaderBar.js

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -49,7 +53,7 @@ function HeaderBar(_a) {
             onChangeDropdown(option);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(S_HeaderBar, __assign({ size: size }, { children: [(0, jsx_runtime_1.jsx)(S_HeaderTitle, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: size === 'regular' ? 'headingBold' : 'body1Bold' }, void 0) }, void 0), (0, jsx_runtime_1.jsxs)(S_HeaderControl, { children: [(0, jsx_runtime_1.jsxs)(S_ListCount, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: t('str_rows_per_page'), styleTheme: "caption1Regular" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, { customWidth: "88px", size: "small", valueArray: dropdownTextArray, onChange: handleDropdown, defaultValue: dropdownDefaultValue !== null && dropdownDefaultValue !== void 0 ? dropdownDefaultValue : dropdownTextArray[0] }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(S_Page, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: currentPage, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: " / ", styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: totalPage, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(S_IconButtonBox, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_arrow_left", iconFillType: "line", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: onClickIBtn2 }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_arrow_right", iconFillType: "line", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: onClickIBtn1 }, void 0)] }, void 0)] }, void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_HeaderBar, __assign({ size: size }, { children: [(0, jsx_runtime_1.jsx)(S_HeaderTitle, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: size === 'regular' ? 'headingBold' : 'body1Bold' }) }), (0, jsx_runtime_1.jsxs)(S_HeaderControl, { children: [(0, jsx_runtime_1.jsxs)(S_ListCount, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: t('str_rows_per_page'), styleTheme: "caption1Regular" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, { customWidth: "88px", size: "small", valueArray: dropdownTextArray, onChange: handleDropdown, defaultValue: dropdownDefaultValue !== null && dropdownDefaultValue !== void 0 ? dropdownDefaultValue : dropdownTextArray[0] })] }), (0, jsx_runtime_1.jsxs)(S_Page, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: currentPage, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: " / ", styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: totalPage, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary" })] }), (0, jsx_runtime_1.jsxs)(S_IconButtonBox, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_arrow_left", iconFillType: "line", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: onClickIBtn2 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_arrow_right", iconFillType: "line", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: onClickIBtn1 })] })] })] })));
 }
 var regular = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 40px;\n"], ["\n  height: 40px;\n"])));
 var small = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n"], ["\n  height: 40px;\n"])));

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import type { PDSTextType } from '../../../common';
 import type { TFunctionResult } from 'i18next';
-declare type ColumnWidthType = 'small' | 'medium' | 'large' | 'xlarge';
-declare type ColumnTextType = 'normal' | 'active' | 'active2' | 'inactive' | 'report' | 'report2';
-export declare type AdminListItemProps = {
+type ColumnWidthType = 'small' | 'medium' | 'large' | 'xlarge';
+type ColumnTextType = 'normal' | 'active' | 'active2' | 'inactive' | 'report' | 'report2';
+export type AdminListItemProps = {
     rowSize?: 'high' | 'medium' | 'low';
     selectionMode?: 'none' | 'single' | 'multi';
     column2Type?: 'image_text' | 'text_only';

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -107,12 +111,12 @@ var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
         if (quickActionBtnMode !== 'none' && quickActionBtn1Text) {
             return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [quickActionBtnMode === 'btn_amount3' && quickActionBtn3Text && ((0, jsx_runtime_1.jsx)(S_QuickActionButton, __assign({ onClick: handleClickQuickActionBtn3, disabled: quickActionBtn3State === 'disabled' }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: quickActionBtn3Text, styleTheme: "caption1Regular", colorTheme: "sysTextBrandPrimary", colorOverride: quickActionBtn3State === 'disabled'
                                 ? 'ui_cpnt_textlabel_sys_brand_primary_opacity50'
-                                : undefined, textAlign: "center" }, void 0) }), void 0)), (quickActionBtnMode === 'btn_amount2' || quickActionBtnMode === 'btn_amount3') &&
+                                : undefined, textAlign: "center" }) }))), (quickActionBtnMode === 'btn_amount2' || quickActionBtnMode === 'btn_amount3') &&
                         quickActionBtn2Text && ((0, jsx_runtime_1.jsx)(S_QuickActionButton, __assign({ onClick: handleClickQuickActionBtn2, disabled: quickActionBtn2State === 'disabled' }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: quickActionBtn2Text, styleTheme: "caption1Regular", colorTheme: "sysTextBrandPrimary", colorOverride: quickActionBtn2State === 'disabled'
                                 ? 'ui_cpnt_textlabel_sys_brand_primary_opacity50'
-                                : undefined, textAlign: "center" }, void 0) }), void 0)), (0, jsx_runtime_1.jsx)(S_QuickActionButton, __assign({ onClick: handleClickQuickActionBtn1, disabled: quickActionBtn1State === 'disabled' }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: quickActionBtn1Text, styleTheme: "caption1Regular", colorTheme: "sysTextBrandPrimary", colorOverride: quickActionBtn1State === 'disabled'
+                                : undefined, textAlign: "center" }) }))), (0, jsx_runtime_1.jsx)(S_QuickActionButton, __assign({ onClick: handleClickQuickActionBtn1, disabled: quickActionBtn1State === 'disabled' }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: quickActionBtn1Text, styleTheme: "caption1Regular", colorTheme: "sysTextBrandPrimary", colorOverride: quickActionBtn1State === 'disabled'
                                 ? 'ui_cpnt_textlabel_sys_brand_primary_opacity50'
-                                : undefined, textAlign: "center" }, void 0) }), void 0)] }, void 0));
+                                : undefined, textAlign: "center" }) }))] }));
         }
     };
     var getColumnColorTheme = function (style) {
@@ -153,7 +157,7 @@ var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
             }
         }
     }
-    return ((0, jsx_runtime_1.jsxs)(S_AdminListItem, __assign({ "x-pds-name": "AdminListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", ref: ref, rowSize: rowSize, onClick: handleClick, isSelected: isSelected, quickActionBtnType: quickActionBtnType, flexibleHideInfoMode: flexibleHideInfoMode }, { children: [(0, jsx_runtime_1.jsx)(S_SelectionColumn, __assign({ rowSize: rowSize }, { children: selectionMode === 'multi' && ((0, jsx_runtime_1.jsx)(S_Selection, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { name: id.toString(), state: selectedState === 'maintain' ? 'disabled' : 'normal' }, void 0) }, void 0)) }), void 0), (0, jsx_runtime_1.jsxs)(S_ImageColumn, __assign({ rowSize: rowSize }, { children: [column2Type === 'image_text' && (rowSize === 'high' || rowSize === 'medium') && ((0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ rowSize: rowSize }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: imageShapeType, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType, radius: imageShapeType === 'round' ? imageRadius : undefined, backgroundFillMode: "use" }, void 0) }), void 0)), (rowSize === 'low' || rowSize === 'medium') && ((0, jsx_runtime_1.jsx)(S_RowTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 2 }, void 0) }, void 0)), rowSize === 'high' && ((0, jsx_runtime_1.jsx)(S_HighTextWrapper, __assign({ ref: contentRef, hasScroll: hasScroll }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary" }, void 0) }), void 0))] }), void 0), column3Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column3TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column3Text, styleTheme: column3TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column3TextStyleTheme) }, void 0) }), void 0)), column4Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column4TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column4Text, styleTheme: column4TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column4TextStyleTheme) }, void 0) }), void 0)), column5Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column5TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column5Text, styleTheme: column5TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column5TextStyleTheme) }, void 0) }), void 0)), column6Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column6TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column6Text, styleTheme: column6TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column6TextStyleTheme) }, void 0) }), void 0)), column7Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column7TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column7Text, styleTheme: column7TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column7TextStyleTheme) }, void 0) }), void 0)), column8Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column8TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column8Text, styleTheme: column8TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column8TextStyleTheme) }, void 0) }), void 0)), column9Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column9TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column9Text, styleTheme: column9TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column9TextStyleTheme) }, void 0) }), void 0)), column10Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column10TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column10Text, styleTheme: column10TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column10TextStyleTheme) }, void 0) }), void 0)), quickActionBtnMode !== 'none' && ((0, jsx_runtime_1.jsx)(S_QuickActionButtonBox, __assign({ quickActionBtnType: quickActionBtnType }, { children: quickActionButtons() }), void 0)), quickActionBtnType === 'hover' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_f", spacingType: "width" }, void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_AdminListItem, __assign({ "x-pds-name": "AdminListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", ref: ref, rowSize: rowSize, onClick: handleClick, isSelected: isSelected, quickActionBtnType: quickActionBtnType, flexibleHideInfoMode: flexibleHideInfoMode }, { children: [(0, jsx_runtime_1.jsx)(S_SelectionColumn, __assign({ rowSize: rowSize }, { children: selectionMode === 'multi' && ((0, jsx_runtime_1.jsx)(S_Selection, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { name: id.toString(), state: selectedState === 'maintain' ? 'disabled' : 'normal' }) })) })), (0, jsx_runtime_1.jsxs)(S_ImageColumn, __assign({ rowSize: rowSize }, { children: [column2Type === 'image_text' && (rowSize === 'high' || rowSize === 'medium') && ((0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ rowSize: rowSize }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: imageShapeType, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType, radius: imageShapeType === 'round' ? imageRadius : undefined, backgroundFillMode: "use" }) }))), (rowSize === 'low' || rowSize === 'medium') && ((0, jsx_runtime_1.jsx)(S_RowTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 2 }) })), rowSize === 'high' && ((0, jsx_runtime_1.jsx)(S_HighTextWrapper, __assign({ ref: contentRef, hasScroll: hasScroll }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary" }) })))] })), column3Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column3TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column3Text, styleTheme: column3TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column3TextStyleTheme) }) }))), column4Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column4TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column4Text, styleTheme: column4TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column4TextStyleTheme) }) }))), column5Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column5TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column5Text, styleTheme: column5TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column5TextStyleTheme) }) }))), column6Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column6TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column6Text, styleTheme: column6TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column6TextStyleTheme) }) }))), column7Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column7TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column7Text, styleTheme: column7TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column7TextStyleTheme) }) }))), column8Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column8TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column8Text, styleTheme: column8TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column8TextStyleTheme) }) }))), column9Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column9TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column9Text, styleTheme: column9TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column9TextStyleTheme) }) }))), column10Text && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column10TextWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: column10Text, styleTheme: column10TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column10TextStyleTheme) }) }))), quickActionBtnMode !== 'none' && ((0, jsx_runtime_1.jsx)(S_QuickActionButtonBox, __assign({ quickActionBtnType: quickActionBtnType }, { children: quickActionButtons() }))), quickActionBtnType === 'hover' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_f", spacingType: "width" })] })));
 });
 var highRow = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 200px;\n  max-height: 200px;\n"], ["\n  height: 200px;\n  max-height: 200px;\n"])));
 var mediumRow = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100px;\n  max-height: 100px;\n"], ["\n  height: 100px;\n  max-height: 100px;\n"])));

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { BasicButtonGroupValueOption } from '../../../common/types';
-export declare type BasicButtonGroupProps = {
+export type BasicButtonGroupProps = {
     size?: 'large' | 'medium' | 'small';
     valueArray: BasicButtonGroupValueOption[];
     state?: 'normal' | 'disabled';

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -54,8 +58,8 @@ function BasicButtonGroup(_a) {
     };
     return ((0, jsx_runtime_1.jsx)(S_BasicButtonGroup, __assign({ "x-pds-name": "BasicButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: valueArray.map(function (_a, index) {
             var iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, onClick = _a.onClick, onMouseDown = _a.onMouseDown, tooltipText = _a.tooltipText, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? 'center_bottom' : _d, _e = _a.iconColorTheme, iconColorTheme = _e === void 0 ? 'none' : _e;
-            return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, onPointerEnter: function () { return setHoveredButtonIndex(index); }, onPointerLeave: function () { return setHoveredButtonIndex(null); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }, void 0), tooltipText && ((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: hoveredButtonIndex === index, tooltipPosition: tooltipPosition, size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }, void 0) }), void 0))] }), iconName + index));
-        }) }), void 0));
+            return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, onPointerEnter: function () { return setHoveredButtonIndex(index); }, onPointerLeave: function () { return setHoveredButtonIndex(null); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }), tooltipText && ((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: hoveredButtonIndex === index, tooltipPosition: tooltipPosition, size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }) })))] }), iconName + index));
+        }) })));
 }
 var S_BasicButtonGroup = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -103,7 +107,7 @@ var S_TooltipWrapper = styled_components_1.default.div(templateObject_13 || (tem
     return theme.spacing.spacingA;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingA + " " + theme.spacing.spacingB;
+    return "".concat(theme.spacing.spacingA, " ").concat(theme.spacing.spacingB);
 }, function (_a) {
     var isTooltipOpen = _a.isTooltipOpen;
     return !isTooltipOpen && 'display: none';

package/dist/src/desktop/components/BasicButtonGroup/constants.js

@@ -9,7 +9,7 @@ exports.ICON_BUTTON_SIZE = {
 exports.ICON_BUTTON_TOOLTIP_SPACING = 8;
 // NOTE - iconSize 크기에 따라 위치를 이동시켜주고, iconButtonSize에 간격까지 8px을 추가해준 값입니다.(IconButton과 tooltip의 간격)
 exports.TOOLTIP_POSITION_SPACING = {
-    large: "calc(" + exports.ICON_BUTTON_SIZE.large + "px + " + exports.ICON_BUTTON_TOOLTIP_SPACING + "px)",
-    medium: "calc(" + exports.ICON_BUTTON_SIZE.medium + "px + " + exports.ICON_BUTTON_TOOLTIP_SPACING + "px)",
-    small: "calc(" + exports.ICON_BUTTON_SIZE.small + "px + " + exports.ICON_BUTTON_TOOLTIP_SPACING + "px)"
+    large: "calc(".concat(exports.ICON_BUTTON_SIZE.large, "px + ").concat(exports.ICON_BUTTON_TOOLTIP_SPACING, "px)"),
+    medium: "calc(".concat(exports.ICON_BUTTON_SIZE.medium, "px + ").concat(exports.ICON_BUTTON_TOOLTIP_SPACING, "px)"),
+    small: "calc(".concat(exports.ICON_BUTTON_SIZE.small, "px + ").concat(exports.ICON_BUTTON_TOOLTIP_SPACING, "px)")
 };

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

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

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

@@ -67,7 +67,7 @@ function BasicChatListItem(_a) {
         }
         setIsContextMenuOpen(false);
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_BasicChatListItem, __assign({ "x-pds-name": "BasicChatListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", colorTheme: colorTheme }, { children: [leftImageMode === 'use' && ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }, void 0) }, void 0)), (0, jsx_runtime_1.jsx)(S_TitleTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'subscriber_transparent' ? 'sysTextWhite' : 'sysTextPrimary', wordBreak: "break_all" }, void 0) }, void 0), hoverMode === 'use' && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }, void 0) }), void 0)), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }, void 0) }), void 0) }, void 0)] }), void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_BasicChatListItem, __assign({ "x-pds-name": "BasicChatListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", colorTheme: colorTheme }, { children: [leftImageMode === 'use' && ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }) })), (0, jsx_runtime_1.jsx)(S_TitleTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] }) }), (0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'subscriber_transparent' ? 'sysTextWhite' : 'sysTextPrimary', wordBreak: "break_all" }) }), hoverMode === 'use' && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) }))), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
 }
 var S_BasicChatListItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n  min-height: 24px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  background-color: ", ";\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n  min-height: 24px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;

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

@@ -1,5 +1,5 @@
 import { MutableRefObject } from 'react';
-declare type Props = {
+type Props = {
     targetRef: MutableRefObject<HTMLElement | null>;
     isOpen: boolean;
     onClickOutside?: () => void;

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

@@ -30,13 +30,13 @@ function getHAutoPlacement(_a) {
     var targetRect = _a.targetRect, popupRect = _a.popupRect;
     var leftSpaced = targetRect.right + popupRect.width > window.innerWidth;
     var topSpaced = targetRect.bottom + popupRect.height > window.innerHeight;
-    return (leftSpaced ? 'left' : 'right') + "-" + (topSpaced ? 'end' : 'start');
+    return "".concat(leftSpaced ? 'left' : 'right', "-").concat(topSpaced ? 'end' : 'start');
 }
 function getVAutoPlacement(_a) {
     var targetRect = _a.targetRect, popupRect = _a.popupRect, wrapperHeight = _a.wrapperHeight;
     var leftSpaced = targetRect.right + popupRect.width > window.innerWidth;
     var topSpaced = targetRect.bottom + popupRect.height > (wrapperHeight || window.innerWidth);
-    return (topSpaced ? 'top' : 'bottom') + "-" + (leftSpaced ? 'end' : 'start');
+    return "".concat(topSpaced ? 'top' : 'bottom', "-").concat(leftSpaced ? 'end' : 'start');
 }
 function getVCenterPlacement(_a) {
     var targetRect = _a.targetRect, popupRect = _a.popupRect;
@@ -73,93 +73,93 @@ function updatePosition(_a) {
     var normPlacement = getNormalizedPlacement({ placement: placement, targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
     switch (normPlacement) {
         case 'top':
-            popupElem.style.top = targetRect.top - popupRect.height + "px";
-            popupElem.style.left = targetRect.left - (popupRect.width - targetRect.width) / 2 + "px";
+            popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
+            popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
             popupElem.style.width = 'auto';
             break;
         case 'top-start':
-            popupElem.style.top = targetRect.top - popupRect.height + "px";
-            popupElem.style.left = targetRect.left + "px";
+            popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
+            popupElem.style.left = "".concat(targetRect.left, "px");
             popupElem.style.width = 'auto';
             break;
         case 'top-end':
-            popupElem.style.top = targetRect.top - popupRect.height + "px";
-            popupElem.style.left = targetRect.left + targetRect.width - popupRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
+            popupElem.style.left = "".concat(targetRect.left + targetRect.width - popupRect.width, "px");
             popupElem.style.width = 'auto';
             break;
         case 'top-both':
-            popupElem.style.top = targetRect.top - popupRect.height + "px";
-            popupElem.style.left = targetRect.left + "px";
-            popupElem.style.width = targetRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
+            popupElem.style.left = "".concat(targetRect.left, "px");
+            popupElem.style.width = "".concat(targetRect.width, "px");
             break;
         case 'top-center':
-            popupElem.style.top = targetRect.top - popupRect.height + "px";
-            popupElem.style.left = targetRect.left - (popupRect.width - targetRect.width) / 2 + "px";
+            popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
+            popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
             popupElem.style.width = 'auto';
             break;
         case 'bottom':
-            popupElem.style.top = targetRect.bottom + "px";
-            popupElem.style.left = targetRect.left - (popupRect.width - targetRect.width) / 2 + "px";
+            popupElem.style.top = "".concat(targetRect.bottom, "px");
+            popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
             popupElem.style.width = 'auto';
             break;
         case 'bottom-start':
-            popupElem.style.top = targetRect.bottom + "px";
-            popupElem.style.left = targetRect.left + "px";
+            popupElem.style.top = "".concat(targetRect.bottom, "px");
+            popupElem.style.left = "".concat(targetRect.left, "px");
             popupElem.style.width = 'auto';
             break;
         case 'bottom-end':
-            popupElem.style.top = targetRect.bottom + "px";
-            popupElem.style.left = targetRect.right - popupRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.bottom, "px");
+            popupElem.style.left = "".concat(targetRect.right - popupRect.width, "px");
             popupElem.style.width = 'auto';
             break;
         case 'bottom-both':
-            popupElem.style.top = targetRect.bottom + "px";
-            popupElem.style.left = targetRect.left + "px";
-            popupElem.style.width = targetRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.bottom, "px");
+            popupElem.style.left = "".concat(targetRect.left, "px");
+            popupElem.style.width = "".concat(targetRect.width, "px");
             break;
         case 'bottom-center':
-            popupElem.style.top = targetRect.bottom + "px";
-            popupElem.style.left = targetRect.left - (popupRect.width - targetRect.width) / 2 + "px";
+            popupElem.style.top = "".concat(targetRect.bottom, "px");
+            popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
             popupElem.style.width = 'auto';
             break;
         case 'left':
-            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) / 2 + "px";
-            popupElem.style.left = targetRect.left - popupRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
+            popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
             popupElem.style.width = 'auto';
             break;
         case 'left-start':
-            popupElem.style.top = targetRect.top + "px";
-            popupElem.style.left = targetRect.left - popupRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.top, "px");
+            popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
             popupElem.style.width = 'auto';
             break;
         case 'left-end':
-            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) + "px";
-            popupElem.style.left = targetRect.left - popupRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
+            popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
             popupElem.style.width = 'auto';
             break;
         case 'left-center':
-            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) / 2 + "px";
-            popupElem.style.left = targetRect.left - popupRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
+            popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
             popupElem.style.width = 'auto';
             break;
         case 'right':
-            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) / 2 + "px";
-            popupElem.style.left = targetRect.left + targetRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
+            popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
             popupElem.style.width = 'auto';
             break;
         case 'right-start':
-            popupElem.style.top = targetRect.top + "px";
-            popupElem.style.left = targetRect.left + targetRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.top, "px");
+            popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
             popupElem.style.width = 'auto';
             break;
         case 'right-end':
-            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) + "px";
-            popupElem.style.left = targetRect.left + targetRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
+            popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
             popupElem.style.width = 'auto';
             break;
         case 'right-center':
-            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) / 2 + "px";
-            popupElem.style.left = targetRect.left + targetRect.width + "px";
+            popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
+            popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
             popupElem.style.width = 'auto';
             break;
         default:
@@ -209,9 +209,9 @@ function Popup(_a) {
         }
     }
     if (!popupRootRef || !popupRootRef.current || !isOpen) {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }
-    var popupComponent = ((0, jsx_runtime_1.jsx)(S_Popup, __assign({ ref: popupRef, onClick: function (e) { return handlePopupClick(e); } }, { children: typeof children === 'function' ? children(normPlacement) : children }), void 0));
+    var popupComponent = ((0, jsx_runtime_1.jsx)(S_Popup, __assign({ ref: popupRef, onClick: function (e) { return handlePopupClick(e); } }, { children: typeof children === 'function' ? children(normPlacement) : children })));
     return (0, react_dom_1.createPortal)(popupComponent, popupRootRef.current);
 }
 exports.Popup = Popup;
@@ -223,7 +223,7 @@ var S_Popup = styled_components_1.default.div(templateObject_1 || (templateObjec
 function PopupProvider(_a) {
     var children = _a.children;
     var ref = (0, react_1.useRef)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PopupContext.Provider, __assign({ value: ref }, { children: children }), void 0), (0, jsx_runtime_1.jsx)("div", { ref: ref }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PopupContext.Provider, __assign({ value: ref }, { children: children })), (0, jsx_runtime_1.jsx)("div", { ref: ref })] }));
 }
 exports.PopupProvider = PopupProvider;
 var templateObject_1;

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

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

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

@@ -16,6 +16,6 @@ var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function BasicFormGroup(_a) {
     var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, inputForm = _a.inputForm;
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BasicFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [titleText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }, void 0)] }, void 0)), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0)] }, void 0)), inputForm, captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" }, void 0)] }, void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BasicFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [titleText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })), inputForm, captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" })] }))] })));
 }
 exports.default = BasicFormGroup;

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

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

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

@@ -24,24 +24,24 @@ var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function BasicList(_a) {
     var children = _a.children, _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'headingBold' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.columns, columns = _c === void 0 ? 1 : _c, _d = _a.columnSpacing, columnSpacing = _d === void 0 ? 16 : _d, _e = _a.rowSpacing, rowSpacing = _e === void 0 ? 0 : _e, _f = _a.spacingMode, spacingMode = _f === void 0 ? 'use' : _f;
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BasicList", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(titleText || captionText) && ((0, jsx_runtime_1.jsxs)(S_TitleBox, __assign({ spacingMode: spacingMode }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme }, void 0), titleText && captionText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }, void 0), captionText && (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "body2Regular" }, void 0)] }), void 0)), (0, jsx_runtime_1.jsx)(S_BasicListWrapper, __assign({ columns: columns, columnSpacing: columnSpacing, rowSpacing: rowSpacing }, { children: children }), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BasicList", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(titleText || captionText) && ((0, jsx_runtime_1.jsxs)(S_TitleBox, __assign({ spacingMode: spacingMode }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme }), titleText && captionText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }), captionText && (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "body2Regular" })] }))), (0, jsx_runtime_1.jsx)(S_BasicListWrapper, __assign({ columns: columns, columnSpacing: columnSpacing, rowSpacing: rowSpacing }, { children: children }))] })));
 }
 var S_TitleBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  padding: ", ";\n"], ["\n  margin-bottom: ", ";\n  padding: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return "" + theme.spacing.spacingD;
+    return "".concat(theme.spacing.spacingD);
 }, function (_a) {
     var spacingMode = _a.spacingMode, theme = _a.theme;
-    return spacingMode === 'use' && "0 " + theme.spacing.spacingE;
+    return spacingMode === 'use' && "0 ".concat(theme.spacing.spacingE);
 });
 var S_BasicListWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  column-gap: ", ";\n  display: grid;\n  grid-template-columns: ", ";\n  row-gap: ", ";\n"], ["\n  column-gap: ", ";\n  display: grid;\n  grid-template-columns: ", ";\n  row-gap: ", ";\n"])), function (_a) {
     var columnSpacing = _a.columnSpacing;
-    return columnSpacing && columnSpacing + "px";
+    return columnSpacing && "".concat(columnSpacing, "px");
 }, function (_a) {
     var columns = _a.columns;
-    return columns && "repeat(" + columns + ", 1fr)";
+    return columns && "repeat(".concat(columns, ", 1fr)");
 }, function (_a) {
     var rowSpacing = _a.rowSpacing;
-    return rowSpacing && rowSpacing + "px";
+    return rowSpacing && "".concat(rowSpacing, "px");
 });
 exports.default = BasicList;
 var templateObject_1, templateObject_2;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
-export declare type BasicListItemProps = {
+export type BasicListItemProps = {
     selectionMode?: 'none' | 'check' | 'radio';
     titleText: PDSTextType;
     titleTextColorTheme?: 'none' | 'logout';
@@ -36,7 +36,7 @@ export declare type BasicListItemProps = {
     onClickRadio?: (value: string) => void;
     onClickSwitch?: () => void;
 };
-export declare type StyleProps = {
+export type StyleProps = {
     isSelected?: boolean;
     selectionMode?: 'none' | 'check' | 'radio';
     captionText?: PDSTextType;

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

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