@elliemae/ds-global-header 2.3.0-next.3 → 3.0.0-alpha.0

package/dist/esm/outOfTheBox/SearchToggle/SearchToggle.js

@@ -0,0 +1,79 @@
+import * as React from "react";
+import React2, { useState, useCallback, useRef } from "react";
+import { Search } from "@elliemae/ds-icons";
+import { getDataProps } from "@elliemae/ds-props-helpers";
+import { DSIconColors } from "@elliemae/ds-icon";
+import { DSNavSearchBox } from "@elliemae/ds-form";
+import { StyledNavSearchBoxContainer } from "./styles";
+import { Button } from "../../components/Toolbar/styles";
+const SearchToggle = ({ id, componentProps, ...otherProps }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const inputRef = useRef(null);
+  const triggerRef = useRef(null);
+  const containerRef = useRef(null);
+  const {
+    onNext,
+    onPrevious,
+    currentResultIndex,
+    totalResults,
+    placeholder,
+    value,
+    onChange,
+    onBlur,
+    onClear,
+    isOpen: userIsOpen,
+    onKeyDown,
+    onClick
+  } = componentProps;
+  const handleOnClick = useCallback((e) => {
+    if (userIsOpen === void 0)
+      setIsOpen(true);
+    if (onClick)
+      onClick(e);
+  }, [onClick, userIsOpen]);
+  const handleOnKeyDown = useCallback((e) => {
+    if (userIsOpen === void 0) {
+      if (e.code === "Escape") {
+        setIsOpen(false);
+        setTimeout(() => triggerRef.current?.focus());
+      }
+    }
+    if (onKeyDown)
+      onKeyDown(e);
+  }, [onKeyDown, userIsOpen]);
+  const handleOnBlur = useCallback(() => {
+    setTimeout(() => {
+      const contains = containerRef.current?.contains(document.activeElement);
+      if (value === "" && !contains)
+        setIsOpen(false);
+    });
+  }, [value]);
+  return userIsOpen || isOpen ? /* @__PURE__ */ React2.createElement(StyledNavSearchBoxContainer, {
+    onKeyDown: handleOnKeyDown,
+    ref: containerRef,
+    onBlur: handleOnBlur
+  }, /* @__PURE__ */ React2.createElement(DSNavSearchBox, {
+    onNext,
+    onPrevious,
+    currentResultIndex,
+    totalResults,
+    onClear,
+    placeholder,
+    onChange,
+    value,
+    onBlur,
+    innerRef: inputRef,
+    autoFocus: true
+  })) : /* @__PURE__ */ React2.createElement(Button, {
+    onClick: handleOnClick,
+    ref: triggerRef,
+    id,
+    ...getDataProps(otherProps)
+  }, /* @__PURE__ */ React2.createElement(Search, {
+    color: DSIconColors.WHITE
+  }));
+};
+export {
+  SearchToggle
+};
+//# sourceMappingURL=SearchToggle.js.map

