pds-dev-kit-web 1.6.13 → 1.7.0

package/dist/src/common/styles/colorSet/PaletteColor_Dark.json

@@ -220,5 +220,6 @@
     "sys_widget_red_01": "darkred500",
     "sys_widget_orange_01": "darkorange500",
     "sys_text_warning_01": "darkorange500",
-    "sys_component_base_18": "darkgrey400"
+    "sys_component_base_18": "darkgrey400",
+    "sys_cpnt_sheet_base_04": "darkblue500"
 }

package/dist/src/common/styles/colorSet/PaletteColor_light.json

@@ -220,5 +220,6 @@
     "sys_widget_red_01": "red500",
     "sys_widget_orange_01": "orange500",
     "sys_text_warning_01": "orange500",
-    "sys_component_base_18": "grey400"
+    "sys_component_base_18": "grey400",
+    "sys_cpnt_sheet_base_04": "blue500"
 }

package/dist/src/common/styles/colorSet/UIColor.json

@@ -630,5 +630,6 @@
     "ui_cpnt_calendar_badge_expired": "sys_widget_grey_03",
     "ui_cpnt_calendar_text_today": "sys_widget_red_01",
     "ui_cpnt_textlabel_sys_warning": "sys_text_warning_01",
-    "ui_cpnt_lottiereactionbutton_base_default": "sys_component_base_18"
+    "ui_cpnt_lottiereactionbutton_base_default": "sys_component_base_18",
+    "ui_cpnt_sheet_base_06": "sys_cpnt_sheet_base_04"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -78,7 +78,7 @@ declare const colorSet: {
         darkgreen50: string;
         opacity90: string;
     };
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -301,8 +301,9 @@ declare const colorSet: {
         sys_widget_orange_01: string;
         sys_text_warning_01: string;
         sys_component_base_18: string;
+        sys_cpnt_sheet_base_04: string;
     };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -525,6 +526,7 @@ declare const colorSet: {
         sys_widget_orange_01: string;
         sys_text_warning_01: string;
         sys_component_base_18: string;
+        sys_cpnt_sheet_base_04: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -1159,6 +1161,7 @@ declare const colorSet: {
         ui_cpnt_calendar_text_today: string;
         ui_cpnt_textlabel_sys_warning: string;
         ui_cpnt_lottiereactionbutton_base_default: string;
+        ui_cpnt_sheet_base_06: string;
     };
 };
 export default colorSet;

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

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
-var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
+var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
     SemanticColor: SemanticColor_json_1.default,
-    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
+    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -631,4 +631,5 @@ export interface UITheme {
     ui_cpnt_calendar_text_today: string;
     ui_cpnt_textlabel_sys_warning: string;
     ui_cpnt_lottiereactionbutton_base_default: string;
+    ui_cpnt_sheet_base_06: string;
 }

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

@@ -181,7 +181,7 @@ function AdminList(_a) {
             }
         }
     };
