@redsift/design-system 8.0.0 → 8.0.1

package/index.js

@@ -1,7 +1,7 @@
 import { I18nProvider, useLocalizedStringFormatter, useFocusRing, useNumberFormatter, useFocusWithin } from 'react-aria';
 export { I18nProvider, SSRProvider } from 'react-aria';
 import * as React from 'react';
-import React__default, { useState, useEffect, useContext, useMemo, useRef, useCallback, forwardRef, useReducer, useLayoutEffect, useId as useId$1 } from 'react';
+import React__default, { useState, useEffect, useContext, useRef, useMemo, useCallback, forwardRef, useReducer, useLayoutEffect, useId as useId$1 } from 'react';
 import classNames from 'classnames';
 import { mdiClose, mdiAlert, mdiCheckCircle, mdiAlertCircle, mdiInformation, mdiMenu, mdiMenuOpen, mdiChevronDown, mdiChevronRight, mdiChevronUp, mdiCheckboxMarked, mdiMinusBox, mdiCheckboxBlankOutline, mdiPageLast, mdiKeyboardCaps, mdiRadioboxMarked, mdiRadioboxBlank } from '@redsift/icons';
 import styled, { css, keyframes } from 'styled-components';
@@ -592,7 +592,77 @@ const $704cf1d3b684cc5c$var$defaultContext = {
     isSSR: false
 };
 const $704cf1d3b684cc5c$var$SSRContext = /*#__PURE__*/ (React__default).createContext($704cf1d3b684cc5c$var$defaultContext);
