@elliemae/ds-chat 2.0.0-next.1 → 2.0.0-next.6

package/cjs/parts/bubble/ChatBubble.js

@@ -31,7 +31,7 @@ const ChatBubble = props => {
     helpMessage
   } = props;
   return /*#__PURE__*/_jsx__default["default"](styled.StyledWrapper, {
-    "data-testid": `ds-chat-bubble-${dsId}`,
+    "data-testid": "ds-chat-bubble-".concat(dsId),
     type: type
   }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledColoredBubble, {
     type: type
@@ -42,22 +42,22 @@ const ChatBubble = props => {
     className: "sr-only"
   }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledTitleLeftBubble, {
     alignItems: "center",
-    "data-testid": `chat-bubble-title-${dsId}`
+    "data-testid": "chat-bubble-title-".concat(dsId)
   }, void 0, title), /*#__PURE__*/_jsx__default["default"](styled.StyledTitleRightBubble, {
     alignItems: "center",
     type: type,
-    "data-testid": `chat-bubble-time-${dsId}`
+    "data-testid": "chat-bubble-time-".concat(dsId)
   }, void 0, time)), /*#__PURE__*/_jsx__default["default"](styled.StyleBodyWrapper, {
-    "data-testid": `chat-bubble-body-${dsId}`
+    "data-testid": "chat-bubble-body-".concat(dsId)
   }, void 0, body), /*#__PURE__*/_jsx__default["default"](ChatBubbleArrow.ChatBubbleArrow, {
     type: type
   })), errorMessage ? /*#__PURE__*/_jsx__default["default"](styled.StyleErrorMessage, {
-    "data-testid": `chat-bubble-error-message-${dsId}`,
+    "data-testid": "chat-bubble-error-message-".concat(dsId),
     p: "xxs",
     gutter: "xxs",
     cols: [1, 'auto']
   }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, errorMessage), _Warning || (_Warning = /*#__PURE__*/_jsx__default["default"](Warning__default["default"], {}))) : null, helpMessage ? /*#__PURE__*/_jsx__default["default"](styled.StyleHelpMessage, {
-    "data-testid": `chat-bubble-help-message-${dsId}`,
+    "data-testid": "chat-bubble-help-message-".concat(dsId),
     p: "xxs",
     gutter: "xxs",
     cols: [1, 'auto']

package/cjs/parts/bubble/config/useValidateProps.js

@@ -5,27 +5,26 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 
 const throwError = message => {
-  throw new Error(`Bubble:: ${message}
-  `);
+  throw new Error("Bubble:: ".concat(message, "\n  "));
 };
 
 const useValidateProps = (props, schema) => {
   dsPropsHelpers.useValidatePropTypes(props, schema);
 
   if (typeof props.title === 'undefined') {
-    throwError(`Please provide a title property to use this component.`);
+    throwError("Please provide a title property to use this component.");
   }
 
   if (typeof props.time === 'undefined') {
-    throwError(`Please provide a time property to use this component.`);
+    throwError("Please provide a time property to use this component.");
   }
 
   if (typeof props.body === 'undefined') {
-    throwError(`Please provide a body property to use this component.`);
+    throwError("Please provide a body property to use this component.");
   }
 
   if (typeof props.type === 'undefined') {
-    throwError(`Please provide a type property to use this component.`);
+    throwError("Please provide a type property to use this component.");
   }
 };
 

package/cjs/parts/bubble/styled.js

@@ -40,36 +40,7 @@ const StyledBubbleArrow = /*#__PURE__*/styled__default["default"].div.withConfig
 })(["display:block;content:'';position:absolute;bottom:10px;height:15px;"]);
 const StyledColoredBubble = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-fe8e9o-8"
-})(["min-width:224px;border-radius:10px;position:relative;", ""], props$1 => props$1.type === props.BUBBLE_TYPES.SENDER ? `
-        border: 1px solid ${props$1.theme.colors.brand['700']};
-        background: ${props$1.theme.colors.brand[600]};
-        color: ${props$1.theme.colors.neutral['000']};
-        ${StyledBubbleArrow}{            
-            right: -9px;
-            bottom: 6px;
-            svg{
-                fill: ${props$1.theme.colors.brand[600]};
-            }
-        }
-
-        a {
-          color: #FFF;
-        }
-
-    ` : `
-        box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);
-        background: ${props$1.theme.colors.neutral['000']};
-        color: ${props$1.theme.colors.neutral[700]};
-
-        ${StyledBubbleArrow}{            
-            left: -11px;
-            bottom: 6px;
-            svg{
-                fill: ${props$1.theme.colors.neutral['000']};
-            }
-        }
-
-    `);
+})(["min-width:224px;border-radius:10px;position:relative;", ""], props$1 => props$1.type === props.BUBBLE_TYPES.SENDER ? "\n        border: 1px solid ".concat(props$1.theme.colors.brand['700'], ";\n        background: ").concat(props$1.theme.colors.brand[600], ";\n        color: ").concat(props$1.theme.colors.neutral['000'], ";\n        ").concat(StyledBubbleArrow, "{            \n            right: -9px;\n            bottom: 6px;\n            svg{\n                fill: ").concat(props$1.theme.colors.brand[600], ";\n            }\n        }\n\n        a {\n          color: #FFF;\n        }\n\n    ") : "\n        box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);\n        background: ".concat(props$1.theme.colors.neutral['000'], ";\n        color: ").concat(props$1.theme.colors.neutral[700], ";\n\n        ").concat(StyledBubbleArrow, "{            \n            left: -11px;\n            bottom: 6px;\n            svg{\n                fill: ").concat(props$1.theme.colors.neutral['000'], ";\n            }\n        }\n\n    "));
 
 exports.StyleBodyWrapper = StyleBodyWrapper;
 exports.StyleErrorMessage = StyleErrorMessage;

package/cjs/parts/chat-card/props.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var reactDesc = require('react-desc');
 
 const propTypes = {
-  title: reactDesc.PropTypes.string.isRequired.description(`Card's title`),
-  content: reactDesc.PropTypes.string.description(`Card's content`),
+  title: reactDesc.PropTypes.string.isRequired.description("Card's title"),
+  content: reactDesc.PropTypes.string.description("Card's content"),
   time: reactDesc.PropTypes.string.description('Time'),
   rightAddon: reactDesc.PropTypes.element.description('Right addon, badge or icon')
 };

package/cjs/parts/chat-composer/ChatContainerComposer.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('core-js/modules/web.url.to-json.js');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var dsGrid = require('@elliemae/ds-grid');
 var reactDesc = require('react-desc');
