@elliemae/ds-global-header 2.0.0-alpha.9 → 2.0.0-next.11

package/cjs/GlobalHeaderContainer.js

@@ -10,12 +10,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-const GlobalHeaderContainer = ({
-  children
-}) => /*#__PURE__*/_jsx__default["default"]("header", {
-  "data-testid": "ds-global-header"
-}, void 0, /*#__PURE__*/_jsx__default["default"](styles.Wrapper, {
-  cols: ['auto', '1fr', 'auto']
-}, void 0, children));
+const GlobalHeaderContainer = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"]("header", {
+    "data-testid": "ds-global-header"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styles.Wrapper, {
+    cols: ['auto', '1fr', 'auto']
+  }, void 0, children));
+};
 
 exports.GlobalHeaderContainer = GlobalHeaderContainer;

package/cjs/components/Breadcrumb/GlobalHeaderBreadcrumb.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
 var dsGrid = require('@elliemae/ds-grid');
 var styles = require('./styles.js');
@@ -63,7 +65,7 @@ const GlobalHeaderBreadcrumb = () => {
       isSelected: isSelected,
       onClick: onClick,
       length: breadcrumb.length
-    }, `${instanceUID}-breadcrumb-item-${label}`);
+    }, "".concat(instanceUID, "-breadcrumb-item-").concat(label));
   }), /*#__PURE__*/jsxRuntime.jsx("div", {
     id: "global-header-flex-region",
     ref: flexRegion

package/cjs/components/Breadcrumb/PureBreadcrumb.js

@@ -4,32 +4,34 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
-var Chevron = require('@elliemae/ds-icons/ChevronSmallRight');
+var dsIcons = require('@elliemae/ds-icons');
 var styles = require('./styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var Chevron__default = /*#__PURE__*/_interopDefaultLegacy(Chevron);
 
-var _Chevron;
-const PureBreadcrumb = /*#__PURE__*/React__default["default"].memo(({
-  onClick,
-  isSelected,
-  length,
-  label,
-  hasNext
-}) => /*#__PURE__*/_jsx__default["default"](styles.BreadcrumbItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](styles.LabelButton, {
-  onClick: onClick,
-  "aria-selected": isSelected,
-  "data-testid": "gh-breadcrumb-btn"
-}, void 0, /*#__PURE__*/_jsx__default["default"](styles.Label, {
-  isSelected: isSelected,
-  isOnlyItem: length === 1
-}, void 0, label)), hasNext && (_Chevron || (_Chevron = /*#__PURE__*/_jsx__default["default"](Chevron__default["default"], {
-  size: "m",
-  fill: "#FFF"
-})))));
+var _ChevronSmallRight;
+const PureBreadcrumb = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    onClick,
+    isSelected,
+    length,
+    label,
+    hasNext
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](styles.BreadcrumbItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](styles.LabelButton, {
+    onClick: onClick,
+    "aria-selected": isSelected,
+    "data-testid": "gh-breadcrumb-btn"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styles.Label, {
+    isSelected: isSelected,
+    isOnlyItem: length === 1
+  }, void 0, label)), hasNext && (_ChevronSmallRight || (_ChevronSmallRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallRight, {
+    size: "m",
+    fill: "#FFF"
+  }))));
+});
 
 exports.PureBreadcrumb = PureBreadcrumb;

package/cjs/components/Breadcrumb/styles.js

@@ -10,32 +10,53 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const Pipe = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-1n5l527-0"
-})(["margin:0 7px 0 0;border-left:", ";height:20px;"], ({
-  showIconOnly
-}) => showIconOnly ? 'none' : '1px solid #fff');
+})(["margin:0 7px 0 0;border-left:", ";height:20px;"], _ref => {
+  let {
+    showIconOnly
+  } = _ref;
+  return showIconOnly ? 'none' : '1px solid #fff';
+});
 const BreadcrumbItem = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1n5l527-1"
 })(["display:flex;align-items:center;height:100%;"]);
 const LabelButton = /*#__PURE__*/styled__default["default"].button.withConfig({
   componentId: "sc-1n5l527-2"
-})(["width:fit-content;height:100%;margin:0;padding:0;border:1px solid transparent;background-color:transparent;outline:none;cursor:pointer;position:relative;&:focus{:after{content:'';position:absolute;top:0;left:-7px;width:calc(100% + 14px);height:100%;border:4px solid ", ";border-radius:6px;}:before{content:'';position:absolute;z-index:2;top:2px;left:-5px;width:calc(100% + 10px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"], ({
-  theme
-}) => theme.colors.brand[700], ({
-  theme
-}) => theme.colors.neutral['000']);
+})(["width:fit-content;height:100%;margin:0;padding:0;border:1px solid transparent;background-color:transparent;outline:none;cursor:pointer;position:relative;&:focus{:after{content:'';position:absolute;top:0;left:-7px;width:calc(100% + 14px);height:100%;border:4px solid ", ";border-radius:6px;}:before{content:'';position:absolute;z-index:2;top:2px;left:-5px;width:calc(100% + 10px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"], _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.brand[700];
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral['000'];
+});
 const Label = /*#__PURE__*/styled__default["default"].p.withConfig({
   componentId: "sc-1n5l527-3"
-})(["color:", ";", ";font-size:16px;text-transform:uppercase;border-bottom:", ";margin:3px 5px 0 5px;:hover{", ";}"], ({
-  theme
-}) => theme.colors.neutral['000'], ({
-  theme,
-  isSelected
-}) => `-webkit-text-stroke: 0.4px  ${isSelected ? theme.colors.neutral['000'] : 'transparent'}`, ({
-  isSelected,
-  isOnlyItem
-}) => `2px solid ${isSelected && !isOnlyItem ? '#FFF' : 'transparent'}`, ({
-  theme
-}) => `-webkit-text-stroke: 0.4px ${theme.colors.neutral['000']}`);
+})(["color:", ";", ";font-size:16px;text-transform:uppercase;border-bottom:", ";margin:3px 5px 0 5px;:hover{", ";}"], _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colors.neutral['000'];
+}, _ref5 => {
+  let {
+    theme,
+    isSelected
+  } = _ref5;
+  return "-webkit-text-stroke: 0.4px  ".concat(isSelected ? theme.colors.neutral['000'] : 'transparent');
+}, _ref6 => {
+  let {
+    isSelected,
+    isOnlyItem
+  } = _ref6;
+  return "2px solid ".concat(isSelected && !isOnlyItem ? '#FFF' : 'transparent');
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return "-webkit-text-stroke: 0.4px ".concat(theme.colors.neutral['000']);
+});
 
 exports.BreadcrumbItem = BreadcrumbItem;
 exports.Label = Label;

