@elliemae/ds-chat 2.3.0-next.4 → 2.3.0-next.8

package/cjs/{parts → exported-related}/bubble/ChatBubble.js

@@ -3,15 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.url.to-json.js');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
-var reactDesc = require('react-desc');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var dsIcons = require('@elliemae/ds-icons');
 var styled = require('./styled.js');
 var props = require('./props.js');
-var useValidateProps = require('./config/useValidateProps.js');
 var ChatBubbleArrow = require('./ChatBubbleArrow.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -21,8 +19,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _br, _WarningCircleFill;
 
-const ChatBubble = props => {
-  useValidateProps.useValidateProps(props, ChatBubbleWithSchema.toJSON());
+const ChatBubble = props$1 => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultBubbleProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, props.BubblesPropTypes);
   const {
     dsId,
     type,
@@ -31,11 +30,10 @@ const ChatBubble = props => {
     body,
     errorMessage,
     helpMessage
-  } = props;
+  } = propsWithDefault;
   const bodyParts = React__default["default"].useMemo(() => typeof body === 'string' ? body.split('\n') : [body], [body]);
   return /*#__PURE__*/_jsx__default["default"](styled.StyledWrapper, {
-    "data-testid": "ds-chat-bubble-".concat(dsId),
-    type: type
+    "data-testid": "ds-chat-bubble-".concat(dsId)
   }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledColoredBubble, {
     type: type
   }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledTitleBubble, {
@@ -67,8 +65,8 @@ const ChatBubble = props => {
   }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, helpMessage)) : null);
 };
 
-const ChatBubbleWithSchema = reactDesc.describe(ChatBubble);
-ChatBubbleWithSchema.propTypes = props.propsBubbles;
+const ChatBubbleWithSchema = dsPropsHelpers.describe(ChatBubble);
+ChatBubbleWithSchema.propTypes = props.BubblesPropTypes;
 
 exports.ChatBubble = ChatBubble;
 exports.ChatBubbleWithSchema = ChatBubbleWithSchema;

package/cjs/exported-related/bubble/props.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function noop() {}
+
+const BUBBLE_TYPES = {
+  SENDER: 'SENDER',
+  RECIPIENT: 'RECIPIENT',
+  DELIMITER: 'DELIMITER',
+  SYSTEM: 'SYSTEM'
+};
+const defaultBubbleProps = {
+  dsId: '',
+  type: BUBBLE_TYPES.SENDER,
+  title: '',
+  time: '',
+  body: '',
+  onClick: noop,
+  errorMessage: '',
+  helpMessage: ''
+};
+const BubblesPropTypes = {
+  dsId: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.string, dsPropsHelpers.PropTypes.number]).description('Unique id for bubble').defaultValue(defaultBubbleProps.dsId),
+  type: dsPropsHelpers.PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER]).isRequired.description('Define bubble type ').defaultValue(defaultBubbleProps.type),
+  title: dsPropsHelpers.PropTypes.string.isRequired.description('Title of the bubble').defaultValue(defaultBubbleProps.title),
+  time: dsPropsHelpers.PropTypes.string.isRequired.description('Time of the bubble').defaultValue(defaultBubbleProps.title),
+  body: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.string, dsPropsHelpers.PropTypes.element]).isRequired.description('Bubble content').defaultValue(defaultBubbleProps.body),
+  onClick: dsPropsHelpers.PropTypes.func.description('Callback when the bubble is tapped').defaultValue(defaultBubbleProps.onClick),
+  errorMessage: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.string, dsPropsHelpers.PropTypes.element]).description('Error message to display at bottom of the bubble').defaultValue(defaultBubbleProps.onClick),
+  helpMessage: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.string, dsPropsHelpers.PropTypes.element]).description('Help message to display at bottom of the bubble').defaultValue(defaultBubbleProps.onClick)
+};
+const propsArrowBubble = {
+  type: dsPropsHelpers.PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER])
+};
+
+exports.BUBBLE_TYPES = BUBBLE_TYPES;
+exports.BubblesPropTypes = BubblesPropTypes;
+exports.defaultBubbleProps = defaultBubbleProps;
+exports.propsArrowBubble = propsArrowBubble;

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

