@redsift/design-system 7.5.1 → 7.6.0

package/index.js

@@ -4,8 +4,8 @@ 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, mdiInformation, mdiMenu, mdiMenuOpen, mdiChevronDown, mdiChevronRight, mdiChevronUp, mdiCheckboxMarked, mdiMinusBox, mdiCheckboxBlankOutline, mdiPageLast, mdiKeyboardCaps, mdiRadioboxMarked, mdiRadioboxBlank } from '@redsift/icons';
-import styled, { css } from 'styled-components';
+import { mdiClose, mdiAlert, mdiCheckCircle, mdiAlertCircle, mdiInformation, mdiMenu, mdiMenuOpen, mdiChevronDown, mdiChevronRight, mdiChevronUp, mdiCheckboxMarked, mdiMinusBox, mdiCheckboxBlankOutline, mdiPageLast, mdiKeyboardCaps, mdiRadioboxMarked, mdiRadioboxBlank } from '@redsift/icons';
+import styled, { css, keyframes } from 'styled-components';
 import { useButton } from '@react-aria/button';
 import { useFocusRing } from '@react-aria/focus';
 import * as ReactDOM from 'react-dom';
@@ -675,12 +675,12 @@ const baseLayout = css`
   } = _ref;
   return css`
       ${flex ? `flex: ${flex};` : ''}
-      ${flexGrow ? `flex-grow: ${flexGrow};` : ''}
-      ${flexShrink ? `flex-shrink: ${flexShrink};` : ''}
+      ${flexGrow !== undefined ? `flex-grow: ${flexGrow};` : ''}
+      ${flexShrink !== undefined ? `flex-shrink: ${flexShrink};` : ''}
       ${flexBasis ? `flex-basis: ${flexBasis};` : ''}
       ${alignSelf ? `align-self: ${alignSelf};` : ''}
       ${justifySelf ? `justify-self: ${justifySelf};` : ''}
-      ${order ? `order: ${order};` : ''}
+      ${order !== undefined ? `order: ${order};` : ''}
       ${gridArea ? `grid-area: ${gridArea};` : ''}
       ${gridColumn ? `grid-column: ${gridColumn};` : ''}
       ${gridRow ? `grid-row: ${gridRow};` : ''}
@@ -738,12 +738,12 @@ const baseSizing = css`
     width
   } = _ref4;
   return css`
-      ${height ? `height: ${typeof height === 'number' ? `${height}px` : height};` : ''}
+      ${height !== undefined ? `height: ${typeof height === 'number' ? `${height}px` : height};` : ''}
       ${maxHeight ? `max-height: ${maxHeight};` : ''}
       ${maxWidth ? `max-width: ${maxWidth};` : ''}
       ${minHeight ? `min-height: ${minHeight};` : ''}
       ${minWidth ? `min-width: ${minWidth};` : ''}
-      ${width ? `width: ${typeof width === 'number' ? `${width}px` : width};` : ''}
+      ${width !== undefined ? `width: ${typeof width === 'number' ? `${width}px` : width};` : ''}
     `;
 }}
 `;
@@ -974,10 +974,10 @@ const StyledIcon = styled.span`
 }}
 `;
 
-const _excluded$D = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps"];
-const COMPONENT_NAME$F = 'Icon';
-const CLASSNAME$F = 'redsift-icon';
-const DEFAULT_PROPS$F = {
+const _excluded$I = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps"];
+const COMPONENT_NAME$K = 'Icon';
+const CLASSNAME$K = 'redsift-icon';
+const DEFAULT_PROPS$K = {
   size: IconSize.medium
 };
 
@@ -995,7 +995,7 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
       size,
       svgProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$D);
+    forwardedProps = _objectWithoutProperties(props, _excluded$I);
   return /*#__PURE__*/React__default.createElement(StyledIcon, _extends$1({}, forwardedProps, {
     $color: color,
     $size: size,
@@ -1017,9 +1017,9 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
     fill: "currentColor"
   })), badge ? badge : null);
 });
-Icon.className = CLASSNAME$F;
-Icon.defaultProps = DEFAULT_PROPS$F;
-Icon.displayName = COMPONENT_NAME$F;
+Icon.className = CLASSNAME$K;
+Icon.defaultProps = DEFAULT_PROPS$K;
+Icon.displayName = COMPONENT_NAME$K;
 
 /**
  * Component variant.
@@ -1188,6 +1188,8 @@ const AppContainerContext = /*#__PURE__*/React__default.createContext(null);
  * Component style.
  */
 const StyledAppContainer = styled.div`
+  overflow: hidden;
+
   ${_ref => {
   let {
     $productTheme
@@ -1215,10 +1217,10 @@ const StyledAppContainer = styled.div`
 }}
 `;
 
-const _excluded$C = ["children", "className", "locale", "productTheme"];
-const COMPONENT_NAME$E = 'AppContainer';
-const CLASSNAME$E = 'redsift-app-container';
-const DEFAULT_PROPS$E = {};
+const _excluded$H = ["children", "className", "locale", "productTheme"];
+const COMPONENT_NAME$J = 'AppContainer';
+const CLASSNAME$J = 'redsift-app-container';
+const DEFAULT_PROPS$J = {};
 
 /**
  * The AppContainer component.
@@ -1230,7 +1232,7 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
       locale,
       productTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$C);
+    forwardedProps = _objectWithoutProperties(props, _excluded$H);
   const {
     hasAppBar,
     hasAppSidePanel,
@@ -1275,9 +1277,9 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
     locale: locale
   }, children)));
 });
-AppContainer.className = CLASSNAME$E;
-AppContainer.defaultProps = DEFAULT_PROPS$E;
-AppContainer.displayName = COMPONENT_NAME$E;
+AppContainer.className = CLASSNAME$J;
+AppContainer.defaultProps = DEFAULT_PROPS$J;
+AppContainer.displayName = COMPONENT_NAME$J;
 
 var spinnerDefault = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPgogIDxzdHlsZT4KICAgIC5zcGlubmluZyB7CiAgICAgIGFuaW1hdGlvbjogc3Bpbm5pbmcta2V5ZnJhbWVzIDMwMDBtcyBsaW5lYXIgaW5maW5pdGUgbm9ybWFsIGZvcndhcmRzOwogICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGN1YmljLWJlemllcigwLjQyLCAwLCAwLjU4LCAxKTsKICAgIH0KICAgIEBrZXlmcmFtZXMgc3Bpbm5pbmcta2V5ZnJhbWVzIHsKICAgICAgMCUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgwZGVnKTsKICAgICAgfQoKICAgICAgMzMlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMTgwZGVnKTsKICAgICAgfQoKICAgICAgNTAlIHsKICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpOwogICAgICB9CgogICAgICA4MyUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgzNjBkZWcpOwogICAgICB9CgogICAgICAxMDAlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMzYwZGVnKQogICAgICB9CiAgICB9CiAgPC9zdHlsZT4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MpIgogICAgZmlsbD0iIzAwNzllMSIKICAgIGQ9Ik0zMTggMTg2LjlWMTA4LjhMMjAwIDU3IDgyIDEwOC44djc4LjFDODIgMjU5IDEzMi4zIDMyNi40IDIwMCAzNDNjNjcuNy0xNi42IDExOC04NCAxMTgtMTU2LjF6TTQwMCAyMDBjMCAxMTAuNS04OS41IDIwMC0yMDAgMjAwUzAgMzEwLjUgMCAyMDAgODkuNSAwIDIwMCAwczIwMCA4OS41IDIwMCAyMDB6IgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrcyI+CiAgICA8cGF0aAogICAgICBjbGFzcz0ic3Bpbm5pbmciCiAgICAgIGQ9Ik0wLDIwMEMwLDg5LjU0MzA1LDg5LjU0MzA1LDAsMjAwLDB2NDAwQzg5LjU0MzA1LDQwMCwwLDMxMC40NTY5NSwwLDIwMFoiCiAgICAgIGZpbGw9IiNmZmYiCiAgICAvPgogIDwvbWFzaz4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MyKSIKICAgIGZpbGw9IiMwMDc5ZTEiCiAgICBkPSJNODIsMTg2LjkzOXYtNzguMDg5TDIwMCw1N2wxMTgsNTEuODV2NzguMDg5QzMxOCwyNTkuMDAyLDI2Ny42ODYsMzI2LjQwMiwyMDAsMzQzQzEzMi4zMTQsMzI2LjQwMiw4MiwyNTkuMDAyLDgyLDE4Ni45MzlaIgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrczIiPgogICAgPHBhdGgKICAgICAgY2xhc3M9InNwaW5uaW5nIgogICAgICBkPSJNNDAwIDIwMEM0MDAgMzEwLjUgMzEwLjUgNDAwIDIwMCA0MDBWMGMxMTAuNSAwIDIwMCA4OS41IDIwMCAyMDB6IgogICAgICBmaWxsPSIjZmZmIgogICAgLz4KICA8L21hc2s+Cjwvc3ZnPg==';
 
@@ -1297,7 +1299,7 @@ var spinnerTools = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My
 
 var spinnerWebsite = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPgogIDxzdHlsZT4KICAgIC5zcGlubmluZyB7CiAgICAgIGFuaW1hdGlvbjogc3Bpbm5pbmcta2V5ZnJhbWVzIDMwMDBtcyBsaW5lYXIgaW5maW5pdGUgbm9ybWFsIGZvcndhcmRzOwogICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGN1YmljLWJlemllcigwLjQyLCAwLCAwLjU4LCAxKTsKICAgIH0KICAgIEBrZXlmcmFtZXMgc3Bpbm5pbmcta2V5ZnJhbWVzIHsKICAgICAgMCUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgwZGVnKTsKICAgICAgfQoKICAgICAgMzMlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMTgwZGVnKTsKICAgICAgfQoKICAgICAgNTAlIHsKICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpOwogICAgICB9CgogICAgICA4MyUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgzNjBkZWcpOwogICAgICB9CgogICAgICAxMDAlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMzYwZGVnKQogICAgICB9CiAgICB9CiAgPC9zdHlsZT4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MpIgogICAgZmlsbD0iIzAwNzllMSIKICAgIGQ9Ik0zMTggMTg2LjlWMTA4LjhMMjAwIDU3IDgyIDEwOC44djc4LjFDODIgMjU5IDEzMi4zIDMyNi40IDIwMCAzNDNjNjcuNy0xNi42IDExOC04NCAxMTgtMTU2LjF6TTQwMCAyMDBjMCAxMTAuNS04OS41IDIwMC0yMDAgMjAwUzAgMzEwLjUgMCAyMDAgODkuNSAwIDIwMCAwczIwMCA4OS41IDIwMCAyMDB6IgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrcyI+CiAgICA8cGF0aAogICAgICBjbGFzcz0ic3Bpbm5pbmciCiAgICAgIGQ9Ik0wLDIwMEMwLDg5LjU0MzA1LDg5LjU0MzA1LDAsMjAwLDB2NDAwQzg5LjU0MzA1LDQwMCwwLDMxMC40NTY5NSwwLDIwMFoiCiAgICAgIGZpbGw9IiNmZmYiCiAgICAvPgogIDwvbWFzaz4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MyKSIKICAgIGZpbGw9IiMwMDc5ZTEiCiAgICBkPSJNODIsMTg2LjkzOXYtNzguMDg5TDIwMCw1N2wxMTgsNTEuODV2NzguMDg5QzMxOCwyNTkuMDAyLDI2Ny42ODYsMzI2LjQwMiwyMDAsMzQzQzEzMi4zMTQsMzI2LjQwMiw4MiwyNTkuMDAyLDgyLDE4Ni45MzlaIgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrczIiPgogICAgPHBhdGgKICAgICAgY2xhc3M9InNwaW5uaW5nIgogICAgICBkPSJNNDAwIDIwMEM0MDAgMzEwLjUgMzEwLjUgNDAwIDIwMCA0MDBWMGMxMTAuNSAwIDIwMCA4OS41IDIwMCAyMDB6IgogICAgICBmaWxsPSIjZmZmIgogICAgLz4KICA8L21hc2s+Cjwvc3ZnPg==';
 
-const _excluded$B = ["aria-hidden", "aria-label", "className", "color", "size"];
+const _excluded$G = ["aria-hidden", "aria-label", "className", "color", "size"];
 const colorToFile = {
   default: spinnerDefault,
   hardenize: spinnerHardenize,
@@ -1309,9 +1311,9 @@ const colorToFile = {
   tools: spinnerTools,
   website: spinnerWebsite
 };
-const COMPONENT_NAME$D = 'Spinner';
-const CLASSNAME$D = 'redsift-shield';
-const DEFAULT_PROPS$D = {
+const COMPONENT_NAME$I = 'Spinner';
+const CLASSNAME$I = 'redsift-shield';
+const DEFAULT_PROPS$I = {
   color: ColorPalette.default,
   size: SpinnerSize.medium
 };
@@ -1352,7 +1354,7 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
       color: propsColor,
       size
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$B);
+    forwardedProps = _objectWithoutProperties(props, _excluded$G);
   const {
     width,
     height
@@ -1374,14 +1376,14 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
     $size: size
   }));
 });
-Spinner.className = CLASSNAME$D;
-Spinner.defaultProps = DEFAULT_PROPS$D;
-Spinner.displayName = COMPONENT_NAME$D;
-
-const _excluded$A = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isLoading", "leftIcon", "onPress", "rightIcon", "variant"];
-const COMPONENT_NAME$C = 'Button';
-const CLASSNAME$C = 'redsift-button';
-const DEFAULT_PROPS$C = {
+Spinner.className = CLASSNAME$I;
+Spinner.defaultProps = DEFAULT_PROPS$I;
+Spinner.displayName = COMPONENT_NAME$I;
+
+const _excluded$F = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isLoading", "leftIcon", "onPress", "rightIcon", "variant"];
+const COMPONENT_NAME$H = 'Button';
+const CLASSNAME$H = 'redsift-button';
+const DEFAULT_PROPS$H = {
   color: ColorPalette.default,
   height: 'fit-content',
   variant: ButtonVariant.primary
@@ -1418,7 +1420,7 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
       rightIcon,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$A);
+    forwardedProps = _objectWithoutProperties(props, _excluded$F);
   return /*#__PURE__*/React__default.createElement(StyledButton, _extends$1({}, forwardedProps, buttonProps, {
     $color: color,
     $fullWidth: fullWidth,
@@ -1442,9 +1444,9 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     className: "right"
   }) : null);
 });
-Button.className = CLASSNAME$C;
-Button.defaultProps = DEFAULT_PROPS$C;
-Button.displayName = COMPONENT_NAME$C;
+Button.className = CLASSNAME$H;
+Button.defaultProps = DEFAULT_PROPS$H;
+Button.displayName = COMPONENT_NAME$H;
 
 /**
  * Component style.
@@ -1460,10 +1462,10 @@ const StyledIconButton = styled(StyledButton)`
 }};
 `;
 
-const _excluded$z = ["className", "color", "disabled", "icon", "isActive", "isDisabled", "onPress", "variant"];
-const COMPONENT_NAME$B = 'IconButton';
-const CLASSNAME$B = 'redsift-icon-button';
-const DEFAULT_PROPS$B = {
+const _excluded$E = ["className", "color", "disabled", "icon", "isActive", "isDisabled", "onPress", "variant"];
+const COMPONENT_NAME$G = 'IconButton';
+const CLASSNAME$G = 'redsift-icon-button';
+const DEFAULT_PROPS$G = {
   color: ColorPalette.default,
   height: 'fit-content',
   variant: IconButtonVariant.unstyled
@@ -1495,7 +1497,7 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
       onPress,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$z);
+    forwardedProps = _objectWithoutProperties(props, _excluded$E);
   warnIfNoAccessibleLabelFound(props);
   return /*#__PURE__*/React__default.createElement(StyledIconButton, _extends$1({}, forwardedProps, buttonProps, {
     $color: isDisabled || disabled ? undefined : color,
@@ -1511,9 +1513,9 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
     color: isDisabled || disabled ? undefined : color
   }));
 });
-IconButton.className = CLASSNAME$B;
-IconButton.defaultProps = DEFAULT_PROPS$B;
-IconButton.displayName = COMPONENT_NAME$B;
+IconButton.className = CLASSNAME$G;
+IconButton.defaultProps = DEFAULT_PROPS$G;
+IconButton.displayName = COMPONENT_NAME$G;
 
 /**
  * Component style.
@@ -1653,10 +1655,10 @@ const StyledHeading = styled.span`
 }}
 `;
 
-const _excluded$y = ["as", "children", "className", "noWrap", "variant"];
-const COMPONENT_NAME$A = 'Heading';
-const CLASSNAME$A = 'redsift-heading';
-const DEFAULT_PROPS$A = {};
+const _excluded$D = ["as", "children", "className", "noWrap", "variant"];
+const COMPONENT_NAME$F = 'Heading';
+const CLASSNAME$F = 'redsift-heading';
+const DEFAULT_PROPS$F = {};
 
 /**
  * The Heading component.
@@ -1669,7 +1671,7 @@ const Heading = /*#__PURE__*/forwardRef((props, ref) => {
       noWrap,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$y);
+    forwardedProps = _objectWithoutProperties(props, _excluded$D);
   return /*#__PURE__*/React__default.createElement(StyledHeading, _extends$1({
     as: as
   }, forwardedProps, {
@@ -1679,9 +1681,9 @@ const Heading = /*#__PURE__*/forwardRef((props, ref) => {
     $variant: variant ? variant : as === 'span' ? 'body' : as
   }), children);
 });
-Heading.className = CLASSNAME$A;
-Heading.defaultProps = DEFAULT_PROPS$A;
-Heading.displayName = COMPONENT_NAME$A;
+Heading.className = CLASSNAME$F;
+Heading.defaultProps = DEFAULT_PROPS$F;
+Heading.displayName = COMPONENT_NAME$F;
 
 /**
  * Component style.
@@ -1699,10 +1701,10 @@ const StyledFlexbox = styled.div`
   ${baseFlexbox}
 `;
 
-const _excluded$x = ["children", "className"];
-const COMPONENT_NAME$z = 'Flexbox';
-const CLASSNAME$z = 'redsift-flex-box';
-const DEFAULT_PROPS$z = {
+const _excluded$C = ["children", "className"];
+const COMPONENT_NAME$E = 'Flexbox';
+const CLASSNAME$E = 'redsift-flex-box';
+const DEFAULT_PROPS$E = {
   gap: '16px'
 };
 
@@ -1714,20 +1716,20 @@ const Flexbox = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$x);
+    forwardedProps = _objectWithoutProperties(props, _excluded$C);
   return /*#__PURE__*/React__default.createElement(StyledFlexbox, _extends$1({}, forwardedProps, {
     className: classNames(Flexbox.className, className),
     ref: ref
   }), children);
 });
-Flexbox.className = CLASSNAME$z;
-Flexbox.defaultProps = DEFAULT_PROPS$z;
-Flexbox.displayName = COMPONENT_NAME$z;
-
-const _excluded$w = ["children", "className", "isClosable", "isClosed", "onClose", "title", "variant"];
-const COMPONENT_NAME$y = 'Alert';
-const CLASSNAME$y = 'redsift-alert';
-const DEFAULT_PROPS$y = {
+Flexbox.className = CLASSNAME$E;
+Flexbox.defaultProps = DEFAULT_PROPS$E;
+Flexbox.displayName = COMPONENT_NAME$E;
+
+const _excluded$B = ["children", "className", "isClosable", "isClosed", "onClose", "title", "variant"];
+const COMPONENT_NAME$D = 'Alert';
+const CLASSNAME$D = 'redsift-alert';
+const DEFAULT_PROPS$D = {
   variant: 'info'
 };
 const getVariant$1 = variant => {
@@ -1741,7 +1743,7 @@ const getVariant$1 = variant => {
     case AlertVariant.error:
       return {
         color: ColorPalette.error,
-        icon: mdiInformation
+        icon: mdiAlertCircle
       };
     case AlertVariant.success:
       return {
@@ -1769,7 +1771,7 @@ const Alert = /*#__PURE__*/forwardRef((props, ref) => {
       title,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$w);
+    forwardedProps = _objectWithoutProperties(props, _excluded$B);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$5);
   const {
     color,
@@ -1815,9 +1817,9 @@ const Alert = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${Alert.className}__content`
   }, children) : null);
 });
