@redsift/design-system 7.5.0 → 7.6.0

package/index.js

@@ -1,11 +1,11 @@
-import { useLocalizedStringFormatter, I18nProvider, useNumberFormatter } from '@react-aria/i18n';
+import { I18nProvider, useLocalizedStringFormatter, useNumberFormatter } from '@react-aria/i18n';
 export { I18nProvider, useCollator, useDateFormatter, useFilter, useListFormatter, useLocale, useLocalizedStringFormatter, useNumberFormatter } from '@react-aria/i18n';
 export { SSRProvider, useIsSSR } from '@react-aria/ssr';
 import * as React from 'react';
-import React__default, { useState, useEffect, forwardRef, useRef, useCallback, useContext, useMemo, useReducer, useLayoutEffect, useId as useId$1 } from 'react';
+import React__default, { useState, useEffect, forwardRef, useMemo, useContext, useRef, useCallback, useReducer, useLayoutEffect, useId as useId$1 } from 'react';
 import classNames from 'classnames';
-import { mdiClose, mdiAlert, mdiCheckCircle, 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';
@@ -205,7 +205,7 @@ function partitionComponents(components, predicates) {
 
 /**
  * Do not edit directly
- * Generated on Tue, 21 Feb 2023 15:02:26 GMT
+ * Generated on Tue, 14 Mar 2023 15:14:37 GMT
  */
 
 const RedsiftColorDefaultPrimary = '#0079e1';
@@ -214,76 +214,91 @@ const RedsiftColorDefaultHover = '#dce8f3';
 const RedsiftColorDefaultActive = '#c4dcf1';
 const RedsiftColorDefaultActiveHover = '#abcfef';
 const RedsiftColorDefaultPrimaryActive = '#004a8a';
+const RedsiftColorDefaultPrimaryActiveHover = '#00427c';
 const RedsiftColorWebsitePrimary = '#0079e1';
 const RedsiftColorWebsiteSecondary = '#0063b9';
 const RedsiftColorWebsiteHover = '#dce8f3';
 const RedsiftColorWebsiteActive = '#c4dcf1';
 const RedsiftColorWebsiteActiveHover = '#abcfef';
 const RedsiftColorWebsitePrimaryActive = '#004a8a';
+const RedsiftColorWebsitePrimaryActiveHover = '#00427c';
 const RedsiftColorOndmarcPrimary = '#02ac61';
 const RedsiftColorOndmarcSecondary = '#009252';
 const RedsiftColorOndmarcHover = '#dcede6';
 const RedsiftColorOndmarcActive = '#c4e6d7';
 const RedsiftColorOndmarcActiveHover = '#acdfc8';
 const RedsiftColorOndmarcPrimaryActive = '#00512e';
+const RedsiftColorOndmarcPrimaryActiveHover = '#004829';
 const RedsiftColorOninboxPrimary = '#33b222';
 const RedsiftColorOninboxSecondary = '#268519';
 const RedsiftColorOninboxHover = '#e1eedf';
 const RedsiftColorOninboxActive = '#cee8cb';
 const RedsiftColorOninboxActiveHover = '#bae0b5';
 const RedsiftColorOninboxPrimaryActive = '#164e0e';
+const RedsiftColorOninboxPrimaryActiveHover = '#13460c';
 const RedsiftColorOndomainPrimary = '#028062';
 const RedsiftColorOndomainSecondary = '#015944';
 const RedsiftColorOndomainHover = '#dce9e6';
 const RedsiftColorOndomainActive = '#c4ded8';
 const RedsiftColorOndomainActiveHover = '#acd1c8';
 const RedsiftColorOndomainPrimaryActive = '#003f30';
+const RedsiftColorOndomainPrimaryActiveHover = '#00382b';
 const RedsiftColorHardenizePrimary = '#0f7ab3';
 const RedsiftColorHardenizeSecondary = '#3498db';
 const RedsiftColorHardenizeHover = '#dee8ee';
 const RedsiftColorHardenizeActive = '#c7dce8';
 const RedsiftColorHardenizeActiveHover = '#b0d0e1';
 const RedsiftColorHardenizePrimaryActive = '#0a5379';
+const RedsiftColorHardenizePrimaryActiveHover = '#094a6c';
 const RedsiftColorToolsPrimary = '#37bdfb';
 const RedsiftColorToolsSecondary = '#02a2ef';
 const RedsiftColorToolsHover = '#e2eff5';
 const RedsiftColorToolsActive = '#cfeaf6';
 const RedsiftColorToolsActiveHover = '#bce4f6';
 const RedsiftColorToolsPrimaryActive = '#237ea8';
+const RedsiftColorToolsPrimaryActiveHover = '#1f7197';
 const RedsiftColorSuccessPrimary = '#02ac61';
 const RedsiftColorSuccessSecondary = '#009252';
 const RedsiftColorSuccessHover = '#dcede6';
 const RedsiftColorSuccessActive = '#c4e6d7';
 const RedsiftColorSuccessActiveHover = '#acdfc8';
 const RedsiftColorSuccessPrimaryActive = '#00512e';
+const RedsiftColorSuccessPrimaryActiveHover = '#004829';
 const RedsiftColorErrorPrimary = '#e11010';
 const RedsiftColorErrorSecondary = '#b41010';
 const RedsiftColorErrorHover = '#f3dede';
 const RedsiftColorErrorActive = '#f1c7c7';
 const RedsiftColorErrorActiveHover = '#efb0b0';
 const RedsiftColorErrorPrimaryActive = '#770a0a';
+const RedsiftColorErrorPrimaryActiveHover = '#6b0909';
 const RedsiftColorWarningPrimary = '#fcbb54';
 const RedsiftColorWarningSecondary = '#c09300';
 const RedsiftColorWarningHover = '#f5efe4';
 const RedsiftColorWarningActive = '#f6e9d5';
 const RedsiftColorWarningActiveHover = '#f7e3c4';
 const RedsiftColorWarningPrimaryActive = '#ae833f';
+const RedsiftColorWarningPrimaryActiveHover = '#9c7538';
 const RedsiftColorInfoPrimary = '#0079e1';
 const RedsiftColorInfoSecondary = '#0063b9';
 const RedsiftColorInfoHover = '#dce8f3';
 const RedsiftColorInfoActive = '#c4dcf1';
 const RedsiftColorInfoActiveHover = '#abcfef';
 const RedsiftColorInfoPrimaryActive = '#004a8a';
+const RedsiftColorInfoPrimaryActiveHover = '#00427c';
 const RedsiftColorQuestionPrimary = '#666666';
 const RedsiftColorQuestionSecondary = '#1c1c1c';
 const RedsiftColorQuestionHover = '#e6e6e6';
 const RedsiftColorQuestionActive = '#d8d8d8';
 const RedsiftColorQuestionActiveHover = '#cacaca';
+const RedsiftColorQuestionPrimaryActive = '#111111';
+const RedsiftColorQuestionPrimaryActiveHover = '#0f0f0f';
 const RedsiftColorNoDataPrimary = '#bdbdbd';
 const RedsiftColorNoDataSecondary = '#666666';
 const RedsiftColorNoDataHover = '#efefef';
 const RedsiftColorNoDataActive = '#eaeaea';
 const RedsiftColorNoDataActiveHover = '#e4e4e4';
+const RedsiftColorNoDataPrimaryActive = '#3d3d3d';
+const RedsiftColorNoDataPrimaryActiveHover = '#363636';
 const RedsiftColorNeutralBlack = '#1c1c1c';
 const RedsiftColorNeutralDarkgrey = '#666666';
 const RedsiftColorNeutralMidgrey = '#bdbdbd';
@@ -355,6 +370,14 @@ const RedsiftSideNavigationColorMenuItemBackgroundActive = '#39394C';
 const RedsiftSideNavigationColorMenuItemActive = '#02AC61';
 const RedsiftSideNavigationColorScrollbarResting = '#4C4C64';
 const RedsiftSideNavigationColorScrollbarHover = '#5d5d73';
+const RedsiftLayoutZIndexFooter = '1000';
+const RedsiftLayoutZIndexHeader = '1010';
+const RedsiftLayoutZIndexSidePanel = '1050';
+const RedsiftLayoutZIndexDropdown = '1100';
+const RedsiftLayoutZIndexOverlay = '1150';
+const RedsiftLayoutZIndexDialog = '1200';
+const RedsiftLayoutZIndexPopover = '1250';
+const RedsiftLayoutZIndexTooltip = '1300';
 const RedsiftTypographyFontFamilyRaleway = "'Raleway', sans-serif";
 const RedsiftTypographyFontFamilyElectrolize = "'electrolize', sans-serif";
 const RedsiftTypographyFontFamilySourceCodePro = "'Source Code Pro', sans-serif";
@@ -652,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};` : ''}
@@ -715,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};` : ''}
     `;
 }}
 `;
