@nulogy/components 8.2.2 → 8.4.0

package/dist/main.module.js

@@ -19,6 +19,7 @@ import deepEqual from 'deep-equal';
 import createContext$1 from 'create-react-context';
 import ReactResizeDetector from 'react-resize-detector';
 import WindowedSelect, { components as components$1 } from 'react-windowed-select';
+import regeneratorRuntime from 'regenerator-runtime';
 import reactDom, { findDOMNode, createPortal } from 'react-dom';
 import exenv from 'exenv';
 import smoothscroll from 'smoothscroll-polyfill';
@@ -250,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";
@@ -283,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";
@@ -314,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";
@@ -11684,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.
@@ -11711,6 +11725,16 @@ function __rest(s, e) {
                 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-";
@@ -22956,6 +22980,8 @@ var SelectOption = function SelectOption(props) {
   }), /*#__PURE__*/React__default.createElement(components$1.Option, Object.assign({}, props)));
 };
 
+var regenerator = regeneratorRuntime;
+
 var getBorderColor = function getBorderColor(_ref) {
   var errored = _ref.errored,
       disabled = _ref.disabled,
@@ -23169,6 +23195,20 @@ var customStyles = function customStyles(_ref4) {
   };
 };
 
+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;
@@ -23241,61 +23281,7 @@ var SelectDefaultProps = {
   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__*/forwardRef(function (_a, ref) {
+var ReactSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
   var autocomplete = _a.autocomplete,
       options = _a.options,
       labelText = _a.labelText,
@@ -23324,17 +23310,83 @@ var ReactSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
 
-  var themeContext = useContext(ThemeContext$1);
+  var themeContext = React__default.useContext(ThemeContext$1);
   var spaceProps = getSubset(props, propTypes.space);
-  useEffect(function () {
+  var reactSelectRef = React__default.useRef(null);
+  React__default.useEffect(function () {
     checkOptionsAreValid(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;
+      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.useCallback(function (inputProps) {
+    return /*#__PURE__*/React__default.createElement(SelectInput, Object.assign({}, inputProps, multiselect ? {
+      onPaste: handlePaste
+    } : {}));
+  }, [handlePaste, multiselect]);
+
+  React__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.createElement(Field, Object.assign({}, spaceProps), /*#__PURE__*/React__default.createElement(MaybeFieldLabel, {
     labelText: labelText,
     requirementText: requirementText,
     helpText: helpText
   }, /*#__PURE__*/React__default.createElement(WindowedSelect, Object.assign({
-    ref: ref,
+    ref: reactSelectRef,
     placeholder: placeholder || t("select ..."),
     windowThreshold: windowThreshold,
     styles: customStyles({
@@ -23349,9 +23401,7 @@ var ReactSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     "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,
@@ -23364,7 +23414,7 @@ var ReactSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       DropdownIndicator: SelectDropdownIndicator,
       SelectContainer: SelectContainer$1,
       Menu: SelectMenu,
-      Input: SelectInput
+      Input: _SelectInput
     }, components),
     "aria-label": ariaLabel,
     options: options,
@@ -23375,6 +23425,60 @@ var ReactSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     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
@@ -42276,7 +42380,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
     }
@@ -42285,14 +42392,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"
     })));
@@ -42304,18 +42407,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")));
@@ -50621,30 +50720,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() {
@@ -50947,4 +51143,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.d.ts

@@ -66,6 +66,6 @@ export declare const SelectDefaultProps: {
     components: any;
     closeMenuOnSelect: boolean;
 };
-export declare const getOption: (options: any, value: any) => any;
 declare const ReactSelect: React.ForwardRefExoticComponent<Pick<SelectProps, React.ReactText> & React.RefAttributes<unknown>>;
+export declare const getOption: (options: any, value: any) => any;
 export default ReactSelect;

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

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

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

@@ -0,0 +1 @@
+export declare const extractValuesFromCsvString: (csv: string) => string[];

package/dist/src/Select/selectHelpers.spec.d.ts

@@ -0,0 +1 @@
+export {};