+let $704cf1d3b684cc5c$var$canUseDOM = Boolean(typeof window !== "undefined" && window.document && window.document.createElement);
+let $704cf1d3b684cc5c$var$componentIds = new WeakMap();
+function $704cf1d3b684cc5c$var$useCounter(isDisabled = false) {
+    let ctx = (useContext)($704cf1d3b684cc5c$var$SSRContext);
+    let ref = (useRef)(null);
+    // eslint-disable-next-line rulesdir/pure-render
+    if (ref.current === null && !isDisabled) {
+        var _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner;
+        // In strict mode, React renders components twice, and the ref will be reset to null on the second render.
+        // This means our id counter will be incremented twice instead of once. This is a problem because on the
+        // server, components are only rendered once and so ids generated on the server won't match the client.
+        // In React 18, useId was introduced to solve this, but it is not available in older versions. So to solve this
+        // we need to use some React internals to access the underlying Fiber instance, which is stable between renders.
+        // This is exposed as ReactCurrentOwner in development, which is all we need since StrictMode only runs in development.
+        // To ensure that we only increment the global counter once, we store the starting id for this component in
+        // a weak map associated with the Fiber. On the second render, we reset the global counter to this value.
+        // Since React runs the second render immediately after the first, this is safe.
+        // @ts-ignore
+        let currentOwner = (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = (React__default).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === void 0 ? void 0 : (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner = _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner === void 0 ? void 0 : _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner.current;
+        if (currentOwner) {
+            let prevComponentValue = $704cf1d3b684cc5c$var$componentIds.get(currentOwner);
+            if (prevComponentValue == null) // On the first render, and first call to useId, store the id and state in our weak map.
+            $704cf1d3b684cc5c$var$componentIds.set(currentOwner, {
+                id: ctx.current,
+                state: currentOwner.memoizedState
+            });
+            else if (currentOwner.memoizedState !== prevComponentValue.state) {
+                // On the second render, the memoizedState gets reset by React.
+                // Reset the counter, and remove from the weak map so we don't
+                // do this for subsequent useId calls.
+                ctx.current = prevComponentValue.id;
+                $704cf1d3b684cc5c$var$componentIds.delete(currentOwner);
+            }
+        }
+        // eslint-disable-next-line rulesdir/pure-render
+        ref.current = ++ctx.current;
+    }
+    // eslint-disable-next-line rulesdir/pure-render
+    return ref.current;
+}
+function $704cf1d3b684cc5c$var$useLegacySSRSafeId(defaultId) {
+    let ctx = (useContext)($704cf1d3b684cc5c$var$SSRContext);
+    // If we are rendering in a non-DOM environment, and there's no SSRProvider,
+    // provide a warning to hint to the developer to add one.
+    if (ctx === $704cf1d3b684cc5c$var$defaultContext && !$704cf1d3b684cc5c$var$canUseDOM) console.warn("When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.");
+    let counter = $704cf1d3b684cc5c$var$useCounter(!!defaultId);
+    return defaultId || `react-aria${ctx.prefix}-${counter}`;
+}
+function $704cf1d3b684cc5c$var$useModernSSRSafeId(defaultId) {
+    // @ts-ignore
+    let id = (React__default).useId();
+    let [didSSR] = (useState)($704cf1d3b684cc5c$export$535bd6ca7f90a273());
+    let prefix = didSSR ? "react-aria" : `react-aria${$704cf1d3b684cc5c$var$defaultContext.prefix}`;
+    return defaultId || `${prefix}-${id}`;
+}
+typeof (React__default)["useId"] === "function" ? $704cf1d3b684cc5c$var$useModernSSRSafeId : $704cf1d3b684cc5c$var$useLegacySSRSafeId;
+function $704cf1d3b684cc5c$var$getSnapshot() {
+    return false;
+}
+function $704cf1d3b684cc5c$var$getServerSnapshot() {
+    return true;
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function $704cf1d3b684cc5c$var$subscribe(onStoreChange) {
+    // noop
+    return ()=>{};
+}
 function $704cf1d3b684cc5c$export$535bd6ca7f90a273() {
+    // In React 18, we can use useSyncExternalStore to detect if we're server rendering or hydrating.
+    if (typeof (React__default)["useSyncExternalStore"] === "function") return (React__default)["useSyncExternalStore"]($704cf1d3b684cc5c$var$subscribe, $704cf1d3b684cc5c$var$getSnapshot, $704cf1d3b684cc5c$var$getServerSnapshot);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     let cur = (useContext)($704cf1d3b684cc5c$var$SSRContext);
     return cur.isSSR;
 }
@@ -847,6 +917,121 @@ function $fb18d541ea1ad717$var$getResolvedHourCycle(locale, options) {
     throw new Error("Unexpected hour cycle result");
 }
 
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ /*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+typeof window !== "undefined" ? (React__default).useLayoutEffect : ()=>{};
+
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ // We store a global list of elements that are currently transitioning,
+// mapped to a set of CSS properties that are transitioning for that element.
+// This is necessary rather than a simple count of transitions because of browser
+// bugs, e.g. Chrome sometimes fires both transitionend and transitioncancel rather
+// than one or the other. So we need to track what's actually transitioning so that
+// we can ignore these duplicate events.
+let $bbed8b41f857bcc0$var$transitionsByElement = new Map();
+// A list of callbacks to call once there are no transitioning elements.
+let $bbed8b41f857bcc0$var$transitionCallbacks = new Set();
+function $bbed8b41f857bcc0$var$setupGlobalEvents() {
+    if (typeof window === "undefined") return;
+    let onTransitionStart = (e)=>{
+        // Add the transitioning property to the list for this element.
+        let transitions = $bbed8b41f857bcc0$var$transitionsByElement.get(e.target);
+        if (!transitions) {
+            transitions = new Set();
+            $bbed8b41f857bcc0$var$transitionsByElement.set(e.target, transitions);
+            // The transitioncancel event must be registered on the element itself, rather than as a global
+            // event. This enables us to handle when the node is deleted from the document while it is transitioning.
+            // In that case, the cancel event would have nowhere to bubble to so we need to handle it directly.
+            e.target.addEventListener("transitioncancel", onTransitionEnd);
+        }
+        transitions.add(e.propertyName);
+    };
+    let onTransitionEnd = (e)=>{
+        // Remove property from list of transitioning properties.
+        let properties = $bbed8b41f857bcc0$var$transitionsByElement.get(e.target);
+        if (!properties) return;
+        properties.delete(e.propertyName);
+        // If empty, remove transitioncancel event, and remove the element from the list of transitioning elements.
+        if (properties.size === 0) {
+            e.target.removeEventListener("transitioncancel", onTransitionEnd);
+            $bbed8b41f857bcc0$var$transitionsByElement.delete(e.target);
+        }
+        // If no transitioning elements, call all of the queued callbacks.
+        if ($bbed8b41f857bcc0$var$transitionsByElement.size === 0) {
+            for (let cb of $bbed8b41f857bcc0$var$transitionCallbacks)cb();
+            $bbed8b41f857bcc0$var$transitionCallbacks.clear();
+        }
+    };
+    document.body.addEventListener("transitionrun", onTransitionStart);
+    document.body.addEventListener("transitionend", onTransitionEnd);
+}
+if (typeof document !== "undefined") {
+    if (document.readyState !== "loading") $bbed8b41f857bcc0$var$setupGlobalEvents();
+    else document.addEventListener("DOMContentLoaded", $bbed8b41f857bcc0$var$setupGlobalEvents);
+}
+
+
+
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ /* eslint-disable rulesdir/pure-render */ 
+function $5a387cc49350e6db$export$722debc0e56fea39(value, isEqual) {
+    // Using a ref during render is ok here because it's only an optimization – both values are equivalent.
+    // If a render is thrown away, it'll still work the same no matter if the next render is the same or not.
+    let lastValue = (useRef)(null);
+    if (value && lastValue.current && isEqual(value, lastValue.current)) value = lastValue.current;
+    lastValue.current = value;
+    return value;
+}
+
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -884,7 +1069,7 @@ try {
         unit: "degree"
     }).resolvedOptions().style === "unit";
 // eslint-disable-next-line no-empty
-} catch (e1) {}
+} catch (e) {}
 // Polyfill for units since Safari doesn't support them yet. See https://bugs.webkit.org/show_bug.cgi?id=215438.
 // Currently only polyfilling the unit degree in narrow format for ColorSlider in our supported locales.
 // Values were determined by switching to each locale manually in Chrome.
