@redsift/design-system 7.7.0-alpha.3 → 7.8.0

package/index.js

@@ -1,13 +1,10 @@
-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 { I18nProvider, useLocalizedStringFormatter, useButton, useFocusRing, useNumberFormatter, useFocusWithin } from 'react-aria';
+export { I18nProvider, SSRProvider } from 'react-aria';
 import * as React from 'react';
-import React__default, { useState, useEffect, forwardRef, useMemo, useContext, useRef, useCallback, useReducer, useLayoutEffect, useId as useId$1 } from 'react';
+import React__default, { useState, useEffect, useContext, useLayoutEffect, useMemo, useRef, useCallback, forwardRef, useReducer, useId as useId$1 } from 'react';
 import classNames from 'classnames';
 import { mdiClose, mdiAlert, mdiCheckCircle, mdiAlertCircle, mdiInformation, mdiMenu, mdiMenuOpen, mdiChevronDown, mdiChevronRight, mdiChevronUp, mdiCheckboxMarked, mdiMinusBox, mdiCheckboxBlankOutline, mdiPageLast, mdiKeyboardCaps, mdiRadioboxMarked, mdiRadioboxBlank } from '@redsift/icons';
 import styled, { css, keyframes } from 'styled-components';
-import { useButton } from '@react-aria/button';
-import { useFocusRing } from '@react-aria/focus';
 import * as ReactDOM from 'react-dom';
 import { createPortal } from 'react-dom';
 
@@ -205,7 +202,7 @@ function partitionComponents(components, predicates) {
 
 /**
  * Do not edit directly
- * Generated on Tue, 14 Mar 2023 15:14:37 GMT
+ * Generated on Fri, 28 Apr 2023 13:20:47 GMT
  */
 
 const RedsiftColorDefaultPrimary = '#0079e1';
@@ -519,6 +516,821 @@ const useWindowSize = () => {
   return windowSize;
 };
 
+/**
+ * Get the bounding rect of a component.
+ */
+const useBoundingClientRect = (ref, deps) => {
+  const [boundingRect, setBoundingRect] = useState({});
+  useEffect(() => {
+    if (ref.current) {
+      setBoundingRect(ref.current.getBoundingClientRect());
+    }
+  }, 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
+};
+const $704cf1d3b684cc5c$var$SSRContext = /*#__PURE__*/ (React__default).createContext($704cf1d3b684cc5c$var$defaultContext);
+function $704cf1d3b684cc5c$export$535bd6ca7f90a273() {
+    let cur = (useContext)($704cf1d3b684cc5c$var$SSRContext);
+    let isInSSRContext = cur !== $704cf1d3b684cc5c$var$defaultContext;
+    let [isSSR, setIsSSR] = (useState)(isInSSRContext);
+    // If on the client, and the component was initially server rendered,
+    // then schedule a layout effect to update the component after hydration.
+    if (typeof window !== "undefined" && isInSSRContext) // This if statement technically breaks the rules of hooks, but is safe
+    // because the condition never changes after mounting.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (useLayoutEffect)(()=>{
+        setIsSSR(false);
+    }, []);
+    return 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.
  */
@@ -974,10 +1786,10 @@ const StyledIcon = styled.span`
 }}
 `;
 
-const _excluded$I = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps"];
-const COMPONENT_NAME$K = 'Icon';
-const CLASSNAME$K = 'redsift-icon';
-const DEFAULT_PROPS$K = {
+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 = {
   size: IconSize.medium
 };
 
@@ -995,7 +1807,7 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
       size,
       svgProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$I);
+    forwardedProps = _objectWithoutProperties(props, _excluded$J);
   return /*#__PURE__*/React__default.createElement(StyledIcon, _extends$1({}, forwardedProps, {
     $color: color,
     $size: size,
@@ -1017,9 +1829,9 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
     fill: "currentColor"
   })), badge ? badge : null);
 });
-Icon.className = CLASSNAME$K;
-Icon.defaultProps = DEFAULT_PROPS$K;
-Icon.displayName = COMPONENT_NAME$K;
+Icon.className = CLASSNAME$L;
+Icon.defaultProps = DEFAULT_PROPS$L;
+Icon.displayName = COMPONENT_NAME$L;
 
 /**
  * Component variant.
@@ -1217,10 +2029,10 @@ const StyledAppContainer = styled.div`
 }}
 `;
 
-const _excluded$H = ["children", "className", "locale", "productTheme"];
-const COMPONENT_NAME$J = 'AppContainer';
-const CLASSNAME$J = 'redsift-app-container';
-const DEFAULT_PROPS$J = {};
+const _excluded$I = ["children", "className", "locale", "productTheme"];
+const COMPONENT_NAME$K = 'AppContainer';
+const CLASSNAME$K = 'redsift-app-container';
+const DEFAULT_PROPS$K = {};
 
 /**
  * The AppContainer component.
@@ -1232,7 +2044,7 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
       locale,
       productTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$H);
+    forwardedProps = _objectWithoutProperties(props, _excluded$I);
   const {
     hasAppBar,
     hasAppSidePanel,
@@ -1277,9 +2089,9 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
     locale: locale
   }, children)));
 });
-AppContainer.className = CLASSNAME$J;
-AppContainer.defaultProps = DEFAULT_PROPS$J;
-AppContainer.displayName = COMPONENT_NAME$J;
+AppContainer.className = CLASSNAME$K;
+AppContainer.defaultProps = DEFAULT_PROPS$K;
+AppContainer.displayName = COMPONENT_NAME$K;
 
 var spinnerDefault = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPgogIDxzdHlsZT4KICAgIC5zcGlubmluZyB7CiAgICAgIGFuaW1hdGlvbjogc3Bpbm5pbmcta2V5ZnJhbWVzIDMwMDBtcyBsaW5lYXIgaW5maW5pdGUgbm9ybWFsIGZvcndhcmRzOwogICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGN1YmljLWJlemllcigwLjQyLCAwLCAwLjU4LCAxKTsKICAgIH0KICAgIEBrZXlmcmFtZXMgc3Bpbm5pbmcta2V5ZnJhbWVzIHsKICAgICAgMCUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgwZGVnKTsKICAgICAgfQoKICAgICAgMzMlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMTgwZGVnKTsKICAgICAgfQoKICAgICAgNTAlIHsKICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpOwogICAgICB9CgogICAgICA4MyUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgzNjBkZWcpOwogICAgICB9CgogICAgICAxMDAlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMzYwZGVnKQogICAgICB9CiAgICB9CiAgPC9zdHlsZT4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MpIgogICAgZmlsbD0iIzAwNzllMSIKICAgIGQ9Ik0zMTggMTg2LjlWMTA4LjhMMjAwIDU3IDgyIDEwOC44djc4LjFDODIgMjU5IDEzMi4zIDMyNi40IDIwMCAzNDNjNjcuNy0xNi42IDExOC04NCAxMTgtMTU2LjF6TTQwMCAyMDBjMCAxMTAuNS04OS41IDIwMC0yMDAgMjAwUzAgMzEwLjUgMCAyMDAgODkuNSAwIDIwMCAwczIwMCA4OS41IDIwMCAyMDB6IgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrcyI+CiAgICA8cGF0aAogICAgICBjbGFzcz0ic3Bpbm5pbmciCiAgICAgIGQ9Ik0wLDIwMEMwLDg5LjU0MzA1LDg5LjU0MzA1LDAsMjAwLDB2NDAwQzg5LjU0MzA1LDQwMCwwLDMxMC40NTY5NSwwLDIwMFoiCiAgICAgIGZpbGw9IiNmZmYiCiAgICAvPgogIDwvbWFzaz4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MyKSIKICAgIGZpbGw9IiMwMDc5ZTEiCiAgICBkPSJNODIsMTg2LjkzOXYtNzguMDg5TDIwMCw1N2wxMTgsNTEuODV2NzguMDg5QzMxOCwyNTkuMDAyLDI2Ny42ODYsMzI2LjQwMiwyMDAsMzQzQzEzMi4zMTQsMzI2LjQwMiw4MiwyNTkuMDAyLDgyLDE4Ni45MzlaIgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrczIiPgogICAgPHBhdGgKICAgICAgY2xhc3M9InNwaW5uaW5nIgogICAgICBkPSJNNDAwIDIwMEM0MDAgMzEwLjUgMzEwLjUgNDAwIDIwMCA0MDBWMGMxMTAuNSAwIDIwMCA4OS41IDIwMCAyMDB6IgogICAgICBmaWxsPSIjZmZmIgogICAgLz4KICA8L21hc2s+Cjwvc3ZnPg==';
 
@@ -1299,7 +2111,7 @@ var spinnerTools = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My
 
 var spinnerWebsite = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPgogIDxzdHlsZT4KICAgIC5zcGlubmluZyB7CiAgICAgIGFuaW1hdGlvbjogc3Bpbm5pbmcta2V5ZnJhbWVzIDMwMDBtcyBsaW5lYXIgaW5maW5pdGUgbm9ybWFsIGZvcndhcmRzOwogICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGN1YmljLWJlemllcigwLjQyLCAwLCAwLjU4LCAxKTsKICAgIH0KICAgIEBrZXlmcmFtZXMgc3Bpbm5pbmcta2V5ZnJhbWVzIHsKICAgICAgMCUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgwZGVnKTsKICAgICAgfQoKICAgICAgMzMlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMTgwZGVnKTsKICAgICAgfQoKICAgICAgNTAlIHsKICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpOwogICAgICB9CgogICAgICA4MyUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgzNjBkZWcpOwogICAgICB9CgogICAgICAxMDAlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMzYwZGVnKQogICAgICB9CiAgICB9CiAgPC9zdHlsZT4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MpIgogICAgZmlsbD0iIzAwNzllMSIKICAgIGQ9Ik0zMTggMTg2LjlWMTA4LjhMMjAwIDU3IDgyIDEwOC44djc4LjFDODIgMjU5IDEzMi4zIDMyNi40IDIwMCAzNDNjNjcuNy0xNi42IDExOC04NCAxMTgtMTU2LjF6TTQwMCAyMDBjMCAxMTAuNS04OS41IDIwMC0yMDAgMjAwUzAgMzEwLjUgMCAyMDAgODkuNSAwIDIwMCAwczIwMCA4OS41IDIwMCAyMDB6IgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrcyI+CiAgICA8cGF0aAogICAgICBjbGFzcz0ic3Bpbm5pbmciCiAgICAgIGQ9Ik0wLDIwMEMwLDg5LjU0MzA1LDg5LjU0MzA1LDAsMjAwLDB2NDAwQzg5LjU0MzA1LDQwMCwwLDMxMC40NTY5NSwwLDIwMFoiCiAgICAgIGZpbGw9IiNmZmYiCiAgICAvPgogIDwvbWFzaz4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MyKSIKICAgIGZpbGw9IiMwMDc5ZTEiCiAgICBkPSJNODIsMTg2LjkzOXYtNzguMDg5TDIwMCw1N2wxMTgsNTEuODV2NzguMDg5QzMxOCwyNTkuMDAyLDI2Ny42ODYsMzI2LjQwMiwyMDAsMzQzQzEzMi4zMTQsMzI2LjQwMiw4MiwyNTkuMDAyLDgyLDE4Ni45MzlaIgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrczIiPgogICAgPHBhdGgKICAgICAgY2xhc3M9InNwaW5uaW5nIgogICAgICBkPSJNNDAwIDIwMEM0MDAgMzEwLjUgMzEwLjUgNDAwIDIwMCA0MDBWMGMxMTAuNSAwIDIwMCA4OS41IDIwMCAyMDB6IgogICAgICBmaWxsPSIjZmZmIgogICAgLz4KICA8L21hc2s+Cjwvc3ZnPg==';
 
-const _excluded$G = ["aria-hidden", "aria-label", "className", "color", "size"];
+const _excluded$H = ["aria-hidden", "aria-label", "className", "color", "size"];
 const colorToFile = {
   default: spinnerDefault,
   hardenize: spinnerHardenize,
@@ -1311,9 +2123,9 @@ const colorToFile = {
   tools: spinnerTools,
   website: spinnerWebsite
 };
-const COMPONENT_NAME$I = 'Spinner';
-const CLASSNAME$I = 'redsift-shield';
-const DEFAULT_PROPS$I = {
+const COMPONENT_NAME$J = 'Spinner';
+const CLASSNAME$J = 'redsift-shield';
+const DEFAULT_PROPS$J = {
   color: ColorPalette.default,
   size: SpinnerSize.medium
 };
@@ -1354,7 +2166,7 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
       color: propsColor,
       size
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$G);
+    forwardedProps = _objectWithoutProperties(props, _excluded$H);
   const {
     width,
     height
@@ -1376,14 +2188,14 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
     $size: size
   }));
 });
-Spinner.className = CLASSNAME$I;
-Spinner.defaultProps = DEFAULT_PROPS$I;
-Spinner.displayName = COMPONENT_NAME$I;
+Spinner.className = CLASSNAME$J;
+Spinner.defaultProps = DEFAULT_PROPS$J;
+Spinner.displayName = COMPONENT_NAME$J;
 
-const _excluded$F = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isLoading", "leftIcon", "onPress", "rightIcon", "variant"];
-const COMPONENT_NAME$H = 'Button';
-const CLASSNAME$H = 'redsift-button';
-const DEFAULT_PROPS$H = {
+const _excluded$G = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isLoading", "leftIcon", "onPress", "rightIcon", "variant"];
+const COMPONENT_NAME$I = 'Button';
+const CLASSNAME$I = 'redsift-button';
+const DEFAULT_PROPS$I = {
   color: ColorPalette.default,
   height: 'fit-content',
   variant: ButtonVariant.primary
@@ -1420,7 +2232,7 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
       rightIcon,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$F);
+    forwardedProps = _objectWithoutProperties(props, _excluded$G);
   return /*#__PURE__*/React__default.createElement(StyledButton, _extends$1({}, forwardedProps, buttonProps, {
     $color: color,
     $fullWidth: fullWidth,
@@ -1444,9 +2256,9 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     className: "right"
   }) : null);
 });