@@ -81,7 +82,7 @@ const ChatComposer = props => {
   const hasError = React__default["default"].useMemo(() => inputLength > inputMaxLength, [inputLength, inputMaxLength]);
   return /*#__PURE__*/_jsx__default["default"](styled.StyledChatContainerContentComposer, {
     rows: ['auto', '15px'],
-    maxHeight: `${maxHeight}px`,
+    maxHeight: "".concat(maxHeight, "px"),
     "data-testid": dataTestid
   }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     cols: ['1fr', '24px'],
@@ -139,7 +140,7 @@ const ChatComposer = props => {
     children: [/*#__PURE__*/_jsx__default["default"](styled.StyledCounterErrorA11y, {
       role: "alert"
     }, void 0, "You have exceeded the character limit by ", inputLength - inputMaxLength), "Please limit to less than ", inputMaxLength, " characters.", ' ']
-  }) : '', inputMaxLength ? `${inputLength} / ${inputMaxLength}` : ''), _Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}))));
+  }) : '', inputMaxLength ? "".concat(inputLength, " / ").concat(inputMaxLength) : ''), _Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}))));
 };
 
 ChatComposer.defaultProps = props.defaultComposerPros;

package/cjs/parts/chat-composer/props.js

@@ -31,17 +31,7 @@ const composerProps = {
   inputMaxLength: reactDesc.PropTypes.number.description('Max length of the composer. `undefined` for no limit').defaultValue(defaultComposerPros.inputMaxLength),
   buttonDisabled: reactDesc.PropTypes.bool.description('Control the disabled for the send button').defaultValue(defaultComposerPros.buttonDisabled),
   dataTestid: reactDesc.PropTypes.string.description('Data testid').defaultValue(defaultComposerPros.placeholder),
-  actionRef: reactDesc.PropTypes.object.description(`Reference: 
-        { 
-          scrollToIndex: (n: number) => void,
-          getMessagesInView: () => number[],
-          focusToIndex: (n: number) => void,
-          focusToList: () => void,
-          focusToComposer: () => void,
-          focusToSend: () => void,
-        }
-        
-      `).defaultValue(defaultComposerPros.actionRef)
+  actionRef: reactDesc.PropTypes.object.description("Reference: \n        { \n          scrollToIndex: (n: number) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      ").defaultValue(defaultComposerPros.actionRef)
 };
 
 exports.composerProps = composerProps;

package/cjs/parts/chat-composer/styled.js

@@ -16,13 +16,13 @@ const StyledChatContainerContentComposer = /*#__PURE__*/styled__default["default
 })(["width:100%;min-height:56px;background:", ";padding:", ";padding-bottom:3px;padding-top:6px;padding-left:", ";max-height:", ";border-top:1px solid #cbcfd7;"], props => props.theme.colors.neutral['050'], props => props.theme.space.xxs, props => props.theme.space.xs, props => props.maxHeight);
 const StyledComposerInput = /*#__PURE__*/styled__default["default"].textarea.withConfig({
   componentId: "sc-1ahwpce-1"
-})(["padding:", ";resize:none;min-height:32px;border-radius:2px;border:solid 1px #cbcfd7;color:#25292f;height:", ";min-width:244px;overflow-y:auto;font-size:13px;font-weight:400;line-height:1;transition:height 0.3s;&:focus{outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px #8cc2ed;border-radius:2px;}"], props => props.theme.space.xxs, props => typeof props.height === 'number' ? `${props.height}px` : props.height, props => props.theme.colors.brand[600]);
+})(["padding:", ";resize:none;min-height:32px;border-radius:2px;border:solid 1px #cbcfd7;color:#25292f;height:", ";min-width:244px;overflow-y:auto;font-size:13px;font-weight:400;line-height:1;transition:height 0.3s;&:focus{outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px #8cc2ed;border-radius:2px;}"], props => props.theme.space.xxs, props => typeof props.height === 'number' ? "".concat(props.height, "px") : props.height, props => props.theme.colors.brand[600]);
 const StyledComposerButton = /*#__PURE__*/styled__default["default"](dsButton.DSButton).withConfig({
   componentId: "sc-1ahwpce-2"
 })(["&:disabled{background:none;svg{fill:#5d6775;}}svg{fill:", ";}&:focus{background:", ";}"], props => props.theme.colors.brand[600], props => props.theme.colors.brand[200]);
 const StyledCounterArea = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-1ahwpce-3"
-})(["text-align:right;font-size:11px;height:15px;align-items:center;font-style:italic;", " position:relative;"], props => props.hasError ? `color:${props.theme.colors.danger[900]};` : '');
+})(["text-align:right;font-size:11px;height:15px;align-items:center;font-style:italic;", " position:relative;"], props => props.hasError ? "color:".concat(props.theme.colors.danger[900], ";") : '');
 const StyledCounterErrorA11y = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-1ahwpce-4"
 })(["width:1px;height:1px;position:absolute;clip:rect(1px,1px,1px,1px);"]);

package/cjs/parts/chat-container/props.js

@@ -38,17 +38,7 @@ const containerProps = {
   bannerProps: reactDesc.PropTypes.object.description('Banner configuration').defaultValue(defaultProps.bannerProps),
   sendingMessages: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string), reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.number)]).description('Array of ids of sending messages').defaultValue(defaultProps.sendingMessages),
   sendingText: reactDesc.PropTypes.string.description('Label description for messages in sending status').defaultValue(defaultProps.sendingText),
-  actionRef: reactDesc.PropTypes.object.description(`Reference: 
-        { 
-          scrollToIndex: (n: number) => void,
-          getMessagesInView: () => number[],
-          focusToIndex: (n: number) => void,
-          focusToList: () => void,
-          focusToComposer: () => void,
-          focusToSend: () => void,
-        }
-        
-      `).defaultValue(defaultProps.actionRef)
+  actionRef: reactDesc.PropTypes.object.description("Reference: \n        { \n          scrollToIndex: (n: number) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      ").defaultValue(defaultProps.actionRef)
 };
 
 exports.containerProps = containerProps;

package/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js

