@redsift/design-system 8.0.2 → 8.0.4

package/index.js

@@ -1,7 +1,7 @@
 import { I18nProvider, useLocalizedStringFormatter, useFocusRing, useNumberFormatter, useFocusWithin } from 'react-aria';
 export { I18nProvider, SSRProvider } from 'react-aria';
 import * as React from 'react';
-import React__default, { useState, useEffect, useContext, useRef, useMemo, useCallback, forwardRef, useReducer, useLayoutEffect, useId as useId$1 } from 'react';
+import React__default, { useState, useEffect, useContext, useMemo, useRef, useCallback, forwardRef, useReducer, useLayoutEffect, useId as useId$1 } from 'react';
 import classNames from 'classnames';
 import { mdiClose, mdiAlert, mdiCheckCircle, mdiAlertCircle, mdiInformation, mdiMenu, mdiMenuOpen, mdiChevronDown, mdiChevronRight, mdiChevronUp, mdiCheckboxMarked, mdiMinusBox, mdiCheckboxBlankOutline, mdiPageLast, mdiKeyboardCaps, mdiRadioboxMarked, mdiRadioboxBlank } from '@redsift/icons';
 import styled, { css, keyframes } from 'styled-components';
@@ -592,77 +592,7 @@ const $704cf1d3b684cc5c$var$defaultContext = {
     isSSR: false
 };
 const $704cf1d3b684cc5c$var$SSRContext = /*#__PURE__*/ (React__default).createContext($704cf1d3b684cc5c$var$defaultContext);
-let $704cf1d3b684cc5c$var$canUseDOM = Boolean(typeof window !== "undefined" && window.document && window.document.createElement);
-let $704cf1d3b684cc5c$var$componentIds = new WeakMap();
-function $704cf1d3b684cc5c$var$useCounter(isDisabled = false) {
-    let ctx = (useContext)($704cf1d3b684cc5c$var$SSRContext);
-    let ref = (useRef)(null);
-    // eslint-disable-next-line rulesdir/pure-render
-    if (ref.current === null && !isDisabled) {
-        var _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner;
-        // In strict mode, React renders components twice, and the ref will be reset to null on the second render.
-        // This means our id counter will be incremented twice instead of once. This is a problem because on the
-        // server, components are only rendered once and so ids generated on the server won't match the client.
-        // In React 18, useId was introduced to solve this, but it is not available in older versions. So to solve this
-        // we need to use some React internals to access the underlying Fiber instance, which is stable between renders.
-        // This is exposed as ReactCurrentOwner in development, which is all we need since StrictMode only runs in development.
-        // To ensure that we only increment the global counter once, we store the starting id for this component in
-        // a weak map associated with the Fiber. On the second render, we reset the global counter to this value.
-        // Since React runs the second render immediately after the first, this is safe.
-        // @ts-ignore
-        let currentOwner = (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = (React__default).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === void 0 ? void 0 : (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner = _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner === void 0 ? void 0 : _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner.current;
-        if (currentOwner) {
-            let prevComponentValue = $704cf1d3b684cc5c$var$componentIds.get(currentOwner);
-            if (prevComponentValue == null) // On the first render, and first call to useId, store the id and state in our weak map.
-            $704cf1d3b684cc5c$var$componentIds.set(currentOwner, {
-                id: ctx.current,
-                state: currentOwner.memoizedState
-            });
-            else if (currentOwner.memoizedState !== prevComponentValue.state) {
-                // On the second render, the memoizedState gets reset by React.
-                // Reset the counter, and remove from the weak map so we don't
-                // do this for subsequent useId calls.
-                ctx.current = prevComponentValue.id;
-                $704cf1d3b684cc5c$var$componentIds.delete(currentOwner);
-            }
-        }
-        // eslint-disable-next-line rulesdir/pure-render
-        ref.current = ++ctx.current;
-    }
-    // eslint-disable-next-line rulesdir/pure-render
-    return ref.current;
-}
-function $704cf1d3b684cc5c$var$useLegacySSRSafeId(defaultId) {
-    let ctx = (useContext)($704cf1d3b684cc5c$var$SSRContext);
-    // If we are rendering in a non-DOM environment, and there's no SSRProvider,
-    // provide a warning to hint to the developer to add one.
-    if (ctx === $704cf1d3b684cc5c$var$defaultContext && !$704cf1d3b684cc5c$var$canUseDOM) console.warn("When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.");
-    let counter = $704cf1d3b684cc5c$var$useCounter(!!defaultId);
-    return defaultId || `react-aria${ctx.prefix}-${counter}`;
-}
-function $704cf1d3b684cc5c$var$useModernSSRSafeId(defaultId) {
-    // @ts-ignore
-    let id = (React__default).useId();
-    let [didSSR] = (useState)($704cf1d3b684cc5c$export$535bd6ca7f90a273());
-    let prefix = didSSR ? "react-aria" : `react-aria${$704cf1d3b684cc5c$var$defaultContext.prefix}`;
-    return defaultId || `${prefix}-${id}`;
-}
-typeof (React__default)["useId"] === "function" ? $704cf1d3b684cc5c$var$useModernSSRSafeId : $704cf1d3b684cc5c$var$useLegacySSRSafeId;
-function $704cf1d3b684cc5c$var$getSnapshot() {
-    return false;
-}
-function $704cf1d3b684cc5c$var$getServerSnapshot() {
-    return true;
-}
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function $704cf1d3b684cc5c$var$subscribe(onStoreChange) {
-    // noop
-    return ()=>{};
-}
 function $704cf1d3b684cc5c$export$535bd6ca7f90a273() {
-    // In React 18, we can use useSyncExternalStore to detect if we're server rendering or hydrating.
-    if (typeof (React__default)["useSyncExternalStore"] === "function") return (React__default)["useSyncExternalStore"]($704cf1d3b684cc5c$var$subscribe, $704cf1d3b684cc5c$var$getSnapshot, $704cf1d3b684cc5c$var$getServerSnapshot);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     let cur = (useContext)($704cf1d3b684cc5c$var$SSRContext);
     return cur.isSSR;
 }
@@ -917,121 +847,6 @@ 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");
@@ -1069,7 +884,7 @@ try {
         unit: "degree"
     }).resolvedOptions().style === "unit";
 // eslint-disable-next-line no-empty
-} catch (e) {}
+} catch (e1) {}
 // 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.
