pds-dev-kit-web 1.8.8 → 1.8.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubble.d.ts +1 -1
  2. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubble.js +5 -4
  3. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +4 -3
  4. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js +88 -57
  5. package/dist/src/desktop/components/TextLabel/TextLabel.d.ts +2 -2
  6. package/dist/src/desktop/components/TextLabel/TextLabel.js +26 -21
  7. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubble.d.ts +1 -1
  8. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubble.js +5 -4
  9. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +4 -3
  10. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js +88 -57
  11. package/dist/src/mobile/components/TextLabel/TextLabel.d.ts +2 -2
  12. package/dist/src/mobile/components/TextLabel/TextLabel.js +21 -16
  13. package/dist/storybook-static/{0.a1562720.iframe.bundle.d.ts → 0.73af3e66.iframe.bundle.d.ts} +0 -0
  14. package/dist/storybook-static/{0.a1562720.iframe.bundle.js → 0.73af3e66.iframe.bundle.js} +4 -4
  15. package/dist/storybook-static/{4.f6aa0ddb.iframe.bundle.d.ts → 4.d7ecdbf4.iframe.bundle.d.ts} +0 -0
  16. package/dist/storybook-static/{4.f6aa0ddb.iframe.bundle.js → 4.d7ecdbf4.iframe.bundle.js} +68 -68
  17. package/dist/storybook-static/{5.45d40fc4.iframe.bundle.d.ts → 5.dc1e4c72.iframe.bundle.d.ts} +0 -0
  18. package/dist/storybook-static/{5.45d40fc4.iframe.bundle.js → 5.dc1e4c72.iframe.bundle.js} +10 -10
  19. package/dist/storybook-static/{6.c25f6d33.iframe.bundle.d.ts → 6.e668ed7b.iframe.bundle.d.ts} +0 -0
  20. package/dist/storybook-static/{6.c25f6d33.iframe.bundle.js → 6.e668ed7b.iframe.bundle.js} +5 -5
  21. package/dist/storybook-static/{7.1fe04b11.iframe.bundle.d.ts → 7.9af8f518.iframe.bundle.d.ts} +0 -0
  22. package/dist/storybook-static/{7.1fe04b11.iframe.bundle.js → 7.9af8f518.iframe.bundle.js} +1 -1
  23. package/dist/storybook-static/{main.ef70f048.iframe.bundle.d.ts → main.747cc139.iframe.bundle.d.ts} +554 -534
  24. package/dist/storybook-static/{main.ef70f048.iframe.bundle.js → main.747cc139.iframe.bundle.js} +536 -455
  25. package/dist/storybook-static/{runtime~main.549d38be.iframe.bundle.d.ts → runtime~main.1b62987c.iframe.bundle.d.ts} +0 -0
  26. package/dist/storybook-static/{runtime~main.549d38be.iframe.bundle.js → runtime~main.1b62987c.iframe.bundle.js} +1 -1
  27. package/dist/storybook-static/{vendors~main.1bc2d8cb.iframe.bundle.d.ts → vendors~main.4e754259.iframe.bundle.d.ts} +0 -0
  28. package/dist/storybook-static/{vendors~main.1bc2d8cb.iframe.bundle.js → vendors~main.4e754259.iframe.bundle.js} +18 -18
  29. package/package.json +1 -1
  30. package/release-note.md +19 -22
package/dist/src/desktop/components/ChatBubbleListItem/ChatBubble.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  export declare type ChatBubbleProps = {
3
- colorTheme?: 'my' | 'seller' | 'subscriber';
3
+ colorTheme?: 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
4
4
  tailType?: 'none' | 'left_top' | 'right_top';
5
5
  children?: React.ReactNode;
6
6
  };
package/dist/src/desktop/components/ChatBubbleListItem/ChatBubble.js CHANGED
@@ -29,12 +29,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  var backgroundColorTheme = {
32
- my: 'ui_cpnt_list_chatbubble_base_area_my',
33
- seller: 'ui_cpnt_list_chatbubble_base_area_seller',
34
- subscriber: 'ui_cpnt_list_chatbubble_base_area_subscriber'
32
+ grey: 'ui_cpnt_list_chatbubble_base_grey',
33
+ brand_primary: 'ui_cpnt_list_chatbubble_base_brand_primary',
34
+ translucent_white: 'ui_cpnt_list_chatbubble_base_translucent_white',
35
+ translucent_black: 'ui_cpnt_list_chatbubble_base_translucent_black'
35
36
  };