@@ -84,7 +84,7 @@ const ChatContainerMessagesList = props => {
       align: 'center'
     });
     setTimeout(() => {
-      virtualListRef.current.querySelector(`[data-index="${index}"]`).focus();
+      virtualListRef.current.querySelector("[data-index=\"".concat(index, "\"]")).focus();
     }, 300);
   }, [vScroll]);
   React__default["default"].useEffect(() => {
@@ -121,12 +121,12 @@ const ChatContainerMessagesList = props => {
 
     switch (key) {
       case 'ArrowUp':
-        if (index > 0) virtualListRef.current.querySelector(`[data-index="${index - 1}"]`).focus();
+        if (index > 0) virtualListRef.current.querySelector("[data-index=\"".concat(index - 1, "\"]")).focus();
         break;
 
       case 'ArrowDown':
         if (index < messages.length - 1) {
-          virtualListRef.current.querySelector(`[data-index="${index + 1}"]`).focus();
+          virtualListRef.current.querySelector("[data-index=\"".concat(index + 1, "\"]")).focus();
         }
 
         break;
@@ -174,7 +174,7 @@ const ChatContainerMessagesList = props => {
       position: 'absolute',
       top: 0,
       left: 0,
-      transform: `translateY(${start}px)`,
+      transform: "translateY(".concat(start, "px)"),
       width: '100%'
     };
     return /*#__PURE__*/jsxRuntime.jsx(styled.ListItem, {
@@ -193,7 +193,7 @@ const ChatContainerMessagesList = props => {
       jsxRuntime.jsx(ChatBubble.ChatBubble, _objectSpread(_objectSpread({}, row), {}, {
         helpMessage: isSending ? sendingText : row.helpMessage
       })) : null, row.type === props$1.BUBBLE_TYPES.DELIMITER ? /*#__PURE__*/jsxRuntime.jsx(MessageDelimiter.MessageDelimiter, _objectSpread({}, row)) : null, row.type === props$1.BUBBLE_TYPES.SYSTEM ? /*#__PURE__*/jsxRuntime.jsx(SystemMessage.SystemMessage, _objectSpread({}, row)) : null)
-    }, `ds-chat-bubble-${index}`);
+    }, "ds-chat-bubble-".concat(index));
   }), [virtualItems, messages, sendingMessages, handleKey, sendingText]);
   return /*#__PURE__*/_jsx__default["default"](styled.StyledWrapper, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(styled.StyledChatContainerContentList, {
     "data-testid": "chat-thread-container",
@@ -203,7 +203,7 @@ const ChatContainerMessagesList = props => {
     role: "list",
     onKeyDown: handleKey,
     children: /*#__PURE__*/_jsx__default["default"](styled.StyledChatContainerContentListScroll, {
-      height: `${totalSize}px`
+      height: "".concat(totalSize, "px")
     }, void 0, render, !isLoading && hasMoreItems ? /*#__PURE__*/_jsx__default["default"](styled.StyledLoadMoreContainer, {
       hasMoreItems: hasMoreItems
     }, void 0, /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {

package/cjs/parts/chat-container-messages-list/props.js

@@ -15,18 +15,8 @@ const defaultProps = {
 };
 const listProps = {
   messages: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.object).description('The array of out-of-the-box items you want to render inside the ChatMessageList').defaultValue(defaultProps.messages),
-  actionRef: reactDesc.PropTypes.object.description(`Reference: 
-        { 
-          scrollToIndex: (n: number) => void,
-          getMessagesInView: () => number[],
-          focusToIndex: (n: number) => void,
-          focusToList: () => void,
-          focusToComposer: () => void,
-          focusToSend: () => void,
-        }
-        
-      `).defaultValue(defaultProps.actionRef),
-  onScrollEnds: reactDesc.PropTypes.func.description(`Called when the scroll stops.`),
+  actionRef: reactDesc.PropTypes.object.description("Reference: \n        { \n          scrollToIndex: (n: number) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      ").defaultValue(defaultProps.actionRef),
+  onScrollEnds: reactDesc.PropTypes.func.description("Called when the scroll stops."),
   isLoading: reactDesc.PropTypes.oneOf(['top', 'bottom', undefined]).description('Keeps the load more space while the loading is in progress'),
   hasMoreItems: reactDesc.PropTypes.oneOf(['top', 'bottom', undefined]).description('Show Load More button at the `top` or `bottom` of the container'),
   getMoreMessages: reactDesc.PropTypes.func.description('Called when the user clicks on load more').defaultValue(defaultProps.getMoreMessages),

package/cjs/parts/chat-container-messages-list/styled.js

@@ -16,11 +16,7 @@ const StyledWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
 
 const StyledWrapperListItem = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1jhprzr-1"
-})(["min-width:100%;", ";", ";", ";"], props$1 => props$1.type === props.BUBBLE_TYPES.SENDER && `padding: ${props$1.theme.space.xxs} ${props$1.theme.space.xxs} 0px 13%
-  `, props$1 => props$1.type === props.BUBBLE_TYPES.RECIPIENT && `padding: ${props$1.theme.space.xxs} 13% ${props$1.theme.space.xxs}
-    ${props$1.theme.space.xxs}
-  `, props$1 => props$1.type === props.BUBBLE_TYPES.SYSTEM && `padding: ${props$1.theme.space.xxs} 0px
-  `);
+})(["min-width:100%;", ";", ";", ";"], props$1 => props$1.type === props.BUBBLE_TYPES.SENDER && "padding: ".concat(props$1.theme.space.xxs, " ").concat(props$1.theme.space.xxs, " 0px 13%\n  "), props$1 => props$1.type === props.BUBBLE_TYPES.RECIPIENT && "padding: ".concat(props$1.theme.space.xxs, " 13% ").concat(props$1.theme.space.xxs, "\n    ").concat(props$1.theme.space.xxs, "\n  "), props$1 => props$1.type === props.BUBBLE_TYPES.SYSTEM && "padding: ".concat(props$1.theme.space.xxs, " 0px\n  "));
 const StyledChatContainerContentList = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1jhprzr-2"
 })(["width:100%;height:100%;padding:", ";padding-bottom:0;overflow-y:auto;overflow-x:hidden;"], props => props.theme.space.xs);

package/cjs/parts/grid-influencer/styled.js

@@ -12,14 +12,10 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledChatContainer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-b6t5vk-0"
-})(["height:100%;width:", ";background:", ";box-shadow:-1px 0 0 0 ", ";transition:width ", " 350ms;"], props => props.expanded ? `${props.expandedWidth}px` : `${styled$1.MIN_WIDTH_SIDEBAR}px`, props => props.theme.colors.neutral['050'], props => props.theme.colors.neutral[100], props => props.expanded ? 'ease-out' : 'ease-in');
+})(["height:100%;width:", ";background:", ";box-shadow:-1px 0 0 0 ", ";transition:width ", " 350ms;"], props => props.expanded ? "".concat(props.expandedWidth, "px") : "".concat(styled$1.MIN_WIDTH_SIDEBAR, "px"), props => props.theme.colors.neutral['050'], props => props.theme.colors.neutral[100], props => props.expanded ? 'ease-out' : 'ease-in');
 const StyledChatContainerContent = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-b6t5vk-1"