@@ -951,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
 };
 
@@ -972,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,
@@ -994,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.
@@ -1090,7 +1113,7 @@ const StyledButton = styled.button`
               color: ${$isDisabled ? 'var(--redsift-color-neutral-midgrey)' : `var(--redsift-color-${$color}-secondary)`};
             }
           ` : css`
-            background-color: ${$isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : `var(--redsift-color-${$color}-secondary)`};
+            background-color: ${$isActive ? `var(--redsift-color-${$color}-primary-active-hover)` : $isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : `var(--redsift-color-${$color}-secondary)`};
             &,
             .redsift-icon {
               color: ${$isDisabled ? 'var(--redsift-color-neutral-midgrey)' : 'var(--redsift-color-neutral-white)'};
@@ -1159,6 +1182,105 @@ const StyledSpinner = styled.img`
   vertical-align: -0.125em;
 `;
 
+const AppContainerContext = /*#__PURE__*/React__default.createContext(null);
+
+/**
+ * Component style.
+ */
+const StyledAppContainer = styled.div`
+  overflow: hidden;
+
+  ${_ref => {
+  let {
+    $productTheme
+  } = _ref;
+  return $productTheme && Object.keys(ProductColorPalette).indexOf($productTheme) !== -1 ? css`
+          --redsift-color-default-primary: var(
+            --redsift-color-${$productTheme}-primary
+          );
+          --redsift-color-default-secondary: var(
+            --redsift-color-${$productTheme}-secondary
+          );
+          --redsift-color-default-hover: var(
+            --redsift-color-${$productTheme}-hover
+          );
+          --redsift-color-default-active: var(
+            --redsift-color-${$productTheme}-active
+          );
+          --redsift-color-default-active-hover: var(
+            --redsift-color-${$productTheme}-active-hover
+          );
+          --redsift-color-default-primary-active: var(
+            --redsift-color-${$productTheme}-primary-active
+          );
+        ` : '';
+}}
+`;
+
+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.
+ */
+const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      locale,
+      productTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$H);
+  const {
+    hasAppBar,
+    hasAppSidePanel,
+    hasAppContent
+  } = useMemo(() => {
+    const [[appBar], [appSidePanel], [appContent]] = partitionComponents(React__default.Children.toArray(children), [isComponent('AppBar'), isComponent('AppSidePanel'), isComponent('AppContent')]);
+    return {
+      hasAppBar: Boolean(appBar),
+      hasAppSidePanel: Boolean(appSidePanel),
+      hasAppContent: Boolean(appContent)
+    };
+  }, [children]);
+  if ((hasAppBar || hasAppSidePanel || hasAppContent) && !(hasAppBar && hasAppSidePanel && hasAppContent)) {
+    console.warn('Missing AppSidePanel, AppBar or AppContent inside AppContainer. These components are meant to work together.');
+  }
+  const [isSidePanelCollapsed, setIsSidePanelCollapsed] = useState(false);
+  const [title, setTitle] = useState();
+  const state = {
+    collapseSidePanel() {
+      setIsSidePanelCollapsed(true);
+    },
+    expandSidePanel() {
+      setIsSidePanelCollapsed(false);
+    },
+    hasAppBar,
+    hasAppSidePanel,
+    hasAppContent,
+    setTitle(title) {
+      setTitle(title);
+    },
+    isSidePanelCollapsed,
+    productTheme,
+    title
+  };
+  return /*#__PURE__*/React__default.createElement(StyledAppContainer, _extends$1({}, forwardedProps, {
+    $productTheme: productTheme,
+    className: classNames(AppContainer.className, className),
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement(AppContainerContext.Provider, {
+    value: state
+  }, /*#__PURE__*/React__default.createElement(I18nProvider, {
+    locale: locale
+  }, children)));
+});
+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==';
 
 var spinnerHardenize = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPgogIDxzdHlsZT4KICAgIC5zcGlubmluZyB7CiAgICAgIGFuaW1hdGlvbjogc3Bpbm5pbmcta2V5ZnJhbWVzIDMwMDBtcyBsaW5lYXIgaW5maW5pdGUgbm9ybWFsIGZvcndhcmRzOwogICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGN1YmljLWJlemllcigwLjQyLCAwLCAwLjU4LCAxKTsKICAgIH0KICAgIEBrZXlmcmFtZXMgc3Bpbm5pbmcta2V5ZnJhbWVzIHsKICAgICAgMCUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgwZGVnKTsKICAgICAgfQoKICAgICAgMzMlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMTgwZGVnKTsKICAgICAgfQoKICAgICAgNTAlIHsKICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpOwogICAgICB9CgogICAgICA4MyUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgzNjBkZWcpOwogICAgICB9CgogICAgICAxMDAlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMzYwZGVnKQogICAgICB9CiAgICB9CiAgPC9zdHlsZT4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MpIgogICAgZmlsbD0iIzBmN2FiMyIKICAgIGQ9Ik0zMTggMTg2LjlWMTA4LjhMMjAwIDU3IDgyIDEwOC44djc4LjFDODIgMjU5IDEzMi4zIDMyNi40IDIwMCAzNDNjNjcuNy0xNi42IDExOC04NCAxMTgtMTU2LjF6TTQwMCAyMDBjMCAxMTAuNS04OS41IDIwMC0yMDAgMjAwUzAgMzEwLjUgMCAyMDAgODkuNSAwIDIwMCAwczIwMCA4OS41IDIwMCAyMDB6IgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrcyI+CiAgICA8cGF0aAogICAgICBjbGFzcz0ic3Bpbm5pbmciCiAgICAgIGQ9Ik0wLDIwMEMwLDg5LjU0MzA1LDg5LjU0MzA1LDAsMjAwLDB2NDAwQzg5LjU0MzA1LDQwMCwwLDMxMC40NTY5NSwwLDIwMFoiCiAgICAgIGZpbGw9IiNmZmYiCiAgICAvPgogIDwvbWFzaz4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MyKSIKICAgIGZpbGw9IiMwZjdhYjMiCiAgICBkPSJNODIsMTg2LjkzOXYtNzguMDg5TDIwMCw1N2wxMTgsNTEuODV2NzguMDg5QzMxOCwyNTkuMDAyLDI2Ny42ODYsMzI2LjQwMiwyMDAsMzQzQzEzMi4zMTQsMzI2LjQwMiw4MiwyNTkuMDAyLDgyLDE4Ni45MzlaIgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrczIiPgogICAgPHBhdGgKICAgICAgY2xhc3M9InNwaW5uaW5nIgogICAgICBkPSJNNDAwIDIwMEM0MDAgMzEwLjUgMzEwLjUgNDAwIDIwMCA0MDBWMGMxMTAuNSAwIDIwMCA4OS41IDIwMCAyMDB6IgogICAgICBmaWxsPSIjZmZmIgogICAgLz4KICA8L21hc2s+Cjwvc3ZnPg==';
@@ -1177,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$C = ["aria-hidden", "aria-label", "className", "color", "size"];
+const _excluded$G = ["aria-hidden", "aria-label", "className", "color", "size"];
 const colorToFile = {
   default: spinnerDefault,
   hardenize: spinnerHardenize,
@@ -1189,9 +1311,9 @@ const colorToFile = {
   tools: spinnerTools,
   website: spinnerWebsite
 };
-const COMPONENT_NAME$E = 'Spinner';
-const CLASSNAME$E = 'redsift-shield';
-const DEFAULT_PROPS$E = {
+const COMPONENT_NAME$I = 'Spinner';
+const CLASSNAME$I = 'redsift-shield';
+const DEFAULT_PROPS$I = {
   color: ColorPalette.default,
   size: SpinnerSize.medium
 };
@@ -1229,14 +1351,16 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
       'aria-hidden': ariaHidden,
       'aria-label': ariaLabel,
       className,
-      color,
+      color: propsColor,
       size
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$C);
+    forwardedProps = _objectWithoutProperties(props, _excluded$G);
   const {
     width,
     height
   } = sizeToDimension(size);
+  const appContainerState = useContext(AppContainerContext);
+  const color = propsColor === ColorPalette.default && appContainerState && appContainerState.productTheme ? appContainerState.productTheme : propsColor;
   const stringFormatter = useLocalizedStringFormatter(intlMessages$4);
   return /*#__PURE__*/React__default.createElement(StyledSpinner, _extends$1({
     alt: stringFormatter.format('loading')
@@ -1252,14 +1376,14 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
     $size: size
   }));
 });
-Spinner.className = CLASSNAME$E;
-Spinner.defaultProps = DEFAULT_PROPS$E;
-Spinner.displayName = COMPONENT_NAME$E;
-
-const _excluded$B = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isLoading", "leftIcon", "onPress", "rightIcon", "variant"];
-const COMPONENT_NAME$D = 'Button';
-const CLASSNAME$D = 'redsift-button';
-const DEFAULT_PROPS$D = {
+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
@@ -1275,7 +1399,8 @@ const DEFAULT_PROPS$D = {
 const Button = /*#__PURE__*/forwardRef((props, ref) => {
   const buttonRef = ref || useRef();
   const {
-    buttonProps
+    buttonProps,
+    isPressed
   } = useButton(_objectSpread2(_objectSpread2({}, props), {}, {
     isDisabled: props.isLoading || props.isDisabled || props.disabled,
     preventFocusOnPress: true
@@ -1295,11 +1420,11 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
       rightIcon,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$B);
+    forwardedProps = _objectWithoutProperties(props, _excluded$F);
   return /*#__PURE__*/React__default.createElement(StyledButton, _extends$1({}, forwardedProps, buttonProps, {
     $color: color,
     $fullWidth: fullWidth,
-    $isActive: isActive,
+    $isActive: isActive || isPressed,
     $isDisabled: isLoading || isDisabled || disabled,
     $variant: variant,
     "aria-disabled": isLoading || isDisabled || disabled,
@@ -1319,9 +1444,9 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     className: "right"
   }) : null);
 });
-Button.className = CLASSNAME$D;
-Button.defaultProps = DEFAULT_PROPS$D;
-Button.displayName = COMPONENT_NAME$D;
+Button.className = CLASSNAME$H;
+Button.defaultProps = DEFAULT_PROPS$H;
+Button.displayName = COMPONENT_NAME$H;
 
 /**
  * Component style.
@@ -1337,10 +1462,10 @@ const StyledIconButton = styled(StyledButton)`
 }};
 `;
 
-const _excluded$A = ["className", "color", "disabled", "icon", "isActive", "isDisabled", "onPress", "variant"];
-const COMPONENT_NAME$C = 'IconButton';
-const CLASSNAME$C = 'redsift-icon-button';
-const DEFAULT_PROPS$C = {
+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
@@ -1355,7 +1480,8 @@ const DEFAULT_PROPS$C = {
 const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
   const buttonRef = ref || useRef();
   const {
-    buttonProps
+    buttonProps,
+    isPressed
   } = useButton(_objectSpread2(_objectSpread2({}, props), {}, {
     isDisabled: props.isDisabled || props.disabled,
     preventFocusOnPress: true
@@ -1371,11 +1497,11 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
       onPress,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$A);
+    forwardedProps = _objectWithoutProperties(props, _excluded$E);
   warnIfNoAccessibleLabelFound(props);
   return /*#__PURE__*/React__default.createElement(StyledIconButton, _extends$1({}, forwardedProps, buttonProps, {
     $color: isDisabled || disabled ? undefined : color,
-    $isActive: isActive,
+    $isActive: isActive || isPressed,
     $isDisabled: isDisabled || disabled,
     $variant: variant,
     "aria-disabled": isDisabled || disabled,
@@ -1387,9 +1513,9 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
     color: isDisabled || disabled ? undefined : color
   }));
 });
-IconButton.className = CLASSNAME$C;
-IconButton.defaultProps = DEFAULT_PROPS$C;
-IconButton.displayName = COMPONENT_NAME$C;
+IconButton.className = CLASSNAME$G;
+IconButton.defaultProps = DEFAULT_PROPS$G;
+IconButton.displayName = COMPONENT_NAME$G;
 
 /**
  * Component style.
@@ -1529,10 +1655,10 @@ const StyledHeading = styled.span`
 }}
 `;
 
-const _excluded$z = ["as", "children", "className", "noWrap", "variant"];
-const COMPONENT_NAME$B = 'Heading';
-const CLASSNAME$B = 'redsift-heading';
-const DEFAULT_PROPS$B = {};
+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.
@@ -1545,7 +1671,7 @@ const Heading = /*#__PURE__*/forwardRef((props, ref) => {
       noWrap,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$z);
+    forwardedProps = _objectWithoutProperties(props, _excluded$D);
   return /*#__PURE__*/React__default.createElement(StyledHeading, _extends$1({
     as: as
   }, forwardedProps, {
@@ -1555,9 +1681,9 @@ const Heading = /*#__PURE__*/forwardRef((props, ref) => {
     $variant: variant ? variant : as === 'span' ? 'body' : as
   }), children);
 });
-Heading.className = CLASSNAME$B;
-Heading.defaultProps = DEFAULT_PROPS$B;
-Heading.displayName = COMPONENT_NAME$B;
+Heading.className = CLASSNAME$F;
+Heading.defaultProps = DEFAULT_PROPS$F;
+Heading.displayName = COMPONENT_NAME$F;
 
 /**
  * Component style.
@@ -1575,10 +1701,10 @@ const StyledFlexbox = styled.div`
   ${baseFlexbox}
 `;
 
-const _excluded$y = ["children", "className"];
-const COMPONENT_NAME$A = 'Flexbox';
-const CLASSNAME$A = 'redsift-flex-box';
-const DEFAULT_PROPS$A = {
+const _excluded$C = ["children", "className"];
+const COMPONENT_NAME$E = 'Flexbox';
+const CLASSNAME$E = 'redsift-flex-box';
+const DEFAULT_PROPS$E = {
   gap: '16px'
 };
 
@@ -1590,20 +1716,20 @@ const Flexbox = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$y);
+    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$A;
-Flexbox.defaultProps = DEFAULT_PROPS$A;
-Flexbox.displayName = COMPONENT_NAME$A;
+Flexbox.className = CLASSNAME$E;
+Flexbox.defaultProps = DEFAULT_PROPS$E;
+Flexbox.displayName = COMPONENT_NAME$E;
 
-const _excluded$x = ["children", "className", "isClosable", "isClosed", "onClose", "title", "variant"];
-const COMPONENT_NAME$z = 'Alert';
-const CLASSNAME$z = 'redsift-alert';
-const DEFAULT_PROPS$z = {
+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 => {
@@ -1617,7 +1743,7 @@ const getVariant$1 = variant => {
     case AlertVariant.error:
       return {
         color: ColorPalette.error,
-        icon: mdiInformation
+        icon: mdiAlertCircle
       };
     case AlertVariant.success:
       return {
@@ -1645,7 +1771,7 @@ const Alert = /*#__PURE__*/forwardRef((props, ref) => {
       title,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$x);
+    forwardedProps = _objectWithoutProperties(props, _excluded$B);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$5);
   const {
     color,
@@ -1691,9 +1817,9 @@ const Alert = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${Alert.className}__content`
   }, children) : null);
 });
