pds-dev-kit-web-test 0.0.10 → 0.0.12

package/dist/src/common/styles/loading/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.skeletonLoadingStyle = void 0;
+var skeletonLoadingStyle_1 = require("./skeletonLoadingStyle");
+Object.defineProperty(exports, "skeletonLoadingStyle", { enumerable: true, get: function () { return skeletonLoadingStyle_1.skeletonLoadingStyle; } });

package/dist/src/common/styles/loading/skeletonLoadingStyle.d.ts

@@ -0,0 +1 @@
+export declare const skeletonLoadingStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;

package/dist/src/common/styles/loading/skeletonLoadingStyle.js

@@ -0,0 +1,28 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.skeletonLoadingStyle = void 0;
+var styled_components_1 = require("styled-components");
+exports.skeletonLoadingStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  -webkit-animation: skeleton-gradient 1.8s infinite ease-in-out;\n  animation: skeleton-gradient 1.8s infinite ease-in-out;\n\n  @-webkit-keyframes skeleton-gradient {\n    0% {\n      background-color: ", ";\n    }\n\n    50% {\n      background-color: ", ";\n    }\n\n    100% {\n      background-color: ", ";\n    }\n  }\n\n  @keyframes skeleton-gradient {\n    0% {\n      background-color: ", ";\n    }\n\n    50% {\n      background-color: ", ";\n    }\n\n    100% {\n      background-color: ", ";\n    }\n  }\n"], ["\n  -webkit-animation: skeleton-gradient 1.8s infinite ease-in-out;\n  animation: skeleton-gradient 1.8s infinite ease-in-out;\n\n  @-webkit-keyframes skeleton-gradient {\n    0% {\n      background-color: ", ";\n    }\n\n    50% {\n      background-color: ", ";\n    }\n\n    100% {\n      background-color: ", ";\n    }\n  }\n\n  @keyframes skeleton-gradient {\n    0% {\n      background-color: ", ";\n    }\n\n    50% {\n      background-color: ", ";\n    }\n\n    100% {\n      background-color: ", ";\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_loading_skeleton_01;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_loading_skeleton_02;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_loading_skeleton_01;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_loading_skeleton_01;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_loading_skeleton_02;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_loading_skeleton_01;
+});
+var templateObject_1;

package/dist/src/common/styles/theme.js

@@ -103,24 +103,23 @@ exports.boxShadow = {
     elevation4: '0 5px 20px 0 #0003',
     elevation5: '0 6px 24px 0 #0003'
 };
-var spacingMultiple = 1.3;
 exports.spacing = {
-    spacingA: "calc(4px * " + spacingMultiple + ")",
-    spacingB: "calc(8px * " + spacingMultiple + ")",
-    spacingC: "calc(12px * " + spacingMultiple + ")",
-    spacingD: "calc(16px * " + spacingMultiple + ")",
-    spacingE: "calc(24px * " + spacingMultiple + ")",
-    spacingF: "calc(32px * " + spacingMultiple + ")",
-    spacingG: "calc(48px * " + spacingMultiple + ")",
-    spacingH: "calc(64px * " + spacingMultiple + ")",
-    spacingI: "calc(88px * " + spacingMultiple + ")",
-    spacingJ: "calc(120px * " + spacingMultiple + ")",
-    spacingK: "calc(160px * " + spacingMultiple + ")",
-    spacingL: "calc(240px * " + spacingMultiple + ")",
-    spacingM: "calc(288px * " + spacingMultiple + ")",
-    spacingN: "calc(320px * " + spacingMultiple + ")"
+    spacingA: '4px',
+    spacingB: '8px',
+    spacingC: '12px',
+    spacingD: '16px',
+    spacingE: "calc(24px * 1.1)",
+    spacingF: "calc(32px * 1.2)",
+    spacingG: "calc(48px * 1.3)",
+    spacingH: "calc(64px * 1.2)",
+    spacingI: "calc(88px * 1.1)",
+    spacingJ: '120px',
+    spacingK: '160px',
+    spacingL: '240px',
+    spacingM: '288px',
+    spacingN: '320px'
 };
-var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing }, (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {}));
-var themeByGivenTone = function (tone) { return (__assign(__assign({}, (0, ui_colors_1.customTheme)(tone)), { fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing })); };
+var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing }, (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {}));
+var themeByGivenTone = function (tone) { return (__assign(__assign({}, (0, ui_colors_1.customTheme)(tone)), { fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing })); };
 exports.themeByGivenTone = themeByGivenTone;
 exports.default = theme;

package/dist/src/common/types/components.d.ts