-})(["height:100%;overflow:hidden;background:", ";", ""], props => props.theme.colors.neutral['050'], props => props.floating ? `
-  width: ${props.expandedWidth}px;
-` : `
-  width: ${props.expandedWidth - styled$1.MIN_WIDTH_SIDEBAR}px;
-`);
+})(["height:100%;overflow:hidden;background:", ";", ""], props => props.theme.colors.neutral['050'], props => props.floating ? "\n  width: ".concat(props.expandedWidth, "px;\n") : "\n  width: ".concat(props.expandedWidth - styled$1.MIN_WIDTH_SIDEBAR, "px;\n"));
 
 exports.StyledChatContainer = StyledChatContainer;
 exports.StyledChatContainerContent = StyledChatContainerContent;

package/cjs/parts/message-delimiter/styled.js

@@ -17,7 +17,7 @@ const Line = /*#__PURE__*/styled__default["default"].span.withConfig({
 })(["border-top:1px solid ", ";"], props => props.theme.colors.neutral['400']);
 const Text = /*#__PURE__*/styled__default["default"].p.withConfig({
   componentId: "sc-upz0rt-2"
-})(["color:", ";font-size:", ";font-weight:", ";margin:", ";"], props => props.theme.colors.neutral['600'], props => props.size === 's' ? '12px' : '14px', props => props.theme.fontWeights.semibold, props => typeof props.verticalMargin === 'number' ? `${props.verticalMargin}px 8px` : `${props.verticalMargin} 8px`);
+})(["color:", ";font-size:", ";font-weight:", ";margin:", ";"], props => props.theme.colors.neutral['600'], props => props.size === 's' ? '12px' : '14px', props => props.theme.fontWeights.semibold, props => typeof props.verticalMargin === 'number' ? "".concat(props.verticalMargin, "px 8px") : "".concat(props.verticalMargin, " 8px"));
 
 exports.Line = Line;
 exports.Text = Text;

package/cjs/parts/sidebar-button/SidebarButton.js