-Alert.className = CLASSNAME$y;
-Alert.defaultProps = DEFAULT_PROPS$y;
-Alert.displayName = COMPONENT_NAME$y;
+Alert.className = CLASSNAME$D;
+Alert.defaultProps = DEFAULT_PROPS$D;
+Alert.displayName = COMPONENT_NAME$D;
 
 var expand$5 = "Expand left side panel";
 var collapse$5 = "Collapse left side panel";
@@ -1914,10 +1916,10 @@ const StyledAppBar = styled.header`
   }
 `;
 
-const _excluded$v = ["children", "className", "collapseIconButtonProps", "collapseIconButtonRef", "expandIconButtonProps", "expandIconButtonRef", "fallbackTitle", "title"];
-const COMPONENT_NAME$x = 'AppBar';
-const CLASSNAME$x = 'redsift-app-bar';
-const DEFAULT_PROPS$x = {};
+const _excluded$A = ["children", "className", "collapseIconButtonProps", "collapseIconButtonRef", "expandIconButtonProps", "expandIconButtonRef", "fallbackTitle", "title"];
+const COMPONENT_NAME$C = 'AppBar';
+const CLASSNAME$C = 'redsift-app-bar';
+const DEFAULT_PROPS$C = {};
 
 /**
  * The AppBar component.
@@ -1933,7 +1935,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
       fallbackTitle,
       title: propsTitle
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$v);
+    forwardedProps = _objectWithoutProperties(props, _excluded$A);
   const {
     isLoaded
   } = useIsLoaded();
@@ -1972,9 +1974,9 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${AppBar.className}__right`
   }, children));
 });
-AppBar.className = CLASSNAME$x;
-AppBar.defaultProps = DEFAULT_PROPS$x;
-AppBar.displayName = COMPONENT_NAME$x;
+AppBar.className = CLASSNAME$C;
+AppBar.defaultProps = DEFAULT_PROPS$C;
+AppBar.displayName = COMPONENT_NAME$C;
 
 /**
  * Component style.
@@ -2040,10 +2042,10 @@ const StyledAppContent = styled.main`
 }}
 `;
 
-const _excluded$u = ["children", "className", "productTheme"];
-const COMPONENT_NAME$w = 'AppContent';
-const CLASSNAME$w = 'redsift-app-content';
-const DEFAULT_PROPS$w = {};
+const _excluded$z = ["children", "className", "productTheme"];
+const COMPONENT_NAME$B = 'AppContent';
+const CLASSNAME$B = 'redsift-app-content';
+const DEFAULT_PROPS$B = {};
 
 /**
  * The AppContent component.
@@ -2054,7 +2056,7 @@ const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       productTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$u);
+    forwardedProps = _objectWithoutProperties(props, _excluded$z);
   const {
     isLoaded
   } = useIsLoaded();
@@ -2067,9 +2069,9 @@ const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-AppContent.className = CLASSNAME$w;
-AppContent.defaultProps = DEFAULT_PROPS$w;
-AppContent.displayName = COMPONENT_NAME$w;
+AppContent.className = CLASSNAME$B;
+AppContent.defaultProps = DEFAULT_PROPS$B;
+AppContent.displayName = COMPONENT_NAME$B;
 
 /**
  * Component style.
@@ -2163,10 +2165,10 @@ const StyledAppSidePanel = styled.div`
   }
 `;
 
-const _excluded$t = ["children", "className", "featuredElements", "isCollapsed", "logo"];
-const COMPONENT_NAME$v = 'AppSidePanel';
-const CLASSNAME$v = 'redsift-app-side-panel';
-const DEFAULT_PROPS$v = {};
+const _excluded$y = ["children", "className", "featuredElements", "isCollapsed", "logo"];
+const COMPONENT_NAME$A = 'AppSidePanel';
+const CLASSNAME$A = 'redsift-app-side-panel';
+const DEFAULT_PROPS$A = {};
 
 /**
  * The AppSidePanel component.
@@ -2179,7 +2181,7 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
       isCollapsed = false,
       logo
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$t);
+    forwardedProps = _objectWithoutProperties(props, _excluded$y);
   const appContainerState = useContext(AppContainerContext);
   return /*#__PURE__*/React__default.createElement(StyledAppSidePanel, _extends$1({}, forwardedProps, {
     $isCollapsed: !!(isCollapsed || appContainerState !== null && appContainerState !== void 0 && appContainerState.isSidePanelCollapsed),
@@ -2194,9 +2196,9 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${AppSidePanel.className}__featured`
   }, featuredElements) : null, children);
 });
-AppSidePanel.className = CLASSNAME$v;
-AppSidePanel.defaultProps = DEFAULT_PROPS$v;
-AppSidePanel.displayName = COMPONENT_NAME$v;
+AppSidePanel.className = CLASSNAME$A;
+AppSidePanel.defaultProps = DEFAULT_PROPS$A;
+AppSidePanel.displayName = COMPONENT_NAME$A;
 
 /**
  * Context props.
@@ -2412,10 +2414,10 @@ const StyledBadge = styled.div`
 }}
 `;
 
-const _excluded$s = ["autoBreak", "children", "className", "color", "isReversed", "variant"];
-const COMPONENT_NAME$u = 'Badge';
-const CLASSNAME$u = 'redsift-badge';
-const DEFAULT_PROPS$u = {
+const _excluded$x = ["autoBreak", "children", "className", "color", "isReversed", "variant"];
+const COMPONENT_NAME$z = 'Badge';
+const CLASSNAME$z = 'redsift-badge';
+const DEFAULT_PROPS$z = {
   color: ColorPalette.question,
   variant: BadgeVariant.dot
 };
@@ -2432,7 +2434,7 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
       isReversed,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$s);
+    forwardedProps = _objectWithoutProperties(props, _excluded$x);
   return /*#__PURE__*/React__default.createElement(StyledBadge, _extends$1({}, forwardedProps, {
     $autoBreak: autoBreak,
     $color: color,
@@ -2442,14 +2444,14 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), variant === BadgeVariant.standard ? children : null);
 });
-Badge.className = CLASSNAME$u;
-Badge.defaultProps = DEFAULT_PROPS$u;
-Badge.displayName = COMPONENT_NAME$u;
+Badge.className = CLASSNAME$z;
+Badge.defaultProps = DEFAULT_PROPS$z;
+Badge.displayName = COMPONENT_NAME$z;
 
-const _excluded$r = ["badge", "badgeProps", "children", "className", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "tabIndex", "withoutIcons"];
-const COMPONENT_NAME$t = 'SideNavigationMenuItem';
-const CLASSNAME$t = 'redsift-side-navigation-menu-item';
-const DEFAULT_PROPS$t = {};
+const _excluded$w = ["badge", "badgeProps", "children", "className", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "tabIndex", "withoutIcons"];
+const COMPONENT_NAME$y = 'SideNavigationMenuItem';
+const CLASSNAME$y = 'redsift-side-navigation-menu-item';
+const DEFAULT_PROPS$y = {};
 
 /**
  * The SideNavigationMenuItem component.
@@ -2473,7 +2475,7 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
       tabIndex,
       withoutIcons
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$r);
+    forwardedProps = _objectWithoutProperties(props, _excluded$w);
   warnIfNoAccessibleLabelFound(props, [children]);
   const appContainerState = useContext(AppContainerContext);
   useEffect(() => {
@@ -2535,9 +2537,9 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
     color: "error"
   }, badgeProps), badge) : null);
 });
-SideNavigationMenuItem.className = CLASSNAME$t;
-SideNavigationMenuItem.defaultProps = DEFAULT_PROPS$t;
-SideNavigationMenuItem.displayName = COMPONENT_NAME$t;
+SideNavigationMenuItem.className = CLASSNAME$y;
+SideNavigationMenuItem.defaultProps = DEFAULT_PROPS$y;
+SideNavigationMenuItem.displayName = COMPONENT_NAME$y;
 
 /**
  * Component style.
@@ -2676,10 +2678,10 @@ const SideNavigationMenuReducer = (state, action) => {
   }
 };
 
-const _excluded$q = ["aria-label", "buttonProps", "buttonRef", "children", "className", "hasBadge", "icon", "iconProps", "iconRef", "isDisabled", "isExpanded", "menuProps", "menuRef", "tabIndex", "withoutIcons"];
-const COMPONENT_NAME$s = 'SideNavigationMenu';
-const CLASSNAME$s = 'redsift-side-navigation-menu';
-const DEFAULT_PROPS$s = {};
+const _excluded$v = ["aria-label", "buttonProps", "buttonRef", "children", "className", "hasBadge", "icon", "iconProps", "iconRef", "isDisabled", "isExpanded", "menuProps", "menuRef", "tabIndex", "withoutIcons"];
+const COMPONENT_NAME$x = 'SideNavigationMenu';
+const CLASSNAME$x = 'redsift-side-navigation-menu';
+const DEFAULT_PROPS$x = {};
 
 /**
  * The SideNavigationMenu component.
@@ -2702,7 +2704,7 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
       tabIndex,
       withoutIcons
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$q);
+    forwardedProps = _objectWithoutProperties(props, _excluded$v);
   warnIfNoAccessibleLabelFound(props);
   const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);
   const [isFirstChild, setIsFirstChild] = useState(false);
@@ -2971,9 +2973,9 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
     role: "menu"
   }, menuItemListEventHandler), renderedMenuItems)));
 });
-SideNavigationMenu.className = CLASSNAME$s;
-SideNavigationMenu.defaultProps = DEFAULT_PROPS$s;
-SideNavigationMenu.displayName = COMPONENT_NAME$s;
+SideNavigationMenu.className = CLASSNAME$x;
+SideNavigationMenu.defaultProps = DEFAULT_PROPS$x;
+SideNavigationMenu.displayName = COMPONENT_NAME$x;
 
 /**
  * Component style.
@@ -3044,10 +3046,10 @@ const useBoundingClientRect = (ref, deps) => {
   return boundingRect;
 };
 
-const _excluded$p = ["aria-label", "aria-labelledby", "children", "className", "isDisabled", "menubarProps", "menubarRef", "withoutIcons"];
-const COMPONENT_NAME$r = 'SideNavigationMenuBar';
-const CLASSNAME$r = 'redsift-side-navigation-menu-bar';
-const DEFAULT_PROPS$r = {};
+const _excluded$u = ["aria-label", "aria-labelledby", "children", "className", "isDisabled", "menubarProps", "menubarRef", "withoutIcons"];
+const COMPONENT_NAME$w = 'SideNavigationMenuBar';
+const CLASSNAME$w = 'redsift-side-navigation-menu-bar';
+const DEFAULT_PROPS$w = {};
 
 /**
  * Hook to store the previous index for further use
@@ -3075,7 +3077,7 @@ const SideNavigationMenuBar = /*#__PURE__*/forwardRef((props, ref) => {
       menubarRef = useRef(),
       withoutIcons
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$p);
+    forwardedProps = _objectWithoutProperties(props, _excluded$u);
   warnIfNoAccessibleLabelFound(props);
   const {
     top
@@ -3217,11 +3219,11 @@ const SideNavigationMenuBar = /*#__PURE__*/forwardRef((props, ref) => {
     role: "menubar"
   }), navItems)));
 });
-SideNavigationMenuBar.className = CLASSNAME$r;
-SideNavigationMenuBar.defaultProps = DEFAULT_PROPS$r;
-SideNavigationMenuBar.displayName = COMPONENT_NAME$r;
+SideNavigationMenuBar.className = CLASSNAME$w;
+SideNavigationMenuBar.defaultProps = DEFAULT_PROPS$w;
+SideNavigationMenuBar.displayName = COMPONENT_NAME$w;
 
-const _excluded$o = ["title", "href", "ref"],
+const _excluded$t = ["title", "href", "ref"],
   _excluded2 = ["title", "children", "ref"],
   _excluded3 = ["title", "href", "ref"];
 const isMenu = item => {
@@ -3240,7 +3242,7 @@ const useSideNavigationMenuBar = _ref => {
           href,
           ref
         } = item,
-        rest = _objectWithoutProperties(item, _excluded$o);
+        rest = _objectWithoutProperties(item, _excluded$t);
       menuBarChildren.push( /*#__PURE__*/React__default.createElement(SideNavigationMenuItem, _extends$1({
         key: title,
         isCurrent: isActive ? isActive(href) : undefined
@@ -3343,10 +3345,10 @@ const StyledBreadcrumbItem = styled.a`
   }
 `;
 
-const _excluded$n = ["children", "className", "href", "isCurrent", "isDisabled"];
-const COMPONENT_NAME$q = 'BreadcrumbItem';
-const CLASSNAME$q = 'redsift-breadcrumb-item';
-const DEFAULT_PROPS$q = {};
+const _excluded$s = ["children", "className", "href", "isCurrent", "isDisabled"];
+const COMPONENT_NAME$v = 'BreadcrumbItem';
+const CLASSNAME$v = 'redsift-breadcrumb-item';
+const DEFAULT_PROPS$v = {};
 
 /**
  * The BreadcrumbItem components is a list of links to the parent pages of the current page in hierarchical order.
@@ -3359,7 +3361,7 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
       isCurrent,
       isDisabled
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$n);
+    forwardedProps = _objectWithoutProperties(props, _excluded$s);
   warnIfNoAccessibleLabelFound(props, [children]);
   return /*#__PURE__*/React__default.createElement(StyledBreadcrumbItem, _extends$1({
     role: "link",
@@ -3374,9 +3376,9 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-BreadcrumbItem.className = CLASSNAME$q;
-BreadcrumbItem.defaultProps = DEFAULT_PROPS$q;
-BreadcrumbItem.displayName = COMPONENT_NAME$q;
+BreadcrumbItem.className = CLASSNAME$v;
+BreadcrumbItem.defaultProps = DEFAULT_PROPS$v;
+BreadcrumbItem.displayName = COMPONENT_NAME$v;
 
 /**
  * Component style.
@@ -3410,10 +3412,10 @@ const StyledBreadcrumbs = styled.nav`
   }
 `;
 
-const _excluded$m = ["children", "className", "isDisabled"];
-const COMPONENT_NAME$p = 'Breadcrumbs';
-const CLASSNAME$p = 'redsift-breadcrumbs';
-const DEFAULT_PROPS$p = {};
+const _excluded$r = ["children", "className", "isDisabled"];
+const COMPONENT_NAME$u = 'Breadcrumbs';
+const CLASSNAME$u = 'redsift-breadcrumbs';
+const DEFAULT_PROPS$u = {};
 
 /**
  * The Breadcrumbs components is a list of links to the parent pages of the current page in hierarchical order.
@@ -3424,7 +3426,7 @@ const BaseBreadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       isDisabled
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$m);
+    forwardedProps = _objectWithoutProperties(props, _excluded$r);
   warnIfNoAccessibleLabelFound(props);
   const childArray = filterComponents([Breadcrumbs.Item])(children);
   const breadcrumbItems = childArray.map((child, index) => {
@@ -3447,17 +3449,17 @@ const BaseBreadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), /*#__PURE__*/React__default.createElement("ol", null, breadcrumbItems));
 });
-BaseBreadcrumbs.className = CLASSNAME$p;
-BaseBreadcrumbs.defaultProps = DEFAULT_PROPS$p;
-BaseBreadcrumbs.displayName = COMPONENT_NAME$p;
+BaseBreadcrumbs.className = CLASSNAME$u;
+BaseBreadcrumbs.defaultProps = DEFAULT_PROPS$u;
+BaseBreadcrumbs.displayName = COMPONENT_NAME$u;
 const Breadcrumbs = Object.assign(BaseBreadcrumbs, {
   Item: BreadcrumbItem
 });
 
-const _excluded$l = ["as", "children", "className", "color", "href", "isActive", "isDisabled", "leftIcon", "rightIcon", "target", "variant"];
-const COMPONENT_NAME$o = 'ButtonLink';
-const CLASSNAME$o = 'redsift-button-link';
-const DEFAULT_PROPS$o = {
+const _excluded$q = ["as", "children", "className", "color", "href", "isActive", "isDisabled", "leftIcon", "rightIcon", "target", "variant"];
+const COMPONENT_NAME$t = 'ButtonLink';
+const CLASSNAME$t = 'redsift-button-link';
+const DEFAULT_PROPS$t = {
   color: ColorPalette.default,
   height: 'fit-content',
   variant: ButtonVariant.primary
@@ -3484,7 +3486,7 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
       target,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$l);
+    forwardedProps = _objectWithoutProperties(props, _excluded$q);
   return /*#__PURE__*/React__default.createElement(StyledButton, _extends$1({
     as: as || 'a',
     role: "link",
@@ -3508,9 +3510,9 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
     className: "right"
   }) : null);
 });
-ButtonLink.className = CLASSNAME$o;
-ButtonLink.defaultProps = DEFAULT_PROPS$o;
-ButtonLink.displayName = COMPONENT_NAME$o;
+ButtonLink.className = CLASSNAME$t;
+ButtonLink.defaultProps = DEFAULT_PROPS$t;
+ButtonLink.displayName = COMPONENT_NAME$t;
 
 var collapse$3 = "Collapse";
 var expand$3 = "Expand";
@@ -3612,10 +3614,241 @@ const StyledCardHeader = styled.div`
   }
 `;
 
-const _excluded$k = ["children", "className", "header", "headingProps", "icon", "subheader"];
-const COMPONENT_NAME$n = 'CardHeader';
-const CLASSNAME$n = 'redsift-card-header';
-const DEFAULT_PROPS$n = {};
+/**
+ * Component style.
+ */
+const wave = keyframes`
+  0% {
+    -webkit-transform: translateX(-100%);
+    -moz-transform: translateX(-100%);
+    -ms-transform: translateX(-100%);
+    transform: translateX(-100%);
+  }
+
+  50% {
+    -webkit-transform: translateX(100%);
+    -moz-transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    transform: translateX(100%);
+  }
+
+  100% {
+    -webkit-transform: translateX(100%);
+    -moz-transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    transform: translateX(100%);
+  }
+`;
+const StyledSkeleton = styled.div`
+  height: fit-content;
+  width: fit-content;
+
+  > * {
+    visibility: hidden;
+  }
+
+  flex: 0 0 auto;
+
+  ${baseStyling}
+  ${baseInternalSpacing}
+
+  display: block;
+  background-color: rgba(0, 0, 0, 0.11);
+  position: relative;
+  overflow: hidden;
+  -webkit-mask-image: -webkit-radial-gradient(white, black);
+
+  &::after {
+    -webkit-animation: ${wave} 1.6s linear 0.5s infinite;
+    animation: ${wave} 1.6s linear 0.5s infinite;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(0, 0, 0, 0.04),
+      transparent
+    );
+    background-clip: content-box;
+    content: '';
+    position: absolute;
+    -webkit-transform: translateX(-100%);
+    -moz-transform: translateX(-100%);
+    -ms-transform: translateX(-100%);
+    transform: translateX(-100%);
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+  }
+`;
+
+/**
+ * Component style.
+ */
+const StyledSkeletonCircle = styled(StyledSkeleton)`
+  border-radius: 50%;
+
+  ${_ref => {
+  let {
+    height,
+    width
+  } = _ref;
+  return css`
+    &,
+    &::after {
+      ${height ? `height: ${height};` : width ? `height: ${width};` : ''}
+      ${width ? `width: ${width};` : height ? `width: ${height};` : ''}
+    }
+  `;
+}}
+`;
+
+const _excluded$p = ["children", "className", "isLoaded"];
+const COMPONENT_NAME$s = 'SkeletonCircle';
+const CLASSNAME$s = 'redsift-skeleton-circle';
+const DEFAULT_PROPS$s = {};
+
+/**
+ * The SkeletonCircle component.
+ */
+const SkeletonCircle = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      isLoaded
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$p);
+  if (isLoaded) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
+  }
+  return /*#__PURE__*/React__default.createElement(StyledSkeletonCircle, _extends$1({}, forwardedProps, {
+    className: classNames(SkeletonCircle.className, className),
+    ref: ref
+  }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", null, children) : children);
+});
+SkeletonCircle.className = CLASSNAME$s;
+SkeletonCircle.defaultProps = DEFAULT_PROPS$s;
+SkeletonCircle.displayName = COMPONENT_NAME$s;
+
+/**
+ * Component variant.
+ */
+const SkeletonTextVariant = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  subtitle: 'subtitle',
+  body: 'body',
+  body2: 'body2',
+  button: 'button',
+  caption: 'caption'
+};
+
+/**
+ * Component style.
+ */
+const StyledSkeletonText = styled(StyledSkeleton)`
+  background-clip: content-box;
+
+  ${_ref => {
+  let {
+    height,
+    $fontSize,
+    $lineHeight,
+    $variant
+  } = _ref;
+  return height ? css`
+          &,
+          &::after {
+            height: ${height};
+          }
+        ` : css`
+          &,
+          &::after {
+            height: ${$fontSize ? $fontSize : `var(--redsift-typography-${$variant}-font-size)`};
+            padding: calc(
+                (
+                    ${$lineHeight ? $lineHeight : `var(--redsift-typography-${$variant}-line-height)`} -
+                      ${$fontSize ? $fontSize : `var(--redsift-typography-${$variant}-font-size)`}
+                  ) / 2
+              )
+              0px;
+          }
+        `;
+}}}
+`;
+
+const _excluded$o = ["children", "className", "fontSize", "isLoaded", "lineHeight", "variant"];
+const COMPONENT_NAME$r = 'SkeletonText';
+const CLASSNAME$r = 'redsift-skeleton-text';
+const DEFAULT_PROPS$r = {
+  variant: 'body'
+};
+
+/**
+ * The SkeletonText component.
+ */
+const SkeletonText = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      fontSize,
+      isLoaded,
+      lineHeight,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$o);
+  if (isLoaded) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
+  }
+  return /*#__PURE__*/React__default.createElement(StyledSkeletonText, _extends$1({}, forwardedProps, {
+    className: classNames(SkeletonText.className, className),
+    ref: ref,
+    $fontSize: fontSize,
+    $lineHeight: lineHeight,
+    $variant: variant
+  }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", null, children) : children);
+});
+SkeletonText.className = CLASSNAME$r;
+SkeletonText.defaultProps = DEFAULT_PROPS$r;
+SkeletonText.displayName = COMPONENT_NAME$r;
+
+const _excluded$n = ["children", "className", "isLoaded"];
+const COMPONENT_NAME$q = 'Skeleton';
+const CLASSNAME$q = 'redsift-skeleton';
+const DEFAULT_PROPS$q = {};
+
+/**
+ * The Skeleton component.
+ */
+const BaseSkeleton = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      isLoaded
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$n);
+  if (isLoaded) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
+  }
+  return /*#__PURE__*/React__default.createElement(StyledSkeleton, _extends$1({}, forwardedProps, {
+    className: classNames(BaseSkeleton.className, className),
+    ref: ref
+  }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", null, children) : children);
+});
+BaseSkeleton.className = CLASSNAME$q;
+BaseSkeleton.defaultProps = DEFAULT_PROPS$q;
+BaseSkeleton.displayName = COMPONENT_NAME$q;
+const Skeleton = Object.assign(BaseSkeleton, {
+  Circle: SkeletonCircle,
+  Text: SkeletonText
+});
+
+const _excluded$m = ["children", "className", "header", "headingProps", "icon", "isLoading", "subheader"];
+const COMPONENT_NAME$p = 'CardHeader';
+const CLASSNAME$p = 'redsift-card-header';
+const DEFAULT_PROPS$p = {};
 
 /**
  * The CardHeader component.
@@ -3627,15 +3860,24 @@ const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
       header,
       headingProps,
       icon,
+      isLoading,
       subheader
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$k);
+    forwardedProps = _objectWithoutProperties(props, _excluded$m);
   return /*#__PURE__*/React__default.createElement(StyledCardHeader, _extends$1({}, forwardedProps, {
     className: classNames(CardHeader.className, className),
     ref: ref
-  }), subheader ? /*#__PURE__*/React__default.createElement("div", {
+  }), subheader ? /*#__PURE__*/React__default.createElement(Skeleton.Text, {
+    variant: "body",
+    isLoaded: !isLoading
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: `${CardHeader.className}__subheader`
-  }, subheader) : null, header ? /*#__PURE__*/React__default.createElement(Heading, _extends$1({
+  }, subheader)) : null, header ? /*#__PURE__*/React__default.createElement(Skeleton.Text, {
+    variant: "h2",
+    isLoaded: !isLoading,
+    marginTop: "10px",
+    marginBottom: "10px"
+  }, /*#__PURE__*/React__default.createElement(Heading, _extends$1({
     as: "h2",
     color: "black",
     className: `${CardHeader.className}__header`,
@@ -3643,11 +3885,11 @@ const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
   }, headingProps), icon ? /*#__PURE__*/React__default.createElement(Icon, {
     icon: icon,
     "aria-hidden": "true"
-  }) : null, header) : null, children);
+  }) : null, header)) : null, children);
 });
-CardHeader.className = CLASSNAME$n;
-CardHeader.defaultProps = DEFAULT_PROPS$n;
-CardHeader.displayName = COMPONENT_NAME$n;
+CardHeader.className = CLASSNAME$p;
+CardHeader.defaultProps = DEFAULT_PROPS$p;
+CardHeader.displayName = COMPONENT_NAME$p;
 
 /**
  * Component style.
@@ -3663,10 +3905,10 @@ const StyledCardBody = styled.div`
   padding: 16px 0px;
 `;
 
-const _excluded$j = ["children", "className"];
-const COMPONENT_NAME$m = 'CardBody';
-const CLASSNAME$m = 'redsift-card-body';
-const DEFAULT_PROPS$m = {};
+const _excluded$l = ["children", "className"];
+const COMPONENT_NAME$o = 'CardBody';
+const CLASSNAME$o = 'redsift-card-body';
+const DEFAULT_PROPS$o = {};
 
 /**
  * The CardBody component.
@@ -3676,15 +3918,15 @@ const CardBody = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$j);
+    forwardedProps = _objectWithoutProperties(props, _excluded$l);
   return /*#__PURE__*/React__default.createElement(StyledCardBody, _extends$1({}, forwardedProps, {
     className: classNames(CardBody.className, className),
     ref: ref
   }), children);
 });
-CardBody.className = CLASSNAME$m;
-CardBody.defaultProps = DEFAULT_PROPS$m;
-CardBody.displayName = COMPONENT_NAME$m;
+CardBody.className = CLASSNAME$o;
+CardBody.defaultProps = DEFAULT_PROPS$o;
+CardBody.displayName = COMPONENT_NAME$o;
 
 /**
  * Component style.
@@ -3696,10 +3938,10 @@ const StyledCardActions = styled.div`
   margin-bottom: 8px;
 `;
 
-const _excluded$i = ["children", "className"];
-const COMPONENT_NAME$l = 'CardActions';
-const CLASSNAME$l = 'redsift-card-actions';
-const DEFAULT_PROPS$l = {
+const _excluded$k = ["children", "className"];
+const COMPONENT_NAME$n = 'CardActions';
+const CLASSNAME$n = 'redsift-card-actions';
+const DEFAULT_PROPS$n = {
   display: 'flex',
   flexDirection: 'row'
 };
@@ -3712,20 +3954,20 @@ const CardActions = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$i);
+    forwardedProps = _objectWithoutProperties(props, _excluded$k);
   return /*#__PURE__*/React__default.createElement(StyledCardActions, _extends$1({}, forwardedProps, {
     className: classNames(CardActions.className, className),
     ref: ref
   }), children);
 });
-CardActions.className = CLASSNAME$l;
-CardActions.defaultProps = DEFAULT_PROPS$l;
-CardActions.displayName = COMPONENT_NAME$l;
+CardActions.className = CLASSNAME$n;
+CardActions.defaultProps = DEFAULT_PROPS$n;
+CardActions.displayName = COMPONENT_NAME$n;
 
-const _excluded$h = ["children", "className", "defaultCollapsed", "isCollapsed", "isCollapsible", "onCollapse"];
-const COMPONENT_NAME$k = 'Card';
-const CLASSNAME$k = 'redsift-card';
-const DEFAULT_PROPS$k = {};
+const _excluded$j = ["children", "className", "defaultCollapsed", "isCollapsed", "isCollapsible", "onCollapse"];
+const COMPONENT_NAME$m = 'Card';
+const CLASSNAME$m = 'redsift-card';
+const DEFAULT_PROPS$m = {};
 
 /**
  * The Card component.
@@ -3739,7 +3981,7 @@ const BaseCard = /*#__PURE__*/forwardRef((props, ref) => {
       isCollapsible,
       onCollapse
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$h);
+    forwardedProps = _objectWithoutProperties(props, _excluded$j);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$2);
   const [isCollapsed, setIsCollapsed] = useState(propsIsCollapsed !== null && propsIsCollapsed !== void 0 ? propsIsCollapsed : defaultCollapsed);
   useEffect(() => {
@@ -3770,9 +4012,9 @@ const BaseCard = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${BaseCard.className}__content`
   }, body, actions) : null);
 });