36
37
  function ChatBubble(_a) {
37
- var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'seller' : _b, _c = _a.tailType, tailType = _c === void 0 ? 'left_top' : _c, children = _a.children;
38
+ var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'grey' : _b, _c = _a.tailType, tailType = _c === void 0 ? 'left_top' : _c, children = _a.children;
38
39
  return (react_1.default.createElement(S_ChatBubbleWrapper, null,
39
40
  react_1.default.createElement(S_Tail, { width: "8", height: "11", viewBox: "0 0 8 11", tailType: tailType, colorTheme: colorTheme },
40
41
  react_1.default.createElement("path", { d: "M1107,336.800385 C1107,341.257979 1107.46413,342.87441 1108.33566,344.50404 C1108.99708,345.740772 1109.89313,346.775532 1110.99903,347.583527 L1111,347.618755 L1110.99894,347.618755 C1108.35845,347.618755 1105.83748,347.107028 1103.52979,346.177337 C1104.54074,345.507794 1105.3496,344.61519 1105.93147,343.527194 C1106.6287,342.22349 1107,340.8866 1107,337.582996 L1107,337.582996 Z", transform: "rotate(180 555.765 173.81)" })),
package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts CHANGED
@@ -1,11 +1,12 @@
1
1
  import React from 'react';
2
2
  import { PDSTextType, PDSValueOption } from '../../../common';
3
+ declare type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
3
4
  export declare type ChatBubbleListItemProps = {
4
5
  titleText?: PDSTextType;
5
- imageMode?: 'none' | 'use';
6
6
  imageSrc?: string;
7
7
  hoverMode?: 'none' | 'use';
8
- styleTheme?: 'seller_tail' | 'seller' | 'subscriber_tail' | 'subscriber' | 'my_tail' | 'my';
8
+ styleTheme: 'other_avatar_impact' | 'other_avatar' | 'other_avatar_sub' | 'other' | 'other_sub' | 'me' | 'me_sub';
9
+ colorTheme?: ColorThemeType;
9
10
  timeMode?: 'none' | 'use';
10
11
  timeText?: PDSTextType;
11
12
  contextMenuOptionArray?: PDSValueOption[];
@@ -13,5 +14,5 @@ export declare type ChatBubbleListItemProps = {
13
14
  children?: React.ReactNode;
14
15
  onClickContextMenuItem?: (option: PDSValueOption) => void;
15
16
  };
16
- declare function ChatBubbleListItem({ titleText, imageMode, imageSrc, hoverMode, styleTheme, timeMode, timeText, contextMenuOptionArray, contextMenuState, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
17
+ declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, contextMenuOptionArray, contextMenuState, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
17
18
  export default ChatBubbleListItem;
package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js CHANGED
@@ -35,28 +35,25 @@ var IconButton_1 = require("../IconButton");
35
35
  var TextLabel_1 = require("../TextLabel");
36
36
  var ChatBubble_1 = __importDefault(require("./ChatBubble"));
37
37
  var Popup_1 = require("./Popup");
38
- var ChatBubbleColorTheme = {
39
- seller_tail: 'seller',
40
- seller: 'seller',
41
- subscriber_tail: 'subscriber',
42
- subscriber: 'subscriber',
43
- my_tail: 'my',
44
- my: 'my'
38
+ var chatBubbleTailType = {
39
+ other_avatar_impact: 'left_top',
40
+ other_avatar: 'left_top',
41
+ other_avatar_sub: 'none',
42
+ other: 'left_top',
43
+ other_sub: 'none',
44
+ me: 'right_top',
45
+ me_sub: 'none'
45
46
  };
46
- var ChatBubbleTailType = {
47
- seller_tail: 'left_top',
48
- seller: 'none',
49
- subscriber_tail: 'left_top',
50
- subscriber: 'none',
51
- my_tail: 'right_top',
52
- my: 'none'
47
+ var profileImageBorderColorTheme = {
48
+ grey: 'ui_avatar_border',
49
+ brand_primary: 'ui_avatar_border_brandprimary',
50
+ translucent_white: 'ui_avatar_border_translucent_white',
51
+ translucent_black: 'ui_avatar_border_translucent_black'
53
52
  };
54
53
  function ChatBubbleListItem(_a) {
55
- var titleText = _a.titleText, _b = _a.imageMode, imageMode = _b === void 0 ? 'use' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, _d = _a.styleTheme, styleTheme = _d === void 0 ? 'seller_tail' : _d, _e = _a.timeMode, timeMode = _e === void 0 ? 'use' : _e, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _f = _a.contextMenuState, contextMenuState = _f === void 0 ? 'normal' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
56
- var isMy = styleTheme.includes('my');
57
- var isSeller = styleTheme.includes('seller');
58
- var isTail = styleTheme.includes('tail');
59
- var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
54
+ var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
55
+ var isMe = styleTheme.includes('me');
56
+ var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
60
57
  var contextMenuRef = (0, react_1.useRef)(null);
61
58
  var chatBody = document.querySelector('#chatMessageBox');
62
59
  var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -82,24 +79,65 @@ function ChatBubbleListItem(_a) {
82
79
  }
83
80
  setIsContextMenuOpen(false);
84
81
  };
82
+ var isShowProfileImage = function () {
83
+ if (styleTheme === 'other_avatar_impact' || styleTheme === 'other_avatar') {
84
+ return true;
85
+ }
86
+ return false;
87
+ };
88
+ var isShowTitleText = function () {
89
+ if (styleTheme === 'other_avatar_impact' ||
90
+ styleTheme === 'other_avatar' ||
91
+ styleTheme === 'other') {
92
+ return true;
93
+ }
94
+ return false;
95
+ };
96
+ var checkTextColorTheme = function () {
97
+ switch (colorTheme) {
98
+ case 'grey': {
99
+ return 'sysTextPrimary';
100
+ }
101
+ case 'brand_primary': {
102
+ return 'usrTextBrandPrimary';
103
+ }
104
+ case 'translucent_white': {
105
+ return 'sysTextBlack';
106
+ }
107
+ case 'translucent_black': {
108
+ return 'sysTextWhite';
109
+ }
110
+ default: {
111
+ return 'sysTextPrimary';
112
+ }
113
+ }
114
+ };
115
+ var isLeftSpacingChecker = function () {
116
+ if (styleTheme === 'other_avatar_impact' ||
117
+ styleTheme === 'other_avatar' ||
118
+ styleTheme === 'other_avatar_sub') {
119
+ return true;
120
+ }
121
+ return false;
122
+ };
85
123
  return (react_1.default.createElement(react_1.default.Fragment, null,
86
- react_1.default.createElement(S_ChatBubbleListItem, { "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isMy: isMy, imageMode: imageMode },
87
- imageMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null, isTail && !isMy ? (react_1.default.createElement(S_ImageViewWrapper, { isSeller: isSeller },
88
- 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" })))),
124
+ react_1.default.createElement(S_ChatBubbleListItem, { "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isMe: isMe },
125
+ isLeftSpacingChecker() ? (react_1.default.createElement(react_1.default.Fragment, null, isShowProfileImage() ? (react_1.default.createElement(S_ImageViewWrapper, { isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme },
126
+ react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })),
89
127
  react_1.default.createElement(S_RightBox, null,
90
- isTail && !isMy && (react_1.default.createElement(react_1.default.Fragment, null,
91
- react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: isSeller ? 'usrTextBrandPrimary' : 'sysTextPrimary' }),
128
+ isShowTitleText() && (react_1.default.createElement(react_1.default.Fragment, null,
129
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: colorTheme && checkTextColorTheme() }),
92
130
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }))),
93
131
  react_1.default.createElement(S_ChatBubbleBox, null,
94
- react_1.default.createElement(S_ChatBubbleWrapper, { isMy: isMy },
95
- timeMode === 'use' && timeText && isMy && (react_1.default.createElement(S_TimeWrapper, null,
132
+ react_1.default.createElement(S_ChatBubbleWrapper, { isMe: isMe },
133
+ timeMode === 'use' && timeText && isMe && (react_1.default.createElement(S_TimeWrapper, null,
96
134
  react_1.default.createElement(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }),
97
135
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }))),
98
- react_1.default.createElement(ChatBubble_1.default, { colorTheme: ChatBubbleColorTheme[styleTheme], tailType: ChatBubbleTailType[styleTheme] }, children),
99
- timeMode === 'use' && timeText && !isMy && (react_1.default.createElement(S_TimeWrapper, null,
136
+ react_1.default.createElement(ChatBubble_1.default, { colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, children),
137
+ timeMode === 'use' && timeText && !isMe && (react_1.default.createElement(S_TimeWrapper, null,
100
138
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
101
139
  react_1.default.createElement(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })))),
102
- hoverMode === 'use' && !isMy && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
140
+ hoverMode === 'use' && !isMe && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
103
141
  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 }))))),
104
142
  react_1.default.createElement(Popup_1.PopupProvider, null,
105
143
  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); } },
@@ -109,41 +147,34 @@ var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (tem
109
147
  var theme = _a.theme;
110
148
  return theme.spacing.spacingA;
111
149
  });
112
- var NoImageChatBubbleListItem = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-left: ", ";\n"], ["\n margin-left: ", ";\n"])), function (_a) {
113
- var theme = _a.theme;
114
- return theme.spacing.spacingA;
150
+ var S_ChatBubbleListItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n"], ["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n"])), function (_a) {
151
+ var isMe = _a.isMe;
152
+ return isMe && MyChatBubbleListItem;
115
153
  });
116
- var S_ChatBubbleListItem = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n ", ";\n"], ["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n ", ";\n"])), function (_a) {
117
- var isMy = _a.isMy;
118
- return isMy && MyChatBubbleListItem;
119
- }, function (_a) {
120
- var imageMode = _a.imageMode;
121
- return imageMode === 'none' && NoImageChatBubbleListItem;
154
+ var ImageViewBrandPrimary = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: 2px solid\n ", ";\n"], ["\n border: 2px solid\n ", ";\n"])), function (_a) {
155
+ var colorTheme = _a.colorTheme, theme = _a.theme;
156
+ return colorTheme && theme[profileImageBorderColorTheme[colorTheme]];
122
157
  });
123
- var ImageViewSeller = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border: 2px solid ", ";\n"], ["\n border: 2px solid ", ";\n"])), function (_a) {
124
- var theme = _a.theme;
125
- return theme.ui_profile_image_border_brandprimary;
126
- });
127
- var ImageViewDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border: 1px solid ", ";\n"], ["\n border: 1px solid ", ";\n"])), function (_a) {
128
- var theme = _a.theme;
129
- return theme.ui_profile_image_border;
158
+ var ImageViewDefault = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border: 1px solid\n ", ";\n"], ["\n border: 1px solid\n ", ";\n"])), function (_a) {
159
+ var colorTheme = _a.colorTheme, theme = _a.theme;
160
+ return colorTheme && theme[profileImageBorderColorTheme[colorTheme]];
130
161
  });
