@moda/om 19.1.0 → 19.3.0

package/dist/index.esm.js

@@ -1047,6 +1047,20 @@ function _objectSpread2(e) {
   }
   return e;
 }
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : String(i);
+}
 function _typeof$1(o) {
   "@babel/helpers - typeof";
 
@@ -1057,7 +1071,7 @@ function _typeof$1(o) {
   }, _typeof$1(o);
 }
 function _defineProperty$1(obj, key, value) {
-  key = _toPropertyKey$1(key);
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -1199,20 +1213,6 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
     }
   };
 }
-function _toPrimitive$1(input, hint) {
-  if (typeof input !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-function _toPropertyKey$1(arg) {
-  var key = _toPrimitive$1(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
 
 var isRenderProps = function isRenderProps(children) {
   return typeof children === 'function';
@@ -1227,33 +1227,44 @@ var classnames = {exports: {}};
 
     var hasOwn = {}.hasOwnProperty;
     function classNames() {
-      var classes = [];
+      var classes = '';
       for (var i = 0; i < arguments.length; i++) {
         var arg = arguments[i];
-        if (!arg) continue;
-        var argType = _typeof$1(arg);
-        if (argType === 'string' || argType === 'number') {
-          classes.push(arg);
-        } else if (Array.isArray(arg)) {
-          if (arg.length) {
-            var inner = classNames.apply(null, arg);
-            if (inner) {
-              classes.push(inner);
-            }
-          }
-        } else if (argType === 'object') {
-          if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-            classes.push(arg.toString());
-            continue;
-          }
-          for (var key in arg) {
-            if (hasOwn.call(arg, key) && arg[key]) {
-              classes.push(key);
-            }
-          }
+        if (arg) {
+          classes = appendClass(classes, parseValue(arg));
         }
       }
-      return classes.join(' ');
+      return classes;
+    }
+    function parseValue(arg) {
+      if (typeof arg === 'string' || typeof arg === 'number') {
+        return arg;
+      }
+      if (_typeof$1(arg) !== 'object') {
+        return '';
+      }
+      if (Array.isArray(arg)) {
+        return classNames.apply(null, arg);
+      }
+      if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+        return arg.toString();
+      }
+      var classes = '';
+      for (var key in arg) {
+        if (hasOwn.call(arg, key) && arg[key]) {
+          classes = appendClass(classes, key);
+        }
+      }
+      return classes;
+    }
+    function appendClass(value, newClass) {
+      if (!newClass) {
+        return value;
+      }
+      if (value) {
+        return value + ' ' + newClass;
+      }
+      return value + newClass;
     }
     if (module.exports) {
       classNames["default"] = classNames;
@@ -1286,7 +1297,7 @@ var Stack = function Stack(_ref) {
   }, rest), children);
 };
 
-var omit$2 = function omit(obj) {
+var omit$1 = function omit(obj) {
   for (var _len = arguments.length, keys = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     keys[_key - 1] = arguments[_key];
   }
@@ -1337,7 +1348,7 @@ var isEmpty = function isEmpty(obj) {
 var StatesProps = function StatesProps(_ref) {
   var props = _ref.props,
     children = _ref.children;
-  var childrenProps = omit$2.apply(void 0, [children.props].concat(_toConsumableArray(Object.keys(props || {}))));
+  var childrenProps = omit$1.apply(void 0, [children.props].concat(_toConsumableArray(Object.keys(props || {}))));
   return /*#__PURE__*/React__default.createElement(Stack, {
     className: "StatesProps",
     space: 2,
@@ -1377,41 +1388,70 @@ var States = function States(_ref) {
   }));
 };
 
-var _assign = function __assign() {
-  _assign = Object.assign || function __assign(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+var __assign$b = function() {
+  __assign$b = Object.assign || function __assign(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+      return t;
   };
-  return _assign.apply(this, arguments);
+  return __assign$b.apply(this, arguments);
 };
+
 function __rest$a(s, e) {
   var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+              t[p[i]] = s[p[i]];
+      }
   return t;
 }
 
 /** @deprecated */
 function __spreadArrays() {
   for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-  for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j];
+  for (var r = Array(s), k = 0, i = 0; i < il; i++)
+      for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+          r[k] = a[j];
   return r;
 }
+
 function __spreadArray(to, from, pack) {
   if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-    if (ar || !(i in from)) {
-      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-      ar[i] = from[i];
-    }
+      if (ar || !(i in from)) {
+          if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+          ar[i] = from[i];
+      }
   }
   return to.concat(ar || Array.prototype.slice.call(from));
 }
 
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 var zeroRightClassName = 'right-scroll-bar-position';
 var fullWidthClassName = 'width-before-scroll-bar';
 var noScrollbarsClassName = 'with-scroll-bars-hidden';
@@ -1484,6 +1524,7 @@ function useCallbackRef(initialValue, callback) {
   return ref.facade;
 }
 
+var currentValues = new WeakMap();
 /**
  * Merges two or more refs together providing a single interface to set their value
  * @param {RefObject|Ref} refs
@@ -1499,11 +1540,32 @@ function useCallbackRef(initialValue, callback) {
  * }
  */
 function useMergeRefs(refs, defaultValue) {
-  return useCallbackRef(defaultValue || null, function (newValue) {
+  var callbackRef = useCallbackRef(defaultValue || null, function (newValue) {
     return refs.forEach(function (ref) {
       return assignRef(ref, newValue);
     });
   });
+  // handle refs changes - added or removed
+  React.useLayoutEffect(function () {
+    var oldValue = currentValues.get(callbackRef);
+    if (oldValue) {
+      var prevRefs_1 = new Set(oldValue);
+      var nextRefs_1 = new Set(refs);
+      var current_1 = callbackRef.current;
+      prevRefs_1.forEach(function (ref) {
+        if (!nextRefs_1.has(ref)) {
+          assignRef(ref, null);
+        }
+      });
+      nextRefs_1.forEach(function (ref) {
+        if (!prevRefs_1.has(ref)) {
+          assignRef(ref, current_1);
+        }
+      });
+    }
+    currentValues.set(callbackRef, refs);
+  }, [refs]);
+  return callbackRef;
 }
 
 function ItoI(a) {
@@ -1594,7 +1656,7 @@ function createSidecarMedium(options) {
     options = {};
   }
   var medium = innerCreateMedium(null);
-  medium.options = _assign({
+  medium.options = __assign$b({
     async: true,
     ssr: false
   }, options);
@@ -1611,7 +1673,7 @@ var SideCar$1 = function SideCar(_a) {
   if (!Target) {
     throw new Error('Sidecar medium not found');
   }
-  return /*#__PURE__*/React.createElement(Target, _assign({}, rest));
+  return /*#__PURE__*/React.createElement(Target, __assign$b({}, rest));
 };
 SideCar$1.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -1652,7 +1714,7 @@ var RemoveScroll = /*#__PURE__*/React.forwardRef(function (props, parentRef) {
     rest = __rest$a(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as", "gapMode"]);
   var SideCar = sideCar;
   var containerRef = useMergeRefs([ref, parentRef]);
-  var containerProps = _assign(_assign({}, rest), callbacks);
+  var containerProps = __assign$b(__assign$b({}, rest), callbacks);
   return /*#__PURE__*/React.createElement(React.Fragment, null, enabled && ( /*#__PURE__*/React.createElement(SideCar, {
     sideCar: effectCar$1,
     removeScrollBar: removeScrollBar,
@@ -1663,9 +1725,9 @@ var RemoveScroll = /*#__PURE__*/React.forwardRef(function (props, parentRef) {
     allowPinchZoom: !!allowPinchZoom,
     lockRef: ref,
     gapMode: gapMode
-  })), forwardProps ? ( /*#__PURE__*/React.cloneElement(React.Children.only(children), _assign(_assign({}, containerProps), {
+  })), forwardProps ? ( /*#__PURE__*/React.cloneElement(React.Children.only(children), __assign$b(__assign$b({}, containerProps), {
     ref: containerRef
-  }))) : ( /*#__PURE__*/React.createElement(Container, _assign({}, containerProps, {
+  }))) : ( /*#__PURE__*/React.createElement(Container, __assign$b({}, containerProps, {
     className: className,
     ref: containerRef
   }), children)));
@@ -2971,7 +3033,7 @@ var FocusLock = /*#__PURE__*/React.forwardRef(function FocusLockUI(props, parent
   var hasLeadingGuards = noFocusGuards !== true;
   var hasTailingGuards = hasLeadingGuards && noFocusGuards !== 'tail';
   var mergedRef = useMergeRefs([parentRef, setObserveNode]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, hasLeadingGuards && [
+  return /*#__PURE__*/React.createElement(React.Fragment, null, hasLeadingGuards && [/*#__PURE__*/
   // nearest focus guard
   React.createElement("div", {
     key: "guard-first",
@@ -3055,14 +3117,7 @@ FocusLock.defaultProps = {
 var FocusLockUI = FocusLock;
 
 function deferAction(action) {
-  // Hidding setImmediate from Webpack to avoid inserting polyfill
-  var _window = window,
-    setImmediate = _window.setImmediate;
-  if (typeof setImmediate !== 'undefined') {
-    setImmediate(action);
-  } else {
-    setTimeout(action, 1);
-  }
+  setTimeout(action, 1);
 }
 
 var effectCar = createSidecarMedium();
@@ -3101,7 +3156,7 @@ var FocusOn$1 = /*#__PURE__*/React.forwardRef(function (props, parentRef) {
   var onActivation = lockProps.onActivation,
     onDeactivation = lockProps.onDeactivation,
     restProps = __rest$a(lockProps, ["onActivation", "onDeactivation"]);
-  var appliedLockProps = _assign(_assign({}, restProps), {
+  var appliedLockProps = __assign$b(__assign$b({}, restProps), {
     as: as,
     style: style,
     sideCar: sideCar,
@@ -3126,7 +3181,7 @@ var FocusOn$1 = /*#__PURE__*/React.forwardRef(function (props, parentRef) {
     lockProps: appliedLockProps,
     focusOptions: preventScrollOnFocus ? PREVENT_SCROLL : undefined,
     as: RemoveScroll
-  }, children), enabled && ( /*#__PURE__*/React.createElement(SideCar, _assign({}, rest, {
+  }, children), enabled && ( /*#__PURE__*/React.createElement(SideCar, __assign$b({}, rest, {
     sideCar: effectCar,
     setLockProps: setLockProps,
     shards: shards
@@ -3147,34 +3202,34 @@ function _inheritsLoose(subClass, superClass) {
   _setPrototypeOf(subClass, superClass);
 }
 
-function _typeof(obj) {
+function _typeof(o) {
   "@babel/helpers - typeof";
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
 }
 
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
+function toPrimitive(t, r) {
+  if ("object" != _typeof(t) || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != _typeof(i)) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (hint === "string" ? String : Number)(input);
+  return ("string" === r ? String : Number)(t);
 }
 
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
+function toPropertyKey(t) {
+  var i = toPrimitive(t, "string");
+  return "symbol" == _typeof(i) ? i : String(i);
 }
 
 function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
+  key = toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -3439,17 +3494,29 @@ var filterAutoFocusable = function filterAutoFocusable(nodes, cache) {
   });
 };
 /**
- * only tabbable ones
- * (but with guards which would be ignored)
+ * !__WARNING__! Low level API.
+ * @returns all tabbable nodes
+ *
+ * @see {@link getFocusableNodes} to get any focusable element
+ *
+ * @param topNodes - array of top level HTMLElements to search inside
+ * @param visibilityCache - an cache to store intermediate measurements. Expected to be a fresh `new Map` on every call
  */
 var getTabbableNodes = function getTabbableNodes(topNodes, visibilityCache, withGuards) {
   return orderByTabIndex(filterFocusable(getFocusables(topNodes, withGuards), visibilityCache), true, withGuards);
 };
 /**
- * actually anything "focusable", not only tabbable
- * (without guards, as long as they are not expected to be focused)
+ * !__WARNING__! Low level API.
+ *
+ * @returns anything "focusable", not only tabbable. The difference is in `tabIndex=-1`
+ * (without guards, as long as they are not expected to be ever focused)
+ *
+ * @see {@link getTabbableNodes} to get only tabble nodes element
+ *
+ * @param topNodes - array of top level HTMLElements to search inside
+ * @param visibilityCache - an cache to store intermediate measurements. Expected to be a fresh `new Map` on every call
  */
-var getAllTabbableNodes = function getAllTabbableNodes(topNodes, visibilityCache) {
+var getFocusableNodes = function getFocusableNodes(topNodes, visibilityCache) {
   return orderByTabIndex(filterFocusable(getFocusables(topNodes), visibilityCache), false);
 };
 /**
@@ -3521,8 +3588,8 @@ var getTopParent = function getTopParent(node) {
 };
 /**
  * returns all "focus containers" inside a given node
- * @param node
- * @returns {T}
+ * @param node - node or nodes to look inside
+ * @returns Element[]
  */
 var getAllAffectedNodes = function getAllAffectedNodes(node) {
   var nodes = asArray(node);
@@ -3544,6 +3611,10 @@ var safeProbe = function safeProbe(cb) {
 /**
  * returns active element from document or from nested shadowdoms
  */
+/**
+ * returns current active element. If the active element is a "container" itself(shadowRoot or iframe) returns active element inside it
+ * @param [inDocument]
+ */
 var getActiveElement = function getActiveElement(inDocument) {
   if (inDocument === void 0) {
     inDocument = document;
@@ -3566,7 +3637,8 @@ var focusInsideIframe = function focusInsideIframe(topNode, activeElement) {
   }));
 };
 /**
- * @returns {Boolean} true, if the current focus is inside given node or nodes
+ * @returns {Boolean} true, if the current focus is inside given node or nodes.
+ * Supports nodes hidden inside shadowDom
  */
 var focusInside = function focusInside(topNode, activeElement) {
   // const activeElement = document && getActiveElement();
@@ -3582,8 +3654,11 @@ var focusInside = function focusInside(topNode, activeElement) {
 };
 
 /**
- * focus is hidden FROM the focus-lock
+ * checks if focus is hidden FROM the focus-lock
  * ie contained inside a node focus-lock shall ignore
+ *
+ * This is a utility function coupled with {@link FOCUS_ALLOW} constant
+ *
  * @returns {boolean} focus is currently is in "allow" area
  */
 var focusIsHidden = function focusIsHidden(inDocument) {
@@ -3808,16 +3883,21 @@ var reorderNodes = function reorderNodes(srcNodes, dstNodes) {
   }).filter(isDefined);
 };
 /**
- * given top node(s) and the last active element return the element to be focused next
+ * contains the main logic of the `focus-lock` package.
+ *
+ * ! you probably dont need this function !
+ *
+ * given top node(s) and the last active element returns the element to be focused next
+ * @returns element which should be focused to move focus inside
  * @param topNode
  * @param lastNode
  */
-var getFocusMerge = function getFocusMerge(topNode, lastNode) {
+var focusSolver = function focusSolver(topNode, lastNode) {
   var activeElement = getActiveElement(asArray(topNode).length > 0 ? document : getFirst(topNode).ownerDocument);
   var entries = getAllAffectedNodes(topNode).filter(isNotAGuard);
   var commonParent = getTopCommonParent(activeElement || topNode, topNode, entries);
   var visibilityCache = new Map();
-  var anyFocusable = getAllTabbableNodes(entries, visibilityCache);
+  var anyFocusable = getFocusableNodes(entries, visibilityCache);
   var innerElements = getTabbableNodes(entries, visibilityCache).filter(function (_a) {
     var node = _a.node;
     return isNotAGuard(node);
@@ -3828,7 +3908,7 @@ var getFocusMerge = function getFocusMerge(topNode, lastNode) {
       return undefined;
     }
   }
-  var outerNodes = getAllTabbableNodes([commonParent], visibilityCache).map(function (_a) {
+  var outerNodes = getFocusableNodes([commonParent], visibilityCache).map(function (_a) {
     var node = _a.node;
     return node;
   });
@@ -3856,10 +3936,10 @@ var getFocusMerge = function getFocusMerge(topNode, lastNode) {
 };
 
 /**
- * return list of focusable elements inside a given top node
- * @deprecated use {@link getFocusableIn}. Yep, there is typo in the function name
+ * @returns list of focusable elements inside a given top node
+ * @see {@link getFocusableNodes} for lower level access
  */
-var getFocusabledIn = function getFocusabledIn(topNode) {
+var expandFocusableNodes = function expandFocusableNodes(topNode) {
   var entries = getAllAffectedNodes(topNode).filter(isNotAGuard);
   var commonParent = getTopCommonParent(topNode, topNode, entries);
   var visibilityCache = new Map();
@@ -3891,26 +3971,34 @@ var focusOn = function focusOn(target, focusOptions) {
     target.contentWindow.focus();
   }
 };
+
 var guardCount = 0;
 var lockDisabled = false;
 /**
- * Sets focus at a given node. The last focused element will help to determine which element(first or last) should be focused.
+ * The main functionality of the focus-lock package
+ *
+ * Contains focus at a given node.
+ * The last focused element will help to determine which element(first or last) should be focused.
+ * The found element will be focused.
+ *
+ * This is one time action (move), not a persistent focus-lock
+ *
  * HTML markers (see {@link import('./constants').FOCUS_AUTO} constants) can control autofocus
- * @param topNode
- * @param lastNode
- * @param options
+ * @see {@link focusSolver} for the same functionality without autofocus
  */
-var setFocus = function setFocus(topNode, lastNode, options) {
+var moveFocusInside = function moveFocusInside(topNode, lastNode, options) {
   if (options === void 0) {
     options = {};
   }
-  var focusable = getFocusMerge(topNode, lastNode);
+  var focusable = focusSolver(topNode, lastNode);
+  // global local side effect to countain recursive lock activation and resolve focus-fighting
   if (lockDisabled) {
     return;
   }
   if (focusable) {
+    /** +FOCUS-FIGHTING prevention **/
     if (guardCount > 2) {
-      // tslint:disable-next-line:no-console
+      // we have recursive entered back the lock activation
       console.error('FocusLock: focus-fighting detected. Only one focus management system could be active. ' + 'See https://github.com/theKashey/focus-lock/#focus-fighting');
       lockDisabled = true;
       setTimeout(function () {
@@ -4023,7 +4111,7 @@ var activateTrap = function activateTrap() {
               }
               document.body.focus();
             } else {
-              result = setFocus(workingArea, lastActiveFocus, {
+              result = moveFocusInside(workingArea, lastActiveFocus, {
                 focusOptions: focusOptions
               });
               lastPortaledElement = {};
@@ -4035,7 +4123,7 @@ var activateTrap = function activateTrap() {
       }
       if (document) {
         var newActiveElement = document && document.activeElement;
-        var allNodes = getFocusabledIn(workingArea);
+        var allNodes = expandFocusableNodes(workingArea);
         var focusedIndex = allNodes.map(function (_ref) {
           var node = _ref.node;
           return node;
@@ -4085,9 +4173,9 @@ process.env.NODE_ENV !== "production" ? {
 var onWindowBlur = function onWindowBlur() {
   focusWasOutsideWindow = 'just'; // using setTimeout to set  this variable after React/sidecar reaction
 
-  setTimeout(function () {
+  deferAction(function () {
     focusWasOutsideWindow = 'meanwhile';
-  }, 0);
+  });
 };
 var attachHandler = function attachHandler() {
   document.addEventListener('focusin', onTrap);
@@ -4141,7 +4229,7 @@ mediumFocus.assignSyncMedium(onFocus);
 mediumBlur.assignMedium(onBlur);
 mediumEffect.assignMedium(function (cb) {
   return cb({
-    moveFocusInside: setFocus,
+    moveFocusInside: moveFocusInside,
     focusInside: focusInside
   });
 });
@@ -4149,11 +4237,7 @@ var FocusTrap = withSideEffect(reducePropsToState, handleStateChangeOnClient)(Fo
 
 exportSidecar(mediumSidecar, FocusTrap);
 
-var currentNonce;
 var getNonce = function getNonce() {
-  if (currentNonce) {
-    return currentNonce;
-  }
   if (typeof __webpack_nonce__ !== 'undefined') {
     return __webpack_nonce__;
   }
@@ -4422,15 +4506,20 @@ var handleScroll = function handleScroll(axis, endTarget, event, sourceDelta, no
         availableScrollTop += position;
       }
     }
-    target = target.parentNode;
+    if (target instanceof ShadowRoot) {
+      target = target.host;
+    } else {
+      target = target.parentNode;
+    }
   } while (
   // portaled content
   !targetInLock && target !== document.body ||
   // self content
   targetInLock && (endTarget.contains(target) || endTarget === target));
-  if (isDeltaPositive && (noOverscroll && availableScroll === 0 || !noOverscroll && delta > availableScroll)) {
+  // handle epsilon around 0 (non standard zoom levels)
+  if (isDeltaPositive && (noOverscroll && Math.abs(availableScroll) < 1 || !noOverscroll && delta > availableScroll)) {
     shouldCancelScroll = true;
-  } else if (!isDeltaPositive && (noOverscroll && availableScrollTop === 0 || !noOverscroll && -delta > availableScrollTop)) {
+  } else if (!isDeltaPositive && (noOverscroll && Math.abs(availableScrollTop) < 1 || !noOverscroll && -delta > availableScrollTop)) {
     shouldCancelScroll = true;
   }
   return shouldCancelScroll;
@@ -4525,7 +4614,7 @@ function RemoveScrollSideCar(props) {
     }
     var delta = 'deltaY' in event ? getDeltaXY(event) : getTouchXY(event);
     var sourceEvent = shouldPreventQueue.current.filter(function (e) {
-      return e.name === event.type && e.target === event.target && deltaCompare(e.delta, delta);
+      return e.name === event.type && (e.target === event.target || event.target === e.shadowParent) && deltaCompare(e.delta, delta);
     })[0];
     // self event, and should be canceled
     if (sourceEvent && sourceEvent.should) {
@@ -4552,7 +4641,8 @@ function RemoveScrollSideCar(props) {
       name: name,
       delta: delta,
       target: target,
-      should: should
+      should: should,
+      shadowParent: getOutermostShadowParent(target)
     };
     shouldPreventQueue.current.push(event);
     setTimeout(function () {
@@ -4598,6 +4688,17 @@ function RemoveScrollSideCar(props) {
     gapMode: props.gapMode
   }) : null);
 }
+function getOutermostShadowParent(node) {
+  var shadowParent = null;
+  while (node !== null) {
+    if (node instanceof ShadowRoot) {
+      shadowParent = node.host;
+      node = node.host;
+    }
+    node = node.parentNode;
+  }
+  return shadowParent;
+}
 
 exportSidecar(effectCar$1, RemoveScrollSideCar);
 
@@ -4851,10 +4952,10 @@ function Effect(_a) {
 var SideCar = exportSidecar(effectCar, Effect);
 
 var RequireSideCar = function RequireSideCar(props) {
-  return /*#__PURE__*/React.createElement(SideCar, _assign({}, props));
+  return /*#__PURE__*/React.createElement(SideCar, __assign$b({}, props));
 };
 var FocusOn = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(FocusOn$1, _assign({}, props, {
+  return /*#__PURE__*/React.createElement(FocusOn$1, __assign$b({}, props, {
     ref: ref,
     sideCar: RequireSideCar
   }));
@@ -5341,7 +5442,6 @@ _curry2(function curryN(length, fn) {
   }
   return _arity(length, _curryN(length, [], fn));
 });
-var curryN$1 = curryN;
 
 /**
  * Optimized internal three-arity curry function.
@@ -5500,16 +5600,15 @@ function _objectIs(a, b) {
 }
 var _objectIs$1 = typeof Object.is === 'function' ? Object.is : _objectIs;
 
-var toString$2 = Object.prototype.toString;
+var toString$1 = Object.prototype.toString;
 var _isArguments = /*#__PURE__*/
 function () {
-  return toString$2.call(arguments) === '[object Arguments]' ? function _isArguments(x) {
-    return toString$2.call(x) === '[object Arguments]';
+  return toString$1.call(arguments) === '[object Arguments]' ? function _isArguments(x) {
+    return toString$1.call(x) === '[object Arguments]';
   } : function _isArguments(x) {
     return _has('callee', x);
   };
 }();
-var _isArguments$1 = _isArguments;
 
 var hasEnumBug = ! /*#__PURE__*/
 {
@@ -5561,7 +5660,7 @@ _curry1(function keys(obj) {
   }
   var prop, nIdx;
   var ks = [];
-  var checkArgsLength = hasArgsEnumBug && _isArguments$1(obj);
+  var checkArgsLength = hasArgsEnumBug && _isArguments(obj);
   for (prop in obj) {
     if (_has(prop, obj) && (!checkArgsLength || prop !== 'length')) {
       ks[ks.length] = prop;
@@ -5579,7 +5678,6 @@ _curry1(function keys(obj) {
   }
   return ks;
 });
-var keys$1 = keys;
 
 /**
  * Gives a single-word string description of the (native) type of a value,
@@ -5612,7 +5710,6 @@ var type = /*#__PURE__*/
 _curry1(function type(val) {
   return val === null ? 'Null' : val === undefined ? 'Undefined' : Object.prototype.toString.call(val).slice(8, -1);
 });
-var type$1 = type;
 
 /**
  * private _uniqContentEquals function.
@@ -5640,8 +5737,8 @@ function _equals(a, b, stackA, stackB) {
   if (_objectIs$1(a, b)) {
     return true;
   }
-  var typeA = type$1(a);
-  if (typeA !== type$1(b)) {
+  var typeA = type(a);
+  if (typeA !== type(b)) {
     return false;
   }
   if (typeof a['fantasy-land/equals'] === 'function' || typeof b['fantasy-land/equals'] === 'function') {
@@ -5720,8 +5817,8 @@ function _equals(a, b, stackA, stackB) {
       // Values of other types are only equal if identical.
       return false;
   }
-  var keysA = keys$1(a);
-  if (keysA.length !== keys$1(b).length) {
+  var keysA = keys(a);
+  if (keysA.length !== keys(b).length) {
     return false;
   }
   var extendedStackA = stackA.concat([a]);
@@ -5767,7 +5864,6 @@ var equals = /*#__PURE__*/
 _curry2(function equals(a, b) {
   return _equals(a, b, [], []);
 });
-var equals$1 = equals;
 
 function _indexOf(list, a, idx) {
   var inf, item; // Array.prototype.indexOf doesn't exist below IE9
@@ -5815,7 +5911,7 @@ function _indexOf(list, a, idx) {
   } // anything else not covered above, defer to R.equals
 
   while (idx < list.length) {
-    if (equals$1(list[idx], a)) {
+    if (equals(list[idx], a)) {
       return idx;
     }
     idx += 1;
@@ -5855,7 +5951,6 @@ var _toISOString = typeof Date.prototype.toISOString === 'function' ? function _
 } : function _toISOString(d) {
   return d.getUTCFullYear() + '-' + pad(d.getUTCMonth() + 1) + '-' + pad(d.getUTCDate()) + 'T' + pad(d.getUTCHours()) + ':' + pad(d.getUTCMinutes()) + ':' + pad(d.getUTCSeconds()) + '.' + (d.getUTCMilliseconds() / 1000).toFixed(3).slice(2, 5) + 'Z';
 };
-var _toISOString$1 = _toISOString;
 
 function _complement(f) {
   return function () {
@@ -5946,11 +6041,10 @@ _dispatchable(['fantasy-land/filter', 'filter'], _xfilter, function (pred, filte
       acc[key] = filterable[key];
     }
     return acc;
-  }, {}, keys$1(filterable)) :
+  }, {}, keys(filterable)) :
   // else
   _filter(pred, filterable);
 }));
-var filter$1 = filter;
 
 /**
  * The complement of [`filter`](#filter).
@@ -5979,7 +6073,7 @@ var filter$1 = filter;
 
 var reject = /*#__PURE__*/
 _curry2(function reject(pred, filterable) {
-  return filter$1(_complement(pred), filterable);
+  return filter(_complement(pred), filterable);
 });
 var reject$1 = reject;
 
@@ -6000,11 +6094,11 @@ function _toString(x, seen) {
     case '[object Array]':
       return '[' + _map(recur, x).concat(mapPairs(x, reject$1(function (k) {
         return /^\d+$/.test(k);
-      }, keys$1(x)))).join(', ') + ']';
+      }, keys(x)))).join(', ') + ']';
     case '[object Boolean]':
       return _typeof$1(x) === 'object' ? 'new Boolean(' + recur(x.valueOf()) + ')' : x.toString();
     case '[object Date]':
-      return 'new Date(' + (isNaN(x.valueOf()) ? recur(NaN) : _quote(_toISOString$1(x))) + ')';
+      return 'new Date(' + (isNaN(x.valueOf()) ? recur(NaN) : _quote(_toISOString(x))) + ')';
     case '[object Map]':
       return 'new Map(' + recur(Array.from(x)) + ')';
     case '[object Null]':
@@ -6024,7 +6118,7 @@ function _toString(x, seen) {
           return repr;
         }
       }
-      return '{' + mapPairs(x, keys$1(x)).join(', ') + '}';
+      return '{' + mapPairs(x, keys(x)).join(', ') + '}';
   }
 }
 
@@ -6069,7 +6163,6 @@ var toString = /*#__PURE__*/
 _curry1(function toString(val) {
   return _toString(val, []);
 });
-var toString$1 = toString;
 
 /**
  * Returns the larger of its two arguments.
@@ -6108,8 +6201,8 @@ _curry2(function max(a, b) {
   if (maxByType !== undefined) {
     return maxByType === _typeof$1(a) ? a : b;
   }
-  var stringA = toString$1(a);
-  var maxByStringValue = safeMax(stringA, toString$1(b));
+  var stringA = toString(a);
+  var maxByStringValue = safeMax(stringA, toString(b));
   if (maxByStringValue !== undefined) {
     return maxByStringValue === stringA ? a : b;
   }
@@ -6178,19 +6271,18 @@ _curry2( /*#__PURE__*/
 _dispatchable(['fantasy-land/map', 'map'], _xmap$1, function map(fn, functor) {
   switch (Object.prototype.toString.call(functor)) {
     case '[object Function]':
-      return curryN$1(functor.length, function () {
+      return curryN(functor.length, function () {
         return fn.call(this, functor.apply(this, arguments));
       });
     case '[object Object]':
       return _arrayReduce(function (acc, key) {
         acc[key] = fn(functor[key]);
         return acc;
-      }, {}, keys$1(functor));
+      }, {}, keys(functor));
     default:
       return _map(fn, functor);
   }
 }));
-var map$1 = map;
 
 function _isString(x) {
   return Object.prototype.toString.call(x) === '[object String]';
@@ -6237,12 +6329,11 @@ _curry1(function isArrayLike(x) {
   }
   return false;
 });
-var _isArrayLike$1 = _isArrayLike;
 
 var symIterator = typeof Symbol !== 'undefined' ? Symbol.iterator : '@@iterator';
 function _createReduce(arrayReduce, methodReduce, iterableReduce) {
   return function _reduce(xf, acc, list) {
-    if (_isArrayLike$1(list)) {
+    if (_isArrayLike(list)) {
       return arrayReduce(xf, acc, list);
     }
     if (list == null) {
@@ -6307,7 +6398,6 @@ _curry2(function bind(fn, thisObj) {
     return fn.apply(thisObj, arguments);
   });
 });
-var bind$1 = bind;
 
 function _xIterableReduce(xf, acc, iter) {
   var step = iter.next();
@@ -6322,11 +6412,10 @@ function _xIterableReduce(xf, acc, iter) {
   return xf['@@transducer/result'](acc);
 }
 function _xMethodReduce(xf, acc, obj, methodName) {
-  return xf['@@transducer/result'](obj[methodName](bind$1(xf['@@transducer/step'], xf), acc));
+  return xf['@@transducer/result'](obj[methodName](bind(xf['@@transducer/step'], xf), acc));
 }
 var _xReduce = /*#__PURE__*/
 _createReduce(_xArrayReduce, _xMethodReduce, _xIterableReduce);
-var _xReduce$1 = _xReduce;
 
 var XWrap = /*#__PURE__*/
 function () {
@@ -6403,7 +6492,7 @@ function _xwrap(fn) {
 
 var reduce = /*#__PURE__*/
 _curry3(function (xf, acc, list) {
-  return _xReduce$1(typeof xf === 'function' ? _xwrap(xf) : xf, acc, list);
+  return _xReduce(typeof xf === 'function' ? _xwrap(xf) : xf, acc, list);
 });
 var reduce$1 = reduce;
 
@@ -6469,7 +6558,7 @@ var identity$1 = identity;
 
 var cond = /*#__PURE__*/
 _curry1(function cond(pairs) {
-  var arity = reduce$1(max$1, 0, map$1(function (pair) {
+  var arity = reduce$1(max$1, 0, map(function (pair) {
     return pair[0].length;
   }, pairs));
   return _arity(arity, function () {
@@ -6482,7 +6571,6 @@ _curry1(function cond(pairs) {
     }
   });
 });
-var cond$1 = cond;
 
 var _Set = /*#__PURE__*/
 function () {
@@ -6649,14 +6737,12 @@ function hasOrAdd(item, shouldAdd, set) {
   }
 } // A simple Set type that honours R.equals semantics
 
-var _Set$1 = _Set;
-
 var XUniqBy = /*#__PURE__*/
 function () {
   function XUniqBy(f, xf) {
     this.xf = xf;
     this.f = f;
-    this.set = new _Set$1();
+    this.set = new _Set();
   }
   XUniqBy.prototype['@@transducer/init'] = _xfBase.init;
   XUniqBy.prototype['@@transducer/result'] = _xfBase.result;
@@ -6695,7 +6781,7 @@ function _xuniqBy(f) {
 var uniqBy = /*#__PURE__*/
 _curry2( /*#__PURE__*/
 _dispatchable([], _xuniqBy, function (fn, list) {
-  var set = new _Set$1();
+  var set = new _Set();
   var result = [];
   var idx = 0;
   var appliedItem, item;
@@ -6709,7 +6795,6 @@ _dispatchable([], _xuniqBy, function (fn, list) {
   }
   return result;
 }));
-var uniqBy$1 = uniqBy;
 
 /**
  * Returns a new list containing only one copy of each element in the original
@@ -6730,8 +6815,7 @@ var uniqBy$1 = uniqBy;
  */
 
 var uniq = /*#__PURE__*/
-uniqBy$1(identity$1);
-var uniq$1 = uniq;
+uniqBy(identity$1);
 
 function _isNumber(x) {
   return Object.prototype.toString.call(x) === '[object Number]';
@@ -6771,7 +6855,6 @@ _curry2(function omit(names, obj) {
   }
   return result;
 });
-var omit$1 = omit;
 
 /**
  * Returns a list of numbers from `from` (inclusive) to `to` (exclusive).
@@ -6803,7 +6886,6 @@ _curry2(function range(from, to) {
   }
   return result;
 });
-var range$1 = range;
 
 var breakpointKeys = Object.keys(dist$4.breakpoints);
 
@@ -6922,7 +7004,7 @@ var Breakpoint = function Breakpoint(_ref) {
     matches = _useBreakpoint.matches;
   return matches ? /*#__PURE__*/React__default.createElement("div", _extends$1({
     className: classNames('Breakpoint', "Breakpoint--".concat(mode, "-").concat(breakpoint), className)
-  }, omit$1(['at', 'gt', 'lt'], rest)), children) : null;
+  }, omit(['at', 'gt', 'lt'], rest)), children) : null;
 };
 
 var _excluded$v = ["secondary", "tertiary", "elevated", "chip", "hover", "focus", "disabled", "className"];
@@ -9677,6 +9759,7 @@ var Search20 = function Search20(_a) {
     })
   }, rest), /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 20 20",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
     style: svgStyle
   }, /*#__PURE__*/React.createElement("desc", null, "Created with Sketch."), /*#__PURE__*/React.createElement("g", {
     id: "Search_20_svg__Icons/Search/20",
@@ -9691,12 +9774,14 @@ var Search20 = function Search20(_a) {
 };
 Search20.displayName = 'Search20';
 
-var _excluded$o = ["className", "onChange", "onClear", "value"];
+var _excluded$o = ["className", "onChange", "onClear", "roundBorders", "value"];
 var DEFAULT_INPUT_VALUE = '';
 var SearchInput = function SearchInput(_ref) {
   var className = _ref.className,
     onChange = _ref.onChange,
     onClear = _ref.onClear,
+    _ref$roundBorders = _ref.roundBorders,
+    roundBorders = _ref$roundBorders === void 0 ? false : _ref$roundBorders,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? DEFAULT_INPUT_VALUE : _ref$value,
     rest = _objectWithoutProperties(_ref, _excluded$o);
@@ -9724,7 +9809,9 @@ var SearchInput = function SearchInput(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "SearchInput__icon"
   }, /*#__PURE__*/React__default.createElement(Search20, null)), /*#__PURE__*/React__default.createElement(TextInput, _extends$1({
-    className: "SearchInput__input",
+    className: classNames('SearchInput__input', {
+      'SearchInput__input--round-borders': roundBorders
+    }),
     onChange: handleChange,
     value: controlledValue,
     ref: ref
@@ -9743,8 +9830,8 @@ var t = function t(_t) {
   },
   n = function n(t, _n) {
     if (t.clientHeight < t.scrollHeight || t.clientWidth < t.scrollWidth) {
-      var _l = getComputedStyle(t, null);
-      return e$1(_l.overflowY, _n) || e$1(_l.overflowX, _n) || function (t) {
+      var _o = getComputedStyle(t, null);
+      return e$1(_o.overflowY, _n) || e$1(_o.overflowX, _n) || function (t) {
         var e = function (t) {
           if (!t.ownerDocument || !t.ownerDocument.defaultView) return null;
           try {
@@ -9758,84 +9845,97 @@ var t = function t(_t) {
     }
     return !1;
   },
-  l = function l(t, e, n, _l2, i, o, r, d) {
-    return o < t && r > e || o > t && r < e ? 0 : o <= t && d <= n || r >= e && d >= n ? o - t - _l2 : r > e && d < n || o < t && d > n ? r - e + i : 0;
+  o$1 = function o(t, e, n, _o2, l, r, i, s) {
+    return r < t && i > e || r > t && i < e ? 0 : r <= t && s <= n || i >= e && s >= n ? r - t - _o2 : i > e && s < n || r < t && s > n ? i - e + l : 0;
   },
-  i = function i(t) {
+  l = function l(t) {
     var e = t.parentElement;
     return null == e ? t.getRootNode().host || null : e;
   },
-  o$1 = function o(e, _o2) {
-    var r, d, h, f;
+  r = function r(e, _r2) {
+    var i, s, d, h;
     if ("undefined" == typeof document) return [];
-    var u = _o2.scrollMode,
-      s = _o2.block,
-      c = _o2.inline,
-      a = _o2.boundary,
-      g = _o2.skipOverflowHiddenElements,
-      m = "function" == typeof a ? a : function (t) {
+    var c = _r2.scrollMode,
+      f = _r2.block,
+      u = _r2.inline,
+      a = _r2.boundary,
+      g = _r2.skipOverflowHiddenElements,
+      p = "function" == typeof a ? a : function (t) {
         return t !== a;
       };
     if (!t(e)) throw new TypeError("Invalid target");
-    var p = document.scrollingElement || document.documentElement,
-      w = [],
-      W = e;
-    for (; t(W) && m(W);) {
-      if (W = i(W), W === p) {
+    var m = document.scrollingElement || document.documentElement,
+      w = [];
+    var W = e;
+    for (; t(W) && p(W);) {
+      if (W = l(W), W === m) {
         w.push(W);
         break;
       }
       null != W && W === document.body && n(W) && !n(document.documentElement) || null != W && n(W, g) && w.push(W);
     }
-    var H = null != (d = null == (r = window.visualViewport) ? void 0 : r.width) ? d : innerWidth,
-      b = null != (f = null == (h = window.visualViewport) ? void 0 : h.height) ? f : innerHeight,
+    var b = null != (s = null == (i = window.visualViewport) ? void 0 : i.width) ? s : innerWidth,
+      H = null != (h = null == (d = window.visualViewport) ? void 0 : d.height) ? h : innerHeight,
       _window = window,
-      v = _window.scrollX,
-      y = _window.scrollY,
+      y = _window.scrollX,
+      M = _window.scrollY,
       _e$getBoundingClientR = e.getBoundingClientRect(),
-      E = _e$getBoundingClientR.height,
-      M = _e$getBoundingClientR.width,
+      v = _e$getBoundingClientR.height,
+      E = _e$getBoundingClientR.width,
       x = _e$getBoundingClientR.top,
-      I = _e$getBoundingClientR.right,
-      C = _e$getBoundingClientR.bottom,
+      C = _e$getBoundingClientR.right,
+      I = _e$getBoundingClientR.bottom,
       R = _e$getBoundingClientR.left,
-      T = "start" === s || "nearest" === s ? x : "end" === s ? C : x + E / 2,
-      V = "center" === c ? R + M / 2 : "end" === c ? I : R,
-      k = [];
+      _ref = function (t) {
+        var e = window.getComputedStyle(t);
+        return {
+          top: parseFloat(e.scrollMarginTop) || 0,
+          right: parseFloat(e.scrollMarginRight) || 0,
+          bottom: parseFloat(e.scrollMarginBottom) || 0,
+          left: parseFloat(e.scrollMarginLeft) || 0
+        };
+      }(e),
+      T = _ref.top,
+      B = _ref.right,
+      F = _ref.bottom,
+      V = _ref.left;
+    var k = "start" === f || "nearest" === f ? x - T : "end" === f ? I + F : x + v / 2 - T + F,
+      D = "center" === u ? R + E / 2 - V + B : "end" === u ? C + B : R - V;
+    var L = [];
     for (var _t2 = 0; _t2 < w.length; _t2++) {
       var _e2 = w[_t2],
         _e$getBoundingClientR2 = _e2.getBoundingClientRect(),
         _n2 = _e$getBoundingClientR2.height,
-        _i = _e$getBoundingClientR2.width,
-        _o = _e$getBoundingClientR2.top,
-        _r = _e$getBoundingClientR2.right,
-        _d = _e$getBoundingClientR2.bottom,
-        _h = _e$getBoundingClientR2.left;
-      if ("if-needed" === u && x >= 0 && R >= 0 && C <= b && I <= H && x >= _o && C <= _d && R >= _h && I <= _r) return k;
-      var _f = getComputedStyle(_e2),
-        _a = parseInt(_f.borderLeftWidth, 10),
-        _g = parseInt(_f.borderTopWidth, 10),
-        _m = parseInt(_f.borderRightWidth, 10),
-        _W = parseInt(_f.borderBottomWidth, 10),
-        B = 0,
-        D = 0,
-        L = "offsetWidth" in _e2 ? _e2.offsetWidth - _e2.clientWidth - _a - _m : 0,
-        S = "offsetHeight" in _e2 ? _e2.offsetHeight - _e2.clientHeight - _g - _W : 0,
-        X = "offsetWidth" in _e2 ? 0 === _e2.offsetWidth ? 0 : _i / _e2.offsetWidth : 0,
-        Y = "offsetHeight" in _e2 ? 0 === _e2.offsetHeight ? 0 : _n2 / _e2.offsetHeight : 0;
-      if (p === _e2) B = "start" === s ? T : "end" === s ? T - b : "nearest" === s ? l(y, y + b, b, _g, _W, y + T, y + T + E, E) : T - b / 2, D = "start" === c ? V : "center" === c ? V - H / 2 : "end" === c ? V - H : l(v, v + H, H, _a, _m, v + V, v + V + M, M), B = Math.max(0, B + y), D = Math.max(0, D + v);else {
-        B = "start" === s ? T - _o - _g : "end" === s ? T - _d + _W + S : "nearest" === s ? l(_o, _d, _n2, _g, _W + S, T, T + E, E) : T - (_o + _n2 / 2) + S / 2, D = "start" === c ? V - _h - _a : "center" === c ? V - (_h + _i / 2) + L / 2 : "end" === c ? V - _r + _m + L : l(_h, _r, _i, _a, _m + L, V, V + M, M);
+        _l = _e$getBoundingClientR2.width,
+        _r = _e$getBoundingClientR2.top,
+        _i = _e$getBoundingClientR2.right,
+        _s = _e$getBoundingClientR2.bottom,
+        _d = _e$getBoundingClientR2.left;
+      if ("if-needed" === c && x >= 0 && R >= 0 && I <= H && C <= b && x >= _r && I <= _s && R >= _d && C <= _i) return L;
+      var _h = getComputedStyle(_e2),
+        _a = parseInt(_h.borderLeftWidth, 10),
+        _g = parseInt(_h.borderTopWidth, 10),
+        _p = parseInt(_h.borderRightWidth, 10),
+        _W = parseInt(_h.borderBottomWidth, 10);
+      var _T = 0,
+        _B = 0;
+      var _F = "offsetWidth" in _e2 ? _e2.offsetWidth - _e2.clientWidth - _a - _p : 0,
+        _V = "offsetHeight" in _e2 ? _e2.offsetHeight - _e2.clientHeight - _g - _W : 0,
+        S = "offsetWidth" in _e2 ? 0 === _e2.offsetWidth ? 0 : _l / _e2.offsetWidth : 0,
+        X = "offsetHeight" in _e2 ? 0 === _e2.offsetHeight ? 0 : _n2 / _e2.offsetHeight : 0;
+      if (m === _e2) _T = "start" === f ? k : "end" === f ? k - H : "nearest" === f ? o$1(M, M + H, H, _g, _W, M + k, M + k + v, v) : k - H / 2, _B = "start" === u ? D : "center" === u ? D - b / 2 : "end" === u ? D - b : o$1(y, y + b, b, _a, _p, y + D, y + D + E, E), _T = Math.max(0, _T + M), _B = Math.max(0, _B + y);else {
+        _T = "start" === f ? k - _r - _g : "end" === f ? k - _s + _W + _V : "nearest" === f ? o$1(_r, _s, _n2, _g, _W + _V, k, k + v, v) : k - (_r + _n2 / 2) + _V / 2, _B = "start" === u ? D - _d - _a : "center" === u ? D - (_d + _l / 2) + _F / 2 : "end" === u ? D - _i + _p + _F : o$1(_d, _i, _l, _a, _p + _F, D, D + E, E);
         var _t3 = _e2.scrollLeft,
-          _f2 = _e2.scrollTop;
-        B = Math.max(0, Math.min(_f2 + B / Y, _e2.scrollHeight - _n2 / Y + S)), D = Math.max(0, Math.min(_t3 + D / X, _e2.scrollWidth - _i / X + L)), T += _f2 - B, V += _t3 - D;
+          _h2 = _e2.scrollTop;
+        _T = 0 === X ? 0 : Math.max(0, Math.min(_h2 + _T / X, _e2.scrollHeight - _n2 / X + _V)), _B = 0 === S ? 0 : Math.max(0, Math.min(_t3 + _B / S, _e2.scrollWidth - _l / S + _F)), k += _h2 - _T, D += _t3 - _B;
       }
-      k.push({
+      L.push({
         el: _e2,
-        top: B,
-        left: D
+        top: _T,
+        left: _B
       });
     }
-    return k;
+    return L;
   };
 
 var o = function o(t) {
@@ -9849,7 +9949,7 @@ var o = function o(t) {
     inline: "nearest"
   };
 };
-function e(e, r) {
+function e(e, r$1) {
   if (!e.isConnected || !function (t) {
     var o = t;
     for (; o && o.parentNode;) {
@@ -9869,9 +9969,9 @@ function e(e, r) {
   }(e);
   if (function (t) {
     return "object" == _typeof$1(t) && "function" == typeof t.behavior;
-  }(r)) return r.behavior(o$1(e, r));
-  var l = "boolean" == typeof r || null == r ? void 0 : r.behavior;
-  var _iterator = _createForOfIteratorHelper(o$1(e, o(r))),
+  }(r$1)) return r$1.behavior(r(e, r$1));
+  var l = "boolean" == typeof r$1 || null == r$1 ? void 0 : r$1.behavior;
+  var _iterator = _createForOfIteratorHelper(r(e, o(r$1))),
     _step;
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
@@ -10322,7 +10422,7 @@ var MultiSelect = function MultiSelect(_ref) {
     dispatch({
       type: 'SELECT',
       payload: {
-        value: uniq$1([].concat(_toConsumableArray(values), [option.value]))
+        value: uniq([].concat(_toConsumableArray(values), [option.value]))
       }
     });
   }, [dispatch, values]);
@@ -11070,6 +11170,7 @@ var ChevronLeft16 = function ChevronLeft16(_a) {
     })
   }, rest), /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 16 16",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
     style: svgStyle
   }, /*#__PURE__*/React.createElement("desc", null, "Created with Sketch."), /*#__PURE__*/React.createElement("g", {
     id: "ChevronLeft_16_svg__Icons/Chevron/Left/16",
@@ -11130,6 +11231,7 @@ var ChevronRight16 = function ChevronRight16(_a) {
     })
   }, rest), /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 16 16",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
     style: svgStyle
   }, /*#__PURE__*/React.createElement("desc", null, "Created with Sketch."), /*#__PURE__*/React.createElement("g", {
     id: "ChevronRight_16_svg__Icons/Chevron/Right/16",
@@ -11162,19 +11264,19 @@ var whenCurrentPageIsGreaterThanHalfTheTotal = function whenCurrentPageIsGreater
   return page >= totalPages - Math.floor(maxPages / 2);
 };
 var showAllPages = function showAllPages(_, totalPages) {
-  return range$1(1, totalPages + 1);
+  return range(1, totalPages + 1);
 };
 var showFirstNPagesAndLastPage = function showFirstNPagesAndLastPage(_, totalPages, maxPages) {
-  return [].concat(_toConsumableArray(range$1(1, maxPages)), [totalPages]);
+  return [].concat(_toConsumableArray(range(1, maxPages)), [totalPages]);
 };
 var showTheLastNPages = function showTheLastNPages(_, totalPages, maxPages) {
-  return [1].concat(_toConsumableArray(range$1(totalPages - maxPages + 2, totalPages + 1)));
+  return [1].concat(_toConsumableArray(range(totalPages - maxPages + 2, totalPages + 1)));
 };
 var showAGroupOfPagesCenteredOnTheCurrentPage = function showAGroupOfPagesCenteredOnTheCurrentPage(page, totalPages, maxPages) {
   var diff = Math.floor((maxPages - 2) / 2);
-  return [1].concat(_toConsumableArray(range$1(page - diff, page + diff + 1)), [totalPages]);
+  return [1].concat(_toConsumableArray(range(page - diff, page + diff + 1)), [totalPages]);
 };
-var determinePagesToShow = cond$1([[whenThereAreFewerPagesThanWeDisplay, showAllPages], [whenCurrentPageIsLessThanHalfTheTotal, showFirstNPagesAndLastPage], [whenCurrentPageIsGreaterThanHalfTheTotal, showTheLastNPages], [otherwise, showAGroupOfPagesCenteredOnTheCurrentPage]]);
+var determinePagesToShow = cond([[whenThereAreFewerPagesThanWeDisplay, showAllPages], [whenCurrentPageIsLessThanHalfTheTotal, showFirstNPagesAndLastPage], [whenCurrentPageIsGreaterThanHalfTheTotal, showTheLastNPages], [otherwise, showAGroupOfPagesCenteredOnTheCurrentPage]]);
 var Paginator = function Paginator(_ref) {
   var selectedPage = _ref.selectedPage,
     totalPages = _ref.totalPages,