@elliemae/ds-chat-bubble 3.70.0-next.7 → 3.70.0-next.8

package/dist/cjs/ChatBubble.js

@@ -29,7 +29,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var ChatBubble_exports = {};
 __export(ChatBubble_exports, {
   ChatBubble: () => ChatBubble,
-  ChatBubbleWithSchema: () => ChatBubbleWithSchema
+  ChatBubbleWithSchema: () => ChatBubbleWithSchema,
+  DSChatBubble: () => DSChatBubble,
+  DSChatBubbleWithSchema: () => DSChatBubbleWithSchema
 });
 module.exports = __toCommonJS(ChatBubble_exports);
 var React = __toESM(require("react"));
@@ -53,21 +55,26 @@ const ChatBubble = (props) => {
     defaultPropsIncludingInstanciatedValues
   );
   (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.BubblePropTypes, import_constants.DSChatBubbleName);
+  const globalProps = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
+  const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
+  const { getOwnerProps, getOwnerPropsArguments } = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault);
   const { dsId, type, title, time, body, errorMessage, helpMessage } = propsWithDefault;
   const bodyParts = import_react.default.useMemo(() => typeof body === "string" ? body.split("\n") : [body], [body]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_styled.StyledWrapper,
     {
+      ...globalProps,
+      ...xstyledProps,
       "data-testid": `${import_constants.CHAT_BUBBLE_DATA_TESTID.WRAPPER}-${dsId}`,
-      getOwnerProps: () => propsWithDefault,
-      getOwnerPropsArguments: () => ({}),
+      getOwnerProps,
+      getOwnerPropsArguments,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           import_styled.StyledColoredBubble,
           {
             "data-theming-type": type,
-            getOwnerProps: () => propsWithDefault,
-            getOwnerPropsArguments: () => ({}),
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                 import_styled.StyledTitleBubble,
@@ -75,15 +82,15 @@ const ChatBubble = (props) => {
                   cols: ["1fr", "auto"],
                   gutter: "xs",
                   alignItems: "flex-end",
-                  getOwnerProps: () => propsWithDefault,
-                  getOwnerPropsArguments: () => ({}),
+                  getOwnerProps,
+                  getOwnerPropsArguments,
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                       import_styled.StyledTitleLeftBubble,
                       {
                         "data-testid": `${import_constants.CHAT_BUBBLE_DATA_TESTID.HEADER_LEFT}-${dsId}`,
-                        getOwnerProps: () => propsWithDefault,
-                        getOwnerPropsArguments: () => ({}),
+                        getOwnerProps,
+                        getOwnerPropsArguments,
                         children: title
                       }
                     ),
@@ -93,8 +100,8 @@ const ChatBubble = (props) => {
                         alignItems: "center",
                         "data-theming-type": type,
                         "data-testid": `${import_constants.CHAT_BUBBLE_DATA_TESTID.HEADER_RIGHT}-${dsId}`,
-                        getOwnerProps: () => propsWithDefault,
-                        getOwnerPropsArguments: () => ({}),
+                        getOwnerProps,
+                        getOwnerPropsArguments,
                         children: time
                       }
                     )
@@ -105,8 +112,8 @@ const ChatBubble = (props) => {
                 import_styled.StyleBodyWrapper,
                 {
                   "data-testid": `${import_constants.CHAT_BUBBLE_DATA_TESTID.BODY_WRAPPER}-${dsId}`,
-                  getOwnerProps: () => propsWithDefault,
-                  getOwnerPropsArguments: () => ({}),
+                  getOwnerProps,
+                  getOwnerPropsArguments,
                   children: bodyParts.map((item, index) => (
                     // eslint-disable-next-line react/no-array-index-key
                     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
@@ -124,8 +131,8 @@ const ChatBubble = (props) => {
           import_styled.StyleErrorMessage,
           {
             "data-testid": `${import_constants.CHAT_BUBBLE_DATA_TESTID.ERROR_MESSAGE}-${dsId}`,
-            getOwnerProps: () => propsWithDefault,
-            getOwnerPropsArguments: () => ({}),
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: ["1fr", "auto"], children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: errorMessage }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.WarningCircleFill, {})
@@ -136,8 +143,8 @@ const ChatBubble = (props) => {
           import_styled.StyleHelpMessage,
           {
             "data-testid": `${import_constants.CHAT_BUBBLE_DATA_TESTID.HELP_MESSAGE}-${dsId}`,
-            getOwnerProps: () => propsWithDefault,
-            getOwnerPropsArguments: () => ({}),
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: helpMessage })
           }
         ) : null
@@ -147,4 +154,6 @@ const ChatBubble = (props) => {
 };
 ChatBubble.displayName = import_constants.DSChatBubbleName;
 const ChatBubbleWithSchema = (0, import_ds_props_helpers.describe)(ChatBubble);
+const DSChatBubble = ChatBubble;
+const DSChatBubbleWithSchema = ChatBubbleWithSchema;
 //# sourceMappingURL=ChatBubble.js.map

package/dist/cjs/ChatBubble.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ChatBubble.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2Cf;AA3CR,mBAAkB;AAClB,8BAAuF;AACvF,sBAAkC;AAClC,qBAAqB;AACrB,iBAAoB;AACpB,oBASO;AACP,mCAAkE;AAClE,6BAAgC;AAChC,uBAA0D;AAE1D,MAAM,aAAuD,CAAC,UAAU;AACtE,QAAM,0CAA0C,aAAAA,QAAM,QAAQ,MAAM;AAClE,UAAMC,QAAO,MAAM,QAAQ,sBAAkB,gBAAI,CAAC,CAAC;AACnD,WAAO,EAAE,GAAG,2CAAc,MAAAA,MAAK;AAAA,EACjC,GAAG,CAAC,MAAM,IAAI,CAAC;AACf,QAAM,uBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,8DAA+B,kBAAkB,8CAAiB,iCAAgB;AAElF,QAAM,EAAE,MAAM,MAAM,OAAO,MAAM,MAAM,cAAc,YAAY,IAAI;AACrE,QAAM,YAAY,aAAAD,QAAM,QAAQ,MAAO,OAAO,SAAS,WAAW,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,GAAI,CAAC,IAAI,CAAC;AACpG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,GAAG,yCAAwB,OAAO,IAAI,IAAI;AAAA,MACvD,eAAe,MAAM;AAAA,MACrB,wBAAwB,OAAO,CAAC;AAAA,MAEhC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,qBAAmB;AAAA,YACnB,eAAe,MAAM;AAAA,YACrB,wBAAwB,OAAO,CAAC;AAAA,YAEhC;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,CAAC,OAAO,MAAM;AAAA,kBACpB,QAAO;AAAA,kBACP,YAAW;AAAA,kBACX,eAAe,MAAM;AAAA,kBACrB,wBAAwB,OAAO,CAAC;AAAA,kBAEhC;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACC,eAAa,GAAG,yCAAwB,WAAW,IAAI,IAAI;AAAA,wBAC3D,eAAe,MAAM;AAAA,wBACrB,wBAAwB,OAAO,CAAC;AAAA,wBAE/B;AAAA;AAAA,oBACH;AAAA,oBACA;AAAA,sBAAC;AAAA;AAAA,wBACC,YAAW;AAAA,wBACX,qBAAmB;AAAA,wBACnB,eAAa,GAAG,yCAAwB,YAAY,IAAI,IAAI;AAAA,wBAC5D,eAAe,MAAM;AAAA,wBACrB,wBAAwB,OAAO,CAAC;AAAA,wBAE/B;AAAA;AAAA,oBACH;AAAA;AAAA;AAAA,cACF;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAa,GAAG,yCAAwB,YAAY,IAAI,IAAI;AAAA,kBAC5D,eAAe,MAAM;AAAA,kBACrB,wBAAwB,OAAO,CAAC;AAAA,kBAE/B,oBAAU,IAAI,CAAC,MAAM;AAAA;AAAA,oBAEpB,6CAAC,aAAAA,QAAM,UAAN,EACE;AAAA;AAAA,sBACA,QAAQ,UAAU,SAAS,IAAI,4CAAC,QAAG,IAAK;AAAA,yBAFtB,iBAAiB,KAAK,IAAI,IAAI,EAGnD;AAAA,mBACD;AAAA;AAAA,cACH;AAAA,cACA,4CAAC,0CAAiB,GAAG,kBAAkB;AAAA;AAAA;AAAA,QACzC;AAAA,QACC,eACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,GAAG,yCAAwB,aAAa,IAAI,IAAI;AAAA,YAC7D,eAAe,MAAM;AAAA,YACrB,wBAAwB,OAAO,CAAC;AAAA,YAEhC,uDAAC,uBAAK,MAAM,CAAC,OAAO,MAAM,GACxB;AAAA,0DAAC,UAAM,wBAAa;AAAA,cACpB,4CAAC,qCAAkB;AAAA,eACrB;AAAA;AAAA,QACF,IACE;AAAA,QACH,cACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,GAAG,yCAAwB,YAAY,IAAI,IAAI;AAAA,YAC5D,eAAe,MAAM;AAAA,YACrB,wBAAwB,OAAO,CAAC;AAAA,YAEhC,sDAAC,UAAM,uBAAY;AAAA;AAAA,QACrB,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;AAEA,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU;",
+  "sourcesContent": ["import React from 'react';\nimport {\n  describe,\n  useValidateTypescriptPropTypes,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n} 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 globalProps = useGetGlobalAttributes(propsWithDefault);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps<DSChatBubbleT.Props>(propsWithDefault);\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      {...globalProps}\n      {...xstyledProps}\n      // legacy dynamic data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n      data-testid={`${CHAT_BUBBLE_DATA_TESTID.WRAPPER}-${dsId}`}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledColoredBubble\n        data-theming-type={type}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledTitleBubble\n          cols={['1fr', 'auto']}\n          gutter=\"xs\"\n          alignItems=\"flex-end\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <StyledTitleLeftBubble\n            // legacy dynamic data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n            data-testid={`${CHAT_BUBBLE_DATA_TESTID.HEADER_LEFT}-${dsId}`}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {title}\n          </StyledTitleLeftBubble>\n          <StyledTitleRightBubble\n            alignItems=\"center\"\n            data-theming-type={type}\n            // legacy dynamic data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n            data-testid={`${CHAT_BUBBLE_DATA_TESTID.HEADER_RIGHT}-${dsId}`}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {time}\n          </StyledTitleRightBubble>\n        </StyledTitleBubble>\n        <StyleBodyWrapper\n          // legacy dynamic data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n          data-testid={`${CHAT_BUBBLE_DATA_TESTID.BODY_WRAPPER}-${dsId}`}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={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          // legacy dynamic data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n          data-testid={`${CHAT_BUBBLE_DATA_TESTID.ERROR_MESSAGE}-${dsId}`}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <Grid cols={['1fr', 'auto']}>\n            <span>{errorMessage}</span>\n            <WarningCircleFill />\n          </Grid>\n        </StyleErrorMessage>\n      ) : null}\n      {helpMessage ? (\n        <StyleHelpMessage\n          // legacy dynamic data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n          data-testid={`${CHAT_BUBBLE_DATA_TESTID.HELP_MESSAGE}-${dsId}`}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <span>{helpMessage}</span>\n        </StyleHelpMessage>\n      ) : null}\n    </StyledWrapper>\n  );\n};\n\nChatBubble.displayName = DSChatBubbleName;\nconst ChatBubbleWithSchema = describe(ChatBubble);\n\n// DS-prefixed canonical names (modern Dimsum convention) \u2014 ChatBubble kept as alias for backwards compat\nconst DSChatBubble = ChatBubble;\nconst DSChatBubbleWithSchema = ChatBubbleWithSchema;\n\nexport { ChatBubble, ChatBubbleWithSchema, DSChatBubble, DSChatBubbleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React", "dsId"]
 }

package/dist/cjs/ChatBubbleArrow.js

@@ -34,6 +34,7 @@ module.exports = __toCommonJS(ChatBubbleArrow_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_system = require("@elliemae/ds-system");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_constants = require("./constants/index.js");
 const senderArrowPositionStyles = import_ds_system.css`
   right: -0.692rem;
@@ -55,57 +56,63 @@ const StyledBubbleArrow = (0, import_ds_system.styled)("div", {
   return senderArrowPositionStyles;
 }}
 `;
-const BubbleArrowRecipient = (propsWithDefault) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  StyledBubbleArrow,
-  {
-    "data-theming-type": import_constants.BUBBLE_TYPES.RECIPIENT,
-    getOwnerProps: () => propsWithDefault,
-    getOwnerPropsArguments: () => ({ isRecipientArrow: true }),
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "1.15rem", height: "1.07rem", viewBox: "0 0 15 14", "aria-hidden": "true", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "filter",
-        {
-          id: `filter-${propsWithDefault.dsId}`,
-          width: "211.1%",
-          height: "225%",
-          x: "-55.6%",
-          y: "-50%",
-          filterUnits: "objectBoundingBox",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feOffset", { dx: "2.3", dy: "1.2", in: "SourceAlpha", result: "shadowOffsetOuter1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feGaussianBlur", { in: "shadowOffsetOuter1", result: "shadowBlurOuter1", stdDeviation: "1.5" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("g", { transform: "matrix(-1 0 0 1 15 0)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("use", { filter: `url(#filter-${propsWithDefault.dsId})`, href: `#path-${propsWithDefault.dsId}` }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "path",
+const BubbleArrowRecipient = (propsWithDefault) => {
+  const { getOwnerProps } = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledBubbleArrow,
+    {
+      "data-theming-type": import_constants.BUBBLE_TYPES.RECIPIENT,
+      getOwnerProps,
+      getOwnerPropsArguments: () => ({ isRecipientArrow: true }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "1.15rem", height: "1.07rem", viewBox: "0 0 15 14", "aria-hidden": "true", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "filter",
           {
-            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"
+            id: `filter-${propsWithDefault.dsId}`,
+            width: "211.1%",
+            height: "225%",
+            x: "-55.6%",
+            y: "-50%",
+            filterUnits: "objectBoundingBox",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feOffset", { dx: "2.3", dy: "1.2", in: "SourceAlpha", result: "shadowOffsetOuter1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feGaussianBlur", { in: "shadowOffsetOuter1", result: "shadowBlurOuter1", stdDeviation: "1.5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("g", { transform: "matrix(-1 0 0 1 15 0)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("use", { filter: `url(#filter-${propsWithDefault.dsId})`, href: `#path-${propsWithDefault.dsId}` }),
+          /* @__PURE__ */ (0, import_jsx_runtime.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 BubbleArrowSender = (propsWithDefault) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  StyledBubbleArrow,
-  {
-    "data-theming-type": import_constants.BUBBLE_TYPES.SENDER,
-    getOwnerProps: () => propsWithDefault,
-    getOwnerPropsArguments: () => ({ isRecipientArrow: false }),
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "0.692rem", height: "0.615rem", viewBox: "0 0 9 8", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { stroke: "none", strokeWidth: "1", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime.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 BubbleArrowSender = (propsWithDefault) => {
+  const { getOwnerProps } = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledBubbleArrow,
+    {
+      "data-theming-type": import_constants.BUBBLE_TYPES.SENDER,
+      getOwnerProps,
+      getOwnerPropsArguments: () => ({ isRecipientArrow: false }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "0.692rem", height: "0.615rem", viewBox: "0 0 9 8", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { stroke: "none", strokeWidth: "1", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime.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 === import_constants.BUBBLE_TYPES.RECIPIENT) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BubbleArrowRecipient, { ...propsWithDefault });

package/dist/cjs/ChatBubbleArrow.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ChatBubbleArrow.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCf;AAtCR,uBAA4B;AAE5B,uBAAkE;AAGlE,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAKlC,MAAM,+BAA+B;AAAA;AAAA;AAAA;AAKrC,MAAM,wBAAoB,yBAAO,OAAO;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA,UAES,CAAC,UACP,MAAM,mBAAmB,MAAM,8BAAa,YACxC,MAAM,MAAM,OAAO,QAAQ,KAAK,IAChC,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA,IACnC,CAAC,UAAU;AACX,MAAI,MAAM,mBAAmB,MAAM,8BAAa,UAAW,QAAO;AAClE,SAAO;AACT,CAAC;AAAA;AAGH,MAAM,uBAAyE,CAAC,qBAC9E;AAAA,EAAC;AAAA;AAAA,IACC,qBAAmB,8BAAa;AAAA,IAChC,eAAe,MAAM;AAAA,IACrB,wBAAwB,OAAO,EAAE,kBAAkB,KAAK;AAAA,IAExD,uDAAC,SAAI,OAAM,WAAU,QAAO,WAAU,SAAQ,aAAY,eAAY,QACpE;AAAA,kDAAC,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,wDAAC,cAAS,IAAG,OAAM,IAAG,OAAM,IAAG,eAAc,QAAO,sBAAqB;AAAA,YACzE,4CAAC,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,6CAAC,OAAE,WAAU,yBACX;AAAA,oDAAC,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,8BAAa;AAAA,IAChC,eAAe,MAAM;AAAA,IACrB,wBAAwB,OAAO,EAAE,kBAAkB,MAAM;AAAA,IAEzD,sDAAC,SAAI,OAAM,YAAW,QAAO,YAAW,SAAQ,WAAU,eAAY,QACpE,sDAAC,OAAE,QAAO,QAAO,aAAY,KAAI,UAAS,WACxC,sDAAC,UAAK,GAAE,2KAA0K,GACpL,GACF;AAAA;AACF;AAGK,MAAM,kBAAoE,CAAC,qBAAqB;AACrG,QAAM,EAAE,KAAK,IAAI;AACjB,MAAI,SAAS,8BAAa,UAAW,QAAO,4CAAC,wBAAsB,GAAG,kBAAkB;AACxF,SAAO,4CAAC,qBAAmB,GAAG,kBAAkB;AAClD;",
+  "sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\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  const { getOwnerProps } = useOwnerProps<DSChatBubbleT.Props>(propsWithDefault);\n  return (\n    <StyledBubbleArrow\n      data-theming-type={BUBBLE_TYPES.RECIPIENT}\n      getOwnerProps={getOwnerProps}\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};\n\nconst BubbleArrowSender: React.ComponentType<DSChatBubbleT.InternalProps> = (propsWithDefault) => {\n  const { getOwnerProps } = useOwnerProps<DSChatBubbleT.Props>(propsWithDefault);\n  return (\n    <StyledBubbleArrow\n      data-theming-type={BUBBLE_TYPES.SENDER}\n      getOwnerProps={getOwnerProps}\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};\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCb;AAzCV,uBAA4B;AAC5B,8BAA8B;AAE9B,uBAAkE;AAGlE,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAKlC,MAAM,+BAA+B;AAAA;AAAA;AAAA;AAKrC,MAAM,wBAAoB,yBAAO,OAAO;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA,UAES,CAAC,UACP,MAAM,mBAAmB,MAAM,8BAAa,YACxC,MAAM,MAAM,OAAO,QAAQ,KAAK,IAChC,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA,IACnC,CAAC,UAAU;AACX,MAAI,MAAM,mBAAmB,MAAM,8BAAa,UAAW,QAAO;AAClE,SAAO;AACT,CAAC;AAAA;AAGH,MAAM,uBAAyE,CAAC,qBAAqB;AACnG,QAAM,EAAE,cAAc,QAAI,uCAAmC,gBAAgB;AAC7E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,qBAAmB,8BAAa;AAAA,MAChC;AAAA,MACA,wBAAwB,OAAO,EAAE,kBAAkB,KAAK;AAAA,MAExD,uDAAC,SAAI,OAAM,WAAU,QAAO,WAAU,SAAQ,aAAY,eAAY,QACpE;AAAA,oDAAC,UACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,UAAU,iBAAiB,IAAI;AAAA,YACnC,OAAM;AAAA,YACN,QAAO;AAAA,YACP,GAAE;AAAA,YACF,GAAE;AAAA,YACF,aAAY;AAAA,YAEZ;AAAA,0DAAC,cAAS,IAAG,OAAM,IAAG,OAAM,IAAG,eAAc,QAAO,sBAAqB;AAAA,cACzE,4CAAC,oBAAe,IAAG,sBAAqB,QAAO,oBAAmB,cAAa,OAAM;AAAA,cACrF;AAAA,gBAAC;AAAA;AAAA,kBACC,IAAG;AAAA,kBACH,QAAO;AAAA;AAAA,cACT;AAAA;AAAA;AAAA,QACF,GACF;AAAA,QACA,6CAAC,OAAE,WAAU,yBACX;AAAA,sDAAC,SAAI,QAAQ,eAAe,iBAAiB,IAAI,KAAK,MAAM,SAAS,iBAAiB,IAAI,IAAI;AAAA,UAC9F;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,QAAQ,iBAAiB,IAAI;AAAA,cACjC,GAAE;AAAA;AAAA,UACJ;AAAA,WACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,oBAAsE,CAAC,qBAAqB;AAChG,QAAM,EAAE,cAAc,QAAI,uCAAmC,gBAAgB;AAC7E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,qBAAmB,8BAAa;AAAA,MAChC;AAAA,MACA,wBAAwB,OAAO,EAAE,kBAAkB,MAAM;AAAA,MAEzD,sDAAC,SAAI,OAAM,YAAW,QAAO,YAAW,SAAQ,WAAU,eAAY,QACpE,sDAAC,OAAE,QAAO,QAAO,aAAY,KAAI,UAAS,WACxC,sDAAC,UAAK,GAAE,2KAA0K,GACpL,GACF;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,kBAAoE,CAAC,qBAAqB;AACrG,QAAM,EAAE,KAAK,IAAI;AACjB,MAAI,SAAS,8BAAa,UAAW,QAAO,4CAAC,wBAAsB,GAAG,kBAAkB;AACxF,SAAO,4CAAC,qBAAmB,GAAG,kBAAkB;AAClD;",
   "names": []
 }

package/dist/cjs/index.js

@@ -17,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
@@ -30,16 +29,24 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   BUBBLE_TYPES: () => import_constants.BUBBLE_TYPES,
+  BubblePropTypes: () => import_react_desc_prop_types2.BubblePropTypes,
   CHAT_BUBBLE_DATA_TESTID: () => import_constants.CHAT_BUBBLE_DATA_TESTID,
   CHAT_BUBBLE_SLOTS: () => import_constants.CHAT_BUBBLE_SLOTS,
   ChatBubble: () => import_ChatBubble.ChatBubble,
   ChatBubbleDataTestIds: () => import_constants.CHAT_BUBBLE_DATA_TESTID,
   ChatBubbleWithSchema: () => import_ChatBubble.ChatBubbleWithSchema,
-  DSChatBubbleName: () => import_constants.DSChatBubbleName
+  DSChatBubble: () => import_ChatBubble.DSChatBubble,
+  DSChatBubbleArrowName: () => import_constants.DSChatBubbleArrowName,
+  DSChatBubbleName: () => import_constants.DSChatBubbleName,
+  DSChatBubbleWithSchema: () => import_ChatBubble.DSChatBubbleWithSchema,
+  StyleBodyWrapper: () => import_styled.StyleBodyWrapper,
+  StyledTitleLeftBubble: () => import_styled.StyledTitleLeftBubble,
+  StyledTitleRightBubble: () => import_styled.StyledTitleRightBubble
 });
 module.exports = __toCommonJS(index_exports);
 var React = __toESM(require("react"));
 var import_ChatBubble = require("./ChatBubble.js");
+var import_react_desc_prop_types2 = require("./react-desc-prop-types.js");
 var import_constants = require("./constants/index.js");
-__reExport(index_exports, require("./styled.js"), module.exports);
+var import_styled = require("./styled.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAiD;AAEjD,uBAMO;AACP,0BAAc,wBATd;",
-  "names": []
+  "sourcesContent": ["export { ChatBubble, ChatBubbleWithSchema, DSChatBubble, DSChatBubbleWithSchema } from './ChatBubble.js';\nexport { type DSChatBubbleT } from './react-desc-prop-types.js';\nexport { BubblePropTypes } from './react-desc-prop-types.js';\nexport {\n  CHAT_BUBBLE_DATA_TESTID as ChatBubbleDataTestIds, // LEGACY EXPORT\n  CHAT_BUBBLE_DATA_TESTID,\n  CHAT_BUBBLE_SLOTS,\n  BUBBLE_TYPES,\n  DSChatBubbleName,\n  DSChatBubbleArrowName,\n} from './constants/index.js';\nexport { StyledTitleLeftBubble, StyledTitleRightBubble, StyleBodyWrapper } from './styled.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAuF;AAEvF,IAAAA,gCAAgC;AAChC,uBAOO;AACP,oBAAgF;",
+  "names": ["import_react_desc_prop_types"]
 }

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { type DSPropTypesSchema, type GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type React from 'react';\n\nimport { BUBBLE_TYPES, DSChatBubbleName, CHAT_BUBBLE_SLOTS } from './constants/index.js';\n\nexport declare namespace DSChatBubbleT {\n  export type BubbleTypesKeys = keyof typeof BUBBLE_TYPES;\n\n  export type BubbleTypesValues = (typeof BUBBLE_TYPES)[BubbleTypesKeys];\n\n  export interface DefaultProps {\n    type: BubbleTypesValues;\n    title: string;\n    body: string | React.ReactNode;\n    time: string;\n  }\n\n  export interface OptionalProps {\n    errorMessage?: string | React.ReactNode;\n    helpMessage?: string | React.ReactNode;\n  }\n\n  export interface RequiredProps {\n    dsId: string | number;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSChatBubbleT.DefaultProps = {\n  type: BUBBLE_TYPES.SENDER,\n  title: '',\n  body: '',\n  time: '',\n};\n\nexport const BubblePropTypes: DSPropTypesSchema<DSChatBubbleT.Props> = {\n  ...getPropsPerSlotPropTypes(DSChatBubbleName, CHAT_BUBBLE_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  dsId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n    .description('Unique id for bubble')\n    .defaultValue('a randomly generated (on mount) uid'),\n  type: PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER])\n    .isRequired.description('Define bubble type ')\n    .defaultValue(defaultProps.type),\n  title: PropTypes.string.description('Title of the bubble'),\n  time: PropTypes.string.isRequired.description('Time of the bubble'),\n  body: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired.description('Bubble content'),\n  errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description(\n    'Error message to display at bottom of the bubble',\n  ),\n  helpMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description(\n    'Help message to display at bottom of the bubble',\n  ),\n};\n\nexport const propsArrowBubble = {\n  type: PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER]).isRequired.defaultValue(defaultProps.type),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,IAAAA,2BAKO;AAGP,uBAAkE;AAoC3D,MAAM,eAA2C;AAAA,EACtD,MAAM,8BAAa;AAAA,EACnB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AACR;AAEO,MAAM,kBAA0D;AAAA,EACrE,OAAG,mDAAyB,mCAAkB,kCAAiB;AAAA,EAC/D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,mCAAU,UAAU,CAAC,mCAAU,QAAQ,mCAAU,MAAM,CAAC,EAC3D,YAAY,sBAAsB,EAClC,aAAa,qCAAqC;AAAA,EACrD,MAAM,mCAAU,MAAM,CAAC,8BAAa,WAAW,8BAAa,MAAM,CAAC,EAChE,WAAW,YAAY,qBAAqB,EAC5C,aAAa,aAAa,IAAI;AAAA,EACjC,OAAO,mCAAU,OAAO,YAAY,qBAAqB;AAAA,EACzD,MAAM,mCAAU,OAAO,WAAW,YAAY,oBAAoB;AAAA,EAClE,MAAM,mCAAU,UAAU,CAAC,mCAAU,QAAQ,mCAAU,OAAO,CAAC,EAAE,WAAW,YAAY,gBAAgB;AAAA,EACxG,cAAc,mCAAU,UAAU,CAAC,mCAAU,QAAQ,mCAAU,OAAO,CAAC,EAAE;AAAA,IACvE;AAAA,EACF;AAAA,EACA,aAAa,mCAAU,UAAU,CAAC,mCAAU,QAAQ,mCAAU,OAAO,CAAC,EAAE;AAAA,IACtE;AAAA,EACF;AACF;AAEO,MAAM,mBAAmB;AAAA,EAC9B,MAAM,mCAAU,MAAM,CAAC,8BAAa,WAAW,8BAAa,MAAM,CAAC,EAAE,WAAW,aAAa,aAAa,IAAI;AAChH;",
+  "sourcesContent": ["import { type DSPropTypesSchema, type GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\n\nimport { BUBBLE_TYPES, DSChatBubbleName, CHAT_BUBBLE_SLOTS } from './constants/index.js';\n\nexport declare namespace DSChatBubbleT {\n  export type BubbleTypesKeys = keyof typeof BUBBLE_TYPES;\n\n  export type BubbleTypesValues = (typeof BUBBLE_TYPES)[BubbleTypesKeys];\n\n  // hand-written per-slot function argument map \u2014 one entry per slot in CHAT_BUBBLE_SLOTS.\n  // The slot prefix uses the component `name` (DSBubble) per checkNamingConvention; see KNOWN_INTENTIONAL_DEVIATIONS.md.\n  export type SlotFunctionArguments = {\n    dsBubbleWrapper: () => object;\n    dsBubbleHeader: () => object;\n    dsBubbleHeaderLeft: () => object;\n    dsBubbleHeaderRight: () => object;\n    dsBubbleBodyWrapper: () => object;\n    dsBubbleErrorMessage: () => object;\n    dsBubbleHelpMessage: () => object;\n    dsBubbleArrow: () => object;\n    dsBubbleColoredBubble: () => object;\n  };\n\n  export interface DefaultProps {\n    type: BubbleTypesValues;\n    title: string;\n    body: string | React.ReactNode;\n    time: string;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSChatBubbleName, typeof CHAT_BUBBLE_SLOTS> {\n    errorMessage?: string | React.ReactNode;\n    helpMessage?: string | React.ReactNode;\n  }\n\n  export interface RequiredProps {\n    dsId: string | number;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSChatBubbleT.DefaultProps = {\n  type: BUBBLE_TYPES.SENDER,\n  title: '',\n  body: '',\n  time: '',\n};\n\nexport const BubblePropTypes: DSPropTypesSchema<DSChatBubbleT.Props> = {\n  ...getPropsPerSlotPropTypes(DSChatBubbleName, CHAT_BUBBLE_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  dsId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n    .description('Unique id for bubble')\n    .defaultValue('a randomly generated (on mount) uid'),\n  type: PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER])\n    .isRequired.description('Define bubble type ')\n    .defaultValue(defaultProps.type),\n  title: PropTypes.string.description('Title of the bubble'),\n  time: PropTypes.string.isRequired.description('Time of the bubble'),\n  body: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired.description('Bubble content'),\n  errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description(\n    'Error message to display at bottom of the bubble',\n  ),\n  helpMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description(\n    'Help message to display at bottom of the bubble',\n  ),\n};\n\nexport const propsArrowBubble = {\n  type: PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER]).isRequired.defaultValue(defaultProps.type),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,IAAAA,2BAKO;AAIP,uBAAkE;AAmD3D,MAAM,eAA2C;AAAA,EACtD,MAAM,8BAAa;AAAA,EACnB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AACR;AAEO,MAAM,kBAA0D;AAAA,EACrE,OAAG,mDAAyB,mCAAkB,kCAAiB;AAAA,EAC/D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,mCAAU,UAAU,CAAC,mCAAU,QAAQ,mCAAU,MAAM,CAAC,EAC3D,YAAY,sBAAsB,EAClC,aAAa,qCAAqC;AAAA,EACrD,MAAM,mCAAU,MAAM,CAAC,8BAAa,WAAW,8BAAa,MAAM,CAAC,EAChE,WAAW,YAAY,qBAAqB,EAC5C,aAAa,aAAa,IAAI;AAAA,EACjC,OAAO,mCAAU,OAAO,YAAY,qBAAqB;AAAA,EACzD,MAAM,mCAAU,OAAO,WAAW,YAAY,oBAAoB;AAAA,EAClE,MAAM,mCAAU,UAAU,CAAC,mCAAU,QAAQ,mCAAU,OAAO,CAAC,EAAE,WAAW,YAAY,gBAAgB;AAAA,EACxG,cAAc,mCAAU,UAAU,CAAC,mCAAU,QAAQ,mCAAU,OAAO,CAAC,EAAE;AAAA,IACvE;AAAA,EACF;AAAA,EACA,aAAa,mCAAU,UAAU,CAAC,mCAAU,QAAQ,mCAAU,OAAO,CAAC,EAAE;AAAA,IACtE;AAAA,EACF;AACF;AAEO,MAAM,mBAAmB;AAAA,EAC9B,MAAM,mCAAU,MAAM,CAAC,8BAAa,WAAW,8BAAa,MAAM,CAAC,EAAE,WAAW,aAAa,aAAa,IAAI;AAChH;",
   "names": ["import_ds_props_helpers"]
 }

package/dist/cjs/styled.js

@@ -48,7 +48,9 @@ const wrapRules = import_ds_system.css`
 `;
 const StyledWrapper = (0, import_ds_system.styled)("div", {
   name: import_constants.DSChatBubbleName,
-  slot: import_constants.CHAT_BUBBLE_SLOTS.WRAPPER
+  slot: import_constants.CHAT_BUBBLE_SLOTS.WRAPPER,
+  // legacy dynamic data-testid `ds-chat-bubble-${dsId}` is preserved via inline JSX data-testid
+  preserveLegacyDataTestId: true
 })`
   min-width: 224px;
   border-radius: 10px;
@@ -65,7 +67,9 @@ const StyledTitleBubble = (0, import_ds_system.styled)(import_ds_grid.Grid, {
 `;
 const StyledTitleLeftBubble = (0, import_ds_system.styled)("div", {
   name: import_constants.DSChatBubbleName,
-  slot: import_constants.CHAT_BUBBLE_SLOTS.HEADER_LEFT
+  slot: import_constants.CHAT_BUBBLE_SLOTS.HEADER_LEFT,
+  // legacy dynamic data-testid `chat-bubble-title-${dsId}` is preserved via inline JSX data-testid
+  preserveLegacyDataTestId: true
 })`
   font-size: 1rem;
   font-weight: 600;
@@ -73,7 +77,9 @@ const StyledTitleLeftBubble = (0, import_ds_system.styled)("div", {
 `;
 const StyledTitleRightBubble = (0, import_ds_system.styled)(import_ds_grid.Grid, {
   name: import_constants.DSChatBubbleName,
-  slot: import_constants.CHAT_BUBBLE_SLOTS.HEADER_RIGHT
+  slot: import_constants.CHAT_BUBBLE_SLOTS.HEADER_RIGHT,
+  // legacy dynamic data-testid `chat-bubble-time-${dsId}` is preserved via inline JSX data-testid
+  preserveLegacyDataTestId: true
 })`
   font-size: 1rem;
   font-weight: 400;
@@ -82,7 +88,9 @@ const StyledTitleRightBubble = (0, import_ds_system.styled)(import_ds_grid.Grid,
 `;
 const StyleBodyWrapper = (0, import_ds_system.styled)("div", {
   name: import_constants.DSChatBubbleName,
-  slot: import_constants.CHAT_BUBBLE_SLOTS.BODY_WRAPPER
+  slot: import_constants.CHAT_BUBBLE_SLOTS.BODY_WRAPPER,
+  // legacy dynamic data-testid `chat-bubble-body-${dsId}` is preserved via inline JSX data-testid
+  preserveLegacyDataTestId: true
 })`
   font-size: 1rem;
   font-weight: 400;
@@ -92,7 +100,9 @@ const StyleBodyWrapper = (0, 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
+  slot: import_constants.CHAT_BUBBLE_SLOTS.ERROR_MESSAGE,
+  // legacy dynamic data-testid `chat-bubble-error-message-${dsId}` is preserved via inline JSX data-testid
+  preserveLegacyDataTestId: true
 })`
   font-size: 0.923rem;
   font-weight: 400;
@@ -115,7 +125,9 @@ const StyleErrorMessage = (0, import_ds_system.styled)("div", {
 `;
 const StyleHelpMessage = (0, import_ds_system.styled)(StyleErrorMessage, {
   name: import_constants.DSChatBubbleName,
-  slot: import_constants.CHAT_BUBBLE_SLOTS.HELP_MESSAGE
+  slot: import_constants.CHAT_BUBBLE_SLOTS.HELP_MESSAGE,
+  // legacy dynamic data-testid `chat-bubble-help-message-${dsId}` is preserved via inline JSX data-testid
+  preserveLegacyDataTestId: true
 })`
   font-size: 0.923rem;
   line-height: 1.15;

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, 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;",
+  "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  // legacy dynamic data-testid `ds-chat-bubble-${dsId}` is preserved via inline JSX data-testid\n  preserveLegacyDataTestId: true,\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  // legacy dynamic data-testid `chat-bubble-title-${dsId}` is preserved via inline JSX data-testid\n  preserveLegacyDataTestId: true,\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  // legacy dynamic data-testid `chat-bubble-time-${dsId}` is preserved via inline JSX data-testid\n  preserveLegacyDataTestId: true,\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  // legacy dynamic data-testid `chat-bubble-body-${dsId}` is preserved via inline JSX data-testid\n  preserveLegacyDataTestId: true,\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  // legacy dynamic data-testid `chat-bubble-error-message-${dsId}` is preserved via inline JSX data-testid\n  preserveLegacyDataTestId: true,\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  // legacy dynamic data-testid `chat-bubble-help-message-${dsId}` is preserved via inline JSX data-testid\n  preserveLegacyDataTestId: true,\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;AAAA;AAAA,EAExB,0BAA0B;AAC5B,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;AAAA;AAAA,EAExB,0BAA0B;AAC5B,CAAC;AAAA;AAAA;AAAA,IAGG,SAAS;AAAA;AAEN,MAAM,6BAAyB,yBAAO,qBAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,mCAAkB;AAAA;AAAA,EAExB,0BAA0B;AAC5B,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;AAAA;AAAA,EAExB,0BAA0B;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQM,MAAM,wBAAoB,yBAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,mCAAkB;AAAA;AAAA,EAExB,0BAA0B;AAC5B,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;AAAA;AAAA,EAExB,0BAA0B;AAC5B,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

@@ -1,7 +1,14 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
-import { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import {
+  describe,
+  useValidateTypescriptPropTypes,
+  useMemoMergePropsWithDefault,
+  useOwnerProps,
+  useGetGlobalAttributes,
+  useGetXstyledProps
+} from "@elliemae/ds-props-helpers";
 import { WarningCircleFill } from "@elliemae/ds-icons";
 import { Grid } from "@elliemae/ds-grid";
 import { uid } from "uid";
@@ -28,21 +35,26 @@ const ChatBubble = (props) => {
     defaultPropsIncludingInstanciatedValues
   );
   useValidateTypescriptPropTypes(propsWithDefault, BubblePropTypes, DSChatBubbleName);
+  const globalProps = useGetGlobalAttributes(propsWithDefault);
+  const xstyledProps = useGetXstyledProps(propsWithDefault);
+  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);
   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,
     {
+      ...globalProps,
+      ...xstyledProps,
       "data-testid": `${CHAT_BUBBLE_DATA_TESTID.WRAPPER}-${dsId}`,
-      getOwnerProps: () => propsWithDefault,
-      getOwnerPropsArguments: () => ({}),
+      getOwnerProps,
+      getOwnerPropsArguments,
       children: [
         /* @__PURE__ */ jsxs(
           StyledColoredBubble,
           {
             "data-theming-type": type,
-            getOwnerProps: () => propsWithDefault,
-            getOwnerPropsArguments: () => ({}),
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: [
               /* @__PURE__ */ jsxs(
                 StyledTitleBubble,
@@ -50,15 +62,15 @@ const ChatBubble = (props) => {
                   cols: ["1fr", "auto"],
                   gutter: "xs",
                   alignItems: "flex-end",
-                  getOwnerProps: () => propsWithDefault,
-                  getOwnerPropsArguments: () => ({}),
+                  getOwnerProps,
+                  getOwnerPropsArguments,
                   children: [
                     /* @__PURE__ */ jsx(
                       StyledTitleLeftBubble,
                       {
                         "data-testid": `${CHAT_BUBBLE_DATA_TESTID.HEADER_LEFT}-${dsId}`,
-                        getOwnerProps: () => propsWithDefault,
-                        getOwnerPropsArguments: () => ({}),
+                        getOwnerProps,
+                        getOwnerPropsArguments,
                         children: title
                       }
                     ),
@@ -68,8 +80,8 @@ const ChatBubble = (props) => {
                         alignItems: "center",
                         "data-theming-type": type,
                         "data-testid": `${CHAT_BUBBLE_DATA_TESTID.HEADER_RIGHT}-${dsId}`,
-                        getOwnerProps: () => propsWithDefault,
-                        getOwnerPropsArguments: () => ({}),
+                        getOwnerProps,
+                        getOwnerPropsArguments,
                         children: time
                       }
                     )
@@ -80,8 +92,8 @@ const ChatBubble = (props) => {
                 StyleBodyWrapper,
                 {
                   "data-testid": `${CHAT_BUBBLE_DATA_TESTID.BODY_WRAPPER}-${dsId}`,
-                  getOwnerProps: () => propsWithDefault,
-                  getOwnerPropsArguments: () => ({}),
+                  getOwnerProps,
+                  getOwnerPropsArguments,
                   children: bodyParts.map((item, index) => (
                     // eslint-disable-next-line react/no-array-index-key
                     /* @__PURE__ */ jsxs(React2.Fragment, { children: [
@@ -99,8 +111,8 @@ const ChatBubble = (props) => {
           StyleErrorMessage,
           {
             "data-testid": `${CHAT_BUBBLE_DATA_TESTID.ERROR_MESSAGE}-${dsId}`,
-            getOwnerProps: () => propsWithDefault,
-            getOwnerPropsArguments: () => ({}),
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: /* @__PURE__ */ jsxs(Grid, { cols: ["1fr", "auto"], children: [
               /* @__PURE__ */ jsx("span", { children: errorMessage }),
               /* @__PURE__ */ jsx(WarningCircleFill, {})
@@ -111,8 +123,8 @@ const ChatBubble = (props) => {
           StyleHelpMessage,
           {
             "data-testid": `${CHAT_BUBBLE_DATA_TESTID.HELP_MESSAGE}-${dsId}`,
-            getOwnerProps: () => propsWithDefault,
-            getOwnerPropsArguments: () => ({}),
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: /* @__PURE__ */ jsx("span", { children: helpMessage })
           }
         ) : null
@@ -122,8 +134,12 @@ const ChatBubble = (props) => {
 };
 ChatBubble.displayName = DSChatBubbleName;
 const ChatBubbleWithSchema = describe(ChatBubble);
+const DSChatBubble = ChatBubble;
+const DSChatBubbleWithSchema = ChatBubbleWithSchema;
 export {
   ChatBubble,
-  ChatBubbleWithSchema
+  ChatBubbleWithSchema,
+  DSChatBubble,
+  DSChatBubbleWithSchema
 };
 //# sourceMappingURL=ChatBubble.js.map

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 { 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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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport {\n  describe,\n  useValidateTypescriptPropTypes,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n} 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 globalProps = useGetGlobalAttributes(propsWithDefault);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps<DSChatBubbleT.Props>(propsWithDefault);\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      {...globalProps}\n      {...xstyledProps}\n      // legacy dynamic data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n      data-testid={`${CHAT_BUBBLE_DATA_TESTID.WRAPPER}-${dsId}`}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledColoredBubble\n        data-theming-type={type}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledTitleBubble\n          cols={['1fr', 'auto']}\n          gutter=\"xs\"\n          alignItems=\"flex-end\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <StyledTitleLeftBubble\n            // legacy dynamic data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n            data-testid={`${CHAT_BUBBLE_DATA_TESTID.HEADER_LEFT}-${dsId}`}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {title}\n          </StyledTitleLeftBubble>\n          <StyledTitleRightBubble\n            alignItems=\"center\"\n            data-theming-type={type}\n            // legacy dynamic data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n            data-testid={`${CHAT_BUBBLE_DATA_TESTID.HEADER_RIGHT}-${dsId}`}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {time}\n          </StyledTitleRightBubble>\n        </StyledTitleBubble>\n        <StyleBodyWrapper\n          // legacy dynamic data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n          data-testid={`${CHAT_BUBBLE_DATA_TESTID.BODY_WRAPPER}-${dsId}`}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={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          // legacy dynamic data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n          data-testid={`${CHAT_BUBBLE_DATA_TESTID.ERROR_MESSAGE}-${dsId}`}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <Grid cols={['1fr', 'auto']}>\n            <span>{errorMessage}</span>\n            <WarningCircleFill />\n          </Grid>\n        </StyleErrorMessage>\n      ) : null}\n      {helpMessage ? (\n        <StyleHelpMessage\n          // legacy dynamic data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n          data-testid={`${CHAT_BUBBLE_DATA_TESTID.HELP_MESSAGE}-${dsId}`}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <span>{helpMessage}</span>\n        </StyleHelpMessage>\n      ) : null}\n    </StyledWrapper>\n  );\n};\n\nChatBubble.displayName = DSChatBubbleName;\nconst ChatBubbleWithSchema = describe(ChatBubble);\n\n// DS-prefixed canonical names (modern Dimsum convention) \u2014 ChatBubble kept as alias for backwards compat\nconst DSChatBubble = ChatBubble;\nconst DSChatBubbleWithSchema = ChatBubbleWithSchema;\n\nexport { ChatBubble, ChatBubbleWithSchema, DSChatBubble, DSChatBubbleWithSchema };\n"],
+  "mappings": "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",
   "names": ["React", "dsId"]
 }

package/dist/esm/ChatBubbleArrow.js

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { styled, css } from "@elliemae/ds-system";
+import { useOwnerProps } from "@elliemae/ds-props-helpers";
 import { BUBBLE_TYPES, CHAT_BUBBLE_SLOTS, DSChatBubbleName } from "./constants/index.js";
 const senderArrowPositionStyles = css`
   right: -0.692rem;
@@ -22,57 +23,63 @@ const StyledBubbleArrow = styled("div", {
   return senderArrowPositionStyles;
 }}
 `;
-const BubbleArrowRecipient = (propsWithDefault) => /* @__PURE__ */ jsx(
-  StyledBubbleArrow,
-  {
-    "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",
+const BubbleArrowRecipient = (propsWithDefault) => {
+  const { getOwnerProps } = useOwnerProps(propsWithDefault);
+  return /* @__PURE__ */ jsx(
+    StyledBubbleArrow,
+    {
+      "data-theming-type": BUBBLE_TYPES.RECIPIENT,
+      getOwnerProps,
+      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: `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"
+            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 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 BubbleArrowSender = (propsWithDefault) => {
+  const { getOwnerProps } = useOwnerProps(propsWithDefault);
+  return /* @__PURE__ */ jsx(
+    StyledBubbleArrow,
+    {
+      "data-theming-type": BUBBLE_TYPES.SENDER,
+      getOwnerProps,
+      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 });

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 { 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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\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  const { getOwnerProps } = useOwnerProps<DSChatBubbleT.Props>(propsWithDefault);\n  return (\n    <StyledBubbleArrow\n      data-theming-type={BUBBLE_TYPES.RECIPIENT}\n      getOwnerProps={getOwnerProps}\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};\n\nconst BubbleArrowSender: React.ComponentType<DSChatBubbleT.InternalProps> = (propsWithDefault) => {\n  const { getOwnerProps } = useOwnerProps<DSChatBubbleT.Props>(propsWithDefault);\n  return (\n    <StyledBubbleArrow\n      data-theming-type={BUBBLE_TYPES.SENDER}\n      getOwnerProps={getOwnerProps}\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};\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;ACyCb,SAQE,KARF;AAzCV,SAAS,QAAQ,WAAW;AAC5B,SAAS,qBAAqB;AAE9B,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,qBAAqB;AACnG,QAAM,EAAE,cAAc,IAAI,cAAmC,gBAAgB;AAC7E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,qBAAmB,aAAa;AAAA,MAChC;AAAA,MACA,wBAAwB,OAAO,EAAE,kBAAkB,KAAK;AAAA,MAExD,+BAAC,SAAI,OAAM,WAAU,QAAO,WAAU,SAAQ,aAAY,eAAY,QACpE;AAAA,4BAAC,UACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,UAAU,iBAAiB,IAAI;AAAA,YACnC,OAAM;AAAA,YACN,QAAO;AAAA,YACP,GAAE;AAAA,YACF,GAAE;AAAA,YACF,aAAY;AAAA,YAEZ;AAAA,kCAAC,cAAS,IAAG,OAAM,IAAG,OAAM,IAAG,eAAc,QAAO,sBAAqB;AAAA,cACzE,oBAAC,oBAAe,IAAG,sBAAqB,QAAO,oBAAmB,cAAa,OAAM;AAAA,cACrF;AAAA,gBAAC;AAAA;AAAA,kBACC,IAAG;AAAA,kBACH,QAAO;AAAA;AAAA,cACT;AAAA;AAAA;AAAA,QACF,GACF;AAAA,QACA,qBAAC,OAAE,WAAU,yBACX;AAAA,8BAAC,SAAI,QAAQ,eAAe,iBAAiB,IAAI,KAAK,MAAM,SAAS,iBAAiB,IAAI,IAAI;AAAA,UAC9F;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,QAAQ,iBAAiB,IAAI;AAAA,cACjC,GAAE;AAAA;AAAA,UACJ;AAAA,WACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,oBAAsE,CAAC,qBAAqB;AAChG,QAAM,EAAE,cAAc,IAAI,cAAmC,gBAAgB;AAC7E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,qBAAmB,aAAa;AAAA,MAChC;AAAA,MACA,wBAAwB,OAAO,EAAE,kBAAkB,MAAM;AAAA,MAEzD,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;AAAA,EACF;AAEJ;AAEO,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/index.js

@@ -1,20 +1,29 @@
 import * as React from "react";
-import { ChatBubble, ChatBubbleWithSchema } from "./ChatBubble.js";
+import { ChatBubble, ChatBubbleWithSchema, DSChatBubble, DSChatBubbleWithSchema } from "./ChatBubble.js";
+import { BubblePropTypes } from "./react-desc-prop-types.js";
 import {
   CHAT_BUBBLE_DATA_TESTID,
   CHAT_BUBBLE_DATA_TESTID as CHAT_BUBBLE_DATA_TESTID2,
+  CHAT_BUBBLE_SLOTS,
   BUBBLE_TYPES,
   DSChatBubbleName,
-  CHAT_BUBBLE_SLOTS
+  DSChatBubbleArrowName
 } from "./constants/index.js";
-export * from "./styled.js";
+import { StyledTitleLeftBubble, StyledTitleRightBubble, StyleBodyWrapper } from "./styled.js";
 export {
   BUBBLE_TYPES,
+  BubblePropTypes,
   CHAT_BUBBLE_DATA_TESTID2 as CHAT_BUBBLE_DATA_TESTID,
   CHAT_BUBBLE_SLOTS,
   ChatBubble,
   CHAT_BUBBLE_DATA_TESTID as ChatBubbleDataTestIds,
   ChatBubbleWithSchema,
-  DSChatBubbleName
+  DSChatBubble,
+  DSChatBubbleArrowName,
+  DSChatBubbleName,
+  DSChatBubbleWithSchema,
+  StyleBodyWrapper,
+  StyledTitleLeftBubble,
+  StyledTitleRightBubble
 };
 //# 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 { 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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatBubble, ChatBubbleWithSchema, DSChatBubble, DSChatBubbleWithSchema } from './ChatBubble.js';\nexport { type DSChatBubbleT } from './react-desc-prop-types.js';\nexport { BubblePropTypes } from './react-desc-prop-types.js';\nexport {\n  CHAT_BUBBLE_DATA_TESTID as ChatBubbleDataTestIds, // LEGACY EXPORT\n  CHAT_BUBBLE_DATA_TESTID,\n  CHAT_BUBBLE_SLOTS,\n  BUBBLE_TYPES,\n  DSChatBubbleName,\n  DSChatBubbleArrowName,\n} from './constants/index.js';\nexport { StyledTitleLeftBubble, StyledTitleRightBubble, StyleBodyWrapper } from './styled.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,sBAAsB,cAAc,8BAA8B;AAEvF,SAAS,uBAAuB;AAChC;AAAA,EAC6B;AAAA,EAC3B,2BAAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB,wBAAwB,wBAAwB;",
   "names": ["CHAT_BUBBLE_DATA_TESTID"]
 }

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { type DSPropTypesSchema, type GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type React from 'react';\n\nimport { BUBBLE_TYPES, DSChatBubbleName, CHAT_BUBBLE_SLOTS } from './constants/index.js';\n\nexport declare namespace DSChatBubbleT {\n  export type BubbleTypesKeys = keyof typeof BUBBLE_TYPES;\n\n  export type BubbleTypesValues = (typeof BUBBLE_TYPES)[BubbleTypesKeys];\n\n  export interface DefaultProps {\n    type: BubbleTypesValues;\n    title: string;\n    body: string | React.ReactNode;\n    time: string;\n  }\n\n  export interface OptionalProps {\n    errorMessage?: string | React.ReactNode;\n    helpMessage?: string | React.ReactNode;\n  }\n\n  export interface RequiredProps {\n    dsId: string | number;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSChatBubbleT.DefaultProps = {\n  type: BUBBLE_TYPES.SENDER,\n  title: '',\n  body: '',\n  time: '',\n};\n\nexport const BubblePropTypes: DSPropTypesSchema<DSChatBubbleT.Props> = {\n  ...getPropsPerSlotPropTypes(DSChatBubbleName, CHAT_BUBBLE_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  dsId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n    .description('Unique id for bubble')\n    .defaultValue('a randomly generated (on mount) uid'),\n  type: PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER])\n    .isRequired.description('Define bubble type ')\n    .defaultValue(defaultProps.type),\n  title: PropTypes.string.description('Title of the bubble'),\n  time: PropTypes.string.isRequired.description('Time of the bubble'),\n  body: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired.description('Bubble content'),\n  errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description(\n    'Error message to display at bottom of the bubble',\n  ),\n  helpMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description(\n    'Help message to display at bottom of the bubble',\n  ),\n};\n\nexport const propsArrowBubble = {\n  type: PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER]).isRequired.defaultValue(defaultProps.type),\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,cAAc,kBAAkB,yBAAyB;AAoC3D,MAAM,eAA2C;AAAA,EACtD,MAAM,aAAa;AAAA,EACnB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AACR;AAEO,MAAM,kBAA0D;AAAA,EACrE,GAAG,yBAAyB,kBAAkB,iBAAiB;AAAA,EAC/D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAC3D,YAAY,sBAAsB,EAClC,aAAa,qCAAqC;AAAA,EACrD,MAAM,UAAU,MAAM,CAAC,aAAa,WAAW,aAAa,MAAM,CAAC,EAChE,WAAW,YAAY,qBAAqB,EAC5C,aAAa,aAAa,IAAI;AAAA,EACjC,OAAO,UAAU,OAAO,YAAY,qBAAqB;AAAA,EACzD,MAAM,UAAU,OAAO,WAAW,YAAY,oBAAoB;AAAA,EAClE,MAAM,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC,EAAE,WAAW,YAAY,gBAAgB;AAAA,EACxG,cAAc,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC,EAAE;AAAA,IACvE;AAAA,EACF;AAAA,EACA,aAAa,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC,EAAE;AAAA,IACtE;AAAA,EACF;AACF;AAEO,MAAM,mBAAmB;AAAA,EAC9B,MAAM,UAAU,MAAM,CAAC,aAAa,WAAW,aAAa,MAAM,CAAC,EAAE,WAAW,aAAa,aAAa,IAAI;AAChH;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { type DSPropTypesSchema, type GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\n\nimport { BUBBLE_TYPES, DSChatBubbleName, CHAT_BUBBLE_SLOTS } from './constants/index.js';\n\nexport declare namespace DSChatBubbleT {\n  export type BubbleTypesKeys = keyof typeof BUBBLE_TYPES;\n\n  export type BubbleTypesValues = (typeof BUBBLE_TYPES)[BubbleTypesKeys];\n\n  // hand-written per-slot function argument map \u2014 one entry per slot in CHAT_BUBBLE_SLOTS.\n  // The slot prefix uses the component `name` (DSBubble) per checkNamingConvention; see KNOWN_INTENTIONAL_DEVIATIONS.md.\n  export type SlotFunctionArguments = {\n    dsBubbleWrapper: () => object;\n    dsBubbleHeader: () => object;\n    dsBubbleHeaderLeft: () => object;\n    dsBubbleHeaderRight: () => object;\n    dsBubbleBodyWrapper: () => object;\n    dsBubbleErrorMessage: () => object;\n    dsBubbleHelpMessage: () => object;\n    dsBubbleArrow: () => object;\n    dsBubbleColoredBubble: () => object;\n  };\n\n  export interface DefaultProps {\n    type: BubbleTypesValues;\n    title: string;\n    body: string | React.ReactNode;\n    time: string;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSChatBubbleName, typeof CHAT_BUBBLE_SLOTS> {\n    errorMessage?: string | React.ReactNode;\n    helpMessage?: string | React.ReactNode;\n  }\n\n  export interface RequiredProps {\n    dsId: string | number;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSChatBubbleT.DefaultProps = {\n  type: BUBBLE_TYPES.SENDER,\n  title: '',\n  body: '',\n  time: '',\n};\n\nexport const BubblePropTypes: DSPropTypesSchema<DSChatBubbleT.Props> = {\n  ...getPropsPerSlotPropTypes(DSChatBubbleName, CHAT_BUBBLE_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  dsId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n    .description('Unique id for bubble')\n    .defaultValue('a randomly generated (on mount) uid'),\n  type: PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER])\n    .isRequired.description('Define bubble type ')\n    .defaultValue(defaultProps.type),\n  title: PropTypes.string.description('Title of the bubble'),\n  time: PropTypes.string.isRequired.description('Time of the bubble'),\n  body: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired.description('Bubble content'),\n  errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description(\n    'Error message to display at bottom of the bubble',\n  ),\n  helpMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description(\n    'Help message to display at bottom of the bubble',\n  ),\n};\n\nexport const propsArrowBubble = {\n  type: PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER]).isRequired.defaultValue(defaultProps.type),\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,SAAS,cAAc,kBAAkB,yBAAyB;AAmD3D,MAAM,eAA2C;AAAA,EACtD,MAAM,aAAa;AAAA,EACnB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AACR;AAEO,MAAM,kBAA0D;AAAA,EACrE,GAAG,yBAAyB,kBAAkB,iBAAiB;AAAA,EAC/D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAC3D,YAAY,sBAAsB,EAClC,aAAa,qCAAqC;AAAA,EACrD,MAAM,UAAU,MAAM,CAAC,aAAa,WAAW,aAAa,MAAM,CAAC,EAChE,WAAW,YAAY,qBAAqB,EAC5C,aAAa,aAAa,IAAI;AAAA,EACjC,OAAO,UAAU,OAAO,YAAY,qBAAqB;AAAA,EACzD,MAAM,UAAU,OAAO,WAAW,YAAY,oBAAoB;AAAA,EAClE,MAAM,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC,EAAE,WAAW,YAAY,gBAAgB;AAAA,EACxG,cAAc,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC,EAAE;AAAA,IACvE;AAAA,EACF;AAAA,EACA,aAAa,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC,EAAE;AAAA,IACtE;AAAA,EACF;AACF;AAEO,MAAM,mBAAmB;AAAA,EAC9B,MAAM,UAAU,MAAM,CAAC,aAAa,WAAW,aAAa,MAAM,CAAC,EAAE,WAAW,aAAa,aAAa,IAAI;AAChH;",
   "names": []
 }

package/dist/esm/styled.js

@@ -8,7 +8,9 @@ const wrapRules = css`
 `;
 const StyledWrapper = styled("div", {
   name: DSChatBubbleName,
-  slot: CHAT_BUBBLE_SLOTS.WRAPPER
+  slot: CHAT_BUBBLE_SLOTS.WRAPPER,
+  // legacy dynamic data-testid `ds-chat-bubble-${dsId}` is preserved via inline JSX data-testid
+  preserveLegacyDataTestId: true
 })`
   min-width: 224px;
   border-radius: 10px;
@@ -25,7 +27,9 @@ const StyledTitleBubble = styled(Grid, {
 `;
 const StyledTitleLeftBubble = styled("div", {
   name: DSChatBubbleName,
-  slot: CHAT_BUBBLE_SLOTS.HEADER_LEFT
+  slot: CHAT_BUBBLE_SLOTS.HEADER_LEFT,
+  // legacy dynamic data-testid `chat-bubble-title-${dsId}` is preserved via inline JSX data-testid
+  preserveLegacyDataTestId: true
 })`
   font-size: 1rem;
   font-weight: 600;
@@ -33,7 +37,9 @@ const StyledTitleLeftBubble = styled("div", {
 `;
 const StyledTitleRightBubble = styled(Grid, {
   name: DSChatBubbleName,
-  slot: CHAT_BUBBLE_SLOTS.HEADER_RIGHT
+  slot: CHAT_BUBBLE_SLOTS.HEADER_RIGHT,
+  // legacy dynamic data-testid `chat-bubble-time-${dsId}` is preserved via inline JSX data-testid
+  preserveLegacyDataTestId: true
 })`
   font-size: 1rem;
   font-weight: 400;
@@ -42,7 +48,9 @@ const StyledTitleRightBubble = styled(Grid, {
 `;
 const StyleBodyWrapper = styled("div", {
   name: DSChatBubbleName,
-  slot: CHAT_BUBBLE_SLOTS.BODY_WRAPPER
+  slot: CHAT_BUBBLE_SLOTS.BODY_WRAPPER,
+  // legacy dynamic data-testid `chat-bubble-body-${dsId}` is preserved via inline JSX data-testid
+  preserveLegacyDataTestId: true
 })`
   font-size: 1rem;
   font-weight: 400;
@@ -52,7 +60,9 @@ const StyleBodyWrapper = styled("div", {
 `;
 const StyleErrorMessage = styled("div", {
   name: DSChatBubbleName,
-  slot: CHAT_BUBBLE_SLOTS.ERROR_MESSAGE
+  slot: CHAT_BUBBLE_SLOTS.ERROR_MESSAGE,
+  // legacy dynamic data-testid `chat-bubble-error-message-${dsId}` is preserved via inline JSX data-testid
+  preserveLegacyDataTestId: true
 })`
   font-size: 0.923rem;
   font-weight: 400;
@@ -75,7 +85,9 @@ const StyleErrorMessage = styled("div", {
 `;
 const StyleHelpMessage = styled(StyleErrorMessage, {
   name: DSChatBubbleName,
-  slot: CHAT_BUBBLE_SLOTS.HELP_MESSAGE
+  slot: CHAT_BUBBLE_SLOTS.HELP_MESSAGE,
+  // legacy dynamic data-testid `chat-bubble-help-message-${dsId}` is preserved via inline JSX data-testid
+  preserveLegacyDataTestId: true
 })`
   font-size: 0.923rem;
   line-height: 1.15;

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,WAAW;AAC5B,SAAS,YAAY;AACrB,SAAS,cAAc,mBAAmB,wBAAwB;AAElE,MAAM,YAAY;AAAA;AAAA;AAAA;AAKX,MAAM,gBAAgB,OAAO,OAAO;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,IAGG,SAAS;AAAA;AAIN,MAAM,oBAAoB,OAAO,MAAM;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,wBAAwB,OAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,IAGG,SAAS;AAAA;AAEN,MAAM,yBAAyB,OAAO,MAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA,WAIU,CAAC,UAAW,MAAM,mBAAmB,MAAM,aAAa,SAAS,SAAS,SAAU;AAAA;AAGxF,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQM,MAAM,oBAAoB,OAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,kBAAkB;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,mBAAmB,OAAO,mBAAmB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,kBAAkB;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,sBAAsB,OAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKG,CAAC,UACD,MAAM,mBAAmB,MAAM,aAAa,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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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  // legacy dynamic data-testid `ds-chat-bubble-${dsId}` is preserved via inline JSX data-testid\n  preserveLegacyDataTestId: true,\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  // legacy dynamic data-testid `chat-bubble-title-${dsId}` is preserved via inline JSX data-testid\n  preserveLegacyDataTestId: true,\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  // legacy dynamic data-testid `chat-bubble-time-${dsId}` is preserved via inline JSX data-testid\n  preserveLegacyDataTestId: true,\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  // legacy dynamic data-testid `chat-bubble-body-${dsId}` is preserved via inline JSX data-testid\n  preserveLegacyDataTestId: true,\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  // legacy dynamic data-testid `chat-bubble-error-message-${dsId}` is preserved via inline JSX data-testid\n  preserveLegacyDataTestId: true,\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  // legacy dynamic data-testid `chat-bubble-help-message-${dsId}` is preserved via inline JSX data-testid\n  preserveLegacyDataTestId: true,\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,WAAW;AAC5B,SAAS,YAAY;AACrB,SAAS,cAAc,mBAAmB,wBAAwB;AAElE,MAAM,YAAY;AAAA;AAAA;AAAA;AAKX,MAAM,gBAAgB,OAAO,OAAO;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,kBAAkB;AAAA;AAAA,EAExB,0BAA0B;AAC5B,CAAC;AAAA;AAAA;AAAA,IAGG,SAAS;AAAA;AAIN,MAAM,oBAAoB,OAAO,MAAM;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,wBAAwB,OAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,kBAAkB;AAAA;AAAA,EAExB,0BAA0B;AAC5B,CAAC;AAAA;AAAA;AAAA,IAGG,SAAS;AAAA;AAEN,MAAM,yBAAyB,OAAO,MAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,kBAAkB;AAAA;AAAA,EAExB,0BAA0B;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA,WAIU,CAAC,UAAW,MAAM,mBAAmB,MAAM,aAAa,SAAS,SAAS,SAAU;AAAA;AAGxF,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,kBAAkB;AAAA;AAAA,EAExB,0BAA0B;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQM,MAAM,oBAAoB,OAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,kBAAkB;AAAA;AAAA,EAExB,0BAA0B;AAC5B,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,mBAAmB,OAAO,mBAAmB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,kBAAkB;AAAA;AAAA,EAExB,0BAA0B;AAC5B,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,sBAAsB,OAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKG,CAAC,UACD,MAAM,mBAAmB,MAAM,aAAa,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/types/ChatBubble.d.ts

@@ -2,4 +2,6 @@ import React from 'react';
 import { type DSChatBubbleT } from './react-desc-prop-types.js';
 declare const ChatBubble: React.ComponentType<DSChatBubbleT.Props>;
 declare const ChatBubbleWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSChatBubbleT.Props>;
-export { ChatBubble, ChatBubbleWithSchema };
+declare const DSChatBubble: React.FunctionComponent<DSChatBubbleT.Props>;
+declare const DSChatBubbleWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSChatBubbleT.Props>;
+export { ChatBubble, ChatBubbleWithSchema, DSChatBubble, DSChatBubbleWithSchema };

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
-export { ChatBubble, ChatBubbleWithSchema } from './ChatBubble.js';
+export { ChatBubble, ChatBubbleWithSchema, DSChatBubble, DSChatBubbleWithSchema } from './ChatBubble.js';
 export { type DSChatBubbleT } from './react-desc-prop-types.js';
+export { BubblePropTypes } from './react-desc-prop-types.js';
 export { CHAT_BUBBLE_DATA_TESTID as ChatBubbleDataTestIds, // LEGACY EXPORT
-CHAT_BUBBLE_DATA_TESTID, BUBBLE_TYPES, DSChatBubbleName, CHAT_BUBBLE_SLOTS, } from './constants/index.js';
-export * from './styled.js';
+CHAT_BUBBLE_DATA_TESTID, CHAT_BUBBLE_SLOTS, BUBBLE_TYPES, DSChatBubbleName, DSChatBubbleArrowName, } from './constants/index.js';
+export { StyledTitleLeftBubble, StyledTitleRightBubble, StyleBodyWrapper } from './styled.js';

package/dist/types/react-desc-prop-types.d.ts

@@ -1,16 +1,28 @@
 import { type DSPropTypesSchema, type GlobalAttributesT } from '@elliemae/ds-props-helpers';
+import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
 import type React from 'react';
-import { BUBBLE_TYPES } from './constants/index.js';
+import { BUBBLE_TYPES, DSChatBubbleName, CHAT_BUBBLE_SLOTS } from './constants/index.js';
 export declare namespace DSChatBubbleT {
     type BubbleTypesKeys = keyof typeof BUBBLE_TYPES;
     type BubbleTypesValues = (typeof BUBBLE_TYPES)[BubbleTypesKeys];
+    type SlotFunctionArguments = {
+        dsBubbleWrapper: () => object;
+        dsBubbleHeader: () => object;
+        dsBubbleHeaderLeft: () => object;
+        dsBubbleHeaderRight: () => object;
+        dsBubbleBodyWrapper: () => object;
+        dsBubbleErrorMessage: () => object;
+        dsBubbleHelpMessage: () => object;
+        dsBubbleArrow: () => object;
+        dsBubbleColoredBubble: () => object;
+    };
     interface DefaultProps {
         type: BubbleTypesValues;
         title: string;
         body: string | React.ReactNode;
         time: string;
     }
-    interface OptionalProps {
+    interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSChatBubbleName, typeof CHAT_BUBBLE_SLOTS> {
         errorMessage?: string | React.ReactNode;
         helpMessage?: string | React.ReactNode;
     }

package/dist/types/tests/DSChatBubble.axe.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSChatBubble.data-testId.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSChatBubble.events.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSChatBubble.exports.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSChatBubble.get-owner-props-arguments.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSChatBubble.keyboard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSChatBubble.pui-7276.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-chat-bubble",
-  "version": "3.70.0-next.7",
+  "version": "3.70.0-next.8",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Chat",
   "files": [
@@ -37,16 +37,17 @@
   },
   "dependencies": {
     "uid": "^2.0.2",
-    "@elliemae/ds-props-helpers": "3.70.0-next.7",
-    "@elliemae/ds-icons": "3.70.0-next.7",
-    "@elliemae/ds-grid": "3.70.0-next.7",
-    "@elliemae/ds-system": "3.70.0-next.7"
+    "@elliemae/ds-grid": "3.70.0-next.8",
+    "@elliemae/ds-icons": "3.70.0-next.8",
+    "@elliemae/ds-props-helpers": "3.70.0-next.8",
+    "@elliemae/ds-system": "3.70.0-next.8",
+    "@elliemae/ds-typescript-helpers": "3.70.0-next.8"
   },
   "devDependencies": {
     "jest": "^30.0.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.70.0-next.7",
-    "@elliemae/ds-test-utils": "3.70.0-next.7"
+    "@elliemae/ds-monorepo-devops": "3.70.0-next.8",
+    "@elliemae/ds-test-utils": "3.70.0-next.8"
   },
   "peerDependencies": {
     "lodash-es": "^4.17.21",