-BaseCard.className = CLASSNAME$k;
-BaseCard.defaultProps = DEFAULT_PROPS$k;
-BaseCard.displayName = COMPONENT_NAME$k;
+BaseCard.className = CLASSNAME$m;
+BaseCard.defaultProps = DEFAULT_PROPS$m;
+BaseCard.displayName = COMPONENT_NAME$m;
 const Card = Object.assign(BaseCard, {
   Header: CardHeader,
   Body: CardBody,
@@ -3871,10 +4113,10 @@ const StyledCheckboxGroup = styled.div`
   }
 `;
 
-const _excluded$g = ["children", "className", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "possibleValues", "value"];
-const COMPONENT_NAME$j = 'CheckboxGroup';
-const CLASSNAME$j = 'redsift-checkbox-group';
-const DEFAULT_PROPS$j = {
+const _excluded$i = ["children", "className", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "possibleValues", "value"];
+const COMPONENT_NAME$l = 'CheckboxGroup';
+const CLASSNAME$l = 'redsift-checkbox-group';
+const DEFAULT_PROPS$l = {
   color: ColorPalette.default,
   orientation: CheckboxGroupOrientation.vertical
 };
@@ -3899,7 +4141,7 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
       possibleValues,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$g);
+    forwardedProps = _objectWithoutProperties(props, _excluded$i);
   const [selectedValues, setValue] = useState(value || defaultValues || []);
   useEffect(() => {
     if (value) {
@@ -3953,16 +4195,16 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${CheckboxGroup.className}-description`
   }, description));
 });
-CheckboxGroup.className = CLASSNAME$j;
-CheckboxGroup.defaultProps = DEFAULT_PROPS$j;
-CheckboxGroup.displayName = COMPONENT_NAME$j;
+CheckboxGroup.className = CLASSNAME$l;
+CheckboxGroup.defaultProps = DEFAULT_PROPS$l;
+CheckboxGroup.displayName = COMPONENT_NAME$l;
 
 /**
  * Component style.
  */
 const StyledCheckbox = styled.label`
-  position: relative;
   height: fit-content;
+  position: relative;
   width: fit-content;
   ${baseStyling}
 
@@ -4033,11 +4275,10 @@ const StyledCheckbox = styled.label`
             );
           `}
 
-      ${$isFocusVisible ? css`
+      ${$isFocusVisible && !$isDisabled ? css`
             background-color: var(
               --redsift-color-${$isColored ? 'default' : 'question'}-hover
             );
-            border-radius: 21px;
           ` : ''}
     `;
 }}
@@ -4061,26 +4302,12 @@ const StyledCheckbox = styled.label`
           ` : '';
 }}
   }
