@redsift/design-system 8.0.6 → 8.1.0

package/index.js

@@ -1,12 +1,15 @@
-import { I18nProvider, useLocalizedStringFormatter, useFocusRing, useNumberFormatter, useFocusWithin } from 'react-aria';
-export { I18nProvider, SSRProvider } from 'react-aria';
+import { I18nProvider, useLocalizedStringFormatter, useNumberFormatter } from '@react-aria/i18n';
+export { I18nProvider, useCollator, useDateFormatter, useFilter, useListFormatter, useLocale, useLocalizedStringFormatter, useNumberFormatter } from '@react-aria/i18n';
+export { SSRProvider, useIsSSR } from '@react-aria/ssr';
 import * as React from 'react';
-import React__default, { useState, useEffect, useContext, useMemo, useRef, useCallback, forwardRef, useReducer, useLayoutEffect, useId as useId$1 } from 'react';
+import React__default, { useState, useEffect, forwardRef, useMemo, useContext, useRef, useCallback, 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 { mdiClose as mdiClose$1, 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';
+import { useFocusRing } from '@react-aria/focus';
 import * as ReactDOM from 'react-dom';
 import { createPortal } from 'react-dom';
+import { useFocusWithin } from '@react-aria/interactions';
 
 /**
  * Font.
@@ -557,799 +560,6 @@ const useBoundingClientRect = (ref, deps) => {
   return boundingRect;
 };
 
-/*
- * 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.
- */ // We must avoid a circular dependency with @react-aria/utils, and this useLayoutEffect is
-// guarded by a check that it only runs on the client side.
-// eslint-disable-next-line rulesdir/useLayoutEffectRule
-
-// Default context value to use in case there is no SSRProvider. This is fine for
-// client-only apps. In order to support multiple copies of React Aria potentially
-// being on the page at once, the prefix is set to a random number. SSRProvider
-// will reset this to zero for consistency between server and client, so in the
-// SSR case multiple copies of React Aria is not supported.
-const $704cf1d3b684cc5c$var$defaultContext = {
-    prefix: String(Math.round(Math.random() * 10000000000)),
-    current: 0,
-    isSSR: false
-};
-const $704cf1d3b684cc5c$var$SSRContext = /*#__PURE__*/ (React__default).createContext($704cf1d3b684cc5c$var$defaultContext);
-function $704cf1d3b684cc5c$export$535bd6ca7f90a273() {
-    let cur = (useContext)($704cf1d3b684cc5c$var$SSRContext);
-    return cur.isSSR;
-}
-
-/*
- * Copyright 2022 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 2022 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.
- */ class $5b160d28a433310d$export$c17fa47878dc55b6 {
-    /** Returns a localized string for the given key and locale. */ getStringForLocale(key, locale) {
-        let strings = this.strings[locale];
-        if (!strings) {
-            strings = $5b160d28a433310d$var$getStringsForLocale(locale, this.strings, this.defaultLocale);
-            this.strings[locale] = strings;
-        }
-        let string = strings[key];
-        if (!string) throw new Error(`Could not find intl message ${key} in ${locale} locale`);
-        return string;
-    }
-    constructor(messages, defaultLocale = "en-US"){
-        // Clone messages so we don't modify the original object.
-        this.strings = {
-            ...messages
-        };
-        this.defaultLocale = defaultLocale;
-    }
-}
-function $5b160d28a433310d$var$getStringsForLocale(locale, strings, defaultLocale = "en-US") {
-    // If there is an exact match, use it.
-    if (strings[locale]) return strings[locale];
-    // Attempt to find the closest match by language.
-    // For example, if the locale is fr-CA (French Canadian), but there is only
-    // an fr-FR (France) set of strings, use that.
-    // This could be replaced with Intl.LocaleMatcher once it is supported.
-    // https://github.com/tc39/proposal-intl-localematcher
-    let language = $5b160d28a433310d$var$getLanguage(locale);
-    if (strings[language]) return strings[language];
-    for(let key in strings){
-        if (key.startsWith(language + "-")) return strings[key];
-    }
-    // Nothing close, use english.
-    return strings[defaultLocale];
-}
-function $5b160d28a433310d$var$getLanguage(locale) {
-    // @ts-ignore
-    if (Intl.Locale) // @ts-ignore
-    return new Intl.Locale(locale).language;
-    return locale.split("-")[0];
-}
-
-
-/*
- * Copyright 2022 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.
- */ const $6db58dc88e78b024$var$pluralRulesCache = new Map();
-const $6db58dc88e78b024$var$numberFormatCache = new Map();
-class $6db58dc88e78b024$export$2f817fcdc4b89ae0 {
-    /** Formats a localized string for the given key with the provided variables. */ format(key, variables) {
-        let message = this.strings.getStringForLocale(key, this.locale);
-        return typeof message === "function" ? message(variables, this) : message;
-    }
-    plural(count, options, type = "cardinal") {
-        let opt = options["=" + count];
-        if (opt) return typeof opt === "function" ? opt() : opt;
-        let key = this.locale + ":" + type;
-        let pluralRules = $6db58dc88e78b024$var$pluralRulesCache.get(key);
-        if (!pluralRules) {
-            pluralRules = new Intl.PluralRules(this.locale, {
-                type: type
-            });
-            $6db58dc88e78b024$var$pluralRulesCache.set(key, pluralRules);
-        }
-        let selected = pluralRules.select(count);
-        opt = options[selected] || options.other;
-        return typeof opt === "function" ? opt() : opt;
-    }
-    number(value) {
-        let numberFormat = $6db58dc88e78b024$var$numberFormatCache.get(this.locale);
-        if (!numberFormat) {
-            numberFormat = new Intl.NumberFormat(this.locale);
-            $6db58dc88e78b024$var$numberFormatCache.set(this.locale, numberFormat);
-        }
-        return numberFormat.format(value);
-    }
-    select(options, value) {
-        let opt = options[value] || options.other;
-        return typeof opt === "function" ? opt() : opt;
-    }
-    constructor(locale, strings){
-        this.locale = locale;
-        this.strings = strings;
-    }
-}
-
-/*
- * 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.
- */ let $fb18d541ea1ad717$var$formatterCache = new Map();
-class $fb18d541ea1ad717$export$ad991b66133851cf {
-    /** Formats a date as a string according to the locale and format options passed to the constructor. */ format(value) {
-        return this.formatter.format(value);
-    }
-    /** Formats a date to an array of parts such as separators, numbers, punctuation, and more. */ formatToParts(value) {
-        return this.formatter.formatToParts(value);
-    }
-    /** Formats a date range as a string. */ formatRange(start, end) {
-        // @ts-ignore
-        if (typeof this.formatter.formatRange === "function") // @ts-ignore
-        return this.formatter.formatRange(start, end);
-        if (end < start) throw new RangeError("End date must be >= start date");
-        // Very basic fallback for old browsers.
-        return `${this.formatter.format(start)} – ${this.formatter.format(end)}`;
-    }
-    /** Formats a date range as an array of parts. */ formatRangeToParts(start, end) {
-        // @ts-ignore
-        if (typeof this.formatter.formatRangeToParts === "function") // @ts-ignore
-        return this.formatter.formatRangeToParts(start, end);
-        if (end < start) throw new RangeError("End date must be >= start date");
-        let startParts = this.formatter.formatToParts(start);
-        let endParts = this.formatter.formatToParts(end);
-        return [
-            ...startParts.map((p)=>({
-                    ...p,
-                    source: "startRange"
-                })),
-            {
-                type: "literal",
-                value: " – ",
-                source: "shared"
-            },
-            ...endParts.map((p)=>({
-                    ...p,
-                    source: "endRange"
-                }))
-        ];
-    }
-    /** Returns the resolved formatting options based on the values passed to the constructor. */ resolvedOptions() {
-        let resolvedOptions = this.formatter.resolvedOptions();
-        if ($fb18d541ea1ad717$var$hasBuggyResolvedHourCycle()) {
-            if (!this.resolvedHourCycle) this.resolvedHourCycle = $fb18d541ea1ad717$var$getResolvedHourCycle(resolvedOptions.locale, this.options);
-            resolvedOptions.hourCycle = this.resolvedHourCycle;
-            resolvedOptions.hour12 = this.resolvedHourCycle === "h11" || this.resolvedHourCycle === "h12";
-        }
-        // Safari uses a different name for the Ethiopic (Amete Alem) calendar.
-        // https://bugs.webkit.org/show_bug.cgi?id=241564
-        if (resolvedOptions.calendar === "ethiopic-amete-alem") resolvedOptions.calendar = "ethioaa";
-        return resolvedOptions;
-    }
-    constructor(locale, options = {}){
-        this.formatter = $fb18d541ea1ad717$var$getCachedDateFormatter(locale, options);
-        this.options = options;
-    }
-}
-// There are multiple bugs involving the hour12 and hourCycle options in various browser engines.
-//   - Chrome [1] (and the ECMA 402 spec [2]) resolve hour12: false in English and other locales to h24 (24:00 - 23:59)
-//     rather than h23 (00:00 - 23:59). Same can happen with hour12: true in French, which Chrome resolves to h11 (00:00 - 11:59)
-//     rather than h12 (12:00 - 11:59).
-//   - WebKit returns an incorrect hourCycle resolved option in the French locale due to incorrect parsing of 'h' literal
-//     in the resolved pattern. It also formats incorrectly when specifying the hourCycle option for the same reason. [3]
-// [1] https://bugs.chromium.org/p/chromium/issues/detail?id=1045791
-// [2] https://github.com/tc39/ecma402/issues/402
-// [3] https://bugs.webkit.org/show_bug.cgi?id=229313
-// https://github.com/unicode-org/cldr/blob/018b55eff7ceb389c7e3fc44e2f657eae3b10b38/common/supplemental/supplementalData.xml#L4774-L4802
-const $fb18d541ea1ad717$var$hour12Preferences = {
-    true: {
-        // Only Japanese uses the h11 style for 12 hour time. All others use h12.
-        ja: "h11"
-    },
-    false: {
-    }
-};
-function $fb18d541ea1ad717$var$getCachedDateFormatter(locale, options = {}) {
-    // Work around buggy hour12 behavior in Chrome / ECMA 402 spec by using hourCycle instead.
-    // Only apply the workaround if the issue is detected, because the hourCycle option is buggy in Safari.
-    if (typeof options.hour12 === "boolean" && $fb18d541ea1ad717$var$hasBuggyHour12Behavior()) {
-        options = {
-            ...options
-        };
-        let pref = $fb18d541ea1ad717$var$hour12Preferences[String(options.hour12)][locale.split("-")[0]];
-        let defaultHourCycle = options.hour12 ? "h12" : "h23";
-        options.hourCycle = pref !== null && pref !== void 0 ? pref : defaultHourCycle;
-        delete options.hour12;
-    }
-    let cacheKey = locale + (options ? Object.entries(options).sort((a, b)=>a[0] < b[0] ? -1 : 1).join() : "");
-    if ($fb18d541ea1ad717$var$formatterCache.has(cacheKey)) return $fb18d541ea1ad717$var$formatterCache.get(cacheKey);
-    let numberFormatter = new Intl.DateTimeFormat(locale, options);
-    $fb18d541ea1ad717$var$formatterCache.set(cacheKey, numberFormatter);
-    return numberFormatter;
-}
-let $fb18d541ea1ad717$var$_hasBuggyHour12Behavior = null;
-function $fb18d541ea1ad717$var$hasBuggyHour12Behavior() {
-    if ($fb18d541ea1ad717$var$_hasBuggyHour12Behavior == null) $fb18d541ea1ad717$var$_hasBuggyHour12Behavior = new Intl.DateTimeFormat("en-US", {
-        hour: "numeric",
-        hour12: false
-    }).format(new Date(2020, 2, 3, 0)) === "24";
-    return $fb18d541ea1ad717$var$_hasBuggyHour12Behavior;
-}
-let $fb18d541ea1ad717$var$_hasBuggyResolvedHourCycle = null;
-function $fb18d541ea1ad717$var$hasBuggyResolvedHourCycle() {
-    if ($fb18d541ea1ad717$var$_hasBuggyResolvedHourCycle == null) $fb18d541ea1ad717$var$_hasBuggyResolvedHourCycle = new Intl.DateTimeFormat("fr", {
-        hour: "numeric",
-        hour12: false
-    }).resolvedOptions().hourCycle === "h12";
-    return $fb18d541ea1ad717$var$_hasBuggyResolvedHourCycle;
-}
-function $fb18d541ea1ad717$var$getResolvedHourCycle(locale, options) {
-    if (!options.timeStyle && !options.hour) return undefined;
-    // Work around buggy results in resolved hourCycle and hour12 options in WebKit.
-    // Format the minimum possible hour and maximum possible hour in a day and parse the results.
-    locale = locale.replace(/(-u-)?-nu-[a-zA-Z0-9]+/, "");
-    locale += (locale.includes("-u-") ? "" : "-u") + "-nu-latn";
-    let formatter = $fb18d541ea1ad717$var$getCachedDateFormatter(locale, {
-        ...options,
-        timeZone: undefined // use local timezone
-    });
-    let min = parseInt(formatter.formatToParts(new Date(2020, 2, 3, 0)).find((p)=>p.type === "hour").value, 10);
-    let max = parseInt(formatter.formatToParts(new Date(2020, 2, 3, 23)).find((p)=>p.type === "hour").value, 10);
-    if (min === 0 && max === 23) return "h23";
-    if (min === 24 && max === 23) return "h24";
-    if (min === 0 && max === 11) return "h11";
-    if (min === 12 && max === 11) return "h12";
-    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.
- */ let $488c6ddbf4ef74c2$var$formatterCache = new Map();
-let $488c6ddbf4ef74c2$var$supportsSignDisplay = false;
-try {
-    // @ts-ignore
-    $488c6ddbf4ef74c2$var$supportsSignDisplay = new Intl.NumberFormat("de-DE", {
-        signDisplay: "exceptZero"
-    }).resolvedOptions().signDisplay === "exceptZero";
-// eslint-disable-next-line no-empty
-} catch (e) {}
-let $488c6ddbf4ef74c2$var$supportsUnit = false;
-try {
-    // @ts-ignore
-    $488c6ddbf4ef74c2$var$supportsUnit = new Intl.NumberFormat("de-DE", {
-        style: "unit",
-        unit: "degree"
-    }).resolvedOptions().style === "unit";
-// eslint-disable-next-line no-empty
-} 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.
-const $488c6ddbf4ef74c2$var$UNITS = {
-    degree: {
-        narrow: {
-            default: "\xb0",
-            "ja-JP": " 度",
-            "zh-TW": "度",
-            "sl-SI": " \xb0"
-        }
-    }
-};
-class $488c6ddbf4ef74c2$export$cc77c4ff7e8673c5 {
-    /** Formats a number value as a string, according to the locale and options provided to the constructor. */ format(value) {
-        let res = "";
-        if (!$488c6ddbf4ef74c2$var$supportsSignDisplay && this.options.signDisplay != null) res = $488c6ddbf4ef74c2$export$711b50b3c525e0f2(this.numberFormatter, this.options.signDisplay, value);
-        else res = this.numberFormatter.format(value);
-        if (this.options.style === "unit" && !$488c6ddbf4ef74c2$var$supportsUnit) {
-            var _UNITS_unit;
-            let { unit: unit , unitDisplay: unitDisplay = "short" , locale: locale  } = this.resolvedOptions();
-            let values = (_UNITS_unit = $488c6ddbf4ef74c2$var$UNITS[unit]) === null || _UNITS_unit === void 0 ? void 0 : _UNITS_unit[unitDisplay];
-            res += values[locale] || values.default;
-        }
-        return res;
-    }
-    /** Formats a number to an array of parts such as separators, digits, punctuation, and more. */ formatToParts(value) {
-        // TODO: implement signDisplay for formatToParts
-        // @ts-ignore
-        return this.numberFormatter.formatToParts(value);
-    }
-    /** Formats a number range as a string. */ formatRange(start, end) {
-        // @ts-ignore
-        if (typeof this.numberFormatter.formatRange === "function") // @ts-ignore
-        return this.numberFormatter.formatRange(start, end);
-        if (end < start) throw new RangeError("End date must be >= start date");
-        // Very basic fallback for old browsers.
-        return `${this.format(start)} – ${this.format(end)}`;
-    }
-    /** Formats a number range as an array of parts. */ formatRangeToParts(start, end) {
-        // @ts-ignore
-        if (typeof this.numberFormatter.formatRangeToParts === "function") // @ts-ignore
-        return this.numberFormatter.formatRangeToParts(start, end);
-        if (end < start) throw new RangeError("End date must be >= start date");
-        let startParts = this.numberFormatter.formatToParts(start);
-        let endParts = this.numberFormatter.formatToParts(end);
-        return [
-            ...startParts.map((p)=>({
-                    ...p,
-                    source: "startRange"
-                })),
-            {
-                type: "literal",
-                value: " – ",
-                source: "shared"
-            },
-            ...endParts.map((p)=>({
-                    ...p,
-                    source: "endRange"
-                }))
-        ];
-    }
-    /** Returns the resolved formatting options based on the values passed to the constructor. */ resolvedOptions() {
-        let options = this.numberFormatter.resolvedOptions();
-        if (!$488c6ddbf4ef74c2$var$supportsSignDisplay && this.options.signDisplay != null) options = {
-            ...options,
-            signDisplay: this.options.signDisplay
-        };
-        if (!$488c6ddbf4ef74c2$var$supportsUnit && this.options.style === "unit") options = {
-            ...options,
-            style: "unit",
-            unit: this.options.unit,
-            unitDisplay: this.options.unitDisplay
-        };
-        return options;
-    }
-    constructor(locale, options = {}){
-        this.numberFormatter = $488c6ddbf4ef74c2$var$getCachedNumberFormatter(locale, options);
-        this.options = options;
-    }
-}
-function $488c6ddbf4ef74c2$var$getCachedNumberFormatter(locale, options = {}) {
-    let { numberingSystem: numberingSystem  } = options;
-    if (numberingSystem && locale.indexOf("-u-nu-") === -1) locale = `${locale}-u-nu-${numberingSystem}`;
-    if (options.style === "unit" && !$488c6ddbf4ef74c2$var$supportsUnit) {
-        var _UNITS_unit;
-        let { unit: unit , unitDisplay: unitDisplay = "short"  } = options;
-        if (!unit) throw new Error('unit option must be provided with style: "unit"');
-        if (!((_UNITS_unit = $488c6ddbf4ef74c2$var$UNITS[unit]) === null || _UNITS_unit === void 0 ? void 0 : _UNITS_unit[unitDisplay])) throw new Error(`Unsupported unit ${unit} with unitDisplay = ${unitDisplay}`);
-        options = {
-            ...options,
-            style: "decimal"
-        };
-    }
-    let cacheKey = locale + (options ? Object.entries(options).sort((a, b)=>a[0] < b[0] ? -1 : 1).join() : "");
-    if ($488c6ddbf4ef74c2$var$formatterCache.has(cacheKey)) return $488c6ddbf4ef74c2$var$formatterCache.get(cacheKey);
-    let numberFormatter = new Intl.NumberFormat(locale, options);
-    $488c6ddbf4ef74c2$var$formatterCache.set(cacheKey, numberFormatter);
-    return numberFormatter;
-}
-function $488c6ddbf4ef74c2$export$711b50b3c525e0f2(numberFormat, signDisplay, num) {
-    if (signDisplay === "auto") return numberFormat.format(num);
-    else if (signDisplay === "never") return numberFormat.format(Math.abs(num));
-    else {
-        let needsPositiveSign = false;
-        if (signDisplay === "always") needsPositiveSign = num > 0 || Object.is(num, 0);
-        else if (signDisplay === "exceptZero") {
-            if (Object.is(num, -0) || Object.is(num, 0)) num = Math.abs(num);
-            else needsPositiveSign = num > 0;
-        }
-        if (needsPositiveSign) {
-            let negative = numberFormat.format(-num);
-            let noSign = numberFormat.format(num);
-            // ignore RTL/LTR marker character
-            let minus = negative.replace(noSign, "").replace(/\u200e|\u061C/, "");
-            if ([
-                ...minus
-            ].length !== 1) console.warn("@react-aria/i18n polyfill for NumberFormat signDisplay: Unsupported case");
-            let positive = negative.replace(noSign, "!!!").replace(minus, "+").replace("!!!", noSign);
-            return positive;
-        } else return numberFormat.format(num);
-    }
-}
-
-/*
- * 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.
- */ // https://en.wikipedia.org/wiki/Right-to-left
-const $148a7a147e38ea7f$var$RTL_SCRIPTS = new Set([
-    "Arab",
-    "Syrc",
-    "Samr",
-    "Mand",
-    "Thaa",
-    "Mend",
-    "Nkoo",
-    "Adlm",
-    "Rohg",
-    "Hebr"
-]);
-const $148a7a147e38ea7f$var$RTL_LANGS = new Set([
-    "ae",
-    "ar",
-    "arc",
-    "bcc",
-    "bqi",
-    "ckb",
-    "dv",
-    "fa",
-    "glk",
-    "he",
-    "ku",
-    "mzn",
-    "nqo",
-    "pnb",
-    "ps",
-    "sd",
-    "ug",
-    "ur",
-    "yi"
-]);
-function $148a7a147e38ea7f$export$702d680b21cbd764(locale) {
-    // If the Intl.Locale API is available, use it to get the script for the locale.
-    // This is more accurate than guessing by language, since languages can be written in multiple scripts.
-    // @ts-ignore
-    if (Intl.Locale) {
-        // @ts-ignore
-        let script = new Intl.Locale(locale).maximize().script;
-        return $148a7a147e38ea7f$var$RTL_SCRIPTS.has(script);
-    }
-    // If not, just guess by the language (first part of the locale)
-    let lang = locale.split("-")[0];
-    return $148a7a147e38ea7f$var$RTL_LANGS.has(lang);
-}
-
-
-/*
- * 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.
- */ 
-
-
-function $1e5a04cdaf7d1af8$export$f09106e7c6677ec5() {
-    // @ts-ignore
-    let locale = typeof navigator !== "undefined" && (navigator.language || navigator.userLanguage) || "en-US";
-    try {
-        // @ts-ignore
-        Intl.DateTimeFormat.supportedLocalesOf([
-            locale
-        ]);
-    } catch (_err) {
-        locale = "en-US";
-    }
-    return {
-        locale: locale,
-        direction: ($148a7a147e38ea7f$export$702d680b21cbd764)(locale) ? "rtl" : "ltr"
-    };
-}
-let $1e5a04cdaf7d1af8$var$currentLocale = $1e5a04cdaf7d1af8$export$f09106e7c6677ec5();
-let $1e5a04cdaf7d1af8$var$listeners = new Set();
-function $1e5a04cdaf7d1af8$var$updateLocale() {
-    $1e5a04cdaf7d1af8$var$currentLocale = $1e5a04cdaf7d1af8$export$f09106e7c6677ec5();
-    for (let listener of $1e5a04cdaf7d1af8$var$listeners)listener($1e5a04cdaf7d1af8$var$currentLocale);
-}
-function $1e5a04cdaf7d1af8$export$188ec29ebc2bdc3a() {
-    let isSSR = ($704cf1d3b684cc5c$export$535bd6ca7f90a273)();
-    let [defaultLocale, setDefaultLocale] = (useState)($1e5a04cdaf7d1af8$var$currentLocale);
-    (useEffect)(()=>{
-        if ($1e5a04cdaf7d1af8$var$listeners.size === 0) window.addEventListener("languagechange", $1e5a04cdaf7d1af8$var$updateLocale);
-        $1e5a04cdaf7d1af8$var$listeners.add(setDefaultLocale);
-        return ()=>{
-            $1e5a04cdaf7d1af8$var$listeners.delete(setDefaultLocale);
-            if ($1e5a04cdaf7d1af8$var$listeners.size === 0) window.removeEventListener("languagechange", $1e5a04cdaf7d1af8$var$updateLocale);
-        };
-    }, []);
-    // We cannot determine the browser's language on the server, so default to
-    // en-US. This will be updated after hydration on the client to the correct value.
-    if (isSSR) return {
-        locale: "en-US",
-        direction: "ltr"
-    };
-    return defaultLocale;
-}
-
-
-
-const $18f2051aff69b9bf$var$I18nContext = /*#__PURE__*/ (React__default).createContext(null);
-function $18f2051aff69b9bf$export$43bb16f9c6d9e3f7() {
-    let defaultLocale = ($1e5a04cdaf7d1af8$export$188ec29ebc2bdc3a)();
-    let context = (useContext)($18f2051aff69b9bf$var$I18nContext);
-    return context || defaultLocale;
-}
-
-
-/*
- * Copyright 2022 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.
- */ 
-
-
-const $fca6afa0e843324b$var$cache = new WeakMap();
-function $fca6afa0e843324b$var$getCachedDictionary(strings) {
-    let dictionary = $fca6afa0e843324b$var$cache.get(strings);
-    if (!dictionary) {
-        dictionary = new ($5b160d28a433310d$export$c17fa47878dc55b6)(strings);
-        $fca6afa0e843324b$var$cache.set(strings, dictionary);
-    }
-    return dictionary;
-}
-function $fca6afa0e843324b$export$f12b703ca79dfbb1(strings) {
-    let { locale: locale  } = ($18f2051aff69b9bf$export$43bb16f9c6d9e3f7)();
-    let dictionary = (useMemo)(()=>$fca6afa0e843324b$var$getCachedDictionary(strings), [
-        strings
-    ]);
-    return (useMemo)(()=>new ($6db58dc88e78b024$export$2f817fcdc4b89ae0)(locale, dictionary), [
-        locale,
-        dictionary
-    ]);
-}
-
-
-/*
- * 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.
- */ 
-
-function $33bf17300c498528$export$a2f47a3d2973640(options = {}) {
-    let { locale: locale  } = ($18f2051aff69b9bf$export$43bb16f9c6d9e3f7)();
-    // @ts-ignore
-    return (useMemo)(()=>new Intl.ListFormat(locale, options), [
-        locale,
-        options
-    ]);
-}
-
-
-/*
- * 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.
- */ 
-
-
-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;
-    let { locale: locale  } = ($18f2051aff69b9bf$export$43bb16f9c6d9e3f7)();
-    return (useMemo)(()=>new ($fb18d541ea1ad717$export$ad991b66133851cf)(locale, options), [
-        locale,
-        options
-    ]);
-}
-function $896ba0a80a8f4d36$var$isEqual(a, b) {
-    if (a === b) return true;
-    let aKeys = Object.keys(a);
-    let bKeys = Object.keys(b);
-    if (aKeys.length !== bKeys.length) return false;
-    for (let key of aKeys){
-        if (b[key] !== a[key]) return false;
-    }
-    return true;
-}
-
-
-/*
- * 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.
- */ 
-
-
-function $a916eb452884faea$export$b7a616150fdb9f44(options = {}) {
-    let { locale: locale  } = ($18f2051aff69b9bf$export$43bb16f9c6d9e3f7)();
-    return (useMemo)(()=>new ($488c6ddbf4ef74c2$export$cc77c4ff7e8673c5)(locale, options), [
-        locale,
-        options
-    ]);
-}
-
-
-/*
- * 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.
- */ 
-let $325a3faab7a68acd$var$cache = new Map();
-function $325a3faab7a68acd$export$a16aca283550c30d(options) {
-    let { locale: locale  } = ($18f2051aff69b9bf$export$43bb16f9c6d9e3f7)();
-    let cacheKey = locale + (options ? Object.entries(options).sort((a, b)=>a[0] < b[0] ? -1 : 1).join() : "");
-    if ($325a3faab7a68acd$var$cache.has(cacheKey)) return $325a3faab7a68acd$var$cache.get(cacheKey);
-    let formatter = new Intl.Collator(locale, options);
-    $325a3faab7a68acd$var$cache.set(cacheKey, formatter);
-    return formatter;
-}
-
-
-/*
- * 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.
- */ 
-
-function $bb77f239b46e8c72$export$3274cf84b703fff(options) {
-    let collator = ($325a3faab7a68acd$export$a16aca283550c30d)({
-        usage: "search",
-        ...options
-    });
-    // TODO(later): these methods don't currently support the ignorePunctuation option.
-    let startsWith = (useCallback)((string, substring)=>{
-        if (substring.length === 0) return true;
-        // Normalize both strings so we can slice safely
-        // TODO: take into account the ignorePunctuation option as well...
-        string = string.normalize("NFC");
-        substring = substring.normalize("NFC");
-        return collator.compare(string.slice(0, substring.length), substring) === 0;
-    }, [
-        collator
-    ]);
-    let endsWith = (useCallback)((string, substring)=>{
-        if (substring.length === 0) return true;
-        string = string.normalize("NFC");
-        substring = substring.normalize("NFC");
-        return collator.compare(string.slice(-substring.length), substring) === 0;
-    }, [
-        collator
-    ]);
-    let contains = (useCallback)((string, substring)=>{
-        if (substring.length === 0) return true;
-        string = string.normalize("NFC");
-        substring = substring.normalize("NFC");
-        let scan = 0;
-        let sliceLen = substring.length;
-        for(; scan + sliceLen <= string.length; scan++){
-            let slice = string.slice(scan, scan + sliceLen);
-            if (collator.compare(substring, slice) === 0) return true;
-        }
-        return false;
-    }, [
-        collator
-    ]);
-    return (useMemo)(()=>({
-            startsWith: startsWith,
-            endsWith: endsWith,
-            contains: contains
-        }), [
-        startsWith,
-        endsWith,
-        contains
-    ]);
-}
-
 /**
  * Component variant.
  */
@@ -1684,12 +894,15 @@ const baseContainer = css`
   font-family: var(--redsift-typography-body-font-family);
   font-size: var(--redsift-typography-body-font-size);
   font-weight: var(--redsift-typography-body-font-weight);
-  line-height: var(--redsift-typography-body-line-height);
+  line-height: 20px;
   color: var(--redsift-color-neutral-black);
 
   ${baseInternalSpacing}
-  ${baseFlexbox}
+  ${baseSpacing}
+  ${baseSizing}
+  ${basePositioning}
   ${baseGrid}
+  ${baseFlexbox}
 `;
 const focusRing = css`
   @media (prefers-reduced-motion: no-preference) {
@@ -1837,10 +1050,10 @@ const StyledIcon = styled.span`
 }}
 `;
 
-const _excluded$J = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps"];
-const COMPONENT_NAME$L = 'Icon';
-const CLASSNAME$L = 'redsift-icon';
-const DEFAULT_PROPS$L = {
+const _excluded$N = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps"];
+const COMPONENT_NAME$N = 'Icon';
+const CLASSNAME$N = 'redsift-icon';
+const DEFAULT_PROPS$N = {
   size: IconSize.medium
 };
 
@@ -1858,7 +1071,7 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
       size,
       svgProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$J);
+    forwardedProps = _objectWithoutProperties(props, _excluded$N);
   return /*#__PURE__*/React__default.createElement(StyledIcon, _extends$1({}, forwardedProps, {
     $color: color,
     $size: size,
@@ -1866,23 +1079,24 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-label": ariaLabel,
     className: classNames(Icon.className, className),
     ref: ref
-  }), /*#__PURE__*/React__default.createElement("svg", _extends$1({}, svgProps, {
-    "aria-hidden": ariaLabel ? ariaHidden ? ariaHidden : undefined : true,
-    "aria-label": ariaLabel,
-    focusable: "false",
-    height: "1em",
-    preserveAspectRatio: "xMidYMid meet",
-    role: "img",
-    viewBox: "0 0 24 24",
-    width: "1em"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: icon,
+  }), /*#__PURE__*/React__default.cloneElement(typeof icon === 'string' || Array.isArray(icon) && icon.every(it => typeof it === 'string') ? /*#__PURE__*/React__default.createElement("svg", null, (Array.isArray(icon) ? icon : [icon]).map(path => /*#__PURE__*/React__default.createElement("path", {
+    key: path,
+    d: path,
     fill: "currentColor"
-  })), badge ? badge : null);
+  }))) : /*#__PURE__*/React__default.isValidElement(icon) ? icon : /*#__PURE__*/React__default.createElement(React__default.Fragment, null), _objectSpread2({
+    'aria-hidden': ariaLabel ? ariaHidden ? ariaHidden : undefined : true,
+    'aria-label': ariaLabel,
+    focusable: 'false',
+    height: '1em',
+    preserveAspectRatio: 'xMidYMid meet',
+    role: 'img',
+    viewBox: '0 0 24 24',
+    width: '1em'
+  }, svgProps)), badge ? badge : null);
 });
-Icon.className = CLASSNAME$L;
-Icon.defaultProps = DEFAULT_PROPS$L;
-Icon.displayName = COMPONENT_NAME$L;
+Icon.className = CLASSNAME$N;
+Icon.defaultProps = DEFAULT_PROPS$N;
+Icon.displayName = COMPONENT_NAME$N;
 
 /**
  * Component variant.
@@ -2155,10 +1369,10 @@ const StyledAppContainer = styled.div`
 }}
 `;
 
-const _excluded$I = ["children", "className", "locale", "productTheme"];
-const COMPONENT_NAME$K = 'AppContainer';
-const CLASSNAME$K = 'redsift-app-container';
-const DEFAULT_PROPS$K = {};
+const _excluded$M = ["children", "className", "locale", "productTheme"];
+const COMPONENT_NAME$M = 'AppContainer';
+const CLASSNAME$M = 'redsift-app-container';
+const DEFAULT_PROPS$M = {};
 
 /**
  * The AppContainer component.
@@ -2170,7 +1384,7 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
       locale,
       productTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$I);
+    forwardedProps = _objectWithoutProperties(props, _excluded$M);
   const {
     hasAppBar,
     hasAppSidePanel,
@@ -2216,9 +1430,9 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
     locale: locale
   }, children)));
 });
-AppContainer.className = CLASSNAME$K;
-AppContainer.defaultProps = DEFAULT_PROPS$K;
-AppContainer.displayName = COMPONENT_NAME$K;
+AppContainer.className = CLASSNAME$M;
+AppContainer.defaultProps = DEFAULT_PROPS$M;
+AppContainer.displayName = COMPONENT_NAME$M;
 
 var spinnerDefault = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPgogIDxzdHlsZT4KICAgIC5zcGlubmluZyB7CiAgICAgIGFuaW1hdGlvbjogc3Bpbm5pbmcta2V5ZnJhbWVzIDMwMDBtcyBsaW5lYXIgaW5maW5pdGUgbm9ybWFsIGZvcndhcmRzOwogICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGN1YmljLWJlemllcigwLjQyLCAwLCAwLjU4LCAxKTsKICAgIH0KICAgIEBrZXlmcmFtZXMgc3Bpbm5pbmcta2V5ZnJhbWVzIHsKICAgICAgMCUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgwZGVnKTsKICAgICAgfQoKICAgICAgMzMlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMTgwZGVnKTsKICAgICAgfQoKICAgICAgNTAlIHsKICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpOwogICAgICB9CgogICAgICA4MyUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgzNjBkZWcpOwogICAgICB9CgogICAgICAxMDAlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMzYwZGVnKQogICAgICB9CiAgICB9CiAgPC9zdHlsZT4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MpIgogICAgZmlsbD0iIzAwNzllMSIKICAgIGQ9Ik0zMTggMTg2LjlWMTA4LjhMMjAwIDU3IDgyIDEwOC44djc4LjFDODIgMjU5IDEzMi4zIDMyNi40IDIwMCAzNDNjNjcuNy0xNi42IDExOC04NCAxMTgtMTU2LjF6TTQwMCAyMDBjMCAxMTAuNS04OS41IDIwMC0yMDAgMjAwUzAgMzEwLjUgMCAyMDAgODkuNSAwIDIwMCAwczIwMCA4OS41IDIwMCAyMDB6IgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrcyI+CiAgICA8cGF0aAogICAgICBjbGFzcz0ic3Bpbm5pbmciCiAgICAgIGQ9Ik0wLDIwMEMwLDg5LjU0MzA1LDg5LjU0MzA1LDAsMjAwLDB2NDAwQzg5LjU0MzA1LDQwMCwwLDMxMC40NTY5NSwwLDIwMFoiCiAgICAgIGZpbGw9IiNmZmYiCiAgICAvPgogIDwvbWFzaz4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MyKSIKICAgIGZpbGw9IiMwMDc5ZTEiCiAgICBkPSJNODIsMTg2LjkzOXYtNzguMDg5TDIwMCw1N2wxMTgsNTEuODV2NzguMDg5QzMxOCwyNTkuMDAyLDI2Ny42ODYsMzI2LjQwMiwyMDAsMzQzQzEzMi4zMTQsMzI2LjQwMiw4MiwyNTkuMDAyLDgyLDE4Ni45MzlaIgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrczIiPgogICAgPHBhdGgKICAgICAgY2xhc3M9InNwaW5uaW5nIgogICAgICBkPSJNNDAwIDIwMEM0MDAgMzEwLjUgMzEwLjUgNDAwIDIwMCA0MDBWMGMxMTAuNSAwIDIwMCA4OS41IDIwMCAyMDB6IgogICAgICBmaWxsPSIjZmZmIgogICAgLz4KICA8L21hc2s+Cjwvc3ZnPg==';
 
@@ -2238,7 +1452,7 @@ var spinnerTools = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My
 
 var spinnerWebsite = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPgogIDxzdHlsZT4KICAgIC5zcGlubmluZyB7CiAgICAgIGFuaW1hdGlvbjogc3Bpbm5pbmcta2V5ZnJhbWVzIDMwMDBtcyBsaW5lYXIgaW5maW5pdGUgbm9ybWFsIGZvcndhcmRzOwogICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGN1YmljLWJlemllcigwLjQyLCAwLCAwLjU4LCAxKTsKICAgIH0KICAgIEBrZXlmcmFtZXMgc3Bpbm5pbmcta2V5ZnJhbWVzIHsKICAgICAgMCUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgwZGVnKTsKICAgICAgfQoKICAgICAgMzMlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMTgwZGVnKTsKICAgICAgfQoKICAgICAgNTAlIHsKICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpOwogICAgICB9CgogICAgICA4MyUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgzNjBkZWcpOwogICAgICB9CgogICAgICAxMDAlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMzYwZGVnKQogICAgICB9CiAgICB9CiAgPC9zdHlsZT4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MpIgogICAgZmlsbD0iIzAwNzllMSIKICAgIGQ9Ik0zMTggMTg2LjlWMTA4LjhMMjAwIDU3IDgyIDEwOC44djc4LjFDODIgMjU5IDEzMi4zIDMyNi40IDIwMCAzNDNjNjcuNy0xNi42IDExOC04NCAxMTgtMTU2LjF6TTQwMCAyMDBjMCAxMTAuNS04OS41IDIwMC0yMDAgMjAwUzAgMzEwLjUgMCAyMDAgODkuNSAwIDIwMCAwczIwMCA4OS41IDIwMCAyMDB6IgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrcyI+CiAgICA8cGF0aAogICAgICBjbGFzcz0ic3Bpbm5pbmciCiAgICAgIGQ9Ik0wLDIwMEMwLDg5LjU0MzA1LDg5LjU0MzA1LDAsMjAwLDB2NDAwQzg5LjU0MzA1LDQwMCwwLDMxMC40NTY5NSwwLDIwMFoiCiAgICAgIGZpbGw9IiNmZmYiCiAgICAvPgogIDwvbWFzaz4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MyKSIKICAgIGZpbGw9IiMwMDc5ZTEiCiAgICBkPSJNODIsMTg2LjkzOXYtNzguMDg5TDIwMCw1N2wxMTgsNTEuODV2NzguMDg5QzMxOCwyNTkuMDAyLDI2Ny42ODYsMzI2LjQwMiwyMDAsMzQzQzEzMi4zMTQsMzI2LjQwMiw4MiwyNTkuMDAyLDgyLDE4Ni45MzlaIgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrczIiPgogICAgPHBhdGgKICAgICAgY2xhc3M9InNwaW5uaW5nIgogICAgICBkPSJNNDAwIDIwMEM0MDAgMzEwLjUgMzEwLjUgNDAwIDIwMCA0MDBWMGMxMTAuNSAwIDIwMCA4OS41IDIwMCAyMDB6IgogICAgICBmaWxsPSIjZmZmIgogICAgLz4KICA8L21hc2s+Cjwvc3ZnPg==';
 
-const _excluded$H = ["aria-hidden", "aria-label", "className", "color", "size"];
+const _excluded$L = ["aria-hidden", "aria-label", "className", "color", "size"];
 const colorToFile = {
   default: spinnerDefault,
   hardenize: spinnerHardenize,
@@ -2250,9 +1464,9 @@ const colorToFile = {
   tools: spinnerTools,
   website: spinnerWebsite
 };
-const COMPONENT_NAME$J = 'Spinner';
-const CLASSNAME$J = 'redsift-shield';
-const DEFAULT_PROPS$J = {
+const COMPONENT_NAME$L = 'Spinner';
+const CLASSNAME$L = 'redsift-shield';
+const DEFAULT_PROPS$L = {
   color: ColorPalette.default,
   size: SpinnerSize.medium
 };
@@ -2293,7 +1507,7 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
       color: propsColor,
       size
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$H);
+    forwardedProps = _objectWithoutProperties(props, _excluded$L);
   const {
     width,
     height
@@ -2315,14 +1529,14 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
     $size: size
   }));
 });
-Spinner.className = CLASSNAME$J;
-Spinner.defaultProps = DEFAULT_PROPS$J;
-Spinner.displayName = COMPONENT_NAME$J;
-
-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 = {
+Spinner.className = CLASSNAME$L;
+Spinner.defaultProps = DEFAULT_PROPS$L;
+Spinner.displayName = COMPONENT_NAME$L;
+
+const _excluded$K = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isHovered", "isLoading", "leftIcon", "rightIcon", "variant"];
+const COMPONENT_NAME$K = 'Button';
+const CLASSNAME$K = 'redsift-button';
+const DEFAULT_PROPS$K = {
   color: ColorPalette.default,
   height: 'fit-content',
   variant: ButtonVariant.primary
@@ -2351,7 +1565,7 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
       rightIcon,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$G);
+    forwardedProps = _objectWithoutProperties(props, _excluded$K);
   const isDisabled = isLoading || propsIsDisabled || disabled;
   return /*#__PURE__*/React__default.createElement(StyledButton, _extends$1({}, forwardedProps, {
     $color: color,
@@ -2365,22 +1579,22 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     className: classNames(Button.className, className),
     disabled: isDisabled,
     ref: buttonRef
-  }), leftIcon ? typeof leftIcon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+  }), leftIcon ? /*#__PURE__*/React__default.createElement(Icon, {
     icon: leftIcon,
     "aria-hidden": "true",
     className: "left"
-  }) : leftIcon : null, isLoading ? /*#__PURE__*/React__default.createElement(Spinner, {
+  }) : null, isLoading ? /*#__PURE__*/React__default.createElement(Spinner, {
     size: "small",
     color: "no-data"
-  }) : null, /*#__PURE__*/React__default.createElement("span", null, children), rightIcon ? typeof rightIcon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+  }) : null, /*#__PURE__*/React__default.createElement("span", null, children), rightIcon ? /*#__PURE__*/React__default.createElement(Icon, {
     icon: rightIcon,
     "aria-hidden": "true",
     className: "right"
-  }) : rightIcon : null);
+  }) : null);
 });
-Button.className = CLASSNAME$I;
-Button.defaultProps = DEFAULT_PROPS$I;
-Button.displayName = COMPONENT_NAME$I;
+Button.className = CLASSNAME$K;
+Button.defaultProps = DEFAULT_PROPS$K;
+Button.displayName = COMPONENT_NAME$K;
 
 /**
  * Component style.
@@ -2407,10 +1621,10 @@ const StyledIconButton = styled(StyledButton)`
 }}
 `;
 
-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 = {
+const _excluded$J = ["className", "color", "disabled", "icon", "isActive", "isDisabled", "isHovered", "isLoading", "variant"];
+const COMPONENT_NAME$J = 'IconButton';
+const CLASSNAME$J = 'redsift-icon-button';
+const DEFAULT_PROPS$J = {
   color: ColorPalette.default,
   height: 'fit-content',
   variant: IconButtonVariant.unstyled
@@ -2435,7 +1649,7 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
       isLoading,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$F);
+    forwardedProps = _objectWithoutProperties(props, _excluded$J);
   const isDisabled = props.isLoading || propsIsDisabled || disabled;
   warnIfNoAccessibleLabelFound(props);
   return /*#__PURE__*/React__default.createElement(StyledIconButton, _extends$1({}, forwardedProps, {
@@ -2457,9 +1671,9 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
     color: isDisabled ? undefined : color
   }));
 });
-IconButton.className = CLASSNAME$H;
-IconButton.defaultProps = DEFAULT_PROPS$H;
-IconButton.displayName = COMPONENT_NAME$H;
+IconButton.className = CLASSNAME$J;
+IconButton.defaultProps = DEFAULT_PROPS$J;
+IconButton.displayName = COMPONENT_NAME$J;
 
 /**
  * Component style.
@@ -2603,10 +1817,10 @@ const StyledHeading = styled.span`
 }}
 `;
 
-const _excluded$E = ["as", "children", "className", "noWrap", "variant"];
-const COMPONENT_NAME$G = 'Heading';
-const CLASSNAME$G = 'redsift-heading';
-const DEFAULT_PROPS$G = {};
+const _excluded$I = ["as", "children", "className", "noWrap", "variant"];
+const COMPONENT_NAME$I = 'Heading';
+const CLASSNAME$I = 'redsift-heading';
+const DEFAULT_PROPS$I = {};
 
 /**
  * The Heading component.
@@ -2619,7 +1833,7 @@ const Heading = /*#__PURE__*/forwardRef((props, ref) => {
       noWrap,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$E);
+    forwardedProps = _objectWithoutProperties(props, _excluded$I);
   return /*#__PURE__*/React__default.createElement(StyledHeading, _extends$1({
     as: as
   }, forwardedProps, {
@@ -2629,9 +1843,9 @@ const Heading = /*#__PURE__*/forwardRef((props, ref) => {
     $variant: variant ? variant : as === 'span' ? 'body' : as
   }), children);
 });
-Heading.className = CLASSNAME$G;
-Heading.defaultProps = DEFAULT_PROPS$G;
-Heading.displayName = COMPONENT_NAME$G;
+Heading.className = CLASSNAME$I;
+Heading.defaultProps = DEFAULT_PROPS$I;
+Heading.displayName = COMPONENT_NAME$I;
 
 /**
  * Component style.
@@ -2649,10 +1863,10 @@ const StyledFlexbox = styled.div`
   ${baseFlexbox}
 `;
 
-const _excluded$D = ["children", "className"];
-const COMPONENT_NAME$F = 'Flexbox';
-const CLASSNAME$F = 'redsift-flex-box';
-const DEFAULT_PROPS$F = {
+const _excluded$H = ["children", "className"];
+const COMPONENT_NAME$H = 'Flexbox';
+const CLASSNAME$H = 'redsift-flex-box';
+const DEFAULT_PROPS$H = {
   gap: '16px'
 };
 
@@ -2664,20 +1878,20 @@ const Flexbox = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$D);
+    forwardedProps = _objectWithoutProperties(props, _excluded$H);
   return /*#__PURE__*/React__default.createElement(StyledFlexbox, _extends$1({}, forwardedProps, {
     className: classNames(Flexbox.className, className),
     ref: ref
   }), children);
 });
-Flexbox.className = CLASSNAME$F;
-Flexbox.defaultProps = DEFAULT_PROPS$F;
-Flexbox.displayName = COMPONENT_NAME$F;
-
-const _excluded$C = ["children", "className", "isClosable", "isClosed", "onClose", "title", "variant"];
-const COMPONENT_NAME$E = 'Alert';
-const CLASSNAME$E = 'redsift-alert';
-const DEFAULT_PROPS$E = {
+Flexbox.className = CLASSNAME$H;
+Flexbox.defaultProps = DEFAULT_PROPS$H;
+Flexbox.displayName = COMPONENT_NAME$H;
+
+const _excluded$G = ["children", "className", "isClosable", "isClosed", "onClose", "title", "variant"];
+const COMPONENT_NAME$G = 'Alert';
+const CLASSNAME$G = 'redsift-alert';
+const DEFAULT_PROPS$G = {
   variant: 'info'
 };
 const getVariant$1 = variant => {
@@ -2719,7 +1933,7 @@ const Alert = /*#__PURE__*/forwardRef((props, ref) => {
       title,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$C);
+    forwardedProps = _objectWithoutProperties(props, _excluded$G);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$5);
   const {
     color,
@@ -2760,15 +1974,15 @@ const Alert = /*#__PURE__*/forwardRef((props, ref) => {
   }, title) : null), isClosable ? /*#__PURE__*/React__default.createElement(IconButton, {
     "aria-label": stringFormatter.format('close'),
     className: `${Alert.className}-header__icon-button`,
-    icon: mdiClose,
+    icon: mdiClose$1,
     onClick: handleClose
   }) : null), children ? /*#__PURE__*/React__default.createElement("div", {
     className: `${Alert.className}__content`
   }, children) : null);
 });
-Alert.className = CLASSNAME$E;
-Alert.defaultProps = DEFAULT_PROPS$E;
-Alert.displayName = COMPONENT_NAME$E;
+Alert.className = CLASSNAME$G;
+Alert.defaultProps = DEFAULT_PROPS$G;
+Alert.displayName = COMPONENT_NAME$G;
 
 var expand$5 = "Expand left side panel";
 var collapse$5 = "Collapse left side panel";
@@ -2865,10 +2079,10 @@ const StyledAppBar = styled.header`
   }
 `;
 
-const _excluded$B = ["children", "className", "collapseIconButtonProps", "collapseIconButtonRef", "expandIconButtonProps", "expandIconButtonRef", "fallbackTitle", "title"];
-const COMPONENT_NAME$D = 'AppBar';
-const CLASSNAME$D = 'redsift-app-bar';
-const DEFAULT_PROPS$D = {};
+const _excluded$F = ["children", "className", "collapseIconButtonProps", "collapseIconButtonRef", "expandIconButtonProps", "expandIconButtonRef", "fallbackTitle", "title"];
+const COMPONENT_NAME$F = 'AppBar';
+const CLASSNAME$F = 'redsift-app-bar';
+const DEFAULT_PROPS$F = {};
 
 /**
  * The AppBar component.
@@ -2884,7 +2098,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
       fallbackTitle,
       title: propsTitle
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$B);
+    forwardedProps = _objectWithoutProperties(props, _excluded$F);
   const {
     isLoaded
   } = useIsLoaded();
@@ -2923,9 +2137,9 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${AppBar.className}__right`
   }, children));
 });
