@nulogy/components 8.2.2 → 8.4.0

package/dist/main.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('@babel/runtime/helpers/typeof'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/defineProperty'), require('object-assign'), require('@nulogy/icons'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inheritsLoose'), require('prop-types'), require('react-fast-compare'), require('warning'), require('@babel/runtime/helpers/slicedToArray'), require('@babel/runtime/helpers/objectWithoutPropertiesLoose'), require('deep-equal'), require('create-react-context'), require('react-resize-detector'), require('react-windowed-select'), require('react-dom'), require('exenv'), require('smoothscroll-polyfill'), require('classnames'), require('@babel/runtime/helpers/toConsumableArray'), require('react-input-autosize'), require('@babel/runtime/helpers/taggedTemplateLiteral')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', '@babel/runtime/helpers/typeof', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/defineProperty', 'object-assign', '@nulogy/icons', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inheritsLoose', 'prop-types', 'react-fast-compare', 'warning', '@babel/runtime/helpers/slicedToArray', '@babel/runtime/helpers/objectWithoutPropertiesLoose', 'deep-equal', 'create-react-context', 'react-resize-detector', 'react-windowed-select', 'react-dom', 'exenv', 'smoothscroll-polyfill', 'classnames', '@babel/runtime/helpers/toConsumableArray', 'react-input-autosize', '@babel/runtime/helpers/taggedTemplateLiteral'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.NDSComponents = {}, global.React, global.styled, global.typeof, global.classCallCheck, global.createClass, global.defineProperty, global.assign, global.icons, global.extends, global.assertThisInitialized, global.inheritsLoose, global.PropTypes, global.isEqual, global.warning, global.slicedToArray, global.objectWithoutPropertiesLoose, global.deepEqual, global.createReactContext, global.ReactResizeDetector, global.components, global.reactDom, global.exenv, global.smoothscroll, global.t, null, global.AutosizeInput));
-}(this, (function (exports, React, styled, _typeof$1, _classCallCheck$1, _createClass$1, _defineProperty$1, assign$1, icons, _extends$4, _assertThisInitialized$2, _inheritsLoose$2, PropTypes, isEqual$2, warning$1, _slicedToArray$1, _objectWithoutPropertiesLoose$2, deepEqual, createContext, ReactResizeDetector, WindowedSelect, reactDom, exenv, smoothscroll, t, toConsumableArray, AutosizeInput) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('@babel/runtime/helpers/typeof'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/defineProperty'), require('object-assign'), require('@nulogy/icons'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inheritsLoose'), require('prop-types'), require('react-fast-compare'), require('warning'), require('@babel/runtime/helpers/slicedToArray'), require('@babel/runtime/helpers/objectWithoutPropertiesLoose'), require('deep-equal'), require('create-react-context'), require('react-resize-detector'), require('react-windowed-select'), require('regenerator-runtime'), require('react-dom'), require('exenv'), require('smoothscroll-polyfill'), require('classnames'), require('@babel/runtime/helpers/toConsumableArray'), require('react-input-autosize'), require('@babel/runtime/helpers/taggedTemplateLiteral')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', '@babel/runtime/helpers/typeof', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/defineProperty', 'object-assign', '@nulogy/icons', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inheritsLoose', 'prop-types', 'react-fast-compare', 'warning', '@babel/runtime/helpers/slicedToArray', '@babel/runtime/helpers/objectWithoutPropertiesLoose', 'deep-equal', 'create-react-context', 'react-resize-detector', 'react-windowed-select', 'regenerator-runtime', 'react-dom', 'exenv', 'smoothscroll-polyfill', 'classnames', '@babel/runtime/helpers/toConsumableArray', 'react-input-autosize', '@babel/runtime/helpers/taggedTemplateLiteral'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.NDSComponents = {}, global.React, global.styled, global.typeof, global.classCallCheck, global.createClass, global.defineProperty, global.assign, global.icons, global.extends, global.assertThisInitialized, global.inheritsLoose, global.PropTypes, global.isEqual, global.warning, global.slicedToArray, global.objectWithoutPropertiesLoose, global.deepEqual, global.createReactContext, global.ReactResizeDetector, global.components, global.regeneratorRuntime, global.reactDom, global.exenv, global.smoothscroll, global.t, null, global.AutosizeInput));
+}(this, (function (exports, React, styled, _typeof$1, _classCallCheck$1, _createClass$1, _defineProperty$1, assign$1, icons, _extends$4, _assertThisInitialized$2, _inheritsLoose$2, PropTypes, isEqual$2, warning$1, _slicedToArray$1, _objectWithoutPropertiesLoose$2, deepEqual, createContext, ReactResizeDetector, WindowedSelect, regeneratorRuntime, reactDom, exenv, smoothscroll, t, toConsumableArray, AutosizeInput) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -47,6 +47,7 @@
   var createContext__default = /*#__PURE__*/_interopDefaultLegacy(createContext);
   var ReactResizeDetector__default = /*#__PURE__*/_interopDefaultLegacy(ReactResizeDetector);
   var WindowedSelect__default = /*#__PURE__*/_interopDefaultLegacy(WindowedSelect);
+  var regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(regeneratorRuntime);
   var reactDom__default = /*#__PURE__*/_interopDefaultLegacy(reactDom);
   var exenv__default = /*#__PURE__*/_interopDefaultLegacy(exenv);
   var smoothscroll__default = /*#__PURE__*/_interopDefaultLegacy(smoothscroll);
@@ -276,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";
@@ -309,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";
@@ -340,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";
@@ -11710,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.
@@ -11737,6 +11751,16 @@
                   t[p[i]] = s[p[i]];
           }
       return t;
+  }
+
+  function __awaiter(thisArg, _arguments, P, generator) {
+      function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+      return new (P || (P = Promise))(function (resolve, reject) {
+          function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+          function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+          function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+          step((generator = generator.apply(thisArg, _arguments || [])).next());
+      });
   }
 
   var prefix = "random-id-";
@@ -22982,6 +23006,8 @@
     }), /*#__PURE__*/React__default['default'].createElement(WindowedSelect.components.Option, Object.assign({}, props)));
   };
 