-Button.className = CLASSNAME$H;
-Button.defaultProps = DEFAULT_PROPS$H;
-Button.displayName = COMPONENT_NAME$H;
+Button.className = CLASSNAME$I;
+Button.defaultProps = DEFAULT_PROPS$I;
+Button.displayName = COMPONENT_NAME$I;
 
 /**
  * Component style.
@@ -1462,10 +2274,10 @@ const StyledIconButton = styled(StyledButton)`
 }};
 `;
 
-const _excluded$E = ["className", "color", "disabled", "icon", "isActive", "isDisabled", "onPress", "variant"];
-const COMPONENT_NAME$G = 'IconButton';
-const CLASSNAME$G = 'redsift-icon-button';
-const DEFAULT_PROPS$G = {
+const _excluded$F = ["className", "color", "disabled", "icon", "isActive", "isDisabled", "onPress", "variant"];
+const COMPONENT_NAME$H = 'IconButton';
+const CLASSNAME$H = 'redsift-icon-button';
+const DEFAULT_PROPS$H = {
   color: ColorPalette.default,
   height: 'fit-content',
   variant: IconButtonVariant.unstyled
@@ -1497,7 +2309,7 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
       onPress,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$E);
+    forwardedProps = _objectWithoutProperties(props, _excluded$F);
   warnIfNoAccessibleLabelFound(props);
   return /*#__PURE__*/React__default.createElement(StyledIconButton, _extends$1({}, forwardedProps, buttonProps, {
     $color: isDisabled || disabled ? undefined : color,
@@ -1513,9 +2325,9 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
     color: isDisabled || disabled ? undefined : color
   }));
 });
-IconButton.className = CLASSNAME$G;
-IconButton.defaultProps = DEFAULT_PROPS$G;
-IconButton.displayName = COMPONENT_NAME$G;
+IconButton.className = CLASSNAME$H;
+IconButton.defaultProps = DEFAULT_PROPS$H;
+IconButton.displayName = COMPONENT_NAME$H;
 
 /**
  * Component style.
@@ -1655,10 +2467,10 @@ const StyledHeading = styled.span`
 }}
 `;
 
-const _excluded$D = ["as", "children", "className", "noWrap", "variant"];
-const COMPONENT_NAME$F = 'Heading';
-const CLASSNAME$F = 'redsift-heading';
-const DEFAULT_PROPS$F = {};
+const _excluded$E = ["as", "children", "className", "noWrap", "variant"];
+const COMPONENT_NAME$G = 'Heading';
+const CLASSNAME$G = 'redsift-heading';
+const DEFAULT_PROPS$G = {};
 
 /**
  * The Heading component.
@@ -1671,7 +2483,7 @@ const Heading = /*#__PURE__*/forwardRef((props, ref) => {
       noWrap,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$D);
+    forwardedProps = _objectWithoutProperties(props, _excluded$E);
   return /*#__PURE__*/React__default.createElement(StyledHeading, _extends$1({
     as: as
   }, forwardedProps, {
@@ -1681,9 +2493,9 @@ const Heading = /*#__PURE__*/forwardRef((props, ref) => {
     $variant: variant ? variant : as === 'span' ? 'body' : as
   }), children);
 });
-Heading.className = CLASSNAME$F;
-Heading.defaultProps = DEFAULT_PROPS$F;
-Heading.displayName = COMPONENT_NAME$F;
+Heading.className = CLASSNAME$G;
+Heading.defaultProps = DEFAULT_PROPS$G;
+Heading.displayName = COMPONENT_NAME$G;
 
 /**
  * Component style.
@@ -1701,10 +2513,10 @@ const StyledFlexbox = styled.div`
   ${baseFlexbox}
 `;
 
-const _excluded$C = ["children", "className"];
-const COMPONENT_NAME$E = 'Flexbox';
-const CLASSNAME$E = 'redsift-flex-box';
-const DEFAULT_PROPS$E = {
+const _excluded$D = ["children", "className"];
+const COMPONENT_NAME$F = 'Flexbox';
+const CLASSNAME$F = 'redsift-flex-box';
+const DEFAULT_PROPS$F = {
   gap: '16px'
 };
 
@@ -1716,20 +2528,20 @@ const Flexbox = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$C);
+    forwardedProps = _objectWithoutProperties(props, _excluded$D);
   return /*#__PURE__*/React__default.createElement(StyledFlexbox, _extends$1({}, forwardedProps, {
     className: classNames(Flexbox.className, className),
     ref: ref
   }), children);
 });
-Flexbox.className = CLASSNAME$E;
-Flexbox.defaultProps = DEFAULT_PROPS$E;
-Flexbox.displayName = COMPONENT_NAME$E;
-
-const _excluded$B = ["children", "className", "isClosable", "isClosed", "onClose", "title", "variant"];
-const COMPONENT_NAME$D = 'Alert';
-const CLASSNAME$D = 'redsift-alert';
-const DEFAULT_PROPS$D = {
+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 = {
   variant: 'info'
 };
 const getVariant$1 = variant => {
@@ -1771,7 +2583,7 @@ const Alert = /*#__PURE__*/forwardRef((props, ref) => {
       title,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$B);
+    forwardedProps = _objectWithoutProperties(props, _excluded$C);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$5);
   const {
     color,
@@ -1817,9 +2629,9 @@ const Alert = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${Alert.className}__content`
   }, children) : null);
 });
-Alert.className = CLASSNAME$D;
-Alert.defaultProps = DEFAULT_PROPS$D;
-Alert.displayName = COMPONENT_NAME$D;
+Alert.className = CLASSNAME$E;
+Alert.defaultProps = DEFAULT_PROPS$E;
+Alert.displayName = COMPONENT_NAME$E;
 
 var expand$5 = "Expand left side panel";
 var collapse$5 = "Collapse left side panel";
@@ -1916,10 +2728,10 @@ const StyledAppBar = styled.header`
   }
 `;
 
-const _excluded$A = ["children", "className", "collapseIconButtonProps", "collapseIconButtonRef", "expandIconButtonProps", "expandIconButtonRef", "fallbackTitle", "title"];
-const COMPONENT_NAME$C = 'AppBar';
-const CLASSNAME$C = 'redsift-app-bar';
-const DEFAULT_PROPS$C = {};
+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 = {};
 
 /**
  * The AppBar component.
@@ -1935,7 +2747,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
       fallbackTitle,
       title: propsTitle
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$A);
+    forwardedProps = _objectWithoutProperties(props, _excluded$B);
   const {
     isLoaded
   } = useIsLoaded();
@@ -1974,9 +2786,9 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${AppBar.className}__right`
   }, children));
 });
-AppBar.className = CLASSNAME$C;
-AppBar.defaultProps = DEFAULT_PROPS$C;
-AppBar.displayName = COMPONENT_NAME$C;
+AppBar.className = CLASSNAME$D;
+AppBar.defaultProps = DEFAULT_PROPS$D;
+AppBar.displayName = COMPONENT_NAME$D;
 
 /**
  * Component style.
@@ -2042,10 +2854,10 @@ const StyledAppContent = styled.main`
 }}
 `;
 
-const _excluded$z = ["children", "className", "productTheme"];
-const COMPONENT_NAME$B = 'AppContent';
-const CLASSNAME$B = 'redsift-app-content';
-const DEFAULT_PROPS$B = {};
+const _excluded$A = ["children", "className", "productTheme"];
+const COMPONENT_NAME$C = 'AppContent';
+const CLASSNAME$C = 'redsift-app-content';
+const DEFAULT_PROPS$C = {};
 
 /**
  * The AppContent component.
@@ -2056,7 +2868,7 @@ const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       productTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$z);
+    forwardedProps = _objectWithoutProperties(props, _excluded$A);
   const {
     isLoaded
   } = useIsLoaded();
@@ -2069,9 +2881,9 @@ const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-AppContent.className = CLASSNAME$B;
-AppContent.defaultProps = DEFAULT_PROPS$B;
-AppContent.displayName = COMPONENT_NAME$B;
+AppContent.className = CLASSNAME$C;
+AppContent.defaultProps = DEFAULT_PROPS$C;
+AppContent.displayName = COMPONENT_NAME$C;
 
 /**
  * Component style.
@@ -2165,10 +2977,10 @@ const StyledAppSidePanel = styled.div`
   }
 `;
 
-const _excluded$y = ["children", "className", "featuredElements", "isCollapsed", "logo"];
-const COMPONENT_NAME$A = 'AppSidePanel';
-const CLASSNAME$A = 'redsift-app-side-panel';
-const DEFAULT_PROPS$A = {};
+const _excluded$z = ["children", "className", "featuredElements", "isCollapsed", "logo"];
+const COMPONENT_NAME$B = 'AppSidePanel';
+const CLASSNAME$B = 'redsift-app-side-panel';
+const DEFAULT_PROPS$B = {};
 
 /**
  * The AppSidePanel component.
@@ -2181,7 +2993,7 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
       isCollapsed = false,
       logo
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$y);
+    forwardedProps = _objectWithoutProperties(props, _excluded$z);
   const appContainerState = useContext(AppContainerContext);
   return /*#__PURE__*/React__default.createElement(StyledAppSidePanel, _extends$1({}, forwardedProps, {
     $isCollapsed: !!(isCollapsed || appContainerState !== null && appContainerState !== void 0 && appContainerState.isSidePanelCollapsed),
@@ -2196,9 +3008,9 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${AppSidePanel.className}__featured`
   }, featuredElements) : null, children);
 });
-AppSidePanel.className = CLASSNAME$A;
-AppSidePanel.defaultProps = DEFAULT_PROPS$A;
-AppSidePanel.displayName = COMPONENT_NAME$A;
+AppSidePanel.className = CLASSNAME$B;
+AppSidePanel.defaultProps = DEFAULT_PROPS$B;
+AppSidePanel.displayName = COMPONENT_NAME$B;
 
 /**
  * Context props.
@@ -2231,9 +3043,15 @@ const StyledSideNavigationMenuItem = styled.a`
     $isDisabled
   } = _ref;
   return !$isDisabled ? css`
-          color: var(--redsift-side-navigation-color-menu-item-text-resting);
+          &,
+          .redsift-icon.first {
+            color: var(--redsift-side-navigation-color-menu-item-text-resting);
+          }
         ` : css`
-          color: var(--redsift-side-navigation-color-menu-item-text-disabled);
+          &,
+          .redsift-icon.first {
+            color: var(--redsift-side-navigation-color-menu-item-text-disabled);
+          }
         `;
 }}
   align-items: center;
@@ -2256,7 +3074,10 @@ const StyledSideNavigationMenuItem = styled.a`
             background-color: var(
               --redsift-side-navigation-color-menu-item-background-hover
             );
-            color: var(--redsift-side-navigation-color-menu-item-text-hover);
+            &,
+            .redsift-icon.first {
+              color: var(--redsift-side-navigation-color-menu-item-text-hover);
+            }
           ` : '';
 }}
   }
@@ -2268,8 +3089,8 @@ const StyledSideNavigationMenuItem = styled.a`
   } = _ref3;
   return !$isSecondLevel ? css`
           /**
-     * First-level items
-     */
+           * First-level items
+           */
 
           background-color: var(--redsift-side-navigation-color-background);
           padding: 8px 16px;
@@ -2413,10 +3234,10 @@ const StyledBadge = styled.div`
 }}
 `;
 
-const _excluded$x = ["autoBreak", "children", "className", "color", "isReversed", "variant"];
-const COMPONENT_NAME$z = 'Badge';
-const CLASSNAME$z = 'redsift-badge';
-const DEFAULT_PROPS$z = {
+const _excluded$y = ["autoBreak", "children", "className", "color", "isReversed", "variant"];
+const COMPONENT_NAME$A = 'Badge';
+const CLASSNAME$A = 'redsift-badge';
+const DEFAULT_PROPS$A = {
   color: ColorPalette.question,
   variant: BadgeVariant.dot
 };
@@ -2433,7 +3254,7 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
       isReversed,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$x);
+    forwardedProps = _objectWithoutProperties(props, _excluded$y);
   return /*#__PURE__*/React__default.createElement(StyledBadge, _extends$1({}, forwardedProps, {
     $autoBreak: autoBreak,
     $color: color,
@@ -2443,14 +3264,14 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), variant === BadgeVariant.standard ? children : null);
 });
