@redsift/design-system 8.0.0-alpha.8 → 8.0.1

package/index.js

@@ -1,7 +1,7 @@
-import { I18nProvider, useLocalizedStringFormatter, useButton, useFocusRing, useNumberFormatter, useFocusWithin } from 'react-aria';
+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, useLayoutEffect, useMemo, useRef, useCallback, forwardRef, useReducer, 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';
@@ -588,22 +588,83 @@ const useBoundingClientRect = (ref, deps) => {
 // SSR case multiple copies of React Aria is not supported.
 const $704cf1d3b684cc5c$var$defaultContext = {
     prefix: String(Math.round(Math.random() * 10000000000)),
-    current: 0
+    current: 0,
+    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() {
-    let cur = (useContext)($704cf1d3b684cc5c$var$SSRContext);
-    let isInSSRContext = cur !== $704cf1d3b684cc5c$var$defaultContext;
-    let [isSSR, setIsSSR] = (useState)(isInSSRContext);
-    // If on the client, and the component was initially server rendered,
-    // then schedule a layout effect to update the component after hydration.
-    if (typeof window !== "undefined" && isInSSRContext) // This if statement technically breaks the rules of hooks, but is safe
-    // because the condition never changes after mounting.
+    // 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
-    (useLayoutEffect)(()=>{
-        setIsSSR(false);
-    }, []);
-    return isSSR;
+    let cur = (useContext)($704cf1d3b684cc5c$var$SSRContext);
+    return cur.isSSR;
 }
 
 /*
@@ -856,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");
@@ -893,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.
@@ -1231,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,
@@ -1369,6 +1544,10 @@ const AlertVariant = {
   info: 'info'
 };
 
+/**
+ * Component props.
+ */
+
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -1484,6 +1663,14 @@ const IconButtonVariant = {
   unstyled: 'unstyled'
 };
 
+/**
+ * Component color.
+ */
+
+/**
+ * Component props.
+ */
+
 /**
  * Component size.
  */
@@ -1495,6 +1682,10 @@ const IconSize = {
   xlarge: 'xlarge'
 };
 
+/**
+ * Component props.
+ */
+
 const baseLayout = css`
   ${_ref => {
   let {
@@ -1684,6 +1875,22 @@ const baseContainer = css`
   ${baseFlexbox}
   ${baseGrid}
 `;
+const focusRing = css`
+  @media (prefers-reduced-motion: no-preference) {
+    :focus-visible {
+      outline: 2px solid var(--redsift-color-default-primary);
+      transition: outline-offset 75ms ease-out;
+    }
+
+    :not(:active):focus-visible {
+      transition-duration: 0.25s;
+    }
+  }
+
+  :not(:active):focus-visible {
+    outline-offset: 0.2rem;
+  }
+`;
 
 /**
  * Component style.
@@ -1870,6 +2077,14 @@ const ButtonVariant = {
   unstyled: 'unstyled'
 };
 
+/**
+ * Component color.
+ */
+
+/**
+ * Component props.
+ */
+
 /**
  * Component style.
  */
@@ -1890,29 +2105,45 @@ const StyledButton = styled.button`
   text-transform: var(--redsift-typography-button-text-transform);
 
   ${_ref => {
+  let {
+    $isLoading
+  } = _ref;
+  return $isLoading ? css`
+          & > span {
+            visibility: hidden;
+          }
+
+          & > .redsift-shield {
+            position: absolute;
+          }
+        ` : '';
+}}
+
+  ${_ref2 => {
   let {
     $variant,
     $color,
     $isActive,
-    $isDisabled
-  } = _ref;
+    $isDisabled,
+    $isHovered
+  } = _ref2;
   return css`
     padding: ${$variant === ButtonVariant.secondary ? '7px 15px' : '8px 16px'};
 
     ${$variant === ButtonVariant.secondary ? css`
-          background-color: ${$isActive ? `var(--redsift-color-${$color}-active)` : $isDisabled ? 'var(--redsift-color-neutral-white)' : 'var(--redsift-color-neutral-white)'};
+          background-color: ${$isActive && $isHovered ? `var(--redsift-color-${$color}-active-hover)` : $isActive ? `var(--redsift-color-${$color}-active)` : $isHovered ? `var(--redsift-color-${$color}-hover)` : $isDisabled ? 'var(--redsift-color-neutral-white)' : 'var(--redsift-color-neutral-white)'};
           &,
           .redsift-icon {
-            color: ${$isDisabled ? 'var(--redsift-color-neutral-midgrey)' : `var(--redsift-color-${$color}-primary)`};
+            color: ${$isHovered ? `var(--redsift-color-${$color}-secondary)` : $isDisabled ? 'var(--redsift-color-neutral-midgrey)' : `var(--redsift-color-${$color}-primary)`};
           }
         ` : $variant === ButtonVariant.unstyled ? css`
-          background-color: ${$isActive ? `var(--redsift-color-${$color}-active)` : $isDisabled ? 'none' : 'none'};
+          background-color: ${$isActive && $isHovered ? `var(--redsift-color-${$color}-active-hover)` : $isActive ? `var(--redsift-color-${$color}-active)` : $isHovered ? `var(--redsift-color-${$color}-hover)` : $isDisabled ? 'none' : 'none'};
           &,
           .redsift-icon {
-            color: ${$isDisabled ? 'var(--redsift-color-neutral-midgrey)' : `var(--redsift-color-${$color}-primary)`};
+            color: ${$isHovered ? `var(--redsift-color-${$color}-secondary)` : $isDisabled ? 'var(--redsift-color-neutral-midgrey)' : `var(--redsift-color-${$color}-primary)`};
           }
         ` : css`
-          background-color: ${$isActive ? `var(--redsift-color-${$color}-primary-active)` : $isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : `var(--redsift-color-${$color}-primary)`};
+          background-color: ${$isActive && $isHovered ? `var(--redsift-color-${$color}-primary-active-hover)` : $isActive ? `var(--redsift-color-${$color}-primary-active)` : $isHovered ? `var(--redsift-color-${$color}-secondary)` : $isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : `var(--redsift-color-${$color}-primary)`};
           &,
           .redsift-icon {
             color: ${$isDisabled ? 'var(--redsift-color-neutral-midgrey)' : 'var(--redsift-color-neutral-white)'};
@@ -1930,13 +2161,13 @@ const StyledButton = styled.button`
   &:focus-visible {
     outline: none;
 
-    ${_ref2 => {
+    ${_ref3 => {
   let {
     $variant,
     $color,
     $isActive,
     $isDisabled
-  } = _ref2;
+  } = _ref3;
   return css`
       cursor: ${$isDisabled ? 'default' : 'pointer'};
 
@@ -1970,10 +2201,51 @@ const StyledButton = styled.button`
 }};
   }
 
-  ${_ref3 => {
+  &:active {
+    outline: none;
+
+    ${_ref4 => {
+  let {
+    $variant,
+    $color,
+    $isHovered,
+    $isDisabled
+  } = _ref4;
+  return css`
+      ${$variant === ButtonVariant.secondary ? css`
+            background-color: ${$isHovered ? `var(--redsift-color-${$color}-active-hover)` : $isDisabled ? 'var(--redsift-color-neutral-white)' : `var(--redsift-color-${$color}-active)`};
+            &,
+            .redsift-icon {
+              color: ${$isDisabled ? 'var(--redsift-color-neutral-midgrey)' : `var(--redsift-color-${$color}-secondary)`};
+            }
+          ` : $variant === ButtonVariant.unstyled ? css`
+            background-color: ${$isHovered ? `var(--redsift-color-${$color}-active-hover)` : $isDisabled ? 'none' : `var(--redsift-color-${$color}-active)`};
+            &,
+            .redsift-icon {
+              color: ${$isDisabled ? 'var(--redsift-color-neutral-midgrey)' : `var(--redsift-color-${$color}-secondary)`};
+            }
+          ` : css`
+            background-color: ${$isHovered ? `var(--redsift-color-${$color}-primary-active-hover)` : $isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : `var(--redsift-color-${$color}-primary-active)`};
+            &,
+            .redsift-icon {
+              color: ${$isDisabled ? 'var(--redsift-color-neutral-midgrey)' : 'var(--redsift-color-neutral-white)'};
+            }
+          `}
+
+      ${$variant === ButtonVariant.secondary ? css`
+            border: 1px solid
+              ${$isDisabled ? 'var(--redsift-color-neutral-midgrey)' : `var(--redsift-color-${$color}-primary)`};
+          ` : `
+        border: none;
+      `}
+    `;
+}};
+  }
+
+  ${_ref5 => {
   let {
     $fullWidth
-  } = _ref3;
+  } = _ref5;
   return $fullWidth ? `
         width: 100%;
         flex-grow: 1;
@@ -1987,6 +2259,8 @@ const StyledButton = styled.button`
         }
       ` : '';
 }}
+
+  ${focusRing}
 `;
 
 var loading$1 = "Loading...";
@@ -2014,6 +2288,14 @@ const SpinnerSize = {
   large: 'large'
 };
 
+/**
+ * Component color.
+ */
+
+/**
+ * Component props.
+ */
+
 const StyledSpinner = styled.img`
   ${baseStyling}
 
@@ -2221,7 +2503,7 @@ Spinner.className = CLASSNAME$J;
 Spinner.defaultProps = DEFAULT_PROPS$J;
 Spinner.displayName = COMPONENT_NAME$J;
 
-const _excluded$G = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isLoading", "leftIcon", "onPress", "rightIcon", "variant"];
+const _excluded$G = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isHovered", "isLoading", "leftIcon", "rightIcon", "variant"];
 const COMPONENT_NAME$I = 'Button';
 const CLASSNAME$I = 'redsift-button';
 const DEFAULT_PROPS$I = {
@@ -2239,13 +2521,6 @@ const DEFAULT_PROPS$I = {
  */
 const Button = /*#__PURE__*/forwardRef((props, ref) => {
   const buttonRef = ref || useRef();
-  const {
-    buttonProps,
-    isPressed
-  } = useButton(_objectSpread2(_objectSpread2({}, props), {}, {
-    isDisabled: props.isLoading || props.isDisabled || props.disabled,
-    preventFocusOnPress: true
-  }), buttonRef);
   const {
       children,
       className,
@@ -2253,37 +2528,39 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
       disabled,
       fullWidth,
       isActive,
-      isDisabled,
+      isDisabled: propsIsDisabled,
+      isHovered,
       isLoading,
       leftIcon,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      onPress,
       rightIcon,
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$G);
-  return /*#__PURE__*/React__default.createElement(StyledButton, _extends$1({}, forwardedProps, buttonProps, {
+  const isDisabled = isLoading || propsIsDisabled || disabled;
+  return /*#__PURE__*/React__default.createElement(StyledButton, _extends$1({}, forwardedProps, {
     $color: color,
     $fullWidth: fullWidth,
-    $isActive: isActive || isPressed,
-    $isDisabled: isLoading || isDisabled || disabled,
+    $isActive: isActive,
+    $isDisabled: isDisabled,
+    $isHovered: isHovered,
+    $isLoading: isLoading,
     $variant: variant,
-    "aria-disabled": isLoading || isDisabled || disabled,
+    "aria-disabled": isDisabled,
     className: classNames(Button.className, className),
-    disabled: isLoading || isDisabled || disabled,
+    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, 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;
@@ -2301,9 +2578,20 @@ const StyledIconButton = styled(StyledButton)`
     padding: ${$variant === IconButtonVariant.secondary ? '8px' : '9px'};
   `;
 }};
+
+  ${_ref2 => {
+  let {
+    $isLoading
+  } = _ref2;
+  return $isLoading ? css`
+          & > .redsift-shield {
+            position: relative;
+          }
+        ` : '';
+}}
 `;
 
-const _excluded$F = ["className", "color", "disabled", "icon", "isActive", "isDisabled", "onPress", "variant"];
+const _excluded$F = ["className", "color", "disabled", "icon", "isActive", "isDisabled", "isHovered", "isLoading", "variant"];
 const COMPONENT_NAME$H = 'IconButton';
 const CLASSNAME$H = 'redsift-icon-button';
 const DEFAULT_PROPS$H = {
@@ -2320,38 +2608,37 @@ const DEFAULT_PROPS$H = {
  */
 const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
   const buttonRef = ref || useRef();
-  const {
-    buttonProps,
-    isPressed
-  } = useButton(_objectSpread2(_objectSpread2({}, props), {}, {
-    isDisabled: props.isDisabled || props.disabled,
-    preventFocusOnPress: true
-  }), buttonRef);
   const {
       className,
       color,
       disabled,
       icon,
       isActive,
-      isDisabled,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      onPress,
+      isDisabled: propsIsDisabled,
+      isHovered,
+      isLoading,
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$F);
+  const isDisabled = props.isLoading || propsIsDisabled || disabled;
   warnIfNoAccessibleLabelFound(props);
-  return /*#__PURE__*/React__default.createElement(StyledIconButton, _extends$1({}, forwardedProps, buttonProps, {
-    $color: isDisabled || disabled ? undefined : color,
-    $isActive: isActive || isPressed,
-    $isDisabled: isDisabled || disabled,
+  return /*#__PURE__*/React__default.createElement(StyledIconButton, _extends$1({}, forwardedProps, {
+    $color: isDisabled ? undefined : color,
+    $isActive: isActive,
+    $isDisabled: isDisabled,
+    $isHovered: isHovered,
+    $isLoading: isLoading,
     $variant: variant,
-    "aria-disabled": isDisabled || disabled,
+    "aria-disabled": isDisabled,
     className: classNames(IconButton.className, className),
-    disabled: isDisabled || disabled,
+    disabled: isDisabled,
     ref: buttonRef
-  }), /*#__PURE__*/React__default.createElement(Icon, {
+  }), isLoading ? /*#__PURE__*/React__default.createElement(Spinner, {
+    size: "small",
+    color: "no-data"
+  }) : /*#__PURE__*/React__default.createElement(Icon, {
     icon: icon,
-    color: isDisabled || disabled ? undefined : color
+    color: isDisabled ? undefined : color
   }));
 });
 IconButton.className = CLASSNAME$H;
@@ -2425,6 +2712,10 @@ const HeadingComponent = {
   span: 'span'
 };
 
+/**
+ * Component props.
+ */
+
 /**
  * Component style.
  */
@@ -2643,17 +2934,18 @@ const Alert = /*#__PURE__*/forwardRef((props, ref) => {
   }, /*#__PURE__*/React__default.createElement(Flexbox, {
     className: `${Alert.className}-header__title`,
     gap: "14px",
-    alignItems: "flex-start"
+    alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     icon: icon,
     color: color
   }), title ? /*#__PURE__*/React__default.createElement(Heading, {
-    as: "h5"
+    as: "span",
+    variant: "h5"
   }, title) : null), isClosable ? /*#__PURE__*/React__default.createElement(IconButton, {
     "aria-label": stringFormatter.format('close'),
     className: `${Alert.className}-header__icon-button`,
     icon: mdiClose,
-    onPress: handleClose
+    onClick: handleClose
   }) : null), children ? /*#__PURE__*/React__default.createElement("div", {
     className: `${Alert.className}__content`
   }, children) : null);
@@ -2794,7 +3086,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
   }, expandIconButtonProps, {
     "aria-label": stringFormatter.format('expand'),
     icon: mdiMenu,
-    onPress: appContainerState.expandSidePanel,
+    onClick: appContainerState.expandSidePanel,
     ref: collapseIconButtonRef,
     variant: IconButtonVariant.primary
   })) : /*#__PURE__*/React__default.createElement(IconButton, _extends$1({
@@ -2802,7 +3094,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
   }, collapseIconButtonProps, {
     "aria-label": stringFormatter.format('collapse'),
     icon: mdiMenuOpen,
-    onPress: appContainerState.collapseSidePanel,
+    onClick: appContainerState.collapseSidePanel,
     ref: expandIconButtonRef,
     variant: IconButtonVariant.primary
   }))) : null, propsTitle && typeof propsTitle !== 'string' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, propsTitle) : typeof propsTitle === 'string' ? /*#__PURE__*/React__default.createElement(Heading, {
@@ -3049,12 +3341,16 @@ AppSidePanel.displayName = COMPONENT_NAME$B;
  * Reducer props.
  */
 
-let SideNavigationMenuReducerActionType;
-(function (SideNavigationMenuReducerActionType) {
+let SideNavigationMenuReducerActionType = /*#__PURE__*/function (SideNavigationMenuReducerActionType) {
   SideNavigationMenuReducerActionType["Expand"] = "expand";
   SideNavigationMenuReducerActionType["Collapse"] = "collapse";
   SideNavigationMenuReducerActionType["Move"] = "move";
-})(SideNavigationMenuReducerActionType || (SideNavigationMenuReducerActionType = {}));
+  return SideNavigationMenuReducerActionType;
+}({});
+
+/**
+ * Component props.
+ */
 
 const SideNavigationMenuBarContext = /*#__PURE__*/React__default.createContext(null);
 
@@ -3195,6 +3491,10 @@ const BadgeVariant = {
   standard: 'standard'
 };
 
+/**
+ * Component props.
+ */
+
 /**
  * Component style.
  */
@@ -3299,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 = {};
@@ -3310,6 +3610,7 @@ const DEFAULT_PROPS$z = {};
 const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
   const menuItemRef = ref || useRef();
   const {
+      as,
       badge,
       badgeProps,
       children,
@@ -3362,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,
@@ -4203,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 = {};
@@ -4213,6 +4515,7 @@ const DEFAULT_PROPS$w = {};
  */
 const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
   const {
+      as,
       children,
       className,
       href,
@@ -4222,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, {
@@ -4358,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;
@@ -4603,6 +4907,10 @@ const SkeletonTextVariant = {
   caption: 'caption'
 };
 
+/**
+ * Component props.
+ */
+
 /**
  * Component style.
  */
@@ -4865,7 +5173,7 @@ const BaseCard = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${BaseCard.className}-header__icon-button`,
     color: "question",
     icon: isCollapsed ? mdiChevronDown : mdiChevronUp,
-    onPress: () => handleCollapse(!isCollapsed)
+    onClick: () => handleCollapse(!isCollapsed)
   }) : null) : null, body || actions ? /*#__PURE__*/React__default.createElement("div", {
     className: `${BaseCard.className}__content`
   }, body, actions) : null);
@@ -4887,10 +5195,14 @@ const Card = Object.assign(BaseCard, {
  * Component orientation.
  */
 const CheckboxGroupOrientation = {
-  horizontal: 'horizontal',
-  vertical: 'vertical'
+  vertical: 'vertical',
+  horizontal: 'horizontal'
 };
 
+/**
+ * Component props.
+ */
+
 const CheckboxGroupContext = /*#__PURE__*/React__default.createContext(null);
 
 /**
@@ -5254,7 +5566,15 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     $isSelected: isSelected,
     className: classNames(Checkbox.className, className),
     ref: ref
-  }), /*#__PURE__*/React__default.createElement("input", _extends$1({}, inputProps, focusProps, {
+  }), isSelected || isControlled && propsIsSelected ? /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiCheckboxMarked
+  }) : isIndeterminate ? /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiMinusBox
+  }) : /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiCheckboxBlankOutline
+  }), children ? /*#__PURE__*/React__default.createElement("span", {
+    className: "label"
+  }, children) : null, /*#__PURE__*/React__default.createElement("input", _extends$1({}, inputProps, focusProps, {
     "aria-checked": isSelected || isControlled && propsIsSelected ? 'true' : isIndeterminate ? 'mixed' : 'false',
     "aria-disabled": isDisabled,
     "aria-invalid": isInvalid || isRequired && !isSelected,
@@ -5270,15 +5590,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     ref: inputRef,
     type: "checkbox",
     value: value
-  })), isSelected || isControlled && propsIsSelected ? /*#__PURE__*/React__default.createElement(Icon, {
-    icon: mdiCheckboxMarked
-  }) : isIndeterminate ? /*#__PURE__*/React__default.createElement(Icon, {
-    icon: mdiMinusBox
-  }) : /*#__PURE__*/React__default.createElement(Icon, {
-    icon: mdiCheckboxBlankOutline
-  }), children ? /*#__PURE__*/React__default.createElement("span", {
-    className: "label"
-  }, children) : null);
+  })));
 });
 Checkbox.className = CLASSNAME$l;
 Checkbox.defaultProps = DEFAULT_PROPS$l;