+  var regenerator = regeneratorRuntime__default['default'];
+
   var getBorderColor = function getBorderColor(_ref) {
     var errored = _ref.errored,
         disabled = _ref.disabled,
@@ -23195,6 +23221,20 @@
     };
   };
 
+  var extractValuesFromCsvString = function extractValuesFromCsvString(csv) {
+    var quoteRegEx = /(["'])(?:(?=(\\?))\2.)*?\1/gim;
+    var matchedValues = csv.match(quoteRegEx) || [];
+    var quotedValues = matchedValues.map(function (str) {
+      return str.replace(/(["',])/g, "");
+    });
+    var values = Array.from(new Set(csv.replace(quoteRegEx, "").split(",").map(function (value) {
+      return value.trim();
+    }).filter(function (str) {
+      return str.length > 0;
+    }).concat(quotedValues)));
+    return values;
+  };
+
   var SelectControl = function SelectControl(props) {
     // eslint-disable-next-line react/prop-types
     var isFocused = props.isFocused;
@@ -23267,61 +23307,7 @@
     components: undefined,
     closeMenuOnSelect: true
   };
-
-  var checkOptionsAreValid = function checkOptionsAreValid(options) {
-    if (options && process.env.NODE_ENV === "development") {
-      var uniq = function uniq(a) {
-        return Array.from(new Set(a));
-      };
-
-      var uniqueValues = uniq(options.map(function (_ref) {
-        var value = _ref.value;
-        return value === null ? "_null_" : value;
-      }));
-
-      if (uniqueValues.length < options.length) {
-        console.warn("NDS: The options prop passed to Select must have unique values for each option", options);
-      }
-    }
-  };
-
-  var getOption = function getOption(options, value) {
-    // allows an option with  a null value to be matched
-    if (options.length > 0 && value !== undefined) {
-      var optionWithMatchingValue = options.find(function (o) {
-        return o.value === value;
-      });
-      return optionWithMatchingValue || null;
-    }
-
-    return value;
-  };
-
-  var getReactSelectValue = function getReactSelectValue(options, input) {
-    if (Array.isArray(input)) {
-      return input.map(function (i) {
-        return getOption(options, i);
-      });
-    }
-
-    return getOption(options, input);
-  };
-
-  var extractValue = function extractValue(options, isMulti) {
-    if (isMulti) {
-      return options && options.length ? options.map(function (o) {
-        return o.value;
-      }) : [];
-    }
-
-    if (options == null) {
-      return options;
-    } else {
-      return options.value;
-    }
-  };
-
-  var ReactSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var ReactSelect = /*#__PURE__*/React__default['default'].forwardRef(function (_a, ref) {
     var autocomplete = _a.autocomplete,
         options = _a.options,
         labelText = _a.labelText,
@@ -23350,17 +23336,83 @@
     var _useTranslation = useTranslation(),
         t = _useTranslation.t;
 
-    var themeContext = React.useContext(styled.ThemeContext);
+    var themeContext = React__default['default'].useContext(styled.ThemeContext);
     var spaceProps = getSubset(props, propTypes.space);
-    React.useEffect(function () {
+    var reactSelectRef = React__default['default'].useRef(null);
+    React__default['default'].useEffect(function () {
       checkOptionsAreValid(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;
+        return regenerator.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                e.preventDefault();
+                currentRef = reactSelectRef.current;
+                currentValue = currentRef.state.value || [];
+                clipboardData = e.clipboardData.getData("text/plain") || "";
+                values = extractValuesFromCsvString(clipboardData);
+                notExistingOptions = [];
+                pastedOptions = values.map(function (pastedOption) {
+                  var existingOption = options.find(function (option) {
+                    return option.label === pastedOption || option.value === pastedOption;
+                  });
+
+                  if (existingOption) {
+                    return existingOption;
+                  }
+
+                  notExistingOptions.push(pastedOption);
+                  return null;
+                }).filter(Boolean).filter(function (pastedOption) {
+                  return (// ignoring already selected options
+                    currentValue.findIndex(function (option) {
+                      return pastedOption.value === option.value;
+                    }) === -1
+                  );
+                });
+                newValue = [].concat(currentValue, pastedOptions);
+                currentRef.setState(function (prevState) {
+                  return Object.assign(Object.assign({}, prevState), {
+                    value: newValue,
+                    inputValue: notExistingOptions.join(", ")
+                  });
+                });
+                handleChange(newValue);
+
+              case 10:
+              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]);
+
+    React__default['default'].useEffect(function () {
+      if (ref) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        ref.current = reactSelectRef.current;
+      }
+    }, [reactSelectRef, ref]);
     return /*#__PURE__*/React__default['default'].createElement(Field, Object.assign({}, spaceProps), /*#__PURE__*/React__default['default'].createElement(MaybeFieldLabel, {
       labelText: labelText,
       requirementText: requirementText,
       helpText: helpText
     }, /*#__PURE__*/React__default['default'].createElement(WindowedSelect__default['default'], Object.assign({
-      ref: ref,
+      ref: reactSelectRef,
       placeholder: placeholder || t("select ..."),
       windowThreshold: windowThreshold,
       styles: customStyles({
@@ -23375,9 +23427,7 @@
       "aria-invalid": error,
       defaultMenuIsOpen: initialIsOpen,
       inputId: id,
-      onChange: onChange && function (option) {
-        return onChange(extractValue(option, multiselect));
-      },
+      onChange: handleChange,
       defaultValue: getReactSelectValue(options, defaultValue),
       value: getReactSelectValue(options, value),
       isMulti: multiselect,
@@ -23390,7 +23440,7 @@
         DropdownIndicator: SelectDropdownIndicator,
         SelectContainer: SelectContainer$1,
         Menu: SelectMenu,
-        Input: SelectInput
+        Input: _SelectInput
       }, components),
       "aria-label": ariaLabel,
       options: options,
@@ -23401,6 +23451,60 @@
       errorList: errorList
     })));
   });
+
+  var checkOptionsAreValid = function checkOptionsAreValid(options) {
+    if (options && process.env.NODE_ENV === "development") {
+      var uniq = function uniq(a) {
+        return Array.from(new Set(a));
+      };
+
+      var uniqueValues = uniq(options.map(function (_ref) {
+        var value = _ref.value;
+        return value === null ? "_null_" : value;
+      }));
+
+      if (uniqueValues.length < options.length) {
+        console.warn("NDS: The options prop passed to Select must have unique values for each option", options);
+      }
+    }
+  };
+
+  var getOption = function getOption(options, value) {
+    // allows an option with  a null value to be matched
+    if (options.length > 0 && value !== undefined) {
+      var optionWithMatchingValue = options.find(function (o) {
+        return o.value === value;
+      });
+      return optionWithMatchingValue || null;
+    }
+
+    return value;
+  };
+
+  var getReactSelectValue = function getReactSelectValue(options, input) {
+    if (Array.isArray(input)) {
+      return input.map(function (i) {
+        return getOption(options, i);
+      });
+    }
+
+    return getOption(options, input);
+  };
+
+  var extractValue = function extractValue(options, isMulti) {
+    if (isMulti) {
+      return options && options.length ? options.map(function (o) {
+        return o.value;
+      }) : [];
+    }
+
+    if (options == null) {
+      return options;
+    } else {
+      return options.value;
+    }
+  };
+
   ReactSelect.defaultProps = Object.assign(Object.assign({}, SelectDefaultProps), {
     windowThreshold: 300,
     filterOption: undefined
@@ -42302,7 +42406,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
       }
@@ -42311,14 +42418,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"
       })));
@@ -42330,18 +42433,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")));
@@ -50647,30 +50746,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() {
@@ -51007,6 +51203,7 @@
   exports.Flex = Flex;
   exports.Form = Form;
   exports.FormSection = FormSection;
+  exports.Header = Header;
   exports.Heading1 = Heading1;
   exports.Heading2 = Heading2;
   exports.Heading3 = Heading3;