-AppBar.className = CLASSNAME$D;
-AppBar.defaultProps = DEFAULT_PROPS$D;
-AppBar.displayName = COMPONENT_NAME$D;
+AppBar.className = CLASSNAME$F;
+AppBar.defaultProps = DEFAULT_PROPS$F;
+AppBar.displayName = COMPONENT_NAME$F;
 
 /**
  * Component style.
@@ -2991,10 +2205,10 @@ const StyledAppContent = styled.main`
 }}
 `;
 
-const _excluded$A = ["children", "className", "productTheme"];
-const COMPONENT_NAME$C = 'AppContent';
-const CLASSNAME$C = 'redsift-app-content';
-const DEFAULT_PROPS$C = {};
+const _excluded$E = ["children", "className", "productTheme"];
+const COMPONENT_NAME$E = 'AppContent';
+const CLASSNAME$E = 'redsift-app-content';
+const DEFAULT_PROPS$E = {};
 
 /**
  * The AppContent component.
@@ -3005,7 +2219,7 @@ const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       productTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$A);
+    forwardedProps = _objectWithoutProperties(props, _excluded$E);
   const {
     isLoaded
   } = useIsLoaded();
@@ -3018,9 +2232,9 @@ const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-AppContent.className = CLASSNAME$C;
-AppContent.defaultProps = DEFAULT_PROPS$C;
-AppContent.displayName = COMPONENT_NAME$C;
+AppContent.className = CLASSNAME$E;
+AppContent.defaultProps = DEFAULT_PROPS$E;
+AppContent.displayName = COMPONENT_NAME$E;
 
 /**
  * Component style.
@@ -3114,10 +2328,10 @@ const StyledAppSidePanel = styled.div`
   }
 `;
 
-const _excluded$z = ["children", "className", "featuredElements", "isCollapsed", "logo"];
-const COMPONENT_NAME$B = 'AppSidePanel';
-const CLASSNAME$B = 'redsift-app-side-panel';
-const DEFAULT_PROPS$B = {};
+const _excluded$D = ["children", "className", "featuredElements", "isCollapsed", "logo"];
+const COMPONENT_NAME$D = 'AppSidePanel';
+const CLASSNAME$D = 'redsift-app-side-panel';
+const DEFAULT_PROPS$D = {};
 
 /**
  * The AppSidePanel component.
@@ -3130,7 +2344,7 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
       isCollapsed = false,
       logo
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$z);
+    forwardedProps = _objectWithoutProperties(props, _excluded$D);
   const appContainerState = useContext(AppContainerContext);
   return /*#__PURE__*/React__default.createElement(StyledAppSidePanel, _extends$1({}, forwardedProps, {
     $isCollapsed: !!(isCollapsed || appContainerState !== null && appContainerState !== void 0 && appContainerState.isSidePanelCollapsed),
@@ -3145,9 +2359,9 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${AppSidePanel.className}__featured`
   }, featuredElements) : null, children);
 });
-AppSidePanel.className = CLASSNAME$B;
-AppSidePanel.defaultProps = DEFAULT_PROPS$B;
-AppSidePanel.displayName = COMPONENT_NAME$B;
+AppSidePanel.className = CLASSNAME$D;
+AppSidePanel.defaultProps = DEFAULT_PROPS$D;
+AppSidePanel.displayName = COMPONENT_NAME$D;
 
 /**
  * Context props.
@@ -3381,10 +2595,10 @@ const StyledBadge = styled.div`
 }}
 `;
 
-const _excluded$y = ["autoBreak", "children", "className", "color", "isReversed", "variant"];
-const COMPONENT_NAME$A = 'Badge';
-const CLASSNAME$A = 'redsift-badge';
-const DEFAULT_PROPS$A = {
+const _excluded$C = ["autoBreak", "children", "className", "color", "isReversed", "variant"];
+const COMPONENT_NAME$C = 'Badge';
+const CLASSNAME$C = 'redsift-badge';
+const DEFAULT_PROPS$C = {
   color: ColorPalette.question,
   variant: BadgeVariant.dot
 };
@@ -3401,7 +2615,7 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
       isReversed,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$y);
+    forwardedProps = _objectWithoutProperties(props, _excluded$C);
   return /*#__PURE__*/React__default.createElement(StyledBadge, _extends$1({}, forwardedProps, {
     $autoBreak: autoBreak,
     $color: color,
@@ -3411,14 +2625,14 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), variant === BadgeVariant.standard ? children : null);
 });
-Badge.className = CLASSNAME$A;
-Badge.defaultProps = DEFAULT_PROPS$A;
-Badge.displayName = COMPONENT_NAME$A;
+Badge.className = CLASSNAME$C;
+Badge.defaultProps = DEFAULT_PROPS$C;
+Badge.displayName = COMPONENT_NAME$C;
 
-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 = {};
+const _excluded$B = ["as", "badge", "badgeProps", "children", "className", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "tabIndex", "withoutIcons"];
+const COMPONENT_NAME$B = 'SideNavigationMenuItem';
+const CLASSNAME$B = 'redsift-side-navigation-menu-item';
+const DEFAULT_PROPS$B = {};
 
 /**
  * The SideNavigationMenuItem component.
@@ -3443,7 +2657,7 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
       tabIndex,
       withoutIcons
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$x);
+    forwardedProps = _objectWithoutProperties(props, _excluded$B);
   warnIfNoAccessibleLabelFound(props, [children]);
   const appContainerState = useContext(AppContainerContext);
   useEffect(() => {
@@ -3506,9 +2720,9 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
     color: "error"
   }, badgeProps), badge) : null);
 });
-SideNavigationMenuItem.className = CLASSNAME$z;
-SideNavigationMenuItem.defaultProps = DEFAULT_PROPS$z;
-SideNavigationMenuItem.displayName = COMPONENT_NAME$z;
+SideNavigationMenuItem.className = CLASSNAME$B;
+SideNavigationMenuItem.defaultProps = DEFAULT_PROPS$B;
+SideNavigationMenuItem.displayName = COMPONENT_NAME$B;
 
 /**
  * Component style.
@@ -3667,10 +2881,10 @@ const SideNavigationMenuReducer = (state, action) => {
   }
 };
 
-const _excluded$w = ["aria-label", "buttonProps", "buttonRef", "children", "className", "hasBadge", "icon", "iconProps", "iconRef", "isDisabled", "isExpanded", "menuProps", "menuRef", "tabIndex", "withoutIcons"];
-const COMPONENT_NAME$y = 'SideNavigationMenu';
-const CLASSNAME$y = 'redsift-side-navigation-menu';
-const DEFAULT_PROPS$y = {};
+const _excluded$A = ["aria-label", "buttonProps", "buttonRef", "children", "className", "hasBadge", "icon", "iconProps", "iconRef", "isDisabled", "isExpanded", "menuProps", "menuRef", "tabIndex", "withoutIcons"];
+const COMPONENT_NAME$A = 'SideNavigationMenu';
+const CLASSNAME$A = 'redsift-side-navigation-menu';
+const DEFAULT_PROPS$A = {};
 
 /**
  * The SideNavigationMenu component.
@@ -3693,7 +2907,7 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
       tabIndex,
       withoutIcons
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$w);
+    forwardedProps = _objectWithoutProperties(props, _excluded$A);
   warnIfNoAccessibleLabelFound(props);
   const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);
   const [isFirstChild, setIsFirstChild] = useState(false);
@@ -3962,9 +3176,9 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
     role: "menu"
   }, menuItemListEventHandler), renderedMenuItems)));
 });
-SideNavigationMenu.className = CLASSNAME$y;
-SideNavigationMenu.defaultProps = DEFAULT_PROPS$y;
-SideNavigationMenu.displayName = COMPONENT_NAME$y;
+SideNavigationMenu.className = CLASSNAME$A;
+SideNavigationMenu.defaultProps = DEFAULT_PROPS$A;
+SideNavigationMenu.displayName = COMPONENT_NAME$A;
 
 /**
  * Component style.
@@ -4022,10 +3236,10 @@ const StyledSideNavigationMenuBar = styled.nav`
   }
 `;
 
-const _excluded$v = ["aria-label", "aria-labelledby", "children", "className", "isDisabled", "menubarProps", "menubarRef", "withoutIcons"];
-const COMPONENT_NAME$x = 'SideNavigationMenuBar';
-const CLASSNAME$x = 'redsift-side-navigation-menu-bar';
-const DEFAULT_PROPS$x = {};
+const _excluded$z = ["aria-label", "aria-labelledby", "children", "className", "isDisabled", "menubarProps", "menubarRef", "withoutIcons"];
+const COMPONENT_NAME$z = 'SideNavigationMenuBar';
+const CLASSNAME$z = 'redsift-side-navigation-menu-bar';
+const DEFAULT_PROPS$z = {};
 
 /**
  * Hook to store the previous index for further use
@@ -4053,7 +3267,7 @@ const SideNavigationMenuBar = /*#__PURE__*/forwardRef((props, ref) => {
       menubarRef = useRef(),
       withoutIcons
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$v);
+    forwardedProps = _objectWithoutProperties(props, _excluded$z);
   warnIfNoAccessibleLabelFound(props);
   const {
     top
@@ -4195,11 +3409,11 @@ const SideNavigationMenuBar = /*#__PURE__*/forwardRef((props, ref) => {
     role: "menubar"
   }), navItems)));
 });
-SideNavigationMenuBar.className = CLASSNAME$x;
-SideNavigationMenuBar.defaultProps = DEFAULT_PROPS$x;
-SideNavigationMenuBar.displayName = COMPONENT_NAME$x;
+SideNavigationMenuBar.className = CLASSNAME$z;
+SideNavigationMenuBar.defaultProps = DEFAULT_PROPS$z;
+SideNavigationMenuBar.displayName = COMPONENT_NAME$z;
 
-const _excluded$u = ["title", "href", "ref"],
+const _excluded$y = ["title", "href", "ref"],
   _excluded2 = ["title", "children", "ref"],
   _excluded3 = ["title", "href", "ref"];
 const isMenu = item => {
@@ -4218,7 +3432,7 @@ const useSideNavigationMenuBar = _ref => {
           href,
           ref
         } = item,
-        rest = _objectWithoutProperties(item, _excluded$u);
+        rest = _objectWithoutProperties(item, _excluded$y);
       menuBarChildren.push( /*#__PURE__*/React__default.createElement(SideNavigationMenuItem, _extends$1({
         key: title,
         isCurrent: isActive ? isActive(href) : undefined
@@ -4321,10 +3535,10 @@ const StyledBreadcrumbItem = styled.a`
   }
 `;
 
-const _excluded$t = ["as", "children", "className", "href", "isCurrent", "isDisabled"];
-const COMPONENT_NAME$w = 'BreadcrumbItem';
-const CLASSNAME$w = 'redsift-breadcrumb-item';
-const DEFAULT_PROPS$w = {};
+const _excluded$x = ["as", "children", "className", "href", "isCurrent", "isDisabled"];
+const COMPONENT_NAME$y = 'BreadcrumbItem';
+const CLASSNAME$y = 'redsift-breadcrumb-item';
+const DEFAULT_PROPS$y = {};
 
 /**
  * The BreadcrumbItem components is a list of links to the parent pages of the current page in hierarchical order.
@@ -4338,7 +3552,7 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
       isCurrent,
       isDisabled
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$t);
+    forwardedProps = _objectWithoutProperties(props, _excluded$x);
   warnIfNoAccessibleLabelFound(props, [children]);
   return /*#__PURE__*/React__default.createElement(StyledBreadcrumbItem, _extends$1({
     as: as || 'a',
@@ -4354,9 +3568,9 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-BreadcrumbItem.className = CLASSNAME$w;
-BreadcrumbItem.defaultProps = DEFAULT_PROPS$w;
-BreadcrumbItem.displayName = COMPONENT_NAME$w;
+BreadcrumbItem.className = CLASSNAME$y;
+BreadcrumbItem.defaultProps = DEFAULT_PROPS$y;
+BreadcrumbItem.displayName = COMPONENT_NAME$y;
 
 /**
  * Component style.
@@ -4390,10 +3604,10 @@ const StyledBreadcrumbs = styled.nav`
   }
 `;
 
-const _excluded$s = ["children", "className", "isDisabled"];
-const COMPONENT_NAME$v = 'Breadcrumbs';
-const CLASSNAME$v = 'redsift-breadcrumbs';
-const DEFAULT_PROPS$v = {};
+const _excluded$w = ["children", "className", "isDisabled"];
+const COMPONENT_NAME$x = 'Breadcrumbs';
+const CLASSNAME$x = 'redsift-breadcrumbs';
+const DEFAULT_PROPS$x = {};
 
 /**
  * The Breadcrumbs components is a list of links to the parent pages of the current page in hierarchical order.
@@ -4404,7 +3618,7 @@ const BaseBreadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       isDisabled
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$s);
+    forwardedProps = _objectWithoutProperties(props, _excluded$w);
   warnIfNoAccessibleLabelFound(props);
   const childArray = filterComponents([Breadcrumbs.Item])(children);
   const breadcrumbItems = childArray.map((child, index) => {
@@ -4427,17 +3641,17 @@ const BaseBreadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), /*#__PURE__*/React__default.createElement("ol", null, breadcrumbItems));
 });
-BaseBreadcrumbs.className = CLASSNAME$v;
-BaseBreadcrumbs.defaultProps = DEFAULT_PROPS$v;
-BaseBreadcrumbs.displayName = COMPONENT_NAME$v;
+BaseBreadcrumbs.className = CLASSNAME$x;
+BaseBreadcrumbs.defaultProps = DEFAULT_PROPS$x;
+BaseBreadcrumbs.displayName = COMPONENT_NAME$x;
 const Breadcrumbs = Object.assign(BaseBreadcrumbs, {
   Item: BreadcrumbItem
 });
 
-const _excluded$r = ["as", "children", "className", "color", "href", "isActive", "isDisabled", "leftIcon", "rightIcon", "target", "variant"];
-const COMPONENT_NAME$u = 'ButtonLink';
-const CLASSNAME$u = 'redsift-button-link';
-const DEFAULT_PROPS$u = {
+const _excluded$v = ["as", "children", "className", "color", "href", "isActive", "isDisabled", "leftIcon", "rightIcon", "target", "variant"];
+const COMPONENT_NAME$w = 'ButtonLink';
+const CLASSNAME$w = 'redsift-button-link';
+const DEFAULT_PROPS$w = {
   color: ColorPalette.default,
   height: 'fit-content',
   variant: ButtonVariant.primary
@@ -4464,7 +3678,7 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
       target,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$r);
+    forwardedProps = _objectWithoutProperties(props, _excluded$v);
   return /*#__PURE__*/React__default.createElement(StyledButton, _extends$1({
     as: as || 'a',
     role: "link",
@@ -4478,19 +3692,19 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
     href: !isDisabled ? href : undefined,
     ref: ref,
     target: target
-  }), leftIcon ? typeof leftIcon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+  }), leftIcon ? /*#__PURE__*/React__default.createElement(Icon, {
     icon: leftIcon,
     "aria-hidden": "true",
     className: "left"
-  }) : leftIcon : null, children, rightIcon ? typeof rightIcon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+  }) : null, children, rightIcon ? /*#__PURE__*/React__default.createElement(Icon, {
     icon: rightIcon,
     "aria-hidden": "true",
     className: "right"
-  }) : rightIcon : null);
+  }) : null);
 });
-ButtonLink.className = CLASSNAME$u;
-ButtonLink.defaultProps = DEFAULT_PROPS$u;
-ButtonLink.displayName = COMPONENT_NAME$u;
+ButtonLink.className = CLASSNAME$w;
+ButtonLink.defaultProps = DEFAULT_PROPS$w;
+ButtonLink.displayName = COMPONENT_NAME$w;
 
 var collapse$3 = "Collapse";
 var expand$3 = "Expand";
@@ -4680,10 +3894,10 @@ const StyledSkeletonCircle = styled(StyledSkeleton)`
 }}
 `;
 
-const _excluded$q = ["children", "className", "isLoaded"];
-const COMPONENT_NAME$t = 'SkeletonCircle';
-const CLASSNAME$t = 'redsift-skeleton-circle';
-const DEFAULT_PROPS$t = {};
+const _excluded$u = ["children", "className", "isLoaded"];
+const COMPONENT_NAME$v = 'SkeletonCircle';
+const CLASSNAME$v = 'redsift-skeleton-circle';
+const DEFAULT_PROPS$v = {};
 
 /**
  * The SkeletonCircle component.
@@ -4694,7 +3908,7 @@ const SkeletonCircle = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       isLoaded
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$q);
+    forwardedProps = _objectWithoutProperties(props, _excluded$u);
   if (isLoaded) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
   }
@@ -4703,9 +3917,9 @@ const SkeletonCircle = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", null, children) : children);
 });
-SkeletonCircle.className = CLASSNAME$t;
-SkeletonCircle.defaultProps = DEFAULT_PROPS$t;
-SkeletonCircle.displayName = COMPONENT_NAME$t;
+SkeletonCircle.className = CLASSNAME$v;
+SkeletonCircle.defaultProps = DEFAULT_PROPS$v;
+SkeletonCircle.displayName = COMPONENT_NAME$v;
 
 /**
  * Component variant.
@@ -4761,10 +3975,10 @@ const StyledSkeletonText = styled(StyledSkeleton)`
 }}}
 `;
 
-const _excluded$p = ["children", "className", "fontSize", "isLoaded", "lineHeight", "variant"];
-const COMPONENT_NAME$s = 'SkeletonText';
-const CLASSNAME$s = 'redsift-skeleton-text';
-const DEFAULT_PROPS$s = {
+const _excluded$t = ["children", "className", "fontSize", "isLoaded", "lineHeight", "variant"];
+const COMPONENT_NAME$u = 'SkeletonText';
+const CLASSNAME$u = 'redsift-skeleton-text';
+const DEFAULT_PROPS$u = {
   variant: 'body'
 };
 
@@ -4780,7 +3994,7 @@ const SkeletonText = /*#__PURE__*/forwardRef((props, ref) => {
       lineHeight,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$p);
+    forwardedProps = _objectWithoutProperties(props, _excluded$t);
   if (isLoaded) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
   }
@@ -4792,14 +4006,14 @@ const SkeletonText = /*#__PURE__*/forwardRef((props, ref) => {
     $variant: variant
   }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", null, children) : children);
 });
-SkeletonText.className = CLASSNAME$s;
-SkeletonText.defaultProps = DEFAULT_PROPS$s;
-SkeletonText.displayName = COMPONENT_NAME$s;
+SkeletonText.className = CLASSNAME$u;
+SkeletonText.defaultProps = DEFAULT_PROPS$u;
+SkeletonText.displayName = COMPONENT_NAME$u;
 
-const _excluded$o = ["children", "className", "isLoaded"];
-const COMPONENT_NAME$r = 'Skeleton';
-const CLASSNAME$r = 'redsift-skeleton';
-const DEFAULT_PROPS$r = {};
+const _excluded$s = ["children", "className", "isLoaded"];
+const COMPONENT_NAME$t = 'Skeleton';
+const CLASSNAME$t = 'redsift-skeleton';
+const DEFAULT_PROPS$t = {};
 
 /**
  * The Skeleton component.
@@ -4810,7 +4024,7 @@ const BaseSkeleton = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       isLoaded
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$o);
+    forwardedProps = _objectWithoutProperties(props, _excluded$s);
   if (isLoaded) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
   }
@@ -4819,18 +4033,18 @@ const BaseSkeleton = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", null, children) : children);
 });
-BaseSkeleton.className = CLASSNAME$r;
-BaseSkeleton.defaultProps = DEFAULT_PROPS$r;
-BaseSkeleton.displayName = COMPONENT_NAME$r;
+BaseSkeleton.className = CLASSNAME$t;
+BaseSkeleton.defaultProps = DEFAULT_PROPS$t;
+BaseSkeleton.displayName = COMPONENT_NAME$t;
 const Skeleton = Object.assign(BaseSkeleton, {
   Circle: SkeletonCircle,
   Text: SkeletonText
 });
 
-const _excluded$n = ["children", "className", "header", "headingProps", "icon", "isLoading", "subheader"];
-const COMPONENT_NAME$q = 'CardHeader';
-const CLASSNAME$q = 'redsift-card-header';
-const DEFAULT_PROPS$q = {};
+const _excluded$r = ["children", "className", "header", "headingProps", "icon", "isLoading", "subheader"];
+const COMPONENT_NAME$s = 'CardHeader';
+const CLASSNAME$s = 'redsift-card-header';
+const DEFAULT_PROPS$s = {};
 
 /**
  * The CardHeader component.
@@ -4845,7 +4059,7 @@ const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
       isLoading,
       subheader
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$n);
+    forwardedProps = _objectWithoutProperties(props, _excluded$r);
   return /*#__PURE__*/React__default.createElement(StyledCardHeader, _extends$1({}, forwardedProps, {
     className: classNames(CardHeader.className, className),
     ref: ref
@@ -4869,9 +4083,9 @@ const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-hidden": "true"
   }) : null, header)) : null, children);
 });
-CardHeader.className = CLASSNAME$q;
-CardHeader.defaultProps = DEFAULT_PROPS$q;
-CardHeader.displayName = COMPONENT_NAME$q;
+CardHeader.className = CLASSNAME$s;
+CardHeader.defaultProps = DEFAULT_PROPS$s;
+CardHeader.displayName = COMPONENT_NAME$s;
 
 /**
  * Component style.
@@ -4887,10 +4101,10 @@ const StyledCardBody = styled.div`
   padding: 16px 0px;
 `;
 
-const _excluded$m = ["children", "className"];
-const COMPONENT_NAME$p = 'CardBody';
-const CLASSNAME$p = 'redsift-card-body';
-const DEFAULT_PROPS$p = {};
+const _excluded$q = ["children", "className"];
+const COMPONENT_NAME$r = 'CardBody';
+const CLASSNAME$r = 'redsift-card-body';
+const DEFAULT_PROPS$r = {};
 
 /**
  * The CardBody component.
@@ -4900,15 +4114,15 @@ const CardBody = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$m);
+    forwardedProps = _objectWithoutProperties(props, _excluded$q);
   return /*#__PURE__*/React__default.createElement(StyledCardBody, _extends$1({}, forwardedProps, {
     className: classNames(CardBody.className, className),
     ref: ref
   }), children);
 });
-CardBody.className = CLASSNAME$p;
-CardBody.defaultProps = DEFAULT_PROPS$p;
-CardBody.displayName = COMPONENT_NAME$p;
+CardBody.className = CLASSNAME$r;
+CardBody.defaultProps = DEFAULT_PROPS$r;
+CardBody.displayName = COMPONENT_NAME$r;
 
 /**
  * Component style.
@@ -4920,10 +4134,10 @@ const StyledCardActions = styled.div`
   margin-bottom: 8px;
 `;
 
-const _excluded$l = ["children", "className"];
-const COMPONENT_NAME$o = 'CardActions';
-const CLASSNAME$o = 'redsift-card-actions';
-const DEFAULT_PROPS$o = {
+const _excluded$p = ["children", "className"];
+const COMPONENT_NAME$q = 'CardActions';
+const CLASSNAME$q = 'redsift-card-actions';
+const DEFAULT_PROPS$q = {
   display: 'flex',
   flexDirection: 'row'
 };
@@ -4936,20 +4150,20 @@ const CardActions = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$l);
+    forwardedProps = _objectWithoutProperties(props, _excluded$p);
   return /*#__PURE__*/React__default.createElement(StyledCardActions, _extends$1({}, forwardedProps, {
     className: classNames(CardActions.className, className),
     ref: ref
   }), children);
 });
-CardActions.className = CLASSNAME$o;
-CardActions.defaultProps = DEFAULT_PROPS$o;
-CardActions.displayName = COMPONENT_NAME$o;
+CardActions.className = CLASSNAME$q;
+CardActions.defaultProps = DEFAULT_PROPS$q;
+CardActions.displayName = COMPONENT_NAME$q;
 
-const _excluded$k = ["children", "className", "defaultCollapsed", "isCollapsed", "isCollapsible", "onCollapse"];
-const COMPONENT_NAME$n = 'Card';
-const CLASSNAME$n = 'redsift-card';
-const DEFAULT_PROPS$n = {};
+const _excluded$o = ["children", "className", "defaultCollapsed", "isCollapsed", "isCollapsible", "onCollapse"];
+const COMPONENT_NAME$p = 'Card';
+const CLASSNAME$p = 'redsift-card';
+const DEFAULT_PROPS$p = {};
 
 /**
  * The Card component.
@@ -4963,7 +4177,7 @@ const BaseCard = /*#__PURE__*/forwardRef((props, ref) => {
       isCollapsible,
       onCollapse
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$k);
+    forwardedProps = _objectWithoutProperties(props, _excluded$o);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$2);
   const [isCollapsed, setIsCollapsed] = useState(propsIsCollapsed !== null && propsIsCollapsed !== void 0 ? propsIsCollapsed : defaultCollapsed);
   useEffect(() => {
@@ -4994,9 +4208,9 @@ const BaseCard = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${BaseCard.className}__content`
   }, body, actions) : null);
 });
