@redsift/design-system 8.0.7 → 8.1.0

package/index.js

@@ -4,7 +4,7 @@ export { SSRProvider, useIsSSR } from '@react-aria/ssr';
 import * as React from 'react';
 import React__default, { useState, useEffect, forwardRef, useMemo, useContext, useRef, useCallback, useReducer, useLayoutEffect, useId as useId$1 } from 'react';
 import classNames from 'classnames';
-import { mdiClose, mdiAlert, mdiCheckCircle, mdiAlertCircle, mdiInformation, mdiMenu, mdiMenuOpen, mdiChevronDown, mdiChevronRight, mdiChevronUp, mdiCheckboxMarked, mdiMinusBox, mdiCheckboxBlankOutline, mdiPageLast, mdiKeyboardCaps, mdiRadioboxMarked, mdiRadioboxBlank } from '@redsift/icons';
+import { mdiClose as mdiClose$1, mdiAlert, mdiCheckCircle, mdiAlertCircle, mdiInformation, mdiMenu, mdiMenuOpen, mdiChevronDown, mdiChevronRight, mdiChevronUp, mdiCheckboxMarked, mdiMinusBox, mdiCheckboxBlankOutline, mdiPageLast, mdiKeyboardCaps, mdiRadioboxMarked, mdiRadioboxBlank } from '@redsift/icons';
 import styled, { css, keyframes } from 'styled-components';
 import { useFocusRing } from '@react-aria/focus';
 import * as ReactDOM from 'react-dom';
@@ -894,12 +894,15 @@ const baseContainer = css`
   font-family: var(--redsift-typography-body-font-family);
   font-size: var(--redsift-typography-body-font-size);
   font-weight: var(--redsift-typography-body-font-weight);
-  line-height: var(--redsift-typography-body-line-height);
+  line-height: 20px;
   color: var(--redsift-color-neutral-black);
 
   ${baseInternalSpacing}
-  ${baseFlexbox}
+  ${baseSpacing}
+  ${baseSizing}
+  ${basePositioning}
   ${baseGrid}
+  ${baseFlexbox}
 `;
 const focusRing = css`
   @media (prefers-reduced-motion: no-preference) {
@@ -1047,10 +1050,10 @@ const StyledIcon = styled.span`
 }}
 `;
 
-const _excluded$J = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps"];
-const COMPONENT_NAME$L = 'Icon';
-const CLASSNAME$L = 'redsift-icon';
-const DEFAULT_PROPS$L = {
+const _excluded$N = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps"];
+const COMPONENT_NAME$N = 'Icon';
+const CLASSNAME$N = 'redsift-icon';
+const DEFAULT_PROPS$N = {
   size: IconSize.medium
 };
 
@@ -1068,7 +1071,7 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
       size,
       svgProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$J);
+    forwardedProps = _objectWithoutProperties(props, _excluded$N);
   return /*#__PURE__*/React__default.createElement(StyledIcon, _extends$1({}, forwardedProps, {
     $color: color,
     $size: size,
@@ -1076,23 +1079,24 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-label": ariaLabel,
     className: classNames(Icon.className, className),
     ref: ref
-  }), /*#__PURE__*/React__default.createElement("svg", _extends$1({}, svgProps, {
-    "aria-hidden": ariaLabel ? ariaHidden ? ariaHidden : undefined : true,
-    "aria-label": ariaLabel,
-    focusable: "false",
-    height: "1em",
-    preserveAspectRatio: "xMidYMid meet",
-    role: "img",
-    viewBox: "0 0 24 24",
-    width: "1em"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: icon,
+  }), /*#__PURE__*/React__default.cloneElement(typeof icon === 'string' || Array.isArray(icon) && icon.every(it => typeof it === 'string') ? /*#__PURE__*/React__default.createElement("svg", null, (Array.isArray(icon) ? icon : [icon]).map(path => /*#__PURE__*/React__default.createElement("path", {
+    key: path,
+    d: path,
     fill: "currentColor"
-  })), badge ? badge : null);
+  }))) : /*#__PURE__*/React__default.isValidElement(icon) ? icon : /*#__PURE__*/React__default.createElement(React__default.Fragment, null), _objectSpread2({
+    'aria-hidden': ariaLabel ? ariaHidden ? ariaHidden : undefined : true,
+    'aria-label': ariaLabel,
+    focusable: 'false',
+    height: '1em',
+    preserveAspectRatio: 'xMidYMid meet',
+    role: 'img',
+    viewBox: '0 0 24 24',
+    width: '1em'
+  }, svgProps)), badge ? badge : null);
 });
-Icon.className = CLASSNAME$L;
-Icon.defaultProps = DEFAULT_PROPS$L;
-Icon.displayName = COMPONENT_NAME$L;
+Icon.className = CLASSNAME$N;
+Icon.defaultProps = DEFAULT_PROPS$N;
+Icon.displayName = COMPONENT_NAME$N;
 
 /**
  * Component variant.
@@ -1365,10 +1369,10 @@ const StyledAppContainer = styled.div`
 }}
 `;
 
-const _excluded$I = ["children", "className", "locale", "productTheme"];
-const COMPONENT_NAME$K = 'AppContainer';
-const CLASSNAME$K = 'redsift-app-container';
-const DEFAULT_PROPS$K = {};
+const _excluded$M = ["children", "className", "locale", "productTheme"];
+const COMPONENT_NAME$M = 'AppContainer';
+const CLASSNAME$M = 'redsift-app-container';
+const DEFAULT_PROPS$M = {};
 
 /**
  * The AppContainer component.
@@ -1380,7 +1384,7 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
       locale,
       productTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$I);
+    forwardedProps = _objectWithoutProperties(props, _excluded$M);
   const {
     hasAppBar,
     hasAppSidePanel,
@@ -1426,9 +1430,9 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
     locale: locale
   }, children)));
 });
-AppContainer.className = CLASSNAME$K;
-AppContainer.defaultProps = DEFAULT_PROPS$K;
-AppContainer.displayName = COMPONENT_NAME$K;
+AppContainer.className = CLASSNAME$M;
+AppContainer.defaultProps = DEFAULT_PROPS$M;
+AppContainer.displayName = COMPONENT_NAME$M;
 
 var spinnerDefault = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPgogIDxzdHlsZT4KICAgIC5zcGlubmluZyB7CiAgICAgIGFuaW1hdGlvbjogc3Bpbm5pbmcta2V5ZnJhbWVzIDMwMDBtcyBsaW5lYXIgaW5maW5pdGUgbm9ybWFsIGZvcndhcmRzOwogICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGN1YmljLWJlemllcigwLjQyLCAwLCAwLjU4LCAxKTsKICAgIH0KICAgIEBrZXlmcmFtZXMgc3Bpbm5pbmcta2V5ZnJhbWVzIHsKICAgICAgMCUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgwZGVnKTsKICAgICAgfQoKICAgICAgMzMlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMTgwZGVnKTsKICAgICAgfQoKICAgICAgNTAlIHsKICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpOwogICAgICB9CgogICAgICA4MyUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgzNjBkZWcpOwogICAgICB9CgogICAgICAxMDAlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMzYwZGVnKQogICAgICB9CiAgICB9CiAgPC9zdHlsZT4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MpIgogICAgZmlsbD0iIzAwNzllMSIKICAgIGQ9Ik0zMTggMTg2LjlWMTA4LjhMMjAwIDU3IDgyIDEwOC44djc4LjFDODIgMjU5IDEzMi4zIDMyNi40IDIwMCAzNDNjNjcuNy0xNi42IDExOC04NCAxMTgtMTU2LjF6TTQwMCAyMDBjMCAxMTAuNS04OS41IDIwMC0yMDAgMjAwUzAgMzEwLjUgMCAyMDAgODkuNSAwIDIwMCAwczIwMCA4OS41IDIwMCAyMDB6IgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrcyI+CiAgICA8cGF0aAogICAgICBjbGFzcz0ic3Bpbm5pbmciCiAgICAgIGQ9Ik0wLDIwMEMwLDg5LjU0MzA1LDg5LjU0MzA1LDAsMjAwLDB2NDAwQzg5LjU0MzA1LDQwMCwwLDMxMC40NTY5NSwwLDIwMFoiCiAgICAgIGZpbGw9IiNmZmYiCiAgICAvPgogIDwvbWFzaz4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MyKSIKICAgIGZpbGw9IiMwMDc5ZTEiCiAgICBkPSJNODIsMTg2LjkzOXYtNzguMDg5TDIwMCw1N2wxMTgsNTEuODV2NzguMDg5QzMxOCwyNTkuMDAyLDI2Ny42ODYsMzI2LjQwMiwyMDAsMzQzQzEzMi4zMTQsMzI2LjQwMiw4MiwyNTkuMDAyLDgyLDE4Ni45MzlaIgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrczIiPgogICAgPHBhdGgKICAgICAgY2xhc3M9InNwaW5uaW5nIgogICAgICBkPSJNNDAwIDIwMEM0MDAgMzEwLjUgMzEwLjUgNDAwIDIwMCA0MDBWMGMxMTAuNSAwIDIwMCA4OS41IDIwMCAyMDB6IgogICAgICBmaWxsPSIjZmZmIgogICAgLz4KICA8L21hc2s+Cjwvc3ZnPg==';
 
@@ -1448,7 +1452,7 @@ var spinnerTools = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My
 
 var spinnerWebsite = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPgogIDxzdHlsZT4KICAgIC5zcGlubmluZyB7CiAgICAgIGFuaW1hdGlvbjogc3Bpbm5pbmcta2V5ZnJhbWVzIDMwMDBtcyBsaW5lYXIgaW5maW5pdGUgbm9ybWFsIGZvcndhcmRzOwogICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGN1YmljLWJlemllcigwLjQyLCAwLCAwLjU4LCAxKTsKICAgIH0KICAgIEBrZXlmcmFtZXMgc3Bpbm5pbmcta2V5ZnJhbWVzIHsKICAgICAgMCUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgwZGVnKTsKICAgICAgfQoKICAgICAgMzMlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMTgwZGVnKTsKICAgICAgfQoKICAgICAgNTAlIHsKICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpOwogICAgICB9CgogICAgICA4MyUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgzNjBkZWcpOwogICAgICB9CgogICAgICAxMDAlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMzYwZGVnKQogICAgICB9CiAgICB9CiAgPC9zdHlsZT4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MpIgogICAgZmlsbD0iIzAwNzllMSIKICAgIGQ9Ik0zMTggMTg2LjlWMTA4LjhMMjAwIDU3IDgyIDEwOC44djc4LjFDODIgMjU5IDEzMi4zIDMyNi40IDIwMCAzNDNjNjcuNy0xNi42IDExOC04NCAxMTgtMTU2LjF6TTQwMCAyMDBjMCAxMTAuNS04OS41IDIwMC0yMDAgMjAwUzAgMzEwLjUgMCAyMDAgODkuNSAwIDIwMCAwczIwMCA4OS41IDIwMCAyMDB6IgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrcyI+CiAgICA8cGF0aAogICAgICBjbGFzcz0ic3Bpbm5pbmciCiAgICAgIGQ9Ik0wLDIwMEMwLDg5LjU0MzA1LDg5LjU0MzA1LDAsMjAwLDB2NDAwQzg5LjU0MzA1LDQwMCwwLDMxMC40NTY5NSwwLDIwMFoiCiAgICAgIGZpbGw9IiNmZmYiCiAgICAvPgogIDwvbWFzaz4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MyKSIKICAgIGZpbGw9IiMwMDc5ZTEiCiAgICBkPSJNODIsMTg2LjkzOXYtNzguMDg5TDIwMCw1N2wxMTgsNTEuODV2NzguMDg5QzMxOCwyNTkuMDAyLDI2Ny42ODYsMzI2LjQwMiwyMDAsMzQzQzEzMi4zMTQsMzI2LjQwMiw4MiwyNTkuMDAyLDgyLDE4Ni45MzlaIgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrczIiPgogICAgPHBhdGgKICAgICAgY2xhc3M9InNwaW5uaW5nIgogICAgICBkPSJNNDAwIDIwMEM0MDAgMzEwLjUgMzEwLjUgNDAwIDIwMCA0MDBWMGMxMTAuNSAwIDIwMCA4OS41IDIwMCAyMDB6IgogICAgICBmaWxsPSIjZmZmIgogICAgLz4KICA8L21hc2s+Cjwvc3ZnPg==';
 
-const _excluded$H = ["aria-hidden", "aria-label", "className", "color", "size"];
+const _excluded$L = ["aria-hidden", "aria-label", "className", "color", "size"];
 const colorToFile = {
   default: spinnerDefault,
   hardenize: spinnerHardenize,
@@ -1460,9 +1464,9 @@ const colorToFile = {
   tools: spinnerTools,
   website: spinnerWebsite
 };
-const COMPONENT_NAME$J = 'Spinner';
-const CLASSNAME$J = 'redsift-shield';
-const DEFAULT_PROPS$J = {
+const COMPONENT_NAME$L = 'Spinner';
+const CLASSNAME$L = 'redsift-shield';
+const DEFAULT_PROPS$L = {
   color: ColorPalette.default,
   size: SpinnerSize.medium
 };
@@ -1503,7 +1507,7 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
       color: propsColor,
       size
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$H);
+    forwardedProps = _objectWithoutProperties(props, _excluded$L);
   const {
     width,
     height
@@ -1525,14 +1529,14 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
     $size: size
   }));
 });
-Spinner.className = CLASSNAME$J;
-Spinner.defaultProps = DEFAULT_PROPS$J;
-Spinner.displayName = COMPONENT_NAME$J;
-
-const _excluded$G = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isHovered", "isLoading", "leftIcon", "rightIcon", "variant"];
-const COMPONENT_NAME$I = 'Button';
-const CLASSNAME$I = 'redsift-button';
-const DEFAULT_PROPS$I = {
+Spinner.className = CLASSNAME$L;
+Spinner.defaultProps = DEFAULT_PROPS$L;
+Spinner.displayName = COMPONENT_NAME$L;
+
+const _excluded$K = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isHovered", "isLoading", "leftIcon", "rightIcon", "variant"];
+const COMPONENT_NAME$K = 'Button';
+const CLASSNAME$K = 'redsift-button';
+const DEFAULT_PROPS$K = {
   color: ColorPalette.default,
   height: 'fit-content',
   variant: ButtonVariant.primary
@@ -1561,7 +1565,7 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
       rightIcon,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$G);
+    forwardedProps = _objectWithoutProperties(props, _excluded$K);
   const isDisabled = isLoading || propsIsDisabled || disabled;
   return /*#__PURE__*/React__default.createElement(StyledButton, _extends$1({}, forwardedProps, {
     $color: color,
@@ -1575,22 +1579,22 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     className: classNames(Button.className, className),
     disabled: isDisabled,
     ref: buttonRef
-  }), leftIcon ? typeof leftIcon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+  }), leftIcon ? /*#__PURE__*/React__default.createElement(Icon, {
     icon: leftIcon,
     "aria-hidden": "true",
     className: "left"
-  }) : leftIcon : null, isLoading ? /*#__PURE__*/React__default.createElement(Spinner, {
+  }) : null, isLoading ? /*#__PURE__*/React__default.createElement(Spinner, {
     size: "small",
     color: "no-data"
-  }) : null, /*#__PURE__*/React__default.createElement("span", null, children), rightIcon ? typeof rightIcon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+  }) : null, /*#__PURE__*/React__default.createElement("span", null, children), rightIcon ? /*#__PURE__*/React__default.createElement(Icon, {
     icon: rightIcon,
     "aria-hidden": "true",
     className: "right"
-  }) : rightIcon : null);
+  }) : null);
 });
-Button.className = CLASSNAME$I;
-Button.defaultProps = DEFAULT_PROPS$I;
-Button.displayName = COMPONENT_NAME$I;
+Button.className = CLASSNAME$K;
+Button.defaultProps = DEFAULT_PROPS$K;
+Button.displayName = COMPONENT_NAME$K;
 
 /**
  * Component style.
@@ -1617,10 +1621,10 @@ const StyledIconButton = styled(StyledButton)`
 }}
 `;
 
-const _excluded$F = ["className", "color", "disabled", "icon", "isActive", "isDisabled", "isHovered", "isLoading", "variant"];
-const COMPONENT_NAME$H = 'IconButton';
-const CLASSNAME$H = 'redsift-icon-button';
-const DEFAULT_PROPS$H = {
+const _excluded$J = ["className", "color", "disabled", "icon", "isActive", "isDisabled", "isHovered", "isLoading", "variant"];
+const COMPONENT_NAME$J = 'IconButton';
+const CLASSNAME$J = 'redsift-icon-button';
+const DEFAULT_PROPS$J = {
   color: ColorPalette.default,
   height: 'fit-content',
   variant: IconButtonVariant.unstyled
@@ -1645,7 +1649,7 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
       isLoading,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$F);
+    forwardedProps = _objectWithoutProperties(props, _excluded$J);
   const isDisabled = props.isLoading || propsIsDisabled || disabled;
   warnIfNoAccessibleLabelFound(props);
   return /*#__PURE__*/React__default.createElement(StyledIconButton, _extends$1({}, forwardedProps, {
@@ -1667,9 +1671,9 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
     color: isDisabled ? undefined : color
   }));
 });
-IconButton.className = CLASSNAME$H;
-IconButton.defaultProps = DEFAULT_PROPS$H;
-IconButton.displayName = COMPONENT_NAME$H;
+IconButton.className = CLASSNAME$J;
+IconButton.defaultProps = DEFAULT_PROPS$J;
+IconButton.displayName = COMPONENT_NAME$J;
 
 /**
  * Component style.
@@ -1813,10 +1817,10 @@ const StyledHeading = styled.span`
 }}
 `;
 
-const _excluded$E = ["as", "children", "className", "noWrap", "variant"];
-const COMPONENT_NAME$G = 'Heading';
-const CLASSNAME$G = 'redsift-heading';
-const DEFAULT_PROPS$G = {};
+const _excluded$I = ["as", "children", "className", "noWrap", "variant"];
+const COMPONENT_NAME$I = 'Heading';
+const CLASSNAME$I = 'redsift-heading';
+const DEFAULT_PROPS$I = {};
 
 /**
  * The Heading component.
@@ -1829,7 +1833,7 @@ const Heading = /*#__PURE__*/forwardRef((props, ref) => {
       noWrap,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$E);
+    forwardedProps = _objectWithoutProperties(props, _excluded$I);
   return /*#__PURE__*/React__default.createElement(StyledHeading, _extends$1({
     as: as
   }, forwardedProps, {
@@ -1839,9 +1843,9 @@ const Heading = /*#__PURE__*/forwardRef((props, ref) => {
     $variant: variant ? variant : as === 'span' ? 'body' : as
   }), children);
 });
-Heading.className = CLASSNAME$G;
-Heading.defaultProps = DEFAULT_PROPS$G;
-Heading.displayName = COMPONENT_NAME$G;
+Heading.className = CLASSNAME$I;
+Heading.defaultProps = DEFAULT_PROPS$I;
+Heading.displayName = COMPONENT_NAME$I;
 
 /**
  * Component style.
@@ -1859,10 +1863,10 @@ const StyledFlexbox = styled.div`
   ${baseFlexbox}
 `;
 
-const _excluded$D = ["children", "className"];
-const COMPONENT_NAME$F = 'Flexbox';
-const CLASSNAME$F = 'redsift-flex-box';
-const DEFAULT_PROPS$F = {
+const _excluded$H = ["children", "className"];
+const COMPONENT_NAME$H = 'Flexbox';
+const CLASSNAME$H = 'redsift-flex-box';
+const DEFAULT_PROPS$H = {
   gap: '16px'
 };
 
@@ -1874,20 +1878,20 @@ const Flexbox = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$D);
+    forwardedProps = _objectWithoutProperties(props, _excluded$H);
   return /*#__PURE__*/React__default.createElement(StyledFlexbox, _extends$1({}, forwardedProps, {
     className: classNames(Flexbox.className, className),
     ref: ref
   }), children);
 });
-Flexbox.className = CLASSNAME$F;
-Flexbox.defaultProps = DEFAULT_PROPS$F;
-Flexbox.displayName = COMPONENT_NAME$F;
-
-const _excluded$C = ["children", "className", "isClosable", "isClosed", "onClose", "title", "variant"];
-const COMPONENT_NAME$E = 'Alert';
-const CLASSNAME$E = 'redsift-alert';
-const DEFAULT_PROPS$E = {
+Flexbox.className = CLASSNAME$H;
+Flexbox.defaultProps = DEFAULT_PROPS$H;
+Flexbox.displayName = COMPONENT_NAME$H;
+
+const _excluded$G = ["children", "className", "isClosable", "isClosed", "onClose", "title", "variant"];
+const COMPONENT_NAME$G = 'Alert';
+const CLASSNAME$G = 'redsift-alert';
+const DEFAULT_PROPS$G = {
   variant: 'info'
 };
 const getVariant$1 = variant => {
@@ -1929,7 +1933,7 @@ const Alert = /*#__PURE__*/forwardRef((props, ref) => {
       title,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$C);
+    forwardedProps = _objectWithoutProperties(props, _excluded$G);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$5);
   const {
     color,
@@ -1970,15 +1974,15 @@ const Alert = /*#__PURE__*/forwardRef((props, ref) => {
   }, title) : null), isClosable ? /*#__PURE__*/React__default.createElement(IconButton, {
     "aria-label": stringFormatter.format('close'),
     className: `${Alert.className}-header__icon-button`,
-    icon: mdiClose,
+    icon: mdiClose$1,
     onClick: handleClose
   }) : null), children ? /*#__PURE__*/React__default.createElement("div", {
     className: `${Alert.className}__content`
   }, children) : null);
 });
-Alert.className = CLASSNAME$E;
-Alert.defaultProps = DEFAULT_PROPS$E;
-Alert.displayName = COMPONENT_NAME$E;
+Alert.className = CLASSNAME$G;
+Alert.defaultProps = DEFAULT_PROPS$G;
+Alert.displayName = COMPONENT_NAME$G;
 
 var expand$5 = "Expand left side panel";
 var collapse$5 = "Collapse left side panel";
@@ -2075,10 +2079,10 @@ const StyledAppBar = styled.header`
   }
 `;
 
-const _excluded$B = ["children", "className", "collapseIconButtonProps", "collapseIconButtonRef", "expandIconButtonProps", "expandIconButtonRef", "fallbackTitle", "title"];
-const COMPONENT_NAME$D = 'AppBar';
-const CLASSNAME$D = 'redsift-app-bar';
-const DEFAULT_PROPS$D = {};
+const _excluded$F = ["children", "className", "collapseIconButtonProps", "collapseIconButtonRef", "expandIconButtonProps", "expandIconButtonRef", "fallbackTitle", "title"];
+const COMPONENT_NAME$F = 'AppBar';
+const CLASSNAME$F = 'redsift-app-bar';
+const DEFAULT_PROPS$F = {};
 
 /**
  * The AppBar component.
@@ -2094,7 +2098,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
       fallbackTitle,
       title: propsTitle
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$B);
+    forwardedProps = _objectWithoutProperties(props, _excluded$F);
   const {
     isLoaded
   } = useIsLoaded();
@@ -2133,9 +2137,9 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${AppBar.className}__right`
   }, children));
 });
