@moda/om 17.14.2 → 18.1.0

package/dist/index.esm.js

@@ -496,7 +496,11 @@ breakpoints.breakpoints = {
 
 var helpers = {};
 
-var colorString = {exports: {}};
+var colorStringExports = {};
+var colorString = {
+  get exports(){ return colorStringExports; },
+  set exports(v){ colorStringExports = v; },
+};
 
 var colorName = {
   "aliceblue": [240, 248, 255],
@@ -649,7 +653,11 @@ var colorName = {
   "yellowgreen": [154, 205, 50]
 };
 
-var simpleSwizzle = {exports: {}};
+var simpleSwizzleExports = {};
+var simpleSwizzle = {
+  get exports(){ return simpleSwizzleExports; },
+  set exports(v){ simpleSwizzleExports = v; },
+};
 
 var isArrayish$1 = function isArrayish(obj) {
   if (!obj || typeof obj === 'string') {
@@ -682,7 +690,7 @@ swizzle$1.wrap = function (fn) {
 
 /* MIT license */
 var colorNames = colorName;
-var swizzle = simpleSwizzle.exports;
+var swizzle = simpleSwizzleExports;
 var hasOwnProperty = Object.hasOwnProperty;
 var reverseNames = Object.create(null);
 
@@ -898,7 +906,7 @@ function hexDouble(num) {
     value: true
   });
   exports.spacing = exports.colorInHex = exports.color = exports.remToUnitlessPx = exports.text = void 0;
-  var colorString$1 = colorString.exports;
+  var colorString = colorStringExports;
   var colors_1 = colors;
   var space_1 = space;
   var typography_1 = typography;
@@ -922,11 +930,11 @@ function hexDouble(num) {
     var color = colors_1.colors.all[name];
     return alpha != null ?
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    colorString$1.to.rgb(__spreadArray(__spreadArray([], ((_a = colorString$1.get.rgb(color)) === null || _a === void 0 ? void 0 : _a.slice(0, 3)) || [], true), [alpha], false)) : color;
+    colorString.to.rgb(__spreadArray(__spreadArray([], ((_a = colorString.get.rgb(color)) === null || _a === void 0 ? void 0 : _a.slice(0, 3)) || [], true), [alpha], false)) : color;
   };
   exports.color = color;
   var colorInHex = function colorInHex(name, alpha) {
-    return colorString$1.to.hex(colorString$1.get.rgb((0, exports.color)(name, alpha)));
+    return colorString.to.hex(colorString.get.rgb((0, exports.color)(name, alpha)));
   };
   exports.colorInHex = colorInHex;
   var spacing = function spacing(topY, rightX, bottom, left) {
@@ -997,6 +1005,33 @@ function hexDouble(num) {
   __exportStar(helpers, exports);
 })(dist$4);
 
+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 ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -1028,6 +1063,7 @@ function _typeof(obj) {
   }, _typeof(obj);
 }
 function _defineProperty$1(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -1099,30 +1135,6 @@ function _arrayWithHoles(arr) {
 function _iterableToArray(iter) {
   if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _s, _e;
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-  return _arr;
-}
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -1142,12 +1154,30 @@ function _nonIterableSpread() {
 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 _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;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
 
 var isRenderProps = function isRenderProps(children) {
   return typeof children === 'function';
 };
 
-var classnames = {exports: {}};
+var classnamesExports = {};
+var classnames = {
+  get exports(){ return classnamesExports; },
+  set exports(v){ classnamesExports = v; },
+};
 
 (function (module) {
   /* global define */
@@ -1192,7 +1222,7 @@ var classnames = {exports: {}};
     }
   })();
 })(classnames);
-var classNames = classnames.exports;
+var classNames = classnamesExports;
 
 var _excluded$F = ["className", "children", "space", "direction", "alignItems", "justifyContent", "style"];
 var Stack = function Stack(_ref) {
@@ -1631,9 +1661,17 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-var propTypes = {exports: {}};
+var propTypesExports = {};
+var propTypes = {
+  get exports(){ return propTypesExports; },
+  set exports(v){ propTypesExports = v; },
+};
 
-var reactIs = {exports: {}};
+var reactIsExports = {};
+var reactIs = {
+  get exports(){ return reactIsExports; },
+  set exports(v){ reactIsExports = v; },
+};
 
 var reactIs_production_min = {};
 
@@ -1917,7 +1955,7 @@ function requireReactIs_development() {
 
 var hasRequiredReactIs;
 function requireReactIs() {
-  if (hasRequiredReactIs) return reactIs.exports;
+  if (hasRequiredReactIs) return reactIsExports;
   hasRequiredReactIs = 1;
   (function (module) {
 
@@ -1927,7 +1965,7 @@ function requireReactIs() {
       module.exports = requireReactIs_development();
     }
   })(reactIs);
-  return reactIs.exports;
+  return reactIsExports;
 }
 
 /*
@@ -2784,7 +2822,7 @@ var hiddenGuard = {
   left: '1px'
 };
 process.env.NODE_ENV !== "production" ? {
-  children: propTypes.exports.node
+  children: propTypesExports.node
 } : {};
 
 var mediumFocus = createMedium({}, function (_ref) {
@@ -2949,25 +2987,25 @@ var FocusLock = /*#__PURE__*/React.forwardRef(function FocusLockUI(props, parent
   }));
 });
 FocusLock.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: propTypes.exports.node,
-  disabled: propTypes.exports.bool,
-  returnFocus: propTypes.exports.oneOfType([propTypes.exports.bool, propTypes.exports.object, propTypes.exports.func]),
-  focusOptions: propTypes.exports.object,
-  noFocusGuards: propTypes.exports.bool,
-  hasPositiveIndices: propTypes.exports.bool,
-  allowTextSelection: propTypes.exports.bool,
-  autoFocus: propTypes.exports.bool,
-  persistentFocus: propTypes.exports.bool,
-  crossFrame: propTypes.exports.bool,
-  group: propTypes.exports.string,
-  className: propTypes.exports.string,
-  whiteList: propTypes.exports.func,
-  shards: propTypes.exports.arrayOf(propTypes.exports.any),
-  as: propTypes.exports.oneOfType([propTypes.exports.string, propTypes.exports.func, propTypes.exports.object]),
-  lockProps: propTypes.exports.object,
-  onActivation: propTypes.exports.func,
-  onDeactivation: propTypes.exports.func,
-  sideCar: propTypes.exports.any.isRequired
+  children: propTypesExports.node,
+  disabled: propTypesExports.bool,
+  returnFocus: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.object, propTypesExports.func]),
+  focusOptions: propTypesExports.object,
+  noFocusGuards: propTypesExports.bool,
+  hasPositiveIndices: propTypesExports.bool,
+  allowTextSelection: propTypesExports.bool,
+  autoFocus: propTypesExports.bool,
+  persistentFocus: propTypesExports.bool,
+  crossFrame: propTypesExports.bool,
+  group: propTypesExports.string,
+  className: propTypesExports.string,
+  whiteList: propTypesExports.func,
+  shards: propTypesExports.arrayOf(propTypesExports.any),
+  as: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.func, propTypesExports.object]),
+  lockProps: propTypesExports.object,
+  onActivation: propTypesExports.func,
+  onDeactivation: propTypesExports.func,
+  sideCar: propTypesExports.any.isRequired
 } : {};
 FocusLock.defaultProps = {
   children: undefined,
@@ -3354,9 +3392,16 @@ var parentAutofocusables = function parentAutofocusables(topNode, visibilityCach
  * Determines if element is contained in scope, including nested shadow DOMs
  */
 var contains$1 = function contains(scope, element) {
-  return (scope.shadowRoot ? contains(scope.shadowRoot, element) : Object.getPrototypeOf(scope).contains.call(scope, element)) || toArray(scope.children).some(function (child) {
-    return contains(child, element);
-  });
+  if (scope.shadowRoot) {
+    return contains(scope.shadowRoot, element);
+  } else {
+    if (Object.getPrototypeOf(scope).contains !== undefined && Object.getPrototypeOf(scope).contains.call(scope, element)) {
+      return true;
+    }
+    return toArray(scope.children).some(function (child) {
+      return contains(child, element);
+    });
+  }
 };
 
 /**
@@ -3566,6 +3611,32 @@ var newFocus = function newFocus(innerNodes, outerNodes, activeElement, lastNode
   return undefined;
 };
 
+var findAutoFocused = function findAutoFocused(autoFocusables) {
+  return function (node) {
+    var _a;
+    var autofocus = (_a = getDataset(node)) === null || _a === void 0 ? void 0 : _a.autofocus;
+    return (
+      // @ts-expect-error
+      node.autofocus ||
+      //
+      autofocus !== undefined && autofocus !== 'false' ||
+      //
+      autoFocusables.indexOf(node) >= 0
+    );
+  };
+};
+var pickAutofocus = function pickAutofocus(nodesIndexes, orderedNodes, groups) {
+  var nodes = nodesIndexes.map(function (_a) {
+    var node = _a.node;
+    return node;
+  });
+  var autoFocusable = filterAutoFocusable(nodes.filter(findAutoFocused(groups)));
+  if (autoFocusable && autoFocusable.length) {
+    return pickFirstFocus(autoFocusable);
+  }
+  return pickFirstFocus(filterAutoFocusable(orderedNodes));
+};
+
 var getParents = function getParents(node, parents) {
   if (parents === void 0) {
     parents = [];
@@ -3626,13 +3697,6 @@ var allParentAutofocusables = function allParentAutofocusables(entries, visibili
   }, []);
 };
 
-var findAutoFocused = function findAutoFocused(autoFocusables) {
-  return function (node) {
-    var _a;
-    // @ts-expect-error
-    return node.autofocus || !!((_a = getDataset(node)) === null || _a === void 0 ? void 0 : _a.autofocus) || autoFocusables.indexOf(node) >= 0;
-  };
-};
 var reorderNodes = function reorderNodes(srcNodes, dstNodes) {
   var remap = new Map();
   // no Set(dstNodes) for IE11 :(
@@ -3676,12 +3740,8 @@ var getFocusMerge = function getFocusMerge(topNode, lastNode) {
   });
   var newId = newFocus(innerNodes, outerNodes, activeElement, lastNode);
   if (newId === NEW_FOCUS) {
-    var autoFocusable = filterAutoFocusable(anyFocusable.map(function (_a) {
-      var node = _a.node;
-      return node;
-    })).filter(findAutoFocused(allParentAutofocusables(entries, visibilityCache)));
     return {
-      node: autoFocusable && autoFocusable.length ? pickFirstFocus(autoFocusable) : pickFirstFocus(filterAutoFocusable(innerNodes))
+      node: pickAutofocus(anyFocusable, innerNodes, allParentAutofocusables(entries, visibilityCache))
     };
   }
   if (newId === undefined) {
@@ -3918,7 +3978,7 @@ var FocusWatcher = function FocusWatcher() {
   return null;
 };
 process.env.NODE_ENV !== "production" ? {
-  children: propTypes.exports.node.isRequired
+  children: propTypesExports.node.isRequired
 } : {};
 var onWindowBlur = function onWindowBlur() {
   focusWasOutsideWindow = 'just'; // using setTimeout to set  this variable after React/sidecar reaction
@@ -4089,11 +4149,6 @@ var parse = function parse(x) {
 };
 var getOffset = function getOffset(gapMode) {
   var cs = window.getComputedStyle(document.body);
-  if (process.env.NODE_ENV !== 'production') {
-    if (cs.overflowY === 'hidden') {
-      console.error('react-remove-scroll-bar: cannot calculate scrollbar size because it is removed (overflow:hidden on body');
-    }
-  }
   var left = cs[gapMode === 'padding' ? 'paddingLeft' : 'marginLeft'];
   var top = cs[gapMode === 'padding' ? 'paddingTop' : 'marginTop'];
   var right = cs[gapMode === 'padding' ? 'paddingRight' : 'marginRight'];
@@ -4139,6 +4194,11 @@ var RemoveScrollBar = function RemoveScrollBar(props) {
     noImportant = props.noImportant,
     _a = props.gapMode,
     gapMode = _a === void 0 ? 'margin' : _a;
+  /*
+   gap will be measured on every component mount
+   however it will be used only by the "first" invocation
+   due to singleton nature of <Style
+   */
   var gap = React.useMemo(function () {
     return getGapWidth(gapMode);
   }, [gapMode]);
@@ -6587,7 +6647,7 @@ var Circle12 = function Circle12(_a) {
 };
 Circle12.displayName = 'Circle12';
 
-var _excluded$u = ["className", "defaultChecked", "checked", "children", "value", "onChange", "disabled", "checkIcon", "dataTestId"];
+var _excluded$u = ["className", "defaultChecked", "checked", "children", "value", "onChange", "disabled", "checkIcon", "dataTestId", "id"];
 var CHECKED_ITEM_PROPS = {
   className: 'Checkbox__check-mark',
   height: '85%',
@@ -6605,6 +6665,7 @@ var Checkbox = function Checkbox(_ref) {
     _ref$checkIcon = _ref.checkIcon,
     checkIcon = _ref$checkIcon === void 0 ? 'checkmark' : _ref$checkIcon,
     dataTestId = _ref.dataTestId,
+    id = _ref.id,
     rest = _objectWithoutProperties(_ref, _excluded$u);
   var _useState = useState((_ref2 = checked !== null && checked !== void 0 ? checked : defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -6618,18 +6679,19 @@ var Checkbox = function Checkbox(_ref) {
     onChange && onChange(event);
   }, [onChange, checked]);
   return /*#__PURE__*/React__default.createElement("label", {
-    role: "button",
+    htmlFor: id,
     tabIndex: 0,
     className: classNames('Checkbox', className, {
       'Checkbox--disabled': disabled
     }),
-    "data-test-id": "".concat(dataTestId, "--label")
+    "data-test-id": dataTestId && "".concat(dataTestId, "--label")
   }, /*#__PURE__*/React__default.createElement("span", {
     tabIndex: -1,
     className: classNames('Checkbox__indicator', {
       'Checkbox__indicator--disabled': disabled
     })
   }, isChecked && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, checkIcon === 'checkmark' && /*#__PURE__*/React__default.createElement(Checkmark16, CHECKED_ITEM_PROPS), checkIcon === 'circle' && /*#__PURE__*/React__default.createElement(Circle12, CHECKED_ITEM_PROPS))), /*#__PURE__*/React__default.createElement("input", _extends$1({
+    id: id,
     tabIndex: -1,
     className: "Checkbox__input",
     type: "checkbox",
@@ -6637,7 +6699,7 @@ var Checkbox = function Checkbox(_ref) {
     value: value,
     onChange: handleChange,
     disabled: disabled,
-    "data-test-id": "".concat(dataTestId, "--input")
+    "data-test-id": dataTestId && "".concat(dataTestId, "--input")
   }, rest)), children && /*#__PURE__*/React__default.createElement("span", {
     className: "Checkbox__label"
   }, children));
@@ -6767,7 +6829,11 @@ var ExceedConstrain = function ExceedConstrain(_ref) {
   }, rest), children);
 };
 
-var reactInputMask = {exports: {}};
+var reactInputMaskExports = {};
+var reactInputMask = {
+  get exports(){ return reactInputMaskExports; },
+  set exports(v){ reactInputMaskExports = v; },
+};
 
 var reactInputMask_production_min;
 var hasRequiredReactInputMask_production_min;
@@ -8353,7 +8419,7 @@ function requireReactInputMask_development() {
     module.exports = requireReactInputMask_development();
   }
 })(reactInputMask);