131
- var S_ImageViewWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n ", ";\n"])), function (_a) {
162
+ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n ", ";\n"])), function (_a) {
132
163
  var theme = _a.theme;
133
164
  return theme.spacing.spacingB;
134
165
  }, function (_a) {
135
- var isSeller = _a.isSeller;
136
- return (isSeller ? ImageViewSeller : ImageViewDefault);
166
+ var isOtherAvatarImpact = _a.isOtherAvatarImpact;
167
+ return (isOtherAvatarImpact ? ImageViewBrandPrimary : ImageViewDefault);
137
168
  });
138
- var S_RightBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
139
- var S_ChatBubbleBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
140
- var MyChatBubble = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
141
- var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n\n ", ";\n"], ["\n flex: 1;\n display: flex;\n\n ", ";\n"])), function (_a) {
142
- var isMy = _a.isMy;
143
- return isMy && MyChatBubble;
169
+ var S_RightBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
170
+ var S_ChatBubbleBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
171
+ var MyChatBubble = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
172
+ var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n\n ", ";\n"], ["\n flex: 1;\n display: flex;\n\n ", ";\n"])), function (_a) {
173
+ var isMe = _a.isMe;
174
+ return isMe && MyChatBubble;
144
175
  });
145
- var S_TimeWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-self: flex-end;\n display: flex;\n"], ["\n align-self: flex-end;\n display: flex;\n"])));
146
- var S_SeeMoreButton = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
176
+ var S_TimeWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-self: flex-end;\n display: flex;\n"], ["\n align-self: flex-end;\n display: flex;\n"])));
177
+ var S_SeeMoreButton = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
147
178
  var theme = _a.theme;