@@ -1222,11 +1407,10 @@ function $33bf17300c498528$export$a2f47a3d2973640(options = {}) {
  */ 
 
 
+
 function $896ba0a80a8f4d36$export$85fd5fdf27bacc79(options) {
     // Reuse last options object if it is shallowly equal, which allows the useMemo result to also be reused.
-    let lastOptions = (useRef)(null);
-    if (options && lastOptions.current && $896ba0a80a8f4d36$var$isEqual(options, lastOptions.current)) options = lastOptions.current;
-    lastOptions.current = options;
+    options = ($5a387cc49350e6db$export$722debc0e56fea39)(options, $896ba0a80a8f4d36$var$isEqual);
     let { locale: locale  } = ($18f2051aff69b9bf$export$43bb16f9c6d9e3f7)();
     return (useMemo)(()=>new ($fb18d541ea1ad717$export$ad991b66133851cf)(locale, options), [
         locale,
@@ -2365,18 +2549,18 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     className: classNames(Button.className, className),
     disabled: isDisabled,
     ref: buttonRef
-  }), leftIcon ? /*#__PURE__*/React__default.createElement(Icon, {
+  }), leftIcon ? typeof leftIcon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
     icon: leftIcon,
     "aria-hidden": "true",
     className: "left"
-  }) : null, isLoading ? /*#__PURE__*/React__default.createElement(Spinner, {
+  }) : leftIcon : null, isLoading ? /*#__PURE__*/React__default.createElement(Spinner, {
     size: "small",
     color: "no-data"
-  }) : null, /*#__PURE__*/React__default.createElement("span", null, children), rightIcon ? /*#__PURE__*/React__default.createElement(Icon, {
+  }) : null, /*#__PURE__*/React__default.createElement("span", null, children), rightIcon ? typeof rightIcon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
     icon: rightIcon,
     "aria-hidden": "true",
     className: "right"
-  }) : null);
+  }) : rightIcon : null);
 });
 Button.className = CLASSNAME$I;
 Button.defaultProps = DEFAULT_PROPS$I;
@@ -3415,7 +3599,7 @@ Badge.className = CLASSNAME$A;
 Badge.defaultProps = DEFAULT_PROPS$A;
 Badge.displayName = COMPONENT_NAME$A;
 
-const _excluded$x = ["badge", "badgeProps", "children", "className", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "tabIndex", "withoutIcons"];
+const _excluded$x = ["as", "badge", "badgeProps", "children", "className", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "tabIndex", "withoutIcons"];
 const COMPONENT_NAME$z = 'SideNavigationMenuItem';
 const CLASSNAME$z = 'redsift-side-navigation-menu-item';
 const DEFAULT_PROPS$z = {};
