@elliemae/ds-chat-system-message 3.17.0-next.9 → 3.17.0

package/dist/cjs/SystemMessage.js

@@ -43,7 +43,7 @@ const SystemMessage = (props) => {
   const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
   (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.systemMessageProps, import_DSChatSystemMessageDefinitions.DSChatSystemMessageName);
   const { title, time, body } = propsWithDefault;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_style.Wrapper, { rows: ["auto", "auto"], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_style.Wrapper, { rows: ["auto", "auto"], cols: [1], children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_style.Header, { cols: ["1fr", "auto", "1fr"], children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {}),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.Title, { "data-testid": import_ChatSystemMessageDataTestIds.ChatSystemMessageDataTestIds.SYSTEM_MSG_TITLE, children: title }),

package/dist/cjs/SystemMessage.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SystemMessage.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { Wrapper, Header, Title, Time, Message } from './style.js';\nimport type { DSChatSystemMessageT } from './react-desc-prop-types.js';\nimport { systemMessageProps, defaultProps } from './react-desc-prop-types.js';\nimport { ChatSystemMessageDataTestIds } from './ChatSystemMessageDataTestIds.js';\nimport { DSChatSystemMessageName } from './DSChatSystemMessageDefinitions.js';\n\nconst SystemMessage: React.ComponentType<DSChatSystemMessageT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, systemMessageProps, DSChatSystemMessageName);\n\n  const { title, time, body } = propsWithDefault;\n  return (\n    <Wrapper rows={['auto', 'auto']}>\n      <Header cols={['1fr', 'auto', '1fr']}>\n        <span />\n        <Title data-testid={ChatSystemMessageDataTestIds.SYSTEM_MSG_TITLE}>{title}</Title>\n        <Time data-testid={ChatSystemMessageDataTestIds.SYSTEM_MSG_TIME}>{time}</Time>\n      </Header>\n      <Message data-testid={ChatSystemMessageDataTestIds.SYSTEM_MSG_BODY}>{body}</Message>\n    </Wrapper>\n  );\n};\n\nSystemMessage.propTypes = systemMessageProps as WeakValidationMap<unknown>;\nSystemMessage.displayName = DSChatSystemMessageName;\nconst SystemMessageWithSchema = describe(SystemMessage);\nSystemMessageWithSchema.propTypes = systemMessageProps as WeakValidationMap<unknown>;\n\nexport { SystemMessage, SystemMessageWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBjB;AAdN,8BAAuF;AACvF,mBAAsD;AAEtD,mCAAiD;AACjD,0CAA6C;AAC7C,4CAAwC;AAExC,MAAM,gBAAiE,CAAC,UAAU;AAChF,QAAM,uBAAmB,sDAA6B,OAAO,yCAAY;AACzE,8DAA+B,kBAAkB,iDAAoB,6DAAuB;AAE5F,QAAM,EAAE,OAAO,MAAM,KAAK,IAAI;AAC9B,SACE,6CAAC,wBAAQ,MAAM,CAAC,QAAQ,MAAM,GAC5B;AAAA,iDAAC,uBAAO,MAAM,CAAC,OAAO,QAAQ,KAAK,GACjC;AAAA,kDAAC,UAAK;AAAA,MACN,4CAAC,sBAAM,eAAa,iEAA6B,kBAAmB,iBAAM;AAAA,MAC1E,4CAAC,qBAAK,eAAa,iEAA6B,iBAAkB,gBAAK;AAAA,OACzE;AAAA,IACA,4CAAC,wBAAQ,eAAa,iEAA6B,iBAAkB,gBAAK;AAAA,KAC5E;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,8BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { Wrapper, Header, Title, Time, Message } from './style.js';\nimport type { DSChatSystemMessageT } from './react-desc-prop-types.js';\nimport { systemMessageProps, defaultProps } from './react-desc-prop-types.js';\nimport { ChatSystemMessageDataTestIds } from './ChatSystemMessageDataTestIds.js';\nimport { DSChatSystemMessageName } from './DSChatSystemMessageDefinitions.js';\n\nconst SystemMessage: React.ComponentType<DSChatSystemMessageT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, systemMessageProps, DSChatSystemMessageName);\n\n  const { title, time, body } = propsWithDefault;\n  return (\n    <Wrapper rows={['auto', 'auto']} cols={[1]}>\n      <Header cols={['1fr', 'auto', '1fr']}>\n        <span />\n        <Title data-testid={ChatSystemMessageDataTestIds.SYSTEM_MSG_TITLE}>{title}</Title>\n        <Time data-testid={ChatSystemMessageDataTestIds.SYSTEM_MSG_TIME}>{time}</Time>\n      </Header>\n      <Message data-testid={ChatSystemMessageDataTestIds.SYSTEM_MSG_BODY}>{body}</Message>\n    </Wrapper>\n  );\n};\n\nSystemMessage.propTypes = systemMessageProps as WeakValidationMap<unknown>;\nSystemMessage.displayName = DSChatSystemMessageName;\nconst SystemMessageWithSchema = describe(SystemMessage);\nSystemMessageWithSchema.propTypes = systemMessageProps as WeakValidationMap<unknown>;\n\nexport { SystemMessage, SystemMessageWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBjB;AAdN,8BAAuF;AACvF,mBAAsD;AAEtD,mCAAiD;AACjD,0CAA6C;AAC7C,4CAAwC;AAExC,MAAM,gBAAiE,CAAC,UAAU;AAChF,QAAM,uBAAmB,sDAA6B,OAAO,yCAAY;AACzE,8DAA+B,kBAAkB,iDAAoB,6DAAuB;AAE5F,QAAM,EAAE,OAAO,MAAM,KAAK,IAAI;AAC9B,SACE,6CAAC,wBAAQ,MAAM,CAAC,QAAQ,MAAM,GAAG,MAAM,CAAC,CAAC,GACvC;AAAA,iDAAC,uBAAO,MAAM,CAAC,OAAO,QAAQ,KAAK,GACjC;AAAA,kDAAC,UAAK;AAAA,MACN,4CAAC,sBAAM,eAAa,iEAA6B,kBAAmB,iBAAM;AAAA,MAC1E,4CAAC,qBAAK,eAAa,iEAA6B,iBAAkB,gBAAK;AAAA,OACzE;AAAA,IACA,4CAAC,wBAAQ,eAAa,iEAA6B,iBAAkB,gBAAK;AAAA,KAC5E;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,8BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
   "names": []
 }