-var InputMask = /*@__PURE__*/getDefaultExportFromCjs(reactInputMask.exports);
+var InputMask = /*@__PURE__*/getDefaultExportFromCjs(reactInputMaskExports);
 
 var cardTypes$1 = {
   visa: {
@@ -9111,9 +9177,11 @@ var useUpdateEffect = function useUpdateEffect(effect, deps) {
   }, deps);
 };
 
-var _excluded$p = ["className", "treatment", "color", "family", "children", "style"];
+var _excluded$p = ["as", "className", "treatment", "color", "family", "children", "style"];
 var Text = function Text(_ref) {
-  var className = _ref.className,
+  var _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? 'span' : _ref$as,
+    className = _ref.className,
     _ref$treatment = _ref.treatment,
     treatment = _ref$treatment === void 0 ? 'body1' : _ref$treatment,
     _ref$color = _ref.color,
@@ -9122,7 +9190,7 @@ var Text = function Text(_ref) {
     children = _ref.children,
     style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded$p);
-  return /*#__PURE__*/React__default.createElement("span", _extends$1({
+  return /*#__PURE__*/React__default.createElement(Component, _extends$1({
     className: classNames("Text Text--".concat(treatment, " ").concat(family ? "Text--".concat(family) : ''), className),
     style: _objectSpread2({
       color: dist$4.colors.all[color]
@@ -9257,12 +9325,11 @@ var Search20 = function Search20(_a) {
 };
 Search20.displayName = 'Search20';
 
-var _excluded$o = ["className", "onChange", "onChangeValue", "onClear", "value"];
+var _excluded$o = ["className", "onChange", "onClear", "value"];
 var DEFAULT_INPUT_VALUE = '';
 var SearchInput = function SearchInput(_ref) {
   var className = _ref.className,
     onChange = _ref.onChange,
-    onChangeValue = _ref.onChangeValue,
     onClear = _ref.onClear,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? DEFAULT_INPUT_VALUE : _ref$value,
@@ -9272,13 +9339,13 @@ var SearchInput = function SearchInput(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     controlledValue = _useState2[0],
     setValue = _useState2[1];
-  var handleClick = useCallback(function () {
+  var handleClear = useCallback(function () {
+    var _ref$current;
     setValue(DEFAULT_INPUT_VALUE);
-    onClear && onClear();
-    if (ref.current) {
-      ref.current.focus();
-    }
-  }, [onClear]);
+    onChange === null || onChange === void 0 ? void 0 : onChange(DEFAULT_INPUT_VALUE);
+    onClear === null || onClear === void 0 ? void 0 : onClear();
+    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+  }, [onClear, onChange]);
   var handleChange = useCallback(function (value) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value);
     setValue(value);
@@ -9286,9 +9353,6 @@ var SearchInput = function SearchInput(_ref) {
   useEffect(function () {
     return setValue(value);
   }, [value]);
-  useEffect(function () {
-    onChangeValue && onChangeValue(controlledValue);
-  }, [controlledValue, onChangeValue]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: classNames('SearchInput', className)
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -9300,138 +9364,143 @@ var SearchInput = function SearchInput(_ref) {
     ref: ref
   }, rest)), controlledValue && /*#__PURE__*/React__default.createElement(Clickable, {
     className: "SearchInput__clear",
-    onClick: handleClick,
+    onClick: handleClear,
     type: "reset"
   }, /*#__PURE__*/React__default.createElement(Exit20, null)));
 };
 
-function t(t) {
-  return "object" == _typeof(t) && null != t && 1 === t.nodeType;
-}
-function e(t, e) {
-  return (!e || "hidden" !== t) && "visible" !== t && "clip" !== t;
-}
-function n(t, n) {
-  if (t.clientHeight < t.scrollHeight || t.clientWidth < t.scrollWidth) {
-    var r = getComputedStyle(t, null);
-    return e(r.overflowY, n) || e(r.overflowX, n) || function (t) {
-      var e = function (t) {
-        if (!t.ownerDocument || !t.ownerDocument.defaultView) return null;
-        try {
-          return t.ownerDocument.defaultView.frameElement;
-        } catch (t) {
-          return null;
-        }
-      }(t);
-      return !!e && (e.clientHeight < t.scrollHeight || e.clientWidth < t.scrollWidth);
-    }(t);
-  }
-  return !1;
-}
-function r(t, e, n, r, i, o, l, d) {
-  return o < t && l > e || o > t && l < e ? 0 : o <= t && d <= n || l >= e && d >= n ? o - t - r : l > e && d < n || o < t && d > n ? l - e + i : 0;
-}
-function compute (e, i) {
-  var o = window,
-    l = i.scrollMode,
-    d = i.block,
-    u = i.inline,
-    h = i.boundary,
-    a = i.skipOverflowHiddenElements,
-    c = "function" == typeof h ? h : function (t) {
-      return t !== h;
+var e = function e(_e) {
+    return "object" == _typeof(_e) && null != _e && 1 === _e.nodeType;
+  },
+  t$1 = function t(e, _t) {
+    return (!_t || "hidden" !== e) && "visible" !== e && "clip" !== e;
+  },
+  n = function n(e, _n) {
+    if (e.clientHeight < e.scrollHeight || e.clientWidth < e.scrollWidth) {
+      var _l = getComputedStyle(e, null);
+      return t$1(_l.overflowY, _n) || t$1(_l.overflowX, _n) || function (e) {
+        var t = function (e) {
+          if (!e.ownerDocument || !e.ownerDocument.defaultView) return null;
+          try {
+            return e.ownerDocument.defaultView.frameElement;
+          } catch (e) {
+            return null;
+          }
+        }(e);
+        return !!t && (t.clientHeight < e.scrollHeight || t.clientWidth < e.scrollWidth);
+      }(e);
+    }
+    return !1;
+  },
+  l = function l(e, t, n, _l2, i, o, r, d) {
+    return o < e && r > t || o > e && r < t ? 0 : o <= e && d <= n || r >= t && d >= n ? o - e - _l2 : r > t && d < n || o < e && d > n ? r - t + i : 0;
+  },
+  i = function i(e) {
+    var t = e.parentElement;
+    return null == t ? e.getRootNode().host || null : t;
+  };
+var o$1 = function o(t, _o2) {
+  var r, d, h, f, u, s;
+  if ("undefined" == typeof document) return [];
+  var a = _o2.scrollMode,
+    c = _o2.block,
+    g = _o2.inline,
+    m = _o2.boundary,
+    p = _o2.skipOverflowHiddenElements,
+    w = "function" == typeof m ? m : function (e) {
+      return e !== m;
     };
-  if (!t(e)) throw new TypeError("Invalid target");
-  for (var f = document.scrollingElement || document.documentElement, s = [], p = e; t(p) && c(p);) {
-    if ((p = p.parentElement) === f) {
-      s.push(p);
+  if (!e(t)) throw new TypeError("Invalid target");
+  var W = document.scrollingElement || document.documentElement,
+    H = [],
+    b = t;
+  for (; e(b) && w(b);) {
+    if (b = i(b), b === W) {
+      H.push(b);
       break;
     }
-    null != p && p === document.body && n(p) && !n(document.documentElement) || null != p && n(p, a) && s.push(p);
-  }
-  for (var m = o.visualViewport ? o.visualViewport.width : innerWidth, g = o.visualViewport ? o.visualViewport.height : innerHeight, w = window.scrollX || pageXOffset, v = window.scrollY || pageYOffset, W = e.getBoundingClientRect(), b = W.height, H = W.width, y = W.top, E = W.right, M = W.bottom, V = W.left, x = "start" === d || "nearest" === d ? y : "end" === d ? M : y + b / 2, I = "center" === u ? V + H / 2 : "end" === u ? E : V, C = [], T = 0; T < s.length; T++) {
-    var k = s[T],
-      B = k.getBoundingClientRect(),
-      D = B.height,
-      O = B.width,
-      R = B.top,
-      X = B.right,
-      Y = B.bottom,
-      L = B.left;
-    if ("if-needed" === l && y >= 0 && V >= 0 && M <= g && E <= m && y >= R && M <= Y && V >= L && E <= X) return C;
-    var S = getComputedStyle(k),
-      j = parseInt(S.borderLeftWidth, 10),
-      q = parseInt(S.borderTopWidth, 10),
-      z = parseInt(S.borderRightWidth, 10),
-      A = parseInt(S.borderBottomWidth, 10),
-      F = 0,
-      G = 0,
-      J = "offsetWidth" in k ? k.offsetWidth - k.clientWidth - j - z : 0,
-      K = "offsetHeight" in k ? k.offsetHeight - k.clientHeight - q - A : 0;
-    if (f === k) F = "start" === d ? x : "end" === d ? x - g : "nearest" === d ? r(v, v + g, g, q, A, v + x, v + x + b, b) : x - g / 2, G = "start" === u ? I : "center" === u ? I - m / 2 : "end" === u ? I - m : r(w, w + m, m, j, z, w + I, w + I + H, H), F = Math.max(0, F + v), G = Math.max(0, G + w);else {
-      F = "start" === d ? x - R - q : "end" === d ? x - Y + A + K : "nearest" === d ? r(R, Y, D, q, A + K, x, x + b, b) : x - (R + D / 2) + K / 2, G = "start" === u ? I - L - j : "center" === u ? I - (L + O / 2) + J / 2 : "end" === u ? I - X + z + J : r(L, X, O, j, z + J, I, I + H, H);
-      var N = k.scrollLeft,
-        P = k.scrollTop;
-      x += P - (F = Math.max(0, Math.min(P + F, k.scrollHeight - D + K))), I += N - (G = Math.max(0, Math.min(N + G, k.scrollWidth - O + J)));
-    }
-    C.push({
-      el: k,
-      top: F,
-      left: G
+    null != b && b === document.body && n(b) && !n(document.documentElement) || null != b && n(b, p) && H.push(b);
+  }
+  var v = null != (d = null == (r = window.visualViewport) ? void 0 : r.width) ? d : innerWidth,
+    y = null != (f = null == (h = window.visualViewport) ? void 0 : h.height) ? f : innerHeight,
+    E = null != (u = window.scrollX) ? u : pageXOffset,
+    M = null != (s = window.scrollY) ? s : pageYOffset,
+    _t$getBoundingClientR = t.getBoundingClientRect(),
+    x = _t$getBoundingClientR.height,
+    I = _t$getBoundingClientR.width,
+    C = _t$getBoundingClientR.top,
+    R = _t$getBoundingClientR.right,
+    T = _t$getBoundingClientR.bottom,
+    V = _t$getBoundingClientR.left,
+    k = "start" === c || "nearest" === c ? C : "end" === c ? T : C + x / 2,
+    B = "center" === g ? V + I / 2 : "end" === g ? R : V,
+    D = [];
+  for (var _e2 = 0; _e2 < H.length; _e2++) {
+    var _t2 = H[_e2],
+      _t2$getBoundingClient = _t2.getBoundingClientRect(),
+      _n2 = _t2$getBoundingClient.height,
+      _i = _t2$getBoundingClient.width,
+      _o = _t2$getBoundingClient.top,
+      _r = _t2$getBoundingClient.right,
+      _d = _t2$getBoundingClient.bottom,
+      _h = _t2$getBoundingClient.left;
+    if ("if-needed" === a && C >= 0 && V >= 0 && T <= y && R <= v && C >= _o && T <= _d && V >= _h && R <= _r) return D;
+    var _f = getComputedStyle(_t2),
+      _u = parseInt(_f.borderLeftWidth, 10),
+      _s = parseInt(_f.borderTopWidth, 10),
+      _m = parseInt(_f.borderRightWidth, 10),
+      _p = parseInt(_f.borderBottomWidth, 10),
+      _w = 0,
+      _b = 0,
+      O = "offsetWidth" in _t2 ? _t2.offsetWidth - _t2.clientWidth - _u - _m : 0,
+      X = "offsetHeight" in _t2 ? _t2.offsetHeight - _t2.clientHeight - _s - _p : 0,
+      Y = "offsetWidth" in _t2 ? 0 === _t2.offsetWidth ? 0 : _i / _t2.offsetWidth : 0,
+      L = "offsetHeight" in _t2 ? 0 === _t2.offsetHeight ? 0 : _n2 / _t2.offsetHeight : 0;
+    if (W === _t2) _w = "start" === c ? k : "end" === c ? k - y : "nearest" === c ? l(M, M + y, y, _s, _p, M + k, M + k + x, x) : k - y / 2, _b = "start" === g ? B : "center" === g ? B - v / 2 : "end" === g ? B - v : l(E, E + v, v, _u, _m, E + B, E + B + I, I), _w = Math.max(0, _w + M), _b = Math.max(0, _b + E);else {
+      _w = "start" === c ? k - _o - _s : "end" === c ? k - _d + _p + X : "nearest" === c ? l(_o, _d, _n2, _s, _p + X, k, k + x, x) : k - (_o + _n2 / 2) + X / 2, _b = "start" === g ? B - _h - _u : "center" === g ? B - (_h + _i / 2) + O / 2 : "end" === g ? B - _r + _m + O : l(_h, _r, _i, _u, _m + O, B, B + I, I);
+      var _e3 = _t2.scrollLeft,
+        _f2 = _t2.scrollTop;
+      _w = Math.max(0, Math.min(_f2 + _w / L, _t2.scrollHeight - _n2 / L + X)), _b = Math.max(0, Math.min(_e3 + _b / Y, _t2.scrollWidth - _i / Y + O)), k += _f2 - _w, B += _e3 - _b;
+    }
+    D.push({
+      el: _t2,
+      top: _w,
+      left: _b
     });
   }
-  return C;
-}
+  return D;
+};
 
-function isOptionsObject(options) {
-  return options === Object(options) && Object.keys(options).length !== 0;
-}
-function defaultBehavior(actions, behavior) {
-  if (behavior === void 0) {
-    behavior = 'auto';
-  }
-  var canSmoothScroll = ('scrollBehavior' in document.body.style);
-  actions.forEach(function (_ref) {
-    var el = _ref.el,
-      top = _ref.top,
-      left = _ref.left;
-    if (el.scroll && canSmoothScroll) {
-      el.scroll({
-        top: top,
-        left: left,
-        behavior: behavior
-      });
-    } else {
-      el.scrollTop = top;
-      el.scrollLeft = left;
-    }
-  });
-}
-function getOptions(options) {
-  if (options === false) {
-    return {
-      block: 'end',
-      inline: 'nearest'
-    };
-  }
-  if (isOptionsObject(options)) {
-    return options;
-  }
-  return {
-    block: 'start',
-    inline: 'nearest'
+var t = function t(e) {
+  return !1 === e ? {
+    block: "end",
+    inline: "nearest"
+  } : function (e) {
+    return e === Object(e) && 0 !== Object.keys(e).length;
+  }(e) ? e : {
+    block: "start",
+    inline: "nearest"
   };
-}
-function scrollIntoView(target, options) {
-  var isTargetAttached = target.isConnected || target.ownerDocument.documentElement.contains(target);
-  if (isOptionsObject(options) && typeof options.behavior === 'function') {
-    return options.behavior(isTargetAttached ? compute(target, options) : []);
-  }
-  if (!isTargetAttached) {
-    return;
-  }
-  var computeOptions = getOptions(options);
-  return defaultBehavior(compute(target, computeOptions), computeOptions.behavior);
+};
+function o(o, l) {
+  var n = o.isConnected || o.ownerDocument.documentElement.contains(o);
+  if (function (e) {
+    return "object" == _typeof(e) && "function" == typeof e.behavior;
+  }(l)) return l.behavior(n ? o$1(o, l) : []);
+  if (!n) return;
+  var r = t(l),
+    c = o$1(o, r),
+    i = ("scrollBehavior" in document.body.style);
+  c.forEach(function (e) {
+    var t = e.el,
+      o = e.top,
+      l = e.left;
+    t.scroll && i ? t.scroll({
+      top: o,
+      left: l,
+      behavior: r.behavior
+    }) : (t.scrollTop = o, t.scrollLeft = l);
+  });
 }
 
 var SelectOption = function SelectOption(_ref) {
@@ -9448,7 +9517,7 @@ var SelectOption = function SelectOption(_ref) {
   }, [onClick, option]);
   useEffect(function () {
     if (active && ref.current) {
-      scrollIntoView(ref.current, {
+      o(ref.current, {
         scrollMode: 'if-needed',
         block: 'nearest'
       });
@@ -9527,11 +9596,11 @@ var SelectOptions = function SelectOptions(_ref) {
     tabIndex: -1,
     role: "listbox",
     ref: ref,
-    "aria-labelledby": "Select__label--".concat(idRef),
-    "aria-activedescendant": "SelectOption--".concat(activeOption === null || activeOption === void 0 ? void 0 : activeOption.value, "-").concat(idRef)
+    "aria-labelledby": "Select__label".concat(idRef ? "--".concat(idRef) : ''),
+    "aria-activedescendant": "SelectOption--".concat(activeOption === null || activeOption === void 0 ? void 0 : activeOption.value).concat(idRef ? "-".concat(idRef) : '')
   }, rest), options.map(function (option) {
     return /*#__PURE__*/React__default.createElement(SelectOption, {
-      id: "SelectOption--".concat(option.value, "-").concat(idRef),
+      id: "SelectOption--".concat(option.value).concat(idRef ? "-".concat(idRef) : ''),
       key: option.value,
       option: option,
       dataTestId: dataTestId,
@@ -9661,8 +9730,7 @@ var Select = function Select(_ref) {
     _ref$dropDirection = _ref.dropDirection,
     dropDirection = _ref$dropDirection === void 0 ? 'down' : _ref$dropDirection,
     error = _ref.error,
-    _ref$idRef = _ref.idRef,
-    idRef = _ref$idRef === void 0 ? '' : _ref$idRef,
+    idRef = _ref.idRef,
     _ref$label = _ref.label,
     label = _ref$label === void 0 ? '' : _ref$label,
     name = _ref.name,
@@ -9724,7 +9792,7 @@ var Select = function Select(_ref) {
     });
   }, [options, state.focused]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", _extends$1({
-    id: idRef ? "Select--".concat(idRef) : undefined,
+    id: idRef && "Select--".concat(idRef),
     className: classNames('Select', {
       'Select--disabled': disabled,
       'Select--error': error
@@ -9736,7 +9804,7 @@ var Select = function Select(_ref) {
     type: "hidden",
     value: state.value
   }), /*#__PURE__*/React__default.createElement(Clickable, {
-    id: "Select__value--".concat(idRef),
+    id: idRef && "Select__value--".concat(idRef),
     className: "Select__value",
     disabled: disabled,
     onClick: handleToggle,
@@ -11179,6 +11247,7 @@ var SlidingPane = function SlidingPane(_ref) {
     family: "serif"
   }, title), /*#__PURE__*/React__default.createElement(Clickable, {
     className: "SlidingPane__close",
+    "aria-label": "Close",
     onClick: onClose
   }, /*#__PURE__*/React__default.createElement(Exit16, null))), /*#__PURE__*/React__default.createElement("div", {
     className: "SlidingPane__content"