-Alert.className = CLASSNAME$z;
-Alert.defaultProps = DEFAULT_PROPS$z;
-Alert.displayName = COMPONENT_NAME$z;
+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";
@@ -1714,8 +1840,6 @@ var intlMessages$3 = {
   'fr-FR': frFR$3
 };
 
-const AppContainerContext = /*#__PURE__*/React__default.createContext(null);
-
 const useIsLoaded = () => {
   const [isLoaded, setIsLoaded] = useState(false);
   useEffect(() => {
@@ -1741,7 +1865,7 @@ const StyledAppBar = styled.header`
   left: 0;
   position: fixed;
   top: 0;
-  z-index: 1;
+  z-index: var(--redsift-layout-z-index-header);
 
   ${_ref => {
   let {
@@ -1792,10 +1916,10 @@ const StyledAppBar = styled.header`
   }
 `;
 
-const _excluded$w = ["children", "className", "collapseIconButtonProps", "collapseIconButtonRef", "expandIconButtonProps", "expandIconButtonRef", "fallbackTitle", "title"];
-const COMPONENT_NAME$y = 'AppBar';
-const CLASSNAME$y = 'redsift-app-bar';
-const DEFAULT_PROPS$y = {};
+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.
@@ -1811,7 +1935,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
       fallbackTitle,
       title: propsTitle
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$w);
+    forwardedProps = _objectWithoutProperties(props, _excluded$A);
   const {
     isLoaded
   } = useIsLoaded();
@@ -1850,103 +1974,9 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${AppBar.className}__right`
   }, children));
 });