-BaseCard.className = CLASSNAME$n;
-BaseCard.defaultProps = DEFAULT_PROPS$n;
-BaseCard.displayName = COMPONENT_NAME$n;
+BaseCard.className = CLASSNAME$p;
+BaseCard.defaultProps = DEFAULT_PROPS$p;
+BaseCard.displayName = COMPONENT_NAME$p;
 const Card = Object.assign(BaseCard, {
   Header: CardHeader,
   Body: CardBody,
@@ -5099,10 +4313,10 @@ const StyledCheckboxGroup = styled.div`
   }
 `;
 
-const _excluded$j = ["children", "className", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "possibleValues", "value"];
-const COMPONENT_NAME$m = 'CheckboxGroup';
-const CLASSNAME$m = 'redsift-checkbox-group';
-const DEFAULT_PROPS$m = {
+const _excluded$n = ["children", "className", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "value"];
+const COMPONENT_NAME$o = 'CheckboxGroup';
+const CLASSNAME$o = 'redsift-checkbox-group';
+const DEFAULT_PROPS$o = {
   color: ColorPalette.default,
   orientation: CheckboxGroupOrientation.vertical
 };
@@ -5124,10 +4338,9 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
       label,
       onChange,
       orientation,
-      possibleValues,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$j);
+    forwardedProps = _objectWithoutProperties(props, _excluded$n);
   const [selectedValues, setValue] = useState(value || defaultValues || []);
   useEffect(() => {
     if (value) {
@@ -5138,7 +4351,6 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
     value: selectedValues,
     isDisabled: isDisabled || false,
     isReadOnly: isReadOnly || false,
-    possibleValues: possibleValues,
     setValue(values) {
       if (isReadOnly || isDisabled) {
         return;
@@ -5181,9 +4393,9 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${CheckboxGroup.className}-description`
   }, description));
 });
-CheckboxGroup.className = CLASSNAME$m;
-CheckboxGroup.defaultProps = DEFAULT_PROPS$m;
-CheckboxGroup.displayName = COMPONENT_NAME$m;
+CheckboxGroup.className = CLASSNAME$o;
+CheckboxGroup.defaultProps = DEFAULT_PROPS$o;
+CheckboxGroup.displayName = COMPONENT_NAME$o;
 
 /**
  * Component style.
@@ -5291,10 +4503,10 @@ const StyledCheckbox = styled.label`
   }
 `;
 
-const _excluded$i = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isControlled", "isDisabled", "isIndeterminate", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
-const COMPONENT_NAME$l = 'Checkbox';
-const CLASSNAME$l = 'redsift-checkbox';
-const DEFAULT_PROPS$l = {
+const _excluded$m = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isControlled", "isDisabled", "isIndeterminate", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
+const COMPONENT_NAME$n = 'Checkbox';
+const CLASSNAME$n = 'redsift-checkbox';
+const DEFAULT_PROPS$n = {
   isColored: true
 };
 
@@ -5327,7 +4539,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
       onChange,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$i);
+    forwardedProps = _objectWithoutProperties(props, _excluded$m);
   const {
     isFocusVisible,
     focusProps
@@ -5408,9 +4620,9 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     value: value
   })));
 });
-Checkbox.className = CLASSNAME$l;
-Checkbox.defaultProps = DEFAULT_PROPS$l;
-Checkbox.displayName = COMPONENT_NAME$l;
+Checkbox.className = CLASSNAME$n;
+Checkbox.defaultProps = DEFAULT_PROPS$n;
+Checkbox.displayName = COMPONENT_NAME$n;
 
 const ConditionalWrapper = _ref => {
   let {
@@ -5524,10 +4736,10 @@ const StyledShield = styled.div`
 }}
 `;
 
-const _excluded$h = ["aria-hidden", "aria-label", "className", "svgProps", "isOutlined", "isReversed", "variant"];
-const COMPONENT_NAME$k = 'Shield';
-const CLASSNAME$k = 'redsift-shield';
-const DEFAULT_PROPS$k = {
+const _excluded$l = ["aria-hidden", "aria-label", "className", "svgProps", "isOutlined", "isReversed", "variant"];
+const COMPONENT_NAME$m = 'Shield';
+const CLASSNAME$m = 'redsift-shield';
+const DEFAULT_PROPS$m = {
   variant: ShieldVariant.success
 };
 const getVariant = variant => {
@@ -5613,7 +4825,7 @@ const Shield = /*#__PURE__*/forwardRef((props, ref) => {
       isReversed,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$h);
+    forwardedProps = _objectWithoutProperties(props, _excluded$l);
   const {
     color,
     icon
@@ -5647,9 +4859,9 @@ const Shield = /*#__PURE__*/forwardRef((props, ref) => {
     className: "icon"
   })));
 });
-Shield.className = CLASSNAME$k;
-Shield.defaultProps = DEFAULT_PROPS$k;
-Shield.displayName = COMPONENT_NAME$k;
+Shield.className = CLASSNAME$m;
+Shield.defaultProps = DEFAULT_PROPS$m;
+Shield.displayName = COMPONENT_NAME$m;
 
 var collapse$1 = "Collapse details";
 var expand$1 = "Expand details";
@@ -5701,10 +4913,10 @@ const StyledDetailedCardCollapsibleSectionItems = styled.div`
   }
 `;
 
-const _excluded$g = ["caption", "children", "className", "hideBackground"];
-const COMPONENT_NAME$j = 'DetailedCardCollapsibleSectionItems';
-const CLASSNAME$j = 'redsift-detailed-card-collapsible-section-items';
-const DEFAULT_PROPS$j = {};
+const _excluded$k = ["caption", "children", "className", "hideBackground"];
+const COMPONENT_NAME$l = 'DetailedCardCollapsibleSectionItems';
+const CLASSNAME$l = 'redsift-detailed-card-collapsible-section-items';
+const DEFAULT_PROPS$l = {};
 
 /**
  * The DetailedCardCollapsibleSectionItems Section component.
@@ -5716,7 +4928,7 @@ const DetailedCardCollapsibleSectionItems = /*#__PURE__*/forwardRef((props, ref)
       className,
       hideBackground
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$g);
+    forwardedProps = _objectWithoutProperties(props, _excluded$k);
   return /*#__PURE__*/React__default.createElement(StyledDetailedCardCollapsibleSectionItems, _extends$1({}, forwardedProps, {
     className: classNames(DetailedCardCollapsibleSectionItems.className, className),
     ref: ref,
@@ -5725,9 +4937,9 @@ const DetailedCardCollapsibleSectionItems = /*#__PURE__*/forwardRef((props, ref)
     className: `${DetailedCardCollapsibleSectionItems.className}__caption`
   }, caption) : null);
 });
-DetailedCardCollapsibleSectionItems.className = CLASSNAME$j;
-DetailedCardCollapsibleSectionItems.defaultProps = DEFAULT_PROPS$j;
-DetailedCardCollapsibleSectionItems.displayName = COMPONENT_NAME$j;
+DetailedCardCollapsibleSectionItems.className = CLASSNAME$l;
+DetailedCardCollapsibleSectionItems.defaultProps = DEFAULT_PROPS$l;
+DetailedCardCollapsibleSectionItems.displayName = COMPONENT_NAME$l;
 
 /**
  * Component style.
@@ -5912,10 +5124,10 @@ const StyledText = styled.span`
 }}
 `;
 
-const _excluded$f = ["as", "children", "className", "color", "fontFamily", "fontSize", "lineHeight", "noWrap", "variant"];
-const COMPONENT_NAME$i = 'Text';
-const CLASSNAME$i = 'redsift-text';
-const DEFAULT_PROPS$i = {
+const _excluded$j = ["as", "children", "className", "color", "fontFamily", "fontSize", "lineHeight", "noWrap", "variant"];
+const COMPONENT_NAME$k = 'Text';
+const CLASSNAME$k = 'redsift-text';
+const DEFAULT_PROPS$k = {
   fontFamily: FontFamily.raleway
 };
 
@@ -5934,7 +5146,7 @@ const Text = /*#__PURE__*/forwardRef((props, ref) => {
       noWrap,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$f);
+    forwardedProps = _objectWithoutProperties(props, _excluded$j);
   return /*#__PURE__*/React__default.createElement(StyledText, _extends$1({
     as: as
   }, forwardedProps, {
@@ -5949,14 +5161,14 @@ const Text = /*#__PURE__*/forwardRef((props, ref) => {
     $variant: variant
   }), children);
 });
-Text.className = CLASSNAME$i;
-Text.defaultProps = DEFAULT_PROPS$i;
-Text.displayName = COMPONENT_NAME$i;
-
-const _excluded$e = ["badge", "color", "children", "className", "header", "isCollapsed", "isCollapsible", "isLoading"];
-const COMPONENT_NAME$h = 'DetailedCardSection';
-const CLASSNAME$h = 'redsift-detailed-card-section';
-const DEFAULT_PROPS$h = {
+Text.className = CLASSNAME$k;
+Text.defaultProps = DEFAULT_PROPS$k;
+Text.displayName = COMPONENT_NAME$k;
+
+const _excluded$i = ["badge", "color", "children", "className", "header", "isCollapsed", "isCollapsible", "isLoading"];
+const COMPONENT_NAME$j = 'DetailedCardSection';
+const CLASSNAME$j = 'redsift-detailed-card-section';
+const DEFAULT_PROPS$j = {
   isCollapsible: true
 };
 const hasCollapsibleChildren = children => {
@@ -5983,7 +5195,7 @@ const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
       isCollapsible: propsIsCollapsible,
       isLoading
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$e);
+    forwardedProps = _objectWithoutProperties(props, _excluded$i);
   const stringFormatter = useLocalizedStringFormatter(intlMessages);
   const isCollapsible = propsIsCollapsible && hasCollapsibleChildren(children);
   const [isCollapsed, setIsCollapsed] = useState(Boolean(propsIsCollapsed));
@@ -6026,9 +5238,9 @@ const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }) : null), children);
 });
-DetailedCardSection.className = CLASSNAME$h;
-DetailedCardSection.defaultProps = DEFAULT_PROPS$h;
-DetailedCardSection.displayName = COMPONENT_NAME$h;
+DetailedCardSection.className = CLASSNAME$j;
+DetailedCardSection.defaultProps = DEFAULT_PROPS$j;
+DetailedCardSection.displayName = COMPONENT_NAME$j;
 
 /**
  * Component style.
@@ -6069,10 +5281,10 @@ const StyledDetailedCardHeader = styled.div`
   }
 `;
 
-const _excluded$d = ["children", "className", "header", "headingProps", "isLoading"];
-const COMPONENT_NAME$g = 'DetailedCardHeader';
-const CLASSNAME$g = 'redsift-detailed-card-header';
-const DEFAULT_PROPS$g = {};
+const _excluded$h = ["children", "className", "header", "headingProps", "isLoading"];
+const COMPONENT_NAME$i = 'DetailedCardHeader';
+const CLASSNAME$i = 'redsift-detailed-card-header';
+const DEFAULT_PROPS$i = {};
 
 /**
  * The DetailedCardHeader component.
@@ -6085,7 +5297,7 @@ const DetailedCardHeader = /*#__PURE__*/forwardRef((props, ref) => {
       headingProps,
       isLoading
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$d);
+    forwardedProps = _objectWithoutProperties(props, _excluded$h);
   return /*#__PURE__*/React__default.createElement(StyledDetailedCardHeader, _extends$1({}, forwardedProps, {
     className: classNames(DetailedCardHeader.className, className),
     ref: ref
@@ -6100,9 +5312,9 @@ const DetailedCardHeader = /*#__PURE__*/forwardRef((props, ref) => {
     variant: "h2"
   }, headingProps), header)) : null, children);
 });
-DetailedCardHeader.className = CLASSNAME$g;
-DetailedCardHeader.defaultProps = DEFAULT_PROPS$g;
-DetailedCardHeader.displayName = COMPONENT_NAME$g;
+DetailedCardHeader.className = CLASSNAME$i;
+DetailedCardHeader.defaultProps = DEFAULT_PROPS$i;
+DetailedCardHeader.displayName = COMPONENT_NAME$i;
 
 /**
  * Component style.
@@ -6146,10 +5358,10 @@ const StyledPill = styled.div`
   }
 `;
 
-const _excluded$c = ["autoBreak", "children", "className", "color"];
-const COMPONENT_NAME$f = 'Pill';
-const CLASSNAME$f = 'redsift-pill';
-const DEFAULT_PROPS$f = {
+const _excluded$g = ["autoBreak", "children", "className", "color"];
+const COMPONENT_NAME$h = 'Pill';
+const CLASSNAME$h = 'redsift-pill';
+const DEFAULT_PROPS$h = {
   color: DataVizColorPalette.pink,
   height: 'fit-content'
 };
@@ -6164,7 +5376,7 @@ const Pill = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       color
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$c);
+    forwardedProps = _objectWithoutProperties(props, _excluded$g);
   return /*#__PURE__*/React__default.createElement(StyledPill, _extends$1({}, forwardedProps, {
     $autoBreak: autoBreak,
     $color: color,
@@ -6172,9 +5384,9 @@ const Pill = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-Pill.className = CLASSNAME$f;
-Pill.defaultProps = DEFAULT_PROPS$f;
-Pill.displayName = COMPONENT_NAME$f;
+Pill.className = CLASSNAME$h;
+Pill.defaultProps = DEFAULT_PROPS$h;
+Pill.displayName = COMPONENT_NAME$h;
 
 /**
  * Component style.
@@ -6204,10 +5416,10 @@ const StyledDetailedCardSectionItem = styled.div`
   }
 `;
 
-const _excluded$b = ["children", "className", "description", "icon", "iconProps", "isLoading", "pill", "pillProps", "shield"];
-const COMPONENT_NAME$e = 'DetailedCardSectionItem';
-const CLASSNAME$e = 'redsift-detailed-card-section-item';
-const DEFAULT_PROPS$e = {};
+const _excluded$f = ["children", "className", "description", "icon", "iconProps", "isLoading", "pill", "pillProps", "shield"];
+const COMPONENT_NAME$g = 'DetailedCardSectionItem';
+const CLASSNAME$g = 'redsift-detailed-card-section-item';
+const DEFAULT_PROPS$g = {};
 
 /**
  * The DetailedCardSectionItems component.
@@ -6224,7 +5436,7 @@ const DetailedCardSectionItem = /*#__PURE__*/forwardRef((props, ref) => {
       pillProps,
       shield
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$b);
+    forwardedProps = _objectWithoutProperties(props, _excluded$f);
   return /*#__PURE__*/React__default.createElement(StyledDetailedCardSectionItem, _extends$1({}, forwardedProps, {
     className: classNames(DetailedCardSectionItem.className, className),
     ref: ref
@@ -6252,9 +5464,9 @@ const DetailedCardSectionItem = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${DetailedCardSectionItem.className}-header__pill`
   }, pillProps), pill), typeof description === 'string' ? /*#__PURE__*/React__default.createElement(Text, null, description) : description)) : null), children);
 });