@@ -5327,6 +5639,10 @@ const ShieldVariant = {
   email: 'email'
 };
 
+/**
+ * Component props.
+ */
+
 const StyledShield = styled.div`
   height: 24px;
   width: 20px;
@@ -5683,6 +5999,10 @@ const TextComponent = {
   sup: 'sup'
 };
 
+/**
+ * Component props.
+ */
+
 /**
  * Component style.
  */
@@ -5879,7 +6199,7 @@ const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${DetailedCardSection.className}-header__collapse-button`,
     color: "question",
     icon: isCollapsed ? mdiChevronDown : mdiChevronUp,
-    onPress: () => {
+    onClick: () => {
       setIsCollapsed(isCollapsed => !isCollapsed);
     }
   }) : null), children);
@@ -6117,7 +6437,7 @@ DetailedCardSectionItem.defaultProps = DEFAULT_PROPS$e;
 DetailedCardSectionItem.displayName = COMPONENT_NAME$e;
 
 /*!
-* tabbable 6.1.1
+* 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
@@ -6297,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,
@@ -6306,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;
 };
@@ -6558,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;
@@ -6583,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);
@@ -6602,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);
 };
@@ -6705,22 +7057,6 @@ const computePosition$1 = async (reference, floating, config) => {
   } = config;
   const validMiddleware = middleware.filter(Boolean);
   const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
-  if (process.env.NODE_ENV !== "production") {
-    if (platform == null) {
-      console.error(['Floating UI: `platform` property was not passed to config. If you', 'want to use Floating UI on the web, install @floating-ui/dom', 'instead of the /core package. Otherwise, you can create your own', '`platform`: https://floating-ui.com/docs/platform'].join(' '));
-    }
-    if (validMiddleware.filter(_ref => {
-      let {
-        name
-      } = _ref;
-      return name === 'autoPlacement' || name === 'flip';
-    }).length > 1) {
-      throw new Error(['Floating UI: duplicate `flip` and/or `autoPlacement` middleware', 'detected. This will lead to an infinite loop. Ensure only one of', 'either has been passed to the `middleware` array.'].join(' '));
-    }
-    if (!reference || !floating) {
-      console.error(['Floating UI: The reference and/or floating element was not defined', 'when `computePosition()` was called. Ensure that both elements have', 'been created and can be measured.'].join(' '));
-    }
-  }
   let rects = await platform.getElementRects({
     reference,
     floating,
@@ -6766,11 +7102,6 @@ const computePosition$1 = async (reference, floating, config) => {
         ...data
       }
     };
-    if (process.env.NODE_ENV !== "production") {
-      if (resetCount > 50) {
-        console.warn(['Floating UI: The middleware lifecycle appears to be running in an', 'infinite loop. This is usually caused by a `reset` continually', 'being returned without a break condition.'].join(' '));
-      }
-    }
     if (reset && resetCount <= 50) {
       resetCount++;
       if (typeof reset === 'object') {
@@ -6802,6 +7133,10 @@ const computePosition$1 = async (reference, floating, config) => {
   };
 };
 
+function evaluate(value, param) {
+  return typeof value === 'function' ? value(param) : value;
+}
+
 function expandPaddingObject(padding) {
   return {
     top: 0,
@@ -6858,7 +7193,7 @@ async function detectOverflow(state, options) {
     elementContext = 'floating',
     altBoundary = false,
     padding = 0
-  } = options;
+  } = evaluate(options, state);
   const paddingObject = getSideObjectFromPadding(padding);
   const altContext = elementContext === 'floating' ? 'reference' : 'floating';
   const element = elements[altBoundary ? altContext : elementContext];
@@ -6886,7 +7221,6 @@ async function detectOverflow(state, options) {
     offsetParent,
     strategy
   }) : rect);
-  if (process.env.NODE_ENV !== "production") ;
   return {
     top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
     bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
@@ -6911,22 +7245,20 @@ const arrow$1 = options => ({
   name: 'arrow',
   options,
   async fn(state) {
-    // Since `element` is required, we don't Partial<> the type.
-    const {
-      element,
-      padding = 0
-    } = options || {};
     const {
       x,
       y,
       placement,
       rects,
-      platform
+      platform,
+      elements
     } = state;
+    // Since `element` is required, we don't Partial<> the type.
+    const {
+      element,
+      padding = 0
+    } = evaluate(options, state) || {};
     if (element == null) {
-      if (process.env.NODE_ENV !== "production") {
-        console.warn('Floating UI: No `element` was passed to the `arrow` middleware.');
-      }
       return {};
     }
     const paddingObject = getSideObjectFromPadding(padding);
@@ -6937,35 +7269,45 @@ const arrow$1 = options => ({
     const axis = getMainAxisFromPlacement(placement);
     const length = getLengthFromAxis(axis);
     const arrowDimensions = await platform.getDimensions(element);
-    const minProp = axis === 'y' ? 'top' : 'left';
-    const maxProp = axis === 'y' ? 'bottom' : 'right';
+    const isYAxis = axis === 'y';
+    const minProp = isYAxis ? 'top' : 'left';
+    const maxProp = isYAxis ? 'bottom' : 'right';
+    const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
     const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
     const startDiff = coords[axis] - rects.reference[axis];
     const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
-    let clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;
-    if (clientSize === 0) {
-      clientSize = rects.floating[length];
+    let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
+
+    // DOM platform can return `window` as the `offsetParent`.
+    if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
+      clientSize = elements.floating[clientProp] || rects.floating[length];
     }
     const centerToReference = endDiff / 2 - startDiff / 2;
 
+    // If the padding is large enough that it causes the arrow to no longer be
+    // centered, modify the padding so that it is centered.
+    const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
+    const minPadding = min$1(paddingObject[minProp], largestPossiblePadding);
+    const maxPadding = min$1(paddingObject[maxProp], largestPossiblePadding);
+
     // Make sure the arrow doesn't overflow the floating element if the center
     // point is outside the floating element's bounds.
-    const min = paddingObject[minProp];
-    const max = clientSize - arrowDimensions[length] - paddingObject[maxProp];
+    const min$1$1 = minPadding;
+    const max = clientSize - arrowDimensions[length] - maxPadding;
     const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-    const offset = within(min, center, max);
+    const offset = within(min$1$1, center, max);
 
     // If the reference is small enough that the arrow's padding causes it to
     // to point to nothing for an aligned placement, adjust the offset of the
     // floating element itself. This stops `shift()` from taking action, but can
     // be worked around by calling it again after the `arrow()` if desired.
-    const shouldAddOffset = getAlignment(placement) != null && center != offset && rects.reference[length] / 2 - (center < min ? paddingObject[minProp] : paddingObject[maxProp]) - arrowDimensions[length] / 2 < 0;
-    const alignmentOffset = shouldAddOffset ? center < min ? min - center : max - center : 0;
+    const shouldAddOffset = getAlignment(placement) != null && center != offset && rects.reference[length] / 2 - (center < min$1$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const alignmentOffset = shouldAddOffset ? center < min$1$1 ? min$1$1 - center : max - center : 0;
     return {
       [axis]: coords[axis] - alignmentOffset,
       data: {
         [axis]: offset,
-        centerOffset: center - offset
+        centerOffset: center - offset + alignmentOffset
       }
     };
   }
@@ -7071,7 +7413,7 @@ const flip = function (options) {
         fallbackAxisSideDirection = 'none',
         flipAlignment = true,
         ...detectOverflowOptions
-      } = options;
+      } = evaluate(options, state);
       const side = getSide(placement);
       const isBasePlacement = getSide(initialPlacement) === initialPlacement;
       const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
@@ -7150,7 +7492,7 @@ const flip = function (options) {
   };
 };
 
-async function convertValueToCoords(state, value) {
+async function convertValueToCoords(state, options) {
   const {
     placement,
     platform,
@@ -7162,7 +7504,7 @@ async function convertValueToCoords(state, value) {
   const isVertical = getMainAxisFromPlacement(placement) === 'x';
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
-  const rawValue = typeof value === 'function' ? value(state) : value;
+  const rawValue = evaluate(options, state);
 
   // eslint-disable-next-line prefer-const
   let {
@@ -7198,19 +7540,19 @@ async function convertValueToCoords(state, value) {
  * object may be passed.
  * @see https://floating-ui.com/docs/offset
  */
