@uncinc/uncinc-react-kitchen-sink 2.6.0 → 2.6.3

package/dist/components/Layout/QuickLayout/stories.js

@@ -8,10 +8,18 @@ var _react = _interopRequireDefault(require("react"));
 var _ = _interopRequireDefault(require("."));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = {
-  title: 'Templates/QuickLayout'
+  title: 'Templates/QuickLayout',
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { QuickLayout } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  }
 };
 exports.default = _default;
-var Center = function Center() {
+var Center = function Center(args) {
   return /*#__PURE__*/_react.default.createElement(_.default, {
     type: "center"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -19,7 +27,7 @@ var Center = function Center() {
   }, "Wow, i'm centered!"));
 };
 exports.Center = Center;
-var Wrap = function Wrap() {
+var Wrap = function Wrap(args) {
   return /*#__PURE__*/_react.default.createElement(_.default, {
     type: "wrap",
     min: "150px",
@@ -33,7 +41,7 @@ var Wrap = function Wrap() {
   }, "3"));
 };
 exports.Wrap = Wrap;
-var Sidebar = function Sidebar() {
+var Sidebar = function Sidebar(args) {
   return /*#__PURE__*/_react.default.createElement(_.default, {
     type: "sidebar"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -43,7 +51,7 @@ var Sidebar = function Sidebar() {
   }, "Body"));
 };
 exports.Sidebar = Sidebar;
-var Stack = function Stack() {
+var Stack = function Stack(args) {
   return /*#__PURE__*/_react.default.createElement(_.default, {
     type: "stack"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -55,7 +63,7 @@ var Stack = function Stack() {
   }, "Footer!"));
 };
 exports.Stack = Stack;
-var Auto = function Auto() {
+var Auto = function Auto(args) {
   return /*#__PURE__*/_react.default.createElement(_.default, {
     type: "auto",
     gap: "1rem ",
@@ -73,7 +81,7 @@ var Auto = function Auto() {
   }, "5"));
 };
 exports.Auto = Auto;
-var SpaceBetween = function SpaceBetween() {
+var SpaceBetween = function SpaceBetween(args) {
   return /*#__PURE__*/_react.default.createElement(_.default, {
     type: "spaceBetween",
     gap: "1rem",
@@ -87,7 +95,7 @@ var SpaceBetween = function SpaceBetween() {
   }, "Box 3"));
 };
 exports.SpaceBetween = SpaceBetween;
-var Clamp = function Clamp() {
+var Clamp = function Clamp(args) {
   return /*#__PURE__*/_react.default.createElement(_.default, {
     type: "clamp",
     min: "2rem",
@@ -96,7 +104,7 @@ var Clamp = function Clamp() {
   }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent urna lectus, condimentum eu neque ut, hendrerit scelerisque lorem. Aenean vehicula eleifend porta. Suspendisse viverra fermentum urna quis rhoncus. Nam lacinia risus vel purus vestibulum semper. Curabitur rutrum nisl consequat dui pretium, vel dapibus libero venenatis. Praesent non imperdiet ipsum. Suspendisse non enim mattis, blandit nunc et, suscipit magna. Duis eu blandit elit. Fusce rhoncus, augue ut pretium accumsan, quam dolor laoreet nisl, eu faucibus mi massa vulputate enim.");
 };
 exports.Clamp = Clamp;
-var AspectRatio = function AspectRatio() {
+var AspectRatio = function AspectRatio(args) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Coming ", /*#__PURE__*/_react.default.createElement("a", {
     href: "https://caniuse.com/mdn-css_properties_aspect-ratio"
   }, "soon...")), /*#__PURE__*/_react.default.createElement("div", null));

package/dist/components/Lottie/stories.js

@@ -13,7 +13,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _default = {
   title: 'Atoms/Lottie',
-  component: _.default
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { Lottie, LottieAnimationWithMousePosition } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  }
 }; // Default animation
 exports.default = _default;
 var DefaultAnimation = function DefaultAnimation(args) {

package/dist/components/MagicLine/stories.js

@@ -10,11 +10,19 @@ var _ = _interopRequireDefault(require("."));
 require("./stories.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = {
-  title: 'Molecules/MagicLine'
+  title: 'Molecules/MagicLine',
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { MagicLine } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  }
 };
 exports.default = _default;
-var Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_.default, null, function (setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation) {
+var Default = function Default(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, args, function (setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation) {
     var items = ['one', 'two with a longer name', 'three'];
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "Menu"
@@ -40,8 +48,8 @@ var Default = function Default() {
   });
 };
 exports.Default = Default;
-var NoActiveItem = function NoActiveItem() {
-  return /*#__PURE__*/_react.default.createElement(_.default, null, function (setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation) {
+var NoActiveItem = function NoActiveItem(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, args, function (setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation) {
     var items = ['one', 'two with a longer name', 'three'];
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "Menu"

package/dist/components/MediaPlayer/stories.d.ts

@@ -2,6 +2,13 @@ import React from 'react';
 declare const _default: {
     title: string;
     component: React.FC<import("./types").MediaPlayerProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
 };
 export default _default;
 export declare const LocalVideo: (args: any) => React.JSX.Element;

package/dist/components/MediaPlayer/stories.js

@@ -22,7 +22,14 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 var localVideo = 'https://www.uncinc.nl/sites/default/files/videos/unc-inc-office-film-v1.mp4';
 var _default = {
   title: 'Organisms/MediaPlayer',
-  component: _.default
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { MediaPlayer } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  }
 };
 exports.default = _default;
 var LocalVideo = function LocalVideo(args) {

package/dist/components/NavigationScroll/stories.js

@@ -10,12 +10,20 @@ var _ = _interopRequireDefault(require("."));
 require("./stories.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = {
-  title: 'Molecules/NavigationScroll'
+  title: 'Molecules/NavigationScroll',
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { NavigationScroll } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  }
 };
 exports.default = _default;
-var Default = function Default() {
+var Default = function Default(args) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "NavigationScrollExample"
-  }, /*#__PURE__*/_react.default.createElement(_.default, null, /*#__PURE__*/_react.default.createElement("nav", null, /*#__PURE__*/_react.default.createElement("div", null, "one"), /*#__PURE__*/_react.default.createElement("div", null, "two"), /*#__PURE__*/_react.default.createElement("div", null, "three"))));
+  }, /*#__PURE__*/_react.default.createElement(_.default, args, /*#__PURE__*/_react.default.createElement("nav", null, /*#__PURE__*/_react.default.createElement("div", null, "one"), /*#__PURE__*/_react.default.createElement("div", null, "two"), /*#__PURE__*/_react.default.createElement("div", null, "three"))));
 };
 exports.Default = Default;

package/dist/components/Pagination/index.js

@@ -23,7 +23,8 @@ var Pagination = function Pagination(_ref) {
     disabledClassName = _ref.disabledClassName,
     activeClassName = _ref.activeClassName,
     breakClassName = _ref.breakClassName,
-    showWhenOnePage = _ref.showWhenOnePage;
+    showWhenOnePage = _ref.showWhenOnePage,
+    controlled = _ref.controlled;
   var pageChange = function pageChange(data) {
     if (setCurrentPage) {
       setCurrentPage(data.selected + 1);
@@ -61,7 +62,8 @@ var Pagination = function Pagination(_ref) {
     pageRangeDisplayed: pageRangeDisplayed,
     marginPagesDisplayed: marginPagesDisplayed,
     disabledClassName: disabledClasses,
-    initialPage: currentPage - 1,
+    initialPage: !controlled && currentPage - 1,
+    forcePage: controlled && currentPage - 1,
     onPageChange: pageChange,
     containerClassName: containerClasses,
     activeClassName: activeClasses
@@ -79,7 +81,8 @@ Pagination.propTypes = {
   containerClassName: _propTypes.default.string,
   disabledClassName: _propTypes.default.string,
   activeClassName: _propTypes.default.string,
-  showWhenOnePage: _propTypes.default.bool
+  showWhenOnePage: _propTypes.default.bool,
+  controlled: _propTypes.default.bool
 };
 Pagination.defaultProps = {
   setCurrentPage: null,
@@ -90,7 +93,8 @@ Pagination.defaultProps = {
   activeClassName: null,
   pageRangeDisplayed: 5,
   marginPagesDisplayed: 1,
-  showWhenOnePage: false
+  showWhenOnePage: false,
+  controlled: false
 };
 var _default = (0, _withMapping.default)(Pagination);
 exports.default = _default;

package/dist/components/Pagination/stories.js

@@ -3,14 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.TextualButtons = exports.ManyPages = exports.LargePageRange = exports.FewPages = exports.Default = void 0;
+exports.default = exports.TextualButtons = exports.ManyPages = exports.LargePageRange = exports.FewPages = exports.Default = exports.Controlled = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ = require(".");
 require("./stories.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var _default = {
   title: 'Molecules/Pagination',
-  component: _.Pagination
+  component: _.Pagination,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { Pagination } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  }
 };
 exports.default = _default;
 var Default = function Default(args) {
@@ -56,4 +70,41 @@ TextualButtons.args = {
   totalPages: 30,
   previousLabel: /*#__PURE__*/_react.default.createElement("a", null, "Previous"),
   nextLabel: /*#__PURE__*/_react.default.createElement("a", null, "Next")
+};
+var Controlled = function Controlled(args) {
+  var _React$useState = _react.default.useState(1),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    currentPage = _React$useState2[0],
+    setCurrentPage = _React$useState2[1];
+  var onSubmit = function onSubmit(e) {
+    e.preventDefault();
+    var page = e.target.elements.page.value;
+    setCurrentPage(parseInt(page));
+  };
+  var formStyle = {
+    display: 'flex',
+    justifyContent: 'center'
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("form", {
+    onSubmit: onSubmit,
+    style: formStyle
+  }, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "page"
+  }, "Page", /*#__PURE__*/_react.default.createElement("input", {
+    type: "number",
+    id: "page",
+    name: "page",
+    min: 1,
+    max: 30
+  })), /*#__PURE__*/_react.default.createElement("button", {
+    type: "submit"
+  }, "Jump to page")), /*#__PURE__*/_react.default.createElement(_.Pagination, _extends({}, args, {
+    currentPage: currentPage,
+    setCurrentPage: setCurrentPage
+  })));
+};
+exports.Controlled = Controlled;
+Controlled.args = {
+  totalPages: 30,
+  controlled: true
 };

package/dist/components/Share/stories.js

@@ -9,10 +9,18 @@ var _ = _interopRequireDefault(require("."));
 require("./stories.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = {
-  title: 'Organisms/Share'
+  title: 'Organisms/Share',
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { Share } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  }
 };
 exports.default = _default;
-var Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_.default, null);
+var Default = function Default(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, args);
 };
 exports.Default = Default;

package/dist/components/Sliders/SliderRelated/stories.js

@@ -15,14 +15,16 @@ var d = {
   parameters: {
     info: {
       inline: true
+    },
+    docs: {
+      description: {
+        component: '`import { SliderRelated } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
     }
   }
 };
 var _default = d;
 exports.default = _default;
-var defaultProps = {
-  autoplay: false
-};
 var Teaser = function Teaser(_ref) {
   var title = _ref.title,
     image = _ref.image,
@@ -73,19 +75,25 @@ var children = Array.from(Array(6).keys()).map(function (i) {
     buttonLink: buttonLink
   });
 });
-var One = function One() {
-  return /*#__PURE__*/_react.default.createElement(_.default, _extends({}, defaultProps, {
+var One = function One(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
     slidesToShow: 1
   }), children);
 };
 exports.One = One;
-var Two = function Two() {
-  return /*#__PURE__*/_react.default.createElement(_.default, _extends({}, defaultProps, {
+var Two = function Two(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
     slidesToShow: 2
   }), children);
 };
 exports.Two = Two;
-var Three = function Three() {
-  return /*#__PURE__*/_react.default.createElement(_.default, defaultProps, children);
+var Three = function Three(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, args, children);
+};
+exports.Three = Three;
+var defaultArgs = {
+  autoplay: false
 };
-exports.Three = Three;
+One.args = defaultArgs;
+Two.args = defaultArgs;
+Three.args = defaultArgs;

package/dist/components/TitleWithText/stories.d.ts

@@ -3,6 +3,13 @@ import './stories.scss';
 declare const _default: {
     title: string;
     component: React.FC<import(".").TitleWithTextProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
 };
 export default _default;
 export declare const Default: (args: any) => React.JSX.Element;

package/dist/components/TitleWithText/stories.js

@@ -11,7 +11,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _default = {
   title: 'Molecules/TitleWithText',
-  component: _.default
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { TitleWithText } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  }
 };
 exports.default = _default;
 var Default = function Default(args) {

package/dist/components/WysiwygField/stories.js

@@ -10,19 +10,27 @@ var _AbbreviationAnnotation = _interopRequireDefault(require("../AbbreviationAnn
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _default = {
-  title: 'Atoms/WysiwygField'
+  title: 'Atoms/WysiwygField',
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { WysiwygField } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  }
 };
 exports.default = _default;
 var html = '<p>This is <em>some</em> example <a href=\'https://www.uncinc.nl\'>HTML</a>.</p>';
-var Primary = function Primary() {
-  return /*#__PURE__*/_react.default.createElement(_.default, {
+var Primary = function Primary(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
     html: html
-  });
+  }));
 };
 exports.Primary = Primary;
 var htmlCustomHandler = "\n  <p>Lorem ipsum dolor sit amet, <abbr title=\"Ut ut tellus et augue feugiat sollicitudin sit amet viverra nisi.\">consectetur adipiscing</abbr> elit. Aliquam in sodales tellus. Ut ut tellus et augue feugiat sollicitudin sit amet viverra nisi. Nulla malesuada erat non massa pellentesque, ut ultricies tellus sodales. Fusce ac feugiat ligula. In vel metus diam. Maecenas diam ex, tincidunt tempor nibh sed, suscipit semper lectus. Sed eu enim vel erat tempus mollis. Integer eget gravida orci. Nunc volutpat velit id dui semper tincidunt. Nulla maximus nisl nec volutpat faucibus. Integer vitae ullamcorper ex. Vestibulum facilisis convallis arcu, ac interdum libero malesuada eget.</p>\n  <p>Donec feugiat, nunc vitae euismod posuere, urna nisl elementum nibh, quis ultricies libero leo sed neque. Praesent vel vestibulum sem, eget congue purus. Nunc non volutpat urna, vitae ullamcorper justo. Suspendisse in tortor ex. Phasellus euismod eget neque vitae consequat. Vestibulum sem mi, dictum id consectetur at, hendrerit in massa. Mauris quis sem condimentum, condimentum enim sed, varius sem. Curabitur convallis tempus nulla, eget consectetur quam sagittis at. Nulla a feugiat tortor. Mauris fermentum lectus ac mauris cursus ornare.</p>\n  <p>Nam venenatis est eget lorem laoreet, id tempor urna hendrerit. Quisque suscipit in magna nec condimentum. Duis id tempor nisi. Sed rutrum urna elit, vitae placerat enim volutpat nec. Vivamus volutpat, magna sit amet commodo ultricies, enim turpis pretium libero, quis molestie nibh augue a ex. Nulla vestibulum vestibulum tellus, vel molestie libero vehicula nec. Sed maximus tortor vel ipsum cursus egestas. Proin suscipit tortor id luctus bibendum.</p>\n";
-var CustomHandlers = function CustomHandlers() {
-  return /*#__PURE__*/_react.default.createElement(_.default, {
+var CustomHandlers = function CustomHandlers(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
     html: htmlCustomHandler,
     customElementHandler: function customElementHandler(element) {
       switch (element.name) {
@@ -38,6 +46,6 @@ var CustomHandlers = function CustomHandlers() {
           }
       }
     }
-  });
+  }));
 };
 exports.CustomHandlers = CustomHandlers;

package/dist/hooks/useClickOutside.js

@@ -10,8 +10,8 @@ function useClickOutside(_ref) {
     _ref$unless = _ref.unless,
     unless = _ref$unless === void 0 ? false : _ref$unless,
     onClick = _ref.onClick;
-  var refsAsArray = Array.isArray(refs) ? refs : [refs];
   (0, _react.useEffect)(function () {
+    var refsAsArray = Array.isArray(refs) ? refs : [refs];
     function handleOutsideClick(e) {
       var allRefsHaveCurrent = refsAsArray.every(function (ref) {
         return !!ref.current;

package/dist/hooks/useOnScreen.d.ts

@@ -0,0 +1,2 @@
+import { MutableRefObject } from 'react';
+export default function useOnScreen(ref: MutableRefObject<HTMLElement>): boolean;

package/dist/hooks/useOnScreen.js

@@ -16,17 +16,17 @@ function useOnScreen(ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isIntersecting = _useState2[0],
     setIntersecting = _useState2[1];
-  var observer = new IntersectionObserver(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 1),
-      entry = _ref2[0];
-    return setIntersecting(entry.isIntersecting);
-  });
   (0, _react.useEffect)(function () {
+    var observer = new IntersectionObserver(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 1),
+        entry = _ref2[0];
+      return setIntersecting(entry.isIntersecting);
+    });
     observer.observe(ref.current);
     // Remove the observer as soon as the component is unmounted
     return function () {
       return observer.disconnect();
     };
-  }, [observer, ref]);
+  }, [ref]);
   return isIntersecting;
 }

package/dist/hooks/usePrevious.d.ts

@@ -0,0 +1 @@
+export default function usePrevious<T>(value: T): T;

package/dist/hooks/usePrevious.js

@@ -6,15 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = usePrevious;
 var _react = require("react");
 function usePrevious(value) {
-  // The ref object is a generic container whose current property is mutable ...
-  // ... and can hold any value, similar to an instance property on a class
   var ref = (0, _react.useRef)();
-
-  // Store current value in ref
   (0, _react.useEffect)(function () {
     ref.current = value;
-  }, [value]); // Only re-run if value changes
-
-  // Return previous value (happens before update in useEffect above)
+  }, [value]);
   return ref.current;
 }

package/dist/hooks/useScrollPosition.d.ts

@@ -0,0 +1,2 @@
+declare const useScrollPosition: () => number;
+export default useScrollPosition;

package/dist/hooks/useScrollPosition.js

@@ -18,7 +18,7 @@ var useScrollPosition = function useScrollPosition() {
     setScrollPosition = _useState2[1];
   (0, _react.useEffect)(function () {
     var updatePosition = function updatePosition() {
-      setScrollPosition(window.pageYOffset);
+      setScrollPosition(window.scrollY);
     };
     window.addEventListener('scroll', updatePosition);
     updatePosition();

package/dist/hooks/useWindowDimensions.d.ts

@@ -0,0 +1,4 @@
+export default function useWindowDimensions(): {
+    width: number;
+    height: number;
+};

package/dist/index.js

@@ -189,6 +189,12 @@ Object.defineProperty(exports, "ImageBackground", {
     return _Background.default;
   }
 });
+Object.defineProperty(exports, "ImageGrid", {
+  enumerable: true,
+  get: function get() {
+    return _ImageGrid.default;
+  }
+});
 Object.defineProperty(exports, "InlineMenu", {
   enumerable: true,
   get: function get() {
@@ -502,6 +508,7 @@ var _Quote = _interopRequireDefault(require("./organisms/Quote"));
 var _Share = _interopRequireDefault(require("./components/Share"));
 var _SliderRelated = _interopRequireDefault(require("./components/Sliders/SliderRelated"));
 var _Text = _interopRequireDefault(require("./organisms/Text"));
+var _ImageGrid = _interopRequireDefault(require("./organisms/ImageGrid"));
 var _Container = _interopRequireDefault(require("./components/Layout/Container"));
 var _QuickLayout = _interopRequireDefault(require("./components/Layout/QuickLayout"));
 var _KitchenSinkComponentMapperContext = _interopRequireDefault(require("./Context/KitchenSinkComponentMapperContext"));

package/dist/organisms/Downloads/stories.d.ts

@@ -3,6 +3,13 @@ import './stories.scss';
 declare const _default: {
     title: string;
     component: React.FC<import(".").DownloadsProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
 };
 export default _default;
 export declare const Default: (args: any) => React.JSX.Element;

package/dist/organisms/Downloads/stories.js

@@ -11,7 +11,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _default = {
   title: 'Organisms/Downloads',
-  component: _.default
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { Downloads } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  }
 };
 exports.default = _default;
 var Default = function Default(args) {

package/dist/organisms/ImageGrid/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import './style.scss';
+export interface ImageGridProps {
+    items: [
+        React.JSX.Element,
+        React.JSX.Element
+    ] | [
+        React.JSX.Element,
+        React.JSX.Element,
+        React.JSX.Element
+    ] | [
+        React.JSX.Element,
+        React.JSX.Element,
+        React.JSX.Element,
+        React.JSX.Element
+    ] | [
+        React.JSX.Element,
+        React.JSX.Element,
+        React.JSX.Element,
+        React.JSX.Element,
+        React.JSX.Element
+    ];
+}
+declare const ImageGrid: React.FC<ImageGridProps>;
+export default ImageGrid;

package/dist/organisms/ImageGrid/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("./style.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var ImageGrid = function ImageGrid(_ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items;
+  if (items.length < 2) {
+    return null;
+  }
+  var visibleItems = items.slice(0, 5);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "ImageGrid ImageGrid--size-".concat(visibleItems.length)
+  }, visibleItems.map(function (item, index) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      _react.default.createElement("div", {
+        key: index
+      }, item)
+    );
+  }));
+};
+var _default = ImageGrid;
+exports.default = _default;