-    return (react_1.default.createElement(S_AdminList, null,
+    return (react_1.default.createElement(S_AdminList, { "x-pds-name": "AdminList", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
         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,

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

@@ -32,7 +32,7 @@ var defaultPaginationTextArray = [
 ];
 function AdminListHeader(_a) {
     var _b = _a.headerBarSize, headerBarSize = _b === void 0 ? 'regular' : _b, headerBarTitleText = _a.headerBarTitleText, _c = _a.itemCountUnit, 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 (react_1.default.createElement(S_AdminListHeader, null,
+    return (react_1.default.createElement(S_AdminListHeader, { "x-pds-name": "AdminListHeader", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
         react_1.default.createElement(HeaderBar_1.default, { titleText: headerBarTitleText, size: headerBarSize, currentPage: currentPage, totalPage: totalPage, dropdownTextArray: dropdownTextArray, dropdownDefaultValue: dropdownDefaultValue, onChangeDropdown: onChangeCount, onClickIBtn1: onClickNextButton, onClickIBtn2: onClickPrevButton }),
         headerBarTitleText && !contentText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
         headerBarTitleText && contentText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),

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

@@ -146,7 +146,7 @@ var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
             }
         }
     }
-    return (react_1.default.createElement(S_AdminListItem, { ref: ref, rowSize: rowSize, onClick: handleClick, isSelected: isSelected, quickActionBtnType: quickActionBtnType },
+    return (react_1.default.createElement(S_AdminListItem, { "x-pds-name": "AdminListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", 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 },

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

@@ -47,12 +47,10 @@ var backgroundColorTheme = {
     subscriber_transparent: 'ui_cpnt_list_base_area_transparent'
 };
 function BasicChatListItem(_a) {
-    var _b;
-    var titleText = _a.titleText, contentText = _a.contentText, _c = _a.leftImageMode, leftImageMode = _c === void 0 ? 'none' : _c, imageSrc = _a.imageSrc, _d = _a.hoverMode, hoverMode = _d === void 0 ? 'use' : _d, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenuItem = _a.onClickContextMenuItem, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'subscriber' : _f;
-    var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
+    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;
+    var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
     var contextMenuRef = (0, react_1.useRef)(null);
-    var contentRef = (0, react_1.useRef)(null);
-    var contentRect = (_b = contentRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    var _g = (0, react_1.useState)(0), contentWidth = _g[0], setContentWidth = _g[1];
     var chatBody = document.querySelector('#chatMessageBox');
     var chatBodyRect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
     /**
@@ -77,13 +75,16 @@ function BasicChatListItem(_a) {
         }
         setIsContextMenuOpen(false);
     };
+    function getContentTextWidth(ref) {
+        setContentWidth(ref.getBoundingClientRect().width);
+    }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme },
+        react_1.default.createElement(S_BasicChatListItem, { "x-pds-name": "BasicChatListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", colorTheme: colorTheme },
             leftImageMode === 'use' && (react_1.default.createElement(S_ImageViewWrapper, null,
                 react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }))),
-            react_1.default.createElement(S_TitleTextWrapper, { targetWidth: contentRect === null || contentRect === void 0 ? void 0 : contentRect.width },
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_word", colorTheme: titleTextColors[colorTheme] })),
-            react_1.default.createElement(S_ContentTextWrapper, { ref: contentRef },
+            react_1.default.createElement(S_TitleTextWrapper, { targetWidth: contentWidth },
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] })),
+            react_1.default.createElement(S_ContentTextWrapper, { ref: function (ref) { return ref && getContentTextWidth(ref); } },
                 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 }))),
@@ -111,7 +112,7 @@ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_2 || (te
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_ContentTextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n  margin-left: ", ";\n"], ["\n  flex: 1;\n  margin-left: ", ";\n"])), function (_a) {
+var S_ContentTextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 3;\n  margin-left: ", ";\n"], ["\n  flex: 3;\n  margin-left: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
@@ -125,7 +126,7 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_4 || (templ
     var hoverMode = _a.hoverMode;
     return hoverMode === 'use' && '1';
 });
-var S_TitleTextWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  max-width: ", ";\n"], ["\n  max-width: ", ";\n"])), function (_a) {
+var S_TitleTextWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex: 1;\n  max-width: ", ";\n"], ["\n  flex: 1;\n  max-width: ", ";\n"])), function (_a) {
     var targetWidth = _a.targetWidth;
     return targetWidth && targetWidth / 3 + "px";
 });

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

@@ -8,7 +8,7 @@ var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function BasicFormGroup(_a) {
     var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, inputForm = _a.inputForm;
-    return (react_1.default.createElement("div", null,
+    return (react_1.default.createElement("div", { "x-pds-name": "BasicFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
         titleText && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }),
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }))),

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

@@ -13,7 +13,7 @@ var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function BasicList(_a) {
     var children = _a.children, _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'headingBold' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.columns, columns = _c === void 0 ? 1 : _c, _d = _a.columnSpacing, columnSpacing = _d === void 0 ? 16 : _d, _e = _a.rowSpacing, rowSpacing = _e === void 0 ? 0 : _e, _f = _a.spacingMode, spacingMode = _f === void 0 ? 'use' : _f;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement("div", { "x-pds-name": "BasicList", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
         (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" }),

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

@@ -114,7 +114,7 @@ function BasicListItem(_a) {
         }
         return true;
     };
-    return (react_1.default.createElement(S_BasicListItem, { displayType: displayType, selectionMode: selectionMode, isSelected: isSelected, onClick: handleClick, hasOnClick: !!onClick, spacingMode: spacingMode },
+    return (react_1.default.createElement(S_BasicListItem, { "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 },
         react_1.default.createElement(S_BasicListItemBox, { imageIconMode: imageIconMode, captionText: captionText, spacingMode: spacingMode },
             react_1.default.createElement(S_LeftBox, { onlyLeftArea: onlyLeftArea },
                 selectionMode !== 'none' && (react_1.default.createElement(S_SelectionBoxWrapper, { selectionMode: selectionMode },

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

@@ -65,7 +65,7 @@ function BlogTextField(_a) {
         }
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_BlogTextFieldWrapper, { size: size, textLineType: textLineType, state: state, spacingMode: spacingMode }, S_BlogTextField())));
+        react_1.default.createElement(S_BlogTextFieldWrapper, { "x-pds-name": "BlogTextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, textLineType: textLineType, state: state, spacingMode: spacingMode }, S_BlogTextField())));
 }
 var multi = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: auto;\n"], ["\n  height: auto;\n"])));
 var auto = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: auto;\n"], ["\n  height: auto;\n"])));

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

@@ -8,12 +8,12 @@ var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function BodyTextGroup(_a) {
     var titleText = _a.titleText, descText = _a.descText, contentText = _a.contentText, _b = _a.titleTextWordBreak, titleTextWordBreak = _b === void 0 ? 'keep_all' : _b, _c = _a.descTextWordBreak, descTextWordBreak = _c === void 0 ? 'keep_all' : _c, _d = _a.contentTextWordBreak, contentTextWordBreak = _d === void 0 ? 'keep_all' : _d, _e = _a.contentFontWeight, contentFontWeight = _e === void 0 ? 'regular' : _e;
-    return (react_1.default.createElement("div", null,
+    return (react_1.default.createElement("div", { "x-pds-name": "BodyTextGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
         react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, wordBreak: titleTextWordBreak, styleTheme: "subTitleBold", colorTheme: "sysTextPrimary" }),
-        descText && (react_1.default.createElement(react_1.default.Fragment, null,
+        descText && (react_1.default.createElement("div", null,
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
             react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, wordBreak: descTextWordBreak, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }))),
-        contentText && (react_1.default.createElement(react_1.default.Fragment, null,
+        contentText && (react_1.default.createElement("div", null,
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
             react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, wordBreak: contentTextWordBreak, styleTheme: contentFontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorTheme: "sysTextPrimary" })))));
 }

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

@@ -18,7 +18,7 @@ function Card(_a) {
             onClick(e);
         }
     };
-    return (react_1.default.createElement(S_CardGroups, { selectState: selectState, onClick: handleClick },
+    return (react_1.default.createElement(S_CardGroups, { "x-pds-name": "Card", "x-pds-element-type": "component", "x-pds-device-type": "desktop", selectState: selectState, onClick: handleClick },
         imageIconMode !== 'none' && (react_1.default.createElement(S_ImageIconModeBox, null, imageIconMode === 'image' && imageSrc && (react_1.default.createElement(hybrid_1.ImageView, { shapeType: "rectangle", width: "responsive", ratio: "16_9", scaleType: "cover", src: imageSrc })))),
         react_1.default.createElement(S_Content, null,
             react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "body2Bold", colorTheme: "sysTextPrimary" }),

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

@@ -11,7 +11,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function CardList(_a) {
     var children = _a.children, rows = _a.rows, columns = _a.columns, rowGap = _a.rowGap, columnGap = _a.columnGap;
-    return (react_1.default.createElement(S_CardList, { rows: rows, columns: columns, rowGap: rowGap, columnGap: columnGap }, children));
+    return (react_1.default.createElement(S_CardList, { "x-pds-name": "CardList", "x-pds-element-type": "component", "x-pds-device-type": "desktop", rows: rows, columns: columns, rowGap: rowGap, columnGap: columnGap }, children));
 }
 var S_CardList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  display: grid;\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
     var rows = _a.rows;

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

@@ -83,7 +83,7 @@ function ChatBubbleListItem(_a) {
         setIsContextMenuOpen(false);
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_ChatBubbleListItem, { isMy: isMy, imageMode: imageMode },
+        react_1.default.createElement(S_ChatBubbleListItem, { "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isMy: isMy, imageMode: imageMode },
             imageMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null, isTail && !isMy ? (react_1.default.createElement(S_ImageViewWrapper, { isSeller: isSeller },
                 react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: isSeller ? 36 : 38 }))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })))),
             react_1.default.createElement(S_RightBox, null,

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

@@ -85,7 +85,7 @@ var ChatList = react_1.default.forwardRef(function (_a, ref) {
     var callBackAfterScrollToBottom = function () {
         reset();
     };
-    return (react_1.default.createElement(S_ChatList, { backgroundColor: baseBackgroundColors[colorTheme], id: "chatList" },
+    return (react_1.default.createElement(S_ChatList, { "x-pds-name": "ChatList", "x-pds-element-type": "component", "x-pds-device-type": "desktop", backgroundColor: baseBackgroundColors[colorTheme], id: "chatList" },
         headerMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(Header_1.default, { colorTheme: colorTheme, titleText: titleText, descText: descText, captionText: captionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1 }),
             react_1.default.createElement(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' }))),

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

@@ -48,7 +48,7 @@ function Checkbox(_a) {
             }
         }
     };
-    return (react_1.default.createElement(S_Checkbox, null,
+    return (react_1.default.createElement(S_Checkbox, { "x-pds-name": "Checkbox", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
         react_1.default.createElement(S_Label, { htmlFor: name, isDisabled: state === 'disabled' },
             icon(),
             text && (react_1.default.createElement(S_TextWrapper, null,

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

@@ -86,7 +86,7 @@ function Chip(_a) {
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
         }
     };
-    return react_1.default.createElement(S_ChipWrapper, null, chipType());
+    return (react_1.default.createElement(S_ChipWrapper, { "x-pds-name": "Chip", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, chipType()));
 }
 exports.default = Chip;
 var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 20px;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n\n  ", ";\n"], ["\n  border-radius: 20px;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n\n  ", ";\n"])), function (_a) {

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

@@ -11,7 +11,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function ContextMenu(_a) {
     var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b, maxHeight = _a.maxHeight, customWidth = _a.customWidth;
-    return (react_1.default.createElement(S_ContextMenu, { autoWidth: autoWidthMode === 'use', maxHeight: maxHeight, customWidth: customWidth }, children));
+    return (react_1.default.createElement(S_ContextMenu, { "x-pds-name": "ContextMenu", "x-pds-element-type": "component", "x-pds-device-type": "desktop", autoWidth: autoWidthMode === 'use', maxHeight: maxHeight, customWidth: customWidth }, children));
 }
 var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n  z-index: 3;\n\n  max-height: ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n  z-index: 3;\n\n  max-height: ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -52,7 +52,7 @@ function ContextMenuItem(_a) {
     if (state === 'disabled') {
         textColorTheme = 'sysTextTertiary';
     }
-    return (react_1.default.createElement(S_ContextMenuItem, { size: size, onClick: handleClick, selected: isSelected, disabled: state === 'disabled' },
+    return (react_1.default.createElement(S_ContextMenuItem, { "x-pds-name": "ContextMenuItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, onClick: handleClick, selected: isSelected, disabled: state === 'disabled' },
         react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: textColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  height: 48px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {

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

@@ -63,7 +63,7 @@ function DesktopAlertDialog(_a) {
     };
     return react_dom_1.default.createPortal(react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(S_ModalOverlay, null),
-        react_1.default.createElement(S_ModalWrapper, null,
+        react_1.default.createElement(S_ModalWrapper, { "x-pds-name": "DesktopAlertDialog", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
             react_1.default.createElement(S_UpperBox, null,
                 icon(),
                 iconMode !== 'none' && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }),

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

@@ -108,7 +108,7 @@ function DesktopHeaderBar(_a) {
             }
         }
     };
-    return (react_1.default.createElement(S_DesktopHeaderBar, { size: size, hasDivider: dividerType === 'solid', hasBackIcon: leftDisplayType === 'back' },
+    return (react_1.default.createElement(S_DesktopHeaderBar, { "x-pds-name": "DesktopHeaderBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, hasDivider: dividerType === 'solid', hasBackIcon: leftDisplayType === 'back' },
         react_1.default.createElement(S_LeftDisplayBox, null,
             leftDisplayMode(),
             react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "body1Bold", singleLineMode: "use", colorTheme: "sysTextPrimary" })),

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

@@ -52,7 +52,7 @@ function DesktopTabBar(_a) {
                 return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
             }
         };
-        return (react_1.default.createElement(S_TabBarBox, null,
+        return (react_1.default.createElement(S_TabBarBox, { "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
             react_1.default.createElement(S_MainTabBarSpace, null, itemArray.map(function (item) { return (react_1.default.createElement(S_MainTabItemBox, { key: item.title },
                 react_1.default.createElement(S_MainTabItemWrapper, { text: item.title, styleTheme: styleTheme, isActive: item.isActive, onClick: function (e) { return handelClickTabItem_1(item, e); } }, textLabel_1(item, false)),
                 item.isActive && item.subArray && (react_1.default.createElement(S_SubTabBarWrapper, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubTabItemWrapper, { key: subItem.title, text: subItem.title, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, textLabel_1(subItem, true))); }))))); })),
@@ -76,7 +76,7 @@ function DesktopTabBar(_a) {
                 return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
             }
         };
-        return (react_1.default.createElement(S_TabBarBox, null,
+        return (react_1.default.createElement(S_TabBarBox, { "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
             react_1.default.createElement(S_MainTabBarSpace, null, textArray.map(function (item) { return (react_1.default.createElement(S_MainTabItemBox, { key: item.path },
                 react_1.default.createElement(S_MainTabItemWrapper, { isActive: pathname.includes(item.path), styleTheme: styleTheme, text: item.title, onClick: function () { return handleClick_1(item); } }, textLabel_2(item, false)),
                 pathname.includes(item.path) && item.subArray && (react_1.default.createElement(S_SubTabBarWrapper, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubTabItemWrapper, { key: subItem.title, text: subItem.title, onClick: function () { return handleClick_1(subItem); } }, textLabel_2(subItem, true))); }))))); })),

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

@@ -163,7 +163,7 @@ function Dropdown(_a) {
         var LARGE_HEIGHT = 48;
         return LARGE_HEIGHT * maxHeightItemNumber;
     }, [size, maxHeightItemNumber]);
-    return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth },
+    return (react_1.default.createElement(S_Dropdown, { "x-pds-name": "Dropdown", "x-pds-element-type": "component", "x-pds-device-type": "desktop", className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth },
         react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth },
             react_1.default.createElement(S_TextLabel, { size: size, responsiveMode: responsiveMode },
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || (value === null || value === void 0 ? void 0 : value.text) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })),

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

@@ -76,12 +76,12 @@ function DynamicDesktopNavBar(_a) {
         dispatch({ type: 'INTERNAL_CLICKED', payload: { clickedURL: url } });
     }
     return (react_1.default.createElement(exports.BasePathContext.Provider, { value: { basePath: basePath, activeMode: state.mode, handleClickInternalMenuItemNav: handleClickInternalMenuItemNav } }, colorTheme === 'transparent' ? (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: __assign(__assign(__assign({}, theme), (0, theme_1.themeByGivenTone)('DARK')), { ui_menu_background: theme.ui_menu_background_transparent, ui_menu_button_base: theme.ui_menu_button_base_transparent }) },
-        react_1.default.createElement(S_DynamicDesktopNavBar, { isPreview: isPreview },
+        react_1.default.createElement(S_DynamicDesktopNavBar, { "x-pds-name": "DynamicDesktopNavBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isPreview: isPreview },
             react_1.default.createElement(S_Grid, { className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: gridStyle },
                 react_1.default.createElement(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text }),
                 react_1.default.createElement(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }),
                 showSecondaryMenu && (react_1.default.createElement(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })),
-                react_1.default.createElement(blocks_1.UserProfile, { src: userProfile.src, to: userProfile.href, leftIconButton: userProfile.leftIconButton, overrideUserProfile: userProfile.overrideUserProfile, style: userProfileOptions.style }))))) : (react_1.default.createElement(S_DynamicDesktopNavBar, { isPreview: isPreview },
+                react_1.default.createElement(blocks_1.UserProfile, { src: userProfile.src, to: userProfile.href, leftIconButton: userProfile.leftIconButton, overrideUserProfile: userProfile.overrideUserProfile, style: userProfileOptions.style }))))) : (react_1.default.createElement(S_DynamicDesktopNavBar, { "x-pds-name": "DynamicDesktopNavBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isPreview: isPreview },
         react_1.default.createElement(S_Grid, { className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: gridStyle },
             react_1.default.createElement(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text }),
             react_1.default.createElement(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }),

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

@@ -143,7 +143,7 @@ function EditApplyTextField(_a) {
         }
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_EditApplyTextFieldWrapper, { size: size, responsiveMode: responsiveMode, customWidth: customWidth },
+        react_1.default.createElement(S_EditApplyTextFieldWrapper, { "x-pds-name": "EditApplyTextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth },
             react_1.default.createElement(S_EditApplyTextField, null,
                 react_1.default.createElement(S_S_TextFieldBaseWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, customWidth: customWidth }, S_TextFieldBase()),
                 isOpen === true && (react_1.default.createElement(S_ButtonBox, null,

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

@@ -27,7 +27,7 @@ function FilterBar(_a) {
             return (name && (react_1.default.createElement(TextField_1.TextField, { name: name, size: "small", hintText: hintText, enterSubmitMode: "use", validationPoint: "onChange" })));
         }
     };
-    return (react_1.default.createElement(S_FilterBarBox, null,
+    return (react_1.default.createElement(S_FilterBarBox, { "x-pds-name": "FilterBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
         react_1.default.createElement(S_ChipBox, null, renderingChip()),
         renderingTextField()));
 }

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

@@ -53,9 +53,9 @@ function FloatingActionButton(_a) {
         return 'ui_cpnt_button_icon_on_primary';
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        displayType === 'icon_only' && (react_1.default.createElement(S_ButtonIconOnly, { size: size, colorTheme: colorTheme, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
+        displayType === 'icon_only' && (react_1.default.createElement(S_ButtonIconOnly, { "x-pds-name": "FloatingActionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, colorTheme: colorTheme, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
             react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' ? 20 : 24, colorKey: iconColor(), fillType: iconFillType }))),
-        displayType !== 'icon_only' && (react_1.default.createElement(S_Button, { size: size, colorTheme: colorTheme, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
+        displayType !== 'icon_only' && (react_1.default.createElement(S_Button, { "x-pds-name": "FloatingActionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, colorTheme: colorTheme, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
             displayType === 'text_only' && (react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body1Regular' : 'body1Bold', singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disabled' ? 'ui_cpnt_button_text_darktheme_disabled' : undefined })),
             displayType === 'icon_text' && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: 20, colorKey: iconColor(), fillType: iconFillType }),

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

@@ -8,7 +8,7 @@ var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function Hero(_a) {
     var heroText = _a.heroText, leadText = _a.leadText, _b = _a.leadTextColorTheme, leadTextColorTheme = _b === void 0 ? 'normal' : _b;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement("div", { "x-pds-name": "Hero", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_h" }),
         react_1.default.createElement(TextLabel_1.TextLabel, { styleTheme: "displayBold", colorTheme: "sysTextPrimary", text: heroText }),
         leadText && (react_1.default.createElement(react_1.default.Fragment, null,

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

@@ -32,7 +32,7 @@ var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function HorizontalFormGroup(_a) {
     var labelText = _a.labelText, captionText = _a.captionText, inputForm = _a.inputForm, _b = _a.labelAlignType, labelAlignType = _b === void 0 ? 'center' : _b, labelTopSpacing = _a.labelTopSpacing;
-    return (react_1.default.createElement(S_HorizontalFormGroupBox, { labelAlignType: labelAlignType },
+    return (react_1.default.createElement(S_HorizontalFormGroupBox, { "x-pds-name": "HorizontalFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop", labelAlignType: labelAlignType },
         react_1.default.createElement(S_LabelWrapper, { labelAlignType: labelAlignType, labelTopSpacing: labelTopSpacing }, labelAlignType === 'center' ? (react_1.default.createElement(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold", ellipsisMode: "use", lineLimit: 2 })) : (react_1.default.createElement(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold" }))),
         react_1.default.createElement(S_InputFormWrapper, null, inputForm),
         captionText && (react_1.default.createElement(S_CaptionWrapper, null,

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

@@ -64,7 +64,7 @@ function IconButton(_a) {
         }
         return iconStateColorObj[fillType];
     };
-    return (react_1.default.createElement(S_IconButton, { fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, onClick: handleClick, onMouseDown: handleMouseDown },
+    return (react_1.default.createElement(S_IconButton, { "x-pds-name": "IconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, onClick: handleClick, onMouseDown: handleMouseDown },
         react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType })));
 }
 var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {

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

@@ -46,7 +46,7 @@ var ImageSlide = function (_a) {
         var dotList = __spreadArray([], Array(slideCount), true).map(function (x, i) { return ({ id: i }); });
         return (react_1.default.createElement(react_1.default.Fragment, null, dotList.map(function (item, i) { return (react_1.default.createElement(S_Dot, { key: item.id, currentSlide: currentSlide, i: i })); })));
     };
-    return (react_1.default.createElement(S_ImageSlideWrapper, { imageWidth: imageWidth },
+    return (react_1.default.createElement(S_ImageSlideWrapper, { "x-pds-name": "ImageSlide", "x-pds-element-type": "component", "x-pds-device-type": "desktop", imageWidth: imageWidth },
         react_1.default.createElement(nuka_carousel_1.default, { cellSpacing: 24, cellAlign: "center", slideWidth: imageWidth === 'responsive' ? 1 : imageWidth + "px", renderCenterLeftControls: null, renderCenterRightControls: null, renderBottomCenterControls: function (props) { return renderDotControls(props); }, slidesToShow: 1, wrapAround: true }, src &&
             src.length > 0 &&
             src.map(function (imageSrc, i) { return (react_1.default.createElement(react_1.Fragment, { key: i.toString() },

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

@@ -67,7 +67,7 @@ function LottieReactionButton(_a) {
             onComplete(e);
         }
     };
-    return (react_1.default.createElement(S_Button, { displayType: displayType, backgroundColorTheme: backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, state: state, disabled: state === 'disabled' || state === 'view_only', type: type, onMouseDown: handleMouseDown, onClick: handleClick, isAnimation: isAnimation, isDefaultBackgroundColor: state === 'view_only' || isBackgroundColor },
+    return (react_1.default.createElement(S_Button, { "x-pds-name": "LottieReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", displayType: displayType, backgroundColorTheme: backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, state: state, disabled: state === 'disabled' || state === 'view_only', type: type, onMouseDown: handleMouseDown, onClick: handleClick, isAnimation: isAnimation, isDefaultBackgroundColor: state === 'view_only' || isBackgroundColor },
         react_1.default.createElement(hybrid_1.LottieIcon, { iconName: iconName, lottieRef: lottieRef, autoplayMode: "none", loopMode: "none", onComplete: handleLottieIconComplete }),
         displayType === 'icon_text' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),

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

@@ -141,7 +141,7 @@ function MainButton(_a) {
             return (react_1.default.createElement(S_SubmittingMainButton, { shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, colorTheme: colorTheme, state: "normal", disabled: true },
                 react_1.default.createElement(components_1.CircularProgress, { colorKey: submittingProgressColor(), size: size === 'rlarge' ? 'large' : size })));
         }
-        return (react_1.default.createElement(S_MainButton, { shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
+        return (react_1.default.createElement(S_MainButton, { "x-pds-name": "MainButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
             size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
                 react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),

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

@@ -14,7 +14,7 @@ var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
 function PageTitleTextGroup(_a) {
     var titleText = _a.titleText, _b = _a.displayType, displayType = _b === void 0 ? 'normal' : _b, _c = _a.btn1State, btn1State = _c === void 0 ? 'normal' : _c, onClickBtn1 = _a.onClickBtn1;
-    return (react_1.default.createElement(S_PageTitleTextGroup, null,
+    return (react_1.default.createElement(S_PageTitleTextGroup, { "x-pds-name": "PageTitleTextGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
         react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "headingBold" }),
         displayType === 'edit_btn' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),

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

@@ -31,7 +31,7 @@ function Radio(_a) {
             }
         }
     };
-    return (react_1.default.createElement(S_Label, { htmlFor: value },
+    return (react_1.default.createElement(S_Label, { "x-pds-name": "Radio", "x-pds-element-type": "component", "x-pds-device-type": "desktop", htmlFor: value },
         icon(),
         react_1.default.createElement(S_TextWrapper, null,
             react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorOverride: state === 'normal'

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

@@ -85,7 +85,7 @@ function ReactionButton(_a) {
             return value;
         return (0, numberHelper_1.formatCompactNumber)(value);
     };
-    return (react_1.default.createElement(S_ReactionButton, { onClick: handleClick, onMouseDown: handleMouseDown },
+    return (react_1.default.createElement(S_ReactionButton, { "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", onClick: handleClick, onMouseDown: handleMouseDown },
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
         react_1.default.createElement(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }),
         displayType === 'icon_text' && (react_1.default.createElement(react_1.default.Fragment, null,

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

@@ -54,7 +54,7 @@ function Select(_a) {
             return 'ui_cpnt_select_icon_01';
         }
     };
-    return (react_1.default.createElement(S_Box, { size: size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth },
+    return (react_1.default.createElement(S_Box, { "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth },
         react_1.default.createElement(S_Icon_Wrapper, { state: state },
             react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() })),
         react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', state: state, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined },

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

@@ -36,7 +36,7 @@ function StatusBlock(_a) {
         medium: 'body1Bold',
         small: 'body2Bold'
     };
-    return (react_1.default.createElement(S_StatusBlock, { size: size, state: state, "$width": width },
+    return (react_1.default.createElement(S_StatusBlock, { "x-pds-name": "StatusBlock", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, state: state, "$width": width },
         react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 48px;\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])));

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

@@ -71,7 +71,7 @@ function TextButton(_a) {
             onClick(e);
         }
     };
-    return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, colorTheme: colorTheme }),
+    return (react_1.default.createElement(S_Button, __assign({ "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, colorTheme: colorTheme }),
         react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {