@elliemae/ds-chat-bubble 3.32.0-rc.6 → 3.32.0-rc.7

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.
@@ -37,6 +37,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
37
37
  var import_react = __toESM(require("react"));
38
38
  var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
39
39
  var import_ds_icons = require("@elliemae/ds-icons");
40
+ var import_ds_grid = require("@elliemae/ds-grid");
40
41
  var import_uid = require("uid");
41
42
  var import_styled = require("./styled.js");
42
43
  var import_react_desc_prop_types = require("./react-desc-prop-types.js");
@@ -75,10 +76,10 @@ const ChatBubble = (props) => {
75
76
  ] }, `body-fragment-${index}-${dsId}`)) }),
76
77
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChatBubbleArrow.ChatBubbleArrow, { type, dsId })
77
78
  ] }),
78
- errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyleErrorMessage, { "data-testid": `chat-bubble-error-message-${dsId}`, children: [
79
+ errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleErrorMessage, { "data-testid": `chat-bubble-error-message-${dsId}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: ["1fr", "auto"], children: [
79
80
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: errorMessage }),
80
81
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.WarningCircleFill, {})
81
- ] }) : null,
82
+ ] }) }) : null,
82
83
  helpMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleHelpMessage, { "data-testid": `chat-bubble-help-message-${dsId}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: helpMessage }) }) : null
83
84
  ] });
84
85
  };
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ChatBubble.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { WarningCircleFill } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport {\n StyledWrapper,\n StyledColoredBubble,\n StyledTitleBubble,\n StyledTitleLeftBubble,\n StyledTitleRightBubble,\n StyleBodyWrapper,\n StyleErrorMessage,\n StyleHelpMessage,\n} from './styled.js';\nimport { BubblePropTypes, type DSChatBubbleT, defaultProps } from './react-desc-prop-types.js';\nimport { ChatBubbleArrow } from './ChatBubbleArrow.js';\nimport { ChatBubbleDataTestIds } from './ChatBubbleDataTestIds.js';\nimport { DSChatBubbleName } from './DSChatBubbleDefinitions.js';\n\nconst ChatBubble: React.ComponentType<DSChatBubbleT.Props> = (props) => {\n const defaultPropsIncludingInstanciatedValues = React.useMemo(() => {\n const dsId = props.dsId || `ds-chat-bubble-${uid(9)}`;\n return { ...defaultProps, dsId };\n }, [props.dsId]);\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatBubbleT.InternalProps>(\n props,\n defaultPropsIncludingInstanciatedValues,\n );\n useValidateTypescriptPropTypes(propsWithDefault, BubblePropTypes, DSChatBubbleName);\n\n const { dsId, type, title, time, body, errorMessage, helpMessage } = propsWithDefault;\n const bodyParts = React.useMemo(() => (typeof body === 'string' ? body.split('\\n') : [body]), [body]);\n return (\n <StyledWrapper data-testid={`${ChatBubbleDataTestIds.BUBBLE}-${dsId}`}>\n <StyledColoredBubble type={type}>\n <StyledTitleBubble cols={['1fr', 'auto']} gutter=\"xs\" alignItems=\"flex-end\" className=\"sr-only\">\n <StyledTitleLeftBubble data-testid={`${ChatBubbleDataTestIds.BUBBLE_TITLE}-${dsId}`}>\n {title}\n </StyledTitleLeftBubble>\n <StyledTitleRightBubble\n alignItems=\"center\"\n type={type}\n data-testid={`${ChatBubbleDataTestIds.BUBBLE_TIME}-${dsId}`}\n >\n {time}\n </StyledTitleRightBubble>\n </StyledTitleBubble>\n <StyleBodyWrapper data-testid={`chat-bubble-body-${dsId}`}>\n {bodyParts.map((item, index) => (\n <React.Fragment key={`body-fragment-${index}-${dsId}`}>\n {item}\n {index < bodyParts.length - 1 ? <br /> : null}\n </React.Fragment>\n ))}\n </StyleBodyWrapper>\n <ChatBubbleArrow type={type} dsId={dsId} />\n </StyledColoredBubble>\n {errorMessage ? (\n <StyleErrorMessage data-testid={`chat-bubble-error-message-${dsId}`}>\n <span>{errorMessage}</span>\n <WarningCircleFill />\n </StyleErrorMessage>\n ) : null}\n {helpMessage ? (\n <StyleHelpMessage data-testid={`chat-bubble-help-message-${dsId}`}>\n <span>{helpMessage}</span>\n </StyleHelpMessage>\n ) : null}\n </StyledWrapper>\n );\n};\n\nChatBubble.propTypes = BubblePropTypes;\nChatBubble.displayName = DSChatBubbleName;\nconst ChatBubbleWithSchema = describe(ChatBubble);\nChatBubbleWithSchema.propTypes = BubblePropTypes;\n\nexport { ChatBubble, ChatBubbleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCf;AAnCR,mBAAkB;AAClB,8BAAuF;AACvF,sBAAkC;AAClC,iBAAoB;AACpB,oBASO;AACP,mCAAkE;AAClE,6BAAgC;AAChC,mCAAsC;AACtC,qCAAiC;AAEjC,MAAM,aAAuD,CAAC,UAAU;AACtE,QAAM,0CAA0C,aAAAA,QAAM,QAAQ,MAAM;AAClE,UAAMC,QAAO,MAAM,QAAQ,sBAAkB,gBAAI,CAAC;AAClD,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,+CAAgB;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,6CAAC,+BAAc,eAAa,GAAG,mDAAsB,UAAU,QAC7D;AAAA,iDAAC,qCAAoB,MACnB;AAAA,mDAAC,mCAAkB,MAAM,CAAC,OAAO,MAAM,GAAG,QAAO,MAAK,YAAW,YAAW,WAAU,WACpF;AAAA,oDAAC,uCAAsB,eAAa,GAAG,mDAAsB,gBAAgB,QAC1E,iBACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX;AAAA,YACA,eAAa,GAAG,mDAAsB,eAAe;AAAA,YAEpD;AAAA;AAAA,QACH;AAAA,SACF;AAAA,MACA,4CAAC,kCAAiB,eAAa,oBAAoB,QAChD,oBAAU,IAAI,CAAC,MAAM,UACpB,6CAAC,aAAAA,QAAM,UAAN,EACE;AAAA;AAAA,QACA,QAAQ,UAAU,SAAS,IAAI,4CAAC,QAAG,IAAK;AAAA,WAFtB,iBAAiB,SAAS,MAG/C,CACD,GACH;AAAA,MACA,4CAAC,0CAAgB,MAAY,MAAY;AAAA,OAC3C;AAAA,IACC,eACC,6CAAC,mCAAkB,eAAa,6BAA6B,QAC3D;AAAA,kDAAC,UAAM,wBAAa;AAAA,MACpB,4CAAC,qCAAkB;AAAA,OACrB,IACE;AAAA,IACH,cACC,4CAAC,kCAAiB,eAAa,4BAA4B,QACzD,sDAAC,UAAM,uBAAY,GACrB,IACE;AAAA,KACN;AAEJ;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU;AAChD,qBAAqB,YAAY;",
4
+ "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 { ChatBubbleDataTestIds } from './ChatBubbleDataTestIds.js';\nimport { DSChatBubbleName } from './DSChatBubbleDefinitions.js';\n\nconst ChatBubble: React.ComponentType<DSChatBubbleT.Props> = (props) => {\n const defaultPropsIncludingInstanciatedValues = React.useMemo(() => {\n const dsId = props.dsId || `ds-chat-bubble-${uid(9)}`;\n return { ...defaultProps, dsId };\n }, [props.dsId]);\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatBubbleT.InternalProps>(\n props,\n defaultPropsIncludingInstanciatedValues,\n );\n useValidateTypescriptPropTypes(propsWithDefault, BubblePropTypes, DSChatBubbleName);\n\n const { dsId, type, title, time, body, errorMessage, helpMessage } = propsWithDefault;\n const bodyParts = React.useMemo(() => (typeof body === 'string' ? body.split('\\n') : [body]), [body]);\n return (\n <StyledWrapper data-testid={`${ChatBubbleDataTestIds.BUBBLE}-${dsId}`}>\n <StyledColoredBubble type={type}>\n <StyledTitleBubble cols={['1fr', 'auto']} gutter=\"xs\" alignItems=\"flex-end\" className=\"sr-only\">\n <StyledTitleLeftBubble data-testid={`${ChatBubbleDataTestIds.BUBBLE_TITLE}-${dsId}`}>\n {title}\n </StyledTitleLeftBubble>\n <StyledTitleRightBubble\n alignItems=\"center\"\n type={type}\n data-testid={`${ChatBubbleDataTestIds.BUBBLE_TIME}-${dsId}`}\n >\n {time}\n </StyledTitleRightBubble>\n </StyledTitleBubble>\n <StyleBodyWrapper data-testid={`chat-bubble-body-${dsId}`}>\n {bodyParts.map((item, index) => (\n <React.Fragment key={`body-fragment-${index}-${dsId}`}>\n {item}\n {index < bodyParts.length - 1 ? <br /> : null}\n </React.Fragment>\n ))}\n </StyleBodyWrapper>\n <ChatBubbleArrow type={type} dsId={dsId} />\n </StyledColoredBubble>\n {errorMessage ? (\n <StyleErrorMessage data-testid={`chat-bubble-error-message-${dsId}`}>\n <Grid cols={['1fr', 'auto']}>\n <span>{errorMessage}</span>\n <WarningCircleFill />\n </Grid>\n </StyleErrorMessage>\n ) : null}\n {helpMessage ? (\n <StyleHelpMessage data-testid={`chat-bubble-help-message-${dsId}`}>\n <span>{helpMessage}</span>\n </StyleHelpMessage>\n ) : null}\n </StyledWrapper>\n );\n};\n\nChatBubble.propTypes = BubblePropTypes;\nChatBubble.displayName = DSChatBubbleName;\nconst ChatBubbleWithSchema = describe(ChatBubble);\nChatBubbleWithSchema.propTypes = BubblePropTypes;\n\nexport { ChatBubble, ChatBubbleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoCf;AApCR,mBAAkB;AAClB,8BAAuF;AACvF,sBAAkC;AAClC,qBAAqB;AACrB,iBAAoB;AACpB,oBASO;AACP,mCAAkE;AAClE,6BAAgC;AAChC,mCAAsC;AACtC,qCAAiC;AAEjC,MAAM,aAAuD,CAAC,UAAU;AACtE,QAAM,0CAA0C,aAAAA,QAAM,QAAQ,MAAM;AAClE,UAAMC,QAAO,MAAM,QAAQ,sBAAkB,gBAAI,CAAC;AAClD,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,+CAAgB;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,6CAAC,+BAAc,eAAa,GAAG,mDAAsB,UAAU,QAC7D;AAAA,iDAAC,qCAAoB,MACnB;AAAA,mDAAC,mCAAkB,MAAM,CAAC,OAAO,MAAM,GAAG,QAAO,MAAK,YAAW,YAAW,WAAU,WACpF;AAAA,oDAAC,uCAAsB,eAAa,GAAG,mDAAsB,gBAAgB,QAC1E,iBACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX;AAAA,YACA,eAAa,GAAG,mDAAsB,eAAe;AAAA,YAEpD;AAAA;AAAA,QACH;AAAA,SACF;AAAA,MACA,4CAAC,kCAAiB,eAAa,oBAAoB,QAChD,oBAAU,IAAI,CAAC,MAAM,UACpB,6CAAC,aAAAA,QAAM,UAAN,EACE;AAAA;AAAA,QACA,QAAQ,UAAU,SAAS,IAAI,4CAAC,QAAG,IAAK;AAAA,WAFtB,iBAAiB,SAAS,MAG/C,CACD,GACH;AAAA,MACA,4CAAC,0CAAgB,MAAY,MAAY;AAAA,OAC3C;AAAA,IACC,eACC,4CAAC,mCAAkB,eAAa,6BAA6B,QAC3D,uDAAC,uBAAK,MAAM,CAAC,OAAO,MAAM,GACxB;AAAA,kDAAC,UAAM,wBAAa;AAAA,MACpB,4CAAC,qCAAkB;AAAA,OACrB,GACF,IACE;AAAA,IACH,cACC,4CAAC,kCAAiB,eAAa,4BAA4B,QACzD,sDAAC,UAAM,uBAAY,GACrB,IACE;AAAA,KACN;AAEJ;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU;AAChD,qBAAqB,YAAY;",
6
6
  "names": ["React", "dsId"]
7
7
  }
@@ -36,7 +36,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
36
36
  var import_styled = require("./styled.js");
37
37
  var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
38
38
  var import_react_desc_prop_types = require("./react-desc-prop-types.js");
39
- const ChatBubbleArrow = ({ type, dsId }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBubbleArrow, { children: type === import_react_desc_prop_types.BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "15px", height: "14px", viewBox: "0 0 15 14", "aria-hidden": "true", children: [
39
+ const ChatBubbleArrow = ({ type, dsId }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBubbleArrow, { children: type === import_react_desc_prop_types.BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "1.15rem", height: "1.07rem", viewBox: "0 0 15 14", "aria-hidden": "true", children: [
40
40
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
41
41
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
42
42
  "path",
@@ -81,7 +81,7 @@ const ChatBubbleArrow = ({ type, dsId }) => /* @__PURE__ */ (0, import_jsx_runti
81
81
  ),
82
82
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("use", { fill: "#FFFFFF", fillRule: "evenodd", xlinkHref: `#arrow-svg-path-${dsId}` })
83
83
  ] }) })
84
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "9px", height: "8px", viewBox: "0 0 9 8", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
84
+ ] }) : /* @__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", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
85
85
  "path",
86
86
  {
87
87
  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",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ChatBubbleArrow.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport { StyledBubbleArrow } from './styled.js';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { BUBBLE_TYPES, type DSChatBubbleT, propsArrowBubble } from './react-desc-prop-types.js';\n\nexport const ChatBubbleArrow: React.ComponentType<Pick<DSChatBubbleT.Props, 'type' | 'dsId'>> = ({ type, dsId }) => (\n <StyledBubbleArrow>\n {type === BUBBLE_TYPES.RECIPIENT ? (\n <svg width=\"15px\" height=\"14px\" viewBox=\"0 0 15 14\" aria-hidden=\"true\">\n <defs>\n <path\n id={`arrow-svg-path-${dsId}`}\n d=\"M12,8.5 C12,7.9373169 11.6782751,7.4856453 11.2282104,7.196228 C11.2286673,7.1967363 3,2 3,2 L3,10 L10.5627441,10 L10.5658569,9.9933472 C11.3630371,9.9580688 12,9.3058472 12,8.5 Z\"\n ></path>\n <filter\n id={`arrow-svg-filter-${dsId}`}\n x=\"-55.6%\"\n y=\"-50.0%\"\n width=\"211.1%\"\n height=\"225.0%\"\n filterUnits=\"objectBoundingBox\"\n >\n <feOffset dx=\"2.3\" dy=\"1.2\" in=\"SourceAlpha\" result=\"shadowOffsetOuter1\"></feOffset>\n <feGaussianBlur stdDeviation=\"1.5\" in=\"shadowOffsetOuter1\" result=\"shadowBlurOuter1\"></feGaussianBlur>\n <feColorMatrix\n values=\"0 0 0 0 0.207843137 \n 0 0 0 0 0.235294118 \n 0 0 0 0 0.274509804 \n 0 0 0 0.8 0\"\n type=\"matrix\"\n in=\"shadowBlurOuter1\"\n ></feColorMatrix>\n </filter>\n </defs>\n <g stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n <g transform=\"translate(7.500000, 6.000000) scale(-1, 1) translate(-7.500000, -6.000000) \">\n <use\n fill=\"black\"\n fillOpacity=\"1\"\n filter={`url(#arrow-svg-filter-${dsId})`}\n xlinkHref={`#arrow-svg-path-${dsId}`}\n ></use>\n <use fill=\"#FFFFFF\" fillRule=\"evenodd\" xlinkHref={`#arrow-svg-path-${dsId}`}></use>\n </g>\n </g>\n </svg>\n ) : (\n <svg width=\"9px\" height=\"8px\" viewBox=\"0 0 9 8\" aria-hidden=\"true\">\n <g stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n <path\n d=\"M9,6.5 C9,5.9373169 8.6782751,5.4856453 8.2282104,5.196228 C8.2286673,5.1967363 0,0 0,0 L0,8 L7.5627441,8 L7.5658569,7.9933472 C8.3630371,7.9580688 9,7.3058472 9,6.5 Z\"\n fill=\"#1E79C2\"\n ></path>\n </g>\n </svg>\n )}\n </StyledBubbleArrow>\n);\n\nChatBubbleArrow.propTypes = propsArrowBubble;\nconst ChatBubbleArrowWithSchema = describe(ChatBubbleArrow);\nChatBubbleArrowWithSchema.propTypes = propsArrowBubble;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUb;AATV,oBAAkC;AAClC,8BAAyB;AACzB,mCAAmE;AAE5D,MAAM,kBAAmF,CAAC,EAAE,MAAM,KAAK,MAC5G,4CAAC,mCACE,mBAAS,0CAAa,YACrB,6CAAC,SAAI,OAAM,QAAO,QAAO,QAAO,SAAQ,aAAY,eAAY,QAC9D;AAAA,+CAAC,UACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,kBAAkB;AAAA,QACtB,GAAE;AAAA;AAAA,IACH;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,oBAAoB;AAAA,QACxB,GAAE;AAAA,QACF,GAAE;AAAA,QACF,OAAM;AAAA,QACN,QAAO;AAAA,QACP,aAAY;AAAA,QAEZ;AAAA,sDAAC,cAAS,IAAG,OAAM,IAAG,OAAM,IAAG,eAAc,QAAO,sBAAqB;AAAA,UACzE,4CAAC,oBAAe,cAAa,OAAM,IAAG,sBAAqB,QAAO,oBAAmB;AAAA,UACrF;AAAA,YAAC;AAAA;AAAA,cACC,QAAO;AAAA,cAIP,MAAK;AAAA,cACL,IAAG;AAAA;AAAA,UACJ;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAAA,EACA,4CAAC,OAAE,QAAO,QAAO,aAAY,KAAI,MAAK,QAAO,UAAS,WACpD,uDAAC,OAAE,WAAU,+EACX;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAY;AAAA,QACZ,QAAQ,yBAAyB;AAAA,QACjC,WAAW,mBAAmB;AAAA;AAAA,IAC/B;AAAA,IACD,4CAAC,SAAI,MAAK,WAAU,UAAS,WAAU,WAAW,mBAAmB,QAAQ;AAAA,KAC/E,GACF;AAAA,GACF,IAEA,4CAAC,SAAI,OAAM,OAAM,QAAO,OAAM,SAAQ,WAAU,eAAY,QAC1D,sDAAC,OAAE,QAAO,QAAO,aAAY,KAAI,MAAK,QAAO,UAAS,WACpD;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAK;AAAA;AACN,GACH,GACF,GAEJ;AAGF,gBAAgB,YAAY;AAC5B,MAAM,gCAA4B,kCAAS,eAAe;AAC1D,0BAA0B,YAAY;",
4
+ "sourcesContent": ["import React from 'react';\nimport { StyledBubbleArrow } from './styled.js';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { BUBBLE_TYPES, type DSChatBubbleT, propsArrowBubble } from './react-desc-prop-types.js';\n\nexport const ChatBubbleArrow: React.ComponentType<Pick<DSChatBubbleT.Props, 'type' | 'dsId'>> = ({ type, dsId }) => (\n <StyledBubbleArrow>\n {type === BUBBLE_TYPES.RECIPIENT ? (\n <svg width=\"1.15rem\" height=\"1.07rem\" viewBox=\"0 0 15 14\" aria-hidden=\"true\">\n <defs>\n <path\n id={`arrow-svg-path-${dsId}`}\n d=\"M12,8.5 C12,7.9373169 11.6782751,7.4856453 11.2282104,7.196228 C11.2286673,7.1967363 3,2 3,2 L3,10 L10.5627441,10 L10.5658569,9.9933472 C11.3630371,9.9580688 12,9.3058472 12,8.5 Z\"\n ></path>\n <filter\n id={`arrow-svg-filter-${dsId}`}\n x=\"-55.6%\"\n y=\"-50.0%\"\n width=\"211.1%\"\n height=\"225.0%\"\n filterUnits=\"objectBoundingBox\"\n >\n <feOffset dx=\"2.3\" dy=\"1.2\" in=\"SourceAlpha\" result=\"shadowOffsetOuter1\"></feOffset>\n <feGaussianBlur stdDeviation=\"1.5\" in=\"shadowOffsetOuter1\" result=\"shadowBlurOuter1\"></feGaussianBlur>\n <feColorMatrix\n values=\"0 0 0 0 0.207843137 \n 0 0 0 0 0.235294118 \n 0 0 0 0 0.274509804 \n 0 0 0 0.8 0\"\n type=\"matrix\"\n in=\"shadowBlurOuter1\"\n ></feColorMatrix>\n </filter>\n </defs>\n <g stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n <g transform=\"translate(7.500000, 6.000000) scale(-1, 1) translate(-7.500000, -6.000000) \">\n <use\n fill=\"black\"\n fillOpacity=\"1\"\n filter={`url(#arrow-svg-filter-${dsId})`}\n xlinkHref={`#arrow-svg-path-${dsId}`}\n ></use>\n <use fill=\"#FFFFFF\" fillRule=\"evenodd\" xlinkHref={`#arrow-svg-path-${dsId}`}></use>\n </g>\n </g>\n </svg>\n ) : (\n <svg width=\"0.692rem\" height=\"0.615rem\" viewBox=\"0 0 9 8\" aria-hidden=\"true\">\n <g stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n <path\n d=\"M9,6.5 C9,5.9373169 8.6782751,5.4856453 8.2282104,5.196228 C8.2286673,5.1967363 0,0 0,0 L0,8 L7.5627441,8 L7.5658569,7.9933472 C8.3630371,7.9580688 9,7.3058472 9,6.5 Z\"\n fill=\"#1E79C2\"\n ></path>\n </g>\n </svg>\n )}\n </StyledBubbleArrow>\n);\n\nChatBubbleArrow.propTypes = propsArrowBubble;\nconst ChatBubbleArrowWithSchema = describe(ChatBubbleArrow);\nChatBubbleArrowWithSchema.propTypes = propsArrowBubble;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUb;AATV,oBAAkC;AAClC,8BAAyB;AACzB,mCAAmE;AAE5D,MAAM,kBAAmF,CAAC,EAAE,MAAM,KAAK,MAC5G,4CAAC,mCACE,mBAAS,0CAAa,YACrB,6CAAC,SAAI,OAAM,WAAU,QAAO,WAAU,SAAQ,aAAY,eAAY,QACpE;AAAA,+CAAC,UACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,kBAAkB;AAAA,QACtB,GAAE;AAAA;AAAA,IACH;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,oBAAoB;AAAA,QACxB,GAAE;AAAA,QACF,GAAE;AAAA,QACF,OAAM;AAAA,QACN,QAAO;AAAA,QACP,aAAY;AAAA,QAEZ;AAAA,sDAAC,cAAS,IAAG,OAAM,IAAG,OAAM,IAAG,eAAc,QAAO,sBAAqB;AAAA,UACzE,4CAAC,oBAAe,cAAa,OAAM,IAAG,sBAAqB,QAAO,oBAAmB;AAAA,UACrF;AAAA,YAAC;AAAA;AAAA,cACC,QAAO;AAAA,cAIP,MAAK;AAAA,cACL,IAAG;AAAA;AAAA,UACJ;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAAA,EACA,4CAAC,OAAE,QAAO,QAAO,aAAY,KAAI,MAAK,QAAO,UAAS,WACpD,uDAAC,OAAE,WAAU,+EACX;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAY;AAAA,QACZ,QAAQ,yBAAyB;AAAA,QACjC,WAAW,mBAAmB;AAAA;AAAA,IAC/B;AAAA,IACD,4CAAC,SAAI,MAAK,WAAU,UAAS,WAAU,WAAW,mBAAmB,QAAQ;AAAA,KAC/E,GACF;AAAA,GACF,IAEA,4CAAC,SAAI,OAAM,YAAW,QAAO,YAAW,SAAQ,WAAU,eAAY,QACpE,sDAAC,OAAE,QAAO,QAAO,aAAY,KAAI,MAAK,QAAO,UAAS,WACpD;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAK;AAAA;AACN,GACH,GACF,GAEJ;AAGF,gBAAgB,YAAY;AAC5B,MAAM,gCAA4B,kCAAS,eAAe;AAC1D,0BAA0B,YAAY;",
6
6
  "names": []
7
7
  }
@@ -59,37 +59,37 @@ const StyledTitleBubble = (0, import_ds_system.styled)(import_ds_grid.Grid)`
59
59
  padding-bottom: 4px;
60
60
  `;
61
61
  const StyledTitleLeftBubble = (0, import_ds_system.styled)("div")`
62
- font-size: 13px;
62
+ font-size: 1rem;
63
63
  font-weight: 600;
64
64
  ${wrapRules}
65
65
  `;
66
66
  const StyledTitleRightBubble = (0, import_ds_system.styled)(import_ds_grid.Grid)`
67
- font-size: 13px;
67
+ font-size: 1rem;
68
68
  font-weight: 400;
69
69
  align-self: flex-start;
70
70
  color: ${(props) => props.type === import_react_desc_prop_types.BUBBLE_TYPES.SENDER ? "#FFF" : "#657489"};
71
71
  `;
72
72
  const StyleBodyWrapper = import_ds_system.styled.div`
73
- font-size: 13px;
73
+ font-size: 1rem;
74
74
  font-weight: 400;
75
- line-height: 15px;
75
+ line-height: 1.15;
76
76
  min-height: 18px;
77
77
  padding: 0px 10px 8px 10px;
78
78
  `;
79
79
  const StyleErrorMessage = import_ds_system.styled.div`
80
- font-size: 12px;
80
+ font-size: 0.923rem;
81
81
  font-weight: 400;
82
82
  padding-top: ${(props) => props.theme.space.xxxs};
83
83
  color: ${(props) => props.theme.colors.danger[900]};
84
84
  align-items: flex-end;
85
85
  justify-content: center;
86
86
  text-align: right;
87
- line-height: 15px;
87
+ line-height: 1.15;
88
88
  svg {
89
89
  fill: ${(props) => props.theme.colors.danger[900]};
90
90
  }
91
91
  a {
92
- font-size: 12px;
92
+ font-size: 0.923rem;
93
93
  color: ${(props) => props.theme.colors.danger[900]};
94
94
  }
95
95
  .em-ds-icon {
@@ -97,8 +97,8 @@ const StyleErrorMessage = import_ds_system.styled.div`
97
97
  }
98
98
  `;
99
99
  const StyleHelpMessage = (0, import_ds_system.styled)(StyleErrorMessage)`
100
- font-size: 12px;
101
- line-height: 15px;
100
+ font-size: 0.923rem;
101
+ line-height: 1.15;
102
102
  color: ${(props) => props.theme.colors.neutral[600]};
103
103
  svg {
104
104
  fill: ${(props) => props.theme.colors.danger[900]};
@@ -112,8 +112,8 @@ const StyledBubbleArrow = import_ds_system.styled.div`
112
112
  display: block;
113
113
  content: '';
114
114
  position: absolute;
115
- bottom: 10px;
116
- height: 15px;
115
+ bottom: 0.769rem;
116
+ height: 1.15rem;
117
117
  `;
118
118
  const StyledColoredBubble = import_ds_system.styled.div`
119
119
  min-width: 224px;
@@ -125,8 +125,8 @@ const StyledColoredBubble = import_ds_system.styled.div`
125
125
  background: ${props.theme.colors.brand[600]};
126
126
  color: ${props.theme.colors.neutral["000"]};
127
127
  ${StyledBubbleArrow}{
128
- right: -9px;
129
- bottom: 6px;
128
+ right: -0.692rem;
129
+ bottom: 0.461rem;
130
130
  svg{
131
131
  fill: ${props.theme.colors.brand[600]};
132
132
  }
@@ -142,8 +142,8 @@ const StyledColoredBubble = import_ds_system.styled.div`
142
142
  color: ${props.theme.colors.neutral[700]};
143
143
 
144
144
  ${StyledBubbleArrow}{
145
- left: -11px;
146
- bottom: 6px;
145
+ left: -0.846rem;
146
+ bottom: 0.461rem;
147
147
  svg{
148
148
  fill: ${props.theme.colors.neutral["000"]};
149
149
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { BUBBLE_TYPES } from './react-desc-prop-types.js';\n\nconst wrapRules = css`\n overflow-wrap: break-word;\n white-space: pre-wrap;\n`;\n// Bubble WRAPPER\nexport const StyledWrapper = styled.div`\n min-width: 224px;\n border-radius: 10px;\n ${wrapRules}\n`;\n\n// Bubble HEADER\nexport const StyledTitleBubble = styled(Grid)`\n padding-top: 6px;\n padding-left: 10px;\n padding-right: 10px;\n padding-bottom: 4px;\n`;\n\nexport const StyledTitleLeftBubble = styled('div')`\n font-size: 13px;\n font-weight: 600;\n ${wrapRules}\n`;\nexport const StyledTitleRightBubble = styled(Grid)<{ type: string }>`\n font-size: 13px;\n font-weight: 400;\n align-self: flex-start;\n color: ${(props) => (props.type === BUBBLE_TYPES.SENDER ? '#FFF' : '#657489')};\n`;\n\nexport const StyleBodyWrapper = styled.div`\n font-size: 13px;\n font-weight: 400;\n line-height: 15px;\n min-height: 18px;\n padding: 0px 10px 8px 10px;\n`;\n\nexport const StyleErrorMessage = styled.div`\n font-size: 12px;\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: 15px;\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 .em-ds-icon {\n margin-left: 8px;\n }\n`;\n\nexport const StyleHelpMessage = styled(StyleErrorMessage)`\n font-size: 12px;\n line-height: 15px;\n color: ${(props) => props.theme.colors.neutral[600]};\n svg {\n fill: ${(props) => props.theme.colors.danger[900]};\n }\n a {\n font-size: 12px;\n color: ${(props) => props.theme.colors.danger[900]};\n }\n`;\n\n// bubble sender/ recipient\nexport const StyledBubbleArrow = styled.div`\n display: block;\n content: '';\n position: absolute;\n bottom: 10px;\n height: 15px;\n`;\n\nexport const StyledColoredBubble = styled.div<{ type: string }>`\n min-width: 224px;\n border-radius: 10px;\n position: relative;\n\n ${(props) =>\n props.type === BUBBLE_TYPES.SENDER\n ? `\n border: 1px solid ${props.theme.colors.brand['700']};\n background: ${props.theme.colors.brand[600]};\n color: ${props.theme.colors.neutral['000']};\n ${StyledBubbleArrow}{ \n right: -9px;\n bottom: 6px;\n svg{\n fill: ${props.theme.colors.brand[600]};\n }\n }\n\n a {\n color: #FFF;\n }\n\n `\n : `\n box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);\n background: ${props.theme.colors.neutral['000']};\n color: ${props.theme.colors.neutral[700]};\n\n ${StyledBubbleArrow}{ \n left: -11px;\n bottom: 6px;\n svg{\n fill: ${props.theme.colors.neutral['000']};\n }\n }\n\n `}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
4
+ "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { BUBBLE_TYPES } from './react-desc-prop-types.js';\n\nconst wrapRules = css`\n overflow-wrap: break-word;\n white-space: pre-wrap;\n`;\n// Bubble WRAPPER\nexport const StyledWrapper = styled.div`\n min-width: 224px;\n border-radius: 10px;\n ${wrapRules}\n`;\n\n// Bubble HEADER\nexport const StyledTitleBubble = styled(Grid)`\n padding-top: 6px;\n padding-left: 10px;\n padding-right: 10px;\n padding-bottom: 4px;\n`;\n\nexport const StyledTitleLeftBubble = styled('div')`\n font-size: 1rem;\n font-weight: 600;\n ${wrapRules}\n`;\nexport const StyledTitleRightBubble = styled(Grid)<{ type: string }>`\n font-size: 1rem;\n font-weight: 400;\n align-self: flex-start;\n color: ${(props) => (props.type === BUBBLE_TYPES.SENDER ? '#FFF' : '#657489')};\n`;\n\nexport const StyleBodyWrapper = styled.div`\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.15;\n min-height: 18px;\n padding: 0px 10px 8px 10px;\n`;\n\nexport const StyleErrorMessage = styled.div`\n font-size: 0.923rem;\n font-weight: 400;\n padding-top: ${(props) => props.theme.space.xxxs};\n color: ${(props) => props.theme.colors.danger[900]};\n align-items: flex-end;\n justify-content: center;\n text-align: right;\n line-height: 1.15;\n svg {\n fill: ${(props) => props.theme.colors.danger[900]};\n }\n a {\n font-size: 0.923rem;\n color: ${(props) => props.theme.colors.danger[900]};\n }\n .em-ds-icon {\n margin-left: 8px;\n }\n`;\n\nexport const StyleHelpMessage = styled(StyleErrorMessage)`\n font-size: 0.923rem;\n line-height: 1.15;\n color: ${(props) => props.theme.colors.neutral[600]};\n svg {\n fill: ${(props) => props.theme.colors.danger[900]};\n }\n a {\n font-size: 12px;\n color: ${(props) => props.theme.colors.danger[900]};\n }\n`;\n\n// bubble sender/ recipient\nexport const StyledBubbleArrow = styled.div`\n display: block;\n content: '';\n position: absolute;\n bottom: 0.769rem;\n height: 1.15rem;\n`;\n\nexport const StyledColoredBubble = styled.div<{ type: string }>`\n min-width: 224px;\n border-radius: 10px;\n position: relative;\n\n ${(props) =>\n props.type === BUBBLE_TYPES.SENDER\n ? `\n border: 1px solid ${props.theme.colors.brand['700']};\n background: ${props.theme.colors.brand[600]};\n color: ${props.theme.colors.neutral['000']};\n ${StyledBubbleArrow}{ \n right: -0.692rem;\n bottom: 0.461rem;\n svg{\n fill: ${props.theme.colors.brand[600]};\n }\n }\n\n a {\n color: #FFF;\n }\n\n `\n : `\n box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);\n background: ${props.theme.colors.neutral['000']};\n color: ${props.theme.colors.neutral[700]};\n\n ${StyledBubbleArrow}{ \n left: -0.846rem;\n bottom: 0.461rem;\n svg{\n fill: ${props.theme.colors.neutral['000']};\n }\n }\n\n `}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA4B;AAC5B,qBAAqB;AACrB,mCAA6B;AAE7B,MAAM,YAAY;AAAA;AAAA;AAAA;AAKX,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA,IAGhC;AAAA;AAIG,MAAM,wBAAoB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrC,MAAM,4BAAwB,yBAAO,KAAK;AAAA;AAAA;AAAA,IAG7C;AAAA;AAEG,MAAM,6BAAyB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA,WAItC,CAAC,UAAW,MAAM,SAAS,0CAAa,SAAS,SAAS;AAAA;AAG9D,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQhC,MAAM,oBAAoB,wBAAO;AAAA;AAAA;AAAA,iBAGvB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WACnC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMvC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA,aAIvC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,uBAAmB,yBAAO,iBAAiB;AAAA;AAAA;AAAA,WAG7C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,YAExC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA,aAIvC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAK9C,MAAM,oBAAoB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjC,MAAM,sBAAsB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKtC,CAAC,UACD,MAAM,SAAS,0CAAa,SACxB;AAAA,4BACoB,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA,sBACpC,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,iBACjC,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,UACvC;AAAA;AAAA;AAAA;AAAA,wBAIc,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAS5C;AAAA;AAAA,sBAEc,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,iBACrC,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,UAErC;AAAA;AAAA;AAAA;AAAA,wBAIc,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import React2 from "react";
4
4
  import { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
5
5
  import { WarningCircleFill } from "@elliemae/ds-icons";
6
+ import { Grid } from "@elliemae/ds-grid";
6
7
  import { uid } from "uid";
7
8
  import {
8
9
  StyledWrapper,
@@ -50,10 +51,10 @@ const ChatBubble = (props) => {
50
51
  ] }, `body-fragment-${index}-${dsId}`)) }),
51
52
  /* @__PURE__ */ jsx(ChatBubbleArrow, { type, dsId })