-
-  ${_ref4 => {
-  let {
-    $isColored,
-    $isFocusVisible
-  } = _ref4;
-  return $isFocusVisible ? css`
-          .redsift-icon {
-            background-color: var(
-              --redsift-color-${$isColored ? 'default' : 'question'}-hover
-            );
-          }
-        ` : '';
-}}
 `;
 
-const _excluded$f = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isControlled", "isDisabled", "isIndeterminate", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
-const COMPONENT_NAME$i = 'Checkbox';
-const CLASSNAME$i = 'redsift-checkbox';
-const DEFAULT_PROPS$i = {
+const _excluded$h = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isControlled", "isDisabled", "isIndeterminate", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
+const COMPONENT_NAME$k = 'Checkbox';
+const CLASSNAME$k = 'redsift-checkbox';
+const DEFAULT_PROPS$k = {
   isColored: true
 };
 
@@ -4113,7 +4340,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
       onChange,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$f);
+    forwardedProps = _objectWithoutProperties(props, _excluded$h);
   const {
     isFocusVisible,
     focusProps
@@ -4193,9 +4420,9 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     className: "label"
   }, children) : null);
 });
-Checkbox.className = CLASSNAME$i;
-Checkbox.defaultProps = DEFAULT_PROPS$i;
-Checkbox.displayName = COMPONENT_NAME$i;
+Checkbox.className = CLASSNAME$k;
+Checkbox.defaultProps = DEFAULT_PROPS$k;
+Checkbox.displayName = COMPONENT_NAME$k;
 
 const ConditionalWrapper = _ref => {
   let {
@@ -4305,10 +4532,10 @@ const StyledShield = styled.div`
 }}
 `;
 
-const _excluded$e = ["aria-hidden", "aria-label", "className", "svgProps", "isOutlined", "isReversed", "variant"];
-const COMPONENT_NAME$h = 'Shield';
-const CLASSNAME$h = 'redsift-shield';
-const DEFAULT_PROPS$h = {
+const _excluded$g = ["aria-hidden", "aria-label", "className", "svgProps", "isOutlined", "isReversed", "variant"];
+const COMPONENT_NAME$j = 'Shield';
+const CLASSNAME$j = 'redsift-shield';
+const DEFAULT_PROPS$j = {
   variant: ShieldVariant.success
 };
 const getVariant = variant => {
@@ -4394,7 +4621,7 @@ const Shield = /*#__PURE__*/forwardRef((props, ref) => {
       isReversed,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$e);
+    forwardedProps = _objectWithoutProperties(props, _excluded$g);
   const {
     color,
     icon
@@ -4428,9 +4655,9 @@ const Shield = /*#__PURE__*/forwardRef((props, ref) => {
     className: "icon"
   })));
 });
-Shield.className = CLASSNAME$h;
-Shield.defaultProps = DEFAULT_PROPS$h;
-Shield.displayName = COMPONENT_NAME$h;
+Shield.className = CLASSNAME$j;
+Shield.defaultProps = DEFAULT_PROPS$j;
+Shield.displayName = COMPONENT_NAME$j;
 
 var collapse$1 = "Collapse details";
 var expand$1 = "Expand details";
@@ -4471,10 +4698,10 @@ const StyledDetailedCardCollapsibleSectionItems = styled.div`
   }
 `;
 
-const _excluded$d = ["caption", "children", "className"];
-const COMPONENT_NAME$g = 'DetailedCardCollapsibleSectionItems';
-const CLASSNAME$g = 'redsift-detailed-card-collapsible-section-items';
-const DEFAULT_PROPS$g = {};
+const _excluded$f = ["caption", "children", "className"];
+const COMPONENT_NAME$i = 'DetailedCardCollapsibleSectionItems';
+const CLASSNAME$i = 'redsift-detailed-card-collapsible-section-items';
+const DEFAULT_PROPS$i = {};
 
 /**
  * The DetailedCardCollapsibleSectionItems Section component.
@@ -4485,7 +4712,7 @@ const DetailedCardCollapsibleSectionItems = /*#__PURE__*/forwardRef((props, ref)
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$d);
+    forwardedProps = _objectWithoutProperties(props, _excluded$f);
   return /*#__PURE__*/React__default.createElement(StyledDetailedCardCollapsibleSectionItems, _extends$1({}, forwardedProps, {
     className: classNames(DetailedCardCollapsibleSectionItems.className, className),
     ref: ref
@@ -4493,9 +4720,9 @@ const DetailedCardCollapsibleSectionItems = /*#__PURE__*/forwardRef((props, ref)
     className: `${DetailedCardCollapsibleSectionItems.className}__caption`
   }, caption) : null);
 });
-DetailedCardCollapsibleSectionItems.className = CLASSNAME$g;
-DetailedCardCollapsibleSectionItems.defaultProps = DEFAULT_PROPS$g;
-DetailedCardCollapsibleSectionItems.displayName = COMPONENT_NAME$g;
+DetailedCardCollapsibleSectionItems.className = CLASSNAME$i;
+DetailedCardCollapsibleSectionItems.defaultProps = DEFAULT_PROPS$i;
+DetailedCardCollapsibleSectionItems.displayName = COMPONENT_NAME$i;
 
 /**
  * Component style.
@@ -4509,11 +4736,7 @@ const StyledDetailedCardSection = styled.div`
   }
 
   .redsift-detailed-card-section-header__title {
-    color: var(--redsift-color-neutral-black);
-    font-family: var(--redsift-typography-font-family-raleway);
-    font-size: 18px;
     font-weight: 700;
-    line-height: 22px;
     padding: 6px 0px;
   }
 
@@ -4555,47 +4778,217 @@ const StyledDetailedCardSection = styled.div`
   }
 `;
 
-const _excluded$c = ["children", "className", "header", "isCollapsed", "isCollapsible"];
-const COMPONENT_NAME$f = 'DetailedCardSection';
-const CLASSNAME$f = 'redsift-detailed-card-section';
-const DEFAULT_PROPS$f = {
-  isCollapsible: true
+/**
+ * Component variant.
+ */
+const TextVariant = {
+  subtitle: 'subtitle',
+  body: 'body',
+  body2: 'body2',
+  button: 'button',
+  caption: 'caption',
+  inherit: 'inherit'
 };
-const hasCollapsibleChildren = children => {
-  let hasCollapsible = false;
-  React__default.Children.map(children, child => {
-    if (isComponent(DetailedCardCollapsibleSectionItems)(child)) {
-      hasCollapsible = true;
-    }
-  });
-  return hasCollapsible;
+const TextComponent = {
+  p: 'p',
+  b: 'b',
+  i: 'i',
+  u: 'u',
+  abbr: 'abbr',
+  cite: 'cite',
+  del: 'del',
+  em: 'em',
+  ins: 'ins',
+  kbd: 'kbd',
+  mark: 'mark',
+  s: 's',
+  samp: 'samp',
+  sub: 'sub',
+  sup: 'sup'
 };
 
 /**
- * The DetailedCardSection component.
+ * Component style.
  */
-const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      children,
-      className,
-      header,
-      isCollapsed: propsIsCollapsed,
-      isCollapsible: propsIsCollapsible
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$c);
-  const stringFormatter = useLocalizedStringFormatter(intlMessages);
-  const isCollapsible = propsIsCollapsible && hasCollapsibleChildren(children);
-  const [isCollapsed, setIsCollapsed] = useState(Boolean(propsIsCollapsed));
-  return /*#__PURE__*/React__default.createElement(StyledDetailedCardSection, _extends$1({}, forwardedProps, {
-    className: classNames(DetailedCardSection.className, className),
-    ref: ref,
-    $isCollapsed: isCollapsed
-  }), /*#__PURE__*/React__default.createElement(Flexbox, {
+const StyledText = styled.span`
+  ${baseStyling}
+
+  ${_ref => {
+  let {
+    $color
+  } = _ref;
+  return $color && [...Object.keys(ColorPalette), ...Object.keys(ProductColorPalette)].indexOf($color) !== -1 ? css`
+          color: var(--redsift-color-${$color}-primary);
+        ` : Object.keys(NeutralColorPalette).indexOf($color) !== -1 ? css`
+          color: var(--redsift-color-neutral-${$color});
+        ` : css`
+          color: ${$color || css`inherit`};
+        `;
+}}
+
+  ${_ref2 => {
+  let {
+    $as
+  } = _ref2;
+  return css`
+    ${$as === TextComponent.i || $as === TextComponent.cite || $as === TextComponent.em ? css`
+          font-style: italic;
+        ` : $as === TextComponent.sub ? css`
+          vertical-align: sub;
+        ` : $as === TextComponent.sup ? css`
+          vertical-align: super;
+        ` : ''}
+  `;
+}}
+
+  ${_ref3 => {
+  let {
+    $as,
+    $fontFamily,
+    $fontSize,
+    $lineHeight,
+    $variant
+  } = _ref3;
+  return !$variant ? css`
+          ${$fontFamily ? css`
+                font-family: var(
+                  --redsift-typography-font-family-${$fontFamily}
+                );
+              ` : ''}
+          ${$fontSize ? css`
+                font-size: ${$fontSize};
+              ` : ''}
+          ${$lineHeight ? css`
+                line-height: ${$lineHeight};
+              ` : ''}
+          ${$as === TextComponent.b ? css`
+                font-weight: var(--redsift-typography-font-weight-bold);
+              ` : $as === TextComponent.sup || $as === TextComponent.sub ? css`
+                font-size: ${$fontSize ? $fontSize : '12px'};
+              ` : ''}
+        ` : $variant === TextVariant.inherit ? css`
+          font-family: ${$fontFamily ? css`var(--redsift-typography-font-family-${$fontFamily})` : css`inherit`};
+          font-size: ${$fontSize ? $fontSize : $as === TextComponent.sup || $as === TextComponent.sub ? '12px' : css`inherit`};
+          font-weight: ${$as === TextComponent.b ? 'var(--redsift-typography-font-weight-bold)' : 'inherit'};
+          line-height: ${$lineHeight ? $lineHeight : css`inherit`};
+          text-transform: inherit;
+        ` : css`
+          font-family: ${$fontFamily ? css`var(--redsift-typography-font-family-${$fontFamily})` : css`var(--redsift-typography-${$variant}-font-family)`};
+          font-size: ${$fontSize ? $fontSize : css`var(--redsift-typography-${$variant}-font-size)`};
+          font-weight: var(--redsift-typography-${$variant}-font-weight);
+          line-height: ${$lineHeight ? $lineHeight : css`var(--redsift-typography-${$variant}-line-height)`};
+          text-transform: var(--redsift-typography-${$variant}-text-transform);
+        `;
+}}
+  
+  ${_ref4 => {
+  let {
+    $noWrap
+  } = _ref4;
+  return $noWrap ? css`
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        ` : css`
+          word-break: break-word;
+        `;
+}}
+`;
+
+const _excluded$e = ["as", "children", "className", "color", "fontFamily", "fontSize", "lineHeight", "noWrap", "variant"];
+const COMPONENT_NAME$h = 'Text';
+const CLASSNAME$h = 'redsift-text';
+const DEFAULT_PROPS$h = {
+  fontFamily: FontFamily.raleway
+};
+
+/**
+ * The Text component.
+ */
+const Text = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      children,
+      className,
+      color,
+      fontFamily,
+      fontSize,
+      lineHeight,
+      noWrap,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$e);
+  return /*#__PURE__*/React__default.createElement(StyledText, _extends$1({
+    as: as
+  }, forwardedProps, {
+    className: classNames(Text.className, className),
+    ref: ref,
+    $as: as,
+    $color: color,
+    $fontFamily: fontFamily,
+    $fontSize: fontSize,
+    $lineHeight: lineHeight,
+    $noWrap: noWrap,
+    $variant: variant
+  }), children);
+});
+Text.className = CLASSNAME$h;
+Text.defaultProps = DEFAULT_PROPS$h;
+Text.displayName = COMPONENT_NAME$h;
+
+const _excluded$d = ["children", "className", "header", "isCollapsed", "isCollapsible", "isLoading"];
+const COMPONENT_NAME$g = 'DetailedCardSection';
+const CLASSNAME$g = 'redsift-detailed-card-section';
+const DEFAULT_PROPS$g = {
+  isCollapsible: true
+};
+const hasCollapsibleChildren = children => {
+  let hasCollapsible = false;
+  React__default.Children.map(children, child => {
+    if (isComponent(DetailedCardCollapsibleSectionItems)(child)) {
+      hasCollapsible = true;
+    }
+  });
+  return hasCollapsible;
+};
+
+/**
+ * The DetailedCardSection component.
+ */
+const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      header,
+      isCollapsed: propsIsCollapsed,
+      isCollapsible: propsIsCollapsible,
+      isLoading
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$d);
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  const isCollapsible = propsIsCollapsible && hasCollapsibleChildren(children);
+  const [isCollapsed, setIsCollapsed] = useState(Boolean(propsIsCollapsed));
+  return /*#__PURE__*/React__default.createElement(StyledDetailedCardSection, _extends$1({}, forwardedProps, {
+    className: classNames(DetailedCardSection.className, className),
+    ref: ref,
+    $isCollapsed: isCollapsed
+  }), /*#__PURE__*/React__default.createElement(Flexbox, {
     justifyContent: "space-between",
     className: `${DetailedCardSection.className}__header`
-  }, header ? /*#__PURE__*/React__default.createElement("div", {
-    className: `${DetailedCardSection.className}-header__title`
-  }, header) : null, isCollapsible ? /*#__PURE__*/React__default.createElement(IconButton, {
+  }, header ? /*#__PURE__*/React__default.createElement(Skeleton.Text, {
+    variant: "body",
+    isLoaded: !isLoading,
+    fontSize: "18px",
+    lineHeight: "22px",
+    marginTop: "6px",
+    marginBottom: "12px"
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    className: `${DetailedCardSection.className}-header__title`,
+    color: "black",
+    fontFamily: "raleway",
+    fontSize: "18px",
+    lineHeight: "22px"
+  }, header)) : null, isCollapsible && !isLoading ? /*#__PURE__*/React__default.createElement(IconButton, {
     "aria-label": stringFormatter.format(isCollapsed ? 'expand' : 'collapse'),
     className: `${DetailedCardSection.className}-header__collapse-button`,
     color: "question",
@@ -4605,9 +4998,9 @@ const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }) : null), children);
 });