-Badge.className = CLASSNAME$z;
-Badge.defaultProps = DEFAULT_PROPS$z;
-Badge.displayName = COMPONENT_NAME$z;
+Badge.className = CLASSNAME$A;
+Badge.defaultProps = DEFAULT_PROPS$A;
+Badge.displayName = COMPONENT_NAME$A;
 
-const _excluded$w = ["badge", "badgeProps", "children", "className", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "tabIndex", "withoutIcons"];
-const COMPONENT_NAME$y = 'SideNavigationMenuItem';
-const CLASSNAME$y = 'redsift-side-navigation-menu-item';
-const DEFAULT_PROPS$y = {};
+const _excluded$x = ["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 = {};
 
 /**
  * The SideNavigationMenuItem component.
@@ -2474,7 +3295,7 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
       tabIndex,
       withoutIcons
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$w);
+    forwardedProps = _objectWithoutProperties(props, _excluded$x);
   warnIfNoAccessibleLabelFound(props, [children]);
   const appContainerState = useContext(AppContainerContext);
   useEffect(() => {
@@ -2536,9 +3357,9 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
     color: "error"
   }, badgeProps), badge) : null);
 });
-SideNavigationMenuItem.className = CLASSNAME$y;
-SideNavigationMenuItem.defaultProps = DEFAULT_PROPS$y;
-SideNavigationMenuItem.displayName = COMPONENT_NAME$y;
+SideNavigationMenuItem.className = CLASSNAME$z;
+SideNavigationMenuItem.defaultProps = DEFAULT_PROPS$z;
+SideNavigationMenuItem.displayName = COMPONENT_NAME$z;
 
 /**
  * Component style.
@@ -2552,9 +3373,19 @@ const StyledSideNavigationMenu = styled.div`
     $isDisabled
   } = _ref;
   return !$isDisabled ? css`
-            color: var(--redsift-side-navigation-color-menu-item-text-resting);
+            &,
+            .redsift-icon.first {
+              color: var(
+                --redsift-side-navigation-color-menu-item-text-resting
+              );
+            }
           ` : css`
-            color: var(--redsift-side-navigation-color-menu-item-text-disabled);
+            &,
+            .redsift-icon.first {
+              color: var(
+                --redsift-side-navigation-color-menu-item-text-disabled
+              );
+            }
           `;
 }}
     align-items: center;
@@ -2607,12 +3438,12 @@ const StyledSideNavigationMenu = styled.div`
             background-color: var(
               --redsift-side-navigation-color-menu-item-background-hover
             );
-            color: var(--redsift-side-navigation-color-menu-item-text-hover);
-            cursor: pointer;
-
+            &,
+            .redsift-icon.first,
             .redsift-side-navigation-menu__expand-icon {
               color: var(--redsift-side-navigation-color-menu-item-text-hover);
             }
+            cursor: pointer;
           ` : '';
 }}
   }
@@ -2623,9 +3454,19 @@ const StyledSideNavigationMenu = styled.div`
     $isDisabled
   } = _ref3;
   return !$isDisabled ? css`
-            color: var(--redsift-side-navigation-color-menu-item-text-resting);
+            &,
+            .redsift-icon.first {
+              color: var(
+                --redsift-side-navigation-color-menu-item-text-resting
+              );
+            }
           ` : css`
-            color: var(--redsift-side-navigation-color-menu-item-text-disabled);
+            &,
+            .redsift-icon.first {
+              color: var(
+                --redsift-side-navigation-color-menu-item-text-disabled
+              );
+            }
           `;
 }}
     margin-left: auto;
@@ -2677,10 +3518,10 @@ const SideNavigationMenuReducer = (state, action) => {
   }
 };
 
-const _excluded$v = ["aria-label", "buttonProps", "buttonRef", "children", "className", "hasBadge", "icon", "iconProps", "iconRef", "isDisabled", "isExpanded", "menuProps", "menuRef", "tabIndex", "withoutIcons"];
-const COMPONENT_NAME$x = 'SideNavigationMenu';
-const CLASSNAME$x = 'redsift-side-navigation-menu';
-const DEFAULT_PROPS$x = {};
+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 = {};
 
 /**
  * The SideNavigationMenu component.
@@ -2703,7 +3544,7 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
       tabIndex,
       withoutIcons
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$v);
+    forwardedProps = _objectWithoutProperties(props, _excluded$w);
   warnIfNoAccessibleLabelFound(props);
   const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);
   const [isFirstChild, setIsFirstChild] = useState(false);
@@ -2972,9 +3813,9 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
     role: "menu"
   }, menuItemListEventHandler), renderedMenuItems)));
 });
-SideNavigationMenu.className = CLASSNAME$x;
-SideNavigationMenu.defaultProps = DEFAULT_PROPS$x;
-SideNavigationMenu.displayName = COMPONENT_NAME$x;
+SideNavigationMenu.className = CLASSNAME$y;
+SideNavigationMenu.defaultProps = DEFAULT_PROPS$y;
+SideNavigationMenu.displayName = COMPONENT_NAME$y;
 
 /**
  * Component style.
@@ -3032,23 +3873,10 @@ const StyledSideNavigationMenuBar = styled.nav`
   }
 `;
 
-/**
- * Get the bounding rect of a component.
- */
-const useBoundingClientRect = (ref, deps) => {
-  const [boundingRect, setBoundingRect] = useState({});
-  useEffect(() => {
-    if (ref.current) {
-      setBoundingRect(ref.current.getBoundingClientRect());
-    }
-  }, deps);
-  return boundingRect;
-};
-
-const _excluded$u = ["aria-label", "aria-labelledby", "children", "className", "isDisabled", "menubarProps", "menubarRef", "withoutIcons"];
-const COMPONENT_NAME$w = 'SideNavigationMenuBar';
-const CLASSNAME$w = 'redsift-side-navigation-menu-bar';
-const DEFAULT_PROPS$w = {};
+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 = {};
 
 /**
  * Hook to store the previous index for further use
@@ -3076,7 +3904,7 @@ const SideNavigationMenuBar = /*#__PURE__*/forwardRef((props, ref) => {
       menubarRef = useRef(),
       withoutIcons
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$u);
+    forwardedProps = _objectWithoutProperties(props, _excluded$v);
   warnIfNoAccessibleLabelFound(props);
   const {
     top
@@ -3218,11 +4046,11 @@ const SideNavigationMenuBar = /*#__PURE__*/forwardRef((props, ref) => {
     role: "menubar"
   }), navItems)));
 });
-SideNavigationMenuBar.className = CLASSNAME$w;
-SideNavigationMenuBar.defaultProps = DEFAULT_PROPS$w;
-SideNavigationMenuBar.displayName = COMPONENT_NAME$w;
+SideNavigationMenuBar.className = CLASSNAME$x;
+SideNavigationMenuBar.defaultProps = DEFAULT_PROPS$x;
+SideNavigationMenuBar.displayName = COMPONENT_NAME$x;
 
-const _excluded$t = ["title", "href", "ref"],
+const _excluded$u = ["title", "href", "ref"],
   _excluded2 = ["title", "children", "ref"],
   _excluded3 = ["title", "href", "ref"];
 const isMenu = item => {
@@ -3241,7 +4069,7 @@ const useSideNavigationMenuBar = _ref => {
           href,
           ref
         } = item,
-        rest = _objectWithoutProperties(item, _excluded$t);
+        rest = _objectWithoutProperties(item, _excluded$u);
       menuBarChildren.push( /*#__PURE__*/React__default.createElement(SideNavigationMenuItem, _extends$1({
         key: title,
         isCurrent: isActive ? isActive(href) : undefined
@@ -3344,10 +4172,10 @@ const StyledBreadcrumbItem = styled.a`
   }
 `;
 
-const _excluded$s = ["children", "className", "href", "isCurrent", "isDisabled"];
-const COMPONENT_NAME$v = 'BreadcrumbItem';
-const CLASSNAME$v = 'redsift-breadcrumb-item';
-const DEFAULT_PROPS$v = {};
+const _excluded$t = ["children", "className", "href", "isCurrent", "isDisabled"];
+const COMPONENT_NAME$w = 'BreadcrumbItem';
+const CLASSNAME$w = 'redsift-breadcrumb-item';
+const DEFAULT_PROPS$w = {};
 
 /**
  * The BreadcrumbItem components is a list of links to the parent pages of the current page in hierarchical order.
@@ -3360,7 +4188,7 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
       isCurrent,
       isDisabled
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$s);
+    forwardedProps = _objectWithoutProperties(props, _excluded$t);
   warnIfNoAccessibleLabelFound(props, [children]);
   return /*#__PURE__*/React__default.createElement(StyledBreadcrumbItem, _extends$1({
     role: "link",
@@ -3375,9 +4203,9 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-BreadcrumbItem.className = CLASSNAME$v;
-BreadcrumbItem.defaultProps = DEFAULT_PROPS$v;
-BreadcrumbItem.displayName = COMPONENT_NAME$v;
+BreadcrumbItem.className = CLASSNAME$w;
+BreadcrumbItem.defaultProps = DEFAULT_PROPS$w;
+BreadcrumbItem.displayName = COMPONENT_NAME$w;
 
 /**
  * Component style.
@@ -3411,10 +4239,10 @@ const StyledBreadcrumbs = styled.nav`
   }
 `;
 
-const _excluded$r = ["children", "className", "isDisabled"];
-const COMPONENT_NAME$u = 'Breadcrumbs';
-const CLASSNAME$u = 'redsift-breadcrumbs';
-const DEFAULT_PROPS$u = {};
+const _excluded$s = ["children", "className", "isDisabled"];
+const COMPONENT_NAME$v = 'Breadcrumbs';
+const CLASSNAME$v = 'redsift-breadcrumbs';
+const DEFAULT_PROPS$v = {};
 
 /**
  * The Breadcrumbs components is a list of links to the parent pages of the current page in hierarchical order.
@@ -3425,7 +4253,7 @@ const BaseBreadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       isDisabled
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$r);
+    forwardedProps = _objectWithoutProperties(props, _excluded$s);
   warnIfNoAccessibleLabelFound(props);
   const childArray = filterComponents([Breadcrumbs.Item])(children);
   const breadcrumbItems = childArray.map((child, index) => {
@@ -3448,17 +4276,17 @@ const BaseBreadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), /*#__PURE__*/React__default.createElement("ol", null, breadcrumbItems));
 });
-BaseBreadcrumbs.className = CLASSNAME$u;
-BaseBreadcrumbs.defaultProps = DEFAULT_PROPS$u;
-BaseBreadcrumbs.displayName = COMPONENT_NAME$u;
+BaseBreadcrumbs.className = CLASSNAME$v;
+BaseBreadcrumbs.defaultProps = DEFAULT_PROPS$v;
+BaseBreadcrumbs.displayName = COMPONENT_NAME$v;
 const Breadcrumbs = Object.assign(BaseBreadcrumbs, {
   Item: BreadcrumbItem
 });
 
-const _excluded$q = ["as", "children", "className", "color", "href", "isActive", "isDisabled", "leftIcon", "rightIcon", "target", "variant"];
-const COMPONENT_NAME$t = 'ButtonLink';
-const CLASSNAME$t = 'redsift-button-link';
-const DEFAULT_PROPS$t = {
+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 = {
   color: ColorPalette.default,
   height: 'fit-content',
   variant: ButtonVariant.primary
@@ -3485,7 +4313,7 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
       target,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$q);
+    forwardedProps = _objectWithoutProperties(props, _excluded$r);
   return /*#__PURE__*/React__default.createElement(StyledButton, _extends$1({
     as: as || 'a',
     role: "link",
@@ -3509,9 +4337,9 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
     className: "right"
   }) : null);
 });
-ButtonLink.className = CLASSNAME$t;
-ButtonLink.defaultProps = DEFAULT_PROPS$t;
-ButtonLink.displayName = COMPONENT_NAME$t;
+ButtonLink.className = CLASSNAME$u;
+ButtonLink.defaultProps = DEFAULT_PROPS$u;
+ButtonLink.displayName = COMPONENT_NAME$u;
 
 var collapse$3 = "Collapse";
 var expand$3 = "Expand";
@@ -3701,10 +4529,10 @@ const StyledSkeletonCircle = styled(StyledSkeleton)`
 }}
 `;
 
-const _excluded$p = ["children", "className", "isLoaded"];
-const COMPONENT_NAME$s = 'SkeletonCircle';
-const CLASSNAME$s = 'redsift-skeleton-circle';
-const DEFAULT_PROPS$s = {};
+const _excluded$q = ["children", "className", "isLoaded"];
+const COMPONENT_NAME$t = 'SkeletonCircle';
+const CLASSNAME$t = 'redsift-skeleton-circle';
+const DEFAULT_PROPS$t = {};
 
 /**
  * The SkeletonCircle component.
@@ -3715,7 +4543,7 @@ const SkeletonCircle = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       isLoaded
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$p);
+    forwardedProps = _objectWithoutProperties(props, _excluded$q);
   if (isLoaded) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
   }
@@ -3724,9 +4552,9 @@ const SkeletonCircle = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", null, children) : children);
 });
-SkeletonCircle.className = CLASSNAME$s;
-SkeletonCircle.defaultProps = DEFAULT_PROPS$s;
-SkeletonCircle.displayName = COMPONENT_NAME$s;
+SkeletonCircle.className = CLASSNAME$t;
+SkeletonCircle.defaultProps = DEFAULT_PROPS$t;
+SkeletonCircle.displayName = COMPONENT_NAME$t;
 
 /**
  * Component variant.
@@ -3778,10 +4606,10 @@ const StyledSkeletonText = styled(StyledSkeleton)`
 }}}
 `;
 
-const _excluded$o = ["children", "className", "fontSize", "isLoaded", "lineHeight", "variant"];
-const COMPONENT_NAME$r = 'SkeletonText';
-const CLASSNAME$r = 'redsift-skeleton-text';
-const DEFAULT_PROPS$r = {
+const _excluded$p = ["children", "className", "fontSize", "isLoaded", "lineHeight", "variant"];
+const COMPONENT_NAME$s = 'SkeletonText';
+const CLASSNAME$s = 'redsift-skeleton-text';
+const DEFAULT_PROPS$s = {
   variant: 'body'
 };
 
@@ -3797,7 +4625,7 @@ const SkeletonText = /*#__PURE__*/forwardRef((props, ref) => {
       lineHeight,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$o);
+    forwardedProps = _objectWithoutProperties(props, _excluded$p);
   if (isLoaded) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
   }
@@ -3809,14 +4637,14 @@ const SkeletonText = /*#__PURE__*/forwardRef((props, ref) => {
     $variant: variant
   }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", null, children) : children);
 });
-SkeletonText.className = CLASSNAME$r;
-SkeletonText.defaultProps = DEFAULT_PROPS$r;
-SkeletonText.displayName = COMPONENT_NAME$r;
+SkeletonText.className = CLASSNAME$s;
+SkeletonText.defaultProps = DEFAULT_PROPS$s;
+SkeletonText.displayName = COMPONENT_NAME$s;
 
-const _excluded$n = ["children", "className", "isLoaded"];
-const COMPONENT_NAME$q = 'Skeleton';
-const CLASSNAME$q = 'redsift-skeleton';
-const DEFAULT_PROPS$q = {};
+const _excluded$o = ["children", "className", "isLoaded"];
+const COMPONENT_NAME$r = 'Skeleton';
+const CLASSNAME$r = 'redsift-skeleton';
+const DEFAULT_PROPS$r = {};
 
 /**
  * The Skeleton component.
@@ -3827,7 +4655,7 @@ const BaseSkeleton = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       isLoaded
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$n);
+    forwardedProps = _objectWithoutProperties(props, _excluded$o);
   if (isLoaded) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
   }
@@ -3836,18 +4664,18 @@ const BaseSkeleton = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", null, children) : children);
 });
-BaseSkeleton.className = CLASSNAME$q;
-BaseSkeleton.defaultProps = DEFAULT_PROPS$q;
-BaseSkeleton.displayName = COMPONENT_NAME$q;
+BaseSkeleton.className = CLASSNAME$r;
+BaseSkeleton.defaultProps = DEFAULT_PROPS$r;
+BaseSkeleton.displayName = COMPONENT_NAME$r;
 const Skeleton = Object.assign(BaseSkeleton, {
   Circle: SkeletonCircle,
   Text: SkeletonText
 });
 
-const _excluded$m = ["children", "className", "header", "headingProps", "icon", "isLoading", "subheader"];
-const COMPONENT_NAME$p = 'CardHeader';
-const CLASSNAME$p = 'redsift-card-header';
-const DEFAULT_PROPS$p = {};
+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 = {};
 
 /**
  * The CardHeader component.
@@ -3862,7 +4690,7 @@ const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
       isLoading,
       subheader
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$m);
+    forwardedProps = _objectWithoutProperties(props, _excluded$n);
   return /*#__PURE__*/React__default.createElement(StyledCardHeader, _extends$1({}, forwardedProps, {
     className: classNames(CardHeader.className, className),
     ref: ref
@@ -3886,9 +4714,9 @@ const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-hidden": "true"
   }) : null, header)) : null, children);
 });
