pds-dev-kit-web 1.8.7 → 1.8.9

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

@@ -19,6 +19,7 @@ exports.fontWeight = {
 };
 exports.desktopFontSize = {
     displayHeading: '40px',
+    wizardPageTitle: '40px',
     heading: '24px',
     leadParagraph: '20px',
     subtitle: '18px',
@@ -32,6 +33,7 @@ exports.desktopFontSize = {
 };
 exports.desktopLineHeight = {
     displayHeading: '1.5',
+    wizardPageTitle: '1.2',
     heading: '1.5',
     leadParagraph: '1.5',
     subtitle: '1.5',
@@ -58,6 +60,7 @@ exports.desktopEditorLineHeight = {
 };
 exports.mobileFontSize = {
     displayHeading: '32px',
+    wizardPageTitle: '40px',
     heading: '24px',
     leadParagraph: '20px',
     subtitle: '18px',
@@ -71,6 +74,7 @@ exports.mobileFontSize = {
 };
 exports.mobileLineHeight = {
     displayHeading: '1.5',
+    wizardPageTitle: '1.2',
     heading: '1.5',
     leadParagraph: '1.5',
     subtitle: '1.5',

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

@@ -6,6 +6,7 @@ export interface PdsDevKitTheme {
     };
     desktopFontSize: {
         displayHeading: '40px';
+        wizardPageTitle: '40px';
         heading: '24px';
         leadParagraph: '20px';
         subtitle: '18px';
@@ -19,6 +20,7 @@ export interface PdsDevKitTheme {
     };
     desktopLineHeight: {
         displayHeading: '1.5';
+        wizardPageTitle: '1.2';
         heading: '1.5';
         leadParagraph: '1.5';
         subtitle: '1.5';
@@ -45,6 +47,7 @@ export interface PdsDevKitTheme {
     };
     mobileFontSize: {
         displayHeading: '32px';
+        wizardPageTitle: '40px';
         heading: '24px';
         leadParagraph: '20px';
         subtitle: '18px';
@@ -58,6 +61,7 @@ export interface PdsDevKitTheme {
     };
     mobileLineHeight: {
         displayHeading: '1.5';
+        wizardPageTitle: '1.2';
         heading: '1.5';
         leadParagraph: '1.5';
         subtitle: '1.5';

package/dist/src/desktop/components/ChatBubbleListItem/ChatBubble.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare type ChatBubbleProps = {
-    colorTheme?: 'my' | 'seller' | 'subscriber';
+    colorTheme?: 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
     tailType?: 'none' | 'left_top' | 'right_top';
     children?: React.ReactNode;
 };

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

@@ -29,12 +29,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var backgroundColorTheme = {
-    my: 'ui_cpnt_list_chatbubble_base_area_my',
-    seller: 'ui_cpnt_list_chatbubble_base_area_seller',
-    subscriber: 'ui_cpnt_list_chatbubble_base_area_subscriber'
+    grey: 'ui_cpnt_list_chatbubble_base_grey',
+    brand_primary: 'ui_cpnt_list_chatbubble_base_brand_primary',
+    translucent_white: 'ui_cpnt_list_chatbubble_base_translucent_white',
+    translucent_black: 'ui_cpnt_list_chatbubble_base_translucent_black'
 };
 function ChatBubble(_a) {
-    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'seller' : _b, _c = _a.tailType, tailType = _c === void 0 ? 'left_top' : _c, children = _a.children;
+    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'grey' : _b, _c = _a.tailType, tailType = _c === void 0 ? 'left_top' : _c, children = _a.children;
     return (react_1.default.createElement(S_ChatBubbleWrapper, null,
         react_1.default.createElement(S_Tail, { width: "8", height: "11", viewBox: "0 0 8 11", tailType: tailType, colorTheme: colorTheme },
             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

@@ -1,11 +1,12 @@
 import React from 'react';
 import { PDSTextType, PDSValueOption } from '../../../common';
+declare type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
 export declare type ChatBubbleListItemProps = {
     titleText?: PDSTextType;
-    imageMode?: 'none' | 'use';
     imageSrc?: string;
     hoverMode?: 'none' | 'use';
-    styleTheme?: 'seller_tail' | 'seller' | 'subscriber_tail' | 'subscriber' | 'my_tail' | 'my';
+    styleTheme: 'other_avatar_impact' | 'other_avatar' | 'other_avatar_sub' | 'other' | 'other_sub' | 'me' | 'me_sub';
+    colorTheme?: ColorThemeType;
     timeMode?: 'none' | 'use';
     timeText?: PDSTextType;
     contextMenuOptionArray?: PDSValueOption[];
@@ -13,5 +14,5 @@ export declare type ChatBubbleListItemProps = {
     children?: React.ReactNode;
     onClickContextMenuItem?: (option: PDSValueOption) => void;
 };
-declare function ChatBubbleListItem({ titleText, imageMode, imageSrc, hoverMode, styleTheme, timeMode, timeText, contextMenuOptionArray, contextMenuState, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
+declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, contextMenuOptionArray, contextMenuState, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
 export default ChatBubbleListItem;

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

@@ -35,28 +35,25 @@ var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
 var ChatBubble_1 = __importDefault(require("./ChatBubble"));
 var Popup_1 = require("./Popup");
-var ChatBubbleColorTheme = {
-    seller_tail: 'seller',
-    seller: 'seller',
-    subscriber_tail: 'subscriber',
-    subscriber: 'subscriber',
-    my_tail: 'my',
-    my: 'my'
+var chatBubbleTailType = {
+    other_avatar_impact: 'left_top',
+    other_avatar: 'left_top',
+    other_avatar_sub: 'none',
+    other: 'left_top',
+    other_sub: 'none',
+    me: 'right_top',
+    me_sub: 'none'
 };
-var ChatBubbleTailType = {
-    seller_tail: 'left_top',
-    seller: 'none',
-    subscriber_tail: 'left_top',
-    subscriber: 'none',
-    my_tail: 'right_top',
-    my: 'none'
+var profileImageBorderColorTheme = {
+    grey: 'ui_avatar_border',
+    brand_primary: 'ui_avatar_border_brandprimary',
+    translucent_white: 'ui_avatar_border_translucent_white',
+    translucent_black: 'ui_avatar_border_translucent_black'
 };
 function ChatBubbleListItem(_a) {
-    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;
-    var isMy = styleTheme.includes('my');
-    var isSeller = styleTheme.includes('seller');
-    var isTail = styleTheme.includes('tail');
-    var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
+    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;
+    var isMe = styleTheme.includes('me');
+    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();
@@ -82,24 +79,65 @@ function ChatBubbleListItem(_a) {
         }
         setIsContextMenuOpen(false);
     };
+    var isShowProfileImage = function () {
+        if (styleTheme === 'other_avatar_impact' || styleTheme === 'other_avatar') {
+            return true;
+        }
+        return false;
+    };
+    var isShowTitleText = function () {
+        if (styleTheme === 'other_avatar_impact' ||
+            styleTheme === 'other_avatar' ||
+            styleTheme === 'other') {
+            return true;
+        }
+        return false;
+    };
+    var checkTextColorTheme = function () {
+        switch (colorTheme) {
+            case 'grey': {
+                return 'sysTextPrimary';
+            }
+            case 'brand_primary': {
+                return 'usrTextBrandPrimary';
+            }
+            case 'translucent_white': {
+                return 'sysTextBlack';
+            }
+            case 'translucent_black': {
+                return 'sysTextWhite';
+            }
+            default: {
+                return 'sysTextPrimary';
+            }
+        }
+    };
+    var isLeftSpacingChecker = function () {
+        if (styleTheme === 'other_avatar_impact' ||
+            styleTheme === 'other_avatar' ||
+            styleTheme === 'other_avatar_sub') {
+            return true;
+        }
+        return false;
+    };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_ChatBubbleListItem, { "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isMy: isMy, imageMode: imageMode },
-            imageMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null, isTail && !isMy ? (react_1.default.createElement(S_ImageViewWrapper, { isSeller: isSeller },
-                react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: isSeller ? 36 : 38 }))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })))),
+        react_1.default.createElement(S_ChatBubbleListItem, { "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isMe: isMe },
+            isLeftSpacingChecker() ? (react_1.default.createElement(react_1.default.Fragment, null, isShowProfileImage() ? (react_1.default.createElement(S_ImageViewWrapper, { isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme },
+                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" })),
             react_1.default.createElement(S_RightBox, null,
-                isTail && !isMy && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: isSeller ? 'usrTextBrandPrimary' : 'sysTextPrimary' }),
+                isShowTitleText() && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: colorTheme && checkTextColorTheme() }),
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }))),
                 react_1.default.createElement(S_ChatBubbleBox, null,
-                    react_1.default.createElement(S_ChatBubbleWrapper, { isMy: isMy },
-                        timeMode === 'use' && timeText && isMy && (react_1.default.createElement(S_TimeWrapper, null,
+                    react_1.default.createElement(S_ChatBubbleWrapper, { isMe: isMe },
+                        timeMode === 'use' && timeText && isMe && (react_1.default.createElement(S_TimeWrapper, null,
                             react_1.default.createElement(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }),
                             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }))),
-                        react_1.default.createElement(ChatBubble_1.default, { colorTheme: ChatBubbleColorTheme[styleTheme], tailType: ChatBubbleTailType[styleTheme] }, children),
-                        timeMode === 'use' && timeText && !isMy && (react_1.default.createElement(S_TimeWrapper, null,
+                        react_1.default.createElement(ChatBubble_1.default, { colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, children),
+                        timeMode === 'use' && timeText && !isMe && (react_1.default.createElement(S_TimeWrapper, null,
                             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
                             react_1.default.createElement(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })))),
-                    hoverMode === 'use' && !isMy && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
+                    hoverMode === 'use' && !isMe && (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); } },
@@ -109,41 +147,34 @@ var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (tem
     var theme = _a.theme;
     return theme.spacing.spacingA;
 });
-var NoImageChatBubbleListItem = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-left: ", ";\n"], ["\n  margin-left: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
+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) {
+    var isMe = _a.isMe;
+    return isMe && MyChatBubbleListItem;
 });
-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) {
-    var isMy = _a.isMy;
-    return isMy && MyChatBubbleListItem;
-}, function (_a) {
-    var imageMode = _a.imageMode;
-    return imageMode === 'none' && NoImageChatBubbleListItem;
+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) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    return colorTheme && theme[profileImageBorderColorTheme[colorTheme]];
 });
-var ImageViewSeller = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: 2px solid ", ";\n"], ["\n  border: 2px solid ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_profile_image_border_brandprimary;
-});
-var ImageViewDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border: 1px solid ", ";\n"], ["\n  border: 1px solid ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_profile_image_border;
+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) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    return colorTheme && theme[profileImageBorderColorTheme[colorTheme]];
 });
-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) {
+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) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {
-    var isSeller = _a.isSeller;
-    return (isSeller ? ImageViewSeller : ImageViewDefault);
+    var isOtherAvatarImpact = _a.isOtherAvatarImpact;
+    return (isOtherAvatarImpact ? ImageViewBrandPrimary : ImageViewDefault);
 });