-DetailedCardSection.className = CLASSNAME$f;
-DetailedCardSection.defaultProps = DEFAULT_PROPS$f;
-DetailedCardSection.displayName = COMPONENT_NAME$f;
+DetailedCardSection.className = CLASSNAME$g;
+DetailedCardSection.defaultProps = DEFAULT_PROPS$g;
+DetailedCardSection.displayName = COMPONENT_NAME$g;
 
 /**
  * Component style.
@@ -4620,18 +5013,12 @@ const StyledDetailedCard = styled.div`
   padding: 16px;
 
   .redsift-detailed-card__banner {
-    align-items: center;
     background-color: ${_ref => {
   let {
     $color
   } = _ref;
   return css`var(--redsift-color-${$color}-primary)`;
 }};
-    display: flex;
-    height: 80px;
-    justify-content: center;
-    margin: -16px -16px 16px -16px;
-    width: calc(100% + 32px);
   }
 
   .redsift-detailed-card__collapse-buttons {
@@ -4654,10 +5041,10 @@ const StyledDetailedCardHeader = styled.div`
   }
 `;
 
-const _excluded$b = ["children", "className", "header", "headingProps"];
-const COMPONENT_NAME$e = 'DetailedCardHeader';
-const CLASSNAME$e = 'redsift-detailed-card-header';
-const DEFAULT_PROPS$e = {};
+const _excluded$c = ["children", "className", "header", "headingProps", "isLoading"];
+const COMPONENT_NAME$f = 'DetailedCardHeader';
+const CLASSNAME$f = 'redsift-detailed-card-header';
+const DEFAULT_PROPS$f = {};
 
 /**
  * The DetailedCardHeader component.
@@ -4667,21 +5054,27 @@ const DetailedCardHeader = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className,
       header,
-      headingProps
+      headingProps,
+      isLoading
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$b);
+    forwardedProps = _objectWithoutProperties(props, _excluded$c);
   return /*#__PURE__*/React__default.createElement(StyledDetailedCardHeader, _extends$1({}, forwardedProps, {
     className: classNames(DetailedCardHeader.className, className),
     ref: ref
-  }), header ? /*#__PURE__*/React__default.createElement(Heading, _extends$1({
+  }), header ? /*#__PURE__*/React__default.createElement(Skeleton.Text, {
+    variant: "h2",
+    isLoaded: !isLoading,
+    height: "32px",
+    marginBottom: "16px"
+  }, /*#__PURE__*/React__default.createElement(Heading, _extends$1({
     as: "h2",
     className: `${DetailedCardHeader.className}__header`,
     variant: "h2"
-  }, headingProps), header) : null, children);
+  }, headingProps), header)) : null, children);
 });
-DetailedCardHeader.className = CLASSNAME$e;
-DetailedCardHeader.defaultProps = DEFAULT_PROPS$e;
-DetailedCardHeader.displayName = COMPONENT_NAME$e;
+DetailedCardHeader.className = CLASSNAME$f;
+DetailedCardHeader.defaultProps = DEFAULT_PROPS$f;
+DetailedCardHeader.displayName = COMPONENT_NAME$f;
 
 /**
  * Component style.
@@ -4724,10 +5117,10 @@ const StyledPill = styled.div`
   }
 `;
 
-const _excluded$a = ["autoBreak", "children", "className", "color"];
-const COMPONENT_NAME$d = 'Pill';
-const CLASSNAME$d = 'redsift-badge';
-const DEFAULT_PROPS$d = {
+const _excluded$b = ["autoBreak", "children", "className", "color"];
+const COMPONENT_NAME$e = 'Pill';
+const CLASSNAME$e = 'redsift-pill';
+const DEFAULT_PROPS$e = {
   color: DataVizColorPalette.blue,
   height: 'fit-content'
 };
@@ -4742,7 +5135,7 @@ const Pill = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       color
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$a);
+    forwardedProps = _objectWithoutProperties(props, _excluded$b);
   return /*#__PURE__*/React__default.createElement(StyledPill, _extends$1({}, forwardedProps, {
     $autoBreak: autoBreak,
     $color: color,
@@ -4750,178 +5143,27 @@ const Pill = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-Pill.className = CLASSNAME$d;
-Pill.defaultProps = DEFAULT_PROPS$d;
-Pill.displayName = COMPONENT_NAME$d;
-
-/**
- * Component variant.
- */
-const TextVariant = {
-  body: 'body',
-  button: 'button',
-  caption: 'caption',
-  inherit: 'inherit',
-  subtitle1: 'subtitle1'
-};
-const TextComponent = {
-  p: 'p',
-  b: 'b',
-  i: 'i',
-  u: 'u',
-  abbr: 'abbr',
-  cite: 'cite',
-  del: 'del',
-  em: 'em',
-  ins: 'ins',
-  kbd: 'kbd',
-  mark: 'mark',
-  s: 's',
-  samp: 'samp',
-  sub: 'sub',
-  sup: 'sup'
-};
+Pill.className = CLASSNAME$e;
+Pill.defaultProps = DEFAULT_PROPS$e;
+Pill.displayName = COMPONENT_NAME$e;
 
 /**
  * Component style.
  */
-const StyledText = styled.span`
-  ${baseStyling}
+const StyledDetailedCardSectionItem = styled.div`
+  padding: 8px 0;
 
-  ${_ref => {
-  let {
-    $color
-  } = _ref;
-  return $color && [...Object.keys(ColorPalette), ...Object.keys(ProductColorPalette)].indexOf($color) !== -1 ? css`
-          color: var(--redsift-color-${$color}-primary);
-        ` : Object.keys(NeutralColorPalette).indexOf($color) !== -1 ? css`
-          color: var(--redsift-color-neutral-${$color});
-        ` : css`
-          color: ${$color || css`inherit`};
-        `;
-}}
+  .redsift-detailed-card-section-item-header__shield {
+    align-items: center;
+    display: flex;
+    height: 28px;
+    justify-content: center;
+    padding: 0 4px;
+  }
 
-  ${_ref2 => {
-  let {
-    $as
-  } = _ref2;
-  return css`
-    ${$as === TextComponent.i || $as === TextComponent.cite || $as === TextComponent.em ? css`
-          font-style: italic;
-        ` : $as === TextComponent.sub ? css`
-          vertical-align: sub;
-        ` : $as === TextComponent.sup ? css`
-          vertical-align: super;
-        ` : ''}
-  `;
-}}
-
-  ${_ref3 => {
-  let {
-    $as,
-    $fontFamily,
-    $fontSize,
-    $variant
-  } = _ref3;
-  return !$variant ? css`
-          ${$fontFamily ? css`
-                font-family: var(
-                  --redsift-typography-font-family-${$fontFamily}
-                );
-              ` : ''}
-          ${$fontSize ? css`
-                font-size: ${$fontSize};
-              ` : ''}
-          ${$as === TextComponent.b ? css`
-                font-weight: var(--redsift-typography-font-weight-bold);
-              ` : $as === TextComponent.sup || $as === TextComponent.sub ? css`
-                font-size: ${$fontSize ? $fontSize : '12px'};
-              ` : ''}
-        ` : $variant === TextVariant.inherit ? css`
-          font-family: ${$fontFamily ? css`var(--redsift-typography-font-family-${$fontFamily})` : css`inherit`};
-          font-size: ${$fontSize ? $fontSize : $as === TextComponent.sup || $as === TextComponent.sub ? '12px' : css`inherit`};
-          font-weight: ${$as === TextComponent.b ? 'var(--redsift-typography-font-weight-bold)' : 'inherit'};
-          line-height: inherit;
-          text-transform: inherit;
-        ` : css`
-          font-family: ${$fontFamily ? css`var(--redsift-typography-font-family-${$fontFamily})` : css`var(--redsift-typography-${$variant}-font-family)`};
-          font-size: ${$fontSize ? $fontSize : css`var(--redsift-typography-${$variant}-font-size)`};
-          font-weight: var(--redsift-typography-${$variant}-font-weight);
-          line-height: var(--redsift-typography-${$variant}-line-height);
-          text-transform: var(--redsift-typography-${$variant}-text-transform);
-        `;
-}}
-  
-  ${_ref4 => {
-  let {
-    $noWrap
-  } = _ref4;
-  return $noWrap ? css`
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        ` : css`
-          word-break: break-word;
-        `;
-}}
-`;
-
-const _excluded$9 = ["as", "children", "className", "color", "fontFamily", "fontSize", "noWrap", "variant"];
-const COMPONENT_NAME$c = 'Text';
-const CLASSNAME$c = 'redsift-text';
-const DEFAULT_PROPS$c = {
-  fontFamily: FontFamily.raleway
-};
-
-/**
- * The Text component.
- */
-const Text = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      as,
-      children,
-      className,
-      color,
-      fontFamily,
-      fontSize,
-      noWrap,
-      variant
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$9);
-  return /*#__PURE__*/React__default.createElement(StyledText, _extends$1({
-    as: as
-  }, forwardedProps, {
-    className: classNames(Text.className, className),
-    ref: ref,
-    $as: as,
-    $color: color,
-    $fontFamily: fontFamily,
-    $fontSize: fontSize,
-    $noWrap: noWrap,
-    $variant: variant
-  }), children);
-});
-Text.className = CLASSNAME$c;
-Text.defaultProps = DEFAULT_PROPS$c;
-Text.displayName = COMPONENT_NAME$c;
-
-/**
- * Component style.
- */
-const StyledDetailedCardSectionItem = styled.div`
-  padding: 8px 0;
-
-  .redsift-detailed-card-section-item-header__shield {
-    align-items: center;
-    display: flex;
-    height: 28px;
-    justify-content: center;
-    padding: 0 4px;
-  }
-
-  .redsift-detailed-card-section-item-header__icon {
-    height: 28px;
-  }
+  .redsift-detailed-card-section-item-header__icon {
+    height: 28px;
+  }
 
   .redsift-detailed-card-section-item-header__pill {
     display: inline-block;
@@ -4933,10 +5175,10 @@ const StyledDetailedCardSectionItem = styled.div`
   }
 `;
 
-const _excluded$8 = ["children", "className", "description", "icon", "iconProps", "pill", "pillProps", "shield"];
-const COMPONENT_NAME$b = 'DetailedCardSectionItem';
-const CLASSNAME$b = 'redsift-detailed-card-section-item';
-const DEFAULT_PROPS$b = {};
+const _excluded$a = ["children", "className", "description", "icon", "iconProps", "isLoading", "pill", "pillProps", "shield"];
+const COMPONENT_NAME$d = 'DetailedCardSectionItem';
+const CLASSNAME$d = 'redsift-detailed-card-section-item';
+const DEFAULT_PROPS$d = {};
 
 /**
  * The DetailedCardSectionItems component.
@@ -4948,35 +5190,42 @@ const DetailedCardSectionItem = /*#__PURE__*/forwardRef((props, ref) => {
       description,
       icon,
       iconProps,
+      isLoading,
       pill,
       pillProps,
       shield
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$8);
+    forwardedProps = _objectWithoutProperties(props, _excluded$a);
   return /*#__PURE__*/React__default.createElement(StyledDetailedCardSectionItem, _extends$1({}, forwardedProps, {
     className: classNames(DetailedCardSectionItem.className, className),
     ref: ref
   }), /*#__PURE__*/React__default.createElement(Flexbox, {
     alignItems: "flex-start",
     className: `${DetailedCardSectionItem.className}__header`
-  }, shield ? /*#__PURE__*/React__default.createElement(Shield, {
+  }, shield ? /*#__PURE__*/React__default.createElement(Skeleton, {
+    isLoaded: !isLoading
+  }, /*#__PURE__*/React__default.createElement(Shield, {
     variant: shield,
     className: `${DetailedCardSectionItem.className}-header__shield`
-  }) : icon ? /*#__PURE__*/React__default.createElement("div", {
+  })) : icon ? /*#__PURE__*/React__default.createElement(Skeleton, {
+    isLoaded: !isLoading
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: `${DetailedCardSectionItem.className}-header__icon`
   }, /*#__PURE__*/React__default.createElement(Icon, _extends$1({
     icon: icon
   }, iconProps, {
     size: "large"
-  }))) : null, description || pill ? /*#__PURE__*/React__default.createElement("div", {
+  })))) : null, description || pill ? /*#__PURE__*/React__default.createElement("div", {
     className: `${DetailedCardSectionItem.className}-header__description`
+  }, /*#__PURE__*/React__default.createElement(Skeleton, {
+    isLoaded: !isLoading
   }, pill && /*#__PURE__*/React__default.createElement(Pill, _extends$1({
     className: `${DetailedCardSectionItem.className}-header__pill`
-  }, pillProps), pill), typeof description === 'string' ? /*#__PURE__*/React__default.createElement(Text, null, description) : description) : null), children);
+  }, pillProps), pill), typeof description === 'string' ? /*#__PURE__*/React__default.createElement(Text, null, description) : description)) : null), children);
 });
-DetailedCardSectionItem.className = CLASSNAME$b;
-DetailedCardSectionItem.defaultProps = DEFAULT_PROPS$b;
-DetailedCardSectionItem.displayName = COMPONENT_NAME$b;
+DetailedCardSectionItem.className = CLASSNAME$d;
+DetailedCardSectionItem.defaultProps = DEFAULT_PROPS$d;
+DetailedCardSectionItem.displayName = COMPONENT_NAME$d;
 
 /*!
 * tabbable 6.1.1
@@ -8501,9 +8750,9 @@ const StyledTooltipContent = styled.div`
 }}
 `;
 
-const COMPONENT_NAME$a = 'TooltipContent';
-const CLASSNAME$a = 'redsift-tooltip-content';
-const DEFAULT_PROPS$a = {};
+const COMPONENT_NAME$c = 'TooltipContent';
+const CLASSNAME$c = 'redsift-tooltip-content';
+const DEFAULT_PROPS$c = {};
 
 /**
  * The TooltipContent component.
@@ -8565,13 +8814,13 @@ const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${TooltipContent.className}__inner`
   }, children)));
 });
-TooltipContent.className = CLASSNAME$a;
-TooltipContent.defaultProps = DEFAULT_PROPS$a;
-TooltipContent.displayName = COMPONENT_NAME$a;
+TooltipContent.className = CLASSNAME$c;
+TooltipContent.defaultProps = DEFAULT_PROPS$c;
+TooltipContent.displayName = COMPONENT_NAME$c;
 
-const COMPONENT_NAME$9 = 'TooltipTrigger';
-const CLASSNAME$9 = 'redsift-tooltip-trigger';
-const DEFAULT_PROPS$9 = {};
+const COMPONENT_NAME$b = 'TooltipTrigger';
+const CLASSNAME$b = 'redsift-tooltip-trigger';
+const DEFAULT_PROPS$b = {};
 
 /**
  * The TooltipTrigger component.
@@ -8598,9 +8847,9 @@ const TooltipTrigger = /*#__PURE__*/forwardRef((props, ref) => {
     ref: triggerRef
   }, getReferenceProps(props)), children);
 });
-TooltipTrigger.className = CLASSNAME$9;
-TooltipTrigger.defaultProps = DEFAULT_PROPS$9;
-TooltipTrigger.displayName = COMPONENT_NAME$9;
+TooltipTrigger.className = CLASSNAME$b;
+TooltipTrigger.defaultProps = DEFAULT_PROPS$b;
+TooltipTrigger.displayName = COMPONENT_NAME$b;
 
 function useTooltip(_ref) {
   let {
@@ -8661,9 +8910,9 @@ function useTooltip(_ref) {
   }), [isOpen, handleOpen, interactions, data, arrowRef, tooltipId]);
 }
 
-const COMPONENT_NAME$8 = 'Tooltip';
-const CLASSNAME$8 = 'redsift-tooltip';
-const DEFAULT_PROPS$8 = {
+const COMPONENT_NAME$a = 'Tooltip';
+const CLASSNAME$a = 'redsift-tooltip';
+const DEFAULT_PROPS$a = {
   delay: 500,
   placement: TooltipPlacement.top
 };
@@ -8694,9 +8943,9 @@ const BaseTooltip = props => {
     value: tooltip
   }, trigger, content);
 };
-BaseTooltip.className = CLASSNAME$8;
-BaseTooltip.defaultProps = DEFAULT_PROPS$8;
-BaseTooltip.displayName = COMPONENT_NAME$8;
+BaseTooltip.className = CLASSNAME$a;
+BaseTooltip.defaultProps = DEFAULT_PROPS$a;
+BaseTooltip.displayName = COMPONENT_NAME$a;
 const Tooltip = Object.assign(BaseTooltip, {
   Trigger: TooltipTrigger,
   Content: TooltipContent
@@ -8710,10 +8959,10 @@ const useTooltipContext = () => {
   return context;
 };
 
-const _excluded$7 = ["areAllCollapsed", "children", "className", "color", "defaultAllCollapsed", "icon", "isCollapsible", "onCollapseAll", "shield"];
-const COMPONENT_NAME$7 = 'DetailedCard';
-const CLASSNAME$7 = 'redsift-detailed-card';
-const DEFAULT_PROPS$7 = {
+const _excluded$9 = ["areAllCollapsed", "children", "className", "color", "defaultAllCollapsed", "icon", "isCollapsible", "isLoading", "onCollapseAll", "shield"];
+const COMPONENT_NAME$9 = 'DetailedCard';
+const CLASSNAME$9 = 'redsift-detailed-card';
+const DEFAULT_PROPS$9 = {
   isCollapsible: true,
   width: '400px'
 };
@@ -8748,10 +8997,11 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
       defaultAllCollapsed,
       icon,
       isCollapsible: propsIsCollapsible,
+      isLoading,
       onCollapseAll,
       shield
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$7);
+    forwardedProps = _objectWithoutProperties(props, _excluded$9);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$1);
   const isCollapsible = propsIsCollapsible && hasMultipleCollapsibleChildren(children);
   const [allCollapsed, setAllCollapsed] = useState({
@@ -8777,8 +9027,17 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
     className: classNames(BaseDetailedCard.className, className),
     ref: ref,
     $color: color
-  }), color ? /*#__PURE__*/React__default.createElement("div", {
-    className: `${BaseDetailedCard.className}__banner`
+  }), color ? isLoading ? /*#__PURE__*/React__default.createElement(Skeleton, {
+    height: "80px",
+    width: "calc(100% + 32px)",
+    margin: "-16px -16px 16px -16px"
+  }) : /*#__PURE__*/React__default.createElement(Flexbox, {
+    className: `${BaseDetailedCard.className}__banner`,
+    alignItems: "center",
+    height: "80px",
+    justifyContent: "center",
+    margin: "-16px -16px 16px -16px",
+    width: "calc(100% + 32px)"
   }, shield ? /*#__PURE__*/React__default.createElement(Shield, {
     variant: shield,
     isOutlined: true,
@@ -8828,9 +9087,9 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
     return child;
   }));
 });