-CardHeader.className = CLASSNAME$p;
-CardHeader.defaultProps = DEFAULT_PROPS$p;
-CardHeader.displayName = COMPONENT_NAME$p;
+CardHeader.className = CLASSNAME$q;
+CardHeader.defaultProps = DEFAULT_PROPS$q;
+CardHeader.displayName = COMPONENT_NAME$q;
 
 /**
  * Component style.
@@ -3904,10 +4732,10 @@ const StyledCardBody = styled.div`
   padding: 16px 0px;
 `;
 
-const _excluded$l = ["children", "className"];
-const COMPONENT_NAME$o = 'CardBody';
-const CLASSNAME$o = 'redsift-card-body';
-const DEFAULT_PROPS$o = {};
+const _excluded$m = ["children", "className"];
+const COMPONENT_NAME$p = 'CardBody';
+const CLASSNAME$p = 'redsift-card-body';
+const DEFAULT_PROPS$p = {};
 
 /**
  * The CardBody component.
@@ -3917,15 +4745,15 @@ const CardBody = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$l);
+    forwardedProps = _objectWithoutProperties(props, _excluded$m);
   return /*#__PURE__*/React__default.createElement(StyledCardBody, _extends$1({}, forwardedProps, {
     className: classNames(CardBody.className, className),
     ref: ref
   }), children);
 });
-CardBody.className = CLASSNAME$o;
-CardBody.defaultProps = DEFAULT_PROPS$o;
-CardBody.displayName = COMPONENT_NAME$o;
+CardBody.className = CLASSNAME$p;
+CardBody.defaultProps = DEFAULT_PROPS$p;
+CardBody.displayName = COMPONENT_NAME$p;
 
 /**
  * Component style.
@@ -3937,10 +4765,10 @@ const StyledCardActions = styled.div`
   margin-bottom: 8px;
 `;
 
-const _excluded$k = ["children", "className"];
-const COMPONENT_NAME$n = 'CardActions';
-const CLASSNAME$n = 'redsift-card-actions';
-const DEFAULT_PROPS$n = {
+const _excluded$l = ["children", "className"];
+const COMPONENT_NAME$o = 'CardActions';
+const CLASSNAME$o = 'redsift-card-actions';
+const DEFAULT_PROPS$o = {
   display: 'flex',
   flexDirection: 'row'
 };
@@ -3953,20 +4781,20 @@ const CardActions = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$k);
+    forwardedProps = _objectWithoutProperties(props, _excluded$l);
   return /*#__PURE__*/React__default.createElement(StyledCardActions, _extends$1({}, forwardedProps, {
     className: classNames(CardActions.className, className),
     ref: ref
   }), children);
 });
-CardActions.className = CLASSNAME$n;
-CardActions.defaultProps = DEFAULT_PROPS$n;
-CardActions.displayName = COMPONENT_NAME$n;
+CardActions.className = CLASSNAME$o;
+CardActions.defaultProps = DEFAULT_PROPS$o;
+CardActions.displayName = COMPONENT_NAME$o;
 
-const _excluded$j = ["children", "className", "defaultCollapsed", "isCollapsed", "isCollapsible", "onCollapse"];
-const COMPONENT_NAME$m = 'Card';
-const CLASSNAME$m = 'redsift-card';
-const DEFAULT_PROPS$m = {};
+const _excluded$k = ["children", "className", "defaultCollapsed", "isCollapsed", "isCollapsible", "onCollapse"];
+const COMPONENT_NAME$n = 'Card';
+const CLASSNAME$n = 'redsift-card';
+const DEFAULT_PROPS$n = {};
 
 /**
  * The Card component.
@@ -3980,7 +4808,7 @@ const BaseCard = /*#__PURE__*/forwardRef((props, ref) => {
       isCollapsible,
       onCollapse
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$j);
+    forwardedProps = _objectWithoutProperties(props, _excluded$k);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$2);
   const [isCollapsed, setIsCollapsed] = useState(propsIsCollapsed !== null && propsIsCollapsed !== void 0 ? propsIsCollapsed : defaultCollapsed);
   useEffect(() => {
@@ -4011,9 +4839,9 @@ const BaseCard = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${BaseCard.className}__content`
   }, body, actions) : null);
 });
-BaseCard.className = CLASSNAME$m;
-BaseCard.defaultProps = DEFAULT_PROPS$m;
-BaseCard.displayName = COMPONENT_NAME$m;
+BaseCard.className = CLASSNAME$n;
+BaseCard.defaultProps = DEFAULT_PROPS$n;
+BaseCard.displayName = COMPONENT_NAME$n;
 const Card = Object.assign(BaseCard, {
   Header: CardHeader,
   Body: CardBody,
@@ -4112,10 +4940,10 @@ const StyledCheckboxGroup = styled.div`
   }
 `;
 
-const _excluded$i = ["children", "className", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "possibleValues", "value"];
-const COMPONENT_NAME$l = 'CheckboxGroup';
-const CLASSNAME$l = 'redsift-checkbox-group';
-const DEFAULT_PROPS$l = {
+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 = {
   color: ColorPalette.default,
   orientation: CheckboxGroupOrientation.vertical
 };
@@ -4140,7 +4968,7 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
       possibleValues,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$i);
+    forwardedProps = _objectWithoutProperties(props, _excluded$j);
   const [selectedValues, setValue] = useState(value || defaultValues || []);
   useEffect(() => {
     if (value) {
@@ -4194,9 +5022,9 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${CheckboxGroup.className}-description`
   }, description));
 });
-CheckboxGroup.className = CLASSNAME$l;
-CheckboxGroup.defaultProps = DEFAULT_PROPS$l;
-CheckboxGroup.displayName = COMPONENT_NAME$l;
+CheckboxGroup.className = CLASSNAME$m;
+CheckboxGroup.defaultProps = DEFAULT_PROPS$m;
+CheckboxGroup.displayName = COMPONENT_NAME$m;
 
 /**
  * Component style.
@@ -4303,10 +5131,10 @@ const StyledCheckbox = styled.label`
   }
 `;
 
-const _excluded$h = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isControlled", "isDisabled", "isIndeterminate", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
-const COMPONENT_NAME$k = 'Checkbox';
-const CLASSNAME$k = 'redsift-checkbox';
-const DEFAULT_PROPS$k = {
+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 = {
   isColored: true
 };
 
@@ -4339,7 +5167,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
       onChange,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$h);
+    forwardedProps = _objectWithoutProperties(props, _excluded$i);
   const {
     isFocusVisible,
     focusProps
@@ -4402,6 +5230,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-labelledby": ariaLabelledby,
     "aria-readonly": isReadOnly,
     "aria-required": isRequired,
+    autoFocus: autoFocus,
     checked: isSelected ? true : false,
     disabled: isDisabled,
     name: name,
@@ -4419,9 +5248,9 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     className: "label"
   }, children) : null);
 });
-Checkbox.className = CLASSNAME$k;
-Checkbox.defaultProps = DEFAULT_PROPS$k;
-Checkbox.displayName = COMPONENT_NAME$k;
+Checkbox.className = CLASSNAME$l;
+Checkbox.defaultProps = DEFAULT_PROPS$l;
+Checkbox.displayName = COMPONENT_NAME$l;
 
 const ConditionalWrapper = _ref => {
   let {
@@ -4531,10 +5360,10 @@ const StyledShield = styled.div`
 }}
 `;
 
-const _excluded$g = ["aria-hidden", "aria-label", "className", "svgProps", "isOutlined", "isReversed", "variant"];
-const COMPONENT_NAME$j = 'Shield';
-const CLASSNAME$j = 'redsift-shield';
-const DEFAULT_PROPS$j = {
+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 = {
   variant: ShieldVariant.success
 };
 const getVariant = variant => {
@@ -4620,7 +5449,7 @@ const Shield = /*#__PURE__*/forwardRef((props, ref) => {
       isReversed,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$g);
+    forwardedProps = _objectWithoutProperties(props, _excluded$h);
   const {
     color,
     icon
@@ -4654,9 +5483,9 @@ const Shield = /*#__PURE__*/forwardRef((props, ref) => {
     className: "icon"
   })));
 });
-Shield.className = CLASSNAME$j;
-Shield.defaultProps = DEFAULT_PROPS$j;
-Shield.displayName = COMPONENT_NAME$j;
+Shield.className = CLASSNAME$k;
+Shield.defaultProps = DEFAULT_PROPS$k;
+Shield.displayName = COMPONENT_NAME$k;
 
 var collapse$1 = "Collapse details";
 var expand$1 = "Expand details";
@@ -4706,10 +5535,10 @@ const StyledDetailedCardCollapsibleSectionItems = styled.div`
   }
 `;
 
