@elliemae/ds-global-header 2.2.0-alpha.2 → 2.2.0-next.1

package/esm/GlobalHeaderContainer.js

@@ -1,12 +1,16 @@
-import * as React from "react";
-import React2 from "react";
-import { Wrapper } from "./styles";
-const GlobalHeaderContainer = ({ children }) => /* @__PURE__ */ React2.createElement("header", {
-  "data-testid": "ds-global-header"
-}, /* @__PURE__ */ React2.createElement(Wrapper, {
-  cols: ["auto", "1fr", "auto"]
-}, children));
-export {
-  GlobalHeaderContainer
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { Wrapper } from './styles.js';
+
+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));
 };
-//# sourceMappingURL=GlobalHeaderContainer.js.map
+
+export { GlobalHeaderContainer };

package/esm/GlobalHeaderContext.js

@@ -1,17 +1,16 @@
-import * as React from "react";
-import { createContext } from "react";
-import { defaultProps } from "./defaultProps";
+import { createContext } from 'react';
+import { defaultProps } from './defaultProps.js';
+
 const noop = () => null;
+
 const defaultContext = {
   props: defaultProps,
   showIconOnly: false,
   setShowIconOnly: noop,
-  instanceUID: "",
+  instanceUID: '',
   globalHeaderToolbarGrid: [],
   globalHeaderBreadcrumbGrid: []
 };
-const GlobalHeaderContext = createContext(defaultContext);
-export {
-  GlobalHeaderContext
-};
-//# sourceMappingURL=GlobalHeaderContext.js.map
+const GlobalHeaderContext = /*#__PURE__*/createContext(defaultContext);
+
+export { GlobalHeaderContext };

package/esm/GlobalHeaderTypes.js

@@ -1,2 +1 @@
-import * as React from "react";
-//# sourceMappingURL=GlobalHeaderTypes.js.map
+

package/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js