-DetailedCardSectionItem.className = CLASSNAME$e;
-DetailedCardSectionItem.defaultProps = DEFAULT_PROPS$e;
-DetailedCardSectionItem.displayName = COMPONENT_NAME$e;
+DetailedCardSectionItem.className = CLASSNAME$g;
+DetailedCardSectionItem.defaultProps = DEFAULT_PROPS$g;
+DetailedCardSectionItem.displayName = COMPONENT_NAME$g;
 
 /*!
 * tabbable 6.1.2
@@ -9759,9 +8971,9 @@ const StyledTooltipContent = styled.div`
 }}
 `;
 
-const COMPONENT_NAME$d = 'TooltipContent';
-const CLASSNAME$d = 'redsift-tooltip-content';
-const DEFAULT_PROPS$d = {};
+const COMPONENT_NAME$f = 'TooltipContent';
+const CLASSNAME$f = 'redsift-tooltip-content';
+const DEFAULT_PROPS$f = {};
 
 /**
  * The TooltipContent component.
@@ -9822,13 +9034,13 @@ const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${TooltipContent.className}__inner`
   }, children)));
 });
-TooltipContent.className = CLASSNAME$d;
-TooltipContent.defaultProps = DEFAULT_PROPS$d;
-TooltipContent.displayName = COMPONENT_NAME$d;
+TooltipContent.className = CLASSNAME$f;
+TooltipContent.defaultProps = DEFAULT_PROPS$f;
+TooltipContent.displayName = COMPONENT_NAME$f;
 
-const COMPONENT_NAME$c = 'TooltipTrigger';
-const CLASSNAME$c = 'redsift-tooltip-trigger';
-const DEFAULT_PROPS$c = {};
+const COMPONENT_NAME$e = 'TooltipTrigger';
+const CLASSNAME$e = 'redsift-tooltip-trigger';
+const DEFAULT_PROPS$e = {};
 
 /**
  * The TooltipTrigger component.
@@ -9855,9 +9067,9 @@ const TooltipTrigger = /*#__PURE__*/forwardRef((props, ref) => {
     ref: triggerRef
   }, getReferenceProps(props)), children);
 });