-const offset = function (value) {
-  if (value === void 0) {
-    value = 0;
+const offset = function (options) {
+  if (options === void 0) {
+    options = 0;
   }
   return {
     name: 'offset',
-    options: value,
+    options,
     async fn(state) {
       const {
         x,
         y
       } = state;
-      const diffCoords = await convertValueToCoords(state, value);
+      const diffCoords = await convertValueToCoords(state, options);
       return {
         x: x + diffCoords.x,
         y: y + diffCoords.y,
@@ -7258,7 +7600,7 @@ const shift = function (options) {
           }
         },
         ...detectOverflowOptions
-      } = options;
+      } = evaluate(options, state);
       const coords = {
         x,
         y
@@ -7307,43 +7649,17 @@ function getComputedStyle$1(element) {
   return getWindow$1(element).getComputedStyle(element);
 }
 
-const min = Math.min;
-const max = Math.max;
-const round = Math.round;
-
-function getCssDimensions(element) {
-  const css = getComputedStyle$1(element);
-  let width = parseFloat(css.width);
-  let height = parseFloat(css.height);
-  const offsetWidth = element.offsetWidth;
-  const offsetHeight = element.offsetHeight;
-  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
-  if (shouldFallback) {
-    width = offsetWidth;
-    height = offsetHeight;
-  }
-  return {
-    width,
-    height,
-    fallback: shouldFallback
-  };
+function isNode(value) {
+  return value instanceof getWindow$1(value).Node;
 }
-
 function getNodeName(node) {
-  return isNode(node) ? (node.nodeName || '').toLowerCase() : '';
-}
-
-let uaString;
-function getUAString() {
-  if (uaString) {
-    return uaString;
+  if (isNode(node)) {
+    return (node.nodeName || '').toLowerCase();
   }
-  const uaData = navigator.userAgentData;
-  if (uaData && Array.isArray(uaData.brands)) {
-    uaString = uaData.brands.map(item => item.brand + "/" + item.version).join(' ');
-    return uaString;
-  }
-  return navigator.userAgent;
+  // 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) {
@@ -7352,16 +7668,12 @@ function isHTMLElement$1(value) {
 function isElement$1(value) {
   return value instanceof getWindow$1(value).Element;
 }
-function isNode(value) {
-  return value instanceof getWindow$1(value).Node;
-}
 function isShadowRoot$1(node) {
   // Browsers without `ShadowRoot` support.
   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 {
@@ -7376,62 +7688,67 @@ function isTableElement(element) {
   return ['table', 'td', 'th'].includes(getNodeName(element));
 }
 function isContainingBlock(element) {
-  // TODO: Try to use feature detection here instead.
-  const isFirefox = /firefox/i.test(getUAString());
+  const safari = isSafari$1();
   const css = getComputedStyle$1(element);
-  const backdropFilter = css.backdropFilter || css.WebkitBackdropFilter;
 
-  // This is non-exhaustive but covers the most common CSS properties that
-  // create a containing block.
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
-  return css.transform !== 'none' || css.perspective !== 'none' || (backdropFilter ? backdropFilter !== 'none' : false) || isFirefox && css.willChange === 'filter' || isFirefox && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective'].some(value => css.willChange.includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => {
-    // Add type check for old browsers.
-    const contain = css.contain;
-    return contain != null ? contain.includes(value) : false;
-  });
+  return css.transform !== 'none' || css.perspective !== 'none' || !safari && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !safari && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
 }
-
-/**
- * Determines whether or not `.getBoundingClientRect()` is affected by visual
- * viewport offsets. In Safari, the `x`/`y` offsets are values relative to the
- * visual viewport, while in other engines, they are values relative to the
- * layout viewport.
- */
-function isClientRectVisualViewportBased() {
-  // TODO: Try to use feature detection here instead. Feature detection for
-  // this can fail in various ways, making the userAgent check the most
-  // reliable:
-  // • Always-visible scrollbar or not
-  // • Width of <html>
-
-  // Is Safari.
-  return /^((?!chrome|android).)*safari/i.test(getUAString());
+function isSafari$1() {
+  if (typeof CSS === 'undefined' || !CSS.supports) return false;
+  return CSS.supports('-webkit-backdrop-filter', 'none');
 }
 function isLastTraversableNode(node) {
   return ['html', 'body', '#document'].includes(getNodeName(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);
+  // In testing environments, the `width` and `height` properties are empty
+  // strings for SVG elements, returning NaN. Fallback to `0` in this case.
+  let width = parseFloat(css.width) || 0;
+  let height = parseFloat(css.height) || 0;
+  const hasOffset = isHTMLElement$1(element);
+  const offsetWidth = hasOffset ? element.offsetWidth : width;
+  const offsetHeight = hasOffset ? element.offsetHeight : height;
+  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
+  if (shouldFallback) {
+    width = offsetWidth;
+    height = offsetHeight;
+  }
+  return {
+    width,
+    height,
+    $: shouldFallback
+  };
+}
+
 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.
 
@@ -7447,8 +7764,26 @@ function getScale(element) {
   };
 }
 
-function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
+const noOffsets = /*#__PURE__*/createEmptyCoords(0);
+function getVisualOffsets(element, isFixed, floatingOffsetParent) {
   var _win$visualViewport, _win$visualViewport2;
+  if (isFixed === void 0) {
+    isFixed = true;
+  }
+  if (!isSafari$1()) {
+    return noOffsets;
+  }
+  const win = element ? getWindow$1(element) : window;
+  if (!floatingOffsetParent || isFixed && floatingOffsetParent !== win) {
+    return noOffsets;
+  }
+  return {
+    x: ((_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) || 0,
+    y: ((_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) || 0
+  };
+}
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
   if (includeScale === void 0) {
     includeScale = false;
   }
@@ -7457,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)) {
@@ -7467,10 +7802,9 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
       scale = getScale(element);
     }
   }
-  const win = domElement ? getWindow$1(domElement) : window;
-  const addVisualOffsets = isClientRectVisualViewportBased() && isFixedStrategy;
-  let x = (clientRect.left + (addVisualOffsets ? ((_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) || 0 : 0)) / scale.x;
-  let y = (clientRect.top + (addVisualOffsets ? ((_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) || 0 : 0)) / scale.y;
+  const visualOffsets = getVisualOffsets(domElement, isFixedStrategy, offsetParent);
+  let x = (clientRect.left + visualOffsets.x) / scale.x;
+  let y = (clientRect.top + visualOffsets.y) / scale.y;
   let width = clientRect.width / scale.x;
   let height = clientRect.height / scale.y;
   if (domElement) {
@@ -7481,27 +7815,23 @@ 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;
     }
   }
-  return {
+  return rectToClientRect({
     width,
     height,
-    top: y,
-    right: x + width,
-    bottom: y + height,
-    left: x,
     x,
     y
-  };
+  });
 }
 
 function getDocumentElement(node) {
@@ -7536,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);
@@ -7609,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;
@@ -7644,7 +7966,7 @@ function getViewportRect(element, strategy) {
   if (visualViewport) {
     width = visualViewport.width;
     height = visualViewport.height;
-    const visualViewportBased = isClientRectVisualViewportBased();
+    const visualViewportBased = isSafari$1();
     if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
       x = visualViewport.offsetLeft;
       y = visualViewport.offsetTop;
@@ -7663,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;
@@ -7687,19 +8006,22 @@ function getClientRectFromClippingAncestor(element, clippingAncestor, strategy)
   } else if (isElement$1(clippingAncestor)) {
     rect = getInnerBoundingClientRect(clippingAncestor, strategy);
   } else {
-    const mutableRect = {
-      ...clippingAncestor
+    const visualOffsets = getVisualOffsets(element);
+    rect = {
+      ...clippingAncestor,
+      x: clippingAncestor.x - visualOffsets.x,
+      y: clippingAncestor.y - visualOffsets.y
     };
-    if (isClientRectVisualViewportBased()) {
-      var _win$visualViewport, _win$visualViewport2;
-      const win = getWindow$1(element);
-      mutableRect.x -= ((_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) || 0;
-      mutableRect.y -= ((_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) || 0;
-    }
-    rect = mutableRect;
   }
   return rectToClientRect(rect);
 }
+function hasFixedPositionAncestor(element, stopNode) {
+  const parentNode = getParentNode(element);
+  if (parentNode === stopNode || !isElement$1(parentNode) || isLastTraversableNode(parentNode)) {
+    return false;
+  }
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+}
 
 // A "clipping ancestor" is an `overflow` element with the characteristic of
 // clipping (or hiding) child elements. This returns all clipping ancestors
@@ -7717,19 +8039,17 @@ function getClippingElementAncestors(element, cache) {
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   while (isElement$1(currentNode) && !isLastTraversableNode(currentNode)) {
     const computedStyle = getComputedStyle$1(currentNode);
-    const containingBlock = isContainingBlock(currentNode);
-    const shouldIgnoreCurrentNode = computedStyle.position === 'fixed';
-    if (shouldIgnoreCurrentNode) {
+    const currentNodeIsContaining = isContainingBlock(currentNode);
+    if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
+    }
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    if (shouldDropCurrentNode) {
+      // Drop non-containing blocks.
+      result = result.filter(ancestor => ancestor !== currentNode);
     } else {
-      const shouldDropCurrentNode = elementIsFixed ? !containingBlock && !currentContainingBlockComputedStyle : !containingBlock && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position);
-      if (shouldDropCurrentNode) {
-        // Drop non-containing blocks.
-        result = result.filter(ancestor => ancestor !== currentNode);
-      } else {
-        // Record last containing block for next iteration.
-        currentContainingBlockComputedStyle = computedStyle;
-      }
+      // Record last containing block for next iteration.
+      currentContainingBlockComputedStyle = computedStyle;
     }
     currentNode = getParentNode(currentNode);
   }
@@ -7766,10 +8086,7 @@ function getClippingRect(_ref) {
 }
 
 function getDimensions(element) {
-  if (isHTMLElement$1(element)) {
-    return getCssDimensions(element);
-  }
-  return element.getBoundingClientRect();
+  return getCssDimensions(element);
 }
 
 function getTrueOffsetParent(element, polyfill) {
@@ -7797,6 +8114,9 @@ function getContainingBlock(element) {
 // such as table ancestors and cross browser bugs.
 function getOffsetParent(element, polyfill) {
   const window = getWindow$1(element);
+  if (!isHTMLElement$1(element)) {
+    return window;
+  }
   let offsetParent = getTrueOffsetParent(element, polyfill);
   while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') {
     offsetParent = getTrueOffsetParent(offsetParent, polyfill);
@@ -7810,21 +8130,19 @@ function getOffsetParent(element, polyfill) {
 function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
   const isOffsetParentAnElement = isHTMLElement$1(offsetParent);
   const documentElement = getDocumentElement(offsetParent);
-  const rect = getBoundingClientRect(element, true, strategy === 'fixed', offsetParent);
+  const isFixed = strategy === 'fixed';
+  const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
   let scroll = {
     scrollLeft: 0,
     scrollTop: 0
   };
-  const offsets = {
-    x: 0,
-    y: 0
-  };
-  if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
+  const offsets = createEmptyCoords(0);
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
     }
     if (isHTMLElement$1(offsetParent)) {
-      const offsetRect = getBoundingClientRect(offsetParent, true);
+      const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
       offsets.x = offsetRect.x + offsetParent.clientLeft;
       offsets.y = offsetRect.y + offsetParent.clientTop;
     } else if (documentElement) {
@@ -7868,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
@@ -7881,33 +8260,28 @@ function autoUpdate(reference, floating, update, options) {
     options = {};
   }
   const {
-    ancestorScroll: _ancestorScroll = true,
+    ancestorScroll = true,
     ancestorResize = true,
     elementResize = true,
+    layoutShift = typeof IntersectionObserver === 'function',
     animationFrame = false
   } = options;
-  const ancestorScroll = _ancestorScroll && !animationFrame;
-  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 => {
     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) {
-    let initialUpdate = true;
-    observer = new ResizeObserver(() => {
-      if (!initialUpdate) {
-        update();
-      }
-      initialUpdate = false;
-    });
-    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;
@@ -7924,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);
     }
@@ -9556,6 +9930,10 @@ const TooltipPlacement = {
   'left-end': 'left-end'
 };
 
+/**
+ * Component props.
+ */
+
 /**
  * Component style.
  */
@@ -9951,7 +10329,7 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-label": stringFormatter.format('collapse-all'),
     "aria-describedby": undefined,
     icon: mdiPageLast,
-    onPress: () => handleCollapse(true),
+    onClick: () => handleCollapse(true),
     style: {
       transform: 'rotate(-90deg)'
     },
@@ -9960,7 +10338,7 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-label": stringFormatter.format('expand-all'),
     "aria-describedby": undefined,
     icon: mdiKeyboardCaps,
-    onPress: () => handleCollapse(false),
+    onClick: () => handleCollapse(false),
     style: {
       transform: 'rotate(180deg)'
     },
@@ -10100,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 = {};
@@ -10115,6 +10493,7 @@ const DEFAULT_PROPS$7 = {};
  */
 const Link = /*#__PURE__*/forwardRef((props, ref) => {
   const {
+      as,
       children,
       className,
       href,
@@ -10122,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
@@ -10136,7 +10516,7 @@ Link.className = CLASSNAME$7;
 Link.defaultProps = DEFAULT_PROPS$7;
 Link.displayName = COMPONENT_NAME$7;
 
-const _excluded$6 = ["children", "className", "disabled", "isDisabled", "onPress"];
+const _excluded$6 = ["children", "className", "disabled", "isDisabled"];
 const COMPONENT_NAME$6 = 'LinkButton';
 const CLASSNAME$6 = 'redsift-link-button';
 const DEFAULT_PROPS$6 = {};
@@ -10150,24 +10530,17 @@ const DEFAULT_PROPS$6 = {};
  */
 const LinkButton = /*#__PURE__*/forwardRef((props, ref) => {
   const buttonRef = ref || useRef();
-  const {
-    buttonProps
-  } = useButton(_objectSpread2(_objectSpread2({}, props), {}, {
-    isDisabled: props.isDisabled || props.disabled,
-    preventFocusOnPress: true
-  }), buttonRef);
   const {
       children,
       className,
       disabled,
-      isDisabled,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      onPress
+      isDisabled: propsIsDisabled
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$6);
+  const isDisabled = propsIsDisabled || disabled;
   return /*#__PURE__*/React__default.createElement(StyledLink, _extends$1({
     as: "button"
-  }, forwardedProps, buttonProps, {
+  }, forwardedProps, {
     $isDisabled: isDisabled || disabled,
     "aria-disabled": isDisabled || disabled,
     className: classNames(LinkButton.className, className),
@@ -10303,6 +10676,10 @@ const RadioGroupOrientation = {
   vertical: 'vertical'
 };
 
+/**
+ * Component props.
+ */
+
 const RadioGroupContext = /*#__PURE__*/React__default.createContext(null);
 
 /**
@@ -10650,7 +11027,13 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
     $isSelected: isSelected,
     className: classNames(Radio.className, className),
     ref: ref
-  }), /*#__PURE__*/React__default.createElement("input", _extends$1({}, inputProps, focusProps, {
+  }), isSelected ? /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiRadioboxMarked
+  }) : /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiRadioboxBlank
+  }), children ? /*#__PURE__*/React__default.createElement("span", {
+    className: "label"
+  }, children) : null, /*#__PURE__*/React__default.createElement("input", _extends$1({}, inputProps, focusProps, {
     "aria-checked": isSelected ? 'true' : 'false',
     "aria-disabled": isDisabled,
     "aria-invalid": isInvalid || isRequired && !isSelected,
@@ -10666,13 +11049,7 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
     ref: inputRef,
     type: "radio",
     value: value
-  })), isSelected ? /*#__PURE__*/React__default.createElement(Icon, {
-    icon: mdiRadioboxMarked
-  }) : /*#__PURE__*/React__default.createElement(Icon, {
-    icon: mdiRadioboxBlank
-  }), children ? /*#__PURE__*/React__default.createElement("span", {
-    className: "label"
-  }, children) : null);
+  })));
 });
 Radio.className = CLASSNAME$3;
 Radio.defaultProps = DEFAULT_PROPS$3;
@@ -10928,7 +11305,19 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
     $isSelected: isSelected,
     className: classNames(Switch.className, className),
     ref: ref
-  }), /*#__PURE__*/React__default.createElement("input", _extends$1({}, inputProps, focusProps, {
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${Switch.className}__slide`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${Switch.className}-slide__inner`
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${Switch.className}-slide__knob-wrapper`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${Switch.className}-slide-knob-wrapper__elevation`
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${Switch.className}-slide-knob-wrapper__knob`
+  }))), children ? /*#__PURE__*/React__default.createElement("span", {
+    className: "label"
+  }, children) : null, /*#__PURE__*/React__default.createElement("input", _extends$1({}, inputProps, focusProps, {
     "aria-checked": isSelected ? 'true' : 'false',
     "aria-disabled": isDisabled,
     "aria-invalid": isInvalid || isRequired && !isSelected,
@@ -10945,19 +11334,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
     role: "switch",
     type: "checkbox",
     value: value
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: `${Switch.className}__slide`
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${Switch.className}-slide__inner`
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: `${Switch.className}-slide__knob-wrapper`
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${Switch.className}-slide-knob-wrapper__elevation`
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: `${Switch.className}-slide-knob-wrapper__knob`
-  }))), children ? /*#__PURE__*/React__default.createElement("span", {
-    className: "label"
-  }, children) : null);
+  })));
 });
 Switch.className = CLASSNAME$2;
 Switch.defaultProps = DEFAULT_PROPS$2;
@@ -10975,6 +11352,10 @@ const SwitchGroupOrientation = {
   vertical: 'vertical'
 };
 
+/**
+ * Component props.
+ */
+
 /**
  * Component style.
  */
@@ -11147,6 +11528,10 @@ const TextFieldVariant = {
   underline: 'underline'
 };
 
+/**
+ * Component props.
+ */
+
 /**
  * Component style.
  */
@@ -11435,5 +11820,5 @@ TextField.className = CLASSNAME;
 TextField.defaultProps = DEFAULT_PROPS;
 TextField.displayName = COMPONENT_NAME;
 
-export { Alert, AlertVariant, AlignContent, AlignItems, AlignSelf, AppBar, AppContainer, AppContainerContext, AppContent, AppSidePanel, Badge, BadgeVariant, BaseBreadcrumbs, BaseGrid, BaseSkeleton, BreadcrumbItem, Breadcrumbs, Button, ButtonLink, ButtonVariant, Card, CardActions, CardBody, CardHeader, Checkbox, CheckboxGroup, CheckboxGroupOrientation, ColorPalette, ConditionalWrapper, DataVizColorPalette, DetailedCard, DetailedCardCollapsibleSectionItems, DetailedCardHeader, DetailedCardSection, DetailedCardSectionItem, FlexDirection, FlexWrap, Flexbox, FontFamily, Grid, GridItem, Heading, HeadingComponent, HeadingVariant, Icon, IconButton, IconButtonVariant, IconSize, JustifyContent, JustifyItems, JustifySelf, Link, LinkButton, NeutralColorPalette, Number$1 as Number, Pill, ProductColorPalette, Radio, RadioGroup, RadioGroupOrientation, RedsiftAppBarColorBackground, RedsiftAppBarColorExpandIconBackgroundHover, RedsiftAppBarColorExpandIconHover, RedsiftAppBarColorExpandIconResting, RedsiftAppBarColorText, RedsiftColorDefaultActive, RedsiftColorDefaultActiveHover, RedsiftColorDefaultHover, RedsiftColorDefaultPrimary, RedsiftColorDefaultPrimaryActive, RedsiftColorDefaultPrimaryActiveHover, RedsiftColorDefaultSecondary, RedsiftColorErrorActive, RedsiftColorErrorActiveHover, RedsiftColorErrorHover, RedsiftColorErrorPrimary, RedsiftColorErrorPrimaryActive, RedsiftColorErrorPrimaryActiveHover, RedsiftColorErrorSecondary, RedsiftColorHardenizeActive, RedsiftColorHardenizeActiveHover, RedsiftColorHardenizeHover, RedsiftColorHardenizePrimary, RedsiftColorHardenizePrimaryActive, RedsiftColorHardenizePrimaryActiveHover, RedsiftColorHardenizeSecondary, RedsiftColorInfoActive, RedsiftColorInfoActiveHover, RedsiftColorInfoHover, RedsiftColorInfoPrimary, RedsiftColorInfoPrimaryActive, RedsiftColorInfoPrimaryActiveHover, RedsiftColorInfoSecondary, RedsiftColorNeutralBlack, RedsiftColorNeutralDarkgrey, RedsiftColorNeutralLightgrey, RedsiftColorNeutralMidgrey, RedsiftColorNeutralWhite, RedsiftColorNeutralXlightgrey, RedsiftColorNoDataActive, RedsiftColorNoDataActiveHover, RedsiftColorNoDataHover, RedsiftColorNoDataPrimary, RedsiftColorNoDataPrimaryActive, RedsiftColorNoDataPrimaryActiveHover, RedsiftColorNoDataSecondary, RedsiftColorOndmarcActive, RedsiftColorOndmarcActiveHover, RedsiftColorOndmarcHover, RedsiftColorOndmarcPrimary, RedsiftColorOndmarcPrimaryActive, RedsiftColorOndmarcPrimaryActiveHover, RedsiftColorOndmarcSecondary, RedsiftColorOndomainActive, RedsiftColorOndomainActiveHover, RedsiftColorOndomainHover, RedsiftColorOndomainPrimary, RedsiftColorOndomainPrimaryActive, RedsiftColorOndomainPrimaryActiveHover, RedsiftColorOndomainSecondary, RedsiftColorOninboxActive, RedsiftColorOninboxActiveHover, RedsiftColorOninboxHover, RedsiftColorOninboxPrimary, RedsiftColorOninboxPrimaryActive, RedsiftColorOninboxPrimaryActiveHover, RedsiftColorOninboxSecondary, RedsiftColorQuestionActive, RedsiftColorQuestionActiveHover, RedsiftColorQuestionHover, RedsiftColorQuestionPrimary, RedsiftColorQuestionPrimaryActive, RedsiftColorQuestionPrimaryActiveHover, RedsiftColorQuestionSecondary, RedsiftColorSuccessActive, RedsiftColorSuccessActiveHover, RedsiftColorSuccessHover, RedsiftColorSuccessPrimary, RedsiftColorSuccessPrimaryActive, RedsiftColorSuccessPrimaryActiveHover, RedsiftColorSuccessSecondary, RedsiftColorToolsActive, RedsiftColorToolsActiveHover, RedsiftColorToolsHover, RedsiftColorToolsPrimary, RedsiftColorToolsPrimaryActive, RedsiftColorToolsPrimaryActiveHover, RedsiftColorToolsSecondary, RedsiftColorWarningActive, RedsiftColorWarningActiveHover, RedsiftColorWarningHover, RedsiftColorWarningPrimary, RedsiftColorWarningPrimaryActive, RedsiftColorWarningPrimaryActiveHover, RedsiftColorWarningSecondary, RedsiftColorWebsiteActive, RedsiftColorWebsiteActiveHover, RedsiftColorWebsiteHover, RedsiftColorWebsitePrimary, RedsiftColorWebsitePrimaryActive, RedsiftColorWebsitePrimaryActiveHover, RedsiftColorWebsiteSecondary, RedsiftDataVizColorAquaDark, RedsiftDataVizColorAquaDarker, RedsiftDataVizColorAquaDarkerer, RedsiftDataVizColorAquaDefault, RedsiftDataVizColorAquaLight, RedsiftDataVizColorAquaLighter, RedsiftDataVizColorAquaLighterer, RedsiftDataVizColorBlueDark, RedsiftDataVizColorBlueDarker, RedsiftDataVizColorBlueDarkerer, RedsiftDataVizColorBlueDefault, RedsiftDataVizColorBlueLight, RedsiftDataVizColorBlueLighter, RedsiftDataVizColorBlueLighterer, RedsiftDataVizColorBrownDark, RedsiftDataVizColorBrownDarker, RedsiftDataVizColorBrownDarkerer, RedsiftDataVizColorBrownDefault, RedsiftDataVizColorBrownLight, RedsiftDataVizColorBrownLighter, RedsiftDataVizColorBrownLighterer, RedsiftDataVizColorGreenDark, RedsiftDataVizColorGreenDarker, RedsiftDataVizColorGreenDarkerer, RedsiftDataVizColorGreenDefault, RedsiftDataVizColorGreenLight, RedsiftDataVizColorGreenLighter, RedsiftDataVizColorGreenLighterer, RedsiftDataVizColorGreyDark, RedsiftDataVizColorGreyDarker, RedsiftDataVizColorGreyDarkerer, RedsiftDataVizColorGreyDefault, RedsiftDataVizColorGreyLight, RedsiftDataVizColorGreyLighter, RedsiftDataVizColorGreyLighterer, RedsiftDataVizColorOrangeDark, RedsiftDataVizColorOrangeDarker, RedsiftDataVizColorOrangeDarkerer, RedsiftDataVizColorOrangeDefault, RedsiftDataVizColorOrangeLight, RedsiftDataVizColorOrangeLighter, RedsiftDataVizColorOrangeLighterer, RedsiftDataVizColorPinkDark, RedsiftDataVizColorPinkDarker, RedsiftDataVizColorPinkDarkerer, RedsiftDataVizColorPinkDefault, RedsiftDataVizColorPinkLight, RedsiftDataVizColorPinkLighter, RedsiftDataVizColorPinkLighterer, RedsiftDataVizColorPurpleDark, RedsiftDataVizColorPurpleDarker, RedsiftDataVizColorPurpleDarkerer, RedsiftDataVizColorPurpleDefault, RedsiftDataVizColorPurpleLight, RedsiftDataVizColorPurpleLighter, RedsiftDataVizColorPurpleLighterer, RedsiftDataVizColorRedDark, RedsiftDataVizColorRedDarker, RedsiftDataVizColorRedDarkerer, RedsiftDataVizColorRedDefault, RedsiftDataVizColorRedLight, RedsiftDataVizColorRedLighter, RedsiftDataVizColorRedLighterer, RedsiftDataVizColorYellowDark, RedsiftDataVizColorYellowDarker, RedsiftDataVizColorYellowDarkerer, RedsiftDataVizColorYellowDefault, RedsiftDataVizColorYellowLight, RedsiftDataVizColorYellowLighter, RedsiftDataVizColorYellowLighterer, RedsiftLayoutZIndexDialog, RedsiftLayoutZIndexDropdown, RedsiftLayoutZIndexFooter, RedsiftLayoutZIndexHeader, RedsiftLayoutZIndexOverlay, RedsiftLayoutZIndexPopover, RedsiftLayoutZIndexSidePanel, RedsiftLayoutZIndexTooltip, RedsiftSideNavigationColorBackground, RedsiftSideNavigationColorMenuItemActive, RedsiftSideNavigationColorMenuItemBackgroundActive, RedsiftSideNavigationColorMenuItemBackgroundHover, RedsiftSideNavigationColorMenuItemBackgroundSecondary, RedsiftSideNavigationColorMenuItemTextDisabled, RedsiftSideNavigationColorMenuItemTextHover, RedsiftSideNavigationColorMenuItemTextResting, RedsiftSideNavigationColorScrollbarHover, RedsiftSideNavigationColorScrollbarResting, RedsiftTypographyBadgeFontFamily, RedsiftTypographyBadgeFontSize, RedsiftTypographyBadgeFontWeight, RedsiftTypographyBadgeLineHeight, RedsiftTypographyBody2FontFamily, RedsiftTypographyBody2FontSize, RedsiftTypographyBody2FontWeight, RedsiftTypographyBody2LineHeight, RedsiftTypographyBodyFontFamily, RedsiftTypographyBodyFontSize, RedsiftTypographyBodyFontWeight, RedsiftTypographyBodyLineHeight, RedsiftTypographyBodyTextTransform, RedsiftTypographyButtonFontFamily, RedsiftTypographyButtonFontSize, RedsiftTypographyButtonFontWeight, RedsiftTypographyButtonLineHeight, RedsiftTypographyButtonTextTransform, RedsiftTypographyCaptionFontFamily, RedsiftTypographyCaptionFontSize, RedsiftTypographyCaptionFontWeight, RedsiftTypographyCaptionLineHeight, RedsiftTypographyCaptionTextTransform, RedsiftTypographyChipFontFamily, RedsiftTypographyChipFontSize, RedsiftTypographyChipFontWeight, RedsiftTypographyChipLineHeight, RedsiftTypographyDatagridCellFontFamily, RedsiftTypographyDatagridCellFontSize, RedsiftTypographyDatagridCellFontWeight, RedsiftTypographyDatagridCellLineHeight, RedsiftTypographyDatagridHeaderFontFamily, RedsiftTypographyDatagridHeaderFontSize, RedsiftTypographyDatagridHeaderFontWeight, RedsiftTypographyDatagridHeaderLineHeight, RedsiftTypographyFontFamilyElectrolize, RedsiftTypographyFontFamilyRaleway, RedsiftTypographyFontFamilySourceCodePro, RedsiftTypographyFontWeightBold, RedsiftTypographyFontWeightMedium, RedsiftTypographyFontWeightRegular, RedsiftTypographyFontWeightSemiBold, RedsiftTypographyH1FontFamily, RedsiftTypographyH1FontSize, RedsiftTypographyH1FontWeight, RedsiftTypographyH1LineHeight, RedsiftTypographyH1TextTransform, RedsiftTypographyH2FontFamily, RedsiftTypographyH2FontSize, RedsiftTypographyH2FontWeight, RedsiftTypographyH2LineHeight, RedsiftTypographyH2TextTransform, RedsiftTypographyH3FontFamily, RedsiftTypographyH3FontSize, RedsiftTypographyH3FontWeight, RedsiftTypographyH3LineHeight, RedsiftTypographyH3TextTransform, RedsiftTypographyH4FontFamily, RedsiftTypographyH4FontSize, RedsiftTypographyH4FontWeight, RedsiftTypographyH4LineHeight, RedsiftTypographyH4TextTransform, RedsiftTypographyH5FontFamily, RedsiftTypographyH5FontSize, RedsiftTypographyH5FontWeight, RedsiftTypographyH5LineHeight, RedsiftTypographyH5TextTransform, RedsiftTypographyHelperFontFamily, RedsiftTypographyHelperFontSize, RedsiftTypographyHelperFontWeight, RedsiftTypographyHelperLineHeight, RedsiftTypographyInputTextFontFamily, RedsiftTypographyInputTextFontSize, RedsiftTypographyInputTextFontWeight, RedsiftTypographyInputTextLineHeight, RedsiftTypographyLinkFontFamily, RedsiftTypographyLinkFontSize, RedsiftTypographyLinkFontWeight, RedsiftTypographyLinkLineHeight, RedsiftTypographyPillFontFamily, RedsiftTypographyPillFontSize, RedsiftTypographyPillFontWeight, RedsiftTypographyPillLineHeight, RedsiftTypographySubtitleFontFamily, RedsiftTypographySubtitleFontSize, RedsiftTypographySubtitleFontWeight, RedsiftTypographySubtitleLineHeight, RedsiftTypographySubtitleTextTransform, RedsiftTypographyTooltipFontFamily, RedsiftTypographyTooltipFontSize, RedsiftTypographyTooltipFontWeight, RedsiftTypographyTooltipLineHeight, Shield, ShieldVariant, SideNavigationMenu, SideNavigationMenuBar, SideNavigationMenuItem, SideNavigationMenuReducerActionType, Skeleton, SkeletonCircle, SkeletonText, SkeletonTextVariant, Spinner, SpinnerSize, StyledButton, StyledLink, Switch, SwitchGroup, SwitchGroupOrientation, Text, TextComponent, TextField, TextFieldVariant, TextVariant, baseContainer, baseFlexbox, baseGrid, baseInternalSpacing, baseLayout, basePositioning, baseSizing, baseSpacing, baseStyling, filterComponents, isComponent, partitionComponents, useAppSidePanel, useBoundingClientRect, $325a3faab7a68acd$export$a16aca283550c30d as useCollator, $896ba0a80a8f4d36$export$85fd5fdf27bacc79 as useDateFormatter, $bb77f239b46e8c72$export$3274cf84b703fff as useFilter, $704cf1d3b684cc5c$export$535bd6ca7f90a273 as useIsSSR, $33bf17300c498528$export$a2f47a3d2973640 as useListFormatter, $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 as useLocale, $fca6afa0e843324b$export$f12b703ca79dfbb1 as useLocalizedStringFormatter, $a916eb452884faea$export$b7a616150fdb9f44 as useNumberFormatter, useSideNavigationMenuBar, useWindowSize, warnIfNoAccessibleLabelFound };
+export { Alert, AlertVariant, AlignContent, AlignItems, AlignSelf, AppBar, AppContainer, AppContainerContext, AppContent, AppSidePanel, Badge, BadgeVariant, BaseBreadcrumbs, BaseGrid, BaseSkeleton, BreadcrumbItem, Breadcrumbs, Button, ButtonLink, ButtonVariant, Card, CardActions, CardBody, CardHeader, Checkbox, CheckboxGroup, CheckboxGroupOrientation, ColorPalette, ConditionalWrapper, DataVizColorPalette, DetailedCard, DetailedCardCollapsibleSectionItems, DetailedCardHeader, DetailedCardSection, DetailedCardSectionItem, FlexDirection, FlexWrap, Flexbox, FontFamily, Grid, GridItem, Heading, HeadingComponent, HeadingVariant, Icon, IconButton, IconButtonVariant, IconSize, JustifyContent, JustifyItems, JustifySelf, Link, LinkButton, NeutralColorPalette, Number$1 as Number, Pill, ProductColorPalette, Radio, RadioGroup, RadioGroupOrientation, RedsiftAppBarColorBackground, RedsiftAppBarColorExpandIconBackgroundHover, RedsiftAppBarColorExpandIconHover, RedsiftAppBarColorExpandIconResting, RedsiftAppBarColorText, RedsiftColorDefaultActive, RedsiftColorDefaultActiveHover, RedsiftColorDefaultHover, RedsiftColorDefaultPrimary, RedsiftColorDefaultPrimaryActive, RedsiftColorDefaultPrimaryActiveHover, RedsiftColorDefaultSecondary, RedsiftColorErrorActive, RedsiftColorErrorActiveHover, RedsiftColorErrorHover, RedsiftColorErrorPrimary, RedsiftColorErrorPrimaryActive, RedsiftColorErrorPrimaryActiveHover, RedsiftColorErrorSecondary, RedsiftColorHardenizeActive, RedsiftColorHardenizeActiveHover, RedsiftColorHardenizeHover, RedsiftColorHardenizePrimary, RedsiftColorHardenizePrimaryActive, RedsiftColorHardenizePrimaryActiveHover, RedsiftColorHardenizeSecondary, RedsiftColorInfoActive, RedsiftColorInfoActiveHover, RedsiftColorInfoHover, RedsiftColorInfoPrimary, RedsiftColorInfoPrimaryActive, RedsiftColorInfoPrimaryActiveHover, RedsiftColorInfoSecondary, RedsiftColorNeutralBlack, RedsiftColorNeutralDarkgrey, RedsiftColorNeutralLightgrey, RedsiftColorNeutralMidgrey, RedsiftColorNeutralWhite, RedsiftColorNeutralXlightgrey, RedsiftColorNoDataActive, RedsiftColorNoDataActiveHover, RedsiftColorNoDataHover, RedsiftColorNoDataPrimary, RedsiftColorNoDataPrimaryActive, RedsiftColorNoDataPrimaryActiveHover, RedsiftColorNoDataSecondary, RedsiftColorOndmarcActive, RedsiftColorOndmarcActiveHover, RedsiftColorOndmarcHover, RedsiftColorOndmarcPrimary, RedsiftColorOndmarcPrimaryActive, RedsiftColorOndmarcPrimaryActiveHover, RedsiftColorOndmarcSecondary, RedsiftColorOndomainActive, RedsiftColorOndomainActiveHover, RedsiftColorOndomainHover, RedsiftColorOndomainPrimary, RedsiftColorOndomainPrimaryActive, RedsiftColorOndomainPrimaryActiveHover, RedsiftColorOndomainSecondary, RedsiftColorOninboxActive, RedsiftColorOninboxActiveHover, RedsiftColorOninboxHover, RedsiftColorOninboxPrimary, RedsiftColorOninboxPrimaryActive, RedsiftColorOninboxPrimaryActiveHover, RedsiftColorOninboxSecondary, RedsiftColorQuestionActive, RedsiftColorQuestionActiveHover, RedsiftColorQuestionHover, RedsiftColorQuestionPrimary, RedsiftColorQuestionPrimaryActive, RedsiftColorQuestionPrimaryActiveHover, RedsiftColorQuestionSecondary, RedsiftColorSuccessActive, RedsiftColorSuccessActiveHover, RedsiftColorSuccessHover, RedsiftColorSuccessPrimary, RedsiftColorSuccessPrimaryActive, RedsiftColorSuccessPrimaryActiveHover, RedsiftColorSuccessSecondary, RedsiftColorToolsActive, RedsiftColorToolsActiveHover, RedsiftColorToolsHover, RedsiftColorToolsPrimary, RedsiftColorToolsPrimaryActive, RedsiftColorToolsPrimaryActiveHover, RedsiftColorToolsSecondary, RedsiftColorWarningActive, RedsiftColorWarningActiveHover, RedsiftColorWarningHover, RedsiftColorWarningPrimary, RedsiftColorWarningPrimaryActive, RedsiftColorWarningPrimaryActiveHover, RedsiftColorWarningSecondary, RedsiftColorWebsiteActive, RedsiftColorWebsiteActiveHover, RedsiftColorWebsiteHover, RedsiftColorWebsitePrimary, RedsiftColorWebsitePrimaryActive, RedsiftColorWebsitePrimaryActiveHover, RedsiftColorWebsiteSecondary, RedsiftDataVizColorAquaDark, RedsiftDataVizColorAquaDarker, RedsiftDataVizColorAquaDarkerer, RedsiftDataVizColorAquaDefault, RedsiftDataVizColorAquaLight, RedsiftDataVizColorAquaLighter, RedsiftDataVizColorAquaLighterer, RedsiftDataVizColorBlueDark, RedsiftDataVizColorBlueDarker, RedsiftDataVizColorBlueDarkerer, RedsiftDataVizColorBlueDefault, RedsiftDataVizColorBlueLight, RedsiftDataVizColorBlueLighter, RedsiftDataVizColorBlueLighterer, RedsiftDataVizColorBrownDark, RedsiftDataVizColorBrownDarker, RedsiftDataVizColorBrownDarkerer, RedsiftDataVizColorBrownDefault, RedsiftDataVizColorBrownLight, RedsiftDataVizColorBrownLighter, RedsiftDataVizColorBrownLighterer, RedsiftDataVizColorGreenDark, RedsiftDataVizColorGreenDarker, RedsiftDataVizColorGreenDarkerer, RedsiftDataVizColorGreenDefault, RedsiftDataVizColorGreenLight, RedsiftDataVizColorGreenLighter, RedsiftDataVizColorGreenLighterer, RedsiftDataVizColorGreyDark, RedsiftDataVizColorGreyDarker, RedsiftDataVizColorGreyDarkerer, RedsiftDataVizColorGreyDefault, RedsiftDataVizColorGreyLight, RedsiftDataVizColorGreyLighter, RedsiftDataVizColorGreyLighterer, RedsiftDataVizColorOrangeDark, RedsiftDataVizColorOrangeDarker, RedsiftDataVizColorOrangeDarkerer, RedsiftDataVizColorOrangeDefault, RedsiftDataVizColorOrangeLight, RedsiftDataVizColorOrangeLighter, RedsiftDataVizColorOrangeLighterer, RedsiftDataVizColorPinkDark, RedsiftDataVizColorPinkDarker, RedsiftDataVizColorPinkDarkerer, RedsiftDataVizColorPinkDefault, RedsiftDataVizColorPinkLight, RedsiftDataVizColorPinkLighter, RedsiftDataVizColorPinkLighterer, RedsiftDataVizColorPurpleDark, RedsiftDataVizColorPurpleDarker, RedsiftDataVizColorPurpleDarkerer, RedsiftDataVizColorPurpleDefault, RedsiftDataVizColorPurpleLight, RedsiftDataVizColorPurpleLighter, RedsiftDataVizColorPurpleLighterer, RedsiftDataVizColorRedDark, RedsiftDataVizColorRedDarker, RedsiftDataVizColorRedDarkerer, RedsiftDataVizColorRedDefault, RedsiftDataVizColorRedLight, RedsiftDataVizColorRedLighter, RedsiftDataVizColorRedLighterer, RedsiftDataVizColorYellowDark, RedsiftDataVizColorYellowDarker, RedsiftDataVizColorYellowDarkerer, RedsiftDataVizColorYellowDefault, RedsiftDataVizColorYellowLight, RedsiftDataVizColorYellowLighter, RedsiftDataVizColorYellowLighterer, RedsiftLayoutZIndexDialog, RedsiftLayoutZIndexDropdown, RedsiftLayoutZIndexFooter, RedsiftLayoutZIndexHeader, RedsiftLayoutZIndexOverlay, RedsiftLayoutZIndexPopover, RedsiftLayoutZIndexSidePanel, RedsiftLayoutZIndexTooltip, RedsiftSideNavigationColorBackground, RedsiftSideNavigationColorMenuItemActive, RedsiftSideNavigationColorMenuItemBackgroundActive, RedsiftSideNavigationColorMenuItemBackgroundHover, RedsiftSideNavigationColorMenuItemBackgroundSecondary, RedsiftSideNavigationColorMenuItemTextDisabled, RedsiftSideNavigationColorMenuItemTextHover, RedsiftSideNavigationColorMenuItemTextResting, RedsiftSideNavigationColorScrollbarHover, RedsiftSideNavigationColorScrollbarResting, RedsiftTypographyBadgeFontFamily, RedsiftTypographyBadgeFontSize, RedsiftTypographyBadgeFontWeight, RedsiftTypographyBadgeLineHeight, RedsiftTypographyBody2FontFamily, RedsiftTypographyBody2FontSize, RedsiftTypographyBody2FontWeight, RedsiftTypographyBody2LineHeight, RedsiftTypographyBodyFontFamily, RedsiftTypographyBodyFontSize, RedsiftTypographyBodyFontWeight, RedsiftTypographyBodyLineHeight, RedsiftTypographyBodyTextTransform, RedsiftTypographyButtonFontFamily, RedsiftTypographyButtonFontSize, RedsiftTypographyButtonFontWeight, RedsiftTypographyButtonLineHeight, RedsiftTypographyButtonTextTransform, RedsiftTypographyCaptionFontFamily, RedsiftTypographyCaptionFontSize, RedsiftTypographyCaptionFontWeight, RedsiftTypographyCaptionLineHeight, RedsiftTypographyCaptionTextTransform, RedsiftTypographyChipFontFamily, RedsiftTypographyChipFontSize, RedsiftTypographyChipFontWeight, RedsiftTypographyChipLineHeight, RedsiftTypographyDatagridCellFontFamily, RedsiftTypographyDatagridCellFontSize, RedsiftTypographyDatagridCellFontWeight, RedsiftTypographyDatagridCellLineHeight, RedsiftTypographyDatagridHeaderFontFamily, RedsiftTypographyDatagridHeaderFontSize, RedsiftTypographyDatagridHeaderFontWeight, RedsiftTypographyDatagridHeaderLineHeight, RedsiftTypographyFontFamilyElectrolize, RedsiftTypographyFontFamilyRaleway, RedsiftTypographyFontFamilySourceCodePro, RedsiftTypographyFontWeightBold, RedsiftTypographyFontWeightMedium, RedsiftTypographyFontWeightRegular, RedsiftTypographyFontWeightSemiBold, RedsiftTypographyH1FontFamily, RedsiftTypographyH1FontSize, RedsiftTypographyH1FontWeight, RedsiftTypographyH1LineHeight, RedsiftTypographyH1TextTransform, RedsiftTypographyH2FontFamily, RedsiftTypographyH2FontSize, RedsiftTypographyH2FontWeight, RedsiftTypographyH2LineHeight, RedsiftTypographyH2TextTransform, RedsiftTypographyH3FontFamily, RedsiftTypographyH3FontSize, RedsiftTypographyH3FontWeight, RedsiftTypographyH3LineHeight, RedsiftTypographyH3TextTransform, RedsiftTypographyH4FontFamily, RedsiftTypographyH4FontSize, RedsiftTypographyH4FontWeight, RedsiftTypographyH4LineHeight, RedsiftTypographyH4TextTransform, RedsiftTypographyH5FontFamily, RedsiftTypographyH5FontSize, RedsiftTypographyH5FontWeight, RedsiftTypographyH5LineHeight, RedsiftTypographyH5TextTransform, RedsiftTypographyHelperFontFamily, RedsiftTypographyHelperFontSize, RedsiftTypographyHelperFontWeight, RedsiftTypographyHelperLineHeight, RedsiftTypographyInputTextFontFamily, RedsiftTypographyInputTextFontSize, RedsiftTypographyInputTextFontWeight, RedsiftTypographyInputTextLineHeight, RedsiftTypographyLinkFontFamily, RedsiftTypographyLinkFontSize, RedsiftTypographyLinkFontWeight, RedsiftTypographyLinkLineHeight, RedsiftTypographyPillFontFamily, RedsiftTypographyPillFontSize, RedsiftTypographyPillFontWeight, RedsiftTypographyPillLineHeight, RedsiftTypographySubtitleFontFamily, RedsiftTypographySubtitleFontSize, RedsiftTypographySubtitleFontWeight, RedsiftTypographySubtitleLineHeight, RedsiftTypographySubtitleTextTransform, RedsiftTypographyTooltipFontFamily, RedsiftTypographyTooltipFontSize, RedsiftTypographyTooltipFontWeight, RedsiftTypographyTooltipLineHeight, Shield, ShieldVariant, SideNavigationMenu, SideNavigationMenuBar, SideNavigationMenuItem, SideNavigationMenuReducerActionType, Skeleton, SkeletonCircle, SkeletonText, SkeletonTextVariant, Spinner, SpinnerSize, StyledButton, StyledLink, Switch, SwitchGroup, SwitchGroupOrientation, Text, TextComponent, TextField, TextFieldVariant, TextVariant, baseContainer, baseFlexbox, baseGrid, baseInternalSpacing, baseLayout, basePositioning, baseSizing, baseSpacing, baseStyling, filterComponents, focusRing, isComponent, partitionComponents, useAppSidePanel, useBoundingClientRect, $325a3faab7a68acd$export$a16aca283550c30d as useCollator, $896ba0a80a8f4d36$export$85fd5fdf27bacc79 as useDateFormatter, $bb77f239b46e8c72$export$3274cf84b703fff as useFilter, $704cf1d3b684cc5c$export$535bd6ca7f90a273 as useIsSSR, $33bf17300c498528$export$a2f47a3d2973640 as useListFormatter, $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 as useLocale, $fca6afa0e843324b$export$f12b703ca79dfbb1 as useLocalizedStringFormatter, $a916eb452884faea$export$b7a616150fdb9f44 as useNumberFormatter, useSideNavigationMenuBar, useWindowSize, warnIfNoAccessibleLabelFound };
 //# sourceMappingURL=index.js.map