@@ -3426,6 +3610,7 @@ const DEFAULT_PROPS$z = {};
 const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
   const menuItemRef = ref || useRef();
   const {
+      as,
       badge,
       badgeProps,
       children,
@@ -3478,6 +3663,7 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
     };
   }, [menuItems]);
   return /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuItem, _extends$1({
+    as: as,
     role: "menuitem"
   }, forwardedProps, {
     $isCurrent: isCurrent,
@@ -4319,7 +4505,7 @@ const StyledBreadcrumbItem = styled.a`
   }
 `;
 
-const _excluded$t = ["children", "className", "href", "isCurrent", "isDisabled"];
+const _excluded$t = ["as", "children", "className", "href", "isCurrent", "isDisabled"];
 const COMPONENT_NAME$w = 'BreadcrumbItem';
 const CLASSNAME$w = 'redsift-breadcrumb-item';
 const DEFAULT_PROPS$w = {};
@@ -4329,6 +4515,7 @@ const DEFAULT_PROPS$w = {};
  */
 const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
   const {
+      as,
       children,
       className,
       href,
@@ -4338,6 +4525,7 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
     forwardedProps = _objectWithoutProperties(props, _excluded$t);
   warnIfNoAccessibleLabelFound(props, [children]);
   return /*#__PURE__*/React__default.createElement(StyledBreadcrumbItem, _extends$1({
+    as: as || 'a',
     role: "link",
     tabIndex: !isDisabled && !isCurrent ? 0 : undefined
   }, forwardedProps, {
@@ -4474,15 +4662,15 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
     href: !isDisabled ? href : undefined,
     ref: ref,
     target: target
-  }), leftIcon ? /*#__PURE__*/React__default.createElement(Icon, {
+  }), leftIcon ? typeof leftIcon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
     icon: leftIcon,
     "aria-hidden": "true",
     className: "left"
-  }) : null, children, rightIcon ? /*#__PURE__*/React__default.createElement(Icon, {
+  }) : leftIcon : null, children, rightIcon ? typeof rightIcon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
     icon: rightIcon,
     "aria-hidden": "true",
     className: "right"
-  }) : null);
+  }) : rightIcon : null);
 });
 ButtonLink.className = CLASSNAME$u;
 ButtonLink.defaultProps = DEFAULT_PROPS$u;
@@ -6249,7 +6437,7 @@ DetailedCardSectionItem.defaultProps = DEFAULT_PROPS$e;
 DetailedCardSectionItem.displayName = COMPONENT_NAME$e;
 
 /*!
-* tabbable 6.1.2
+* tabbable 6.2.0
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
 */
 // NOTE: separate `:not()` selectors has broader browser support than the newer
@@ -6429,7 +6617,27 @@ var getCandidatesIteratively = function getCandidatesIteratively(elements, inclu
   }
   return candidates;
 };
