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

package/dist/src/mobile/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": "mobile", 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/mobile/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": "mobile" },
         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/mobile/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": "mobile" },
         (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/mobile/components/BasicListItem/BasicListItem.js

@@ -114,7 +114,7 @@ function BasicListItem(_a) {
         }
         return true;
     };
-    return (react_1.default.createElement(S_BasicListItem, { isSelected: isSelected, onClick: handleClick, spacingMode: spacingMode },
+    return (react_1.default.createElement(S_BasicListItem, { "x-pds-name": "BasicListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isSelected: isSelected, onClick: handleClick, 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/mobile/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": "mobile", 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/mobile/components/BodyTextGroup/BodyTextGroup.js

@@ -8,9 +8,9 @@ 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(react_1.default.Fragment, null,
+    return (react_1.default.createElement("div", { "x-pds-name": "BodyTextGroup", "x-pds-element-type": "component", "x-pds-device-type": "mobile" },
         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("div", null,

package/dist/src/mobile/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": "mobile", 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/mobile/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": "mobile", 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/mobile/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": "mobile", 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/mobile/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": "mobile", 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/mobile/components/Checkbox/Checkbox.js

@@ -47,7 +47,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": "mobile" },
         react_1.default.createElement(S_Label, { htmlFor: name },
             icon(),
             text && (react_1.default.createElement(S_TextWrapper, null,

package/dist/src/mobile/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": "mobile" }, 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\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\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n\n  ", ";\n"])), function (_a) {

package/dist/src/mobile/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": "mobile", 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  vertical-align: baseline;\n  width: ", ";\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  vertical-align: baseline;\n  width: ", ";\n  max-height: ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/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": "mobile", 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/mobile/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": "mobile", 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/mobile/components/FloatingActionButton/FloatingActionButton.js

@@ -49,9 +49,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 === 'disable', 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": "mobile", size: size, colorTheme: colorTheme, state: state, disabled: state === 'disable', 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 === 'disable', 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": "mobile", size: size, colorTheme: colorTheme, state: state, disabled: state === 'disable', 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 === 'disable' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disable' ? 'ui_cpnt_button_icon_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/mobile/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": "mobile", 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/mobile/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": "mobile", 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/mobile/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": "mobile", 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/mobile/components/LottieReactionButton/LottieReactionButton.d.ts

@@ -8,13 +8,11 @@ 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';
-    onTouchStart?: (e: React.TouchEvent<HTMLButtonElement>) => void;
-    onTouchEnd?: (e: React.TouchEvent<HTMLButtonElement>) => void;
-    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onTouchStart?: (e: React.TouchEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    onTouchEnd?: (e: React.TouchEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
     onComplete?: AnimationEventHandler | null;
 };
-declare function LottieReactionButton({ text, actionText, iconName, displayType, backgroundColorTheme, overrideBackgroundColorKey, type, state, onTouchStart, onTouchEnd, onMouseDown, onClick, onComplete }: LottieReactionButtonProps): JSX.Element;
+declare function LottieReactionButton({ text, actionText, iconName, displayType, backgroundColorTheme, overrideBackgroundColorKey, type, state, onTouchStart, onTouchEnd, onComplete }: LottieReactionButtonProps): JSX.Element;
 export default LottieReactionButton;

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

@@ -29,7 +29,7 @@ var numberHelper_1 = require("../../../common/utils/numberHelper");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function LottieReactionButton(_a) {
-    var text = _a.text, actionText = _a.actionText, _b = _a.iconName, iconName = _b === void 0 ? 'ic_lottie_heart' : _b, _c = _a.displayType, displayType = _c === void 0 ? 'icon_text' : _c, _d = _a.backgroundColorTheme, backgroundColorTheme = _d === void 0 ? 'base1' : _d, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _e = _a.type, type = _e === void 0 ? 'button' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, onTouchStart = _a.onTouchStart, onTouchEnd = _a.onTouchEnd, onMouseDown = _a.onMouseDown, onClick = _a.onClick, onComplete = _a.onComplete;
+    var text = _a.text, actionText = _a.actionText, _b = _a.iconName, iconName = _b === void 0 ? 'ic_lottie_heart' : _b, _c = _a.displayType, displayType = _c === void 0 ? 'icon_text' : _c, _d = _a.backgroundColorTheme, backgroundColorTheme = _d === void 0 ? 'base1' : _d, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _e = _a.type, type = _e === void 0 ? 'button' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, onTouchStart = _a.onTouchStart, onTouchEnd = _a.onTouchEnd, onComplete = _a.onComplete;
     var lottieRef = (0, react_1.useRef)(null);
     var convertFormatHelper = function (value) {
         if (typeof value !== 'number')
@@ -38,49 +38,41 @@ 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 _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 handleTouchStart = function (e) {
-        setIsAnimation(false);
+        if (state !== 'no_animation') {
+            setIsAnimation(false);
+        }
         if (onTouchStart) {
             onTouchStart(e);
         }
     };
     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 : '');
+        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 (onTouchEnd) {
             onTouchEnd(e);
         }
         e.preventDefault();
     };
-    var handleMouseDown = function (e) {
-        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 : '');
-        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": "mobile", displayType: displayType, backgroundColorTheme: backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, state: state, disabled: state === 'disabled' || state === 'view_only', type: type, onTouchStart: state === 'normal' ? handleTouchStart : undefined, onTouchEnd: state === 'normal' ? handleTouchEnd : undefined, onMouseDown: handleTouchStart, onClick: handleTouchEnd, 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;
@@ -97,40 +89,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;
@@ -141,17 +143,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,
+            no_animation: normal,
             disabled: disabled,
             view_only: view_only
         }[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/mobile/components/MainButton/MainButton.js

@@ -141,7 +141,7 @@ function MainButton(_a) {
             return (react_1.default.createElement(S_MainButton, { 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": "mobile", 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/mobile/components/MobileAlertDialog/MobileAlertDialog.js

@@ -67,7 +67,7 @@ function MobileAlertDialog(_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": "MobileAlertDialog", "x-pds-element-type": "component", "x-pds-device-type": "mobile" },
             react_1.default.createElement(S_UpperBox, null,
                 iconContainer(),
                 iconMode !== 'none' && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),

package/dist/src/mobile/components/MobileHeaderBar/MobileHeaderBar.js

@@ -83,7 +83,7 @@ function MobileHeaderBar(_a) {
             displayType === 'ibtn_amount2' && iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn2IconName, fillType: "fill", onClick: handleClickIBtn2, iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn2Type, state: iBtn2State })),
             (displayType === 'ibtn_amount1' || displayType === 'ibtn_amount2') && iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn1IconName, fillType: "fill", onClick: handleClickIBtn1, iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn1Type, state: iBtn1State }))));
     };
-    return (react_1.default.createElement(S_MobileHeaderBar, { hasBorder: dividerMode === 'solid', hasCaptionText: (captionText === null || captionText === void 0 ? void 0 : captionText.toString) ? true : false, expand: titleType === 'profile' },
+    return (react_1.default.createElement(S_MobileHeaderBar, { "x-pds-name": "MobileHeaderBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasBorder: dividerMode === 'solid', hasCaptionText: (captionText === null || captionText === void 0 ? void 0 : captionText.toString) ? true : false, expand: titleType === 'profile' },
         react_1.default.createElement(S_ButtonWrapper, null,
             (titleType === 'profile' || captionText) && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
             leftIcon()),

package/dist/src/mobile/components/MobileTabBar/MobileTabBar.js

@@ -33,7 +33,7 @@ function MobileTabBar(_a) {
                 item.onClick(e);
             }
         };
-        return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, colorTheme: colorTheme, isActive: item.isActive, onClick: function (e) { return handleClickTabItem_1(item, e); } },
+        return (react_1.default.createElement(S_TabBar, { "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, colorTheme: colorTheme, isActive: item.isActive, onClick: function (e) { return handleClickTabItem_1(item, e); } },
             react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: item.isActive
                     ? mobileTabBarThemes[colorTheme].activeTextColor
                     : mobileTabBarThemes[colorTheme].inActiveTextColor, singleLineMode: "use" }))); })));
@@ -44,7 +44,7 @@ function MobileTabBar(_a) {
                 history.push(value.path);
             }
         };
-        return (react_1.default.createElement(S_TabBar, null, textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, colorTheme: colorTheme, isActive: pathname === value.path, onClick: function () { return handleClick_1(value); } },
+        return (react_1.default.createElement(S_TabBar, { "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, colorTheme: colorTheme, isActive: pathname === value.path, onClick: function () { return handleClick_1(value); } },
             react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }))); })));
     }
     return react_1.default.createElement(react_1.default.Fragment, null);