package/cjs/components/Toolbar/ToolbarItems.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
 var AppPicker = require('../../outOfTheBox/AppPicker/AppPicker.js');
 var PopupMenu = require('../../outOfTheBox/PopupMenu/PopupMenu.js');
@@ -44,7 +46,7 @@ const ToolbarItems = () => {
           Icon: Icon,
           options: options,
           closeOnClick: closeOnClick
-        }, `${instanceUID}-ds-popup-menu-${label}`);
+        }, "".concat(instanceUID, "-ds-popup-menu-").concat(label));
 
       case 'ds-app-picker':
         const {
@@ -64,14 +66,14 @@ const ToolbarItems = () => {
           customSectionTitle: customSectionTitle,
           actionRef: actionRef,
           onKeyDown: onKeyDown
-        }, `${instanceUID}-ds-app-picker-${label}`);
+        }, "".concat(instanceUID, "-ds-app-picker-").concat(label));
 
       default:
         return /*#__PURE__*/_jsx__default["default"](styles.Button, {
           onClick: onClick,
           title: label,
           "data-testid": "gh-toolbar-item"
-        }, `${instanceUID}-ds-toolbar-button-${label}`, _Icon || (_Icon = /*#__PURE__*/_jsx__default["default"](Icon, {
+        }, "".concat(instanceUID, "-ds-toolbar-button-").concat(label), _Icon || (_Icon = /*#__PURE__*/_jsx__default["default"](Icon, {
           fill: "#FFF",
           size: "m"
         })));

package/cjs/components/Toolbar/styles.js

@@ -10,12 +10,21 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const Button = /*#__PURE__*/styled__default["default"].button.withConfig({
   componentId: "sc-1gqj0i3-0"
-})(["height:40px;width:40px;border:none;background-color:transparent;cursor:pointer;position:relative;outline:none;&:hover:not(:focus){background-color:", ";outline:none;}&:focus{:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:4px solid ", ";border-radius:4px;}:before{content:'';position:absolute;z-index:2;top:2px;left:2px;width:calc(100% - 4px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"], ({
-  theme
-}) => theme.colors.brand[700], ({
-  theme
-}) => theme.colors.brand[700], ({
-  theme
-}) => theme.colors.neutral['000']);
+})(["height:40px;width:40px;border:none;background-color:transparent;cursor:pointer;position:relative;outline:none;&:hover:not(:focus){background-color:", ";outline:none;}&:focus{:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:4px solid ", ";border-radius:4px;}:before{content:'';position:absolute;z-index:2;top:2px;left:2px;width:calc(100% - 4px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.brand[700];
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.brand[700];
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral['000'];
+});
 
 exports.Button = Button;

package/cjs/config/useGetPropsWithDefaults.js

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var defaultProps = require('../defaultProps.js');

package/cjs/config/useGlobalHeader.js

@@ -2,6 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
 var uid = require('uid');
 var useGetPropsWithDefaults = require('./useGetPropsWithDefaults.js');

package/cjs/config/useValidateProps.js

@@ -2,6 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var validateHelpers = require('./validateHelpers.js');
 
 const validatePopupItem = componentProps => {

package/cjs/config/validateHelpers.js

@@ -30,42 +30,19 @@ const getVariableType = arg => {
 };
 const isValidToolbarType = string => string === 'ds-app-picker' || string === 'ds-popup-menu';
 const throwBreadcrumbItemError = (validPropKey, invalidProp) => {
-  throw new Error(`You are trying to pass a not valid "${validPropKey}" property for a breadcrumb item, please provide a valid type.
-
-  Received: ${invalidProp} (${typeof invalidProp})
-  Expected: (${breadcrumbProps[validPropKey]})
-  `);
+  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property for a breadcrumb item, please provide a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(typeof invalidProp, ")\n  Expected: (").concat(breadcrumbProps[validPropKey], ")\n  "));
 };
 const throwToolbarPopupItemError = (validPropKey, invalidProp) => {
-  throw new Error(`You are trying to pass a not valid "${validPropKey}" property inside componentProps for a ds-popup-menu 
-    toolbar item, please provide a valid type.
-
-  Received: ${invalidProp} (${getVariableType(invalidProp)})
-  Expected: (${toolbarProps[validPropKey]})
-  `);
+  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property inside componentProps for a ds-popup-menu \n    toolbar item, please provide a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(getVariableType(invalidProp), ")\n  Expected: (").concat(toolbarProps[validPropKey], ")\n  "));
 };
 const throwToolbarAppPickerItemError = (validPropKey, invalidProp) => {
-  throw new Error(`You are trying to pass a not valid "${validPropKey}" property inside componentProps for a ds-app-picker 
-    toolbar item, please provide a valid type.
-
-  Received: ${invalidProp} (${getVariableType(invalidProp)})
-  Expected: (${toolbarProps[validPropKey]})
-  `);
+  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property inside componentProps for a ds-app-picker \n    toolbar item, please provide a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(getVariableType(invalidProp), ")\n  Expected: (").concat(toolbarProps[validPropKey], ")\n  "));
 };
 const throwToolbarItemGenericError = (validPropKey, invalidProp) => {
-  throw new Error(`You are trying to pass a not valid "${validPropKey}" property for a toolbar item, please provide a valid type.
-
-  Received: ${invalidProp} (${getVariableType(invalidProp)})
-  Expected: (${toolbarProps[validPropKey]})
-  `);
+  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property for a toolbar item, please provide a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(getVariableType(invalidProp), ")\n  Expected: (").concat(toolbarProps[validPropKey], ")\n  "));
 };
 const throwLogoError = (validPropKey, invalidProp) => {
-  throw new Error(`You are trying to pass a not valid "${validPropKey}" property for a global header, 
-    remember to provide both Logo and LogoWithBrand properties with a valid type.
-
-  Received: ${invalidProp} (${getVariableType(invalidProp)}).
-  Expected: (react component).
-  `);
+  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property for a global header, \n    remember to provide both Logo and LogoWithBrand properties with a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(getVariableType(invalidProp), ").\n  Expected: (react component).\n  "));
 };
 
 exports.breadcrumbProps = breadcrumbProps;

