@elliemae/ds-chat 2.3.0-next.1 → 2.3.0-next.10

package/esm/{parts → exported-related}/bubble/styled.js

@@ -5,33 +5,33 @@ import { BUBBLE_TYPES } from './props.js';
 /* eslint-disable max-lines */
 
 const StyledWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fe8e9o-0"
+  componentId: "sc-57v3aa-0"
 })(["min-width:224px;border-radius:10px;"]); // Bubble HEADER
 
 const StyledTitleBubble = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-fe8e9o-1"
+  componentId: "sc-57v3aa-1"
 })(["padding-top:6px;padding-left:10px;padding-right:10px;padding-bottom:4px;"]);
 const StyledTitleLeftBubble = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-fe8e9o-2"
+  componentId: "sc-57v3aa-2"
 })(["font-size:13px;font-weight:600;"]);
 const StyledTitleRightBubble = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-fe8e9o-3"
+  componentId: "sc-57v3aa-3"
 })(["font-size:13px;font-weight:400;color:", ";"], props => props.type === BUBBLE_TYPES.SENDER ? '#FFF' : '#657489');
 const StyleBodyWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fe8e9o-4"
+  componentId: "sc-57v3aa-4"
 })(["font-size:13px;font-weight:400;line-height:15px;min-height:18px;padding:0px 10px 8px 10px;"]);
 const StyleErrorMessage = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fe8e9o-5"
+  componentId: "sc-57v3aa-5"
 })(["font-size:12px;font-weight:400;padding-top:", ";color:", ";align-items:flex-end;justify-content:center;text-align:right;line-height:15px;svg{fill:", ";}a{font-size:12px;color:", ";}.em-ds-icon{margin-left:8px;}"], props => props.theme.space.xxxs, props => props.theme.colors.danger[900], props => props.theme.colors.danger[900], props => props.theme.colors.danger[900]);
 const StyleHelpMessage = /*#__PURE__*/styled(StyleErrorMessage).withConfig({
-  componentId: "sc-fe8e9o-6"
+  componentId: "sc-57v3aa-6"
 })(["font-size:12px;line-height:15px;color:", ";svg{fill:", ";}a{font-size:12px;color:", ";}"], props => props.theme.colors.neutral[500], props => props.theme.colors.danger[500], props => props.theme.colors.danger[500]); // bubble sender/ recipient
 
 const StyledBubbleArrow = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fe8e9o-7"
+  componentId: "sc-57v3aa-7"
 })(["display:block;content:'';position:absolute;bottom:10px;height:15px;"]);
 const StyledColoredBubble = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fe8e9o-8"