@@ -7,6 +7,6 @@ export declare type PDSValueOption = {
 export declare type PDSTabItemOption = {
     title: PDSTextType;
     isActive: boolean;
-    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
 export declare type ForwardedRefType<T> = ForwardedRef<T | null>;

package/dist/src/common/types/styled-components.d.ts

@@ -91,20 +91,20 @@ export interface PdsDevKitTheme {
         elevation5: '0 6px 24px 0 #0003';
     };
     spacing: {
-        spacingA: `calc(4px * 1.3)`;
-        spacingB: `calc(8px * 1.3)`;
-        spacingC: `calc(12px * 1.3)`;
-        spacingD: `calc(16px * 1.3)`;
-        spacingE: `calc(24px * 1.3)`;
-        spacingF: `calc(32px * 1.3)`;
+        spacingA: '4px';
+        spacingB: '8px';
+        spacingC: '12px';
+        spacingD: '16px';
+        spacingE: `calc(24px * 1.1)`;
+        spacingF: `calc(32px * 1.2)`;
         spacingG: `calc(48px * 1.3)`;
-        spacingH: `calc(64px * 1.3)`;
-        spacingI: `calc(88px * 1.3)`;
-        spacingJ: `calc(120px * 1.3)`;
-        spacingK: `calc(160px * 1.3)`;
-        spacingL: `calc(240px * 1.3)`;
-        spacingM: `calc(288px * 1.3)`;
-        spacingN: `calc(320px * 1.3)`;
+        spacingH: `calc(64px * 1.2)`;
+        spacingI: `calc(88px * 1.1)`;
+        spacingJ: '120px';
+        spacingK: '160px';
+        spacingL: '240px';
+        spacingM: '288px';
+        spacingN: '320px';
     };
 }
 export declare type DesktopFontSize = keyof typeof desktopFontSize;

package/dist/src/common/utils/numberHelper.d.ts

@@ -0,0 +1,2 @@
+export declare function formatCompactNumber(num: number): string;
+export declare function formatStandardNumber(num: number): string;

package/dist/src/common/utils/numberHelper.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatStandardNumber = exports.formatCompactNumber = void 0;
+function formatCompactNumber(num) {
+    return new Intl.NumberFormat('en', { notation: 'compact' }).format(num);
+}
+exports.formatCompactNumber = formatCompactNumber;
+function formatStandardNumber(num) {
+    return new Intl.NumberFormat('en', { notation: 'standard' }).format(num);
+}
+exports.formatStandardNumber = formatStandardNumber;

package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.d.ts

@@ -16,7 +16,7 @@ export declare type TextFieldBaseProps = {
     autoMaxRows?: number;
     inputType?: string;
     state?: 'normal' | 'read_only' | 'disabled';
-    colorTheme?: 'none' | 'dark';
+    colorTheme?: 'none' | 'dark' | 'transparent';
     min?: number;
     max?: number;
     maxLength?: number;

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

@@ -209,7 +209,8 @@ var read_only = (0, styled_components_1.css)(templateObject_2 || (templateObject
     return colorTheme &&
         {
             none: theme.ui_cpnt_textfield_text_disabled,
-            dark: theme.ui_cpnt_textfield_text_darktheme_disabled
+            dark: theme.ui_cpnt_textfield_text_darktheme_disabled,
+            transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_readonly
         }[colorTheme];
 });
 var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  pointer-events: none;\n"], ["\n  color: ", ";\n  pointer-events: none;\n"])), function (_a) {
@@ -217,7 +218,8 @@ var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_
     return colorTheme &&
         {
             none: theme.ui_cpnt_textfield_text_disabled,
-            dark: theme.ui_cpnt_textfield_text_darktheme_disabled
+            dark: theme.ui_cpnt_textfield_text_darktheme_disabled,
+            transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_disabled
         }[colorTheme];
 });
 var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  cursor: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  cursor: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"])), function (_a) {