package/cjs/outOfTheBox/AppPicker/AppPicker.js

@@ -3,30 +3,31 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var dsAppPicker = require('@elliemae/ds-app-picker');
-var MenuPicker = require('@elliemae/ds-icons/MenuPicker');
+var dsIcons = require('@elliemae/ds-icons');
 var styles = require('../../components/Toolbar/styles.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var MenuPicker__default = /*#__PURE__*/_interopDefaultLegacy(MenuPicker);
 
 var _MenuPicker;
-const AppPicker = ({
-  label,
-  apps,
-  customApps,
-  sectionTitle,
-  customSectionTitle,
-  onClick = () => null,
-  actionRef,
-  onKeyDown: customHandleOnKeyDown = () => null
-}) => {
+const AppPicker = _ref => {
   var _DSAppPicker;
 
+  let {
+    label,
+    apps,
+    customApps,
+    sectionTitle,
+    customSectionTitle,
+    onClick = () => null,
+    actionRef,
+    onKeyDown: customHandleOnKeyDown = () => null
+  } = _ref;
   const [isOpen, setIsOpen] = React.useState(false);
   const buttonRef = React.useRef();
   const handleTriggerKeyDown = React.useCallback(e => {
@@ -48,22 +49,25 @@ const AppPicker = ({
     setIsOpen(true);
     onClick(e);
   }, [onClick]);
-  const trigger = React.useMemo(() => ({
-    ref
-  }) => /*#__PURE__*/jsxRuntime.jsx("div", {
-    ref: ref,
-    children: /*#__PURE__*/jsxRuntime.jsx(styles.Button, {
-      onClick: handleOnClick,
-      onKeyDown: handleTriggerKeyDown,
-      ref: buttonRef,
-      title: label,
-      "data-testid": "gh-toolbar-item",
-      children: _MenuPicker || (_MenuPicker = /*#__PURE__*/_jsx__default["default"](MenuPicker__default["default"], {
-        fill: "#FFF",
-        size: "m"
-      }))
-    })
-  }), [handleOnClick, handleTriggerKeyDown, label]);
+  const trigger = React.useMemo(() => _ref2 => {
+    let {
+      ref
+    } = _ref2;
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: ref,
+      children: /*#__PURE__*/jsxRuntime.jsx(styles.Button, {
+        onClick: handleOnClick,
+        onKeyDown: handleTriggerKeyDown,
+        ref: buttonRef,
+        title: label,
+        "data-testid": "gh-toolbar-item",
+        children: _MenuPicker || (_MenuPicker = /*#__PURE__*/_jsx__default["default"](dsIcons.MenuPicker, {
+          fill: "#FFF",
+          size: "m"
+        }))
+      })
+    });
+  }, [handleOnClick, handleTriggerKeyDown, label]);
   return React.useMemo(() => _DSAppPicker || (_DSAppPicker = /*#__PURE__*/_jsx__default["default"](dsAppPicker.DSAppPicker, {
     isOpen: isOpen,
     apps: apps,

package/cjs/outOfTheBox/PopupMenu/PopupMenu.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var Popover = require('@elliemae/ds-popover');
 var PopupMenuContent = require('./PopupMenuContent.js');
@@ -14,15 +15,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
 
-const PopupMenu = ({
-  Icon,
-  options,
-  closeOnClick,
-  title,
-  onClick
-}) => {
+const PopupMenu = _ref => {
   var _PopupMenuContent;
 
+  let {
+    Icon,
+    options,
+    closeOnClick,
+    title,
+    onClick
+  } = _ref;
   const [isOpen, setIsOpen] = React.useState(false);
   const buttonRef = React.useRef();
   const handleKeyPress = React.useCallback(e => {
@@ -49,20 +51,23 @@ const PopupMenu = ({
     onItemClick: handleItemClick,
     onClose: handleOnClose
   })), [options, handleItemClick, handleOnClose]);
-  const trigger = React.useMemo(() => ({
-    ref
-  }) => /*#__PURE__*/jsxRuntime.jsx(styles.Button, {
-    onClick: handleTriggerOnClick,
-    onKeyPress: handleKeyPress,
-    title: title,
-    ref: buttonRef,
-    "data-testid": "gh-toolbar-item",
-    children: /*#__PURE__*/_jsx__default["default"](Icon, {
-      innerRef: ref,
-      fill: "#FFF",
-      size: "m"
-    })
-  }), [Icon, handleKeyPress, handleTriggerOnClick, title]);
+  const trigger = React.useMemo(() => _ref2 => {
+    let {
+      ref
+    } = _ref2;
+    return /*#__PURE__*/jsxRuntime.jsx(styles.Button, {
+      onClick: handleTriggerOnClick,
+      onKeyPress: handleKeyPress,
+      title: title,
+      ref: buttonRef,
+      "data-testid": "gh-toolbar-item",
+      children: /*#__PURE__*/_jsx__default["default"](Icon, {
+        innerRef: ref,
+        fill: "#FFF",
+        size: "m"
+      })
+    });
+  }, [Icon, handleKeyPress, handleTriggerOnClick, title]);
   return React.useMemo(() => /*#__PURE__*/_jsx__default["default"](Popover__default["default"], {
     isOpen: isOpen,
     content: content,

package/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
 var styles = require('./styles.js');
 var GlobalHeaderContext = require('../../GlobalHeaderContext.js');
@@ -13,11 +15,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const PopupMenuContent = /*#__PURE__*/React__default["default"].memo(({
-  options,
-  onItemClick,
-  onClose
-}) => {
+const PopupMenuContent = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    options,
+    onItemClick,
+    onClose
+  } = _ref;
   const {
     instanceUID
   } = React.useContext(GlobalHeaderContext.GlobalHeaderContext);
@@ -49,19 +52,19 @@ const PopupMenuContent = /*#__PURE__*/React__default["default"].memo(({
 
     switch (type) {
       case 'separator':
-        return /*#__PURE__*/_jsx__default["default"](styles.Separator, {}, `${instanceUID}-separator-${label}`);
+        return /*#__PURE__*/_jsx__default["default"](styles.Separator, {}, "".concat(instanceUID, "-separator-").concat(label));
 
       case 'custom':
         return /*#__PURE__*/_jsx__default["default"](styles.ItemWrapper, {
           onClick: handleClick,
           onKeyDown: handleKeyDown
-        }, `${instanceUID}-popup-${label}`, _Content || (_Content = /*#__PURE__*/_jsx__default["default"](Content, {})));
+        }, "".concat(instanceUID, "-popup-").concat(label), _Content || (_Content = /*#__PURE__*/_jsx__default["default"](Content, {})));
 
       default:
         return /*#__PURE__*/_jsx__default["default"](styles.ItemWrapper, {
           onClick: handleClick,
           onKeyDown: handleKeyDown
-        }, `${instanceUID}-popup-${label}`, icon, styles.Label && /*#__PURE__*/_jsx__default["default"](styles.Label, {}, void 0, label));
+        }, "".concat(instanceUID, "-popup-").concat(label), icon, styles.Label && /*#__PURE__*/_jsx__default["default"](styles.Label, {}, void 0, label));
     }
   }), [onClose, onItemClick, options, instanceUID]);
   return /*#__PURE__*/jsxRuntime.jsx(styles.List, {

package/cjs/outOfTheBox/PopupMenu/styles.js

@@ -13,9 +13,12 @@ const List = /*#__PURE__*/styled__default["default"].div.withConfig({
 })(["padding:5px 0px;"]);
 const ItemWrapper = /*#__PURE__*/styled__default["default"].button.withConfig({
   componentId: "sc-snqcgs-1"
-})(["display:flex;align-items:center;justify-content:center;width:100%;padding:0 20px;cursor:pointer;border:1px solid transparent;background-color:transparent;outline:none;:hover,:focus{border:", ";}"], ({
-  theme
-}) => `1px solid ${theme.colors.brand[600]}`);
+})(["display:flex;align-items:center;justify-content:center;width:100%;padding:0 20px;cursor:pointer;border:1px solid transparent;background-color:transparent;outline:none;:hover,:focus{border:", ";}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return "1px solid ".concat(theme.colors.brand[600]);
+});
 const Label = /*#__PURE__*/styled__default["default"].p.withConfig({
   componentId: "sc-snqcgs-2"
 })(["width:100%;font-size:14px;margin:10px;"]);

package/cjs/styles.js

@@ -11,8 +11,11 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const Wrapper = /*#__PURE__*/styled__default["default"](dsGrid.GridContainer).withConfig({
   componentId: "sc-1v5zxxm-0"
-})(["background-image:linear-gradient(45deg,#0f364a 0%,#1b6392 54%,#164566 100%);color:", ";width:100%;height:40px;padding:0 24px 0 12px;"], ({
-  theme
-}) => theme.colors.neutral['000']);
+})(["background-image:linear-gradient(45deg,#0f364a 0%,#1b6392 54%,#164566 100%);color:", ";width:100%;height:40px;padding:0 24px 0 12px;"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral['000'];
+});
 
 exports.Wrapper = Wrapper;

package/esm/GlobalHeaderContainer.js

@@ -2,12 +2,15 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { Wrapper } from './styles.js';
 
-const GlobalHeaderContainer = ({
-  children
-}) => /*#__PURE__*/_jsx("header", {
-  "data-testid": "ds-global-header"
-}, void 0, /*#__PURE__*/_jsx(Wrapper, {
-  cols: ['auto', '1fr', 'auto']
-}, void 0, children));
+const GlobalHeaderContainer = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx("header", {
+    "data-testid": "ds-global-header"
+  }, void 0, /*#__PURE__*/_jsx(Wrapper, {
+    cols: ['auto', '1fr', 'auto']
+  }, void 0, children));
+};
 
 export { GlobalHeaderContainer };

package/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js

@@ -1,4 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import { useContext, useRef, useEffect } from 'react';
 import { Grid } from '@elliemae/ds-grid';
 import { Pipe } from './styles.js';
@@ -55,7 +57,7 @@ const GlobalHeaderBreadcrumb = () => {
       isSelected: isSelected,
       onClick: onClick,
       length: breadcrumb.length
-    }, `${instanceUID}-breadcrumb-item-${label}`);
+    }, "".concat(instanceUID, "-breadcrumb-item-").concat(label));
   }), /*#__PURE__*/jsx("div", {
     id: "global-header-flex-region",
     ref: flexRegion

package/esm/components/Breadcrumb/PureBreadcrumb.js

@@ -1,25 +1,28 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import React from 'react';
-import Chevron from '@elliemae/ds-icons/ChevronSmallRight';
+import { ChevronSmallRight } from '@elliemae/ds-icons';
 import { BreadcrumbItem, LabelButton, Label } from './styles.js';
 
-var _Chevron;
-const PureBreadcrumb = /*#__PURE__*/React.memo(({
-  onClick,
-  isSelected,
-  length,
-  label,
-  hasNext
-}) => /*#__PURE__*/_jsx(BreadcrumbItem, {}, void 0, /*#__PURE__*/_jsx(LabelButton, {
-  onClick: onClick,
-  "aria-selected": isSelected,
-  "data-testid": "gh-breadcrumb-btn"
-}, void 0, /*#__PURE__*/_jsx(Label, {
-  isSelected: isSelected,
-  isOnlyItem: length === 1
-}, void 0, label)), hasNext && (_Chevron || (_Chevron = /*#__PURE__*/_jsx(Chevron, {
-  size: "m",
-  fill: "#FFF"
-})))));
+var _ChevronSmallRight;
+const PureBreadcrumb = /*#__PURE__*/React.memo(_ref => {
+  let {
+    onClick,
+    isSelected,
+    length,
+    label,
+    hasNext
+  } = _ref;
+  return /*#__PURE__*/_jsx(BreadcrumbItem, {}, void 0, /*#__PURE__*/_jsx(LabelButton, {
+    onClick: onClick,
+    "aria-selected": isSelected,
+    "data-testid": "gh-breadcrumb-btn"
+  }, void 0, /*#__PURE__*/_jsx(Label, {
+    isSelected: isSelected,
+    isOnlyItem: length === 1
+  }, void 0, label)), hasNext && (_ChevronSmallRight || (_ChevronSmallRight = /*#__PURE__*/_jsx(ChevronSmallRight, {
+    size: "m",
+    fill: "#FFF"
+  }))));
+});
 
 export { PureBreadcrumb };

package/esm/components/Breadcrumb/styles.js

@@ -2,31 +2,52 @@ import styled from 'styled-components';
 
 const Pipe = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-1n5l527-0"
-})(["margin:0 7px 0 0;border-left:", ";height:20px;"], ({
-  showIconOnly
-}) => showIconOnly ? 'none' : '1px solid #fff');
+})(["margin:0 7px 0 0;border-left:", ";height:20px;"], _ref => {
+  let {
+    showIconOnly
+  } = _ref;
+  return showIconOnly ? 'none' : '1px solid #fff';
+});
 const BreadcrumbItem = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1n5l527-1"
 })(["display:flex;align-items:center;height:100%;"]);
 const LabelButton = /*#__PURE__*/styled.button.withConfig({
   componentId: "sc-1n5l527-2"
-})(["width:fit-content;height:100%;margin:0;padding:0;border:1px solid transparent;background-color:transparent;outline:none;cursor:pointer;position:relative;&:focus{:after{content:'';position:absolute;top:0;left:-7px;width:calc(100% + 14px);height:100%;border:4px solid ", ";border-radius:6px;}:before{content:'';position:absolute;z-index:2;top:2px;left:-5px;width:calc(100% + 10px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"], ({
-  theme
-}) => theme.colors.brand[700], ({
-  theme
-}) => theme.colors.neutral['000']);
+})(["width:fit-content;height:100%;margin:0;padding:0;border:1px solid transparent;background-color:transparent;outline:none;cursor:pointer;position:relative;&:focus{:after{content:'';position:absolute;top:0;left:-7px;width:calc(100% + 14px);height:100%;border:4px solid ", ";border-radius:6px;}:before{content:'';position:absolute;z-index:2;top:2px;left:-5px;width:calc(100% + 10px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"], _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.brand[700];
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral['000'];
+});
 const Label = /*#__PURE__*/styled.p.withConfig({
   componentId: "sc-1n5l527-3"
-})(["color:", ";", ";font-size:16px;text-transform:uppercase;border-bottom:", ";margin:3px 5px 0 5px;:hover{", ";}"], ({
-  theme
-}) => theme.colors.neutral['000'], ({
-  theme,
-  isSelected
-}) => `-webkit-text-stroke: 0.4px  ${isSelected ? theme.colors.neutral['000'] : 'transparent'}`, ({
-  isSelected,
-  isOnlyItem
-}) => `2px solid ${isSelected && !isOnlyItem ? '#FFF' : 'transparent'}`, ({
-  theme
-}) => `-webkit-text-stroke: 0.4px ${theme.colors.neutral['000']}`);
+})(["color:", ";", ";font-size:16px;text-transform:uppercase;border-bottom:", ";margin:3px 5px 0 5px;:hover{", ";}"], _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colors.neutral['000'];
+}, _ref5 => {
+  let {
+    theme,
+    isSelected
+  } = _ref5;
+  return "-webkit-text-stroke: 0.4px  ".concat(isSelected ? theme.colors.neutral['000'] : 'transparent');
+}, _ref6 => {
+  let {
+    isSelected,
+    isOnlyItem
+  } = _ref6;
+  return "2px solid ".concat(isSelected && !isOnlyItem ? '#FFF' : 'transparent');
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return "-webkit-text-stroke: 0.4px ".concat(theme.colors.neutral['000']);
+});
 
 export { BreadcrumbItem, Label, LabelButton, Pipe };