-TooltipTrigger.className = CLASSNAME$c;
-TooltipTrigger.defaultProps = DEFAULT_PROPS$c;
-TooltipTrigger.displayName = COMPONENT_NAME$c;
+TooltipTrigger.className = CLASSNAME$e;
+TooltipTrigger.defaultProps = DEFAULT_PROPS$e;
+TooltipTrigger.displayName = COMPONENT_NAME$e;
 
 function useTooltip(_ref) {
   let {
@@ -9918,9 +9130,9 @@ function useTooltip(_ref) {
   }), [isOpen, handleOpen, interactions, data, arrowRef, tooltipId]);
 }
 
-const COMPONENT_NAME$b = 'Tooltip';
-const CLASSNAME$b = 'redsift-tooltip';
-const DEFAULT_PROPS$b = {
+const COMPONENT_NAME$d = 'Tooltip';
+const CLASSNAME$d = 'redsift-tooltip';
+const DEFAULT_PROPS$d = {
   delay: 500,
   placement: TooltipPlacement.top
 };
@@ -9951,9 +9163,9 @@ const BaseTooltip = props => {
     value: tooltip
   }, trigger, content);
 };
-BaseTooltip.className = CLASSNAME$b;
-BaseTooltip.defaultProps = DEFAULT_PROPS$b;
-BaseTooltip.displayName = COMPONENT_NAME$b;
+BaseTooltip.className = CLASSNAME$d;
+BaseTooltip.defaultProps = DEFAULT_PROPS$d;
+BaseTooltip.displayName = COMPONENT_NAME$d;
 const Tooltip = Object.assign(BaseTooltip, {
   Trigger: TooltipTrigger,
   Content: TooltipContent
@@ -9967,10 +9179,10 @@ const useTooltipContext = () => {
   return context;
 };
 
-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 = {
+const _excluded$e = ["areAllCollapsed", "bannerVariant", "children", "className", "color", "defaultAllCollapsed", "icon", "isCollapsible", "isLoading", "onCollapseAll", "shield"];
+const COMPONENT_NAME$c = 'DetailedCard';
+const CLASSNAME$c = 'redsift-detailed-card';
+const DEFAULT_PROPS$c = {
   isCollapsible: true,
   width: '400px'
 };
@@ -10010,7 +9222,7 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
       onCollapseAll,
       shield
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$a);
+    forwardedProps = _objectWithoutProperties(props, _excluded$e);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$1);
   const isCollapsible = propsIsCollapsible && hasMultipleCollapsibleChildren(children);
   const [allCollapsed, setAllCollapsed] = useState({
@@ -10096,9 +9308,9 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
     return child;
   }));
 });