-AppBar.className = CLASSNAME$y;
-AppBar.defaultProps = DEFAULT_PROPS$y;
-AppBar.displayName = COMPONENT_NAME$y;
-
-/**
- * Component style.
- */
-const StyledAppContainer = styled.div`
-  ${_ref => {
-  let {
-    $productTheme
-  } = _ref;
-  return $productTheme && Object.keys(ProductColorPalette).indexOf($productTheme) !== -1 ? css`
-          --redsift-color-default-primary: var(
-            --redsift-color-${$productTheme}-primary
-          );
-          --redsift-color-default-secondary: var(
-            --redsift-color-${$productTheme}-secondary
-          );
-          --redsift-color-default-hover: var(
-            --redsift-color-${$productTheme}-hover
-          );
-          --redsift-color-default-active: var(
-            --redsift-color-${$productTheme}-active
-          );
-          --redsift-color-default-active-hover: var(
-            --redsift-color-${$productTheme}-active-hover
-          );
-          --redsift-color-default-primary-active: var(
-            --redsift-color-${$productTheme}-primary-active
-          );
-        ` : '';
-}}
-`;
-
-const _excluded$v = ["children", "className", "locale", "productTheme"];
-const COMPONENT_NAME$x = 'AppContainer';
-const CLASSNAME$x = 'redsift-app-container';
-const DEFAULT_PROPS$x = {};
-
-/**
- * The AppContainer component.
- */
-const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      children,
-      className,
-      locale,
-      productTheme
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$v);
-  const {
-    hasAppBar,
-    hasAppSidePanel,
-    hasAppContent
-  } = useMemo(() => {
-    const [[appBar], [appSidePanel], [appContent]] = partitionComponents(React__default.Children.toArray(children), [isComponent('AppBar'), isComponent('AppSidePanel'), isComponent('AppContent')]);
-    return {
-      hasAppBar: Boolean(appBar),
-      hasAppSidePanel: Boolean(appSidePanel),
-      hasAppContent: Boolean(appContent)
-    };
-  }, [children]);
-  if ((hasAppBar || hasAppSidePanel || hasAppContent) && !(hasAppBar && hasAppSidePanel && hasAppContent)) {
-    console.warn('Missing AppSidePanel, AppBar or AppContent inside AppContainer. These components are meant to work together.');
-  }
-  const [isSidePanelCollapsed, setIsSidePanelCollapsed] = useState(false);
-  const [title, setTitle] = useState();
-  const state = {
-    collapseSidePanel() {
-      setIsSidePanelCollapsed(true);
-    },
-    expandSidePanel() {
-      setIsSidePanelCollapsed(false);
-    },
-    hasAppBar,
-    hasAppSidePanel,
-    hasAppContent,
-    setTitle(title) {
-      setTitle(title);
-    },
-    isSidePanelCollapsed,
-    title
-  };
-  return /*#__PURE__*/React__default.createElement(StyledAppContainer, _extends$1({}, forwardedProps, {
-    $productTheme: productTheme,
-    className: classNames(AppContainer.className, className),
-    ref: ref
-  }), /*#__PURE__*/React__default.createElement(AppContainerContext.Provider, {
-    value: state
-  }, /*#__PURE__*/React__default.createElement(I18nProvider, {
-    locale: locale
-  }, children)));
-});
-AppContainer.className = CLASSNAME$x;
-AppContainer.defaultProps = DEFAULT_PROPS$x;
-AppContainer.displayName = COMPONENT_NAME$x;
+AppBar.className = CLASSNAME$C;
+AppBar.defaultProps = DEFAULT_PROPS$C;
+AppBar.displayName = COMPONENT_NAME$C;
 
 /**
  * Component style.
@@ -2012,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.
@@ -2026,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();
@@ -2039,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.
@@ -2069,7 +2099,7 @@ const StyledAppSidePanel = styled.div`
   return !$isCollapsed ? 'visible' : 'hidden';
 }};
   width: 240px;
-  z-index: 1;
+  z-index: var(--redsift-layout-z-index-side-panel);
 
   .redsift-app-side-panel__header {
     align-items: center;
@@ -2135,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.
@@ -2151,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),
@@ -2166,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.
@@ -2384,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
 };
@@ -2404,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,
@@ -2414,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.
@@ -2445,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(() => {
@@ -2507,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.
@@ -2648,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.
@@ -2674,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);
@@ -2943,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.
@@ -3016,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
@@ -3047,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
@@ -3189,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 => {
@@ -3212,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
@@ -3315,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.
@@ -3331,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",
@@ -3346,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.
@@ -3382,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.
@@ -3396,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) => {
@@ -3419,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
@@ -3456,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",
@@ -3480,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";
@@ -3584,42 +3614,282 @@ 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 = {};
-
 /**
- * The CardHeader component.
+ * Component style.
  */