148
179
  return theme.spacing.spacingB;
149
180
  }, function (_a) {
@@ -157,4 +188,4 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_12 || (temp
157
188
  return hoverMode === 'use' && '1';
158
189
  });
159
190
  exports.default = ChatBubbleListItem;
160
- 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;
191
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
package/dist/src/desktop/components/TextLabel/TextLabel.d.ts CHANGED
@@ -7,7 +7,7 @@ export declare type TextLabelProps = {
7
7
  textAlign?: 'left' | 'center' | 'right';
8
8
  styleTheme?: 'displayBold' | 'wizardPageTitleBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
9
9
  colorOverride?: UiColors;
10
- colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
10
+ colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextBlack' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
11
11
  singleLineMode?: 'none' | 'use';
12
12
  ellipsisMode?: 'none' | 'use';
13
13
  lineLimit?: number;
@@ -24,7 +24,7 @@ export declare type TextStyleProps = {
24
24
  tooltipPosition?: 'left_top' | 'left_bottom' | 'right_top' | 'right_bottom';
25
25
  styleTheme?: 'displayBold' | 'wizardPageTitleBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
26
26
  colorOverride?: UiColors;
27
- colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
27
+ colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextBlack' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
28
28
  singleLineMode?: 'none' | 'use';
29
29
  ellipsisMode?: 'none' | 'use';
30
30
  lineLimit?: number;
package/dist/src/desktop/components/TextLabel/TextLabel.js CHANGED
@@ -238,56 +238,60 @@ var sysTextWhite = (0, styled_components_1.css)(templateObject_22 || (templateOb
238
238
  var theme = _a.theme;
239
239
  return theme.ui_cpnt_textlabel_sys_white;
240
240
  });
241
- var sysTextError = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
241
+ var sysTextBlack = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
242
+ var theme = _a.theme;
243
+ return theme.ui_cpnt_textlabel_sys_black;
244
+ });
245
+ var sysTextError = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
242
246
  var theme = _a.theme;
