pds-dev-kit-web 2.2.251 → 2.2.253

package/dist/src/{hybrid/components/ContextBubble/ContextBubble.d.ts → desktop/components/SpeechBubble/SpeechBubble.d.ts}

@@ -1,6 +1,6 @@
-import type { UiColors } from '../../../common/types';
+/// <reference types="react" />
+import type { PDSTextType, UiColors } from '../../../common/types';
 import type { BubblePositionType } from '../../../common/types/systemUI';
-import type { ReactNode } from 'react';
 declare const paddingSpacing: {
     readonly spacing_a: "spacingA";
     readonly spacing_b: "spacingB";
@@ -18,7 +18,11 @@ declare const paddingSpacing: {
     readonly spacing_n: "spacingN";
 };
 type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
-type ContextBubbleSheetProps = {
+type SpeechBubbleSheetProps = {
+    text: PDSTextType;
+    size?: 'small' | 'medium';
+    fontWeight?: 'bold' | 'regular';
+    textColorKey?: UiColors;
     bubbleAlign: 'right' | 'middle' | 'left';
     backgroundColorKey?: UiColors;
     pointingPosition: BubblePositionType;
@@ -31,7 +35,6 @@ type ContextBubbleSheetProps = {
     paddingRight?: PaddingSpacingType;
     paddingBottom?: PaddingSpacingType;
     paddingLeft?: PaddingSpacingType;
-    children: ReactNode;
 };
-declare const ContextBubble: ({ bubbleAlign, backgroundColorKey, pointingPosition, customPointingPosition, shapeType, radius, borderMode, borderColorKey, paddingTop, paddingRight, paddingBottom, paddingLeft, children }: ContextBubbleSheetProps) => JSX.Element;
-export default ContextBubble;
+declare const SpeechBubble: ({ text, size, fontWeight, textColorKey, bubbleAlign, backgroundColorKey, pointingPosition, customPointingPosition, shapeType, radius, borderMode, borderColorKey, paddingTop, paddingRight, paddingBottom, paddingLeft }: SpeechBubbleSheetProps) => JSX.Element;
+export default SpeechBubble;

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

@@ -0,0 +1,146 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var index_1 = require("../../index");
+var styled_components_1 = __importStar(require("styled-components"));
+var paddingSpacing = {
+    spacing_a: 'spacingA',
+    spacing_b: 'spacingB',
+    spacing_c: 'spacingC',
+    spacing_d: 'spacingD',
+    spacing_e: 'spacingE',
+    spacing_f: 'spacingF',
+    spacing_g: 'spacingG',
+    spacing_h: 'spacingH',
+    spacing_i: 'spacingI',
+    spacing_j: 'spacingJ',
+    spacing_k: 'spacingK',
+    spacing_l: 'spacingL',
+    spacing_m: 'spacingM',
+    spacing_n: 'spacingN'
+};
+var SpeechBubble = function (_a) {
+    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.fontWeight, fontWeight = _c === void 0 ? 'bold' : _c, _d = _a.textColorKey, textColorKey = _d === void 0 ? 'ui_cpnt_button_fill_base_white' : _d, _e = _a.bubbleAlign, bubbleAlign = _e === void 0 ? 'left' : _e, _f = _a.backgroundColorKey, backgroundColorKey = _f === void 0 ? 'ui_2' : _f, _g = _a.pointingPosition, pointingPosition = _g === void 0 ? 'start_bottom' : _g, customPointingPosition = _a.customPointingPosition, _h = _a.shapeType, shapeType = _h === void 0 ? 'round' : _h, _j = _a.radius, radius = _j === void 0 ? '8' : _j, _k = _a.borderMode, borderMode = _k === void 0 ? 'none' : _k, _l = _a.borderColorKey, borderColorKey = _l === void 0 ? 'ui_cpnt_contextmenu_border' : _l, _m = _a.paddingTop, paddingTop = _m === void 0 ? 'spacing_a' : _m, _o = _a.paddingRight, paddingRight = _o === void 0 ? 'spacing_c' : _o, _p = _a.paddingBottom, paddingBottom = _p === void 0 ? 'spacing_a' : _p, _q = _a.paddingLeft, paddingLeft = _q === void 0 ? 'spacing_c' : _q;
+    var theme = (0, styled_components_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(S_SpeechBubbleArea, __assign({ "$bubbleAlign": bubbleAlign, "$position": pointingPosition }, { children: (0, jsx_runtime_1.jsxs)(S_SpeechBubbleWrapper, __assign({ "$bgColor": backgroundColorKey, "$position": pointingPosition, "$customPointingPosition": customPointingPosition, useBorder: borderMode, borderColor: borderColorKey, shapeType: shapeType, radius: radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft }, { children: [(0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: text, textAlign: "center", customFontSize: size === 'small' ? theme.desktopFontSize.caption2 : theme.desktopFontSize.caption1, customFontWeight: fontWeight, colorOverride: textColorKey }), (0, jsx_runtime_1.jsxs)(Arrow, __assign({ "$position": pointingPosition, "$customPointingPosition": customPointingPosition, viewBox: "0 0 18 10", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("polygon", { points: "9,10 3,0 15,0", fill: theme[backgroundColorKey] }), (0, jsx_runtime_1.jsx)("path", { d: "M3,1 L9,10", stroke: borderMode === 'use' ? theme[borderColorKey] : 'none', strokeWidth: "1", strokeLinecap: "butt" }), (0, jsx_runtime_1.jsx)("path", { d: "M15,1 L9,10", stroke: borderMode === 'use' ? theme[borderColorKey] : 'none', strokeWidth: "1", strokeLinecap: "butt" }), borderMode === 'use' && (0, jsx_runtime_1.jsx)("path", { d: "M0,0 L15,0", strokeWidth: "1" })] }))] })) })));
+};
+exports.default = SpeechBubble;
+var S_SpeechBubbleArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  ", "\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  ", "\n  ", "\n"])), function (_a) {
+    var $position = _a.$position, theme = _a.theme;
+    var isTop = $position.includes('top');
+    return !isTop
+        ? "margin-bottom: ".concat(theme.spacing.spacingB, ";")
+        : "margin-top: ".concat(theme.spacing.spacingB, ";");
+}, function (_a) {
+    var $bubbleAlign = _a.$bubbleAlign;
+    if ($bubbleAlign === 'left') {
+        return "align-items: flex-start;";
+    }
+    if ($bubbleAlign === 'middle') {
+        return "align-items: center;";
+    }
+    if ($bubbleAlign === 'right') {
+        return "align-items: flex-end;";
+    }
+    return "align-items: flex-start;";
+});
+var paddingTopStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-top: ", ";\n"], ["\n  padding-top: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingTop = _a.paddingTop;
+    return paddingTop && (paddingTop === 'none' ? 0 : theme.spacing[paddingSpacing[paddingTop]]);
+});
+var paddingRightStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingRight = _a.paddingRight;
+    return paddingRight && (paddingRight === 'none' ? 0 : theme.spacing[paddingSpacing[paddingRight]]);
+});
+var paddingBottomStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-bottom: ", ";\n"], ["\n  padding-bottom: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingBottom = _a.paddingBottom;
+    return paddingBottom && (paddingBottom === 'none' ? 0 : theme.spacing[paddingSpacing[paddingBottom]]);
+});
+var paddingLeftStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingLeft = _a.paddingLeft;
+    return paddingLeft && (paddingLeft === 'none' ? 0 : theme.spacing[paddingSpacing[paddingLeft]]);
+});
+var S_SpeechBubbleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  position: relative;\n  width: 'fit-content';\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  position: relative;\n  width: 'fit-content';\n"])), function (_a) {
+    var $bgColor = _a.$bgColor, theme = _a.theme;
+    return theme[$bgColor];
+}, function (_a) {
+    var useBorder = _a.useBorder, _b = _a.borderColor, borderColor = _b === void 0 ? 'ui_cpnt_contextmenu_border' : _b, theme = _a.theme;
+    return useBorder === 'use' && "1px solid ".concat(theme[borderColor]);
+}, function (_a) {
+    var shapeType = _a.shapeType, _b = _a.radius, radius = _b === void 0 ? 8 : _b;
+    return shapeType === 'round' && "".concat(radius, "px");
+}, function (_a) {
+    var paddingTop = _a.paddingTop;
+    return paddingTop !== 'none' && paddingTopStyle;
+}, function (_a) {
+    var paddingRight = _a.paddingRight;
+    return paddingRight !== 'none' && paddingRightStyle;
+}, function (_a) {
+    var paddingBottom = _a.paddingBottom;
+    return paddingBottom !== 'none' && paddingBottomStyle;
+}, function (_a) {
+    var paddingLeft = _a.paddingLeft;
+    return paddingLeft !== 'none' && paddingLeftStyle;
+});
+var Arrow = styled_components_1.default.svg(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 12.6px;\n  position: absolute;\n  width: 15px;\n\n  ", "\n\n  ", "\n"], ["\n  height: 12.6px;\n  position: absolute;\n  width: 15px;\n\n  ", "\n\n  ", "\n"])), function (_a) {
+    var $position = _a.$position;
+    var isTop = $position.includes('top');
+    if (isTop) {
+        return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        top: -10px;\n        transform: translateX(-50%) rotate(180deg);\n      "], ["\n        top: -10px;\n        transform: translateX(-50%) rotate(180deg);\n      "])));
+    }
+    return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      bottom: -10px;\n      transform: translateX(-50%);\n    "], ["\n      bottom: -10px;\n      transform: translateX(-50%);\n    "])));
+}, function (_a) {
+    var $position = _a.$position, $customPointingPosition = _a.$customPointingPosition;
+    if ($customPointingPosition && $position.includes('start')) {
+        return "left: ".concat($customPointingPosition, "px;");
+    }
+    if ($customPointingPosition && $position.includes('end')) {
+        return "right: ".concat($customPointingPosition, "px;");
+    }
+    if ($position.includes('center')) {
+        return "left: 50%;";
+    }
+    if ($position.includes('end')) {
+        return "right: 12px;";
+    }
+    return "left: 19.5px;";
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/src/desktop/components/SpeechBubble/index.d.ts

@@ -0,0 +1 @@
+export { default as SpeechBubble } from './SpeechBubble';

package/dist/src/desktop/components/SpeechBubble/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpeechBubble = void 0;
+var SpeechBubble_1 = require("./SpeechBubble");
+Object.defineProperty(exports, "SpeechBubble", { enumerable: true, get: function () { return __importDefault(SpeechBubble_1).default; } });

package/dist/src/desktop/components/index.d.ts

@@ -43,6 +43,7 @@ import { SegmentedButtonGroup } from './SegmentedButtonGroup';
 import { Select } from './Select';
 import { Slider } from './Slider';
 import { Snackbar } from './Snackbar';
+import { SpeechBubble } from './SpeechBubble';
 import { StatusBlock } from './StatusBlock';
 import { TextButton } from './TextButton';
 import { TextField } from './TextField';
@@ -53,4 +54,4 @@ import { UploadTextButton } from './UploadTextButton';
 import { UserDesktopNavBar } from './UserDesktopNavBar';
 import { UserDesktopSideTab } from './UserDesktopSideTab';
 import { UserDesktopTabBar } from './UserDesktopTabBar';
-export { AdminList, AdminListHeader, AdminListItem, BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, BoxItem, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, PageTitleTextGroup, PriceTextField, Radio, ReactionButton, RichTextEditor, SegmentedButtonGroup, Select, Slider, Snackbar, StatusBlock, TextButton, TextField, TextLabel, PriceTextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab, Calendar, LocalizedButton };
+export { AdminList, AdminListHeader, AdminListItem, BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, BoxItem, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, PageTitleTextGroup, PriceTextField, Radio, ReactionButton, RichTextEditor, SegmentedButtonGroup, Select, Slider, Snackbar, SpeechBubble, StatusBlock, TextButton, TextField, TextLabel, PriceTextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab, Calendar, LocalizedButton };

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UploadMainButton = exports.UploadIconButton = exports.PriceTextLabel = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Snackbar = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.RichTextEditor = exports.ReactionButton = exports.Radio = exports.PriceTextField = exports.PageTitleTextGroup = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeaderBar = exports.DesktopAlertDialog = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BoxItem = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.BasicButtonGroup = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
-exports.LocalizedButton = exports.Calendar = exports.UserDesktopSideTab = exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = void 0;
+exports.UploadIconButton = exports.PriceTextLabel = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.SpeechBubble = exports.Snackbar = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.RichTextEditor = exports.ReactionButton = exports.Radio = exports.PriceTextField = exports.PageTitleTextGroup = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeaderBar = exports.DesktopAlertDialog = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BoxItem = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.BasicButtonGroup = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
+exports.LocalizedButton = exports.Calendar = exports.UserDesktopSideTab = exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = exports.UploadMainButton = void 0;
 var AdminList_1 = require("./AdminList");
 Object.defineProperty(exports, "AdminList", { enumerable: true, get: function () { return AdminList_1.AdminList; } });
 var AdminListHeader_1 = require("./AdminListHeader");
@@ -93,6 +93,8 @@ var Slider_1 = require("./Slider");
 Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
 var Snackbar_1 = require("./Snackbar");
 Object.defineProperty(exports, "Snackbar", { enumerable: true, get: function () { return Snackbar_1.Snackbar; } });
+var SpeechBubble_1 = require("./SpeechBubble");
+Object.defineProperty(exports, "SpeechBubble", { enumerable: true, get: function () { return SpeechBubble_1.SpeechBubble; } });
 var StatusBlock_1 = require("./StatusBlock");
 Object.defineProperty(exports, "StatusBlock", { enumerable: true, get: function () { return StatusBlock_1.StatusBlock; } });
 var TextButton_1 = require("./TextButton");

package/dist/src/desktop/index.d.ts

@@ -8,5 +8,5 @@ export { ContainersBox as WSContainersBox } from './layout/LayoutWS/ContainersBo
 export { LayoutWT } from './layout/LayoutWT';
 export { GlobalMenuContainer as WTGlobalMenuContainer } from './layout/LayoutWT/Containers';
 export { ContainersBox as WTContainersBox } from './layout/LayoutWT/ContainersBox';
-export { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicButtonGroup as D_BasicButtonGroup, BasicChatListItem as D_BasicChatListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, BoxItem as D_BoxItem, Card as D_Card, CardList as D_CardList, ChatBubbleListItem as D_ChatBubbleListItem, ChatList as D_ChatList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, LottieReactionButton as D_LottieReactionButton, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, RichTextEditor as D_RichTextEditor, SegmentedButtonGroup as D_SegmentedButtonGroup, Select as D_Select, Slider as D_Slider, Snackbar as D_Snackbar, StatusBlock as D_StatusBlock, TextButton as D_TextButton, PriceTextField as D_PriceTextField, TextField as D_TextField, TextLabel as D_TextLabel, PriceTextLabel as D_PriceTextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab, Calendar as D_Calendar, LocalizedButton } from './components';
+export { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicButtonGroup as D_BasicButtonGroup, BasicChatListItem as D_BasicChatListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, BoxItem as D_BoxItem, Card as D_Card, CardList as D_CardList, ChatBubbleListItem as D_ChatBubbleListItem, ChatList as D_ChatList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, LottieReactionButton as D_LottieReactionButton, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, RichTextEditor as D_RichTextEditor, SegmentedButtonGroup as D_SegmentedButtonGroup, Select as D_Select, Slider as D_Slider, Snackbar as D_Snackbar, SpeechBubble as D_SpeechBubble, StatusBlock as D_StatusBlock, TextButton as D_TextButton, PriceTextField as D_PriceTextField, TextField as D_TextField, TextLabel as D_TextLabel, PriceTextLabel as D_PriceTextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab, Calendar as D_Calendar, LocalizedButton } from './components';
 export { AnnotationSheet as D_AnnotationSheet, ContentSheet as D_ContentSheet, DesktopBasicModal as D_DesktopBasicModal, DesktopBasicModalWithTab as D_DesktopBasicModalWithTab, DesktopBasicModalWithTabInfoType, DesktopHeadlessModal as D_DesktopHeadlessModal, DesktopTutorialModal as D_DesktopTutorialModal, DesktopTutorialModalInfoType, SectionSheet as D_SectionSheet, LocalizedContentModal as D_LocalizedContentModal } from './panels';

package/dist/src/desktop/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.D_Select = exports.D_SegmentedButtonGroup = exports.D_RichTextEditor = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_LottieReactionButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BoxItem = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_BasicButtonGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WHContainersBox = exports.LayoutWH = exports.WFContainersBox = exports.LayoutWF = void 0;
-exports.D_LocalizedContentModal = exports.D_SectionSheet = exports.D_DesktopTutorialModal = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModalWithTab = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.LocalizedButton = exports.D_Calendar = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_PriceTextLabel = exports.D_TextLabel = exports.D_TextField = exports.D_PriceTextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Snackbar = exports.D_Slider = void 0;
+exports.D_LocalizedContentModal = exports.D_SectionSheet = exports.D_DesktopTutorialModal = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModalWithTab = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.LocalizedButton = exports.D_Calendar = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_PriceTextLabel = exports.D_TextLabel = exports.D_TextField = exports.D_PriceTextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_SpeechBubble = exports.D_Snackbar = exports.D_Slider = void 0;
 // layoutWF
 var LayoutWF_1 = require("./layout/LayoutWF");
 Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
@@ -70,6 +70,7 @@ Object.defineProperty(exports, "D_SegmentedButtonGroup", { enumerable: true, get
 Object.defineProperty(exports, "D_Select", { enumerable: true, get: function () { return components_1.Select; } });
 Object.defineProperty(exports, "D_Slider", { enumerable: true, get: function () { return components_1.Slider; } });
 Object.defineProperty(exports, "D_Snackbar", { enumerable: true, get: function () { return components_1.Snackbar; } });
+Object.defineProperty(exports, "D_SpeechBubble", { enumerable: true, get: function () { return components_1.SpeechBubble; } });
 Object.defineProperty(exports, "D_StatusBlock", { enumerable: true, get: function () { return components_1.StatusBlock; } });
 Object.defineProperty(exports, "D_TextButton", { enumerable: true, get: function () { return components_1.TextButton; } });
 Object.defineProperty(exports, "D_PriceTextField", { enumerable: true, get: function () { return components_1.PriceTextField; } });

package/dist/src/desktop/panels/LocalizedContentModal/LocalizedContentModal.js

@@ -99,7 +99,10 @@ function LocalizedContentModal(_a) {
         if (isOpen && initialValues) {
             form.reset(initialValues);
         }
-    }, [isOpen, initialValues]);
+    }, [isOpen, initialValues, form]);
+    var createHandleChange = (0, react_1.useCallback)(function (languageCode) { return function (value) {
+        form.setValue(languageCode, value);
+    }; }, [form]);
     var handleImageUpload = function (e, lang) { return __awaiter(_this, void 0, void 0, function () {
         var file, isValid, result, error_1;
         var _a;
@@ -147,12 +150,26 @@ function LocalizedContentModal(_a) {
     var handleCancel = function () {
         onClose();
     };
+    var memoizedRichEditorConfig = (0, react_1.useMemo)(function () {
+        return (richEditorConfig || {
+            toolbar: [
+                'blocks',
+                'bold italic underline strikethrough',
+                'alignleft aligncenter alignright alignjustify',
+                'outdent indent',
+                'forecolor backcolor numlist bullist blockquote',
+                'link insertfile image media',
+                'undo redo',
+                'code'
+            ]
+        });
+    }, [richEditorConfig]);
     if (!isOpen)
         return null;
     return ((0, jsx_runtime_1.jsx)(DesktopBasicModal_1.DesktopBasicModal, __assign({ titleText: t('str_multilingual_settings'), btnMode: readonly ? 'mbtn_amount1' : 'mbtn_amount2', mBtn1Text: readonly ? t('str_confirm') : t('str_apply'), mBtn2Text: t('str_cancel'), size: size, onClickMBtn1: handleApply, onClickMBtn2: handleCancel }, { children: (0, jsx_runtime_1.jsxs)(react_hook_form_1.FormProvider, __assign({}, form, { children: [originalText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: t('str_original_text'), wordBreak: "keep_all", styleTheme: "subTitleBold", colorTheme: "sysTextPrimary" }), originalFieldType === 'text' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: textFieldLineType === 'tinyeditor' ? ((0, jsx_runtime_1.jsx)(S_ReadonlyContent, { children: (0, jsx_runtime_1.jsx)(HTMLReader_1.HTMLReader, { data: originalText }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: originalText, wordBreak: "keep_all", styleTheme: "body2Regular", colorTheme: "sysTextPrimary" })] })) })), originalFieldType === 'image' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(components_3.ImageView, __assign({ width: "responsive", height: "responsive" }, imageConfig, { src: originalText }))] })), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f" }), (0, jsx_runtime_1.jsx)(components_2.Divider, {}), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f" })] })), visibleLanguages === null || visibleLanguages === void 0 ? void 0 : visibleLanguages.map(function (languageCode, index) {
                     return ((0, jsx_runtime_1.jsxs)(S_LanguageField, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: t(LANGUAGE_I18N_KEYS[languageCode]), styleTheme: "subTitleBold", colorTheme: "sysTextPrimary" }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: t(LANGUAGE_DESC_TEXT_KEYS[languageCode]), styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" }), originalFieldType === 'text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [textFieldLineType === 'tinyeditor' && readonly && ((0, jsx_runtime_1.jsx)(AnnotationSheet_1.AnnotationSheet, __assign({ width: "100%", height: "240px", backgroundColorTheme: "base3", shapeType: "round", radius: 16, paddingTop: "spacing_d", paddingRight: "spacing_d", paddingBottom: "spacing_d", paddingLeft: "spacing_d" }, { children: (0, jsx_runtime_1.jsx)(S_ReadonlyContent, { dangerouslySetInnerHTML: {
                                                 __html: (initialValues === null || initialValues === void 0 ? void 0 : initialValues[languageCode]) || ''
-                                            } }) }))), textFieldLineType === 'tinyeditor' && !readonly && ((0, jsx_runtime_1.jsx)(components_1.RichTextEditor, __assign({}, richEditorConfig, { onChange: function (value) { return form.setValue(languageCode, value); }, defaultText: form.getValues(languageCode), toolbar: (richEditorConfig === null || richEditorConfig === void 0 ? void 0 : richEditorConfig.toolbar) || [
+                                            } }) }))), textFieldLineType === 'tinyeditor' && !readonly && ((0, jsx_runtime_1.jsx)(components_1.RichTextEditor, __assign({}, memoizedRichEditorConfig, { onChange: createHandleChange(languageCode), defaultText: initialValues === null || initialValues === void 0 ? void 0 : initialValues[languageCode], toolbar: (memoizedRichEditorConfig === null || memoizedRichEditorConfig === void 0 ? void 0 : memoizedRichEditorConfig.toolbar) || [
                                             'blocks',
                                             'bold italic underline strikethrough',
                                             'alignleft aligncenter alignright alignjustify',

package/dist/src/hybrid/components/index.d.ts

@@ -1,4 +1,3 @@
-import { ContextBubble } from './ContextBubble';
 import { Divider } from './Divider';
 import { Icon } from './Icon';
 import { ImageView } from './ImageView';
@@ -6,4 +5,4 @@ import { LinearProgress } from './LinearProgress';
 import { LottieIcon } from './LottieIcon';
 import { Spacing } from './Spacing';
 import { Switch } from './Switch';
-export { Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch, ContextBubble };
+export { Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch };

package/dist/src/hybrid/components/index.js

@@ -1,8 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContextBubble = exports.Switch = exports.Spacing = exports.LottieIcon = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = void 0;
-var ContextBubble_1 = require("./ContextBubble");
-Object.defineProperty(exports, "ContextBubble", { enumerable: true, get: function () { return ContextBubble_1.ContextBubble; } });
+exports.Switch = exports.Spacing = exports.LottieIcon = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = void 0;
 var Divider_1 = require("./Divider");
 Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return Divider_1.Divider; } });
 var Icon_1 = require("./Icon");

package/dist/src/hybrid/index.d.ts

@@ -1 +1 @@
-export { Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch, ContextBubble } from './components';
+export { Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch } from './components';

package/dist/src/hybrid/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContextBubble = exports.Switch = exports.Spacing = exports.LottieIcon = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = void 0;
+exports.Switch = exports.Spacing = exports.LottieIcon = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = void 0;
 // component
 var components_1 = require("./components");
 Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return components_1.Divider; } });