-const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      children,
-      className,
-      header,
-      headingProps,
-      icon,
-      subheader
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$k);
-  return /*#__PURE__*/React__default.createElement(StyledCardHeader, _extends$1({}, forwardedProps, {
-    className: classNames(CardHeader.className, className),
-    ref: ref
-  }), subheader ? /*#__PURE__*/React__default.createElement("div", {
-    className: `${CardHeader.className}__subheader`
-  }, subheader) : null, header ? /*#__PURE__*/React__default.createElement(Heading, _extends$1({
-    as: "h2",
-    color: "black",
-    className: `${CardHeader.className}__header`,
-    variant: "h2"
+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.
+ */
+const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      header,
+      headingProps,
+      icon,
+      isLoading,
+      subheader
+    } = props,
+    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(Skeleton.Text, {
+    variant: "body",
+    isLoaded: !isLoading
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${CardHeader.className}__subheader`
+  }, 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`,
+    variant: "h2"
   }, 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.
@@ -3635,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.
@@ -3648,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.
@@ -3668,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'
 };
@@ -3684,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.
@@ -3711,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(() => {
@@ -3742,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,
@@ -3843,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
 };
@@ -3871,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) {
@@ -3925,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}
 
@@ -4005,11 +4275,10 @@ const StyledCheckbox = styled.label`
             );
           `}
 
-      ${$isFocusVisible ? css`
+      ${$isFocusVisible && !$isDisabled ? css`
             background-color: var(
               --redsift-color-${$isColored ? 'default' : 'question'}-hover
             );
-            border-radius: 21px;
           ` : ''}
     `;
 }}
@@ -4033,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
 };
 