@@ -35,7 +35,7 @@ const SidebarButton = _ref => {
     onClick(dsId);
   }, [onClick, dsId]);
   return /*#__PURE__*/jsxRuntime.jsxs(styled.StyledSidebarButton, _objectSpread(_objectSpread({
-    "data-testid": `sidebar-button-${dsId}`,
+    "data-testid": "sidebar-button-".concat(dsId),
     onClick: handleClick
   }, rest), {}, {
     children: [/*#__PURE__*/_jsx__default["default"](styled.StyledSidebarButtonIcon, {

package/cjs/parts/tile-button/TileButton.js

@@ -68,7 +68,7 @@ const TileButton = props => {
   return /*#__PURE__*/_jsx__default["default"](styled.StyledTileButton, {
     isHeader: isHeader,
     value: dsId,
-    "data-testid": `tile-button-${dsId}`,
+    "data-testid": "tile-button-".concat(dsId),
     onClick: handleClick,
     onFocus: onFocus,
     onBlur: onBlur,
@@ -83,8 +83,8 @@ const TileButton = props => {
     justifyContent: "center"
   }, void 0, title ? /*#__PURE__*/_jsx__default["default"](DSTooltip__default["default"], {
     containerProps: {
-      id: `ds-chat-tile-tooltip-button-${dsId}`,
-      'data-testid': `ds-chat-tile-tooltip-button-${dsId}`
+      id: "ds-chat-tile-tooltip-button-".concat(dsId),
+      'data-testid': "ds-chat-tile-tooltip-button-".concat(dsId)
     },
     interactionType: "hover",
     title: title,

package/cjs/parts/tile-button/styled.js

@@ -56,7 +56,7 @@ const CloseButton = /*#__PURE__*/styled__default["default"].button.withConfig({
 
 const StyledTileButton = /*#__PURE__*/styled__default["default"].button.withConfig({
   componentId: "sc-1ebp1zs-6"
-})(["outline:none;background:transparent;height:", "px;width:", "px;position:relative;padding:0;border:none;cursor:pointer;border-bottom:", ";&:focus,&:hover,&:active,&:disabled{background:", ";& ", "{border:2px solid ", ";margin-top:-2px;", ";}}&:focus,&:hover{& ", "{background:", ";}& ", "{color:", ";}& svg{fill:", ";}}&:active:not(:disabled){background:", ";& ", "{background:", ";}& ", "{color:", ";font-weight:600;}& svg{fill:", ";}& ", "{border:2px solid ", ";}}&:disabled{background:", ";", "{background:", ";}& ", "{background:", ";border:2px solid ", ";}", "{svg{fill:", ";}}", "{color:", ";}}", ""], BUTTON_SIDEBAR_HEIGHT, MIN_WIDTH_SIDEBAR, props => props.isHeader ? `1px solid  ${props.theme.colors.neutral['200']}` : 'none', props => props.theme.colors.neutral['080'], StyledStatusBadge, props => props.theme.colors.neutral['080'], props => {
+})(["outline:none;background:transparent;height:", "px;width:", "px;position:relative;padding:0;border:none;cursor:pointer;border-bottom:", ";&:focus,&:hover,&:active,&:disabled{background:", ";& ", "{border:2px solid ", ";margin-top:-2px;", ";}}&:focus,&:hover{& ", "{background:", ";}& ", "{color:", ";}& svg{fill:", ";}}&:active:not(:disabled){background:", ";& ", "{background:", ";}& ", "{color:", ";font-weight:600;}& svg{fill:", ";}& ", "{border:2px solid ", ";}}&:disabled{background:", ";", "{background:", ";}& ", "{background:", ";border:2px solid ", ";}", "{svg{fill:", ";}}", "{color:", ";}}", ""], BUTTON_SIDEBAR_HEIGHT, MIN_WIDTH_SIDEBAR, props => props.isHeader ? "1px solid  ".concat(props.theme.colors.neutral['200']) : 'none', props => props.theme.colors.neutral['080'], StyledStatusBadge, props => props.theme.colors.neutral['080'], props => {
   switch (props.badgePosition) {
     case 'left':
       return 'margin-left: -2px;';

package/cjs/styled.js

@@ -7,7 +7,7 @@ const BUTTON_SIDEBAR_HEIGHT = 48;
 const BUTTON_FLOATING = 56;
 const BOX_SHADOW = '0 5px 8px 0 rgba(53,60,70,0.55)';
 const BOX_SHADOW_FLOATING = '0 5px 8px 0 rgba(53,60,70,0.35)';
-const BOX_SHADOW_INSET = `inset 100px 3px 4px 0 rgba(53,60,70,0.50)`;
+const BOX_SHADOW_INSET = "inset 100px 3px 4px 0 rgba(53,60,70,0.50)";
 
 exports.BOX_SHADOW = BOX_SHADOW;
 exports.BOX_SHADOW_FLOATING = BOX_SHADOW_FLOATING;

package/esm/parts/bubble/ChatBubble.js

@@ -22,7 +22,7 @@ const ChatBubble = props => {
     helpMessage
   } = props;
   return /*#__PURE__*/_jsx(StyledWrapper, {
-    "data-testid": `ds-chat-bubble-${dsId}`,
+    "data-testid": "ds-chat-bubble-".concat(dsId),
     type: type
   }, void 0, /*#__PURE__*/_jsx(StyledColoredBubble, {
     type: type
@@ -33,22 +33,22 @@ const ChatBubble = props => {
     className: "sr-only"
   }, void 0, /*#__PURE__*/_jsx(StyledTitleLeftBubble, {
     alignItems: "center",
-    "data-testid": `chat-bubble-title-${dsId}`
+    "data-testid": "chat-bubble-title-".concat(dsId)
   }, void 0, title), /*#__PURE__*/_jsx(StyledTitleRightBubble, {
     alignItems: "center",
     type: type,
-    "data-testid": `chat-bubble-time-${dsId}`
+    "data-testid": "chat-bubble-time-".concat(dsId)
   }, void 0, time)), /*#__PURE__*/_jsx(StyleBodyWrapper, {
-    "data-testid": `chat-bubble-body-${dsId}`
+    "data-testid": "chat-bubble-body-".concat(dsId)
   }, void 0, body), /*#__PURE__*/_jsx(ChatBubbleArrow, {
     type: type
   })), errorMessage ? /*#__PURE__*/_jsx(StyleErrorMessage, {
-    "data-testid": `chat-bubble-error-message-${dsId}`,
+    "data-testid": "chat-bubble-error-message-".concat(dsId),
     p: "xxs",
     gutter: "xxs",
     cols: [1, 'auto']
   }, void 0, /*#__PURE__*/_jsx("span", {}, void 0, errorMessage), _Warning || (_Warning = /*#__PURE__*/_jsx(Warning, {}))) : null, helpMessage ? /*#__PURE__*/_jsx(StyleHelpMessage, {
-    "data-testid": `chat-bubble-help-message-${dsId}`,
+    "data-testid": "chat-bubble-help-message-".concat(dsId),
     p: "xxs",
     gutter: "xxs",
     cols: [1, 'auto']

package/esm/parts/bubble/config/useValidateProps.js

@@ -1,27 +1,26 @@
 import { useValidatePropTypes } from '@elliemae/ds-props-helpers';
 
 const throwError = message => {
-  throw new Error(`Bubble:: ${message}
-  `);
+  throw new Error("Bubble:: ".concat(message, "\n  "));
 };
 
 const useValidateProps = (props, schema) => {
   useValidatePropTypes(props, schema);
 
   if (typeof props.title === 'undefined') {
-    throwError(`Please provide a title property to use this component.`);
+    throwError("Please provide a title property to use this component.");
   }
 
   if (typeof props.time === 'undefined') {
-    throwError(`Please provide a time property to use this component.`);
+    throwError("Please provide a time property to use this component.");
   }
 
   if (typeof props.body === 'undefined') {
-    throwError(`Please provide a body property to use this component.`);
+    throwError("Please provide a body property to use this component.");
   }
 
   if (typeof props.type === 'undefined') {
-    throwError(`Please provide a type property to use this component.`);
+    throwError("Please provide a type property to use this component.");
   }
 };
 

package/esm/parts/bubble/styled.js

@@ -32,35 +32,6 @@ const StyledBubbleArrow = /*#__PURE__*/styled.div.withConfig({
 })(["display:block;content:'';position:absolute;bottom:10px;height:15px;"]);
 const StyledColoredBubble = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-fe8e9o-8"
-})(["min-width:224px;border-radius:10px;position:relative;", ""], props => props.type === BUBBLE_TYPES.SENDER ? `
-        border: 1px solid ${props.theme.colors.brand['700']};
-        background: ${props.theme.colors.brand[600]};
-        color: ${props.theme.colors.neutral['000']};
-        ${StyledBubbleArrow}{            
-            right: -9px;
-            bottom: 6px;
-            svg{
-                fill: ${props.theme.colors.brand[600]};
-            }
-        }
-
-        a {
-          color: #FFF;
-        }
-
-    ` : `
-        box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);
-        background: ${props.theme.colors.neutral['000']};
-        color: ${props.theme.colors.neutral[700]};
-
-        ${StyledBubbleArrow}{            
-            left: -11px;
-            bottom: 6px;
-            svg{
-                fill: ${props.theme.colors.neutral['000']};
-            }
-        }
-
-    `);
+})(["min-width:224px;border-radius:10px;position:relative;", ""], props => props.type === BUBBLE_TYPES.SENDER ? "\n        border: 1px solid ".concat(props.theme.colors.brand['700'], ";\n        background: ").concat(props.theme.colors.brand[600], ";\n        color: ").concat(props.theme.colors.neutral['000'], ";\n        ").concat(StyledBubbleArrow, "{            \n            right: -9px;\n            bottom: 6px;\n            svg{\n                fill: ").concat(props.theme.colors.brand[600], ";\n            }\n        }\n\n        a {\n          color: #FFF;\n        }\n\n    ") : "\n        box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);\n        background: ".concat(props.theme.colors.neutral['000'], ";\n        color: ").concat(props.theme.colors.neutral[700], ";\n\n        ").concat(StyledBubbleArrow, "{            \n            left: -11px;\n            bottom: 6px;\n            svg{\n                fill: ").concat(props.theme.colors.neutral['000'], ";\n            }\n        }\n\n    "));
 
 export { StyleBodyWrapper, StyleErrorMessage, StyleHelpMessage, StyledBubbleArrow, StyledColoredBubble, StyledTitleBubble, StyledTitleLeftBubble, StyledTitleRightBubble, StyledWrapper };

package/esm/parts/chat-card/props.js

@@ -1,8 +1,8 @@
 import { PropTypes } from 'react-desc';
 
 const propTypes = {
-  title: PropTypes.string.isRequired.description(`Card's title`),
-  content: PropTypes.string.description(`Card's content`),
+  title: PropTypes.string.isRequired.description("Card's title"),
+  content: PropTypes.string.description("Card's content"),
   time: PropTypes.string.description('Time'),
   rightAddon: PropTypes.element.description('Right addon, badge or icon')
 };

package/esm/parts/chat-composer/ChatContainerComposer.js

@@ -1,6 +1,7 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/web.url.to-json.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React from 'react';
 import { Grid } from '@elliemae/ds-grid';
 import { describe } from 'react-desc';
@@ -70,7 +71,7 @@ const ChatComposer = props => {
   const hasError = React.useMemo(() => inputLength > inputMaxLength, [inputLength, inputMaxLength]);
   return /*#__PURE__*/_jsx(StyledChatContainerContentComposer, {
     rows: ['auto', '15px'],
-    maxHeight: `${maxHeight}px`,
+    maxHeight: "".concat(maxHeight, "px"),
     "data-testid": dataTestid
   }, void 0, /*#__PURE__*/_jsx(Grid, {
     cols: ['1fr', '24px'],
@@ -128,7 +129,7 @@ const ChatComposer = props => {
     children: [/*#__PURE__*/_jsx(StyledCounterErrorA11y, {
       role: "alert"
     }, void 0, "You have exceeded the character limit by ", inputLength - inputMaxLength), "Please limit to less than ", inputMaxLength, " characters.", ' ']
-  }) : '', inputMaxLength ? `${inputLength} / ${inputMaxLength}` : ''), _Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {}))));
+  }) : '', inputMaxLength ? "".concat(inputLength, " / ").concat(inputMaxLength) : ''), _Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {}))));
 };
 
 ChatComposer.defaultProps = defaultComposerPros;

package/esm/parts/chat-composer/props.js

@@ -27,17 +27,7 @@ const composerProps = {
   inputMaxLength: PropTypes.number.description('Max length of the composer. `undefined` for no limit').defaultValue(defaultComposerPros.inputMaxLength),
   buttonDisabled: PropTypes.bool.description('Control the disabled for the send button').defaultValue(defaultComposerPros.buttonDisabled),
   dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultComposerPros.placeholder),
-  actionRef: PropTypes.object.description(`Reference: 
-        { 
-          scrollToIndex: (n: number) => void,
-          getMessagesInView: () => number[],
-          focusToIndex: (n: number) => void,
-          focusToList: () => void,
-          focusToComposer: () => void,
-          focusToSend: () => void,
-        }
-        
-      `).defaultValue(defaultComposerPros.actionRef)
+  actionRef: PropTypes.object.description("Reference: \n        { \n          scrollToIndex: (n: number) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      ").defaultValue(defaultComposerPros.actionRef)
 };
 
 export { composerProps, defaultComposerPros };

package/esm/parts/chat-composer/styled.js

@@ -8,13 +8,13 @@ const StyledChatContainerContentComposer = /*#__PURE__*/styled(Grid).withConfig(
 })(["width:100%;min-height:56px;background:", ";padding:", ";padding-bottom:3px;padding-top:6px;padding-left:", ";max-height:", ";border-top:1px solid #cbcfd7;"], props => props.theme.colors.neutral['050'], props => props.theme.space.xxs, props => props.theme.space.xs, props => props.maxHeight);
 const StyledComposerInput = /*#__PURE__*/styled.textarea.withConfig({
   componentId: "sc-1ahwpce-1"
-})(["padding:", ";resize:none;min-height:32px;border-radius:2px;border:solid 1px #cbcfd7;color:#25292f;height:", ";min-width:244px;overflow-y:auto;font-size:13px;font-weight:400;line-height:1;transition:height 0.3s;&:focus{outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px #8cc2ed;border-radius:2px;}"], props => props.theme.space.xxs, props => typeof props.height === 'number' ? `${props.height}px` : props.height, props => props.theme.colors.brand[600]);
+})(["padding:", ";resize:none;min-height:32px;border-radius:2px;border:solid 1px #cbcfd7;color:#25292f;height:", ";min-width:244px;overflow-y:auto;font-size:13px;font-weight:400;line-height:1;transition:height 0.3s;&:focus{outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px #8cc2ed;border-radius:2px;}"], props => props.theme.space.xxs, props => typeof props.height === 'number' ? "".concat(props.height, "px") : props.height, props => props.theme.colors.brand[600]);
 const StyledComposerButton = /*#__PURE__*/styled(DSButton).withConfig({
   componentId: "sc-1ahwpce-2"
 })(["&:disabled{background:none;svg{fill:#5d6775;}}svg{fill:", ";}&:focus{background:", ";}"], props => props.theme.colors.brand[600], props => props.theme.colors.brand[200]);
 const StyledCounterArea = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1ahwpce-3"
-})(["text-align:right;font-size:11px;height:15px;align-items:center;font-style:italic;", " position:relative;"], props => props.hasError ? `color:${props.theme.colors.danger[900]};` : '');
+})(["text-align:right;font-size:11px;height:15px;align-items:center;font-style:italic;", " position:relative;"], props => props.hasError ? "color:".concat(props.theme.colors.danger[900], ";") : '');
 const StyledCounterErrorA11y = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-1ahwpce-4"
 })(["width:1px;height:1px;position:absolute;clip:rect(1px,1px,1px,1px);"]);