package/esm/components/Toolbar/ToolbarItems.js

@@ -1,4 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import { useContext, useMemo } from 'react';
 import { AppPicker } from '../../outOfTheBox/AppPicker/AppPicker.js';
 import { PopupMenu } from '../../outOfTheBox/PopupMenu/PopupMenu.js';
@@ -36,7 +38,7 @@ const ToolbarItems = () => {
           Icon: Icon,
           options: options,
           closeOnClick: closeOnClick
-        }, `${instanceUID}-ds-popup-menu-${label}`);
+        }, "".concat(instanceUID, "-ds-popup-menu-").concat(label));
 
       case 'ds-app-picker':
         const {
@@ -56,14 +58,14 @@ const ToolbarItems = () => {
           customSectionTitle: customSectionTitle,
           actionRef: actionRef,
           onKeyDown: onKeyDown
-        }, `${instanceUID}-ds-app-picker-${label}`);
+        }, "".concat(instanceUID, "-ds-app-picker-").concat(label));
 
       default:
         return /*#__PURE__*/_jsx(Button, {
           onClick: onClick,
           title: label,
           "data-testid": "gh-toolbar-item"
-        }, `${instanceUID}-ds-toolbar-button-${label}`, _Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {
+        }, "".concat(instanceUID, "-ds-toolbar-button-").concat(label), _Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {
           fill: "#FFF",
           size: "m"
         })));