@@ -4085,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
@@ -4165,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 {
@@ -4277,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 => {
@@ -4366,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
@@ -4400,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";
@@ -4443,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.
@@ -4457,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
@@ -4465,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.
@@ -4481,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;
   }
 
@@ -4527,88 +4778,252 @@ 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
-};
-const hasCollapsibleChildren = children => {
-  let hasCollapsible = false;
-  React__default.Children.map(children, child => {
-    if (isComponent(DetailedCardCollapsibleSectionItems)(child)) {
-      hasCollapsible = true;
-    }
-  });
-  return hasCollapsible;
-};
-
 /**
- * The DetailedCardSection component.
+ * Component variant.
  */
-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, {
-    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, {
-    "aria-label": stringFormatter.format(isCollapsed ? 'expand' : 'collapse'),
-    className: `${DetailedCardSection.className}-header__collapse-button`,
-    color: "question",
-    icon: isCollapsed ? mdiChevronDown : mdiChevronUp,
-    onPress: () => {
-      setIsCollapsed(isCollapsed => !isCollapsed);
-    }
-  }) : null), children);
-});
-DetailedCardSection.className = CLASSNAME$f;
-DetailedCardSection.defaultProps = DEFAULT_PROPS$f;
-DetailedCardSection.displayName = COMPONENT_NAME$f;
+const TextVariant = {
+  subtitle: 'subtitle',
+  body: 'body',
+  body2: 'body2',
+  button: 'button',
+  caption: 'caption',
+  inherit: 'inherit'
+};
+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'
+};
 
 /**
  * Component style.
  */
-const StyledDetailedCard = styled.div`
+const StyledText = styled.span`
   ${baseStyling}
 
-  background-color: var(--redsift-color-neutral-white);
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
-  padding: 16px;
-
-  .redsift-detailed-card__banner {
-    align-items: center;
-    background-color: ${_ref => {
+  ${_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 {
-    width: 100%;
-  }
+  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(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",
+    icon: isCollapsed ? mdiChevronDown : mdiChevronUp,
+    onPress: () => {
+      setIsCollapsed(isCollapsed => !isCollapsed);
+    }
+  }) : null), children);
+});
+DetailedCardSection.className = CLASSNAME$g;
+DetailedCardSection.defaultProps = DEFAULT_PROPS$g;
+DetailedCardSection.displayName = COMPONENT_NAME$g;
+
+/**
+ * Component style.
+ */
+const StyledDetailedCard = styled.div`
+  ${baseStyling}
+
+  background-color: var(--redsift-color-neutral-white);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
+  padding: 16px;
+
+  .redsift-detailed-card__banner {
+    background-color: ${_ref => {
+  let {
+    $color
+  } = _ref;
+  return css`var(--redsift-color-${$color}-primary)`;
+}};
+  }
+
+  .redsift-detailed-card__collapse-buttons {
+    width: 100%;
+  }
 `;
 
 /**
@@ -4626,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.
@@ -4639,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.
@@ -4696,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'
 };
@@ -4714,166 +5135,17 @@ 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,
-    className: classNames(Pill.className, className),
-    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'
-};
-
-/**
- * Component style.
- */
-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,
-    $variant
-  } = _ref3;
-  return !$variant ? css`
-          ${$fontFamily ? css`
-                font-family: ${$fontFamily};
-              ` : ''}
-          ${$fontSize ? css`
-                font-size: ${$fontSize};
-              ` : ''}
-          ${$as === TextComponent.b ? css`
-                font-weight: bold;
-              ` : $as === TextComponent.sup || $as === TextComponent.sub ? css`
-                font-size: ${$fontSize ? $fontSize : '12px'};
-              ` : ''}
-        ` : $variant === TextVariant.inherit ? css`
-          font-family: ${$fontFamily ? $fontFamily : css`inherit`};
-          font-size: ${$fontSize ? $fontSize : $as === TextComponent.sup || $as === TextComponent.sub ? '12px' : css`inherit`};
-          font-weight: ${$as === TextComponent.b ? 'bold' : 'inherit'};
-          line-height: inherit;
-          text-transform: inherit;
-        ` : css`
-          font-family: ${$fontFamily ? $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,
+    $autoBreak: autoBreak,
     $color: color,
-    $fontFamily: fontFamily,
-    $fontSize: fontSize,
-    $noWrap: noWrap,
-    $variant: variant
+    className: classNames(Pill.className, className),
+    ref: ref
   }), children);
 });
-Text.className = CLASSNAME$c;
-Text.defaultProps = DEFAULT_PROPS$c;
-Text.displayName = COMPONENT_NAME$c;
+Pill.className = CLASSNAME$e;
+Pill.defaultProps = DEFAULT_PROPS$e;
+Pill.displayName = COMPONENT_NAME$e;
 
 /**
  * Component style.
@@ -4903,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.
@@ -4918,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
@@ -8393,22 +8672,21 @@ const TooltipPlacement = {
  */
 const StyledTooltipContent = styled.div`
   ${baseContainer}
-  max-width: calc(100vw - 16px);
 
-  display: flex;
   align-items: center;
-  padding: 4px 8px;
   background-color: var(--redsift-color-neutral-white);
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
   color: var(--redsift-color-neutral-black);
-
+  display: flex;
+  filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14))
+    drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12));
   font-family: var(--redsift-typography-tooltip-font-family);
   font-size: var(--redsift-typography-tooltip-font-size);
   font-weight: var(--redsift-typography-tooltip-font-weight);
   line-height: var(--redsift-typography-tooltip-line-height);
-
-  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
-  filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14))
-    drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12));
+  max-width: calc(100vw - 48px);
+  padding: 4px 8px;
+  z-index: var(--redsift-layout-z-index-tooltip);
 
   .redsift-tooltip-content__arrow {
     position: absolute;
@@ -8472,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.
@@ -8536,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.
@@ -8569,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 {
@@ -8632,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
 };
@@ -8665,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
@@ -8681,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'
 };