package/dist/esm/outOfTheBox/SearchToggle/SearchToggle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/SearchToggle/SearchToggle.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback, useRef } from 'react';\nimport { Search } from '@elliemae/ds-icons';\nimport { getDataProps } from '@elliemae/ds-props-helpers';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { DSNavSearchBox } from '@elliemae/ds-form';\nimport { StyledNavSearchBoxContainer } from './styles';\nimport { Button } from '../../components/Toolbar/styles';\nimport type { SearchTogglePropsT } from 'index.d';\n\nexport const SearchToggle = ({ id, componentProps, ...otherProps }: SearchTogglePropsT): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const {\n    onNext,\n    onPrevious,\n    currentResultIndex,\n    totalResults,\n    placeholder,\n    value,\n    onChange,\n    onBlur,\n    onClear,\n    isOpen: userIsOpen,\n    onKeyDown,\n    onClick,\n  } = componentProps;\n\n  const handleOnClick = useCallback(\n    (e) => {\n      if (userIsOpen === undefined) setIsOpen(true);\n      if (onClick) onClick(e);\n    },\n    [onClick, userIsOpen],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (userIsOpen === undefined) {\n        if (e.code === 'Escape') {\n          setIsOpen(false);\n          setTimeout(() => triggerRef.current?.focus());\n        }\n      }\n      if (onKeyDown) onKeyDown(e);\n    },\n    [onKeyDown, userIsOpen],\n  );\n\n  const handleOnBlur = useCallback(() => {\n    setTimeout(() => {\n      const contains = containerRef.current?.contains(document.activeElement);\n      if (value === '' && !contains) setIsOpen(false);\n    });\n  }, [value]);\n\n  return userIsOpen || isOpen ? (\n    <StyledNavSearchBoxContainer onKeyDown={handleOnKeyDown} ref={containerRef} onBlur={handleOnBlur}>\n      <DSNavSearchBox\n        onNext={onNext}\n        onPrevious={onPrevious}\n        currentResultIndex={currentResultIndex}\n        totalResults={totalResults}\n        onClear={onClear}\n        placeholder={placeholder}\n        onChange={onChange}\n        value={value}\n        onBlur={onBlur}\n        innerRef={inputRef}\n        autoFocus\n      />\n    </StyledNavSearchBoxContainer>\n  ) : (\n    <Button onClick={handleOnClick} ref={triggerRef} id={id} {...getDataProps(otherProps)}>\n      <Search color={DSIconColors.WHITE} />\n    </Button>\n  );\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGO,MAAM,eAAe,CAAC,EAAE,IAAI,mBAAmB,iBAAkD;AACtG,QAAM,CAAC,QAAQ,aAAa,SAAkB;AAC9C,QAAM,WAAW,OAAgC;AACjD,QAAM,aAAa,OAAiC;AACpD,QAAM,eAAe,OAA8B;AAEnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,gBAAgB,YACpB,CAAC,MAAM;AACL,QAAI,eAAe;AAAW,gBAAU;AACxC,QAAI;AAAS,cAAQ;AAAA,KAEvB,CAAC,SAAS;AAGZ,QAAM,kBAAkB,YACtB,CAAC,MAA2B;AAC1B,QAAI,eAAe,QAAW;AAC5B,UAAI,EAAE,SAAS,UAAU;AACvB,kBAAU;AACV,mBAAW,MAAM,WAAW,SAAS;AAAA;AAAA;AAGzC,QAAI;AAAW,gBAAU;AAAA,KAE3B,CAAC,WAAW;AAGd,QAAM,eAAe,YAAY,MAAM;AACrC,eAAW,MAAM;AACf,YAAM,WAAW,aAAa,SAAS,SAAS,SAAS;AACzD,UAAI,UAAU,MAAM,CAAC;AAAU,kBAAU;AAAA;AAAA,KAE1C,CAAC;AAEJ,SAAO,cAAc,SACnB,qCAAC,6BAAD;AAAA,IAA6B,WAAW;AAAA,IAAiB,KAAK;AAAA,IAAc,QAAQ;AAAA,KAClF,qCAAC,gBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,WAAS;AAAA,QAIb,qCAAC,QAAD;AAAA,IAAQ,SAAS;AAAA,IAAe,KAAK;AAAA,IAAY;AAAA,OAAY,aAAa;AAAA,KACxE,qCAAC,QAAD;AAAA,IAAQ,OAAO,aAAa;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/outOfTheBox/SearchToggle/styles.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+import styled from "styled-components";
+const StyledNavSearchBoxContainer = styled.div`
+  background: white;
+  position: relative;
+
+  min-width: 260px;
+
+  & .em-ds-button {
+    margin-right: 2px;
+    height: 24px;
+    width: 24px;
+  }
+
+  & .em-ds-input {
+    border: none;
+    outline: none;
+    box-shadow: none;
+  }
+
+  & .em-ds-input:focus {
+    border: none;
+    box-shadow: none;
+  }
+
+  & .em-ds-input.em-ds-input--clearable:hover {
+    border: none;
+    outline: none;
+    box-shadow: none;
+  }
+
+  & .em-ds-input-addon-wrapper {
+    box-shadow: none;
+  }
+
+  & .em-ds-input-addon-wrapper:hover {
+    outline: none;
+  }
+
+  & .em-ds-input-addon-wrapper__addon:hover {
+    outline: none;
+  }
+
+  & .em-ds-input:not(.floating-label-input-controller):hover:active {
+    border: none;
+    outline: none;
+    box-shadow: none;
+  }
+`;
+export {
+  StyledNavSearchBoxContainer
+};
+//# sourceMappingURL=styles.js.map