+  componentId: "sc-57v3aa-8"
 })(["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 → exported-related}/chat-card/ChatCard.js

@@ -1,14 +1,13 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.url.to-json.js';
 import 'react';
-import { describe } from 'react-desc';
+import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
-import { propTypes } from './props.js';
-import { useValidateProps } from './config/useValidateProps.js';
+import { propTypes, defaultProps } from './props.js';
 import { Wrapper, MainContent, Title, Content, Time, RightAddon } from './styled.js';
 
 const ChatCard = props => {
-  useValidateProps(props, ChatCardWithSchema.toJSON());
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, propTypes);
   const {
     title,
     content,

package/esm/{parts → exported-related}/chat-card/props.js

@@ -1,5 +1,12 @@
-import { PropTypes } from 'react-desc';
+import { PropTypes } from '@elliemae/ds-props-helpers';
+import { jsx, Fragment } from 'react/jsx-runtime';
 
+const defaultProps = {
+  title: '',
+  content: '',
+  time: '',
+  rightAddon: /*#__PURE__*/jsx(Fragment, {})
+};
 const propTypes = {
   title: PropTypes.string.isRequired.description("Card's title"),
   content: PropTypes.string.description("Card's content"),
@@ -7,4 +14,4 @@ const propTypes = {
   rightAddon: PropTypes.element.description('Right addon, badge or icon')
 };
 
-export { propTypes };
+export { defaultProps, propTypes };

package/esm/{parts → exported-related}/chat-card/styled.js

@@ -2,22 +2,22 @@ import styled from 'styled-components';
 import { Grid } from '@elliemae/ds-grid';
 
 const Wrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-s0g4hn-0"
+  componentId: "sc-1x060wl-0"
 })(["min-width:248px;border:1px;border-bottom:1px solid #ccc;padding:12px 12px;"]);
 const MainContent = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-s0g4hn-1"
+  componentId: "sc-1x060wl-1"
 })([""]);
 const Title = /*#__PURE__*/styled.p.withConfig({
-  componentId: "sc-s0g4hn-2"
+  componentId: "sc-1x060wl-2"
 })(["font-size:16px;font-weight:600;margin:0;"]);
 const Content = /*#__PURE__*/styled.p.withConfig({
-  componentId: "sc-s0g4hn-3"
+  componentId: "sc-1x060wl-3"
 })(["font-size:12px;font-weight:400;line-height:1;margin:0;"]);
 const Time = /*#__PURE__*/styled.p.withConfig({
-  componentId: "sc-s0g4hn-4"
+  componentId: "sc-1x060wl-4"
 })(["font-size:12px;font-weight:100;margin:0;margin-top:8px;font-weight:", ";color:", ";"], props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['500']);
 const RightAddon = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-s0g4hn-5"
+  componentId: "sc-1x060wl-5"
 })(["height:fit-content;margin-left:12px;"]);
 
 export { Content, MainContent, RightAddon, Time, Title, Wrapper };

package/esm/{parts → exported-related}/chat-container-header/ChatContainerHeader.js

@@ -1,19 +1,21 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
+import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { StyledChatContainerContentHeader, StyledChatContainerContentHeaderLabel, StyledChatContainerContentHeaderActions } from './styled.js';
+import { propTypes, defaultProps } from './props.js';
 import { validHeaderChilds } from './helpers.js';
 
 const ChatContainerHeader = props => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, propTypes);
   const {
     title,
-    floating,
     children
-  } = props;
+  } = propsWithDefault;
   return /*#__PURE__*/_jsx(StyledChatContainerContentHeader, {
     alignItems: "center",
     cols: ['minmax(calc(100% - 64px), 1fr)', children ? 'auto' : '0px'],
-    floating: floating,
     role: "heading"
   }, void 0, /*#__PURE__*/_jsx(StyledChatContainerContentHeaderLabel, {
     "data-testid": "chat-container-header-title",
@@ -28,4 +30,7 @@ const ChatContainerHeader = props => {
   }, void 0, children));
 };
 
-export { ChatContainerHeader };
+const ChatContainerHeaderWithSchema = describe(ChatContainerHeader);
+ChatContainerHeaderWithSchema.propTypes = propTypes;
+
+export { ChatContainerHeader, ChatContainerHeaderWithSchema };

package/esm/exported-related/chat-container-header/props.js

@@ -0,0 +1,13 @@
+import { PropTypes } from '@elliemae/ds-props-helpers';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const defaultProps = {
+  title: '',
+  children: /*#__PURE__*/jsx(Fragment, {})
+};
+const propTypes = {
+  title: PropTypes.string.isRequired.description("Card's title"),
+  children: PropTypes.node.description('Childrens')
+};
+
+export { defaultProps, propTypes };

package/esm/{parts → exported-related}/chat-container-header/styled.js

@@ -2,13 +2,13 @@ import styled from 'styled-components';
 import { Grid } from '@elliemae/ds-grid';
 
 const StyledChatContainerContentHeaderActions = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-jmynvr-0"
+  componentId: "sc-rsxerm-0"
 })(["max-width:80px;"]);
 const StyledChatContainerContentHeader = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-jmynvr-1"