package/dist/src/mobile/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": "mobile", 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/mobile/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;

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

@@ -32,7 +32,7 @@ var numberHelper_1 = require("../../../common/utils/numberHelper");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function ReactionButton(_a) {
-    var text = _a.text, _b = _a.iconName, iconName = _b === void 0 ? 'ic_thumb_up' : _b, _c = _a.status, status = _c === void 0 ? 'default' : _c, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    var text = _a.text, _b = _a.iconName, iconName = _b === void 0 ? 'ic_thumb_up' : _b, _c = _a.status, status = _c === void 0 ? 'default' : _c, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, _e = _a.displayType, displayType = _e === void 0 ? 'icon_text' : _e, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
@@ -85,10 +85,10 @@ 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": "mobile", 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() }),
-        text && (react_1.default.createElement(react_1.default.Fragment, null,
+        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: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() }))),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })));

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

@@ -50,7 +50,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": "mobile", 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/mobile/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": "mobile", 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/mobile/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', colorTheme: colorTheme }),
+    return (react_1.default.createElement(S_Button, __assign({ "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', colorTheme: colorTheme }),
         react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use" })));
 }
 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) {

package/dist/src/mobile/components/TextField/TextField.js

@@ -133,7 +133,7 @@ function TextField(_a) {
                             }[colorTheme], iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 })))));
         }
     };
-    return (react_1.default.createElement(S_TextFieldBox, { size: size, responsiveMode: responsiveMode, customWidth: customWidth },
+    return (react_1.default.createElement(S_TextFieldBox, { "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, customWidth: customWidth },
         react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme, customWidth: customWidth }, S_TextField()),
         ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && (react_1.default.createElement(S_Error, { colorTheme: colorTheme }, errors[name].message))));
 }