@@ -1407,10 +1222,11 @@ 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.
-    options = ($5a387cc49350e6db$export$722debc0e56fea39)(options, $896ba0a80a8f4d36$var$isEqual);
+    let lastOptions = (useRef)(null);
+    if (options && lastOptions.current && $896ba0a80a8f4d36$var$isEqual(options, lastOptions.current)) options = lastOptions.current;
+    lastOptions.current = options;
     let { locale: locale  } = ($18f2051aff69b9bf$export$43bb16f9c6d9e3f7)();
     return (useMemo)(()=>new ($fb18d541ea1ad717$export$ad991b66133851cf)(locale, options), [
         locale,
@@ -5880,6 +5696,8 @@ const StyledDetailedCardCollapsibleSectionItems = styled.div`
     justify-content: flex-end;
     line-height: 14px;
     margin: 8px 0px;
+    padding-top: 8px;
+    border-top: 1px solid var(--redsift-color-neutral-midgrey);
   }
 `;
 
@@ -5918,13 +5736,16 @@ const StyledDetailedCardSection = styled.div`
   margin: 8px 0;
 
   .redsift-detailed-card-section__header {
-    border-bottom: 1px solid
-      ${_ref => {
+    ${_ref => {
   let {
     $color
   } = _ref;
-  return $color ? css`var(--redsift-color-${$color}-primary)` : 'var(--redsift-color-neutral-midgrey)';
-}};
+  return $color && [...Object.keys(ColorPalette), ...Object.keys(ProductColorPalette)].indexOf($color) !== -1 ? css`
+            border-bottom: 1px solid var(--redsift-color-${$color}-primary);
+          ` : css`
+            border-bottom: 1px solid ${$color || css`var(--redsift-color-neutral-midgrey)`};
+          `;
+}}
     margin-bottom: 8px;
   }
 
@@ -6195,6 +6016,7 @@ const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
   }, header), badge ? /*#__PURE__*/React__default.createElement(Badge, _extends$1({
     variant: BadgeVariant.standard
   }, badge)) : null)) : null, isCollapsible && !isLoading ? /*#__PURE__*/React__default.createElement(IconButton, {
+    marginLeft: "auto",
     "aria-label": stringFormatter.format(isCollapsed ? 'expand' : 'collapse'),
     className: `${DetailedCardSection.className}-header__collapse-button`,
     color: "question",
@@ -6306,13 +6128,11 @@ const StyledPill = styled.div`
     ${$color === 'black' ? 'background-color: var(--redsift-color-neutral-black);' : $color === 'white' ? css`
           background-color: var(--redsift-color-neutral-white);
           border: 1px solid #d6d6d6;
-        ` : $color === 'error' ? 'background-color: var(--redsift-data-viz-color-brown-default);' : $color === 'warning' ? 'background-color: var(--redsift-data-viz-color-purple-default);' : $color === 'success' ? 'background-color: var(--redsift-data-viz-color-aqua-default);' : `background-color: var(--redsift-data-viz-color-${$color}-default);`}
+        ` : $color === 'no-data' ? 'background-color: var(--redsift-color-neutral-midgrey);' : $color === 'error' ? 'background-color: var(--redsift-data-viz-color-red-lighter);' : $color === 'warning' ? 'background-color: var(--redsift-data-viz-color-orange-lighter);' : $color === 'success' ? 'background-color: var(--redsift-data-viz-color-green-lighter);' : $color === 'error-dark' ? 'background-color: var(--redsift-data-viz-color-red-default);' : $color === 'warning-dark' ? 'background-color: var(--redsift-data-viz-color-orange-default);' : $color === 'success-dark' ? 'background-color: var(--redsift-data-viz-color-green-default);' : `background-color: var(--redsift-data-viz-color-${$color}-light);`}
 
     &,
     .redsift-icon {
-      color: var(
-        --redsift-color-neutral-${$color === 'black' ? 'white' : 'black'}
-      );
+      color: var(--redsift-color-neutral-${['black', 'warning-dark', 'success-dark'].includes($color) ? 'white' : 'black'});
     }
   `;
 }}}