-BaseDetailedCard.className = CLASSNAME$7;
-BaseDetailedCard.defaultProps = DEFAULT_PROPS$7;
-BaseDetailedCard.displayName = COMPONENT_NAME$7;
+BaseDetailedCard.className = CLASSNAME$9;
+BaseDetailedCard.defaultProps = DEFAULT_PROPS$9;
+BaseDetailedCard.displayName = COMPONENT_NAME$9;
 const DetailedCard = Object.assign(BaseDetailedCard, {
   Header: DetailedCardHeader,
   Section: DetailedCardSection,
@@ -8864,10 +9123,10 @@ const StyledGridItem = styled.div`
   ${baseInternalSpacing}
 `;
 
-const _excluded$6 = ["children", "className"];
-const COMPONENT_NAME$6 = 'GridItem';
-const CLASSNAME$6 = 'redsift-grid-item';
-const DEFAULT_PROPS$6 = {};
+const _excluded$8 = ["children", "className"];
+const COMPONENT_NAME$8 = 'GridItem';
+const CLASSNAME$8 = 'redsift-grid-item';
+const DEFAULT_PROPS$8 = {};
 
 /**
  * The GridItem component.
@@ -8877,20 +9136,20 @@ const GridItem = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$6);
+    forwardedProps = _objectWithoutProperties(props, _excluded$8);
   return /*#__PURE__*/React__default.createElement(StyledGridItem, _extends$1({}, forwardedProps, {
     className: classNames(GridItem.className, className),
     ref: ref
   }), children);
 });
-GridItem.className = CLASSNAME$6;
-GridItem.defaultProps = DEFAULT_PROPS$6;
-GridItem.displayName = COMPONENT_NAME$6;
+GridItem.className = CLASSNAME$8;
+GridItem.defaultProps = DEFAULT_PROPS$8;
+GridItem.displayName = COMPONENT_NAME$8;
 
-const _excluded$5 = ["children", "className"];
-const COMPONENT_NAME$5 = 'Grid';
-const CLASSNAME$5 = 'redsift-grid';
-const DEFAULT_PROPS$5 = {};
+const _excluded$7 = ["children", "className"];
+const COMPONENT_NAME$7 = 'Grid';
+const CLASSNAME$7 = 'redsift-grid';
+const DEFAULT_PROPS$7 = {};
 
 /**
  * The Grid component.
@@ -8900,15 +9159,15 @@ const BaseGrid = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$5);
+    forwardedProps = _objectWithoutProperties(props, _excluded$7);
   return /*#__PURE__*/React__default.createElement(StyledGrid, _extends$1({}, forwardedProps, {
     className: classNames(BaseGrid.className, className),
     ref: ref
   }), children);
 });
-BaseGrid.className = CLASSNAME$5;
-BaseGrid.defaultProps = DEFAULT_PROPS$5;
-BaseGrid.displayName = COMPONENT_NAME$5;
+BaseGrid.className = CLASSNAME$7;
+BaseGrid.defaultProps = DEFAULT_PROPS$7;
+BaseGrid.displayName = COMPONENT_NAME$7;
 const Grid = Object.assign(BaseGrid, {
   Item: GridItem
 });
@@ -8953,10 +9212,10 @@ const StyledLink = styled.a`
   }
 `;
 
