@elliemae/ds-chat-bubble 3.60.0-next.9 → 3.61.0-rc.2

package/dist/cjs/styled.js

@@ -31,7 +31,6 @@ __export(styled_exports, {
   StyleBodyWrapper: () => StyleBodyWrapper,
   StyleErrorMessage: () => StyleErrorMessage,
   StyleHelpMessage: () => StyleHelpMessage,
-  StyledBubbleArrow: () => StyledBubbleArrow,
   StyledColoredBubble: () => StyledColoredBubble,
   StyledTitleBubble: () => StyledTitleBubble,
   StyledTitleLeftBubble: () => StyledTitleLeftBubble,
@@ -42,41 +41,59 @@ module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+var import_constants = require("./constants/index.js");
 const wrapRules = import_ds_system.css`
   overflow-wrap: break-word;
   white-space: pre-wrap;
 `;
-const StyledWrapper = import_ds_system.styled.div`
+const StyledWrapper = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSChatBubbleName,
+  slot: import_constants.CHAT_BUBBLE_SLOTS.WRAPPER
+})`
   min-width: 224px;
   border-radius: 10px;
   ${wrapRules}
 `;
-const StyledTitleBubble = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+const StyledTitleBubble = (0, import_ds_system.styled)(import_ds_grid.Grid, {
+  name: import_constants.DSChatBubbleName,
+  slot: import_constants.CHAT_BUBBLE_SLOTS.HEADER
+})`
   padding-top: 6px;
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom: 4px;
 `;
-const StyledTitleLeftBubble = (0, import_ds_system.styled)("div")`
+const StyledTitleLeftBubble = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSChatBubbleName,
+  slot: import_constants.CHAT_BUBBLE_SLOTS.HEADER_LEFT
+})`
   font-size: 1rem;
   font-weight: 600;
   ${wrapRules}
 `;
-const StyledTitleRightBubble = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+const StyledTitleRightBubble = (0, import_ds_system.styled)(import_ds_grid.Grid, {
+  name: import_constants.DSChatBubbleName,
+  slot: import_constants.CHAT_BUBBLE_SLOTS.HEADER_RIGHT
+})`
   font-size: 1rem;
   font-weight: 400;
   align-self: flex-start;
-  color: ${(props) => props.type === import_react_desc_prop_types.BUBBLE_TYPES.SENDER ? "#FFF" : "#657489"};
+  color: ${(props) => props["data-theming-type"] === import_constants.BUBBLE_TYPES.SENDER ? "#FFF" : "#657489"};
 `;