+  componentId: "sc-rsxerm-1"
 })(["width:100%;min-height:48px;border-bottom:1px solid ", ";background:", ";", "{& button{background:transparent;}}"], props => props.theme.colors.neutral['200'], props => props.theme.colors.neutral['050'], StyledChatContainerContentHeaderActions);
 const StyledChatContainerContentHeaderLabel = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-jmynvr-2"
+  componentId: "sc-rsxerm-2"
 })(["justify-content:center;align-items:center;font-weight:bold;font-size:18px;color:", ";"], props => props.theme.colors.neutral['700']);
 
 export { StyledChatContainerContentHeader, StyledChatContainerContentHeaderActions, StyledChatContainerContentHeaderLabel };

package/esm/{parts → exported-related}/chat-empty-state/ChatEmptyState.js

@@ -1,21 +1,20 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.url.to-json.js';
 import { useMemo } from 'react';
-import { describe } from 'react-desc';
+import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { Grid } from '@elliemae/ds-grid';
 import { Communications } from '@elliemae/ds-icons';
 import { emptyStateProps, defaultProps } from './props.js';
 import { MessageWrapper, ChatEmptyStateWrapper } from './styled.js';
-import { useValidateProps } from './config/useValidateProps.js';
 
 const ChatEmptyState = props => {
   var _Grid, _Grid2;
 
-  useValidateProps(props, ChatEmptyStateListWithSchema.toJSON());
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, emptyStateProps);
   const {
     label,
     action
-  } = props;
+  } = propsWithDefault;
   const MainContent = useMemo(() => /*#__PURE__*/_jsx(Grid, {
     alignItems: "center",
     justifyContent: "center"
@@ -38,8 +37,7 @@ const ChatEmptyState = props => {
   }, void 0, MainContent);
 };
 
-ChatEmptyState.defaultProps = defaultProps;
-const ChatEmptyStateListWithSchema = describe(ChatEmptyState);
-ChatEmptyStateListWithSchema.propTypes = emptyStateProps;
+const ChatEmptyStateWithSchema = describe(ChatEmptyState);
+ChatEmptyStateWithSchema.propTypes = emptyStateProps;
 
-export { ChatEmptyState, ChatEmptyStateListWithSchema };
+export { ChatEmptyState, ChatEmptyStateWithSchema };

package/esm/exported-related/chat-empty-state/props.js

@@ -0,0 +1,13 @@
+import { PropTypes } from '@elliemae/ds-props-helpers';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const defaultProps = {
+  label: 'No Messages Yet',
+  action: /*#__PURE__*/jsx(Fragment, {})
+};
+const emptyStateProps = {
+  label: PropTypes.string.description('No Message to show text helper').defaultValue(defaultProps.label),
+  action: PropTypes.node.description('action element').defaultValue(defaultProps.action)
+};
+
+export { defaultProps, emptyStateProps };

package/esm/{parts → exported-related}/chat-empty-state/styled.js

@@ -3,10 +3,10 @@ import { Grid } from '@elliemae/ds-grid';
 
 const CONTAINER_WIDTH = 300;
 const ChatEmptyStateWrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-1tutmen-0"
+  componentId: "sc-16zzc1w-0"
 })(["height:100%;min-width:", "px;overflow:hidden;background:", ";"], CONTAINER_WIDTH, props => props.theme.colors.neutral['050']);
 const MessageWrapper = /*#__PURE__*/styled.p.withConfig({
-  componentId: "sc-1tutmen-1"
+  componentId: "sc-16zzc1w-1"
 })(["font-size:18px;"]);
 
 export { CONTAINER_WIDTH, ChatEmptyStateWrapper, MessageWrapper };

package/esm/{parts → exported-related}/chat-sidebar/SideBarChat.js

@@ -1,6 +1,5 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.url.to-json.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
 import 'core-js/modules/esnext.async-iterator.filter.js';
