@moda/om 18.0.0 → 18.1.0

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [18.1.0](https://github.com/ModaOperandi/om/compare/v18.0.0...v18.1.0) (2022-12-29)
+
+
+### Features
+
+* accessibility improvements ([#3148](https://github.com/ModaOperandi/om/issues/3148)) ([7aecb1d](https://github.com/ModaOperandi/om/commit/7aecb1ddd9f6923b28bb5c99427ad884acb78fd2))
+
 # [18.0.0](https://github.com/ModaOperandi/om/compare/v17.14.2...v18.0.0) (2022-12-01)
 
 

package/dist/index.cjs.js

@@ -516,7 +516,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],
@@ -669,7 +673,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') {
@@ -702,7 +710,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);
 
@@ -918,7 +926,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;
@@ -942,11 +950,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) {
@@ -1185,7 +1193,11 @@ 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 */
@@ -1230,7 +1242,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) {
@@ -1669,9 +1681,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 = {};
 
@@ -1955,7 +1975,7 @@ function requireReactIs_development() {
 
 var hasRequiredReactIs;
 function requireReactIs() {
-  if (hasRequiredReactIs) return reactIs.exports;
+  if (hasRequiredReactIs) return reactIsExports;
   hasRequiredReactIs = 1;
   (function (module) {
 
@@ -1965,7 +1985,7 @@ function requireReactIs() {
       module.exports = requireReactIs_development();
     }
   })(reactIs);
-  return reactIs.exports;
+  return reactIsExports;
 }
 
 /*
@@ -2822,7 +2842,7 @@ var hiddenGuard = {
   left: '1px'
 };
 process.env.NODE_ENV !== "production" ? {
-  children: propTypes.exports.node
+  children: propTypesExports.node
 } : {};
 
 var mediumFocus = createMedium({}, function (_ref) {
@@ -2987,25 +3007,25 @@ var FocusLock = /*#__PURE__*/React__namespace.forwardRef(function FocusLockUI(pr
   }));
 });
 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,