-const StyleBodyWrapper = import_ds_system.styled.div`
+const StyleBodyWrapper = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSChatBubbleName,
+  slot: import_constants.CHAT_BUBBLE_SLOTS.BODY_WRAPPER
+})`
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.15;
   min-height: 18px;
   padding: 0px 10px 8px 10px;
 `;
-const StyleErrorMessage = import_ds_system.styled.div`
+const StyleErrorMessage = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSChatBubbleName,
+  slot: import_constants.CHAT_BUBBLE_SLOTS.ERROR_MESSAGE
+})`
   font-size: 0.923rem;
   font-weight: 400;
   padding-top: ${(props) => props.theme.space.xxxs};
@@ -96,7 +113,10 @@ const StyleErrorMessage = import_ds_system.styled.div`
     margin-left: 8px;
   }
 `;
-const StyleHelpMessage = (0, import_ds_system.styled)(StyleErrorMessage)`
+const StyleHelpMessage = (0, import_ds_system.styled)(StyleErrorMessage, {
+  name: import_constants.DSChatBubbleName,
+  slot: import_constants.CHAT_BUBBLE_SLOTS.HELP_MESSAGE
+})`
   font-size: 0.923rem;
   line-height: 1.15;
   color: ${(props) => props.theme.colors.neutral[600]};
@@ -108,47 +128,25 @@ const StyleHelpMessage = (0, import_ds_system.styled)(StyleErrorMessage)`
     color: ${(props) => props.theme.colors.danger[900]};
   }
 `;
-const StyledBubbleArrow = import_ds_system.styled.div`
-  display: block;
-  content: '';
-  position: absolute;
-  bottom: 0.769rem;
-  height: 1.15rem;
-`;
-const StyledColoredBubble = import_ds_system.styled.div`
+const StyledColoredBubble = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSChatBubbleName,
+  slot: import_constants.CHAT_BUBBLE_SLOTS.COLORED_BUBBLE
+})`
   min-width: 224px;
   border-radius: 10px;
   position: relative;
 
-  ${(props) => props.type === import_react_desc_prop_types.BUBBLE_TYPES.SENDER ? `
+  ${(props) => props["data-theming-type"] === import_constants.BUBBLE_TYPES.SENDER ? `
         border: 1px solid ${props.theme.colors.brand["700"]};
         background: ${props.theme.colors.brand[600]};
         color: ${props.theme.colors.neutral["000"]};
-        ${StyledBubbleArrow}{            
-            right: -0.692rem;
-            bottom: 0.461rem;
-            svg{
-                fill: ${props.theme.colors.brand[600]};
-            }
-        }
-
         a {
           color: #FFF;
         }
-
     ` : `
         box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);
         background: ${props.theme.colors.neutral["000"]};
         color: ${props.theme.colors.neutral[700]};
-
-        ${StyledBubbleArrow}{            
-            left: -0.846rem;
-            bottom: 0.461rem;
-            svg{
-                fill: ${props.theme.colors.neutral["000"]};
-            }
-        }
-
     `}
 `;
 //# sourceMappingURL=styled.js.map

package/dist/cjs/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { BUBBLE_TYPES } from './react-desc-prop-types.js';\n\nconst wrapRules = css`\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n`;\n// Bubble WRAPPER\nexport const StyledWrapper = styled.div`\n  min-width: 224px;\n  border-radius: 10px;\n  ${wrapRules}\n`;\n\n// Bubble HEADER\nexport const StyledTitleBubble = styled(Grid)`\n  padding-top: 6px;\n  padding-left: 10px;\n  padding-right: 10px;\n  padding-bottom: 4px;\n`;\n\nexport const StyledTitleLeftBubble = styled('div')`\n  font-size: 1rem;\n  font-weight: 600;\n  ${wrapRules}\n`;\nexport const StyledTitleRightBubble = styled(Grid)<{ type: string }>`\n  font-size: 1rem;\n  font-weight: 400;\n  align-self: flex-start;\n  color: ${(props) => (props.type === BUBBLE_TYPES.SENDER ? '#FFF' : '#657489')};\n`;\n\nexport const StyleBodyWrapper = styled.div`\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.15;\n  min-height: 18px;\n  padding: 0px 10px 8px 10px;\n`;\n\nexport const StyleErrorMessage = styled.div`\n  font-size: 0.923rem;\n  font-weight: 400;\n  padding-top: ${(props) => props.theme.space.xxxs};\n  color: ${(props) => props.theme.colors.danger[900]};\n  align-items: flex-end;\n  justify-content: center;\n  text-align: right;\n  line-height: 1.15;\n  svg {\n    fill: ${(props) => props.theme.colors.danger[900]};\n  }\n  a {\n    font-size: 0.923rem;\n    color: ${(props) => props.theme.colors.danger[900]};\n  }\n  .em-ds-icon {\n    margin-left: 8px;\n  }\n`;\n\nexport const StyleHelpMessage = styled(StyleErrorMessage)`\n  font-size: 0.923rem;\n  line-height: 1.15;\n  color: ${(props) => props.theme.colors.neutral[600]};\n  svg {\n    fill: ${(props) => props.theme.colors.danger[900]};\n  }\n  a {\n    font-size: 12px;\n    color: ${(props) => props.theme.colors.danger[900]};\n  }\n`;\n\n// bubble sender/ recipient\nexport const StyledBubbleArrow = styled.div`\n  display: block;\n  content: '';\n  position: absolute;\n  bottom: 0.769rem;\n  height: 1.15rem;\n`;\n\nexport const StyledColoredBubble = styled.div<{ type: string }>`\n  min-width: 224px;\n  border-radius: 10px;\n  position: relative;\n\n  ${(props) =>\n    props.type === BUBBLE_TYPES.SENDER\n      ? `\n        border: 1px solid ${props.theme.colors.brand['700']};\n        background: ${props.theme.colors.brand[600]};\n        color: ${props.theme.colors.neutral['000']};\n        ${StyledBubbleArrow}{            \n            right: -0.692rem;\n            bottom: 0.461rem;\n            svg{\n                fill: ${props.theme.colors.brand[600]};\n            }\n        }\n\n        a {\n          color: #FFF;\n        }\n\n    `\n      : `\n        box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);\n        background: ${props.theme.colors.neutral['000']};\n        color: ${props.theme.colors.neutral[700]};\n\n        ${StyledBubbleArrow}{            \n            left: -0.846rem;\n            bottom: 0.461rem;\n            svg{\n                fill: ${props.theme.colors.neutral['000']};\n            }\n        }\n\n    `}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA4B;AAC5B,qBAAqB;AACrB,mCAA6B;AAE7B,MAAM,YAAY;AAAA;AAAA;AAAA;AAKX,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA,IAGhC,SAAS;AAAA;AAIN,MAAM,wBAAoB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrC,MAAM,4BAAwB,yBAAO,KAAK;AAAA;AAAA;AAAA,IAG7C,SAAS;AAAA;AAEN,MAAM,6BAAyB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA,WAItC,CAAC,UAAW,MAAM,SAAS,0CAAa,SAAS,SAAS,SAAU;AAAA;AAGxE,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQhC,MAAM,oBAAoB,wBAAO;AAAA;AAAA;AAAA,iBAGvB,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,WACvC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMxC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,aAIxC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/C,MAAM,uBAAmB,yBAAO,iBAAiB;AAAA;AAAA;AAAA,WAG7C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,YAEzC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,aAIxC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAK/C,MAAM,oBAAoB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjC,MAAM,sBAAsB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKtC,CAAC,UACD,MAAM,SAAS,0CAAa,SACxB;AAAA,4BACoB,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA,sBACrC,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,iBAClC,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,UACxC,iBAAiB;AAAA;AAAA;AAAA;AAAA,wBAIH,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAS7C;AAAA;AAAA,sBAEc,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,iBACtC,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,UAEtC,iBAAiB;AAAA;AAAA;AAAA;AAAA,wBAIH,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,KAIpD;AAAA;",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { BUBBLE_TYPES, CHAT_BUBBLE_SLOTS, DSChatBubbleName } from './constants/index.js';\n\nconst wrapRules = css`\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n`;\n// Bubble WRAPPER\nexport const StyledWrapper = styled('div', {\n  name: DSChatBubbleName,\n  slot: CHAT_BUBBLE_SLOTS.WRAPPER,\n})`\n  min-width: 224px;\n  border-radius: 10px;\n  ${wrapRules}\n`;\n\n// Bubble HEADER\nexport const StyledTitleBubble = styled(Grid, {\n  name: DSChatBubbleName,\n  slot: CHAT_BUBBLE_SLOTS.HEADER,\n})`\n  padding-top: 6px;\n  padding-left: 10px;\n  padding-right: 10px;\n  padding-bottom: 4px;\n`;\n\nexport const StyledTitleLeftBubble = styled('div', {\n  name: DSChatBubbleName,\n  slot: CHAT_BUBBLE_SLOTS.HEADER_LEFT,\n})`\n  font-size: 1rem;\n  font-weight: 600;\n  ${wrapRules}\n`;\nexport const StyledTitleRightBubble = styled(Grid, {\n  name: DSChatBubbleName,\n  slot: CHAT_BUBBLE_SLOTS.HEADER_RIGHT,\n})<{ 'data-theming-type': string }>`\n  font-size: 1rem;\n  font-weight: 400;\n  align-self: flex-start;\n  color: ${(props) => (props['data-theming-type'] === BUBBLE_TYPES.SENDER ? '#FFF' : '#657489')};\n`;\n\nexport const StyleBodyWrapper = styled('div', {\n  name: DSChatBubbleName,\n  slot: CHAT_BUBBLE_SLOTS.BODY_WRAPPER,\n})`\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.15;\n  min-height: 18px;\n  padding: 0px 10px 8px 10px;\n`;\n\nexport const StyleErrorMessage = styled('div', {\n  name: DSChatBubbleName,\n  slot: CHAT_BUBBLE_SLOTS.ERROR_MESSAGE,\n})`\n  font-size: 0.923rem;\n  font-weight: 400;\n  padding-top: ${(props) => props.theme.space.xxxs};\n  color: ${(props) => props.theme.colors.danger[900]};\n  align-items: flex-end;\n  justify-content: center;\n  text-align: right;\n  line-height: 1.15;\n  svg {\n    fill: ${(props) => props.theme.colors.danger[900]};\n  }\n  a {\n    font-size: 0.923rem;\n    color: ${(props) => props.theme.colors.danger[900]};\n  }\n  .em-ds-icon {\n    margin-left: 8px;\n  }\n`;\n\nexport const StyleHelpMessage = styled(StyleErrorMessage, {\n  name: DSChatBubbleName,\n  slot: CHAT_BUBBLE_SLOTS.HELP_MESSAGE,\n})`\n  font-size: 0.923rem;\n  line-height: 1.15;\n  color: ${(props) => props.theme.colors.neutral[600]};\n  svg {\n    fill: ${(props) => props.theme.colors.danger[900]};\n  }\n  a {\n    font-size: 12px;\n    color: ${(props) => props.theme.colors.danger[900]};\n  }\n`;\n\nexport const StyledColoredBubble = styled('div', {\n  name: DSChatBubbleName,\n  slot: CHAT_BUBBLE_SLOTS.COLORED_BUBBLE,\n})<{ 'data-theming-type': string }>`\n  min-width: 224px;\n  border-radius: 10px;\n  position: relative;\n\n  ${(props) =>\n    props['data-theming-type'] === BUBBLE_TYPES.SENDER\n      ? `\n        border: 1px solid ${props.theme.colors.brand['700']};\n        background: ${props.theme.colors.brand[600]};\n        color: ${props.theme.colors.neutral['000']};\n        a {\n          color: #FFF;\n        }\n    `\n      : `\n        box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);\n        background: ${props.theme.colors.neutral['000']};\n        color: ${props.theme.colors.neutral[700]};\n    `}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA4B;AAC5B,qBAAqB;AACrB,uBAAkE;AAElE,MAAM,YAAY;AAAA;AAAA;AAAA;AAKX,MAAM,oBAAgB,yBAAO,OAAO;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,IAGG,SAAS;AAAA;AAIN,MAAM,wBAAoB,yBAAO,qBAAM;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,4BAAwB,yBAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,IAGG,SAAS;AAAA;AAEN,MAAM,6BAAyB,yBAAO,qBAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA,WAIU,CAAC,UAAW,MAAM,mBAAmB,MAAM,8BAAa,SAAS,SAAS,SAAU;AAAA;AAGxF,MAAM,uBAAmB,yBAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQM,MAAM,wBAAoB,yBAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,iBAGgB,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,WACvC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMxC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,aAIxC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/C,MAAM,uBAAmB,yBAAO,mBAAmB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,WAGU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,YAEzC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,aAIxC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAI/C,MAAM,0BAAsB,yBAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKG,CAAC,UACD,MAAM,mBAAmB,MAAM,8BAAa,SACxC;AAAA,4BACoB,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA,sBACrC,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,iBAClC,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,QAK1C;AAAA;AAAA,sBAEc,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,iBACtC,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,KAC3C;AAAA;",
   "names": []
 }