@@ -13,33 +13,33 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 /* eslint-disable max-lines */
 
 const StyledWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-fe8e9o-0"
+  componentId: "sc-57v3aa-0"
 })(["min-width:224px;border-radius:10px;"]); // Bubble HEADER
 
 const StyledTitleBubble = /*#__PURE__*/styled__default["default"](dsGrid.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__default["default"](dsGrid.Grid).withConfig({
-  componentId: "sc-fe8e9o-2"
+  componentId: "sc-57v3aa-2"
 })(["font-size:13px;font-weight:600;"]);
 const StyledTitleRightBubble = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
-  componentId: "sc-fe8e9o-3"
+  componentId: "sc-57v3aa-3"
 })(["font-size:13px;font-weight:400;color:", ";"], props$1 => props$1.type === props.BUBBLE_TYPES.SENDER ? '#FFF' : '#657489');
 const StyleBodyWrapper = /*#__PURE__*/styled__default["default"].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__default["default"].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__default["default"](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__default["default"].div.withConfig({
-  componentId: "sc-fe8e9o-7"
+  componentId: "sc-57v3aa-7"
 })(["display:block;content:'';position:absolute;bottom:10px;height:15px;"]);
 const StyledColoredBubble = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-fe8e9o-8"
+  componentId: "sc-57v3aa-8"
 })(["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;

package/cjs/{parts → exported-related}/chat-card/ChatCard.js

@@ -3,26 +3,25 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.url.to-json.js');
 require('react');
-var reactDesc = require('react-desc');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
 var props = require('./props.js');
-var useValidateProps = require('./config/useValidateProps.js');
 var styled = require('./styled.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-const ChatCard = props => {
-  useValidateProps.useValidateProps(props, ChatCardWithSchema.toJSON());
+const ChatCard = props$1 => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, props.propTypes);
   const {
     title,
     content,
     time,
     rightAddon
-  } = props;
+  } = props$1;
   return /*#__PURE__*/_jsx__default["default"](styled.Wrapper, {
     cols: ['1fr', 'auto'],
     "data-testid": "chat-card-wrapper"
@@ -39,7 +38,7 @@ const ChatCard = props => {
   }, void 0, rightAddon));
 };
 
-const ChatCardWithSchema = reactDesc.describe(ChatCard);
+const ChatCardWithSchema = dsPropsHelpers.describe(ChatCard);
 ChatCardWithSchema.propTypes = props.propTypes;
 
 exports.ChatCard = ChatCard;

package/cjs/exported-related/chat-card/props.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var jsxRuntime = require('react/jsx-runtime');
+
+const defaultProps = {
+  title: '',
+  content: '',
+  time: '',
+  rightAddon: /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {})
+};
+const propTypes = {
+  title: dsPropsHelpers.PropTypes.string.isRequired.description("Card's title"),
+  content: dsPropsHelpers.PropTypes.string.description("Card's content"),
+  time: dsPropsHelpers.PropTypes.string.description('Time'),
+  rightAddon: dsPropsHelpers.PropTypes.element.description('Right addon, badge or icon')
+};
+
+exports.defaultProps = defaultProps;
+exports.propTypes = propTypes;

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

