@nulogy/components 8.3.0 → 8.4.1

package/dist/main.js

@@ -277,7 +277,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Mon, 06 Jun 2022 21:26:05 GMT
+   * Generated on Thu, 01 Dec 2022 21:44:24 GMT
    */
 
   const color_base_black = "#011e38";
@@ -310,7 +310,7 @@
   const line_height_small_text_base = "1.71428571";
   const line_height_small_text_compressed = "1.14285714";
   const line_height_smaller_text = "1.33333333";
-  const line_height_heading_1 = "1.05";
+  const line_height_heading_1 = "1.25";
   const line_height_heading_2 = "1.33";
   const line_height_heading_3 = "1.33";
   const line_height_heading_4 = "1.33";
@@ -341,8 +341,8 @@
   const size_font_medium = "16px";
   const size_font_large = "24px";
   const size_font_larger = "30px";
-  const size_font_largest = "38px";
-  const size_font_heading_1 = "38px";
+  const size_font_largest = "32px";
+  const size_font_heading_1 = "32px";
   const size_font_heading_2 = "30px";
   const size_font_heading_3 = "24px";
   const size_font_heading_4 = "18px";
@@ -11711,7 +11711,20 @@
     componentId: "sc-1whlq91-0"
   })({
     display: "flex"
-  }, flexbox);
+  }, system({
+    gap: {
+      property: "gap",
+      scale: "space"
+    },
+    rowGap: {
+      property: "rowGap",
+      scale: "space"
+    },
+    columnGap: {
+      property: "columnGap",
+      scale: "space"
+    }
+  }), flexbox);
 
   /*! *****************************************************************************
   Copyright (c) Microsoft Corporation.
@@ -23326,20 +23339,23 @@
     var themeContext = React__default['default'].useContext(styled.ThemeContext);
     var spaceProps = getSubset(props, propTypes.space);
     var reactSelectRef = React__default['default'].useRef(null);
+    var optionsRef = React__default['default'].useRef(options);
     React__default['default'].useEffect(function () {
       checkOptionsAreValid(options);
+      optionsRef.current = options;
     }, [options]);
     var handleChange = React__default['default'].useCallback(function (option) {
       onChange && onChange(extractValue(option, multiselect));
     }, [multiselect, onChange]);
     var handlePaste = React__default['default'].useCallback(function (e) {
       return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
-        var currentRef, currentValue, clipboardData, values, notExistingOptions, pastedOptions, newValue;
+        var options, currentRef, currentValue, clipboardData, values, notExistingOptions, pastedOptions, newValue;
         return regenerator.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
                 e.preventDefault();
+                options = optionsRef.current;
                 currentRef = reactSelectRef.current;
                 currentValue = currentRef.state.value || [];
                 clipboardData = e.clipboardData.getData("text/plain") || "";
@@ -23372,20 +23388,20 @@
                 });
                 handleChange(newValue);
 
-              case 10:
+              case 11:
               case "end":
                 return _context.stop();
             }
           }
         }, _callee);
       }));
-    }, [options]);
+    }, []);
 
     var _SelectInput = React__default['default'].useCallback(function (inputProps) {
       return /*#__PURE__*/React__default['default'].createElement(SelectInput, Object.assign({}, inputProps, multiselect ? {
         onPaste: handlePaste
       } : {}));