@@ -10,4 +10,3 @@ Object.defineProperty(exports, "LinearProgress", { enumerable: true, get: functi
 Object.defineProperty(exports, "LottieIcon", { enumerable: true, get: function () { return components_1.LottieIcon; } });
 Object.defineProperty(exports, "Spacing", { enumerable: true, get: function () { return components_1.Spacing; } });
 Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return components_1.Switch; } });
-Object.defineProperty(exports, "ContextBubble", { enumerable: true, get: function () { return components_1.ContextBubble; } });

package/dist/src/mobile/components/SpeechBubble/SpeechBubble.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import type { PDSTextType, UiColors } from '../../../common/types';
+import type { BubblePositionType } from '../../../common/types/systemUI';
+declare const paddingSpacing: {
+    readonly spacing_a: "spacingA";
+    readonly spacing_b: "spacingB";
+    readonly spacing_c: "spacingC";
+    readonly spacing_d: "spacingD";
+    readonly spacing_e: "spacingE";
+    readonly spacing_f: "spacingF";
+    readonly spacing_g: "spacingG";
+    readonly spacing_h: "spacingH";
+    readonly spacing_i: "spacingI";
+    readonly spacing_j: "spacingJ";
+    readonly spacing_k: "spacingK";
+    readonly spacing_l: "spacingL";
+    readonly spacing_m: "spacingM";
+    readonly spacing_n: "spacingN";
+};
+type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
+type SpeechBubbleSheetProps = {
+    text: PDSTextType;
+    size?: 'small' | 'medium';
+    fontWeight?: 'bold' | 'regular';
+    textColorKey?: UiColors;
+    bubbleAlign?: 'right' | 'middle' | 'left';
+    backgroundColorKey?: UiColors;
+    pointingPosition?: BubblePositionType;
+    customPointingPosition?: number;
+    shapeType?: 'rectangle' | 'round';
+    radius?: '8' | '12' | '16';
+    borderMode?: 'none' | 'use';
+    borderColorKey?: UiColors;
+    paddingTop?: PaddingSpacingType;
+    paddingRight?: PaddingSpacingType;
+    paddingBottom?: PaddingSpacingType;
+    paddingLeft?: PaddingSpacingType;
+};
+declare const SpeechBubble: ({ text, size, fontWeight, textColorKey, bubbleAlign, backgroundColorKey, pointingPosition, customPointingPosition, shapeType, radius, borderMode, borderColorKey, paddingTop, paddingRight, paddingBottom, paddingLeft }: SpeechBubbleSheetProps) => JSX.Element;
+export default SpeechBubble;