-var S_RightBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-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"])));
-var MyChatBubble = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  justify-content: flex-end;\n"], ["\n  justify-content: flex-end;\n"])));
-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) {
-    var isMy = _a.isMy;
-    return isMy && MyChatBubble;
+var S_RightBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+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"])));
+var MyChatBubble = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  justify-content: flex-end;\n"], ["\n  justify-content: flex-end;\n"])));
+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) {
+    var isMe = _a.isMe;
+    return isMe && MyChatBubble;
 });
-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"])));
-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) {
+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"])));
+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) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {
@@ -157,4 +188,4 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_12 || (temp
     return hoverMode === 'use' && '1';
 });
 exports.default = ChatBubbleListItem;
-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;
+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

@@ -5,9 +5,9 @@ export declare type TextLabelProps = {
     tooltipText?: PDSTextType;
     tooltipPosition?: 'left_top' | 'left_bottom' | 'right_top' | 'right_bottom';
     textAlign?: 'left' | 'center' | 'right';
-    styleTheme?: 'displayBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
+    styleTheme?: 'displayBold' | 'wizardPageTitleBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
     colorOverride?: UiColors;
-    colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
+    colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextBlack' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
     singleLineMode?: 'none' | 'use';
     ellipsisMode?: 'none' | 'use';
     lineLimit?: number;
@@ -22,9 +22,9 @@ export declare type TextLabelProps = {
 export declare type TextStyleProps = {
     textAlign?: 'left' | 'center' | 'right';
     tooltipPosition?: 'left_top' | 'left_bottom' | 'right_top' | 'right_bottom';
-    styleTheme?: 'displayBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
+    styleTheme?: 'displayBold' | 'wizardPageTitleBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
     colorOverride?: UiColors;
-    colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
+    colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextBlack' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
     singleLineMode?: 'none' | 'use';
     ellipsisMode?: 'none' | 'use';
     lineLimit?: number;