package/dist/esm/outOfTheBox/SearchToggle/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/SearchToggle/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\n\nexport const StyledNavSearchBoxContainer = styled.div`\n  background: white;\n  position: relative;\n\n  min-width: 260px;\n\n  & .em-ds-button {\n    margin-right: 2px;\n    height: 24px;\n    width: 24px;\n  }\n\n  & .em-ds-input {\n    border: none;\n    outline: none;\n    box-shadow: none;\n  }\n\n  & .em-ds-input:focus {\n    border: none;\n    box-shadow: none;\n  }\n\n  & .em-ds-input.em-ds-input--clearable:hover {\n    border: none;\n    outline: none;\n    box-shadow: none;\n  }\n\n  & .em-ds-input-addon-wrapper {\n    box-shadow: none;\n  }\n\n  & .em-ds-input-addon-wrapper:hover {\n    outline: none;\n  }\n\n  & .em-ds-input-addon-wrapper__addon:hover {\n    outline: none;\n  }\n\n  & .em-ds-input:not(.floating-label-input-controller):hover:active {\n    border: none;\n    outline: none;\n    box-shadow: none;\n  }\n`;\n"],
+  "mappings": "AAAA;ACAA;AAEO,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/outOfTheBox/index.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+export * from "./AppPicker/AppPicker";
+export * from "./PopupMenu/PopupMenu";
+export * from "./SearchToggle/SearchToggle";
+//# sourceMappingURL=index.js.map

package/dist/esm/outOfTheBox/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/outOfTheBox/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './AppPicker/AppPicker';\nexport * from './PopupMenu/PopupMenu';\nexport * from './SearchToggle/SearchToggle';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;",
+  "names": []
+}

package/dist/esm/propTypes.js

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { PropTypes } from "react-desc";
+const breadcrumbItem = PropTypes.shape({
+  label: PropTypes.string.description("breadrcrumb item label"),
+  hasNext: PropTypes.bool.description("whether the item has a child or not"),
+  isSelected: PropTypes.bool.description("whether the item is selected or not"),
+  onClick: PropTypes.func.description("Callback executed on click")
+});
+const toolbarItem = PropTypes.shape({
+  label: PropTypes.string.description("title tag description"),
+  type: PropTypes.oneOf(["ds-app-picker", "ds-popup-menu", "ds-search-toggle", "custom"]).description("use to select one of the out-of-the-box types of items"),
+  componentProps: PropTypes.object.description("props of out-of-the-box component"),
+  Icon: PropTypes.func.description("Icon to display"),
+  onClick: PropTypes.func.description("Callback executed on click")
+});
+const globalHeaderProps = {
+  Logo: PropTypes.func.description("Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing."),
+  LogoWithBrand: PropTypes.func.description("Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing."),
+  breadcrumb: PropTypes.arrayOf(breadcrumbItem).description("Breadcrumb items to display. max 3 levels"),
+  toolbar: PropTypes.arrayOf(toolbarItem).description("Toolbar items")
+};
+export {
+  breadcrumbItem,
+  globalHeaderProps,
+  toolbarItem
+};
+//# sourceMappingURL=propTypes.js.map