-const _excluded$f = ["caption", "children", "className", "hideBackground"];
-const COMPONENT_NAME$i = 'DetailedCardCollapsibleSectionItems';
-const CLASSNAME$i = 'redsift-detailed-card-collapsible-section-items';
-const DEFAULT_PROPS$i = {};
+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 = {};
 
 /**
  * The DetailedCardCollapsibleSectionItems Section component.
@@ -4721,7 +5550,7 @@ const DetailedCardCollapsibleSectionItems = /*#__PURE__*/forwardRef((props, ref)
       className,
       hideBackground
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$f);
+    forwardedProps = _objectWithoutProperties(props, _excluded$g);
   return /*#__PURE__*/React__default.createElement(StyledDetailedCardCollapsibleSectionItems, _extends$1({}, forwardedProps, {
     className: classNames(DetailedCardCollapsibleSectionItems.className, className),
     ref: ref,
@@ -4730,9 +5559,9 @@ const DetailedCardCollapsibleSectionItems = /*#__PURE__*/forwardRef((props, ref)
     className: `${DetailedCardCollapsibleSectionItems.className}__caption`
   }, caption) : null);
 });
-DetailedCardCollapsibleSectionItems.className = CLASSNAME$i;
-DetailedCardCollapsibleSectionItems.defaultProps = DEFAULT_PROPS$i;
-DetailedCardCollapsibleSectionItems.displayName = COMPONENT_NAME$i;
+DetailedCardCollapsibleSectionItems.className = CLASSNAME$j;
+DetailedCardCollapsibleSectionItems.defaultProps = DEFAULT_PROPS$j;
+DetailedCardCollapsibleSectionItems.displayName = COMPONENT_NAME$j;
 
 /**
  * Component style.
@@ -4741,12 +5570,20 @@ const StyledDetailedCardSection = styled.div`
   margin: 8px 0;
 
   .redsift-detailed-card-section__header {
-    border-bottom: 1px solid var(--redsift-color-neutral-midgrey);
+    border-bottom: 1px solid
+      ${_ref => {
+  let {
+    $color
+  } = _ref;
+  return $color ? css`var(--redsift-color-${$color}-primary)` : 'var(--redsift-color-neutral-midgrey)';
+}};
     margin-bottom: 8px;
   }
 
   .redsift-detailed-card-section-header__title {
+    font-size: 18px;
     font-weight: 700;
+    lineheight: 22px;
     padding: 6px 0px;
   }
 
@@ -4755,28 +5592,28 @@ const StyledDetailedCardSection = styled.div`
   }
 
   .redsift-detailed-card-collapsible-section-items {
-    visibility: ${_ref => {
+    visibility: ${_ref2 => {
   let {
     $isCollapsed
-  } = _ref;
+  } = _ref2;
   return !$isCollapsed ? 'visible' : 'hidden';
 }};
-    overflow: ${_ref2 => {
+    overflow: ${_ref3 => {
   let {
     $isCollapsed
-  } = _ref2;
+  } = _ref3;
   return !$isCollapsed ? 'visible' : 'hidden';
 }};
-    height: ${_ref3 => {
+    height: ${_ref4 => {
   let {
     $isCollapsed
-  } = _ref3;
+  } = _ref4;
   return !$isCollapsed ? 'auto' : '0px';
 }};
-    ${_ref4 => {
+    ${_ref5 => {
   let {
     $isCollapsed
-  } = _ref4;
+  } = _ref5;
   return $isCollapsed ? css`
             margin: unset;
             padding: unset;
@@ -4902,10 +5739,10 @@ const StyledText = styled.span`
 }}
 `;
 
-const _excluded$e = ["as", "children", "className", "color", "fontFamily", "fontSize", "lineHeight", "noWrap", "variant"];
-const COMPONENT_NAME$h = 'Text';
-const CLASSNAME$h = 'redsift-text';
-const DEFAULT_PROPS$h = {
+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 = {
   fontFamily: FontFamily.raleway
 };
 
@@ -4924,7 +5761,7 @@ const Text = /*#__PURE__*/forwardRef((props, ref) => {
       noWrap,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$e);
+    forwardedProps = _objectWithoutProperties(props, _excluded$f);
   return /*#__PURE__*/React__default.createElement(StyledText, _extends$1({
     as: as
   }, forwardedProps, {
@@ -4939,14 +5776,14 @@ const Text = /*#__PURE__*/forwardRef((props, ref) => {
     $variant: variant
   }), children);
 });
-Text.className = CLASSNAME$h;
-Text.defaultProps = DEFAULT_PROPS$h;
-Text.displayName = COMPONENT_NAME$h;
-
-const _excluded$d = ["badge", "children", "className", "header", "isCollapsed", "isCollapsible", "isLoading"];
-const COMPONENT_NAME$g = 'DetailedCardSection';
-const CLASSNAME$g = 'redsift-detailed-card-section';
-const DEFAULT_PROPS$g = {
+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 = {
   isCollapsible: true
 };
 const hasCollapsibleChildren = children => {
@@ -4965,6 +5802,7 @@ const hasCollapsibleChildren = children => {
 const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       badge,
+      color,
       children,
       className,
       header,
@@ -4972,13 +5810,14 @@ const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
       isCollapsible: propsIsCollapsible,
       isLoading
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$d);
+    forwardedProps = _objectWithoutProperties(props, _excluded$e);
   const stringFormatter = useLocalizedStringFormatter(intlMessages);
   const isCollapsible = propsIsCollapsible && hasCollapsibleChildren(children);
   const [isCollapsed, setIsCollapsed] = useState(Boolean(propsIsCollapsed));
   return /*#__PURE__*/React__default.createElement(StyledDetailedCardSection, _extends$1({}, forwardedProps, {
     className: classNames(DetailedCardSection.className, className),
     ref: ref,
+    $color: color,
     $isCollapsed: isCollapsed
   }), /*#__PURE__*/React__default.createElement(Flexbox, {
     justifyContent: "space-between",
@@ -4993,12 +5832,14 @@ const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
   }, /*#__PURE__*/React__default.createElement(Flexbox, {
     alignItems: "center",
     gap: "8px"
-  }, /*#__PURE__*/React__default.createElement(Text, {
+  }, typeof header === 'string' ? /*#__PURE__*/React__default.createElement(Text, {
     className: `${DetailedCardSection.className}-header__title`,
     color: "black",
     fontFamily: "raleway",
     fontSize: "18px",
     lineHeight: "22px"
+  }, header) : /*#__PURE__*/React__default.createElement("div", {
+    className: `${DetailedCardSection.className}-header__title`
   }, header), badge ? /*#__PURE__*/React__default.createElement(Badge, _extends$1({
     variant: BadgeVariant.standard
   }, badge)) : null)) : null, isCollapsible && !isLoading ? /*#__PURE__*/React__default.createElement(IconButton, {
@@ -5011,9 +5852,9 @@ const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }) : null), children);
 });
-DetailedCardSection.className = CLASSNAME$g;
-DetailedCardSection.defaultProps = DEFAULT_PROPS$g;
-DetailedCardSection.displayName = COMPONENT_NAME$g;
+DetailedCardSection.className = CLASSNAME$h;
+DetailedCardSection.defaultProps = DEFAULT_PROPS$h;
+DetailedCardSection.displayName = COMPONENT_NAME$h;
 
 /**
  * Component style.
@@ -5054,10 +5895,10 @@ const StyledDetailedCardHeader = styled.div`
   }
 `;
 
-const _excluded$c = ["children", "className", "header", "headingProps", "isLoading"];
-const COMPONENT_NAME$f = 'DetailedCardHeader';
-const CLASSNAME$f = 'redsift-detailed-card-header';
-const DEFAULT_PROPS$f = {};
+const _excluded$d = ["children", "className", "header", "headingProps", "isLoading"];
+const COMPONENT_NAME$g = 'DetailedCardHeader';
+const CLASSNAME$g = 'redsift-detailed-card-header';
+const DEFAULT_PROPS$g = {};
 
 /**
  * The DetailedCardHeader component.
@@ -5070,7 +5911,7 @@ const DetailedCardHeader = /*#__PURE__*/forwardRef((props, ref) => {
       headingProps,
       isLoading
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$c);
+    forwardedProps = _objectWithoutProperties(props, _excluded$d);
   return /*#__PURE__*/React__default.createElement(StyledDetailedCardHeader, _extends$1({}, forwardedProps, {
     className: classNames(DetailedCardHeader.className, className),
     ref: ref
@@ -5085,9 +5926,9 @@ const DetailedCardHeader = /*#__PURE__*/forwardRef((props, ref) => {
     variant: "h2"
   }, headingProps), header)) : null, children);
 });
-DetailedCardHeader.className = CLASSNAME$f;
-DetailedCardHeader.defaultProps = DEFAULT_PROPS$f;
-DetailedCardHeader.displayName = COMPONENT_NAME$f;
+DetailedCardHeader.className = CLASSNAME$g;
+DetailedCardHeader.defaultProps = DEFAULT_PROPS$g;
+DetailedCardHeader.displayName = COMPONENT_NAME$g;
 
 /**
  * Component style.
@@ -5110,7 +5951,10 @@ const StyledPill = styled.div`
     $color
   } = _ref2;
   return css`
-    ${$color === 'black' ? 'background-color: var(--redsift-color-neutral-black);' : $color === 'white' ? 'background-color: var(--redsift-color-neutral-white);' : $color === 'error' ? 'background-color: var(--redsift-data-viz-color-red-default);' : $color === 'warning' ? 'background-color: var(--redsift-data-viz-color-orange-default);' : $color === 'success' ? 'background-color: var(--redsift-data-viz-color-green-default);' : `background-color: var(--redsift-data-viz-color-${$color}-default);`}
+    ${$color === 'black' ? 'background-color: var(--redsift-color-neutral-black);' : $color === 'white' ? css`
+          background-color: var(--redsift-color-neutral-white);
+          border: 1px solid #d6d6d6;
+        ` : $color === 'error' ? 'background-color: var(--redsift-data-viz-color-red-default);' : $color === 'warning' ? 'background-color: var(--redsift-data-viz-color-orange-default);' : $color === 'success' ? 'background-color: var(--redsift-data-viz-color-green-default);' : `background-color: var(--redsift-data-viz-color-${$color}-default);`}
 
     &,
     .redsift-icon {
@@ -5130,10 +5974,10 @@ const StyledPill = styled.div`
   }
 `;
 
-const _excluded$b = ["autoBreak", "children", "className", "color"];
-const COMPONENT_NAME$e = 'Pill';
-const CLASSNAME$e = 'redsift-pill';
-const DEFAULT_PROPS$e = {
+const _excluded$c = ["autoBreak", "children", "className", "color"];
+const COMPONENT_NAME$f = 'Pill';
+const CLASSNAME$f = 'redsift-pill';
+const DEFAULT_PROPS$f = {
   color: DataVizColorPalette.blue,
   height: 'fit-content'
 };
@@ -5148,7 +5992,7 @@ const Pill = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       color
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$b);
+    forwardedProps = _objectWithoutProperties(props, _excluded$c);
   return /*#__PURE__*/React__default.createElement(StyledPill, _extends$1({}, forwardedProps, {
     $autoBreak: autoBreak,
     $color: color,
@@ -5156,9 +6000,9 @@ const Pill = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-Pill.className = CLASSNAME$e;
-Pill.defaultProps = DEFAULT_PROPS$e;
-Pill.displayName = COMPONENT_NAME$e;
+Pill.className = CLASSNAME$f;
+Pill.defaultProps = DEFAULT_PROPS$f;
+Pill.displayName = COMPONENT_NAME$f;
 
 /**
  * Component style.
@@ -5188,10 +6032,10 @@ const StyledDetailedCardSectionItem = styled.div`
   }
 `;
 
-const _excluded$a = ["children", "className", "description", "icon", "iconProps", "isLoading", "pill", "pillProps", "shield"];
-const COMPONENT_NAME$d = 'DetailedCardSectionItem';
-const CLASSNAME$d = 'redsift-detailed-card-section-item';
-const DEFAULT_PROPS$d = {};
+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 = {};
 
 /**
  * The DetailedCardSectionItems component.
@@ -5208,7 +6052,7 @@ const DetailedCardSectionItem = /*#__PURE__*/forwardRef((props, ref) => {
       pillProps,
       shield
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$a);
+    forwardedProps = _objectWithoutProperties(props, _excluded$b);
   return /*#__PURE__*/React__default.createElement(StyledDetailedCardSectionItem, _extends$1({}, forwardedProps, {
     className: classNames(DetailedCardSectionItem.className, className),
     ref: ref
@@ -5236,9 +6080,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$d;
-DetailedCardSectionItem.defaultProps = DEFAULT_PROPS$d;
-DetailedCardSectionItem.displayName = COMPONENT_NAME$d;
+DetailedCardSectionItem.className = CLASSNAME$e;
+DetailedCardSectionItem.defaultProps = DEFAULT_PROPS$e;
+DetailedCardSectionItem.displayName = COMPONENT_NAME$e;
 
 /*!
 * tabbable 6.1.1
@@ -8763,9 +9607,9 @@ const StyledTooltipContent = styled.div`
 }}
 `;
 
-const COMPONENT_NAME$c = 'TooltipContent';
-const CLASSNAME$c = 'redsift-tooltip-content';
-const DEFAULT_PROPS$c = {};
+const COMPONENT_NAME$d = 'TooltipContent';
+const CLASSNAME$d = 'redsift-tooltip-content';
+const DEFAULT_PROPS$d = {};
 
 /**
  * The TooltipContent component.
@@ -8827,13 +9671,13 @@ const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${TooltipContent.className}__inner`
   }, children)));
 });
-TooltipContent.className = CLASSNAME$c;
-TooltipContent.defaultProps = DEFAULT_PROPS$c;
-TooltipContent.displayName = COMPONENT_NAME$c;
+TooltipContent.className = CLASSNAME$d;
+TooltipContent.defaultProps = DEFAULT_PROPS$d;
+TooltipContent.displayName = COMPONENT_NAME$d;
 
-const COMPONENT_NAME$b = 'TooltipTrigger';
-const CLASSNAME$b = 'redsift-tooltip-trigger';
-const DEFAULT_PROPS$b = {};
+const COMPONENT_NAME$c = 'TooltipTrigger';
+const CLASSNAME$c = 'redsift-tooltip-trigger';
+const DEFAULT_PROPS$c = {};
 
 /**
  * The TooltipTrigger component.
@@ -8860,9 +9704,9 @@ const TooltipTrigger = /*#__PURE__*/forwardRef((props, ref) => {
     ref: triggerRef
   }, getReferenceProps(props)), children);
 });
-TooltipTrigger.className = CLASSNAME$b;
-TooltipTrigger.defaultProps = DEFAULT_PROPS$b;
-TooltipTrigger.displayName = COMPONENT_NAME$b;
+TooltipTrigger.className = CLASSNAME$c;
+TooltipTrigger.defaultProps = DEFAULT_PROPS$c;
+TooltipTrigger.displayName = COMPONENT_NAME$c;
 
 function useTooltip(_ref) {
   let {
@@ -8923,9 +9767,9 @@ function useTooltip(_ref) {
   }), [isOpen, handleOpen, interactions, data, arrowRef, tooltipId]);
 }
 
-const COMPONENT_NAME$a = 'Tooltip';
-const CLASSNAME$a = 'redsift-tooltip';
-const DEFAULT_PROPS$a = {
+const COMPONENT_NAME$b = 'Tooltip';
+const CLASSNAME$b = 'redsift-tooltip';
+const DEFAULT_PROPS$b = {
   delay: 500,
   placement: TooltipPlacement.top
 };
@@ -8956,9 +9800,9 @@ const BaseTooltip = props => {
     value: tooltip
   }, trigger, content);
 };
-BaseTooltip.className = CLASSNAME$a;
-BaseTooltip.defaultProps = DEFAULT_PROPS$a;
-BaseTooltip.displayName = COMPONENT_NAME$a;
+BaseTooltip.className = CLASSNAME$b;
+BaseTooltip.defaultProps = DEFAULT_PROPS$b;
+BaseTooltip.displayName = COMPONENT_NAME$b;
 const Tooltip = Object.assign(BaseTooltip, {
   Trigger: TooltipTrigger,
   Content: TooltipContent
@@ -8972,10 +9816,10 @@ const useTooltipContext = () => {
   return context;
 };
 
-const _excluded$9 = ["areAllCollapsed", "children", "className", "color", "defaultAllCollapsed", "icon", "isCollapsible", "isLoading", "onCollapseAll", "shield"];
-const COMPONENT_NAME$9 = 'DetailedCard';
-const CLASSNAME$9 = 'redsift-detailed-card';
-const DEFAULT_PROPS$9 = {
+const _excluded$a = ["areAllCollapsed", "children", "className", "color", "defaultAllCollapsed", "icon", "isCollapsible", "isLoading", "onCollapseAll", "shield"];
+const COMPONENT_NAME$a = 'DetailedCard';
+const CLASSNAME$a = 'redsift-detailed-card';
+const DEFAULT_PROPS$a = {
   isCollapsible: true,
   width: '400px'
 };
@@ -9014,7 +9858,7 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
       onCollapseAll,
       shield
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$9);
+    forwardedProps = _objectWithoutProperties(props, _excluded$a);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$1);
   const isCollapsible = propsIsCollapsible && hasMultipleCollapsibleChildren(children);
   const [allCollapsed, setAllCollapsed] = useState({
@@ -9100,9 +9944,9 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
     return child;
   }));
 });
