@elliemae/ds-chat-system-message 3.32.2-next.1 → 3.33.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/cjs/SystemMessage.js +3 -3
  2. package/dist/cjs/SystemMessage.js.map +2 -2
  3. package/dist/cjs/style.js +19 -8
  4. package/dist/cjs/style.js.map +2 -2
  5. package/dist/esm/SystemMessage.js +4 -4
  6. package/dist/esm/SystemMessage.js.map +2 -2
  7. package/dist/esm/style.js +19 -8
  8. package/dist/esm/style.js.map +2 -2
  9. package/dist/types/style.d.ts +4 -3
  10. package/package.json +5 -5
package/dist/cjs/SystemMessage.js CHANGED
@@ -48,9 +48,9 @@ const SystemMessage = (props) => {
48
48
  // undefined is technically not a valid React node, it should be null instead
49
49
  body
50
50
  } = propsWithDefault;
51
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_style.Wrapper, { rows: ["auto", "auto"], cols: [1], children: [
52
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_style.Header, { cols: ["1fr", "auto", "1fr"], children: [
53
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {}),
51
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_style.Wrapper, { children: [
52
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_style.Header, { children: [
53
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.EmptyDiv, {}),
54
54
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.Title, { "data-testid": import_ChatSystemMessageDataTestIds.ChatSystemMessageDataTestIds.SYSTEM_MSG_TITLE, children: title }),
55
55
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.Time, { "data-testid": import_ChatSystemMessageDataTestIds.ChatSystemMessageDataTestIds.SYSTEM_MSG_TIME, children: time })
56
56
  ] }),
package/dist/cjs/SystemMessage.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/SystemMessage.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "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<DSChatSystemMessageT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefault, systemMessageProps, DSChatSystemMessageName);\n\n const {\n title,\n time = null, // undefined is technically not a valid React node, it should be null instead\n body,\n } = 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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBjB;AAlBN,8BAAuF;AACvF,mBAAsD;AAEtD,mCAAiD;AACjD,0CAA6C;AAC7C,4CAAwC;AAExC,MAAM,gBAAiE,CAAC,UAAU;AAChF,QAAM,uBAAmB,sDAAiE,OAAO,yCAAY;AAC7G,8DAA+B,kBAAkB,iDAAoB,6DAAuB;AAE5F,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA;AAAA,IACP;AAAA,EACF,IAAI;AACJ,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;",
4
+ "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, EmptyDiv } 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<DSChatSystemMessageT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefault, systemMessageProps, DSChatSystemMessageName);\n\n const {\n title,\n time = null, // undefined is technically not a valid React node, it should be null instead\n body,\n } = propsWithDefault;\n return (\n <Wrapper>\n <Header>\n <EmptyDiv />\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"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBjB;AAlBN,8BAAuF;AACvF,mBAAgE;AAEhE,mCAAiD;AACjD,0CAA6C;AAC7C,4CAAwC;AAExC,MAAM,gBAAiE,CAAC,UAAU;AAChF,QAAM,uBAAmB,sDAAiE,OAAO,yCAAY;AAC7G,8DAA+B,kBAAkB,iDAAoB,6DAAuB;AAE5F,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA;AAAA,IACP;AAAA,EACF,IAAI;AACJ,SACE,6CAAC,wBACC;AAAA,iDAAC,uBACC;AAAA,kDAAC,yBAAS;AAAA,MACV,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;",
6
6
  "names": []
7
7
  }
package/dist/cjs/style.js CHANGED
@@ -28,6 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
28
28
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
29
  var style_exports = {};