-AppBar.className = CLASSNAME$D;
-AppBar.defaultProps = DEFAULT_PROPS$D;
-AppBar.displayName = COMPONENT_NAME$D;
+AppBar.className = CLASSNAME$F;
+AppBar.defaultProps = DEFAULT_PROPS$F;
+AppBar.displayName = COMPONENT_NAME$F;
 
 /**
  * Component style.
@@ -2201,10 +2205,10 @@ const StyledAppContent = styled.main`
 }}
 `;
 
-const _excluded$A = ["children", "className", "productTheme"];
-const COMPONENT_NAME$C = 'AppContent';
-const CLASSNAME$C = 'redsift-app-content';
-const DEFAULT_PROPS$C = {};
+const _excluded$E = ["children", "className", "productTheme"];
+const COMPONENT_NAME$E = 'AppContent';
+const CLASSNAME$E = 'redsift-app-content';
+const DEFAULT_PROPS$E = {};
 
 /**
  * The AppContent component.
@@ -2215,7 +2219,7 @@ const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       productTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$A);
+    forwardedProps = _objectWithoutProperties(props, _excluded$E);
   const {
     isLoaded
   } = useIsLoaded();
@@ -2228,9 +2232,9 @@ const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-AppContent.className = CLASSNAME$C;
-AppContent.defaultProps = DEFAULT_PROPS$C;
-AppContent.displayName = COMPONENT_NAME$C;
+AppContent.className = CLASSNAME$E;
+AppContent.defaultProps = DEFAULT_PROPS$E;
+AppContent.displayName = COMPONENT_NAME$E;
 
 /**
  * Component style.
@@ -2324,10 +2328,10 @@ const StyledAppSidePanel = styled.div`
   }
 `;
 
-const _excluded$z = ["children", "className", "featuredElements", "isCollapsed", "logo"];
-const COMPONENT_NAME$B = 'AppSidePanel';
-const CLASSNAME$B = 'redsift-app-side-panel';
-const DEFAULT_PROPS$B = {};
+const _excluded$D = ["children", "className", "featuredElements", "isCollapsed", "logo"];
+const COMPONENT_NAME$D = 'AppSidePanel';
+const CLASSNAME$D = 'redsift-app-side-panel';
+const DEFAULT_PROPS$D = {};
 
 /**
  * The AppSidePanel component.
@@ -2340,7 +2344,7 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
       isCollapsed = false,
       logo
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$z);
+    forwardedProps = _objectWithoutProperties(props, _excluded$D);
   const appContainerState = useContext(AppContainerContext);
   return /*#__PURE__*/React__default.createElement(StyledAppSidePanel, _extends$1({}, forwardedProps, {
     $isCollapsed: !!(isCollapsed || appContainerState !== null && appContainerState !== void 0 && appContainerState.isSidePanelCollapsed),
@@ -2355,9 +2359,9 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${AppSidePanel.className}__featured`
   }, featuredElements) : null, children);
 });
-AppSidePanel.className = CLASSNAME$B;
-AppSidePanel.defaultProps = DEFAULT_PROPS$B;
-AppSidePanel.displayName = COMPONENT_NAME$B;
+AppSidePanel.className = CLASSNAME$D;
+AppSidePanel.defaultProps = DEFAULT_PROPS$D;
+AppSidePanel.displayName = COMPONENT_NAME$D;
 
 /**
  * Context props.
@@ -2591,10 +2595,10 @@ const StyledBadge = styled.div`
 }}
 `;
 
-const _excluded$y = ["autoBreak", "children", "className", "color", "isReversed", "variant"];
-const COMPONENT_NAME$A = 'Badge';
-const CLASSNAME$A = 'redsift-badge';
-const DEFAULT_PROPS$A = {
+const _excluded$C = ["autoBreak", "children", "className", "color", "isReversed", "variant"];
+const COMPONENT_NAME$C = 'Badge';
+const CLASSNAME$C = 'redsift-badge';
+const DEFAULT_PROPS$C = {
   color: ColorPalette.question,
   variant: BadgeVariant.dot
 };
@@ -2611,7 +2615,7 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
       isReversed,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$y);
+    forwardedProps = _objectWithoutProperties(props, _excluded$C);
   return /*#__PURE__*/React__default.createElement(StyledBadge, _extends$1({}, forwardedProps, {
     $autoBreak: autoBreak,
     $color: color,
@@ -2621,14 +2625,14 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), variant === BadgeVariant.standard ? children : null);
 });
-Badge.className = CLASSNAME$A;
-Badge.defaultProps = DEFAULT_PROPS$A;
-Badge.displayName = COMPONENT_NAME$A;
+Badge.className = CLASSNAME$C;
+Badge.defaultProps = DEFAULT_PROPS$C;
+Badge.displayName = COMPONENT_NAME$C;
 
-const _excluded$x = ["as", "badge", "badgeProps", "children", "className", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "tabIndex", "withoutIcons"];
-const COMPONENT_NAME$z = 'SideNavigationMenuItem';
-const CLASSNAME$z = 'redsift-side-navigation-menu-item';
-const DEFAULT_PROPS$z = {};
+const _excluded$B = ["as", "badge", "badgeProps", "children", "className", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "tabIndex", "withoutIcons"];
+const COMPONENT_NAME$B = 'SideNavigationMenuItem';
+const CLASSNAME$B = 'redsift-side-navigation-menu-item';
+const DEFAULT_PROPS$B = {};
 
 /**
  * The SideNavigationMenuItem component.
@@ -2653,7 +2657,7 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
       tabIndex,
       withoutIcons
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$x);
+    forwardedProps = _objectWithoutProperties(props, _excluded$B);
   warnIfNoAccessibleLabelFound(props, [children]);
   const appContainerState = useContext(AppContainerContext);
   useEffect(() => {
@@ -2716,9 +2720,9 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
     color: "error"
   }, badgeProps), badge) : null);
 });
-SideNavigationMenuItem.className = CLASSNAME$z;
-SideNavigationMenuItem.defaultProps = DEFAULT_PROPS$z;
-SideNavigationMenuItem.displayName = COMPONENT_NAME$z;
+SideNavigationMenuItem.className = CLASSNAME$B;
+SideNavigationMenuItem.defaultProps = DEFAULT_PROPS$B;
+SideNavigationMenuItem.displayName = COMPONENT_NAME$B;
 
 /**
  * Component style.
@@ -2877,10 +2881,10 @@ const SideNavigationMenuReducer = (state, action) => {
   }
 };
 
-const _excluded$w = ["aria-label", "buttonProps", "buttonRef", "children", "className", "hasBadge", "icon", "iconProps", "iconRef", "isDisabled", "isExpanded", "menuProps", "menuRef", "tabIndex", "withoutIcons"];
-const COMPONENT_NAME$y = 'SideNavigationMenu';
-const CLASSNAME$y = 'redsift-side-navigation-menu';
-const DEFAULT_PROPS$y = {};
+const _excluded$A = ["aria-label", "buttonProps", "buttonRef", "children", "className", "hasBadge", "icon", "iconProps", "iconRef", "isDisabled", "isExpanded", "menuProps", "menuRef", "tabIndex", "withoutIcons"];
+const COMPONENT_NAME$A = 'SideNavigationMenu';
+const CLASSNAME$A = 'redsift-side-navigation-menu';
+const DEFAULT_PROPS$A = {};
 
 /**
  * The SideNavigationMenu component.
@@ -2903,7 +2907,7 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
       tabIndex,
       withoutIcons
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$w);
+    forwardedProps = _objectWithoutProperties(props, _excluded$A);
   warnIfNoAccessibleLabelFound(props);
   const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);
   const [isFirstChild, setIsFirstChild] = useState(false);
@@ -3172,9 +3176,9 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
     role: "menu"
   }, menuItemListEventHandler), renderedMenuItems)));
 });
-SideNavigationMenu.className = CLASSNAME$y;
-SideNavigationMenu.defaultProps = DEFAULT_PROPS$y;
-SideNavigationMenu.displayName = COMPONENT_NAME$y;
+SideNavigationMenu.className = CLASSNAME$A;
+SideNavigationMenu.defaultProps = DEFAULT_PROPS$A;
+SideNavigationMenu.displayName = COMPONENT_NAME$A;
 
 /**
  * Component style.
@@ -3232,10 +3236,10 @@ const StyledSideNavigationMenuBar = styled.nav`
   }
 `;
 
-const _excluded$v = ["aria-label", "aria-labelledby", "children", "className", "isDisabled", "menubarProps", "menubarRef", "withoutIcons"];
-const COMPONENT_NAME$x = 'SideNavigationMenuBar';
-const CLASSNAME$x = 'redsift-side-navigation-menu-bar';
-const DEFAULT_PROPS$x = {};
+const _excluded$z = ["aria-label", "aria-labelledby", "children", "className", "isDisabled", "menubarProps", "menubarRef", "withoutIcons"];
+const COMPONENT_NAME$z = 'SideNavigationMenuBar';
+const CLASSNAME$z = 'redsift-side-navigation-menu-bar';
+const DEFAULT_PROPS$z = {};
 
 /**
  * Hook to store the previous index for further use
@@ -3263,7 +3267,7 @@ const SideNavigationMenuBar = /*#__PURE__*/forwardRef((props, ref) => {
       menubarRef = useRef(),
       withoutIcons
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$v);
+    forwardedProps = _objectWithoutProperties(props, _excluded$z);
   warnIfNoAccessibleLabelFound(props);
   const {
     top
@@ -3405,11 +3409,11 @@ const SideNavigationMenuBar = /*#__PURE__*/forwardRef((props, ref) => {
     role: "menubar"
   }), navItems)));
 });
-SideNavigationMenuBar.className = CLASSNAME$x;
-SideNavigationMenuBar.defaultProps = DEFAULT_PROPS$x;
-SideNavigationMenuBar.displayName = COMPONENT_NAME$x;
+SideNavigationMenuBar.className = CLASSNAME$z;
+SideNavigationMenuBar.defaultProps = DEFAULT_PROPS$z;
+SideNavigationMenuBar.displayName = COMPONENT_NAME$z;
 
-const _excluded$u = ["title", "href", "ref"],
+const _excluded$y = ["title", "href", "ref"],
   _excluded2 = ["title", "children", "ref"],
   _excluded3 = ["title", "href", "ref"];
 const isMenu = item => {
@@ -3428,7 +3432,7 @@ const useSideNavigationMenuBar = _ref => {
           href,
           ref
         } = item,
-        rest = _objectWithoutProperties(item, _excluded$u);
+        rest = _objectWithoutProperties(item, _excluded$y);
       menuBarChildren.push( /*#__PURE__*/React__default.createElement(SideNavigationMenuItem, _extends$1({
         key: title,
         isCurrent: isActive ? isActive(href) : undefined
@@ -3531,10 +3535,10 @@ const StyledBreadcrumbItem = styled.a`
   }
 `;
 
-const _excluded$t = ["as", "children", "className", "href", "isCurrent", "isDisabled"];
-const COMPONENT_NAME$w = 'BreadcrumbItem';
-const CLASSNAME$w = 'redsift-breadcrumb-item';
-const DEFAULT_PROPS$w = {};
+const _excluded$x = ["as", "children", "className", "href", "isCurrent", "isDisabled"];
+const COMPONENT_NAME$y = 'BreadcrumbItem';
+const CLASSNAME$y = 'redsift-breadcrumb-item';
+const DEFAULT_PROPS$y = {};
 
 /**
  * The BreadcrumbItem components is a list of links to the parent pages of the current page in hierarchical order.
@@ -3548,7 +3552,7 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
       isCurrent,
       isDisabled
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$t);
+    forwardedProps = _objectWithoutProperties(props, _excluded$x);
   warnIfNoAccessibleLabelFound(props, [children]);
   return /*#__PURE__*/React__default.createElement(StyledBreadcrumbItem, _extends$1({
     as: as || 'a',
@@ -3564,9 +3568,9 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-BreadcrumbItem.className = CLASSNAME$w;
-BreadcrumbItem.defaultProps = DEFAULT_PROPS$w;
-BreadcrumbItem.displayName = COMPONENT_NAME$w;
+BreadcrumbItem.className = CLASSNAME$y;
+BreadcrumbItem.defaultProps = DEFAULT_PROPS$y;
+BreadcrumbItem.displayName = COMPONENT_NAME$y;
 
 /**
  * Component style.
@@ -3600,10 +3604,10 @@ const StyledBreadcrumbs = styled.nav`
   }
 `;
 
-const _excluded$s = ["children", "className", "isDisabled"];
-const COMPONENT_NAME$v = 'Breadcrumbs';
-const CLASSNAME$v = 'redsift-breadcrumbs';
-const DEFAULT_PROPS$v = {};
+const _excluded$w = ["children", "className", "isDisabled"];
+const COMPONENT_NAME$x = 'Breadcrumbs';
+const CLASSNAME$x = 'redsift-breadcrumbs';
+const DEFAULT_PROPS$x = {};
 
 /**
  * The Breadcrumbs components is a list of links to the parent pages of the current page in hierarchical order.
@@ -3614,7 +3618,7 @@ const BaseBreadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       isDisabled
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$s);
+    forwardedProps = _objectWithoutProperties(props, _excluded$w);
   warnIfNoAccessibleLabelFound(props);
   const childArray = filterComponents([Breadcrumbs.Item])(children);
   const breadcrumbItems = childArray.map((child, index) => {
@@ -3637,17 +3641,17 @@ const BaseBreadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), /*#__PURE__*/React__default.createElement("ol", null, breadcrumbItems));
 });
-BaseBreadcrumbs.className = CLASSNAME$v;
-BaseBreadcrumbs.defaultProps = DEFAULT_PROPS$v;
-BaseBreadcrumbs.displayName = COMPONENT_NAME$v;
+BaseBreadcrumbs.className = CLASSNAME$x;
+BaseBreadcrumbs.defaultProps = DEFAULT_PROPS$x;
+BaseBreadcrumbs.displayName = COMPONENT_NAME$x;
 const Breadcrumbs = Object.assign(BaseBreadcrumbs, {
   Item: BreadcrumbItem
 });
 
-const _excluded$r = ["as", "children", "className", "color", "href", "isActive", "isDisabled", "leftIcon", "rightIcon", "target", "variant"];
-const COMPONENT_NAME$u = 'ButtonLink';
-const CLASSNAME$u = 'redsift-button-link';
-const DEFAULT_PROPS$u = {
+const _excluded$v = ["as", "children", "className", "color", "href", "isActive", "isDisabled", "leftIcon", "rightIcon", "target", "variant"];
+const COMPONENT_NAME$w = 'ButtonLink';
+const CLASSNAME$w = 'redsift-button-link';
+const DEFAULT_PROPS$w = {
   color: ColorPalette.default,
   height: 'fit-content',
   variant: ButtonVariant.primary
@@ -3674,7 +3678,7 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
       target,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$r);
+    forwardedProps = _objectWithoutProperties(props, _excluded$v);
   return /*#__PURE__*/React__default.createElement(StyledButton, _extends$1({
     as: as || 'a',
     role: "link",
@@ -3688,19 +3692,19 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
     href: !isDisabled ? href : undefined,
     ref: ref,
     target: target
-  }), leftIcon ? typeof leftIcon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+  }), leftIcon ? /*#__PURE__*/React__default.createElement(Icon, {
     icon: leftIcon,
     "aria-hidden": "true",
     className: "left"
-  }) : leftIcon : null, children, rightIcon ? typeof rightIcon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+  }) : null, children, rightIcon ? /*#__PURE__*/React__default.createElement(Icon, {
     icon: rightIcon,
     "aria-hidden": "true",
     className: "right"
-  }) : rightIcon : null);
+  }) : null);
 });
-ButtonLink.className = CLASSNAME$u;
-ButtonLink.defaultProps = DEFAULT_PROPS$u;
-ButtonLink.displayName = COMPONENT_NAME$u;
+ButtonLink.className = CLASSNAME$w;
+ButtonLink.defaultProps = DEFAULT_PROPS$w;
+ButtonLink.displayName = COMPONENT_NAME$w;
 
 var collapse$3 = "Collapse";
 var expand$3 = "Expand";
@@ -3890,10 +3894,10 @@ const StyledSkeletonCircle = styled(StyledSkeleton)`
 }}
 `;
 
-const _excluded$q = ["children", "className", "isLoaded"];
-const COMPONENT_NAME$t = 'SkeletonCircle';
-const CLASSNAME$t = 'redsift-skeleton-circle';
-const DEFAULT_PROPS$t = {};
+const _excluded$u = ["children", "className", "isLoaded"];
+const COMPONENT_NAME$v = 'SkeletonCircle';
+const CLASSNAME$v = 'redsift-skeleton-circle';
+const DEFAULT_PROPS$v = {};
 
 /**
  * The SkeletonCircle component.
@@ -3904,7 +3908,7 @@ const SkeletonCircle = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       isLoaded
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$q);
+    forwardedProps = _objectWithoutProperties(props, _excluded$u);
   if (isLoaded) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
   }
@@ -3913,9 +3917,9 @@ const SkeletonCircle = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", null, children) : children);
 });
-SkeletonCircle.className = CLASSNAME$t;
-SkeletonCircle.defaultProps = DEFAULT_PROPS$t;
-SkeletonCircle.displayName = COMPONENT_NAME$t;
+SkeletonCircle.className = CLASSNAME$v;
+SkeletonCircle.defaultProps = DEFAULT_PROPS$v;
+SkeletonCircle.displayName = COMPONENT_NAME$v;
 
 /**
  * Component variant.
@@ -3971,10 +3975,10 @@ const StyledSkeletonText = styled(StyledSkeleton)`
 }}}
 `;
 
-const _excluded$p = ["children", "className", "fontSize", "isLoaded", "lineHeight", "variant"];
-const COMPONENT_NAME$s = 'SkeletonText';
-const CLASSNAME$s = 'redsift-skeleton-text';
-const DEFAULT_PROPS$s = {
+const _excluded$t = ["children", "className", "fontSize", "isLoaded", "lineHeight", "variant"];
+const COMPONENT_NAME$u = 'SkeletonText';
+const CLASSNAME$u = 'redsift-skeleton-text';
+const DEFAULT_PROPS$u = {
   variant: 'body'
 };
 
@@ -3990,7 +3994,7 @@ const SkeletonText = /*#__PURE__*/forwardRef((props, ref) => {
       lineHeight,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$p);
+    forwardedProps = _objectWithoutProperties(props, _excluded$t);
   if (isLoaded) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
   }
@@ -4002,14 +4006,14 @@ const SkeletonText = /*#__PURE__*/forwardRef((props, ref) => {
     $variant: variant
   }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", null, children) : children);
 });
-SkeletonText.className = CLASSNAME$s;
-SkeletonText.defaultProps = DEFAULT_PROPS$s;
-SkeletonText.displayName = COMPONENT_NAME$s;
+SkeletonText.className = CLASSNAME$u;
+SkeletonText.defaultProps = DEFAULT_PROPS$u;
+SkeletonText.displayName = COMPONENT_NAME$u;
 
-const _excluded$o = ["children", "className", "isLoaded"];
-const COMPONENT_NAME$r = 'Skeleton';
-const CLASSNAME$r = 'redsift-skeleton';
-const DEFAULT_PROPS$r = {};
+const _excluded$s = ["children", "className", "isLoaded"];
+const COMPONENT_NAME$t = 'Skeleton';
+const CLASSNAME$t = 'redsift-skeleton';
+const DEFAULT_PROPS$t = {};
 
 /**
  * The Skeleton component.
@@ -4020,7 +4024,7 @@ const BaseSkeleton = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       isLoaded
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$o);
+    forwardedProps = _objectWithoutProperties(props, _excluded$s);
   if (isLoaded) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
   }
@@ -4029,18 +4033,18 @@ const BaseSkeleton = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", null, children) : children);
 });
-BaseSkeleton.className = CLASSNAME$r;
-BaseSkeleton.defaultProps = DEFAULT_PROPS$r;
-BaseSkeleton.displayName = COMPONENT_NAME$r;
+BaseSkeleton.className = CLASSNAME$t;
+BaseSkeleton.defaultProps = DEFAULT_PROPS$t;
+BaseSkeleton.displayName = COMPONENT_NAME$t;
 const Skeleton = Object.assign(BaseSkeleton, {
   Circle: SkeletonCircle,
   Text: SkeletonText
 });
 
-const _excluded$n = ["children", "className", "header", "headingProps", "icon", "isLoading", "subheader"];
-const COMPONENT_NAME$q = 'CardHeader';
-const CLASSNAME$q = 'redsift-card-header';
-const DEFAULT_PROPS$q = {};
+const _excluded$r = ["children", "className", "header", "headingProps", "icon", "isLoading", "subheader"];
+const COMPONENT_NAME$s = 'CardHeader';
+const CLASSNAME$s = 'redsift-card-header';
+const DEFAULT_PROPS$s = {};
 
 /**
  * The CardHeader component.
@@ -4055,7 +4059,7 @@ const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
       isLoading,
       subheader
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$n);
+    forwardedProps = _objectWithoutProperties(props, _excluded$r);
   return /*#__PURE__*/React__default.createElement(StyledCardHeader, _extends$1({}, forwardedProps, {
     className: classNames(CardHeader.className, className),
     ref: ref
@@ -4079,9 +4083,9 @@ const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-hidden": "true"
   }) : null, header)) : null, children);
 });
-CardHeader.className = CLASSNAME$q;
-CardHeader.defaultProps = DEFAULT_PROPS$q;
-CardHeader.displayName = COMPONENT_NAME$q;
+CardHeader.className = CLASSNAME$s;
+CardHeader.defaultProps = DEFAULT_PROPS$s;
+CardHeader.displayName = COMPONENT_NAME$s;
 
 /**
  * Component style.
@@ -4097,10 +4101,10 @@ const StyledCardBody = styled.div`
   padding: 16px 0px;
 `;
 
-const _excluded$m = ["children", "className"];
-const COMPONENT_NAME$p = 'CardBody';
-const CLASSNAME$p = 'redsift-card-body';
-const DEFAULT_PROPS$p = {};
+const _excluded$q = ["children", "className"];
+const COMPONENT_NAME$r = 'CardBody';
+const CLASSNAME$r = 'redsift-card-body';
+const DEFAULT_PROPS$r = {};
 
 /**
  * The CardBody component.
@@ -4110,15 +4114,15 @@ const CardBody = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$m);
+    forwardedProps = _objectWithoutProperties(props, _excluded$q);
   return /*#__PURE__*/React__default.createElement(StyledCardBody, _extends$1({}, forwardedProps, {
     className: classNames(CardBody.className, className),
     ref: ref
   }), children);
 });
-CardBody.className = CLASSNAME$p;
-CardBody.defaultProps = DEFAULT_PROPS$p;
-CardBody.displayName = COMPONENT_NAME$p;
+CardBody.className = CLASSNAME$r;
+CardBody.defaultProps = DEFAULT_PROPS$r;
+CardBody.displayName = COMPONENT_NAME$r;
 
 /**
  * Component style.
@@ -4130,10 +4134,10 @@ const StyledCardActions = styled.div`
   margin-bottom: 8px;
 `;
 
-const _excluded$l = ["children", "className"];
-const COMPONENT_NAME$o = 'CardActions';
-const CLASSNAME$o = 'redsift-card-actions';
-const DEFAULT_PROPS$o = {
+const _excluded$p = ["children", "className"];
+const COMPONENT_NAME$q = 'CardActions';
+const CLASSNAME$q = 'redsift-card-actions';
+const DEFAULT_PROPS$q = {
   display: 'flex',
   flexDirection: 'row'
 };
@@ -4146,20 +4150,20 @@ const CardActions = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$l);
+    forwardedProps = _objectWithoutProperties(props, _excluded$p);
   return /*#__PURE__*/React__default.createElement(StyledCardActions, _extends$1({}, forwardedProps, {
     className: classNames(CardActions.className, className),
     ref: ref
   }), children);
 });
-CardActions.className = CLASSNAME$o;
-CardActions.defaultProps = DEFAULT_PROPS$o;
-CardActions.displayName = COMPONENT_NAME$o;
+CardActions.className = CLASSNAME$q;
+CardActions.defaultProps = DEFAULT_PROPS$q;
+CardActions.displayName = COMPONENT_NAME$q;
 
-const _excluded$k = ["children", "className", "defaultCollapsed", "isCollapsed", "isCollapsible", "onCollapse"];
-const COMPONENT_NAME$n = 'Card';
-const CLASSNAME$n = 'redsift-card';
-const DEFAULT_PROPS$n = {};
+const _excluded$o = ["children", "className", "defaultCollapsed", "isCollapsed", "isCollapsible", "onCollapse"];
+const COMPONENT_NAME$p = 'Card';
+const CLASSNAME$p = 'redsift-card';
+const DEFAULT_PROPS$p = {};
 
 /**
  * The Card component.
@@ -4173,7 +4177,7 @@ const BaseCard = /*#__PURE__*/forwardRef((props, ref) => {
       isCollapsible,
       onCollapse
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$k);
+    forwardedProps = _objectWithoutProperties(props, _excluded$o);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$2);
   const [isCollapsed, setIsCollapsed] = useState(propsIsCollapsed !== null && propsIsCollapsed !== void 0 ? propsIsCollapsed : defaultCollapsed);
   useEffect(() => {
@@ -4204,9 +4208,9 @@ const BaseCard = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${BaseCard.className}__content`
   }, body, actions) : null);
 });