package/dist/esm/ChatBubble.js

@@ -17,8 +17,7 @@ import {
 } from "./styled.js";
 import { BubblePropTypes, defaultProps } from "./react-desc-prop-types.js";
 import { ChatBubbleArrow } from "./ChatBubbleArrow.js";
-import { ChatBubbleDataTestIds } from "./ChatBubbleDataTestIds.js";
-import { DSChatBubbleName } from "./DSChatBubbleDefinitions.js";
+import { CHAT_BUBBLE_DATA_TESTID, DSChatBubbleName } from "./constants/index.js";
 const ChatBubble = (props) => {
   const defaultPropsIncludingInstanciatedValues = React2.useMemo(() => {
     const dsId2 = props.dsId || `ds-chat-bubble-${uid(9)}`;
@@ -31,39 +30,98 @@ const ChatBubble = (props) => {
   useValidateTypescriptPropTypes(propsWithDefault, BubblePropTypes, DSChatBubbleName);
   const { dsId, type, title, time, body, errorMessage, helpMessage } = propsWithDefault;
   const bodyParts = React2.useMemo(() => typeof body === "string" ? body.split("\n") : [body], [body]);
-  return /* @__PURE__ */ jsxs(StyledWrapper, { "data-testid": `${ChatBubbleDataTestIds.BUBBLE}-${dsId}`, children: [
-    /* @__PURE__ */ jsxs(StyledColoredBubble, { type, children: [
-      /* @__PURE__ */ jsxs(StyledTitleBubble, { cols: ["1fr", "auto"], gutter: "xs", alignItems: "flex-end", className: "sr-only", children: [
-        /* @__PURE__ */ jsx(StyledTitleLeftBubble, { "data-testid": `${ChatBubbleDataTestIds.BUBBLE_TITLE}-${dsId}`, children: title }),
-        /* @__PURE__ */ jsx(
-          StyledTitleRightBubble,
+  return /* @__PURE__ */ jsxs(
+    StyledWrapper,
+    {
+      "data-testid": `${CHAT_BUBBLE_DATA_TESTID.WRAPPER}-${dsId}`,
+      getOwnerProps: () => propsWithDefault,
+      getOwnerPropsArguments: () => ({}),
+      children: [
+        /* @__PURE__ */ jsxs(
+          StyledColoredBubble,
           {
-            alignItems: "center",
-            type,
-            "data-testid": `${ChatBubbleDataTestIds.BUBBLE_TIME}-${dsId}`,
-            children: time
+            "data-theming-type": type,
+            getOwnerProps: () => propsWithDefault,
+            getOwnerPropsArguments: () => ({}),
+            children: [
+              /* @__PURE__ */ jsxs(
+                StyledTitleBubble,
+                {
+                  cols: ["1fr", "auto"],
+                  gutter: "xs",
+                  alignItems: "flex-end",
+                  getOwnerProps: () => propsWithDefault,
+                  getOwnerPropsArguments: () => ({}),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      StyledTitleLeftBubble,
+                      {
+                        "data-testid": `${CHAT_BUBBLE_DATA_TESTID.HEADER_LEFT}-${dsId}`,
+                        getOwnerProps: () => propsWithDefault,
+                        getOwnerPropsArguments: () => ({}),
+                        children: title
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      StyledTitleRightBubble,
+                      {
+                        alignItems: "center",
+                        "data-theming-type": type,
+                        "data-testid": `${CHAT_BUBBLE_DATA_TESTID.HEADER_RIGHT}-${dsId}`,
+                        getOwnerProps: () => propsWithDefault,
+                        getOwnerPropsArguments: () => ({}),
+                        children: time
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                StyleBodyWrapper,
+                {
+                  "data-testid": `${CHAT_BUBBLE_DATA_TESTID.BODY_WRAPPER}-${dsId}`,
+                  getOwnerProps: () => propsWithDefault,
+                  getOwnerPropsArguments: () => ({}),
+                  children: bodyParts.map((item, index) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    /* @__PURE__ */ jsxs(React2.Fragment, { children: [
+                      item,
+                      index < bodyParts.length - 1 ? /* @__PURE__ */ jsx("br", {}) : null
+                    ] }, `body-fragment-${index}-${dsId}`)
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsx(ChatBubbleArrow, { ...propsWithDefault })
+            ]
           }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(StyleBodyWrapper, { "data-testid": `chat-bubble-body-${dsId}`, children: bodyParts.map((item, index) => (
-        // eslint-disable-next-line react/no-array-index-key
-        /* @__PURE__ */ jsxs(React2.Fragment, { children: [
-          item,
-          index < bodyParts.length - 1 ? /* @__PURE__ */ jsx("br", {}) : null
-        ] }, `body-fragment-${index}-${dsId}`)
-      )) }),
-      /* @__PURE__ */ jsx(ChatBubbleArrow, { type, dsId })
-    ] }),
-    errorMessage ? /* @__PURE__ */ jsx(StyleErrorMessage, { "data-testid": `chat-bubble-error-message-${dsId}`, children: /* @__PURE__ */ jsxs(Grid, { cols: ["1fr", "auto"], children: [
-      /* @__PURE__ */ jsx("span", { children: errorMessage }),
-      /* @__PURE__ */ jsx(WarningCircleFill, {})
-    ] }) }) : null,
-    helpMessage ? /* @__PURE__ */ jsx(StyleHelpMessage, { "data-testid": `chat-bubble-help-message-${dsId}`, children: /* @__PURE__ */ jsx("span", { children: helpMessage }) }) : null
-  ] });
+        ),
+        errorMessage ? /* @__PURE__ */ jsx(
+          StyleErrorMessage,
+          {
+            "data-testid": `${CHAT_BUBBLE_DATA_TESTID.ERROR_MESSAGE}-${dsId}`,
+            getOwnerProps: () => propsWithDefault,
+            getOwnerPropsArguments: () => ({}),
+            children: /* @__PURE__ */ jsxs(Grid, { cols: ["1fr", "auto"], children: [
+              /* @__PURE__ */ jsx("span", { children: errorMessage }),
+              /* @__PURE__ */ jsx(WarningCircleFill, {})
+            ] })
+          }
+        ) : null,
+        helpMessage ? /* @__PURE__ */ jsx(
+          StyleHelpMessage,
+          {
+            "data-testid": `${CHAT_BUBBLE_DATA_TESTID.HELP_MESSAGE}-${dsId}`,
+            getOwnerProps: () => propsWithDefault,
+            getOwnerPropsArguments: () => ({}),
+            children: /* @__PURE__ */ jsx("span", { children: helpMessage })
+          }
+        ) : null
+      ]
+    }
+  );
 };
 ChatBubble.displayName = DSChatBubbleName;
 const ChatBubbleWithSchema = describe(ChatBubble);
-ChatBubbleWithSchema.propTypes = BubblePropTypes;
 export {
   ChatBubble,
   ChatBubbleWithSchema

package/dist/esm/ChatBubble.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ChatBubble.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { WarningCircleFill } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport { uid } from 'uid';\nimport {\n  StyledWrapper,\n  StyledColoredBubble,\n  StyledTitleBubble,\n  StyledTitleLeftBubble,\n  StyledTitleRightBubble,\n  StyleBodyWrapper,\n  StyleErrorMessage,\n  StyleHelpMessage,\n} from './styled.js';\nimport { BubblePropTypes, type DSChatBubbleT, defaultProps } from './react-desc-prop-types.js';\nimport { ChatBubbleArrow } from './ChatBubbleArrow.js';\nimport { ChatBubbleDataTestIds } from './ChatBubbleDataTestIds.js';\nimport { DSChatBubbleName } from './DSChatBubbleDefinitions.js';\n\nconst ChatBubble: React.ComponentType<DSChatBubbleT.Props> = (props) => {\n  const defaultPropsIncludingInstanciatedValues = React.useMemo(() => {\n    const dsId = props.dsId || `ds-chat-bubble-${uid(9)}`;\n    return { ...defaultProps, dsId };\n  }, [props.dsId]);\n  const propsWithDefault = useMemoMergePropsWithDefault<DSChatBubbleT.InternalProps>(\n    props,\n    defaultPropsIncludingInstanciatedValues,\n  );\n  useValidateTypescriptPropTypes(propsWithDefault, BubblePropTypes, DSChatBubbleName);\n\n  const { dsId, type, title, time, body, errorMessage, helpMessage } = propsWithDefault;\n  const bodyParts = React.useMemo(() => (typeof body === 'string' ? body.split('\\n') : [body]), [body]);\n  return (\n    <StyledWrapper data-testid={`${ChatBubbleDataTestIds.BUBBLE}-${dsId}`}>\n      <StyledColoredBubble type={type}>\n        <StyledTitleBubble cols={['1fr', 'auto']} gutter=\"xs\" alignItems=\"flex-end\" className=\"sr-only\">\n          <StyledTitleLeftBubble data-testid={`${ChatBubbleDataTestIds.BUBBLE_TITLE}-${dsId}`}>\n            {title}\n          </StyledTitleLeftBubble>\n          <StyledTitleRightBubble\n            alignItems=\"center\"\n            type={type}\n            data-testid={`${ChatBubbleDataTestIds.BUBBLE_TIME}-${dsId}`}\n          >\n            {time}\n          </StyledTitleRightBubble>\n        </StyledTitleBubble>\n        <StyleBodyWrapper data-testid={`chat-bubble-body-${dsId}`}>\n          {bodyParts.map((item, index) => (\n            // eslint-disable-next-line react/no-array-index-key\n            <React.Fragment key={`body-fragment-${index}-${dsId}`}>\n              {item}\n              {index < bodyParts.length - 1 ? <br /> : null}\n            </React.Fragment>\n          ))}\n        </StyleBodyWrapper>\n        <ChatBubbleArrow type={type} dsId={dsId} />\n      </StyledColoredBubble>\n      {errorMessage ? (\n        <StyleErrorMessage data-testid={`chat-bubble-error-message-${dsId}`}>\n          <Grid cols={['1fr', 'auto']}>\n            <span>{errorMessage}</span>\n            <WarningCircleFill />\n          </Grid>\n        </StyleErrorMessage>\n      ) : null}\n      {helpMessage ? (\n        <StyleHelpMessage data-testid={`chat-bubble-help-message-${dsId}`}>\n          <span>{helpMessage}</span>\n        </StyleHelpMessage>\n      ) : null}\n    </StyledWrapper>\n  );\n};\n\nChatBubble.displayName = DSChatBubbleName;\nconst ChatBubbleWithSchema = describe(ChatBubble);\nChatBubbleWithSchema.propTypes = BubblePropTypes;\n\nexport { ChatBubble, ChatBubbleWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoCf,SACE,KADF;AApCR,OAAOA,YAAW;AAClB,SAAS,UAAU,gCAAgC,oCAAoC;AACvF,SAAS,yBAAyB;AAClC,SAAS,YAAY;AACrB,SAAS,WAAW;AACpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAqC,oBAAoB;AAClE,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AAEjC,MAAM,aAAuD,CAAC,UAAU;AACtE,QAAM,0CAA0CA,OAAM,QAAQ,MAAM;AAClE,UAAMC,QAAO,MAAM,QAAQ,kBAAkB,IAAI,CAAC,CAAC;AACnD,WAAO,EAAE,GAAG,cAAc,MAAAA,MAAK;AAAA,EACjC,GAAG,CAAC,MAAM,IAAI,CAAC;AACf,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,iCAA+B,kBAAkB,iBAAiB,gBAAgB;AAElF,QAAM,EAAE,MAAM,MAAM,OAAO,MAAM,MAAM,cAAc,YAAY,IAAI;AACrE,QAAM,YAAYD,OAAM,QAAQ,MAAO,OAAO,SAAS,WAAW,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,GAAI,CAAC,IAAI,CAAC;AACpG,SACE,qBAAC,iBAAc,eAAa,GAAG,sBAAsB,MAAM,IAAI,IAAI,IACjE;AAAA,yBAAC,uBAAoB,MACnB;AAAA,2BAAC,qBAAkB,MAAM,CAAC,OAAO,MAAM,GAAG,QAAO,MAAK,YAAW,YAAW,WAAU,WACpF;AAAA,4BAAC,yBAAsB,eAAa,GAAG,sBAAsB,YAAY,IAAI,IAAI,IAC9E,iBACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX;AAAA,YACA,eAAa,GAAG,sBAAsB,WAAW,IAAI,IAAI;AAAA,YAExD;AAAA;AAAA,QACH;AAAA,SACF;AAAA,MACA,oBAAC,oBAAiB,eAAa,oBAAoB,IAAI,IACpD,oBAAU,IAAI,CAAC,MAAM;AAAA;AAAA,QAEpB,qBAACA,OAAM,UAAN,EACE;AAAA;AAAA,UACA,QAAQ,UAAU,SAAS,IAAI,oBAAC,QAAG,IAAK;AAAA,aAFtB,iBAAiB,KAAK,IAAI,IAAI,EAGnD;AAAA,OACD,GACH;AAAA,MACA,oBAAC,mBAAgB,MAAY,MAAY;AAAA,OAC3C;AAAA,IACC,eACC,oBAAC,qBAAkB,eAAa,6BAA6B,IAAI,IAC/D,+BAAC,QAAK,MAAM,CAAC,OAAO,MAAM,GACxB;AAAA,0BAAC,UAAM,wBAAa;AAAA,MACpB,oBAAC,qBAAkB;AAAA,OACrB,GACF,IACE;AAAA,IACH,cACC,oBAAC,oBAAiB,eAAa,4BAA4B,IAAI,IAC7D,8BAAC,UAAM,uBAAY,GACrB,IACE;AAAA,KACN;AAEJ;AAEA,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAChD,qBAAqB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { WarningCircleFill } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport { uid } from 'uid';\nimport {\n  StyledWrapper,\n  StyledColoredBubble,\n  StyledTitleBubble,\n  StyledTitleLeftBubble,\n  StyledTitleRightBubble,\n  StyleBodyWrapper,\n  StyleErrorMessage,\n  StyleHelpMessage,\n} from './styled.js';\nimport { BubblePropTypes, type DSChatBubbleT, defaultProps } from './react-desc-prop-types.js';\nimport { ChatBubbleArrow } from './ChatBubbleArrow.js';\nimport { CHAT_BUBBLE_DATA_TESTID, DSChatBubbleName } from './constants/index.js';\n\nconst ChatBubble: React.ComponentType<DSChatBubbleT.Props> = (props) => {\n  const defaultPropsIncludingInstanciatedValues = React.useMemo(() => {\n    const dsId = props.dsId || `ds-chat-bubble-${uid(9)}`;\n    return { ...defaultProps, dsId };\n  }, [props.dsId]);\n  const propsWithDefault = useMemoMergePropsWithDefault<DSChatBubbleT.InternalProps>(\n    props,\n    defaultPropsIncludingInstanciatedValues,\n  );\n  useValidateTypescriptPropTypes(propsWithDefault, BubblePropTypes, DSChatBubbleName);\n\n  const { dsId, type, title, time, body, errorMessage, helpMessage } = propsWithDefault;\n  const bodyParts = React.useMemo(() => (typeof body === 'string' ? body.split('\\n') : [body]), [body]);\n  return (\n    <StyledWrapper\n      data-testid={`${CHAT_BUBBLE_DATA_TESTID.WRAPPER}-${dsId}`}\n      getOwnerProps={() => propsWithDefault}\n      getOwnerPropsArguments={() => ({})}\n    >\n      <StyledColoredBubble\n        data-theming-type={type}\n        getOwnerProps={() => propsWithDefault}\n        getOwnerPropsArguments={() => ({})}\n      >\n        <StyledTitleBubble\n          cols={['1fr', 'auto']}\n          gutter=\"xs\"\n          alignItems=\"flex-end\"\n          getOwnerProps={() => propsWithDefault}\n          getOwnerPropsArguments={() => ({})}\n        >\n          <StyledTitleLeftBubble\n            data-testid={`${CHAT_BUBBLE_DATA_TESTID.HEADER_LEFT}-${dsId}`}\n            getOwnerProps={() => propsWithDefault}\n            getOwnerPropsArguments={() => ({})}\n          >\n            {title}\n          </StyledTitleLeftBubble>\n          <StyledTitleRightBubble\n            alignItems=\"center\"\n            data-theming-type={type}\n            data-testid={`${CHAT_BUBBLE_DATA_TESTID.HEADER_RIGHT}-${dsId}`}\n            getOwnerProps={() => propsWithDefault}\n            getOwnerPropsArguments={() => ({})}\n          >\n            {time}\n          </StyledTitleRightBubble>\n        </StyledTitleBubble>\n        <StyleBodyWrapper\n          data-testid={`${CHAT_BUBBLE_DATA_TESTID.BODY_WRAPPER}-${dsId}`}\n          getOwnerProps={() => propsWithDefault}\n          getOwnerPropsArguments={() => ({})}\n        >\n          {bodyParts.map((item, index) => (\n            // eslint-disable-next-line react/no-array-index-key\n            <React.Fragment key={`body-fragment-${index}-${dsId}`}>\n              {item}\n              {index < bodyParts.length - 1 ? <br /> : null}\n            </React.Fragment>\n          ))}\n        </StyleBodyWrapper>\n        <ChatBubbleArrow {...propsWithDefault} />\n      </StyledColoredBubble>\n      {errorMessage ? (\n        <StyleErrorMessage\n          data-testid={`${CHAT_BUBBLE_DATA_TESTID.ERROR_MESSAGE}-${dsId}`}\n          getOwnerProps={() => propsWithDefault}\n          getOwnerPropsArguments={() => ({})}\n        >\n          <Grid cols={['1fr', 'auto']}>\n            <span>{errorMessage}</span>\n            <WarningCircleFill />\n          </Grid>\n        </StyleErrorMessage>\n      ) : null}\n      {helpMessage ? (\n        <StyleHelpMessage\n          data-testid={`${CHAT_BUBBLE_DATA_TESTID.HELP_MESSAGE}-${dsId}`}\n          getOwnerProps={() => propsWithDefault}\n          getOwnerPropsArguments={() => ({})}\n        >\n          <span>{helpMessage}</span>\n        </StyleHelpMessage>\n      ) : null}\n    </StyledWrapper>\n  );\n};\n\nChatBubble.displayName = DSChatBubbleName;\nconst ChatBubbleWithSchema = describe(ChatBubble);\n\nexport { ChatBubble, ChatBubbleWithSchema };\n"],
+  "mappings": "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",
   "names": ["React", "dsId"]
 }

package/dist/esm/ChatBubbleArrow.js

@@ -1,62 +1,83 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { describe } from "@elliemae/ds-props-helpers";
-import { StyledBubbleArrow } from "./styled.js";
-import { BUBBLE_TYPES, propsArrowBubble } from "./react-desc-prop-types.js";
-const ChatBubbleArrow = ({ type, dsId }) => /* @__PURE__ */ jsx(StyledBubbleArrow, { children: type === BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ jsxs("svg", { width: "1.15rem", height: "1.07rem", viewBox: "0 0 15 14", "aria-hidden": "true", children: [
-  /* @__PURE__ */ jsxs("defs", { children: [
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        id: `arrow-svg-path-${dsId}`,
-        d: "M12,8.5 C12,7.9373169 11.6782751,7.4856453 11.2282104,7.196228 C11.2286673,7.1967363 3,2 3,2 L3,10 L10.5627441,10 L10.5658569,9.9933472 C11.3630371,9.9580688 12,9.3058472 12,8.5 Z"
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "filter",
-      {
-        id: `arrow-svg-filter-${dsId}`,
-        x: "-55.6%",
-        y: "-50.0%",
-        width: "211.1%",
-        height: "225.0%",
-        filterUnits: "objectBoundingBox",
-        children: [
-          /* @__PURE__ */ jsx("feOffset", { dx: "2.3", dy: "1.2", in: "SourceAlpha", result: "shadowOffsetOuter1" }),
-          /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "1.5", in: "shadowOffsetOuter1", result: "shadowBlurOuter1" }),
-          /* @__PURE__ */ jsx(
-            "feColorMatrix",
-            {
-              values: "0 0 0 0 0.207843137   \n                      0 0 0 0 0.235294118   \n                      0 0 0 0 0.274509804  \n                      0 0 0 0.8 0",
-              type: "matrix",
-              in: "shadowBlurOuter1"
-            }
-          )
-        ]
-      }
-    )
-  ] }),
-  /* @__PURE__ */ jsx("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs("g", { transform: "translate(7.500000, 6.000000) scale(-1, 1) translate(-7.500000, -6.000000) ", children: [
-    /* @__PURE__ */ jsx(
-      "use",
-      {
-        fill: "black",
-        fillOpacity: "1",
-        filter: `url(#arrow-svg-filter-${dsId})`,
-        xlinkHref: `#arrow-svg-path-${dsId}`
-      }
-    ),
-    /* @__PURE__ */ jsx("use", { fill: "#FFFFFF", fillRule: "evenodd", xlinkHref: `#arrow-svg-path-${dsId}` })
-  ] }) })
-] }) : /* @__PURE__ */ jsx("svg", { width: "0.692rem", height: "0.615rem", viewBox: "0 0 9 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsx(
-  "path",
+import { styled, css } from "@elliemae/ds-system";
+import { BUBBLE_TYPES, CHAT_BUBBLE_SLOTS, DSChatBubbleName } from "./constants/index.js";
+const senderArrowPositionStyles = css`
+  right: -0.692rem;
+  height: 1.15rem;
+  bottom: 0.461rem;
+`;
+const recipientArrowPositionStyles = css`
+  left: -0.846rem;
+  bottom: 0.461rem;
+`;
+const StyledBubbleArrow = styled("div", {
+  name: DSChatBubbleName,
+  slot: CHAT_BUBBLE_SLOTS.ARROW
+})`
+  position: absolute;
+  fill: ${(props) => props["data-theming-type"] === BUBBLE_TYPES.RECIPIENT ? props.theme.colors.neutral["000"] : props.theme.colors.brand["600"]};
+  ${(props) => {
+  if (props["data-theming-type"] === BUBBLE_TYPES.RECIPIENT) return recipientArrowPositionStyles;
+  return senderArrowPositionStyles;
+}}
+`;
+const BubbleArrowRecipient = (propsWithDefault) => /* @__PURE__ */ jsx(
+  StyledBubbleArrow,
   {
-    d: "M9,6.5 C9,5.9373169 8.6782751,5.4856453 8.2282104,5.196228 C8.2286673,5.1967363 0,0 0,0 L0,8 L7.5627441,8 L7.5658569,7.9933472 C8.3630371,7.9580688 9,7.3058472 9,6.5 Z",
-    fill: "#1E79C2"
+    "data-theming-type": BUBBLE_TYPES.RECIPIENT,
+    getOwnerProps: () => propsWithDefault,
+    getOwnerPropsArguments: () => ({ isRecipientArrow: true }),
+    children: /* @__PURE__ */ jsxs("svg", { width: "1.15rem", height: "1.07rem", viewBox: "0 0 15 14", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+        "filter",
+        {
+          id: `filter-${propsWithDefault.dsId}`,
+          width: "211.1%",
+          height: "225%",
+          x: "-55.6%",
+          y: "-50%",
+          filterUnits: "objectBoundingBox",
+          children: [
+            /* @__PURE__ */ jsx("feOffset", { dx: "2.3", dy: "1.2", in: "SourceAlpha", result: "shadowOffsetOuter1" }),
+            /* @__PURE__ */ jsx("feGaussianBlur", { in: "shadowOffsetOuter1", result: "shadowBlurOuter1", stdDeviation: "1.5" }),
+            /* @__PURE__ */ jsx(
+              "feColorMatrix",
+              {
+                in: "shadowBlurOuter1",
+                values: "0 0 0 0 0.207843137 0 0 0 0 0.235294118 0 0 0 0 0.274509804 0 0 0 0.8 0"
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("g", { transform: "matrix(-1 0 0 1 15 0)", children: [
+        /* @__PURE__ */ jsx("use", { filter: `url(#filter-${propsWithDefault.dsId})`, href: `#path-${propsWithDefault.dsId}` }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            id: `path-${propsWithDefault.dsId}`,
+            d: "M12 8.5c0-.563-.322-1.014-.772-1.304L3 2v8h7.563l.003-.007A1.497 1.497 0 0 0 12 8.5"
+          }
+        )
+      ] })
+    ] })
   }
-) }) }) });
-const ChatBubbleArrowWithSchema = describe(ChatBubbleArrow);
-ChatBubbleArrowWithSchema.propTypes = propsArrowBubble;
+);
+const BubbleArrowSender = (propsWithDefault) => /* @__PURE__ */ jsx(
+  StyledBubbleArrow,
+  {
+    "data-theming-type": BUBBLE_TYPES.SENDER,
+    getOwnerProps: () => propsWithDefault,
+    getOwnerPropsArguments: () => ({ isRecipientArrow: false }),
+    children: /* @__PURE__ */ jsx("svg", { width: "0.692rem", height: "0.615rem", viewBox: "0 0 9 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx("g", { stroke: "none", strokeWidth: "1", fillRule: "evenodd", children: /* @__PURE__ */ jsx("path", { d: "M9,6.5 C9,5.9373169 8.6782751,5.4856453 8.2282104,5.196228 C8.2286673,5.1967363 0,0 0,0 L0,8 L7.5627441,8 L7.5658569,7.9933472 C8.3630371,7.9580688 9,7.3058472 9,6.5 Z" }) }) })
+  }
+);
+const ChatBubbleArrow = (propsWithDefault) => {
+  const { type } = propsWithDefault;
+  if (type === BUBBLE_TYPES.RECIPIENT) return /* @__PURE__ */ jsx(BubbleArrowRecipient, { ...propsWithDefault });
+  return /* @__PURE__ */ jsx(BubbleArrowSender, { ...propsWithDefault });
+};
 export {
   ChatBubbleArrow
 };

package/dist/esm/ChatBubbleArrow.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ChatBubbleArrow.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { StyledBubbleArrow } from './styled.js';\nimport { BUBBLE_TYPES, type DSChatBubbleT, propsArrowBubble } from './react-desc-prop-types.js';\n\nexport const ChatBubbleArrow: React.ComponentType<Pick<DSChatBubbleT.Props, 'type' | 'dsId'>> = ({ type, dsId }) => (\n  <StyledBubbleArrow>\n    {type === BUBBLE_TYPES.RECIPIENT ? (\n      <svg width=\"1.15rem\" height=\"1.07rem\" viewBox=\"0 0 15 14\" aria-hidden=\"true\">\n        <defs>\n          <path\n            id={`arrow-svg-path-${dsId}`}\n            d=\"M12,8.5 C12,7.9373169 11.6782751,7.4856453 11.2282104,7.196228 C11.2286673,7.1967363 3,2 3,2 L3,10 L10.5627441,10 L10.5658569,9.9933472 C11.3630371,9.9580688 12,9.3058472 12,8.5 Z\"\n          ></path>\n          <filter\n            id={`arrow-svg-filter-${dsId}`}\n            x=\"-55.6%\"\n            y=\"-50.0%\"\n            width=\"211.1%\"\n            height=\"225.0%\"\n            filterUnits=\"objectBoundingBox\"\n          >\n            <feOffset dx=\"2.3\" dy=\"1.2\" in=\"SourceAlpha\" result=\"shadowOffsetOuter1\"></feOffset>\n            <feGaussianBlur stdDeviation=\"1.5\" in=\"shadowOffsetOuter1\" result=\"shadowBlurOuter1\"></feGaussianBlur>\n            <feColorMatrix\n              values=\"0 0 0 0 0.207843137   \n                      0 0 0 0 0.235294118   \n                      0 0 0 0 0.274509804  \n                      0 0 0 0.8 0\"\n              type=\"matrix\"\n              in=\"shadowBlurOuter1\"\n            ></feColorMatrix>\n          </filter>\n        </defs>\n        <g stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n          <g transform=\"translate(7.500000, 6.000000) scale(-1, 1) translate(-7.500000, -6.000000) \">\n            <use\n              fill=\"black\"\n              fillOpacity=\"1\"\n              filter={`url(#arrow-svg-filter-${dsId})`}\n              xlinkHref={`#arrow-svg-path-${dsId}`}\n            ></use>\n            <use fill=\"#FFFFFF\" fillRule=\"evenodd\" xlinkHref={`#arrow-svg-path-${dsId}`}></use>\n          </g>\n        </g>\n      </svg>\n    ) : (\n      <svg width=\"0.692rem\" height=\"0.615rem\" viewBox=\"0 0 9 8\" aria-hidden=\"true\">\n        <g stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n          <path\n            d=\"M9,6.5 C9,5.9373169 8.6782751,5.4856453 8.2282104,5.196228 C8.2286673,5.1967363 0,0 0,0 L0,8 L7.5627441,8 L7.5658569,7.9933472 C8.3630371,7.9580688 9,7.3058472 9,6.5 Z\"\n            fill=\"#1E79C2\"\n          ></path>\n        </g>\n      </svg>\n    )}\n  </StyledBubbleArrow>\n);\n\nconst ChatBubbleArrowWithSchema = describe(ChatBubbleArrow);\nChatBubbleArrowWithSchema.propTypes = propsArrowBubble;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACUb,cAIA,YAJA;AATV,SAAS,gBAAgB;AACzB,SAAS,yBAAyB;AAClC,SAAS,cAAkC,wBAAwB;AAE5D,MAAM,kBAAmF,CAAC,EAAE,MAAM,KAAK,MAC5G,oBAAC,qBACE,mBAAS,aAAa,YACrB,qBAAC,SAAI,OAAM,WAAU,QAAO,WAAU,SAAQ,aAAY,eAAY,QACpE;AAAA,uBAAC,UACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,kBAAkB,IAAI;AAAA,QAC1B,GAAE;AAAA;AAAA,IACH;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,oBAAoB,IAAI;AAAA,QAC5B,GAAE;AAAA,QACF,GAAE;AAAA,QACF,OAAM;AAAA,QACN,QAAO;AAAA,QACP,aAAY;AAAA,QAEZ;AAAA,8BAAC,cAAS,IAAG,OAAM,IAAG,OAAM,IAAG,eAAc,QAAO,sBAAqB;AAAA,UACzE,oBAAC,oBAAe,cAAa,OAAM,IAAG,sBAAqB,QAAO,oBAAmB;AAAA,UACrF;AAAA,YAAC;AAAA;AAAA,cACC,QAAO;AAAA,cAIP,MAAK;AAAA,cACL,IAAG;AAAA;AAAA,UACJ;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAAA,EACA,oBAAC,OAAE,QAAO,QAAO,aAAY,KAAI,MAAK,QAAO,UAAS,WACpD,+BAAC,OAAE,WAAU,+EACX;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAY;AAAA,QACZ,QAAQ,yBAAyB,IAAI;AAAA,QACrC,WAAW,mBAAmB,IAAI;AAAA;AAAA,IACnC;AAAA,IACD,oBAAC,SAAI,MAAK,WAAU,UAAS,WAAU,WAAW,mBAAmB,IAAI,IAAI;AAAA,KAC/E,GACF;AAAA,GACF,IAEA,oBAAC,SAAI,OAAM,YAAW,QAAO,YAAW,SAAQ,WAAU,eAAY,QACpE,8BAAC,OAAE,QAAO,QAAO,aAAY,KAAI,MAAK,QAAO,UAAS,WACpD;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAK;AAAA;AACN,GACH,GACF,GAEJ;AAGF,MAAM,4BAA4B,SAAS,eAAe;AAC1D,0BAA0B,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport React from 'react';\nimport { BUBBLE_TYPES, CHAT_BUBBLE_SLOTS, DSChatBubbleName } from './constants/index.js';\nimport { type DSChatBubbleT } from './react-desc-prop-types.js';\n\nconst senderArrowPositionStyles = css`\n  right: -0.692rem;\n  height: 1.15rem;\n  bottom: 0.461rem;\n`;\nconst recipientArrowPositionStyles = css`\n  left: -0.846rem;\n  bottom: 0.461rem;\n`;\n\nconst StyledBubbleArrow = styled('div', {\n  name: DSChatBubbleName,\n  slot: CHAT_BUBBLE_SLOTS.ARROW,\n})<{ 'data-theming-type': typeof BUBBLE_TYPES.RECIPIENT | typeof BUBBLE_TYPES.SENDER }>`\n  position: absolute;\n  fill: ${(props) =>\n    props['data-theming-type'] === BUBBLE_TYPES.RECIPIENT\n      ? props.theme.colors.neutral['000']\n      : props.theme.colors.brand['600']};\n  ${(props) => {\n    if (props['data-theming-type'] === BUBBLE_TYPES.RECIPIENT) return recipientArrowPositionStyles;\n    return senderArrowPositionStyles;\n  }}\n`;\n\nconst BubbleArrowRecipient: React.ComponentType<DSChatBubbleT.InternalProps> = (propsWithDefault) => (\n  <StyledBubbleArrow\n    data-theming-type={BUBBLE_TYPES.RECIPIENT}\n    getOwnerProps={() => propsWithDefault}\n    getOwnerPropsArguments={() => ({ isRecipientArrow: true })}\n  >\n    <svg width=\"1.15rem\" height=\"1.07rem\" viewBox=\"0 0 15 14\" aria-hidden=\"true\">\n      <defs>\n        <filter\n          id={`filter-${propsWithDefault.dsId}`}\n          width=\"211.1%\"\n          height=\"225%\"\n          x=\"-55.6%\"\n          y=\"-50%\"\n          filterUnits=\"objectBoundingBox\"\n        >\n          <feOffset dx=\"2.3\" dy=\"1.2\" in=\"SourceAlpha\" result=\"shadowOffsetOuter1\" />\n          <feGaussianBlur in=\"shadowOffsetOuter1\" result=\"shadowBlurOuter1\" stdDeviation=\"1.5\" />\n          <feColorMatrix\n            in=\"shadowBlurOuter1\"\n            values=\"0 0 0 0 0.207843137 0 0 0 0 0.235294118 0 0 0 0 0.274509804 0 0 0 0.8 0\"\n          />\n        </filter>\n      </defs>\n      <g transform=\"matrix(-1 0 0 1 15 0)\">\n        <use filter={`url(#filter-${propsWithDefault.dsId})`} href={`#path-${propsWithDefault.dsId}`} />\n        <path\n          id={`path-${propsWithDefault.dsId}`}\n          d=\"M12 8.5c0-.563-.322-1.014-.772-1.304L3 2v8h7.563l.003-.007A1.497 1.497 0 0 0 12 8.5\"\n        />\n      </g>\n    </svg>\n  </StyledBubbleArrow>\n);\n\nconst BubbleArrowSender: React.ComponentType<DSChatBubbleT.InternalProps> = (propsWithDefault) => (\n  <StyledBubbleArrow\n    data-theming-type={BUBBLE_TYPES.SENDER}\n    getOwnerProps={() => propsWithDefault}\n    getOwnerPropsArguments={() => ({ isRecipientArrow: false })}\n  >\n    <svg width=\"0.692rem\" height=\"0.615rem\" viewBox=\"0 0 9 8\" aria-hidden=\"true\">\n      <g stroke=\"none\" strokeWidth=\"1\" fillRule=\"evenodd\">\n        <path d=\"M9,6.5 C9,5.9373169 8.6782751,5.4856453 8.2282104,5.196228 C8.2286673,5.1967363 0,0 0,0 L0,8 L7.5627441,8 L7.5658569,7.9933472 C8.3630371,7.9580688 9,7.3058472 9,6.5 Z\"></path>\n      </g>\n    </svg>\n  </StyledBubbleArrow>\n);\n\nexport const ChatBubbleArrow: React.ComponentType<DSChatBubbleT.InternalProps> = (propsWithDefault) => {\n  const { type } = propsWithDefault;\n  if (type === BUBBLE_TYPES.RECIPIENT) return <BubbleArrowRecipient {...propsWithDefault} />;\n  return <BubbleArrowSender {...propsWithDefault} />;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsCf,SAQE,KARF;AAtCR,SAAS,QAAQ,WAAW;AAE5B,SAAS,cAAc,mBAAmB,wBAAwB;AAGlE,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAKlC,MAAM,+BAA+B;AAAA;AAAA;AAAA;AAKrC,MAAM,oBAAoB,OAAO,OAAO;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA,UAES,CAAC,UACP,MAAM,mBAAmB,MAAM,aAAa,YACxC,MAAM,MAAM,OAAO,QAAQ,KAAK,IAChC,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA,IACnC,CAAC,UAAU;AACX,MAAI,MAAM,mBAAmB,MAAM,aAAa,UAAW,QAAO;AAClE,SAAO;AACT,CAAC;AAAA;AAGH,MAAM,uBAAyE,CAAC,qBAC9E;AAAA,EAAC;AAAA;AAAA,IACC,qBAAmB,aAAa;AAAA,IAChC,eAAe,MAAM;AAAA,IACrB,wBAAwB,OAAO,EAAE,kBAAkB,KAAK;AAAA,IAExD,+BAAC,SAAI,OAAM,WAAU,QAAO,WAAU,SAAQ,aAAY,eAAY,QACpE;AAAA,0BAAC,UACC;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,UAAU,iBAAiB,IAAI;AAAA,UACnC,OAAM;AAAA,UACN,QAAO;AAAA,UACP,GAAE;AAAA,UACF,GAAE;AAAA,UACF,aAAY;AAAA,UAEZ;AAAA,gCAAC,cAAS,IAAG,OAAM,IAAG,OAAM,IAAG,eAAc,QAAO,sBAAqB;AAAA,YACzE,oBAAC,oBAAe,IAAG,sBAAqB,QAAO,oBAAmB,cAAa,OAAM;AAAA,YACrF;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,QAAO;AAAA;AAAA,YACT;AAAA;AAAA;AAAA,MACF,GACF;AAAA,MACA,qBAAC,OAAE,WAAU,yBACX;AAAA,4BAAC,SAAI,QAAQ,eAAe,iBAAiB,IAAI,KAAK,MAAM,SAAS,iBAAiB,IAAI,IAAI;AAAA,QAC9F;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,QAAQ,iBAAiB,IAAI;AAAA,YACjC,GAAE;AAAA;AAAA,QACJ;AAAA,SACF;AAAA,OACF;AAAA;AACF;AAGF,MAAM,oBAAsE,CAAC,qBAC3E;AAAA,EAAC;AAAA;AAAA,IACC,qBAAmB,aAAa;AAAA,IAChC,eAAe,MAAM;AAAA,IACrB,wBAAwB,OAAO,EAAE,kBAAkB,MAAM;AAAA,IAEzD,8BAAC,SAAI,OAAM,YAAW,QAAO,YAAW,SAAQ,WAAU,eAAY,QACpE,8BAAC,OAAE,QAAO,QAAO,aAAY,KAAI,UAAS,WACxC,8BAAC,UAAK,GAAE,2KAA0K,GACpL,GACF;AAAA;AACF;AAGK,MAAM,kBAAoE,CAAC,qBAAqB;AACrG,QAAM,EAAE,KAAK,IAAI;AACjB,MAAI,SAAS,aAAa,UAAW,QAAO,oBAAC,wBAAsB,GAAG,kBAAkB;AACxF,SAAO,oBAAC,qBAAmB,GAAG,kBAAkB;AAClD;",
   "names": []
 }

package/dist/esm/constants/index.js

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+const DSChatBubbleName = "DSBubble";
+const DSChatBubbleArrowName = "DSBubbleArrow";
+const BUBBLE_TYPES = {
+  SENDER: "SENDER",
+  RECIPIENT: "RECIPIENT",
+  DELIMITER: "DELIMITER",
+  SYSTEM: "SYSTEM"
+};
+const CHAT_BUBBLE_SLOTS = {
+  WRAPPER: "wrapper",
+  HEADER: "header",
+  HEADER_LEFT: "header-left",
+  HEADER_RIGHT: "header-right",
+  BODY_WRAPPER: "body-wrapper",
+  ERROR_MESSAGE: "error-message",
+  HELP_MESSAGE: "help-message",
+  ARROW: "arrow",
+  COLORED_BUBBLE: "colored-bubble"
+};
+const CHAT_BUBBLE_DATA_TESTID = {
+  ...slotObjectToDataTestIds(DSChatBubbleName, CHAT_BUBBLE_SLOTS),
+  WRAPPER: "ds-chat-bubble",
+  HEADER_LEFT: "chat-bubble-title",
+  BODY_WRAPPER: "chat-bubble-body",
+  HEADER_RIGHT: "chat-bubble-time",
+  ERROR_MESSAGE: "chat-bubble-error-message",
+  HELP_MESSAGE: "chat-bubble-help-message"
+};
+export {
+  BUBBLE_TYPES,
+  CHAT_BUBBLE_DATA_TESTID,
+  CHAT_BUBBLE_SLOTS,
+  DSChatBubbleArrowName,
+  DSChatBubbleName
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSChatBubbleName = 'DSBubble';\nexport const DSChatBubbleArrowName = 'DSBubbleArrow';\n\nexport const BUBBLE_TYPES = {\n  SENDER: 'SENDER',\n  RECIPIENT: 'RECIPIENT',\n  DELIMITER: 'DELIMITER',\n  SYSTEM: 'SYSTEM',\n} as const;\n\nexport const CHAT_BUBBLE_SLOTS = {\n  WRAPPER: 'wrapper',\n  HEADER: 'header',\n  HEADER_LEFT: 'header-left',\n  HEADER_RIGHT: 'header-right',\n  BODY_WRAPPER: 'body-wrapper',\n  ERROR_MESSAGE: 'error-message',\n  HELP_MESSAGE: 'help-message',\n  ARROW: 'arrow',\n  COLORED_BUBBLE: 'colored-bubble',\n} as const;\n\nexport const CHAT_BUBBLE_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSChatBubbleName, CHAT_BUBBLE_SLOTS),\n  WRAPPER: 'ds-chat-bubble',\n  HEADER_LEFT: 'chat-bubble-title',\n  BODY_WRAPPER: 'chat-bubble-body',\n  HEADER_RIGHT: 'chat-bubble-time',\n  ERROR_MESSAGE: 'chat-bubble-error-message',\n  HELP_MESSAGE: 'chat-bubble-help-message',\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,mBAAmB;AACzB,MAAM,wBAAwB;AAE9B,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,WAAW;AAAA,EACX,QAAQ;AACV;AAEO,MAAM,oBAAoB;AAAA,EAC/B,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,cAAc;AAAA,EACd,OAAO;AAAA,EACP,gBAAgB;AAClB;AAEO,MAAM,0BAA0B;AAAA,EACrC,GAAG,wBAAwB,kBAAkB,iBAAiB;AAAA,EAC9D,SAAS;AAAA,EACT,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,cAAc;AAChB;",
+  "names": []
+}

package/dist/esm/index.js

@@ -1,12 +1,20 @@
 import * as React from "react";
 import { ChatBubble, ChatBubbleWithSchema } from "./ChatBubble.js";
-import { BUBBLE_TYPES } from "./react-desc-prop-types.js";
-import { ChatBubbleDataTestIds } from "./ChatBubbleDataTestIds.js";
+import {
+  CHAT_BUBBLE_DATA_TESTID,
+  CHAT_BUBBLE_DATA_TESTID as CHAT_BUBBLE_DATA_TESTID2,
+  BUBBLE_TYPES,
+  DSChatBubbleName,
+  CHAT_BUBBLE_SLOTS
+} from "./constants/index.js";
 export * from "./styled.js";
 export {
   BUBBLE_TYPES,
+  CHAT_BUBBLE_DATA_TESTID2 as CHAT_BUBBLE_DATA_TESTID,
+  CHAT_BUBBLE_SLOTS,
   ChatBubble,
-  ChatBubbleDataTestIds,
-  ChatBubbleWithSchema
+  CHAT_BUBBLE_DATA_TESTID as ChatBubbleDataTestIds,
+  ChatBubbleWithSchema,
+  DSChatBubbleName
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatBubble, ChatBubbleWithSchema } from './ChatBubble.js';\nexport { BUBBLE_TYPES, type DSChatBubbleT } from './react-desc-prop-types.js';\nexport { ChatBubbleDataTestIds } from './ChatBubbleDataTestIds.js';\nexport * from './styled.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,4BAA4B;AACjD,SAAS,oBAAwC;AACjD,SAAS,6BAA6B;AACtC,cAAc;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatBubble, ChatBubbleWithSchema } from './ChatBubble.js';\nexport { type DSChatBubbleT } from './react-desc-prop-types.js';\nexport {\n  CHAT_BUBBLE_DATA_TESTID as ChatBubbleDataTestIds, // LEGACY EXPORT\n  CHAT_BUBBLE_DATA_TESTID,\n  BUBBLE_TYPES,\n  DSChatBubbleName,\n  CHAT_BUBBLE_SLOTS,\n} from './constants/index.js';\nexport * from './styled.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,4BAA4B;AAEjD;AAAA,EAC6B;AAAA,EAC3B,2BAAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,cAAc;",
+  "names": ["CHAT_BUBBLE_DATA_TESTID"]
 }