package/dist/esm/propTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\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 globalHeaderProps = {\n  Logo: PropTypes.func.description(\n    'Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing.',\n  ),\n  LogoWithBrand: PropTypes.func.description(\n    'Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing.',\n  ),\n  breadcrumb: PropTypes.arrayOf(breadcrumbItem).description('Breadcrumb items to display. max 3 levels'),\n  toolbar: PropTypes.arrayOf(toolbarItem).description('Toolbar items'),\n};\n"],
+  "mappings": "AAAA;ACAA;AAEO,MAAM,iBAAiB,UAAU,MAAM;AAAA,EAC5C,OAAO,UAAU,OAAO,YAAY;AAAA,EACpC,SAAS,UAAU,KAAK,YAAY;AAAA,EACpC,YAAY,UAAU,KAAK,YAAY;AAAA,EACvC,SAAS,UAAU,KAAK,YAAY;AAAA;AAG/B,MAAM,cAAc,UAAU,MAAM;AAAA,EACzC,OAAO,UAAU,OAAO,YAAY;AAAA,EACpC,MAAM,UAAU,MAAM,CAAC,iBAAiB,iBAAiB,oBAAoB,WAAW,YACtF;AAAA,EAEF,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAC7C,MAAM,UAAU,KAAK,YAAY;AAAA,EACjC,SAAS,UAAU,KAAK,YAAY;AAAA;AAG/B,MAAM,oBAAoB;AAAA,EAC/B,MAAM,UAAU,KAAK,YACnB;AAAA,EAEF,eAAe,UAAU,KAAK,YAC5B;AAAA,EAEF,YAAY,UAAU,QAAQ,gBAAgB,YAAY;AAAA,EAC1D,SAAS,UAAU,QAAQ,aAAa,YAAY;AAAA;",
+  "names": []
+}

package/dist/esm/styles.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+import styled from "styled-components";
+import { GridContainer } from "@elliemae/ds-grid";
+const Wrapper = styled(GridContainer)`
+  background-image: linear-gradient(45deg, #0f364a 0%, #1b6392 54%, #164566 100%);
+  color: ${({ theme }) => theme.colors.neutral["000"]};
+  width: 100%;
+  height: 40px;
+  padding: 0 24px 0 12px;
+`;
+export {
+  Wrapper
+};
+//# sourceMappingURL=styles.js.map

package/dist/esm/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { GridContainer } from '@elliemae/ds-grid';\n\nexport const Wrapper = styled(GridContainer)`\n  background-image: linear-gradient(45deg, #0f364a 0%, #1b6392 54%, #164566 100%);\n  color: ${({ theme }) => theme.colors.neutral['000']};\n  width: 100%;\n  height: 40px;\n  padding: 0 24px 0 12px;\n`;\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,UAAU,OAAO;AAAA;AAAA,WAEnB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/{types → dist/types}/styles.d.ts

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

package/package.json