package/dist/src/{hybrid/components/ContextBubble/ContextBubble.js → mobile/components/SpeechBubble/SpeechBubble.js}

@@ -39,6 +39,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var index_1 = require("../../index");
 var styled_components_1 = __importStar(require("styled-components"));
 var paddingSpacing = {
     spacing_a: 'spacingA',
@@ -56,13 +57,13 @@ var paddingSpacing = {
     spacing_m: 'spacingM',
     spacing_n: 'spacingN'
 };
-var ContextBubble = function (_a) {
-    var _b = _a.bubbleAlign, bubbleAlign = _b === void 0 ? 'left' : _b, _c = _a.backgroundColorKey, backgroundColorKey = _c === void 0 ? 'ui_temp_red' : _c, _d = _a.pointingPosition, pointingPosition = _d === void 0 ? 'start_bottom' : _d, customPointingPosition = _a.customPointingPosition, _e = _a.shapeType, shapeType = _e === void 0 ? 'round' : _e, _f = _a.radius, radius = _f === void 0 ? '8' : _f, _g = _a.borderMode, borderMode = _g === void 0 ? 'none' : _g, _h = _a.borderColorKey, borderColorKey = _h === void 0 ? 'ui_cpnt_contextmenu_border' : _h, _j = _a.paddingTop, paddingTop = _j === void 0 ? 'spacing_a' : _j, _k = _a.paddingRight, paddingRight = _k === void 0 ? 'spacing_c' : _k, _l = _a.paddingBottom, paddingBottom = _l === void 0 ? 'spacing_a' : _l, _m = _a.paddingLeft, paddingLeft = _m === void 0 ? 'spacing_c' : _m, children = _a.children;
+var SpeechBubble = function (_a) {
+    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.fontWeight, fontWeight = _c === void 0 ? 'bold' : _c, _d = _a.textColorKey, textColorKey = _d === void 0 ? 'ui_cpnt_button_fill_base_white' : _d, _e = _a.bubbleAlign, bubbleAlign = _e === void 0 ? 'left' : _e, _f = _a.backgroundColorKey, backgroundColorKey = _f === void 0 ? 'ui_2' : _f, _g = _a.pointingPosition, pointingPosition = _g === void 0 ? 'start_bottom' : _g, customPointingPosition = _a.customPointingPosition, _h = _a.shapeType, shapeType = _h === void 0 ? 'round' : _h, _j = _a.radius, radius = _j === void 0 ? '8' : _j, _k = _a.borderMode, borderMode = _k === void 0 ? 'none' : _k, _l = _a.borderColorKey, borderColorKey = _l === void 0 ? 'ui_cpnt_contextmenu_border' : _l, _m = _a.paddingTop, paddingTop = _m === void 0 ? 'spacing_a' : _m, _o = _a.paddingRight, paddingRight = _o === void 0 ? 'spacing_c' : _o, _p = _a.paddingBottom, paddingBottom = _p === void 0 ? 'spacing_a' : _p, _q = _a.paddingLeft, paddingLeft = _q === void 0 ? 'spacing_c' : _q;
     var theme = (0, styled_components_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(S_ContextBubbleArea, __assign({ "$bubbleAlign": bubbleAlign, "$position": pointingPosition }, { children: (0, jsx_runtime_1.jsxs)(S_ContextBubbleWrapper, __assign({ "$bgColor": backgroundColorKey, "$position": pointingPosition, "$customPointingPosition": customPointingPosition, useBorder: borderMode, borderColor: borderColorKey, shapeType: shapeType, radius: radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft }, { children: [children, (0, jsx_runtime_1.jsxs)(Arrow, __assign({ "$position": pointingPosition, "$customPointingPosition": customPointingPosition, viewBox: "0 0 18 10", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("polygon", { points: "9,10 3,0 15,0", fill: theme[backgroundColorKey] }), (0, jsx_runtime_1.jsx)("path", { d: "M3,1 L9,10", stroke: borderMode === 'use' ? theme[borderColorKey] : 'none', strokeWidth: "1", strokeLinecap: "butt" }), (0, jsx_runtime_1.jsx)("path", { d: "M15,1 L9,10", stroke: borderMode === 'use' ? theme[borderColorKey] : 'none', strokeWidth: "1", strokeLinecap: "butt" }), borderMode === 'use' && (0, jsx_runtime_1.jsx)("path", { d: "M0,0 L15,0", strokeWidth: "1" })] }))] })) })));
+    return ((0, jsx_runtime_1.jsx)(S_SpeechBubbleArea, __assign({ "$bubbleAlign": bubbleAlign, "$position": pointingPosition }, { children: (0, jsx_runtime_1.jsxs)(S_SpeechBubbleWrapper, __assign({ "$bgColor": backgroundColorKey, "$position": pointingPosition, "$customPointingPosition": customPointingPosition, useBorder: borderMode, borderColor: borderColorKey, shapeType: shapeType, radius: radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft }, { children: [(0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: text, textAlign: "center", customFontSize: size === 'small' ? theme.mobileFontSize.caption2 : theme.mobileFontSize.caption1, customFontWeight: fontWeight, colorOverride: textColorKey }), (0, jsx_runtime_1.jsxs)(Arrow, __assign({ "$position": pointingPosition, "$customPointingPosition": customPointingPosition, viewBox: "0 0 18 10", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("polygon", { points: "9,10 3,0 15,0", fill: theme[backgroundColorKey] }), (0, jsx_runtime_1.jsx)("path", { d: "M3,1 L9,10", stroke: borderMode === 'use' ? theme[borderColorKey] : 'none', strokeWidth: "1", strokeLinecap: "butt" }), (0, jsx_runtime_1.jsx)("path", { d: "M15,1 L9,10", stroke: borderMode === 'use' ? theme[borderColorKey] : 'none', strokeWidth: "1", strokeLinecap: "butt" }), borderMode === 'use' && (0, jsx_runtime_1.jsx)("path", { d: "M0,0 L15,0", strokeWidth: "1" })] }))] })) })));
 };