-BaseDetailedCard.className = CLASSNAME$9;
-BaseDetailedCard.defaultProps = DEFAULT_PROPS$9;
-BaseDetailedCard.displayName = COMPONENT_NAME$9;
+BaseDetailedCard.className = CLASSNAME$a;
+BaseDetailedCard.defaultProps = DEFAULT_PROPS$a;
+BaseDetailedCard.displayName = COMPONENT_NAME$a;
 const DetailedCard = Object.assign(BaseDetailedCard, {
   Header: DetailedCardHeader,
   Section: DetailedCardSection,
@@ -9136,10 +9980,10 @@ const StyledGridItem = styled.div`
   ${baseInternalSpacing}
 `;
 
-const _excluded$8 = ["children", "className"];
-const COMPONENT_NAME$8 = 'GridItem';
-const CLASSNAME$8 = 'redsift-grid-item';
-const DEFAULT_PROPS$8 = {};
+const _excluded$9 = ["children", "className"];
+const COMPONENT_NAME$9 = 'GridItem';
+const CLASSNAME$9 = 'redsift-grid-item';
+const DEFAULT_PROPS$9 = {};
 
 /**
  * The GridItem component.
@@ -9149,20 +9993,20 @@ const GridItem = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$8);
+    forwardedProps = _objectWithoutProperties(props, _excluded$9);
   return /*#__PURE__*/React__default.createElement(StyledGridItem, _extends$1({}, forwardedProps, {
     className: classNames(GridItem.className, className),
     ref: ref
   }), children);
 });
-GridItem.className = CLASSNAME$8;
-GridItem.defaultProps = DEFAULT_PROPS$8;
-GridItem.displayName = COMPONENT_NAME$8;
+GridItem.className = CLASSNAME$9;
+GridItem.defaultProps = DEFAULT_PROPS$9;
+GridItem.displayName = COMPONENT_NAME$9;
 
-const _excluded$7 = ["children", "className"];
-const COMPONENT_NAME$7 = 'Grid';
-const CLASSNAME$7 = 'redsift-grid';
-const DEFAULT_PROPS$7 = {};
+const _excluded$8 = ["children", "className"];
+const COMPONENT_NAME$8 = 'Grid';
+const CLASSNAME$8 = 'redsift-grid';
+const DEFAULT_PROPS$8 = {};
 
 /**
  * The Grid component.
@@ -9172,15 +10016,15 @@ const BaseGrid = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$7);
+    forwardedProps = _objectWithoutProperties(props, _excluded$8);
   return /*#__PURE__*/React__default.createElement(StyledGrid, _extends$1({}, forwardedProps, {
     className: classNames(BaseGrid.className, className),
     ref: ref
   }), children);
 });
-BaseGrid.className = CLASSNAME$7;
-BaseGrid.defaultProps = DEFAULT_PROPS$7;
-BaseGrid.displayName = COMPONENT_NAME$7;
+BaseGrid.className = CLASSNAME$8;
+BaseGrid.defaultProps = DEFAULT_PROPS$8;
+BaseGrid.displayName = COMPONENT_NAME$8;
 const Grid = Object.assign(BaseGrid, {
   Item: GridItem
 });
@@ -9225,10 +10069,10 @@ const StyledLink = styled.a`
   }
 `;
 
-const _excluded$6 = ["children", "className", "href", "isDisabled"];
-const COMPONENT_NAME$6 = 'Link';
-const CLASSNAME$6 = 'redsift-link';
-const DEFAULT_PROPS$6 = {};
+const _excluded$7 = ["children", "className", "href", "isDisabled"];
+const COMPONENT_NAME$7 = 'Link';
+const CLASSNAME$7 = 'redsift-link';
+const DEFAULT_PROPS$7 = {};
 
 /**
  * The Link is a semantic link that looks like a link.
@@ -9245,7 +10089,7 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
       href,
       isDisabled
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$6);
+    forwardedProps = _objectWithoutProperties(props, _excluded$7);
   return /*#__PURE__*/React__default.createElement(StyledLink, _extends$1({
     "aria-disabled": isDisabled,
     role: "link",
@@ -9257,14 +10101,14 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-Link.className = CLASSNAME$6;
-Link.defaultProps = DEFAULT_PROPS$6;
-Link.displayName = COMPONENT_NAME$6;
+Link.className = CLASSNAME$7;
+Link.defaultProps = DEFAULT_PROPS$7;
+Link.displayName = COMPONENT_NAME$7;
 
-const _excluded$5 = ["children", "className", "disabled", "isDisabled", "onPress"];
-const COMPONENT_NAME$5 = 'LinkButton';
-const CLASSNAME$5 = 'redsift-link-button';
-const DEFAULT_PROPS$5 = {};
+const _excluded$6 = ["children", "className", "disabled", "isDisabled", "onPress"];
+const COMPONENT_NAME$6 = 'LinkButton';
+const CLASSNAME$6 = 'redsift-link-button';
+const DEFAULT_PROPS$6 = {};
 
 /**
  * The LinkButton is a semantic button that looks like a link.
@@ -9289,7 +10133,7 @@ const LinkButton = /*#__PURE__*/forwardRef((props, ref) => {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onPress
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$5);
+    forwardedProps = _objectWithoutProperties(props, _excluded$6);
   return /*#__PURE__*/React__default.createElement(StyledLink, _extends$1({
     as: "button"
   }, forwardedProps, buttonProps, {
@@ -9302,9 +10146,9 @@ const LinkButton = /*#__PURE__*/forwardRef((props, ref) => {
     ref: buttonRef
   }), children);
 });
-LinkButton.className = CLASSNAME$5;
-LinkButton.defaultProps = DEFAULT_PROPS$5;
-LinkButton.displayName = COMPONENT_NAME$5;
+LinkButton.className = CLASSNAME$6;
+LinkButton.defaultProps = DEFAULT_PROPS$6;
+LinkButton.displayName = COMPONENT_NAME$6;
 
 /**
  * Component style.
@@ -9313,10 +10157,10 @@ const StyledNumber = styled(StyledText)`
   font-family: var(--redsift-typography-font-family-source-code-pro);
 `;
 
-const _excluded$4 = ["as", "className", "color", "compactDisplay", "currency", "currencyDisplay", "currencySign", "fontSize", "lineHeight", "localeMatcher", "maximumFractionDigits", "maximumSignificantDigits", "minimumFractionDigits", "minimumIntegerDigits", "minimumSignificantDigits", "notation", "noWrap", "numberingSystem", "roundingIncrement", "roundingMode", "roundingPriority", "signDisplay", "trailingZeroDisplay", "type", "unit", "unitDisplay", "useGrouping", "value", "variant"];
-const COMPONENT_NAME$4 = 'Number';
-const CLASSNAME$4 = 'redsift-number';
-const DEFAULT_PROPS$4 = {
+const _excluded$5 = ["as", "className", "color", "compactDisplay", "currency", "currencyDisplay", "currencySign", "fontSize", "lineHeight", "localeMatcher", "maximumFractionDigits", "maximumSignificantDigits", "minimumFractionDigits", "minimumIntegerDigits", "minimumSignificantDigits", "notation", "noWrap", "numberingSystem", "roundingIncrement", "roundingMode", "roundingPriority", "signDisplay", "trailingZeroDisplay", "type", "unit", "unitDisplay", "useGrouping", "value", "variant"];
+const COMPONENT_NAME$5 = 'Number';
+const CLASSNAME$5 = 'redsift-number';
+const DEFAULT_PROPS$5 = {
   compactDisplay: 'short',
   currencyDisplay: 'symbol',
   currencySign: 'standard',
@@ -9365,7 +10209,7 @@ const Number$1 = /*#__PURE__*/forwardRef((props, ref) => {
       value,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$4);
+    forwardedProps = _objectWithoutProperties(props, _excluded$5);
   const formatter = useNumberFormatter(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
     compactDisplay,
     currency,
@@ -9412,9 +10256,9 @@ const Number$1 = /*#__PURE__*/forwardRef((props, ref) => {
     $variant: variant
   }), formatter.format(value));
 });
-Number$1.className = CLASSNAME$4;
-Number$1.defaultProps = DEFAULT_PROPS$4;
-Number$1.displayName = COMPONENT_NAME$4;
+Number$1.className = CLASSNAME$5;
+Number$1.defaultProps = DEFAULT_PROPS$5;
+Number$1.displayName = COMPONENT_NAME$5;
 
 /**
  * Context props.
@@ -9508,10 +10352,10 @@ const StyledRadioGroup = styled.div`
   }
 `;
 
-const _excluded$3 = ["children", "className", "defaultValue", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "possibleValues", "value"];
-const COMPONENT_NAME$3 = 'RadioGroup';
-const CLASSNAME$3 = 'redsift-radio-group';
-const DEFAULT_PROPS$3 = {
+const _excluded$4 = ["children", "className", "defaultValue", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "possibleValues", "value"];
+const COMPONENT_NAME$4 = 'RadioGroup';
+const CLASSNAME$4 = 'redsift-radio-group';
+const DEFAULT_PROPS$4 = {
   color: ColorPalette.default,
   orientation: RadioGroupOrientation.vertical
 };
@@ -9536,7 +10380,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
       possibleValues,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$3);
+    forwardedProps = _objectWithoutProperties(props, _excluded$4);
   const [selectedValue, setValue] = useState(value || defaultValue || '');
   useEffect(() => {
     if (value) {
@@ -9578,9 +10422,9 @@ const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${RadioGroup.className}-description`
   }, description));
 });
-RadioGroup.className = CLASSNAME$3;
-RadioGroup.defaultProps = DEFAULT_PROPS$3;
-RadioGroup.displayName = COMPONENT_NAME$3;
+RadioGroup.className = CLASSNAME$4;
+RadioGroup.defaultProps = DEFAULT_PROPS$4;
+RadioGroup.displayName = COMPONENT_NAME$4;
 
 /**
  * Component style.
@@ -9689,10 +10533,10 @@ const StyledRadio = styled.label`
   }
 `;
 
-const _excluded$2 = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
-const COMPONENT_NAME$2 = 'Radio';
-const CLASSNAME$2 = 'redsift-radio';
-const DEFAULT_PROPS$2 = {
+const _excluded$3 = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
+const COMPONENT_NAME$3 = 'Radio';
+const CLASSNAME$3 = 'redsift-radio';
+const DEFAULT_PROPS$3 = {
   isColored: true
 };
 
@@ -9723,7 +10567,7 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
       onChange,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$2);
+    forwardedProps = _objectWithoutProperties(props, _excluded$3);
   const {
     isFocusVisible,
     focusProps
@@ -9782,6 +10626,7 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-labelledby": ariaLabelledby,
     "aria-readonly": isReadOnly,
     "aria-required": isRequired,
+    autoFocus: autoFocus,
     checked: isSelected ? true : false,
     disabled: isDisabled,
     name: name,
@@ -9797,9 +10642,9 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
     className: "label"
   }, children) : null);
 });
-Radio.className = CLASSNAME$2;
-Radio.defaultProps = DEFAULT_PROPS$2;
-Radio.displayName = COMPONENT_NAME$2;
+Radio.className = CLASSNAME$3;
+Radio.defaultProps = DEFAULT_PROPS$3;
+Radio.displayName = COMPONENT_NAME$3;
 
 const SwitchGroupContext = /*#__PURE__*/React__default.createContext(null);
 
@@ -9962,10 +10807,10 @@ const StyledSwitch = styled.label`
 }}
 `;
 
-const _excluded$1 = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
-const COMPONENT_NAME$1 = 'Switch';
-const CLASSNAME$1 = 'redsift-switch';
-const DEFAULT_PROPS$1 = {
+const _excluded$2 = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
+const COMPONENT_NAME$2 = 'Switch';
+const CLASSNAME$2 = 'redsift-switch';
+const DEFAULT_PROPS$2 = {
   isColored: true
 };
 
@@ -9996,7 +10841,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
       onChange,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1);
+    forwardedProps = _objectWithoutProperties(props, _excluded$2);
   const {
     isFocusVisible,
     focusProps
@@ -10059,6 +10904,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-labelledby": ariaLabelledby,
     "aria-readonly": isReadOnly,
     "aria-required": isRequired,
+    autoFocus: autoFocus,
     checked: isSelected ? true : false,
     disabled: isDisabled,
     name: name,
@@ -10081,9 +10927,9 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
     className: "label"
   }, children) : null);
 });