@@ -6437,7 +6257,7 @@ DetailedCardSectionItem.defaultProps = DEFAULT_PROPS$e;
 DetailedCardSectionItem.displayName = COMPONENT_NAME$e;
 
 /*!
-* tabbable 6.2.0
+* tabbable 6.1.2
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
 */
 // NOTE: separate `:not()` selectors has broader browser support than the newer
@@ -6617,27 +6437,7 @@ var getCandidatesIteratively = function getCandidatesIteratively(elements, inclu
   }
   return candidates;
 };
-
-/**
- * @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');
-  }
+var getTabindex = function getTabindex(node, isScope) {
   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,
@@ -6646,28 +6446,16 @@ var getTabIndex = function getTabIndex(node) {
     // 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.
-    if ((/^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && !hasTabIndex(node)) {
+    //
+    // 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))) {
       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;
 };
@@ -6910,7 +6698,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;
@@ -6935,7 +6723,7 @@ var sortByOrder = function sortByOrder(candidates) {
   candidates.forEach(function (item, i) {
     var isScope = !!item.scopeParent;
     var element = isScope ? item.scopeParent : item;
-    var candidateTabindex = getSortOrderTabIndex(element, isScope);
+    var candidateTabindex = getTabindex(element, isScope);
     var elements = isScope ? sortByOrder(item.candidates) : element;
     if (candidateTabindex === 0) {
       isScope ? regularTabbables.push.apply(regularTabbables, elements) : regularTabbables.push(element);
@@ -6954,18 +6742,18 @@ var sortByOrder = function sortByOrder(candidates) {
     return acc;
   }, []).concat(regularTabbables);
 };
-var tabbable = function tabbable(container, options) {
+var tabbable = function tabbable(el, options) {
   options = options || {};
   var candidates;
   if (options.getShadowRoot) {
-    candidates = getCandidatesIteratively([container], options.includeContainer, {
+    candidates = getCandidatesIteratively([el], options.includeContainer, {
       filter: isNodeMatchingSelectorTabbable.bind(null, options),
       flatten: false,
       getShadowRoot: options.getShadowRoot,
       shadowRootFilter: isValidShadowRootTabbable
     });
   } else {
-    candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
+    candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
   }
   return sortByOrder(candidates);
 };
@@ -7307,7 +7095,7 @@ const arrow$1 = options => ({
       [axis]: coords[axis] - alignmentOffset,
       data: {
         [axis]: offset,
-        centerOffset: center - offset + alignmentOffset
+        centerOffset: center - offset
       }
     };
   }
@@ -7653,13 +7441,7 @@ function isNode(value) {
   return value instanceof getWindow$1(value).Node;
 }
 function getNodeName(node) {
-  if (isNode(node)) {
-    return (node.nodeName || '').toLowerCase();
-  }
-  // Mocked nodes in testing environments may not be instances of Node. By
-  // returning `#document` an infinite loop won't occur.
-  // https://github.com/floating-ui/floating-ui/issues/2317
-  return '#document';
+  return isNode(node) ? (node.nodeName || '').toLowerCase() : '';
 }
 
 function isHTMLElement$1(value) {
@@ -7673,7 +7455,8 @@ function isShadowRoot$1(node) {
   if (typeof ShadowRoot === 'undefined') {
     return false;
   }
-  return node instanceof getWindow$1(node).ShadowRoot || node instanceof ShadowRoot;
+  const OwnElement = getWindow$1(node).ShadowRoot;
+  return node instanceof OwnElement || node instanceof ShadowRoot;
 }
 function isOverflowElement(element) {
   const {
@@ -7705,11 +7488,6 @@ function isLastTraversableNode(node) {
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
-const floor = Math.floor;
-const createEmptyCoords = v => ({
-  x: v,
-  y: v
-});
 
 function getCssDimensions(element) {
   const css = getComputedStyle$1(element);
@@ -7728,7 +7506,7 @@ function getCssDimensions(element) {
   return {
     width,
     height,
-    $: shouldFallback
+    fallback: shouldFallback
   };
 }
 
@@ -7736,19 +7514,23 @@ 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 createEmptyCoords(1);
+    return FALLBACK_SCALE;
   }
   const rect = domElement.getBoundingClientRect();
   const {
     width,
     height,
-    $
+    fallback
   } = getCssDimensions(domElement);
-  let x = ($ ? round(rect.width) : rect.width) / width;
-  let y = ($ ? round(rect.height) : rect.height) / height;
+  let x = (fallback ? round(rect.width) : rect.width) / width;
+  let y = (fallback ? round(rect.height) : rect.height) / height;
 
   // 0, NaN, or Infinity should always fallback to 1.
 
@@ -7764,7 +7546,10 @@ function getScale(element) {
   };
 }
 
-const noOffsets = /*#__PURE__*/createEmptyCoords(0);
+const noOffsets = {
+  x: 0,
+  y: 0
+};
 function getVisualOffsets(element, isFixed, floatingOffsetParent) {
   var _win$visualViewport, _win$visualViewport2;
   if (isFixed === void 0) {
@@ -7792,7 +7577,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   }
   const clientRect = element.getBoundingClientRect();
   const domElement = unwrapElement(element);
-  let scale = createEmptyCoords(1);
+  let scale = FALLBACK_SCALE;
   if (includeScale) {
     if (offsetParent) {
       if (isElement$1(offsetParent)) {
@@ -7815,14 +7600,14 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
       const css = getComputedStyle(currentIFrame);
-      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
-      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
+      iframeRect.x += (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
+      iframeRect.y += (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
       y *= iframeScale.y;
       width *= iframeScale.x;
       height *= iframeScale.y;
-      x += left;
-      y += top;
+      x += iframeRect.x;
+      y += iframeRect.y;
       currentIFrame = getWindow$1(currentIFrame).frameElement;
     }
   }
@@ -7866,8 +7651,14 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
     scrollLeft: 0,
     scrollTop: 0
   };
-  let scale = createEmptyCoords(1);
-  const offsets = createEmptyCoords(0);
+  let scale = {
+    x: 1,
+    y: 1
+  };
+  const offsets = {
+    x: 0,
+    y: 0
+  };
   if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
@@ -7933,7 +7724,9 @@ function getParentNode(node) {
 function getNearestOverflowAncestor(node) {
   const parentNode = getParentNode(node);
   if (isLastTraversableNode(parentNode)) {
-    return node.ownerDocument ? node.ownerDocument.body : node.body;
+    // `getParentNode` will never return a `Document` due to the fallback
+    // check, so it's either the <html> or <body> element.
+    return parentNode.ownerDocument.body;
   }
   if (isHTMLElement$1(parentNode) && isOverflowElement(parentNode)) {
     return parentNode;
@@ -7985,7 +7778,10 @@ 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) : createEmptyCoords(1);
+  const scale = isHTMLElement$1(element) ? getScale(element) : {
+    x: 1,
+    y: 1
+  };
   const width = element.clientWidth * scale.x;
   const height = element.clientHeight * scale.y;
   const x = left * scale.x;
@@ -8136,7 +7932,10 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
     scrollLeft: 0,
     scrollTop: 0
   };
-  const offsets = createEmptyCoords(0);
+  const offsets = {
+    x: 0,
+    y: 0
+  };
   if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
@@ -8186,67 +7985,6 @@ 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
@@ -8263,25 +8001,29 @@ function autoUpdate(reference, floating, update, options) {
     ancestorScroll = true,
     ancestorResize = true,
     elementResize = true,
-    layoutShift = typeof IntersectionObserver === 'function',
     animationFrame = false
   } = options;
-  const referenceEl = unwrapElement(reference);
-  const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
+  const ancestors = ancestorScroll || ancestorResize ? [...(isElement$1(reference) ? getOverflowAncestors(reference) : reference.contextElement ? getOverflowAncestors(reference.contextElement) : []), ...getOverflowAncestors(floating)] : [];
   ancestors.forEach(ancestor => {
-    ancestorScroll && ancestor.addEventListener('scroll', update, {
-      passive: true
-    });
+    // ignores Window, checks for [object VisualViewport]
+    const isVisualViewport = !isElement$1(ancestor) && ancestor.toString().includes('V');
+    if (ancestorScroll && (animationFrame ? isVisualViewport : true)) {
+      ancestor.addEventListener('scroll', update, {
+        passive: true
+      });
+    }
     ancestorResize && ancestor.addEventListener('resize', update);
   });
-  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
-  let resizeObserver = null;
+  let observer = null;
   if (elementResize) {
-    resizeObserver = new ResizeObserver(update);
-    if (referenceEl && !animationFrame) {
-      resizeObserver.observe(referenceEl);
+    observer = new ResizeObserver(() => {
+      update();
+    });
+    isElement$1(reference) && !animationFrame && observer.observe(reference);
+    if (!isElement$1(reference) && reference.contextElement && !animationFrame) {
+      observer.observe(reference.contextElement);
     }
-    resizeObserver.observe(floating);
+    observer.observe(floating);
   }
   let frameId;
   let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
@@ -8298,13 +8040,13 @@ function autoUpdate(reference, floating, update, options) {
   }
   update();
   return () => {
+    var _observer;
     ancestors.forEach(ancestor => {
       ancestorScroll && ancestor.removeEventListener('scroll', update);
       ancestorResize && ancestor.removeEventListener('resize', update);
     });
-    cleanupIo && cleanupIo();
-    resizeObserver && resizeObserver.disconnect();
-    resizeObserver = null;
+    (_observer = observer) == null ? void 0 : _observer.disconnect();
+    observer = null;
     if (animationFrame) {
       cancelAnimationFrame(frameId);
     }
@@ -10225,7 +9967,7 @@ const useTooltipContext = () => {
   return context;
 };
 
-const _excluded$a = ["areAllCollapsed", "children", "className", "color", "defaultAllCollapsed", "icon", "isCollapsible", "isLoading", "onCollapseAll", "shield"];
+const _excluded$a = ["areAllCollapsed", "bannerVariant", "children", "className", "color", "defaultAllCollapsed", "icon", "isCollapsible", "isLoading", "onCollapseAll", "shield"];
 const COMPONENT_NAME$a = 'DetailedCard';
 const CLASSNAME$a = 'redsift-detailed-card';
 const DEFAULT_PROPS$a = {
@@ -10257,6 +9999,7 @@ const hasMultipleCollapsibleChildren = children => {
 const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       areAllCollapsed: propsAreAllCollapsed,
+      bannerVariant,
       children,
       className,
       color,
@@ -10294,17 +10037,17 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref,
     $color: color
   }), color ? isLoading ? /*#__PURE__*/React__default.createElement(Skeleton, {
-    height: "80px",
+    height: bannerVariant === 'condensed' ? '8px' : '80px',
     width: "calc(100% + 32px)",
     margin: "-16px -16px 16px -16px"
   }) : /*#__PURE__*/React__default.createElement(Flexbox, {
     className: `${BaseDetailedCard.className}__banner`,
     alignItems: "center",
-    height: "80px",
+    height: bannerVariant === 'condensed' ? '8px' : '80px',
     justifyContent: "center",
     margin: "-16px -16px 16px -16px",
     width: "calc(100% + 32px)"
-  }, shield ? /*#__PURE__*/React__default.createElement(Shield, {
+  }, bannerVariant === 'condensed' ? null : shield ? /*#__PURE__*/React__default.createElement(Shield, {
     variant: shield,
     isOutlined: true,
     isReversed: true,