package/esm/components/Toolbar/styles.js

@@ -2,12 +2,21 @@ import styled from 'styled-components';
 
 const Button = /*#__PURE__*/styled.button.withConfig({
   componentId: "sc-1gqj0i3-0"
-})(["height:40px;width:40px;border:none;background-color:transparent;cursor:pointer;position:relative;outline:none;&:hover:not(:focus){background-color:", ";outline:none;}&:focus{:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:4px solid ", ";border-radius:4px;}:before{content:'';position:absolute;z-index:2;top:2px;left:2px;width:calc(100% - 4px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"], ({
-  theme
-}) => theme.colors.brand[700], ({
-  theme
-}) => theme.colors.brand[700], ({
-  theme
-}) => theme.colors.neutral['000']);
+})(["height:40px;width:40px;border:none;background-color:transparent;cursor:pointer;position:relative;outline:none;&:hover:not(:focus){background-color:", ";outline:none;}&:focus{:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:4px solid ", ";border-radius:4px;}:before{content:'';position:absolute;z-index:2;top:2px;left:2px;width:calc(100% - 4px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.brand[700];
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.brand[700];
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral['000'];
+});
 
 export { Button };

package/esm/config/useGetPropsWithDefaults.js

@@ -1,3 +1,8 @@
+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 { useMemo } from 'react';
 import { defaultProps } from '../defaultProps.js';