@@ -10,22 +10,22 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const Wrapper = /*#__PURE__*/styled__default["default"](dsGrid.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__default["default"].div.withConfig({
-  componentId: "sc-s0g4hn-1"
+  componentId: "sc-1x060wl-1"
 })([""]);
 const Title = /*#__PURE__*/styled__default["default"].p.withConfig({
-  componentId: "sc-s0g4hn-2"
+  componentId: "sc-1x060wl-2"
 })(["font-size:16px;font-weight:600;margin:0;"]);
 const Content = /*#__PURE__*/styled__default["default"].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__default["default"].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__default["default"].div.withConfig({
-  componentId: "sc-s0g4hn-5"
+  componentId: "sc-1x060wl-5"
 })(["height:fit-content;margin-left:12px;"]);
 
 exports.Content = Content;

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

@@ -4,24 +4,26 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
 var styled = require('./styled.js');
+var props = require('./props.js');
 var helpers = require('./helpers.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-const ChatContainerHeader = props => {
+const ChatContainerHeader = props$1 => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, props.propTypes);
   const {
     title,
-    floating,
     children
-  } = props;
+  } = propsWithDefault;
   return /*#__PURE__*/_jsx__default["default"](styled.StyledChatContainerContentHeader, {
     alignItems: "center",
     cols: ['minmax(calc(100% - 64px), 1fr)', children ? 'auto' : '0px'],
-    floating: floating,
     role: "heading"
   }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledChatContainerContentHeaderLabel, {
     "data-testid": "chat-container-header-title",
@@ -36,4 +38,8 @@ const ChatContainerHeader = props => {
   }, void 0, children));
 };
 
+const ChatContainerHeaderWithSchema = dsPropsHelpers.describe(ChatContainerHeader);
+ChatContainerHeaderWithSchema.propTypes = props.propTypes;
+
 exports.ChatContainerHeader = ChatContainerHeader;
+exports.ChatContainerHeaderWithSchema = ChatContainerHeaderWithSchema;

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

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var jsxRuntime = require('react/jsx-runtime');
+
+const defaultProps = {
+  title: '',
+  children: /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {})
+};
+const propTypes = {
+  title: dsPropsHelpers.PropTypes.string.isRequired.description("Card's title"),
+  children: dsPropsHelpers.PropTypes.node.description('Childrens')
+};
+
+exports.defaultProps = defaultProps;
+exports.propTypes = propTypes;

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

@@ -10,13 +10,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledChatContainerContentHeaderActions = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
-  componentId: "sc-jmynvr-0"
+  componentId: "sc-rsxerm-0"
 })(["max-width:80px;"]);
 const StyledChatContainerContentHeader = /*#__PURE__*/styled__default["default"](dsGrid.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__default["default"](dsGrid.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']);
 
 exports.StyledChatContainerContentHeader = StyledChatContainerContentHeader;

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

@@ -3,27 +3,26 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.url.to-json.js');
 var React = require('react');
-var reactDesc = require('react-desc');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var dsGrid = require('@elliemae/ds-grid');
 var dsIcons = require('@elliemae/ds-icons');
 var props = require('./props.js');
 var styled = require('./styled.js');
-var useValidateProps = require('./config/useValidateProps.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-const ChatEmptyState = props => {
+const ChatEmptyState = props$1 => {
   var _Grid, _Grid2;
 
-  useValidateProps.useValidateProps(props, ChatEmptyStateListWithSchema.toJSON());
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, props.emptyStateProps);
   const {
     label,
     action
-  } = props;
+  } = propsWithDefault;
   const MainContent = React.useMemo(() => /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     alignItems: "center",
     justifyContent: "center"
@@ -46,9 +45,8 @@ const ChatEmptyState = props => {
   }, void 0, MainContent);
 };
 
-ChatEmptyState.defaultProps = props.defaultProps;
-const ChatEmptyStateListWithSchema = reactDesc.describe(ChatEmptyState);
-ChatEmptyStateListWithSchema.propTypes = props.emptyStateProps;
+const ChatEmptyStateWithSchema = dsPropsHelpers.describe(ChatEmptyState);
+ChatEmptyStateWithSchema.propTypes = props.emptyStateProps;
 
 exports.ChatEmptyState = ChatEmptyState;
-exports.ChatEmptyStateListWithSchema = ChatEmptyStateListWithSchema;
+exports.ChatEmptyStateWithSchema = ChatEmptyStateWithSchema;

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

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var jsxRuntime = require('react/jsx-runtime');
+
+const defaultProps = {
+  label: 'No Messages Yet',
+  action: /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {})
+};
+const emptyStateProps = {
+  label: dsPropsHelpers.PropTypes.string.description('No Message to show text helper').defaultValue(defaultProps.label),
+  action: dsPropsHelpers.PropTypes.node.description('action element').defaultValue(defaultProps.action)
+};
+
+exports.defaultProps = defaultProps;
+exports.emptyStateProps = emptyStateProps;

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

