@elliemae/ds-chat 1.57.1 → 2.0.0-alpha.11

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

@@ -1,16 +1,16 @@
 import propsTypes from 'prop-types';
 import { PropTypes } from 'react-desc';
 import { noop } from 'lodash';
-import { Comments } from '@elliemae/ds-icons';
+import Comments from '@elliemae/ds-icons/Comments';
 
-var defaultSidebarButton = {
+const defaultSidebarButton = {
   Icon: Comments,
   dsId: undefined,
   label: '',
   onClick: noop,
   title: ''
 };
-var propsSidebarButton = {
+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),
   label: PropTypes.string.description('It will display under the icon').defaultValue(defaultSidebarButton.label),
@@ -19,4 +19,3 @@ var propsSidebarButton = {
 };
 
 export { defaultSidebarButton, propsSidebarButton };
-//# sourceMappingURL=props.js.map

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

@@ -2,21 +2,14 @@ import styled from 'styled-components';
 import { Grid } from '@elliemae/ds-grid';
 import { BUTTON_SIDEBAR_HEIGHT, MIN_WIDTH_SIDEBAR } from '../../styled.js';
 
-var StyledSidebarButton = /*#__PURE__*/styled.button.withConfig({
+const StyledSidebarButton = /*#__PURE__*/styled.button.withConfig({
   componentId: "sc-6ygly3-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, function (props) {
-  return props.theme.colors.neutral['080'];
-}, function (props) {
-  return props.theme.colors.neutral['200'];
-}, function (props) {
-  return props.theme.colors.neutral[500];
-});
-var StyledSidebarButtonIcon = /*#__PURE__*/styled(Grid).withConfig({
+})(["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"
 })(["position:relative;"]);
-var StyledSidebarButtonLabel = /*#__PURE__*/styled.div.withConfig({
+const StyledSidebarButtonLabel = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-6ygly3-2"
 })(["width:30px;text-transform:uppercase;overflow:hidden;text-align:center;"]);
 
 export { StyledSidebarButton, StyledSidebarButtonIcon, StyledSidebarButtonLabel };
-//# sourceMappingURL=styled.js.map

package/esm/parts/system-message/SystemMessage.js

@@ -1,34 +1,35 @@
-import React from 'react';
+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 { Wrapper, Header, Title, Time, Message } from './style.js';
 import { systemMessageProps, defaultProps } from './props.js';
 import { useValidateProps } from './config/useValidateProps.js';
-import 'styled-components';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-props-helpers';
 
-var SystemMessage = function SystemMessage(props) {
+var _span;
+
+const SystemMessage = props => {
   useValidateProps(props, SystemMessageWithSchema.toJSON());
-  var title = props.title,
-      time = props.time,
-      body = props.body;
-  return /*#__PURE__*/React.createElement(Wrapper, {
+  const {
+    title,
+    time,
+    body
+  } = props;
+  return /*#__PURE__*/_jsx(Wrapper, {
     rows: ['auto', 'auto']
-  }, /*#__PURE__*/React.createElement(Header, {
+  }, void 0, /*#__PURE__*/_jsx(Header, {
     cols: ['1fr', 'auto', '1fr']
-  }, /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement(Title, {
+  }, void 0, _span || (_span = /*#__PURE__*/_jsx("span", {})), /*#__PURE__*/_jsx(Title, {
     "data-testid": "chat-system-message-title"
-  }, title), /*#__PURE__*/React.createElement(Time, {
+  }, void 0, title), /*#__PURE__*/_jsx(Time, {
     "data-testid": "chat-system-message-time"
-  }, time)), /*#__PURE__*/React.createElement(Message, {
+  }, void 0, time)), /*#__PURE__*/_jsx(Message, {
     "data-testid": "chat-system-message-body"
-  }, body));
+  }, void 0, body));
 };
 
 SystemMessage.defaultProps = defaultProps;
-SystemMessage.propTypes = systemMessageProps;
-var SystemMessageWithSchema = describe(SystemMessage);
+const SystemMessageWithSchema = describe(SystemMessage);
 SystemMessageWithSchema.propTypes = systemMessageProps;
 
 export { SystemMessage, SystemMessageWithSchema };
-//# sourceMappingURL=SystemMessage.js.map

package/esm/parts/system-message/config/useValidateProps.js

@@ -1,8 +1,7 @@
 import { useValidatePropTypes } from '@elliemae/ds-props-helpers';
 
-var useValidateProps = function useValidateProps(props, schema) {
+const useValidateProps = (props, schema) => {
   useValidatePropTypes(props, schema);
 };
 
 export { useValidateProps };
-//# sourceMappingURL=useValidateProps.js.map

package/esm/parts/system-message/index.js

@@ -1,10 +1 @@
 export { SystemMessage, SystemMessageWithSchema } from './SystemMessage.js';
-import 'react';
-import 'react-desc';
-import './style.js';
-import 'styled-components';
-import '@elliemae/ds-grid';
-import './props.js';
-import './config/useValidateProps.js';
-import '@elliemae/ds-props-helpers';
-//# sourceMappingURL=index.js.map

package/esm/parts/system-message/props.js

@@ -1,15 +1,14 @@
 import { PropTypes } from 'react-desc';
 
-var defaultProps = {
+const defaultProps = {
   title: 'System Message',
   time: '',
   body: ''
 };
-var systemMessageProps = {
+const systemMessageProps = {
   title: PropTypes.string.isRequired.description('Message title').defaultValue('System Message'),
   time: PropTypes.string.description('data of the message, ie: hour'),
   body: PropTypes.string.isRequired.description('message')
 };
 
 export { defaultProps, systemMessageProps };
-//# sourceMappingURL=props.js.map

package/esm/parts/system-message/style.js

@@ -1,37 +1,20 @@
 import styled from 'styled-components';
 import { Grid } from '@elliemae/ds-grid';
 
-var Wrapper = /*#__PURE__*/styled(Grid).withConfig({
+const Wrapper = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-80w41d-0"
-})(["align-items:center;justify-content:center;min-width:268px;max-width:100%;padding:0 8px 8px;border:1px solid ", ";border-radius:10px;background-color:", ";box-shadow:none;"], function (props) {
-  return props.theme.colors.neutral['100'];
-}, function (props) {
-  return props.theme.colors.neutral['080'];
-});
-var Header = /*#__PURE__*/styled(Grid).withConfig({
+})(["align-items:center;justify-content:center;min-width:268px;max-width:100%;padding:0 8px 8px;border:1px solid ", ";border-radius:10px;background-color:", ";box-shadow:none;"], props => props.theme.colors.neutral['100'], props => props.theme.colors.neutral['080']);
+const Header = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-80w41d-1"
 })(["align-items:center;height:36px;"]);
-var Title = /*#__PURE__*/styled.p.withConfig({
+const Title = /*#__PURE__*/styled.p.withConfig({
   componentId: "sc-80w41d-2"
-})(["font-size:14px;font-weight:", ";color:", ";margin:0;"], function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return props.theme.colors.neutral['700'];
-});
-var Time = /*#__PURE__*/styled.p.withConfig({
+})(["font-size:14px;font-weight:", ";color:", ";margin:0;"], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['700']);
+const Time = /*#__PURE__*/styled.p.withConfig({
   componentId: "sc-80w41d-3"
-})(["font-size:12px;font-weight:", ";color:", ";margin:0;text-align:right;"], function (props) {
-  return props.theme.fontWeights.regular;
-}, function (props) {
-  return props.theme.colors.neutral['700'];
-});
-var Message = /*#__PURE__*/styled.p.withConfig({
+})(["font-size:12px;font-weight:", ";color:", ";margin:0;text-align:right;"], props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['700']);
+const Message = /*#__PURE__*/styled.p.withConfig({
   componentId: "sc-80w41d-4"
-})(["font-size:13px;font-weight:", ";color:", ";min-height:32px;text-align:center;margin:0;"], function (props) {
-  return props.theme.fontWeights.regular;
-}, function (props) {
-  return props.theme.colors.neutral['700'];
-});
+})(["font-size:13px;font-weight:", ";color:", ";min-height:32px;text-align:center;margin:0;"], props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['700']);
 
 export { Header, Message, Time, Title, Wrapper };
-//# sourceMappingURL=style.js.map

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

@@ -1,92 +1,92 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.url.to-json.js';
 import React from 'react';
 import { describe } from 'react-desc';
-import { DSTooltipV3 } from '@elliemae/ds-tooltip';
+import DSTooltip from '@elliemae/ds-tooltip';
 import { Grid } from '@elliemae/ds-grid';
-import { CloseXsmall } from '@elliemae/ds-icons';
+import CloseXsmall from '@elliemae/ds-icons/CloseXsmall';
 import { StyledWrapperCentralContent, StyledTileButtonIcon, StyledStatusBadge, StyledTileButtonLabel, StyledTileButton, StyledWrapper, StyledWrapperLeftBorder, CloseButton } from './styled.js';
 import { propsTileButton, defaultTileButton } from './props.js';
 import { useValidateProps } from './config/useValidateProps.js';
-import 'styled-components';
-import 'lodash';
-import '@elliemae/ds-props-helpers';
 
-var TileButton = function TileButton(props) {
+var _StyledWrapperLeftBor, _CloseXsmall;
+
+const TileButton = props => {
+  var _Icon, _StyledStatusBadge, _StyledTileButtonLabe;
+
   useValidateProps(props, TileButtonWithSchema.toJSON());
-  var label = props.label,
-      title = props.title,
-      dsId = props.dsId,
-      onClick = props.onClick,
-      onFocus = props.onFocus,
-      onBlur = props.onBlur,
-      Icon = props.Icon,
-      showClose = props.showClose,
-      onClose = props.onClose,
-      badge = props.badge,
-      badgeColor = props.badgeColor,
-      badgePosition = props.badgePosition,
-      disabled = props.disabled,
-      selected = props.selected,
-      isHeader = props.isHeader,
-      ariaLabel = props.ariaLabel,
-      tooltipPlacement = props.tooltipPlacement,
-      disableTooltip = props.disableTooltip;
-  var handleClick = React.useCallback(function () {
+  const {
+    label,
+    title,
+    dsId,
+    onClick,
+    onFocus,
+    onBlur,
+    Icon,
+    showClose,
+    onClose,
+    badge,
+    badgeColor,
+    badgePosition,
+    disabled,
+    selected,
+    isHeader,
+    ariaLabel
+  } = props;
+  const handleClick = React.useCallback(() => {
     onClick(dsId, title);
   }, [dsId, onClick, title]);
-  var MainContent = React.useMemo(function () {
-    return /*#__PURE__*/React.createElement(StyledWrapperCentralContent, {
-      alignItems: isHeader ? 'center' : undefined
-    }, /*#__PURE__*/React.createElement(Grid, {
-      width: "100%",
-      alignItems: "center",
-      justifyContent: "center"
-    }, /*#__PURE__*/React.createElement(StyledTileButtonIcon, {
-      alignItems: "center",
-      justifyContent: "center"
-    }, /*#__PURE__*/React.createElement(Icon, {
-      size: "m"
-    }), badge ? /*#__PURE__*/React.createElement(StyledStatusBadge, {
-      badgeColor: badgeColor,
-      badgePosition: badgePosition
-    }) : null)), !isHeader ? /*#__PURE__*/React.createElement(Grid, {
-      width: "100%",
-      justifyContent: "center"
-    }, label ? /*#__PURE__*/React.createElement(StyledTileButtonLabel, null, label) : null) : null);
-  }, [isHeader, Icon, badge, badgeColor, badgePosition, label]);
-  var Btn = React.useMemo(function () {
-    return /*#__PURE__*/React.createElement(StyledTileButton, {
-      key: dsId,
-      isHeader: isHeader,
-      value: dsId,
-      "data-testid": "tile-button-".concat(dsId),
-      onClick: handleClick,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      disabled: disabled,
-      selected: selected,
-      badgeColor: badgeColor,
-      badgePosition: badgePosition,
-      "aria-pressed": selected,
-      "aria-label": ariaLabel
-    }, /*#__PURE__*/React.createElement(StyledWrapper, {
-      alignItems: "center",
-      justifyContent: "center"
-    }, /*#__PURE__*/React.createElement("span", null, MainContent), /*#__PURE__*/React.createElement(StyledWrapperLeftBorder, null), showClose && !disabled ? /*#__PURE__*/React.createElement(CloseButton, {
-      onClick: onClose,
-      value: dsId
-    }, /*#__PURE__*/React.createElement(CloseXsmall, null)) : null));
-  }, [MainContent, ariaLabel, badgeColor, badgePosition, disabled, dsId, handleClick, isHeader, onBlur, onClose, onFocus, selected, showClose]);
-  return title && !disableTooltip ? /*#__PURE__*/React.createElement(DSTooltipV3, {
-    id: "ds-chat-tile-tooltip-button-".concat(dsId),
-    text: title,
-    startPlacementPreference: tooltipPlacement
-  }, Btn) : Btn;
+  const MainContent = React.useMemo(() => /*#__PURE__*/_jsx(StyledWrapperCentralContent, {
+    alignItems: isHeader ? 'center' : undefined
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center"
+  }, void 0, /*#__PURE__*/_jsx(StyledTileButtonIcon, {
+    alignItems: "center",
+    justifyContent: "center"
+  }, void 0, _Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {
+    size: "m"
+  })), badge ? _StyledStatusBadge || (_StyledStatusBadge = /*#__PURE__*/_jsx(StyledStatusBadge, {
+    badgeColor: badgeColor,
+    badgePosition: badgePosition
+  })) : null)), !isHeader ? /*#__PURE__*/_jsx(Grid, {
+    width: "100%",
+    justifyContent: "center"
+  }, void 0, label ? _StyledTileButtonLabe || (_StyledTileButtonLabe = /*#__PURE__*/_jsx(StyledTileButtonLabel, {}, void 0, label)) : null) : null), [isHeader, Icon, badge, badgeColor, badgePosition, label]);
+  return /*#__PURE__*/_jsx(StyledTileButton, {
+    isHeader: isHeader,
+    value: dsId,
+    "data-testid": "tile-button-".concat(dsId),
+    onClick: handleClick,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    disabled: disabled,
+    selected: selected,
+    badgeColor: badgeColor,
+    badgePosition: badgePosition,
+    "aria-pressed": selected,
+    "aria-label": ariaLabel
+  }, dsId, /*#__PURE__*/_jsx(StyledWrapper, {
+    alignItems: "center",
+    justifyContent: "center"
+  }, void 0, title ? /*#__PURE__*/_jsx(DSTooltip, {
+    containerProps: {
+      id: "ds-chat-tile-tooltip-button-".concat(dsId),
+      'data-testid': "ds-chat-tile-tooltip-button-".concat(dsId)
+    },
+    interactionType: "hover",
+    title: title,
+    triggerComponent: /*#__PURE__*/_jsx("span", {}, void 0, MainContent),
+    placement: "bottom"
+  }) : MainContent, _StyledWrapperLeftBor || (_StyledWrapperLeftBor = /*#__PURE__*/_jsx(StyledWrapperLeftBorder, {})), showClose && !disabled ? /*#__PURE__*/_jsx(CloseButton, {
+    onClick: onClose,
+    value: dsId
+  }, void 0, _CloseXsmall || (_CloseXsmall = /*#__PURE__*/_jsx(CloseXsmall, {}))) : null));
 };
 
-TileButton.propTypes = propsTileButton;
 TileButton.defaultProps = defaultTileButton;
-var TileButtonWithSchema = describe(TileButton);
+const TileButtonWithSchema = describe(TileButton);
 TileButtonWithSchema.propTypes = propsTileButton;
 
 export { TileButton, TileButtonWithSchema };
-//# sourceMappingURL=TileButton.js.map

package/esm/parts/tile-button/config/useValidateProps.js

@@ -1,8 +1,7 @@
 import { useValidatePropTypes } from '@elliemae/ds-props-helpers';
 
-var useValidateProps = function useValidateProps(props, schema) {
+const useValidateProps = (props, schema) => {
   useValidatePropTypes(props, schema);
 };
 
 export { useValidateProps };
-//# sourceMappingURL=useValidateProps.js.map

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

@@ -1,13 +1 @@
 export { TileButton, TileButtonWithSchema } from './TileButton.js';
-import 'react';
-import 'react-desc';
-import '@elliemae/ds-tooltip';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-icons';
-import './styled.js';
-import 'styled-components';
-import './props.js';
-import 'lodash';
-import './config/useValidateProps.js';
-import '@elliemae/ds-props-helpers';
-//# sourceMappingURL=index.js.map

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

@@ -1,8 +1,8 @@
 import { PropTypes } from 'react-desc';
 import { noop } from 'lodash';
-import { Comments } from '@elliemae/ds-icons';
+import Comments from '@elliemae/ds-icons/Comments';
 
-var defaultTileButton = {
+const defaultTileButton = {
   Icon: Comments,
   dsId: undefined,
   label: '',
@@ -18,11 +18,9 @@ var defaultTileButton = {
   disabled: false,
   selected: false,
   isHeader: false,
-  ariaLabel: 'Tile button',
-  tooltipPlacement: 'right',
-  disableTooltip: false
+  ariaLabel: 'Tile button'
 };
-var propsTileButton = {
+const propsTileButton = {
   Icon: PropTypes.func.description('Icon component').defaultValue(defaultTileButton.Icon),
   dsId: PropTypes.oneOf(['number', 'string']).description('Unique id for the button').defaultValue(defaultTileButton.dsId),
   label: PropTypes.string.description('It will display under the icon').defaultValue(defaultTileButton.label),
@@ -38,10 +36,7 @@ var propsTileButton = {
   disabled: PropTypes.bool.description('It will disabled the button').defaultValue(defaultTileButton.disabled),
   selected: PropTypes.bool.description('Indicate that the button is selected').defaultValue(defaultTileButton.disabled),
   isHeader: PropTypes.bool.description("It won't render the label").defaultValue(defaultTileButton.disabled),
-  ariaLabel: PropTypes.string.description('aria-label attribute').defaultValue(defaultTileButton.ariaLabel),
-  tooltipPlacement: PropTypes.oneOf(['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']).description('start placement preferences, as per popperjs placement option').defaultValue("'right'"),
-  disableTooltip: PropTypes.bool.description('Disable tooltip option').defaultValue(defaultTileButton.disableTooltip)
+  ariaLabel: PropTypes.string.description('aria-label attribute').defaultValue(defaultTileButton.ariaLabel)
 };
 
 export { defaultTileButton, propsTileButton };
-//# sourceMappingURL=props.js.map

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

@@ -2,15 +2,15 @@ import styled, { css } from 'styled-components';
 import { Grid } from '@elliemae/ds-grid';
 
 /* eslint-disable indent */
-var MIN_WIDTH_SIDEBAR = 48;
-var BUTTON_SIDEBAR_HEIGHT = 48; // Buttons
+const MIN_WIDTH_SIDEBAR = 48;
+const BUTTON_SIDEBAR_HEIGHT = 48; // Buttons
 
-var StyledWrapperLeftBorder = /*#__PURE__*/styled(Grid).withConfig({
+const StyledWrapperLeftBorder = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1ebp1zs-0"
 })(["height:100%;width:4px;position:absolute;top:0;left:0;"]);
-var StyledStatusBadge = /*#__PURE__*/styled.div.withConfig({
+const StyledStatusBadge = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1ebp1zs-1"
-})(["height:8px;width:8px;position:absolute;top:0;background:", ";", ";border-radius:50%;box-sizing:content-box;"], function (props) {
+})(["height:8px;width:8px;position:absolute;top:0;background:", ";", ";border-radius:50%;box-sizing:content-box;"], props => {
   switch (props.badgeColor) {
     case 'blue':
       return props.theme.colors.brand[600];
@@ -21,7 +21,7 @@ var StyledStatusBadge = /*#__PURE__*/styled.div.withConfig({
     default:
       return props.theme.colors.brand[600];
   }
-}, function (props) {
+}, props => {
   switch (props.badgePosition) {
     case 'left':
       return 'left: -4px;';
@@ -33,40 +33,22 @@ var StyledStatusBadge = /*#__PURE__*/styled.div.withConfig({
       return 'left: -4px;';
   }
 });
-var StyledWrapperCentralContent = /*#__PURE__*/styled(Grid).withConfig({
+const StyledWrapperCentralContent = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1ebp1zs-2"
 })(["width:24px;height:40px;"]);
-var StyledTileButtonIcon = /*#__PURE__*/styled(Grid).withConfig({
+const StyledTileButtonIcon = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1ebp1zs-3"
-})(["position:relative;height:24px;width:24px;svg{fill:", ";}&:focus{svg{fill:", ";}}"], function (props) {
-  return props.theme.colors.neutral[500];
-}, function (props) {
-  return props.theme.colors.brand[800];
-});
-var StyledTileButtonLabel = /*#__PURE__*/styled.div.withConfig({
+})(["position:relative;height:24px;width:24px;svg{fill:", ";}&:focus{svg{fill:", ";}}"], props => props.theme.colors.neutral[500], props => props.theme.colors.brand[800]);
+const StyledTileButtonLabel = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1ebp1zs-4"
-})(["width:24px;height:", ";text-transform:uppercase;overflow:hidden;text-align:center;font-size:13px;color:", ";line-height:17px;"], function (props) {
-  return props.theme.space.xs;
-}, function (props) {
-  return props.theme.colors.neutral[600];
-});
-var CloseButton = /*#__PURE__*/styled.button.withConfig({
+})(["width:24px;height:", ";text-transform:uppercase;overflow:hidden;text-align:center;font-size:13px;color:", ";line-height:17px;"], props => props.theme.space.xs, props => props.theme.colors.neutral[600]);
+const CloseButton = /*#__PURE__*/styled.button.withConfig({
   componentId: "sc-1ebp1zs-5"
-})(["outline:none;background:none;height:9px;width:9px;position:absolute;top:1px;right:1px;overflow:hidden;padding:0;border:none;span{position:absolute;left:-3px;top:-4px;}&:focus,&:hover{svg{fill:", ";}&:after{display:block;content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:solid 1px ", ";border-radius:2px;}}cursor:pointer;"], function (props) {
-  return props.theme.colors.brand[600];
-}, function (props) {
-  return props.theme.colors.brand[600];
-}); // MAIN WRAPPER
+})(["outline:none;background:none;height:9px;width:9px;position:absolute;top:1px;right:1px;overflow:hidden;padding:0;border:none;span{position:absolute;left:-3px;top:-4px;}&:focus,&:hover{svg{fill:", ";}&:after{display:block;content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:solid 1px ", ";border-radius:2px;}}cursor:pointer;"], props => props.theme.colors.brand[600], props => props.theme.colors.brand[600]); // MAIN WRAPPER
 
-var StyledTileButton = /*#__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, function (props) {
-  return props.isHeader ? "1px solid  ".concat(props.theme.colors.neutral['200']) : 'none';
-}, function (props) {
-  return props.theme.colors.neutral['080'];
-}, StyledStatusBadge, function (props) {
-  return props.theme.colors.neutral['080'];
-}, function (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;';
@@ -77,46 +59,15 @@ var StyledTileButton = /*#__PURE__*/styled.button.withConfig({
     default:
       return 'margin-left: -2px;';
   }
-}, StyledWrapperLeftBorder, function (props) {
-  return props.theme.colors.brand[800];
-}, StyledTileButtonLabel, function (props) {
-  return props.theme.colors.neutral[600];
-}, function (props) {
-  return props.theme.colors.brand[800];
-}, function (props) {
-  return props.theme.colors.neutral['050'];
-}, StyledWrapperLeftBorder, function (props) {
-  return props.theme.colors.brand[600];
-}, StyledTileButtonLabel, function (props) {
-  return props.theme.colors.neutral[600];
-}, function (props) {
-  return props.theme.colors.brand[600];
-}, StyledStatusBadge, function (props) {
-  return props.theme.colors.neutral['050'];
-}, function (props) {
-  return props.theme.colors.neutral['080'];
-}, StyledWrapperLeftBorder, function (props) {
-  return props.theme.colors.neutral['400'];
-}, StyledStatusBadge, function (props) {
-  return props.theme.colors.neutral['500'];
-}, function (props) {
-  return props.theme.colors.neutral['080'];
-}, StyledTileButtonIcon, function (props) {
-  return props.theme.colors.neutral[400];
-}, StyledTileButtonLabel, function (props) {
-  return props.theme.colors.neutral[400];
-}, function (props) {
+}, StyledWrapperLeftBorder, props => props.theme.colors.brand[800], StyledTileButtonLabel, props => props.theme.colors.neutral[600], props => props.theme.colors.brand[800], props => props.theme.colors.neutral['050'], StyledWrapperLeftBorder, props => props.theme.colors.brand[600], StyledTileButtonLabel, props => props.theme.colors.neutral[600], props => props.theme.colors.brand[600], StyledStatusBadge, props => props.theme.colors.neutral['050'], props => props.theme.colors.neutral['080'], StyledWrapperLeftBorder, props => props.theme.colors.neutral['400'], StyledStatusBadge, props => props.theme.colors.neutral['500'], props => props.theme.colors.neutral['080'], StyledTileButtonIcon, props => props.theme.colors.neutral[400], StyledTileButtonLabel, props => props.theme.colors.neutral[400], props => {
   if (props.selected) {
-    return css(["& ", "{background:", ";}"], StyledWrapperLeftBorder, function (nestedProps) {
-      return nestedProps.theme.colors.brand[600];
-    });
+    return css(["& ", "{background:", ";}"], StyledWrapperLeftBorder, nestedProps => nestedProps.theme.colors.brand[600]);
   }
 
   return '';
 });
-var StyledWrapper = /*#__PURE__*/styled(Grid).withConfig({
+const StyledWrapper = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1ebp1zs-7"
 })(["height:100%;width:100%;position:relative;"]);
 
 export { CloseButton, StyledStatusBadge, StyledTileButton, StyledTileButtonIcon, StyledTileButtonLabel, StyledWrapper, StyledWrapperCentralContent, StyledWrapperLeftBorder };
-//# sourceMappingURL=styled.js.map

package/esm/prop-types.js

@@ -1,7 +1,7 @@
 import { PropTypes } from 'react-desc';
 import { noop } from 'lodash';
 
-var defaultProps = {
+const defaultProps = {
   expanded: false,
   expandedWidth: 348,
   openedItem: undefined,
@@ -12,7 +12,7 @@ var defaultProps = {
   onHeaderClose: noop,
   title: 'Header Title'
 };
-var chatProps = {
+const chatProps = {
   containerProps: PropTypes.shape({}).defaultValue({}),
   expanded: PropTypes.bool.description('Whether to show the chat expanded or collapsed').defaultValue(defaultProps.expanded),
   expandedWidth: PropTypes.number.description('Total width attached to the expanded Chat').defaultValue(defaultProps.expandedWidth),
@@ -26,4 +26,3 @@ var chatProps = {
 };
 
 export { chatProps, defaultProps };
-//# sourceMappingURL=prop-types.js.map

package/esm/styled.js

@@ -1,9 +1,8 @@
-var MIN_WIDTH_SIDEBAR = 48;
-var BUTTON_SIDEBAR_HEIGHT = 48;
-var BUTTON_FLOATING = 56;
-var BOX_SHADOW = '0 5px 8px 0 rgba(53,60,70,0.55)';
-var BOX_SHADOW_FLOATING = '0 5px 8px 0 rgba(53,60,70,0.35)';
-var BOX_SHADOW_INSET = "inset 100px 3px 4px 0 rgba(53,60,70,0.50)";
+const MIN_WIDTH_SIDEBAR = 48;
+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)";
 
 export { BOX_SHADOW, BOX_SHADOW_FLOATING, BOX_SHADOW_INSET, BUTTON_FLOATING, BUTTON_SIDEBAR_HEIGHT, MIN_WIDTH_SIDEBAR };
-//# sourceMappingURL=styled.js.map