-BaseCard.className = CLASSNAME$n;
-BaseCard.defaultProps = DEFAULT_PROPS$n;
-BaseCard.displayName = COMPONENT_NAME$n;
+BaseCard.className = CLASSNAME$p;
+BaseCard.defaultProps = DEFAULT_PROPS$p;
+BaseCard.displayName = COMPONENT_NAME$p;
 const Card = Object.assign(BaseCard, {
   Header: CardHeader,
   Body: CardBody,
@@ -4309,10 +4313,10 @@ const StyledCheckboxGroup = styled.div`
   }
 `;
 
-const _excluded$j = ["children", "className", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "possibleValues", "value"];
-const COMPONENT_NAME$m = 'CheckboxGroup';
-const CLASSNAME$m = 'redsift-checkbox-group';
-const DEFAULT_PROPS$m = {
+const _excluded$n = ["children", "className", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "value"];
+const COMPONENT_NAME$o = 'CheckboxGroup';
+const CLASSNAME$o = 'redsift-checkbox-group';
+const DEFAULT_PROPS$o = {
   color: ColorPalette.default,
   orientation: CheckboxGroupOrientation.vertical
 };
@@ -4334,10 +4338,9 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
       label,
       onChange,
       orientation,
-      possibleValues,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$j);
+    forwardedProps = _objectWithoutProperties(props, _excluded$n);
   const [selectedValues, setValue] = useState(value || defaultValues || []);
   useEffect(() => {
     if (value) {
@@ -4348,7 +4351,6 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
     value: selectedValues,
     isDisabled: isDisabled || false,
     isReadOnly: isReadOnly || false,
-    possibleValues: possibleValues,
     setValue(values) {
       if (isReadOnly || isDisabled) {
         return;
@@ -4391,9 +4393,9 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${CheckboxGroup.className}-description`
   }, description));
 });
-CheckboxGroup.className = CLASSNAME$m;
-CheckboxGroup.defaultProps = DEFAULT_PROPS$m;
-CheckboxGroup.displayName = COMPONENT_NAME$m;
+CheckboxGroup.className = CLASSNAME$o;
+CheckboxGroup.defaultProps = DEFAULT_PROPS$o;
+CheckboxGroup.displayName = COMPONENT_NAME$o;
 
 /**
  * Component style.
@@ -4501,10 +4503,10 @@ const StyledCheckbox = styled.label`
   }
 `;
 
-const _excluded$i = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isControlled", "isDisabled", "isIndeterminate", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
-const COMPONENT_NAME$l = 'Checkbox';
-const CLASSNAME$l = 'redsift-checkbox';
-const DEFAULT_PROPS$l = {
+const _excluded$m = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isControlled", "isDisabled", "isIndeterminate", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
+const COMPONENT_NAME$n = 'Checkbox';
+const CLASSNAME$n = 'redsift-checkbox';
+const DEFAULT_PROPS$n = {
   isColored: true
 };
 
@@ -4537,7 +4539,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
       onChange,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$i);
+    forwardedProps = _objectWithoutProperties(props, _excluded$m);
   const {
     isFocusVisible,
     focusProps
@@ -4618,9 +4620,9 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     value: value
   })));
 });
-Checkbox.className = CLASSNAME$l;
-Checkbox.defaultProps = DEFAULT_PROPS$l;
-Checkbox.displayName = COMPONENT_NAME$l;
+Checkbox.className = CLASSNAME$n;
+Checkbox.defaultProps = DEFAULT_PROPS$n;
+Checkbox.displayName = COMPONENT_NAME$n;
 
 const ConditionalWrapper = _ref => {
   let {
@@ -4734,10 +4736,10 @@ const StyledShield = styled.div`
 }}
 `;
 
-const _excluded$h = ["aria-hidden", "aria-label", "className", "svgProps", "isOutlined", "isReversed", "variant"];
-const COMPONENT_NAME$k = 'Shield';
-const CLASSNAME$k = 'redsift-shield';
-const DEFAULT_PROPS$k = {
+const _excluded$l = ["aria-hidden", "aria-label", "className", "svgProps", "isOutlined", "isReversed", "variant"];
+const COMPONENT_NAME$m = 'Shield';
+const CLASSNAME$m = 'redsift-shield';
+const DEFAULT_PROPS$m = {
   variant: ShieldVariant.success
 };
 const getVariant = variant => {
@@ -4823,7 +4825,7 @@ const Shield = /*#__PURE__*/forwardRef((props, ref) => {
       isReversed,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$h);
+    forwardedProps = _objectWithoutProperties(props, _excluded$l);
   const {
     color,
     icon
@@ -4857,9 +4859,9 @@ const Shield = /*#__PURE__*/forwardRef((props, ref) => {
     className: "icon"
   })));
 });
-Shield.className = CLASSNAME$k;
-Shield.defaultProps = DEFAULT_PROPS$k;
-Shield.displayName = COMPONENT_NAME$k;
+Shield.className = CLASSNAME$m;
+Shield.defaultProps = DEFAULT_PROPS$m;
+Shield.displayName = COMPONENT_NAME$m;
 
 var collapse$1 = "Collapse details";
 var expand$1 = "Expand details";
@@ -4911,10 +4913,10 @@ const StyledDetailedCardCollapsibleSectionItems = styled.div`
   }
 `;
 
-const _excluded$g = ["caption", "children", "className", "hideBackground"];
-const COMPONENT_NAME$j = 'DetailedCardCollapsibleSectionItems';
-const CLASSNAME$j = 'redsift-detailed-card-collapsible-section-items';
-const DEFAULT_PROPS$j = {};
+const _excluded$k = ["caption", "children", "className", "hideBackground"];
+const COMPONENT_NAME$l = 'DetailedCardCollapsibleSectionItems';
+const CLASSNAME$l = 'redsift-detailed-card-collapsible-section-items';
+const DEFAULT_PROPS$l = {};
 
 /**
  * The DetailedCardCollapsibleSectionItems Section component.
@@ -4926,7 +4928,7 @@ const DetailedCardCollapsibleSectionItems = /*#__PURE__*/forwardRef((props, ref)
       className,
       hideBackground
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$g);
+    forwardedProps = _objectWithoutProperties(props, _excluded$k);
   return /*#__PURE__*/React__default.createElement(StyledDetailedCardCollapsibleSectionItems, _extends$1({}, forwardedProps, {
     className: classNames(DetailedCardCollapsibleSectionItems.className, className),
     ref: ref,
@@ -4935,9 +4937,9 @@ const DetailedCardCollapsibleSectionItems = /*#__PURE__*/forwardRef((props, ref)
     className: `${DetailedCardCollapsibleSectionItems.className}__caption`
   }, caption) : null);
 });
-DetailedCardCollapsibleSectionItems.className = CLASSNAME$j;
-DetailedCardCollapsibleSectionItems.defaultProps = DEFAULT_PROPS$j;
-DetailedCardCollapsibleSectionItems.displayName = COMPONENT_NAME$j;
+DetailedCardCollapsibleSectionItems.className = CLASSNAME$l;
+DetailedCardCollapsibleSectionItems.defaultProps = DEFAULT_PROPS$l;
+DetailedCardCollapsibleSectionItems.displayName = COMPONENT_NAME$l;
 
 /**
  * Component style.
@@ -5122,10 +5124,10 @@ const StyledText = styled.span`
 }}
 `;
 
-const _excluded$f = ["as", "children", "className", "color", "fontFamily", "fontSize", "lineHeight", "noWrap", "variant"];
-const COMPONENT_NAME$i = 'Text';
-const CLASSNAME$i = 'redsift-text';
-const DEFAULT_PROPS$i = {
+const _excluded$j = ["as", "children", "className", "color", "fontFamily", "fontSize", "lineHeight", "noWrap", "variant"];
+const COMPONENT_NAME$k = 'Text';
+const CLASSNAME$k = 'redsift-text';
+const DEFAULT_PROPS$k = {
   fontFamily: FontFamily.raleway
 };
 
@@ -5144,7 +5146,7 @@ const Text = /*#__PURE__*/forwardRef((props, ref) => {
       noWrap,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$f);
+    forwardedProps = _objectWithoutProperties(props, _excluded$j);
   return /*#__PURE__*/React__default.createElement(StyledText, _extends$1({
     as: as
   }, forwardedProps, {
@@ -5159,14 +5161,14 @@ const Text = /*#__PURE__*/forwardRef((props, ref) => {
     $variant: variant
   }), children);
 });
-Text.className = CLASSNAME$i;
-Text.defaultProps = DEFAULT_PROPS$i;
-Text.displayName = COMPONENT_NAME$i;
-
-const _excluded$e = ["badge", "color", "children", "className", "header", "isCollapsed", "isCollapsible", "isLoading"];
-const COMPONENT_NAME$h = 'DetailedCardSection';
-const CLASSNAME$h = 'redsift-detailed-card-section';
-const DEFAULT_PROPS$h = {
+Text.className = CLASSNAME$k;
+Text.defaultProps = DEFAULT_PROPS$k;
+Text.displayName = COMPONENT_NAME$k;
+
+const _excluded$i = ["badge", "color", "children", "className", "header", "isCollapsed", "isCollapsible", "isLoading"];
+const COMPONENT_NAME$j = 'DetailedCardSection';
+const CLASSNAME$j = 'redsift-detailed-card-section';
+const DEFAULT_PROPS$j = {
   isCollapsible: true
 };
 const hasCollapsibleChildren = children => {
@@ -5193,7 +5195,7 @@ const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
       isCollapsible: propsIsCollapsible,
       isLoading
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$e);
+    forwardedProps = _objectWithoutProperties(props, _excluded$i);
   const stringFormatter = useLocalizedStringFormatter(intlMessages);
   const isCollapsible = propsIsCollapsible && hasCollapsibleChildren(children);
   const [isCollapsed, setIsCollapsed] = useState(Boolean(propsIsCollapsed));
@@ -5236,9 +5238,9 @@ const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }) : null), children);
 });
-DetailedCardSection.className = CLASSNAME$h;
-DetailedCardSection.defaultProps = DEFAULT_PROPS$h;
-DetailedCardSection.displayName = COMPONENT_NAME$h;
+DetailedCardSection.className = CLASSNAME$j;
+DetailedCardSection.defaultProps = DEFAULT_PROPS$j;
+DetailedCardSection.displayName = COMPONENT_NAME$j;
 
 /**
  * Component style.
@@ -5279,10 +5281,10 @@ const StyledDetailedCardHeader = styled.div`
   }
 `;
 
-const _excluded$d = ["children", "className", "header", "headingProps", "isLoading"];
-const COMPONENT_NAME$g = 'DetailedCardHeader';
-const CLASSNAME$g = 'redsift-detailed-card-header';
-const DEFAULT_PROPS$g = {};
+const _excluded$h = ["children", "className", "header", "headingProps", "isLoading"];
+const COMPONENT_NAME$i = 'DetailedCardHeader';
+const CLASSNAME$i = 'redsift-detailed-card-header';
+const DEFAULT_PROPS$i = {};
 
 /**
  * The DetailedCardHeader component.
@@ -5295,7 +5297,7 @@ const DetailedCardHeader = /*#__PURE__*/forwardRef((props, ref) => {
       headingProps,
       isLoading
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$d);
+    forwardedProps = _objectWithoutProperties(props, _excluded$h);
   return /*#__PURE__*/React__default.createElement(StyledDetailedCardHeader, _extends$1({}, forwardedProps, {
     className: classNames(DetailedCardHeader.className, className),
     ref: ref
@@ -5310,9 +5312,9 @@ const DetailedCardHeader = /*#__PURE__*/forwardRef((props, ref) => {
     variant: "h2"
   }, headingProps), header)) : null, children);
 });
-DetailedCardHeader.className = CLASSNAME$g;
-DetailedCardHeader.defaultProps = DEFAULT_PROPS$g;
-DetailedCardHeader.displayName = COMPONENT_NAME$g;
+DetailedCardHeader.className = CLASSNAME$i;
+DetailedCardHeader.defaultProps = DEFAULT_PROPS$i;
+DetailedCardHeader.displayName = COMPONENT_NAME$i;
 
 /**
  * Component style.
@@ -5356,10 +5358,10 @@ const StyledPill = styled.div`
   }
 `;
 
-const _excluded$c = ["autoBreak", "children", "className", "color"];
-const COMPONENT_NAME$f = 'Pill';
-const CLASSNAME$f = 'redsift-pill';
-const DEFAULT_PROPS$f = {
+const _excluded$g = ["autoBreak", "children", "className", "color"];
+const COMPONENT_NAME$h = 'Pill';
+const CLASSNAME$h = 'redsift-pill';
+const DEFAULT_PROPS$h = {
   color: DataVizColorPalette.pink,
   height: 'fit-content'
 };
@@ -5374,7 +5376,7 @@ const Pill = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       color
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$c);
+    forwardedProps = _objectWithoutProperties(props, _excluded$g);
   return /*#__PURE__*/React__default.createElement(StyledPill, _extends$1({}, forwardedProps, {
     $autoBreak: autoBreak,
     $color: color,
@@ -5382,9 +5384,9 @@ const Pill = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-Pill.className = CLASSNAME$f;
-Pill.defaultProps = DEFAULT_PROPS$f;
-Pill.displayName = COMPONENT_NAME$f;
+Pill.className = CLASSNAME$h;
+Pill.defaultProps = DEFAULT_PROPS$h;
+Pill.displayName = COMPONENT_NAME$h;
 
 /**
  * Component style.
@@ -5414,10 +5416,10 @@ const StyledDetailedCardSectionItem = styled.div`
   }
 `;
 
-const _excluded$b = ["children", "className", "description", "icon", "iconProps", "isLoading", "pill", "pillProps", "shield"];
-const COMPONENT_NAME$e = 'DetailedCardSectionItem';
-const CLASSNAME$e = 'redsift-detailed-card-section-item';
-const DEFAULT_PROPS$e = {};
+const _excluded$f = ["children", "className", "description", "icon", "iconProps", "isLoading", "pill", "pillProps", "shield"];
+const COMPONENT_NAME$g = 'DetailedCardSectionItem';
+const CLASSNAME$g = 'redsift-detailed-card-section-item';
+const DEFAULT_PROPS$g = {};
 
 /**
  * The DetailedCardSectionItems component.
@@ -5434,7 +5436,7 @@ const DetailedCardSectionItem = /*#__PURE__*/forwardRef((props, ref) => {
       pillProps,
       shield
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$b);
+    forwardedProps = _objectWithoutProperties(props, _excluded$f);
   return /*#__PURE__*/React__default.createElement(StyledDetailedCardSectionItem, _extends$1({}, forwardedProps, {
     className: classNames(DetailedCardSectionItem.className, className),
     ref: ref
@@ -5462,9 +5464,9 @@ const DetailedCardSectionItem = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${DetailedCardSectionItem.className}-header__pill`
   }, pillProps), pill), typeof description === 'string' ? /*#__PURE__*/React__default.createElement(Text, null, description) : description)) : null), children);
 });
