@elliemae/ds-global-header 3.0.0-next.78 → 3.0.0-next.80

package/dist/cjs/DSGlobalHeader.js

@@ -43,10 +43,13 @@ const DSGlobalHeader = (props) => {
   const ctx = (0, import_useGlobalHeader.useGlobalHeader)(props);
   const globalAttrs = (0, import_ds_utilities.useGetGlobalAttributes)(props);
   const xstyledAttrs = (0, import_ds_utilities.useGetXstyledProps)(props);
+  const { bg, backgroundColor } = props;
   return /* @__PURE__ */ import_react.default.createElement(import_GlobalHeaderContainer.GlobalHeaderContainer, {
     "data-testid": import_exported_related.DSGlobalHeaderDatatestid.CONTAINER,
     globalAttrs,
-    xstyledAttrs
+    xstyledAttrs,
+    bg,
+    backgroundColor
   }, /* @__PURE__ */ import_react.default.createElement(import_DSGlobalHeaderContext.DSGlobalHeaderContext.Provider, {
     value: ctx
   }, /* @__PURE__ */ import_react.default.createElement(import_GlobalHeaderLogo.GlobalHeaderLogo, null), /* @__PURE__ */ import_react.default.createElement(import_GlobalHeaderBreadcrumb.GlobalHeaderBreadcrumb, null), /* @__PURE__ */ import_react.default.createElement(import_GlobalHeaderToolbar.GlobalHeaderToolbar, null)));

package/dist/cjs/DSGlobalHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSGlobalHeader.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { describe } from 'react-desc';\nimport { propTypes } from './react-desc-prop-types';\nimport { GlobalHeaderLogo } from './parts/Logo/GlobalHeaderLogo';\nimport { GlobalHeaderBreadcrumb } from './parts/Breadcrumb/GlobalHeaderBreadcrumb';\nimport { GlobalHeaderToolbar } from './parts/Toolbar/GlobalHeaderToolbar';\nimport { DSGlobalHeaderContext } from './DSGlobalHeaderContext';\nimport { useGlobalHeader } from './config/useGlobalHeader';\nimport { GlobalHeaderContainer } from './parts/GlobalHeaderContainer';\nimport { useValidateProps } from './config/useValidateProps';\nimport { DSGlobalHeaderDatatestid } from './exported-related';\nimport type { DSGlobalHeaderT } from './react-desc-prop-types';\n\nconst DSGlobalHeader = (props: DSGlobalHeaderT.Props): JSX.Element => {\n  useValidateProps(props);\n  const ctx = useGlobalHeader(props);\n\n  const globalAttrs = useGetGlobalAttributes(props);\n  const xstyledAttrs = useGetXstyledProps(props);\n\n  return (\n    <GlobalHeaderContainer\n      data-testid={DSGlobalHeaderDatatestid.CONTAINER}\n      globalAttrs={globalAttrs}\n      xstyledAttrs={xstyledAttrs}\n    >\n      <DSGlobalHeaderContext.Provider value={ctx}>\n        <GlobalHeaderLogo />\n        <GlobalHeaderBreadcrumb />\n        <GlobalHeaderToolbar />\n      </DSGlobalHeaderContext.Provider>\n    </GlobalHeaderContainer>\n  );\n};\n\nDSGlobalHeader.displayName = 'DSGlobalHeader';\nconst DSGlobalHeaderWithSchema = describe(DSGlobalHeader);\nDSGlobalHeaderWithSchema.propTypes = propTypes;\n\nconst GlobalHeader = DSGlobalHeader;\n\nexport { GlobalHeader, DSGlobalHeader, DSGlobalHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAA2D;AAC3D,wBAAyB;AACzB,mCAA0B;AAC1B,8BAAiC;AACjC,oCAAuC;AACvC,iCAAoC;AACpC,mCAAsC;AACtC,6BAAgC;AAChC,mCAAsC;AACtC,8BAAiC;AACjC,8BAAyC;AAGzC,MAAM,iBAAiB,CAAC,UAA8C;AACpE,gDAAiB,KAAK;AACtB,QAAM,MAAM,4CAAgB,KAAK;AAEjC,QAAM,cAAc,gDAAuB,KAAK;AAChD,QAAM,eAAe,4CAAmB,KAAK;AAE7C,SACE,mDAAC;AAAA,IACC,eAAa,iDAAyB;AAAA,IACtC;AAAA,IACA;AAAA,KAEA,mDAAC,mDAAsB,UAAtB;AAAA,IAA+B,OAAO;AAAA,KACrC,mDAAC,8CAAiB,GAClB,mDAAC,0DAAuB,GACxB,mDAAC,oDAAoB,CACvB,CACF;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,2BAA2B,gCAAS,cAAc;AACxD,yBAAyB,YAAY;AAErC,MAAM,eAAe;",
+  "sourcesContent": ["import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { describe } from 'react-desc';\nimport { propTypes } from './react-desc-prop-types';\nimport { GlobalHeaderLogo } from './parts/Logo/GlobalHeaderLogo';\nimport { GlobalHeaderBreadcrumb } from './parts/Breadcrumb/GlobalHeaderBreadcrumb';\nimport { GlobalHeaderToolbar } from './parts/Toolbar/GlobalHeaderToolbar';\nimport { DSGlobalHeaderContext } from './DSGlobalHeaderContext';\nimport { useGlobalHeader } from './config/useGlobalHeader';\nimport { GlobalHeaderContainer } from './parts/GlobalHeaderContainer';\nimport { useValidateProps } from './config/useValidateProps';\nimport { DSGlobalHeaderDatatestid } from './exported-related';\nimport type { DSGlobalHeaderT } from './react-desc-prop-types';\n\nconst DSGlobalHeader = (props: DSGlobalHeaderT.Props): JSX.Element => {\n  useValidateProps(props);\n  const ctx = useGlobalHeader(props);\n\n  const globalAttrs = useGetGlobalAttributes(props);\n  const xstyledAttrs = useGetXstyledProps(props);\n\n  const { bg, backgroundColor } = props;\n\n  return (\n    <GlobalHeaderContainer\n      data-testid={DSGlobalHeaderDatatestid.CONTAINER}\n      globalAttrs={globalAttrs}\n      xstyledAttrs={xstyledAttrs}\n      bg={bg}\n      backgroundColor={backgroundColor}\n    >\n      <DSGlobalHeaderContext.Provider value={ctx}>\n        <GlobalHeaderLogo />\n        <GlobalHeaderBreadcrumb />\n        <GlobalHeaderToolbar />\n      </DSGlobalHeaderContext.Provider>\n    </GlobalHeaderContainer>\n  );\n};\n\nDSGlobalHeader.displayName = 'DSGlobalHeader';\nconst DSGlobalHeaderWithSchema = describe(DSGlobalHeader);\nDSGlobalHeaderWithSchema.propTypes = propTypes;\n\nconst GlobalHeader = DSGlobalHeader;\n\nexport { GlobalHeader, DSGlobalHeader, DSGlobalHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAA2D;AAC3D,wBAAyB;AACzB,mCAA0B;AAC1B,8BAAiC;AACjC,oCAAuC;AACvC,iCAAoC;AACpC,mCAAsC;AACtC,6BAAgC;AAChC,mCAAsC;AACtC,8BAAiC;AACjC,8BAAyC;AAGzC,MAAM,iBAAiB,CAAC,UAA8C;AACpE,gDAAiB,KAAK;AACtB,QAAM,MAAM,4CAAgB,KAAK;AAEjC,QAAM,cAAc,gDAAuB,KAAK;AAChD,QAAM,eAAe,4CAAmB,KAAK;AAE7C,QAAM,EAAE,IAAI,oBAAoB;AAEhC,SACE,mDAAC;AAAA,IACC,eAAa,iDAAyB;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEA,mDAAC,mDAAsB,UAAtB;AAAA,IAA+B,OAAO;AAAA,KACrC,mDAAC,8CAAiB,GAClB,mDAAC,0DAAuB,GACxB,mDAAC,oDAAoB,CACvB,CACF;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,2BAA2B,gCAAS,cAAc;AACxD,yBAAyB,YAAY;AAErC,MAAM,eAAe;",
   "names": []
 }

package/dist/cjs/parts/GlobalHeaderContainer.js

@@ -40,9 +40,17 @@ module.exports = __toCommonJS(GlobalHeaderContainer_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_styles = require("./styles");
-const GlobalHeaderContainer = ({ xstyledAttrs, globalAttrs, children }) => /* @__PURE__ */ import_react.default.createElement(import_styles.Container, __spreadValues(__spreadValues({
+const GlobalHeaderContainer = ({
+  xstyledAttrs,
+  globalAttrs,
+  bg,
+  backgroundColor,
+  children
+}) => /* @__PURE__ */ import_react.default.createElement(import_styles.Container, __spreadValues(__spreadValues({
   forwardedAs: "header",
   "data-testid": "ds-global-header",
-  cols: ["auto", "1fr", "auto"]
+  cols: ["auto", "1fr", "auto"],
+  bg,
+  backgroundColor
 }, globalAttrs), xstyledAttrs), children);
 //# sourceMappingURL=GlobalHeaderContainer.js.map

package/dist/cjs/parts/GlobalHeaderContainer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/GlobalHeaderContainer.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { Container } from './styles';\n\ninterface GlobalHeaderContainerT {\n  xstyledAttrs: Record<string, unknown>;\n  globalAttrs: Record<string, unknown>;\n  children: React.ReactNode;\n}\n\nexport const GlobalHeaderContainer = ({ xstyledAttrs, globalAttrs, children }: GlobalHeaderContainerT): JSX.Element => (\n  <Container\n    forwardedAs=\"header\"\n    data-testid=\"ds-global-header\"\n    cols={['auto', '1fr', 'auto']}\n    {...globalAttrs}\n    {...xstyledAttrs}\n  >\n    {children}\n  </Container>\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAA0B;AAQnB,MAAM,wBAAwB,CAAC,EAAE,cAAc,aAAa,eACjE,mDAAC;AAAA,EACC,aAAY;AAAA,EACZ,eAAY;AAAA,EACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,GACxB,cACA,eAEH,QACH;",
+  "sourcesContent": ["import React from 'react';\nimport { Container } from './styles';\n\ninterface GlobalHeaderContainerT {\n  xstyledAttrs: Record<string, unknown>;\n  globalAttrs: Record<string, unknown>;\n  backgroundColor?: string;\n  bg?: string;\n  children: React.ReactNode;\n}\n\nexport const GlobalHeaderContainer = ({\n  xstyledAttrs,\n  globalAttrs,\n  bg,\n  backgroundColor,\n  children,\n}: GlobalHeaderContainerT): JSX.Element => (\n  <Container\n    forwardedAs=\"header\"\n    data-testid=\"ds-global-header\"\n    cols={['auto', '1fr', 'auto']}\n    bg={bg}\n    backgroundColor={backgroundColor}\n    {...globalAttrs}\n    {...xstyledAttrs}\n  >\n    {children}\n  </Container>\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAA0B;AAUnB,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,mDAAC;AAAA,EACC,aAAY;AAAA,EACZ,eAAY;AAAA,EACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,EAC5B;AAAA,EACA;AAAA,GACI,cACA,eAEH,QACH;",
   "names": []
 }

package/dist/cjs/parts/styles.js

@@ -27,16 +27,16 @@ module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_styled_components = require("@xstyled/styled-components");
 var import_theming = require("../exported-related/theming");
 const Container = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_theming.COMPONENT_NAME, slot: import_theming.slots.CONTAINER })`
-  background-image: linear-gradient(45deg, #0f364a 0%, #1b6392 54%, #164566 100%);
+  ${({ bg, backgroundColor }) => bg || backgroundColor ? "" : "background-image: linear-gradient(45deg, #0f364a 0%, #1b6392 54%, #164566 100%);"}
   color: ${({ theme }) => theme.colors.neutral["000"]};
   height: 40px;
   padding: 0 24px 0 12px;
-  ${import_styled_components.sizing}
-  ${import_styled_components.space}
-  ${import_styled_components.layout}
+  ${import_ds_system.sizing}
+  ${import_ds_system.space}
+  ${import_ds_system.layout}
+  ${import_ds_system.background}
 `;
 const StyledButton = (0, import_ds_system.styled)("button", { name: import_theming.COMPONENT_NAME, slot: import_theming.slots.MENUBAR.ITEM_BUTTON })`
   height: 40px;

package/dist/cjs/parts/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { sizing, space, layout } from '@xstyled/styled-components';\nimport { slots, COMPONENT_NAME } from '../exported-related/theming';\n\nexport const Container = styled(Grid, { name: COMPONENT_NAME, slot: slots.CONTAINER })`\n  background-image: linear-gradient(45deg, #0f364a 0%, #1b6392 54%, #164566 100%);\n  color: ${({ theme }) => theme.colors.neutral['000']};\n  height: 40px;\n  padding: 0 24px 0 12px;\n  ${sizing}\n  ${space}\n  ${layout}\n`;\n\nexport const StyledButton = styled('button', { name: COMPONENT_NAME, slot: slots.MENUBAR.ITEM_BUTTON })`\n  height: 40px;\n  width: 40px;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  fill: ${({ theme }) => theme.colors.neutral['000']};\n  &:hover:not(:focus) {\n    background-color: ${({ theme }) => theme.colors.brand[700]};\n    outline: none;\n  }\n  &:focus {\n    :before {\n      content: '';\n      position: absolute;\n      z-index: 2;\n      top: 2px;\n      left: 2px;\n      width: calc(100% - 4px);\n      height: calc(100% - 4px);\n      border: 2px solid ${({ theme }) => theme.colors.neutral['000']};\n      border-radius: 4px;\n    }\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,qBAAqB;AACrB,+BAAsC;AACtC,qBAAsC;AAE/B,MAAM,YAAY,6BAAO,qBAAM,EAAE,MAAM,+BAAgB,MAAM,qBAAM,UAAU,CAAC;AAAA;AAAA,WAE1E,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAG3C;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,eAAe,6BAAO,UAAU,EAAE,MAAM,+BAAgB,MAAM,qBAAM,QAAQ,YAAY,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQ5F,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA,wBAEtB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYhC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { styled, sizing, space, layout, background } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { slots, COMPONENT_NAME } from '../exported-related/theming';\n\nexport const Container = styled(Grid, { name: COMPONENT_NAME, slot: slots.CONTAINER })`\n  ${({ bg, backgroundColor }) =>\n    bg || backgroundColor ? '' : 'background-image: linear-gradient(45deg, #0f364a 0%, #1b6392 54%, #164566 100%);'}\n  color: ${({ theme }) => theme.colors.neutral['000']};\n  height: 40px;\n  padding: 0 24px 0 12px;\n  ${sizing}\n  ${space}\n  ${layout}\n  ${background}\n`;\n\nexport const StyledButton = styled('button', { name: COMPONENT_NAME, slot: slots.MENUBAR.ITEM_BUTTON })`\n  height: 40px;\n  width: 40px;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  fill: ${({ theme }) => theme.colors.neutral['000']};\n  &:hover:not(:focus) {\n    background-color: ${({ theme }) => theme.colors.brand[700]};\n    outline: none;\n  }\n  &:focus {\n    :before {\n      content: '';\n      position: absolute;\n      z-index: 2;\n      top: 2px;\n      left: 2px;\n      width: calc(100% - 4px);\n      height: calc(100% - 4px);\n      border: 2px solid ${({ theme }) => theme.colors.neutral['000']};\n      border-radius: 4px;\n    }\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA0D;AAC1D,qBAAqB;AACrB,qBAAsC;AAE/B,MAAM,YAAY,6BAAO,qBAAM,EAAE,MAAM,+BAAgB,MAAM,qBAAM,UAAU,CAAC;AAAA,IACjF,CAAC,EAAE,IAAI,sBACP,MAAM,kBAAkB,KAAK;AAAA,WACtB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAG3C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,eAAe,6BAAO,UAAU,EAAE,MAAM,+BAAgB,MAAM,qBAAM,QAAQ,YAAY,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQ5F,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA,wBAEtB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYhC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/react-desc-prop-types.js

@@ -69,6 +69,8 @@ const propTypes = __spreadProps(__spreadValues(__spreadValues({}, import_ds_util
   Logo: import_ds_utilities.PropTypes.func.description("Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing.").defaultValue("() => JSX.Element"),
   LogoWithBrand: import_ds_utilities.PropTypes.func.description("Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing.").defaultValue("() => JSX.Element"),
   breadcrumb: import_ds_utilities.PropTypes.arrayOf(breadcrumbItem).description("Breadcrumb items to display. Max 3 levels. Compatible with GlobalAttributes.").defaultValue("[]"),
-  toolbar: import_ds_utilities.PropTypes.arrayOf(toolbarItem).description("Toolbar items. Compatible with GlobalAttributes.").defaultValue("[]")
+  toolbar: import_ds_utilities.PropTypes.arrayOf(toolbarItem).description("Toolbar items. Compatible with GlobalAttributes.").defaultValue("[]"),
+  backgroundColor: import_ds_utilities.PropTypes.string.description("Changes background color."),
+  bg: import_ds_utilities.PropTypes.string.description("Changes background color.")
 });
 //# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport type { DSGlobalHeaderInternalsT } from './sharedTypes';\n\nconst noop = () => null;\n\nexport const defaultProps = {\n  breadcrumb: [],\n  toolbar: [],\n  LogoWithBrand: noop,\n  Logo: noop,\n};\n\nexport declare namespace DSGlobalHeaderT {\n  export type Props = Partial<DSGlobalHeaderInternalsT.DefaultProps>;\n}\n\nexport const breadcrumbItem = PropTypes.shape({\n  label: PropTypes.string.description('breadrcrumb item label'),\n  hasNext: PropTypes.bool.description('whether the item has a child or not'),\n  isSelected: PropTypes.bool.description('whether the item is selected or not'),\n  onClick: PropTypes.func.description('Callback executed on click'),\n});\n\nexport const toolbarItem = PropTypes.shape({\n  label: PropTypes.string.description('title tag description'),\n  type: PropTypes.oneOf(['ds-app-picker', 'ds-popup-menu', 'ds-search-toggle', 'custom']).description(\n    'use to select one of the out-of-the-box types of items',\n  ),\n  componentProps: PropTypes.object.description('props of out-of-the-box component'),\n  Icon: PropTypes.func.description('Icon to display'),\n  onClick: PropTypes.func.description('Callback executed on click'),\n});\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  Logo: PropTypes.func\n    .description('Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing.')\n    .defaultValue('() => JSX.Element'),\n  LogoWithBrand: PropTypes.func\n    .description(\n      'Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing.',\n    )\n    .defaultValue('() => JSX.Element'),\n  breadcrumb: PropTypes.arrayOf(breadcrumbItem)\n    .description('Breadcrumb items to display. Max 3 levels. Compatible with GlobalAttributes.')\n    .defaultValue('[]'),\n  toolbar: PropTypes.arrayOf(toolbarItem)\n    .description('Toolbar items. Compatible with GlobalAttributes.')\n    .defaultValue('[]'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAuE;AAGvE,MAAM,OAAO,MAAM;AAEZ,MAAM,eAAe;AAAA,EAC1B,YAAY,CAAC;AAAA,EACb,SAAS,CAAC;AAAA,EACV,eAAe;AAAA,EACf,MAAM;AACR;AAMO,MAAM,iBAAiB,8BAAU,MAAM;AAAA,EAC5C,OAAO,8BAAU,OAAO,YAAY,wBAAwB;AAAA,EAC5D,SAAS,8BAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,YAAY,8BAAU,KAAK,YAAY,qCAAqC;AAAA,EAC5E,SAAS,8BAAU,KAAK,YAAY,4BAA4B;AAClE,CAAC;AAEM,MAAM,cAAc,8BAAU,MAAM;AAAA,EACzC,OAAO,8BAAU,OAAO,YAAY,uBAAuB;AAAA,EAC3D,MAAM,8BAAU,MAAM,CAAC,iBAAiB,iBAAiB,oBAAoB,QAAQ,CAAC,EAAE,YACtF,wDACF;AAAA,EACA,gBAAgB,8BAAU,OAAO,YAAY,mCAAmC;AAAA,EAChF,MAAM,8BAAU,KAAK,YAAY,iBAAiB;AAAA,EAClD,SAAS,8BAAU,KAAK,YAAY,4BAA4B;AAClE,CAAC;AAEM,MAAM,YAAY,gDACpB,gDACA,uCAFoB;AAAA,EAGvB,MAAM,8BAAU,KACb,YAAY,gGAAgG,EAC5G,aAAa,mBAAmB;AAAA,EACnC,eAAe,8BAAU,KACtB,YACC,iHACF,EACC,aAAa,mBAAmB;AAAA,EACnC,YAAY,8BAAU,QAAQ,cAAc,EACzC,YAAY,8EAA8E,EAC1F,aAAa,IAAI;AAAA,EACpB,SAAS,8BAAU,QAAQ,WAAW,EACnC,YAAY,kDAAkD,EAC9D,aAAa,IAAI;AACtB;",
+  "sourcesContent": ["import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport type { DSGlobalHeaderInternalsT } from './sharedTypes';\n\nconst noop = () => null;\n\nexport const defaultProps = {\n  breadcrumb: [],\n  toolbar: [],\n  LogoWithBrand: noop,\n  Logo: noop,\n};\n\nexport declare namespace DSGlobalHeaderT {\n  export type Props = Partial<DSGlobalHeaderInternalsT.DefaultProps> & {\n    backgroundColor?: string;\n    bg?: string;\n  };\n}\n\nexport const breadcrumbItem = PropTypes.shape({\n  label: PropTypes.string.description('breadrcrumb item label'),\n  hasNext: PropTypes.bool.description('whether the item has a child or not'),\n  isSelected: PropTypes.bool.description('whether the item is selected or not'),\n  onClick: PropTypes.func.description('Callback executed on click'),\n});\n\nexport const toolbarItem = PropTypes.shape({\n  label: PropTypes.string.description('title tag description'),\n  type: PropTypes.oneOf(['ds-app-picker', 'ds-popup-menu', 'ds-search-toggle', 'custom']).description(\n    'use to select one of the out-of-the-box types of items',\n  ),\n  componentProps: PropTypes.object.description('props of out-of-the-box component'),\n  Icon: PropTypes.func.description('Icon to display'),\n  onClick: PropTypes.func.description('Callback executed on click'),\n});\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  Logo: PropTypes.func\n    .description('Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing.')\n    .defaultValue('() => JSX.Element'),\n  LogoWithBrand: PropTypes.func\n    .description(\n      'Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing.',\n    )\n    .defaultValue('() => JSX.Element'),\n  breadcrumb: PropTypes.arrayOf(breadcrumbItem)\n    .description('Breadcrumb items to display. Max 3 levels. Compatible with GlobalAttributes.')\n    .defaultValue('[]'),\n  toolbar: PropTypes.arrayOf(toolbarItem)\n    .description('Toolbar items. Compatible with GlobalAttributes.')\n    .defaultValue('[]'),\n  backgroundColor: PropTypes.string.description('Changes background color.'),\n  bg: PropTypes.string.description('Changes background color.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAuE;AAGvE,MAAM,OAAO,MAAM;AAEZ,MAAM,eAAe;AAAA,EAC1B,YAAY,CAAC;AAAA,EACb,SAAS,CAAC;AAAA,EACV,eAAe;AAAA,EACf,MAAM;AACR;AASO,MAAM,iBAAiB,8BAAU,MAAM;AAAA,EAC5C,OAAO,8BAAU,OAAO,YAAY,wBAAwB;AAAA,EAC5D,SAAS,8BAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,YAAY,8BAAU,KAAK,YAAY,qCAAqC;AAAA,EAC5E,SAAS,8BAAU,KAAK,YAAY,4BAA4B;AAClE,CAAC;AAEM,MAAM,cAAc,8BAAU,MAAM;AAAA,EACzC,OAAO,8BAAU,OAAO,YAAY,uBAAuB;AAAA,EAC3D,MAAM,8BAAU,MAAM,CAAC,iBAAiB,iBAAiB,oBAAoB,QAAQ,CAAC,EAAE,YACtF,wDACF;AAAA,EACA,gBAAgB,8BAAU,OAAO,YAAY,mCAAmC;AAAA,EAChF,MAAM,8BAAU,KAAK,YAAY,iBAAiB;AAAA,EAClD,SAAS,8BAAU,KAAK,YAAY,4BAA4B;AAClE,CAAC;AAEM,MAAM,YAAY,gDACpB,gDACA,uCAFoB;AAAA,EAGvB,MAAM,8BAAU,KACb,YAAY,gGAAgG,EAC5G,aAAa,mBAAmB;AAAA,EACnC,eAAe,8BAAU,KACtB,YACC,iHACF,EACC,aAAa,mBAAmB;AAAA,EACnC,YAAY,8BAAU,QAAQ,cAAc,EACzC,YAAY,8EAA8E,EAC1F,aAAa,IAAI;AAAA,EACpB,SAAS,8BAAU,QAAQ,WAAW,EACnC,YAAY,kDAAkD,EAC9D,aAAa,IAAI;AAAA,EACpB,iBAAiB,8BAAU,OAAO,YAAY,2BAA2B;AAAA,EACzE,IAAI,8BAAU,OAAO,YAAY,2BAA2B;AAC9D;",
   "names": []
 }

package/dist/esm/DSGlobalHeader.js

@@ -16,10 +16,13 @@ const DSGlobalHeader = (props) => {
   const ctx = useGlobalHeader(props);
   const globalAttrs = useGetGlobalAttributes(props);
   const xstyledAttrs = useGetXstyledProps(props);
+  const { bg, backgroundColor } = props;
   return /* @__PURE__ */ React2.createElement(GlobalHeaderContainer, {
     "data-testid": DSGlobalHeaderDatatestid.CONTAINER,
     globalAttrs,
-    xstyledAttrs
+    xstyledAttrs,
+    bg,
+    backgroundColor
   }, /* @__PURE__ */ React2.createElement(DSGlobalHeaderContext.Provider, {
     value: ctx
   }, /* @__PURE__ */ React2.createElement(GlobalHeaderLogo, null), /* @__PURE__ */ React2.createElement(GlobalHeaderBreadcrumb, null), /* @__PURE__ */ React2.createElement(GlobalHeaderToolbar, null)));

package/dist/esm/DSGlobalHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSGlobalHeader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { describe } from 'react-desc';\nimport { propTypes } from './react-desc-prop-types';\nimport { GlobalHeaderLogo } from './parts/Logo/GlobalHeaderLogo';\nimport { GlobalHeaderBreadcrumb } from './parts/Breadcrumb/GlobalHeaderBreadcrumb';\nimport { GlobalHeaderToolbar } from './parts/Toolbar/GlobalHeaderToolbar';\nimport { DSGlobalHeaderContext } from './DSGlobalHeaderContext';\nimport { useGlobalHeader } from './config/useGlobalHeader';\nimport { GlobalHeaderContainer } from './parts/GlobalHeaderContainer';\nimport { useValidateProps } from './config/useValidateProps';\nimport { DSGlobalHeaderDatatestid } from './exported-related';\nimport type { DSGlobalHeaderT } from './react-desc-prop-types';\n\nconst DSGlobalHeader = (props: DSGlobalHeaderT.Props): JSX.Element => {\n  useValidateProps(props);\n  const ctx = useGlobalHeader(props);\n\n  const globalAttrs = useGetGlobalAttributes(props);\n  const xstyledAttrs = useGetXstyledProps(props);\n\n  return (\n    <GlobalHeaderContainer\n      data-testid={DSGlobalHeaderDatatestid.CONTAINER}\n      globalAttrs={globalAttrs}\n      xstyledAttrs={xstyledAttrs}\n    >\n      <DSGlobalHeaderContext.Provider value={ctx}>\n        <GlobalHeaderLogo />\n        <GlobalHeaderBreadcrumb />\n        <GlobalHeaderToolbar />\n      </DSGlobalHeaderContext.Provider>\n    </GlobalHeaderContainer>\n  );\n};\n\nDSGlobalHeader.displayName = 'DSGlobalHeader';\nconst DSGlobalHeaderWithSchema = describe(DSGlobalHeader);\nDSGlobalHeaderWithSchema.propTypes = propTypes;\n\nconst GlobalHeader = DSGlobalHeader;\n\nexport { GlobalHeader, DSGlobalHeader, DSGlobalHeaderWithSchema };\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,iBAAiB,CAAC,UAA8C;AACpE,mBAAiB,KAAK;AACtB,QAAM,MAAM,gBAAgB,KAAK;AAEjC,QAAM,cAAc,uBAAuB,KAAK;AAChD,QAAM,eAAe,mBAAmB,KAAK;AAE7C,SACE,qCAAC;AAAA,IACC,eAAa,yBAAyB;AAAA,IACtC;AAAA,IACA;AAAA,KAEA,qCAAC,sBAAsB,UAAtB;AAAA,IAA+B,OAAO;AAAA,KACrC,qCAAC,sBAAiB,GAClB,qCAAC,4BAAuB,GACxB,qCAAC,yBAAoB,CACvB,CACF;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;AAErC,MAAM,eAAe;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { describe } from 'react-desc';\nimport { propTypes } from './react-desc-prop-types';\nimport { GlobalHeaderLogo } from './parts/Logo/GlobalHeaderLogo';\nimport { GlobalHeaderBreadcrumb } from './parts/Breadcrumb/GlobalHeaderBreadcrumb';\nimport { GlobalHeaderToolbar } from './parts/Toolbar/GlobalHeaderToolbar';\nimport { DSGlobalHeaderContext } from './DSGlobalHeaderContext';\nimport { useGlobalHeader } from './config/useGlobalHeader';\nimport { GlobalHeaderContainer } from './parts/GlobalHeaderContainer';\nimport { useValidateProps } from './config/useValidateProps';\nimport { DSGlobalHeaderDatatestid } from './exported-related';\nimport type { DSGlobalHeaderT } from './react-desc-prop-types';\n\nconst DSGlobalHeader = (props: DSGlobalHeaderT.Props): JSX.Element => {\n  useValidateProps(props);\n  const ctx = useGlobalHeader(props);\n\n  const globalAttrs = useGetGlobalAttributes(props);\n  const xstyledAttrs = useGetXstyledProps(props);\n\n  const { bg, backgroundColor } = props;\n\n  return (\n    <GlobalHeaderContainer\n      data-testid={DSGlobalHeaderDatatestid.CONTAINER}\n      globalAttrs={globalAttrs}\n      xstyledAttrs={xstyledAttrs}\n      bg={bg}\n      backgroundColor={backgroundColor}\n    >\n      <DSGlobalHeaderContext.Provider value={ctx}>\n        <GlobalHeaderLogo />\n        <GlobalHeaderBreadcrumb />\n        <GlobalHeaderToolbar />\n      </DSGlobalHeaderContext.Provider>\n    </GlobalHeaderContainer>\n  );\n};\n\nDSGlobalHeader.displayName = 'DSGlobalHeader';\nconst DSGlobalHeaderWithSchema = describe(DSGlobalHeader);\nDSGlobalHeaderWithSchema.propTypes = propTypes;\n\nconst GlobalHeader = DSGlobalHeader;\n\nexport { GlobalHeader, DSGlobalHeader, DSGlobalHeaderWithSchema };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,iBAAiB,CAAC,UAA8C;AACpE,mBAAiB,KAAK;AACtB,QAAM,MAAM,gBAAgB,KAAK;AAEjC,QAAM,cAAc,uBAAuB,KAAK;AAChD,QAAM,eAAe,mBAAmB,KAAK;AAE7C,QAAM,EAAE,IAAI,oBAAoB;AAEhC,SACE,qCAAC;AAAA,IACC,eAAa,yBAAyB;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEA,qCAAC,sBAAsB,UAAtB;AAAA,IAA+B,OAAO;AAAA,KACrC,qCAAC,sBAAiB,GAClB,qCAAC,4BAAuB,GACxB,qCAAC,yBAAoB,CACvB,CACF;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;AAErC,MAAM,eAAe;",
   "names": []
 }

package/dist/esm/parts/GlobalHeaderContainer.js

@@ -17,10 +17,18 @@ var __spreadValues = (a, b) => {
 import * as React from "react";
 import React2 from "react";
 import { Container } from "./styles";
-const GlobalHeaderContainer = ({ xstyledAttrs, globalAttrs, children }) => /* @__PURE__ */ React2.createElement(Container, __spreadValues(__spreadValues({
+const GlobalHeaderContainer = ({
+  xstyledAttrs,
+  globalAttrs,
+  bg,
+  backgroundColor,
+  children
+}) => /* @__PURE__ */ React2.createElement(Container, __spreadValues(__spreadValues({
   forwardedAs: "header",
   "data-testid": "ds-global-header",
-  cols: ["auto", "1fr", "auto"]
+  cols: ["auto", "1fr", "auto"],
+  bg,
+  backgroundColor
 }, globalAttrs), xstyledAttrs), children);
 export {
   GlobalHeaderContainer

package/dist/esm/parts/GlobalHeaderContainer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/GlobalHeaderContainer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Container } from './styles';\n\ninterface GlobalHeaderContainerT {\n  xstyledAttrs: Record<string, unknown>;\n  globalAttrs: Record<string, unknown>;\n  children: React.ReactNode;\n}\n\nexport const GlobalHeaderContainer = ({ xstyledAttrs, globalAttrs, children }: GlobalHeaderContainerT): JSX.Element => (\n  <Container\n    forwardedAs=\"header\"\n    data-testid=\"ds-global-header\"\n    cols={['auto', '1fr', 'auto']}\n    {...globalAttrs}\n    {...xstyledAttrs}\n  >\n    {children}\n  </Container>\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AAQO,MAAM,wBAAwB,CAAC,EAAE,cAAc,aAAa,eACjE,qCAAC;AAAA,EACC,aAAY;AAAA,EACZ,eAAY;AAAA,EACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,GACxB,cACA,eAEH,QACH;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Container } from './styles';\n\ninterface GlobalHeaderContainerT {\n  xstyledAttrs: Record<string, unknown>;\n  globalAttrs: Record<string, unknown>;\n  backgroundColor?: string;\n  bg?: string;\n  children: React.ReactNode;\n}\n\nexport const GlobalHeaderContainer = ({\n  xstyledAttrs,\n  globalAttrs,\n  bg,\n  backgroundColor,\n  children,\n}: GlobalHeaderContainerT): JSX.Element => (\n  <Container\n    forwardedAs=\"header\"\n    data-testid=\"ds-global-header\"\n    cols={['auto', '1fr', 'auto']}\n    bg={bg}\n    backgroundColor={backgroundColor}\n    {...globalAttrs}\n    {...xstyledAttrs}\n  >\n    {children}\n  </Container>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AAUO,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,qCAAC;AAAA,EACC,aAAY;AAAA,EACZ,eAAY;AAAA,EACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,EAC5B;AAAA,EACA;AAAA,GACI,cACA,eAEH,QACH;",
   "names": []
 }

package/dist/esm/parts/styles.js

@@ -1,16 +1,16 @@
 import * as React from "react";
-import { styled } from "@elliemae/ds-system";
+import { styled, sizing, space, layout, background } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
-import { sizing, space, layout } from "@xstyled/styled-components";
 import { slots, COMPONENT_NAME } from "../exported-related/theming";
 const Container = styled(Grid, { name: COMPONENT_NAME, slot: slots.CONTAINER })`
-  background-image: linear-gradient(45deg, #0f364a 0%, #1b6392 54%, #164566 100%);
+  ${({ bg, backgroundColor }) => bg || backgroundColor ? "" : "background-image: linear-gradient(45deg, #0f364a 0%, #1b6392 54%, #164566 100%);"}
   color: ${({ theme }) => theme.colors.neutral["000"]};
   height: 40px;
   padding: 0 24px 0 12px;
   ${sizing}
   ${space}
   ${layout}
+  ${background}
 `;
 const StyledButton = styled("button", { name: COMPONENT_NAME, slot: slots.MENUBAR.ITEM_BUTTON })`
   height: 40px;

package/dist/esm/parts/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { sizing, space, layout } from '@xstyled/styled-components';\nimport { slots, COMPONENT_NAME } from '../exported-related/theming';\n\nexport const Container = styled(Grid, { name: COMPONENT_NAME, slot: slots.CONTAINER })`\n  background-image: linear-gradient(45deg, #0f364a 0%, #1b6392 54%, #164566 100%);\n  color: ${({ theme }) => theme.colors.neutral['000']};\n  height: 40px;\n  padding: 0 24px 0 12px;\n  ${sizing}\n  ${space}\n  ${layout}\n`;\n\nexport const StyledButton = styled('button', { name: COMPONENT_NAME, slot: slots.MENUBAR.ITEM_BUTTON })`\n  height: 40px;\n  width: 40px;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  fill: ${({ theme }) => theme.colors.neutral['000']};\n  &:hover:not(:focus) {\n    background-color: ${({ theme }) => theme.colors.brand[700]};\n    outline: none;\n  }\n  &:focus {\n    :before {\n      content: '';\n      position: absolute;\n      z-index: 2;\n      top: 2px;\n      left: 2px;\n      width: calc(100% - 4px);\n      height: calc(100% - 4px);\n      border: 2px solid ${({ theme }) => theme.colors.neutral['000']};\n      border-radius: 4px;\n    }\n  }\n`;\n"],
-  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEO,MAAM,YAAY,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,MAAM,UAAU,CAAC;AAAA;AAAA,WAE1E,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAG3C;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,eAAe,OAAO,UAAU,EAAE,MAAM,gBAAgB,MAAM,MAAM,QAAQ,YAAY,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQ5F,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA,wBAEtB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYhC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { styled, sizing, space, layout, background } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { slots, COMPONENT_NAME } from '../exported-related/theming';\n\nexport const Container = styled(Grid, { name: COMPONENT_NAME, slot: slots.CONTAINER })`\n  ${({ bg, backgroundColor }) =>\n    bg || backgroundColor ? '' : 'background-image: linear-gradient(45deg, #0f364a 0%, #1b6392 54%, #164566 100%);'}\n  color: ${({ theme }) => theme.colors.neutral['000']};\n  height: 40px;\n  padding: 0 24px 0 12px;\n  ${sizing}\n  ${space}\n  ${layout}\n  ${background}\n`;\n\nexport const StyledButton = styled('button', { name: COMPONENT_NAME, slot: slots.MENUBAR.ITEM_BUTTON })`\n  height: 40px;\n  width: 40px;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  fill: ${({ theme }) => theme.colors.neutral['000']};\n  &:hover:not(:focus) {\n    background-color: ${({ theme }) => theme.colors.brand[700]};\n    outline: none;\n  }\n  &:focus {\n    :before {\n      content: '';\n      position: absolute;\n      z-index: 2;\n      top: 2px;\n      left: 2px;\n      width: calc(100% - 4px);\n      height: calc(100% - 4px);\n      border: 2px solid ${({ theme }) => theme.colors.neutral['000']};\n      border-radius: 4px;\n    }\n  }\n`;\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AAEO,MAAM,YAAY,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,MAAM,UAAU,CAAC;AAAA,IACjF,CAAC,EAAE,IAAI,sBACP,MAAM,kBAAkB,KAAK;AAAA,WACtB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAG3C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,eAAe,OAAO,UAAU,EAAE,MAAM,gBAAgB,MAAM,MAAM,QAAQ,YAAY,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQ5F,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA,wBAEtB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYhC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/react-desc-prop-types.js

@@ -43,7 +43,9 @@ const propTypes = __spreadProps(__spreadValues(__spreadValues({}, globalAttribut
   Logo: PropTypes.func.description("Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing.").defaultValue("() => JSX.Element"),
   LogoWithBrand: PropTypes.func.description("Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing.").defaultValue("() => JSX.Element"),
   breadcrumb: PropTypes.arrayOf(breadcrumbItem).description("Breadcrumb items to display. Max 3 levels. Compatible with GlobalAttributes.").defaultValue("[]"),
-  toolbar: PropTypes.arrayOf(toolbarItem).description("Toolbar items. Compatible with GlobalAttributes.").defaultValue("[]")
+  toolbar: PropTypes.arrayOf(toolbarItem).description("Toolbar items. Compatible with GlobalAttributes.").defaultValue("[]"),
+  backgroundColor: PropTypes.string.description("Changes background color."),
+  bg: PropTypes.string.description("Changes background color.")
 });
 export {
   breadcrumbItem,

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport type { DSGlobalHeaderInternalsT } from './sharedTypes';\n\nconst noop = () => null;\n\nexport const defaultProps = {\n  breadcrumb: [],\n  toolbar: [],\n  LogoWithBrand: noop,\n  Logo: noop,\n};\n\nexport declare namespace DSGlobalHeaderT {\n  export type Props = Partial<DSGlobalHeaderInternalsT.DefaultProps>;\n}\n\nexport const breadcrumbItem = PropTypes.shape({\n  label: PropTypes.string.description('breadrcrumb item label'),\n  hasNext: PropTypes.bool.description('whether the item has a child or not'),\n  isSelected: PropTypes.bool.description('whether the item is selected or not'),\n  onClick: PropTypes.func.description('Callback executed on click'),\n});\n\nexport const toolbarItem = PropTypes.shape({\n  label: PropTypes.string.description('title tag description'),\n  type: PropTypes.oneOf(['ds-app-picker', 'ds-popup-menu', 'ds-search-toggle', 'custom']).description(\n    'use to select one of the out-of-the-box types of items',\n  ),\n  componentProps: PropTypes.object.description('props of out-of-the-box component'),\n  Icon: PropTypes.func.description('Icon to display'),\n  onClick: PropTypes.func.description('Callback executed on click'),\n});\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  Logo: PropTypes.func\n    .description('Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing.')\n    .defaultValue('() => JSX.Element'),\n  LogoWithBrand: PropTypes.func\n    .description(\n      'Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing.',\n    )\n    .defaultValue('() => JSX.Element'),\n  breadcrumb: PropTypes.arrayOf(breadcrumbItem)\n    .description('Breadcrumb items to display. Max 3 levels. Compatible with GlobalAttributes.')\n    .defaultValue('[]'),\n  toolbar: PropTypes.arrayOf(toolbarItem)\n    .description('Toolbar items. Compatible with GlobalAttributes.')\n    .defaultValue('[]'),\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AAGA,MAAM,OAAO,MAAM;AAEZ,MAAM,eAAe;AAAA,EAC1B,YAAY,CAAC;AAAA,EACb,SAAS,CAAC;AAAA,EACV,eAAe;AAAA,EACf,MAAM;AACR;AAMO,MAAM,iBAAiB,UAAU,MAAM;AAAA,EAC5C,OAAO,UAAU,OAAO,YAAY,wBAAwB;AAAA,EAC5D,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,YAAY,UAAU,KAAK,YAAY,qCAAqC;AAAA,EAC5E,SAAS,UAAU,KAAK,YAAY,4BAA4B;AAClE,CAAC;AAEM,MAAM,cAAc,UAAU,MAAM;AAAA,EACzC,OAAO,UAAU,OAAO,YAAY,uBAAuB;AAAA,EAC3D,MAAM,UAAU,MAAM,CAAC,iBAAiB,iBAAiB,oBAAoB,QAAQ,CAAC,EAAE,YACtF,wDACF;AAAA,EACA,gBAAgB,UAAU,OAAO,YAAY,mCAAmC;AAAA,EAChF,MAAM,UAAU,KAAK,YAAY,iBAAiB;AAAA,EAClD,SAAS,UAAU,KAAK,YAAY,4BAA4B;AAClE,CAAC;AAEM,MAAM,YAAY,gDACpB,4BACA,mBAFoB;AAAA,EAGvB,MAAM,UAAU,KACb,YAAY,gGAAgG,EAC5G,aAAa,mBAAmB;AAAA,EACnC,eAAe,UAAU,KACtB,YACC,iHACF,EACC,aAAa,mBAAmB;AAAA,EACnC,YAAY,UAAU,QAAQ,cAAc,EACzC,YAAY,8EAA8E,EAC1F,aAAa,IAAI;AAAA,EACpB,SAAS,UAAU,QAAQ,WAAW,EACnC,YAAY,kDAAkD,EAC9D,aAAa,IAAI;AACtB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport type { DSGlobalHeaderInternalsT } from './sharedTypes';\n\nconst noop = () => null;\n\nexport const defaultProps = {\n  breadcrumb: [],\n  toolbar: [],\n  LogoWithBrand: noop,\n  Logo: noop,\n};\n\nexport declare namespace DSGlobalHeaderT {\n  export type Props = Partial<DSGlobalHeaderInternalsT.DefaultProps> & {\n    backgroundColor?: string;\n    bg?: string;\n  };\n}\n\nexport const breadcrumbItem = PropTypes.shape({\n  label: PropTypes.string.description('breadrcrumb item label'),\n  hasNext: PropTypes.bool.description('whether the item has a child or not'),\n  isSelected: PropTypes.bool.description('whether the item is selected or not'),\n  onClick: PropTypes.func.description('Callback executed on click'),\n});\n\nexport const toolbarItem = PropTypes.shape({\n  label: PropTypes.string.description('title tag description'),\n  type: PropTypes.oneOf(['ds-app-picker', 'ds-popup-menu', 'ds-search-toggle', 'custom']).description(\n    'use to select one of the out-of-the-box types of items',\n  ),\n  componentProps: PropTypes.object.description('props of out-of-the-box component'),\n  Icon: PropTypes.func.description('Icon to display'),\n  onClick: PropTypes.func.description('Callback executed on click'),\n});\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  Logo: PropTypes.func\n    .description('Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing.')\n    .defaultValue('() => JSX.Element'),\n  LogoWithBrand: PropTypes.func\n    .description(\n      'Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing.',\n    )\n    .defaultValue('() => JSX.Element'),\n  breadcrumb: PropTypes.arrayOf(breadcrumbItem)\n    .description('Breadcrumb items to display. Max 3 levels. Compatible with GlobalAttributes.')\n    .defaultValue('[]'),\n  toolbar: PropTypes.arrayOf(toolbarItem)\n    .description('Toolbar items. Compatible with GlobalAttributes.')\n    .defaultValue('[]'),\n  backgroundColor: PropTypes.string.description('Changes background color.'),\n  bg: PropTypes.string.description('Changes background color.'),\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AAGA,MAAM,OAAO,MAAM;AAEZ,MAAM,eAAe;AAAA,EAC1B,YAAY,CAAC;AAAA,EACb,SAAS,CAAC;AAAA,EACV,eAAe;AAAA,EACf,MAAM;AACR;AASO,MAAM,iBAAiB,UAAU,MAAM;AAAA,EAC5C,OAAO,UAAU,OAAO,YAAY,wBAAwB;AAAA,EAC5D,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,YAAY,UAAU,KAAK,YAAY,qCAAqC;AAAA,EAC5E,SAAS,UAAU,KAAK,YAAY,4BAA4B;AAClE,CAAC;AAEM,MAAM,cAAc,UAAU,MAAM;AAAA,EACzC,OAAO,UAAU,OAAO,YAAY,uBAAuB;AAAA,EAC3D,MAAM,UAAU,MAAM,CAAC,iBAAiB,iBAAiB,oBAAoB,QAAQ,CAAC,EAAE,YACtF,wDACF;AAAA,EACA,gBAAgB,UAAU,OAAO,YAAY,mCAAmC;AAAA,EAChF,MAAM,UAAU,KAAK,YAAY,iBAAiB;AAAA,EAClD,SAAS,UAAU,KAAK,YAAY,4BAA4B;AAClE,CAAC;AAEM,MAAM,YAAY,gDACpB,4BACA,mBAFoB;AAAA,EAGvB,MAAM,UAAU,KACb,YAAY,gGAAgG,EAC5G,aAAa,mBAAmB;AAAA,EACnC,eAAe,UAAU,KACtB,YACC,iHACF,EACC,aAAa,mBAAmB;AAAA,EACnC,YAAY,UAAU,QAAQ,cAAc,EACzC,YAAY,8EAA8E,EAC1F,aAAa,IAAI;AAAA,EACpB,SAAS,UAAU,QAAQ,WAAW,EACnC,YAAY,kDAAkD,EAC9D,aAAa,IAAI;AAAA,EACpB,iBAAiB,UAAU,OAAO,YAAY,2BAA2B;AAAA,EACzE,IAAI,UAAU,OAAO,YAAY,2BAA2B;AAC9D;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-global-header",
-  "version": "3.0.0-next.78",
+  "version": "3.0.0-next.80",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Global Header",
   "files": [
@@ -148,6 +148,7 @@
     "@elliemae/ds-icon": "workspace:*",
     "@elliemae/ds-icons": "workspace:*",
     "@elliemae/ds-popperjs": "workspace:*",
+    "@elliemae/ds-system": "workspace:*",
     "@elliemae/ds-utilities": "workspace:*",
     "react-desc": "~4.1.3",
     "uid": "~2.0.0"