-BaseDetailedCard.className = CLASSNAME$a;
-BaseDetailedCard.defaultProps = DEFAULT_PROPS$a;
-BaseDetailedCard.displayName = COMPONENT_NAME$a;
+BaseDetailedCard.className = CLASSNAME$c;
+BaseDetailedCard.defaultProps = DEFAULT_PROPS$c;
+BaseDetailedCard.displayName = COMPONENT_NAME$c;
 const DetailedCard = Object.assign(BaseDetailedCard, {
   Header: DetailedCardHeader,
   Section: DetailedCardSection,
@@ -10106,21 +9318,745 @@ const DetailedCard = Object.assign(BaseDetailedCard, {
   SectionItem: DetailedCardSectionItem
 });
 
+let EventKey = /*#__PURE__*/function (EventKey) {
+  EventKey["ArrowLeft"] = "ArrowLeft";
+  EventKey["ArrowRight"] = "ArrowRight";
+  EventKey["ArrowUp"] = "ArrowUp";
+  EventKey["ArrowDown"] = "ArrowDown";
+  EventKey["Home"] = "Home";
+  EventKey["End"] = "End";
+  return EventKey;
+}({});
+let Navigation = /*#__PURE__*/function (Navigation) {
+  Navigation["PREVIOUS"] = "PREVIOUS";
+  Navigation["NEXT"] = "NEXT";
+  Navigation["VERY_FIRST"] = "VERY_FIRST";
+  Navigation["VERY_LAST"] = "VERY_LAST";
+  Navigation["PREVIOUS_ROW"] = "PREVIOUS_ROW";
+  Navigation["NEXT_ROW"] = "NEXT_ROW";
+  Navigation["FIRST_IN_ROW"] = "FIRST_IN_ROW";
+  Navigation["LAST_IN_ROW"] = "LAST_IN_ROW";
+  return Navigation;
+}({});
+let FocusWithinGroupActionType = /*#__PURE__*/function (FocusWithinGroupActionType) {
+  FocusWithinGroupActionType["REGISTER_TAB_STOP"] = "REGISTER_TAB_STOP";
+  FocusWithinGroupActionType["UNREGISTER_TAB_STOP"] = "UNREGISTER_TAB_STOP";
+  FocusWithinGroupActionType["KEY_DOWN_ON_ITEM"] = "KEY_DOWN_ON_ITEM";
+  FocusWithinGroupActionType["CLICK_ON_ITEM"] = "CLICK_ON_ITEM";
+  FocusWithinGroupActionType["KEY_DOWN_ON_LIST"] = "KEY_DOWN_ON_LIST";
+  FocusWithinGroupActionType["FOCUS_ON_LIST"] = "FOCUS_ON_LIST";
+  FocusWithinGroupActionType["BLUR_ON_LIST"] = "BLUR_ON_LIST";
+  FocusWithinGroupActionType["TAB_STOP_UPDATED"] = "TAB_STOP_UPDATED";
+  FocusWithinGroupActionType["OPTIONS_UPDATED"] = "OPTIONS_UPDATED";
+  FocusWithinGroupActionType["FILTER_LIST"] = "FILTER_LIST";
+  FocusWithinGroupActionType["DELAY_ACTION"] = "DELAY_ACTION";
+  return FocusWithinGroupActionType;
+}({});
+
 /**
- * Component style.
+ * Component props.
  */
-const StyledGrid = styled.div`
-  display: ${_ref => {
-  let {
-    inline
-  } = _ref;
-  return inline ? 'inline-grid' : 'grid';
-}};
 
-  ${baseStyling}
-  ${baseInternalSpacing}
-  ${baseGrid}
-`;
+const FOCUS_WITHING_GROUP_INITIAL_STATE = {
+  selectedId: null,
+  allowFocusing: false,
+  tabStops: [],
+  direction: 'vertical',
+  focusOnClick: false,
+  focusOnInit: true,
+  loopAround: false,
+  rowStartMap: null,
+  focusType: 'roving-tabindex'
+};
+const FocusWithinGroupContext = /*#__PURE__*/React__default.createContext({
+  state: FOCUS_WITHING_GROUP_INITIAL_STATE,
+  dispatch: () => {}
+});
+
+const DOCUMENT_POSITION_FOLLOWING = 4;
+const FocusWithinGroupReducer = (state, action) => {
+  switch (action.type) {
+    case FocusWithinGroupActionType.REGISTER_TAB_STOP:
+      {
+        const newTabStop = action.payload;
+        if (!newTabStop.domElementRef.current) {
+          return state;
+        }
+
+        // Iterate backwards through state.tabStops since it is
+        // most likely that the tab stop will need to be inserted
+        // at the end of that array.
+        let indexToInsertAt = -1;
+        for (let i = state.tabStops.length - 1; i >= 0; --i) {
+          const loopTabStop = state.tabStops[i];
+          if (loopTabStop.id === newTabStop.id) {
+            // console.warn(false, `'${newTabStop.id}' tab stop already registered`);
+            return state;
+          }
+          // The compareDocumentPosition condition is true
+          // if newTabStop follows loopTabStop:
+          if (indexToInsertAt === -1 && loopTabStop.domElementRef.current && !!(loopTabStop.domElementRef.current.compareDocumentPosition(newTabStop.domElementRef.current) & DOCUMENT_POSITION_FOLLOWING)) {
+            indexToInsertAt = i + 1;
+            break;
+          }
+        }
+
+        // The indexToInsertAt is -1 when newTabStop should be inserted
+        // at the start of tabStops (the compareDocumentPosition condition
+        // always returns false in that case).
+        if (indexToInsertAt === -1) {
+          indexToInsertAt = 0;
+        }
+        const newTabStops = state.tabStops.slice();
+        newTabStops.splice(indexToInsertAt, 0, newTabStop);
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          selectedId: state.focusOnInit ? getUpdatedSelectedId(newTabStops, state.selectedId) : null,
+          tabStops: newTabStops,
+          rowStartMap: null
+        });
+      }
+    case FocusWithinGroupActionType.UNREGISTER_TAB_STOP:
+      {
+        const id = action.payload.id;
+        const newTabStops = state.tabStops.filter(tabStop => tabStop.id !== id);
+        if (newTabStops.length === state.tabStops.length) {
+          // console.warn(false, `'${id}' tab stop already unregistered`);
+          return state;
+        }
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          selectedId: state.focusOnInit ? getUpdatedSelectedId(newTabStops, state.selectedId) : null,
+          tabStops: newTabStops,
+          rowStartMap: null
+        });
+      }
+    case FocusWithinGroupActionType.TAB_STOP_UPDATED:
+      {
+        const {
+          id,
+          rowIndex,
+          isDisabled
+        } = action.payload;
+        const index = state.tabStops.findIndex(tabStop => tabStop.id === id);
+        if (index === -1) {
+          console.warn(false, `'${id}' tab stop not registered`);
+          return state;
+        }
+        const tabStop = state.tabStops[index];
+        if (tabStop.isDisabled === isDisabled && tabStop.rowIndex === rowIndex) {
+          // Nothing to do so short-circuit.
+          return state;
+        }
+        const newTabStop = _objectSpread2(_objectSpread2({}, tabStop), {}, {
+          rowIndex,
+          isDisabled
+        });
+        const newTabStops = state.tabStops.slice();
+        newTabStops.splice(index, 1, newTabStop);
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          selectedId: state.focusOnInit ? getUpdatedSelectedId(newTabStops, state.selectedId) : null,
+          tabStops: newTabStops,
+          rowStartMap: null
+        });
+      }
+    case FocusWithinGroupActionType.KEY_DOWN_ON_ITEM:
+      {
+        const {
+          id,
+          key,
+          ctrlKey
+        } = action.payload;
+        const index = state.tabStops.findIndex(tabStop => tabStop.id === id);
+        if (index === -1) {
+          console.warn(false, `'${id}' tab stop not registered`);
+          return state;
+        }
+        return moveSelectionFromKey(state, index, key, ctrlKey);
+      }
+    case FocusWithinGroupActionType.CLICK_ON_ITEM:
+      {
+        const id = action.payload.id;
+        const index = state.tabStops.findIndex(tabStop => tabStop.id === id);
+        if (index === -1) {
+          console.warn(false, `'${id}' tab stop not registered`);
+          return state;
+        }
+        const currentTabStop = state.tabStops[index];
+        return currentTabStop.isDisabled ? state : selectTabStop(state, currentTabStop, undefined, state.focusOnClick);
+      }
+    case FocusWithinGroupActionType.FOCUS_ON_LIST:
+      {
+        var _action$payload$id, _state$tabStops$;
+        const id = (_action$payload$id = action.payload.id) !== null && _action$payload$id !== void 0 ? _action$payload$id : (_state$tabStops$ = state.tabStops[0]) === null || _state$tabStops$ === void 0 ? void 0 : _state$tabStops$.id;
+        const index = state.tabStops.findIndex(tabStop => tabStop.id === id);
+        if (index === -1) {
+          return state;
+        }
+        const currentTabStop = state.tabStops[index];
+        return currentTabStop.isDisabled ? _objectSpread2(_objectSpread2({}, state), {}, {
+          delayedAction: undefined
+        }) : selectTabStop(_objectSpread2(_objectSpread2({}, state), {}, {
+          delayedAction: undefined
+        }), currentTabStop, undefined, state.focusOnClick);
+      }
+    case FocusWithinGroupActionType.BLUR_ON_LIST:
+      {
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          activedescendant: ['', '']
+        });
+      }
+    case FocusWithinGroupActionType.KEY_DOWN_ON_LIST:
+      {
+        const {
+          key,
+          ctrlKey
+        } = action.payload;
+        let index = state.tabStops.findIndex(tabStop => tabStop.id === state.selectedId);
+        if (index === -1) {
+          if (state.focusOnInit) {
+            console.warn(false, `'${state.selectedId}' tab stop not registered`);
+            return _objectSpread2(_objectSpread2({}, state), {}, {
+              delayedAction: undefined
+            });
+          } else {
+            index = 0;
+          }
+        }
+        return moveSelectionFromKey(_objectSpread2(_objectSpread2({}, state), {}, {
+          delayedAction: undefined
+        }), index, key, ctrlKey);
+      }
+    case FocusWithinGroupActionType.OPTIONS_UPDATED:
+      return _objectSpread2(_objectSpread2({}, state), action.payload);
+    case FocusWithinGroupActionType.FILTER_LIST:
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        selectedId: null,
+        activedescendant: ['', '']
+      }, action.payload);
+    case FocusWithinGroupActionType.DELAY_ACTION:
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        delayedAction: action.payload
+      });
+    /* istanbul ignore next */
+    default:
+      return state;
+  }
+};
+function findIndexOfVeryFirstActiveTabStop(tabStops) {
+  return tabStops.findIndex(tabStop => !tabStop.isDisabled);
+}
+function findIndexOfVeryLastActiveTabStop(tabStops) {
+  for (let i = tabStops.length - 1; i >= 0; --i) {
+    const tabStop = tabStops[i];
+    if (!tabStop.isDisabled) {
+      return i;
+    }
+  }
+  return -1;
+}
+
+// Determine the updated value for selectedId:
+function getUpdatedSelectedId(tabStops, currentSelectedId) {
+  if (currentSelectedId === null) {
+    // There is not currently selected tab stop, so find
+    // the first tab stop that is not isDisabled and return
+    // its id, otherwise return null.
+    const index = tabStops.findIndex(tabStop => !tabStop.isDisabled);
+    return index === -1 ? null : tabStops[index].id;
+  }
+  let index = tabStops.findIndex(tabStop => tabStop.id === currentSelectedId);
+  if (index !== -1 && !tabStops[index].isDisabled) {
+    // The current selected id is still valid, so return it.
+    return currentSelectedId;
+  }
+
+  // Finds the first tab stop that is not isDisabled and return
+  // its id, otherwise return null.
+  index = tabStops.findIndex(tabStop => !tabStop.isDisabled);
+  return index === -1 ? null : tabStops[index].id;
+}
+
+// Translates the user key down event info into a navigation instruction.
+function getNavigationValue(key, ctrlKey, isGrid, direction, loopAround, isFirst, isLast) {
+  switch (key) {
+    case EventKey.ArrowLeft:
+      if (isGrid || direction === 'horizontal' || direction === 'both') {
+        return !isGrid && loopAround && isFirst ? Navigation.VERY_LAST : Navigation.PREVIOUS;
+      }
+      return null;
+    case EventKey.ArrowRight:
+      if (isGrid || direction === 'horizontal' || direction === 'both') {
+        return !isGrid && loopAround && isLast ? Navigation.VERY_FIRST : Navigation.NEXT;
+      }
+      return null;
+    case EventKey.ArrowUp:
+      if (isGrid) {
+        return Navigation.PREVIOUS_ROW;
+      } else if (direction === 'vertical' || direction === 'both') {
+        return loopAround && isFirst ? Navigation.VERY_LAST : Navigation.PREVIOUS;
+      }
+      return null;
+    case EventKey.ArrowDown:
+      if (isGrid) {
+        return Navigation.NEXT_ROW;
+      } else if (direction === 'vertical' || direction === 'both') {
+        return loopAround && isLast ? Navigation.VERY_FIRST : Navigation.NEXT;
+      }
+      return null;
+    case EventKey.Home:
+      return !isGrid || ctrlKey ? Navigation.VERY_FIRST : Navigation.FIRST_IN_ROW;
+    case EventKey.End:
+      return !isGrid || ctrlKey ? Navigation.VERY_LAST : Navigation.LAST_IN_ROW;
+    /* istanbul ignore next */
+    default:
+      return null;
+  }
+}
+
+// Creates the new state for a tab stop when it becomes the selected one.
+function selectTabStop(state, tabStop, rowStartMap) {
+  let allowFocusing = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+  return _objectSpread2(_objectSpread2({}, state), {}, {
+    allowFocusing,
+    selectedId: tabStop.id,
+    rowStartMap: rowStartMap || state.rowStartMap,
+    activedescendant: state.focusType === 'virtual-focus' ? [tabStop.id, tabStop.value] : undefined
+  });
+}
+
+// Creates the row start index lookup map
+// for the currently registered tab stops.
+function createRowStartMap(state) {
+  const map = new Map();
+  for (let i = 0; i < state.tabStops.length; ++i) {
+    const {
+      rowIndex
+    } = state.tabStops[i];
+    if (rowIndex !== null && !map.has(rowIndex)) {
+      map.set(rowIndex, i);
+    }
+  }
+  return map;
+}
+function moveSelectionFromKey(state, index, key, ctrlKey) {
+  const currentTabStop = state.tabStops[index];
+  if (currentTabStop.isDisabled) {
+    return state;
+  }
+  const isGrid = currentTabStop.rowIndex !== null;
+  const isFirst = index === findIndexOfVeryFirstActiveTabStop(state.tabStops);
+  const isLast = index === findIndexOfVeryLastActiveTabStop(state.tabStops);
+  const navigation = getNavigationValue(key, ctrlKey, isGrid, state.direction, state.loopAround, isFirst, isLast);
+  if (!navigation) {
+    return state;
+  }
+  switch (navigation) {
+    case Navigation.NEXT:
+      {
+        for (let i = index + 1; i < state.tabStops.length; ++i) {
+          const tabStop = state.tabStops[i];
+          if (isGrid && tabStop.rowIndex !== currentTabStop.rowIndex) {
+            break;
+          }
+          if (!tabStop.isDisabled) {
+            return selectTabStop(state, tabStop);
+          }
+        }
+      }
+      break;
+    case Navigation.PREVIOUS:
+      {
+        for (let i = index - 1; i >= 0; --i) {
+          const tabStop = state.tabStops[i];
+          if (isGrid && tabStop.rowIndex !== currentTabStop.rowIndex) {
+            break;
+          }
+          if (!tabStop.isDisabled) {
+            return selectTabStop(state, tabStop);
+          }
+        }
+      }
+      break;
+    case Navigation.VERY_FIRST:
+      {
+        const index = findIndexOfVeryFirstActiveTabStop(state.tabStops);
+        if (index > -1) {
+          return selectTabStop(state, state.tabStops[index]);
+        }
+      }
+      break;
+    case Navigation.VERY_LAST:
+      {
+        const index = findIndexOfVeryLastActiveTabStop(state.tabStops);
+        if (index > -1) {
+          return selectTabStop(state, state.tabStops[index]);
+        }
+      }
+      break;
+    case Navigation.PREVIOUS_ROW:
+      {
+        if (currentTabStop.rowIndex === null || currentTabStop.rowIndex === 0) {
+          return state;
+        }
+        const rowStartMap = state.rowStartMap || createRowStartMap(state);
+        const rowStartIndex = rowStartMap.get(currentTabStop.rowIndex);
+        if (rowStartIndex === undefined) {
+          return state;
+        }
+        const columnOffset = index - rowStartIndex;
+        for (let i = currentTabStop.rowIndex - 1; i >= 0; --i) {
+          const rowStartIndex = rowStartMap.get(i);
+          if (rowStartIndex === undefined) {
+            return state;
+          }
+          const rowTabStop = state.tabStops[rowStartIndex + columnOffset];
+          if (rowTabStop && !rowTabStop.isDisabled) {
+            return selectTabStop(state, rowTabStop, rowStartMap);
+          }
+        }
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          allowFocusing: true,
+          rowStartMap
+        });
+      }
+    case Navigation.NEXT_ROW:
+      {
+        const maxRowIndex = state.tabStops[state.tabStops.length - 1].rowIndex;
+        if (currentTabStop.rowIndex === null || maxRowIndex === null || currentTabStop.rowIndex === maxRowIndex) {
+          return state;
+        }
+        const rowStartMap = state.rowStartMap || createRowStartMap(state);
+        const rowStartIndex = rowStartMap.get(currentTabStop.rowIndex);
+        if (rowStartIndex === undefined) {
+          return state;
+        }
+        const columnOffset = index - rowStartIndex;
+        for (let i = currentTabStop.rowIndex + 1; i <= maxRowIndex; ++i) {
+          const rowStartIndex = rowStartMap.get(i);
+          if (rowStartIndex === undefined) {
+            return state;
+          }
+          const rowTabStop = state.tabStops[rowStartIndex + columnOffset];
+          if (rowTabStop && !rowTabStop.isDisabled) {
+            return selectTabStop(state, rowTabStop, rowStartMap);
+          }
+        }
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          allowFocusing: true,
+          rowStartMap
+        });
+      }
+    case Navigation.FIRST_IN_ROW:
+      {
+        if (currentTabStop.rowIndex === null) {
+          return state;
+        }
+        const rowStartMap = state.rowStartMap || createRowStartMap(state);
+        const rowStartIndex = rowStartMap.get(currentTabStop.rowIndex);
+        if (rowStartIndex === undefined) {
+          return state;
+        }
+        for (let i = rowStartIndex; i < state.tabStops.length; ++i) {
+          const tabStop = state.tabStops[i];
+          if (tabStop.rowIndex !== currentTabStop.rowIndex) {
+            break;
+          } else if (!tabStop.isDisabled) {
+            return selectTabStop(state, state.tabStops[i], rowStartMap);
+          }
+        }
+      }
+      break;
+    case Navigation.LAST_IN_ROW:
+      {
+        if (currentTabStop.rowIndex === null) {
+          return state;
+        }
+        const rowStartMap = state.rowStartMap || createRowStartMap(state);
+        const rowEndIndex = rowStartMap.has(currentTabStop.rowIndex + 1) ? (rowStartMap.get(currentTabStop.rowIndex + 1) || 0) - 1 : state.tabStops.length - 1;
+        for (let i = rowEndIndex; i >= 0; --i) {
+          const tabStop = state.tabStops[i];
+          if (tabStop.rowIndex !== currentTabStop.rowIndex) {
+            break;
+          } else if (!tabStop.isDisabled) {
+            return selectTabStop(state, state.tabStops[i], rowStartMap);
+          }
+        }
+      }
+      break;
+  }
+  return state;
+}
+
+/**
+ * The FocusWithinGroup component.
+ *
+ * @param {ReactNode} children - The child content, which will
+ * include the DOM elements to rove between using the tab key.
+ * @param {KeyDirection} direction - An optional direction value
+ * that only applies when the roving tabindex is not being
+ * used within a grid. This value specifies the arrow key behaviour.
+ * The default value is 'horizontal'.
+ * When set to 'horizontal' then only the ArrowLeft and ArrowRight
+ * keys move to the previous and next tab stop respectively.
+ * When set to 'vertical' then only the ArrowUp and ArrowDown keys
+ * move to the previous and next tab stop respectively. When set
+ * to 'both' then both the ArrowLeft and ArrowUp keys can be used
+ * to move to the previous tab stop, and both the ArrowRight
+ * and ArrowDown keys can be used to move to the next tab stop.
+ * If you do not pass an explicit value then the 'horizontal'
+ * behaviour applies.
+ * @param {boolean} focusOnClick - An optional flag for indicating
+ * if `focus()` should invoked on an item in the roving tabindex
+ * when it is clicked. The default value for this flag is `false`,
+ * meaning that `focus()` will not be invoked on click.
+ * Browsers are
+ * [inconsistent in their behaviour](https://zellwk.com/blog/inconsistent-button-behavior/)
+ * when a button is clicked so you will see some variation between
+ * the browsers with the default value. Prior to version 3 of this library,
+ * the behaviour was to always invoke `focus()` on click; this behaviour
+ * can be maintained by passing `true`.
+ * @param {boolean} loopAround - An optional flag that,
+ * when set to `true`, will loop the tabindex around when the user
+ * tries to tab to the first or last elements in the roving tabindex,
+ * rather than stopping. The default value is `false` (no looping).
+ * Note that this option does not apply if the roving tabindex
+ * is being used on a grid.
+ */
+const FocusWithinGroup = props => {
+  const {
+    children,
+    direction,
+    focusOnClick,
+    loopAround,
+    focusType,
+    focusOnInit,
+    activedescendant
+  } = props;
+  const [state, dispatch] = useReducer(FocusWithinGroupReducer, _objectSpread2(_objectSpread2({}, FOCUS_WITHING_GROUP_INITIAL_STATE), {}, {
+    direction,
+    focusOnClick,
+    loopAround,
+    focusType,
+    focusOnInit,
+    activedescendant
+  }));
+
+  // Update the options whenever they change:
+  useEffect(() => {
+    dispatch({
+      type: FocusWithinGroupActionType.OPTIONS_UPDATED,
+      payload: {
+        direction: direction !== null && direction !== void 0 ? direction : FOCUS_WITHING_GROUP_INITIAL_STATE.direction,
+        focusOnClick: focusOnClick !== null && focusOnClick !== void 0 ? focusOnClick : FOCUS_WITHING_GROUP_INITIAL_STATE.focusOnClick,
+        loopAround: loopAround !== null && loopAround !== void 0 ? loopAround : FOCUS_WITHING_GROUP_INITIAL_STATE.loopAround,
+        focusType: focusType !== null && focusType !== void 0 ? focusType : FOCUS_WITHING_GROUP_INITIAL_STATE.focusType,
+        focusOnInit: focusOnInit !== null && focusOnInit !== void 0 ? focusOnInit : FOCUS_WITHING_GROUP_INITIAL_STATE.focusOnInit,
+        activedescendant: activedescendant !== null && activedescendant !== void 0 ? activedescendant : FOCUS_WITHING_GROUP_INITIAL_STATE.activedescendant
+      }
+    });
+  }, [direction, focusOnClick, focusOnInit, loopAround, focusType, activedescendant]);
+  const context = useMemo(() => ({
+    state,
+    dispatch
+  }), [state]);
+  return /*#__PURE__*/React__default.createElement(FocusWithinGroupContext.Provider, {
+    value: context
+  }, children);
+};
+
+let counter = 0;
+function uniqueId() {
+  return `rti_${++counter}`;
+}
+
+/**
+ * Includes the given DOM element in the current roving tabindex.
+ * @param {RefObject<Element>} domElementRef The DOM element to include.
+ * This must be the same DOM element for the lifetime of the containing
+ * component.
+ * @param {boolean} isDisabled Whether or not the DOM element is currently
+ * enabled. This value can be updated as appropriate throughout the lifetime
+ * of the containing component.
+ * @param {number?} rowIndex An optional integer value that must be
+ * populated if the roving tabindex is being used in a grid. In that case,
+ * set it to the zero-based index of the row that the given DOM element
+ * is currently part of. You can update this row index as appropriate
+ * throughout the lifetime of the containing component, for example if
+ * the shape of the grid can change dynamically.
+ * @returns A tuple of values to be applied by the containing
+ * component for the roving tabindex to work correctly.
+ * First tuple value: The tabIndex value to apply to the tab stop
+ * element.
+ * Second tuple value: Whether or not focus() should be invoked on the
+ * tab stop element.
+ * Third tuple value: The onKeyDown callback to apply to the tab
+ * stop element. If the key press is relevant to the hook then
+ * event.preventDefault() will be invoked on the event.
+ * Fourth tuple value: The onClick callback to apply to the tab
+ * stop element.
+ */
+function useFocusOnListItem(props) {
+  var _context$state$active;
+  const {
+    domElementRef,
+    isDisabled,
+    id,
+    value,
+    rowIndex = null
+  } = props;
+  // Create a stable ID for the lifetime of the component:
+  const idRef = useRef(null);
+  function getId() {
+    if (id) {
+      return id;
+    }
+    if (!idRef.current) {
+      idRef.current = uniqueId();
+    }
+    return idRef.current;
+  }
+  const isMounted = useRef(false);
+  const context = useContext(FocusWithinGroupContext);
+
+  // Register the tab stop on mount and unregister it on unmount:
+  useEffect(() => {
+    const id = getId();
+    context.dispatch({
+      type: FocusWithinGroupActionType.REGISTER_TAB_STOP,
+      payload: {
+        id,
+        domElementRef,
+        rowIndex,
+        isDisabled,
+        value: value
+      }
+    });
+    return () => {
+      context.dispatch({
+        type: FocusWithinGroupActionType.UNREGISTER_TAB_STOP,
+        payload: {
+          id
+        }
+      });
+    };
+  }, []);
+
+  // Update the tab stop data if rowIndex or isDisabled change.
+  // The isMounted flag is used to prevent this effect running
+  // on mount, which is benign but redundant (as the
+  // REGISTER_TAB_STOP action would have just been dispatched).
+  useEffect(() => {
+    if (isMounted.current) {
+      context.dispatch({
+        type: FocusWithinGroupActionType.TAB_STOP_UPDATED,
+        payload: {
+          id: getId(),
+          rowIndex,
+          isDisabled
+        }
+      });
+    } else {
+      isMounted.current = true;
+    }
+  }, [rowIndex, isDisabled]);
+
+  // Create a stable callback function for handling key down events:
+  const handleKeyDown = useCallback(event => {
+    const key = EventKey[event.key];
+    if (!key) {
+      return;
+    }
+    context.dispatch({
+      type: FocusWithinGroupActionType.KEY_DOWN_ON_ITEM,
+      payload: {
+        id: getId(),
+        key,
+        ctrlKey: event.ctrlKey
+      }
+    });
+    event.preventDefault();
+  }, []);
+
+  // Create a stable callback function for handling click events:
+  const handleClick = useCallback(() => {
+    context.dispatch({
+      type: FocusWithinGroupActionType.CLICK_ON_ITEM,
+      payload: {
+        id: getId()
+      }
+    });
+  }, []);
+
+  // Determine if the current tab stop is the currently active one:
+  const selected = getId() === context.state.selectedId;
+  const tabIndex = context.state.focusType === 'roving-tabindex' ? selected ? 0 : -1 : undefined;
+  const isFocused = selected && context.state.allowFocusing;
+  useEffect(() => {
+    if (isFocused && domElementRef.current && context.state.focusType === 'roving-tabindex') {
+      var _current;
+      (_current = domElementRef.current) === null || _current === void 0 ? void 0 : _current.focus();
+    }
+  }, [isFocused]);
+  return {
+    tabIndex,
+    isFocused: context.state.focusType === 'roving-tabindex' ? isFocused && document.activeElement === domElementRef.current : selected && ((_context$state$active = context.state.activedescendant) === null || _context$state$active === void 0 ? void 0 : _context$state$active[0]) === getId(),
+    handleKeyDown,
+    handleClick
+  };
+}
+
+function useFocusOnList() {
+  const context = useContext(FocusWithinGroupContext);
+  const handleKeyDown = useCallback(event => {
+    const key = EventKey[event.key];
+    if (!key) {
+      return;
+    }
+    context.dispatch({
+      type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
+      payload: {
+        key,
+        ctrlKey: event.ctrlKey
+      }
+    });
+    event.preventDefault();
+  }, []);
+  const handleFocus = useCallback(() => {
+    context.dispatch({
+      type: FocusWithinGroupActionType.FOCUS_ON_LIST,
+      payload: {
+        id: context.state.selectedId
+      }
+    });
+  }, [context.state.selectedId]);
+  const handleBlur = useCallback(() => {
+    context.dispatch({
+      type: FocusWithinGroupActionType.BLUR_ON_LIST,
+      payload: {}
+    });
+  }, []);
+  return {
+    activedescendant: context.state.activedescendant,
+    handleKeyDown,
+    handleFocus,
+    handleBlur
+  };
+}
+
+/**
+ * Component style.
+ */
+const StyledGrid = styled.div`
+  display: ${_ref => {
+  let {
+    inline
+  } = _ref;
+  return inline ? 'inline-grid' : 'grid';
+}};
+
+  ${baseStyling}
+  ${baseInternalSpacing}
+  ${baseGrid}
+`;
 
 /**
  * Component style.
@@ -10132,10 +10068,10 @@ const StyledGridItem = styled.div`
   ${baseInternalSpacing}
 `;
 
-const _excluded$9 = ["children", "className"];
-const COMPONENT_NAME$9 = 'GridItem';
-const CLASSNAME$9 = 'redsift-grid-item';
-const DEFAULT_PROPS$9 = {};
+const _excluded$d = ["children", "className"];
+const COMPONENT_NAME$b = 'GridItem';
+const CLASSNAME$b = 'redsift-grid-item';
+const DEFAULT_PROPS$b = {};
 
 /**
  * The GridItem component.
@@ -10145,20 +10081,20 @@ const GridItem = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$9);
+    forwardedProps = _objectWithoutProperties(props, _excluded$d);
   return /*#__PURE__*/React__default.createElement(StyledGridItem, _extends$1({}, forwardedProps, {
     className: classNames(GridItem.className, className),
     ref: ref
   }), children);
 });