-DetailedCardSectionItem.className = CLASSNAME$e;
-DetailedCardSectionItem.defaultProps = DEFAULT_PROPS$e;
-DetailedCardSectionItem.displayName = COMPONENT_NAME$e;
+DetailedCardSectionItem.className = CLASSNAME$g;
+DetailedCardSectionItem.defaultProps = DEFAULT_PROPS$g;
+DetailedCardSectionItem.displayName = COMPONENT_NAME$g;
 
 /*!
 * tabbable 6.1.2
@@ -8969,9 +8971,9 @@ const StyledTooltipContent = styled.div`
 }}
 `;
 
-const COMPONENT_NAME$d = 'TooltipContent';
-const CLASSNAME$d = 'redsift-tooltip-content';
-const DEFAULT_PROPS$d = {};
+const COMPONENT_NAME$f = 'TooltipContent';
+const CLASSNAME$f = 'redsift-tooltip-content';
+const DEFAULT_PROPS$f = {};
 
 /**
  * The TooltipContent component.
@@ -9032,13 +9034,13 @@ const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${TooltipContent.className}__inner`
   }, children)));
 });
-TooltipContent.className = CLASSNAME$d;
-TooltipContent.defaultProps = DEFAULT_PROPS$d;
-TooltipContent.displayName = COMPONENT_NAME$d;
+TooltipContent.className = CLASSNAME$f;
+TooltipContent.defaultProps = DEFAULT_PROPS$f;
+TooltipContent.displayName = COMPONENT_NAME$f;
 
-const COMPONENT_NAME$c = 'TooltipTrigger';
-const CLASSNAME$c = 'redsift-tooltip-trigger';
-const DEFAULT_PROPS$c = {};
+const COMPONENT_NAME$e = 'TooltipTrigger';
+const CLASSNAME$e = 'redsift-tooltip-trigger';
+const DEFAULT_PROPS$e = {};
 
 /**
  * The TooltipTrigger component.
@@ -9065,9 +9067,9 @@ const TooltipTrigger = /*#__PURE__*/forwardRef((props, ref) => {
     ref: triggerRef
   }, getReferenceProps(props)), children);
 });
-TooltipTrigger.className = CLASSNAME$c;
-TooltipTrigger.defaultProps = DEFAULT_PROPS$c;
-TooltipTrigger.displayName = COMPONENT_NAME$c;
+TooltipTrigger.className = CLASSNAME$e;
+TooltipTrigger.defaultProps = DEFAULT_PROPS$e;
+TooltipTrigger.displayName = COMPONENT_NAME$e;
 
 function useTooltip(_ref) {
   let {
@@ -9128,9 +9130,9 @@ function useTooltip(_ref) {
   }), [isOpen, handleOpen, interactions, data, arrowRef, tooltipId]);
 }
 
-const COMPONENT_NAME$b = 'Tooltip';
-const CLASSNAME$b = 'redsift-tooltip';
-const DEFAULT_PROPS$b = {
+const COMPONENT_NAME$d = 'Tooltip';
+const CLASSNAME$d = 'redsift-tooltip';
+const DEFAULT_PROPS$d = {
   delay: 500,
   placement: TooltipPlacement.top
 };
@@ -9161,9 +9163,9 @@ const BaseTooltip = props => {
     value: tooltip
   }, trigger, content);
 };
-BaseTooltip.className = CLASSNAME$b;
-BaseTooltip.defaultProps = DEFAULT_PROPS$b;
-BaseTooltip.displayName = COMPONENT_NAME$b;
+BaseTooltip.className = CLASSNAME$d;
+BaseTooltip.defaultProps = DEFAULT_PROPS$d;
+BaseTooltip.displayName = COMPONENT_NAME$d;
 const Tooltip = Object.assign(BaseTooltip, {
   Trigger: TooltipTrigger,
   Content: TooltipContent
@@ -9177,10 +9179,10 @@ const useTooltipContext = () => {
   return context;
 };
 
-const _excluded$a = ["areAllCollapsed", "bannerVariant", "children", "className", "color", "defaultAllCollapsed", "icon", "isCollapsible", "isLoading", "onCollapseAll", "shield"];
-const COMPONENT_NAME$a = 'DetailedCard';
-const CLASSNAME$a = 'redsift-detailed-card';
-const DEFAULT_PROPS$a = {
+const _excluded$e = ["areAllCollapsed", "bannerVariant", "children", "className", "color", "defaultAllCollapsed", "icon", "isCollapsible", "isLoading", "onCollapseAll", "shield"];
+const COMPONENT_NAME$c = 'DetailedCard';
+const CLASSNAME$c = 'redsift-detailed-card';
+const DEFAULT_PROPS$c = {
   isCollapsible: true,
   width: '400px'
 };
@@ -9220,7 +9222,7 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
       onCollapseAll,
       shield
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$a);
+    forwardedProps = _objectWithoutProperties(props, _excluded$e);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$1);
   const isCollapsible = propsIsCollapsible && hasMultipleCollapsibleChildren(children);
   const [allCollapsed, setAllCollapsed] = useState({
@@ -9306,9 +9308,9 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
     return child;
   }));
 });