package/esm/parts/chat-container/props.js

@@ -34,17 +34,7 @@ const containerProps = {
   bannerProps: PropTypes.object.description('Banner configuration').defaultValue(defaultProps.bannerProps),
   sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]).description('Array of ids of sending messages').defaultValue(defaultProps.sendingMessages),
   sendingText: PropTypes.string.description('Label description for messages in sending status').defaultValue(defaultProps.sendingText),
-  actionRef: PropTypes.object.description(`Reference: 
-        { 
-          scrollToIndex: (n: number) => void,
-          getMessagesInView: () => number[],
-          focusToIndex: (n: number) => void,
-          focusToList: () => void,
-          focusToComposer: () => void,
-          focusToSend: () => void,
-        }
-        
-      `).defaultValue(defaultProps.actionRef)
+  actionRef: PropTypes.object.description("Reference: \n        { \n          scrollToIndex: (n: number) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      ").defaultValue(defaultProps.actionRef)
 };
 
 export { containerProps, defaultProps };

package/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js

@@ -73,7 +73,7 @@ const ChatContainerMessagesList = props => {
       align: 'center'
     });
     setTimeout(() => {
-      virtualListRef.current.querySelector(`[data-index="${index}"]`).focus();
+      virtualListRef.current.querySelector("[data-index=\"".concat(index, "\"]")).focus();
     }, 300);
   }, [vScroll]);
   React.useEffect(() => {
@@ -110,12 +110,12 @@ const ChatContainerMessagesList = props => {
 
     switch (key) {
       case 'ArrowUp':
-        if (index > 0) virtualListRef.current.querySelector(`[data-index="${index - 1}"]`).focus();
+        if (index > 0) virtualListRef.current.querySelector("[data-index=\"".concat(index - 1, "\"]")).focus();
         break;
 
       case 'ArrowDown':
         if (index < messages.length - 1) {
-          virtualListRef.current.querySelector(`[data-index="${index + 1}"]`).focus();
+          virtualListRef.current.querySelector("[data-index=\"".concat(index + 1, "\"]")).focus();
         }
 
         break;
@@ -163,7 +163,7 @@ const ChatContainerMessagesList = props => {
       position: 'absolute',
       top: 0,
       left: 0,
-      transform: `translateY(${start}px)`,
+      transform: "translateY(".concat(start, "px)"),
       width: '100%'
     };
     return /*#__PURE__*/jsx(ListItem, {
@@ -182,7 +182,7 @@ const ChatContainerMessagesList = props => {
       jsx(ChatBubble, _objectSpread(_objectSpread({}, row), {}, {
         helpMessage: isSending ? sendingText : row.helpMessage
       })) : null, row.type === BUBBLE_TYPES.DELIMITER ? /*#__PURE__*/jsx(MessageDelimiter, _objectSpread({}, row)) : null, row.type === BUBBLE_TYPES.SYSTEM ? /*#__PURE__*/jsx(SystemMessage, _objectSpread({}, row)) : null)
-    }, `ds-chat-bubble-${index}`);
+    }, "ds-chat-bubble-".concat(index));
   }), [virtualItems, messages, sendingMessages, handleKey, sendingText]);
   return /*#__PURE__*/_jsx(StyledWrapper, {}, void 0, /*#__PURE__*/jsx(StyledChatContainerContentList, {
     "data-testid": "chat-thread-container",
@@ -192,7 +192,7 @@ const ChatContainerMessagesList = props => {
     role: "list",
     onKeyDown: handleKey,
     children: /*#__PURE__*/_jsx(StyledChatContainerContentListScroll, {
-      height: `${totalSize}px`
+      height: "".concat(totalSize, "px")
     }, void 0, render, !isLoading && hasMoreItems ? /*#__PURE__*/_jsx(StyledLoadMoreContainer, {
       hasMoreItems: hasMoreItems
     }, void 0, /*#__PURE__*/_jsx(DSButton, {

package/esm/parts/chat-container-messages-list/props.js

@@ -11,18 +11,8 @@ const defaultProps = {
 };
 const listProps = {
   messages: PropTypes.arrayOf(PropTypes.object).description('The array of out-of-the-box items you want to render inside the ChatMessageList').defaultValue(defaultProps.messages),
-  actionRef: PropTypes.object.description(`Reference: 
-        { 
-          scrollToIndex: (n: number) => void,
-          getMessagesInView: () => number[],
-          focusToIndex: (n: number) => void,
-          focusToList: () => void,
-          focusToComposer: () => void,
-          focusToSend: () => void,
-        }
-        
-      `).defaultValue(defaultProps.actionRef),
-  onScrollEnds: PropTypes.func.description(`Called when the scroll stops.`),
+  actionRef: PropTypes.object.description("Reference: \n        { \n          scrollToIndex: (n: number) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      ").defaultValue(defaultProps.actionRef),
+  onScrollEnds: PropTypes.func.description("Called when the scroll stops."),
   isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description('Keeps the load more space while the loading is in progress'),
   hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description('Show Load More button at the `top` or `bottom` of the container'),
   getMoreMessages: PropTypes.func.description('Called when the user clicks on load more').defaultValue(defaultProps.getMoreMessages),

package/esm/parts/chat-container-messages-list/styled.js

@@ -8,11 +8,7 @@ const StyledWrapper = /*#__PURE__*/styled.div.withConfig({
 
 const StyledWrapperListItem = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1jhprzr-1"
-})(["min-width:100%;", ";", ";", ";"], props => props.type === BUBBLE_TYPES.SENDER && `padding: ${props.theme.space.xxs} ${props.theme.space.xxs} 0px 13%
-  `, props => props.type === BUBBLE_TYPES.RECIPIENT && `padding: ${props.theme.space.xxs} 13% ${props.theme.space.xxs}
-    ${props.theme.space.xxs}
-  `, props => props.type === BUBBLE_TYPES.SYSTEM && `padding: ${props.theme.space.xxs} 0px
-  `);
+})(["min-width:100%;", ";", ";", ";"], props => props.type === BUBBLE_TYPES.SENDER && "padding: ".concat(props.theme.space.xxs, " ").concat(props.theme.space.xxs, " 0px 13%\n  "), props => props.type === BUBBLE_TYPES.RECIPIENT && "padding: ".concat(props.theme.space.xxs, " 13% ").concat(props.theme.space.xxs, "\n    ").concat(props.theme.space.xxs, "\n  "), props => props.type === BUBBLE_TYPES.SYSTEM && "padding: ".concat(props.theme.space.xxs, " 0px\n  "));
 const StyledChatContainerContentList = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1jhprzr-2"
 })(["width:100%;height:100%;padding:", ";padding-bottom:0;overflow-y:auto;overflow-x:hidden;"], props => props.theme.space.xs);

package/esm/parts/grid-influencer/styled.js

@@ -4,13 +4,9 @@ import { MIN_WIDTH_SIDEBAR } from '../../styled.js';
 
 const StyledChatContainer = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-b6t5vk-0"
-})(["height:100%;width:", ";background:", ";box-shadow:-1px 0 0 0 ", ";transition:width ", " 350ms;"], props => props.expanded ? `${props.expandedWidth}px` : `${MIN_WIDTH_SIDEBAR}px`, props => props.theme.colors.neutral['050'], props => props.theme.colors.neutral[100], props => props.expanded ? 'ease-out' : 'ease-in');
+})(["height:100%;width:", ";background:", ";box-shadow:-1px 0 0 0 ", ";transition:width ", " 350ms;"], props => props.expanded ? "".concat(props.expandedWidth, "px") : "".concat(MIN_WIDTH_SIDEBAR, "px"), props => props.theme.colors.neutral['050'], props => props.theme.colors.neutral[100], props => props.expanded ? 'ease-out' : 'ease-in');
 const StyledChatContainerContent = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-b6t5vk-1"
-})(["height:100%;overflow:hidden;background:", ";", ""], props => props.theme.colors.neutral['050'], props => props.floating ? `
-  width: ${props.expandedWidth}px;
-` : `
-  width: ${props.expandedWidth - MIN_WIDTH_SIDEBAR}px;
-`);
+})(["height:100%;overflow:hidden;background:", ";", ""], props => props.theme.colors.neutral['050'], props => props.floating ? "\n  width: ".concat(props.expandedWidth, "px;\n") : "\n  width: ".concat(props.expandedWidth - MIN_WIDTH_SIDEBAR, "px;\n"));
 
 export { StyledChatContainer, StyledChatContainerContent };