@@ -225,7 +227,8 @@ var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObjec
     return colorTheme &&
         {
             none: theme.ui_cpnt_textfield_text_typed,
-            dark: theme.ui_cpnt_textfield_text_darktheme_enabled
+            dark: theme.ui_cpnt_textfield_text_darktheme_enabled,
+            transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_enabled
         }[colorTheme];
 }, function (_a) {
     var state = _a.state;
@@ -244,7 +247,8 @@ var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObjec
     return colorTheme &&
         {
             none: theme.ui_cpnt_textfield_text_hint,
-            dark: theme.ui_cpnt_textfield_text_darktheme_hint
+            dark: theme.ui_cpnt_textfield_text_darktheme_hint,
+            transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_hint
         }[colorTheme];
 }, function (_a) {
     var textSize = _a.textSize;

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

@@ -47,6 +47,7 @@ declare type Props = {
     emptyText?: TFunctionResult;
     scrollMode?: 'infinite' | 'none' | 'page';
     scrollVisibleType?: 'moving' | 'hidden' | 'visible';
+    headerRowCheckboxName?: string;
     onChangeDropdown1?: (value: PDSValueOption) => void;
     onChangeDropdown2?: (value: PDSValueOption) => void;
     onChangeDropdown3?: (value: PDSValueOption) => void;
@@ -81,5 +82,5 @@ declare type Props = {
     /** @deprecated in 1.5.0 onClickTBtn3를 대신 사용하세요. */
     onClickMBtn3?: () => void;
 };
-declare function AdminList({ selectionMode, headerRowMode, column2HeaderText, column3HeaderText, column3Width, column4HeaderText, column4Width, column5HeaderText, column5Width, column6HeaderText, column6Width, column7HeaderText, column7Width, column8HeaderText, column8Width, column9HeaderText, column9Width, column10HeaderText, column10Width, dropdownMode, dropdown1Value, dropdown2Value, dropdown3Value, dropdown1DefaultText, dropdown2DefaultText, dropdown3DefaultText, dropdown1HintText, dropdown2HintText, dropdown3HintText, dropdown1ValueArray, dropdown2ValueArray, dropdown3ValueArray, quickActionBtnMode, quickActionBtn1Text, quickActionBtn2Text, quickActionBtn3Text, quickActionBtnType, tBtnMode, tBtn1Text, tBtn2Text, tBtn3Text, emptyText, scrollMode, scrollVisibleType, selectedIds, maintainIds, children, onChangeDropdown1, onChangeDropdown2, onChangeDropdown3, onClickTBtn1, onClickTBtn2, onClickTBtn3, onClickQuickActionBtn1, onClickQuickActionBtn2, onClickQuickActionBtn3, onSelect, quickActionBtn1State, quickActionBtn2State, quickActionBtn3State, mBtnMode, mBtn1Text, mBtn2Text, mBtn3Text, onClickMBtn1, onClickMBtn2, onClickMBtn3 }: Props): JSX.Element;
+declare function AdminList({ selectionMode, headerRowMode, column2HeaderText, column3HeaderText, column3Width, column4HeaderText, column4Width, column5HeaderText, column5Width, column6HeaderText, column6Width, column7HeaderText, column7Width, column8HeaderText, column8Width, column9HeaderText, column9Width, column10HeaderText, column10Width, dropdownMode, dropdown1Value, dropdown2Value, dropdown3Value, dropdown1DefaultText, dropdown2DefaultText, dropdown3DefaultText, dropdown1HintText, dropdown2HintText, dropdown3HintText, dropdown1ValueArray, dropdown2ValueArray, dropdown3ValueArray, quickActionBtnMode, quickActionBtn1Text, quickActionBtn2Text, quickActionBtn3Text, quickActionBtnType, tBtnMode, tBtn1Text, tBtn2Text, tBtn3Text, emptyText, scrollMode, scrollVisibleType, selectedIds, maintainIds, children, headerRowCheckboxName, onChangeDropdown1, onChangeDropdown2, onChangeDropdown3, onClickTBtn1, onClickTBtn2, onClickTBtn3, onClickQuickActionBtn1, onClickQuickActionBtn2, onClickQuickActionBtn3, onSelect, quickActionBtn1State, quickActionBtn2State, quickActionBtn3State, mBtnMode, mBtn1Text, mBtn2Text, mBtn3Text, onClickMBtn1, onClickMBtn2, onClickMBtn3 }: Props): JSX.Element;
 export default AdminList;

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

@@ -53,11 +53,14 @@ var TextLabel_1 = require("../TextLabel");
 var BulkActionBar_1 = __importDefault(require("./BulkActionBar"));
 var HeaderRow_1 = __importDefault(require("./HeaderRow"));
 function AdminList(_a) {
-    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'multi' : _b, _c = _a.headerRowMode, headerRowMode = _c === void 0 ? 'use' : _c, column2HeaderText = _a.column2HeaderText, column3HeaderText = _a.column3HeaderText, _d = _a.column3Width, column3Width = _d === void 0 ? 'small' : _d, column4HeaderText = _a.column4HeaderText, _e = _a.column4Width, column4Width = _e === void 0 ? 'small' : _e, column5HeaderText = _a.column5HeaderText, _f = _a.column5Width, column5Width = _f === void 0 ? 'small' : _f, column6HeaderText = _a.column6HeaderText, _g = _a.column6Width, column6Width = _g === void 0 ? 'small' : _g, column7HeaderText = _a.column7HeaderText, _h = _a.column7Width, column7Width = _h === void 0 ? 'small' : _h, column8HeaderText = _a.column8HeaderText, _j = _a.column8Width, column8Width = _j === void 0 ? 'small' : _j, column9HeaderText = _a.column9HeaderText, _k = _a.column9Width, column9Width = _k === void 0 ? 'small' : _k, column10HeaderText = _a.column10HeaderText, _l = _a.column10Width, column10Width = _l === void 0 ? 'small' : _l, _m = _a.dropdownMode, dropdownMode = _m === void 0 ? 'dropdown_amount1' : _m, dropdown1Value = _a.dropdown1Value, dropdown2Value = _a.dropdown2Value, dropdown3Value = _a.dropdown3Value, dropdown1DefaultText = _a.dropdown1DefaultText, dropdown2DefaultText = _a.dropdown2DefaultText, dropdown3DefaultText = _a.dropdown3DefaultText, dropdown1HintText = _a.dropdown1HintText, dropdown2HintText = _a.dropdown2HintText, dropdown3HintText = _a.dropdown3HintText, dropdown1ValueArray = _a.dropdown1ValueArray, dropdown2ValueArray = _a.dropdown2ValueArray, dropdown3ValueArray = _a.dropdown3ValueArray, _o = _a.quickActionBtnMode, quickActionBtnMode = _o === void 0 ? 'btn_amount2' : _o, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _p = _a.quickActionBtnType, quickActionBtnType = _p === void 0 ? 'fix' : _p, tBtnMode = _a.tBtnMode, tBtn1Text = _a.tBtn1Text, tBtn2Text = _a.tBtn2Text, tBtn3Text = _a.tBtn3Text, emptyText = _a.emptyText, _q = _a.scrollMode, scrollMode = _q === void 0 ? 'infinite' : _q, _r = _a.scrollVisibleType, scrollVisibleType = _r === void 0 ? 'moving' : _r, selectedIds = _a.selectedIds, maintainIds = _a.maintainIds, children = _a.children, onChangeDropdown1 = _a.onChangeDropdown1, onChangeDropdown2 = _a.onChangeDropdown2, onChangeDropdown3 = _a.onChangeDropdown3, onClickTBtn1 = _a.onClickTBtn1, onClickTBtn2 = _a.onClickTBtn2, onClickTBtn3 = _a.onClickTBtn3, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onSelect = _a.onSelect, quickActionBtn1State = _a.quickActionBtn1State, quickActionBtn2State = _a.quickActionBtn2State, quickActionBtn3State = _a.quickActionBtn3State, _s = _a.mBtnMode, mBtnMode = _s === void 0 ? 'mbtn_amount1' : _s, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3;
+    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'multi' : _b, _c = _a.headerRowMode, headerRowMode = _c === void 0 ? 'use' : _c, column2HeaderText = _a.column2HeaderText, column3HeaderText = _a.column3HeaderText, _d = _a.column3Width, column3Width = _d === void 0 ? 'small' : _d, column4HeaderText = _a.column4HeaderText, _e = _a.column4Width, column4Width = _e === void 0 ? 'small' : _e, column5HeaderText = _a.column5HeaderText, _f = _a.column5Width, column5Width = _f === void 0 ? 'small' : _f, column6HeaderText = _a.column6HeaderText, _g = _a.column6Width, column6Width = _g === void 0 ? 'small' : _g, column7HeaderText = _a.column7HeaderText, _h = _a.column7Width, column7Width = _h === void 0 ? 'small' : _h, column8HeaderText = _a.column8HeaderText, _j = _a.column8Width, column8Width = _j === void 0 ? 'small' : _j, column9HeaderText = _a.column9HeaderText, _k = _a.column9Width, column9Width = _k === void 0 ? 'small' : _k, column10HeaderText = _a.column10HeaderText, _l = _a.column10Width, column10Width = _l === void 0 ? 'small' : _l, _m = _a.dropdownMode, dropdownMode = _m === void 0 ? 'dropdown_amount1' : _m, dropdown1Value = _a.dropdown1Value, dropdown2Value = _a.dropdown2Value, dropdown3Value = _a.dropdown3Value, dropdown1DefaultText = _a.dropdown1DefaultText, dropdown2DefaultText = _a.dropdown2DefaultText, dropdown3DefaultText = _a.dropdown3DefaultText, dropdown1HintText = _a.dropdown1HintText, dropdown2HintText = _a.dropdown2HintText, dropdown3HintText = _a.dropdown3HintText, dropdown1ValueArray = _a.dropdown1ValueArray, dropdown2ValueArray = _a.dropdown2ValueArray, dropdown3ValueArray = _a.dropdown3ValueArray, _o = _a.quickActionBtnMode, quickActionBtnMode = _o === void 0 ? 'btn_amount2' : _o, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _p = _a.quickActionBtnType, quickActionBtnType = _p === void 0 ? 'fix' : _p, tBtnMode = _a.tBtnMode, tBtn1Text = _a.tBtn1Text, tBtn2Text = _a.tBtn2Text, tBtn3Text = _a.tBtn3Text, emptyText = _a.emptyText, _q = _a.scrollMode, scrollMode = _q === void 0 ? 'infinite' : _q, _r = _a.scrollVisibleType, scrollVisibleType = _r === void 0 ? 'moving' : _r, selectedIds = _a.selectedIds, maintainIds = _a.maintainIds, children = _a.children, _s = _a.headerRowCheckboxName, headerRowCheckboxName = _s === void 0 ? 'all' : _s, onChangeDropdown1 = _a.onChangeDropdown1, onChangeDropdown2 = _a.onChangeDropdown2, onChangeDropdown3 = _a.onChangeDropdown3, onClickTBtn1 = _a.onClickTBtn1, onClickTBtn2 = _a.onClickTBtn2, onClickTBtn3 = _a.onClickTBtn3, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onSelect = _a.onSelect, quickActionBtn1State = _a.quickActionBtn1State, quickActionBtn2State = _a.quickActionBtn2State, quickActionBtn3State = _a.quickActionBtn3State, _t = _a.mBtnMode, mBtnMode = _t === void 0 ? 'mbtn_amount1' : _t, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3;
     var selectAllMethods = (0, react_hook_form_1.useForm)();
     var checkboxMethods = (0, react_hook_form_1.useForm)();
-    var isAllCheckboxSelected = (0, react_hook_form_1.useWatch)({ name: 'all', control: selectAllMethods.control });
-    var _t = (0, react_1.useState)(false), isBulkActionBarOpen = _t[0], setIsBulkActionBarOpen = _t[1];
+    var isAllCheckboxSelected = (0, react_hook_form_1.useWatch)({
+        name: headerRowCheckboxName,
+        control: selectAllMethods.control
+    });
+    var _u = (0, react_1.useState)(false), isBulkActionBarOpen = _u[0], setIsBulkActionBarOpen = _u[1];
     /**
      * @when AdminListItem이 선택되었을 때
      * @expected 벌크액션바 활성화 여부와 체크박스 선택 여부를 결정합니다.
@@ -182,7 +185,7 @@ function AdminList(_a) {
         isBulkActionBarOpen && (react_1.default.createElement(BulkActionBar_1.default, { itemCount: totalItemCount, dropdownMode: dropdownMode, dropdown1Value: dropdown1Value, dropdown2Value: dropdown2Value, dropdown3Value: dropdown3Value, dropdown1DefaultText: dropdown1DefaultText, dropdown2DefaultText: dropdown2DefaultText, dropdown3DefaultText: dropdown3DefaultText, dropdown1HintText: dropdown1HintText, dropdown2HintText: dropdown2HintText, dropdown3HintText: dropdown3HintText, dropdown1ValueArray: dropdown1ValueArray, dropdown2ValueArray: dropdown2ValueArray, dropdown3ValueArray: dropdown3ValueArray, tBtnMode: btnMode(), tBtn1Text: tBtn1Text || mBtn1Text, tBtn2Text: tBtn2Text || mBtn2Text, tBtn3Text: tBtn3Text || mBtn3Text, onChangeDropdown1: onChangeDropdown1, onChangeDropdown2: onChangeDropdown2, onChangeDropdown3: onChangeDropdown3, onClickTBtn1: onClickTBtn1 || onClickMBtn1, onClickTBtn2: onClickTBtn2 || onClickMBtn2, onClickTBtn3: onClickTBtn3 || onClickMBtn3 })),
         headerRowMode === 'use' && (react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, selectAllMethods),
             react_1.default.createElement("form", null,
-                react_1.default.createElement(HeaderRow_1.default, { selectionMode: selectionMode, column2HeaderText: column2HeaderText, column3HeaderText: column3HeaderText, column3HeaderWidth: column3Width, column4HeaderText: column4HeaderText, column4HeaderWidth: column4Width, column5HeaderText: column5HeaderText, column5HeaderWidth: column5Width, column6HeaderText: column6HeaderText, column6HeaderWidth: column6Width, column7HeaderText: column7HeaderText, column7HeaderWidth: column7Width, column8HeaderText: column8HeaderText, column8HeaderWidth: column8Width, column9HeaderText: column9HeaderText, column9HeaderWidth: column9Width, column10HeaderText: column10HeaderText, column10HeaderWidth: column10Width, quickActionBtnType: quickActionBtnType, quickActionButtonCount: getActionButtonCount(), onClickSelectAllCheckbox: handleSelectAllCheckbox })))),
+                react_1.default.createElement(HeaderRow_1.default, { headerRowCheckboxName: headerRowCheckboxName, selectionMode: selectionMode, column2HeaderText: column2HeaderText, column3HeaderText: column3HeaderText, column3HeaderWidth: column3Width, column4HeaderText: column4HeaderText, column4HeaderWidth: column4Width, column5HeaderText: column5HeaderText, column5HeaderWidth: column5Width, column6HeaderText: column6HeaderText, column6HeaderWidth: column6Width, column7HeaderText: column7HeaderText, column7HeaderWidth: column7Width, column8HeaderText: column8HeaderText, column8HeaderWidth: column8Width, column9HeaderText: column9HeaderText, column9HeaderWidth: column9Width, column10HeaderText: column10HeaderText, column10HeaderWidth: column10Width, quickActionBtnType: quickActionBtnType, quickActionButtonCount: getActionButtonCount(), onClickSelectAllCheckbox: handleSelectAllCheckbox })))),
         react_1.default.createElement(S_ScrollBox, { scrollMode: scrollMode, scrollVisibleType: scrollVisibleType }, react_1.default.Children.count(children) ? (react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, checkboxMethods),
             react_1.default.createElement("form", null, childrenWithWidthProps))) : (react_1.default.createElement(S_EmptyTextWrapper, null,
             react_1.default.createElement(TextLabel_1.TextLabel, { text: emptyText, colorTheme: "sysTextTertiary", textAlign: "center", styleTheme: "body2Regular" }))))));

package/dist/src/desktop/components/AdminList/HeaderRow.d.ts

@@ -22,7 +22,8 @@ declare type Props = {
     column10HeaderWidth?: ColumnWidthType;
     quickActionBtnType?: 'hover' | 'fix';
     quickActionButtonCount?: number;
+    headerRowCheckboxName?: string;
     onClickSelectAllCheckbox?: () => void;
 };
-declare function HeaderRow({ selectionMode, column2HeaderText, column3HeaderText, column3HeaderWidth, column4HeaderText, column4HeaderWidth, column5HeaderText, column5HeaderWidth, column6HeaderText, column6HeaderWidth, column7HeaderText, column7HeaderWidth, column8HeaderText, column8HeaderWidth, column9HeaderText, column9HeaderWidth, column10HeaderText, column10HeaderWidth, quickActionBtnType, quickActionButtonCount, onClickSelectAllCheckbox }: Props): JSX.Element;
+declare function HeaderRow({ selectionMode, column2HeaderText, column3HeaderText, column3HeaderWidth, column4HeaderText, column4HeaderWidth, column5HeaderText, column5HeaderWidth, column6HeaderText, column6HeaderWidth, column7HeaderText, column7HeaderWidth, column8HeaderText, column8HeaderWidth, column9HeaderText, column9HeaderWidth, column10HeaderText, column10HeaderWidth, quickActionBtnType, quickActionButtonCount, headerRowCheckboxName, onClickSelectAllCheckbox }: Props): JSX.Element;
 export default HeaderRow;

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

@@ -32,11 +32,11 @@ var hybrid_1 = require("../../../hybrid");
 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, onClickSelectAllCheckbox = _a.onClickSelectAllCheckbox;
+    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, onClickSelectAllCheckbox = _a.onClickSelectAllCheckbox;
     return (react_1.default.createElement(S_HeaderRow, null,
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
         selectionMode === 'multi' && (react_1.default.createElement(S_CheckBox, null,
-            react_1.default.createElement(Checkbox_1.Checkbox, { name: "all", onChange: onClickSelectAllCheckbox }))),
+            react_1.default.createElement(Checkbox_1.Checkbox, { name: headerRowCheckboxName, onChange: onClickSelectAllCheckbox }))),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
         react_1.default.createElement(S_FlexColumn, null,
             react_1.default.createElement(TextLabel_1.TextLabel, { text: column2HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" })),

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

@@ -1,14 +1,15 @@
-/// <reference types="react" />
 import { TFunctionResult } from 'i18next';
+import React from 'react';
 import { PDSTextType } from '../../../common';
 declare type ColumnWidthType = 'small' | 'medium' | 'large';
-declare type ColumnTextType = 'normal' | 'active' | 'inactive' | 'report';
+declare type ColumnTextType = 'normal' | 'active' | 'active2' | 'inactive' | 'report';
 export declare type AdminListItemProps = {
     rowSize?: 'high' | 'medium' | 'low';
     selectionMode?: 'none' | 'single' | 'multi';
     column2Type?: 'image_text' | 'text_only';
     imageSrc?: string;
     imageShapeType?: 'round' | 'circular' | 'rectangle';
+    imageScaleType?: 'fill' | 'contain' | 'cover' | 'none';
     imageRadius?: 8 | 16 | 24;
     imageRatio?: '16_9' | '4_3' | '1_1';
     column2Text?: PDSTextType;
@@ -51,5 +52,5 @@ export declare type AdminListItemProps = {
     onClickQuickActionBtn3?: (id: number) => void;
     onClickItem?: (id: number) => void;
 };
-declare function AdminListItem({ rowSize, selectionMode, column2Type, imageSrc, imageShapeType, imageRadius, imageRatio, column2Text, column3Text, column3TextWidth, column3TextStyleTheme, column4Text, column4TextWidth, column4TextStyleTheme, column5Text, column5TextWidth, column5TextStyleTheme, column6Text, column6TextWidth, column6TextStyleTheme, column7Text, column7TextWidth, column7TextStyleTheme, column8Text, column8TextWidth, column8TextStyleTheme, column9Text, column9TextWidth, column9TextStyleTheme, column10Text, column10TextWidth, column10TextStyleTheme, quickActionBtnMode, quickActionBtn1Text, quickActionBtn2Text, quickActionBtn3Text, quickActionBtnType, quickActionBtn1State, quickActionBtn2State, quickActionBtn3State, selectedState, id, onClickQuickActionBtn1, onClickQuickActionBtn2, onClickQuickActionBtn3, onClickItem }: AdminListItemProps): JSX.Element;
+declare const AdminListItem: React.ForwardRefExoticComponent<AdminListItemProps & React.RefAttributes<HTMLDivElement>>;
 export default AdminListItem;

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

@@ -29,14 +29,14 @@ var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var Checkbox_1 = require("../Checkbox");
 var TextLabel_1 = require("../TextLabel");
-function AdminListItem(_a) {
-    var _b = _a.rowSize, rowSize = _b === void 0 ? 'medium' : _b, _c = _a.selectionMode, selectionMode = _c === void 0 ? 'multi' : _c, _d = _a.column2Type, column2Type = _d === void 0 ? 'image_text' : _d, imageSrc = _a.imageSrc, _e = _a.imageShapeType, imageShapeType = _e === void 0 ? 'rectangle' : _e, _f = _a.imageRadius, imageRadius = _f === void 0 ? 8 : _f, _g = _a.imageRatio, imageRatio = _g === void 0 ? '16_9' : _g, column2Text = _a.column2Text, column3Text = _a.column3Text, _h = _a.column3TextWidth, column3TextWidth = _h === void 0 ? 'small' : _h, _j = _a.column3TextStyleTheme, column3TextStyleTheme = _j === void 0 ? 'normal' : _j, column4Text = _a.column4Text, _k = _a.column4TextWidth, column4TextWidth = _k === void 0 ? 'small' : _k, _l = _a.column4TextStyleTheme, column4TextStyleTheme = _l === void 0 ? 'normal' : _l, column5Text = _a.column5Text, _m = _a.column5TextWidth, column5TextWidth = _m === void 0 ? 'small' : _m, _o = _a.column5TextStyleTheme, column5TextStyleTheme = _o === void 0 ? 'normal' : _o, column6Text = _a.column6Text, _p = _a.column6TextWidth, column6TextWidth = _p === void 0 ? 'small' : _p, _q = _a.column6TextStyleTheme, column6TextStyleTheme = _q === void 0 ? 'normal' : _q, column7Text = _a.column7Text, _r = _a.column7TextWidth, column7TextWidth = _r === void 0 ? 'small' : _r, _s = _a.column7TextStyleTheme, column7TextStyleTheme = _s === void 0 ? 'normal' : _s, column8Text = _a.column8Text, _t = _a.column8TextWidth, column8TextWidth = _t === void 0 ? 'small' : _t, _u = _a.column8TextStyleTheme, column8TextStyleTheme = _u === void 0 ? 'normal' : _u, column9Text = _a.column9Text, _v = _a.column9TextWidth, column9TextWidth = _v === void 0 ? 'small' : _v, _w = _a.column9TextStyleTheme, column9TextStyleTheme = _w === void 0 ? 'normal' : _w, column10Text = _a.column10Text, _x = _a.column10TextWidth, column10TextWidth = _x === void 0 ? 'small' : _x, _y = _a.column10TextStyleTheme, column10TextStyleTheme = _y === void 0 ? 'normal' : _y, _z = _a.quickActionBtnMode, quickActionBtnMode = _z === void 0 ? 'btn_amount2' : _z, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _0 = _a.quickActionBtnType, quickActionBtnType = _0 === void 0 ? 'fix' : _0, _1 = _a.quickActionBtn1State, quickActionBtn1State = _1 === void 0 ? 'normal' : _1, _2 = _a.quickActionBtn2State, quickActionBtn2State = _2 === void 0 ? 'normal' : _2, _3 = _a.quickActionBtn3State, quickActionBtn3State = _3 === void 0 ? 'normal' : _3, _4 = _a.selectedState, selectedState = _4 === void 0 ? 'basic' : _4, id = _a.id, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onClickItem = _a.onClickItem;
+var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b = _a.rowSize, rowSize = _b === void 0 ? 'medium' : _b, _c = _a.selectionMode, selectionMode = _c === void 0 ? 'multi' : _c, _d = _a.column2Type, column2Type = _d === void 0 ? 'image_text' : _d, imageSrc = _a.imageSrc, _e = _a.imageShapeType, imageShapeType = _e === void 0 ? 'rectangle' : _e, _f = _a.imageScaleType, imageScaleType = _f === void 0 ? 'cover' : _f, _g = _a.imageRadius, imageRadius = _g === void 0 ? 8 : _g, _h = _a.imageRatio, imageRatio = _h === void 0 ? '16_9' : _h, column2Text = _a.column2Text, column3Text = _a.column3Text, _j = _a.column3TextWidth, column3TextWidth = _j === void 0 ? 'small' : _j, _k = _a.column3TextStyleTheme, column3TextStyleTheme = _k === void 0 ? 'normal' : _k, column4Text = _a.column4Text, _l = _a.column4TextWidth, column4TextWidth = _l === void 0 ? 'small' : _l, _m = _a.column4TextStyleTheme, column4TextStyleTheme = _m === void 0 ? 'normal' : _m, column5Text = _a.column5Text, _o = _a.column5TextWidth, column5TextWidth = _o === void 0 ? 'small' : _o, _p = _a.column5TextStyleTheme, column5TextStyleTheme = _p === void 0 ? 'normal' : _p, column6Text = _a.column6Text, _q = _a.column6TextWidth, column6TextWidth = _q === void 0 ? 'small' : _q, _r = _a.column6TextStyleTheme, column6TextStyleTheme = _r === void 0 ? 'normal' : _r, column7Text = _a.column7Text, _s = _a.column7TextWidth, column7TextWidth = _s === void 0 ? 'small' : _s, _t = _a.column7TextStyleTheme, column7TextStyleTheme = _t === void 0 ? 'normal' : _t, column8Text = _a.column8Text, _u = _a.column8TextWidth, column8TextWidth = _u === void 0 ? 'small' : _u, _v = _a.column8TextStyleTheme, column8TextStyleTheme = _v === void 0 ? 'normal' : _v, column9Text = _a.column9Text, _w = _a.column9TextWidth, column9TextWidth = _w === void 0 ? 'small' : _w, _x = _a.column9TextStyleTheme, column9TextStyleTheme = _x === void 0 ? 'normal' : _x, column10Text = _a.column10Text, _y = _a.column10TextWidth, column10TextWidth = _y === void 0 ? 'small' : _y, _z = _a.column10TextStyleTheme, column10TextStyleTheme = _z === void 0 ? 'normal' : _z, _0 = _a.quickActionBtnMode, quickActionBtnMode = _0 === void 0 ? 'btn_amount2' : _0, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _1 = _a.quickActionBtnType, quickActionBtnType = _1 === void 0 ? 'fix' : _1, _2 = _a.quickActionBtn1State, quickActionBtn1State = _2 === void 0 ? 'normal' : _2, _3 = _a.quickActionBtn2State, quickActionBtn2State = _3 === void 0 ? 'normal' : _3, _4 = _a.quickActionBtn3State, quickActionBtn3State = _4 === void 0 ? 'normal' : _4, _5 = _a.selectedState, selectedState = _5 === void 0 ? 'basic' : _5, id = _a.id, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onClickItem = _a.onClickItem;
     var methods = (0, react_hook_form_1.useFormContext)();
     var isSelected = (0, react_hook_form_1.useWatch)({
         control: methods.control,
         name: id.toString()
     });
-    var _5 = (0, react_1.useState)(false), hasScroll = _5[0], setHasScroll = _5[1];
+    var _6 = (0, react_1.useState)(false), hasScroll = _6[0], setHasScroll = _6[1];
     var contentRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         if (!contentRef || !contentRef.current)
@@ -112,6 +112,8 @@ function AdminListItem(_a) {
         switch (style) {
             case 'active':
                 return 'sysTextBrandSeconVariant';
+            case 'active2':
+                return 'sysTextBrandPrimary';
             case 'inactive':
                 return 'sysTextTertiary';
             case 'report':
@@ -120,12 +122,34 @@ function AdminListItem(_a) {
                 return 'sysTextSecondary';
         }
     };
-    return (react_1.default.createElement(S_AdminListItem, { rowSize: rowSize, onClick: handleClick, isSelected: isSelected, quickActionBtnType: quickActionBtnType },
+    var imageWidth;
+    switch (imageShapeType) {
+        case 'circular': {
+            imageWidth = 64;
+            break;
+        }
+        case 'rectangle':
+        case 'round': {
+            if (imageRatio === '16_9') {
+                imageWidth = 128;
+                break;
+            }
+            if (imageRatio === '1_1') {
+                imageWidth = 72;
+                break;
+            }
+            if (imageRatio === '4_3') {
+                imageWidth = 96;
+                break;
+            }
+        }
+    }
+    return (react_1.default.createElement(S_AdminListItem, { ref: ref, rowSize: rowSize, onClick: handleClick, isSelected: isSelected, quickActionBtnType: quickActionBtnType },
         react_1.default.createElement(S_SelectionColumn, { rowSize: rowSize }, selectionMode === 'multi' && (react_1.default.createElement(S_Selection, null,
             react_1.default.createElement(Checkbox_1.Checkbox, { name: id.toString(), state: selectedState === 'maintain' ? 'disabled' : 'normal' })))),
         react_1.default.createElement(S_ImageColumn, { rowSize: rowSize },
             column2Type === 'image_text' && (rowSize === 'high' || rowSize === 'medium') && (react_1.default.createElement(S_ImageWrapper, { rowSize: rowSize },
-                react_1.default.createElement(hybrid_1.ImageView, { src: imageSrc, shapeType: imageShapeType, width: imageShapeType === 'circular' ? 64 : 120, ratio: imageRatio, scaleType: "cover", radius: imageShapeType === 'round' ? imageRadius : undefined }))),
+                react_1.default.createElement(hybrid_1.ImageView, { src: imageSrc, shapeType: imageShapeType, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType, radius: imageShapeType === 'round' ? imageRadius : undefined, backgroundFillMode: "use" }))),
             (rowSize === 'low' || rowSize === 'medium') && (react_1.default.createElement(S_RowTextWrapper, null,
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 2 }))),
             rowSize === 'high' && (react_1.default.createElement(S_HighTextWrapper, { ref: contentRef, hasScroll: hasScroll },
@@ -148,7 +172,7 @@ function AdminListItem(_a) {
             react_1.default.createElement(TextLabel_1.TextLabel, { text: column10Text, styleTheme: column10TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column10TextStyleTheme) }))),
         quickActionBtnMode !== 'none' && (react_1.default.createElement(S_QuickActionButtonBox, { quickActionBtnType: quickActionBtnType }, quickActionButtons())),
         quickActionBtnType === 'hover' && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_f", spacingType: "width" })));
-}
+});
 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: 120px;\n  max-height: 120px;\n"], ["\n  height: 120px;\n  max-height: 120px;\n"])));
 var lowRow = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 64px;\n"], ["\n  height: 64px;\n"])));

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

@@ -8,7 +8,7 @@ declare type Props = {
     hoverMode?: 'none' | 'use';
     contextMenuOptionArray?: PDSValueOption[];
     contextMenuState?: 'normal' | 'disabled';
-    colorTheme?: 'seller' | 'subscriber';
+    colorTheme?: 'seller' | 'subscriber' | 'seller_transparent' | 'subscriber_transparent';
     onClickContextMenuItem?: (option: PDSValueOption) => void;
 };
 declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;

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

@@ -36,11 +36,15 @@ var TextLabel_1 = require("../TextLabel");
 var Popup_1 = require("./Popup");
 var titleTextColors = {
     seller: 'usrTextBrandPrimary',
-    subscriber: 'sysTextSecondary'
+    subscriber: 'sysTextSecondary',
+    seller_transparent: 'usrTextBrandPrimary',
+    subscriber_transparent: 'sysTextWhite'
 };
 var backgroundColorTheme = {
     seller: 'ui_cpnt_list_base_area_seller',
-    subscriber: 'ui_cpnt_list_base_area'
+    subscriber: 'ui_cpnt_list_base_area',
+    seller_transparent: 'ui_cpnt_list_base_area_transparent_seller',
+    subscriber_transparent: 'ui_cpnt_list_base_area_transparent'
 };
 function BasicChatListItem(_a) {
     var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenuItem = _a.onClickContextMenuItem, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'subscriber' : _e;
@@ -76,7 +80,7 @@ function BasicChatListItem(_a) {
                 react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }))),
             react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColors[colorTheme] }),
             react_1.default.createElement(S_ContentTextWrapper, null,
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary", wordBreak: "break_all" })),
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'subscriber_transparent' ? 'sysTextWhite' : 'sysTextPrimary', wordBreak: "break_all" })),
             hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
                 react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }))),
             react_1.default.createElement(Popup_1.PopupProvider, null,

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

@@ -8,6 +8,7 @@ declare type BasicListProps = {
     columns?: 1 | 2 | 3 | 4 | 5 | 6;
     columnSpacing?: 0 | 16 | 24;
     rowSpacing?: 0 | 24 | 32 | 48 | 64;
+    spacingMode?: 'none' | 'use';
 };
-declare function BasicList({ children, titleStyleTheme, titleText, captionText, columns, columnSpacing, rowSpacing }: BasicListProps): JSX.Element;
+declare function BasicList({ children, titleStyleTheme, titleText, captionText, columns, columnSpacing, rowSpacing, spacingMode }: BasicListProps): JSX.Element;
 export default BasicList;

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

@@ -12,9 +12,9 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function BasicList(_a) {
-    var children = _a.children, _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'headingBold' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.columns, columns = _c === void 0 ? 1 : _c, _d = _a.columnSpacing, columnSpacing = _d === void 0 ? 16 : _d, _e = _a.rowSpacing, rowSpacing = _e === void 0 ? 0 : _e;
+    var children = _a.children, _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'headingBold' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.columns, columns = _c === void 0 ? 1 : _c, _d = _a.columnSpacing, columnSpacing = _d === void 0 ? 16 : _d, _e = _a.rowSpacing, rowSpacing = _e === void 0 ? 0 : _e, _f = _a.spacingMode, spacingMode = _f === void 0 ? 'use' : _f;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        (titleText || captionText) && (react_1.default.createElement(S_TitleBox, null,
+        (titleText || captionText) && (react_1.default.createElement(S_TitleBox, { spacingMode: spacingMode },
             react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme }),
             titleText && captionText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }),
             captionText && react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "body2Regular" }))),
@@ -24,8 +24,8 @@ var S_TitleBox = styled_components_1.default.div(templateObject_1 || (templateOb
     var theme = _a.theme;
     return "" + theme.spacing.spacingD;
 }, function (_a) {
-    var theme = _a.theme;
-    return "0 " + theme.spacing.spacingE;
+    var spacingMode = _a.spacingMode, theme = _a.theme;
+    return spacingMode === 'use' && "0 " + 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;

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

@@ -28,6 +28,7 @@ export declare type BasicListItemProps = {
     switchName?: string;
     switchState?: 'normal' | 'disabled';
     switchStatus?: 'off' | 'on';
+    spacingMode?: 'none' | 'use';
     onClick?: () => void;
     onClickIBtn1?: () => void;
     onClickIBtn2?: () => void;
@@ -42,6 +43,9 @@ export declare type StyleProps = {
     badgeStatus?: 'cancel' | 'active' | 'inactive';
     imageIconMode?: 'none' | 'image' | 'icon';
     displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
+    hasOnClick?: boolean;
+    spacingMode?: 'none' | 'use';
+    onlyLeftArea?: boolean;
 };
-declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, onClick, onClickIBtn1, onClickIBtn2, onClickMBtn, onClickRadio, onClickSwitch }: BasicListItemProps): JSX.Element;
+declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, spacingMode, onClick, onClickIBtn1, onClickIBtn2, onClickMBtn, onClickRadio, onClickSwitch }: BasicListItemProps): JSX.Element;
 export default BasicListItem;