@@ -3978,7 +3998,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
@@ -6647,7 +6667,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%',
@@ -6665,6 +6685,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 = React.useState((_ref2 = checked !== null && checked !== void 0 ? checked : defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -6678,18 +6699,19 @@ var Checkbox = function Checkbox(_ref) {
     onChange && onChange(event);
   }, [onChange, checked]);
   return /*#__PURE__*/React.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.createElement("span", {
     tabIndex: -1,
     className: classNames('Checkbox__indicator', {
       'Checkbox__indicator--disabled': disabled
     })
   }, isChecked && /*#__PURE__*/React.createElement(React.Fragment, null, checkIcon === 'checkmark' && /*#__PURE__*/React.createElement(Checkmark16, CHECKED_ITEM_PROPS), checkIcon === 'circle' && /*#__PURE__*/React.createElement(Circle12, CHECKED_ITEM_PROPS))), /*#__PURE__*/React.createElement("input", _extends$1({
+    id: id,
     tabIndex: -1,
     className: "Checkbox__input",
     type: "checkbox",
@@ -6697,7 +6719,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.createElement("span", {
     className: "Checkbox__label"
   }, children));
@@ -6827,7 +6849,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;
@@ -8413,7 +8439,7 @@ function requireReactInputMask_development() {
     module.exports = requireReactInputMask_development();
   }
 })(reactInputMask);
-var InputMask = /*@__PURE__*/getDefaultExportFromCjs(reactInputMask.exports);
+var InputMask = /*@__PURE__*/getDefaultExportFromCjs(reactInputMaskExports);
 
 var cardTypes$1 = {
   visa: {
@@ -9171,9 +9197,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,
@@ -9182,7 +9210,7 @@ var Text = function Text(_ref) {
     children = _ref.children,
     style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded$p);
-  return /*#__PURE__*/React.createElement("span", _extends$1({
+  return /*#__PURE__*/React.createElement(Component, _extends$1({
     className: classNames("Text Text--".concat(treatment, " ").concat(family ? "Text--".concat(family) : ''), className),
     style: _objectSpread2({
       color: dist$4.colors.all[color]
@@ -9361,57 +9389,138 @@ var SearchInput = function SearchInput(_ref) {
   }, /*#__PURE__*/React.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}var i=function(e,i){var o=window,l=i.scrollMode,d=i.block,f=i.inline,h=i.boundary,u=i.skipOverflowHiddenElements,s="function"==typeof h?h:function(t){return t!==h};if(!t(e))throw new TypeError("Invalid target");for(var a,c,g=document.scrollingElement||document.documentElement,p=[],m=e;t(m)&&s(m);){if((m=null==(c=(a=m).parentElement)?a.getRootNode().host||null:c)===g){p.push(m);break}null!=m&&m===document.body&&n(m)&&!n(document.documentElement)||null!=m&&n(m,u)&&p.push(m);}for(var w=o.visualViewport?o.visualViewport.width:innerWidth,v=o.visualViewport?o.visualViewport.height:innerHeight,W=window.scrollX||pageXOffset,H=window.scrollY||pageYOffset,b=e.getBoundingClientRect(),y=b.height,E=b.width,M=b.top,V=b.right,x=b.bottom,I=b.left,C="start"===d||"nearest"===d?M:"end"===d?x:M+y/2,R="center"===f?I+E/2:"end"===f?V:I,T=[],k=0;k<p.length;k++){var B=p[k],D=B.getBoundingClientRect(),O=D.height,X=D.width,Y=D.top,L=D.right,S=D.bottom,j=D.left;if("if-needed"===l&&M>=0&&I>=0&&x<=v&&V<=w&&M>=Y&&x<=S&&I>=j&&V<=L)return T;var N=getComputedStyle(B),q=parseInt(N.borderLeftWidth,10),z=parseInt(N.borderTopWidth,10),A=parseInt(N.borderRightWidth,10),F=parseInt(N.borderBottomWidth,10),G=0,J=0,K="offsetWidth"in B?B.offsetWidth-B.clientWidth-q-A:0,P="offsetHeight"in B?B.offsetHeight-B.clientHeight-z-F:0,Q="offsetWidth"in B?0===B.offsetWidth?0:X/B.offsetWidth:0,U="offsetHeight"in B?0===B.offsetHeight?0:O/B.offsetHeight:0;if(g===B)G="start"===d?C:"end"===d?C-v:"nearest"===d?r(H,H+v,v,z,F,H+C,H+C+y,y):C-v/2,J="start"===f?R:"center"===f?R-w/2:"end"===f?R-w:r(W,W+w,w,q,A,W+R,W+R+E,E),G=Math.max(0,G+H),J=Math.max(0,J+W);else {G="start"===d?C-Y-z:"end"===d?C-S+F+P:"nearest"===d?r(Y,S,O,z,F+P,C,C+y,y):C-(Y+O/2)+P/2,J="start"===f?R-j-q:"center"===f?R-(j+X/2)+K/2:"end"===f?R-L+A+K:r(j,L,X,q,A+K,R,R+E,E);var Z=B.scrollLeft,$=B.scrollTop;C+=$-(G=Math.max(0,Math.min($+G/U,B.scrollHeight-O/U+P))),R+=Z-(J=Math.max(0,Math.min(Z+J/Q,B.scrollWidth-X/Q+K)));}T.push({el:B,top:G,left:J});}return T};
-
-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;
+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);
     }
-  });
-}
-function getOptions(options) {
-  if (options === false) {
-    return {
-      block: 'end',
-      inline: 'nearest'
+    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 (!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 != 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
+    });
   }
-  if (isOptionsObject(options)) {
-    return options;
-  }
-  return {
-    block: 'start',
-    inline: 'nearest'
+  return D;
+};
+
+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 ? i(target, options) : []);
-  }
-  if (!isTargetAttached) {
-    return;
-  }
-  var computeOptions = getOptions(options);
-  return defaultBehavior(i(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) {
@@ -9428,7 +9537,7 @@ var SelectOption = function SelectOption(_ref) {
   }, [onClick, option]);
   React.useEffect(function () {
     if (active && ref.current) {
-      scrollIntoView(ref.current, {
+      o(ref.current, {
         scrollMode: 'if-needed',
         block: 'nearest'
       });
@@ -9507,11 +9616,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.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,
@@ -9641,8 +9750,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,
@@ -9704,7 +9812,7 @@ var Select = function Select(_ref) {
     });
   }, [options, state.focused]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends$1({
-    id: idRef ? "Select--".concat(idRef) : undefined,
+    id: idRef && "Select--".concat(idRef),
     className: classNames('Select', {
       'Select--disabled': disabled,
       'Select--error': error
@@ -9716,7 +9824,7 @@ var Select = function Select(_ref) {
     type: "hidden",
     value: state.value
   }), /*#__PURE__*/React.createElement(Clickable, {
-    id: "Select__value--".concat(idRef),
+    id: idRef && "Select__value--".concat(idRef),
     className: "Select__value",
     disabled: disabled,
     onClick: handleToggle,
@@ -11159,6 +11267,7 @@ var SlidingPane = function SlidingPane(_ref) {
     family: "serif"
   }, title), /*#__PURE__*/React.createElement(Clickable, {
     className: "SlidingPane__close",
+    "aria-label": "Close",
     onClick: onClose
   }, /*#__PURE__*/React.createElement(Exit16, null))), /*#__PURE__*/React.createElement("div", {
     className: "SlidingPane__content"