@@ -8719,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({
@@ -8748,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,
@@ -8799,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,
@@ -8835,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.
@@ -8848,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.
@@ -8871,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
 });
@@ -8924,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.
@@ -8944,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",
@@ -8956,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.
@@ -8988,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, {
@@ -9001,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.
@@ -9012,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',
@@ -9046,6 +9334,7 @@ const Number$1 = /*#__PURE__*/forwardRef((props, ref) => {
       currencyDisplay,
       currencySign,
       fontSize,
+      lineHeight,
       localeMatcher,
       maximumFractionDigits,
       maximumSignificantDigits,
@@ -9067,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,
@@ -9102,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.
@@ -9203,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
 };
@@ -9231,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) {
@@ -9273,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}
@@ -9322,42 +9613,306 @@ const StyledRadio = styled.label`
     padding-left: 4px;
     padding-right: 16px;
     position: relative;
-    top: -4px;
+    top: -4px;
+
+    [dir='rtl'] & {
+      padding-left: 16px;
+      padding-right: 4px;
+    }
+  }
+
+  .redsift-icon {
+    padding: 2px;
+    width: 24px;
+
+    ${_ref2 => {
+  let {
+    $isColored,
+    $isDisabled,
+    $isInvalid,
+    $isFocusVisible
+  } = _ref2;
+  return css`
+      ${$isDisabled ? css`
+            color: var(--redsift-color-neutral-midgrey);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-error-primary);
+          ` : css`
+            color: var(
+              --redsift-color-${$isColored ? 'default' : 'question'}-primary
+            );
+          `}
+
+      ${$isFocusVisible && !$isDisabled ? css`
+            background-color: var(
+              --redsift-color-${$isColored ? 'default' : 'question'}-hover
+            );
+            border-radius: 16px;
+          ` : ''}
+    `;
+}}
+  }
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+
+    ${_ref3 => {
+  let {
+    $isColored,
+    $isDisabled
+  } = _ref3;
+  return !$isDisabled ? css`
+            .redsift-icon {
+              background-color: var(
+                --redsift-color-${$isColored ? 'default' : 'question'}-hover
+              );
+              border-radius: 16px;
+            }
+          ` : '';
+}}
+  }
+`;
+
+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
+};
+
+/**
+ * The Radio component.
+ * Works both inside a RadioGroup or as standalone.
+ * Can be used as controlled or uncontrolled.
+ */
+const Radio = /*#__PURE__*/forwardRef((props, ref) => {
+  var _isDisabled, _isReadOnly, _ref;
+  const groupState = useContext(RadioGroupContext);
+  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$2);
+  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 : Boolean((groupState === null || groupState === void 0 ? void 0 : groupState.value) && groupState.value === value));
+  useEffect(() => {
+    setSelected(propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected);
+  }, [propsIsSelected, defaultSelected]);
+  useEffect(() => {
+    if (groupState) {
+      setSelected(groupState.value === 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 <Radio> elements within a <RadioGroup> unless the <Radio> 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 <Radio> elements within a <RadioGroup> unless the <Radio> is controlled. Please apply this prop to the group instead or pass isControlled to the component.');
+    }
+    if (props.value == null) {
+      console.warn('A <Radio> element within a <RadioGroup> requires a `value` property unless the <Radio> is controlled.');
+    }
+  }
+  const handleChange = useCallback(event => {
+    if (isDisabled || isReadOnly) {
+      return;
+    }
+    if (groupState) {
+      groupState.setValue(value);
+    }
+    if (onChange) {
+      onChange(!isSelected, value, name, event, groupState);
+    }
+    setSelected(event.target.checked);
+  }, [onChange, groupState]);
+  return /*#__PURE__*/React__default.createElement(StyledRadio, _extends$1({}, forwardedProps, {
+    $isColored: isColored,
+    $isDisabled: isDisabled,
+    $isFocusVisible: isFocusVisible,
+    $isInvalid: isInvalid || isRequired && !isSelected,
+    $isRequired: isRequired,
+    $isSelected: isSelected,
+    className: classNames(Radio.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,
+    type: "radio",
+    value: value
+  })), isSelected ? /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiRadioboxMarked
+  }) : /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiRadioboxBlank
+  }), children ? /*#__PURE__*/React__default.createElement("span", {
+    className: "label"
+  }, children) : null);
+});
+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;
+  }
 
-    [dir='rtl'] & {
-      padding-left: 16px;
-      padding-right: 4px;
-    }
+  .redsift-switch__slide {
+    height: 20px;
+    position: relative;
+    min-width: 40px;
   }
 
-  .redsift-icon {
-    padding: 2px;
-    width: 24px;
+  .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;
+  }
 
-    ${_ref2 => {
+  .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,
-    $isFocusVisible
-  } = _ref2;
+    $isSelected
+  } = _ref3;
   return css`
-      ${$isDisabled ? css`
-            color: var(--redsift-color-neutral-midgrey);
-          ` : $isInvalid ? css`
-            color: var(--redsift-color-error-primary);
-          ` : css`
-            color: var(
-              --redsift-color-${$isColored ? 'default' : 'question'}-primary
+      ${$isSelected && $isDisabled ? css`
+            background-color: var(
+              --redsift-color-${$isInvalid ? 'error' : $isColored ? 'default' : 'no-data'}-active
             );
-          `}
-
-      ${$isFocusVisible ? css`
+          ` : $isSelected ? css`
             background-color: var(
-              --redsift-color-${$isColored ? 'default' : 'question'}-hover
+              --redsift-color-${$isInvalid ? 'error' : $isColored ? 'default' : 'no-data'}-primary
             );
-            border-radius: 16px;
-          ` : ''}
+          ` : !$isSelected && $isDisabled ? css`
+            background-color: var(--redsift-color-neutral-lightgrey);
+          ` : css`
+            background-color: var(--redsift-color-neutral-midgrey);
+          `}
     `;
 }}
   }
@@ -9365,54 +9920,48 @@ const StyledRadio = styled.label`
   &:hover,
   &:focus-visible {
     outline: none;
+    cursor: pointer;
 
-    ${_ref3 => {
+    ${_ref4 => {
   let {
-    $isColored,
     $isDisabled
-  } = _ref3;
+  } = _ref4;
   return !$isDisabled ? css`