-    }, [handlePaste, multiselect]);
+    }, [multiselect]);
 
     React__default['default'].useEffect(function () {
       if (ref) {
@@ -42393,7 +42409,10 @@
       listStyle: "none",
       display: "inline-flex",
       alignSelf: "center",
-      color: theme.colors.darkGrey,
+      color: theme.colors.midGrey,
+      "a, p": {
+        fontSize: theme.fontSizes.small
+      },
       "a:visited": {
         color: theme.colors.darkBlue
       }
@@ -42402,14 +42421,10 @@
 
   var insertSeparators = function insertSeparators(items, className) {
     return items.reduce(function (acc, current, index) {
-      return acc.concat(current,
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-array-index-key
-      React__default['default'].createElement(BreadcrumbsListItem, {
+      return acc.concat(current, /*#__PURE__*/React__default['default'].createElement(BreadcrumbsListItem, {
         "aria-hidden": true,
         key: "separator-" + index,
-        className: className,
-        px: "x1"
+        className: className
       }, /*#__PURE__*/React__default['default'].createElement(Icon, {
         icon: "rightArrow"
       })));
@@ -42421,18 +42436,14 @@
         as = _a.as,
         props = __rest(_a, ["children", "as"]);
 
-    var childrenArr = Array.isArray(children) ? children : [children];
-    var allItems = [].concat(childrenArr).map(function (child, index) {
-      return (
-        /*#__PURE__*/
-        // eslint-disable-next-line react/no-array-index-key
-        React__default['default'].createElement(BreadcrumbsListItem, {
-          key: "child-" + index
-        }, /*#__PURE__*/React__default['default'].cloneElement(child, {
-          color: "darkBlue"
-        }))
-      );
-    });
+    var allItems = React__default['default'].Children.map(children, function (child, index) {
+      if (! /*#__PURE__*/React.isValidElement(child)) return null;
+      return /*#__PURE__*/React__default['default'].createElement(BreadcrumbsListItem, {
+        key: "child-" + index
+      }, /*#__PURE__*/React__default['default'].cloneElement(child, {
+        color: "darkBlue"
+      }));
+    }).filter(Boolean);
     return /*#__PURE__*/React__default['default'].createElement(Flex, Object.assign({
       as: as
     }, props), /*#__PURE__*/React__default['default'].createElement(BreadcrumbsList, null, insertSeparators(allItems, "seperator")));
@@ -50738,30 +50749,127 @@
     }, children));
   };
 
+  var useMediaQuery = function useMediaQuery(query) {
+    var _useState = React.useState(window.matchMedia(query).matches),
+        matches = _useState[0],
+        setMatches = _useState[1];
+
+    React.useEffect(function () {
+      var handler = function handler(e) {
+        setMatches(e.matches);
+      };
+
+      window.matchMedia(query).addEventListener("change", handler);
+      return function () {
+        window.removeEventListener("change", handler);
+      };
+    }, []);
+    return matches;
+  };
+
+  var Header = function Header(_a) {
+    var _b, _c;
+
+    var _a$background = _a.background,
+        background = _a$background === void 0 ? "whiteGrey" : _a$background,
+        renderBreadcrumbs = _a.renderBreadcrumbs,
+        title = _a.title,
+        _a$undecorated = _a.undecorated,
+        undecorated = _a$undecorated === void 0 ? false : _a$undecorated,
+        children = _a.children,
+        subtitle = _a.subtitle,
+        breakpoints = _a.breakpoints,
+        renderActions = _a.renderActions,
+        renderSummary = _a.renderSummary,
+        rest = __rest(_a, ["background", "renderBreadcrumbs", "title", "undecorated", "children", "subtitle", "breakpoints", "renderActions", "renderSummary"]);
+
+    var theme = styled.useTheme();
+    var smallBreakpoint = pixelDigitsFrom$1((_b = breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.small) !== null && _b !== void 0 ? _b : theme.breakpoints.small);
+    var mediumBreakpoint = pixelDigitsFrom$1((_c = breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.medium) !== null && _c !== void 0 ? _c : theme.breakpoints.medium);
+    var m = useMediaQuery("(max-width: " + mediumBreakpoint + "px)");
+    var sm = useMediaQuery("(max-width: " + smallBreakpoint + "px)");
+    return /*#__PURE__*/React__default['default'].createElement(Flex, Object.assign({
+      py: "x1",
+      px: "x3",
+      gap: "x2",
+      position: "relative",
+      bg: background
+    }, rest), /*#__PURE__*/React__default['default'].createElement(Flex, {
+      flexGrow: 3,
+      justifyContent: "space-between",
+      flexDirection: m || sm ? "column" : "row",
+      zIndex: "content"
+    }, /*#__PURE__*/React__default['default'].createElement(Flex, {
+      flexDirection: "column"
+    }, renderBreadcrumbs && renderBreadcrumbs(), /*#__PURE__*/React__default['default'].createElement(Flex, {
+      gap: !sm ? "x2" : undefined,
+      flexDirection: !sm ? "row" : "column",
+      alignItems: !sm ? "center" : undefined
+    }, /*#__PURE__*/React__default['default'].createElement(Flex, {
+      alignItems: !sm ? "flex-end" : undefined,
+      gap: !sm ? "x2" : undefined,
+      flexDirection: !sm ? "row" : "column"
+    }, title && /*#__PURE__*/React__default['default'].createElement(Heading1, {
+      mb: "0"
+    }, title), subtitle && /*#__PURE__*/React__default['default'].createElement(Text, {
+      pl: !sm ? "x2" : undefined,
+      borderLeft: !sm ? "1px solid" : "none",
+      my: "half",
+      borderColor: "grey"
+    }, subtitle)), children && children)), renderSummary && renderSummary()), renderActions && /*#__PURE__*/React__default['default'].createElement(Flex, {
+      display: "flex",
+      flexGrow: 0,
+      alignItems: "flex-start",
+      zIndex: "content"
+    }, renderActions()), !undecorated && /*#__PURE__*/React__default['default'].createElement(BackgroundTriangles, {
+      zIndex: 1
+    }));
+  };
+
+  var RightAngleTriangle = styled__default['default'](Box).withConfig({
+    displayName: "Header__RightAngleTriangle",
+    componentId: "sc-1kuwqm0-0"
+  })(["position:absolute;bottom:0;right:0;width:100%;clip-path:polygon(100% 0,0 100%,100% 100%);"]);
+
+  var BackgroundTriangles = function BackgroundTriangles(props) {
+    var theme = styled.useTheme();
+    return /*#__PURE__*/React__default['default'].createElement(Box, Object.assign({
+      position: "absolute",
+      bottom: 0,
+      right: 0,
+      height: "100%",
+      minWidth: "55%"
+    }, props), /*#__PURE__*/React__default['default'].createElement(RightAngleTriangle, {
+      height: "33.33%",
+      opacity: "0.5",
+      background: "linear-gradient(178.25deg, rgba(192, 200, 209, 0.5) 62.98%, rgba(225, 235, 250, 0.25) 98.52%)"
+    }), /*#__PURE__*/React__default['default'].createElement(RightAngleTriangle, {
+      height: "17%",
+      opacity: "0.25",
+      background: "linear-gradient(196.88deg, " + theme.colors.grey + " 11.92%, rgba(0, 67, 143, 0) 88.36%)"
+    }));
+  };
+
   var Page = function Page(_a) {
     var breadcrumbs = _a.breadcrumbs,
         title = _a.title,
         children = _a.children,
         headerContent = _a.headerContent,
         fullHeight = _a.fullHeight,
-        props = __rest(_a, ["breadcrumbs", "title", "children", "headerContent", "fullHeight"]);
+        renderHeader = _a.renderHeader,
+        rest = __rest(_a, ["breadcrumbs", "title", "children", "headerContent", "fullHeight", "renderHeader"]);
 
     return /*#__PURE__*/React__default['default'].createElement(Flex, Object.assign({
       flexDirection: "column",
-      py: "x3",
-      px: "x3",
       flexGrow: fullHeight ? 1 : 0
-    }, props), breadcrumbs, /*#__PURE__*/React__default['default'].createElement(Flex, {
-      alignItems: "center"
-    }, title && /*#__PURE__*/React__default['default'].createElement(Heading1, {
-      mb: "x6",
-      mt: "x2"
-    }, title), headerContent && /*#__PURE__*/React__default['default'].createElement(Box, {
-      mb: "x6",
-      mt: "x2",
-      flexGrow: 1,
-      ml: "x1"
-    }, headerContent)), children);
+    }, rest), renderHeader ? renderHeader() : (breadcrumbs || title || headerContent) && /*#__PURE__*/React__default['default'].createElement(Header, {
+      renderBreadcrumbs: function renderBreadcrumbs() {
+        return breadcrumbs;
+      },
+      title: title
+    }, headerContent), /*#__PURE__*/React__default['default'].createElement(Box, {
+      p: "x3"
+    }, children));
   };
 
   var focusFirstElement = function focusFirstElement() {
@@ -51098,6 +51206,7 @@
   exports.Flex = Flex;
   exports.Form = Form;
   exports.FormSection = FormSection;
+  exports.Header = Header;
   exports.Heading1 = Heading1;
   exports.Heading2 = Heading2;
   exports.Heading3 = Heading3;

package/dist/main.module.js

@@ -251,7 +251,7 @@ function I18nextProvider(_ref) {
 
 /**
  * Do not edit directly
- * Generated on Mon, 06 Jun 2022 21:26:05 GMT
+ * Generated on Thu, 01 Dec 2022 21:44:24 GMT
  */
 
 const color_base_black = "#011e38";
@@ -284,7 +284,7 @@ const line_height_base = "1.5";
 const line_height_small_text_base = "1.71428571";
 const line_height_small_text_compressed = "1.14285714";
 const line_height_smaller_text = "1.33333333";
-const line_height_heading_1 = "1.05";
+const line_height_heading_1 = "1.25";
 const line_height_heading_2 = "1.33";
 const line_height_heading_3 = "1.33";
 const line_height_heading_4 = "1.33";
@@ -315,8 +315,8 @@ const size_font_small = "14px";
 const size_font_medium = "16px";
 const size_font_large = "24px";
 const size_font_larger = "30px";
-const size_font_largest = "38px";
-const size_font_heading_1 = "38px";
+const size_font_largest = "32px";
+const size_font_heading_1 = "32px";
 const size_font_heading_2 = "30px";
 const size_font_heading_3 = "24px";
 const size_font_heading_4 = "18px";
@@ -11685,7 +11685,20 @@ var Flex = styled(Box).withConfig({
   componentId: "sc-1whlq91-0"
 })({
   display: "flex"
-}, flexbox);
+}, system({
+  gap: {
+    property: "gap",
+    scale: "space"
+  },
+  rowGap: {
+    property: "rowGap",
+    scale: "space"
+  },
+  columnGap: {
+    property: "columnGap",
+    scale: "space"
+  }
+}), flexbox);
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -23300,20 +23313,23 @@ var ReactSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
   var themeContext = React__default.useContext(ThemeContext$1);
   var spaceProps = getSubset(props, propTypes.space);
   var reactSelectRef = React__default.useRef(null);
+  var optionsRef = React__default.useRef(options);
   React__default.useEffect(function () {
     checkOptionsAreValid(options);
+    optionsRef.current = options;
   }, [options]);
   var handleChange = React__default.useCallback(function (option) {
     onChange && onChange(extractValue(option, multiselect));
   }, [multiselect, onChange]);
   var handlePaste = React__default.useCallback(function (e) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
-      var currentRef, currentValue, clipboardData, values, notExistingOptions, pastedOptions, newValue;
+      var options, currentRef, currentValue, clipboardData, values, notExistingOptions, pastedOptions, newValue;
       return regenerator.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               e.preventDefault();
+              options = optionsRef.current;
               currentRef = reactSelectRef.current;
               currentValue = currentRef.state.value || [];
               clipboardData = e.clipboardData.getData("text/plain") || "";
@@ -23346,20 +23362,20 @@ var ReactSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
               });
               handleChange(newValue);
 
-            case 10:
+            case 11:
             case "end":
               return _context.stop();
           }
         }
       }, _callee);
     }));