package/esm/config/useGlobalHeader.js

@@ -1,3 +1,6 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import React, { useState, useMemo } from 'react';
 import { uid } from 'uid';
 import { useGetPropsWithDefaults } from './useGetPropsWithDefaults.js';

package/esm/config/useValidateProps.js

@@ -1,3 +1,6 @@
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { throwLogoError, throwBreadcrumbItemError, isValidToolbarType, throwToolbarItemGenericError, isObject, throwToolbarPopupItemError, throwToolbarAppPickerItemError } from './validateHelpers.js';
 
 const validatePopupItem = componentProps => {

package/esm/config/validateHelpers.js

@@ -26,42 +26,19 @@ const getVariableType = arg => {
 };
 const isValidToolbarType = string => string === 'ds-app-picker' || string === 'ds-popup-menu';
 const throwBreadcrumbItemError = (validPropKey, invalidProp) => {
-  throw new Error(`You are trying to pass a not valid "${validPropKey}" property for a breadcrumb item, please provide a valid type.
-
-  Received: ${invalidProp} (${typeof invalidProp})
-  Expected: (${breadcrumbProps[validPropKey]})
-  `);
+  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property for a breadcrumb item, please provide a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(typeof invalidProp, ")\n  Expected: (").concat(breadcrumbProps[validPropKey], ")\n  "));
 };
 const throwToolbarPopupItemError = (validPropKey, invalidProp) => {
-  throw new Error(`You are trying to pass a not valid "${validPropKey}" property inside componentProps for a ds-popup-menu 
-    toolbar item, please provide a valid type.
-
-  Received: ${invalidProp} (${getVariableType(invalidProp)})
-  Expected: (${toolbarProps[validPropKey]})
-  `);
+  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property inside componentProps for a ds-popup-menu \n    toolbar item, please provide a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(getVariableType(invalidProp), ")\n  Expected: (").concat(toolbarProps[validPropKey], ")\n  "));
 };
 const throwToolbarAppPickerItemError = (validPropKey, invalidProp) => {
-  throw new Error(`You are trying to pass a not valid "${validPropKey}" property inside componentProps for a ds-app-picker 
-    toolbar item, please provide a valid type.
-
-  Received: ${invalidProp} (${getVariableType(invalidProp)})
-  Expected: (${toolbarProps[validPropKey]})
-  `);
+  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property inside componentProps for a ds-app-picker \n    toolbar item, please provide a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(getVariableType(invalidProp), ")\n  Expected: (").concat(toolbarProps[validPropKey], ")\n  "));
 };
 const throwToolbarItemGenericError = (validPropKey, invalidProp) => {
-  throw new Error(`You are trying to pass a not valid "${validPropKey}" property for a toolbar item, please provide a valid type.
-
-  Received: ${invalidProp} (${getVariableType(invalidProp)})
-  Expected: (${toolbarProps[validPropKey]})
-  `);
+  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property for a toolbar item, please provide a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(getVariableType(invalidProp), ")\n  Expected: (").concat(toolbarProps[validPropKey], ")\n  "));
 };
 const throwLogoError = (validPropKey, invalidProp) => {
-  throw new Error(`You are trying to pass a not valid "${validPropKey}" property for a global header, 
-    remember to provide both Logo and LogoWithBrand properties with a valid type.
-
-  Received: ${invalidProp} (${getVariableType(invalidProp)}).
-  Expected: (react component).
-  `);
+  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property for a global header, \n    remember to provide both Logo and LogoWithBrand properties with a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(getVariableType(invalidProp), ").\n  Expected: (react component).\n  "));
 };
 
 export { breadcrumbProps, getVariableType, isObject, isValidToolbarType, throwBreadcrumbItemError, throwLogoError, throwToolbarAppPickerItemError, throwToolbarItemGenericError, throwToolbarPopupItemError, toolbarProps };