52
53
  ] }),
53
- errorMessage ? /* @__PURE__ */ jsxs(StyleErrorMessage, { "data-testid": `chat-bubble-error-message-${dsId}`, children: [
54
+ errorMessage ? /* @__PURE__ */ jsx(StyleErrorMessage, { "data-testid": `chat-bubble-error-message-${dsId}`, children: /* @__PURE__ */ jsxs(Grid, { cols: ["1fr", "auto"], children: [
54
55
  /* @__PURE__ */ jsx("span", { children: errorMessage }),
55
56
  /* @__PURE__ */ jsx(WarningCircleFill, {})
56
- ] }) : null,
57
+ ] }) }) : null,
57
58
  helpMessage ? /* @__PURE__ */ jsx(StyleHelpMessage, { "data-testid": `chat-bubble-help-message-${dsId}`, children: /* @__PURE__ */ jsx("span", { children: helpMessage }) }) : null
58
59
  ] });
59
60
  };
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ChatBubble.tsx"],
4
- "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 { uid } from 'uid';\nimport {\n StyledWrapper,\n StyledColoredBubble,\n StyledTitleBubble,\n StyledTitleLeftBubble,\n StyledTitleRightBubble,\n StyleBodyWrapper,\n StyleErrorMessage,\n StyleHelpMessage,\n} from './styled.js';\nimport { BubblePropTypes, type DSChatBubbleT, defaultProps } from './react-desc-prop-types.js';\nimport { ChatBubbleArrow } from './ChatBubbleArrow.js';\nimport { ChatBubbleDataTestIds } from './ChatBubbleDataTestIds.js';\nimport { DSChatBubbleName } from './DSChatBubbleDefinitions.js';\n\nconst ChatBubble: React.ComponentType<DSChatBubbleT.Props> = (props) => {\n const defaultPropsIncludingInstanciatedValues = React.useMemo(() => {\n const dsId = props.dsId || `ds-chat-bubble-${uid(9)}`;\n return { ...defaultProps, dsId };\n }, [props.dsId]);\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatBubbleT.InternalProps>(\n props,\n defaultPropsIncludingInstanciatedValues,\n );\n useValidateTypescriptPropTypes(propsWithDefault, BubblePropTypes, DSChatBubbleName);\n\n const { dsId, type, title, time, body, errorMessage, helpMessage } = propsWithDefault;\n const bodyParts = React.useMemo(() => (typeof body === 'string' ? body.split('\\n') : [body]), [body]);\n return (\n <StyledWrapper data-testid={`${ChatBubbleDataTestIds.BUBBLE}-${dsId}`}>\n <StyledColoredBubble type={type}>\n <StyledTitleBubble cols={['1fr', 'auto']} gutter=\"xs\" alignItems=\"flex-end\" className=\"sr-only\">\n <StyledTitleLeftBubble data-testid={`${ChatBubbleDataTestIds.BUBBLE_TITLE}-${dsId}`}>\n {title}\n </StyledTitleLeftBubble>\n <StyledTitleRightBubble\n alignItems=\"center\"\n type={type}\n data-testid={`${ChatBubbleDataTestIds.BUBBLE_TIME}-${dsId}`}\n >\n {time}\n </StyledTitleRightBubble>\n </StyledTitleBubble>\n <StyleBodyWrapper data-testid={`chat-bubble-body-${dsId}`}>\n {bodyParts.map((item, index) => (\n <React.Fragment key={`body-fragment-${index}-${dsId}`}>\n {item}\n {index < bodyParts.length - 1 ? <br /> : null}\n </React.Fragment>\n ))}\n </StyleBodyWrapper>\n <ChatBubbleArrow type={type} dsId={dsId} />\n </StyledColoredBubble>\n {errorMessage ? (\n <StyleErrorMessage data-testid={`chat-bubble-error-message-${dsId}`}>\n <span>{errorMessage}</span>\n <WarningCircleFill />\n </StyleErrorMessage>\n ) : null}\n {helpMessage ? (\n <StyleHelpMessage data-testid={`chat-bubble-help-message-${dsId}`}>\n <span>{helpMessage}</span>\n </StyleHelpMessage>\n ) : null}\n </StyledWrapper>\n );\n};\n\nChatBubble.propTypes = BubblePropTypes;\nChatBubble.displayName = DSChatBubbleName;\nconst ChatBubbleWithSchema = describe(ChatBubble);\nChatBubbleWithSchema.propTypes = BubblePropTypes;\n\nexport { ChatBubble, ChatBubbleWithSchema };\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACmCf,SACE,KADF;AAnCR,OAAOA,YAAW;AAClB,SAAS,UAAU,gCAAgC,oCAAoC;AACvF,SAAS,yBAAyB;AAClC,SAAS,WAAW;AACpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAqC,oBAAoB;AAClE,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AAEjC,MAAM,aAAuD,CAAC,UAAU;AACtE,QAAM,0CAA0CA,OAAM,QAAQ,MAAM;AAClE,UAAMC,QAAO,MAAM,QAAQ,kBAAkB,IAAI,CAAC;AAClD,WAAO,EAAE,GAAG,cAAc,MAAAA,MAAK;AAAA,EACjC,GAAG,CAAC,MAAM,IAAI,CAAC;AACf,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,iCAA+B,kBAAkB,iBAAiB,gBAAgB;AAElF,QAAM,EAAE,MAAM,MAAM,OAAO,MAAM,MAAM,cAAc,YAAY,IAAI;AACrE,QAAM,YAAYD,OAAM,QAAQ,MAAO,OAAO,SAAS,WAAW,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,GAAI,CAAC,IAAI,CAAC;AACpG,SACE,qBAAC,iBAAc,eAAa,GAAG,sBAAsB,UAAU,QAC7D;AAAA,yBAAC,uBAAoB,MACnB;AAAA,2BAAC,qBAAkB,MAAM,CAAC,OAAO,MAAM,GAAG,QAAO,MAAK,YAAW,YAAW,WAAU,WACpF;AAAA,4BAAC,yBAAsB,eAAa,GAAG,sBAAsB,gBAAgB,QAC1E,iBACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX;AAAA,YACA,eAAa,GAAG,sBAAsB,eAAe;AAAA,YAEpD;AAAA;AAAA,QACH;AAAA,SACF;AAAA,MACA,oBAAC,oBAAiB,eAAa,oBAAoB,QAChD,oBAAU,IAAI,CAAC,MAAM,UACpB,qBAACA,OAAM,UAAN,EACE;AAAA;AAAA,QACA,QAAQ,UAAU,SAAS,IAAI,oBAAC,QAAG,IAAK;AAAA,WAFtB,iBAAiB,SAAS,MAG/C,CACD,GACH;AAAA,MACA,oBAAC,mBAAgB,MAAY,MAAY;AAAA,OAC3C;AAAA,IACC,eACC,qBAAC,qBAAkB,eAAa,6BAA6B,QAC3D;AAAA,0BAAC,UAAM,wBAAa;AAAA,MACpB,oBAAC,qBAAkB;AAAA,OACrB,IACE;AAAA,IACH,cACC,oBAAC,oBAAiB,eAAa,4BAA4B,QACzD,8BAAC,UAAM,uBAAY,GACrB,IACE;AAAA,KACN;AAEJ;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAChD,qBAAqB,YAAY;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { WarningCircleFill } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport { uid } from 'uid';\nimport {\n StyledWrapper,\n StyledColoredBubble,\n StyledTitleBubble,\n StyledTitleLeftBubble,\n StyledTitleRightBubble,\n StyleBodyWrapper,\n StyleErrorMessage,\n StyleHelpMessage,\n} from './styled.js';\nimport { BubblePropTypes, type DSChatBubbleT, defaultProps } from './react-desc-prop-types.js';\nimport { ChatBubbleArrow } from './ChatBubbleArrow.js';\nimport { ChatBubbleDataTestIds } from './ChatBubbleDataTestIds.js';\nimport { DSChatBubbleName } from './DSChatBubbleDefinitions.js';\n\nconst ChatBubble: React.ComponentType<DSChatBubbleT.Props> = (props) => {\n const defaultPropsIncludingInstanciatedValues = React.useMemo(() => {\n const dsId = props.dsId || `ds-chat-bubble-${uid(9)}`;\n return { ...defaultProps, dsId };\n }, [props.dsId]);\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatBubbleT.InternalProps>(\n props,\n defaultPropsIncludingInstanciatedValues,\n );\n useValidateTypescriptPropTypes(propsWithDefault, BubblePropTypes, DSChatBubbleName);\n\n const { dsId, type, title, time, body, errorMessage, helpMessage } = propsWithDefault;\n const bodyParts = React.useMemo(() => (typeof body === 'string' ? body.split('\\n') : [body]), [body]);\n return (\n <StyledWrapper data-testid={`${ChatBubbleDataTestIds.BUBBLE}-${dsId}`}>\n <StyledColoredBubble type={type}>\n <StyledTitleBubble cols={['1fr', 'auto']} gutter=\"xs\" alignItems=\"flex-end\" className=\"sr-only\">\n <StyledTitleLeftBubble data-testid={`${ChatBubbleDataTestIds.BUBBLE_TITLE}-${dsId}`}>\n {title}\n </StyledTitleLeftBubble>\n <StyledTitleRightBubble\n alignItems=\"center\"\n type={type}\n data-testid={`${ChatBubbleDataTestIds.BUBBLE_TIME}-${dsId}`}\n >\n {time}\n </StyledTitleRightBubble>\n </StyledTitleBubble>\n <StyleBodyWrapper data-testid={`chat-bubble-body-${dsId}`}>\n {bodyParts.map((item, index) => (\n <React.Fragment key={`body-fragment-${index}-${dsId}`}>\n {item}\n {index < bodyParts.length - 1 ? <br /> : null}\n </React.Fragment>\n ))}\n </StyleBodyWrapper>\n <ChatBubbleArrow type={type} dsId={dsId} />\n </StyledColoredBubble>\n {errorMessage ? (\n <StyleErrorMessage data-testid={`chat-bubble-error-message-${dsId}`}>\n <Grid cols={['1fr', 'auto']}>\n <span>{errorMessage}</span>\n <WarningCircleFill />\n </Grid>\n </StyleErrorMessage>\n ) : null}\n {helpMessage ? (\n <StyleHelpMessage data-testid={`chat-bubble-help-message-${dsId}`}>\n <span>{helpMessage}</span>\n </StyleHelpMessage>\n ) : null}\n </StyledWrapper>\n );\n};\n\nChatBubble.propTypes = BubblePropTypes;\nChatBubble.displayName = DSChatBubbleName;\nconst ChatBubbleWithSchema = describe(ChatBubble);\nChatBubbleWithSchema.propTypes = BubblePropTypes;\n\nexport { ChatBubble, ChatBubbleWithSchema };\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACoCf,SACE,KADF;AApCR,OAAOA,YAAW;AAClB,SAAS,UAAU,gCAAgC,oCAAoC;AACvF,SAAS,yBAAyB;AAClC,SAAS,YAAY;AACrB,SAAS,WAAW;AACpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAqC,oBAAoB;AAClE,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AAEjC,MAAM,aAAuD,CAAC,UAAU;AACtE,QAAM,0CAA0CA,OAAM,QAAQ,MAAM;AAClE,UAAMC,QAAO,MAAM,QAAQ,kBAAkB,IAAI,CAAC;AAClD,WAAO,EAAE,GAAG,cAAc,MAAAA,MAAK;AAAA,EACjC,GAAG,CAAC,MAAM,IAAI,CAAC;AACf,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,iCAA+B,kBAAkB,iBAAiB,gBAAgB;AAElF,QAAM,EAAE,MAAM,MAAM,OAAO,MAAM,MAAM,cAAc,YAAY,IAAI;AACrE,QAAM,YAAYD,OAAM,QAAQ,MAAO,OAAO,SAAS,WAAW,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,GAAI,CAAC,IAAI,CAAC;AACpG,SACE,qBAAC,iBAAc,eAAa,GAAG,sBAAsB,UAAU,QAC7D;AAAA,yBAAC,uBAAoB,MACnB;AAAA,2BAAC,qBAAkB,MAAM,CAAC,OAAO,MAAM,GAAG,QAAO,MAAK,YAAW,YAAW,WAAU,WACpF;AAAA,4BAAC,yBAAsB,eAAa,GAAG,sBAAsB,gBAAgB,QAC1E,iBACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX;AAAA,YACA,eAAa,GAAG,sBAAsB,eAAe;AAAA,YAEpD;AAAA;AAAA,QACH;AAAA,SACF;AAAA,MACA,oBAAC,oBAAiB,eAAa,oBAAoB,QAChD,oBAAU,IAAI,CAAC,MAAM,UACpB,qBAACA,OAAM,UAAN,EACE;AAAA;AAAA,QACA,QAAQ,UAAU,SAAS,IAAI,oBAAC,QAAG,IAAK;AAAA,WAFtB,iBAAiB,SAAS,MAG/C,CACD,GACH;AAAA,MACA,oBAAC,mBAAgB,MAAY,MAAY;AAAA,OAC3C;AAAA,IACC,eACC,oBAAC,qBAAkB,eAAa,6BAA6B,QAC3D,+BAAC,QAAK,MAAM,CAAC,OAAO,MAAM,GACxB;AAAA,0BAAC,UAAM,wBAAa;AAAA,MACpB,oBAAC,qBAAkB;AAAA,OACrB,GACF,IACE;AAAA,IACH,cACC,oBAAC,oBAAiB,eAAa,4BAA4B,QACzD,8BAAC,UAAM,uBAAY,GACrB,IACE;AAAA,KACN;AAEJ;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAChD,qBAAqB,YAAY;",
6
6
  "names": ["React", "dsId"]
