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

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

@@ -118,6 +118,8 @@ var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
                 return 'sysTextTertiary';
             case 'report':
                 return 'sysTextError';
+            case 'report2':
+                return 'sysTextWarning';
             default:
                 return 'sysTextSecondary';
         }
@@ -144,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

@@ -51,7 +51,7 @@ function BasicChatListItem(_a) {
     var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
     var contextMenuRef = (0, react_1.useRef)(null);
     var chatBody = document.querySelector('#chatMessageBox');
-    var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
+    var chatBodyRect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
     /**
      * @when contextMenu가 열려 있을 때
      * @expected ChatList body의 스크롤을 숨기고, contextMenu의 외부를 클릭하면 contextMenu가 닫히도록 합니다.
@@ -75,16 +75,17 @@ function BasicChatListItem(_a) {
         setIsContextMenuOpen(false);
     };
     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(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColors[colorTheme] }),
+            react_1.default.createElement(S_TitleTextWrapper, null,
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] })),
             react_1.default.createElement(S_ContentTextWrapper, null,
                 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,
-                react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
+                react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
                     react_1.default.createElement(ContextMenu_1.ContextMenu, null, contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, onClick: handleContextMenuItemClick, state: contextMenuState })); })))))));
 }
 var S_BasicChatListItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n  min-height: 24px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  background-color: ", ";\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n  min-height: 24px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
@@ -121,5 +122,6 @@ 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: 120px;\n  min-width: 56px;\n"], ["\n  max-width: 120px;\n  min-width: 56px;\n"])));
 exports.default = BasicChatListItem;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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.d.ts

@@ -8,7 +8,7 @@ export declare type LottieReactionButtonProps = {
     displayType?: 'icon_only' | 'icon_text';
     backgroundColorTheme?: 'base1' | 'base2' | 'base3' | 'base4' | 'base5';
     overrideBackgroundColorKey?: UiColors;
-    state?: 'normal' | 'view_only' | 'disabled';
+    state?: 'normal' | 'no_animation' | 'view_only' | 'disabled';
     type?: 'button' | 'submit';
     onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;

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

@@ -38,43 +38,40 @@ function LottieReactionButton(_a) {
     };
     var convertFormatText = convertFormatHelper(text);
     var _g = (0, react_1.useState)(false), isAnimation = _g[0], setIsAnimation = _g[1];
-    var _h = (0, react_1.useState)(convertFormatText), textWord = _h[0], setTextWord = _h[1];
-    var handleTouchStart = function () {
-        setIsAnimation(false);
-    };
-    var handleTouchEnd = function (e) {
-        var _a, _b;
-        setIsAnimation(true);
-        (_a = lottieRef.current) === null || _a === void 0 ? void 0 : _a.playSegments([[0, 30]], true);
-        setTextWord((_b = actionText !== null && actionText !== void 0 ? actionText : convertFormatText) !== null && _b !== void 0 ? _b : '');
-        e.preventDefault();
-    };
+    var _h = (0, react_1.useState)(false), isActionText = _h[0], setIsActionText = _h[1];
+    var _j = (0, react_1.useState)(false), isBackgroundColor = _j[0], setIsBackgroundColor = _j[1];
     var handleMouseDown = function (e) {
-        setIsAnimation(false);
+        if (state !== 'no_animation') {
+            setIsAnimation(false);
+        }
         if (onMouseDown) {
             onMouseDown(e);
         }
     };
     var handleClick = function (e) {
-        var _a, _b;
-        setIsAnimation(true);
-        (_a = lottieRef.current) === null || _a === void 0 ? void 0 : _a.playSegments([[0, 30]], true);
-        setTextWord((_b = actionText !== null && actionText !== void 0 ? actionText : convertFormatText) !== null && _b !== void 0 ? _b : '');
+        var _a;
+        if (state !== 'no_animation') {
+            setIsAnimation(true);
+            (_a = lottieRef.current) === null || _a === void 0 ? void 0 : _a.playSegments([[0, 30]], true);
+            setIsActionText(true);
+            setIsBackgroundColor(true);
+        }
         if (onClick) {
             onClick(e);
         }
     };
     var handleLottieIconComplete = function (e) {
-        setTextWord(convertFormatText);
+        setIsActionText(false);
+        setIsBackgroundColor(false);
         if (onComplete) {
             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, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, onMouseDown: handleMouseDown, onClick: handleClick, isAnimation: isAnimation },
+    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" }),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: textWord, singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })))));
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: isActionText && actionText ? actionText : convertFormatText, singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })))));
 }
 var disabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  cursor: default;\n"], ["\n  background-color: ", ";\n  cursor: default;\n"])), function (_a) {
     var theme = _a.theme;
@@ -94,40 +91,50 @@ var icon_text = (0, styled_components_1.css)(templateObject_6 || (templateObject
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var base1 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+var greyBackgroundColor = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  transition: background-color 0.8s;\n"], ["\n  background-color: ", ";\n  transition: background-color 0.8s;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_lottiereactionbutton_base_default;
+});
+var base1 = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_lottiereactionbutton_base_01;
 });
-var base2 = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+var base2 = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_lottiereactionbutton_base_02;
 });
-var base3 = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+var base3 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_lottiereactionbutton_base_03;
 });
-var base4 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+var base4 = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_lottiereactionbutton_base_04;
 });
-var base5 = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+var base5 = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_lottiereactionbutton_base_05;
 });
-var overrideStyle = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+var overrideStyle = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
     return overrideBackgroundColorKey && theme[overrideBackgroundColorKey];
 });
-var S_Button = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
-    var backgroundColorTheme = _a.backgroundColorTheme;
-    return backgroundColorTheme &&
-        {
-            base1: base1,
-            base2: base2,
-            base3: base3,
-            base4: base4,
-            base5: base5
-        }[backgroundColorTheme];
+var S_Button = styled_components_1.default.button(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+    var backgroundColorTheme = _a.backgroundColorTheme, isDefaultBackgroundColor = _a.isDefaultBackgroundColor, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
+    if (isDefaultBackgroundColor) {
+        if (overrideBackgroundColorKey) {
+            return overrideStyle;
+        }
+        return (backgroundColorTheme &&
+            {
+                base1: base1,
+                base2: base2,
+                base3: base3,
+                base4: base4,
+                base5: base5
+            }[backgroundColorTheme]);
+    }
+    return greyBackgroundColor;
 }, function (_a) {
     var isAnimation = _a.isAnimation;
     return isAnimation && buttonAnimation;
@@ -138,17 +145,15 @@ var S_Button = styled_components_1.default.button(templateObject_13 || (template
             icon_only: icon_only,
             icon_text: icon_text
         }[displayType];
-}, function (_a) {
-    var overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
-    return overrideBackgroundColorKey && overrideStyle;
 }, function (_a) {
     var state = _a.state;
     return state &&
         {
             normal: normal,
-            disabled: disabled,
-            view_only: view_only
+            no_animation: normal,
+            view_only: view_only,
+            disabled: disabled
         }[state];
 });
 exports.default = LottieReactionButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;

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, "x-pds-component-id": "MainButton1", className: "MainButton2" },
+        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, "x-pds-component-id": "MainButton1", className: "MainButton2" },
             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.d.ts

@@ -5,8 +5,9 @@ export declare type ReactionButtonProps = {
     iconName?: 'ic_thumb_up' | 'ic_heart' | 'ic_thumb_down' | 'ic_reply';
     status?: 'default' | 'select';
     colorTheme?: 'none' | 'dark';
+    displayType?: 'icon_only' | 'icon_text';
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
-declare function ReactionButton({ text, iconName, status, colorTheme, onClick, onMouseDown }: ReactionButtonProps): JSX.Element;
+declare function ReactionButton({ text, iconName, status, colorTheme, displayType, onClick, onMouseDown }: ReactionButtonProps): JSX.Element;
 export default ReactionButton;