-var getTabindex = function getTabindex(node, isScope) {
+
+/**
+ * @private
+ * Determines if the node has an explicitly specified `tabindex` attribute.
+ * @param {HTMLElement} node
+ * @returns {boolean} True if so; false if not.
+ */
+var hasTabIndex = function hasTabIndex(node) {
+  return !isNaN(parseInt(node.getAttribute('tabindex'), 10));
+};
+
+/**
+ * Determine the tab index of a given node.
+ * @param {HTMLElement} node
+ * @returns {number} Tab order (negative, 0, or positive number).
+ * @throws {Error} If `node` is falsy.
+ */
+var getTabIndex = function getTabIndex(node) {
+  if (!node) {
+    throw new Error('No node provided');
+  }
   if (node.tabIndex < 0) {
     // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
     // `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
@@ -6438,16 +6646,28 @@ var getTabindex = function getTabindex(node, isScope) {
     // order, consider their tab index to be 0.
     // Also browsers do not return `tabIndex` correctly for contentEditable nodes;
     // so if they don't have a tabindex attribute specifically set, assume it's 0.
-    //
-    // isScope is positive for custom element with shadow root or slot that by default
-    // have tabIndex -1, but need to be sorted by document order in order for their
-    // content to be inserted in the correct position
-    if ((isScope || /^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && isNaN(parseInt(node.getAttribute('tabindex'), 10))) {
+    if ((/^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && !hasTabIndex(node)) {
       return 0;
     }
   }
   return node.tabIndex;
 };
+
+/**
+ * Determine the tab index of a given node __for sort order purposes__.
+ * @param {HTMLElement} node
+ * @param {boolean} [isScope] True for a custom element with shadow root or slot that, by default,
+ *  has tabIndex -1, but needs to be sorted by document order in order for its content to be
+ *  inserted into the correct sort position.
+ * @returns {number} Tab order (negative, 0, or positive number).
+ */
+var getSortOrderTabIndex = function getSortOrderTabIndex(node, isScope) {
+  var tabIndex = getTabIndex(node);
+  if (tabIndex < 0 && isScope && !hasTabIndex(node)) {
+    return 0;
+  }
+  return tabIndex;
+};
 var sortOrderedTabbables = function sortOrderedTabbables(a, b) {
   return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex;
 };
@@ -6690,7 +6910,7 @@ var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(o
   return true;
 };
 var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(options, node) {
-  if (isNonTabbableRadio(node) || getTabindex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {
+  if (isNonTabbableRadio(node) || getTabIndex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {
     return false;
   }
   return true;
@@ -6715,7 +6935,7 @@ var sortByOrder = function sortByOrder(candidates) {
   candidates.forEach(function (item, i) {
     var isScope = !!item.scopeParent;
     var element = isScope ? item.scopeParent : item;
-    var candidateTabindex = getTabindex(element, isScope);
+    var candidateTabindex = getSortOrderTabIndex(element, isScope);
     var elements = isScope ? sortByOrder(item.candidates) : element;
     if (candidateTabindex === 0) {
       isScope ? regularTabbables.push.apply(regularTabbables, elements) : regularTabbables.push(element);
@@ -6734,18 +6954,18 @@ var sortByOrder = function sortByOrder(candidates) {
     return acc;
   }, []).concat(regularTabbables);
 };
-var tabbable = function tabbable(el, options) {
+var tabbable = function tabbable(container, options) {
   options = options || {};
   var candidates;
   if (options.getShadowRoot) {
-    candidates = getCandidatesIteratively([el], options.includeContainer, {
+    candidates = getCandidatesIteratively([container], options.includeContainer, {
       filter: isNodeMatchingSelectorTabbable.bind(null, options),
       flatten: false,
       getShadowRoot: options.getShadowRoot,
       shadowRootFilter: isValidShadowRootTabbable
     });
   } else {
-    candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
+    candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
   }
   return sortByOrder(candidates);
 };
@@ -7087,7 +7307,7 @@ const arrow$1 = options => ({
       [axis]: coords[axis] - alignmentOffset,
       data: {
         [axis]: offset,
-        centerOffset: center - offset
+        centerOffset: center - offset + alignmentOffset
       }
     };
   }
@@ -7433,7 +7653,13 @@ function isNode(value) {
   return value instanceof getWindow$1(value).Node;
 }
 function getNodeName(node) {
-  return isNode(node) ? (node.nodeName || '').toLowerCase() : '';
+  if (isNode(node)) {
+    return (node.nodeName || '').toLowerCase();
+  }
+  // Mocked nodes in testing environments may not be instances of Node. By
+  // returning `#document` an infinite loop won't occur.
+  // https://github.com/floating-ui/floating-ui/issues/2317
+  return '#document';
 }
 
 function isHTMLElement$1(value) {
@@ -7447,8 +7673,7 @@ function isShadowRoot$1(node) {
   if (typeof ShadowRoot === 'undefined') {
     return false;
   }
-  const OwnElement = getWindow$1(node).ShadowRoot;
-  return node instanceof OwnElement || node instanceof ShadowRoot;
+  return node instanceof getWindow$1(node).ShadowRoot || node instanceof ShadowRoot;
 }
 function isOverflowElement(element) {
   const {
@@ -7480,6 +7705,11 @@ function isLastTraversableNode(node) {
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
+const floor = Math.floor;
+const createEmptyCoords = v => ({
+  x: v,
+  y: v
+});
 
 function getCssDimensions(element) {
   const css = getComputedStyle$1(element);
@@ -7498,7 +7728,7 @@ function getCssDimensions(element) {
   return {
     width,
     height,
-    fallback: shouldFallback
+    $: shouldFallback
   };
 }
 
@@ -7506,23 +7736,19 @@ function unwrapElement(element) {
   return !isElement$1(element) ? element.contextElement : element;
 }
 
-const FALLBACK_SCALE = {
-  x: 1,
-  y: 1
-};
 function getScale(element) {
   const domElement = unwrapElement(element);
   if (!isHTMLElement$1(domElement)) {
-    return FALLBACK_SCALE;
+    return createEmptyCoords(1);
   }
   const rect = domElement.getBoundingClientRect();
   const {
     width,
     height,
-    fallback
+    $
   } = getCssDimensions(domElement);
-  let x = (fallback ? round(rect.width) : rect.width) / width;
-  let y = (fallback ? round(rect.height) : rect.height) / height;
+  let x = ($ ? round(rect.width) : rect.width) / width;
+  let y = ($ ? round(rect.height) : rect.height) / height;
 
   // 0, NaN, or Infinity should always fallback to 1.
 
@@ -7538,10 +7764,7 @@ function getScale(element) {
   };
 }
 
-const noOffsets = {
-  x: 0,
-  y: 0
-};
+const noOffsets = /*#__PURE__*/createEmptyCoords(0);
 function getVisualOffsets(element, isFixed, floatingOffsetParent) {
   var _win$visualViewport, _win$visualViewport2;
   if (isFixed === void 0) {
@@ -7569,7 +7792,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   }
   const clientRect = element.getBoundingClientRect();
   const domElement = unwrapElement(element);
-  let scale = FALLBACK_SCALE;
+  let scale = createEmptyCoords(1);
   if (includeScale) {
     if (offsetParent) {
       if (isElement$1(offsetParent)) {
@@ -7592,14 +7815,14 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
       const css = getComputedStyle(currentIFrame);
-      iframeRect.x += (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
-      iframeRect.y += (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
+      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
+      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
       y *= iframeScale.y;
       width *= iframeScale.x;
       height *= iframeScale.y;
-      x += iframeRect.x;
-      y += iframeRect.y;
+      x += left;
+      y += top;
       currentIFrame = getWindow$1(currentIFrame).frameElement;
     }
   }
@@ -7643,14 +7866,8 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
     scrollLeft: 0,
     scrollTop: 0
   };
-  let scale = {
-    x: 1,
-    y: 1
-  };
-  const offsets = {
-    x: 0,
-    y: 0
-  };
+  let scale = createEmptyCoords(1);
+  const offsets = createEmptyCoords(0);
   if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
@@ -7716,9 +7933,7 @@ function getParentNode(node) {
 function getNearestOverflowAncestor(node) {
   const parentNode = getParentNode(node);
   if (isLastTraversableNode(parentNode)) {
-    // `getParentNode` will never return a `Document` due to the fallback
-    // check, so it's either the <html> or <body> element.
-    return parentNode.ownerDocument.body;
+    return node.ownerDocument ? node.ownerDocument.body : node.body;
   }
   if (isHTMLElement$1(parentNode) && isOverflowElement(parentNode)) {
     return parentNode;
@@ -7770,10 +7985,7 @@ function getInnerBoundingClientRect(element, strategy) {
   const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
   const top = clientRect.top + element.clientTop;
   const left = clientRect.left + element.clientLeft;
-  const scale = isHTMLElement$1(element) ? getScale(element) : {
-    x: 1,
-    y: 1
-  };
+  const scale = isHTMLElement$1(element) ? getScale(element) : createEmptyCoords(1);
   const width = element.clientWidth * scale.x;
   const height = element.clientHeight * scale.y;
   const x = left * scale.x;
@@ -7924,10 +8136,7 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
     scrollLeft: 0,
     scrollTop: 0
   };
-  const offsets = {
-    x: 0,
-    y: 0
-  };
+  const offsets = createEmptyCoords(0);
   if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
@@ -7977,6 +8186,67 @@ const platform = {
   isRTL: element => getComputedStyle$1(element).direction === 'rtl'
 };
 
+// https://samthor.au/2021/observing-dom/
+function observeMove(element, onMove) {
+  let io = null;
+  let timeoutId;
+  const root = getDocumentElement(element);
+  function cleanup() {
+    clearTimeout(timeoutId);
+    io && io.disconnect();
+    io = null;
+  }
+  function refresh(skip, threshold) {
+    if (skip === void 0) {
+      skip = false;
+    }
+    if (threshold === void 0) {
+      threshold = 1;
+    }
+    cleanup();
+    const {
+      left,
+      top,
+      width,
+      height
+    } = element.getBoundingClientRect();
+    if (!skip) {
+      onMove();
+    }
+    if (!width || !height) {
+      return;
+    }
+    const insetTop = floor(top);
+    const insetRight = floor(root.clientWidth - (left + width));
+    const insetBottom = floor(root.clientHeight - (top + height));
+    const insetLeft = floor(left);
+    const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
+    let isFirstUpdate = true;
+    io = new IntersectionObserver(entries => {
+      const ratio = entries[0].intersectionRatio;
+      if (ratio !== threshold) {
+        if (!isFirstUpdate) {
+          return refresh();
+        }
+        if (!ratio) {
+          timeoutId = setTimeout(() => {
+            refresh(false, 1e-7);
+          }, 100);
+        } else {
+          refresh(false, ratio);
+        }
+      }
+      isFirstUpdate = false;
+    }, {
+      rootMargin,
+      threshold: max(0, min(1, threshold)) || 1
+    });
+    io.observe(element);
+  }
+  refresh(true);
+  return cleanup;
+}
+
 /**
  * Automatically updates the position of the floating element when necessary.
  * Should only be called when the floating element is mounted on the DOM or
@@ -7993,29 +8263,25 @@ function autoUpdate(reference, floating, update, options) {
     ancestorScroll = true,
     ancestorResize = true,
     elementResize = true,
+    layoutShift = typeof IntersectionObserver === 'function',
     animationFrame = false
   } = options;
-  const ancestors = ancestorScroll || ancestorResize ? [...(isElement$1(reference) ? getOverflowAncestors(reference) : reference.contextElement ? getOverflowAncestors(reference.contextElement) : []), ...getOverflowAncestors(floating)] : [];
+  const referenceEl = unwrapElement(reference);
+  const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
   ancestors.forEach(ancestor => {
-    // ignores Window, checks for [object VisualViewport]
-    const isVisualViewport = !isElement$1(ancestor) && ancestor.toString().includes('V');
-    if (ancestorScroll && (animationFrame ? isVisualViewport : true)) {
-      ancestor.addEventListener('scroll', update, {
-        passive: true
-      });
-    }
+    ancestorScroll && ancestor.addEventListener('scroll', update, {
+      passive: true
+    });
     ancestorResize && ancestor.addEventListener('resize', update);
   });
-  let observer = null;
+  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
+  let resizeObserver = null;
   if (elementResize) {
-    observer = new ResizeObserver(() => {
-      update();
-    });
-    isElement$1(reference) && !animationFrame && observer.observe(reference);
-    if (!isElement$1(reference) && reference.contextElement && !animationFrame) {
-      observer.observe(reference.contextElement);
+    resizeObserver = new ResizeObserver(update);
+    if (referenceEl && !animationFrame) {
+      resizeObserver.observe(referenceEl);
     }
-    observer.observe(floating);
+    resizeObserver.observe(floating);
   }
   let frameId;
   let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
@@ -8032,13 +8298,13 @@ function autoUpdate(reference, floating, update, options) {
   }
   update();
   return () => {
-    var _observer;
     ancestors.forEach(ancestor => {
       ancestorScroll && ancestor.removeEventListener('scroll', update);
       ancestorResize && ancestor.removeEventListener('resize', update);
     });
-    (_observer = observer) == null ? void 0 : _observer.disconnect();
-    observer = null;
+    cleanupIo && cleanupIo();
+    resizeObserver && resizeObserver.disconnect();
+    resizeObserver = null;
     if (animationFrame) {
       cancelAnimationFrame(frameId);
     }
@@ -10212,7 +10478,7 @@ const StyledLink = styled.a`
   }
 `;
 
-const _excluded$7 = ["children", "className", "href", "isDisabled"];
+const _excluded$7 = ["as", "children", "className", "href", "isDisabled"];
 const COMPONENT_NAME$7 = 'Link';
 const CLASSNAME$7 = 'redsift-link';
 const DEFAULT_PROPS$7 = {};
@@ -10227,6 +10493,7 @@ const DEFAULT_PROPS$7 = {};
  */
 const Link = /*#__PURE__*/forwardRef((props, ref) => {
   const {
+      as,
       children,
       className,
       href,
@@ -10234,6 +10501,7 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$7);
   return /*#__PURE__*/React__default.createElement(StyledLink, _extends$1({
+    as: as,
     "aria-disabled": isDisabled,
     role: "link",
     tabIndex: !isDisabled ? 0 : undefined