-  }, [options]);
+  }, []);
 
   var _SelectInput = React__default.useCallback(function (inputProps) {
     return /*#__PURE__*/React__default.createElement(SelectInput, Object.assign({}, inputProps, multiselect ? {
       onPaste: handlePaste
     } : {}));
-  }, [handlePaste, multiselect]);
+  }, [multiselect]);
 
   React__default.useEffect(function () {
     if (ref) {
@@ -42367,7 +42383,10 @@ var BreadcrumbsListItem = styled.li.withConfig({
     listStyle: "none",
     display: "inline-flex",
     alignSelf: "center",
-    color: theme.colors.darkGrey,
+    color: theme.colors.midGrey,
+    "a, p": {
+      fontSize: theme.fontSizes.small
+    },
     "a:visited": {
       color: theme.colors.darkBlue
     }
@@ -42376,14 +42395,10 @@ var BreadcrumbsListItem = styled.li.withConfig({
 
 var insertSeparators = function insertSeparators(items, className) {
   return items.reduce(function (acc, current, index) {
-    return acc.concat(current,
-    /*#__PURE__*/
-    // eslint-disable-next-line react/no-array-index-key
-    React__default.createElement(BreadcrumbsListItem, {
+    return acc.concat(current, /*#__PURE__*/React__default.createElement(BreadcrumbsListItem, {
       "aria-hidden": true,
       key: "separator-" + index,
-      className: className,
-      px: "x1"
+      className: className
     }, /*#__PURE__*/React__default.createElement(Icon, {
       icon: "rightArrow"
     })));
@@ -42395,18 +42410,14 @@ var Breadcrumbs = function Breadcrumbs(_a) {
       as = _a.as,
       props = __rest(_a, ["children", "as"]);
 
-  var childrenArr = Array.isArray(children) ? children : [children];
-  var allItems = [].concat(childrenArr).map(function (child, index) {
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-array-index-key
-      React__default.createElement(BreadcrumbsListItem, {
-        key: "child-" + index
-      }, /*#__PURE__*/React__default.cloneElement(child, {
-        color: "darkBlue"
-      }))
-    );
-  });
+  var allItems = React__default.Children.map(children, function (child, index) {
+    if (! /*#__PURE__*/isValidElement(child)) return null;
+    return /*#__PURE__*/React__default.createElement(BreadcrumbsListItem, {
+      key: "child-" + index
+    }, /*#__PURE__*/React__default.cloneElement(child, {
+      color: "darkBlue"
+    }));
+  }).filter(Boolean);
   return /*#__PURE__*/React__default.createElement(Flex, Object.assign({
     as: as
   }, props), /*#__PURE__*/React__default.createElement(BreadcrumbsList, null, insertSeparators(allItems, "seperator")));
@@ -50712,30 +50723,127 @@ var ApplicationFrame = function ApplicationFrame(_a) {
   }, children));
 };
 
+var useMediaQuery = function useMediaQuery(query) {
+  var _useState = useState(window.matchMedia(query).matches),
+      matches = _useState[0],
+      setMatches = _useState[1];
+
+  useEffect(function () {
+    var handler = function handler(e) {
+      setMatches(e.matches);
+    };
+
+    window.matchMedia(query).addEventListener("change", handler);
+    return function () {
+      window.removeEventListener("change", handler);
+    };
+  }, []);
+  return matches;
+};
+
+var Header = function Header(_a) {
+  var _b, _c;
+
+  var _a$background = _a.background,
+      background = _a$background === void 0 ? "whiteGrey" : _a$background,
+      renderBreadcrumbs = _a.renderBreadcrumbs,
+      title = _a.title,
+      _a$undecorated = _a.undecorated,
+      undecorated = _a$undecorated === void 0 ? false : _a$undecorated,
+      children = _a.children,
+      subtitle = _a.subtitle,
+      breakpoints = _a.breakpoints,
+      renderActions = _a.renderActions,
+      renderSummary = _a.renderSummary,
+      rest = __rest(_a, ["background", "renderBreadcrumbs", "title", "undecorated", "children", "subtitle", "breakpoints", "renderActions", "renderSummary"]);
+
+  var theme = useTheme();
+  var smallBreakpoint = pixelDigitsFrom$1((_b = breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.small) !== null && _b !== void 0 ? _b : theme.breakpoints.small);
+  var mediumBreakpoint = pixelDigitsFrom$1((_c = breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.medium) !== null && _c !== void 0 ? _c : theme.breakpoints.medium);
+  var m = useMediaQuery("(max-width: " + mediumBreakpoint + "px)");
+  var sm = useMediaQuery("(max-width: " + smallBreakpoint + "px)");
+  return /*#__PURE__*/React__default.createElement(Flex, Object.assign({
+    py: "x1",
+    px: "x3",
+    gap: "x2",
+    position: "relative",
+    bg: background
+  }, rest), /*#__PURE__*/React__default.createElement(Flex, {
+    flexGrow: 3,
+    justifyContent: "space-between",
+    flexDirection: m || sm ? "column" : "row",
+    zIndex: "content"
+  }, /*#__PURE__*/React__default.createElement(Flex, {
+    flexDirection: "column"
+  }, renderBreadcrumbs && renderBreadcrumbs(), /*#__PURE__*/React__default.createElement(Flex, {
+    gap: !sm ? "x2" : undefined,
+    flexDirection: !sm ? "row" : "column",
+    alignItems: !sm ? "center" : undefined
+  }, /*#__PURE__*/React__default.createElement(Flex, {
+    alignItems: !sm ? "flex-end" : undefined,
+    gap: !sm ? "x2" : undefined,
+    flexDirection: !sm ? "row" : "column"
+  }, title && /*#__PURE__*/React__default.createElement(Heading1, {
+    mb: "0"
+  }, title), subtitle && /*#__PURE__*/React__default.createElement(Text, {
+    pl: !sm ? "x2" : undefined,
+    borderLeft: !sm ? "1px solid" : "none",
+    my: "half",
+    borderColor: "grey"
+  }, subtitle)), children && children)), renderSummary && renderSummary()), renderActions && /*#__PURE__*/React__default.createElement(Flex, {
+    display: "flex",
+    flexGrow: 0,
+    alignItems: "flex-start",
+    zIndex: "content"
+  }, renderActions()), !undecorated && /*#__PURE__*/React__default.createElement(BackgroundTriangles, {
+    zIndex: 1
+  }));
+};
+
+var RightAngleTriangle = styled(Box).withConfig({
+  displayName: "Header__RightAngleTriangle",
+  componentId: "sc-1kuwqm0-0"
+})(["position:absolute;bottom:0;right:0;width:100%;clip-path:polygon(100% 0,0 100%,100% 100%);"]);
+
+var BackgroundTriangles = function BackgroundTriangles(props) {
+  var theme = useTheme();
+  return /*#__PURE__*/React__default.createElement(Box, Object.assign({
+    position: "absolute",
+    bottom: 0,
+    right: 0,
+    height: "100%",
+    minWidth: "55%"
+  }, props), /*#__PURE__*/React__default.createElement(RightAngleTriangle, {
+    height: "33.33%",
+    opacity: "0.5",
+    background: "linear-gradient(178.25deg, rgba(192, 200, 209, 0.5) 62.98%, rgba(225, 235, 250, 0.25) 98.52%)"
+  }), /*#__PURE__*/React__default.createElement(RightAngleTriangle, {
+    height: "17%",
+    opacity: "0.25",
+    background: "linear-gradient(196.88deg, " + theme.colors.grey + " 11.92%, rgba(0, 67, 143, 0) 88.36%)"
+  }));
+};
+
 var Page = function Page(_a) {
   var breadcrumbs = _a.breadcrumbs,
       title = _a.title,
       children = _a.children,
       headerContent = _a.headerContent,
       fullHeight = _a.fullHeight,
-      props = __rest(_a, ["breadcrumbs", "title", "children", "headerContent", "fullHeight"]);
+      renderHeader = _a.renderHeader,
+      rest = __rest(_a, ["breadcrumbs", "title", "children", "headerContent", "fullHeight", "renderHeader"]);
 
   return /*#__PURE__*/React__default.createElement(Flex, Object.assign({
     flexDirection: "column",
-    py: "x3",
-    px: "x3",
     flexGrow: fullHeight ? 1 : 0
-  }, props), breadcrumbs, /*#__PURE__*/React__default.createElement(Flex, {
-    alignItems: "center"
-  }, title && /*#__PURE__*/React__default.createElement(Heading1, {
-    mb: "x6",
-    mt: "x2"
-  }, title), headerContent && /*#__PURE__*/React__default.createElement(Box, {
-    mb: "x6",
-    mt: "x2",
-    flexGrow: 1,
-    ml: "x1"
-  }, headerContent)), children);
+  }, rest), renderHeader ? renderHeader() : (breadcrumbs || title || headerContent) && /*#__PURE__*/React__default.createElement(Header, {
+    renderBreadcrumbs: function renderBreadcrumbs() {
+      return breadcrumbs;
+    },
+    title: title
+  }, headerContent), /*#__PURE__*/React__default.createElement(Box, {
+    p: "x3"
+  }, children));
 };
 
 var focusFirstElement = function focusFirstElement() {
@@ -51038,4 +51146,4 @@ var SortingTable = function SortingTable(_a) {
   }, props));
 };
 
-export { ALL_NDS_LOCALES, Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Box, BrandLogoContainer, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DesktopMenu, Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input$1 as Input, Link, List, ListItem, LoadingAnimation, MenuTrigger, Modal, NDSProvider, NavBar$1 as NavBar, NavBarBackground, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer$1 as SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, SmallNavBar, SortingTable, StatusIndicator, Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToggleComponent as Toggle, Tooltip, TruncatedText, addStyledProps, Theme as theme, useWindowDimensions };
+export { ALL_NDS_LOCALES, Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Box, BrandLogoContainer, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DesktopMenu, Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Header, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input$1 as Input, Link, List, ListItem, LoadingAnimation, MenuTrigger, Modal, NDSProvider, NavBar$1 as NavBar, NavBarBackground, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer$1 as SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, SmallNavBar, SortingTable, StatusIndicator, Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToggleComponent as Toggle, Tooltip, TruncatedText, addStyledProps, Theme as theme, useWindowDimensions };

package/dist/src/BrandedNavBar/NavBarBackground.d.ts

@@ -4,5 +4,5 @@ import { StyledProps } from "../StyledProps";
 export declare type NavBarBackgroundProps = {
     theme?: DefaultNDSThemeType;
 } & StyledProps;
-declare const NavBarBackground: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Box/Box").BoxProps>, import("styled-components").DefaultTheme, {}, never>;
+declare const NavBarBackground: import("styled-components").StyledComponent<import("react").FC<import("../Flex/Flex").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
 export default NavBarBackground;

package/dist/src/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,13 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { FlexProps } from "../Flex/Flex";
-declare type BreadcrumbsProps = FlexProps & {
-    children: any;
-    as?: string | undefined;
-};
-declare const Breadcrumbs: {
-    ({ children, as, ...props }: BreadcrumbsProps): JSX.Element;
-    defaultProps: {
-        as: string;
-    };
-};
+declare const Breadcrumbs: React.FC<FlexProps>;
 export default Breadcrumbs;

package/dist/src/Flex/Flex.d.ts

@@ -1,5 +1,9 @@
-/// <reference types="react" />
+import React, { CSSProperties } from "react";
 import { BoxProps } from "../Box/Box";
-export declare type FlexProps = BoxProps;
-declare const Flex: React.FunctionComponent<FlexProps>;
+export declare type FlexProps = BoxProps & {
+    gap?: CSSProperties["gap"];
+    rowGap?: CSSProperties["rowGap"];
+    columnGap?: CSSProperties["columnGap"];
+};
+declare const Flex: React.FC<FlexProps>;
 export default Flex;

package/dist/src/Layout/Header.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { BoxProps } from "../Box/Box";
+declare type Breakpoint = string | number;
+declare type HeaderProps = BoxProps & {
+    renderBreadcrumbs?: () => React.ReactNode;
+    title?: string;
+    subtitle?: string;
+    undecorated?: boolean;
+    renderActions?: () => React.ReactNode;
+    renderSummary?: () => React.ReactNode;
+    breakpoints?: {
+        small?: Breakpoint;
+        medium?: Breakpoint;
+    };
+};
+declare const Header: React.FC<HeaderProps>;
+export default Header;

package/dist/src/Layout/Header.story.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare const DefaultBackground: () => JSX.Element;
+export declare const WithAnUndecoratedBackground: () => JSX.Element;
+export declare const WithActions: () => JSX.Element;
+export declare const WithCustomBackground: () => JSX.Element;
+export declare const WithSubTitle: () => JSX.Element;
+export declare const WithContent: () => JSX.Element;
+export declare const WithSummary: () => JSX.Element;
+export declare const WithEverything: () => JSX.Element;
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;

package/dist/src/Layout/Page.d.ts

@@ -6,6 +6,7 @@ declare type PageProps = FlexProps & {
     children?: React.ReactNode;
     headerContent?: React.ReactNode;
     fullHeight?: boolean;
+    renderHeader?: () => JSX.Element;
 };
-export declare const Page: ({ breadcrumbs, title, children, headerContent, fullHeight, ...props }: PageProps) => JSX.Element;
+export declare const Page: React.FC<PageProps>;
 export default Page;

package/dist/src/Layout/Page.story.d.ts

@@ -9,4 +9,5 @@ export default _default;
 export declare const _Page: () => JSX.Element;
 export declare const NoPageTitle: () => JSX.Element;
 export declare const NoBreadcrumbs: () => JSX.Element;
+export declare const NoBackground: () => JSX.Element;
 export declare const WithFullHeight: () => JSX.Element;

package/dist/src/Layout/index.d.ts

@@ -1,3 +1,4 @@
 export { default as ApplicationFrame } from "./ApplicationFrame";
 export { default as Page } from "./Page";
 export { default as Sidebar } from "./Sidebar";
+export { default as Header } from "./Header";

package/dist/src/NavBar/NavBar.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { DefaultNDSThemeType } from "../theme.type";
 export declare const getThemeColor: (themeColor: any) => any;
-export declare const NavBarBackground: import("styled-components").StyledComponent<React.FunctionComponent<import("../Box/Box").BoxProps>, import("styled-components").DefaultTheme, {
+export declare const NavBarBackground: import("styled-components").StyledComponent<React.FC<import("../Flex/Flex").FlexProps>, import("styled-components").DefaultTheme, {
     backgroundColor: string;
     theme?: DefaultNDSThemeType;
 }, never>;

package/dist/src/Select/Select.story.d.ts

@@ -109,3 +109,4 @@ export declare const UsingRefToControlFocus: {
 };
 export declare const WithCustomProps: () => JSX.Element;
 export declare const PasteCsvValueInSelect: (props: any) => JSX.Element;
+export declare const AddNewOptionOnInputChange: (props: any) => JSX.Element;

package/dist/src/StatusIndicator/StatusIndicator.d.ts

@@ -1,3 +1,8 @@
-/// <reference types="react" />
-declare const StatusIndicator: React.FC<any>;
+import React from "react";
+import { SpaceProps, TypographyProps, FlexboxProps } from "styled-system";
+declare type StatusIndicatorType = "neutral" | "dark" | "danger" | "informative" | "success" | "warning" | "quiet";
+declare type StatusIndicatorProps = SpaceProps & TypographyProps & FlexboxProps & {
+    type?: StatusIndicatorType;
+};
+declare const StatusIndicator: React.FC<StatusIndicatorProps>;
 export default StatusIndicator;

package/dist/src/Summary/Summary.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare type SummaryProps = {
+    breakpoint?: number | string;
+};
+declare const Summary: React.FC<SummaryProps>;
+export default Summary;

package/dist/src/Summary/Summary.story.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare function Default(): JSX.Element;
+export declare function WithMainInfoOnly(): JSX.Element;
+declare const _default: {
+    title: string;
+    parameters: {
+        backgrounds: {
+            default: string;
+            values: {
+                name: string;
+                value: string;
+            }[];
+        };
+    };
+};
+export default _default;

package/dist/src/Summary/SummaryContext.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare type SummaryContextValue = {
+    breakpoint: number;
+};
+export declare function useSummaryContext(): SummaryContextValue;
+export declare const SummaryContextProvider: React.FC<SummaryContextValue>;
+export {};

package/dist/src/Summary/SummaryDivider.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const SummaryDivider: (props: any) => JSX.Element;
+export default SummaryDivider;

package/dist/src/Summary/SummaryItem.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare type SummaryItemProps = {
+    value: number | string;
+    status: React.ReactNode;
+};
+declare const SummaryItem: React.FC<SummaryItemProps>;
+export default SummaryItem;

package/dist/src/Summary/index.d.ts

@@ -0,0 +1 @@
+export { default as Summary } from "./Summary";

package/dist/src/hooks/useMediaQuery.d.ts

@@ -0,0 +1,2 @@
+declare const useMediaQuery: (query: string) => boolean;
+export default useMediaQuery;

package/dist/src/index.d.ts

@@ -46,7 +46,7 @@ export { Toast } from "./Toast";
 export { BrandedNavBar, MenuTrigger, EnvironmentBanner, NavBarBackground, BrandLogoContainer, DesktopMenu, SmallNavBar, } from "./BrandedNavBar";
 export type { MenuTriggerProps, EnvironmentBannerProps, NavBarBackgroundProps, BrandLogoContainerProps, DesktopMenuProps, SmallNavBarProps, RenderMenuButtonProps, } from "./BrandedNavBar";
 export { AsyncSelect } from "./AsyncSelect";
-export { ApplicationFrame, Page, Sidebar } from "./Layout";
+export { ApplicationFrame, Page, Sidebar, Header } from "./Layout";
 export { useWindowDimensions } from "./utils";
 export { Divider } from "./Divider";
 export { SortingTable } from "./SortingTable";

package/dist/src/utils/story/simulatedAPIRequest.d.ts

@@ -0,0 +1,5 @@
+declare const simulatedAPIRequest: (inputValue: string, data: {
+    value: string;
+    label: string;
+}[], milliseconds?: number) => Promise<Response>;
+export default simulatedAPIRequest;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "8.3.0",
+  "version": "8.4.1",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
@@ -138,7 +138,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.9.6",
-    "@nulogy/tokens": "^5.3.0",
+    "@nulogy/tokens": "^5.4.0",
     "@styled-system/prop-types": "^5.1.4",
     "@styled-system/theme-get": "^5.1.2",
     "body-scroll-lock": "^3.1.5",