-GridItem.className = CLASSNAME$9;
-GridItem.defaultProps = DEFAULT_PROPS$9;
-GridItem.displayName = COMPONENT_NAME$9;
+GridItem.className = CLASSNAME$b;
+GridItem.defaultProps = DEFAULT_PROPS$b;
+GridItem.displayName = COMPONENT_NAME$b;
 
-const _excluded$8 = ["children", "className"];
-const COMPONENT_NAME$8 = 'Grid';
-const CLASSNAME$8 = 'redsift-grid';
-const DEFAULT_PROPS$8 = {};
+const _excluded$c = ["children", "className"];
+const COMPONENT_NAME$a = 'Grid';
+const CLASSNAME$a = 'redsift-grid';
+const DEFAULT_PROPS$a = {};
 
 /**
  * The Grid component.
@@ -10168,19 +10104,281 @@ const BaseGrid = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$8);
+    forwardedProps = _objectWithoutProperties(props, _excluded$c);
   return /*#__PURE__*/React__default.createElement(StyledGrid, _extends$1({}, forwardedProps, {
     className: classNames(BaseGrid.className, className),
     ref: ref
   }), children);
 });
-BaseGrid.className = CLASSNAME$8;
-BaseGrid.defaultProps = DEFAULT_PROPS$8;
-BaseGrid.displayName = COMPONENT_NAME$8;
+BaseGrid.className = CLASSNAME$a;
+BaseGrid.defaultProps = DEFAULT_PROPS$a;
+BaseGrid.displayName = COMPONENT_NAME$a;
 const Grid = Object.assign(BaseGrid, {
   Item: GridItem
 });
 
+/**
+ * Component style.
+ */
+const StyledItem = styled.div`
+  height: 20px;
+  position: relative;
+  width: calc(100% - 32px);
+  padding: 8px 16px;
+
+  ${baseStyling}
+
+  align-items: center;
+  background: none;
+  border: none;
+  display: inline-flex;
+
+  ${_ref => {
+  let {
+    $isActive,
+    $isSelected,
+    $isDisabled,
+    $isHovered,
+    $isFocused
+  } = _ref;
+  return css`
+    background-color: ${($isActive || $isSelected) && ($isHovered || $isFocused) ? 'var(--redsift-color-default-active-hover)' : $isActive ? 'var(--redsift-color-default-active)' : $isHovered ? 'var(--redsift-color-default-hover)' : $isFocused ? 'var(--redsift-color-default-hover)' : $isSelected && !$isDisabled ? 'var(--redsift-color-default-active)' : $isSelected && $isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : $isDisabled ? 'none' : 'none'};
+  `;
+}}
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+
+    ${_ref2 => {
+  let {
+    $isActive,
+    $isSelected,
+    $isDisabled
+  } = _ref2;
+  return css`
+      cursor: ${$isDisabled ? 'default' : 'pointer'};
+      background-color: ${$isActive ? 'var(--redsift-color-default-active-hover)' : $isSelected && !$isDisabled ? 'var(--redsift-color-default-active-hover)' : $isDisabled ? 'none' : 'var(--redsift-color-default-hover)'};
+    `;
+}};
+  }
+
+  &:active {
+    outline: none;
+
+    ${_ref3 => {
+  let {
+    $isHovered,
+    $isDisabled
+  } = _ref3;
+  return css`
+      background-color: ${$isHovered ? 'var(--redsift-color-default-active-hover)' : $isDisabled ? 'none' : 'var(--redsift-color-default-active)'};
+    `;
+}};
+  }
+`;
+
+const LISTBOX_INITIAL_STATE = {
+  isDisabled: false,
+  isReadOnly: false,
+  selectedValues: [],
+  selectionMode: 'single'
+};
+const ListboxContext = /*#__PURE__*/React__default.createContext({
+  state: LISTBOX_INITIAL_STATE,
+  dispatch: () => {}
+});
+
+/**
+ * Context props.
+ */
+
+let ListboxActionType = /*#__PURE__*/function (ListboxActionType) {
+  ListboxActionType["TOGGLE"] = "TOGGLE";
+  ListboxActionType["SET"] = "SET";
+  return ListboxActionType;
+}({});
+/**
+ * Component variant.
+ */
+const ListboxVariant = {
+  standalone: 'standalone',
+  unstyled: 'unstyled'
+};
+
+/**
+ * Component props.
+ */
+
+function useListboxItem(props) {
+  const {
+    domElementRef,
+    value,
+    id,
+    isDisabled,
+    propsIsSelected
+  } = props;
+  const {
+    tabIndex,
+    isFocused,
+    handleKeyDown: handleFocusKeyDown,
+    handleClick: handleFocusClick
+  } = useFocusOnListItem({
+    domElementRef,
+    isDisabled: isDisabled,
+    id,
+    value
+  });
+  const context = useContext(ListboxContext);
+  const handleKeyDown = useCallback(event => {
+    handleFocusKeyDown(event);
+    const code = event.code;
+    if (code === 'Enter' || code === 'Space') {
+      if (context.state.selectionMode === 'multiple') {
+        context.dispatch({
+          type: ListboxActionType.TOGGLE,
+          payload: {
+            value,
+            activedescendant: [id, value]
+          }
+        });
+      } else {
+        context.dispatch({
+          type: ListboxActionType.SET,
+          payload: {
+            values: [value],
+            activedescendant: [id, value]
+          }
+        });
+      }
+    }
+  }, []);
+  const handleClick = useCallback(() => {
+    handleFocusClick();
+    if (context.state.selectionMode === 'multiple') {
+      context.dispatch({
+        type: ListboxActionType.TOGGLE,
+        payload: {
+          value,
+          activedescendant: [id, value]
+        }
+      });
+    } else {
+      context.dispatch({
+        type: ListboxActionType.SET,
+        payload: {
+          values: [value],
+          activedescendant: [id, value]
+        }
+      });
+    }
+  }, []);
+  const isSelected = propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : context.state.selectedValues.find(selectedValue => selectedValue === value) !== undefined;
+  useEffect(() => {
+    if (isFocused && domElementRef.current) {
+      var _current;
+      (_current = domElementRef.current) === null || _current === void 0 ? void 0 : _current.focus();
+    }
+  }, [isFocused]);
+  return {
+    tabIndex,
+    isFocused,
+    isSelected,
+    isDisabled,
+    handleKeyDown,
+    handleClick
+  };
+}
+
+const _excluded$b = ["children", "className", "defaultSelected", "id", "isActive", "isDisabled", "isHovered", "isSelected", "value"];
+const COMPONENT_NAME$9 = 'Item';
+const CLASSNAME$9 = 'redsift-item';
+const DEFAULT_PROPS$9 = {};
+const RenderedItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      defaultSelected,
+      id: propsId,
+      isActive,
+      isDisabled: propsIsDisabled,
+      isHovered,
+      isSelected: propsIsSelected,
+      value
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$b);
+  const id = propsId !== null && propsId !== void 0 ? propsId : value;
+  const _ref = useRef();
+  const divRef = ref !== null && ref !== void 0 ? ref : _ref;
+  const {
+    tabIndex,
+    isFocused,
+    isSelected,
+    isDisabled,
+    handleKeyDown,
+    handleClick
+  } = useListboxItem({
+    domElementRef: divRef,
+    value,
+    id,
+    isDisabled: propsIsDisabled,
+    propsIsSelected: propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected
+  });
+  return /*#__PURE__*/React__default.createElement(StyledItem, _extends$1({
+    role: "option"
+  }, forwardedProps, {
+    id: id,
+    $isActive: isActive,
+    $isDisabled: isDisabled,
+    $isFocused: isFocused,
+    $isHovered: isHovered,
+    $isSelected: isSelected,
+    "aria-selected": isSelected,
+    className: classNames(Item.className, className),
+    onClick: handleClick,
+    ref: divRef,
+    onKeyDown: handleKeyDown,
+    tabIndex: tabIndex
+  }), children !== null && children !== void 0 ? children : value);
+});
+
+/**
+ * The Item component.
+ */
+const Item = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    value
+  } = props;
+  const focusContext = useContext(FocusWithinGroupContext);
+  if (!focusContext.state.filter) {
+    return /*#__PURE__*/React__default.createElement(RenderedItem, _extends$1({}, props, {
+      ref: ref
+    }));
+  }
+  const {
+    value: filterValue,
+    type,
+    caseSensitive
+  } = focusContext.state.filter;
+  if (!filterValue) {
+    return /*#__PURE__*/React__default.createElement(RenderedItem, _extends$1({}, props, {
+      ref: ref
+    }));
+  } else if (caseSensitive && (type === 'startsWith' && value.startsWith(filterValue) || type === 'contains' && value.includes(filterValue) || type === 'endsWith' && value.endsWith(filterValue))) {
+    return /*#__PURE__*/React__default.createElement(RenderedItem, _extends$1({}, props, {
+      ref: ref
+    }));
+  } else if (!caseSensitive && (type === 'startsWith' && value.toLowerCase().startsWith(filterValue.toLowerCase()) || type === 'contains' && value.toLowerCase().includes(filterValue.toLowerCase()) || type === 'endsWith' && value.toLowerCase().endsWith(filterValue.toLowerCase()))) {
+    return /*#__PURE__*/React__default.createElement(RenderedItem, _extends$1({}, props, {
+      ref: ref
+    }));
+  }
+  return null;
+});
+Item.className = CLASSNAME$9;
+Item.defaultProps = DEFAULT_PROPS$9;
+Item.displayName = COMPONENT_NAME$9;
+
 /**
  * Component style.
  */
@@ -10221,10 +10419,10 @@ const StyledLink = styled.a`
   }
 `;
 