-exports.default = ContextBubble;
-var S_ContextBubbleArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  ", "\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  ", "\n  ", "\n"])), function (_a) {
+exports.default = SpeechBubble;
+var S_SpeechBubbleArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  ", "\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  ", "\n  ", "\n"])), function (_a) {
     var $position = _a.$position, theme = _a.theme;
     var isTop = $position.includes('top');
     return !isTop
@@ -97,7 +98,7 @@ var paddingLeftStyle = (0, styled_components_1.css)(templateObject_5 || (templat
     var theme = _a.theme, paddingLeft = _a.paddingLeft;
     return paddingLeft && (paddingLeft === 'none' ? 0 : theme.spacing[paddingSpacing[paddingLeft]]);
 });
-var S_ContextBubbleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  position: relative;\n  width: 'fit-content';\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  position: relative;\n  width: 'fit-content';\n"])), function (_a) {
+var S_SpeechBubbleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  position: relative;\n  width: 'fit-content';\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  position: relative;\n  width: 'fit-content';\n"])), function (_a) {
     var $bgColor = _a.$bgColor, theme = _a.theme;
     return theme[$bgColor];
 }, function (_a) {

package/dist/src/mobile/components/SpeechBubble/index.d.ts

@@ -0,0 +1 @@
+export { default as SpeechBubble } from './SpeechBubble';

package/dist/src/mobile/components/SpeechBubble/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpeechBubble = void 0;
+var SpeechBubble_1 = require("./SpeechBubble");
+Object.defineProperty(exports, "SpeechBubble", { enumerable: true, get: function () { return __importDefault(SpeechBubble_1).default; } });

package/dist/src/mobile/components/index.d.ts

@@ -34,6 +34,7 @@ import { SegmentedButtonGroup } from './SegmentedButtonGroup';
 import { Select } from './Select';
 import { Slider } from './Slider';
 import { Snackbar } from './Snackbar';
+import { SpeechBubble } from './SpeechBubble';
 import { StatusBlock } from './StatusBlock';
 import { TextButton } from './TextButton';
 import { TextField } from './TextField';
@@ -41,4 +42,4 @@ import { TextLabel } from './TextLabel';
 import { UploadIconButton } from './UploadIconButton';
 import { UploadMainButton } from './UploadMainButton';
 import { UploadTextButton } from './UploadTextButton';
-export { BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, BoxItem, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DatePicker, Dropdown, FloatingActionButton, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, MobileAlertDialog, MobileHeaderBar, MobileTabBar, PriceTextField, PriceTextLabel, Radio, ReactionButton, SegmentedButtonGroup, Select, Slider, Snackbar, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, RichTextEditor };
+export { BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, BoxItem, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DatePicker, Dropdown, FloatingActionButton, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, MobileAlertDialog, MobileHeaderBar, MobileTabBar, PriceTextField, PriceTextLabel, Radio, ReactionButton, SegmentedButtonGroup, Select, Slider, Snackbar, SpeechBubble, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, RichTextEditor };

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RichTextEditor = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Snackbar = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.ReactionButton = exports.Radio = exports.PriceTextLabel = exports.PriceTextField = exports.MobileTabBar = exports.MobileHeaderBar = exports.MobileAlertDialog = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.FloatingActionButton = exports.Dropdown = exports.DatePicker = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BoxItem = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.BasicButtonGroup = void 0;
+exports.RichTextEditor = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.SpeechBubble = exports.Snackbar = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.ReactionButton = exports.Radio = exports.PriceTextLabel = exports.PriceTextField = exports.MobileTabBar = exports.MobileHeaderBar = exports.MobileAlertDialog = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.FloatingActionButton = exports.Dropdown = exports.DatePicker = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BoxItem = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.BasicButtonGroup = void 0;
 var BasicButtonGroup_1 = require("./BasicButtonGroup");
 Object.defineProperty(exports, "BasicButtonGroup", { enumerable: true, get: function () { return BasicButtonGroup_1.BasicButtonGroup; } });
 var BasicChatListItem_1 = require("./BasicChatListItem");
@@ -73,6 +73,8 @@ var Slider_1 = require("./Slider");
 Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
 var Snackbar_1 = require("./Snackbar");
 Object.defineProperty(exports, "Snackbar", { enumerable: true, get: function () { return Snackbar_1.Snackbar; } });
+var SpeechBubble_1 = require("./SpeechBubble");
+Object.defineProperty(exports, "SpeechBubble", { enumerable: true, get: function () { return SpeechBubble_1.SpeechBubble; } });
 var StatusBlock_1 = require("./StatusBlock");
 Object.defineProperty(exports, "StatusBlock", { enumerable: true, get: function () { return StatusBlock_1.StatusBlock; } });
 var TextButton_1 = require("./TextButton");

package/dist/src/mobile/index.d.ts

@@ -9,5 +9,5 @@ export { ContainersBox as MPContainersBox } from './layout/LayoutMP/ContainersBo
 export { LayoutMS } from './layout/LayoutMS';
 export { NavigationContainer as MSNavigationContainer } from './layout/LayoutMS/Containers';
 export { ContainersBox as MSContainersBox } from './layout/LayoutMS/ContainersBox';
-export { BasicButtonGroup as M_BasicButtonGroup, BasicChatListItem as M_BasicChatListItem, BasicFormGroup as M_BasicFormGroup, BasicList as M_BasicList, BasicListItem as M_BasicListItem, BlogTextField as M_BlogTextField, BodyTextGroup as M_BodyTextGroup, BoxItem as M_BoxItem, Card as M_Card, CardList as M_CardList, ChatBubbleListItem as M_ChatBubbleListItem, ChatList as M_ChatList, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, DatePicker as M_DatePicker, Dropdown as M_Dropdown, FloatingActionButton as M_FloatingActionButton, HorizontalFormGroup as M_HorizontalFormGroup, IconButton as M_IconButton, ImageSlide as M_ImageSlide, LottieReactionButton as M_LottieReactionButton, MainButton as M_MainButton, MobileAlertDialog as M_MobileAlertDialog, MobileHeaderBar as M_MobileHeaderBar, MobileTabBar as M_MobileTabBar, Radio as M_Radio, ReactionButton as M_ReactionButton, SegmentedButtonGroup as M_SegmentedButtonGroup, Select as M_Select, Slider as M_Slider, Snackbar as M_Snackbar, StatusBlock as M_StatusBlock, TextButton as M_TextButton, PriceTextField as M_PriceTextField, TextField as M_TextField, TextLabel as M_TextLabel, PriceTextLabel as M_PriceTextLabel, UploadIconButton as M_UploadIconButton, UploadMainButton as M_UploadMainButton, UploadTextButton as M_UploadTextButton, RichTextEditor as M_RichTextEditor } from './components';
+export { BasicButtonGroup as M_BasicButtonGroup, BasicChatListItem as M_BasicChatListItem, BasicFormGroup as M_BasicFormGroup, BasicList as M_BasicList, BasicListItem as M_BasicListItem, BlogTextField as M_BlogTextField, BodyTextGroup as M_BodyTextGroup, BoxItem as M_BoxItem, Card as M_Card, CardList as M_CardList, ChatBubbleListItem as M_ChatBubbleListItem, ChatList as M_ChatList, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, DatePicker as M_DatePicker, Dropdown as M_Dropdown, FloatingActionButton as M_FloatingActionButton, HorizontalFormGroup as M_HorizontalFormGroup, IconButton as M_IconButton, ImageSlide as M_ImageSlide, LottieReactionButton as M_LottieReactionButton, MainButton as M_MainButton, MobileAlertDialog as M_MobileAlertDialog, MobileHeaderBar as M_MobileHeaderBar, MobileTabBar as M_MobileTabBar, Radio as M_Radio, ReactionButton as M_ReactionButton, SegmentedButtonGroup as M_SegmentedButtonGroup, Select as M_Select, Slider as M_Slider, Snackbar as M_Snackbar, SpeechBubble as M_SpeechBubble, StatusBlock as M_StatusBlock, TextButton as M_TextButton, PriceTextField as M_PriceTextField, TextField as M_TextField, TextLabel as M_TextLabel, PriceTextLabel as M_PriceTextLabel, UploadIconButton as M_UploadIconButton, UploadMainButton as M_UploadMainButton, UploadTextButton as M_UploadTextButton, RichTextEditor as M_RichTextEditor } from './components';
 export { AnnotationSheet as M_AnnotationSheet, ContentSheet as M_ContentSheet, MobileBasicModal as M_MobileBasicModal, SectionSheet as M_SectionSheet } from './panels';

package/dist/src/mobile/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.M_TextLabel = exports.M_TextField = exports.M_PriceTextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Snackbar = exports.M_Slider = exports.M_Select = exports.M_SegmentedButtonGroup = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_FloatingActionButton = exports.M_Dropdown = exports.M_DatePicker = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BoxItem = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.M_BasicButtonGroup = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = void 0;
-exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = exports.M_RichTextEditor = exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_PriceTextLabel = void 0;
+exports.M_TextField = exports.M_PriceTextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_SpeechBubble = exports.M_Snackbar = exports.M_Slider = exports.M_Select = exports.M_SegmentedButtonGroup = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_FloatingActionButton = exports.M_Dropdown = exports.M_DatePicker = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BoxItem = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.M_BasicButtonGroup = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = void 0;
+exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = exports.M_RichTextEditor = exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_PriceTextLabel = exports.M_TextLabel = void 0;
 // layoutMF
 var LayoutMF_1 = require("./layout/LayoutMF");
 Object.defineProperty(exports, "LayoutMF", { enumerable: true, get: function () { return LayoutMF_1.LayoutMF; } });
@@ -64,6 +64,7 @@ Object.defineProperty(exports, "M_SegmentedButtonGroup", { enumerable: true, get
 Object.defineProperty(exports, "M_Select", { enumerable: true, get: function () { return components_1.Select; } });
 Object.defineProperty(exports, "M_Slider", { enumerable: true, get: function () { return components_1.Slider; } });
 Object.defineProperty(exports, "M_Snackbar", { enumerable: true, get: function () { return components_1.Snackbar; } });
+Object.defineProperty(exports, "M_SpeechBubble", { enumerable: true, get: function () { return components_1.SpeechBubble; } });
 Object.defineProperty(exports, "M_StatusBlock", { enumerable: true, get: function () { return components_1.StatusBlock; } });
 Object.defineProperty(exports, "M_TextButton", { enumerable: true, get: function () { return components_1.TextButton; } });
 Object.defineProperty(exports, "M_PriceTextField", { enumerable: true, get: function () { return components_1.PriceTextField; } });

package/dist/src/sub/DynamicLayout/components/desktop/Item/Item.d.ts

@@ -16,7 +16,7 @@ declare namespace Item {
         data?: string | undefined;
         styleTheme?: "displayBold" | "headingBold" | "leadParaBold" | "leadParaRegular" | "subTitleBold" | "subTitleRegular" | "body1Bold" | "body1Regular" | "body2Bold" | "body2Regular" | "caption1Bold" | "caption1Regular" | "caption2Bold" | "caption2Regular" | "form1Regular" | "form2Regular" | "blog1Regular" | undefined;
         color?: string | undefined;
-        textAlign?: "left" | "right" | "center" | undefined;
+        textAlign?: "left" | "center" | "right" | undefined;
         colorTheme?: "sysTextPrimary" | "sysTextSecondary" | "sysTextTertiary" | "sysTextWhite" | "sysTextError" | "sysTextWarning" | "sysTextBrandPrimary" | "sysTextBrandSeconVariant" | "usrTextBrandPrimary" | "usrTextBrandSeconVariant" | "usrTextBrandOnPrimary" | undefined;
     }) => JSX.Element;
 }

package/dist/src/sub/DynamicLayout/components/mobile/Item/Item.d.ts

@@ -15,7 +15,7 @@ declare namespace Item {
         data?: string | undefined;
         styleTheme?: "displayBold" | "headingBold" | "leadParaBold" | "leadParaRegular" | "subTitleBold" | "subTitleRegular" | "body1Bold" | "body1Regular" | "body2Bold" | "body2Regular" | "caption1Bold" | "caption1Regular" | "caption2Bold" | "caption2Regular" | "form1Regular" | "form2Regular" | "blog1Regular" | undefined;
         color?: string | undefined;
-        textAlign?: "left" | "right" | "center" | undefined;
+        textAlign?: "left" | "center" | "right" | undefined;
         colorTheme?: "sysTextPrimary" | "sysTextSecondary" | "sysTextTertiary" | "sysTextWhite" | "sysTextError" | "sysTextWarning" | "sysTextBrandPrimary" | "sysTextBrandSeconVariant" | "usrTextBrandPrimary" | "usrTextBrandSeconVariant" | "usrTextBrandOnPrimary" | undefined;
     }) => JSX.Element;
     var Button: ({ buttonType, backgroundColor, textColor, text, linkType, src, linkMethod, state, borderColor }: IItemButton) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "2.2.251",
+  "version": "2.2.253",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,7 +1,7 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.251]
+## [v2.2.253]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
 
-* [PDS-1374] RichTextEditor의 높이값 관련 수정 건
+* [PDS-1378] 다국어 설정 모달 - RichTextEditor 입력 오류

package/dist/src/hybrid/components/ContextBubble/index.d.ts

@@ -1 +0,0 @@
-export { default as ContextBubble } from './ContextBubble';

package/dist/src/hybrid/components/ContextBubble/index.js

@@ -1,8 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContextBubble = void 0;
-var ContextBubble_1 = require("./ContextBubble");
-Object.defineProperty(exports, "ContextBubble", { enumerable: true, get: function () { return __importDefault(ContextBubble_1).default; } });