30
30
  __export(style_exports, {
31
+ EmptyDiv: () => EmptyDiv,
31
32
  Header: () => Header,
32
33
  Message: () => Message,
33
34
  Time: () => Time,
@@ -42,9 +43,9 @@ const wrapRule = import_ds_system.css`
42
43
  overflow-wrap: break-word;
43
44
  white-space: 'pre-wrap';
44
45
  `;
45
- const Wrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
46
+ const Wrapper = import_ds_system.styled.div`
46
47
  align-items: center;
47
- max-width: 100%;
48
+ min-width: 268px;
48
49
  padding: 0 8px 8px;
49
50
  border: 1px solid ${(props) => props.theme.colors.neutral["100"]};
50
51
  border-radius: 10px;
@@ -52,27 +53,37 @@ const Wrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
52
53
  box-shadow: none;
53
54
  `;
54
55
  const Header = (0, import_ds_system.styled)(import_ds_grid.Grid)`
55
- align-items: center;
56
- height: 36px;
56
+ width: 100%;
57
+ min-height: 36px;
58
+ grid-auto-flow: column;
59
+ place-items: center;
60
+ align-items: start;
61
+ justify-items: stretch;
62
+ padding-top: 10px;
63
+ `;
64
+ const EmptyDiv = import_ds_system.styled.div`
65
+ min-width: 54.5px;
57
66
  `;
58
67
  const Title = import_ds_system.styled.p`
59
- font-size: 14px;
68
+ font-size: 1.077rem;
60
69
  font-weight: ${(props) => props.theme.fontWeights.semibold};
61
70
  color: ${(props) => props.theme.colors.neutral["700"]};
62
71
  margin: 0;
63
72
  padding-left: 16px;
64
73
  padding-right: 16px;
74
+ text-align: center;
65
75
  ${wrapRule}
66
76
  `;
67
- const Time = import_ds_system.styled.p`
68
- font-size: 12px;
77
+ const Time = import_ds_system.styled.div`
78
+ font-size: 0.923rem;
69
79
  font-weight: ${(props) => props.theme.fontWeights.regular};
70
80
  color: ${(props) => props.theme.colors.neutral["700"]};
71
81
  margin: 0;
72
82
  text-align: right;
83
+ min-width: 54.5px;
73
84
  `;
74
85
  const Message = import_ds_system.styled.p`
75
- font-size: 13px;
86
+ font-size: 1rem;
76
87
  font-weight: ${(props) => props.theme.fontWeights.regular};
77
88
  color: ${(props) => props.theme.colors.neutral["700"]};
78
89
  min-height: 32px;
package/dist/cjs/style.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/style.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "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;",
4
+ "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`;\n\nconst Wrapper = styled.div`\n align-items: center;\n min-width: 268px;\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 width: 100%;\n min-height: 36px;\n grid-auto-flow: column;\n place-items: center;\n align-items: start;\n justify-items: stretch;\n padding-top: 10px;\n`;\n\nconst EmptyDiv = styled.div`\n min-width: 54.5px;\n`;\n\nconst Title = styled.p`\n font-size: 1.077rem;\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 text-align: center;\n ${wrapRule}\n`;\n\nconst Time = styled.div`\n font-size: 0.923rem;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n color: ${(props) => props.theme.colors.neutral['700']};\n margin: 0;\n text-align: right;\n min-width: 54.5px;\n`;\n\nconst Message = styled.p`\n font-size: 1rem;\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, EmptyDiv, Title, Time, Message };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,qBAAqB;AAErB,MAAM,WAAW;AAAA;AAAA;AAAA;AAKjB,MAAM,UAAU,wBAAO;AAAA;AAAA;AAAA;AAAA,sBAID,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAU1B,MAAM,WAAW,wBAAO;AAAA;AAAA;AAIxB,MAAM,QAAQ,wBAAO;AAAA;AAAA,iBAEJ,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAKlD;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;AAAA;AAMtD,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;",
6
6
  "names": []
7
7
  }
package/dist/esm/SystemMessage.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from "react";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
4
- import { Wrapper, Header, Title, Time, Message } from "./style.js";
4
+ import { Wrapper, Header, Title, Time, Message, EmptyDiv } from "./style.js";
5
5
  import { systemMessageProps, defaultProps } from "./react-desc-prop-types.js";
6
6
  import { ChatSystemMessageDataTestIds } from "./ChatSystemMessageDataTestIds.js";
7
7
  import { DSChatSystemMessageName } from "./DSChatSystemMessageDefinitions.js";
@@ -14,9 +14,9 @@ const SystemMessage = (props) => {
14
14
  // undefined is technically not a valid React node, it should be null instead
15
15
  body
16
16
  } = propsWithDefault;
17
- return /* @__PURE__ */ jsxs(Wrapper, { rows: ["auto", "auto"], cols: [1], children: [
18
- /* @__PURE__ */ jsxs(Header, { cols: ["1fr", "auto", "1fr"], children: [
19
- /* @__PURE__ */ jsx("span", {}),
17
+ return /* @__PURE__ */ jsxs(Wrapper, { children: [
18
+ /* @__PURE__ */ jsxs(Header, { children: [
19
+ /* @__PURE__ */ jsx(EmptyDiv, {}),
20
20
  /* @__PURE__ */ jsx(Title, { "data-testid": ChatSystemMessageDataTestIds.SYSTEM_MSG_TITLE, children: title }),
21
21
  /* @__PURE__ */ jsx(Time, { "data-testid": ChatSystemMessageDataTestIds.SYSTEM_MSG_TIME, children: time })
22
22
  ] }),
package/dist/esm/SystemMessage.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/SystemMessage.tsx"],
4
- "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<DSChatSystemMessageT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefault, systemMessageProps, DSChatSystemMessageName);\n\n const {\n title,\n time = null, // undefined is technically not a valid React node, it should be null instead\n body,\n } = 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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACoBjB,SACE,KADF;AAlBN,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,6BAAiE,OAAO,YAAY;AAC7G,iCAA+B,kBAAkB,oBAAoB,uBAAuB;AAE5F,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA;AAAA,IACP;AAAA,EACF,IAAI;AACJ,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;",
4
+ "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, EmptyDiv } 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<DSChatSystemMessageT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefault, systemMessageProps, DSChatSystemMessageName);\n\n const {\n title,\n time = null, // undefined is technically not a valid React node, it should be null instead\n body,\n } = propsWithDefault;\n return (\n <Wrapper>\n <Header>\n <EmptyDiv />\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"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACoBjB,SACE,KADF;AAlBN,SAAS,UAAU,gCAAgC,oCAAoC;AACvF,SAAS,SAAS,QAAQ,OAAO,MAAM,SAAS,gBAAgB;AAEhE,SAAS,oBAAoB,oBAAoB;AACjD,SAAS,oCAAoC;AAC7C,SAAS,+BAA+B;AAExC,MAAM,gBAAiE,CAAC,UAAU;AAChF,QAAM,mBAAmB,6BAAiE,OAAO,YAAY;AAC7G,iCAA+B,kBAAkB,oBAAoB,uBAAuB;AAE5F,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA;AAAA,IACP;AAAA,EACF,IAAI;AACJ,SACE,qBAAC,WACC;AAAA,yBAAC,UACC;AAAA,0BAAC,YAAS;AAAA,MACV,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;",
6
6
  "names": []
7
7
  }
package/dist/esm/style.js CHANGED
@@ -5,9 +5,9 @@ const wrapRule = css`
5
5
  overflow-wrap: break-word;
6
6
  white-space: 'pre-wrap';
7
7
  `;
8
- const Wrapper = styled(Grid)`
8
+ const Wrapper = styled.div`
9
9
  align-items: center;
10
- max-width: 100%;
10
+ min-width: 268px;
11
11
  padding: 0 8px 8px;
12
12
  border: 1px solid ${(props) => props.theme.colors.neutral["100"]};
13
13
  border-radius: 10px;
@@ -15,27 +15,37 @@ const Wrapper = styled(Grid)`
15
15
  box-shadow: none;
16
16
  `;
17
17
  const Header = styled(Grid)`
18
- align-items: center;
19
- height: 36px;
18
+ width: 100%;
19
+ min-height: 36px;
20
+ grid-auto-flow: column;
21
+ place-items: center;
22
+ align-items: start;
23
+ justify-items: stretch;
24
+ padding-top: 10px;
25
+ `;
26
+ const EmptyDiv = styled.div`
27
+ min-width: 54.5px;
20
28
  `;
21
29
  const Title = styled.p`
22
- font-size: 14px;
30
+ font-size: 1.077rem;
23
31
  font-weight: ${(props) => props.theme.fontWeights.semibold};
24
32
  color: ${(props) => props.theme.colors.neutral["700"]};
25
33
  margin: 0;
26
34
  padding-left: 16px;
27
35
  padding-right: 16px;
36
+ text-align: center;
28
37
  ${wrapRule}
29
38
  `;
30
- const Time = styled.p`
31
- font-size: 12px;
39
+ const Time = styled.div`
40
+ font-size: 0.923rem;
32
41
  font-weight: ${(props) => props.theme.fontWeights.regular};
33
42
  color: ${(props) => props.theme.colors.neutral["700"]};
34
43
  margin: 0;
35
44
  text-align: right;
45
+ min-width: 54.5px;
36
46
  `;
37
47
  const Message = styled.p`
38
- font-size: 13px;
48
+ font-size: 1rem;
39
49
  font-weight: ${(props) => props.theme.fontWeights.regular};
40
50
  color: ${(props) => props.theme.colors.neutral["700"]};
41
51
  min-height: 32px;
@@ -44,6 +54,7 @@ const Message = styled.p`
44
54
  ${wrapRule}
45
55
  `;
46
56
  export {
57
+ EmptyDiv,
47
58
  Header,
48
59
  Message,
49
60
  Time,
package/dist/esm/style.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/style.tsx"],
4
- "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"],
5
- "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;",
4
+ "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`;\n\nconst Wrapper = styled.div`\n align-items: center;\n min-width: 268px;\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 width: 100%;\n min-height: 36px;\n grid-auto-flow: column;\n place-items: center;\n align-items: start;\n justify-items: stretch;\n padding-top: 10px;\n`;\n\nconst EmptyDiv = styled.div`\n min-width: 54.5px;\n`;\n\nconst Title = styled.p`\n font-size: 1.077rem;\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 text-align: center;\n ${wrapRule}\n`;\n\nconst Time = styled.div`\n font-size: 0.923rem;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n color: ${(props) => props.theme.colors.neutral['700']};\n margin: 0;\n text-align: right;\n min-width: 54.5px;\n`;\n\nconst Message = styled.p`\n font-size: 1rem;\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, EmptyDiv, Title, Time, Message };\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,WAAW;AAC5B,SAAS,YAAY;AAErB,MAAM,WAAW;AAAA;AAAA;AAAA;AAKjB,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA,sBAID,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAU1B,MAAM,WAAW,OAAO;AAAA;AAAA;AAIxB,MAAM,QAAQ,OAAO;AAAA;AAAA,iBAEJ,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAKlD;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;AAAA;AAMtD,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;",
6
6
  "names": []
7
7
  }
package/dist/types/style.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  /// <reference types="react" />
2
- declare const Wrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
2
+ declare const Wrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
3
3
  declare const Header: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
4
+ declare const EmptyDiv: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
4
5
  declare const Title: import("styled-components").StyledComponent<"p", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"p">, never>;
5
- declare const Time: import("styled-components").StyledComponent<"p", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"p">, never>;
6
+ declare const Time: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
6
7
  declare const Message: import("styled-components").StyledComponent<"p", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"p">, never>;
7
- export { Wrapper, Header, Title, Time, Message };
8
+ export { Wrapper, Header, EmptyDiv, Title, Time, Message };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-chat-system-message",
3
- "version": "3.32.2-next.1",
3
+ "version": "3.33.0-next.0",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Chat System Message",
6
6
  "files": [
@@ -47,14 +47,14 @@
47
47
  "typeSafety": true
48
48
  },
49
49
  "dependencies": {
50
- "@elliemae/ds-grid": "3.32.2-next.1",
51
- "@elliemae/ds-system": "3.32.2-next.1",
52
- "@elliemae/ds-props-helpers": "3.32.2-next.1"
50
+ "@elliemae/ds-grid": "3.33.0-next.0",
51
+ "@elliemae/ds-props-helpers": "3.33.0-next.0",
52
+ "@elliemae/ds-system": "3.33.0-next.0"
53
53
  },
54
54
  "devDependencies": {
55
55
  "@elliemae/pui-cli": "~9.0.0-next.31",
56
56
  "styled-components": "~5.3.9",
57
- "@elliemae/ds-monorepo-devops": "3.32.2-next.1"
57
+ "@elliemae/ds-monorepo-devops": "3.33.0-next.0"
58
58
  },
59
59
  "peerDependencies": {
60
60
  "lodash": "^4.17.21",