-            .redsift-icon {
-              background-color: var(
-                --redsift-color-${$isColored ? 'default' : 'question'}-hover
-              );
-              border-radius: 16px;
+            .redsift-switch-slide-knob-wrapper__elevation {
+              opacity: 0.5;
             }
           ` : '';
 }}
   }
 
-  ${_ref4 => {
+  ${_ref5 => {
   let {
-    $isColored,
+    $isDisabled,
     $isFocusVisible
-  } = _ref4;
-  return $isFocusVisible ? css`
-          .redsift-icon {
-            background-color: var(
-              --redsift-color-${$isColored ? 'default' : 'question'}-hover
-            );
-            border-radius: 21px;
+  } = _ref5;
+  return $isFocusVisible && !$isDisabled ? css`
+          .redsift-switch-slide-knob-wrapper__elevation {
+            opacity: 0.5;
           }
         ` : '';
 }}
 `;
 
-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$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 Radio component.
- * Works both inside a RadioGroup or as standalone.
+ * The Switch component.
+ * Works both inside a SwitchGroup or as standalone.
  * Can be used as controlled or uncontrolled.
  */
-const Radio = /*#__PURE__*/forwardRef((props, ref) => {
+const Switch = /*#__PURE__*/forwardRef((props, ref) => {
   var _isDisabled, _isReadOnly, _ref;
-  const groupState = useContext(RadioGroupContext);
+  const groupState = useContext(SwitchGroupContext);
   let {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledby,
@@ -9432,7 +9981,7 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
       onChange,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1);
   const {
     isFocusVisible,
     focusProps
@@ -9441,25 +9990,25 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
   });
   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 : Boolean((groupState === null || groupState === void 0 ? void 0 : groupState.value) && groupState.value === value));
+  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 === value);
+      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 <Radio> elements within a <RadioGroup> unless the <Radio> is controlled. Please apply this prop to the group instead or pass isControlled to the component.');
+      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 <Radio> elements within a <RadioGroup> unless the <Radio> is controlled. Please apply this prop to the group instead or pass isControlled to the component.');
+      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 <Radio> element within a <RadioGroup> requires a `value` property unless the <Radio> is controlled.');
+      console.warn('A <Switch> element within a <SwitchGroup> requires a `value` property unless the <Switch> is controlled.');
     }
   }
   const handleChange = useCallback(event => {
@@ -9467,21 +10016,25 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
       return;
     }
     if (groupState) {
-      groupState.setValue(value);
+      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(StyledRadio, _extends$1({}, forwardedProps, {
+  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(Radio.className, className),
+    className: classNames(Switch.className, className),
     ref: ref
   }), /*#__PURE__*/React__default.createElement("input", _extends$1({}, inputProps, focusProps, {
     "aria-checked": isSelected ? 'true' : 'false',
@@ -9496,19 +10049,202 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
     name: name,
     onChange: handleChange,
     ref: inputRef,
-    type: "radio",
+    role: "switch",
+    type: "checkbox",
     value: value
-  })), isSelected ? /*#__PURE__*/React__default.createElement(Icon, {
-    icon: mdiRadioboxMarked
-  }) : /*#__PURE__*/React__default.createElement(Icon, {
-    icon: mdiRadioboxBlank
-  }), children ? /*#__PURE__*/React__default.createElement("span", {
+  })), /*#__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);
 });
-Radio.className = CLASSNAME;
-Radio.defaultProps = DEFAULT_PROPS;
-Radio.displayName = COMPONENT_NAME;
+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, RedsiftColorDefaultSecondary, RedsiftColorErrorActive, RedsiftColorErrorActiveHover, RedsiftColorErrorHover, RedsiftColorErrorPrimary, RedsiftColorErrorPrimaryActive, RedsiftColorErrorSecondary, RedsiftColorHardenizeActive, RedsiftColorHardenizeActiveHover, RedsiftColorHardenizeHover, RedsiftColorHardenizePrimary, RedsiftColorHardenizePrimaryActive, RedsiftColorHardenizeSecondary, RedsiftColorInfoActive, RedsiftColorInfoActiveHover, RedsiftColorInfoHover, RedsiftColorInfoPrimary, RedsiftColorInfoPrimaryActive, RedsiftColorInfoSecondary, RedsiftColorNeutralBlack, RedsiftColorNeutralDarkgrey, RedsiftColorNeutralLightgrey, RedsiftColorNeutralMidgrey, RedsiftColorNeutralWhite, RedsiftColorNeutralXlightgrey, RedsiftColorNoDataActive, RedsiftColorNoDataActiveHover, RedsiftColorNoDataHover, RedsiftColorNoDataPrimary, RedsiftColorNoDataSecondary, RedsiftColorOndmarcActive, RedsiftColorOndmarcActiveHover, RedsiftColorOndmarcHover, RedsiftColorOndmarcPrimary, RedsiftColorOndmarcPrimaryActive, RedsiftColorOndmarcSecondary, RedsiftColorOndomainActive, RedsiftColorOndomainActiveHover, RedsiftColorOndomainHover, RedsiftColorOndomainPrimary, RedsiftColorOndomainPrimaryActive, RedsiftColorOndomainSecondary, RedsiftColorOninboxActive, RedsiftColorOninboxActiveHover, RedsiftColorOninboxHover, RedsiftColorOninboxPrimary, RedsiftColorOninboxPrimaryActive, RedsiftColorOninboxSecondary, RedsiftColorQuestionActive, RedsiftColorQuestionActiveHover, RedsiftColorQuestionHover, RedsiftColorQuestionPrimary, RedsiftColorQuestionSecondary, RedsiftColorSuccessActive, RedsiftColorSuccessActiveHover, RedsiftColorSuccessHover, RedsiftColorSuccessPrimary, RedsiftColorSuccessPrimaryActive, RedsiftColorSuccessSecondary, RedsiftColorToolsActive, RedsiftColorToolsActiveHover, RedsiftColorToolsHover, RedsiftColorToolsPrimary, RedsiftColorToolsPrimaryActive, RedsiftColorToolsSecondary, RedsiftColorWarningActive, RedsiftColorWarningActiveHover, RedsiftColorWarningHover, RedsiftColorWarningPrimary, RedsiftColorWarningPrimaryActive, RedsiftColorWarningSecondary, RedsiftColorWebsiteActive, RedsiftColorWebsiteActiveHover, RedsiftColorWebsiteHover, RedsiftColorWebsitePrimary, RedsiftColorWebsitePrimaryActive, 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, 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