-Switch.className = CLASSNAME$1;
-Switch.defaultProps = DEFAULT_PROPS$1;
-Switch.displayName = COMPONENT_NAME$1;
+Switch.className = CLASSNAME$2;
+Switch.defaultProps = DEFAULT_PROPS$2;
+Switch.displayName = COMPONENT_NAME$2;
 
 /**
  * Context props.
@@ -10175,10 +11021,10 @@ const StyledSwitchGroup = styled.div`
   }
 `;
 
-const _excluded = ["children", "className", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "possibleValues", "value"];
-const COMPONENT_NAME = 'SwitchGroup';
-const CLASSNAME = 'redsift-checkbox-group';
-const DEFAULT_PROPS = {
+const _excluded$1 = ["children", "className", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "possibleValues", "value"];
+const COMPONENT_NAME$1 = 'SwitchGroup';
+const CLASSNAME$1 = 'redsift-checkbox-group';
+const DEFAULT_PROPS$1 = {
   color: ColorPalette.default,
   orientation: SwitchGroupOrientation.vertical
 };
@@ -10203,7 +11049,7 @@ const SwitchGroup = /*#__PURE__*/forwardRef((props, ref) => {
       possibleValues,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1);
   const [selectedValues, setValue] = useState(value || defaultValues || []);
   useEffect(() => {
     if (value) {
@@ -10257,9 +11103,305 @@ const SwitchGroup = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${SwitchGroup.className}-description`
   }, description));
 });
-SwitchGroup.className = CLASSNAME;
-SwitchGroup.defaultProps = DEFAULT_PROPS;
-SwitchGroup.displayName = COMPONENT_NAME;
+SwitchGroup.className = CLASSNAME$1;
+SwitchGroup.defaultProps = DEFAULT_PROPS$1;
+SwitchGroup.displayName = COMPONENT_NAME$1;
+
+/**
+ * Component variant.
+ */
+const TextFieldVariant = {
+  default: 'default',
+  underline: 'underline'
+};
+
+/**
+ * Component style.
+ */
+const StyledTextField = styled.div`
+  height: fit-content;
+  position: relative;
+  width: fit-content;
+  ${baseStyling}
+
+  border: 0;
+  display: inline-flex;
+  flex-direction: column;
+  margin: 0;
+  min-width: 0;
+  padding: 0;
+  vertical-align: top;
+
+  ${_ref => {
+  let {
+    $hasContent,
+    $isFocused,
+    $isDisabled,
+    $isInvalid,
+    $isColored,
+    $variant
+  } = _ref;
+  return css`
+    .redsift-text-field__label {
+      font-family: var(--redsift-typography-input-text-font-family);
+      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;
+      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,
+        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);
+          ` : 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);
+          `}
+
+      ${$isDisabled ? css`
+            color: var(--redsift-color-neutral-midgrey);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-error-primary);
+          ` : $isFocused ? css`
+            color: var(
+              --redsift-color-${$isColored ? 'default' : 'question'}-primary
+            );
+          ` : css`
+            color: var(--redsift-color-neutral-darkgrey);
+          `}
+    }
+
+    .redsift-text-field__input-wrapper {
+      align-items: center;
+      box-sizing: border-box;
+      cursor: text;
+      display: inline-flex;
+      position: relative;
+      position: relative;
+    }
+
+    .redsift-text-field-input-wrapper__input {
+      background: none;
+      border: 0;
+      box-sizing: content-box;
+      display: block;
+      font-family: var(--redsift-typography-input-text-font-family);
+      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);
+      min-width: 0;
+      padding-bottom: 6px;
+
+      ${$variant !== TextFieldVariant.underline ? css`
+            padding-left: 16px;
+          ` : ''}
+      padding-top: 10px;
+      width: 100%;
+
+      ${$isDisabled ? css`
+            color: var(--redsift-color-neutral-midgrey);
+          ` : css`
+            color: var(--redsift-color-neutral-black);
+          `}
+    }
+
+    .redsift-text-field-input-wrapper__input::placeholder {
+      color: var(--redsift-color-neutral-midgrey);
+    }
+
+    .redsift-text-field-input-wrapper__input:focus {
+      outline: 0;
+    }
+
+    .redsift-text-field-input-wrapper__fieldset {
+      border-radius: inherit;
+      border-style: solid;
+      bottom: 0;
+      left: 0;
+      margin: 0;
+      min-width: 0%;
+      overflow: hidden;
+      padding: 0 8px;
+      pointer-events: none;
+      position: absolute;
+      right: 0;
+      text-align: left;
+      top: -5px;
+
+      ${$variant === TextFieldVariant.underline ? css`
+            border-bottom-width: 2px;
+          ` : css`
+            border-width: 2px;
+          `}
+
+      ${$isDisabled ? css`
+            border-color: var(--redsift-color-neutral-midgrey);
+          ` : $isInvalid ? css`
+            border-color: var(--redsift-color-error-primary);
+          ` : $isFocused ? css`
+            border-color: var(
+              --redsift-color-${$isColored ? 'default' : 'question'}-primary
+            );
+          ` : css`
+            border-color: var(--redsift-color-neutral-midgrey);
+          `}
+    }
+
+    .redsift-text-field-input-wrapper-fieldset__legend {
+      display: block;
+      float: unset;
+      font-size: 0.7em;
+      height: 11px;
+      overflow: hidden;
+      padding: 0;
+      visibility: hidden;
+      white-space: nowrap;
+      width: auto;
+
+      ${!$hasContent ? css`
+            max-width: 0.01px;
+            transition: max-width 50ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+          ` : css`
+            max-width: 100%;
+            transition: max-width 100ms cubic-bezier(0, 0, 0.2, 1) 50ms;
+          `}
+    }
+
+    .redsift-text-field-input-wrapper-fieldset__legend > span {
+      display: inline-block;
+      opacity: 0;
+      padding-left: 5px;
+      padding-right: 5px;
+      visibility: visible;
+    }
+  `;
+}}
+`;
+
+const _excluded = ["aria-label", "aria-labelledby", "autoFocus", "className", "defaultValue", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "name", "onChange", "placeholder", "value", "variant"];
+const COMPONENT_NAME = 'TextField';
+const CLASSNAME = 'redsift-text-field';
+const DEFAULT_PROPS = {
+  defaultValue: '',
+  isColored: true,
+  variant: TextFieldVariant.default
+};
+
+/**
+ * The TextField component.
+ * Can be used as controlled or uncontrolled.
+ */
+const TextField = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      autoFocus,
+      className,
+      defaultValue,
+      inputProps,
+      inputRef,
+      isColored,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      label,
+      name,
+      onChange,
+      placeholder,
+      value: propsValue,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const {
+    isFocusVisible,
+    isFocused,
+    focusProps
+  } = useFocusRing({
+    autoFocus
+  });
+  const [isFocusWithin, setFocusWithin] = useState(Boolean(autoFocus));
+  const {
+    focusWithinProps
+  } = useFocusWithin({
+    onFocusWithinChange: isFocusWithin => setFocusWithin(isFocusWithin)
+  });
+  const [value, setValue] = useState(propsValue !== null && propsValue !== void 0 ? propsValue : defaultValue);
+  useEffect(() => {
+    setValue(propsValue !== null && propsValue !== void 0 ? propsValue : defaultValue);
+  }, [propsValue, defaultValue]);
+  warnIfNoAccessibleLabelFound(props, [label]);
+  const handleChange = useCallback(event => {
+    if (isDisabled || isReadOnly) {
+      return;
+    }
+    if (onChange) {
+      onChange(event.target.value, name, event);
+    }
+    setValue(event.target.value);
+  }, [onChange]);
+  return /*#__PURE__*/React__default.createElement(StyledTextField, _extends$1({}, focusWithinProps, forwardedProps, {
+    $hasContent: isFocusWithin || Boolean(value) || Boolean(placeholder),
+    $isColored: isColored,
+    $isDisabled: isDisabled,
+    $isFocusVisible: isFocusVisible,
+    $isInvalid: isInvalid || isRequired && !value,
+    $isRequired: isRequired,
+    $isFocused: isFocused,
+    $variant: variant,
+    className: classNames(TextField.className, className),
+    ref: ref
+  }), label ? /*#__PURE__*/React__default.createElement("label", {
+    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, {
+    "aria-disabled": isDisabled,
+    "aria-invalid": isInvalid || isRequired && !value,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-readonly": isReadOnly,
+    "aria-required": isRequired,
+    autoFocus: autoFocus,
+    className: `${TextField.className}-input-wrapper__input`,
+    disabled: isDisabled,
+    name: name,
+    onChange: handleChange,
+    placeholder: placeholder,
+    ref: inputRef,
+    type: "text",
+    value: value
+  })), label ? /*#__PURE__*/React__default.createElement("fieldset", {
+    "aria-hidden": "true",
+    className: `${TextField.className}-input-wrapper__fieldset`
+  }, /*#__PURE__*/React__default.createElement("legend", {
+    className: `${TextField.className}-input-wrapper-fieldset__legend`
+  }, /*#__PURE__*/React__default.createElement("span", null, label))) : null));
+});
+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, RedsiftDataVizColorBlueDark, RedsiftDataVizColorBlueDarker, RedsiftDataVizColorBlueDefault, RedsiftDataVizColorBlueLight, RedsiftDataVizColorBlueLighter, RedsiftDataVizColorBrownDark, RedsiftDataVizColorBrownDarker, RedsiftDataVizColorBrownDefault, RedsiftDataVizColorBrownLight, RedsiftDataVizColorBrownLighter, RedsiftDataVizColorCyanDark, RedsiftDataVizColorCyanDarker, RedsiftDataVizColorCyanDefault, RedsiftDataVizColorCyanLight, RedsiftDataVizColorCyanLighter, RedsiftDataVizColorGreenDark, RedsiftDataVizColorGreenDarker, RedsiftDataVizColorGreenDefault, RedsiftDataVizColorGreenLight, RedsiftDataVizColorGreenLighter, RedsiftDataVizColorGreyDark, RedsiftDataVizColorGreyDarker, RedsiftDataVizColorGreyDefault, RedsiftDataVizColorGreyLight, RedsiftDataVizColorGreyLighter, RedsiftDataVizColorOrangeDark, RedsiftDataVizColorOrangeDarker, RedsiftDataVizColorOrangeDefault, RedsiftDataVizColorOrangeLight, RedsiftDataVizColorOrangeLighter, RedsiftDataVizColorPinkDark, RedsiftDataVizColorPinkDarker, RedsiftDataVizColorPinkDefault, RedsiftDataVizColorPinkLight, RedsiftDataVizColorPinkLighter, RedsiftDataVizColorPurpleDark, RedsiftDataVizColorPurpleDarker, RedsiftDataVizColorPurpleDefault, RedsiftDataVizColorPurpleLight, RedsiftDataVizColorPurpleLighter, RedsiftDataVizColorRedDark, RedsiftDataVizColorRedDarker, RedsiftDataVizColorRedDefault, RedsiftDataVizColorRedLight, RedsiftDataVizColorRedLighter, RedsiftDataVizColorYellowDark, RedsiftDataVizColorYellowDarker, RedsiftDataVizColorYellowDefault, RedsiftDataVizColorYellowLight, RedsiftDataVizColorYellowLighter, 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, 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, TextVariant, filterComponents, isComponent, partitionComponents, useAppSidePanel, useSideNavigationMenuBar, useWindowSize, warnIfNoAccessibleLabelFound };
+export { Alert, AlertVariant, AlignContent, AlignItems, AlignSelf, AppBar, AppContainer, AppContainerContext, AppContent, AppSidePanel, Badge, BadgeVariant, BaseBreadcrumbs, BaseGrid, BaseSkeleton, BreadcrumbItem, Breadcrumbs, Button, ButtonLink, ButtonVariant, Card, CardActions, CardBody, CardHeader, Checkbox, CheckboxGroup, CheckboxGroupOrientation, ColorPalette, ConditionalWrapper, DataVizColorPalette, DetailedCard, DetailedCardCollapsibleSectionItems, DetailedCardHeader, DetailedCardSection, DetailedCardSectionItem, FlexDirection, FlexWrap, Flexbox, FontFamily, Grid, GridItem, Heading, HeadingComponent, HeadingVariant, Icon, IconButton, IconButtonVariant, IconSize, JustifyContent, JustifyItems, JustifySelf, Link, LinkButton, NeutralColorPalette, Number$1 as Number, Pill, ProductColorPalette, Radio, RadioGroup, RadioGroupOrientation, RedsiftAppBarColorBackground, RedsiftAppBarColorExpandIconBackgroundHover, RedsiftAppBarColorExpandIconHover, RedsiftAppBarColorExpandIconResting, RedsiftAppBarColorText, RedsiftColorDefaultActive, RedsiftColorDefaultActiveHover, RedsiftColorDefaultHover, RedsiftColorDefaultPrimary, RedsiftColorDefaultPrimaryActive, RedsiftColorDefaultPrimaryActiveHover, RedsiftColorDefaultSecondary, RedsiftColorErrorActive, RedsiftColorErrorActiveHover, RedsiftColorErrorHover, RedsiftColorErrorPrimary, RedsiftColorErrorPrimaryActive, RedsiftColorErrorPrimaryActiveHover, RedsiftColorErrorSecondary, RedsiftColorHardenizeActive, RedsiftColorHardenizeActiveHover, RedsiftColorHardenizeHover, RedsiftColorHardenizePrimary, RedsiftColorHardenizePrimaryActive, RedsiftColorHardenizePrimaryActiveHover, RedsiftColorHardenizeSecondary, RedsiftColorInfoActive, RedsiftColorInfoActiveHover, RedsiftColorInfoHover, RedsiftColorInfoPrimary, RedsiftColorInfoPrimaryActive, RedsiftColorInfoPrimaryActiveHover, RedsiftColorInfoSecondary, RedsiftColorNeutralBlack, RedsiftColorNeutralDarkgrey, RedsiftColorNeutralLightgrey, RedsiftColorNeutralMidgrey, RedsiftColorNeutralWhite, RedsiftColorNeutralXlightgrey, RedsiftColorNoDataActive, RedsiftColorNoDataActiveHover, RedsiftColorNoDataHover, RedsiftColorNoDataPrimary, RedsiftColorNoDataPrimaryActive, RedsiftColorNoDataPrimaryActiveHover, RedsiftColorNoDataSecondary, RedsiftColorOndmarcActive, RedsiftColorOndmarcActiveHover, RedsiftColorOndmarcHover, RedsiftColorOndmarcPrimary, RedsiftColorOndmarcPrimaryActive, RedsiftColorOndmarcPrimaryActiveHover, RedsiftColorOndmarcSecondary, RedsiftColorOndomainActive, RedsiftColorOndomainActiveHover, RedsiftColorOndomainHover, RedsiftColorOndomainPrimary, RedsiftColorOndomainPrimaryActive, RedsiftColorOndomainPrimaryActiveHover, RedsiftColorOndomainSecondary, RedsiftColorOninboxActive, RedsiftColorOninboxActiveHover, RedsiftColorOninboxHover, RedsiftColorOninboxPrimary, RedsiftColorOninboxPrimaryActive, RedsiftColorOninboxPrimaryActiveHover, RedsiftColorOninboxSecondary, RedsiftColorQuestionActive, RedsiftColorQuestionActiveHover, RedsiftColorQuestionHover, RedsiftColorQuestionPrimary, RedsiftColorQuestionPrimaryActive, RedsiftColorQuestionPrimaryActiveHover, RedsiftColorQuestionSecondary, RedsiftColorSuccessActive, RedsiftColorSuccessActiveHover, RedsiftColorSuccessHover, RedsiftColorSuccessPrimary, RedsiftColorSuccessPrimaryActive, RedsiftColorSuccessPrimaryActiveHover, RedsiftColorSuccessSecondary, RedsiftColorToolsActive, RedsiftColorToolsActiveHover, RedsiftColorToolsHover, RedsiftColorToolsPrimary, RedsiftColorToolsPrimaryActive, RedsiftColorToolsPrimaryActiveHover, RedsiftColorToolsSecondary, RedsiftColorWarningActive, RedsiftColorWarningActiveHover, RedsiftColorWarningHover, RedsiftColorWarningPrimary, RedsiftColorWarningPrimaryActive, RedsiftColorWarningPrimaryActiveHover, RedsiftColorWarningSecondary, RedsiftColorWebsiteActive, RedsiftColorWebsiteActiveHover, RedsiftColorWebsiteHover, RedsiftColorWebsitePrimary, RedsiftColorWebsitePrimaryActive, RedsiftColorWebsitePrimaryActiveHover, RedsiftColorWebsiteSecondary, RedsiftDataVizColorBlueDark, RedsiftDataVizColorBlueDarker, RedsiftDataVizColorBlueDefault, RedsiftDataVizColorBlueLight, RedsiftDataVizColorBlueLighter, RedsiftDataVizColorBrownDark, RedsiftDataVizColorBrownDarker, RedsiftDataVizColorBrownDefault, RedsiftDataVizColorBrownLight, RedsiftDataVizColorBrownLighter, RedsiftDataVizColorCyanDark, RedsiftDataVizColorCyanDarker, RedsiftDataVizColorCyanDefault, RedsiftDataVizColorCyanLight, RedsiftDataVizColorCyanLighter, RedsiftDataVizColorGreenDark, RedsiftDataVizColorGreenDarker, RedsiftDataVizColorGreenDefault, RedsiftDataVizColorGreenLight, RedsiftDataVizColorGreenLighter, RedsiftDataVizColorGreyDark, RedsiftDataVizColorGreyDarker, RedsiftDataVizColorGreyDefault, RedsiftDataVizColorGreyLight, RedsiftDataVizColorGreyLighter, RedsiftDataVizColorOrangeDark, RedsiftDataVizColorOrangeDarker, RedsiftDataVizColorOrangeDefault, RedsiftDataVizColorOrangeLight, RedsiftDataVizColorOrangeLighter, RedsiftDataVizColorPinkDark, RedsiftDataVizColorPinkDarker, RedsiftDataVizColorPinkDefault, RedsiftDataVizColorPinkLight, RedsiftDataVizColorPinkLighter, RedsiftDataVizColorPurpleDark, RedsiftDataVizColorPurpleDarker, RedsiftDataVizColorPurpleDefault, RedsiftDataVizColorPurpleLight, RedsiftDataVizColorPurpleLighter, RedsiftDataVizColorRedDark, RedsiftDataVizColorRedDarker, RedsiftDataVizColorRedDefault, RedsiftDataVizColorRedLight, RedsiftDataVizColorRedLighter, RedsiftDataVizColorYellowDark, RedsiftDataVizColorYellowDarker, RedsiftDataVizColorYellowDefault, RedsiftDataVizColorYellowLight, RedsiftDataVizColorYellowLighter, 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, RedsiftTypographyFontFamilyElectrolize, RedsiftTypographyFontFamilyRaleway, RedsiftTypographyFontFamilySourceCodePro, RedsiftTypographyFontWeightBold, RedsiftTypographyFontWeightMedium, RedsiftTypographyFontWeightRegular, RedsiftTypographyFontWeightSemiBold, RedsiftTypographyH1FontFamily, RedsiftTypographyH1FontSize, RedsiftTypographyH1FontWeight, RedsiftTypographyH1LineHeight, RedsiftTypographyH1TextTransform, RedsiftTypographyH2FontFamily, RedsiftTypographyH2FontSize, RedsiftTypographyH2FontWeight, RedsiftTypographyH2LineHeight, RedsiftTypographyH2TextTransform, RedsiftTypographyH3FontFamily, RedsiftTypographyH3FontSize, RedsiftTypographyH3FontWeight, RedsiftTypographyH3LineHeight, RedsiftTypographyH3TextTransform, RedsiftTypographyH4FontFamily, RedsiftTypographyH4FontSize, RedsiftTypographyH4FontWeight, RedsiftTypographyH4LineHeight, RedsiftTypographyH4TextTransform, RedsiftTypographyH5FontFamily, RedsiftTypographyH5FontSize, RedsiftTypographyH5FontWeight, RedsiftTypographyH5LineHeight, RedsiftTypographyH5TextTransform, RedsiftTypographyHelperFontFamily, RedsiftTypographyHelperFontSize, RedsiftTypographyHelperFontWeight, RedsiftTypographyHelperLineHeight, RedsiftTypographyInputTextFontFamily, RedsiftTypographyInputTextFontSize, RedsiftTypographyInputTextFontWeight, RedsiftTypographyInputTextLineHeight, RedsiftTypographyLinkFontFamily, RedsiftTypographyLinkFontSize, RedsiftTypographyLinkFontWeight, RedsiftTypographyLinkLineHeight, RedsiftTypographyPillFontFamily, RedsiftTypographyPillFontSize, RedsiftTypographyPillFontWeight, RedsiftTypographyPillLineHeight, RedsiftTypographySubtitleFontFamily, RedsiftTypographySubtitleFontSize, RedsiftTypographySubtitleFontWeight, RedsiftTypographySubtitleLineHeight, RedsiftTypographySubtitleTextTransform, RedsiftTypographyTooltipFontFamily, RedsiftTypographyTooltipFontSize, RedsiftTypographyTooltipFontWeight, RedsiftTypographyTooltipLineHeight, Shield, ShieldVariant, SideNavigationMenu, SideNavigationMenuBar, SideNavigationMenuItem, SideNavigationMenuReducerActionType, Skeleton, SkeletonCircle, SkeletonText, SkeletonTextVariant, Spinner, SpinnerSize, StyledButton, StyledLink, Switch, SwitchGroup, SwitchGroupOrientation, Text, TextComponent, TextField, TextFieldVariant, TextVariant, baseContainer, baseFlexbox, baseGrid, baseInternalSpacing, baseLayout, basePositioning, baseSizing, baseSpacing, baseStyling, filterComponents, isComponent, partitionComponents, useAppSidePanel, useBoundingClientRect, $325a3faab7a68acd$export$a16aca283550c30d as useCollator, $896ba0a80a8f4d36$export$85fd5fdf27bacc79 as useDateFormatter, $bb77f239b46e8c72$export$3274cf84b703fff as useFilter, $704cf1d3b684cc5c$export$535bd6ca7f90a273 as useIsSSR, $33bf17300c498528$export$a2f47a3d2973640 as useListFormatter, $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 as useLocale, $fca6afa0e843324b$export$f12b703ca79dfbb1 as useLocalizedStringFormatter, $a916eb452884faea$export$b7a616150fdb9f44 as useNumberFormatter, useSideNavigationMenuBar, useWindowSize, warnIfNoAccessibleLabelFound };
 //# sourceMappingURL=index.js.map