package/dist/cjs/style.js

@@ -38,6 +38,10 @@ module.exports = __toCommonJS(style_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
+const wrapRule = import_ds_system.css`
+  overflow-wrap: break-word;
+  white-space: 'pre-wrap';
+`;
 const Wrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   align-items: center;
   max-width: 100%;
@@ -58,6 +62,7 @@ const Title = import_ds_system.styled.p`
   margin: 0;
   padding-left: 16px;
   padding-right: 16px;
+  ${wrapRule}
 `;
 const Time = import_ds_system.styled.p`
   font-size: 12px;
@@ -73,5 +78,6 @@ const Message = import_ds_system.styled.p`
   min-height: 32px;
   text-align: center;
   margin: 0;
+  ${wrapRule}
 `;
 //# sourceMappingURL=style.js.map

package/dist/cjs/style.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/style.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst Wrapper = styled(Grid)`\n  align-items: center;\n  max-width: 100%;\n  padding: 0 8px 8px;\n  border: 1px solid ${(props) => props.theme.colors.neutral['100']};\n  border-radius: 10px;\n  background-color: ${(props) => props.theme.colors.neutral['080']};\n  box-shadow: none;\n`;\n\nconst Header = styled(Grid)`\n  align-items: center;\n  height: 36px;\n`;\n\nconst Title = styled.p`\n  font-size: 14px;\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  margin: 0;\n  padding-left: 16px;\n  padding-right: 16px;\n`;\n\nconst Time = styled.p`\n  font-size: 12px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  margin: 0;\n  text-align: right;\n`;\n\nconst Message = styled.p`\n  font-size: 13px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  min-height: 32px;\n  text-align: center;\n  margin: 0;\n`;\n\nexport { Wrapper, Header, Title, Time, Message };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AAErB,MAAM,cAAU,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA,sBAIL,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA,sBAE3C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAIjE,MAAM,aAAS,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAK1B,MAAM,QAAQ,wBAAO;AAAA;AAAA,iBAEJ,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,MAAM,OAAO,wBAAO;AAAA;AAAA,iBAEH,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAKtD,MAAM,UAAU,wBAAO;AAAA;AAAA,iBAEN,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst wrapRule = css`\n  overflow-wrap: break-word;\n  white-space: 'pre-wrap';\n`;\nconst Wrapper = styled(Grid)`\n  align-items: center;\n  max-width: 100%;\n  padding: 0 8px 8px;\n  border: 1px solid ${(props) => props.theme.colors.neutral['100']};\n  border-radius: 10px;\n  background-color: ${(props) => props.theme.colors.neutral['080']};\n  box-shadow: none;\n`;\n\nconst Header = styled(Grid)`\n  align-items: center;\n  height: 36px;\n`;\n\nconst Title = styled.p`\n  font-size: 14px;\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  margin: 0;\n  padding-left: 16px;\n  padding-right: 16px;\n  ${wrapRule}\n`;\n\nconst Time = styled.p`\n  font-size: 12px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  margin: 0;\n  text-align: right;\n`;\n\nconst Message = styled.p`\n  font-size: 13px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  min-height: 32px;\n  text-align: center;\n  margin: 0;\n  ${wrapRule}\n`;\n\nexport { Wrapper, Header, Title, Time, Message };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,qBAAqB;AAErB,MAAM,WAAW;AAAA;AAAA;AAAA;AAIjB,MAAM,cAAU,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA,sBAIL,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA,sBAE3C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAIjE,MAAM,aAAS,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAK1B,MAAM,QAAQ,wBAAO;AAAA;AAAA,iBAEJ,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA,IAIlD;AAAA;AAGJ,MAAM,OAAO,wBAAO;AAAA;AAAA,iBAEH,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAKtD,MAAM,UAAU,wBAAO;AAAA;AAAA,iBAEN,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA,IAIlD;AAAA;",
   "names": []
 }

package/dist/esm/SystemMessage.js

@@ -9,7 +9,7 @@ const SystemMessage = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateTypescriptPropTypes(propsWithDefault, systemMessageProps, DSChatSystemMessageName);
   const { title, time, body } = propsWithDefault;
-  return /* @__PURE__ */ jsxs(Wrapper, { rows: ["auto", "auto"], children: [
+  return /* @__PURE__ */ jsxs(Wrapper, { rows: ["auto", "auto"], cols: [1], children: [
     /* @__PURE__ */ jsxs(Header, { cols: ["1fr", "auto", "1fr"], children: [
       /* @__PURE__ */ jsx("span", {}),
       /* @__PURE__ */ jsx(Title, { "data-testid": ChatSystemMessageDataTestIds.SYSTEM_MSG_TITLE, children: title }),

package/dist/esm/SystemMessage.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/SystemMessage.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { Wrapper, Header, Title, Time, Message } from './style.js';\nimport type { DSChatSystemMessageT } from './react-desc-prop-types.js';\nimport { systemMessageProps, defaultProps } from './react-desc-prop-types.js';\nimport { ChatSystemMessageDataTestIds } from './ChatSystemMessageDataTestIds.js';\nimport { DSChatSystemMessageName } from './DSChatSystemMessageDefinitions.js';\n\nconst SystemMessage: React.ComponentType<DSChatSystemMessageT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, systemMessageProps, DSChatSystemMessageName);\n\n  const { title, time, body } = propsWithDefault;\n  return (\n    <Wrapper rows={['auto', 'auto']}>\n      <Header cols={['1fr', 'auto', '1fr']}>\n        <span />\n        <Title data-testid={ChatSystemMessageDataTestIds.SYSTEM_MSG_TITLE}>{title}</Title>\n        <Time data-testid={ChatSystemMessageDataTestIds.SYSTEM_MSG_TIME}>{time}</Time>\n      </Header>\n      <Message data-testid={ChatSystemMessageDataTestIds.SYSTEM_MSG_BODY}>{body}</Message>\n    </Wrapper>\n  );\n};\n\nSystemMessage.propTypes = systemMessageProps as WeakValidationMap<unknown>;\nSystemMessage.displayName = DSChatSystemMessageName;\nconst SystemMessageWithSchema = describe(SystemMessage);\nSystemMessageWithSchema.propTypes = systemMessageProps as WeakValidationMap<unknown>;\n\nexport { SystemMessage, SystemMessageWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgBjB,SACE,KADF;AAdN,SAAS,UAAU,gCAAgC,oCAAoC;AACvF,SAAS,SAAS,QAAQ,OAAO,MAAM,eAAe;AAEtD,SAAS,oBAAoB,oBAAoB;AACjD,SAAS,oCAAoC;AAC7C,SAAS,+BAA+B;AAExC,MAAM,gBAAiE,CAAC,UAAU;AAChF,QAAM,mBAAmB,6BAA6B,OAAO,YAAY;AACzE,iCAA+B,kBAAkB,oBAAoB,uBAAuB;AAE5F,QAAM,EAAE,OAAO,MAAM,KAAK,IAAI;AAC9B,SACE,qBAAC,WAAQ,MAAM,CAAC,QAAQ,MAAM,GAC5B;AAAA,yBAAC,UAAO,MAAM,CAAC,OAAO,QAAQ,KAAK,GACjC;AAAA,0BAAC,UAAK;AAAA,MACN,oBAAC,SAAM,eAAa,6BAA6B,kBAAmB,iBAAM;AAAA,MAC1E,oBAAC,QAAK,eAAa,6BAA6B,iBAAkB,gBAAK;AAAA,OACzE;AAAA,IACA,oBAAC,WAAQ,eAAa,6BAA6B,iBAAkB,gBAAK;AAAA,KAC5E;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { Wrapper, Header, Title, Time, Message } from './style.js';\nimport type { DSChatSystemMessageT } from './react-desc-prop-types.js';\nimport { systemMessageProps, defaultProps } from './react-desc-prop-types.js';\nimport { ChatSystemMessageDataTestIds } from './ChatSystemMessageDataTestIds.js';\nimport { DSChatSystemMessageName } from './DSChatSystemMessageDefinitions.js';\n\nconst SystemMessage: React.ComponentType<DSChatSystemMessageT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, systemMessageProps, DSChatSystemMessageName);\n\n  const { title, time, body } = propsWithDefault;\n  return (\n    <Wrapper rows={['auto', 'auto']} cols={[1]}>\n      <Header cols={['1fr', 'auto', '1fr']}>\n        <span />\n        <Title data-testid={ChatSystemMessageDataTestIds.SYSTEM_MSG_TITLE}>{title}</Title>\n        <Time data-testid={ChatSystemMessageDataTestIds.SYSTEM_MSG_TIME}>{time}</Time>\n      </Header>\n      <Message data-testid={ChatSystemMessageDataTestIds.SYSTEM_MSG_BODY}>{body}</Message>\n    </Wrapper>\n  );\n};\n\nSystemMessage.propTypes = systemMessageProps as WeakValidationMap<unknown>;\nSystemMessage.displayName = DSChatSystemMessageName;\nconst SystemMessageWithSchema = describe(SystemMessage);\nSystemMessageWithSchema.propTypes = systemMessageProps as WeakValidationMap<unknown>;\n\nexport { SystemMessage, SystemMessageWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgBjB,SACE,KADF;AAdN,SAAS,UAAU,gCAAgC,oCAAoC;AACvF,SAAS,SAAS,QAAQ,OAAO,MAAM,eAAe;AAEtD,SAAS,oBAAoB,oBAAoB;AACjD,SAAS,oCAAoC;AAC7C,SAAS,+BAA+B;AAExC,MAAM,gBAAiE,CAAC,UAAU;AAChF,QAAM,mBAAmB,6BAA6B,OAAO,YAAY;AACzE,iCAA+B,kBAAkB,oBAAoB,uBAAuB;AAE5F,QAAM,EAAE,OAAO,MAAM,KAAK,IAAI;AAC9B,SACE,qBAAC,WAAQ,MAAM,CAAC,QAAQ,MAAM,GAAG,MAAM,CAAC,CAAC,GACvC;AAAA,yBAAC,UAAO,MAAM,CAAC,OAAO,QAAQ,KAAK,GACjC;AAAA,0BAAC,UAAK;AAAA,MACN,oBAAC,SAAM,eAAa,6BAA6B,kBAAmB,iBAAM;AAAA,MAC1E,oBAAC,QAAK,eAAa,6BAA6B,iBAAkB,gBAAK;AAAA,OACzE;AAAA,IACA,oBAAC,WAAQ,eAAa,6BAA6B,iBAAkB,gBAAK;AAAA,KAC5E;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
   "names": []
 }

package/dist/esm/style.js

@@ -1,6 +1,10 @@
 import * as React from "react";
-import { styled } from "@elliemae/ds-system";
+import { styled, css } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
+const wrapRule = css`
+  overflow-wrap: break-word;
+  white-space: 'pre-wrap';
+`;
 const Wrapper = styled(Grid)`
   align-items: center;
   max-width: 100%;
@@ -21,6 +25,7 @@ const Title = styled.p`
   margin: 0;
   padding-left: 16px;
   padding-right: 16px;
+  ${wrapRule}
 `;
 const Time = styled.p`
   font-size: 12px;
@@ -36,6 +41,7 @@ const Message = styled.p`
   min-height: 32px;
   text-align: center;
   margin: 0;
+  ${wrapRule}
 `;
 export {
   Header,

package/dist/esm/style.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/style.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst Wrapper = styled(Grid)`\n  align-items: center;\n  max-width: 100%;\n  padding: 0 8px 8px;\n  border: 1px solid ${(props) => props.theme.colors.neutral['100']};\n  border-radius: 10px;\n  background-color: ${(props) => props.theme.colors.neutral['080']};\n  box-shadow: none;\n`;\n\nconst Header = styled(Grid)`\n  align-items: center;\n  height: 36px;\n`;\n\nconst Title = styled.p`\n  font-size: 14px;\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  margin: 0;\n  padding-left: 16px;\n  padding-right: 16px;\n`;\n\nconst Time = styled.p`\n  font-size: 12px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  margin: 0;\n  text-align: right;\n`;\n\nconst Message = styled.p`\n  font-size: 13px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  min-height: 32px;\n  text-align: center;\n  margin: 0;\n`;\n\nexport { Wrapper, Header, Title, Time, Message };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,MAAM,UAAU,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA,sBAIL,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA,sBAE3C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAIjE,MAAM,SAAS,OAAO,IAAI;AAAA;AAAA;AAAA;AAK1B,MAAM,QAAQ,OAAO;AAAA;AAAA,iBAEJ,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,MAAM,OAAO,OAAO;AAAA;AAAA,iBAEH,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAKtD,MAAM,UAAU,OAAO;AAAA;AAAA,iBAEN,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst wrapRule = css`\n  overflow-wrap: break-word;\n  white-space: 'pre-wrap';\n`;\nconst Wrapper = styled(Grid)`\n  align-items: center;\n  max-width: 100%;\n  padding: 0 8px 8px;\n  border: 1px solid ${(props) => props.theme.colors.neutral['100']};\n  border-radius: 10px;\n  background-color: ${(props) => props.theme.colors.neutral['080']};\n  box-shadow: none;\n`;\n\nconst Header = styled(Grid)`\n  align-items: center;\n  height: 36px;\n`;\n\nconst Title = styled.p`\n  font-size: 14px;\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  margin: 0;\n  padding-left: 16px;\n  padding-right: 16px;\n  ${wrapRule}\n`;\n\nconst Time = styled.p`\n  font-size: 12px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  margin: 0;\n  text-align: right;\n`;\n\nconst Message = styled.p`\n  font-size: 13px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  min-height: 32px;\n  text-align: center;\n  margin: 0;\n  ${wrapRule}\n`;\n\nexport { Wrapper, Header, Title, Time, Message };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,WAAW;AAC5B,SAAS,YAAY;AAErB,MAAM,WAAW;AAAA;AAAA;AAAA;AAIjB,MAAM,UAAU,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA,sBAIL,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA,sBAE3C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAIjE,MAAM,SAAS,OAAO,IAAI;AAAA;AAAA;AAAA;AAK1B,MAAM,QAAQ,OAAO;AAAA;AAAA,iBAEJ,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA,IAIlD;AAAA;AAGJ,MAAM,OAAO,OAAO;AAAA;AAAA,iBAEH,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAKtD,MAAM,UAAU,OAAO;AAAA;AAAA,iBAEN,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA,IAIlD;AAAA;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-chat-system-message",
-  "version": "3.17.0-next.9",
+  "version": "3.17.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Chat System Message",
   "files": [
@@ -47,9 +47,9 @@
     "typeSafety": true
   },
   "dependencies": {
-    "@elliemae/ds-grid": "3.17.0-next.9",
-    "@elliemae/ds-props-helpers": "3.17.0-next.9",
-    "@elliemae/ds-system": "3.17.0-next.9"
+    "@elliemae/ds-grid": "3.17.0",
+    "@elliemae/ds-props-helpers": "3.17.0",
+    "@elliemae/ds-system": "3.17.0"
   },
   "devDependencies": {
     "styled-components": "~5.3.9"