@nulogy/components 8.4.1 → 8.4.3

package/dist/main.js

@@ -16948,55 +16948,30 @@
     })));
   };
 
-  var getMenuMargin = function getMenuMargin(placement, showArrow) {
-    var direction = String(placement).split("-")[0];
-
-    switch (direction) {
-      case "top":
-        return {
-          marginBottom: showArrow ? "4px" : null
-        };
-
-      case "right":
-        return {
-          marginLeft: showArrow ? "8px" : null,
-          marginTop: showArrow ? null : "-8px"
-        };
-
-      case "left":
-        return {
-          marginRight: showArrow ? "8px" : null,
-          marginTop: showArrow ? null : "-8px"
-        };
+  function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+  var propType = PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].array, PropTypes__default['default'].object]);
+  var createPropTypes = function createPropTypes(props) {
+    return props.reduce(function (acc, name) {
+      var _extends2;
 
-      case "bottom":
-      default:
-        return {
-          marginTop: showArrow ? "4px" : null
-        };
-    }
+      return _extends$1({}, acc, (_extends2 = {}, _extends2[name] = propType, _extends2));
+    }, {});
+  };
+  var propTypes = {
+    space: createPropTypes(space.propNames),
+    color: createPropTypes(color.propNames),
+    layout: createPropTypes(layout.propNames),
+    typography: createPropTypes(typography.propNames),
+    flexbox: createPropTypes(flexbox.propNames),
+    border: createPropTypes(border.propNames),
+    background: createPropTypes(background.propNames),
+    position: createPropTypes(position.propNames),
+    grid: createPropTypes(grid.propNames),
+    shadow: createPropTypes(shadow.propNames),
+    buttonStyle: createPropTypes(buttonStyle.propNames),
+    textStyle: createPropTypes(textStyle.propNames),
+    colorStyle: createPropTypes(colorStyle.propNames)
   };