package/esm/parts/message-delimiter/styled.js

@@ -9,6 +9,6 @@ const Line = /*#__PURE__*/styled.span.withConfig({
 })(["border-top:1px solid ", ";"], props => props.theme.colors.neutral['400']);
 const Text = /*#__PURE__*/styled.p.withConfig({
   componentId: "sc-upz0rt-2"
-})(["color:", ";font-size:", ";font-weight:", ";margin:", ";"], props => props.theme.colors.neutral['600'], props => props.size === 's' ? '12px' : '14px', props => props.theme.fontWeights.semibold, props => typeof props.verticalMargin === 'number' ? `${props.verticalMargin}px 8px` : `${props.verticalMargin} 8px`);
+})(["color:", ";font-size:", ";font-weight:", ";margin:", ";"], props => props.theme.colors.neutral['600'], props => props.size === 's' ? '12px' : '14px', props => props.theme.fontWeights.semibold, props => typeof props.verticalMargin === 'number' ? "".concat(props.verticalMargin, "px 8px") : "".concat(props.verticalMargin, " 8px"));
 
 export { Line, Text, Wrapper };

package/esm/parts/sidebar-button/SidebarButton.js

@@ -24,7 +24,7 @@ const SidebarButton = _ref => {
     onClick(dsId);
   }, [onClick, dsId]);
   return /*#__PURE__*/jsxs(StyledSidebarButton, _objectSpread(_objectSpread({
-    "data-testid": `sidebar-button-${dsId}`,
+    "data-testid": "sidebar-button-".concat(dsId),
     onClick: handleClick
   }, rest), {}, {
     children: [/*#__PURE__*/_jsx(StyledSidebarButtonIcon, {

package/esm/parts/tile-button/TileButton.js

@@ -57,7 +57,7 @@ const TileButton = props => {
   return /*#__PURE__*/_jsx(StyledTileButton, {
     isHeader: isHeader,
     value: dsId,
-    "data-testid": `tile-button-${dsId}`,
+    "data-testid": "tile-button-".concat(dsId),
     onClick: handleClick,
     onFocus: onFocus,
     onBlur: onBlur,
@@ -72,8 +72,8 @@ const TileButton = props => {
     justifyContent: "center"
   }, void 0, title ? /*#__PURE__*/_jsx(DSTooltip, {
     containerProps: {
-      id: `ds-chat-tile-tooltip-button-${dsId}`,
-      'data-testid': `ds-chat-tile-tooltip-button-${dsId}`
+      id: "ds-chat-tile-tooltip-button-".concat(dsId),
+      'data-testid': "ds-chat-tile-tooltip-button-".concat(dsId)
     },
     interactionType: "hover",
     title: title,

package/esm/parts/tile-button/styled.js

@@ -48,7 +48,7 @@ const CloseButton = /*#__PURE__*/styled.button.withConfig({
 
 const StyledTileButton = /*#__PURE__*/styled.button.withConfig({
   componentId: "sc-1ebp1zs-6"
-})(["outline:none;background:transparent;height:", "px;width:", "px;position:relative;padding:0;border:none;cursor:pointer;border-bottom:", ";&:focus,&:hover,&:active,&:disabled{background:", ";& ", "{border:2px solid ", ";margin-top:-2px;", ";}}&:focus,&:hover{& ", "{background:", ";}& ", "{color:", ";}& svg{fill:", ";}}&:active:not(:disabled){background:", ";& ", "{background:", ";}& ", "{color:", ";font-weight:600;}& svg{fill:", ";}& ", "{border:2px solid ", ";}}&:disabled{background:", ";", "{background:", ";}& ", "{background:", ";border:2px solid ", ";}", "{svg{fill:", ";}}", "{color:", ";}}", ""], BUTTON_SIDEBAR_HEIGHT, MIN_WIDTH_SIDEBAR, props => props.isHeader ? `1px solid  ${props.theme.colors.neutral['200']}` : 'none', props => props.theme.colors.neutral['080'], StyledStatusBadge, props => props.theme.colors.neutral['080'], props => {
+})(["outline:none;background:transparent;height:", "px;width:", "px;position:relative;padding:0;border:none;cursor:pointer;border-bottom:", ";&:focus,&:hover,&:active,&:disabled{background:", ";& ", "{border:2px solid ", ";margin-top:-2px;", ";}}&:focus,&:hover{& ", "{background:", ";}& ", "{color:", ";}& svg{fill:", ";}}&:active:not(:disabled){background:", ";& ", "{background:", ";}& ", "{color:", ";font-weight:600;}& svg{fill:", ";}& ", "{border:2px solid ", ";}}&:disabled{background:", ";", "{background:", ";}& ", "{background:", ";border:2px solid ", ";}", "{svg{fill:", ";}}", "{color:", ";}}", ""], BUTTON_SIDEBAR_HEIGHT, MIN_WIDTH_SIDEBAR, props => props.isHeader ? "1px solid  ".concat(props.theme.colors.neutral['200']) : 'none', props => props.theme.colors.neutral['080'], StyledStatusBadge, props => props.theme.colors.neutral['080'], props => {
   switch (props.badgePosition) {
     case 'left':
       return 'margin-left: -2px;';

package/esm/styled.js

@@ -3,6 +3,6 @@ const BUTTON_SIDEBAR_HEIGHT = 48;
 const BUTTON_FLOATING = 56;
 const BOX_SHADOW = '0 5px 8px 0 rgba(53,60,70,0.55)';
 const BOX_SHADOW_FLOATING = '0 5px 8px 0 rgba(53,60,70,0.35)';
-const BOX_SHADOW_INSET = `inset 100px 3px 4px 0 rgba(53,60,70,0.50)`;
+const BOX_SHADOW_INSET = "inset 100px 3px 4px 0 rgba(53,60,70,0.50)";
 
 export { BOX_SHADOW, BOX_SHADOW_FLOATING, BOX_SHADOW_INSET, BUTTON_FLOATING, BUTTON_SIDEBAR_HEIGHT, MIN_WIDTH_SIDEBAR };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-chat",
-  "version": "2.0.0-next.1",
+  "version": "2.0.0-next.6",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Chat",
   "module": "./esm/index.js",
@@ -293,9 +293,9 @@
     "generateSubmodules": true
   },
   "dependencies": {
-    "@elliemae/ds-basic": "2.0.0-next.1",
-    "@elliemae/ds-icons": "2.0.0-next.1",
-    "@elliemae/ds-system": "2.0.0-next.1",
+    "@elliemae/ds-basic": "2.0.0-next.6",
+    "@elliemae/ds-icons": "2.0.0-next.6",
+    "@elliemae/ds-system": "2.0.0-next.6",
     "prop-types": "~15.7.2",
     "react-virtual": "~2.3.2"
   },

package/cjs/package.json

@@ -1,4 +0,0 @@
-{
-  "type": "commonjs",
-  "sideEffects": false
-}

package/esm/package.json

@@ -1,4 +0,0 @@
-{
-  "type": "module",
-  "sideEffects": false
-}