package/esm/outOfTheBox/AppPicker/AppPicker.js

@@ -1,23 +1,25 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useRef, useCallback, useMemo } from 'react';
 import { DSAppPicker } from '@elliemae/ds-app-picker';
-import MenuPicker from '@elliemae/ds-icons/MenuPicker';
+import { MenuPicker } from '@elliemae/ds-icons';
 import { Button } from '../../components/Toolbar/styles.js';
 import { jsx } from 'react/jsx-runtime';
 
 var _MenuPicker;
-const AppPicker = ({
-  label,
-  apps,
-  customApps,
-  sectionTitle,
-  customSectionTitle,
-  onClick = () => null,
-  actionRef,
-  onKeyDown: customHandleOnKeyDown = () => null
-}) => {
+const AppPicker = _ref => {
   var _DSAppPicker;
 
+  let {
+    label,
+    apps,
+    customApps,
+    sectionTitle,
+    customSectionTitle,
+    onClick = () => null,
+    actionRef,
+    onKeyDown: customHandleOnKeyDown = () => null
+  } = _ref;
   const [isOpen, setIsOpen] = useState(false);
   const buttonRef = useRef();
   const handleTriggerKeyDown = useCallback(e => {
@@ -39,22 +41,25 @@ const AppPicker = ({
     setIsOpen(true);
     onClick(e);
   }, [onClick]);
-  const trigger = useMemo(() => ({
-    ref
-  }) => /*#__PURE__*/jsx("div", {
-    ref: ref,
-    children: /*#__PURE__*/jsx(Button, {
-      onClick: handleOnClick,
-      onKeyDown: handleTriggerKeyDown,
-      ref: buttonRef,
-      title: label,
-      "data-testid": "gh-toolbar-item",
-      children: _MenuPicker || (_MenuPicker = /*#__PURE__*/_jsx(MenuPicker, {
-        fill: "#FFF",
-        size: "m"
-      }))
-    })
-  }), [handleOnClick, handleTriggerKeyDown, label]);
+  const trigger = useMemo(() => _ref2 => {
+    let {
+      ref
+    } = _ref2;
+    return /*#__PURE__*/jsx("div", {
+      ref: ref,
+      children: /*#__PURE__*/jsx(Button, {
+        onClick: handleOnClick,
+        onKeyDown: handleTriggerKeyDown,
+        ref: buttonRef,
+        title: label,
+        "data-testid": "gh-toolbar-item",
+        children: _MenuPicker || (_MenuPicker = /*#__PURE__*/_jsx(MenuPicker, {
+          fill: "#FFF",
+          size: "m"
+        }))
+      })
+    });
+  }, [handleOnClick, handleTriggerKeyDown, label]);
   return useMemo(() => _DSAppPicker || (_DSAppPicker = /*#__PURE__*/_jsx(DSAppPicker, {
     isOpen: isOpen,
     apps: apps,

package/esm/outOfTheBox/PopupMenu/PopupMenu.js

@@ -1,19 +1,21 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useRef, useCallback, useMemo } from 'react';
 import Popover from '@elliemae/ds-popover';
 import { PopupMenuContent } from './PopupMenuContent.js';
 import { Button } from '../../components/Toolbar/styles.js';
 import { jsx } from 'react/jsx-runtime';
 
-const PopupMenu = ({
-  Icon,
-  options,
-  closeOnClick,
-  title,
-  onClick
-}) => {
+const PopupMenu = _ref => {
   var _PopupMenuContent;
 
+  let {
+    Icon,
+    options,
+    closeOnClick,
+    title,
+    onClick
+  } = _ref;
   const [isOpen, setIsOpen] = useState(false);
   const buttonRef = useRef();
   const handleKeyPress = useCallback(e => {
@@ -40,20 +42,23 @@ const PopupMenu = ({
     onItemClick: handleItemClick,
     onClose: handleOnClose
   })), [options, handleItemClick, handleOnClose]);
-  const trigger = useMemo(() => ({
-    ref
-  }) => /*#__PURE__*/jsx(Button, {
-    onClick: handleTriggerOnClick,
-    onKeyPress: handleKeyPress,
-    title: title,
-    ref: buttonRef,
-    "data-testid": "gh-toolbar-item",
-    children: /*#__PURE__*/_jsx(Icon, {
-      innerRef: ref,
-      fill: "#FFF",
-      size: "m"
-    })
-  }), [Icon, handleKeyPress, handleTriggerOnClick, title]);
+  const trigger = useMemo(() => _ref2 => {
+    let {
+      ref
+    } = _ref2;
+    return /*#__PURE__*/jsx(Button, {
+      onClick: handleTriggerOnClick,
+      onKeyPress: handleKeyPress,
+      title: title,
+      ref: buttonRef,
+      "data-testid": "gh-toolbar-item",
+      children: /*#__PURE__*/_jsx(Icon, {
+        innerRef: ref,
+        fill: "#FFF",
+        size: "m"
+      })
+    });
+  }, [Icon, handleKeyPress, handleTriggerOnClick, title]);
   return useMemo(() => /*#__PURE__*/_jsx(Popover, {
     isOpen: isOpen,
     content: content,

package/esm/outOfTheBox/PopupMenu/PopupMenuContent.js

@@ -1,14 +1,17 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import React, { useContext, useRef, useEffect, useMemo } from 'react';
 import { ItemWrapper, Label, Separator, List } from './styles.js';
 import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
 import { jsx } from 'react/jsx-runtime';
 
-const PopupMenuContent = /*#__PURE__*/React.memo(({
-  options,
-  onItemClick,
-  onClose
-}) => {
+const PopupMenuContent = /*#__PURE__*/React.memo(_ref => {
+  let {
+    options,
+    onItemClick,
+    onClose
+  } = _ref;
   const {
     instanceUID
   } = useContext(GlobalHeaderContext);
@@ -40,19 +43,19 @@ const PopupMenuContent = /*#__PURE__*/React.memo(({
 
     switch (type) {
       case 'separator':
-        return /*#__PURE__*/_jsx(Separator, {}, `${instanceUID}-separator-${label}`);
+        return /*#__PURE__*/_jsx(Separator, {}, "".concat(instanceUID, "-separator-").concat(label));
 
       case 'custom':
         return /*#__PURE__*/_jsx(ItemWrapper, {
           onClick: handleClick,
           onKeyDown: handleKeyDown
-        }, `${instanceUID}-popup-${label}`, _Content || (_Content = /*#__PURE__*/_jsx(Content, {})));
+        }, "".concat(instanceUID, "-popup-").concat(label), _Content || (_Content = /*#__PURE__*/_jsx(Content, {})));
 
       default:
         return /*#__PURE__*/_jsx(ItemWrapper, {
           onClick: handleClick,
           onKeyDown: handleKeyDown
-        }, `${instanceUID}-popup-${label}`, icon, Label && /*#__PURE__*/_jsx(Label, {}, void 0, label));
+        }, "".concat(instanceUID, "-popup-").concat(label), icon, Label && /*#__PURE__*/_jsx(Label, {}, void 0, label));
     }
   }), [onClose, onItemClick, options, instanceUID]);
   return /*#__PURE__*/jsx(List, {

package/esm/outOfTheBox/PopupMenu/styles.js

@@ -5,9 +5,12 @@ const List = /*#__PURE__*/styled.div.withConfig({
 })(["padding:5px 0px;"]);
 const ItemWrapper = /*#__PURE__*/styled.button.withConfig({
   componentId: "sc-snqcgs-1"
-})(["display:flex;align-items:center;justify-content:center;width:100%;padding:0 20px;cursor:pointer;border:1px solid transparent;background-color:transparent;outline:none;:hover,:focus{border:", ";}"], ({
-  theme
-}) => `1px solid ${theme.colors.brand[600]}`);
+})(["display:flex;align-items:center;justify-content:center;width:100%;padding:0 20px;cursor:pointer;border:1px solid transparent;background-color:transparent;outline:none;:hover,:focus{border:", ";}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return "1px solid ".concat(theme.colors.brand[600]);
+});
 const Label = /*#__PURE__*/styled.p.withConfig({
   componentId: "sc-snqcgs-2"
 })(["width:100%;font-size:14px;margin:10px;"]);

package/esm/styles.js

@@ -3,8 +3,11 @@ import { GridContainer } from '@elliemae/ds-grid';
 
 const Wrapper = /*#__PURE__*/styled(GridContainer).withConfig({
   componentId: "sc-1v5zxxm-0"
-})(["background-image:linear-gradient(45deg,#0f364a 0%,#1b6392 54%,#164566 100%);color:", ";width:100%;height:40px;padding:0 24px 0 12px;"], ({
-  theme
-}) => theme.colors.neutral['000']);
+})(["background-image:linear-gradient(45deg,#0f364a 0%,#1b6392 54%,#164566 100%);color:", ";width:100%;height:40px;padding:0 24px 0 12px;"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral['000'];
+});
 
 export { Wrapper };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-global-header",
-  "version": "2.0.0-alpha.9",
+  "version": "2.0.0-next.11",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Global Header",
   "module": "./esm/index.js",
@@ -120,23 +120,22 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-app-picker": "2.0.0-alpha.9",
-    "@elliemae/ds-classnames": "2.0.0-alpha.9",
-    "@elliemae/ds-grid": "2.0.0-alpha.9",
-    "@elliemae/ds-icons": "2.0.0-alpha.9",
-    "@elliemae/ds-popover": "2.0.0-alpha.9",
-    "@elliemae/ds-utilities": "2.0.0-alpha.9",
+    "@elliemae/ds-app-picker": "2.0.0-next.11",
+    "@elliemae/ds-classnames": "2.0.0-next.11",
+    "@elliemae/ds-grid": "2.0.0-next.11",
+    "@elliemae/ds-icons": "2.0.0-next.11",
+    "@elliemae/ds-popover": "2.0.0-next.11",
     "react-desc": "~4.1.3",
     "uid": "~2.0.0"
   },
   "devDependencies": {
-    "styled-components": "~5.3.1"
+    "styled-components": "~5.3.3"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public",

package/types/styles.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const Wrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/cjs/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "commonjs",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}

package/esm/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "module",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}