@@ -9,13 +8,12 @@ import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import React from 'react';
-import { describe } from 'react-desc';
+import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { MenuCollapse, MenuExpand } from '@elliemae/ds-icons';
 import { StyledSideBarContainer, StyledSideBarButtonsContainer } from './styled.js';
 import { TileButton } from '../tile-button/TileButton.js';
-import { SidebarButton } from '../sidebar-button/SidebarButton.js';
+import { SidebarButton } from './sidebar-button/SidebarButton.js';
 import { chatSidebarProps, defaultProps } from './props.js';
-import { useValidateProps } from './config/useValidateProps.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -31,7 +29,6 @@ const FooterChat = _ref => {
   } = _ref;
   return /*#__PURE__*/_jsx(SidebarButton, {
     dsId: "sidebar_footer",
-    label: null,
     Icon: !expanded ? MenuCollapse : MenuExpand,
     onClick: expanded ? onFooterClose : onFooterExpand,
     "aria-pressed": expanded,
@@ -40,7 +37,8 @@ const FooterChat = _ref => {
 };
 
 const SideBarChat = props => {
-  useValidateProps(props, SideBarChatWithSchema.toJSON());
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, chatSidebarProps);
   const {
     sidebarItems,
     expanded,
@@ -51,7 +49,7 @@ const SideBarChat = props => {
     tooltipPlacement,
     enableTooltipWhenIsClosed,
     actionRef
-  } = props;
+  } = propsWithDefault;
   const {
     current: listRef
   } = React.useRef({});
@@ -59,7 +57,9 @@ const SideBarChat = props => {
     if (ref) listRef[ref.dataset.key] = ref;
   }, [listRef]);
   React.useEffect(() => {
-    if (actionRef.current.listRef) {
+    var _actionRef$current;
+
+    if ((_actionRef$current = actionRef.current) !== null && _actionRef$current !== void 0 && _actionRef$current.listRef) {
       actionRef.current.listRef = listRef;
     }
   }, [sidebarItems, expanded, actionRef, listRef]);
@@ -81,7 +81,6 @@ const SideBarChat = props => {
   });
 };
 
-SideBarChat.defaultProps = defaultProps;
 const SideBarChatWithSchema = describe(SideBarChat);
 SideBarChatWithSchema.propTypes = chatSidebarProps;
 

package/esm/{parts → exported-related}/chat-sidebar/props.js

@@ -1,3 +1,4 @@
+import { createRef } from 'react';
 import { PropTypes } from 'react-desc';
 import { noop } from 'lodash';
 
@@ -14,11 +15,7 @@ const defaultProps = {
   },
   tooltipPlacement: 'right',
   enableTooltipWhenIsClosed: false,