@@ -1,115 +1,118 @@
 {
   "name": "@elliemae/ds-global-header",
-  "version": "2.3.0-next.3",
+  "version": "3.0.0-alpha.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Global Header",
-  "module": "./esm/index.js",
-  "main": "./cjs/index.js",
-  "types": "./types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./esm/index.js",
-      "require": "./cjs/index.js"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
     },
     "./styles": {
-      "import": "./esm/styles.js",
-      "require": "./cjs/styles.js"
+      "import": "./dist/esm/styles.js",
+      "require": "./dist/cjs/styles.js"
     },
     "./propTypes": {
-      "import": "./esm/propTypes.js",
-      "require": "./cjs/propTypes.js"
+      "import": "./dist/esm/propTypes.js",
+      "require": "./dist/cjs/propTypes.js"
     },
     "./outOfTheBox/SearchToggle/styles": {
-      "import": "./esm/outOfTheBox/SearchToggle/styles.js",
-      "require": "./cjs/outOfTheBox/SearchToggle/styles.js"
+      "import": "./dist/esm/outOfTheBox/SearchToggle/styles.js",
+      "require": "./dist/cjs/outOfTheBox/SearchToggle/styles.js"
     },
     "./outOfTheBox/SearchToggle/SearchToggle": {
-      "import": "./esm/outOfTheBox/SearchToggle/SearchToggle.js",
-      "require": "./cjs/outOfTheBox/SearchToggle/SearchToggle.js"
+      "import": "./dist/esm/outOfTheBox/SearchToggle/SearchToggle.js",
+      "require": "./dist/cjs/outOfTheBox/SearchToggle/SearchToggle.js"
     },
     "./outOfTheBox/PopupMenu/styles": {
-      "import": "./esm/outOfTheBox/PopupMenu/styles.js",
-      "require": "./cjs/outOfTheBox/PopupMenu/styles.js"
+      "import": "./dist/esm/outOfTheBox/PopupMenu/styles.js",
+      "require": "./dist/cjs/outOfTheBox/PopupMenu/styles.js"
     },
     "./outOfTheBox/PopupMenu/PopupMenuContent": {
-      "import": "./esm/outOfTheBox/PopupMenu/PopupMenuContent.js",
-      "require": "./cjs/outOfTheBox/PopupMenu/PopupMenuContent.js"
+      "import": "./dist/esm/outOfTheBox/PopupMenu/PopupMenuContent.js",
+      "require": "./dist/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js"
     },
     "./outOfTheBox/PopupMenu/PopupMenu": {
-      "import": "./esm/outOfTheBox/PopupMenu/PopupMenu.js",
-      "require": "./cjs/outOfTheBox/PopupMenu/PopupMenu.js"
+      "import": "./dist/esm/outOfTheBox/PopupMenu/PopupMenu.js",
+      "require": "./dist/cjs/outOfTheBox/PopupMenu/PopupMenu.js"
     },
     "./outOfTheBox": {
-      "import": "./esm/outOfTheBox/index.js",
-      "require": "./cjs/outOfTheBox/index.js"
+      "import": "./dist/esm/outOfTheBox/index.js",
+      "require": "./dist/cjs/outOfTheBox/index.js"
     },
     "./outOfTheBox/AppPicker/AppPicker": {
-      "import": "./esm/outOfTheBox/AppPicker/AppPicker.js",
-      "require": "./cjs/outOfTheBox/AppPicker/AppPicker.js"
+      "import": "./dist/esm/outOfTheBox/AppPicker/AppPicker.js",
+      "require": "./dist/cjs/outOfTheBox/AppPicker/AppPicker.js"
     },
     "./GlobalHeaderTypes": {
-      "import": "./esm/GlobalHeaderTypes.js",
-      "require": "./cjs/GlobalHeaderTypes.js"
+      "import": "./dist/esm/GlobalHeaderTypes.js",
+      "require": "./dist/cjs/GlobalHeaderTypes.js"
     },
     "./GlobalHeaderContext": {
-      "import": "./esm/GlobalHeaderContext.js",
-      "require": "./cjs/GlobalHeaderContext.js"
+      "import": "./dist/esm/GlobalHeaderContext.js",
+      "require": "./dist/cjs/GlobalHeaderContext.js"
     },
     "./GlobalHeaderContainer": {
-      "import": "./esm/GlobalHeaderContainer.js",
-      "require": "./cjs/GlobalHeaderContainer.js"
+      "import": "./dist/esm/GlobalHeaderContainer.js",
+      "require": "./dist/cjs/GlobalHeaderContainer.js"
     },
     "./GlobalHeader": {
-      "import": "./esm/GlobalHeader.js",
-      "require": "./cjs/GlobalHeader.js"
+      "import": "./dist/esm/GlobalHeader.js",
+      "require": "./dist/cjs/GlobalHeader.js"
     },
     "./defaultProps": {
-      "import": "./esm/defaultProps.js",
-      "require": "./cjs/defaultProps.js"
+      "import": "./dist/esm/defaultProps.js",
+      "require": "./dist/cjs/defaultProps.js"
     },
     "./config/validateHelpers": {
-      "import": "./esm/config/validateHelpers.js",
-      "require": "./cjs/config/validateHelpers.js"
+      "import": "./dist/esm/config/validateHelpers.js",
+      "require": "./dist/cjs/config/validateHelpers.js"
     },
     "./config/useValidateProps": {
-      "import": "./esm/config/useValidateProps.js",
-      "require": "./cjs/config/useValidateProps.js"
+      "import": "./dist/esm/config/useValidateProps.js",
+      "require": "./dist/cjs/config/useValidateProps.js"
     },
     "./config/useGlobalHeader": {
-      "import": "./esm/config/useGlobalHeader.js",
-      "require": "./cjs/config/useGlobalHeader.js"
+      "import": "./dist/esm/config/useGlobalHeader.js",
+      "require": "./dist/cjs/config/useGlobalHeader.js"
     },
     "./config/useGetPropsWithDefaults": {
-      "import": "./esm/config/useGetPropsWithDefaults.js",
-      "require": "./cjs/config/useGetPropsWithDefaults.js"
+      "import": "./dist/esm/config/useGetPropsWithDefaults.js",
+      "require": "./dist/cjs/config/useGetPropsWithDefaults.js"
     },
     "./components/Toolbar/ToolbarItems": {
-      "import": "./esm/components/Toolbar/ToolbarItems.js",
-      "require": "./cjs/components/Toolbar/ToolbarItems.js"
+      "import": "./dist/esm/components/Toolbar/ToolbarItems.js",
+      "require": "./dist/cjs/components/Toolbar/ToolbarItems.js"
     },
     "./components/Toolbar/styles": {
-      "import": "./esm/components/Toolbar/styles.js",
-      "require": "./cjs/components/Toolbar/styles.js"
+      "import": "./dist/esm/components/Toolbar/styles.js",
+      "require": "./dist/cjs/components/Toolbar/styles.js"
     },
     "./components/Toolbar/GlobalHeaderToolbar": {
-      "import": "./esm/components/Toolbar/GlobalHeaderToolbar.js",
-      "require": "./cjs/components/Toolbar/GlobalHeaderToolbar.js"
+      "import": "./dist/esm/components/Toolbar/GlobalHeaderToolbar.js",
+      "require": "./dist/cjs/components/Toolbar/GlobalHeaderToolbar.js"
     },
     "./components/Title/GlobalHeaderTitle": {
-      "import": "./esm/components/Title/GlobalHeaderTitle.js",
-      "require": "./cjs/components/Title/GlobalHeaderTitle.js"
+      "import": "./dist/esm/components/Title/GlobalHeaderTitle.js",
+      "require": "./dist/cjs/components/Title/GlobalHeaderTitle.js"
     },
     "./components/Breadcrumb/styles": {
-      "import": "./esm/components/Breadcrumb/styles.js",
-      "require": "./cjs/components/Breadcrumb/styles.js"
+      "import": "./dist/esm/components/Breadcrumb/styles.js",
+      "require": "./dist/cjs/components/Breadcrumb/styles.js"
     },
     "./components/Breadcrumb/PureBreadcrumb": {
-      "import": "./esm/components/Breadcrumb/PureBreadcrumb.js",
-      "require": "./cjs/components/Breadcrumb/PureBreadcrumb.js"
+      "import": "./dist/esm/components/Breadcrumb/PureBreadcrumb.js",
+      "require": "./dist/cjs/components/Breadcrumb/PureBreadcrumb.js"
     },
     "./components/Breadcrumb/GlobalHeaderBreadcrumb": {
-      "import": "./esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js",
-      "require": "./cjs/components/Breadcrumb/GlobalHeaderBreadcrumb.js"
+      "import": "./dist/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js",
+      "require": "./dist/cjs/components/Breadcrumb/GlobalHeaderBreadcrumb.js"
     }
   },
   "sideEffects": [
@@ -121,23 +124,25 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "npm": ">=7",
-    "node": ">=14"
+    "pnpm": ">=6",
+    "node": ">=16"
   },
   "author": "ICE MT",
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-app-picker": "2.3.0-next.3",
-    "@elliemae/ds-grid": "2.3.0-next.3",
-    "@elliemae/ds-icons": "2.3.0-next.3",
-    "@elliemae/ds-popperjs": "2.3.0-next.3",
-    "@elliemae/ds-props-helpers": "2.3.0-next.3",
-    "@elliemae/ds-utilities": "2.3.0-next.3",
+    "@elliemae/ds-app-picker": "3.0.0-alpha.0",
+    "@elliemae/ds-form": "3.0.0-alpha.0",
+    "@elliemae/ds-grid": "3.0.0-alpha.0",
+    "@elliemae/ds-icon": "3.0.0-alpha.0",
+    "@elliemae/ds-icons": "3.0.0-alpha.0",
+    "@elliemae/ds-popperjs": "3.0.0-alpha.0",
+    "@elliemae/ds-props-helpers": "3.0.0-alpha.0",
+    "@elliemae/ds-utilities": "3.0.0-alpha.0",
     "react-desc": "~4.1.3",
     "uid": "~2.0.0"
   },