7
7
  }
@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import { StyledBubbleArrow } from "./styled.js";
4
4
  import { describe } from "@elliemae/ds-props-helpers";
5
5
  import { BUBBLE_TYPES, propsArrowBubble } from "./react-desc-prop-types.js";
6
- const ChatBubbleArrow = ({ type, dsId }) => /* @__PURE__ */ jsx(StyledBubbleArrow, { children: type === BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ jsxs("svg", { width: "15px", height: "14px", viewBox: "0 0 15 14", "aria-hidden": "true", children: [
6
+ const ChatBubbleArrow = ({ type, dsId }) => /* @__PURE__ */ jsx(StyledBubbleArrow, { children: type === BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ jsxs("svg", { width: "1.15rem", height: "1.07rem", viewBox: "0 0 15 14", "aria-hidden": "true", children: [
7
7
  /* @__PURE__ */ jsxs("defs", { children: [
8
8
  /* @__PURE__ */ jsx(
9
9
  "path",
@@ -48,7 +48,7 @@ const ChatBubbleArrow = ({ type, dsId }) => /* @__PURE__ */ jsx(StyledBubbleArro
48
48
  ),
49
49
  /* @__PURE__ */ jsx("use", { fill: "#FFFFFF", fillRule: "evenodd", xlinkHref: `#arrow-svg-path-${dsId}` })
50
50
  ] }) })
51
- ] }) : /* @__PURE__ */ jsx("svg", { width: "9px", height: "8px", viewBox: "0 0 9 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsx(
51
+ ] }) : /* @__PURE__ */ jsx("svg", { width: "0.692rem", height: "0.615rem", viewBox: "0 0 9 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsx(
52
52
  "path",
53
53
  {
54
54
  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",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ChatBubbleArrow.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { StyledBubbleArrow } from './styled.js';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { BUBBLE_TYPES, type DSChatBubbleT, propsArrowBubble } from './react-desc-prop-types.js';\n\nexport const ChatBubbleArrow: React.ComponentType<Pick<DSChatBubbleT.Props, 'type' | 'dsId'>> = ({ type, dsId }) => (\n <StyledBubbleArrow>\n {type === BUBBLE_TYPES.RECIPIENT ? (\n <svg width=\"15px\" height=\"14px\" viewBox=\"0 0 15 14\" aria-hidden=\"true\">\n <defs>\n <path\n id={`arrow-svg-path-${dsId}`}\n d=\"M12,8.5 C12,7.9373169 11.6782751,7.4856453 11.2282104,7.196228 C11.2286673,7.1967363 3,2 3,2 L3,10 L10.5627441,10 L10.5658569,9.9933472 C11.3630371,9.9580688 12,9.3058472 12,8.5 Z\"\n ></path>\n <filter\n id={`arrow-svg-filter-${dsId}`}\n x=\"-55.6%\"\n y=\"-50.0%\"\n width=\"211.1%\"\n height=\"225.0%\"\n filterUnits=\"objectBoundingBox\"\n >\n <feOffset dx=\"2.3\" dy=\"1.2\" in=\"SourceAlpha\" result=\"shadowOffsetOuter1\"></feOffset>\n <feGaussianBlur stdDeviation=\"1.5\" in=\"shadowOffsetOuter1\" result=\"shadowBlurOuter1\"></feGaussianBlur>\n <feColorMatrix\n values=\"0 0 0 0 0.207843137 \n 0 0 0 0 0.235294118 \n 0 0 0 0 0.274509804 \n 0 0 0 0.8 0\"\n type=\"matrix\"\n in=\"shadowBlurOuter1\"\n ></feColorMatrix>\n </filter>\n </defs>\n <g stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n <g transform=\"translate(7.500000, 6.000000) scale(-1, 1) translate(-7.500000, -6.000000) \">\n <use\n fill=\"black\"\n fillOpacity=\"1\"\n filter={`url(#arrow-svg-filter-${dsId})`}\n xlinkHref={`#arrow-svg-path-${dsId}`}\n ></use>\n <use fill=\"#FFFFFF\" fillRule=\"evenodd\" xlinkHref={`#arrow-svg-path-${dsId}`}></use>\n </g>\n </g>\n </svg>\n ) : (\n <svg width=\"9px\" height=\"8px\" viewBox=\"0 0 9 8\" aria-hidden=\"true\">\n <g stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n <path\n d=\"M9,6.5 C9,5.9373169 8.6782751,5.4856453 8.2282104,5.196228 C8.2286673,5.1967363 0,0 0,0 L0,8 L7.5627441,8 L7.5658569,7.9933472 C8.3630371,7.9580688 9,7.3058472 9,6.5 Z\"\n fill=\"#1E79C2\"\n ></path>\n </g>\n </svg>\n )}\n </StyledBubbleArrow>\n);\n\nChatBubbleArrow.propTypes = propsArrowBubble;\nconst ChatBubbleArrowWithSchema = describe(ChatBubbleArrow);\nChatBubbleArrowWithSchema.propTypes = propsArrowBubble;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACUb,cAIA,YAJA;AATV,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AACzB,SAAS,cAAkC,wBAAwB;AAE5D,MAAM,kBAAmF,CAAC,EAAE,MAAM,KAAK,MAC5G,oBAAC,qBACE,mBAAS,aAAa,YACrB,qBAAC,SAAI,OAAM,QAAO,QAAO,QAAO,SAAQ,aAAY,eAAY,QAC9D;AAAA,uBAAC,UACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,kBAAkB;AAAA,QACtB,GAAE;AAAA;AAAA,IACH;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,oBAAoB;AAAA,QACxB,GAAE;AAAA,QACF,GAAE;AAAA,QACF,OAAM;AAAA,QACN,QAAO;AAAA,QACP,aAAY;AAAA,QAEZ;AAAA,8BAAC,cAAS,IAAG,OAAM,IAAG,OAAM,IAAG,eAAc,QAAO,sBAAqB;AAAA,UACzE,oBAAC,oBAAe,cAAa,OAAM,IAAG,sBAAqB,QAAO,oBAAmB;AAAA,UACrF;AAAA,YAAC;AAAA;AAAA,cACC,QAAO;AAAA,cAIP,MAAK;AAAA,cACL,IAAG;AAAA;AAAA,UACJ;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAAA,EACA,oBAAC,OAAE,QAAO,QAAO,aAAY,KAAI,MAAK,QAAO,UAAS,WACpD,+BAAC,OAAE,WAAU,+EACX;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAY;AAAA,QACZ,QAAQ,yBAAyB;AAAA,QACjC,WAAW,mBAAmB;AAAA;AAAA,IAC/B;AAAA,IACD,oBAAC,SAAI,MAAK,WAAU,UAAS,WAAU,WAAW,mBAAmB,QAAQ;AAAA,KAC/E,GACF;AAAA,GACF,IAEA,oBAAC,SAAI,OAAM,OAAM,QAAO,OAAM,SAAQ,WAAU,eAAY,QAC1D,8BAAC,OAAE,QAAO,QAAO,aAAY,KAAI,MAAK,QAAO,UAAS,WACpD;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAK;AAAA;AACN,GACH,GACF,GAEJ;AAGF,gBAAgB,YAAY;AAC5B,MAAM,4BAA4B,SAAS,eAAe;AAC1D,0BAA0B,YAAY;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { StyledBubbleArrow } from './styled.js';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { BUBBLE_TYPES, type DSChatBubbleT, propsArrowBubble } from './react-desc-prop-types.js';\n\nexport const ChatBubbleArrow: React.ComponentType<Pick<DSChatBubbleT.Props, 'type' | 'dsId'>> = ({ type, dsId }) => (\n <StyledBubbleArrow>\n {type === BUBBLE_TYPES.RECIPIENT ? (\n <svg width=\"1.15rem\" height=\"1.07rem\" viewBox=\"0 0 15 14\" aria-hidden=\"true\">\n <defs>\n <path\n id={`arrow-svg-path-${dsId}`}\n d=\"M12,8.5 C12,7.9373169 11.6782751,7.4856453 11.2282104,7.196228 C11.2286673,7.1967363 3,2 3,2 L3,10 L10.5627441,10 L10.5658569,9.9933472 C11.3630371,9.9580688 12,9.3058472 12,8.5 Z\"\n ></path>\n <filter\n id={`arrow-svg-filter-${dsId}`}\n x=\"-55.6%\"\n y=\"-50.0%\"\n width=\"211.1%\"\n height=\"225.0%\"\n filterUnits=\"objectBoundingBox\"\n >\n <feOffset dx=\"2.3\" dy=\"1.2\" in=\"SourceAlpha\" result=\"shadowOffsetOuter1\"></feOffset>\n <feGaussianBlur stdDeviation=\"1.5\" in=\"shadowOffsetOuter1\" result=\"shadowBlurOuter1\"></feGaussianBlur>\n <feColorMatrix\n values=\"0 0 0 0 0.207843137 \n 0 0 0 0 0.235294118 \n 0 0 0 0 0.274509804 \n 0 0 0 0.8 0\"\n type=\"matrix\"\n in=\"shadowBlurOuter1\"\n ></feColorMatrix>\n </filter>\n </defs>\n <g stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n <g transform=\"translate(7.500000, 6.000000) scale(-1, 1) translate(-7.500000, -6.000000) \">\n <use\n fill=\"black\"\n fillOpacity=\"1\"\n filter={`url(#arrow-svg-filter-${dsId})`}\n xlinkHref={`#arrow-svg-path-${dsId}`}\n ></use>\n <use fill=\"#FFFFFF\" fillRule=\"evenodd\" xlinkHref={`#arrow-svg-path-${dsId}`}></use>\n </g>\n </g>\n </svg>\n ) : (\n <svg width=\"0.692rem\" height=\"0.615rem\" viewBox=\"0 0 9 8\" aria-hidden=\"true\">\n <g stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n <path\n d=\"M9,6.5 C9,5.9373169 8.6782751,5.4856453 8.2282104,5.196228 C8.2286673,5.1967363 0,0 0,0 L0,8 L7.5627441,8 L7.5658569,7.9933472 C8.3630371,7.9580688 9,7.3058472 9,6.5 Z\"\n fill=\"#1E79C2\"\n ></path>\n </g>\n </svg>\n )}\n </StyledBubbleArrow>\n);\n\nChatBubbleArrow.propTypes = propsArrowBubble;\nconst ChatBubbleArrowWithSchema = describe(ChatBubbleArrow);\nChatBubbleArrowWithSchema.propTypes = propsArrowBubble;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACUb,cAIA,YAJA;AATV,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AACzB,SAAS,cAAkC,wBAAwB;AAE5D,MAAM,kBAAmF,CAAC,EAAE,MAAM,KAAK,MAC5G,oBAAC,qBACE,mBAAS,aAAa,YACrB,qBAAC,SAAI,OAAM,WAAU,QAAO,WAAU,SAAQ,aAAY,eAAY,QACpE;AAAA,uBAAC,UACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,kBAAkB;AAAA,QACtB,GAAE;AAAA;AAAA,IACH;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,oBAAoB;AAAA,QACxB,GAAE;AAAA,QACF,GAAE;AAAA,QACF,OAAM;AAAA,QACN,QAAO;AAAA,QACP,aAAY;AAAA,QAEZ;AAAA,8BAAC,cAAS,IAAG,OAAM,IAAG,OAAM,IAAG,eAAc,QAAO,sBAAqB;AAAA,UACzE,oBAAC,oBAAe,cAAa,OAAM,IAAG,sBAAqB,QAAO,oBAAmB;AAAA,UACrF;AAAA,YAAC;AAAA;AAAA,cACC,QAAO;AAAA,cAIP,MAAK;AAAA,cACL,IAAG;AAAA;AAAA,UACJ;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAAA,EACA,oBAAC,OAAE,QAAO,QAAO,aAAY,KAAI,MAAK,QAAO,UAAS,WACpD,+BAAC,OAAE,WAAU,+EACX;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAY;AAAA,QACZ,QAAQ,yBAAyB;AAAA,QACjC,WAAW,mBAAmB;AAAA;AAAA,IAC/B;AAAA,IACD,oBAAC,SAAI,MAAK,WAAU,UAAS,WAAU,WAAW,mBAAmB,QAAQ;AAAA,KAC/E,GACF;AAAA,GACF,IAEA,oBAAC,SAAI,OAAM,YAAW,QAAO,YAAW,SAAQ,WAAU,eAAY,QACpE,8BAAC,OAAE,QAAO,QAAO,aAAY,KAAI,MAAK,QAAO,UAAS,WACpD;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAK;AAAA;AACN,GACH,GACF,GAEJ;AAGF,gBAAgB,YAAY;AAC5B,MAAM,4BAA4B,SAAS,eAAe;AAC1D,0BAA0B,YAAY;",
6
6
  "names": []
7
7
  }
@@ -18,37 +18,37 @@ const StyledTitleBubble = styled(Grid)`
18
18
  padding-bottom: 4px;
19
19
  `;
20
20
  const StyledTitleLeftBubble = styled("div")`
21
- font-size: 13px;
21
+ font-size: 1rem;
22
22
  font-weight: 600;
23
23
  ${wrapRules}
24
24
  `;
25
25
  const StyledTitleRightBubble = styled(Grid)`
26
- font-size: 13px;
26
+ font-size: 1rem;
27
27
  font-weight: 400;
28
28
  align-self: flex-start;
29
29
  color: ${(props) => props.type === BUBBLE_TYPES.SENDER ? "#FFF" : "#657489"};
30
30
  `;
31
31
  const StyleBodyWrapper = styled.div`
32
- font-size: 13px;
32
+ font-size: 1rem;
33
33
  font-weight: 400;
34
- line-height: 15px;
34
+ line-height: 1.15;
35
35
  min-height: 18px;
36
36
  padding: 0px 10px 8px 10px;
37
37
  `;
38
38
  const StyleErrorMessage = styled.div`
39
- font-size: 12px;
39
+ font-size: 0.923rem;
40
40
  font-weight: 400;
41
41
  padding-top: ${(props) => props.theme.space.xxxs};
42
42
  color: ${(props) => props.theme.colors.danger[900]};
43
43
  align-items: flex-end;
44
44
  justify-content: center;
45
45
  text-align: right;
46
- line-height: 15px;
46
+ line-height: 1.15;
47
47
  svg {
48
48
  fill: ${(props) => props.theme.colors.danger[900]};
49
49
  }
50
50
  a {
51
- font-size: 12px;
51
+ font-size: 0.923rem;
52
52
  color: ${(props) => props.theme.colors.danger[900]};
53
53
  }
54
54
  .em-ds-icon {
@@ -56,8 +56,8 @@ const StyleErrorMessage = styled.div`
56
56
  }
57
57
  `;
58
58
  const StyleHelpMessage = styled(StyleErrorMessage)`
59
- font-size: 12px;
60
- line-height: 15px;
59
+ font-size: 0.923rem;
60
+ line-height: 1.15;
61
61
  color: ${(props) => props.theme.colors.neutral[600]};
62
62
  svg {
63
63
  fill: ${(props) => props.theme.colors.danger[900]};
@@ -71,8 +71,8 @@ const StyledBubbleArrow = styled.div`
71
71
  display: block;
72
72
  content: '';
73
73
  position: absolute;
74
- bottom: 10px;
75
- height: 15px;
74
+ bottom: 0.769rem;
75
+ height: 1.15rem;
76
76
  `;
77
77
  const StyledColoredBubble = styled.div`
78
78
  min-width: 224px;
@@ -84,8 +84,8 @@ const StyledColoredBubble = styled.div`
84
84
  background: ${props.theme.colors.brand[600]};
85
85
  color: ${props.theme.colors.neutral["000"]};
86
86
  ${StyledBubbleArrow}{
87
- right: -9px;
88
- bottom: 6px;
87
+ right: -0.692rem;
88
+ bottom: 0.461rem;
89
89
  svg{
90
90
  fill: ${props.theme.colors.brand[600]};
91
91
  }
@@ -101,8 +101,8 @@ const StyledColoredBubble = styled.div`
101
101
  color: ${props.theme.colors.neutral[700]};
102
102
 
103
103
  ${StyledBubbleArrow}{
104
- left: -11px;
105
- bottom: 6px;
104
+ left: -0.846rem;
105
+ bottom: 0.461rem;
106
106
  svg{
107
107
  fill: ${props.theme.colors.neutral["000"]};
108
108
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
4
- "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 } from './react-desc-prop-types.js';\n\nconst wrapRules = css`\n overflow-wrap: break-word;\n white-space: pre-wrap;\n`;\n// Bubble WRAPPER\nexport const StyledWrapper = styled.div`\n min-width: 224px;\n border-radius: 10px;\n ${wrapRules}\n`;\n\n// Bubble HEADER\nexport const StyledTitleBubble = styled(Grid)`\n padding-top: 6px;\n padding-left: 10px;\n padding-right: 10px;\n padding-bottom: 4px;\n`;\n\nexport const StyledTitleLeftBubble = styled('div')`\n font-size: 13px;\n font-weight: 600;\n ${wrapRules}\n`;\nexport const StyledTitleRightBubble = styled(Grid)<{ type: string }>`\n font-size: 13px;\n font-weight: 400;\n align-self: flex-start;\n color: ${(props) => (props.type === BUBBLE_TYPES.SENDER ? '#FFF' : '#657489')};\n`;\n\nexport const StyleBodyWrapper = styled.div`\n font-size: 13px;\n font-weight: 400;\n line-height: 15px;\n min-height: 18px;\n padding: 0px 10px 8px 10px;\n`;\n\nexport const StyleErrorMessage = styled.div`\n font-size: 12px;\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: 15px;\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 .em-ds-icon {\n margin-left: 8px;\n }\n`;\n\nexport const StyleHelpMessage = styled(StyleErrorMessage)`\n font-size: 12px;\n line-height: 15px;\n color: ${(props) => props.theme.colors.neutral[600]};\n svg {\n fill: ${(props) => props.theme.colors.danger[900]};\n }\n a {\n font-size: 12px;\n color: ${(props) => props.theme.colors.danger[900]};\n }\n`;\n\n// bubble sender/ recipient\nexport const StyledBubbleArrow = styled.div`\n display: block;\n content: '';\n position: absolute;\n bottom: 10px;\n height: 15px;\n`;\n\nexport const StyledColoredBubble = styled.div<{ type: string }>`\n min-width: 224px;\n border-radius: 10px;\n position: relative;\n\n ${(props) =>\n props.type === BUBBLE_TYPES.SENDER\n ? `\n border: 1px solid ${props.theme.colors.brand['700']};\n background: ${props.theme.colors.brand[600]};\n color: ${props.theme.colors.neutral['000']};\n ${StyledBubbleArrow}{ \n right: -9px;\n bottom: 6px;\n svg{\n fill: ${props.theme.colors.brand[600]};\n }\n }\n\n a {\n color: #FFF;\n }\n\n `\n : `\n box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);\n background: ${props.theme.colors.neutral['000']};\n color: ${props.theme.colors.neutral[700]};\n\n ${StyledBubbleArrow}{ \n left: -11px;\n bottom: 6px;\n svg{\n fill: ${props.theme.colors.neutral['000']};\n }\n }\n\n `}\n`;\n"],
4
+ "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 } from './react-desc-prop-types.js';\n\nconst wrapRules = css`\n overflow-wrap: break-word;\n white-space: pre-wrap;\n`;\n// Bubble WRAPPER\nexport const StyledWrapper = styled.div`\n min-width: 224px;\n border-radius: 10px;\n ${wrapRules}\n`;\n\n// Bubble HEADER\nexport const StyledTitleBubble = styled(Grid)`\n padding-top: 6px;\n padding-left: 10px;\n padding-right: 10px;\n padding-bottom: 4px;\n`;\n\nexport const StyledTitleLeftBubble = styled('div')`\n font-size: 1rem;\n font-weight: 600;\n ${wrapRules}\n`;\nexport const StyledTitleRightBubble = styled(Grid)<{ type: string }>`\n font-size: 1rem;\n font-weight: 400;\n align-self: flex-start;\n color: ${(props) => (props.type === BUBBLE_TYPES.SENDER ? '#FFF' : '#657489')};\n`;\n\nexport const StyleBodyWrapper = styled.div`\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.15;\n min-height: 18px;\n padding: 0px 10px 8px 10px;\n`;\n\nexport const StyleErrorMessage = styled.div`\n font-size: 0.923rem;\n font-weight: 400;\n padding-top: ${(props) => props.theme.space.xxxs};\n color: ${(props) => props.theme.colors.danger[900]};\n align-items: flex-end;\n justify-content: center;\n text-align: right;\n line-height: 1.15;\n svg {\n fill: ${(props) => props.theme.colors.danger[900]};\n }\n a {\n font-size: 0.923rem;\n color: ${(props) => props.theme.colors.danger[900]};\n }\n .em-ds-icon {\n margin-left: 8px;\n }\n`;\n\nexport const StyleHelpMessage = styled(StyleErrorMessage)`\n font-size: 0.923rem;\n line-height: 1.15;\n color: ${(props) => props.theme.colors.neutral[600]};\n svg {\n fill: ${(props) => props.theme.colors.danger[900]};\n }\n a {\n font-size: 12px;\n color: ${(props) => props.theme.colors.danger[900]};\n }\n`;\n\n// bubble sender/ recipient\nexport const StyledBubbleArrow = styled.div`\n display: block;\n content: '';\n position: absolute;\n bottom: 0.769rem;\n height: 1.15rem;\n`;\n\nexport const StyledColoredBubble = styled.div<{ type: string }>`\n min-width: 224px;\n border-radius: 10px;\n position: relative;\n\n ${(props) =>\n props.type === BUBBLE_TYPES.SENDER\n ? `\n border: 1px solid ${props.theme.colors.brand['700']};\n background: ${props.theme.colors.brand[600]};\n color: ${props.theme.colors.neutral['000']};\n ${StyledBubbleArrow}{ \n right: -0.692rem;\n bottom: 0.461rem;\n svg{\n fill: ${props.theme.colors.brand[600]};\n }\n }\n\n a {\n color: #FFF;\n }\n\n `\n : `\n box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);\n background: ${props.theme.colors.neutral['000']};\n color: ${props.theme.colors.neutral[700]};\n\n ${StyledBubbleArrow}{ \n left: -0.846rem;\n bottom: 0.461rem;\n svg{\n fill: ${props.theme.colors.neutral['000']};\n }\n }\n\n `}\n`;\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,WAAW;AAC5B,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAE7B,MAAM,YAAY;AAAA;AAAA;AAAA;AAKX,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA,IAGhC;AAAA;AAIG,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrC,MAAM,wBAAwB,OAAO,KAAK;AAAA;AAAA;AAAA,IAG7C;AAAA;AAEG,MAAM,yBAAyB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA,WAItC,CAAC,UAAW,MAAM,SAAS,aAAa,SAAS,SAAS;AAAA;AAG9D,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQhC,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA,iBAGvB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WACnC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMvC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA,aAIvC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,mBAAmB,OAAO,iBAAiB;AAAA;AAAA;AAAA,WAG7C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,YAExC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA,aAIvC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAK9C,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjC,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKtC,CAAC,UACD,MAAM,SAAS,aAAa,SACxB;AAAA,4BACoB,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA,sBACpC,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,iBACjC,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,UACvC;AAAA;AAAA;AAAA;AAAA,wBAIc,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAS5C;AAAA;AAAA,sBAEc,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,iBACrC,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,UAErC;AAAA;AAAA;AAAA;AAAA,wBAIc,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-chat-bubble",
3
- "version": "3.32.0-rc.6",
3
+ "version": "3.32.0-rc.7",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Chat",
6
6
  "files": [
@@ -52,15 +52,15 @@
52
52
  },
53
53
  "dependencies": {
54
54
  "uid": "2.0.1",
55
- "@elliemae/ds-grid": "3.32.0-rc.6",
56
- "@elliemae/ds-icons": "3.32.0-rc.6",
57
- "@elliemae/ds-props-helpers": "3.32.0-rc.6",
58
- "@elliemae/ds-system": "3.32.0-rc.6"
55
+ "@elliemae/ds-grid": "3.32.0-rc.7",
56
+ "@elliemae/ds-props-helpers": "3.32.0-rc.7",
57
+ "@elliemae/ds-system": "3.32.0-rc.7",
58
+ "@elliemae/ds-icons": "3.32.0-rc.7"
59
59
  },
60
60
  "devDependencies": {
61
61
  "@elliemae/pui-cli": "~9.0.0-next.31",
62
62
  "styled-components": "~5.3.9",
63
- "@elliemae/ds-monorepo-devops": "3.32.0-rc.6"
63
+ "@elliemae/ds-monorepo-devops": "3.32.0-rc.7"
64
64
  },
65
65
  "peerDependencies": {
66
66
  "lodash": "^4.17.21",