-  actionRef: {
-    current: {
-      listRef: []
-    }
-  }
+  actionRef: /*#__PURE__*/createRef()
 };
 const chatSidebarProps = {
   sidebarItems: PropTypes.arrayOf(PropTypes.object).description('The array of out-of-the-box items you want to render inside the sidebar nav of the chat').defaultValue(defaultProps.sidebarItems),

package/esm/{parts → exported-related/chat-sidebar}/sidebar-button/SidebarButton.js

@@ -26,7 +26,7 @@ const SidebarButton = _ref => {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   const handleClick = React.useCallback(() => {
-    onClick(dsId);
+    if (dsId) onClick(dsId);
   }, [onClick, dsId]);
   return /*#__PURE__*/jsxs(StyledSidebarButton, _objectSpread(_objectSpread({
     "data-testid": "sidebar-button-".concat(dsId),

package/esm/{parts → exported-related/chat-sidebar}/sidebar-button/props.js

@@ -1,18 +1,17 @@
-import propsTypes from 'prop-types';
-import { PropTypes } from 'react-desc';
+import { PropTypes } from '@elliemae/ds-props-helpers';
 import { noop } from 'lodash';
 import { Comments } from '@elliemae/ds-icons';
 
 const defaultSidebarButton = {
   Icon: Comments,
-  dsId: undefined,
+  dsId: '',
   label: '',
   onClick: noop,
   title: ''
 };
 const propsSidebarButton = {
   Icon: PropTypes.element.description('Icon component').defaultValue(defaultSidebarButton.Icon),
-  dsId: PropTypes.oneOfType([propsTypes.number, propsTypes.string]).description('Unique id for the button').defaultValue(defaultSidebarButton.dsId),
+  dsId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Unique id for the button').defaultValue(defaultSidebarButton.dsId),
   label: PropTypes.string.description('It will display under the icon').defaultValue(defaultSidebarButton.label),
   title: PropTypes.string.description('Tooltip').defaultValue(defaultSidebarButton.title),
   onClick: PropTypes.func.description('The function to call when the is clicked').defaultValue(defaultSidebarButton.onClick)

package/esm/{parts → exported-related/chat-sidebar}/sidebar-button/styled.js

@@ -1,15 +1,15 @@
 import styled from 'styled-components';
 import { Grid } from '@elliemae/ds-grid';
-import { BUTTON_SIDEBAR_HEIGHT, MIN_WIDTH_SIDEBAR } from '../../styled.js';
+import { BUTTON_SIDEBAR_HEIGHT, MIN_WIDTH_SIDEBAR } from '../../../styled.js';
 
 const StyledSidebarButton = /*#__PURE__*/styled.button.withConfig({
-  componentId: "sc-6ygly3-0"
+  componentId: "sc-1k6wb46-0"
 })(["display:flex;align-items:center;justify-content:center;outline:none;height:", "px;width:", "px;position:relative;border:0;background:transparent;&:focus,&:hover{background:", ";}cursor:pointer;border-bottom:1px solid ", ";svg{fill:", ";}"], BUTTON_SIDEBAR_HEIGHT, MIN_WIDTH_SIDEBAR, props => props.theme.colors.neutral['080'], props => props.theme.colors.neutral['200'], props => props.theme.colors.neutral[500]);
 const StyledSidebarButtonIcon = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-6ygly3-1"
+  componentId: "sc-1k6wb46-1"
 })(["position:relative;"]);
 const StyledSidebarButtonLabel = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-6ygly3-2"
+  componentId: "sc-1k6wb46-2"
 })(["width:30px;text-transform:uppercase;overflow:hidden;text-align:center;"]);
 
 export { StyledSidebarButton, StyledSidebarButtonIcon, StyledSidebarButtonLabel };

package/esm/{parts → exported-related}/chat-sidebar/styled.js

@@ -3,10 +3,10 @@ import { Grid } from '@elliemae/ds-grid';
 import { MIN_WIDTH_SIDEBAR, BUTTON_SIDEBAR_HEIGHT } from '../../styled.js';
 
 const StyledSideBarContainer = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-16uijso-0"
+  componentId: "sc-18v8jb-0"
 })(["height:100%;width:", "px;background:", ";border-right:1px solid ", ";overflow:hidden;"], MIN_WIDTH_SIDEBAR, props => props.theme.colors.neutral['050'], props => props.theme.colors.neutral['100']);
 const StyledSideBarButtonsContainer = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-16uijso-1"
+  componentId: "sc-18v8jb-1"
 })(["overflow-y:auto;align-items:flex-start;justify-content:flex-start;grid-template-rows:repeat(auto-fill,", "px);overflow-x:hidden;scrollbar-width:thin;&::-webkit-scrollbar{width:6px;}"], BUTTON_SIDEBAR_HEIGHT);
 
 export { StyledSideBarButtonsContainer, StyledSideBarContainer };

package/esm/exported-related/floating-button/FloatingButton.js