-const _excluded$4 = ["children", "className", "href", "isDisabled"];
-const COMPONENT_NAME$4 = 'Link';
-const CLASSNAME$4 = 'redsift-link';
-const DEFAULT_PROPS$4 = {};
+const _excluded$6 = ["children", "className", "href", "isDisabled"];
+const COMPONENT_NAME$6 = 'Link';
+const CLASSNAME$6 = 'redsift-link';
+const DEFAULT_PROPS$6 = {};
 
 /**
  * The Link is a semantic link that looks like a link.
@@ -8973,7 +9232,7 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
       href,
       isDisabled
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$4);
+    forwardedProps = _objectWithoutProperties(props, _excluded$6);
   return /*#__PURE__*/React__default.createElement(StyledLink, _extends$1({
     "aria-disabled": isDisabled,
     role: "link",
@@ -8985,14 +9244,14 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-Link.className = CLASSNAME$4;
-Link.defaultProps = DEFAULT_PROPS$4;
-Link.displayName = COMPONENT_NAME$4;
+Link.className = CLASSNAME$6;
+Link.defaultProps = DEFAULT_PROPS$6;
+Link.displayName = COMPONENT_NAME$6;
 
-const _excluded$3 = ["children", "className", "disabled", "isDisabled", "onPress"];
-const COMPONENT_NAME$3 = 'LinkButton';
-const CLASSNAME$3 = 'redsift-link-button';
-const DEFAULT_PROPS$3 = {};
+const _excluded$5 = ["children", "className", "disabled", "isDisabled", "onPress"];
+const COMPONENT_NAME$5 = 'LinkButton';
+const CLASSNAME$5 = 'redsift-link-button';
+const DEFAULT_PROPS$5 = {};
 
 /**
  * The LinkButton is a semantic button that looks like a link.
@@ -9017,7 +9276,7 @@ const LinkButton = /*#__PURE__*/forwardRef((props, ref) => {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onPress
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$3);
+    forwardedProps = _objectWithoutProperties(props, _excluded$5);
   return /*#__PURE__*/React__default.createElement(StyledLink, _extends$1({
     as: "button"
   }, forwardedProps, buttonProps, {
@@ -9030,9 +9289,9 @@ const LinkButton = /*#__PURE__*/forwardRef((props, ref) => {
     ref: buttonRef
   }), children);
 });
-LinkButton.className = CLASSNAME$3;
-LinkButton.defaultProps = DEFAULT_PROPS$3;
-LinkButton.displayName = COMPONENT_NAME$3;
+LinkButton.className = CLASSNAME$5;
+LinkButton.defaultProps = DEFAULT_PROPS$5;
+LinkButton.displayName = COMPONENT_NAME$5;
 
 /**
  * Component style.
@@ -9041,10 +9300,10 @@ const StyledNumber = styled(StyledText)`
   font-family: var(--redsift-typography-font-family-source-code-pro);
 `;
 
-const _excluded$2 = ["as", "className", "color", "compactDisplay", "currency", "currencyDisplay", "currencySign", "fontSize", "localeMatcher", "maximumFractionDigits", "maximumSignificantDigits", "minimumFractionDigits", "minimumIntegerDigits", "minimumSignificantDigits", "notation", "noWrap", "numberingSystem", "roundingIncrement", "roundingMode", "roundingPriority", "signDisplay", "trailingZeroDisplay", "type", "unit", "unitDisplay", "useGrouping", "value", "variant"];
-const COMPONENT_NAME$2 = 'Number';
-const CLASSNAME$2 = 'redsift-number';
-const DEFAULT_PROPS$2 = {
+const _excluded$4 = ["as", "className", "color", "compactDisplay", "currency", "currencyDisplay", "currencySign", "fontSize", "lineHeight", "localeMatcher", "maximumFractionDigits", "maximumSignificantDigits", "minimumFractionDigits", "minimumIntegerDigits", "minimumSignificantDigits", "notation", "noWrap", "numberingSystem", "roundingIncrement", "roundingMode", "roundingPriority", "signDisplay", "trailingZeroDisplay", "type", "unit", "unitDisplay", "useGrouping", "value", "variant"];
+const COMPONENT_NAME$4 = 'Number';
+const CLASSNAME$4 = 'redsift-number';
+const DEFAULT_PROPS$4 = {
   compactDisplay: 'short',
   currencyDisplay: 'symbol',
   currencySign: 'standard',
@@ -9075,6 +9334,7 @@ const Number$1 = /*#__PURE__*/forwardRef((props, ref) => {
       currencyDisplay,
       currencySign,
       fontSize,
+      lineHeight,
       localeMatcher,
       maximumFractionDigits,
       maximumSignificantDigits,
@@ -9096,7 +9356,7 @@ const Number$1 = /*#__PURE__*/forwardRef((props, ref) => {
       value,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$2);
+    forwardedProps = _objectWithoutProperties(props, _excluded$4);
   const formatter = useNumberFormatter({
     compactDisplay,
     currency,
@@ -9131,14 +9391,15 @@ const Number$1 = /*#__PURE__*/forwardRef((props, ref) => {
     className: classNames(Number$1.className, className),
     ref: ref,
     $color: color,
+    $lineHeight: lineHeight,
     $fontSize: fontSize,
     $noWrap: noWrap,
     $variant: variant
   }), formatter.format(value));
 });
-Number$1.className = CLASSNAME$2;
-Number$1.defaultProps = DEFAULT_PROPS$2;
-Number$1.displayName = COMPONENT_NAME$2;
+Number$1.className = CLASSNAME$4;
+Number$1.defaultProps = DEFAULT_PROPS$4;
+Number$1.displayName = COMPONENT_NAME$4;
 
 /**
  * Context props.
@@ -9232,10 +9493,10 @@ const StyledRadioGroup = styled.div`
   }
 `;
 
-const _excluded$1 = ["children", "className", "defaultValue", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "possibleValues", "value"];
-const COMPONENT_NAME$1 = 'RadioGroup';
-const CLASSNAME$1 = 'redsift-radio-group';
-const DEFAULT_PROPS$1 = {
+const _excluded$3 = ["children", "className", "defaultValue", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "possibleValues", "value"];
+const COMPONENT_NAME$3 = 'RadioGroup';
+const CLASSNAME$3 = 'redsift-radio-group';
+const DEFAULT_PROPS$3 = {
   color: ColorPalette.default,
   orientation: RadioGroupOrientation.vertical
 };
@@ -9260,7 +9521,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
       possibleValues,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1);
+    forwardedProps = _objectWithoutProperties(props, _excluded$3);
   const [selectedValue, setValue] = useState(value || defaultValue || '');
   useEffect(() => {
     if (value) {
@@ -9302,14 +9563,15 @@ const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${RadioGroup.className}-description`
   }, description));
 });
-RadioGroup.className = CLASSNAME$1;
-RadioGroup.defaultProps = DEFAULT_PROPS$1;
-RadioGroup.displayName = COMPONENT_NAME$1;
+RadioGroup.className = CLASSNAME$3;
+RadioGroup.defaultProps = DEFAULT_PROPS$3;
+RadioGroup.displayName = COMPONENT_NAME$3;
 
 /**
  * Component style.
  */
 const StyledRadio = styled.label`
+  height: fit-content;
   position: relative;
   width: fit-content;
   ${baseStyling}
@@ -9381,7 +9643,7 @@ const StyledRadio = styled.label`
             );
           `}
 
-      ${$isFocusVisible ? css`
+      ${$isFocusVisible && !$isDisabled ? css`
             background-color: var(
               --redsift-color-${$isColored ? 'default' : 'question'}-hover
             );
@@ -9410,27 +9672,12 @@ const StyledRadio = styled.label`
           ` : '';
 }}
   }
-
-  ${_ref4 => {
-  let {
-    $isColored,
-    $isFocusVisible
-  } = _ref4;
-  return $isFocusVisible ? css`
-          .redsift-icon {
-            background-color: var(
-              --redsift-color-${$isColored ? 'default' : 'question'}-hover
-            );
-            border-radius: 21px;
-          }
-        ` : '';
-}}
 `;
 
-const _excluded = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
-const COMPONENT_NAME = 'Radio';
-const CLASSNAME = 'redsift-radio';
-const DEFAULT_PROPS = {
+const _excluded$2 = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
+const COMPONENT_NAME$2 = 'Radio';
+const CLASSNAME$2 = 'redsift-radio';
+const DEFAULT_PROPS$2 = {
   isColored: true
 };
 
@@ -9461,7 +9708,7 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
       onChange,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+    forwardedProps = _objectWithoutProperties(props, _excluded$2);
   const {
     isFocusVisible,
     focusProps
@@ -9535,9 +9782,469 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
     className: "label"
   }, children) : null);
 });
-Radio.className = CLASSNAME;
-Radio.defaultProps = DEFAULT_PROPS;
-Radio.displayName = COMPONENT_NAME;
+Radio.className = CLASSNAME$2;
+Radio.defaultProps = DEFAULT_PROPS$2;
+Radio.displayName = COMPONENT_NAME$2;
+
+const SwitchGroupContext = /*#__PURE__*/React__default.createContext(null);
+
+/**
+ * Component style.
+ */
+const StyledSwitch = styled.label`
+  height: fit-content;
+  position: relative;
+  width: fit-content;
+  ${baseStyling}
+
+  align-items: baseline;
+  background: none;
+  border: none;
+  display: inline-flex;
+  margin: 4px;
+
+  input {
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    overflow: visible;
+    padding: 0;
+    position: absolute;
+    width: 100%;
+  }
+
+  span.label {
+    ${_ref => {
+  let {
+    $isDisabled,
+    $isInvalid
+  } = _ref;
+  return $isDisabled ? css`
+            color: var(--redsift-color-neutral-midgrey);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-error-primary);
+          ` : css`
+            color: var(--redsift-color-neutral-black);
+          `;
+}}
+
+    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);
+    padding-inline-start: 4px;
+    padding-inline-end: 16px;
+    position: relative;
+    top: -5px;
+  }
+
+  .redsift-switch__slide {
+    height: 20px;
+    position: relative;
+    min-width: 40px;
+  }
+
+  .redsift-switch-slide__inner {
+    background-color: var(--redsift-color-neutral-midgrey);
+    border-radius: 10px;
+    height: 16px;
+    position: absolute;
+    top: calc(50% - 16px / 2);
+    width: 32px;
+    z-index: 2;
+  }
+
+  .redsift-switch-slide__knob-wrapper {
+    border-radius: 50%;
+    height: 32px;
+    margin-inline-start: ${_ref2 => {
+  let {
+    $isSelected
+  } = _ref2;
+  return !$isSelected ? '-10px' : '10px';
+}};
+    position: absolute;
+    top: -6px;
+    width: 32px;
+    z-index: 3;
+  }
+
+  .redsift-switch-slide-knob-wrapper__elevation {
+    background-color: var(--redsift-color-neutral-xlightgrey);
+    border-radius: 50%;
+    height: 32px;
+    opacity: 0;
+    position: absolute;
+    width: 32px;
+    z-index: 3;
+  }
+
+  .redsift-switch-slide-knob-wrapper__knob {
+    background-color: var(--redsift-color-neutral-xlightgrey);
+    border-radius: 50%;
+    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+      0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12);
+    height: 20px;
+    left: 6px;
+    position: absolute;
+    top: 6px;
+    width: 20px;
+  }
+
+  .redsift-switch-slide__inner {
+    ${_ref3 => {
+  let {
+    $isColored,
+    $isDisabled,
+    $isInvalid,
+    $isSelected
+  } = _ref3;
+  return css`
+      ${$isSelected && $isDisabled ? css`
+            background-color: var(
+              --redsift-color-${$isInvalid ? 'error' : $isColored ? 'default' : 'no-data'}-active
+            );
+          ` : $isSelected ? css`
+            background-color: var(
+              --redsift-color-${$isInvalid ? 'error' : $isColored ? 'default' : 'no-data'}-primary
+            );
+          ` : !$isSelected && $isDisabled ? css`
+            background-color: var(--redsift-color-neutral-lightgrey);
+          ` : css`
+            background-color: var(--redsift-color-neutral-midgrey);
+          `}
+    `;
+}}
+  }
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+    cursor: pointer;
+
+    ${_ref4 => {
+  let {
+    $isDisabled
+  } = _ref4;
+  return !$isDisabled ? css`
+            .redsift-switch-slide-knob-wrapper__elevation {
+              opacity: 0.5;
+            }
+          ` : '';
+}}
+  }
+
+  ${_ref5 => {
+  let {
+    $isDisabled,
+    $isFocusVisible
+  } = _ref5;
+  return $isFocusVisible && !$isDisabled ? css`
+          .redsift-switch-slide-knob-wrapper__elevation {
+            opacity: 0.5;
+          }
+        ` : '';
+}}
+`;
+
+const _excluded$1 = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
+const COMPONENT_NAME$1 = 'Switch';
+const CLASSNAME$1 = 'redsift-switch';
+const DEFAULT_PROPS$1 = {
+  isColored: true
+};
+
+/**
+ * The Switch component.
+ * Works both inside a SwitchGroup or as standalone.
+ * Can be used as controlled or uncontrolled.
+ */
+const Switch = /*#__PURE__*/forwardRef((props, ref) => {
+  var _isDisabled, _isReadOnly, _ref;
+  const groupState = useContext(SwitchGroupContext);
+  let {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      autoFocus,
+      children,
+      className,
+      defaultSelected,
+      inputProps,
+      inputRef,
+      isColored,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      isSelected: propsIsSelected,
+      name,
+      onChange,
+      value
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$1);
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing({
+    autoFocus
+  });
+  isDisabled = (_isDisabled = isDisabled) !== null && _isDisabled !== void 0 ? _isDisabled : groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled;
+  isReadOnly = (_isReadOnly = isReadOnly) !== null && _isReadOnly !== void 0 ? _isReadOnly : groupState === null || groupState === void 0 ? void 0 : groupState.isReadOnly;
+  const [isSelected, setSelected] = useState((_ref = propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected) !== null && _ref !== void 0 ? _ref : groupState === null || groupState === void 0 ? void 0 : groupState.value.includes(value));
+  useEffect(() => {
+    setSelected(propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected);
+  }, [propsIsSelected, defaultSelected]);
+  useEffect(() => {
+    if (groupState) {
+      setSelected(groupState.value.includes(value));
+    }
+  }, [groupState === null || groupState === void 0 ? void 0 : groupState.value]);
+  warnIfNoAccessibleLabelFound(props, [children]);
+  if (groupState) {
+    if (propsIsSelected != null) {
+      console.warn('isSelected is unsupported on individual <Switch> elements within a <SwitchGroup> unless the <Switch> is controlled. Please apply this prop to the group instead or pass isControlled to the component.');
+    }
+    if (defaultSelected != null) {
+      console.warn('defaultSelected is unsupported on individual <Switch> elements within a <SwitchGroup> unless the <Switch> is controlled. Please apply this prop to the group instead or pass isControlled to the component.');
+    }
+    if (props.value == null) {
+      console.warn('A <Switch> element within a <SwitchGroup> requires a `value` property unless the <Switch> is controlled.');
+    }
+  }
+  const handleChange = useCallback(event => {
+    if (isDisabled || isReadOnly) {
+      return;
+    }
+    if (groupState) {
+      if (!groupState.value.includes(value)) {
+        groupState.addValue(value);
+      } else {
+        groupState.removeValue(value);
+      }
+    }
+    if (onChange) {
+      onChange(!isSelected, value, name, event, groupState);
+    }
+    setSelected(event.target.checked);
+  }, [onChange, groupState]);
+  return /*#__PURE__*/React__default.createElement(StyledSwitch, _extends$1({}, forwardedProps, {
+    $isColored: isColored,
+    $isDisabled: isDisabled,
+    $isFocusVisible: isFocusVisible,
+    $isInvalid: isInvalid || isRequired && !isSelected,
+    $isRequired: isRequired,
+    $isSelected: isSelected,
+    className: classNames(Switch.className, className),
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("input", _extends$1({}, inputProps, focusProps, {
+    "aria-checked": isSelected ? 'true' : 'false',
+    "aria-disabled": isDisabled,
+    "aria-invalid": isInvalid || isRequired && !isSelected,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-readonly": isReadOnly,
+    "aria-required": isRequired,
+    checked: isSelected ? true : false,
+    disabled: isDisabled,
+    name: name,
+    onChange: handleChange,
+    ref: inputRef,
+    role: "switch",
+    type: "checkbox",
+    value: value
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: `${Switch.className}__slide`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${Switch.className}-slide__inner`
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${Switch.className}-slide__knob-wrapper`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${Switch.className}-slide-knob-wrapper__elevation`
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${Switch.className}-slide-knob-wrapper__knob`
+  }))), children ? /*#__PURE__*/React__default.createElement("span", {
+    className: "label"
+  }, children) : null);
+});
+Switch.className = CLASSNAME$1;
+Switch.defaultProps = DEFAULT_PROPS$1;
+Switch.displayName = COMPONENT_NAME$1;
+
+/**
+ * Context props.
+ */
+
+/**
+ * Component orientation.
+ */
+const SwitchGroupOrientation = {
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+};
+
+/**
+ * Component style.
+ */
+const StyledSwitchGroup = styled.div`
+  ${baseStyling}
+
+  display: flex;
+  flex-direction: column;
+
+  ${_ref => {
+  let {
+    $orientation
+  } = _ref;
+  return $orientation === SwitchGroupOrientation.vertical ? `
+    div.redsift-checkbox-group-boxes {
+      display: flex;
+      flex-direction: column;
+    }
+  ` : `
+    div.redsift-checkbox-group-boxes {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+  `;
+}}
+
+  span.redsift-checkbox-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);
+    line-height: var(--redsift-typography-body-line-height);
+
+    color: var(--redsift-color-neutral-black);
+    ${_ref2 => {
+  let {
+    $isDisabled
+  } = _ref2;
+  return $isDisabled ? `
+      color: var(--redsift-color-neutral-midgrey);
+    ` : '';
+}}
+    ${_ref3 => {
+  let {
+    $isInvalid
+  } = _ref3;
+  return $isInvalid ? `
+      color: var(--redsift-color-error-primary);
+    ` : '';
+}}
+  }
+
+  span.redsift-checkbox-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);
+    line-height: var(--redsift-typography-helper-line-height);
+
+    color: var(--redsift-color-neutral-darkgrey);
+    ${_ref4 => {
+  let {
+    $isDisabled
+  } = _ref4;
+  return $isDisabled ? `
+      color: var(--redsift-color-neutral-midgrey);
+    ` : '';
+}}
+    ${_ref5 => {
+  let {
+    $isInvalid
+  } = _ref5;
+  return $isInvalid ? `
+      color: var(--redsift-color-error-primary);
+    ` : '';
+}}
+  }
+`;
+
+const _excluded = ["children", "className", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "possibleValues", "value"];
+const COMPONENT_NAME = 'SwitchGroup';
+const CLASSNAME = 'redsift-checkbox-group';
+const DEFAULT_PROPS = {
+  color: ColorPalette.default,
+  orientation: SwitchGroupOrientation.vertical
+};
+
+/**
+ * The SwitchGroup component.
+ * Can be used as controlled or uncontrolled.
+ */
+const SwitchGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      defaultValues,
+      description,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      label,
+      onChange,
+      orientation,
+      possibleValues,
+      value
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const [selectedValues, setValue] = useState(value || defaultValues || []);
+  useEffect(() => {
+    if (value) {
+      state.setValue(value);
+    }
+  }, [value]);
+  const state = {
+    value: selectedValues,
+    isDisabled: isDisabled || false,
+    isReadOnly: isReadOnly || false,
+    possibleValues: possibleValues,
+    setValue(values) {
+      if (isReadOnly || isDisabled) {
+        return;
+      }
+      setValue(values);
+    },
+    addValue(value) {
+      if (!selectedValues.includes(value)) {
+        setValue(selectedValues.concat(value));
+        if (onChange) {
+          onChange(selectedValues.concat(value));
+        }
+      }
+    },
+    removeValue(value) {
+      if (selectedValues.includes(value)) {
+        setValue(selectedValues.filter(existingValue => existingValue !== value));
+        if (onChange) {
+          onChange(selectedValues.filter(existingValue => existingValue !== value));
+        }
+      }
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(StyledSwitchGroup, _extends$1({}, forwardedProps, {
+    $isDisabled: isDisabled,
+    $isInvalid: isInvalid || isRequired && selectedValues.length === 0,
+    $isReadOnly: isReadOnly,
+    $orientation: orientation,
+    "aria-disabled": isDisabled,
+    className: classNames(SwitchGroup.className, className),
+    ref: ref,
+    role: "group"
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: `${SwitchGroup.className}-label`
+  }, label, isRequired ? ' *' : null), /*#__PURE__*/React__default.createElement("div", {
+    className: `${SwitchGroup.className}-boxes`
+  }, /*#__PURE__*/React__default.createElement(SwitchGroupContext.Provider, {
+    value: state
+  }, children)), /*#__PURE__*/React__default.createElement("span", {
+    className: `${SwitchGroup.className}-description`
+  }, description));
+});
+SwitchGroup.className = CLASSNAME;
+SwitchGroup.defaultProps = DEFAULT_PROPS;
+SwitchGroup.displayName = COMPONENT_NAME;
 
-export { Alert, AlertVariant, AlignContent, AlignItems, AlignSelf, AppBar, AppContainer, AppContainerContext, AppContent, AppSidePanel, Badge, BadgeVariant, BaseBreadcrumbs, BaseGrid, BreadcrumbItem, Breadcrumbs, Button, ButtonLink, ButtonVariant, Card, CardActions, CardBody, CardHeader, Checkbox, CheckboxGroup, CheckboxGroupOrientation, ColorPalette, ConditionalWrapper, DataVizColorPalette, DetailedCard, DetailedCardCollapsibleSectionItems, DetailedCardHeader, DetailedCardSection, DetailedCardSectionItem, FlexDirection, FlexWrap, Flexbox, FontFamily, Grid, GridItem, Heading, HeadingComponent, HeadingVariant, Icon, IconButton, IconButtonVariant, IconSize, JustifyContent, JustifyItems, JustifySelf, Link, LinkButton, NeutralColorPalette, Number$1 as Number, Pill, ProductColorPalette, Radio, RadioGroup, RadioGroupOrientation, RedsiftAppBarColorBackground, RedsiftAppBarColorExpandIconBackgroundHover, RedsiftAppBarColorExpandIconHover, RedsiftAppBarColorExpandIconResting, RedsiftAppBarColorText, RedsiftColorDefaultActive, RedsiftColorDefaultActiveHover, RedsiftColorDefaultHover, RedsiftColorDefaultPrimary, RedsiftColorDefaultPrimaryActive, RedsiftColorDefaultPrimaryActiveHover, RedsiftColorDefaultSecondary, RedsiftColorErrorActive, RedsiftColorErrorActiveHover, RedsiftColorErrorHover, RedsiftColorErrorPrimary, RedsiftColorErrorPrimaryActive, RedsiftColorErrorPrimaryActiveHover, RedsiftColorErrorSecondary, RedsiftColorHardenizeActive, RedsiftColorHardenizeActiveHover, RedsiftColorHardenizeHover, RedsiftColorHardenizePrimary, RedsiftColorHardenizePrimaryActive, RedsiftColorHardenizePrimaryActiveHover, RedsiftColorHardenizeSecondary, RedsiftColorInfoActive, RedsiftColorInfoActiveHover, RedsiftColorInfoHover, RedsiftColorInfoPrimary, RedsiftColorInfoPrimaryActive, RedsiftColorInfoPrimaryActiveHover, RedsiftColorInfoSecondary, RedsiftColorNeutralBlack, RedsiftColorNeutralDarkgrey, RedsiftColorNeutralLightgrey, RedsiftColorNeutralMidgrey, RedsiftColorNeutralWhite, RedsiftColorNeutralXlightgrey, RedsiftColorNoDataActive, RedsiftColorNoDataActiveHover, RedsiftColorNoDataHover, RedsiftColorNoDataPrimary, RedsiftColorNoDataPrimaryActive, RedsiftColorNoDataPrimaryActiveHover, RedsiftColorNoDataSecondary, RedsiftColorOndmarcActive, RedsiftColorOndmarcActiveHover, RedsiftColorOndmarcHover, RedsiftColorOndmarcPrimary, RedsiftColorOndmarcPrimaryActive, RedsiftColorOndmarcPrimaryActiveHover, RedsiftColorOndmarcSecondary, RedsiftColorOndomainActive, RedsiftColorOndomainActiveHover, RedsiftColorOndomainHover, RedsiftColorOndomainPrimary, RedsiftColorOndomainPrimaryActive, RedsiftColorOndomainPrimaryActiveHover, RedsiftColorOndomainSecondary, RedsiftColorOninboxActive, RedsiftColorOninboxActiveHover, RedsiftColorOninboxHover, RedsiftColorOninboxPrimary, RedsiftColorOninboxPrimaryActive, RedsiftColorOninboxPrimaryActiveHover, RedsiftColorOninboxSecondary, RedsiftColorQuestionActive, RedsiftColorQuestionActiveHover, RedsiftColorQuestionHover, RedsiftColorQuestionPrimary, RedsiftColorQuestionPrimaryActive, RedsiftColorQuestionPrimaryActiveHover, RedsiftColorQuestionSecondary, RedsiftColorSuccessActive, RedsiftColorSuccessActiveHover, RedsiftColorSuccessHover, RedsiftColorSuccessPrimary, RedsiftColorSuccessPrimaryActive, RedsiftColorSuccessPrimaryActiveHover, RedsiftColorSuccessSecondary, RedsiftColorToolsActive, RedsiftColorToolsActiveHover, RedsiftColorToolsHover, RedsiftColorToolsPrimary, RedsiftColorToolsPrimaryActive, RedsiftColorToolsPrimaryActiveHover, RedsiftColorToolsSecondary, RedsiftColorWarningActive, RedsiftColorWarningActiveHover, RedsiftColorWarningHover, RedsiftColorWarningPrimary, RedsiftColorWarningPrimaryActive, RedsiftColorWarningPrimaryActiveHover, RedsiftColorWarningSecondary, RedsiftColorWebsiteActive, RedsiftColorWebsiteActiveHover, RedsiftColorWebsiteHover, RedsiftColorWebsitePrimary, RedsiftColorWebsitePrimaryActive, RedsiftColorWebsitePrimaryActiveHover, RedsiftColorWebsiteSecondary, RedsiftDataVizColorBlueDark, RedsiftDataVizColorBlueDarker, RedsiftDataVizColorBlueDefault, RedsiftDataVizColorBlueLight, RedsiftDataVizColorBlueLighter, RedsiftDataVizColorBrownDark, RedsiftDataVizColorBrownDarker, RedsiftDataVizColorBrownDefault, RedsiftDataVizColorBrownLight, RedsiftDataVizColorBrownLighter, RedsiftDataVizColorCyanDark, RedsiftDataVizColorCyanDarker, RedsiftDataVizColorCyanDefault, RedsiftDataVizColorCyanLight, RedsiftDataVizColorCyanLighter, RedsiftDataVizColorGreenDark, RedsiftDataVizColorGreenDarker, RedsiftDataVizColorGreenDefault, RedsiftDataVizColorGreenLight, RedsiftDataVizColorGreenLighter, RedsiftDataVizColorGreyDark, RedsiftDataVizColorGreyDarker, RedsiftDataVizColorGreyDefault, RedsiftDataVizColorGreyLight, RedsiftDataVizColorGreyLighter, RedsiftDataVizColorOrangeDark, RedsiftDataVizColorOrangeDarker, RedsiftDataVizColorOrangeDefault, RedsiftDataVizColorOrangeLight, RedsiftDataVizColorOrangeLighter, RedsiftDataVizColorPinkDark, RedsiftDataVizColorPinkDarker, RedsiftDataVizColorPinkDefault, RedsiftDataVizColorPinkLight, RedsiftDataVizColorPinkLighter, RedsiftDataVizColorPurpleDark, RedsiftDataVizColorPurpleDarker, RedsiftDataVizColorPurpleDefault, RedsiftDataVizColorPurpleLight, RedsiftDataVizColorPurpleLighter, RedsiftDataVizColorRedDark, RedsiftDataVizColorRedDarker, RedsiftDataVizColorRedDefault, RedsiftDataVizColorRedLight, RedsiftDataVizColorRedLighter, RedsiftDataVizColorYellowDark, RedsiftDataVizColorYellowDarker, RedsiftDataVizColorYellowDefault, RedsiftDataVizColorYellowLight, RedsiftDataVizColorYellowLighter, RedsiftLayoutZIndexDialog, RedsiftLayoutZIndexDropdown, RedsiftLayoutZIndexFooter, RedsiftLayoutZIndexHeader, RedsiftLayoutZIndexOverlay, RedsiftLayoutZIndexPopover, RedsiftLayoutZIndexSidePanel, RedsiftLayoutZIndexTooltip, RedsiftSideNavigationColorBackground, RedsiftSideNavigationColorMenuItemActive, RedsiftSideNavigationColorMenuItemBackgroundActive, RedsiftSideNavigationColorMenuItemBackgroundHover, RedsiftSideNavigationColorMenuItemBackgroundSecondary, RedsiftSideNavigationColorMenuItemTextDisabled, RedsiftSideNavigationColorMenuItemTextHover, RedsiftSideNavigationColorMenuItemTextResting, RedsiftSideNavigationColorScrollbarHover, RedsiftSideNavigationColorScrollbarResting, RedsiftTypographyBadgeFontFamily, RedsiftTypographyBadgeFontSize, RedsiftTypographyBadgeFontWeight, RedsiftTypographyBadgeLineHeight, RedsiftTypographyBody2FontFamily, RedsiftTypographyBody2FontSize, RedsiftTypographyBody2FontWeight, RedsiftTypographyBody2LineHeight, RedsiftTypographyBodyFontFamily, RedsiftTypographyBodyFontSize, RedsiftTypographyBodyFontWeight, RedsiftTypographyBodyLineHeight, RedsiftTypographyBodyTextTransform, RedsiftTypographyButtonFontFamily, RedsiftTypographyButtonFontSize, RedsiftTypographyButtonFontWeight, RedsiftTypographyButtonLineHeight, RedsiftTypographyButtonTextTransform, RedsiftTypographyCaptionFontFamily, RedsiftTypographyCaptionFontSize, RedsiftTypographyCaptionFontWeight, RedsiftTypographyCaptionLineHeight, RedsiftTypographyCaptionTextTransform, RedsiftTypographyChipFontFamily, RedsiftTypographyChipFontSize, RedsiftTypographyChipFontWeight, RedsiftTypographyChipLineHeight, RedsiftTypographyFontFamilyElectrolize, RedsiftTypographyFontFamilyRaleway, RedsiftTypographyFontFamilySourceCodePro, RedsiftTypographyFontWeightBold, RedsiftTypographyFontWeightMedium, RedsiftTypographyFontWeightRegular, RedsiftTypographyFontWeightSemiBold, RedsiftTypographyH1FontFamily, RedsiftTypographyH1FontSize, RedsiftTypographyH1FontWeight, RedsiftTypographyH1LineHeight, RedsiftTypographyH1TextTransform, RedsiftTypographyH2FontFamily, RedsiftTypographyH2FontSize, RedsiftTypographyH2FontWeight, RedsiftTypographyH2LineHeight, RedsiftTypographyH2TextTransform, RedsiftTypographyH3FontFamily, RedsiftTypographyH3FontSize, RedsiftTypographyH3FontWeight, RedsiftTypographyH3LineHeight, RedsiftTypographyH3TextTransform, RedsiftTypographyH4FontFamily, RedsiftTypographyH4FontSize, RedsiftTypographyH4FontWeight, RedsiftTypographyH4LineHeight, RedsiftTypographyH4TextTransform, RedsiftTypographyH5FontFamily, RedsiftTypographyH5FontSize, RedsiftTypographyH5FontWeight, RedsiftTypographyH5LineHeight, RedsiftTypographyH5TextTransform, RedsiftTypographyHelperFontFamily, RedsiftTypographyHelperFontSize, RedsiftTypographyHelperFontWeight, RedsiftTypographyHelperLineHeight, RedsiftTypographyInputTextFontFamily, RedsiftTypographyInputTextFontSize, RedsiftTypographyInputTextFontWeight, RedsiftTypographyInputTextLineHeight, RedsiftTypographyLinkFontFamily, RedsiftTypographyLinkFontSize, RedsiftTypographyLinkFontWeight, RedsiftTypographyLinkLineHeight, RedsiftTypographyPillFontFamily, RedsiftTypographyPillFontSize, RedsiftTypographyPillFontWeight, RedsiftTypographyPillLineHeight, RedsiftTypographySubtitleFontFamily, RedsiftTypographySubtitleFontSize, RedsiftTypographySubtitleFontWeight, RedsiftTypographySubtitleLineHeight, RedsiftTypographySubtitleTextTransform, RedsiftTypographyTooltipFontFamily, RedsiftTypographyTooltipFontSize, RedsiftTypographyTooltipFontWeight, RedsiftTypographyTooltipLineHeight, Shield, ShieldVariant, SideNavigationMenu, SideNavigationMenuBar, SideNavigationMenuItem, SideNavigationMenuReducerActionType, Spinner, SpinnerSize, StyledButton, StyledLink, Text, TextComponent, TextVariant, filterComponents, isComponent, partitionComponents, useAppSidePanel, useSideNavigationMenuBar, useWindowSize, warnIfNoAccessibleLabelFound };
+export { Alert, AlertVariant, AlignContent, AlignItems, AlignSelf, AppBar, AppContainer, AppContainerContext, AppContent, AppSidePanel, Badge, BadgeVariant, BaseBreadcrumbs, BaseGrid, BaseSkeleton, BreadcrumbItem, Breadcrumbs, Button, ButtonLink, ButtonVariant, Card, CardActions, CardBody, CardHeader, Checkbox, CheckboxGroup, CheckboxGroupOrientation, ColorPalette, ConditionalWrapper, DataVizColorPalette, DetailedCard, DetailedCardCollapsibleSectionItems, DetailedCardHeader, DetailedCardSection, DetailedCardSectionItem, FlexDirection, FlexWrap, Flexbox, FontFamily, Grid, GridItem, Heading, HeadingComponent, HeadingVariant, Icon, IconButton, IconButtonVariant, IconSize, JustifyContent, JustifyItems, JustifySelf, Link, LinkButton, NeutralColorPalette, Number$1 as Number, Pill, ProductColorPalette, Radio, RadioGroup, RadioGroupOrientation, RedsiftAppBarColorBackground, RedsiftAppBarColorExpandIconBackgroundHover, RedsiftAppBarColorExpandIconHover, RedsiftAppBarColorExpandIconResting, RedsiftAppBarColorText, RedsiftColorDefaultActive, RedsiftColorDefaultActiveHover, RedsiftColorDefaultHover, RedsiftColorDefaultPrimary, RedsiftColorDefaultPrimaryActive, RedsiftColorDefaultPrimaryActiveHover, RedsiftColorDefaultSecondary, RedsiftColorErrorActive, RedsiftColorErrorActiveHover, RedsiftColorErrorHover, RedsiftColorErrorPrimary, RedsiftColorErrorPrimaryActive, RedsiftColorErrorPrimaryActiveHover, RedsiftColorErrorSecondary, RedsiftColorHardenizeActive, RedsiftColorHardenizeActiveHover, RedsiftColorHardenizeHover, RedsiftColorHardenizePrimary, RedsiftColorHardenizePrimaryActive, RedsiftColorHardenizePrimaryActiveHover, RedsiftColorHardenizeSecondary, RedsiftColorInfoActive, RedsiftColorInfoActiveHover, RedsiftColorInfoHover, RedsiftColorInfoPrimary, RedsiftColorInfoPrimaryActive, RedsiftColorInfoPrimaryActiveHover, RedsiftColorInfoSecondary, RedsiftColorNeutralBlack, RedsiftColorNeutralDarkgrey, RedsiftColorNeutralLightgrey, RedsiftColorNeutralMidgrey, RedsiftColorNeutralWhite, RedsiftColorNeutralXlightgrey, RedsiftColorNoDataActive, RedsiftColorNoDataActiveHover, RedsiftColorNoDataHover, RedsiftColorNoDataPrimary, RedsiftColorNoDataPrimaryActive, RedsiftColorNoDataPrimaryActiveHover, RedsiftColorNoDataSecondary, RedsiftColorOndmarcActive, RedsiftColorOndmarcActiveHover, RedsiftColorOndmarcHover, RedsiftColorOndmarcPrimary, RedsiftColorOndmarcPrimaryActive, RedsiftColorOndmarcPrimaryActiveHover, RedsiftColorOndmarcSecondary, RedsiftColorOndomainActive, RedsiftColorOndomainActiveHover, RedsiftColorOndomainHover, RedsiftColorOndomainPrimary, RedsiftColorOndomainPrimaryActive, RedsiftColorOndomainPrimaryActiveHover, RedsiftColorOndomainSecondary, RedsiftColorOninboxActive, RedsiftColorOninboxActiveHover, RedsiftColorOninboxHover, RedsiftColorOninboxPrimary, RedsiftColorOninboxPrimaryActive, RedsiftColorOninboxPrimaryActiveHover, RedsiftColorOninboxSecondary, RedsiftColorQuestionActive, RedsiftColorQuestionActiveHover, RedsiftColorQuestionHover, RedsiftColorQuestionPrimary, RedsiftColorQuestionPrimaryActive, RedsiftColorQuestionPrimaryActiveHover, RedsiftColorQuestionSecondary, RedsiftColorSuccessActive, RedsiftColorSuccessActiveHover, RedsiftColorSuccessHover, RedsiftColorSuccessPrimary, RedsiftColorSuccessPrimaryActive, RedsiftColorSuccessPrimaryActiveHover, RedsiftColorSuccessSecondary, RedsiftColorToolsActive, RedsiftColorToolsActiveHover, RedsiftColorToolsHover, RedsiftColorToolsPrimary, RedsiftColorToolsPrimaryActive, RedsiftColorToolsPrimaryActiveHover, RedsiftColorToolsSecondary, RedsiftColorWarningActive, RedsiftColorWarningActiveHover, RedsiftColorWarningHover, RedsiftColorWarningPrimary, RedsiftColorWarningPrimaryActive, RedsiftColorWarningPrimaryActiveHover, RedsiftColorWarningSecondary, RedsiftColorWebsiteActive, RedsiftColorWebsiteActiveHover, RedsiftColorWebsiteHover, RedsiftColorWebsitePrimary, RedsiftColorWebsitePrimaryActive, RedsiftColorWebsitePrimaryActiveHover, RedsiftColorWebsiteSecondary, RedsiftDataVizColorBlueDark, RedsiftDataVizColorBlueDarker, RedsiftDataVizColorBlueDefault, RedsiftDataVizColorBlueLight, RedsiftDataVizColorBlueLighter, RedsiftDataVizColorBrownDark, RedsiftDataVizColorBrownDarker, RedsiftDataVizColorBrownDefault, RedsiftDataVizColorBrownLight, RedsiftDataVizColorBrownLighter, RedsiftDataVizColorCyanDark, RedsiftDataVizColorCyanDarker, RedsiftDataVizColorCyanDefault, RedsiftDataVizColorCyanLight, RedsiftDataVizColorCyanLighter, RedsiftDataVizColorGreenDark, RedsiftDataVizColorGreenDarker, RedsiftDataVizColorGreenDefault, RedsiftDataVizColorGreenLight, RedsiftDataVizColorGreenLighter, RedsiftDataVizColorGreyDark, RedsiftDataVizColorGreyDarker, RedsiftDataVizColorGreyDefault, RedsiftDataVizColorGreyLight, RedsiftDataVizColorGreyLighter, RedsiftDataVizColorOrangeDark, RedsiftDataVizColorOrangeDarker, RedsiftDataVizColorOrangeDefault, RedsiftDataVizColorOrangeLight, RedsiftDataVizColorOrangeLighter, RedsiftDataVizColorPinkDark, RedsiftDataVizColorPinkDarker, RedsiftDataVizColorPinkDefault, RedsiftDataVizColorPinkLight, RedsiftDataVizColorPinkLighter, RedsiftDataVizColorPurpleDark, RedsiftDataVizColorPurpleDarker, RedsiftDataVizColorPurpleDefault, RedsiftDataVizColorPurpleLight, RedsiftDataVizColorPurpleLighter, RedsiftDataVizColorRedDark, RedsiftDataVizColorRedDarker, RedsiftDataVizColorRedDefault, RedsiftDataVizColorRedLight, RedsiftDataVizColorRedLighter, RedsiftDataVizColorYellowDark, RedsiftDataVizColorYellowDarker, RedsiftDataVizColorYellowDefault, RedsiftDataVizColorYellowLight, RedsiftDataVizColorYellowLighter, RedsiftLayoutZIndexDialog, RedsiftLayoutZIndexDropdown, RedsiftLayoutZIndexFooter, RedsiftLayoutZIndexHeader, RedsiftLayoutZIndexOverlay, RedsiftLayoutZIndexPopover, RedsiftLayoutZIndexSidePanel, RedsiftLayoutZIndexTooltip, RedsiftSideNavigationColorBackground, RedsiftSideNavigationColorMenuItemActive, RedsiftSideNavigationColorMenuItemBackgroundActive, RedsiftSideNavigationColorMenuItemBackgroundHover, RedsiftSideNavigationColorMenuItemBackgroundSecondary, RedsiftSideNavigationColorMenuItemTextDisabled, RedsiftSideNavigationColorMenuItemTextHover, RedsiftSideNavigationColorMenuItemTextResting, RedsiftSideNavigationColorScrollbarHover, RedsiftSideNavigationColorScrollbarResting, RedsiftTypographyBadgeFontFamily, RedsiftTypographyBadgeFontSize, RedsiftTypographyBadgeFontWeight, RedsiftTypographyBadgeLineHeight, RedsiftTypographyBody2FontFamily, RedsiftTypographyBody2FontSize, RedsiftTypographyBody2FontWeight, RedsiftTypographyBody2LineHeight, RedsiftTypographyBodyFontFamily, RedsiftTypographyBodyFontSize, RedsiftTypographyBodyFontWeight, RedsiftTypographyBodyLineHeight, RedsiftTypographyBodyTextTransform, RedsiftTypographyButtonFontFamily, RedsiftTypographyButtonFontSize, RedsiftTypographyButtonFontWeight, RedsiftTypographyButtonLineHeight, RedsiftTypographyButtonTextTransform, RedsiftTypographyCaptionFontFamily, RedsiftTypographyCaptionFontSize, RedsiftTypographyCaptionFontWeight, RedsiftTypographyCaptionLineHeight, RedsiftTypographyCaptionTextTransform, RedsiftTypographyChipFontFamily, RedsiftTypographyChipFontSize, RedsiftTypographyChipFontWeight, RedsiftTypographyChipLineHeight, RedsiftTypographyFontFamilyElectrolize, RedsiftTypographyFontFamilyRaleway, RedsiftTypographyFontFamilySourceCodePro, RedsiftTypographyFontWeightBold, RedsiftTypographyFontWeightMedium, RedsiftTypographyFontWeightRegular, RedsiftTypographyFontWeightSemiBold, RedsiftTypographyH1FontFamily, RedsiftTypographyH1FontSize, RedsiftTypographyH1FontWeight, RedsiftTypographyH1LineHeight, RedsiftTypographyH1TextTransform, RedsiftTypographyH2FontFamily, RedsiftTypographyH2FontSize, RedsiftTypographyH2FontWeight, RedsiftTypographyH2LineHeight, RedsiftTypographyH2TextTransform, RedsiftTypographyH3FontFamily, RedsiftTypographyH3FontSize, RedsiftTypographyH3FontWeight, RedsiftTypographyH3LineHeight, RedsiftTypographyH3TextTransform, RedsiftTypographyH4FontFamily, RedsiftTypographyH4FontSize, RedsiftTypographyH4FontWeight, RedsiftTypographyH4LineHeight, RedsiftTypographyH4TextTransform, RedsiftTypographyH5FontFamily, RedsiftTypographyH5FontSize, RedsiftTypographyH5FontWeight, RedsiftTypographyH5LineHeight, RedsiftTypographyH5TextTransform, RedsiftTypographyHelperFontFamily, RedsiftTypographyHelperFontSize, RedsiftTypographyHelperFontWeight, RedsiftTypographyHelperLineHeight, RedsiftTypographyInputTextFontFamily, RedsiftTypographyInputTextFontSize, RedsiftTypographyInputTextFontWeight, RedsiftTypographyInputTextLineHeight, RedsiftTypographyLinkFontFamily, RedsiftTypographyLinkFontSize, RedsiftTypographyLinkFontWeight, RedsiftTypographyLinkLineHeight, RedsiftTypographyPillFontFamily, RedsiftTypographyPillFontSize, RedsiftTypographyPillFontWeight, RedsiftTypographyPillLineHeight, RedsiftTypographySubtitleFontFamily, RedsiftTypographySubtitleFontSize, RedsiftTypographySubtitleFontWeight, RedsiftTypographySubtitleLineHeight, RedsiftTypographySubtitleTextTransform, RedsiftTypographyTooltipFontFamily, RedsiftTypographyTooltipFontSize, RedsiftTypographyTooltipFontWeight, RedsiftTypographyTooltipLineHeight, Shield, ShieldVariant, SideNavigationMenu, SideNavigationMenuBar, SideNavigationMenuItem, SideNavigationMenuReducerActionType, Skeleton, SkeletonCircle, SkeletonText, SkeletonTextVariant, Spinner, SpinnerSize, StyledButton, StyledLink, Switch, SwitchGroup, SwitchGroupOrientation, Text, TextComponent, TextVariant, filterComponents, isComponent, partitionComponents, useAppSidePanel, useSideNavigationMenuBar, useWindowSize, warnIfNoAccessibleLabelFound };
 //# sourceMappingURL=index.js.map