-const _excluded$7 = ["as", "children", "className", "href", "isDisabled"];
-const COMPONENT_NAME$7 = 'Link';
-const CLASSNAME$7 = 'redsift-link';
-const DEFAULT_PROPS$7 = {};
+const _excluded$a = ["as", "children", "className", "href", "isDisabled"];
+const COMPONENT_NAME$8 = 'Link';
+const CLASSNAME$8 = 'redsift-link';
+const DEFAULT_PROPS$8 = {};
 
 /**
  * The Link is a semantic link that looks like a link.
@@ -10242,7 +10440,7 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
       href,
       isDisabled
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$7);
+    forwardedProps = _objectWithoutProperties(props, _excluded$a);
   return /*#__PURE__*/React__default.createElement(StyledLink, _extends$1({
     as: as,
     "aria-disabled": isDisabled,
@@ -10255,14 +10453,14 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-Link.className = CLASSNAME$7;
-Link.defaultProps = DEFAULT_PROPS$7;
-Link.displayName = COMPONENT_NAME$7;
+Link.className = CLASSNAME$8;
+Link.defaultProps = DEFAULT_PROPS$8;
+Link.displayName = COMPONENT_NAME$8;
 
-const _excluded$6 = ["children", "className", "disabled", "isDisabled"];
-const COMPONENT_NAME$6 = 'LinkButton';
-const CLASSNAME$6 = 'redsift-link-button';
-const DEFAULT_PROPS$6 = {};
+const _excluded$9 = ["children", "className", "disabled", "isDisabled"];
+const COMPONENT_NAME$7 = 'LinkButton';
+const CLASSNAME$7 = 'redsift-link-button';
+const DEFAULT_PROPS$7 = {};
 
 /**
  * The LinkButton is a semantic button that looks like a link.
@@ -10279,7 +10477,7 @@ const LinkButton = /*#__PURE__*/forwardRef((props, ref) => {
       disabled,
       isDisabled: propsIsDisabled
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$6);
+    forwardedProps = _objectWithoutProperties(props, _excluded$9);
   const isDisabled = propsIsDisabled || disabled;
   return /*#__PURE__*/React__default.createElement(StyledLink, _extends$1({
     as: "button"
@@ -10293,9 +10491,269 @@ const LinkButton = /*#__PURE__*/forwardRef((props, ref) => {
     ref: buttonRef
   }), children);
 });
-LinkButton.className = CLASSNAME$6;
-LinkButton.defaultProps = DEFAULT_PROPS$6;
-LinkButton.displayName = COMPONENT_NAME$6;
+LinkButton.className = CLASSNAME$7;
+LinkButton.defaultProps = DEFAULT_PROPS$7;
+LinkButton.displayName = COMPONENT_NAME$7;
+
+const _excluded$8 = ["children", "id", "isDisabled", "context"];
+const ActiveDescendantListbox = /*#__PURE__*/forwardRef((props, ref) => {
+  var _context$state$active;
+  const {
+      children,
+      id,
+      isDisabled,
+      context
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$8);
+  const {
+    activedescendant,
+    handleKeyDown: handleFocusKeyDown,
+    handleFocus,
+    handleBlur
+  } = useFocusOnList();
+  const handleKeyDown = useCallback(event => {
+    handleFocusKeyDown(event);
+    const code = event.code;
+    if (code === 'Enter' || code === 'Space') {
+      if (context.state.selectionMode === 'multiple') {
+        var _activedescendant$;
+        context.dispatch({
+          type: ListboxActionType.TOGGLE,
+          payload: {
+            value: (_activedescendant$ = activedescendant === null || activedescendant === void 0 ? void 0 : activedescendant[1]) !== null && _activedescendant$ !== void 0 ? _activedescendant$ : '',
+            activedescendant
+          }
+        });
+      } else {
+        var _activedescendant$2;
+        context.dispatch({
+          type: ListboxActionType.SET,
+          payload: {
+            values: [(_activedescendant$2 = activedescendant === null || activedescendant === void 0 ? void 0 : activedescendant[1]) !== null && _activedescendant$2 !== void 0 ? _activedescendant$2 : ''],
+            activedescendant
+          }
+        });
+      }
+    }
+  }, [activedescendant]);
+  return /*#__PURE__*/React__default.createElement(Flexbox, _extends$1({
+    flexDirection: "column",
+    gap: "8px"
+  }, forwardedProps, {
+    "aria-disabled": isDisabled,
+    ref: ref,
+    id: id,
+    role: "listbox",
+    "aria-activedescendant": (_context$state$active = context.state.activedescendant) === null || _context$state$active === void 0 ? void 0 : _context$state$active[0],
+    "aria-multiselectable": context.state.selectionMode === 'multiple',
+    tabIndex: 0,
+    style: {
+      outline: 'none'
+    },
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onMouseDown: event => event.preventDefault(),
+    onMouseLeave: handleBlur,
+    onKeyDown: handleKeyDown
+  }), /*#__PURE__*/React__default.createElement(ListboxContext.Provider, {
+    value: context
+  }, children));
+});
+
+const _excluded$7 = ["children", "id", "isDisabled", "context"];
+const RovingTabindexListbox = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      id,
+      isDisabled,
+      context
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$7);
+  return /*#__PURE__*/React__default.createElement(Flexbox, _extends$1({
+    flexDirection: "column",
+    gap: "8px"
+  }, forwardedProps, {
+    "aria-disabled": isDisabled,
+    ref: ref,
+    id: id,
+    role: "listbox",
+    "aria-multiselectable": context.state.selectionMode === 'multiple'
+  }), /*#__PURE__*/React__default.createElement(ListboxContext.Provider, {
+    value: context
+  }, children));
+});
+
+/**
+ * Component style.
+ */
+const StyledListbox = styled(Flexbox)`
+  outline: none;
+
+  ${_ref => {
+  let {
+    $variant,
+    $isDisabled,
+    $isInvalid
+  } = _ref;
+  return $variant === ListboxVariant.standalone ? css`
+          span.redsift-listbox-label {
+            font-family: var(--redsift-typography-body-font-family);
+            font-weight: var(--redsift-typography-body-font-weight);
+            font-size: var(--redsift-typography-body-font-size);
+            line-height: var(--redsift-typography-body-line-height);
+
+            color: var(--redsift-color-neutral-black);
+            ${$isDisabled ? `
+          color: var(--redsift-color-neutral-midgrey);
+        ` : ''}
+            ${$isInvalid ? `
+          color: var(--redsift-color-error-primary);
+        ` : ''}
+          }
+
+          .redsift-listbox-list {
+            border: 1px solid var(--redsift-color-neutral-midgrey);
+            padding: 4px;
+            min-width: 200px;
+          }
+        ` : '';
+}}
+`;
+
+const ListboxReducer = (state, action) => {
+  switch (action.type) {
+    case ListboxActionType.TOGGLE:
+      {
+        if (state.isReadOnly || state.isDisabled) {
+          return state;
+        }
+        if (!state.selectedValues.includes(action.payload.value)) {
+          return _objectSpread2(_objectSpread2({}, state), {}, {
+            selectedValues: state.selectedValues.concat(action.payload.value)
+          }, action.payload.activedescendant && {
+            activedescendant: action.payload.activedescendant
+          });
+        }
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          selectedValues: state.selectedValues.filter(existingValue => existingValue !== action.payload.value)
+        }, action.payload.activedescendant && {
+          activedescendant: action.payload.activedescendant
+        });
+      }
+    case ListboxActionType.SET:
+      {
+        if (state.isReadOnly || state.isDisabled) {
+          return state;
+        }
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          selectedValues: action.payload.values
+        }, action.payload.activedescendant && {
+          activedescendant: action.payload.activedescendant
+        });
+      }
+    default:
+      return state;
+  }
+};
+
+const _excluded$6 = ["children", "className", "defaultValues", "direction", "focusOnClick", "focusType", "id", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "loopAround", "onChange", "selectionMode", "values", "variant"];
+const COMPONENT_NAME$6 = 'Listbox';
+const CLASSNAME$6 = 'redsift-listbox';
+const DEFAULT_PROPS$6 = {
+  focusOnClick: false,
+  focusType: 'roving-tabindex',
+  selectionMode: 'single',
+  variant: ListboxVariant.standalone
+};
+
+/**
+ * The Listbox component.
+ * Can be used as controlled or uncontrolled.
+ */
+const Listbox = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      defaultValues,
+      direction,
+      focusOnClick,
+      focusType,
+      id: propsId,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      label,
+      loopAround,
+      onChange,
+      selectionMode,
+      values,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$6);
+  const id = (propsId !== null && propsId !== void 0 ? propsId : useId$1()).replace(/:/g, '');
+  const _ref = useRef();
+  const divRef = ref !== null && ref !== void 0 ? ref : _ref;
+  const [state, dispatch] = useReducer(ListboxReducer, _objectSpread2(_objectSpread2({}, LISTBOX_INITIAL_STATE), {}, {
+    isDisabled,
+    isReadOnly,
+    selectedValues: values || defaultValues || [],
+    selectionMode
+  }));
+  useEffect(() => {
+    if (values && values.length >= 0) {
+      dispatch({
+        type: ListboxActionType.SET,
+        payload: {
+          values
+        }
+      });
+    }
+  }, [values]);
+  const context = useMemo(() => ({
+    state,
+    dispatch
+  }), [state]);
+  useEffect(() => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(state.selectedValues);
+  }, [state.selectedValues]);
+  return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    wrapper: children => /*#__PURE__*/React__default.createElement(StyledListbox, _extends$1({
+      flexDirection: "column",
+      gap: "8px"
+    }, forwardedProps, {
+      $isDisabled: isDisabled,
+      $isInvalid: isInvalid || isRequired && state.selectedValues.length === 0,
+      $isReadOnly: isReadOnly,
+      className: classNames(Listbox.className, className),
+      ref: divRef,
+      id: id,
+      $variant: variant
+    }), children),
+    condition: variant === ListboxVariant.standalone
+  }, /*#__PURE__*/React__default.createElement(FocusWithinGroup, {
+    direction: direction,
+    focusOnClick: focusOnClick,
+    loopAround: loopAround,
+    focusType: focusType
+  }, label ? /*#__PURE__*/React__default.createElement("span", {
+    id: `${id}-label`,
+    className: `${Listbox.className}-label`
+  }, label, isRequired ? /*#__PURE__*/React__default.createElement("span", {
+    "aria-hidden": "true"
+  }, ' *') : null) : null, focusType === 'roving-tabindex' ? /*#__PURE__*/React__default.createElement(RovingTabindexListbox, _extends$1({}, forwardedProps, {
+    className: `${Listbox.className}-list`,
+    context: context,
+    ref: divRef
+  }), children) : /*#__PURE__*/React__default.createElement(ActiveDescendantListbox, _extends$1({}, forwardedProps, {
+    className: `${Listbox.className}-list`,
+    context: context,
+    ref: divRef
+  }), children)));
+});
+Listbox.className = CLASSNAME$6;
+Listbox.defaultProps = DEFAULT_PROPS$6;
+Listbox.displayName = COMPONENT_NAME$6;
 
 /**
  * Component style.
@@ -10503,7 +10961,7 @@ const StyledRadioGroup = styled.div`
   }
 `;
 
-const _excluded$4 = ["children", "className", "defaultValue", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "possibleValues", "value"];
+const _excluded$4 = ["children", "className", "defaultValue", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "value"];
 const COMPONENT_NAME$4 = 'RadioGroup';
 const CLASSNAME$4 = 'redsift-radio-group';
 const DEFAULT_PROPS$4 = {
@@ -10528,7 +10986,6 @@ const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
       label,
       onChange,
       orientation,
-      possibleValues,
       value
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$4);
@@ -10542,7 +10999,6 @@ const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
     value: selectedValue,
     isDisabled: isDisabled || false,
     isReadOnly: isReadOnly || false,
-    possibleValues: possibleValues,
     setValue(value) {
       if (isReadOnly || isDisabled) {
         return;
@@ -11113,12 +11569,12 @@ const StyledSwitchGroup = styled.div`
     $orientation
   } = _ref;
   return $orientation === SwitchGroupOrientation.vertical ? `
-    div.redsift-checkbox-group-boxes {
+    div.redsift-switch-group-switches {
       display: flex;
       flex-direction: column;
     }
   ` : `
-    div.redsift-checkbox-group-boxes {
+    div.redsift-switch-group-switches {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
@@ -11126,7 +11582,7 @@ const StyledSwitchGroup = styled.div`
   `;
 }}
 
-  span.redsift-checkbox-group-label {
+  span.redsift-switch-group-label {
     font-family: var(--redsift-typography-body-font-family);
     font-weight: var(--redsift-typography-body-font-weight);
     font-size: var(--redsift-typography-body-font-size);
@@ -11151,7 +11607,7 @@ const StyledSwitchGroup = styled.div`
 }}
   }
 
-  span.redsift-checkbox-group-description {
+  span.redsift-switch-group-description {
     font-family: var(--redsift-typography-helper-font-family);
     font-weight: var(--redsift-typography-helper-font-weight);
     font-size: var(--redsift-typography-helper-font-size);
@@ -11177,9 +11633,9 @@ const StyledSwitchGroup = styled.div`
   }
 `;
 
-const _excluded$1 = ["children", "className", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "possibleValues", "value"];
+const _excluded$1 = ["children", "className", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "value"];
 const COMPONENT_NAME$1 = 'SwitchGroup';
-const CLASSNAME$1 = 'redsift-checkbox-group';
+const CLASSNAME$1 = 'redsift-switch-group';
 const DEFAULT_PROPS$1 = {
   color: ColorPalette.default,
   orientation: SwitchGroupOrientation.vertical
@@ -11202,7 +11658,6 @@ const SwitchGroup = /*#__PURE__*/forwardRef((props, ref) => {
       label,
       onChange,
       orientation,
-      possibleValues,
       value
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1);
@@ -11216,7 +11671,6 @@ const SwitchGroup = /*#__PURE__*/forwardRef((props, ref) => {
     value: selectedValues,
     isDisabled: isDisabled || false,
     isReadOnly: isReadOnly || false,
-    possibleValues: possibleValues,
     setValue(values) {
       if (isReadOnly || isDisabled) {
         return;
@@ -11252,7 +11706,7 @@ const SwitchGroup = /*#__PURE__*/forwardRef((props, ref) => {
   }), /*#__PURE__*/React__default.createElement("span", {
     className: `${SwitchGroup.className}-label`
   }, label, isRequired ? ' *' : null), /*#__PURE__*/React__default.createElement("div", {
-    className: `${SwitchGroup.className}-boxes`
+    className: `${SwitchGroup.className}-switches`
   }, /*#__PURE__*/React__default.createElement(SwitchGroupContext.Provider, {
     value: state
   }, children)), /*#__PURE__*/React__default.createElement("span", {
@@ -11282,18 +11736,19 @@ const StyledTextField = styled.div`
   height: fit-content;
   position: relative;
   width: fit-content;
+  margin: 0;
+  min-width: 0;
+  padding: 0;
   ${baseStyling}
 
   border: 0;
   display: inline-flex;
   flex-direction: column;
-  margin: 0;
-  min-width: 0;
-  padding: 0;
   vertical-align: top;
 
   ${_ref => {
   let {
+    $hasLeftIcon,
     $hasContent,
     $isFocused,
     $isDisabled,
@@ -11307,36 +11762,27 @@ const StyledTextField = styled.div`
       font-size: var(--redsift-typography-input-text-font-size);
       font-weight: var(--redsift-typography-input-text-font-weight);
       line-height: var(--redsift-typography-input-text-line-height);
-      left: 0;
+      left: ${$hasLeftIcon && !$hasContent ? '32px' : '0'};
       overflow: hidden;
       pointer-events: none;
       position: absolute;
       text-overflow: ellipsis;
       top: -8px;
       transform-origin: top left;
-      transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
-        transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+      transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
         max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
       white-space: nowrap;
       z-index: 1;
 
       ${!$hasContent ? css`
             max-width: calc(100% - 24px);
-            transform: translate(
-                ${$variant === TextFieldVariant.underline ? '0px' : '14px'},
-                16px
-              )
-              scale(1);
+            transform: translate(${$variant === TextFieldVariant.underline ? '0px' : '14px'}, 16px) scale(1);
           ` : css`
             font-family: var(--redsift-typography-body2-font-family);
             font-size: var(--redsift-typography-body2-font-size);
             font-weight: var(--redsift-typography-body2-font-weight);
             max-width: calc(133% - 32px);
-            transform: translate(
-                ${$variant === TextFieldVariant.underline ? '0px' : '14px'},
-                -1px
-              )
-              scale(0.75);
+            transform: translate(${$variant === TextFieldVariant.underline ? '0px' : '14px'}, -1px) scale(0.75);
           `}
 
       ${$isDisabled ? css`
@@ -11344,9 +11790,7 @@ const StyledTextField = styled.div`
           ` : $isInvalid ? css`
             color: var(--redsift-color-error-primary);
           ` : $isFocused ? css`
-            color: var(
-              --redsift-color-${$isColored ? 'default' : 'question'}-primary
-            );
+            color: var(--redsift-color-${$isColored ? 'default' : 'question'}-primary);
           ` : css`
             color: var(--redsift-color-neutral-darkgrey);
           `}
@@ -11420,9 +11864,7 @@ const StyledTextField = styled.div`
           ` : $isInvalid ? css`
             border-color: var(--redsift-color-error-primary);
           ` : $isFocused ? css`
-            border-color: var(
-              --redsift-color-${$isColored ? 'default' : 'question'}-primary
-            );
+            border-color: var(--redsift-color-${$isColored ? 'default' : 'question'}-primary);
           ` : css`
             border-color: var(--redsift-color-neutral-midgrey);
           `}
@@ -11455,11 +11897,30 @@ const StyledTextField = styled.div`
       padding-right: 5px;
       visibility: visible;
     }
+
+    .redsift-icon-button {
+      padding: 2px;
+    }
+
+    ${$variant !== TextFieldVariant.underline ? css`
+          .redsift-icon.left {
+            padding-left: 12px;
+            margin-right: -8px;
+            line-height: 28px;
+          }
+
+          .redsift-text-field-input-wrapper__toolbar {
+            padding-right: 8px;
+          }
+        ` : ''}
   `;
 }}
 `;
 
-const _excluded = ["aria-label", "aria-labelledby", "autoFocus", "className", "defaultValue", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "name", "onChange", "placeholder", "value", "variant"];
+// Material Design Icons v7.2.96
+var mdiClose = "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z";
+
+const _excluded = ["aria-label", "aria-labelledby", "autoFocus", "className", "defaultValue", "hasClearButton", "after", "internal", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "leftIcon", "name", "onBlur", "onChange", "onClear", "onFocus", "placeholder", "value", "variant"];
 const COMPONENT_NAME = 'TextField';
 const CLASSNAME = 'redsift-text-field';
 const DEFAULT_PROPS = {
@@ -11479,6 +11940,9 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       autoFocus,
       className,
       defaultValue,
+      hasClearButton,
+      after,
+      internal,
       inputProps,
       inputRef,
       isColored,
@@ -11487,8 +11951,12 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       isReadOnly,
       isRequired,
       label,
+      leftIcon,
       name,
+      onBlur: onBlurProps,
       onChange,
+      onClear,
+      onFocus: onFocusProps,
       placeholder,
       value: propsValue,
       variant
@@ -11497,7 +11965,10 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     isFocusVisible,
     isFocused,
-    focusProps
+    focusProps: {
+      onFocus,
+      onBlur
+    }
   } = useFocusRing({
     autoFocus
   });
@@ -11521,8 +11992,24 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     }
     setValue(event.target.value);
   }, [onChange]);
+  const handleClear = useCallback(() => {
+    if (isDisabled || isReadOnly) {
+      return;
+    }
+    if (onChange) {
+      onChange('');
+    }
+    if (onClear) {
+      onClear();
+    }
+    if (hasClearButton && hasClearButton !== true && hasClearButton.onClick) {
+      hasClearButton.onClick({});
+    }
+    setValue('');
+  }, [onChange]);
   return /*#__PURE__*/React__default.createElement(StyledTextField, _extends$1({}, focusWithinProps, forwardedProps, {
     $hasContent: isFocusWithin || Boolean(value) || Boolean(placeholder),
+    $hasLeftIcon: Boolean(leftIcon),
     $isColored: isColored,
     $isDisabled: isDisabled,
     $isFocusVisible: isFocusVisible,
@@ -11536,7 +12023,18 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${TextField.className}__label`
   }, /*#__PURE__*/React__default.createElement("span", null, label)) : null, /*#__PURE__*/React__default.createElement("div", {
     className: `${TextField.className}__input-wrapper`
-  }, /*#__PURE__*/React__default.createElement("input", _extends$1({}, inputProps, focusProps, {
+  }, leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends$1({}, leftIcon, {
+    "aria-hidden": "true",
+    className: "left"
+  })) : null, /*#__PURE__*/React__default.createElement("input", _extends$1({}, inputProps, {
+    onBlur: event => {
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+      onBlurProps === null || onBlurProps === void 0 ? void 0 : onBlurProps(event);
+    },
+    onFocus: event => {
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+      onFocusProps === null || onFocusProps === void 0 ? void 0 : onFocusProps(event);
+    },
     "aria-disabled": isDisabled,
     "aria-invalid": isInvalid || isRequired && !value,
     "aria-label": ariaLabel,
@@ -11552,7 +12050,21 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     ref: inputRef,
     type: "text",
     value: value
-  })), label ? /*#__PURE__*/React__default.createElement("fieldset", {
+  })), hasClearButton || internal || after ? /*#__PURE__*/React__default.createElement(Flexbox, {
+    className: `${TextField.className}-input-wrapper__toolbar`,
+    gap: "8px"
+  }, hasClearButton ? /*#__PURE__*/React__default.createElement(IconButton, _extends$1({
+    "aria-label": "Clear",
+    color: "question",
+    icon: mdiClose
+  }, hasClearButton !== true && hasClearButton, {
+    onClick: handleClear,
+    className: "right clear"
+  })) : null, typeof internal === 'function' ? internal(value, isDisabled, isInvalid || isRequired && !value, isRequired) : internal, (hasClearButton || internal) && after ? /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      borderLeft: '1px solid var(--redsift-color-neutral-midgrey)'
+    }
+  }) : null, typeof after === 'function' ? after(value, isDisabled, isInvalid || isRequired && !value, isRequired) : after) : null, label ? /*#__PURE__*/React__default.createElement("fieldset", {
     "aria-hidden": "true",
     className: `${TextField.className}-input-wrapper__fieldset`
   }, /*#__PURE__*/React__default.createElement("legend", {
@@ -11563,5 +12075,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, 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 };
+export { ActiveDescendantListbox, 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, EventKey, FOCUS_WITHING_GROUP_INITIAL_STATE, FlexDirection, FlexWrap, Flexbox, FocusWithinGroup, FocusWithinGroupActionType, FocusWithinGroupContext, FocusWithinGroupReducer, FontFamily, Grid, GridItem, Heading, HeadingComponent, HeadingVariant, Icon, IconButton, IconButtonVariant, IconSize, Item, JustifyContent, JustifyItems, JustifySelf, LISTBOX_INITIAL_STATE, Link, LinkButton, Listbox, ListboxActionType, ListboxContext, ListboxReducer, ListboxVariant, Navigation, 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, RovingTabindexListbox, 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, uniqueId, useAppSidePanel, useBoundingClientRect, useFocusOnList, useFocusOnListItem, useSideNavigationMenuBar, useWindowSize, warnIfNoAccessibleLabelFound };
 //# sourceMappingURL=index.js.map