@@ -0,0 +1,33 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
+import { Comments } from '@elliemae/ds-icons';
+import { StyledFloatingButton } from './styled.js';
+import { propsFloatingButton, defaultFloatingButton } from './props.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _Comments;
+
+const FloatingButton = props => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultFloatingButton);
+  useValidateTypescriptPropTypes(propsWithDefault, propsFloatingButton);
+  const {
+    onFocus,
+    innerRef,
+    onClick
+  } = propsWithDefault;
+  return /*#__PURE__*/jsx(StyledFloatingButton, {
+    onFocus: onFocus,
+    ref: innerRef,
+    "data-testid": "chat-floating-button",
+    onClick: onClick,
+    children: _Comments || (_Comments = /*#__PURE__*/_jsx(Comments, {
+      size: "l"
+    }))
+  });
+};
+
+const FloatingButtonWithSchema = describe(FloatingButton);
+FloatingButtonWithSchema.propTypes = propsFloatingButton;
+
+export { FloatingButton, FloatingButtonWithSchema };

package/esm/exported-related/floating-button/index.js

@@ -0,0 +1 @@
+export { FloatingButton, FloatingButtonWithSchema } from './FloatingButton.js';

package/esm/{parts → exported-related}/floating-button/styled.js

@@ -4,7 +4,7 @@ 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 StyledFloatingButton = /*#__PURE__*/styled.button.withConfig({
-  componentId: "sc-vlozhu-0"
+  componentId: "sc-1i0yavm-0"
 })(["outline:none;cursor:pointer;height:", "px;width:", "px;border:none;background:", ";border-radius:50%;box-shadow:", ";&:hover{background:", ";}&:focus{border:2px solid ", ";box-shadow:inset 0 0 0 2px ", ",", ";}&:active{background:", ";box-shadow:inset 0 0 0 0,", ";}svg{fill:", ";}"], BUTTON_FLOATING, BUTTON_FLOATING, props => props.theme.colors.brand[600], BOX_SHADOW_FLOATING, props => props.theme.colors.brand[700], props => props.theme.colors.brand[700], props => props.theme.colors.neutral['000'], BOX_SHADOW, props => props.theme.colors.brand[800], BOX_SHADOW_FLOATING, props => props.theme.colors.neutral['000']);
 
 export { StyledFloatingButton };

package/esm/{parts → exported-related}/floating-container/styled.js

@@ -3,7 +3,7 @@ import { Grid } from '@elliemae/ds-grid';
 import { BOX_SHADOW } from '../../styled.js';
 
 const StyledFloatingContainer = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-nqvrts-0"
+  componentId: "sc-1qjulsq-0"
 })(["position:fixed;bottom:24px;right:24px;border-radius:4px;z-index:1;box-shadow:", ";background:", ";width:348px;"], BOX_SHADOW, nestedProps => nestedProps.theme.colors.neutral['050']);
 
 export { StyledFloatingContainer };

package/esm/{parts → exported-related}/grid-influencer/InfluencerContainer.js

@@ -1,7 +1,7 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import React from 'react';
 import { StyledChatContainer } from './styled.js';
-import { ChatContainer } from '../chat-container/ChatContainer.js';
+import { ChatContainer } from '../../parts/chat-container/ChatContainer.js';
 import { SideBarChat } from '../chat-sidebar/SideBarChat.js';
 
 var _SideBarChat, _ChatContainer, _div;

package/esm/{parts → exported-related}/grid-influencer/styled.js

@@ -3,10 +3,10 @@ import { Grid } from '@elliemae/ds-grid';
 import { MIN_WIDTH_SIDEBAR } from '../../styled.js';
 
 const StyledChatContainer = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-b6t5vk-0"