@@ -11,10 +11,10 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const CONTAINER_WIDTH = 300;
 const ChatEmptyStateWrapper = /*#__PURE__*/styled__default["default"](dsGrid.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__default["default"].p.withConfig({
-  componentId: "sc-1tutmen-1"
+  componentId: "sc-16zzc1w-1"
 })(["font-size:18px;"]);
 
 exports.CONTAINER_WIDTH = CONTAINER_WIDTH;

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

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.url.to-json.js');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
@@ -13,13 +12,12 @@ require('core-js/modules/esnext.iterator.filter.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
-var reactDesc = require('react-desc');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var dsIcons = require('@elliemae/ds-icons');
 var styled = require('./styled.js');
 var TileButton = require('../tile-button/TileButton.js');
-var SidebarButton = require('../sidebar-button/SidebarButton.js');
+var SidebarButton = require('./sidebar-button/SidebarButton.js');
 var props = require('./props.js');
-var useValidateProps = require('./config/useValidateProps.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -41,7 +39,6 @@ const FooterChat = _ref => {
   } = _ref;
   return /*#__PURE__*/_jsx__default["default"](SidebarButton.SidebarButton, {
     dsId: "sidebar_footer",
-    label: null,
     Icon: !expanded ? dsIcons.MenuCollapse : dsIcons.MenuExpand,
     onClick: expanded ? onFooterClose : onFooterExpand,
     "aria-pressed": expanded,
@@ -49,8 +46,9 @@ const FooterChat = _ref => {
   });
 };
 
-const SideBarChat = props => {
-  useValidateProps.useValidateProps(props, SideBarChatWithSchema.toJSON());
+const SideBarChat = props$1 => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, props.chatSidebarProps);
   const {
     sidebarItems,
     expanded,
@@ -61,7 +59,7 @@ const SideBarChat = props => {
     tooltipPlacement,
     enableTooltipWhenIsClosed,
     actionRef
-  } = props;
+  } = propsWithDefault;
   const {
     current: listRef
   } = React__default["default"].useRef({});
@@ -69,7 +67,9 @@ const SideBarChat = props => {
     if (ref) listRef[ref.dataset.key] = ref;
   }, [listRef]);
   React__default["default"].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]);
@@ -91,8 +91,7 @@ const SideBarChat = props => {
   });
 };
 
-SideBarChat.defaultProps = props.defaultProps;
-const SideBarChatWithSchema = reactDesc.describe(SideBarChat);
+const SideBarChatWithSchema = dsPropsHelpers.describe(SideBarChat);
 SideBarChatWithSchema.propTypes = props.chatSidebarProps;
 
 exports.SideBarChat = SideBarChat;

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var React = require('react');
 var reactDesc = require('react-desc');
 var lodash = require('lodash');
 
@@ -18,11 +19,7 @@ const defaultProps = {
   },
   tooltipPlacement: 'right',
   enableTooltipWhenIsClosed: false,