243
247
  return theme.ui_cpnt_textlabel_sys_error;
244
248
  });
245
- var sysTextWarning = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
249
+ var sysTextWarning = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
246
250
  var theme = _a.theme;
247
251
  return theme.ui_cpnt_textlabel_sys_warning;
248
252
  });
249
- var sysTextBrandPrimary = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
253
+ var sysTextBrandPrimary = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
250
254
  var theme = _a.theme;
251
255
  return theme.ui_cpnt_textlabel_sys_brandprimary;
252
256
  });
253
- var sysTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
257
+ var sysTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
254
258
  var theme = _a.theme;
255
259
  return theme.ui_cpnt_textlabel_sys_brandseconvariant;
256
260
  });
257
- var usrTextBrandPrimary = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
261
+ var usrTextBrandPrimary = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
258
262
  var theme = _a.theme;
259
263
  return theme.ui_cpnt_textlabel_usr_brandprimary;
260
264
  });
261
- var usrTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
265
+ var usrTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
262
266
  var theme = _a.theme;
263
267
  return theme.ui_cpnt_textlabel_usr_brandseconvariant;
264
268
  });
265
- var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
269
+ var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
266
270
  var theme = _a.theme;
267
271
  return theme.ui_cpnt_textlabel_usr_brandonprimary;
268
272
  });
269
- var customFontStyle = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n font-size: ", ";\n line-height: 1.5;\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: 1.5;\n font-weight: ", ";\n"])), function (_a) {
273
+ var customFontStyle = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n font-size: ", ";\n line-height: 1.5;\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: 1.5;\n font-weight: ", ";\n"])), function (_a) {
270
274
  var customFontSize = _a.customFontSize;
271
275
  return customFontSize;
272
276
  }, function (_a) {
273
277
  var theme = _a.theme, customFontWeight = _a.customFontWeight;
274
278
  return customFontWeight === 'bold' ? theme.fontWeight.bold : theme.fontWeight.normal;
275
279
  });
276
- var colorOverrideStyle = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
280
+ var colorOverrideStyle = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
277
281
  var colorOverride = _a.colorOverride, theme = _a.theme;
278
282
  return colorOverride && theme[colorOverride];
279
283
  });
280
- var ellipsisStyle = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_a) {
284
+ var ellipsisStyle = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_a) {
281
285
  var lineLimit = _a.lineLimit;
282
286
  return lineLimit;
283
287
  });