@@ -1,12 +1,30 @@
-import * as React from "react";
-import React2, { useEffect, useContext, useRef } from "react";
-import { Grid } from "@elliemae/ds-grid";
-import { Pipe } from "./styles";
-import { GlobalHeaderContext } from "../../GlobalHeaderContext";
-import { PureBreadcrumb } from "./PureBreadcrumb";
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+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 '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 { useContext, useRef, useEffect } from 'react';
+import { Grid } from '@elliemae/ds-grid';
+import { Pipe } from './styles.js';
+import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
+import { PureBreadcrumb } from './PureBreadcrumb.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["label"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const GlobalHeaderBreadcrumb = () => {
   const {
-    props: { breadcrumb },
+    props: {
+      breadcrumb
+    },
     instanceUID,
     showIconOnly,
     setShowIconOnly,
@@ -16,7 +34,7 @@ const GlobalHeaderBreadcrumb = () => {
   const flexRegion = useRef(null);
   useEffect(() => {
     const evaluateShowIconOnly = () => {
-      if (flexRegion && flexRegion.current && flexRegion?.current.offsetWidth <= 0 && !breakpoint.current) {
+      if (flexRegion && flexRegion.current && (flexRegion === null || flexRegion === void 0 ? void 0 : flexRegion.current.offsetWidth) <= 0 && !breakpoint.current) {
         setShowIconOnly(true);
         breakpoint.current = window.innerWidth;
       } else if (breakpoint && breakpoint.current !== null && window.innerWidth >= breakpoint.current) {
@@ -24,33 +42,34 @@ const GlobalHeaderBreadcrumb = () => {
         breakpoint.current = null;
       }
     };
+
     evaluateShowIconOnly();
-    window.addEventListener("resize", evaluateShowIconOnly);
-    return () => window.removeEventListener("resize", evaluateShowIconOnly);
+    window.addEventListener('resize', evaluateShowIconOnly);
+    return () => window.removeEventListener('resize', evaluateShowIconOnly);
   }, [breakpoint, flexRegion, setShowIconOnly]);
-  return /* @__PURE__ */ React2.createElement(Grid, {
+  return /*#__PURE__*/_jsx(Grid, {
     height: "100%",
     alignItems: "center",
     justifyContent: "flex-start",
     "aria-label": "breadcrumbs",
     cols: globalHeaderBreadcrumbGrid,
     role: "navigation"
-  }, /* @__PURE__ */ React2.createElement(Pipe, {
-    showIconOnly
-  }), breadcrumb?.map((item) => {
-    const { label, ...rest } = item;
-    return /* @__PURE__ */ React2.createElement(PureBreadcrumb, {
-      label,
-      length: breadcrumb.length,
-      key: `${instanceUID}-breadcrumb-item-${label}`,
-      ...rest
-    });
-  }), /* @__PURE__ */ React2.createElement("div", {
+  }, void 0, /*#__PURE__*/_jsx(Pipe, {
+    showIconOnly: showIconOnly
+  }), breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.map(item => {
+    const {
+      label
+    } = item,
+          rest = _objectWithoutProperties(item, _excluded);
+
+    return /*#__PURE__*/jsx(PureBreadcrumb, _objectSpread({
+      label: label,
+      length: breadcrumb.length
+    }, rest), "".concat(instanceUID, "-breadcrumb-item-").concat(label));
+  }), /*#__PURE__*/jsx("div", {
     id: "global-header-flex-region",
     ref: flexRegion
   }));
 };
-export {
-  GlobalHeaderBreadcrumb
-};
-//# sourceMappingURL=GlobalHeaderBreadcrumb.js.map
+
+export { GlobalHeaderBreadcrumb };

package/esm/components/Breadcrumb/PureBreadcrumb.js

@@ -1,22 +1,49 @@
-import * as React from "react";
-import React2 from "react";
-import { ChevronSmallRight } from "@elliemae/ds-icons";
-import { getDataProps } from "@elliemae/ds-props-helpers";
-import { BreadcrumbItem, LabelButton, Label } from "./styles";
-const PureBreadcrumb = React2.memo(({ onClick, isSelected, length, label, hasNext, id, ...rest }) => /* @__PURE__ */ React2.createElement(BreadcrumbItem, null, /* @__PURE__ */ React2.createElement(LabelButton, {
-  onClick,
-  "aria-selected": isSelected,
-  "data-testid": "gh-breadcrumb-btn",
-  id,
-  ...getDataProps(rest)
-}, /* @__PURE__ */ React2.createElement(Label, {
-  isSelected: !!isSelected,
-  isOnlyItem: length === 1
-}, label)), hasNext && /* @__PURE__ */ React2.createElement(ChevronSmallRight, {
-  size: "m",
-  fill: "#FFF"
-})));
-export {
-  PureBreadcrumb
-};
-//# sourceMappingURL=PureBreadcrumb.js.map
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import React from 'react';
+import { ChevronSmallRight } from '@elliemae/ds-icons';
+import { getDataProps } from '@elliemae/ds-props-helpers';
+import { BreadcrumbItem, LabelButton, Label } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _ChevronSmallRight;
+
+const _excluded = ["onClick", "isSelected", "length", "label", "hasNext", "id"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const PureBreadcrumb = /*#__PURE__*/React.memo(_ref => {
+  let {
+    onClick,
+    isSelected,
+    length,
+    label,
+    hasNext,
+    id
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_jsx(BreadcrumbItem, {}, void 0, /*#__PURE__*/jsx(LabelButton, _objectSpread(_objectSpread({
+    onClick: onClick,
+    "aria-selected": isSelected,
+    "data-testid": "gh-breadcrumb-btn",
+    id: id
+  }, getDataProps(rest)), {}, {
+    children: /*#__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

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

package/esm/components/Title/GlobalHeaderTitle.js

@@ -1,19 +1,21 @@
-import * as React from "react";
-import React2, { useContext } from "react";
-import { Grid } from "@elliemae/ds-grid";
-import { GlobalHeaderContext } from "../../GlobalHeaderContext";
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
+import { Grid } from '@elliemae/ds-grid';
+import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
+
 const GlobalHeaderTitle = () => {
   const {
-    props: { Logo, LogoWithBrand },
+    props: {
+      Logo,
+      LogoWithBrand
+    },
     showIconOnly
   } = useContext(GlobalHeaderContext);
-  return /* @__PURE__ */ React2.createElement(Grid, {
+  return /*#__PURE__*/_jsx(Grid, {
     alignItems: "center",
-    pr: showIconOnly ? "0px" : "36px",
-    cols: showIconOnly ? ["auto"] : ["auto", "1fr"]
-  }, Logo && showIconOnly && /* @__PURE__ */ React2.createElement(Logo, null), LogoWithBrand && !showIconOnly && /* @__PURE__ */ React2.createElement(LogoWithBrand, null));
+    pr: showIconOnly ? '0px' : '36px',
+    cols: showIconOnly ? ['auto'] : ['auto', '1fr']
+  }, void 0, Logo && showIconOnly && /*#__PURE__*/_jsx(Logo, {}), LogoWithBrand && !showIconOnly && /*#__PURE__*/_jsx(LogoWithBrand, {}));
 };
-export {
-  GlobalHeaderTitle
-};
-//# sourceMappingURL=GlobalHeaderTitle.js.map
+
+export { GlobalHeaderTitle };

package/esm/components/Toolbar/GlobalHeaderToolbar.js

@@ -1,20 +1,22 @@
-import * as React from "react";
-import React2, { useContext } from "react";
-import { Grid } from "@elliemae/ds-grid";
-import { ToolbarItems } from "./ToolbarItems";
-import { GlobalHeaderContext } from "../../GlobalHeaderContext";
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
+import { Grid } from '@elliemae/ds-grid';
+import { ToolbarItems } from './ToolbarItems.js';
+import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
+
+var _ToolbarItems;
 const GlobalHeaderToolbar = () => {
-  const { globalHeaderToolbarGrid } = useContext(GlobalHeaderContext);
-  return /* @__PURE__ */ React2.createElement(Grid, {
+  const {
+    globalHeaderToolbarGrid
+  } = useContext(GlobalHeaderContext);
+  return /*#__PURE__*/_jsx(Grid, {
     height: "100%",
     alignItems: "center",
     justifyContent: "center",
     gutter: "xxs",
     cols: globalHeaderToolbarGrid,
     role: "toolbar"
-  }, /* @__PURE__ */ React2.createElement(ToolbarItems, null));
+  }, void 0, _ToolbarItems || (_ToolbarItems = /*#__PURE__*/_jsx(ToolbarItems, {})));
 };
-export {
-  GlobalHeaderToolbar
-};
-//# sourceMappingURL=GlobalHeaderToolbar.js.map
+
+export { GlobalHeaderToolbar };

package/esm/components/Toolbar/ToolbarItems.js

@@ -1,67 +1,97 @@
-import * as React from "react";
-import React2, { useContext, useMemo } from "react";
-import { AppPicker, PopupMenu, SearchToggle } from "../../outOfTheBox";
-import { Button } from "./styles";
-import { GlobalHeaderContext } from "../../GlobalHeaderContext";
-import { getDataProps } from "@elliemae/ds-props-helpers";
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+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 { useContext, useMemo } from 'react';
+import { AppPicker } from '../../outOfTheBox/AppPicker/AppPicker.js';
+import { PopupMenu } from '../../outOfTheBox/PopupMenu/PopupMenu.js';
+import { SearchToggle } from '../../outOfTheBox/SearchToggle/SearchToggle.js';
+import { Button } from './styles.js';
+import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
+import { getDataProps } from '@elliemae/ds-props-helpers';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const _excluded = ["Icon", "type", "onClick", "componentProps", "label", "onKeyPress", "id", "CustomComponent"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const ToolbarItems = () => {
   const {
-    props: { toolbar },
+    props: {
+      toolbar
+    },
     instanceUID
   } = useContext(GlobalHeaderContext);
-  console.log(`toolbar`, toolbar);
-  const itemsList = useMemo(() => toolbar?.map((item) => {
-    const { Icon, type, onClick, componentProps, label, onKeyPress, id, CustomComponent, ...otherProps } = item;
+  const itemsList = useMemo(() => toolbar === null || toolbar === void 0 ? void 0 : toolbar.map(item => {
+    var _Icon;
+
+    const {
+      Icon,
+      type,
+      onClick,
+      componentProps,
+      label,
+      onKeyPress,
+      id,
+      CustomComponent
+    } = item,
+          otherProps = _objectWithoutProperties(item, _excluded);
+
     switch (type) {
-      case "ds-popup-menu":
-        return /* @__PURE__ */ React2.createElement(PopupMenu, {
+      case 'ds-popup-menu':
+        return /*#__PURE__*/jsx(PopupMenu, _objectSpread(_objectSpread({
           title: label,
-          Icon,
-          onClick,
-          onKeyPress,
-          id,
-          key: `${instanceUID}-ds-popup-menu-${label}`,
-          ...otherProps,
-          componentProps
+          Icon: Icon,
+          onClick: onClick,
+          onKeyPress: onKeyPress,
+          id: id
+        }, otherProps), {}, {
+          componentProps: componentProps
+        }), "".concat(instanceUID, "-ds-popup-menu-").concat(label));
+
+      case 'ds-app-picker':
+        return /*#__PURE__*/jsx(AppPicker, _objectSpread({
+          label: label,
+          id: id,
+          componentProps: componentProps
+        }, otherProps), "".concat(instanceUID, "-ds-app-picker-").concat(label));
+
+      case 'ds-search-toggle':
+        return /*#__PURE__*/jsx(SearchToggle, _objectSpread({
+          id: id,
+          componentProps: componentProps
+        }, otherProps), "".concat(instanceUID, "-ds-search-toggle-").concat(id));
+
+      case 'custom':
+        if (CustomComponent) return /*#__PURE__*/_jsx(CustomComponent, {
+          item: item
         });
-      case "ds-app-picker":
-        return /* @__PURE__ */ React2.createElement(AppPicker, {
-          label,
-          key: `${instanceUID}-ds-app-picker-${label}`,
-          id,
-          componentProps,
-          ...otherProps
-        });
-      case "ds-search-toggle":
-        return /* @__PURE__ */ React2.createElement(SearchToggle, {
-          key: `${instanceUID}-ds-search-toggle-${id}`,
-          id,
-          componentProps,
-          ...otherProps
-        });
-      case "custom":
-        if (CustomComponent)
-          return /* @__PURE__ */ React2.createElement(CustomComponent, {
-            item
-          });
         return null;
+
       default:
-        return /* @__PURE__ */ React2.createElement(Button, {
-          onClick,
-          key: `${instanceUID}-ds-toolbar-button-${label}`,
+        return /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
+          onClick: onClick,
           title: label,
           "data-testid": "gh-toolbar-item",
-          id,
-          ...getDataProps(otherProps)
-        }, /* @__PURE__ */ React2.createElement(Icon, {
-          fill: "#FFF",
-          size: "m"
-        }));
+          id: id
+        }, getDataProps(otherProps)), {}, {
+          children: _Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {
+            fill: "#FFF",
+            size: "m"
+          }))
+        }), "".concat(instanceUID, "-ds-toolbar-button-").concat(label));
     }
   }), [toolbar, instanceUID]);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, itemsList);
-};
-export {
-  ToolbarItems
+  return /*#__PURE__*/jsx(Fragment, {
+    children: itemsList
+  });
 };
-//# sourceMappingURL=ToolbarItems.js.map
+
+export { ToolbarItems };

package/esm/components/Toolbar/styles.js

@@ -1,32 +1,17 @@
-import * as React from "react";
-import styled from "styled-components";
-const Button = styled.button`
-  height: 40px;
-  width: 40px;
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-  position: relative;
-  outline: none;
-  &:hover:not(:focus) {
-    background-color: ${({ theme }) => theme.colors.brand[700]};
-    outline: none;
-  }
-  &:focus {
-    :before {
-      content: '';
-      position: absolute;
-      z-index: 2;
-      top: 2px;
-      left: 2px;
-      width: calc(100% - 4px);
-      height: calc(100% - 4px);
-      border: 2px solid ${({ theme }) => theme.colors.neutral["000"]};
-      border-radius: 4px;
-    }
-  }
-`;
-export {
-  Button
-};
-//# sourceMappingURL=styles.js.map
+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{: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.neutral['000'];
+});
+
+export { Button };