+  componentId: "sc-15373cc-0"
 })(["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"
+  componentId: "sc-15373cc-1"
 })(["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/exported-related/index.js

@@ -0,0 +1,11 @@
+export { ChatBubble, ChatBubbleWithSchema } from './bubble/ChatBubble.js';
+export { BUBBLE_TYPES } from './bubble/props.js';
+export { FloatingButton } from './floating-button/FloatingButton.js';
+export { StyledFloatingContainer } from './floating-container/styled.js';
+export { ChatContainerHeader, ChatContainerHeaderWithSchema } from './chat-container-header/ChatContainerHeader.js';
+export { ChatEmptyState, ChatEmptyStateWithSchema } from './chat-empty-state/ChatEmptyState.js';
+export { SideBarChat, SideBarChatWithSchema } from './chat-sidebar/SideBarChat.js';
+export { TileButton, TileButtonWithSchema } from './tile-button/TileButton.js';
+export { MessageDelimiter, MessageDelimiterWithSchema } from './message-delimiter/MessageDelimiter.js';
+export { SystemMessage, SystemMessageWithSchema } from './system-message/SystemMessage.js';
+export { ChatCard, ChatCardWithSchema } from './chat-card/ChatCard.js';

package/esm/exported-related/message-delimiter/MessageDelimiter.js

@@ -0,0 +1,43 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
+import { Wrapper, Line, Text } from './styled.js';
+import { messageDelimiterProps, defaultProps } from './props.js';
+import { jsxs } from 'react/jsx-runtime';
+
+var _Line, _Line2;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const MessageDelimiter = props => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, messageDelimiterProps);
+  const globalAttrs = useGetGlobalAttributes(propsWithDefault);
+  const {
+    title,
+    size,
+    verticalMargin
+  } = propsWithDefault;
+  return /*#__PURE__*/jsxs(Wrapper, _objectSpread(_objectSpread({
+    cols: ['1fr', 'auto', '1fr']
+  }, globalAttrs), {}, {
+    children: [_Line || (_Line = /*#__PURE__*/_jsx(Line, {})), /*#__PURE__*/_jsx(Text, {
+      size: size,
+      verticalMargin: verticalMargin,
+      "data-testid": "chat-message-delimiter-title"
+    }, void 0, title), _Line2 || (_Line2 = /*#__PURE__*/_jsx(Line, {}))]
+  }));
+};
+
+const MessageDelimiterWithSchema = describe(MessageDelimiter);
+MessageDelimiterWithSchema.propTypes = messageDelimiterProps;
+
+export { MessageDelimiter, MessageDelimiterWithSchema };

package/esm/exported-related/message-delimiter/props.js

@@ -0,0 +1,24 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const defaultProps = {
+  title: '',
+  size: 's',
+  verticalMargin: '0px'
+};
+const messageDelimiterProps = _objectSpread(_objectSpread({}, globalAttributesPropTypes), {}, {
+  title: PropTypes.string.isRequired.description('Text to display in the delimiter'),
+  size: PropTypes.oneOf(['s', 'l']).description('size of the delimiter').defaultValue('s'),
+  extraProps: PropTypes.object.description('extra props for delimiter'),
+  verticalMargin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Configurable css vertical margin property for flexibilty')
+});
+
+export { defaultProps, messageDelimiterProps };

package/esm/{parts → exported-related}/message-delimiter/styled.js

@@ -2,13 +2,13 @@ import { Grid } from '@elliemae/ds-grid';
 import styled from 'styled-components';
 
 const Wrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-upz0rt-0"
+  componentId: "sc-1oelxl4-0"
 })(["align-items:center;justify-content:center;width:100%;min-height:8px;"]);
 const Line = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-upz0rt-1"
+  componentId: "sc-1oelxl4-1"
 })(["border-top:1px solid ", ";"], props => props.theme.colors.neutral['400']);
 const Text = /*#__PURE__*/styled.p.withConfig({
-  componentId: "sc-upz0rt-2"
+  componentId: "sc-1oelxl4-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' ? "".concat(props.verticalMargin, "px 8px") : "".concat(props.verticalMargin, " 8px"));
 
 export { Line, Text, Wrapper };