284
- var userSelectModeStyle = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"], ["\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"])));
285
- var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n position: absolute;\n left: 0;\n width: 16px;\n }\n"], ["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n position: absolute;\n left: 0;\n width: 16px;\n }\n"])));
286
- var tooltipLeftTop = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n right: 0;\n bottom: 20px;\n"], ["\n right: 0;\n bottom: 20px;\n"])));
287
- var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n right: 0;\n top: 20px;\n"], ["\n right: 0;\n top: 20px;\n"])));
288
- var tooltipRightTop = (0, styled_components_1.css)(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n left: 0;\n bottom: 20px;\n"], ["\n left: 0;\n bottom: 20px;\n"])));
289
- var tooltipRightBottom = (0, styled_components_1.css)(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n left: 0;\n top: 20px;\n"], ["\n left: 0;\n top: 20px;\n"])));
290
- var S_TextLabel = styled_components_1.default.div(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n overflow-wrap: break-word;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n overflow-wrap: break-word;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
288
+ var userSelectModeStyle = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"], ["\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"])));
289
+ var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n position: absolute;\n left: 0;\n width: 16px;\n }\n"], ["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n position: absolute;\n left: 0;\n width: 16px;\n }\n"])));
290
+ var tooltipLeftTop = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n right: 0;\n bottom: 20px;\n"], ["\n right: 0;\n bottom: 20px;\n"])));
291
+ var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n right: 0;\n top: 20px;\n"], ["\n right: 0;\n top: 20px;\n"])));
292
+ var tooltipRightTop = (0, styled_components_1.css)(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n left: 0;\n bottom: 20px;\n"], ["\n left: 0;\n bottom: 20px;\n"])));
293
+ var tooltipRightBottom = (0, styled_components_1.css)(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n left: 0;\n top: 20px;\n"], ["\n left: 0;\n top: 20px;\n"])));
294
+ var S_TextLabel = styled_components_1.default.div(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n overflow-wrap: break-word;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n overflow-wrap: break-word;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
291
295
  var textAlign = _a.textAlign;
292
296
  return textAlign;
293
297
  }, function (_a) {
@@ -330,6 +334,7 @@ var S_TextLabel = styled_components_1.default.div(templateObject_39 || (template
330
334
  sysTextSecondary: sysTextSecondary,
331
335
  sysTextTertiary: sysTextTertiary,
332
336
  sysTextWhite: sysTextWhite,
337
+ sysTextBlack: sysTextBlack,
333
338
  sysTextError: sysTextError,
334
339
  sysTextWarning: sysTextWarning,
335
340
  sysTextBrandPrimary: sysTextBrandPrimary,
@@ -366,7 +371,7 @@ var S_TextLabel = styled_components_1.default.div(templateObject_39 || (template
366
371
  var bulletPointMode = _a.bulletPointMode;
367
372
  return bulletPointMode === 'use' && bulletPointModeStyle;
368
373
  });
369
- var S_AfterTextBox = styled_components_1.default.div(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"], ["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"])), function (_a) {
374
+ var S_AfterTextBox = styled_components_1.default.div(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"], ["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"])), function (_a) {
370
375
  var theme = _a.theme;
371
376
  return theme.spacing.spacingA;
372
377
  }, function (_a) {
@@ -382,8 +387,8 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_40 || (templ
382
387
  return 'vertical-align: middle';
383
388
  }
384
389
  });
385
- var S_IconWrapper = styled_components_1.default.div(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n width: 16px;\n height: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n width: 16px;\n height: 16px;\n"])));
386
- var S_TooltipWrapper = styled_components_1.default.div(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n max-width: 320px;\n overflow-wrap: break-word;\n padding: ", ";\n position: absolute;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n\n ", ";\n\n ", ";\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n max-width: 320px;\n overflow-wrap: break-word;\n padding: ", ";\n position: absolute;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n\n ", ";\n\n ", ";\n"])), function (_a) {
390
+ var S_IconWrapper = styled_components_1.default.div(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n width: 16px;\n height: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n width: 16px;\n height: 16px;\n"])));
391
+ var S_TooltipWrapper = styled_components_1.default.div(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n max-width: 320px;\n overflow-wrap: break-word;\n padding: ", ";\n position: absolute;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n\n ", ";\n\n ", ";\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n max-width: 320px;\n overflow-wrap: break-word;\n padding: ", ";\n position: absolute;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n\n ", ";\n\n ", ";\n"])), function (_a) {
387
392
  var theme = _a.theme;
388
393
  return theme.ui_cpnt_contextmenu_base;
389
394
  }, function (_a) {
@@ -421,4 +426,4 @@ var S_TooltipWrapper = styled_components_1.default.div(templateObject_42 || (tem
421
426
  }[tooltipPosition];
422
427
  });
423
428
  exports.default = TextLabel;
424
- 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, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42;
429
+ 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, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43;
package/dist/src/mobile/components/ChatBubbleListItem/ChatBubble.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  export declare type ChatBubbleProps = {
3
- colorTheme?: 'my' | 'seller' | 'subscriber';
3
+ colorTheme?: 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
4
4
  tailType?: 'none' | 'left_top' | 'right_top';
5
5
  children?: React.ReactNode;
6
6
  };
package/dist/src/mobile/components/ChatBubbleListItem/ChatBubble.js CHANGED
@@ -29,12 +29,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  var backgroundColorTheme = {
32
- my: 'ui_cpnt_list_chatbubble_base_area_my',
33
- seller: 'ui_cpnt_list_chatbubble_base_area_seller',
34
- subscriber: 'ui_cpnt_list_chatbubble_base_area_subscriber'
32
+ grey: 'ui_cpnt_list_chatbubble_base_grey',
33
+ brand_primary: 'ui_cpnt_list_chatbubble_base_brand_primary',
34
+ translucent_white: 'ui_cpnt_list_chatbubble_base_translucent_white',
35
+ translucent_black: 'ui_cpnt_list_chatbubble_base_translucent_black'
35
36
  };
36
37
  function ChatBubble(_a) {
37
- var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'seller' : _b, _c = _a.tailType, tailType = _c === void 0 ? 'left_top' : _c, children = _a.children;
38
+ var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'grey' : _b, _c = _a.tailType, tailType = _c === void 0 ? 'left_top' : _c, children = _a.children;
38
39
  return (react_1.default.createElement(S_ChatBubbleWrapper, null,
39
40
  react_1.default.createElement(S_Tail, { width: "8", height: "11", viewBox: "0 0 8 11", tailType: tailType, colorTheme: colorTheme },
40
41
  react_1.default.createElement("path", { d: "M1107,336.800385 C1107,341.257979 1107.46413,342.87441 1108.33566,344.50404 C1108.99708,345.740772 1109.89313,346.775532 1110.99903,347.583527 L1111,347.618755 L1110.99894,347.618755 C1108.35845,347.618755 1105.83748,347.107028 1103.52979,346.177337 C1104.54074,345.507794 1105.3496,344.61519 1105.93147,343.527194 C1106.6287,342.22349 1107,340.8866 1107,337.582996 L1107,337.582996 Z", transform: "rotate(180 555.765 173.81)" })),
package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts CHANGED
@@ -1,11 +1,12 @@
1
1
  import React from 'react';
2
2
  import { PDSTextType, PDSValueOption } from '../../../common';
3
+ declare type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
3
4
  export declare type ChatBubbleListItemProps = {
4
5
  titleText?: PDSTextType;
5
- imageMode?: 'none' | 'use';
6
6
  imageSrc?: string;
7
7
  hoverMode?: 'none' | 'use';
8
- styleTheme?: 'seller_tail' | 'seller' | 'subscriber_tail' | 'subscriber' | 'my_tail' | 'my';
8
+ styleTheme: 'other_avatar_impact' | 'other_avatar' | 'other_avatar_sub' | 'other' | 'other_sub' | 'me' | 'me_sub';
9
+ colorTheme?: ColorThemeType;
9
10
  timeMode?: 'none' | 'use';
10
11
  timeText?: PDSTextType;
11
12
  contextMenuOptionArray?: PDSValueOption[];
@@ -13,5 +14,5 @@ export declare type ChatBubbleListItemProps = {
13
14
  children?: React.ReactNode;
14
15
  onClickContextMenuItem?: (option: PDSValueOption) => void;
15
16
  };
16
- declare function ChatBubbleListItem({ titleText, imageMode, imageSrc, hoverMode, styleTheme, timeMode, timeText, contextMenuOptionArray, contextMenuState, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
17
+ declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, contextMenuOptionArray, contextMenuState, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
17
18
  export default ChatBubbleListItem;