@@ -152,7 +157,12 @@
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist",
-    "generateSubmodules": true
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
   }
 }

package/cjs/GlobalHeader.js

@@ -1,37 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
-var reactDesc = require('react-desc');
-var propTypes = require('./propTypes.js');
-var GlobalHeaderTitle = require('./components/Title/GlobalHeaderTitle.js');
-var GlobalHeaderBreadcrumb = require('./components/Breadcrumb/GlobalHeaderBreadcrumb.js');
-var GlobalHeaderToolbar = require('./components/Toolbar/GlobalHeaderToolbar.js');
-var GlobalHeaderContext = require('./GlobalHeaderContext.js');
-var useGlobalHeader = require('./config/useGlobalHeader.js');
-var defaultProps = require('./defaultProps.js');
-var GlobalHeaderContainer = require('./GlobalHeaderContainer.js');
-var useValidateProps = require('./config/useValidateProps.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-
-var _GlobalHeaderTitle, _GlobalHeaderBreadcru, _GlobalHeaderToolbar;
-
-const GlobalHeader = props => {
-  useValidateProps.useValidateProps(props);
-  const ctx = useGlobalHeader.useGlobalHeader(props);
-  return /*#__PURE__*/_jsx__default["default"](GlobalHeaderContainer.GlobalHeaderContainer, {}, void 0, /*#__PURE__*/_jsx__default["default"](GlobalHeaderContext.GlobalHeaderContext.Provider, {
-    value: ctx
-  }, void 0, _GlobalHeaderTitle || (_GlobalHeaderTitle = /*#__PURE__*/_jsx__default["default"](GlobalHeaderTitle.GlobalHeaderTitle, {})), _GlobalHeaderBreadcru || (_GlobalHeaderBreadcru = /*#__PURE__*/_jsx__default["default"](GlobalHeaderBreadcrumb.GlobalHeaderBreadcrumb, {})), _GlobalHeaderToolbar || (_GlobalHeaderToolbar = /*#__PURE__*/_jsx__default["default"](GlobalHeaderToolbar.GlobalHeaderToolbar, {}))));
-};
-
-GlobalHeader.defaultProps = defaultProps.defaultProps;
-const GlobalHeaderWithSchema = reactDesc.describe(GlobalHeader);
-GlobalHeaderWithSchema.propTypes = propTypes.globalHeaderProps;
-
-exports.GlobalHeader = GlobalHeader;
-exports.GlobalHeaderWithSchema = GlobalHeaderWithSchema;

package/cjs/GlobalHeaderContainer.js

@@ -1,24 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
-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);
-
-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/GlobalHeaderContext.js

@@ -1,20 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var defaultProps = require('./defaultProps.js');
-
-const noop = () => null;
-
-const defaultContext = {
-  props: defaultProps.defaultProps,
-  showIconOnly: false,
-  setShowIconOnly: noop,
-  instanceUID: '',
-  globalHeaderToolbarGrid: [],
-  globalHeaderBreadcrumbGrid: []
-};
-const GlobalHeaderContext = /*#__PURE__*/React.createContext(defaultContext);
-
-exports.GlobalHeaderContext = GlobalHeaderContext;

package/cjs/GlobalHeaderTypes.js

@@ -1,2 +0,0 @@
-'use strict';
-