-  actionRef: {
-    current: {
-      listRef: []
-    }
-  }
+  actionRef: /*#__PURE__*/React.createRef()
 };
 const chatSidebarProps = {
   sidebarItems: reactDesc.PropTypes.arrayOf(reactDesc.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/cjs/{parts → exported-related/chat-sidebar}/sidebar-button/SidebarButton.js

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

package/cjs/exported-related/chat-sidebar/sidebar-button/props.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var lodash = require('lodash');
+var dsIcons = require('@elliemae/ds-icons');
+
+const defaultSidebarButton = {
+  Icon: dsIcons.Comments,
+  dsId: '',
+  label: '',
+  onClick: lodash.noop,
+  title: ''
+};
+const propsSidebarButton = {
+  Icon: dsPropsHelpers.PropTypes.element.description('Icon component').defaultValue(defaultSidebarButton.Icon),
+  dsId: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.number, dsPropsHelpers.PropTypes.string]).description('Unique id for the button').defaultValue(defaultSidebarButton.dsId),
+  label: dsPropsHelpers.PropTypes.string.description('It will display under the icon').defaultValue(defaultSidebarButton.label),
+  title: dsPropsHelpers.PropTypes.string.description('Tooltip').defaultValue(defaultSidebarButton.title),
+  onClick: dsPropsHelpers.PropTypes.func.description('The function to call when the is clicked').defaultValue(defaultSidebarButton.onClick)
+};
+
+exports.defaultSidebarButton = defaultSidebarButton;
+exports.propsSidebarButton = propsSidebarButton;

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

@@ -4,20 +4,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('styled-components');
 var dsGrid = require('@elliemae/ds-grid');
-var styled$1 = require('../../styled.js');
+var styled$1 = require('../../../styled.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledSidebarButton = /*#__PURE__*/styled__default["default"].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:", ";}"], styled$1.BUTTON_SIDEBAR_HEIGHT, styled$1.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__default["default"](dsGrid.Grid).withConfig({
-  componentId: "sc-6ygly3-1"
+  componentId: "sc-1k6wb46-1"
 })(["position:relative;"]);
 const StyledSidebarButtonLabel = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-6ygly3-2"
+  componentId: "sc-1k6wb46-2"
 })(["width:30px;text-transform:uppercase;overflow:hidden;text-align:center;"]);
 
 exports.StyledSidebarButton = StyledSidebarButton;

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

@@ -11,10 +11,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledSideBarContainer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
-  componentId: "sc-16uijso-0"
+  componentId: "sc-18v8jb-0"
 })(["height:100%;width:", "px;background:", ";border-right:1px solid ", ";overflow:hidden;"], styled$1.MIN_WIDTH_SIDEBAR, props => props.theme.colors.neutral['050'], props => props.theme.colors.neutral['100']);
 const StyledSideBarButtonsContainer = /*#__PURE__*/styled__default["default"](dsGrid.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;}"], styled$1.BUTTON_SIDEBAR_HEIGHT);
 
 exports.StyledSideBarButtonsContainer = StyledSideBarButtonsContainer;

package/cjs/{parts → exported-related}/floating-button/FloatingButton.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var dsIcons = require('@elliemae/ds-icons');
 var styled = require('./styled.js');
 var props = require('./props.js');
@@ -14,12 +15,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 var _Comments;
-const FloatingButton = _ref => {
-  let {
-    onClick,
+
+const FloatingButton = props$1 => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultFloatingButton);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, props.propsFloatingButton);
+  const {
     onFocus,
-    innerRef
-  } = _ref;
+    innerRef,
+    onClick
+  } = propsWithDefault;
   return /*#__PURE__*/jsxRuntime.jsx(styled.StyledFloatingButton, {
     onFocus: onFocus,
     ref: innerRef,
@@ -30,6 +34,9 @@ const FloatingButton = _ref => {
     }))
   });
 };
-FloatingButton.defaultProps = props.defaultFloatingButton;
+
+const FloatingButtonWithSchema = dsPropsHelpers.describe(FloatingButton);
+FloatingButtonWithSchema.propTypes = props.propsFloatingButton;
 
 exports.FloatingButton = FloatingButton;
+exports.FloatingButtonWithSchema = FloatingButtonWithSchema;

package/cjs/{parts → exported-related}/floating-button/index.js

@@ -7,3 +7,4 @@ var FloatingButton = require('./FloatingButton.js');
 
 
 exports.FloatingButton = FloatingButton.FloatingButton;
+exports.FloatingButtonWithSchema = FloatingButton.FloatingButtonWithSchema;