-BaseDetailedCard.className = CLASSNAME$a;
-BaseDetailedCard.defaultProps = DEFAULT_PROPS$a;
-BaseDetailedCard.displayName = COMPONENT_NAME$a;
+BaseDetailedCard.className = CLASSNAME$c;
+BaseDetailedCard.defaultProps = DEFAULT_PROPS$c;
+BaseDetailedCard.displayName = COMPONENT_NAME$c;
 const DetailedCard = Object.assign(BaseDetailedCard, {
   Header: DetailedCardHeader,
   Section: DetailedCardSection,
@@ -9316,128 +9318,1114 @@ const DetailedCard = Object.assign(BaseDetailedCard, {
   SectionItem: DetailedCardSectionItem
 });
 
-/**
- * Component style.
- */
-const StyledGrid = styled.div`
-  display: ${_ref => {
-  let {
-    inline
-  } = _ref;
-  return inline ? 'inline-grid' : 'grid';
-}};
-
-  ${baseStyling}
-  ${baseInternalSpacing}
-  ${baseGrid}
-`;
-
-/**
- * Component style.
- */
-const StyledGridItem = styled.div`
-  display: inherit;
-
-  ${baseStyling}
-  ${baseInternalSpacing}
-`;
-
-const _excluded$9 = ["children", "className"];
-const COMPONENT_NAME$9 = 'GridItem';
-const CLASSNAME$9 = 'redsift-grid-item';
-const DEFAULT_PROPS$9 = {};
+let EventKey = /*#__PURE__*/function (EventKey) {
+  EventKey["ArrowLeft"] = "ArrowLeft";
+  EventKey["ArrowRight"] = "ArrowRight";
+  EventKey["ArrowUp"] = "ArrowUp";
+  EventKey["ArrowDown"] = "ArrowDown";
+  EventKey["Home"] = "Home";
+  EventKey["End"] = "End";
+  return EventKey;
+}({});
+let Navigation = /*#__PURE__*/function (Navigation) {
+  Navigation["PREVIOUS"] = "PREVIOUS";
+  Navigation["NEXT"] = "NEXT";
+  Navigation["VERY_FIRST"] = "VERY_FIRST";
+  Navigation["VERY_LAST"] = "VERY_LAST";
+  Navigation["PREVIOUS_ROW"] = "PREVIOUS_ROW";
+  Navigation["NEXT_ROW"] = "NEXT_ROW";
+  Navigation["FIRST_IN_ROW"] = "FIRST_IN_ROW";
+  Navigation["LAST_IN_ROW"] = "LAST_IN_ROW";
+  return Navigation;
+}({});
+let FocusWithinGroupActionType = /*#__PURE__*/function (FocusWithinGroupActionType) {
+  FocusWithinGroupActionType["REGISTER_TAB_STOP"] = "REGISTER_TAB_STOP";
+  FocusWithinGroupActionType["UNREGISTER_TAB_STOP"] = "UNREGISTER_TAB_STOP";
+  FocusWithinGroupActionType["KEY_DOWN_ON_ITEM"] = "KEY_DOWN_ON_ITEM";
+  FocusWithinGroupActionType["CLICK_ON_ITEM"] = "CLICK_ON_ITEM";
+  FocusWithinGroupActionType["KEY_DOWN_ON_LIST"] = "KEY_DOWN_ON_LIST";
+  FocusWithinGroupActionType["FOCUS_ON_LIST"] = "FOCUS_ON_LIST";
+  FocusWithinGroupActionType["BLUR_ON_LIST"] = "BLUR_ON_LIST";
+  FocusWithinGroupActionType["TAB_STOP_UPDATED"] = "TAB_STOP_UPDATED";
+  FocusWithinGroupActionType["OPTIONS_UPDATED"] = "OPTIONS_UPDATED";
+  FocusWithinGroupActionType["FILTER_LIST"] = "FILTER_LIST";
+  FocusWithinGroupActionType["DELAY_ACTION"] = "DELAY_ACTION";
+  return FocusWithinGroupActionType;
+}({});
 
 /**
- * The GridItem component.
+ * Component props.
  */
-const GridItem = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      children,
-      className
-    } = props,
-    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$9;
-GridItem.defaultProps = DEFAULT_PROPS$9;
-GridItem.displayName = COMPONENT_NAME$9;
 
-const _excluded$8 = ["children", "className"];
-const COMPONENT_NAME$8 = 'Grid';
-const CLASSNAME$8 = 'redsift-grid';
-const DEFAULT_PROPS$8 = {};
-
-/**
- * The Grid component.
- */
-const BaseGrid = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      children,
-      className
-    } = props,
-    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$8;
-BaseGrid.defaultProps = DEFAULT_PROPS$8;
-BaseGrid.displayName = COMPONENT_NAME$8;
-const Grid = Object.assign(BaseGrid, {
-  Item: GridItem
+const FOCUS_WITHING_GROUP_INITIAL_STATE = {
+  selectedId: null,
+  allowFocusing: false,
+  tabStops: [],
+  direction: 'vertical',
+  focusOnClick: false,
+  focusOnInit: true,
+  loopAround: false,
+  rowStartMap: null,
+  focusType: 'roving-tabindex'
+};
+const FocusWithinGroupContext = /*#__PURE__*/React__default.createContext({
+  state: FOCUS_WITHING_GROUP_INITIAL_STATE,
+  dispatch: () => {}
 });
 
-/**
- * Component style.
- */
-const StyledLink = styled.a`
-  ${baseStyling}
-
-  background: none;
-  border: none;
-  color: inherit;
-  cursor: text !important;
-  font-family: var(--redsift-typography-link-font-family);
-  font-size: var(--redsift-typography-link-font-size);
-  font-weight: var(--redsift-typography-link-font-weight);
-  line-height: var(--redsift-typography-link-line-height);
-  padding: unset;
-  text-decoration: none;
-
-  ${_ref => {
-  let {
-    $isDisabled
-  } = _ref;
-  return !$isDisabled ? css`
-          color: var(--redsift-color-success-primary);
-          text-decoration: underline;
-          text-decoration-color: var(--redsift-color-success-secondary);
-          text-underline-offset: 2px;
+const DOCUMENT_POSITION_FOLLOWING = 4;
+const FocusWithinGroupReducer = (state, action) => {
+  switch (action.type) {
+    case FocusWithinGroupActionType.REGISTER_TAB_STOP:
+      {
+        const newTabStop = action.payload;
+        if (!newTabStop.domElementRef.current) {
+          return state;
+        }
 
-          &:hover,
-          &:focus-visible {
-            cursor: pointer !important;
-            text-decoration-color: var(--redsift-color-success-primary);
+        // Iterate backwards through state.tabStops since it is
+        // most likely that the tab stop will need to be inserted
+        // at the end of that array.
+        let indexToInsertAt = -1;
+        for (let i = state.tabStops.length - 1; i >= 0; --i) {
+          const loopTabStop = state.tabStops[i];
+          if (loopTabStop.id === newTabStop.id) {
+            // console.warn(false, `'${newTabStop.id}' tab stop already registered`);
+            return state;
           }
-        ` : '';
-}}
+          // The compareDocumentPosition condition is true
+          // if newTabStop follows loopTabStop:
+          if (indexToInsertAt === -1 && loopTabStop.domElementRef.current && !!(loopTabStop.domElementRef.current.compareDocumentPosition(newTabStop.domElementRef.current) & DOCUMENT_POSITION_FOLLOWING)) {
+            indexToInsertAt = i + 1;
+            break;
+          }
+        }
 
-  &:focus-visible {
-    outline: 2px solid var(--redsift-color-success-primary);
+        // The indexToInsertAt is -1 when newTabStop should be inserted
+        // at the start of tabStops (the compareDocumentPosition condition
+        // always returns false in that case).
+        if (indexToInsertAt === -1) {
+          indexToInsertAt = 0;
+        }
+        const newTabStops = state.tabStops.slice();
+        newTabStops.splice(indexToInsertAt, 0, newTabStop);
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          selectedId: state.focusOnInit ? getUpdatedSelectedId(newTabStops, state.selectedId) : null,
+          tabStops: newTabStops,
+          rowStartMap: null
+        });
+      }
+    case FocusWithinGroupActionType.UNREGISTER_TAB_STOP:
+      {
+        const id = action.payload.id;
+        const newTabStops = state.tabStops.filter(tabStop => tabStop.id !== id);
+        if (newTabStops.length === state.tabStops.length) {
+          // console.warn(false, `'${id}' tab stop already unregistered`);
+          return state;
+        }
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          selectedId: state.focusOnInit ? getUpdatedSelectedId(newTabStops, state.selectedId) : null,
+          tabStops: newTabStops,
+          rowStartMap: null
+        });
+      }
+    case FocusWithinGroupActionType.TAB_STOP_UPDATED:
+      {
+        const {
+          id,
+          rowIndex,
+          isDisabled
+        } = action.payload;
+        const index = state.tabStops.findIndex(tabStop => tabStop.id === id);
+        if (index === -1) {
+          console.warn(false, `'${id}' tab stop not registered`);
+          return state;
+        }
+        const tabStop = state.tabStops[index];
+        if (tabStop.isDisabled === isDisabled && tabStop.rowIndex === rowIndex) {
+          // Nothing to do so short-circuit.
+          return state;
+        }
+        const newTabStop = _objectSpread2(_objectSpread2({}, tabStop), {}, {
+          rowIndex,
+          isDisabled
+        });
+        const newTabStops = state.tabStops.slice();
+        newTabStops.splice(index, 1, newTabStop);
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          selectedId: state.focusOnInit ? getUpdatedSelectedId(newTabStops, state.selectedId) : null,
+          tabStops: newTabStops,
+          rowStartMap: null
+        });
+      }
+    case FocusWithinGroupActionType.KEY_DOWN_ON_ITEM:
+      {
+        const {
+          id,
+          key,
+          ctrlKey
+        } = action.payload;
+        const index = state.tabStops.findIndex(tabStop => tabStop.id === id);
+        if (index === -1) {
+          console.warn(false, `'${id}' tab stop not registered`);
+          return state;
+        }
+        return moveSelectionFromKey(state, index, key, ctrlKey);
+      }
+    case FocusWithinGroupActionType.CLICK_ON_ITEM:
+      {
+        const id = action.payload.id;
+        const index = state.tabStops.findIndex(tabStop => tabStop.id === id);
+        if (index === -1) {
+          console.warn(false, `'${id}' tab stop not registered`);
+          return state;
+        }
+        const currentTabStop = state.tabStops[index];
+        return currentTabStop.isDisabled ? state : selectTabStop(state, currentTabStop, undefined, state.focusOnClick);
+      }
+    case FocusWithinGroupActionType.FOCUS_ON_LIST:
+      {
+        var _action$payload$id, _state$tabStops$;
+        const id = (_action$payload$id = action.payload.id) !== null && _action$payload$id !== void 0 ? _action$payload$id : (_state$tabStops$ = state.tabStops[0]) === null || _state$tabStops$ === void 0 ? void 0 : _state$tabStops$.id;
+        const index = state.tabStops.findIndex(tabStop => tabStop.id === id);
+        if (index === -1) {
+          return state;
+        }
+        const currentTabStop = state.tabStops[index];
+        return currentTabStop.isDisabled ? _objectSpread2(_objectSpread2({}, state), {}, {
+          delayedAction: undefined
+        }) : selectTabStop(_objectSpread2(_objectSpread2({}, state), {}, {
+          delayedAction: undefined
+        }), currentTabStop, undefined, state.focusOnClick);
+      }
+    case FocusWithinGroupActionType.BLUR_ON_LIST:
+      {
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          activedescendant: ['', '']
+        });
+      }
+    case FocusWithinGroupActionType.KEY_DOWN_ON_LIST:
+      {
+        const {
+          key,
+          ctrlKey
+        } = action.payload;
+        let index = state.tabStops.findIndex(tabStop => tabStop.id === state.selectedId);
+        if (index === -1) {
+          if (state.focusOnInit) {
+            console.warn(false, `'${state.selectedId}' tab stop not registered`);
+            return _objectSpread2(_objectSpread2({}, state), {}, {
+              delayedAction: undefined
+            });
+          } else {
+            index = 0;
+          }
+        }
+        return moveSelectionFromKey(_objectSpread2(_objectSpread2({}, state), {}, {
+          delayedAction: undefined
+        }), index, key, ctrlKey);
+      }
+    case FocusWithinGroupActionType.OPTIONS_UPDATED:
+      return _objectSpread2(_objectSpread2({}, state), action.payload);
+    case FocusWithinGroupActionType.FILTER_LIST:
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        selectedId: null,
+        activedescendant: ['', '']
+      }, action.payload);
+    case FocusWithinGroupActionType.DELAY_ACTION:
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        delayedAction: action.payload
+      });
+    /* istanbul ignore next */
+    default:
+      return state;
   }
-`;
+};
+function findIndexOfVeryFirstActiveTabStop(tabStops) {
+  return tabStops.findIndex(tabStop => !tabStop.isDisabled);
+}
+function findIndexOfVeryLastActiveTabStop(tabStops) {
+  for (let i = tabStops.length - 1; i >= 0; --i) {
+    const tabStop = tabStops[i];
+    if (!tabStop.isDisabled) {
+      return i;
+    }
+  }
+  return -1;
+}
 
-const _excluded$7 = ["as", "children", "className", "href", "isDisabled"];
-const COMPONENT_NAME$7 = 'Link';
-const CLASSNAME$7 = 'redsift-link';
-const DEFAULT_PROPS$7 = {};
+// Determine the updated value for selectedId:
+function getUpdatedSelectedId(tabStops, currentSelectedId) {
+  if (currentSelectedId === null) {
+    // There is not currently selected tab stop, so find
+    // the first tab stop that is not isDisabled and return
+    // its id, otherwise return null.
+    const index = tabStops.findIndex(tabStop => !tabStop.isDisabled);
+    return index === -1 ? null : tabStops[index].id;
+  }
+  let index = tabStops.findIndex(tabStop => tabStop.id === currentSelectedId);
+  if (index !== -1 && !tabStops[index].isDisabled) {
+    // The current selected id is still valid, so return it.
+    return currentSelectedId;
+  }
+
+  // Finds the first tab stop that is not isDisabled and return
+  // its id, otherwise return null.
+  index = tabStops.findIndex(tabStop => !tabStop.isDisabled);
+  return index === -1 ? null : tabStops[index].id;
+}
 
-/**
- * The Link is a semantic link that looks like a link.
+// Translates the user key down event info into a navigation instruction.
+function getNavigationValue(key, ctrlKey, isGrid, direction, loopAround, isFirst, isLast) {
+  switch (key) {
+    case EventKey.ArrowLeft:
+      if (isGrid || direction === 'horizontal' || direction === 'both') {
+        return !isGrid && loopAround && isFirst ? Navigation.VERY_LAST : Navigation.PREVIOUS;
+      }
+      return null;
+    case EventKey.ArrowRight:
+      if (isGrid || direction === 'horizontal' || direction === 'both') {
+        return !isGrid && loopAround && isLast ? Navigation.VERY_FIRST : Navigation.NEXT;
+      }
+      return null;
+    case EventKey.ArrowUp:
+      if (isGrid) {
+        return Navigation.PREVIOUS_ROW;
+      } else if (direction === 'vertical' || direction === 'both') {
+        return loopAround && isFirst ? Navigation.VERY_LAST : Navigation.PREVIOUS;
+      }
+      return null;
+    case EventKey.ArrowDown:
+      if (isGrid) {
+        return Navigation.NEXT_ROW;
+      } else if (direction === 'vertical' || direction === 'both') {
+        return loopAround && isLast ? Navigation.VERY_FIRST : Navigation.NEXT;
+      }
+      return null;
+    case EventKey.Home:
+      return !isGrid || ctrlKey ? Navigation.VERY_FIRST : Navigation.FIRST_IN_ROW;
+    case EventKey.End:
+      return !isGrid || ctrlKey ? Navigation.VERY_LAST : Navigation.LAST_IN_ROW;
+    /* istanbul ignore next */
+    default:
+      return null;
+  }
+}
+
+// Creates the new state for a tab stop when it becomes the selected one.
+function selectTabStop(state, tabStop, rowStartMap) {
+  let allowFocusing = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+  return _objectSpread2(_objectSpread2({}, state), {}, {
+    allowFocusing,
+    selectedId: tabStop.id,
+    rowStartMap: rowStartMap || state.rowStartMap,
+    activedescendant: state.focusType === 'virtual-focus' ? [tabStop.id, tabStop.value] : undefined
+  });
+}
+
+// Creates the row start index lookup map
+// for the currently registered tab stops.
+function createRowStartMap(state) {
+  const map = new Map();
+  for (let i = 0; i < state.tabStops.length; ++i) {
+    const {
+      rowIndex
+    } = state.tabStops[i];
+    if (rowIndex !== null && !map.has(rowIndex)) {
+      map.set(rowIndex, i);
+    }
+  }
+  return map;
+}
+function moveSelectionFromKey(state, index, key, ctrlKey) {
+  const currentTabStop = state.tabStops[index];
+  if (currentTabStop.isDisabled) {
+    return state;
+  }
+  const isGrid = currentTabStop.rowIndex !== null;
+  const isFirst = index === findIndexOfVeryFirstActiveTabStop(state.tabStops);
+  const isLast = index === findIndexOfVeryLastActiveTabStop(state.tabStops);
+  const navigation = getNavigationValue(key, ctrlKey, isGrid, state.direction, state.loopAround, isFirst, isLast);
+  if (!navigation) {
+    return state;
+  }
+  switch (navigation) {
+    case Navigation.NEXT:
+      {
+        for (let i = index + 1; i < state.tabStops.length; ++i) {
+          const tabStop = state.tabStops[i];
+          if (isGrid && tabStop.rowIndex !== currentTabStop.rowIndex) {
+            break;
+          }
+          if (!tabStop.isDisabled) {
+            return selectTabStop(state, tabStop);
+          }
+        }
+      }
+      break;
+    case Navigation.PREVIOUS:
+      {
+        for (let i = index - 1; i >= 0; --i) {
+          const tabStop = state.tabStops[i];
+          if (isGrid && tabStop.rowIndex !== currentTabStop.rowIndex) {
+            break;
+          }
+          if (!tabStop.isDisabled) {
+            return selectTabStop(state, tabStop);
+          }
+        }
+      }
+      break;
+    case Navigation.VERY_FIRST:
+      {
+        const index = findIndexOfVeryFirstActiveTabStop(state.tabStops);
+        if (index > -1) {
+          return selectTabStop(state, state.tabStops[index]);
+        }
+      }
+      break;
+    case Navigation.VERY_LAST:
+      {
+        const index = findIndexOfVeryLastActiveTabStop(state.tabStops);
+        if (index > -1) {
+          return selectTabStop(state, state.tabStops[index]);
+        }
+      }
+      break;
+    case Navigation.PREVIOUS_ROW:
+      {
+        if (currentTabStop.rowIndex === null || currentTabStop.rowIndex === 0) {
+          return state;
+        }
+        const rowStartMap = state.rowStartMap || createRowStartMap(state);
+        const rowStartIndex = rowStartMap.get(currentTabStop.rowIndex);
+        if (rowStartIndex === undefined) {
+          return state;
+        }
+        const columnOffset = index - rowStartIndex;
+        for (let i = currentTabStop.rowIndex - 1; i >= 0; --i) {
+          const rowStartIndex = rowStartMap.get(i);
+          if (rowStartIndex === undefined) {
+            return state;
+          }
+          const rowTabStop = state.tabStops[rowStartIndex + columnOffset];
+          if (rowTabStop && !rowTabStop.isDisabled) {
+            return selectTabStop(state, rowTabStop, rowStartMap);
+          }
+        }
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          allowFocusing: true,
+          rowStartMap
+        });
+      }
+    case Navigation.NEXT_ROW:
+      {
+        const maxRowIndex = state.tabStops[state.tabStops.length - 1].rowIndex;
+        if (currentTabStop.rowIndex === null || maxRowIndex === null || currentTabStop.rowIndex === maxRowIndex) {
+          return state;
+        }
+        const rowStartMap = state.rowStartMap || createRowStartMap(state);
+        const rowStartIndex = rowStartMap.get(currentTabStop.rowIndex);
+        if (rowStartIndex === undefined) {
+          return state;
+        }
+        const columnOffset = index - rowStartIndex;
+        for (let i = currentTabStop.rowIndex + 1; i <= maxRowIndex; ++i) {
+          const rowStartIndex = rowStartMap.get(i);
+          if (rowStartIndex === undefined) {
+            return state;
+          }
+          const rowTabStop = state.tabStops[rowStartIndex + columnOffset];
+          if (rowTabStop && !rowTabStop.isDisabled) {
+            return selectTabStop(state, rowTabStop, rowStartMap);
+          }
+        }
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          allowFocusing: true,
+          rowStartMap
+        });
+      }
+    case Navigation.FIRST_IN_ROW:
+      {
+        if (currentTabStop.rowIndex === null) {
+          return state;
+        }
+        const rowStartMap = state.rowStartMap || createRowStartMap(state);
+        const rowStartIndex = rowStartMap.get(currentTabStop.rowIndex);
+        if (rowStartIndex === undefined) {
+          return state;
+        }
+        for (let i = rowStartIndex; i < state.tabStops.length; ++i) {
+          const tabStop = state.tabStops[i];
+          if (tabStop.rowIndex !== currentTabStop.rowIndex) {
+            break;
+          } else if (!tabStop.isDisabled) {
+            return selectTabStop(state, state.tabStops[i], rowStartMap);
+          }
+        }
+      }
+      break;
+    case Navigation.LAST_IN_ROW:
+      {
+        if (currentTabStop.rowIndex === null) {
+          return state;
+        }
+        const rowStartMap = state.rowStartMap || createRowStartMap(state);
+        const rowEndIndex = rowStartMap.has(currentTabStop.rowIndex + 1) ? (rowStartMap.get(currentTabStop.rowIndex + 1) || 0) - 1 : state.tabStops.length - 1;
+        for (let i = rowEndIndex; i >= 0; --i) {
+          const tabStop = state.tabStops[i];
+          if (tabStop.rowIndex !== currentTabStop.rowIndex) {
+            break;
+          } else if (!tabStop.isDisabled) {
+            return selectTabStop(state, state.tabStops[i], rowStartMap);
+          }
+        }
+      }
+      break;
+  }
+  return state;
+}
+
+/**
+ * The FocusWithinGroup component.
+ *
+ * @param {ReactNode} children - The child content, which will
+ * include the DOM elements to rove between using the tab key.
+ * @param {KeyDirection} direction - An optional direction value
+ * that only applies when the roving tabindex is not being
+ * used within a grid. This value specifies the arrow key behaviour.
+ * The default value is 'horizontal'.
+ * When set to 'horizontal' then only the ArrowLeft and ArrowRight
+ * keys move to the previous and next tab stop respectively.
+ * When set to 'vertical' then only the ArrowUp and ArrowDown keys
+ * move to the previous and next tab stop respectively. When set
+ * to 'both' then both the ArrowLeft and ArrowUp keys can be used
+ * to move to the previous tab stop, and both the ArrowRight
+ * and ArrowDown keys can be used to move to the next tab stop.
+ * If you do not pass an explicit value then the 'horizontal'
+ * behaviour applies.
+ * @param {boolean} focusOnClick - An optional flag for indicating
+ * if `focus()` should invoked on an item in the roving tabindex
+ * when it is clicked. The default value for this flag is `false`,
+ * meaning that `focus()` will not be invoked on click.
+ * Browsers are
+ * [inconsistent in their behaviour](https://zellwk.com/blog/inconsistent-button-behavior/)
+ * when a button is clicked so you will see some variation between
+ * the browsers with the default value. Prior to version 3 of this library,
+ * the behaviour was to always invoke `focus()` on click; this behaviour
+ * can be maintained by passing `true`.
+ * @param {boolean} loopAround - An optional flag that,
+ * when set to `true`, will loop the tabindex around when the user
+ * tries to tab to the first or last elements in the roving tabindex,
+ * rather than stopping. The default value is `false` (no looping).
+ * Note that this option does not apply if the roving tabindex
+ * is being used on a grid.
+ */
+const FocusWithinGroup = props => {
+  const {
+    children,
+    direction,
+    focusOnClick,
+    loopAround,
+    focusType,
+    focusOnInit,
+    activedescendant
+  } = props;
+  const [state, dispatch] = useReducer(FocusWithinGroupReducer, _objectSpread2(_objectSpread2({}, FOCUS_WITHING_GROUP_INITIAL_STATE), {}, {
+    direction,
+    focusOnClick,
+    loopAround,
+    focusType,
+    focusOnInit,
+    activedescendant
+  }));
+
+  // Update the options whenever they change:
+  useEffect(() => {
+    dispatch({
+      type: FocusWithinGroupActionType.OPTIONS_UPDATED,
+      payload: {
+        direction: direction !== null && direction !== void 0 ? direction : FOCUS_WITHING_GROUP_INITIAL_STATE.direction,
+        focusOnClick: focusOnClick !== null && focusOnClick !== void 0 ? focusOnClick : FOCUS_WITHING_GROUP_INITIAL_STATE.focusOnClick,
+        loopAround: loopAround !== null && loopAround !== void 0 ? loopAround : FOCUS_WITHING_GROUP_INITIAL_STATE.loopAround,
+        focusType: focusType !== null && focusType !== void 0 ? focusType : FOCUS_WITHING_GROUP_INITIAL_STATE.focusType,
+        focusOnInit: focusOnInit !== null && focusOnInit !== void 0 ? focusOnInit : FOCUS_WITHING_GROUP_INITIAL_STATE.focusOnInit,
+        activedescendant: activedescendant !== null && activedescendant !== void 0 ? activedescendant : FOCUS_WITHING_GROUP_INITIAL_STATE.activedescendant
+      }
+    });
+  }, [direction, focusOnClick, focusOnInit, loopAround, focusType, activedescendant]);
+  const context = useMemo(() => ({
+    state,
+    dispatch
+  }), [state]);
+  return /*#__PURE__*/React__default.createElement(FocusWithinGroupContext.Provider, {
+    value: context
+  }, children);
+};
+
+let counter = 0;
+function uniqueId() {
+  return `rti_${++counter}`;
+}
+
+/**
+ * Includes the given DOM element in the current roving tabindex.
+ * @param {RefObject<Element>} domElementRef The DOM element to include.
+ * This must be the same DOM element for the lifetime of the containing
+ * component.
+ * @param {boolean} isDisabled Whether or not the DOM element is currently
+ * enabled. This value can be updated as appropriate throughout the lifetime
+ * of the containing component.
+ * @param {number?} rowIndex An optional integer value that must be
+ * populated if the roving tabindex is being used in a grid. In that case,
+ * set it to the zero-based index of the row that the given DOM element
+ * is currently part of. You can update this row index as appropriate
+ * throughout the lifetime of the containing component, for example if
+ * the shape of the grid can change dynamically.
+ * @returns A tuple of values to be applied by the containing
+ * component for the roving tabindex to work correctly.
+ * First tuple value: The tabIndex value to apply to the tab stop
+ * element.
+ * Second tuple value: Whether or not focus() should be invoked on the
+ * tab stop element.
+ * Third tuple value: The onKeyDown callback to apply to the tab
+ * stop element. If the key press is relevant to the hook then
+ * event.preventDefault() will be invoked on the event.
+ * Fourth tuple value: The onClick callback to apply to the tab
+ * stop element.
+ */
+function useFocusOnListItem(props) {
+  var _context$state$active;
+  const {
+    domElementRef,
+    isDisabled,
+    id,
+    value,
+    rowIndex = null
+  } = props;
+  // Create a stable ID for the lifetime of the component:
+  const idRef = useRef(null);
+  function getId() {
+    if (id) {
+      return id;
+    }
+    if (!idRef.current) {
+      idRef.current = uniqueId();
+    }
+    return idRef.current;
+  }
+  const isMounted = useRef(false);
+  const context = useContext(FocusWithinGroupContext);
+
+  // Register the tab stop on mount and unregister it on unmount:
+  useEffect(() => {
+    const id = getId();
+    context.dispatch({
+      type: FocusWithinGroupActionType.REGISTER_TAB_STOP,
+      payload: {
+        id,
+        domElementRef,
+        rowIndex,
+        isDisabled,
+        value: value
+      }
+    });
+    return () => {
+      context.dispatch({
+        type: FocusWithinGroupActionType.UNREGISTER_TAB_STOP,
+        payload: {
+          id
+        }
+      });
+    };
+  }, []);
+
+  // Update the tab stop data if rowIndex or isDisabled change.
+  // The isMounted flag is used to prevent this effect running
+  // on mount, which is benign but redundant (as the
+  // REGISTER_TAB_STOP action would have just been dispatched).
+  useEffect(() => {
+    if (isMounted.current) {
+      context.dispatch({
+        type: FocusWithinGroupActionType.TAB_STOP_UPDATED,
+        payload: {
+          id: getId(),
+          rowIndex,
+          isDisabled
+        }
+      });
+    } else {
+      isMounted.current = true;
+    }
+  }, [rowIndex, isDisabled]);
+
+  // Create a stable callback function for handling key down events:
+  const handleKeyDown = useCallback(event => {
+    const key = EventKey[event.key];
+    if (!key) {
+      return;
+    }
+    context.dispatch({
+      type: FocusWithinGroupActionType.KEY_DOWN_ON_ITEM,
+      payload: {
+        id: getId(),
+        key,
+        ctrlKey: event.ctrlKey
+      }
+    });
+    event.preventDefault();
+  }, []);
+
+  // Create a stable callback function for handling click events:
+  const handleClick = useCallback(() => {
+    context.dispatch({
+      type: FocusWithinGroupActionType.CLICK_ON_ITEM,
+      payload: {
+        id: getId()
+      }
+    });
+  }, []);
+
+  // Determine if the current tab stop is the currently active one:
+  const selected = getId() === context.state.selectedId;
+  const tabIndex = context.state.focusType === 'roving-tabindex' ? selected ? 0 : -1 : undefined;
+  const isFocused = selected && context.state.allowFocusing;
+  useEffect(() => {
+    if (isFocused && domElementRef.current && context.state.focusType === 'roving-tabindex') {
+      var _current;
+      (_current = domElementRef.current) === null || _current === void 0 ? void 0 : _current.focus();
+    }
+  }, [isFocused]);
+  return {
+    tabIndex,
+    isFocused: context.state.focusType === 'roving-tabindex' ? isFocused && document.activeElement === domElementRef.current : selected && ((_context$state$active = context.state.activedescendant) === null || _context$state$active === void 0 ? void 0 : _context$state$active[0]) === getId(),
+    handleKeyDown,
+    handleClick
+  };
+}
+
+function useFocusOnList() {
+  const context = useContext(FocusWithinGroupContext);
+  const handleKeyDown = useCallback(event => {
+    const key = EventKey[event.key];
+    if (!key) {
+      return;
+    }
+    context.dispatch({
+      type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
+      payload: {
+        key,
+        ctrlKey: event.ctrlKey
+      }
+    });
+    event.preventDefault();
+  }, []);
+  const handleFocus = useCallback(() => {
+    context.dispatch({
+      type: FocusWithinGroupActionType.FOCUS_ON_LIST,
+      payload: {
+        id: context.state.selectedId
+      }
+    });
+  }, [context.state.selectedId]);
+  const handleBlur = useCallback(() => {
+    context.dispatch({
+      type: FocusWithinGroupActionType.BLUR_ON_LIST,
+      payload: {}
+    });
+  }, []);
+  return {
+    activedescendant: context.state.activedescendant,
+    handleKeyDown,
+    handleFocus,
+    handleBlur
+  };
+}
+
+/**
+ * Component style.
+ */
+const StyledGrid = styled.div`
+  display: ${_ref => {
+  let {
+    inline
+  } = _ref;
+  return inline ? 'inline-grid' : 'grid';
+}};
+
+  ${baseStyling}
+  ${baseInternalSpacing}
+  ${baseGrid}
+`;
+
+/**
+ * Component style.
+ */
+const StyledGridItem = styled.div`
+  display: inherit;
+
+  ${baseStyling}
+  ${baseInternalSpacing}
+`;
+
+const _excluded$d = ["children", "className"];
+const COMPONENT_NAME$b = 'GridItem';
+const CLASSNAME$b = 'redsift-grid-item';
+const DEFAULT_PROPS$b = {};
+
+/**
+ * The GridItem component.
+ */
+const GridItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$d);
+  return /*#__PURE__*/React__default.createElement(StyledGridItem, _extends$1({}, forwardedProps, {
+    className: classNames(GridItem.className, className),
+    ref: ref
+  }), children);
+});
+GridItem.className = CLASSNAME$b;
+GridItem.defaultProps = DEFAULT_PROPS$b;
+GridItem.displayName = COMPONENT_NAME$b;
+
+const _excluded$c = ["children", "className"];
+const COMPONENT_NAME$a = 'Grid';
+const CLASSNAME$a = 'redsift-grid';
+const DEFAULT_PROPS$a = {};
+
+/**
+ * The Grid component.
+ */
+const BaseGrid = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$c);
+  return /*#__PURE__*/React__default.createElement(StyledGrid, _extends$1({}, forwardedProps, {
+    className: classNames(BaseGrid.className, className),
+    ref: ref
+  }), children);
+});
+BaseGrid.className = CLASSNAME$a;
+BaseGrid.defaultProps = DEFAULT_PROPS$a;
+BaseGrid.displayName = COMPONENT_NAME$a;
+const Grid = Object.assign(BaseGrid, {
+  Item: GridItem
+});
+
+/**
+ * Component style.
+ */
+const StyledItem = styled.div`
+  height: 20px;
+  position: relative;
+  width: calc(100% - 32px);
+  padding: 8px 16px;
+
+  ${baseStyling}
+
+  align-items: center;
+  background: none;
+  border: none;
+  display: inline-flex;
+
+  ${_ref => {
+  let {
+    $isActive,
+    $isSelected,
+    $isDisabled,
+    $isHovered,
+    $isFocused
+  } = _ref;
+  return css`
+    background-color: ${($isActive || $isSelected) && ($isHovered || $isFocused) ? 'var(--redsift-color-default-active-hover)' : $isActive ? 'var(--redsift-color-default-active)' : $isHovered ? 'var(--redsift-color-default-hover)' : $isFocused ? 'var(--redsift-color-default-hover)' : $isSelected && !$isDisabled ? 'var(--redsift-color-default-active)' : $isSelected && $isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : $isDisabled ? 'none' : 'none'};
+  `;
+}}
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+
+    ${_ref2 => {
+  let {
+    $isActive,
+    $isSelected,
+    $isDisabled
+  } = _ref2;
+  return css`
+      cursor: ${$isDisabled ? 'default' : 'pointer'};
+      background-color: ${$isActive ? 'var(--redsift-color-default-active-hover)' : $isSelected && !$isDisabled ? 'var(--redsift-color-default-active-hover)' : $isDisabled ? 'none' : 'var(--redsift-color-default-hover)'};
+    `;
+}};
+  }
+
+  &:active {
+    outline: none;
+
+    ${_ref3 => {
+  let {
+    $isHovered,
+    $isDisabled
+  } = _ref3;
+  return css`
+      background-color: ${$isHovered ? 'var(--redsift-color-default-active-hover)' : $isDisabled ? 'none' : 'var(--redsift-color-default-active)'};
+    `;
+}};
+  }
+`;
+
+const LISTBOX_INITIAL_STATE = {
+  isDisabled: false,
+  isReadOnly: false,
+  selectedValues: [],
+  selectionMode: 'single'
+};
+const ListboxContext = /*#__PURE__*/React__default.createContext({
+  state: LISTBOX_INITIAL_STATE,
+  dispatch: () => {}
+});
+
+/**
+ * Context props.
+ */
+
+let ListboxActionType = /*#__PURE__*/function (ListboxActionType) {
+  ListboxActionType["TOGGLE"] = "TOGGLE";
+  ListboxActionType["SET"] = "SET";
+  return ListboxActionType;
+}({});
+/**
+ * Component variant.
+ */
+const ListboxVariant = {
+  standalone: 'standalone',
+  unstyled: 'unstyled'
+};
+
+/**
+ * Component props.
+ */
+
+function useListboxItem(props) {
+  const {
+    domElementRef,
+    value,
+    id,
+    isDisabled,
+    propsIsSelected
+  } = props;
+  const {
+    tabIndex,
+    isFocused,
+    handleKeyDown: handleFocusKeyDown,
+    handleClick: handleFocusClick
+  } = useFocusOnListItem({
+    domElementRef,
+    isDisabled: isDisabled,
+    id,
+    value
+  });
+  const context = useContext(ListboxContext);
+  const handleKeyDown = useCallback(event => {
+    handleFocusKeyDown(event);
+    const code = event.code;
+    if (code === 'Enter' || code === 'Space') {
+      if (context.state.selectionMode === 'multiple') {
+        context.dispatch({
+          type: ListboxActionType.TOGGLE,
+          payload: {
+            value,
+            activedescendant: [id, value]
+          }
+        });
+      } else {
+        context.dispatch({
+          type: ListboxActionType.SET,
+          payload: {
+            values: [value],
+            activedescendant: [id, value]
+          }
+        });
+      }
+    }
+  }, []);
+  const handleClick = useCallback(() => {
+    handleFocusClick();
+    if (context.state.selectionMode === 'multiple') {
+      context.dispatch({
+        type: ListboxActionType.TOGGLE,
+        payload: {
+          value,
+          activedescendant: [id, value]
+        }
+      });
+    } else {
+      context.dispatch({
+        type: ListboxActionType.SET,
+        payload: {
+          values: [value],
+          activedescendant: [id, value]
+        }
+      });
+    }
+  }, []);
+  const isSelected = propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : context.state.selectedValues.find(selectedValue => selectedValue === value) !== undefined;
+  useEffect(() => {
+    if (isFocused && domElementRef.current) {
+      var _current;
+      (_current = domElementRef.current) === null || _current === void 0 ? void 0 : _current.focus();
+    }
+  }, [isFocused]);
+  return {
+    tabIndex,
+    isFocused,
+    isSelected,
+    isDisabled,
+    handleKeyDown,
+    handleClick
+  };
+}
+
+const _excluded$b = ["children", "className", "defaultSelected", "id", "isActive", "isDisabled", "isHovered", "isSelected", "value"];
+const COMPONENT_NAME$9 = 'Item';
+const CLASSNAME$9 = 'redsift-item';
+const DEFAULT_PROPS$9 = {};
+const RenderedItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      defaultSelected,
+      id: propsId,
+      isActive,
+      isDisabled: propsIsDisabled,
+      isHovered,
+      isSelected: propsIsSelected,
+      value
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$b);
+  const id = propsId !== null && propsId !== void 0 ? propsId : value;
+  const _ref = useRef();
+  const divRef = ref !== null && ref !== void 0 ? ref : _ref;
+  const {
+    tabIndex,
+    isFocused,
+    isSelected,
+    isDisabled,
+    handleKeyDown,
+    handleClick
+  } = useListboxItem({
+    domElementRef: divRef,
+    value,
+    id,
+    isDisabled: propsIsDisabled,
+    propsIsSelected: propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected
+  });
+  return /*#__PURE__*/React__default.createElement(StyledItem, _extends$1({
+    role: "option"
+  }, forwardedProps, {
+    id: id,
+    $isActive: isActive,
+    $isDisabled: isDisabled,
+    $isFocused: isFocused,
+    $isHovered: isHovered,
+    $isSelected: isSelected,
+    "aria-selected": isSelected,
+    className: classNames(Item.className, className),
+    onClick: handleClick,
+    ref: divRef,
+    onKeyDown: handleKeyDown,
+    tabIndex: tabIndex
+  }), children !== null && children !== void 0 ? children : value);
+});
+
+/**
+ * The Item component.
+ */
+const Item = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    value
+  } = props;
+  const focusContext = useContext(FocusWithinGroupContext);
+  if (!focusContext.state.filter) {
+    return /*#__PURE__*/React__default.createElement(RenderedItem, _extends$1({}, props, {
+      ref: ref
+    }));
+  }
+  const {
+    value: filterValue,
+    type,
+    caseSensitive
+  } = focusContext.state.filter;
+  if (!filterValue) {
+    return /*#__PURE__*/React__default.createElement(RenderedItem, _extends$1({}, props, {
+      ref: ref
+    }));
+  } else if (caseSensitive && (type === 'startsWith' && value.startsWith(filterValue) || type === 'contains' && value.includes(filterValue) || type === 'endsWith' && value.endsWith(filterValue))) {
+    return /*#__PURE__*/React__default.createElement(RenderedItem, _extends$1({}, props, {
+      ref: ref
+    }));
+  } else if (!caseSensitive && (type === 'startsWith' && value.toLowerCase().startsWith(filterValue.toLowerCase()) || type === 'contains' && value.toLowerCase().includes(filterValue.toLowerCase()) || type === 'endsWith' && value.toLowerCase().endsWith(filterValue.toLowerCase()))) {
+    return /*#__PURE__*/React__default.createElement(RenderedItem, _extends$1({}, props, {
+      ref: ref
+    }));
+  }
+  return null;
+});
+Item.className = CLASSNAME$9;
+Item.defaultProps = DEFAULT_PROPS$9;
+Item.displayName = COMPONENT_NAME$9;
+
+/**
+ * Component style.
+ */
+const StyledLink = styled.a`
+  ${baseStyling}
+
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: text !important;
+  font-family: var(--redsift-typography-link-font-family);
+  font-size: var(--redsift-typography-link-font-size);
+  font-weight: var(--redsift-typography-link-font-weight);
+  line-height: var(--redsift-typography-link-line-height);
+  padding: unset;
+  text-decoration: none;
+
+  ${_ref => {
+  let {
+    $isDisabled
+  } = _ref;
+  return !$isDisabled ? css`
+          color: var(--redsift-color-success-primary);
+          text-decoration: underline;
+          text-decoration-color: var(--redsift-color-success-secondary);
+          text-underline-offset: 2px;
+
+          &:hover,
+          &:focus-visible {
+            cursor: pointer !important;
+            text-decoration-color: var(--redsift-color-success-primary);
+          }
+        ` : '';
+}}
+
+  &:focus-visible {
+    outline: 2px solid var(--redsift-color-success-primary);
+  }
+`;
+
+const _excluded$a = ["as", "children", "className", "href", "isDisabled"];
+const COMPONENT_NAME$8 = 'Link';
+const CLASSNAME$8 = 'redsift-link';
+const DEFAULT_PROPS$8 = {};
+
+/**
+ * The Link is a semantic link that looks like a link.
  * Shoud be used for internal and external navigation only.
  *
  * For a semantic link that looks like a button, please use the ButtonLink component.
@@ -9452,7 +10440,7 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
       href,
       isDisabled
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$7);
+    forwardedProps = _objectWithoutProperties(props, _excluded$a);
   return /*#__PURE__*/React__default.createElement(StyledLink, _extends$1({
     as: as,
     "aria-disabled": isDisabled,
@@ -9465,14 +10453,14 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-Link.className = CLASSNAME$7;
-Link.defaultProps = DEFAULT_PROPS$7;
-Link.displayName = COMPONENT_NAME$7;
+Link.className = CLASSNAME$8;
+Link.defaultProps = DEFAULT_PROPS$8;
+Link.displayName = COMPONENT_NAME$8;
 
-const _excluded$6 = ["children", "className", "disabled", "isDisabled"];
-const COMPONENT_NAME$6 = 'LinkButton';
-const CLASSNAME$6 = 'redsift-link-button';
-const DEFAULT_PROPS$6 = {};
+const _excluded$9 = ["children", "className", "disabled", "isDisabled"];
+const COMPONENT_NAME$7 = 'LinkButton';
+const CLASSNAME$7 = 'redsift-link-button';
+const DEFAULT_PROPS$7 = {};
 
 /**
  * The LinkButton is a semantic button that looks like a link.
@@ -9489,7 +10477,7 @@ const LinkButton = /*#__PURE__*/forwardRef((props, ref) => {
       disabled,
       isDisabled: propsIsDisabled
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$6);
+    forwardedProps = _objectWithoutProperties(props, _excluded$9);
   const isDisabled = propsIsDisabled || disabled;
   return /*#__PURE__*/React__default.createElement(StyledLink, _extends$1({
     as: "button"
@@ -9503,9 +10491,269 @@ const LinkButton = /*#__PURE__*/forwardRef((props, ref) => {
     ref: buttonRef
   }), children);
 });
-LinkButton.className = CLASSNAME$6;
-LinkButton.defaultProps = DEFAULT_PROPS$6;
-LinkButton.displayName = COMPONENT_NAME$6;
+LinkButton.className = CLASSNAME$7;
+LinkButton.defaultProps = DEFAULT_PROPS$7;
+LinkButton.displayName = COMPONENT_NAME$7;
+
+const _excluded$8 = ["children", "id", "isDisabled", "context"];
+const ActiveDescendantListbox = /*#__PURE__*/forwardRef((props, ref) => {
+  var _context$state$active;
+  const {
+      children,
+      id,
+      isDisabled,
+      context
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$8);
+  const {
+    activedescendant,
+    handleKeyDown: handleFocusKeyDown,
+    handleFocus,
+    handleBlur
+  } = useFocusOnList();
+  const handleKeyDown = useCallback(event => {
+    handleFocusKeyDown(event);
+    const code = event.code;
+    if (code === 'Enter' || code === 'Space') {
+      if (context.state.selectionMode === 'multiple') {
+        var _activedescendant$;
+        context.dispatch({
+          type: ListboxActionType.TOGGLE,
+          payload: {
+            value: (_activedescendant$ = activedescendant === null || activedescendant === void 0 ? void 0 : activedescendant[1]) !== null && _activedescendant$ !== void 0 ? _activedescendant$ : '',
+            activedescendant
+          }
+        });
+      } else {
+        var _activedescendant$2;
+        context.dispatch({
+          type: ListboxActionType.SET,
+          payload: {
+            values: [(_activedescendant$2 = activedescendant === null || activedescendant === void 0 ? void 0 : activedescendant[1]) !== null && _activedescendant$2 !== void 0 ? _activedescendant$2 : ''],
+            activedescendant
+          }
+        });
+      }
+    }
+  }, [activedescendant]);
+  return /*#__PURE__*/React__default.createElement(Flexbox, _extends$1({
+    flexDirection: "column",
+    gap: "8px"
+  }, forwardedProps, {
+    "aria-disabled": isDisabled,
+    ref: ref,
+    id: id,
+    role: "listbox",
+    "aria-activedescendant": (_context$state$active = context.state.activedescendant) === null || _context$state$active === void 0 ? void 0 : _context$state$active[0],
+    "aria-multiselectable": context.state.selectionMode === 'multiple',
+    tabIndex: 0,
+    style: {
+      outline: 'none'
+    },
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onMouseDown: event => event.preventDefault(),
+    onMouseLeave: handleBlur,
+    onKeyDown: handleKeyDown
+  }), /*#__PURE__*/React__default.createElement(ListboxContext.Provider, {
+    value: context
+  }, children));
+});
+
+const _excluded$7 = ["children", "id", "isDisabled", "context"];
+const RovingTabindexListbox = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      id,
+      isDisabled,
+      context
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$7);
+  return /*#__PURE__*/React__default.createElement(Flexbox, _extends$1({
+    flexDirection: "column",
+    gap: "8px"
+  }, forwardedProps, {
+    "aria-disabled": isDisabled,
+    ref: ref,
+    id: id,
+    role: "listbox",
+    "aria-multiselectable": context.state.selectionMode === 'multiple'
+  }), /*#__PURE__*/React__default.createElement(ListboxContext.Provider, {
+    value: context
+  }, children));
+});
+
+/**
+ * Component style.
+ */
+const StyledListbox = styled(Flexbox)`
+  outline: none;
+
+  ${_ref => {
+  let {
+    $variant,
+    $isDisabled,
+    $isInvalid
+  } = _ref;
+  return $variant === ListboxVariant.standalone ? css`
+          span.redsift-listbox-label {
+            font-family: var(--redsift-typography-body-font-family);
+            font-weight: var(--redsift-typography-body-font-weight);
+            font-size: var(--redsift-typography-body-font-size);
+            line-height: var(--redsift-typography-body-line-height);
+
+            color: var(--redsift-color-neutral-black);
+            ${$isDisabled ? `
+          color: var(--redsift-color-neutral-midgrey);
+        ` : ''}
+            ${$isInvalid ? `
+          color: var(--redsift-color-error-primary);
+        ` : ''}
+          }
+
+          .redsift-listbox-list {
+            border: 1px solid var(--redsift-color-neutral-midgrey);
+            padding: 4px;
+            min-width: 200px;
+          }
+        ` : '';
+}}
+`;
+
+const ListboxReducer = (state, action) => {
+  switch (action.type) {
+    case ListboxActionType.TOGGLE:
+      {
+        if (state.isReadOnly || state.isDisabled) {
+          return state;
+        }
+        if (!state.selectedValues.includes(action.payload.value)) {
+          return _objectSpread2(_objectSpread2({}, state), {}, {
+            selectedValues: state.selectedValues.concat(action.payload.value)
+          }, action.payload.activedescendant && {
+            activedescendant: action.payload.activedescendant
+          });
+        }
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          selectedValues: state.selectedValues.filter(existingValue => existingValue !== action.payload.value)
+        }, action.payload.activedescendant && {
+          activedescendant: action.payload.activedescendant
+        });
+      }
+    case ListboxActionType.SET:
+      {
+        if (state.isReadOnly || state.isDisabled) {
+          return state;
+        }
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          selectedValues: action.payload.values
+        }, action.payload.activedescendant && {
+          activedescendant: action.payload.activedescendant
+        });
+      }
+    default:
+      return state;
+  }
+};
+
+const _excluded$6 = ["children", "className", "defaultValues", "direction", "focusOnClick", "focusType", "id", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "loopAround", "onChange", "selectionMode", "values", "variant"];
+const COMPONENT_NAME$6 = 'Listbox';
+const CLASSNAME$6 = 'redsift-listbox';
+const DEFAULT_PROPS$6 = {
+  focusOnClick: false,
+  focusType: 'roving-tabindex',
+  selectionMode: 'single',
+  variant: ListboxVariant.standalone
+};
+
+/**
+ * The Listbox component.
+ * Can be used as controlled or uncontrolled.
+ */
+const Listbox = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      defaultValues,
+      direction,
+      focusOnClick,
+      focusType,
+      id: propsId,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      label,
+      loopAround,
+      onChange,
+      selectionMode,
+      values,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$6);
+  const id = (propsId !== null && propsId !== void 0 ? propsId : useId$1()).replace(/:/g, '');
+  const _ref = useRef();
+  const divRef = ref !== null && ref !== void 0 ? ref : _ref;
+  const [state, dispatch] = useReducer(ListboxReducer, _objectSpread2(_objectSpread2({}, LISTBOX_INITIAL_STATE), {}, {
+    isDisabled,
+    isReadOnly,
+    selectedValues: values || defaultValues || [],
+    selectionMode
+  }));
+  useEffect(() => {
+    if (values && values.length >= 0) {
+      dispatch({
+        type: ListboxActionType.SET,
+        payload: {
+          values
+        }
+      });
+    }
+  }, [values]);
+  const context = useMemo(() => ({
+    state,
+    dispatch
+  }), [state]);
+  useEffect(() => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(state.selectedValues);
+  }, [state.selectedValues]);
+  return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    wrapper: children => /*#__PURE__*/React__default.createElement(StyledListbox, _extends$1({
+      flexDirection: "column",
+      gap: "8px"
+    }, forwardedProps, {
+      $isDisabled: isDisabled,
+      $isInvalid: isInvalid || isRequired && state.selectedValues.length === 0,
+      $isReadOnly: isReadOnly,
+      className: classNames(Listbox.className, className),
+      ref: divRef,
+      id: id,
+      $variant: variant
+    }), children),
+    condition: variant === ListboxVariant.standalone
+  }, /*#__PURE__*/React__default.createElement(FocusWithinGroup, {
+    direction: direction,
+    focusOnClick: focusOnClick,
+    loopAround: loopAround,
+    focusType: focusType
+  }, label ? /*#__PURE__*/React__default.createElement("span", {
+    id: `${id}-label`,
+    className: `${Listbox.className}-label`
+  }, label, isRequired ? /*#__PURE__*/React__default.createElement("span", {
+    "aria-hidden": "true"
+  }, ' *') : null) : null, focusType === 'roving-tabindex' ? /*#__PURE__*/React__default.createElement(RovingTabindexListbox, _extends$1({}, forwardedProps, {
+    className: `${Listbox.className}-list`,
+    context: context,
+    ref: divRef
+  }), children) : /*#__PURE__*/React__default.createElement(ActiveDescendantListbox, _extends$1({}, forwardedProps, {
+    className: `${Listbox.className}-list`,
+    context: context,
+    ref: divRef
+  }), children)));
+});
+Listbox.className = CLASSNAME$6;
+Listbox.defaultProps = DEFAULT_PROPS$6;
+Listbox.displayName = COMPONENT_NAME$6;
 
 /**
  * Component style.
@@ -9713,7 +10961,7 @@ const StyledRadioGroup = styled.div`
   }
 `;
 
-const _excluded$4 = ["children", "className", "defaultValue", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "possibleValues", "value"];
+const _excluded$4 = ["children", "className", "defaultValue", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "value"];
 const COMPONENT_NAME$4 = 'RadioGroup';
 const CLASSNAME$4 = 'redsift-radio-group';
 const DEFAULT_PROPS$4 = {
@@ -9738,7 +10986,6 @@ const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
       label,
       onChange,
       orientation,
-      possibleValues,
       value
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$4);
@@ -9752,7 +10999,6 @@ const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
     value: selectedValue,
     isDisabled: isDisabled || false,
     isReadOnly: isReadOnly || false,
-    possibleValues: possibleValues,
     setValue(value) {
       if (isReadOnly || isDisabled) {
         return;
@@ -10323,12 +11569,12 @@ const StyledSwitchGroup = styled.div`
     $orientation
   } = _ref;
   return $orientation === SwitchGroupOrientation.vertical ? `
-    div.redsift-checkbox-group-boxes {
+    div.redsift-switch-group-switches {
       display: flex;
       flex-direction: column;
     }
   ` : `
-    div.redsift-checkbox-group-boxes {
+    div.redsift-switch-group-switches {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
@@ -10336,7 +11582,7 @@ const StyledSwitchGroup = styled.div`
   `;
 }}
 
-  span.redsift-checkbox-group-label {
+  span.redsift-switch-group-label {
     font-family: var(--redsift-typography-body-font-family);
     font-weight: var(--redsift-typography-body-font-weight);
     font-size: var(--redsift-typography-body-font-size);
@@ -10361,7 +11607,7 @@ const StyledSwitchGroup = styled.div`
 }}
   }
 
-  span.redsift-checkbox-group-description {
+  span.redsift-switch-group-description {
     font-family: var(--redsift-typography-helper-font-family);
     font-weight: var(--redsift-typography-helper-font-weight);
     font-size: var(--redsift-typography-helper-font-size);
@@ -10387,9 +11633,9 @@ const StyledSwitchGroup = styled.div`
   }
 `;
 
-const _excluded$1 = ["children", "className", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "possibleValues", "value"];
+const _excluded$1 = ["children", "className", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "value"];
 const COMPONENT_NAME$1 = 'SwitchGroup';
-const CLASSNAME$1 = 'redsift-checkbox-group';
+const CLASSNAME$1 = 'redsift-switch-group';
 const DEFAULT_PROPS$1 = {
   color: ColorPalette.default,
   orientation: SwitchGroupOrientation.vertical
@@ -10412,7 +11658,6 @@ const SwitchGroup = /*#__PURE__*/forwardRef((props, ref) => {
       label,
       onChange,
       orientation,
-      possibleValues,
       value
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1);
@@ -10426,7 +11671,6 @@ const SwitchGroup = /*#__PURE__*/forwardRef((props, ref) => {
     value: selectedValues,
     isDisabled: isDisabled || false,
     isReadOnly: isReadOnly || false,
-    possibleValues: possibleValues,
     setValue(values) {
       if (isReadOnly || isDisabled) {
         return;
@@ -10462,7 +11706,7 @@ const SwitchGroup = /*#__PURE__*/forwardRef((props, ref) => {
   }), /*#__PURE__*/React__default.createElement("span", {
     className: `${SwitchGroup.className}-label`
   }, label, isRequired ? ' *' : null), /*#__PURE__*/React__default.createElement("div", {
-    className: `${SwitchGroup.className}-boxes`
+    className: `${SwitchGroup.className}-switches`
   }, /*#__PURE__*/React__default.createElement(SwitchGroupContext.Provider, {
     value: state
   }, children)), /*#__PURE__*/React__default.createElement("span", {
@@ -10492,18 +11736,19 @@ const StyledTextField = styled.div`
   height: fit-content;
   position: relative;
   width: fit-content;
+  margin: 0;
+  min-width: 0;
+  padding: 0;
   ${baseStyling}
 
   border: 0;
   display: inline-flex;
   flex-direction: column;
-  margin: 0;
-  min-width: 0;
-  padding: 0;
   vertical-align: top;
 
   ${_ref => {
   let {
+    $hasLeftIcon,
     $hasContent,
     $isFocused,
     $isDisabled,
@@ -10517,36 +11762,27 @@ const StyledTextField = styled.div`
       font-size: var(--redsift-typography-input-text-font-size);
       font-weight: var(--redsift-typography-input-text-font-weight);
       line-height: var(--redsift-typography-input-text-line-height);
-      left: 0;
+      left: ${$hasLeftIcon && !$hasContent ? '32px' : '0'};
       overflow: hidden;
       pointer-events: none;
       position: absolute;
       text-overflow: ellipsis;
       top: -8px;
       transform-origin: top left;
-      transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
-        transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+      transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
         max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
       white-space: nowrap;
       z-index: 1;
 
       ${!$hasContent ? css`
             max-width: calc(100% - 24px);
-            transform: translate(
-                ${$variant === TextFieldVariant.underline ? '0px' : '14px'},
-                16px
-              )
-              scale(1);
+            transform: translate(${$variant === TextFieldVariant.underline ? '0px' : '14px'}, 16px) scale(1);
           ` : css`
             font-family: var(--redsift-typography-body2-font-family);
             font-size: var(--redsift-typography-body2-font-size);
             font-weight: var(--redsift-typography-body2-font-weight);
             max-width: calc(133% - 32px);
-            transform: translate(
-                ${$variant === TextFieldVariant.underline ? '0px' : '14px'},
-                -1px
-              )
-              scale(0.75);
+            transform: translate(${$variant === TextFieldVariant.underline ? '0px' : '14px'}, -1px) scale(0.75);
           `}
 
       ${$isDisabled ? css`
@@ -10554,9 +11790,7 @@ const StyledTextField = styled.div`
           ` : $isInvalid ? css`
             color: var(--redsift-color-error-primary);
           ` : $isFocused ? css`
-            color: var(
-              --redsift-color-${$isColored ? 'default' : 'question'}-primary
-            );
+            color: var(--redsift-color-${$isColored ? 'default' : 'question'}-primary);
           ` : css`
             color: var(--redsift-color-neutral-darkgrey);
           `}
@@ -10630,9 +11864,7 @@ const StyledTextField = styled.div`
           ` : $isInvalid ? css`
             border-color: var(--redsift-color-error-primary);
           ` : $isFocused ? css`
-            border-color: var(
-              --redsift-color-${$isColored ? 'default' : 'question'}-primary
-            );
+            border-color: var(--redsift-color-${$isColored ? 'default' : 'question'}-primary);
           ` : css`
             border-color: var(--redsift-color-neutral-midgrey);
           `}
@@ -10665,11 +11897,30 @@ const StyledTextField = styled.div`
       padding-right: 5px;
       visibility: visible;
     }
+
+    .redsift-icon-button {
+      padding: 2px;
+    }
+
+    ${$variant !== TextFieldVariant.underline ? css`
+          .redsift-icon.left {
+            padding-left: 12px;
+            margin-right: -8px;
+            line-height: 28px;
+          }
+
+          .redsift-text-field-input-wrapper__toolbar {
+            padding-right: 8px;
+          }
+        ` : ''}
   `;
 }}
 `;
 
-const _excluded = ["aria-label", "aria-labelledby", "autoFocus", "className", "defaultValue", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "name", "onChange", "placeholder", "value", "variant"];
+// Material Design Icons v7.2.96
+var mdiClose = "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z";
+
+const _excluded = ["aria-label", "aria-labelledby", "autoFocus", "className", "defaultValue", "hasClearButton", "after", "internal", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "leftIcon", "name", "onBlur", "onChange", "onClear", "onFocus", "placeholder", "value", "variant"];
 const COMPONENT_NAME = 'TextField';
 const CLASSNAME = 'redsift-text-field';
 const DEFAULT_PROPS = {
@@ -10689,6 +11940,9 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       autoFocus,
       className,
       defaultValue,
+      hasClearButton,
+      after,
+      internal,
       inputProps,
       inputRef,
       isColored,
@@ -10697,8 +11951,12 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       isReadOnly,
       isRequired,
       label,
+      leftIcon,
       name,
+      onBlur: onBlurProps,
       onChange,
+      onClear,
+      onFocus: onFocusProps,
       placeholder,
       value: propsValue,
       variant
@@ -10707,7 +11965,10 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     isFocusVisible,
     isFocused,
-    focusProps
+    focusProps: {
+      onFocus,
+      onBlur
+    }
   } = useFocusRing({
     autoFocus
   });
@@ -10731,8 +11992,24 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     }
     setValue(event.target.value);
   }, [onChange]);
+  const handleClear = useCallback(() => {
+    if (isDisabled || isReadOnly) {
+      return;
+    }
+    if (onChange) {
+      onChange('');
+    }
+    if (onClear) {
+      onClear();
+    }
+    if (hasClearButton && hasClearButton !== true && hasClearButton.onClick) {
+      hasClearButton.onClick({});
+    }
+    setValue('');
+  }, [onChange]);
   return /*#__PURE__*/React__default.createElement(StyledTextField, _extends$1({}, focusWithinProps, forwardedProps, {
     $hasContent: isFocusWithin || Boolean(value) || Boolean(placeholder),
+    $hasLeftIcon: Boolean(leftIcon),
     $isColored: isColored,
     $isDisabled: isDisabled,
     $isFocusVisible: isFocusVisible,
@@ -10746,7 +12023,18 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${TextField.className}__label`
   }, /*#__PURE__*/React__default.createElement("span", null, label)) : null, /*#__PURE__*/React__default.createElement("div", {
     className: `${TextField.className}__input-wrapper`
-  }, /*#__PURE__*/React__default.createElement("input", _extends$1({}, inputProps, focusProps, {
+  }, leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends$1({}, leftIcon, {
+    "aria-hidden": "true",
+    className: "left"
+  })) : null, /*#__PURE__*/React__default.createElement("input", _extends$1({}, inputProps, {
+    onBlur: event => {
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+      onBlurProps === null || onBlurProps === void 0 ? void 0 : onBlurProps(event);
+    },
+    onFocus: event => {
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+      onFocusProps === null || onFocusProps === void 0 ? void 0 : onFocusProps(event);
+    },
     "aria-disabled": isDisabled,
     "aria-invalid": isInvalid || isRequired && !value,
     "aria-label": ariaLabel,
@@ -10762,7 +12050,21 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     ref: inputRef,
     type: "text",
     value: value
-  })), label ? /*#__PURE__*/React__default.createElement("fieldset", {
+  })), hasClearButton || internal || after ? /*#__PURE__*/React__default.createElement(Flexbox, {
+    className: `${TextField.className}-input-wrapper__toolbar`,
+    gap: "8px"
+  }, hasClearButton ? /*#__PURE__*/React__default.createElement(IconButton, _extends$1({
+    "aria-label": "Clear",
+    color: "question",
+    icon: mdiClose
+  }, hasClearButton !== true && hasClearButton, {
+    onClick: handleClear,
+    className: "right clear"
+  })) : null, typeof internal === 'function' ? internal(value, isDisabled, isInvalid || isRequired && !value, isRequired) : internal, (hasClearButton || internal) && after ? /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      borderLeft: '1px solid var(--redsift-color-neutral-midgrey)'
+    }
+  }) : null, typeof after === 'function' ? after(value, isDisabled, isInvalid || isRequired && !value, isRequired) : after) : null, label ? /*#__PURE__*/React__default.createElement("fieldset", {
     "aria-hidden": "true",
     className: `${TextField.className}-input-wrapper__fieldset`
   }, /*#__PURE__*/React__default.createElement("legend", {
@@ -10773,5 +12075,5 @@ TextField.className = CLASSNAME;
 TextField.defaultProps = DEFAULT_PROPS;
 TextField.displayName = COMPONENT_NAME;
 
-export { Alert, AlertVariant, AlignContent, AlignItems, AlignSelf, AppBar, AppContainer, AppContainerContext, AppContent, AppSidePanel, Badge, BadgeVariant, BaseBreadcrumbs, BaseGrid, BaseSkeleton, BreadcrumbItem, Breadcrumbs, Button, ButtonLink, ButtonVariant, Card, CardActions, CardBody, CardHeader, Checkbox, CheckboxGroup, CheckboxGroupOrientation, ColorPalette, ConditionalWrapper, DataVizColorPalette, DetailedCard, DetailedCardCollapsibleSectionItems, DetailedCardHeader, DetailedCardSection, DetailedCardSectionItem, FlexDirection, FlexWrap, Flexbox, FontFamily, Grid, GridItem, Heading, HeadingComponent, HeadingVariant, Icon, IconButton, IconButtonVariant, IconSize, JustifyContent, JustifyItems, JustifySelf, Link, LinkButton, NeutralColorPalette, Number$1 as Number, Pill, ProductColorPalette, Radio, RadioGroup, RadioGroupOrientation, RedsiftAppBarColorBackground, RedsiftAppBarColorExpandIconBackgroundHover, RedsiftAppBarColorExpandIconHover, RedsiftAppBarColorExpandIconResting, RedsiftAppBarColorText, RedsiftColorDefaultActive, RedsiftColorDefaultActiveHover, RedsiftColorDefaultHover, RedsiftColorDefaultPrimary, RedsiftColorDefaultPrimaryActive, RedsiftColorDefaultPrimaryActiveHover, RedsiftColorDefaultSecondary, RedsiftColorErrorActive, RedsiftColorErrorActiveHover, RedsiftColorErrorHover, RedsiftColorErrorPrimary, RedsiftColorErrorPrimaryActive, RedsiftColorErrorPrimaryActiveHover, RedsiftColorErrorSecondary, RedsiftColorHardenizeActive, RedsiftColorHardenizeActiveHover, RedsiftColorHardenizeHover, RedsiftColorHardenizePrimary, RedsiftColorHardenizePrimaryActive, RedsiftColorHardenizePrimaryActiveHover, RedsiftColorHardenizeSecondary, RedsiftColorInfoActive, RedsiftColorInfoActiveHover, RedsiftColorInfoHover, RedsiftColorInfoPrimary, RedsiftColorInfoPrimaryActive, RedsiftColorInfoPrimaryActiveHover, RedsiftColorInfoSecondary, RedsiftColorNeutralBlack, RedsiftColorNeutralDarkgrey, RedsiftColorNeutralLightgrey, RedsiftColorNeutralMidgrey, RedsiftColorNeutralWhite, RedsiftColorNeutralXlightgrey, RedsiftColorNoDataActive, RedsiftColorNoDataActiveHover, RedsiftColorNoDataHover, RedsiftColorNoDataPrimary, RedsiftColorNoDataPrimaryActive, RedsiftColorNoDataPrimaryActiveHover, RedsiftColorNoDataSecondary, RedsiftColorOndmarcActive, RedsiftColorOndmarcActiveHover, RedsiftColorOndmarcHover, RedsiftColorOndmarcPrimary, RedsiftColorOndmarcPrimaryActive, RedsiftColorOndmarcPrimaryActiveHover, RedsiftColorOndmarcSecondary, RedsiftColorOndomainActive, RedsiftColorOndomainActiveHover, RedsiftColorOndomainHover, RedsiftColorOndomainPrimary, RedsiftColorOndomainPrimaryActive, RedsiftColorOndomainPrimaryActiveHover, RedsiftColorOndomainSecondary, RedsiftColorOninboxActive, RedsiftColorOninboxActiveHover, RedsiftColorOninboxHover, RedsiftColorOninboxPrimary, RedsiftColorOninboxPrimaryActive, RedsiftColorOninboxPrimaryActiveHover, RedsiftColorOninboxSecondary, RedsiftColorQuestionActive, RedsiftColorQuestionActiveHover, RedsiftColorQuestionHover, RedsiftColorQuestionPrimary, RedsiftColorQuestionPrimaryActive, RedsiftColorQuestionPrimaryActiveHover, RedsiftColorQuestionSecondary, RedsiftColorSuccessActive, RedsiftColorSuccessActiveHover, RedsiftColorSuccessHover, RedsiftColorSuccessPrimary, RedsiftColorSuccessPrimaryActive, RedsiftColorSuccessPrimaryActiveHover, RedsiftColorSuccessSecondary, RedsiftColorToolsActive, RedsiftColorToolsActiveHover, RedsiftColorToolsHover, RedsiftColorToolsPrimary, RedsiftColorToolsPrimaryActive, RedsiftColorToolsPrimaryActiveHover, RedsiftColorToolsSecondary, RedsiftColorWarningActive, RedsiftColorWarningActiveHover, RedsiftColorWarningHover, RedsiftColorWarningPrimary, RedsiftColorWarningPrimaryActive, RedsiftColorWarningPrimaryActiveHover, RedsiftColorWarningSecondary, RedsiftColorWebsiteActive, RedsiftColorWebsiteActiveHover, RedsiftColorWebsiteHover, RedsiftColorWebsitePrimary, RedsiftColorWebsitePrimaryActive, RedsiftColorWebsitePrimaryActiveHover, RedsiftColorWebsiteSecondary, RedsiftDataVizColorAquaDark, RedsiftDataVizColorAquaDarker, RedsiftDataVizColorAquaDarkerer, RedsiftDataVizColorAquaDefault, RedsiftDataVizColorAquaLight, RedsiftDataVizColorAquaLighter, RedsiftDataVizColorAquaLighterer, RedsiftDataVizColorBlueDark, RedsiftDataVizColorBlueDarker, RedsiftDataVizColorBlueDarkerer, RedsiftDataVizColorBlueDefault, RedsiftDataVizColorBlueLight, RedsiftDataVizColorBlueLighter, RedsiftDataVizColorBlueLighterer, RedsiftDataVizColorBrownDark, RedsiftDataVizColorBrownDarker, RedsiftDataVizColorBrownDarkerer, RedsiftDataVizColorBrownDefault, RedsiftDataVizColorBrownLight, RedsiftDataVizColorBrownLighter, RedsiftDataVizColorBrownLighterer, RedsiftDataVizColorGreenDark, RedsiftDataVizColorGreenDarker, RedsiftDataVizColorGreenDarkerer, RedsiftDataVizColorGreenDefault, RedsiftDataVizColorGreenLight, RedsiftDataVizColorGreenLighter, RedsiftDataVizColorGreenLighterer, RedsiftDataVizColorGreyDark, RedsiftDataVizColorGreyDarker, RedsiftDataVizColorGreyDarkerer, RedsiftDataVizColorGreyDefault, RedsiftDataVizColorGreyLight, RedsiftDataVizColorGreyLighter, RedsiftDataVizColorGreyLighterer, RedsiftDataVizColorOrangeDark, RedsiftDataVizColorOrangeDarker, RedsiftDataVizColorOrangeDarkerer, RedsiftDataVizColorOrangeDefault, RedsiftDataVizColorOrangeLight, RedsiftDataVizColorOrangeLighter, RedsiftDataVizColorOrangeLighterer, RedsiftDataVizColorPinkDark, RedsiftDataVizColorPinkDarker, RedsiftDataVizColorPinkDarkerer, RedsiftDataVizColorPinkDefault, RedsiftDataVizColorPinkLight, RedsiftDataVizColorPinkLighter, RedsiftDataVizColorPinkLighterer, RedsiftDataVizColorPurpleDark, RedsiftDataVizColorPurpleDarker, RedsiftDataVizColorPurpleDarkerer, RedsiftDataVizColorPurpleDefault, RedsiftDataVizColorPurpleLight, RedsiftDataVizColorPurpleLighter, RedsiftDataVizColorPurpleLighterer, RedsiftDataVizColorRedDark, RedsiftDataVizColorRedDarker, RedsiftDataVizColorRedDarkerer, RedsiftDataVizColorRedDefault, RedsiftDataVizColorRedLight, RedsiftDataVizColorRedLighter, RedsiftDataVizColorRedLighterer, RedsiftDataVizColorYellowDark, RedsiftDataVizColorYellowDarker, RedsiftDataVizColorYellowDarkerer, RedsiftDataVizColorYellowDefault, RedsiftDataVizColorYellowLight, RedsiftDataVizColorYellowLighter, RedsiftDataVizColorYellowLighterer, RedsiftLayoutZIndexDialog, RedsiftLayoutZIndexDropdown, RedsiftLayoutZIndexFooter, RedsiftLayoutZIndexHeader, RedsiftLayoutZIndexOverlay, RedsiftLayoutZIndexPopover, RedsiftLayoutZIndexSidePanel, RedsiftLayoutZIndexTooltip, RedsiftSideNavigationColorBackground, RedsiftSideNavigationColorMenuItemActive, RedsiftSideNavigationColorMenuItemBackgroundActive, RedsiftSideNavigationColorMenuItemBackgroundHover, RedsiftSideNavigationColorMenuItemBackgroundSecondary, RedsiftSideNavigationColorMenuItemTextDisabled, RedsiftSideNavigationColorMenuItemTextHover, RedsiftSideNavigationColorMenuItemTextResting, RedsiftSideNavigationColorScrollbarHover, RedsiftSideNavigationColorScrollbarResting, RedsiftTypographyBadgeFontFamily, RedsiftTypographyBadgeFontSize, RedsiftTypographyBadgeFontWeight, RedsiftTypographyBadgeLineHeight, RedsiftTypographyBody2FontFamily, RedsiftTypographyBody2FontSize, RedsiftTypographyBody2FontWeight, RedsiftTypographyBody2LineHeight, RedsiftTypographyBodyFontFamily, RedsiftTypographyBodyFontSize, RedsiftTypographyBodyFontWeight, RedsiftTypographyBodyLineHeight, RedsiftTypographyBodyTextTransform, RedsiftTypographyButtonFontFamily, RedsiftTypographyButtonFontSize, RedsiftTypographyButtonFontWeight, RedsiftTypographyButtonLineHeight, RedsiftTypographyButtonTextTransform, RedsiftTypographyCaptionFontFamily, RedsiftTypographyCaptionFontSize, RedsiftTypographyCaptionFontWeight, RedsiftTypographyCaptionLineHeight, RedsiftTypographyCaptionTextTransform, RedsiftTypographyChipFontFamily, RedsiftTypographyChipFontSize, RedsiftTypographyChipFontWeight, RedsiftTypographyChipLineHeight, RedsiftTypographyDatagridCellFontFamily, RedsiftTypographyDatagridCellFontSize, RedsiftTypographyDatagridCellFontWeight, RedsiftTypographyDatagridCellLineHeight, RedsiftTypographyDatagridHeaderFontFamily, RedsiftTypographyDatagridHeaderFontSize, RedsiftTypographyDatagridHeaderFontWeight, RedsiftTypographyDatagridHeaderLineHeight, RedsiftTypographyFontFamilyElectrolize, RedsiftTypographyFontFamilyRaleway, RedsiftTypographyFontFamilySourceCodePro, RedsiftTypographyFontWeightBold, RedsiftTypographyFontWeightMedium, RedsiftTypographyFontWeightRegular, RedsiftTypographyFontWeightSemiBold, RedsiftTypographyH1FontFamily, RedsiftTypographyH1FontSize, RedsiftTypographyH1FontWeight, RedsiftTypographyH1LineHeight, RedsiftTypographyH1TextTransform, RedsiftTypographyH2FontFamily, RedsiftTypographyH2FontSize, RedsiftTypographyH2FontWeight, RedsiftTypographyH2LineHeight, RedsiftTypographyH2TextTransform, RedsiftTypographyH3FontFamily, RedsiftTypographyH3FontSize, RedsiftTypographyH3FontWeight, RedsiftTypographyH3LineHeight, RedsiftTypographyH3TextTransform, RedsiftTypographyH4FontFamily, RedsiftTypographyH4FontSize, RedsiftTypographyH4FontWeight, RedsiftTypographyH4LineHeight, RedsiftTypographyH4TextTransform, RedsiftTypographyH5FontFamily, RedsiftTypographyH5FontSize, RedsiftTypographyH5FontWeight, RedsiftTypographyH5LineHeight, RedsiftTypographyH5TextTransform, RedsiftTypographyHelperFontFamily, RedsiftTypographyHelperFontSize, RedsiftTypographyHelperFontWeight, RedsiftTypographyHelperLineHeight, RedsiftTypographyInputTextFontFamily, RedsiftTypographyInputTextFontSize, RedsiftTypographyInputTextFontWeight, RedsiftTypographyInputTextLineHeight, RedsiftTypographyLinkFontFamily, RedsiftTypographyLinkFontSize, RedsiftTypographyLinkFontWeight, RedsiftTypographyLinkLineHeight, RedsiftTypographyPillFontFamily, RedsiftTypographyPillFontSize, RedsiftTypographyPillFontWeight, RedsiftTypographyPillLineHeight, RedsiftTypographySubtitleFontFamily, RedsiftTypographySubtitleFontSize, RedsiftTypographySubtitleFontWeight, RedsiftTypographySubtitleLineHeight, RedsiftTypographySubtitleTextTransform, RedsiftTypographyTooltipFontFamily, RedsiftTypographyTooltipFontSize, RedsiftTypographyTooltipFontWeight, RedsiftTypographyTooltipLineHeight, Shield, ShieldVariant, SideNavigationMenu, SideNavigationMenuBar, SideNavigationMenuItem, SideNavigationMenuReducerActionType, Skeleton, SkeletonCircle, SkeletonText, SkeletonTextVariant, Spinner, SpinnerSize, StyledButton, StyledLink, Switch, SwitchGroup, SwitchGroupOrientation, Text, TextComponent, TextField, TextFieldVariant, TextVariant, baseContainer, baseFlexbox, baseGrid, baseInternalSpacing, baseLayout, basePositioning, baseSizing, baseSpacing, baseStyling, filterComponents, focusRing, isComponent, partitionComponents, useAppSidePanel, useBoundingClientRect, useSideNavigationMenuBar, useWindowSize, warnIfNoAccessibleLabelFound };
+export { ActiveDescendantListbox, Alert, AlertVariant, AlignContent, AlignItems, AlignSelf, AppBar, AppContainer, AppContainerContext, AppContent, AppSidePanel, Badge, BadgeVariant, BaseBreadcrumbs, BaseGrid, BaseSkeleton, BreadcrumbItem, Breadcrumbs, Button, ButtonLink, ButtonVariant, Card, CardActions, CardBody, CardHeader, Checkbox, CheckboxGroup, CheckboxGroupOrientation, ColorPalette, ConditionalWrapper, DataVizColorPalette, DetailedCard, DetailedCardCollapsibleSectionItems, DetailedCardHeader, DetailedCardSection, DetailedCardSectionItem, EventKey, FOCUS_WITHING_GROUP_INITIAL_STATE, FlexDirection, FlexWrap, Flexbox, FocusWithinGroup, FocusWithinGroupActionType, FocusWithinGroupContext, FocusWithinGroupReducer, FontFamily, Grid, GridItem, Heading, HeadingComponent, HeadingVariant, Icon, IconButton, IconButtonVariant, IconSize, Item, JustifyContent, JustifyItems, JustifySelf, LISTBOX_INITIAL_STATE, Link, LinkButton, Listbox, ListboxActionType, ListboxContext, ListboxReducer, ListboxVariant, Navigation, NeutralColorPalette, Number$1 as Number, Pill, ProductColorPalette, Radio, RadioGroup, RadioGroupOrientation, RedsiftAppBarColorBackground, RedsiftAppBarColorExpandIconBackgroundHover, RedsiftAppBarColorExpandIconHover, RedsiftAppBarColorExpandIconResting, RedsiftAppBarColorText, RedsiftColorDefaultActive, RedsiftColorDefaultActiveHover, RedsiftColorDefaultHover, RedsiftColorDefaultPrimary, RedsiftColorDefaultPrimaryActive, RedsiftColorDefaultPrimaryActiveHover, RedsiftColorDefaultSecondary, RedsiftColorErrorActive, RedsiftColorErrorActiveHover, RedsiftColorErrorHover, RedsiftColorErrorPrimary, RedsiftColorErrorPrimaryActive, RedsiftColorErrorPrimaryActiveHover, RedsiftColorErrorSecondary, RedsiftColorHardenizeActive, RedsiftColorHardenizeActiveHover, RedsiftColorHardenizeHover, RedsiftColorHardenizePrimary, RedsiftColorHardenizePrimaryActive, RedsiftColorHardenizePrimaryActiveHover, RedsiftColorHardenizeSecondary, RedsiftColorInfoActive, RedsiftColorInfoActiveHover, RedsiftColorInfoHover, RedsiftColorInfoPrimary, RedsiftColorInfoPrimaryActive, RedsiftColorInfoPrimaryActiveHover, RedsiftColorInfoSecondary, RedsiftColorNeutralBlack, RedsiftColorNeutralDarkgrey, RedsiftColorNeutralLightgrey, RedsiftColorNeutralMidgrey, RedsiftColorNeutralWhite, RedsiftColorNeutralXlightgrey, RedsiftColorNoDataActive, RedsiftColorNoDataActiveHover, RedsiftColorNoDataHover, RedsiftColorNoDataPrimary, RedsiftColorNoDataPrimaryActive, RedsiftColorNoDataPrimaryActiveHover, RedsiftColorNoDataSecondary, RedsiftColorOndmarcActive, RedsiftColorOndmarcActiveHover, RedsiftColorOndmarcHover, RedsiftColorOndmarcPrimary, RedsiftColorOndmarcPrimaryActive, RedsiftColorOndmarcPrimaryActiveHover, RedsiftColorOndmarcSecondary, RedsiftColorOndomainActive, RedsiftColorOndomainActiveHover, RedsiftColorOndomainHover, RedsiftColorOndomainPrimary, RedsiftColorOndomainPrimaryActive, RedsiftColorOndomainPrimaryActiveHover, RedsiftColorOndomainSecondary, RedsiftColorOninboxActive, RedsiftColorOninboxActiveHover, RedsiftColorOninboxHover, RedsiftColorOninboxPrimary, RedsiftColorOninboxPrimaryActive, RedsiftColorOninboxPrimaryActiveHover, RedsiftColorOninboxSecondary, RedsiftColorQuestionActive, RedsiftColorQuestionActiveHover, RedsiftColorQuestionHover, RedsiftColorQuestionPrimary, RedsiftColorQuestionPrimaryActive, RedsiftColorQuestionPrimaryActiveHover, RedsiftColorQuestionSecondary, RedsiftColorSuccessActive, RedsiftColorSuccessActiveHover, RedsiftColorSuccessHover, RedsiftColorSuccessPrimary, RedsiftColorSuccessPrimaryActive, RedsiftColorSuccessPrimaryActiveHover, RedsiftColorSuccessSecondary, RedsiftColorToolsActive, RedsiftColorToolsActiveHover, RedsiftColorToolsHover, RedsiftColorToolsPrimary, RedsiftColorToolsPrimaryActive, RedsiftColorToolsPrimaryActiveHover, RedsiftColorToolsSecondary, RedsiftColorWarningActive, RedsiftColorWarningActiveHover, RedsiftColorWarningHover, RedsiftColorWarningPrimary, RedsiftColorWarningPrimaryActive, RedsiftColorWarningPrimaryActiveHover, RedsiftColorWarningSecondary, RedsiftColorWebsiteActive, RedsiftColorWebsiteActiveHover, RedsiftColorWebsiteHover, RedsiftColorWebsitePrimary, RedsiftColorWebsitePrimaryActive, RedsiftColorWebsitePrimaryActiveHover, RedsiftColorWebsiteSecondary, RedsiftDataVizColorAquaDark, RedsiftDataVizColorAquaDarker, RedsiftDataVizColorAquaDarkerer, RedsiftDataVizColorAquaDefault, RedsiftDataVizColorAquaLight, RedsiftDataVizColorAquaLighter, RedsiftDataVizColorAquaLighterer, RedsiftDataVizColorBlueDark, RedsiftDataVizColorBlueDarker, RedsiftDataVizColorBlueDarkerer, RedsiftDataVizColorBlueDefault, RedsiftDataVizColorBlueLight, RedsiftDataVizColorBlueLighter, RedsiftDataVizColorBlueLighterer, RedsiftDataVizColorBrownDark, RedsiftDataVizColorBrownDarker, RedsiftDataVizColorBrownDarkerer, RedsiftDataVizColorBrownDefault, RedsiftDataVizColorBrownLight, RedsiftDataVizColorBrownLighter, RedsiftDataVizColorBrownLighterer, RedsiftDataVizColorGreenDark, RedsiftDataVizColorGreenDarker, RedsiftDataVizColorGreenDarkerer, RedsiftDataVizColorGreenDefault, RedsiftDataVizColorGreenLight, RedsiftDataVizColorGreenLighter, RedsiftDataVizColorGreenLighterer, RedsiftDataVizColorGreyDark, RedsiftDataVizColorGreyDarker, RedsiftDataVizColorGreyDarkerer, RedsiftDataVizColorGreyDefault, RedsiftDataVizColorGreyLight, RedsiftDataVizColorGreyLighter, RedsiftDataVizColorGreyLighterer, RedsiftDataVizColorOrangeDark, RedsiftDataVizColorOrangeDarker, RedsiftDataVizColorOrangeDarkerer, RedsiftDataVizColorOrangeDefault, RedsiftDataVizColorOrangeLight, RedsiftDataVizColorOrangeLighter, RedsiftDataVizColorOrangeLighterer, RedsiftDataVizColorPinkDark, RedsiftDataVizColorPinkDarker, RedsiftDataVizColorPinkDarkerer, RedsiftDataVizColorPinkDefault, RedsiftDataVizColorPinkLight, RedsiftDataVizColorPinkLighter, RedsiftDataVizColorPinkLighterer, RedsiftDataVizColorPurpleDark, RedsiftDataVizColorPurpleDarker, RedsiftDataVizColorPurpleDarkerer, RedsiftDataVizColorPurpleDefault, RedsiftDataVizColorPurpleLight, RedsiftDataVizColorPurpleLighter, RedsiftDataVizColorPurpleLighterer, RedsiftDataVizColorRedDark, RedsiftDataVizColorRedDarker, RedsiftDataVizColorRedDarkerer, RedsiftDataVizColorRedDefault, RedsiftDataVizColorRedLight, RedsiftDataVizColorRedLighter, RedsiftDataVizColorRedLighterer, RedsiftDataVizColorYellowDark, RedsiftDataVizColorYellowDarker, RedsiftDataVizColorYellowDarkerer, RedsiftDataVizColorYellowDefault, RedsiftDataVizColorYellowLight, RedsiftDataVizColorYellowLighter, RedsiftDataVizColorYellowLighterer, RedsiftLayoutZIndexDialog, RedsiftLayoutZIndexDropdown, RedsiftLayoutZIndexFooter, RedsiftLayoutZIndexHeader, RedsiftLayoutZIndexOverlay, RedsiftLayoutZIndexPopover, RedsiftLayoutZIndexSidePanel, RedsiftLayoutZIndexTooltip, RedsiftSideNavigationColorBackground, RedsiftSideNavigationColorMenuItemActive, RedsiftSideNavigationColorMenuItemBackgroundActive, RedsiftSideNavigationColorMenuItemBackgroundHover, RedsiftSideNavigationColorMenuItemBackgroundSecondary, RedsiftSideNavigationColorMenuItemTextDisabled, RedsiftSideNavigationColorMenuItemTextHover, RedsiftSideNavigationColorMenuItemTextResting, RedsiftSideNavigationColorScrollbarHover, RedsiftSideNavigationColorScrollbarResting, RedsiftTypographyBadgeFontFamily, RedsiftTypographyBadgeFontSize, RedsiftTypographyBadgeFontWeight, RedsiftTypographyBadgeLineHeight, RedsiftTypographyBody2FontFamily, RedsiftTypographyBody2FontSize, RedsiftTypographyBody2FontWeight, RedsiftTypographyBody2LineHeight, RedsiftTypographyBodyFontFamily, RedsiftTypographyBodyFontSize, RedsiftTypographyBodyFontWeight, RedsiftTypographyBodyLineHeight, RedsiftTypographyBodyTextTransform, RedsiftTypographyButtonFontFamily, RedsiftTypographyButtonFontSize, RedsiftTypographyButtonFontWeight, RedsiftTypographyButtonLineHeight, RedsiftTypographyButtonTextTransform, RedsiftTypographyCaptionFontFamily, RedsiftTypographyCaptionFontSize, RedsiftTypographyCaptionFontWeight, RedsiftTypographyCaptionLineHeight, RedsiftTypographyCaptionTextTransform, RedsiftTypographyChipFontFamily, RedsiftTypographyChipFontSize, RedsiftTypographyChipFontWeight, RedsiftTypographyChipLineHeight, RedsiftTypographyDatagridCellFontFamily, RedsiftTypographyDatagridCellFontSize, RedsiftTypographyDatagridCellFontWeight, RedsiftTypographyDatagridCellLineHeight, RedsiftTypographyDatagridHeaderFontFamily, RedsiftTypographyDatagridHeaderFontSize, RedsiftTypographyDatagridHeaderFontWeight, RedsiftTypographyDatagridHeaderLineHeight, RedsiftTypographyFontFamilyElectrolize, RedsiftTypographyFontFamilyRaleway, RedsiftTypographyFontFamilySourceCodePro, RedsiftTypographyFontWeightBold, RedsiftTypographyFontWeightMedium, RedsiftTypographyFontWeightRegular, RedsiftTypographyFontWeightSemiBold, RedsiftTypographyH1FontFamily, RedsiftTypographyH1FontSize, RedsiftTypographyH1FontWeight, RedsiftTypographyH1LineHeight, RedsiftTypographyH1TextTransform, RedsiftTypographyH2FontFamily, RedsiftTypographyH2FontSize, RedsiftTypographyH2FontWeight, RedsiftTypographyH2LineHeight, RedsiftTypographyH2TextTransform, RedsiftTypographyH3FontFamily, RedsiftTypographyH3FontSize, RedsiftTypographyH3FontWeight, RedsiftTypographyH3LineHeight, RedsiftTypographyH3TextTransform, RedsiftTypographyH4FontFamily, RedsiftTypographyH4FontSize, RedsiftTypographyH4FontWeight, RedsiftTypographyH4LineHeight, RedsiftTypographyH4TextTransform, RedsiftTypographyH5FontFamily, RedsiftTypographyH5FontSize, RedsiftTypographyH5FontWeight, RedsiftTypographyH5LineHeight, RedsiftTypographyH5TextTransform, RedsiftTypographyHelperFontFamily, RedsiftTypographyHelperFontSize, RedsiftTypographyHelperFontWeight, RedsiftTypographyHelperLineHeight, RedsiftTypographyInputTextFontFamily, RedsiftTypographyInputTextFontSize, RedsiftTypographyInputTextFontWeight, RedsiftTypographyInputTextLineHeight, RedsiftTypographyLinkFontFamily, RedsiftTypographyLinkFontSize, RedsiftTypographyLinkFontWeight, RedsiftTypographyLinkLineHeight, RedsiftTypographyPillFontFamily, RedsiftTypographyPillFontSize, RedsiftTypographyPillFontWeight, RedsiftTypographyPillLineHeight, RedsiftTypographySubtitleFontFamily, RedsiftTypographySubtitleFontSize, RedsiftTypographySubtitleFontWeight, RedsiftTypographySubtitleLineHeight, RedsiftTypographySubtitleTextTransform, RedsiftTypographyTooltipFontFamily, RedsiftTypographyTooltipFontSize, RedsiftTypographyTooltipFontWeight, RedsiftTypographyTooltipLineHeight, RovingTabindexListbox, Shield, ShieldVariant, SideNavigationMenu, SideNavigationMenuBar, SideNavigationMenuItem, SideNavigationMenuReducerActionType, Skeleton, SkeletonCircle, SkeletonText, SkeletonTextVariant, Spinner, SpinnerSize, StyledButton, StyledLink, Switch, SwitchGroup, SwitchGroupOrientation, Text, TextComponent, TextField, TextFieldVariant, TextVariant, baseContainer, baseFlexbox, baseGrid, baseInternalSpacing, baseLayout, basePositioning, baseSizing, baseSpacing, baseStyling, filterComponents, focusRing, isComponent, partitionComponents, uniqueId, useAppSidePanel, useBoundingClientRect, useFocusOnList, useFocusOnListItem, useSideNavigationMenuBar, useWindowSize, warnIfNoAccessibleLabelFound };
 //# sourceMappingURL=index.js.map