-
-  var DropdownMenuContainer = styled__default['default'](Box).withConfig({
-    displayName: "DropdownMenuContainer",
-    componentId: "sc-12o3dvc-0"
-  })(color, function (_ref) {
-    var dataPlacement = _ref.dataPlacement,
-        _ref$showArrow = _ref.showArrow,
-        showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
-        _ref$backgroundColor = _ref.backgroundColor,
-        backgroundColor = _ref$backgroundColor === void 0 ? "white" : _ref$backgroundColor,
-        theme = _ref.theme;
-    return Object.assign({
-      borderRadius: theme.radii.medium,
-      backgroundColor: theme.colors[backgroundColor],
-      borderTop: "1px solid  " + theme.colors[backgroundColor],
-      borderBottom: "1px solid " + theme.colors[backgroundColor],
-      boxShadow: theme.shadows.medium,
-      padding: "7px 0",
-      zIndex: "100"
-    }, getMenuMargin(dataPlacement, showArrow));
-  });
 
   /**!
    * @fileOverview Kickass library to create and place poppers near their reference elements.
@@ -17407,7 +17382,7 @@
     return obj;
   };
 
-  var _extends$1 = Object.assign || function (target) {
+  var _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -17429,7 +17404,7 @@
    * @returns {Object} ClientRect like output
    */
   function getClientRect(offsets) {
-    return _extends$1({}, offsets, {
+    return _extends({}, offsets, {
       right: offsets.left + offsets.width,
       bottom: offsets.top + offsets.height
     });
@@ -17717,7 +17692,7 @@
     };
 
     var sortedAreas = Object.keys(rects).map(function (key) {
-      return _extends$1({
+      return _extends({
         key: key
       }, rects[key], {
         area: getArea(rects[key])
@@ -18359,9 +18334,9 @@
     };
 
     // Update `data` attributes, styles and arrowStyles
-    data.attributes = _extends$1({}, attributes, data.attributes);
-    data.styles = _extends$1({}, styles, data.styles);
-    data.arrowStyles = _extends$1({}, data.offsets.arrow, data.arrowStyles);
+    data.attributes = _extends({}, attributes, data.attributes);
+    data.styles = _extends({}, styles, data.styles);
+    data.arrowStyles = _extends({}, data.offsets.arrow, data.arrowStyles);
 
     return data;
   }
@@ -18641,7 +18616,7 @@
 
         // this object contains `position`, we want to preserve it along with
         // any additional property we may add in the future
-        data.offsets.popper = _extends$1({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
+        data.offsets.popper = _extends({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
 
         data = runModifiers(data.instance.modifiers, data, 'flip');
       }
@@ -18915,7 +18890,7 @@
 
     order.forEach(function (placement) {
       var side = ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary';
-      popper = _extends$1({}, popper, check[side](placement));
+      popper = _extends({}, popper, check[side](placement));
     });
 
     data.offsets.popper = popper;
@@ -18950,7 +18925,7 @@
         end: defineProperty({}, side, reference[side] + reference[measurement] - popper[measurement])
       };
 
-      data.offsets.popper = _extends$1({}, popper, shiftOffsets[shiftvariation]);
+      data.offsets.popper = _extends({}, popper, shiftOffsets[shiftvariation]);
     }
 
     return data;
@@ -19482,7 +19457,7 @@
       this.update = debounce$1(this.update.bind(this));
 
       // with {} we create a new object with the options inside it
-      this.options = _extends$1({}, Popper.Defaults, options);
+      this.options = _extends({}, Popper.Defaults, options);
 
       // init state
       this.state = {
@@ -19497,13 +19472,13 @@
 
       // Deep merge modifiers options
       this.options.modifiers = {};
-      Object.keys(_extends$1({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) {
-        _this.options.modifiers[name] = _extends$1({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
+      Object.keys(_extends({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) {
+        _this.options.modifiers[name] = _extends({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
       });
 
       // Refactoring modifiers' list (Object => Array)
       this.modifiers = Object.keys(this.options.modifiers).map(function (name) {
-        return _extends$1({
+        return _extends({
           name: name
         }, _this.options.modifiers[name]);
       })
@@ -20039,7 +20014,7 @@
     };
 
     var onClickEventHandlers = openOnClick ? {
-      onMouseDown: function onMouseDown() {
+      onClick: function onClick() {
         if (isOpen) {
           closePopUp(false);
         } else {
@@ -20150,31 +20125,6 @@
     closeAriaLabel: undefined
   };
 
-  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-  var propType = PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string, PropTypes__default['default'].array, PropTypes__default['default'].object]);
-  var createPropTypes = function createPropTypes(props) {
-    return props.reduce(function (acc, name) {
-      var _extends2;
-
-      return _extends({}, acc, (_extends2 = {}, _extends2[name] = propType, _extends2));
-    }, {});
-  };
-  var propTypes = {
-    space: createPropTypes(space.propNames),
-    color: createPropTypes(color.propNames),
-    layout: createPropTypes(layout.propNames),
-    typography: createPropTypes(typography.propNames),
-    flexbox: createPropTypes(flexbox.propNames),
-    border: createPropTypes(border.propNames),
-    background: createPropTypes(background.propNames),
-    position: createPropTypes(position.propNames),
-    grid: createPropTypes(grid.propNames),
-    shadow: createPropTypes(shadow.propNames),
-    buttonStyle: createPropTypes(buttonStyle.propNames),
-    textStyle: createPropTypes(textStyle.propNames),
-    colorStyle: createPropTypes(colorStyle.propNames)
-  };
-
   var getSubset = function getSubset(o, propObj) {
     var fields = Object.keys(propObj);
     return pick.apply(void 0, [o].concat(fields));
@@ -20201,6 +20151,56 @@
     }, {});
   };
 
+  var getMenuMargin = function getMenuMargin(placement, showArrow) {
+    var direction = String(placement).split("-")[0];
+
+    switch (direction) {
+      case "top":
+        return {
+          marginBottom: showArrow ? "4px" : null
+        };
+
+      case "right":
+        return {
+          marginLeft: showArrow ? "8px" : null,
+          marginTop: showArrow ? null : "-8px"
+        };
+
+      case "left":
+        return {
+          marginRight: showArrow ? "8px" : null,
+          marginTop: showArrow ? null : "-8px"
+        };
+
+      case "bottom":
+      default:
+        return {
+          marginTop: showArrow ? "4px" : null
+        };
+    }
+  };
+
+  var DropdownMenuContainer = styled__default['default'](Box).withConfig({
+    displayName: "DropdownMenuContainer",
+    componentId: "sc-12o3dvc-0"
+  })(color, function (_ref) {
+    var dataPlacement = _ref.dataPlacement,
+        _ref$showArrow = _ref.showArrow,
+        showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
+        _ref$backgroundColor = _ref.backgroundColor,
+        backgroundColor = _ref$backgroundColor === void 0 ? "white" : _ref$backgroundColor,
+        theme = _ref.theme;
+    return Object.assign({
+      borderRadius: theme.radii.medium,
+      backgroundColor: theme.colors[backgroundColor],
+      borderTop: "1px solid  " + theme.colors[backgroundColor],
+      borderBottom: "1px solid " + theme.colors[backgroundColor],
+      boxShadow: theme.shadows.medium,
+      padding: "7px 0",
+      zIndex: "100"
+    }, getMenuMargin(dataPlacement, showArrow));
+  });
+
   var DEFAULT_POPPER_MODIFIERS = {
     preventOverflow: {
       enabled: true,
@@ -42699,6 +42699,162 @@
     onHidden: function onHidden() {}
   };
 
+  var SummaryContext = /*#__PURE__*/React.createContext(undefined);
+  function useSummaryContext() {
+    var context = React.useContext(SummaryContext);
+
+    if (!context) {
+      throw new Error("Summary compound components cannot be rendered outside the Summary component");
+    }
+
+    return context;
+  }
+  var SummaryContextProvider = function SummaryContextProvider(_ref) {
+    var breakpoint = _ref.breakpoint,
+        children = _ref.children;
+    return /*#__PURE__*/React__default['default'].createElement(SummaryContext.Provider, {
+      value: {
+        breakpoint: breakpoint
+      }
+    }, children);
+  };
+
+  var SummaryWrapper = styled__default['default'](Box).withConfig({
+    displayName: "Summary__SummaryWrapper",
+    componentId: "sc-1hzufqo-0"
+  })(function (_ref) {
+    var _ref2;
+
+    var theme = _ref.theme,
+        breakpoint = _ref.breakpoint;
+    return _ref2 = {
+      display: "flex",
+      background: theme.colors.white,
+      gap: theme.space.x2,
+      paddingTop: theme.space.x1,
+      paddingBottom: theme.space.x1,
+      paddingLeft: theme.space.x2,
+      paddingRight: theme.space.x2,
+      borderRadius: theme.radii.medium,
+      width: "fit-content"
+    }, _ref2["@media (max-width: " + breakpoint + "px)"] = {
+      background: "none",
+      flexFlow: "wrap",
+      padding: 0,
+      paddingTop: theme.space.x2,
+      rowGap: 0
+    }, _ref2;
+  });
+  var DEFAULT_BREAKPOINT = Theme.breakpoints.medium;
+
+  var Summary = function Summary(_a) {
+    var _a$breakpoint = _a.breakpoint,
+        breakpoint = _a$breakpoint === void 0 ? DEFAULT_BREAKPOINT : _a$breakpoint,
+        children = _a.children,
+        rest = __rest(_a, ["breakpoint", "children"]);
+
+    var breakpointPx = pixelDigitsFrom$1(breakpoint);
+    return /*#__PURE__*/React__default['default'].createElement(SummaryContextProvider, {
+      breakpoint: breakpointPx
+    }, /*#__PURE__*/React__default['default'].createElement(SummaryWrapper, Object.assign({
+      breakpoint: breakpointPx
+    }, rest), children));
+  };
+
+  function useMediaQuery(query) {
+    var isUnsupported = typeof window === "undefined" || typeof window.matchMedia === "undefined";
+
+    var getMatches = function getMatches(query) {
+      if (isUnsupported) {
+        return false;
+      }
+
+      return window.matchMedia(query).matches;
+    };
+
+    var _useState = React.useState(getMatches(query)),
+        matches = _useState[0],
+        setMatches = _useState[1];
+
+    function handleChange() {
+      setMatches(getMatches(query));
+    }
+
+    React.useEffect(function () {
+      if (isUnsupported) return;
+      var matchMedia = window.matchMedia(query);
+      handleChange();
+      matchMedia.addEventListener("change", handleChange);
+      return function () {
+        matchMedia.removeEventListener("change", handleChange);
+      };
+    }, [query]);
+    return matches;
+  }
+
+  var SummaryItemWrapper = styled__default['default'](Flex).withConfig({
+    displayName: "SummaryItem__SummaryItemWrapper",
+    componentId: "kqzify-0"
+  })(function (_ref) {
+    var _ref2;
+
+    var theme = _ref.theme,
+        breakpoint = _ref.breakpoint;
+    return _ref2 = {
+      gap: theme.space.half,
+      flexDirection: "column"
+    }, _ref2["@media (max-width: " + breakpoint + "px)"] = {
+      flexDirection: "row"
+    }, _ref2;
+  });
+
+  var SummaryItem = function SummaryItem(_a) {
+    var value = _a.value,
+        status = _a.status,
+        rest = __rest(_a, ["value", "status"]);
+
+    var _useSummaryContext = useSummaryContext(),
+        breakpoint = _useSummaryContext.breakpoint;
+
+    var matches = useMediaQuery("(max-width: " + breakpoint + "px)");
+    delete rest["children"];
+    return /*#__PURE__*/React__default['default'].createElement(SummaryItemWrapper, Object.assign({
+      breakpoint: breakpoint
+    }, rest), /*#__PURE__*/React__default['default'].createElement(Text, {
+      fontWeight: "medium",
+      fontSize: !matches ? "heading4" : undefined
+    }, value), status);
+  };
+
+  var Divider$1 = styled__default['default'](Box).withConfig({
+    displayName: "SummaryDivider__Divider",
+    componentId: "sc-1amkaa8-0"
+  })(function (_ref) {
+    var _ref2;
+
+    var theme = _ref.theme,
+        breakpoint = _ref.breakpoint;
+    return _ref2 = {
+      display: "block",
+      alignSelf: "stretch",
+      width: 1,
+      marginRight: theme.space.x1,
+      marginLeft: theme.space.x1,
+      background: theme.colors.grey
+    }, _ref2["@media (max-width: " + breakpoint + "px)"] = {
+      display: "none"
+    }, _ref2;
+  });
+
+  var SummaryDivider = function SummaryDivider(props) {
+    var _useSummaryContext = useSummaryContext(),
+        breakpoint = _useSummaryContext.breakpoint;
+
+    return /*#__PURE__*/React__default['default'].createElement(Divider$1, Object.assign({
+      breakpoint: pixelDigitsFrom$1(breakpoint)
+    }, props));
+  };
+
   var StatelessNavBarDropdownMenuClass = /*#__PURE__*/function (_React$Component) {
     _inheritsLoose__default['default'](StatelessNavBarDropdownMenuClass, _React$Component);
 
@@ -50749,24 +50905,6 @@
     }, 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;
 
@@ -51248,6 +51386,9 @@
   exports.SmallNavBar = SmallNavBar;
   exports.SortingTable = SortingTable;
   exports.StatusIndicator = StatusIndicator;
+  exports.Summary = Summary;
+  exports.SummaryDivider = SummaryDivider;
+  exports.SummaryItem = SummaryItem;
   exports.Switch = Switch;
   exports.Switcher = Switcher;
   exports.Tab = Tab;

package/dist/main.module.js

@@ -16922,55 +16922,30 @@ var Branding = function Branding(_a) {
   })));
 };
 
-var getMenuMargin = function getMenuMargin(placement, showArrow) {
-  var direction = String(placement).split("-")[0];
-
-  switch (direction) {
-    case "top":
-      return {
-        marginBottom: showArrow ? "4px" : null
-      };
-
-    case "right":
-      return {
-        marginLeft: showArrow ? "8px" : null,
-        marginTop: showArrow ? null : "-8px"
-      };
-
-    case "left":
-      return {
-        marginRight: showArrow ? "8px" : null,
-        marginTop: showArrow ? null : "-8px"
-      };
+function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var propType = PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array, PropTypes.object]);
+var createPropTypes = function createPropTypes(props) {
+  return props.reduce(function (acc, name) {
+    var _extends2;
 
-    case "bottom":
-    default:
-      return {
-        marginTop: showArrow ? "4px" : null
-      };
-  }
+    return _extends$1({}, acc, (_extends2 = {}, _extends2[name] = propType, _extends2));
+  }, {});
+};
+var propTypes = {
+  space: createPropTypes(space.propNames),
+  color: createPropTypes(color.propNames),
+  layout: createPropTypes(layout.propNames),
+  typography: createPropTypes(typography.propNames),
+  flexbox: createPropTypes(flexbox.propNames),
+  border: createPropTypes(border.propNames),
+  background: createPropTypes(background.propNames),
+  position: createPropTypes(position.propNames),
+  grid: createPropTypes(grid.propNames),
+  shadow: createPropTypes(shadow.propNames),
+  buttonStyle: createPropTypes(buttonStyle.propNames),
+  textStyle: createPropTypes(textStyle.propNames),
+  colorStyle: createPropTypes(colorStyle.propNames)
 };
-
-var DropdownMenuContainer = styled(Box).withConfig({
-  displayName: "DropdownMenuContainer",
-  componentId: "sc-12o3dvc-0"
-})(color, function (_ref) {
-  var dataPlacement = _ref.dataPlacement,
-      _ref$showArrow = _ref.showArrow,
-      showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
-      _ref$backgroundColor = _ref.backgroundColor,
-      backgroundColor = _ref$backgroundColor === void 0 ? "white" : _ref$backgroundColor,
-      theme = _ref.theme;
-  return Object.assign({
-    borderRadius: theme.radii.medium,
-    backgroundColor: theme.colors[backgroundColor],
-    borderTop: "1px solid  " + theme.colors[backgroundColor],
-    borderBottom: "1px solid " + theme.colors[backgroundColor],
-    boxShadow: theme.shadows.medium,
-    padding: "7px 0",
-    zIndex: "100"
-  }, getMenuMargin(dataPlacement, showArrow));
-});
 
 /**!
  * @fileOverview Kickass library to create and place poppers near their reference elements.
@@ -17381,7 +17356,7 @@ var defineProperty = function (obj, key, value) {
   return obj;
 };
 
-var _extends$1 = Object.assign || function (target) {
+var _extends = Object.assign || function (target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i];
 
@@ -17403,7 +17378,7 @@ var _extends$1 = Object.assign || function (target) {
  * @returns {Object} ClientRect like output
  */
 function getClientRect(offsets) {
-  return _extends$1({}, offsets, {
+  return _extends({}, offsets, {
     right: offsets.left + offsets.width,
     bottom: offsets.top + offsets.height
   });
@@ -17691,7 +17666,7 @@ function computeAutoPlacement(placement, refRect, popper, reference, boundariesE
   };
 
   var sortedAreas = Object.keys(rects).map(function (key) {
-    return _extends$1({
+    return _extends({
       key: key
     }, rects[key], {
       area: getArea(rects[key])
@@ -18333,9 +18308,9 @@ function computeStyle(data, options) {
   };
 
   // Update `data` attributes, styles and arrowStyles
-  data.attributes = _extends$1({}, attributes, data.attributes);
-  data.styles = _extends$1({}, styles, data.styles);
-  data.arrowStyles = _extends$1({}, data.offsets.arrow, data.arrowStyles);
+  data.attributes = _extends({}, attributes, data.attributes);
+  data.styles = _extends({}, styles, data.styles);
+  data.arrowStyles = _extends({}, data.offsets.arrow, data.arrowStyles);
 
   return data;
 }
@@ -18615,7 +18590,7 @@ function flip(data, options) {
 
       // this object contains `position`, we want to preserve it along with
       // any additional property we may add in the future
-      data.offsets.popper = _extends$1({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
+      data.offsets.popper = _extends({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
 
       data = runModifiers(data.instance.modifiers, data, 'flip');
     }
@@ -18889,7 +18864,7 @@ function preventOverflow(data, options) {
 
   order.forEach(function (placement) {
     var side = ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary';
-    popper = _extends$1({}, popper, check[side](placement));
+    popper = _extends({}, popper, check[side](placement));
   });
 
   data.offsets.popper = popper;
@@ -18924,7 +18899,7 @@ function shift(data) {
       end: defineProperty({}, side, reference[side] + reference[measurement] - popper[measurement])
     };
 
-    data.offsets.popper = _extends$1({}, popper, shiftOffsets[shiftvariation]);
+    data.offsets.popper = _extends({}, popper, shiftOffsets[shiftvariation]);
   }
 
   return data;
@@ -19456,7 +19431,7 @@ var Popper$3 = function () {
     this.update = debounce$1(this.update.bind(this));
 
     // with {} we create a new object with the options inside it
-    this.options = _extends$1({}, Popper.Defaults, options);
+    this.options = _extends({}, Popper.Defaults, options);
 
     // init state
     this.state = {
@@ -19471,13 +19446,13 @@ var Popper$3 = function () {
 
     // Deep merge modifiers options
     this.options.modifiers = {};
-    Object.keys(_extends$1({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) {
-      _this.options.modifiers[name] = _extends$1({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
+    Object.keys(_extends({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) {
+      _this.options.modifiers[name] = _extends({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
     });
 
     // Refactoring modifiers' list (Object => Array)
     this.modifiers = Object.keys(this.options.modifiers).map(function (name) {
-      return _extends$1({
+      return _extends({
         name: name
       }, _this.options.modifiers[name]);
     })
@@ -20013,7 +19988,7 @@ var Popper$1 = /*#__PURE__*/React__default.forwardRef(function (_ref, popperRef)
   };
 
   var onClickEventHandlers = openOnClick ? {
-    onMouseDown: function onMouseDown() {
+    onClick: function onClick() {
       if (isOpen) {
         closePopUp(false);
       } else {
@@ -20124,31 +20099,6 @@ Popper$1.defaultProps = {
   closeAriaLabel: undefined
 };
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var propType = PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array, PropTypes.object]);
-var createPropTypes = function createPropTypes(props) {
-  return props.reduce(function (acc, name) {
-    var _extends2;
-
-    return _extends({}, acc, (_extends2 = {}, _extends2[name] = propType, _extends2));
-  }, {});
-};
-var propTypes = {
-  space: createPropTypes(space.propNames),
-  color: createPropTypes(color.propNames),
-  layout: createPropTypes(layout.propNames),
-  typography: createPropTypes(typography.propNames),
-  flexbox: createPropTypes(flexbox.propNames),
-  border: createPropTypes(border.propNames),
-  background: createPropTypes(background.propNames),
-  position: createPropTypes(position.propNames),
-  grid: createPropTypes(grid.propNames),
-  shadow: createPropTypes(shadow.propNames),
-  buttonStyle: createPropTypes(buttonStyle.propNames),
-  textStyle: createPropTypes(textStyle.propNames),
-  colorStyle: createPropTypes(colorStyle.propNames)
-};
-
 var getSubset = function getSubset(o, propObj) {
   var fields = Object.keys(propObj);
   return pick.apply(void 0, [o].concat(fields));
@@ -20175,6 +20125,56 @@ var pick = function pick(o) {
   }, {});
 };
 
+var getMenuMargin = function getMenuMargin(placement, showArrow) {
+  var direction = String(placement).split("-")[0];
+
+  switch (direction) {
+    case "top":
+      return {
+        marginBottom: showArrow ? "4px" : null
+      };
+
+    case "right":
+      return {
+        marginLeft: showArrow ? "8px" : null,
+        marginTop: showArrow ? null : "-8px"
+      };
+
+    case "left":
+      return {
+        marginRight: showArrow ? "8px" : null,
+        marginTop: showArrow ? null : "-8px"
+      };
+
+    case "bottom":
+    default:
+      return {
+        marginTop: showArrow ? "4px" : null
+      };
+  }
+};
+
+var DropdownMenuContainer = styled(Box).withConfig({
+  displayName: "DropdownMenuContainer",
+  componentId: "sc-12o3dvc-0"
+})(color, function (_ref) {
+  var dataPlacement = _ref.dataPlacement,
+      _ref$showArrow = _ref.showArrow,
+      showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
+      _ref$backgroundColor = _ref.backgroundColor,
+      backgroundColor = _ref$backgroundColor === void 0 ? "white" : _ref$backgroundColor,
+      theme = _ref.theme;
+  return Object.assign({
+    borderRadius: theme.radii.medium,
+    backgroundColor: theme.colors[backgroundColor],
+    borderTop: "1px solid  " + theme.colors[backgroundColor],
+    borderBottom: "1px solid " + theme.colors[backgroundColor],
+    boxShadow: theme.shadows.medium,
+    padding: "7px 0",
+    zIndex: "100"
+  }, getMenuMargin(dataPlacement, showArrow));
+});
+
 var DEFAULT_POPPER_MODIFIERS = {
   preventOverflow: {
     enabled: true,
@@ -42673,6 +42673,162 @@ Toast.defaultProps = {
   onHidden: function onHidden() {}
 };
 
+var SummaryContext = /*#__PURE__*/createContext(undefined);
+function useSummaryContext() {
+  var context = useContext(SummaryContext);
+
+  if (!context) {
+    throw new Error("Summary compound components cannot be rendered outside the Summary component");
+  }
+
+  return context;
+}
+var SummaryContextProvider = function SummaryContextProvider(_ref) {
+  var breakpoint = _ref.breakpoint,
+      children = _ref.children;
+  return /*#__PURE__*/React__default.createElement(SummaryContext.Provider, {
+    value: {
+      breakpoint: breakpoint
+    }
+  }, children);
+};
+
+var SummaryWrapper = styled(Box).withConfig({
+  displayName: "Summary__SummaryWrapper",
+  componentId: "sc-1hzufqo-0"
+})(function (_ref) {
+  var _ref2;
+
+  var theme = _ref.theme,
+      breakpoint = _ref.breakpoint;
+  return _ref2 = {
+    display: "flex",
+    background: theme.colors.white,
+    gap: theme.space.x2,
+    paddingTop: theme.space.x1,
+    paddingBottom: theme.space.x1,
+    paddingLeft: theme.space.x2,
+    paddingRight: theme.space.x2,
+    borderRadius: theme.radii.medium,
+    width: "fit-content"
+  }, _ref2["@media (max-width: " + breakpoint + "px)"] = {
+    background: "none",
+    flexFlow: "wrap",
+    padding: 0,
+    paddingTop: theme.space.x2,
+    rowGap: 0
+  }, _ref2;
+});
+var DEFAULT_BREAKPOINT = Theme.breakpoints.medium;
+
+var Summary = function Summary(_a) {
+  var _a$breakpoint = _a.breakpoint,
+      breakpoint = _a$breakpoint === void 0 ? DEFAULT_BREAKPOINT : _a$breakpoint,
+      children = _a.children,
+      rest = __rest(_a, ["breakpoint", "children"]);
+
+  var breakpointPx = pixelDigitsFrom$1(breakpoint);
+  return /*#__PURE__*/React__default.createElement(SummaryContextProvider, {
+    breakpoint: breakpointPx
+  }, /*#__PURE__*/React__default.createElement(SummaryWrapper, Object.assign({
+    breakpoint: breakpointPx
+  }, rest), children));
+};
+
+function useMediaQuery(query) {
+  var isUnsupported = typeof window === "undefined" || typeof window.matchMedia === "undefined";
+
+  var getMatches = function getMatches(query) {
+    if (isUnsupported) {
+      return false;
+    }
+
+    return window.matchMedia(query).matches;
+  };
+
+  var _useState = useState(getMatches(query)),
+      matches = _useState[0],
+      setMatches = _useState[1];
+
+  function handleChange() {
+    setMatches(getMatches(query));
+  }
+
+  useEffect(function () {
+    if (isUnsupported) return;
+    var matchMedia = window.matchMedia(query);
+    handleChange();
+    matchMedia.addEventListener("change", handleChange);
+    return function () {
+      matchMedia.removeEventListener("change", handleChange);
+    };
+  }, [query]);
+  return matches;
+}
+
+var SummaryItemWrapper = styled(Flex).withConfig({
+  displayName: "SummaryItem__SummaryItemWrapper",
+  componentId: "kqzify-0"
+})(function (_ref) {
+  var _ref2;
+
+  var theme = _ref.theme,
+      breakpoint = _ref.breakpoint;
+  return _ref2 = {
+    gap: theme.space.half,
+    flexDirection: "column"
+  }, _ref2["@media (max-width: " + breakpoint + "px)"] = {
+    flexDirection: "row"
+  }, _ref2;
+});
+
+var SummaryItem = function SummaryItem(_a) {
+  var value = _a.value,
+      status = _a.status,
+      rest = __rest(_a, ["value", "status"]);
+
+  var _useSummaryContext = useSummaryContext(),
+      breakpoint = _useSummaryContext.breakpoint;
+
+  var matches = useMediaQuery("(max-width: " + breakpoint + "px)");
+  delete rest["children"];
+  return /*#__PURE__*/React__default.createElement(SummaryItemWrapper, Object.assign({
+    breakpoint: breakpoint
+  }, rest), /*#__PURE__*/React__default.createElement(Text, {
+    fontWeight: "medium",
+    fontSize: !matches ? "heading4" : undefined
+  }, value), status);
+};
+
+var Divider$1 = styled(Box).withConfig({
+  displayName: "SummaryDivider__Divider",
+  componentId: "sc-1amkaa8-0"
+})(function (_ref) {
+  var _ref2;
+
+  var theme = _ref.theme,
+      breakpoint = _ref.breakpoint;
+  return _ref2 = {
+    display: "block",
+    alignSelf: "stretch",
+    width: 1,
+    marginRight: theme.space.x1,
+    marginLeft: theme.space.x1,
+    background: theme.colors.grey
+  }, _ref2["@media (max-width: " + breakpoint + "px)"] = {
+    display: "none"
+  }, _ref2;
+});
+
+var SummaryDivider = function SummaryDivider(props) {
+  var _useSummaryContext = useSummaryContext(),
+      breakpoint = _useSummaryContext.breakpoint;
+
+  return /*#__PURE__*/React__default.createElement(Divider$1, Object.assign({
+    breakpoint: pixelDigitsFrom$1(breakpoint)
+  }, props));
+};
+
 var StatelessNavBarDropdownMenuClass = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose$2(StatelessNavBarDropdownMenuClass, _React$Component);
 
@@ -50723,24 +50879,6 @@ 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;
 
@@ -51146,4 +51284,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, 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 };
+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, Summary, SummaryDivider, SummaryItem, Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToggleComponent as Toggle, Tooltip, TruncatedText, addStyledProps, Theme as theme, useWindowDimensions };

package/dist/src/DropdownMenu/DropdownMenu.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { StyledProps } from "../StyledProps";
 declare type DropdownMenuProps = {
     className?: string;
     id?: string;
@@ -13,6 +14,6 @@ declare type DropdownMenuProps = {
     boundariesElement?: string;
     openAriaLabel?: string;
     closeAriaLabel?: string;
-};
+} & StyledProps;
 declare const DropdownMenu: React.FC<DropdownMenuProps>;
 export default DropdownMenu;

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

@@ -11,6 +11,9 @@ declare const _default: {
     title: string;
     parameters: {
         layout: string;
+        chromatic: {
+            viewports: number[];
+        };
     };
 };
 export default _default;

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

@@ -3,14 +3,5 @@ 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/index.d.ts

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

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

@@ -0,0 +1,2 @@
+import useMediaQuery from "./useMediaQuery";
+export default useMediaQuery;

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

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

package/dist/src/index.d.ts

@@ -43,6 +43,7 @@ export { Breadcrumbs } from "./Breadcrumbs";
 export { ALL_NDS_LOCALES } from "./locales.const";
 export { TruncatedText } from "./TruncatedText";
 export { Toast } from "./Toast";
+export { Summary, SummaryItem, SummaryDivider } from "./Summary/index";
 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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "8.4.1",
+  "version": "8.4.3",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {

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

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