@redsift/design-system 9.6.0 → 10.0.0-alpha.1

package/index.js

@@ -3,7 +3,7 @@ export { I18nProvider, useCollator, useDateFormatter, useFilter, useListFormatte
 export { SSRProvider, useIsSSR } from '@react-aria/ssr';
 import { rsiAsmHorizontal, rsiBrandTrustHorizontal, rsiCertificatesHorizontal, rsiOndmarcHorizontal, rsiPulseHorizontal, rsiRadarHorizontal, rsiRojoDsHorizontal, rsiVendorSecureHorizontal, rsiRedSiftHorizontal, mdiClose as mdiClose$1, mdiAlert, mdiCheckCircle, mdiAlertCircle, mdiInformation, mdiMenu, mdiChevronDown, mdiMenuOpen, mdiChevronUp, mdiCheckboxMarked, mdiMinusBox, mdiCheckboxBlankOutline, mdiPageLast, mdiKeyboardCaps, mdiRadioboxMarked, mdiRadioboxBlank } from '@redsift/icons';
 import * as React from 'react';
-import React__default, { useState, useEffect, forwardRef, useRef, useCallback, useContext, useReducer, useMemo, useLayoutEffect } from 'react';
+import React__default, { useState, useEffect, useContext, forwardRef, useRef, useCallback, useReducer, useMemo, useLayoutEffect } from 'react';
 import classNames from 'classnames';
 import styled, { css, keyframes } from 'styled-components';
 import { useFocusRing } from '@react-aria/focus';
@@ -53,43 +53,6 @@ const ProductLogo = {
   website: rsiRedSiftHorizontal
 };
 
-/**
- * Color palette.
- */
-const CtasColorPalette = {
-  primary: 'primary',
-  secondary: 'secondary'
-};
-const NotificationsColorPalette = {
-  success: 'success',
-  error: 'error',
-  warning: 'warning',
-  info: 'info',
-  question: 'question',
-  'no-data': 'no-data'
-};
-const ProductColorPalette = Product;
-const PresentationColorPalette = {
-  green: 'green',
-  pink: 'pink',
-  aqua: 'aqua',
-  brown: 'brown',
-  red: 'red',
-  yellow: 'yellow',
-  purple: 'purple',
-  orange: 'orange',
-  blue: 'blue',
-  grey: 'grey'
-};
-const NeutralColorPalette = {
-  black: 'black',
-  darkgrey: 'darkgrey',
-  midgrey: 'midgrey',
-  lightgrey: 'lightgrey',
-  xlightgrey: 'xlightgrey',
-  white: 'white'
-};
-
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -181,6 +144,62 @@ function _toPropertyKey(arg) {
   return typeof key === "symbol" ? key : String(key);
 }
 
+/**
+ * Color palette.
+ */
+const Theme = {
+  light: 'light',
+  dark: 'dark'
+};
+const PrimaryColorPalette = {
+  primary: 'primary',
+  secondary: 'secondary',
+  error: 'error'
+};
+const SecondaryColorPalette = {
+  success: 'success',
+  warning: 'warning',
+  info: 'info'
+};
+const ColorPalette = _objectSpread2(_objectSpread2({}, PrimaryColorPalette), SecondaryColorPalette);
+const PrimaryButtonsColorPalette = {
+  primary: 'primary',
+  secondary: 'secondary',
+  error: 'error',
+  success: 'success',
+  warning: 'warning',
+  grey: 'grey'
+};
+const ButtonsColorPalette = _objectSpread2(_objectSpread2({}, PrimaryButtonsColorPalette), {}, {
+  info: 'info'
+});
+const NotificationsColorPalette = _objectSpread2(_objectSpread2({}, ColorPalette), {}, {
+  question: 'question',
+  'no-data': 'no-data'
+});
+const ProductColorPalette = Product;
+const PresentationColorPalette = {
+  green: 'green',
+  pink: 'pink',
+  aqua: 'aqua',
+  brown: 'brown',
+  red: 'red',
+  yellow: 'yellow',
+  purple: 'purple',
+  orange: 'orange',
+  blue: 'blue',
+  grey: 'grey'
+};
+const NeutralColorPalette = {
+  black: 'black',
+  'x-dark-grey': 'x-dark-grey',
+  'dark-grey': 'dark-grey',
+  'mid-grey': 'mid-grey',
+  'light-grey': 'light-grey',
+  'x-light-grey': 'x-light-grey',
+  white: 'white'
+};
+
 const AlignSelf = {
   auto: 'auto',
   normal: 'normal',
@@ -424,85 +443,685 @@ function partitionComponents(components, predicates) {
 
 /**
  * Do not edit directly
- * Generated on Wed, 20 Dec 2023 08:32:38 GMT
- */
-
-const RedsiftColorRedsift = '#e11010';
+ * Generated on Wed, 06 Mar 2024 15:52:38 GMT
+ */
+
+const RedsiftColorDarkComponentsPageBackground = '#333333';
+const RedsiftColorDarkComponentsTextPrimary = '#ffffff';
+const RedsiftColorDarkComponentsTextSecondary = '#f2f2f2';
+const RedsiftColorDarkComponentsRedSiftLogoTextRed = '#ffffff';
+const RedsiftColorDarkComponentsRedSiftLogoTextWhite = '#ffffff';
+const RedsiftColorDarkComponentsRedSiftLogoTextGrey = '#ffffff';
+const RedsiftColorDarkComponentsRedSiftLogoIconBackground = '#ffffff';
+const RedsiftColorDarkComponentsRedSiftLogoIconR = '#e11010';
+const RedsiftColorDarkComponentsRedSiftLogoDiamondTopRight = '#ffb3b3';
+const RedsiftColorDarkComponentsRedSiftLogoDiamondBottomLeft = '#e24e4e';
+const RedsiftColorDarkComponentsRedSiftLogoDiamondBottomRight = '#ff8181';
+const RedsiftColorDarkComponentsRedSiftLogoDiamondDark = '#e24e4e';
+const RedsiftColorDarkComponentsRedSiftLogoDiamondMid = '#ff8181';
+const RedsiftColorDarkComponentsRedSiftLogoDiamondLight = '#ffb3b3';
+const RedsiftColorDarkComponentsProductLogosTextGrey = '#ffffff';
+const RedsiftColorDarkComponentsProductLogosTextRed = '#ffffff';
+const RedsiftColorDarkComponentsProductLogosTextWhite = '#ffffff';
+const RedsiftColorDarkComponentsProductLogosIconRed = '#e11010';
+const RedsiftColorDarkComponentsProductLogosIconGrey = '#ffffff';
+const RedsiftColorDarkComponentsSideNavigationBackground = '#474747';
+const RedsiftColorDarkComponentsSideNavigationMenuItemTextResting = '#f2f2f2';
+const RedsiftColorDarkComponentsSideNavigationMenuItemTextDisabled = '#666666';
+const RedsiftColorDarkComponentsSideNavigationMenuItemTextHover = '#ffffff';
+const RedsiftColorDarkComponentsSideNavigationMenuItemBackgroundHover = '#666666';
+const RedsiftColorDarkComponentsSideNavigationMenuItemBackgroundSecondary = 'transparent';
+const RedsiftColorDarkComponentsSideNavigationMenuItemBackgroundActive = '#e0e0e0';
+const RedsiftColorDarkComponentsSideNavigationMenuItemActive = '#1c1c1c';
+const RedsiftColorDarkComponentsSideNavigationScrollbarResting = '#666666';
+const RedsiftColorDarkComponentsSideNavigationScrollbarHover = '#666666';
+const RedsiftColorDarkComponentsSideNavigationRightLine = '#1c1c1c';
+const RedsiftColorDarkComponentsSideNavigationCurrentMarker = '#f2f2f2';
+const RedsiftColorDarkComponentsAppBarBackground = '#333333';
+const RedsiftColorDarkComponentsAppBarBreadcrumbDefault = '#ffffff';
+const RedsiftColorDarkComponentsAppBarBreadcrumbHover = '#142849';
+const RedsiftColorDarkComponentsAppBarBreadcrumbDown = '#0d1b31';
+const RedsiftColorDarkComponentsAppBarIconBackgroundHover = '#666666';
+const RedsiftColorDarkComponentsAppBarIconBackgroundDown = '#e0e0e0';
+const RedsiftColorDarkComponentsAppBarIconBackgroundActive = '#666666';
+const RedsiftColorDarkComponentsAppBarIconBackgroundActiveHover = '#e0e0e0';
+const RedsiftColorDarkComponentsAppBarIconBackgroundActiveDown = '#e0e0e0';
+const RedsiftColorDarkComponentsAppBarBorder = '#1c1c1c';
+const RedsiftColorDarkComponentsTooltipBackground = '#666666';
+const RedsiftColorDarkComponentsTooltipText = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonPrimaryBackgroundDefault = '#4285f4';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonPrimaryBackgroundHover = '#3b78dc';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonPrimaryBackgroundActive = '#2e5dab';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonPrimaryBackgroundDisabled = '#474747';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonPrimaryTextDefault = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonPrimaryTextHover = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonPrimaryTextActive = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonPrimaryTextDisabled = '#858585';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonSecondaryBackgroundDefault = '#51b7a4';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonSecondaryBackgroundHover = '#49a594';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonSecondaryBackgroundActive = '#398073';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonSecondaryBackgroundDisabled = '#474747';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonSecondaryTextDefault = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonSecondaryTextHover = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonSecondaryTextActive = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonSecondaryTextDisabled = '#858585';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonSuccessBackgroundDefault = '#02ac61';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonSuccessBackgroundHover = '#029b57';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonSuccessBackgroundActive = '#017844';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonSuccessBackgroundDisabled = '#474747';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonSuccessTextDefault = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonSuccessTextHover = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonSuccessTextActive = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonSuccessTextDisabled = '#858585';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonErrorBackgroundDefault = '#e11010';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonErrorBackgroundHover = '#cb0e0e';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonErrorBackgroundActive = '#9e0b0b';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonErrorBackgroundDisabled = '#474747';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonErrorTextDefault = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonErrorTextHover = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonErrorTextActive = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonErrorTextDisabled = '#858585';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonWarningBackgroundDefault = '#fcbb54';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonWarningBackgroundHover = '#e3a84c';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonWarningBackgroundActive = '#b0833b';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonWarningBackgroundDisabled = '#474747';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonWarningTextDefault = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonWarningTextHover = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonWarningTextActive = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonWarningTextDisabled = '#858585';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonInfoBackgroundDefault = '#4285f4';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonInfoBackgroundHover = '#3b78dc';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonInfoBackgroundActive = '#2e5dab';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonInfoBackgroundDisabled = '#474747';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonInfoTextDefault = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonInfoTextHover = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonInfoTextActive = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonInfoTextDisabled = '#858585';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonGreyBackgroundDefault = '#666666';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonGreyBackgroundHover = '#5c5c5c';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonGreyBackgroundActive = '#525252';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonGreyBackgroundDisabled = '#474747';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonGreyTextDefault = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonGreyTextHover = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonGreyTextActive = '#ffffff';
+const RedsiftColorDarkComponentsButtonsPrimaryButtonGreyTextDisabled = '#858585';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonPrimaryBackgroundDefault = 'transparent';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonPrimaryBackgroundHover = '#142849';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonPrimaryBackgroundActive = '#0d1b31';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonPrimaryBackgroundDisabled = '#333333';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonPrimaryTextDefault = '#4285f4';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonPrimaryTextHover = '#689df6';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonPrimaryTextActive = '#8eb6f8';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonPrimaryTextDisabled = '#858585';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonSecondaryBackgroundDefault = 'transparent';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonSecondaryBackgroundHover = '#183731';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonSecondaryBackgroundActive = '#102521';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonSecondaryBackgroundDisabled = '#333333';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonSecondaryTextDefault = '#51b7a4';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonSecondaryTextHover = '#74c5b6';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonSecondaryTextActive = '#97d4c8';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonSecondaryTextDisabled = '#858585';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonSuccessBackgroundDefault = 'transparent';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonSuccessBackgroundHover = '#01341d';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonSuccessBackgroundActive = '#002213';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonSuccessBackgroundDisabled = '#333333';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonSuccessTextDefault = '#02ac61';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonSuccessTextHover = '#35bd81';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonSuccessTextActive = '#67cda0';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonSuccessTextDisabled = '#858585';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonErrorBackgroundDefault = 'transparent';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonErrorBackgroundHover = '#430505';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonErrorBackgroundActive = '#2d0303';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonErrorBackgroundDisabled = '#333333';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonErrorTextDefault = '#e11010';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonErrorTextHover = '#e74040';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonErrorTextActive = '#ed7070';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonErrorTextDisabled = '#858585';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonWarningBackgroundDefault = 'transparent';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonWarningBackgroundHover = '#4c3819';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonWarningBackgroundActive = '#322511';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonWarningBackgroundDisabled = '#333333';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonWarningTextDefault = '#fcbb54';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonWarningTextHover = '#fdc976';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonWarningTextActive = '#fdd698';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonWarningTextDisabled = '#858585';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonInfoBackgroundDefault = 'transparent';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonInfoBackgroundHover = '#142849';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonInfoBackgroundActive = '#0d1b31';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonInfoBackgroundDisabled = '#333333';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonInfoTextDefault = '#4285f4';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonInfoTextHover = '#689df6';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonInfoTextActive = '#8eb6f8';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonInfoTextDisabled = '#858585';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonGreyBackgroundDefault = 'transparent';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonGreyBackgroundHover = '#474747';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonGreyBackgroundActive = '#333333';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonGreyBackgroundDisabled = '#333333';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonGreyTextDefault = '#666666';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonGreyTextHover = '#858585';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonGreyTextActive = '#a3a3a3';
+const RedsiftColorDarkComponentsButtonsSecondaryButtonGreyTextDisabled = '#858585';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonPrimaryBackgroundDefault = 'transparent';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonPrimaryBackgroundHover = '#142849';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonPrimaryBackgroundActive = '#0d1b31';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonPrimaryBackgroundDisabled = '#333333';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonPrimaryTextDefault = '#4285f4';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonPrimaryTextHover = '#689df6';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonPrimaryTextActive = '#8eb6f8';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonPrimaryTextDisabled = '#858585';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonSecondaryBackgroundDefault = 'transparent';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonSecondaryBackgroundHover = '#183731';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonSecondaryBackgroundActive = '#102521';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonSecondaryBackgroundDisabled = '#333333';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonSecondaryTextDefault = '#51b7a4';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonSecondaryTextHover = '#74c5b6';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonSecondaryTextActive = '#97d4c8';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonSecondaryTextDisabled = '#858585';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonSuccessBackgroundDefault = 'transparent';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonSuccessBackgroundHover = '#01341d';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonSuccessBackgroundActive = '#002213';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonSuccessBackgroundDisabled = '#333333';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonSuccessTextDefault = '#02ac61';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonSuccessTextHover = '#35bd81';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonSuccessTextActive = '#67cda0';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonSuccessTextDisabled = '#858585';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonErrorBackgroundDefault = 'transparent';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonErrorBackgroundHover = '#430505';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonErrorBackgroundActive = '#2d0303';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonErrorBackgroundDisabled = '#333333';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonErrorTextDefault = '#e11010';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonErrorTextHover = '#e74040';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonErrorTextActive = '#ed7070';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonErrorTextDisabled = '#858585';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonWarningBackgroundDefault = 'transparent';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonWarningBackgroundHover = '#4c3819';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonWarningBackgroundActive = '#322511';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonWarningBackgroundDisabled = '#333333';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonWarningTextDefault = '#fcbb54';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonWarningTextHover = '#fdc976';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonWarningTextActive = '#fdd698';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonWarningTextDisabled = '#858585';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonInfoBackgroundDefault = 'transparent';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonInfoBackgroundHover = '#142849';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonInfoBackgroundActive = '#0d1b31';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonInfoBackgroundDisabled = '#333333';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonInfoTextDefault = '#4285f4';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonInfoTextHover = '#689df6';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonInfoTextActive = '#8eb6f8';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonInfoTextDisabled = '#858585';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonGreyBackgroundDefault = 'transparent';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonGreyBackgroundHover = '#474747';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonGreyBackgroundActive = '#333333';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonGreyBackgroundDisabled = '#333333';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonGreyTextDefault = '#666666';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonGreyTextHover = '#858585';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonGreyTextActive = '#a3a3a3';
+const RedsiftColorDarkComponentsButtonsUnstyledButtonGreyTextDisabled = '#858585';
+const RedsiftColorDarkComponentsAiAiBorder = '#e11010';
+const RedsiftColorDarkComponentsAiAiIcon = '#e11010';
+const RedsiftColorDarkComponentsSpinnerSpinner = '#142849';
+const RedsiftColorDarkComponentsAlertSuccessBackground = '#029b57';
+const RedsiftColorDarkComponentsAlertSuccessIcon = '#017844';
+const RedsiftColorDarkComponentsAlertText = '#f2f2f2';
+const RedsiftColorDarkComponentsAlertErrorBackground = '#cb0e0e';
+const RedsiftColorDarkComponentsAlertErrorIcon = '#9e0b0b';
+const RedsiftColorDarkComponentsAlertWarningBackground = '#e3a84c';
+const RedsiftColorDarkComponentsAlertWarningIcon = '#b0833b';
+const RedsiftColorDarkComponentsAlertInfoBackground = '#3b78dc';
+const RedsiftColorDarkComponentsAlertInfoIcon = '#2e5dab';
+const RedsiftColorDarkComponentsIconsDefault = '#f2f2f2';
+const RedsiftColorDarkComponentsDropdownsAndMenusDefaultBackground = '#474747';
+const RedsiftColorDarkComponentsDropdownsAndMenusDefaultText = '#ffffff';
+const RedsiftColorDarkComponentsDropdownsAndMenusDividers = '#666666';
+const RedsiftColorDarkComponentsDropdownsAndMenusHoverBackground = '#666666';
+const RedsiftColorDarkComponentsDropdownsAndMenusHoverText = '#ffffff';
+const RedsiftColorDarkComponentsDropdownsAndMenusClickBackground = '#e0e0e0';
+const RedsiftColorDarkComponentsDropdownsAndMenusClickText = '#1c1c1c';
+const RedsiftColorDarkComponentsDropdownsAndMenusToggleActiveText = '#ffffff';
+const RedsiftColorDarkComponentsDropdownsAndMenusToggleActiveBackground = '#4285f4';
+const RedsiftColorDarkComponentsDropdownsAndMenusToggleActiveHoverText = '#ffffff';
+const RedsiftColorDarkComponentsDropdownsAndMenusToggleActiveHoverBackground = '#3b78dc';
+const RedsiftColorDarkComponentsDropdownsAndMenusToggleActiveClickText = '#1c1c1c';
+const RedsiftColorDarkComponentsDropdownsAndMenusToggleActiveClickBackground = '#e0e0e0';
+const RedsiftColorDarkComponentsCheckboxFillDefault = '#4285f4';
+const RedsiftColorDarkComponentsCheckboxFillDefaultHover = '#142849';
+const RedsiftColorDarkComponentsCheckboxFillUncolored = '#666666';
+const RedsiftColorDarkComponentsCheckboxFillUncoloredHover = '#474747';
+const RedsiftColorDarkComponentsCheckboxFillDisabled = '#e0e0e0';
+const RedsiftColorDarkComponentsCheckboxFillInvalid = '#e11010';
+const RedsiftColorDarkComponentsCheckboxFillInvalidHover = '#f39f9f';
+const RedsiftColorDarkComponentsCheckboxTextDefault = '#ffffff';
+const RedsiftColorDarkComponentsCheckboxTextInvalid = '#e11010';
+const RedsiftColorDarkComponentsCheckboxTextDisabled = '#e0e0e0';
+const RedsiftColorDarkComponentsRadioFillDefault = '#4285f4';
+const RedsiftColorDarkComponentsRadioFillDefaultHover = '#142849';
+const RedsiftColorDarkComponentsRadioFillUncolored = '#666666';
+const RedsiftColorDarkComponentsRadioFillUncoloredHover = '#474747';
+const RedsiftColorDarkComponentsRadioFillDisabled = '#e0e0e0';
+const RedsiftColorDarkComponentsRadioFillInvalid = '#e11010';
+const RedsiftColorDarkComponentsRadioFillInvalidHover = '#f39f9f';
+const RedsiftColorDarkComponentsRadioTextDefault = '#ffffff';
+const RedsiftColorDarkComponentsRadioTextInvalid = '#e11010';
+const RedsiftColorDarkComponentsRadioTextDisabled = '#e0e0e0';
+const RedsiftColorDarkComponentsSwitchDotDefault = '#0d1b31';
+const RedsiftColorDarkComponentsSwitchDotDefaultHover = '#3b78dc';
+const RedsiftColorDarkComponentsSwitchDotUncolored = '#666666';
+const RedsiftColorDarkComponentsSwitchDotUncoloredHover = '#474747';
+const RedsiftColorDarkComponentsSwitchDotDisabled = '#0d1b31';
+const RedsiftColorDarkComponentsSwitchDotInvalid = '#0d1b31';
+const RedsiftColorDarkComponentsSwitchDotInvalidHover = '#f39f9f';
+const RedsiftColorDarkComponentsSwitchBackgroundDefault = '#3b78dc';
+const RedsiftColorDarkComponentsSwitchBackgroundDefaultActive = '#4285f4';
+const RedsiftColorDarkComponentsSwitchBackgroundUncolored = '#474747';
+const RedsiftColorDarkComponentsSwitchBackgroundUncoloredActive = '#666666';
+const RedsiftColorDarkComponentsSwitchBackgroundDisabled = '#e0e0e0';
+const RedsiftColorDarkComponentsSwitchBackgroundDisabledActive = '#e0e0e0';
+const RedsiftColorDarkComponentsSwitchBackgroundInvalid = '#f39f9f';
+const RedsiftColorDarkComponentsSwitchBackgroundInvalidActive = '#e11010';
+const RedsiftColorDarkComponentsSwitchTextDefault = '#ffffff';
+const RedsiftColorDarkComponentsSwitchTextInvalid = '#e11010';
+const RedsiftColorDarkComponentsSwitchTextDisabled = '#e0e0e0';
+const RedsiftColorDarkComponentsTabsLine = '#666666';
+const RedsiftColorDarkComponentsModalBackground = '#1c1c1c';
+const RedsiftColorLightComponentsPageBackground = '#ffffff';
+const RedsiftColorLightComponentsTextPrimary = '#333333';
+const RedsiftColorLightComponentsTextSecondary = '#474747';
+const RedsiftColorLightComponentsRedSiftLogoTextRed = '#e11010';
+const RedsiftColorLightComponentsRedSiftLogoTextWhite = '#ffffff';
+const RedsiftColorLightComponentsRedSiftLogoTextGrey = '#333333';
+const RedsiftColorLightComponentsRedSiftLogoIconBackground = '#e11010';
+const RedsiftColorLightComponentsRedSiftLogoIconR = '#ffffff';
+const RedsiftColorLightComponentsRedSiftLogoDiamondTopRight = '#e24e4e';
+const RedsiftColorLightComponentsRedSiftLogoDiamondBottomLeft = '#ffb3b3';
+const RedsiftColorLightComponentsRedSiftLogoDiamondBottomRight = '#ff8181';
+const RedsiftColorLightComponentsRedSiftLogoDiamondDark = '#e24e4e';
+const RedsiftColorLightComponentsRedSiftLogoDiamondMid = '#ff8181';
+const RedsiftColorLightComponentsRedSiftLogoDiamondLight = '#ffb3b3';
+const RedsiftColorLightComponentsProductLogosTextGrey = '#333333';
+const RedsiftColorLightComponentsProductLogosTextRed = '#e11010';
+const RedsiftColorLightComponentsProductLogosTextWhite = '#ffffff';
+const RedsiftColorLightComponentsProductLogosIconRed = '#e11010';
+const RedsiftColorLightComponentsProductLogosIconGrey = '#333333';
+const RedsiftColorLightComponentsSideNavigationBackground = '#f2f2f2';
+const RedsiftColorLightComponentsSideNavigationMenuItemTextResting = '#474747';
+const RedsiftColorLightComponentsSideNavigationMenuItemTextDisabled = '#666666';
+const RedsiftColorLightComponentsSideNavigationMenuItemTextHover = '#1c1c1c';
+const RedsiftColorLightComponentsSideNavigationMenuItemBackgroundHover = '#E6E6E6';
+const RedsiftColorLightComponentsSideNavigationMenuItemBackgroundSecondary = 'transparent';
+const RedsiftColorLightComponentsSideNavigationMenuItemBackgroundActive = '#e0e0e0';
+const RedsiftColorLightComponentsSideNavigationMenuItemActive = '#1c1c1c';
+const RedsiftColorLightComponentsSideNavigationScrollbarResting = '#e0e0e0';
+const RedsiftColorLightComponentsSideNavigationScrollbarHover = '#666666';
+const RedsiftColorLightComponentsSideNavigationRightLine = '#e9e9e9';
+const RedsiftColorLightComponentsSideNavigationCurrentMarker = '#1c1c1c';
+const RedsiftColorLightComponentsAppBarBackground = '#ffffff';
+const RedsiftColorLightComponentsAppBarBreadcrumbDefault = '#1c1c1c';
+const RedsiftColorLightComponentsAppBarBreadcrumbHover = '#3b78dc';
+const RedsiftColorLightComponentsAppBarBreadcrumbDown = '#2e5dab';
+const RedsiftColorLightComponentsAppBarIconBackgroundHover = '#f2f2f2';
+const RedsiftColorLightComponentsAppBarIconBackgroundDown = '#e0e0e0';
+const RedsiftColorLightComponentsAppBarIconBackgroundActive = '#f2f2f2';
+const RedsiftColorLightComponentsAppBarIconBackgroundActiveHover = '#e0e0e0';
+const RedsiftColorLightComponentsAppBarIconBackgroundActiveDown = '#e0e0e0';
+const RedsiftColorLightComponentsAppBarBorder = '#e9e9e9';
+const RedsiftColorLightComponentsTooltipBackground = '#ffffff';
+const RedsiftColorLightComponentsTooltipText = '#333333';
+const RedsiftColorLightComponentsButtonsPrimaryButtonPrimaryBackgroundDefault = '#4285f4';
+const RedsiftColorLightComponentsButtonsPrimaryButtonPrimaryBackgroundHover = '#3b78dc';
+const RedsiftColorLightComponentsButtonsPrimaryButtonPrimaryBackgroundActive = '#2e5dab';
+const RedsiftColorLightComponentsButtonsPrimaryButtonPrimaryBackgroundDisabled = '#e0e0e0';
+const RedsiftColorLightComponentsButtonsPrimaryButtonPrimaryTextDefault = '#ffffff';
+const RedsiftColorLightComponentsButtonsPrimaryButtonPrimaryTextHover = '#ffffff';
+const RedsiftColorLightComponentsButtonsPrimaryButtonPrimaryTextActive = '#ffffff';
+const RedsiftColorLightComponentsButtonsPrimaryButtonPrimaryTextDisabled = '#858585';
+const RedsiftColorLightComponentsButtonsPrimaryButtonSecondaryBackgroundDefault = '#51b7a4';
+const RedsiftColorLightComponentsButtonsPrimaryButtonSecondaryBackgroundHover = '#49a594';
+const RedsiftColorLightComponentsButtonsPrimaryButtonSecondaryBackgroundActive = '#398073';
+const RedsiftColorLightComponentsButtonsPrimaryButtonSecondaryBackgroundDisabled = '#e0e0e0';
+const RedsiftColorLightComponentsButtonsPrimaryButtonSecondaryTextDefault = '#ffffff';
+const RedsiftColorLightComponentsButtonsPrimaryButtonSecondaryTextHover = '#ffffff';
+const RedsiftColorLightComponentsButtonsPrimaryButtonSecondaryTextActive = '#ffffff';
+const RedsiftColorLightComponentsButtonsPrimaryButtonSecondaryTextDisabled = '#858585';
+const RedsiftColorLightComponentsButtonsPrimaryButtonSuccessBackgroundDefault = '#02ac61';
+const RedsiftColorLightComponentsButtonsPrimaryButtonSuccessBackgroundHover = '#029b57';
+const RedsiftColorLightComponentsButtonsPrimaryButtonSuccessBackgroundActive = '#017844';
+const RedsiftColorLightComponentsButtonsPrimaryButtonSuccessBackgroundDisabled = '#e0e0e0';
+const RedsiftColorLightComponentsButtonsPrimaryButtonSuccessTextDefault = '#ffffff';
+const RedsiftColorLightComponentsButtonsPrimaryButtonSuccessTextHover = '#ffffff';
+const RedsiftColorLightComponentsButtonsPrimaryButtonSuccessTextActive = '#ffffff';
+const RedsiftColorLightComponentsButtonsPrimaryButtonSuccessTextDisabled = '#858585';
+const RedsiftColorLightComponentsButtonsPrimaryButtonErrorBackgroundDefault = '#e11010';
+const RedsiftColorLightComponentsButtonsPrimaryButtonErrorBackgroundHover = '#cb0e0e';
+const RedsiftColorLightComponentsButtonsPrimaryButtonErrorBackgroundActive = '#9e0b0b';
+const RedsiftColorLightComponentsButtonsPrimaryButtonErrorBackgroundDisabled = '#e0e0e0';
+const RedsiftColorLightComponentsButtonsPrimaryButtonErrorTextDefault = '#ffffff';
+const RedsiftColorLightComponentsButtonsPrimaryButtonErrorTextHover = '#ffffff';
+const RedsiftColorLightComponentsButtonsPrimaryButtonErrorTextActive = '#ffffff';
+const RedsiftColorLightComponentsButtonsPrimaryButtonErrorTextDisabled = '#858585';
+const RedsiftColorLightComponentsButtonsPrimaryButtonWarningBackgroundDefault = '#fcbb54';
+const RedsiftColorLightComponentsButtonsPrimaryButtonWarningBackgroundHover = '#e3a84c';
+const RedsiftColorLightComponentsButtonsPrimaryButtonWarningBackgroundActive = '#b0833b';
+const RedsiftColorLightComponentsButtonsPrimaryButtonWarningBackgroundDisabled = '#e0e0e0';
+const RedsiftColorLightComponentsButtonsPrimaryButtonWarningTextDefault = '#ffffff';
+const RedsiftColorLightComponentsButtonsPrimaryButtonWarningTextHover = '#ffffff';
+const RedsiftColorLightComponentsButtonsPrimaryButtonWarningTextActive = '#ffffff';
+const RedsiftColorLightComponentsButtonsPrimaryButtonWarningTextDisabled = '#858585';
+const RedsiftColorLightComponentsButtonsPrimaryButtonInfoBackgroundDefault = '#4285f4';
+const RedsiftColorLightComponentsButtonsPrimaryButtonInfoBackgroundHover = '#3b78dc';
+const RedsiftColorLightComponentsButtonsPrimaryButtonInfoBackgroundActive = '#2e5dab';
+const RedsiftColorLightComponentsButtonsPrimaryButtonInfoBackgroundDisabled = '#e0e0e0';
+const RedsiftColorLightComponentsButtonsPrimaryButtonInfoTextDefault = '#ffffff';
+const RedsiftColorLightComponentsButtonsPrimaryButtonInfoTextHover = '#ffffff';
+const RedsiftColorLightComponentsButtonsPrimaryButtonInfoTextActive = '#ffffff';
+const RedsiftColorLightComponentsButtonsPrimaryButtonInfoTextDisabled = '#858585';
+const RedsiftColorLightComponentsButtonsPrimaryButtonGreyBackgroundDefault = '#666666';
+const RedsiftColorLightComponentsButtonsPrimaryButtonGreyBackgroundHover = '#5c5c5c';
+const RedsiftColorLightComponentsButtonsPrimaryButtonGreyBackgroundActive = '#525252';
+const RedsiftColorLightComponentsButtonsPrimaryButtonGreyBackgroundDisabled = '#e0e0e0';
+const RedsiftColorLightComponentsButtonsPrimaryButtonGreyTextDefault = '#ffffff';
+const RedsiftColorLightComponentsButtonsPrimaryButtonGreyTextHover = '#ffffff';
+const RedsiftColorLightComponentsButtonsPrimaryButtonGreyTextActive = '#ffffff';
+const RedsiftColorLightComponentsButtonsPrimaryButtonGreyTextDisabled = '#858585';
+const RedsiftColorLightComponentsButtonsSecondaryButtonPrimaryBackgroundDefault = 'transparent';
+const RedsiftColorLightComponentsButtonsSecondaryButtonPrimaryBackgroundHover = '#d9e7fd';
+const RedsiftColorLightComponentsButtonsSecondaryButtonPrimaryBackgroundActive = '#b3cefb';
+const RedsiftColorLightComponentsButtonsSecondaryButtonPrimaryBackgroundDisabled = '#ffffff';
+const RedsiftColorLightComponentsButtonsSecondaryButtonPrimaryTextDefault = '#4285f4';
+const RedsiftColorLightComponentsButtonsSecondaryButtonPrimaryTextHover = '#3b78dc';
+const RedsiftColorLightComponentsButtonsSecondaryButtonPrimaryTextActive = '#2e5dab';
+const RedsiftColorLightComponentsButtonsSecondaryButtonPrimaryTextDisabled = '#858585';
+const RedsiftColorLightComponentsButtonsSecondaryButtonSecondaryBackgroundDefault = 'transparent';
+const RedsiftColorLightComponentsButtonsSecondaryButtonSecondaryBackgroundHover = '#dcf1ed';
+const RedsiftColorLightComponentsButtonsSecondaryButtonSecondaryBackgroundActive = '#b9e2db';
+const RedsiftColorLightComponentsButtonsSecondaryButtonSecondaryBackgroundDisabled = '#ffffff';
+const RedsiftColorLightComponentsButtonsSecondaryButtonSecondaryTextDefault = '#51b7a4';
+const RedsiftColorLightComponentsButtonsSecondaryButtonSecondaryTextHover = '#49a594';
+const RedsiftColorLightComponentsButtonsSecondaryButtonSecondaryTextActive = '#398073';
+const RedsiftColorLightComponentsButtonsSecondaryButtonSecondaryTextDisabled = '#858585';
+const RedsiftColorLightComponentsButtonsSecondaryButtonSuccessBackgroundDefault = 'transparent';
+const RedsiftColorLightComponentsButtonsSecondaryButtonSuccessBackgroundHover = '#cceedf';
+const RedsiftColorLightComponentsButtonsSecondaryButtonSuccessBackgroundActive = '#9adec0';
+const RedsiftColorLightComponentsButtonsSecondaryButtonSuccessBackgroundDisabled = '#ffffff';
+const RedsiftColorLightComponentsButtonsSecondaryButtonSuccessTextDefault = '#02ac61';
+const RedsiftColorLightComponentsButtonsSecondaryButtonSuccessTextHover = '#029b57';
+const RedsiftColorLightComponentsButtonsSecondaryButtonSuccessTextActive = '#017844';
+const RedsiftColorLightComponentsButtonsSecondaryButtonSuccessTextDisabled = '#858585';
+const RedsiftColorLightComponentsButtonsSecondaryButtonErrorBackgroundDefault = 'transparent';
+const RedsiftColorLightComponentsButtonsSecondaryButtonErrorBackgroundHover = '#f9cfcf';
+const RedsiftColorLightComponentsButtonsSecondaryButtonErrorBackgroundActive = '#f39f9f';
+const RedsiftColorLightComponentsButtonsSecondaryButtonErrorBackgroundDisabled = '#ffffff';
+const RedsiftColorLightComponentsButtonsSecondaryButtonErrorTextDefault = '#e11010';
+const RedsiftColorLightComponentsButtonsSecondaryButtonErrorTextHover = '#cb0e0e';
+const RedsiftColorLightComponentsButtonsSecondaryButtonErrorTextActive = '#9e0b0b';
+const RedsiftColorLightComponentsButtonsSecondaryButtonErrorTextDisabled = '#858585';
+const RedsiftColorLightComponentsButtonsSecondaryButtonWarningBackgroundDefault = 'transparent';
+const RedsiftColorLightComponentsButtonsSecondaryButtonWarningBackgroundHover = '#fef1dd';
+const RedsiftColorLightComponentsButtonsSecondaryButtonWarningBackgroundActive = '#fee4bb';
+const RedsiftColorLightComponentsButtonsSecondaryButtonWarningBackgroundDisabled = '#ffffff';
+const RedsiftColorLightComponentsButtonsSecondaryButtonWarningTextDefault = '#fcbb54';
+const RedsiftColorLightComponentsButtonsSecondaryButtonWarningTextHover = '#e3a84c';
+const RedsiftColorLightComponentsButtonsSecondaryButtonWarningTextActive = '#b0833b';
+const RedsiftColorLightComponentsButtonsSecondaryButtonWarningTextDisabled = '#858585';
+const RedsiftColorLightComponentsButtonsSecondaryButtonInfoBackgroundDefault = 'transparent';
+const RedsiftColorLightComponentsButtonsSecondaryButtonInfoBackgroundHover = '#d9e7fd';
+const RedsiftColorLightComponentsButtonsSecondaryButtonInfoBackgroundActive = '#b3cefb';
+const RedsiftColorLightComponentsButtonsSecondaryButtonInfoBackgroundDisabled = '#ffffff';
+const RedsiftColorLightComponentsButtonsSecondaryButtonInfoTextDefault = '#4285f4';
+const RedsiftColorLightComponentsButtonsSecondaryButtonInfoTextHover = '#3b78dc';
+const RedsiftColorLightComponentsButtonsSecondaryButtonInfoTextActive = '#2e5dab';
+const RedsiftColorLightComponentsButtonsSecondaryButtonInfoTextDisabled = '#858585';
+const RedsiftColorLightComponentsButtonsSecondaryButtonGreyBackgroundDefault = 'transparent';
+const RedsiftColorLightComponentsButtonsSecondaryButtonGreyBackgroundHover = '#f2f2f2';
+const RedsiftColorLightComponentsButtonsSecondaryButtonGreyBackgroundActive = '#e0e0e0';
+const RedsiftColorLightComponentsButtonsSecondaryButtonGreyBackgroundDisabled = '#ffffff';
+const RedsiftColorLightComponentsButtonsSecondaryButtonGreyTextDefault = '#666666';
+const RedsiftColorLightComponentsButtonsSecondaryButtonGreyTextHover = '#525252';
+const RedsiftColorLightComponentsButtonsSecondaryButtonGreyTextActive = '#525252';
+const RedsiftColorLightComponentsButtonsSecondaryButtonGreyTextDisabled = '#858585';
+const RedsiftColorLightComponentsButtonsUnstyledButtonPrimaryBackgroundDefault = 'transparent';
+const RedsiftColorLightComponentsButtonsUnstyledButtonPrimaryBackgroundHover = '#d9e7fd';
+const RedsiftColorLightComponentsButtonsUnstyledButtonPrimaryBackgroundActive = '#b3cefb';
+const RedsiftColorLightComponentsButtonsUnstyledButtonPrimaryBackgroundDisabled = '#ffffff';
+const RedsiftColorLightComponentsButtonsUnstyledButtonPrimaryTextDefault = '#4285f4';
+const RedsiftColorLightComponentsButtonsUnstyledButtonPrimaryTextHover = '#3b78dc';
+const RedsiftColorLightComponentsButtonsUnstyledButtonPrimaryTextActive = '#2e5dab';
+const RedsiftColorLightComponentsButtonsUnstyledButtonPrimaryTextDisabled = '#858585';
+const RedsiftColorLightComponentsButtonsUnstyledButtonSecondaryBackgroundDefault = 'transparent';
+const RedsiftColorLightComponentsButtonsUnstyledButtonSecondaryBackgroundHover = '#dcf1ed';
+const RedsiftColorLightComponentsButtonsUnstyledButtonSecondaryBackgroundActive = '#b9e2db';
+const RedsiftColorLightComponentsButtonsUnstyledButtonSecondaryBackgroundDisabled = '#ffffff';
+const RedsiftColorLightComponentsButtonsUnstyledButtonSecondaryTextDefault = '#51b7a4';
+const RedsiftColorLightComponentsButtonsUnstyledButtonSecondaryTextHover = '#49a594';
+const RedsiftColorLightComponentsButtonsUnstyledButtonSecondaryTextActive = '#398073';
+const RedsiftColorLightComponentsButtonsUnstyledButtonSecondaryTextDisabled = '#858585';
+const RedsiftColorLightComponentsButtonsUnstyledButtonSuccessBackgroundDefault = 'transparent';
+const RedsiftColorLightComponentsButtonsUnstyledButtonSuccessBackgroundHover = '#cceedf';
+const RedsiftColorLightComponentsButtonsUnstyledButtonSuccessBackgroundActive = '#9adec0';
+const RedsiftColorLightComponentsButtonsUnstyledButtonSuccessBackgroundDisabled = '#ffffff';
+const RedsiftColorLightComponentsButtonsUnstyledButtonSuccessTextDefault = '#02ac61';
+const RedsiftColorLightComponentsButtonsUnstyledButtonSuccessTextHover = '#029b57';
+const RedsiftColorLightComponentsButtonsUnstyledButtonSuccessTextActive = '#017844';
+const RedsiftColorLightComponentsButtonsUnstyledButtonSuccessTextDisabled = '#858585';
+const RedsiftColorLightComponentsButtonsUnstyledButtonErrorBackgroundDefault = 'transparent';
+const RedsiftColorLightComponentsButtonsUnstyledButtonErrorBackgroundHover = '#f9cfcf';
+const RedsiftColorLightComponentsButtonsUnstyledButtonErrorBackgroundActive = '#f39f9f';
+const RedsiftColorLightComponentsButtonsUnstyledButtonErrorBackgroundDisabled = '#ffffff';
+const RedsiftColorLightComponentsButtonsUnstyledButtonErrorTextDefault = '#e11010';
+const RedsiftColorLightComponentsButtonsUnstyledButtonErrorTextHover = '#cb0e0e';
+const RedsiftColorLightComponentsButtonsUnstyledButtonErrorTextActive = '#9e0b0b';
+const RedsiftColorLightComponentsButtonsUnstyledButtonErrorTextDisabled = '#858585';
+const RedsiftColorLightComponentsButtonsUnstyledButtonWarningBackgroundDefault = 'transparent';
+const RedsiftColorLightComponentsButtonsUnstyledButtonWarningBackgroundHover = '#fef1dd';
+const RedsiftColorLightComponentsButtonsUnstyledButtonWarningBackgroundActive = '#fee4bb';
+const RedsiftColorLightComponentsButtonsUnstyledButtonWarningBackgroundDisabled = '#ffffff';
+const RedsiftColorLightComponentsButtonsUnstyledButtonWarningTextDefault = '#fcbb54';
+const RedsiftColorLightComponentsButtonsUnstyledButtonWarningTextHover = '#e3a84c';
+const RedsiftColorLightComponentsButtonsUnstyledButtonWarningTextActive = '#b0833b';
+const RedsiftColorLightComponentsButtonsUnstyledButtonWarningTextDisabled = '#858585';
+const RedsiftColorLightComponentsButtonsUnstyledButtonInfoBackgroundDefault = 'transparent';
+const RedsiftColorLightComponentsButtonsUnstyledButtonInfoBackgroundHover = '#d9e7fd';
+const RedsiftColorLightComponentsButtonsUnstyledButtonInfoBackgroundActive = '#b3cefb';
+const RedsiftColorLightComponentsButtonsUnstyledButtonInfoBackgroundDisabled = '#ffffff';
+const RedsiftColorLightComponentsButtonsUnstyledButtonInfoTextDefault = '#4285f4';
+const RedsiftColorLightComponentsButtonsUnstyledButtonInfoTextHover = '#3b78dc';
+const RedsiftColorLightComponentsButtonsUnstyledButtonInfoTextActive = '#2e5dab';
+const RedsiftColorLightComponentsButtonsUnstyledButtonInfoTextDisabled = '#858585';
+const RedsiftColorLightComponentsButtonsUnstyledButtonGreyBackgroundDefault = 'transparent';
+const RedsiftColorLightComponentsButtonsUnstyledButtonGreyBackgroundHover = '#f2f2f2';
+const RedsiftColorLightComponentsButtonsUnstyledButtonGreyBackgroundActive = '#e0e0e0';
+const RedsiftColorLightComponentsButtonsUnstyledButtonGreyBackgroundDisabled = '#ffffff';
+const RedsiftColorLightComponentsButtonsUnstyledButtonGreyTextDefault = '#666666';
+const RedsiftColorLightComponentsButtonsUnstyledButtonGreyTextHover = '#525252';
+const RedsiftColorLightComponentsButtonsUnstyledButtonGreyTextActive = '#525252';
+const RedsiftColorLightComponentsButtonsUnstyledButtonGreyTextDisabled = '#858585';
+const RedsiftColorLightComponentsAiAiBorder = '#e11010';
+const RedsiftColorLightComponentsAiAiIcon = '#e11010';
+const RedsiftColorLightComponentsSpinnerSpinner = '#4285f4';
+const RedsiftColorLightComponentsAlertSuccessBackground = '#cceedf';
+const RedsiftColorLightComponentsAlertSuccessIcon = '#02ac61';
+const RedsiftColorLightComponentsAlertText = '#333333';
+const RedsiftColorLightComponentsAlertErrorBackground = '#f9cfcf';
+const RedsiftColorLightComponentsAlertErrorIcon = '#e11010';
+const RedsiftColorLightComponentsAlertWarningBackground = '#fef1dd';
+const RedsiftColorLightComponentsAlertWarningIcon = '#fcbb54';
+const RedsiftColorLightComponentsAlertInfoBackground = '#d9e7fd';
+const RedsiftColorLightComponentsAlertInfoIcon = '#4285f4';
+const RedsiftColorLightComponentsIconsDefault = '#333333';
+const RedsiftColorLightComponentsDropdownsAndMenusDefaultBackground = '#ffffff';
+const RedsiftColorLightComponentsDropdownsAndMenusDefaultText = '#333333';
+const RedsiftColorLightComponentsDropdownsAndMenusDividers = '#e0e0e0';
+const RedsiftColorLightComponentsDropdownsAndMenusHoverBackground = '#f2f2f2';
+const RedsiftColorLightComponentsDropdownsAndMenusHoverText = '#333333';
+const RedsiftColorLightComponentsDropdownsAndMenusClickBackground = '#333333';
+const RedsiftColorLightComponentsDropdownsAndMenusClickText = '#ffffff';
+const RedsiftColorLightComponentsDropdownsAndMenusToggleActiveText = '#ffffff';
+const RedsiftColorLightComponentsDropdownsAndMenusToggleActiveBackground = '#4285f4';
+const RedsiftColorLightComponentsDropdownsAndMenusToggleActiveHoverText = '#ffffff';
+const RedsiftColorLightComponentsDropdownsAndMenusToggleActiveHoverBackground = '#3b78dc';
+const RedsiftColorLightComponentsDropdownsAndMenusToggleActiveClickText = '#ffffff';
+const RedsiftColorLightComponentsDropdownsAndMenusToggleActiveClickBackground = '#333333';
+const RedsiftColorLightComponentsCheckboxFillDefault = '#4285f4';
+const RedsiftColorLightComponentsCheckboxFillDefaultHover = '#d9e7fd';
+const RedsiftColorLightComponentsCheckboxFillUncolored = '#666666';
+const RedsiftColorLightComponentsCheckboxFillUncoloredHover = '#474747';
+const RedsiftColorLightComponentsCheckboxFillDisabled = '#e0e0e0';
+const RedsiftColorLightComponentsCheckboxFillInvalid = '#e11010';
+const RedsiftColorLightComponentsCheckboxFillInvalidHover = '#f9cfcf';
+const RedsiftColorLightComponentsCheckboxTextDefault = '#333333';
+const RedsiftColorLightComponentsCheckboxTextInvalid = '#e11010';
+const RedsiftColorLightComponentsCheckboxTextDisabled = '#e0e0e0';
+const RedsiftColorLightComponentsRadioFillDefault = '#4285f4';
+const RedsiftColorLightComponentsRadioFillDefaultHover = '#d9e7fd';
+const RedsiftColorLightComponentsRadioFillUncolored = '#666666';
+const RedsiftColorLightComponentsRadioFillUncoloredHover = '#474747';
+const RedsiftColorLightComponentsRadioFillDisabled = '#e0e0e0';
+const RedsiftColorLightComponentsRadioFillInvalid = '#e11010';
+const RedsiftColorLightComponentsRadioFillInvalidHover = '#f9cfcf';
+const RedsiftColorLightComponentsRadioTextDefault = '#333333';
+const RedsiftColorLightComponentsRadioTextInvalid = '#e11010';
+const RedsiftColorLightComponentsRadioTextDisabled = '#e0e0e0';
+const RedsiftColorLightComponentsSwitchDotDefault = '#ffffff';
+const RedsiftColorLightComponentsSwitchDotDefaultHover = '#d9e7fd';
+const RedsiftColorLightComponentsSwitchDotUncolored = '#ffffff';
+const RedsiftColorLightComponentsSwitchDotUncoloredHover = '#474747';
+const RedsiftColorLightComponentsSwitchDotDisabled = '#ffffff';
+const RedsiftColorLightComponentsSwitchDotInvalid = '#ffffff';
+const RedsiftColorLightComponentsSwitchDotInvalidHover = '#f9cfcf';
+const RedsiftColorLightComponentsSwitchBackgroundDefault = '#d9e7fd';
+const RedsiftColorLightComponentsSwitchBackgroundDefaultActive = '#4285f4';
+const RedsiftColorLightComponentsSwitchBackgroundUncolored = '#474747';
+const RedsiftColorLightComponentsSwitchBackgroundUncoloredActive = '#666666';
+const RedsiftColorLightComponentsSwitchBackgroundDisabled = '#e0e0e0';
+const RedsiftColorLightComponentsSwitchBackgroundDisabledActive = '#666666';
+const RedsiftColorLightComponentsSwitchBackgroundInvalid = '#f9cfcf';
+const RedsiftColorLightComponentsSwitchBackgroundInvalidActive = '#e11010';
+const RedsiftColorLightComponentsSwitchTextDefault = '#333333';
+const RedsiftColorLightComponentsSwitchTextInvalid = '#e11010';
+const RedsiftColorLightComponentsSwitchTextDisabled = '#e0e0e0';
+const RedsiftColorLightComponentsTabsLine = '#e0e0e0';
+const RedsiftColorLightComponentsModalBackground = '#ffffff';
+const RedsiftColorRedL4 = '#f9cfcf';
+const RedsiftColorRedL3 = '#f39f9f';
+const RedsiftColorRedL2 = '#ed7070';
+const RedsiftColorRedL1 = '#e74040';
+const RedsiftColorRedN = '#e11010';
+const RedsiftColorRedD1 = '#cb0e0e';
+const RedsiftColorRedD2 = '#9e0b0b';
+const RedsiftColorRedD3 = '#430505';
+const RedsiftColorRedD4 = '#2d0303';
+const RedsiftColorBlueL4 = '#d9e7fd';
+const RedsiftColorBlueL3 = '#b3cefb';
+const RedsiftColorBlueL2 = '#8eb6f8';
+const RedsiftColorBlueL1 = '#689df6';
+const RedsiftColorBlueN = '#4285f4';
+const RedsiftColorBlueD1 = '#3b78dc';
+const RedsiftColorBlueD2 = '#2e5dab';
+const RedsiftColorBlueD3 = '#142849';
+const RedsiftColorBlueD4 = '#0d1b31';
+const RedsiftColorTealL4 = '#dcf1ed';
+const RedsiftColorTealL3 = '#b9e2db';
+const RedsiftColorTealL2 = '#97d4c8';
+const RedsiftColorTealL1 = '#74c5b6';
+const RedsiftColorTealN = '#51b7a4';
+const RedsiftColorTealD1 = '#49a594';
+const RedsiftColorTealD2 = '#398073';
+const RedsiftColorTealD3 = '#183731';
+const RedsiftColorTealD4 = '#102521';
+const RedsiftColorGreyL5 = '#ffffff';
+const RedsiftColorGreyL4 = '#f2f2f2';
+const RedsiftColorGreyL3 = '#e0e0e0';
+const RedsiftColorGreyL2 = '#a3a3a3';
+const RedsiftColorGreyL1 = '#858585';
+const RedsiftColorGreyN = '#666666';
+const RedsiftColorGreyD1 = '#5c5c5c';
+const RedsiftColorGreyD2 = '#525252';
+const RedsiftColorGreyD3 = '#474747';
+const RedsiftColorGreyD4 = '#333333';
+const RedsiftColorGreyD5 = '#1c1c1c';
+const RedsiftColorGreenL4 = '#cceedf';
+const RedsiftColorGreenL3 = '#9adec0';
+const RedsiftColorGreenL2 = '#67cda0';
+const RedsiftColorGreenL1 = '#35bd81';
+const RedsiftColorGreenN = '#02ac61';
+const RedsiftColorGreenD1 = '#029b57';
+const RedsiftColorGreenD2 = '#017844';
+const RedsiftColorGreenD3 = '#01341d';
+const RedsiftColorGreenD4 = '#002213';
+const RedsiftColorYellowL4 = '#fef1dd';
+const RedsiftColorYellowL3 = '#fee4bb';
+const RedsiftColorYellowL2 = '#fdd698';
+const RedsiftColorYellowL1 = '#fdc976';
+const RedsiftColorYellowN = '#fcbb54';
+const RedsiftColorYellowD1 = '#e3a84c';
+const RedsiftColorYellowD2 = '#b0833b';
+const RedsiftColorYellowD3 = '#4c3819';
+const RedsiftColorYellowD4 = '#322511';
+const RedsiftColorPrimaryL4 = '#d9e7fd';
+const RedsiftColorPrimaryL3 = '#b3cefb';
+const RedsiftColorPrimaryL2 = '#8eb6f8';
+const RedsiftColorPrimaryL1 = '#689df6';
+const RedsiftColorPrimaryN = '#4285f4';
+const RedsiftColorPrimaryD1 = '#3b78dc';
+const RedsiftColorPrimaryD2 = '#2e5dab';
+const RedsiftColorPrimaryD3 = '#142849';
+const RedsiftColorPrimaryD4 = '#0d1b31';
+const RedsiftColorSecondaryL4 = '#dcf1ed';
+const RedsiftColorSecondaryL3 = '#b9e2db';
+const RedsiftColorSecondaryL2 = '#97d4c8';
+const RedsiftColorSecondaryL1 = '#74c5b6';
+const RedsiftColorSecondaryN = '#51b7a4';
+const RedsiftColorSecondaryD1 = '#49a594';
+const RedsiftColorSecondaryD2 = '#398073';
+const RedsiftColorSecondaryD3 = '#183731';
+const RedsiftColorSecondaryD4 = '#102521';
+const RedsiftColorNeutralWhite = '#ffffff';
+const RedsiftColorNeutralXLightGrey = '#f2f2f2';
+const RedsiftColorNeutralLightGrey = '#e0e0e0';
+const RedsiftColorNeutralMidGrey = '#666666';
+const RedsiftColorNeutralDarkGrey = '#474747';
+const RedsiftColorNeutralXDarkGrey = '#333333';
+const RedsiftColorNeutralBlack = '#1c1c1c';
+const RedsiftColorTextPrimary = '#333333';
+const RedsiftColorTextSecondary = '#474747';
 const RedsiftColorProductAsm = '#8361ea';
 const RedsiftColorProductBrandTrust = '#7ec2fa';
 const RedsiftColorProductCertificates = '#e8712e';
-const RedsiftColorProductOndmarc = '#96d36e';
-const RedsiftColorProductRadar = '#51b7a4';
-const RedsiftColorProductRojoDs = '#e11010';
+const RedsiftColorProductHardenize = '#3498db';
+const RedsiftColorProductOnDmarc = '#96d36e';
+const RedsiftColorProductOnInbox = '#33b222';
+const RedsiftColorProductRadar = '#51B7A4';
 const RedsiftColorProductVendorSecure = '#f7c948';
-const RedsiftColorProductWebsite = '#e11010';
-const RedsiftColorNeutralBlack = '#1c1c1c';
-const RedsiftColorNeutralDarkgrey = '#333333';
-const RedsiftColorNeutralMidgrey = '#666666';
-const RedsiftColorNeutralLightgrey = '#b6b6b6';
-const RedsiftColorNeutralXlightgrey = '#f2f2f2';
-const RedsiftColorNeutralWhite = '#ffffff';
-const RedsiftAppBarColorBackground = '#ffffff';
-const RedsiftAppBarColorText = '#1c1c1c';
-const RedsiftAppBarColorExpandIconResting = '#333333';
-const RedsiftAppBarColorExpandIconHover = '#1c1c1c';
-const RedsiftAppBarColorExpandIconBackgroundHover = '#ffffff';
-const RedsiftColorCtasPrimaryPrimary = '#4285F4';
-const RedsiftColorCtasPrimaryHover = '#D9E7FD';
-const RedsiftColorCtasPrimaryActive = '#B3CEFB';
-const RedsiftColorCtasPrimaryActiveHover = '#8EB6F8';
-const RedsiftColorCtasPrimaryButtonHover = '#356AC3';
-const RedsiftColorCtasPrimaryButtonActive = '#285092';
-const RedsiftColorCtasPrimaryButtonActiveHover = '#1A3562';
-const RedsiftColorCtasSecondaryPrimary = '#51B7A4';
-const RedsiftColorCtasSecondaryHover = '#DCF1ED';
-const RedsiftColorCtasSecondaryActive = '#B9E2DB';
-const RedsiftColorCtasSecondaryActiveHover = '#97D4C8';
-const RedsiftColorCtasSecondaryButtonHover = '#419283';
-const RedsiftColorCtasSecondaryButtonActive = '#316E62';
-const RedsiftColorCtasSecondaryButtonActiveHover = '#204942';
-const RedsiftColorNotificationsSuccessPrimary = '#02AC61';
-const RedsiftColorNotificationsSuccessHover = '#CCEEDF';
-const RedsiftColorNotificationsSuccessActive = '#9ADEC0';
-const RedsiftColorNotificationsSuccessActiveHover = '#67CDA0';
-const RedsiftColorNotificationsSuccessButtonHover = '#028A4E';
-const RedsiftColorNotificationsSuccessButtonActive = '#01673A';
-const RedsiftColorNotificationsSuccessButtonActiveHover = '#014527';
-const RedsiftColorNotificationsErrorPrimary = '#E11010';
-const RedsiftColorNotificationsErrorHover = '#F9CFCF';
-const RedsiftColorNotificationsErrorActive = '#F39F9F';
-const RedsiftColorNotificationsErrorActiveHover = '#ED7070';
-const RedsiftColorNotificationsErrorButtonHover = '#B40D0D';
-const RedsiftColorNotificationsErrorButtonActive = '#870A0A';
-const RedsiftColorNotificationsErrorButtonActiveHover = '#5A0606';
-const RedsiftColorNotificationsWarningPrimary = '#FCBB54';
-const RedsiftColorNotificationsWarningHover = '#FEF1DD';
-const RedsiftColorNotificationsWarningActive = '#FEE4BB';
-const RedsiftColorNotificationsWarningActiveHover = '#FDD698';
-const RedsiftColorNotificationsWarningButtonHover = '#CA9643';
-const RedsiftColorNotificationsWarningButtonActive = '#977032';
-const RedsiftColorNotificationsWarningButtonActiveHover = '#654B22';
-const RedsiftColorNotificationsInfoPrimary = '#4285F4';
-const RedsiftColorNotificationsInfoHover = '#D9E7FD';
-const RedsiftColorNotificationsInfoActive = '#B3CEFB';
-const RedsiftColorNotificationsInfoActiveHover = '#8EB6F8';
-const RedsiftColorNotificationsInfoButtonHover = '#356AC3';
-const RedsiftColorNotificationsInfoButtonActive = '#285092';
-const RedsiftColorNotificationsInfoButtonActiveHover = '#1A3562';
+const RedsiftColorBordersBorderDivider = '#f2f2f2';
+const RedsiftColorBordersBorderDefault = '#666666';
+const RedsiftColorBordersBorderDisabled = '#e0e0e0';
+const RedsiftColorBordersBorderPrimary = '#4285f4';
+const RedsiftColorBordersBorderSecondary = '#51b7a4';
+const RedsiftColorBordersBorderSuccess = '#02ac61';
+const RedsiftColorBordersBorderError = '#e11010';
+const RedsiftColorNotificationsPrimaryPrimary = '#4285f4';
+const RedsiftColorNotificationsPrimaryHover = '#d9e7fd';
+const RedsiftColorNotificationsPrimaryActive = '#b3cefb';
+const RedsiftColorNotificationsSecondaryPrimary = '#51b7a4';
+const RedsiftColorNotificationsSecondaryHover = '#dcf1ed';
+const RedsiftColorNotificationsSecondaryActive = '#b9e2db';
+const RedsiftColorNotificationsSuccessPrimary = '#02ac61';
+const RedsiftColorNotificationsSuccessHover = '#cceedf';
+const RedsiftColorNotificationsSuccessActive = '#9adec0';
+const RedsiftColorNotificationsErrorPrimary = '#e11010';
+const RedsiftColorNotificationsErrorHover = '#f9cfcf';
+const RedsiftColorNotificationsErrorActive = '#f39f9f';
+const RedsiftColorNotificationsWarningPrimary = '#fcbb54';
+const RedsiftColorNotificationsWarningHover = '#fef1dd';
+const RedsiftColorNotificationsWarningActive = '#fee4bb';
+const RedsiftColorNotificationsInfoPrimary = '#4285f4';
+const RedsiftColorNotificationsInfoHover = '#d9e7fd';
+const RedsiftColorNotificationsInfoActive = '#b3cefb';
 const RedsiftColorNotificationsQuestionPrimary = '#666666';
-const RedsiftColorNotificationsQuestionHover = '#B2B2B2';
-const RedsiftColorNotificationsQuestionActive = '#A3A3A3';
-const RedsiftColorNotificationsQuestionActiveHover = '#949494';
-const RedsiftColorNotificationsQuestionButtonHover = '#525252';
-const RedsiftColorNotificationsQuestionButtonActive = '#474747';
-const RedsiftColorNotificationsQuestionButtonActiveHover = '#3D3D3D';
-const RedsiftColorNotificationsNoDataPrimary = '#BDBDBD';
-const RedsiftColorNotificationsNoDataHover = '#DEDEDE';
-const RedsiftColorNotificationsNoDataActive = '#D7D7D7';
-const RedsiftColorNotificationsNoDataActiveHover = '#D1D1D1';
-const RedsiftColorNotificationsNoDataButtonHover = '#979797';
-const RedsiftColorNotificationsNoDataButtonActive = '#848484';
-const RedsiftColorNotificationsNoDataButtonActiveHover = '#717171';
+const RedsiftColorNotificationsQuestionHover = '#474747';
+const RedsiftColorNotificationsQuestionActive = '#333333';
+const RedsiftColorNotificationsNoDataPrimary = '#e0e0e0';
+const RedsiftColorNotificationsNoDataHover = '#666666';
+const RedsiftColorNotificationsNoDataActive = '#474747';
 const RedsiftColorPresentationGreenDarkerer = '#078833';
 const RedsiftColorPresentationGreenDarker = '#07AA45';
 const RedsiftColorPresentationGreenDark = '#00CE59';
@@ -573,16 +1192,7 @@ const RedsiftColorPresentationGreyDefault = '#D6D6D6';
 const RedsiftColorPresentationGreyLight = '#E6E6E6';
 const RedsiftColorPresentationGreyLighter = '#EEEEEE';
 const RedsiftColorPresentationGreyLighterer = '#F7F7F7';
-const RedsiftSideNavigationColorBackground = '#f2f2f2';
-const RedsiftSideNavigationColorMenuItemTextResting = '#333333';
-const RedsiftSideNavigationColorMenuItemTextDisabled = '#666666';
-const RedsiftSideNavigationColorMenuItemTextHover = '#1c1c1c';
-const RedsiftSideNavigationColorMenuItemBackgroundHover = '#E6E6E6';
-const RedsiftSideNavigationColorMenuItemBackgroundSecondary = 'transparent';
-const RedsiftSideNavigationColorMenuItemBackgroundActive = '#b6b6b6';
-const RedsiftSideNavigationColorMenuItemActive = '#1c1c1c';
-const RedsiftSideNavigationColorScrollbarResting = '#b6b6b6';
-const RedsiftSideNavigationColorScrollbarHover = '#666666';
+const RedsiftBorderRadius = '4px';
 const RedsiftLayoutZIndexFooter = '1000';
 const RedsiftLayoutZIndexHeader = '1010';
 const RedsiftLayoutZIndexSidePanel = '1050';
@@ -724,7 +1334,7 @@ const useId$1 = function () {
  * @param props Component props containing the aria-label and aria-labelledby params to check for.
  * @param additionalKeysToCheck Additional props to check that can act as a label for screen readers (i.e. children).
  */
-const warnIfNoAccessibleLabelFound = (props, additionalKeysToCheck) => {
+const warnIfNoAccessibleLabelFound = (props, additionalKeysToCheck, componentName) => {
   const {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby
@@ -732,7 +1342,7 @@ const warnIfNoAccessibleLabelFound = (props, additionalKeysToCheck) => {
   const hasText = additionalKeysToCheck && additionalKeysToCheck.filter(key => !!key).length > 0;
   const hasAriaLabel = Boolean(ariaLabel || ariaLabelledby);
   if (!hasAriaLabel && !hasText) {
-    console.warn('You must provide a label for accessibility', props);
+    console.warn(`You must provide a label ${componentName ? `to ${componentName} ` : ''}for accessibility`, props);
   }
 };
 
@@ -1014,7 +1624,6 @@ const baseStyling = css`
   font-size: var(--redsift-typography-body-font-size);
   font-weight: var(--redsift-typography-body-font-weight);
   line-height: var(--redsift-typography-body-line-height);
-  color: var(--redsift-color-neutral-black);
 
   ${baseLayout}
   ${baseSpacing}
@@ -1032,7 +1641,6 @@ const baseContainer = css`
   font-size: var(--redsift-typography-body-font-size);
   font-weight: var(--redsift-typography-body-font-weight);
   line-height: 20px;
-  color: var(--redsift-color-neutral-black);
 
   ${baseInternalSpacing}
   ${baseSpacing}
@@ -1044,7 +1652,7 @@ const baseContainer = css`
 const focusRing = css`
   @media (prefers-reduced-motion: no-preference) {
     :focus-visible {
-      outline: 2px solid var(--redsift-color-ctas-primary-primary);
+      outline: 2px solid var(--redsift-color-primary-n);
       transition: outline-offset 75ms ease-out;
     }
 
@@ -1057,6 +1665,19 @@ const focusRing = css`
     outline-offset: 0.2rem;
   }
 `;
+const srOnly = css`
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  margin: -1px !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
+`;
 
 /**
  * Component style.
@@ -1076,14 +1697,15 @@ const StyledIcon = styled.span`
 
   ${_ref => {
   let {
-    $color
+    $color,
+    $theme
   } = _ref;
   return $color && Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
           color: var(--redsift-color-notifications-${$color}-primary);
         ` : $color && Object.keys(ProductColorPalette).indexOf($color) !== -1 ? css`
           color: var(--redsift-color-product-${$color});
         ` : css`
-          color: ${$color || css`var(--redsift-color-neutral-darkgrey)`};
+          color: ${$color || css`var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'})`};
         `;
 }}
 
@@ -1135,7 +1757,17 @@ const StyledIcon = styled.span`
 }}
 `;
 
-const _excluded$P = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps"];
+const ThemeContext = /*#__PURE__*/React__default.createContext(null);
+const ThemeProvider = ThemeContext.Provider;
+
+function useTheme(theme) {
+  var _ref;
+  const themeState = useContext(ThemeContext);
+  const contextTheme = (_ref = theme !== null && theme !== void 0 ? theme : themeState === null || themeState === void 0 ? void 0 : themeState.theme) !== null && _ref !== void 0 ? _ref : Theme.light;
+  return contextTheme;
+}
+
+const _excluded$P = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps", "theme"];
 const COMPONENT_NAME$P = 'Icon';
 const CLASSNAME$P = 'redsift-icon';
 const DEFAULT_PROPS$P = {
@@ -1204,9 +1836,11 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
       color,
       icon,
       size,
-      svgProps
+      svgProps,
+      theme: propsTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$P);
+  const theme = useTheme(propsTheme);
   const {
     width,
     height,
@@ -1219,6 +1853,7 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
     $height: height,
     $fontSize: fontSize,
     $lineHeight: lineHeight,
+    $theme: theme,
     "aria-hidden": ariaLabel ? ariaHidden ? ariaHidden : undefined : true,
     "aria-label": ariaLabel,
     className: classNames(Icon.className, className),
@@ -1288,7 +1923,7 @@ const StyledButton = styled.button`
   } = _ref;
   return $isLoading ? css`
           & > span {
-            visibility: hidden;
+            opacity: 0;
           }
 
           & > .redsift-shield {
@@ -1303,34 +1938,27 @@ const StyledButton = styled.button`
     $color,
     $isActive,
     $isDisabled,
-    $isHovered
+    $isHovered,
+    $theme
   } = _ref2;
   return css`
     padding: ${$variant === ButtonVariant.secondary ? '8px 15px' : '9px 16px'};
 
-    ${$variant === ButtonVariant.secondary ? css`
-          background-color: ${$isActive && $isHovered ? `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-active-hover)` : $isActive ? `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-active)` : $isHovered ? `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-hover)` : $isDisabled ? 'var(--redsift-color-neutral-white)' : 'var(--redsift-color-neutral-white)'};
-          &,
-          .redsift-icon {
-            color: ${$isActive || $isHovered ? `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-button-active)` : $isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-primary)`};
-          }
-        ` : $variant === ButtonVariant.unstyled ? css`
-          background-color: ${$isActive && $isHovered ? `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-active-hover)` : $isActive ? `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-active)` : $isHovered ? `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-hover)` : $isDisabled ? 'none' : 'none'};
-          &,
-          .redsift-icon {
-            color: ${$isActive || $isHovered ? `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-button-active)` : $isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-primary)`};
-          }
-        ` : css`
-          background-color: ${$isActive && $isHovered ? `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-button-active-hover)` : $isActive ? `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-button-active)` : $isHovered ? `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-button-hover)` : $isDisabled ? '#ECECEC' : `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-primary)`};
-          &,
-          .redsift-icon {
-            color: ${$isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : 'var(--redsift-color-neutral-white)'};
-          }
-        `}
+    background-color: var(
+      --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+    );
+    &,
+    .redsift-icon {
+      color: var(
+        --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+      );
+    }
 
     ${$variant === ButtonVariant.secondary ? css`
           border: 1px solid
-            ${$isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-primary)`};
+            var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+            );
         ` : ''}
   `;
 }};
@@ -1343,38 +1971,28 @@ const StyledButton = styled.button`
   let {
     $variant,
     $color,
-    $isActive,
-    $isDisabled
+    $isDisabled,
+    $theme
   } = _ref3;
   return css`
       cursor: ${$isDisabled ? 'default' : 'pointer'};
 
-      ${$variant === ButtonVariant.secondary ? css`
-            background-color: ${$isActive ? `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-active-hover)` : $isDisabled ? 'var(--redsift-color-neutral-white)' : `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-hover)`};
-            &,
-            .redsift-icon {
-              color: ${$isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-button-active)`};
-            }
-          ` : $variant === ButtonVariant.unstyled ? css`
-            background-color: ${$isActive ? `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-active-hover)` : $isDisabled ? 'none' : `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-hover)`};
-            &,
-            .redsift-icon {
-              color: ${$isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-button-active)`};
-            }
-          ` : css`
-            background-color: ${$isActive ? `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-button-active-hover)` : $isDisabled ? '#ECECEC' : `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-button-hover)`};
-            &,
-            .redsift-icon {
-              color: ${$isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : 'var(--redsift-color-neutral-white)'};
-            }
-          `}
+      background-color: var(
+        --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : 'hover'}
+      );
+      &,
+      .redsift-icon {
+        color: var(
+          --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : 'hover'}
+        );
+      }
 
       ${$variant === ButtonVariant.secondary ? css`
             border: 1px solid
-              ${$isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-primary)`};
-          ` : `
-        border: none;
-      `}
+              var(
+                --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : 'hover'}
+              );
+          ` : ''}
     `;
 }};
   }
@@ -1387,35 +2005,26 @@ const StyledButton = styled.button`
     $variant,
     $color,
     $isHovered,
-    $isDisabled
+    $isDisabled,
+    $theme
   } = _ref4;
   return css`
-      ${$variant === ButtonVariant.secondary ? css`
-            background-color: ${$isHovered ? `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-active-hover)` : $isDisabled ? 'var(--redsift-color-neutral-white)' : `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-active)`};
-            &,
-            .redsift-icon {
-              color: ${$isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-button-active)`};
-            }
-          ` : $variant === ButtonVariant.unstyled ? css`
-            background-color: ${$isHovered ? `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-active-hover)` : $isDisabled ? 'none' : `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-active)`};
-            &,
-            .redsift-icon {
-              color: ${$isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-button-active)`};
-            }
-          ` : css`
-            background-color: ${$isHovered ? `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-button-active-hover)` : $isDisabled ? '#ECECEC' : `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-button-active)`};
-            &,
-            .redsift-icon {
-              color: ${$isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : 'var(--redsift-color-neutral-white)'};
-            }
-          `}
+      background-color: var(
+        --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : $isHovered ? 'hover' : 'active'}
+      );
+      &,
+      .redsift-icon {
+        color: var(
+          --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : $isHovered ? 'hover' : 'active'}
+        );
+      }
 
       ${$variant === ButtonVariant.secondary ? css`
             border: 1px solid
-              ${$isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : `var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-primary)`};
-          ` : `
-        border: none;
-      `}
+              var(
+                --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : $isHovered ? 'hover' : 'active'}
+              );
+          ` : ''}
     `;
 }};
   }
@@ -1482,9 +2091,9 @@ const StyledSpinner = styled.img`
 
 var spinner = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPgogIDxzdHlsZT4KICAgIC5zcGlubmluZyB7CiAgICAgIGFuaW1hdGlvbjogc3Bpbm5pbmcta2V5ZnJhbWVzIDMwMDBtcyBsaW5lYXIgaW5maW5pdGUgbm9ybWFsIGZvcndhcmRzOwogICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGN1YmljLWJlemllcigwLjQyLCAwLCAwLjU4LCAxKTsKICAgIH0KICAgIEBrZXlmcmFtZXMgc3Bpbm5pbmcta2V5ZnJhbWVzIHsKICAgICAgMCUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgwZGVnKTsKICAgICAgfQoKICAgICAgMzMlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMTgwZGVnKTsKICAgICAgfQoKICAgICAgNTAlIHsKICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpOwogICAgICB9CgogICAgICA4MyUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgzNjBkZWcpOwogICAgICB9CgogICAgICAxMDAlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMzYwZGVnKQogICAgICB9CiAgICB9CiAgPC9zdHlsZT4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MpIgogICAgZmlsbD0iIzQyODVGNCIKICAgIGQ9Ik0zMTggMTg2LjlWMTA4LjhMMjAwIDU3IDgyIDEwOC44djc4LjFDODIgMjU5IDEzMi4zIDMyNi40IDIwMCAzNDNjNjcuNy0xNi42IDExOC04NCAxMTgtMTU2LjF6TTQwMCAyMDBjMCAxMTAuNS04OS41IDIwMC0yMDAgMjAwUzAgMzEwLjUgMCAyMDAgODkuNSAwIDIwMCAwczIwMCA4OS41IDIwMCAyMDB6IgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrcyI+CiAgICA8cGF0aAogICAgICBjbGFzcz0ic3Bpbm5pbmciCiAgICAgIGQ9Ik0wLDIwMEMwLDg5LjU0MzA1LDg5LjU0MzA1LDAsMjAwLDB2NDAwQzg5LjU0MzA1LDQwMCwwLDMxMC40NTY5NSwwLDIwMFoiCiAgICAgIGZpbGw9IiNmZmYiCiAgICAvPgogIDwvbWFzaz4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MyKSIKICAgIGZpbGw9IiM0Mjg1RjQiCiAgICBkPSJNODIsMTg2LjkzOXYtNzguMDg5TDIwMCw1N2wxMTgsNTEuODV2NzguMDg5QzMxOCwyNTkuMDAyLDI2Ny42ODYsMzI2LjQwMiwyMDAsMzQzQzEzMi4zMTQsMzI2LjQwMiw4MiwyNTkuMDAyLDgyLDE4Ni45MzlaIgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrczIiPgogICAgPHBhdGgKICAgICAgY2xhc3M9InNwaW5uaW5nIgogICAgICBkPSJNNDAwIDIwMEM0MDAgMzEwLjUgMzEwLjUgNDAwIDIwMCA0MDBWMGMxMTAuNSAwIDIwMCA4OS41IDIwMCAyMDB6IgogICAgICBmaWxsPSIjZmZmIgogICAgLz4KICA8L21hc2s+Cjwvc3ZnPg==';
 
-var uncoloredSpinner = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPgogIDxzdHlsZT4KICAgIC5zcGlubmluZyB7CiAgICAgIGFuaW1hdGlvbjogc3Bpbm5pbmcta2V5ZnJhbWVzIDMwMDBtcyBsaW5lYXIgaW5maW5pdGUgbm9ybWFsIGZvcndhcmRzOwogICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGN1YmljLWJlemllcigwLjQyLCAwLCAwLjU4LCAxKTsKICAgIH0KICAgIEBrZXlmcmFtZXMgc3Bpbm5pbmcta2V5ZnJhbWVzIHsKICAgICAgMCUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgwZGVnKTsKICAgICAgfQoKICAgICAgMzMlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMTgwZGVnKTsKICAgICAgfQoKICAgICAgNTAlIHsKICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpOwogICAgICB9CgogICAgICA4MyUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgzNjBkZWcpOwogICAgICB9CgogICAgICAxMDAlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMzYwZGVnKQogICAgICB9CiAgICB9CiAgPC9zdHlsZT4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MpIgogICAgZmlsbD0iI2JkYmRiZCIKICAgIGQ9Ik0zMTggMTg2LjlWMTA4LjhMMjAwIDU3IDgyIDEwOC44djc4LjFDODIgMjU5IDEzMi4zIDMyNi40IDIwMCAzNDNjNjcuNy0xNi42IDExOC04NCAxMTgtMTU2LjF6TTQwMCAyMDBjMCAxMTAuNS04OS41IDIwMC0yMDAgMjAwUzAgMzEwLjUgMCAyMDAgODkuNSAwIDIwMCAwczIwMCA4OS41IDIwMCAyMDB6IgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrcyI+CiAgICA8cGF0aAogICAgICBjbGFzcz0ic3Bpbm5pbmciCiAgICAgIGQ9Ik0wLDIwMEMwLDg5LjU0MzA1LDg5LjU0MzA1LDAsMjAwLDB2NDAwQzg5LjU0MzA1LDQwMCwwLDMxMC40NTY5NSwwLDIwMFoiCiAgICAgIGZpbGw9IiNmZmYiCiAgICAvPgogIDwvbWFzaz4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MyKSIKICAgIGZpbGw9IiNiZGJkYmQiCiAgICBkPSJNODIsMTg2LjkzOXYtNzguMDg5TDIwMCw1N2wxMTgsNTEuODV2NzguMDg5QzMxOCwyNTkuMDAyLDI2Ny42ODYsMzI2LjQwMiwyMDAsMzQzQzEzMi4zMTQsMzI2LjQwMiw4MiwyNTkuMDAyLDgyLDE4Ni45MzlaIgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrczIiPgogICAgPHBhdGgKICAgICAgY2xhc3M9InNwaW5uaW5nIgogICAgICBkPSJNNDAwIDIwMEM0MDAgMzEwLjUgMzEwLjUgNDAwIDIwMCA0MDBWMGMxMTAuNSAwIDIwMCA4OS41IDIwMCAyMDB6IgogICAgICBmaWxsPSIjZmZmIgogICAgLz4KICA8L21hc2s+Cjwvc3ZnPg==';
+var uncoloredSpinner = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iPgogIDxzdHlsZT4KICAgIC5zcGlubmluZyB7CiAgICAgIGFuaW1hdGlvbjogc3Bpbm5pbmcta2V5ZnJhbWVzIDMwMDBtcyBsaW5lYXIgaW5maW5pdGUgbm9ybWFsIGZvcndhcmRzOwogICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGN1YmljLWJlemllcigwLjQyLCAwLCAwLjU4LCAxKTsKICAgIH0KICAgIEBrZXlmcmFtZXMgc3Bpbm5pbmcta2V5ZnJhbWVzIHsKICAgICAgMCUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgwZGVnKTsKICAgICAgfQoKICAgICAgMzMlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMTgwZGVnKTsKICAgICAgfQoKICAgICAgNTAlIHsKICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpOwogICAgICB9CgogICAgICA4MyUgewogICAgICAgIHRyYW5zZm9ybTogIHJvdGF0ZSgzNjBkZWcpOwogICAgICB9CgogICAgICAxMDAlIHsKICAgICAgICB0cmFuc2Zvcm06ICByb3RhdGUoMzYwZGVnKQogICAgICB9CiAgICB9CiAgPC9zdHlsZT4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MpIgogICAgZmlsbD0iIzg1ODU4NSIKICAgIGQ9Ik0zMTggMTg2LjlWMTA4LjhMMjAwIDU3IDgyIDEwOC44djc4LjFDODIgMjU5IDEzMi4zIDMyNi40IDIwMCAzNDNjNjcuNy0xNi42IDExOC04NCAxMTgtMTU2LjF6TTQwMCAyMDBjMCAxMTAuNS04OS41IDIwMC0yMDAgMjAwUzAgMzEwLjUgMCAyMDAgODkuNSAwIDIwMCAwczIwMCA4OS41IDIwMCAyMDB6IgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrcyI+CiAgICA8cGF0aAogICAgICBjbGFzcz0ic3Bpbm5pbmciCiAgICAgIGQ9Ik0wLDIwMEMwLDg5LjU0MzA1LDg5LjU0MzA1LDAsMjAwLDB2NDAwQzg5LjU0MzA1LDQwMCwwLDMxMC40NTY5NSwwLDIwMFoiCiAgICAgIGZpbGw9IiNmZmYiCiAgICAvPgogIDwvbWFzaz4KICA8cGF0aAogICAgbWFzaz0idXJsKCNzcGlubmVyLXUtbWFza3MyKSIKICAgIGZpbGw9IiM4NTg1ODUiCiAgICBkPSJNODIsMTg2LjkzOXYtNzguMDg5TDIwMCw1N2wxMTgsNTEuODV2NzguMDg5QzMxOCwyNTkuMDAyLDI2Ny42ODYsMzI2LjQwMiwyMDAsMzQzQzEzMi4zMTQsMzI2LjQwMiw4MiwyNTkuMDAyLDgyLDE4Ni45MzlaIgogIC8+CiAgPG1hc2sgaWQ9InNwaW5uZXItdS1tYXNrczIiPgogICAgPHBhdGgKICAgICAgY2xhc3M9InNwaW5uaW5nIgogICAgICBkPSJNNDAwIDIwMEM0MDAgMzEwLjUgMzEwLjUgNDAwIDIwMCA0MDBWMGMxMTAuNSAwIDIwMCA4OS41IDIwMCAyMDB6IgogICAgICBmaWxsPSIjZmZmIgogICAgLz4KICA8L21hc2s+Cjwvc3ZnPg==';
 
-const _excluded$O = ["aria-hidden", "aria-label", "className", "isColored", "size"];
+const _excluded$O = ["aria-hidden", "aria-label", "className", "isColored", "size", "theme"];
 const COMPONENT_NAME$O = 'Spinner';
 const CLASSNAME$O = 'redsift-shield';
 const DEFAULT_PROPS$O = {
@@ -1526,9 +2135,11 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
       'aria-label': ariaLabel,
       className,
       isColored,
-      size
+      size,
+      theme: propsTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$O);
+  const theme = useTheme(propsTheme);
   const {
     width,
     height
@@ -1544,18 +2155,19 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref,
     src: isColored ? spinner : uncoloredSpinner,
     width: width,
-    $size: size
+    $size: size,
+    $theme: theme
   }));
 });
 Spinner.className = CLASSNAME$O;
 Spinner.defaultProps = DEFAULT_PROPS$O;
 Spinner.displayName = COMPONENT_NAME$O;
 
-const _excluded$N = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isHovered", "isLoading", "leftIcon", "leftIconProps", "rightIcon", "rightIconProps", "variant"];
+const _excluded$N = ["children", "className", "color", "disabled", "fullWidth", "isActive", "isDisabled", "isHovered", "isLoading", "leftIcon", "leftIconProps", "rightIcon", "rightIconProps", "theme", "variant"];
 const COMPONENT_NAME$N = 'Button';
 const CLASSNAME$N = 'redsift-button';
 const DEFAULT_PROPS$N = {
-  color: CtasColorPalette.primary,
+  color: ButtonsColorPalette.primary,
   height: 'fit-content',
   variant: ButtonVariant.primary
 };
@@ -1584,10 +2196,12 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
       leftIconProps,
       rightIcon,
       rightIconProps,
+      theme: propsTheme,
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$N);
   const isDisabled = isLoading || propsIsDisabled || disabled;
+  const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(StyledButton, _extends$1({}, forwardedProps, {
     $color: color,
     $fullWidth: fullWidth,
@@ -1595,6 +2209,7 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     $isDisabled: isDisabled,
     $isHovered: isHovered,
     $isLoading: isLoading,
+    $theme: theme,
     $variant: variant,
     "aria-disabled": isDisabled,
     className: classNames(Button.className, className),
@@ -1642,11 +2257,11 @@ const StyledIconButton = styled(StyledButton)`
 }}
 `;
 
-const _excluded$M = ["className", "color", "disabled", "icon", "iconProps", "isActive", "isDisabled", "isHovered", "isLoading", "variant"];
+const _excluded$M = ["className", "color", "disabled", "icon", "iconProps", "isActive", "isDisabled", "isHovered", "isLoading", "theme", "variant"];
 const COMPONENT_NAME$M = 'IconButton';
 const CLASSNAME$M = 'redsift-icon-button';
 const DEFAULT_PROPS$M = {
-  color: CtasColorPalette.primary,
+  color: ButtonsColorPalette.primary,
   height: 'fit-content',
   variant: IconButtonVariant.unstyled
 };
@@ -1669,17 +2284,20 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
       isDisabled: propsIsDisabled,
       isHovered,
       isLoading,
+      theme: propsTheme,
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$M);
   const isDisabled = props.isLoading || propsIsDisabled || disabled;
-  warnIfNoAccessibleLabelFound(props);
+  const theme = useTheme(propsTheme);
+  warnIfNoAccessibleLabelFound(props, undefined, 'IconButton');
   return /*#__PURE__*/React__default.createElement(StyledIconButton, _extends$1({}, forwardedProps, {
     $color: isDisabled ? undefined : color,
     $isActive: isActive,
     $isDisabled: isDisabled,
     $isHovered: isHovered,
     $isLoading: isLoading,
+    $theme: theme,
     $variant: variant,
     "aria-disabled": isDisabled,
     className: classNames(IconButton.className, className),
@@ -1709,16 +2327,19 @@ const StyledAlert = styled.div`
     $hasTitle,
     $isClosable,
     $isClosed,
-    $variant
+    $variant,
+    $theme
   } = _ref;
   return css`
+    color: var(--redsift-color-neutral-${$theme === Theme.light ? 'x-dark-grey' : 'white'});
     display: ${!$isClosed ? 'block' : 'none'};
-    background-color: var(--redsift-color-notifications-${$variant}-hover);
+    background-color: var(--redsift-color-${$theme}-components-alert-${$variant}-background);
 
     .redsift-alert-header__icon-button {
+      background-color: transparent;
       padding: 0px;
       .redsift-icon {
-        color: var(--redsift-color-neutral-black);
+        color: var(--redsift-color-neutral-x-dark-grey);
       }
 
       &:hover,
@@ -1783,7 +2404,7 @@ const StyledText = styled.span`
   return $color && Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
           color: var(--redsift-color-notifications-${$color}-primary);
         ` : Object.keys(NeutralColorPalette).indexOf($color) !== -1 ? css`
-          color: var(--redsift-color-neutral-${$color});
+          color: var(--redsift-color-primary-${$color});
         ` : css`
           color: ${$color || css`inherit`};
         `;
@@ -1800,6 +2421,8 @@ const StyledText = styled.span`
           vertical-align: sub;
         ` : $as === TextComponent.sup ? css`
           vertical-align: super;
+        ` : $as === TextComponent.mark ? css`
+          color: var(--redsift-color-neutral-x-dark-grey);
         ` : ''}
   `;
 }}
@@ -1856,9 +2479,18 @@ const StyledText = styled.span`
           white-space: nowrap;
         ` : '';
 }}
+
+  ${_ref5 => {
+  let {
+    wordBreak
+  } = _ref5;
+  return wordBreak ? css`
+          word-break: ${wordBreak};
+        ` : '';
+}}
 `;
 
-const _excluded$L = ["as", "children", "className", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "noWrap", "variant"];
+const _excluded$L = ["as", "children", "className", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "noWrap", "theme", "variant"];
 const COMPONENT_NAME$L = 'Text';
 const CLASSNAME$L = 'redsift-text';
 const DEFAULT_PROPS$L = {
@@ -1879,9 +2511,11 @@ const Text = /*#__PURE__*/forwardRef((props, ref) => {
       fontWeight,
       lineHeight,
       noWrap,
+      theme: propsTheme,
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$L);
+  const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(StyledText, _extends$1({
     as: as
   }, forwardedProps, {
@@ -1894,6 +2528,7 @@ const Text = /*#__PURE__*/forwardRef((props, ref) => {
     $fontWeight: fontWeight,
     $lineHeight: lineHeight,
     $noWrap: noWrap,
+    $theme: theme,
     $variant: variant
   }), children);
 });
@@ -1928,7 +2563,7 @@ const StyledFlexbox = styled.div`
             ::before {
               content: '';
               position: absolute;
-              background-color: var(--redsift-color-neutral-lightgrey);
+              background-color: var(--redsift-color-neutral-light-grey);
               inline-size: 1px;
               block-size: 100%;
               inset-inline-start: calc(${Math.max(1, $divider.colGap / 2)}px * -1);
@@ -1937,7 +2572,7 @@ const StyledFlexbox = styled.div`
             ::after {
               content: '';
               position: absolute;
-              background-color: var(--redsift-color-neutral-lightgrey);
+              background-color: var(--redsift-color-neutral-light-grey);
               inline-size: 200vw;
               block-size: 1px;
               inset-inline-start: -100vw;
@@ -1949,7 +2584,7 @@ const StyledFlexbox = styled.div`
 }}
 `;
 
-const _excluded$K = ["children", "className", "divider", "gap"];
+const _excluded$K = ["children", "className", "divider", "gap", "theme"];
 const COMPONENT_NAME$K = 'Flexbox';
 const CLASSNAME$K = 'redsift-flex-box';
 const DEFAULT_PROPS$K = {
@@ -1964,47 +2599,54 @@ const Flexbox = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className,
       divider,
-      gap
+      gap,
+      theme: propsTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$K);
-  return /*#__PURE__*/React__default.createElement(StyledFlexbox, _extends$1({}, forwardedProps, {
+  const theme = useTheme(propsTheme);
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledFlexbox, _extends$1({}, forwardedProps, {
     gap: divider ? `${divider.rowGap}px ${divider.colGap}px` : gap,
     className: classNames(Flexbox.className, className),
     ref: ref,
-    $divider: divider
-  }), children);
+    $divider: divider,
+    $theme: theme
+  }), children));
 });
 Flexbox.className = CLASSNAME$K;
 Flexbox.defaultProps = DEFAULT_PROPS$K;
 Flexbox.displayName = COMPONENT_NAME$K;
 
-const _excluded$J = ["children", "className", "isClosable", "isClosed", "onClose", "title", "variant"];
+const _excluded$J = ["children", "className", "isClosable", "isClosed", "onClose", "theme", "title", "variant"];
 const COMPONENT_NAME$J = 'Alert';
 const CLASSNAME$J = 'redsift-alert';
 const DEFAULT_PROPS$J = {
   variant: 'info'
 };
-const getVariant$1 = variant => {
+const getVariant$1 = (variant, theme) => {
   switch (variant) {
     case AlertVariant.info:
     default:
       return {
-        color: NotificationsColorPalette.info,
+        color: theme === Theme.light ? NotificationsColorPalette.info : 'white',
         icon: mdiInformation
       };
     case AlertVariant.error:
       return {
-        color: NotificationsColorPalette.error,
+        color: theme === Theme.light ? NotificationsColorPalette.error : 'white',
         icon: mdiAlertCircle
       };
     case AlertVariant.success:
       return {
-        color: NotificationsColorPalette.success,
+        color: theme === Theme.light ? NotificationsColorPalette.success : 'white',
         icon: mdiCheckCircle
       };
     case AlertVariant.warning:
       return {
-        color: NotificationsColorPalette.warning,
+        color: theme === Theme.light ? NotificationsColorPalette.warning : 'white',
         icon: mdiAlert
       };
   }
@@ -2020,15 +2662,17 @@ const Alert = /*#__PURE__*/forwardRef((props, ref) => {
       isClosable,
       isClosed: propsIsClosed,
       onClose,
+      theme: propsTheme,
       title,
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$J);
+  const theme = useTheme(propsTheme);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$6);
   const {
     color,
     icon
-  } = getVariant$1(variant);
+  } = getVariant$1(variant, theme);
   const [isClosed, setIsClosed] = useState(propsIsClosed);
   useEffect(() => {
     setIsClosed(propsIsClosed);
@@ -2047,6 +2691,7 @@ const Alert = /*#__PURE__*/forwardRef((props, ref) => {
     $hasTitle: Boolean(title),
     $isClosable: isClosable,
     $isClosed: isClosed,
+    $theme: theme,
     $variant: variant
   }), /*#__PURE__*/React__default.createElement(Flexbox, {
     className: `${Alert.className}__header`,
@@ -2064,7 +2709,8 @@ const Alert = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-label": stringFormatter.format('close'),
     className: `${Alert.className}-header__icon-button`,
     icon: mdiClose$1,
-    onClick: handleClose
+    onClick: handleClose,
+    color: color
   }) : null), children ? /*#__PURE__*/React__default.createElement("div", {
     className: `${Alert.className}__content`
   }, children) : null);
@@ -2110,8 +2756,17 @@ const useIsLoaded = () => {
 const StyledAppBar = styled.header`
   align-content: center;
   align-items: center;
-  background-color: var(--redsift-color-neutral-white);
-  color: var(--redsift-color-neutral-darkgrey);
+
+  ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return css`
+    background-color: var(--redsift-color-${$theme}-components-app-bar-background);
+    color: var(--redsift-color-${$theme}-components-text);
+  `;
+}};
+
   display: flex;
   flex-direction: row;
 
@@ -2126,21 +2781,22 @@ const StyledAppBar = styled.header`
   top: 0;
   z-index: var(--redsift-layout-z-index-header);
 
-  ${_ref => {
+  ${_ref2 => {
   let {
-    $hasBorder
-  } = _ref;
+    $hasBorder,
+    $theme
+  } = _ref2;
   return $hasBorder ? css`
-          border-bottom: 2px solid #e1e1e1;
+          border-bottom: 2px solid var(--redsift-color-${$theme}-components-app-bar-border);
         ` : css`
           border-bottom: none;
         `;
 }}
 
-  ${_ref2 => {
+  ${_ref3 => {
   let {
     $isSidePanelCollapsed
-  } = _ref2;
+  } = _ref3;
   return !$isSidePanelCollapsed ? css`
           transform: translate(254px);
           width: calc(100% - 254px);
@@ -2150,10 +2806,10 @@ const StyledAppBar = styled.header`
         `;
 }}
 
-  ${_ref3 => {
+  ${_ref4 => {
   let {
     $isLoaded
-  } = _ref3;
+  } = _ref4;
   return $isLoaded ? css`
           transition: transform 0.25s ease-out, width 0.25s ease-out;
         ` : '';
@@ -2200,7 +2856,12 @@ const StyledAppBar = styled.header`
     font-size: var(--redsift-typography-h1-font-size) !important;
     font-weight: var(--redsift-typography-body-font-weight) !important;
     line-height: var(--redsift-typography-h1-line-height) !important;
-    color: var(--redsift-color-neutral-black) !important;
+    color: ${_ref5 => {
+  let {
+    $theme
+  } = _ref5;
+  return css`var(--redsift-color-${$theme}-components-app-bar-breadcrumb-default) !important`;
+}};
   }
 
   h1.redsift-breadcrumb-item {
@@ -2247,40 +2908,41 @@ const StyledHeading = styled.span`
 
   ${_ref => {
   let {
-    $variant
+    $variant,
+    $theme
   } = _ref;
   return $variant === 'h1' ? css`
-          color: var(--redsift-color-neutral-black);
+          color: var(--redsift-color-${$theme}-components-text-primary);
           font-family: var(--redsift-typography-h1-font-family);
           font-size: var(--redsift-typography-h1-font-size);
           font-weight: var(--redsift-typography-h1-font-weight);
           line-height: var(--redsift-typography-h1-line-height);
         ` : $variant === 'h2' ? css`
-          color: var(--redsift-color-neutral-black);
+          color: var(--redsift-color-${$theme}-components-text-primary);
           font-family: var(--redsift-typography-h2-font-family);
           font-size: var(--redsift-typography-h2-font-size);
           font-weight: var(--redsift-typography-h2-font-weight);
           line-height: var(--redsift-typography-h2-line-height);
         ` : $variant === 'h3' ? css`
-          color: var(--redsift-color-neutral-black);
+          color: var(--redsift-color-${$theme}-components-text-primary);
           font-family: var(--redsift-typography-h3-font-family);
           font-size: var(--redsift-typography-h3-font-size);
           font-weight: var(--redsift-typography-h3-font-weight);
           line-height: var(--redsift-typography-h3-line-height);
         ` : $variant === 'h4' ? css`
-          color: var(--redsift-color-neutral-black);
+          color: var(--redsift-color-${$theme}-components-text-primary);
           font-family: var(--redsift-typography-h4-font-family);
           font-size: var(--redsift-typography-h4-font-size);
           font-weight: var(--redsift-typography-h4-font-weight);
           line-height: var(--redsift-typography-h4-line-height);
         ` : $variant === 'h5' ? css`
-          color: var(--redsift-color-neutral-black);
+          color: var(--redsift-color-${$theme}-components-text-primary);
           font-family: var(--redsift-typography-h5-font-family);
           font-size: var(--redsift-typography-h5-font-size);
           font-weight: var(--redsift-typography-h5-font-weight);
           line-height: var(--redsift-typography-h5-line-height);
         ` : css`
-          color: var(--redsift-color-neutral-black);
+          color: var(--redsift-color-${$theme}-components-text-primary);
           font-family: var(--redsift-typography-body-font-family);
           font-size: var(--redsift-typography-body-font-size);
           font-weight: var(--redsift-typography-body-font-weight);
@@ -2300,7 +2962,7 @@ const StyledHeading = styled.span`
 }}
 `;
 
-const _excluded$I = ["as", "children", "className", "noWrap", "variant"];
+const _excluded$I = ["as", "children", "className", "noWrap", "theme", "variant"];
 const COMPONENT_NAME$I = 'Heading';
 const CLASSNAME$I = 'redsift-heading';
 const DEFAULT_PROPS$I = {};
@@ -2314,15 +2976,18 @@ const Heading = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className,
       noWrap,
+      theme: propsTheme,
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$I);
+  const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(StyledHeading, _extends$1({
     as: as
   }, forwardedProps, {
     className: classNames(Heading.className, className),
     ref: ref,
     $noWrap: noWrap,
+    $theme: theme,
     $variant: variant ? variant : as === 'span' ? 'body' : as
   }), children);
 });
@@ -2366,8 +3031,18 @@ var intlMessages$3 = {
  */
 const StyledAppSidePanel = styled.div`
   align-items: center;
-  background-color: var(--redsift-side-navigation-color-background);
-  border-right: 4px solid #e1e1e1;
+  background-color: ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return css`var(--redsift-color-${$theme}-components-side-navigation-background)`;
+}};
+  border-right: 4px solid ${_ref2 => {
+  let {
+    $theme
+  } = _ref2;
+  return css`var(--redsift-color-${$theme}-components-side-navigation-right-line)`;
+}};
   box-sizing: border-box;
   flex-direction: column;
   height: 100%;
@@ -2376,10 +3051,10 @@ const StyledAppSidePanel = styled.div`
   position: fixed;
   top: 0;
   transition: width 300ms ease-out;
-  width: ${_ref => {
+  width: ${_ref3 => {
   let {
     $variant
-  } = _ref;
+  } = _ref3;
   return $variant === AppSidePanelVariant.shrinked ? '68px' : '254px';
 }};
   z-index: var(--redsift-layout-z-index-side-panel);
@@ -2387,10 +3062,10 @@ const StyledAppSidePanel = styled.div`
   .redsift-app-side-panel__header {
     box-sizing: border-box;
     transition: padding 300ms ease-out;
-    padding: 18px ${_ref2 => {
+    padding: 18px ${_ref4 => {
   let {
     $variant
-  } = _ref2;
+  } = _ref4;
   return $variant === AppSidePanelVariant.shrinked ? '16px' : '24px';
 }};
     margin-bottom: 16px;
@@ -2420,10 +3095,10 @@ const StyledAppSidePanel = styled.div`
     grid-column: 1;
     grid-row: 1;
     transition: opacity 300ms ease-out;
-    opacity: ${_ref3 => {
+    opacity: ${_ref5 => {
   let {
     $variant
-  } = _ref3;
+  } = _ref5;
   return $variant === AppSidePanelVariant.shrinked ? '0' : '1';
 }};
 
@@ -2445,10 +3120,10 @@ const StyledAppSidePanel = styled.div`
     grid-column: 1;
     grid-row: 1;
     transition: opacity 300ms ease-out;
-    opacity: ${_ref4 => {
+    opacity: ${_ref6 => {
   let {
     $variant
-  } = _ref4;
+  } = _ref6;
   return $variant === AppSidePanelVariant.shrinked ? '1' : '0';
 }};
     padding: 2px;
@@ -2471,7 +3146,12 @@ const StyledAppSidePanel = styled.div`
     transition: unset;
   }
 
-  scrollbar-color: var(--redsift-side-navigation-color-scrollbar-resting) transparent;
+  scrollbar-color: ${_ref7 => {
+  let {
+    $theme
+  } = _ref7;
+  return css`var(--redsift-color-${$theme}-components-side-navigation-scrollbar-resting) transparent`;
+}};
   scrollbar-width: thin;
 
   &::-webkit-scrollbar {
@@ -2481,7 +3161,12 @@ const StyledAppSidePanel = styled.div`
 
   &::-webkit-scrollbar-thumb {
     background-clip: padding-box;
-    background-color: var(--redsift-side-navigation-color-scrollbar-resting);
+    background-color: ${_ref8 => {
+  let {
+    $theme
+  } = _ref8;
+  return css`var(--redsift-color-${$theme}-components-side-navigation-scrollbar-resting)`;
+}};
     border-radius: 0px;
     border-left: 2px solid transparent;
     border-right: 2px solid transparent;
@@ -2494,7 +3179,12 @@ const StyledAppSidePanel = styled.div`
   &::-webkit-scrollbar-thumb:horizontal,
   &::-webkit-scrollbar-thumb:vertical {
     &:hover {
-      background-color: var(--redsift-side-navigation-color-scrollbar-hover);
+      background-color: ${_ref9 => {
+  let {
+    $theme
+  } = _ref9;
+  return css`var(--redsift-color-${$theme}-components-side-navigation-scrollbar-hover)`;
+}};
     }
   }
 
@@ -2503,7 +3193,17 @@ const StyledAppSidePanel = styled.div`
   }
 `;
 
-const _excluded$H = ["children", "className", "featuredElements", "logo", "variant", "onOpen", "iconButtonProps", "iconButtonRef"];
+// --redsift-color-${$theme}-components-side-navigation-background
+// --redsift-color-${$theme}-components-side-navigation-right-line
+// --redsift-color-${$theme}-components-side-navigation-current-marker
+// --redsift-color-${$theme}-components-side-navigation-text
+// --redsift-color-${$theme}-components-side-navigation-icon
+// --redsift-color-${$theme}-components-side-navigation-chat-background-hover
+// --redsift-color-${$theme}-components-side-navigation-chat-background-down
+
+// ${({ $theme }) => css`var(--redsift-color-${$theme}-components-side-navigation-background)`};
+
+const _excluded$H = ["children", "className", "featuredElements", "logo", "variant", "onOpen", "iconButtonProps", "iconButtonRef", "theme"];
 const COMPONENT_NAME$H = 'AppSidePanel';
 const CLASSNAME$H = 'redsift-app-side-panel';
 const DEFAULT_PROPS$H = {
@@ -2522,13 +3222,15 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
       variant,
       onOpen,
       iconButtonProps,
-      iconButtonRef
+      iconButtonRef,
+      theme: propsTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$H);
   const {
     width
   } = useWindowSize();
   const appContainerState = useContext(AppContainerContext);
+  const theme = useTheme(propsTheme);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$3);
   useEffect(() => {
     if (appContainerState && variant && appContainerState.sidePanelVariant !== variant) {
@@ -2542,6 +3244,7 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
   const computedVariant = appContainerState ? appContainerState.sidePanelVariant : variant;
   const product = appContainerState && appContainerState.product;
   return /*#__PURE__*/React__default.createElement(StyledAppSidePanel, _extends$1({}, forwardedProps, {
+    $theme: theme,
     $variant: computedVariant,
     className: classNames(AppSidePanel.className, className),
     ref: ref
@@ -2564,7 +3267,7 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
     icon: mdiMenu,
     onClick: handleClose,
     ref: iconButtonRef,
-    color: "question",
+    color: "grey",
     isDisabled: computedVariant === 'standard'
   }))), featuredElements ? /*#__PURE__*/React__default.createElement("div", {
     className: `${AppSidePanel.className}__featured`
@@ -2625,13 +3328,18 @@ const StyledSideNavigationMenuItemIndicator = styled.div`
   width: 4px;
   height: 38px;
   border-radius: 0px 4px 4px 0px;
-  background-color: var(--redsift-color-neutral-black);
+  background-color: ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return `var(--redsift-color-${$theme}-components-side-navigation-current-marker)`;
+}};
 `;
 const StyledSideNavigationMenuItemBorder = styled.div`
   position: relative;
   width: 100%;
   height: 1px;
-  background-color: var(--redsift-color-neutral-lightgrey);
+  background-color: var(--redsift-color-neutral-light-grey);
   margin-left: 62px;
   margin-top: -1px;
 `;
@@ -2643,17 +3351,18 @@ const StyledSideNavigationMenuItem = styled.a`
   /**
    * Common style
    */
-  ${_ref => {
+  ${_ref2 => {
   let {
-    $isDisabled
-  } = _ref;
+    $isDisabled,
+    $theme
+  } = _ref2;
   return !$isDisabled ? css`
           & {
-            color: var(--redsift-side-navigation-color-menu-item-text-resting);
+            color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-resting);
           }
         ` : css`
           & {
-            color: var(--redsift-side-navigation-color-menu-item-text-disabled);
+            color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-disabled);
           }
         `;
 }}
@@ -2674,39 +3383,41 @@ const StyledSideNavigationMenuItem = styled.a`
   &:focus-visible {
     outline: none;
 
-    ${_ref2 => {
+    ${_ref3 => {
   let {
-    $isDisabled
-  } = _ref2;
+    $isDisabled,
+    $theme
+  } = _ref3;
   return !$isDisabled ? css`
-            background-color: var(--redsift-side-navigation-color-menu-item-background-hover);
+            background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-hover);
             & {
-              color: var(--redsift-side-navigation-color-menu-item-text-hover);
+              color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-hover);
             }
           ` : '';
 }}
   }
 
   :active {
-    ${_ref3 => {
+    ${_ref4 => {
   let {
-    $isDisabled
-  } = _ref3;
+    $isDisabled,
+    $theme
+  } = _ref4;
   return !$isDisabled ? css`
-            background-color: var(--redsift-side-navigation-color-menu-item-background-active);
+            background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-active);
           ` : '';
 }}
   }
 
-  ${_ref4 => {
+  ${_ref5 => {
   let {
     $variant
-  } = _ref4;
+  } = _ref5;
   return css`
     @media (prefers-reduced-motion: no-preference) {
       :focus-visible {
         > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {
-          outline: 2px solid var(--redsift-color-ctas-primary-primary);
+          outline: 2px solid var(--redsift-color-primary-n);
           transition: outline-offset 75ms ease-out;
         }
 
@@ -2733,17 +3444,18 @@ const StyledSideNavigationMenuItem = styled.a`
   `;
 }}
 
-  ${_ref5 => {
+  ${_ref6 => {
   let {
     $isSecondLevel,
-    $variant
-  } = _ref5;
+    $variant,
+    $theme
+  } = _ref6;
   return !$isSecondLevel ? css`
           /**
            * First-level items
            */
 
-          background-color: var(--redsift-side-navigation-color-background);
+          background-color: var(--redsift-color-${$theme}-components-side-navigation-background);
           height: 38px;
           margin-bottom: 16px;
           margin-left: -4px;
@@ -2758,7 +3470,7 @@ const StyledSideNavigationMenuItem = styled.a`
      * Second-level items
      */
 
-    background-color: var(--redsift-side-navigation-color-menu-item-background-secondary);
+    background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-secondary);
     font-size: var(--redsift-typography-caption-font-size);
     padding-bottom: 7px;
     padding-left: 62px;
@@ -2797,20 +3509,21 @@ const StyledBadge = styled.div`
   ${_ref => {
   let {
     $color,
-    $isReversed
+    $isReversed,
+    $theme
   } = _ref;
   if ($isReversed) {
     return css`
-        background-color: var(--redsift-color-neutral-white);
+        background-color: var(--redsift-color-neutral-${$theme === Theme.light ? 'white' : 'x-dark-grey'});
 
         &,
         .redsift-icon {
-          color: ${Object.keys(CtasColorPalette).includes($color) ? `var(--redsift-color-ctas-${$color}-primary);` : Object.keys(PresentationColorPalette).includes($color) ? `var(--redsift-color-presentation-${$color}-darker);` : Object.keys(NotificationsColorPalette).includes($color) ? `var(--redsift-color-notifications-${$color}-primary);` : css`var(--redsift-color-neutral-darkgrey);`};
+          color: ${Object.keys(PresentationColorPalette).includes($color) ? `var(--redsift-color-presentation-${$color}-darker);` : Object.keys(NotificationsColorPalette).includes($color) ? `var(--redsift-color-notifications-${$color}-primary);` : css`var(--redsift-color-neutral-x-dark-grey);`};
         }
       `;
   } else {
     return css`
-        background-color: ${Object.keys(CtasColorPalette).includes($color) ? `var(--redsift-color-ctas-${$color}-primary);` : Object.keys(PresentationColorPalette).includes($color) ? `var(--redsift-color-presentation-${$color}-darker);` : Object.keys(NotificationsColorPalette).includes($color) ? `var(--redsift-color-notifications-${$color}-primary);` : css`var(--redsift-color-neutral-darkgrey);`};
+        background-color: ${Object.keys(PresentationColorPalette).includes($color) ? `var(--redsift-color-presentation-${$color}-darker);` : Object.keys(NotificationsColorPalette).includes($color) ? `var(--redsift-color-notifications-${$color}-primary);` : css`var(--redsift-color-neutral-x-dark-grey);`};
         &,
         .redsift-icon {
           color: var(--redsift-color-neutral-white);
@@ -2872,7 +3585,7 @@ const StyledBadge = styled.div`
 }}
 `;
 
-const _excluded$G = ["autoBreak", "children", "className", "color", "isReversed", "variant"];
+const _excluded$G = ["autoBreak", "children", "className", "color", "isReversed", "theme", "variant"];
 const COMPONENT_NAME$G = 'Badge';
 const CLASSNAME$G = 'redsift-badge';
 const DEFAULT_PROPS$G = {
@@ -2890,13 +3603,16 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       color,
       isReversed,
+      theme: propsTheme,
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$G);
+  const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(StyledBadge, _extends$1({}, forwardedProps, {
     $autoBreak: autoBreak,
     $color: color,
     $isReversed: isReversed,
+    $theme: theme,
     $variant: variant,
     className: classNames(Badge.className, `${Badge.className}-${variant}`, className),
     ref: ref
@@ -2906,7 +3622,7 @@ Badge.className = CLASSNAME$G;
 Badge.defaultProps = DEFAULT_PROPS$G;
 Badge.displayName = COMPONENT_NAME$G;
 
-const _excluded$F = ["as", "badge", "badgeProps", "children", "className", "hasBorder", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "tabIndex"];
+const _excluded$F = ["as", "badge", "badgeProps", "children", "className", "hasBorder", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "tabIndex", "theme"];
 const COMPONENT_NAME$F = 'SideNavigationMenuItem';
 const CLASSNAME$F = 'redsift-side-navigation-menu-item';
 const DEFAULT_PROPS$F = {};
@@ -2932,12 +3648,14 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
       isSecondLevel,
       onClick,
       onKeyDown,
-      tabIndex
+      tabIndex,
+      theme: propsTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$F);
-  warnIfNoAccessibleLabelFound(props, [children]);
+  warnIfNoAccessibleLabelFound(props, [children], 'SideNavigationMenuItem');
   const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);
   const sideNavigationMenuContext = useContext(SideNavigationMenuContext);
+  const theme = useTheme(propsTheme);
   const [isFirstChild, setIsFirstChild] = useState(false);
   const {
     menuItems
@@ -2965,13 +3683,16 @@ const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
   }, /*#__PURE__*/React__default.createElement(Flexbox, {
     flexDirection: "row",
     gap: "0px"
-  }, !isSecondLevel ? /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuItemIndicatorContainer, null, isCurrent ? /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuItemIndicator, null) : null) : null, /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuItem, _extends$1({
+  }, !isSecondLevel ? /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuItemIndicatorContainer, null, isCurrent ? /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuItemIndicator, {
+    $theme: theme
+  }) : null) : null, /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuItem, _extends$1({
     as: as,
     role: "menuitem"
   }, forwardedProps, {
     $isCurrent: isCurrent,
     $isDisabled: isDisabled,
     $isSecondLevel: isSecondLevel,
+    $theme: theme,
     $variant: sideNavigationVariant,
     "aria-current": isCurrent ? 'page' : undefined,
     "aria-disabled": isDisabled,
@@ -3014,21 +3735,22 @@ const StyledSideNavigationMenu = styled.div`
   ${_ref => {
   let {
     $isDisabled,
-    $variant
+    $variant,
+    $theme
   } = _ref;
   return css`
     .redsift-side-navigation-menu__menu-container > button {
       ${!$isDisabled ? css`
             & {
-              color: var(--redsift-side-navigation-color-menu-item-text-resting);
+              color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-resting);
             }
           ` : css`
             & {
-              color: var(--redsift-side-navigation-color-menu-item-text-disabled);
+              color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-disabled);
             }
           `}
       align-items: center;
-      background-color: var(--redsift-side-navigation-color-background);
+      background-color: var(--redsift-color-${$theme}-components-side-navigation-background);
       border: none;
       border-radius: 0 4px 4px 0;
       display: flex;
@@ -3050,11 +3772,11 @@ const StyledSideNavigationMenu = styled.div`
         outline: none;
 
         ${!$isDisabled ? css`
-              background-color: var(--redsift-side-navigation-color-menu-item-background-hover);
+              background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-hover);
               &,
               .redsift-icon.first,
               .redsift-side-navigation-menu__expand-icon {
-                color: var(--redsift-side-navigation-color-menu-item-text-hover);
+                color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-hover);
               }
               cursor: pointer;
             ` : ''}
@@ -3062,14 +3784,14 @@ const StyledSideNavigationMenu = styled.div`
 
       :active {
         ${!$isDisabled ? css`
-              background-color: var(--redsift-side-navigation-color-menu-item-background-active);
+              background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-active);
             ` : ''}
       }
 
       @media (prefers-reduced-motion: no-preference) {
         :focus-visible {
           > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {
-            outline: 2px solid var(--redsift-color-ctas-primary-primary);
+            outline: 2px solid var(--redsift-color-primary-n);
             transition: outline-offset 75ms ease-out;
           }
 
@@ -3106,17 +3828,18 @@ const StyledSideNavigationMenu = styled.div`
     transition: transform 300ms ease-out;
     ${_ref2 => {
   let {
-    $isDisabled
+    $isDisabled,
+    $theme
   } = _ref2;
   return !$isDisabled ? css`
             &,
             .redsift-icon.first {
-              color: var(--redsift-side-navigation-color-menu-item-text-resting);
+              color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-resting);
             }
           ` : css`
             &,
             .redsift-icon.first {
-              color: var(--redsift-side-navigation-color-menu-item-text-disabled);
+              color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-disabled);
             }
           `;
 }}
@@ -3210,9 +3933,28 @@ const SideNavigationMenuReducer = (state, action) => {
  */
 const StyledAppContainer = styled.div`
   box-sizing: content-box;
+
+  --redsift-color-text-primary: ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return `var(--redsift-color-${$theme}-components-text-primary);`;
+}};
+  --redsift-color-text-secondary: ${_ref2 => {
+  let {
+    $theme
+  } = _ref2;
+  return `var(--redsift-color-${$theme}-components-text-secondary);`;
+}};
+  color: ${_ref3 => {
+  let {
+    $theme
+  } = _ref3;
+  return `var(--redsift-color-${$theme}-components-text-primary)`;
+}};
 `;
 
-const _excluded$E = ["children", "className", "locale", "product"];
+const _excluded$E = ["children", "className", "locale", "product", "theme"];
 const COMPONENT_NAME$E = 'AppContainer';
 const CLASSNAME$E = 'redsift-app-container';
 const DEFAULT_PROPS$E = {};
@@ -3225,9 +3967,11 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className,
       locale,
-      product
+      product,
+      theme: propsTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$E);
+  const theme = useTheme(propsTheme);
   const [sidePanelVariant, setSidePanelVariant] = useState(AppSidePanelVariant.standard);
   const [breadcrumbs, setBreadcrumbs] = useState();
   const state = {
@@ -3247,20 +3991,25 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
   };
   return /*#__PURE__*/React__default.createElement(StyledAppContainer, _extends$1({}, forwardedProps, {
     id: "redsift-app-container",
+    $theme: theme,
     $product: product,
     className: classNames(AppContainer.className, className),
     ref: ref
   }), /*#__PURE__*/React__default.createElement(AppContainerContext.Provider, {
     value: state
+  }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
   }, /*#__PURE__*/React__default.createElement(I18nProvider, {
     locale: locale
-  }, children)));
+  }, children))));
 });
 AppContainer.className = CLASSNAME$E;
 AppContainer.defaultProps = DEFAULT_PROPS$E;
 AppContainer.displayName = COMPONENT_NAME$E;
 
-const _excluded$D = ["aria-label", "buttonProps", "buttonRef", "children", "className", "hasBadge", "icon", "iconProps", "iconRef", "id", "isDisabled", "isExpanded", "menuProps", "menuRef", "tabIndex"];
+const _excluded$D = ["aria-label", "buttonProps", "buttonRef", "children", "className", "hasBadge", "icon", "iconProps", "iconRef", "id", "isDisabled", "isExpanded", "menuProps", "menuRef", "tabIndex", "theme"];
 const COMPONENT_NAME$D = 'SideNavigationMenu';
 const CLASSNAME$D = 'redsift-side-navigation-menu';
 const DEFAULT_PROPS$D = {};
@@ -3284,14 +4033,16 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
       isExpanded: propsIsExpanded,
       menuProps = {},
       menuRef = useRef(),
-      tabIndex
+      tabIndex,
+      theme: propsTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$D);
   const [_id] = useId$1();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
-  warnIfNoAccessibleLabelFound(props);
+  warnIfNoAccessibleLabelFound(props, undefined, 'SideNavigationMenu');
   const appContainerState = useContext(AppContainerContext);
   const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);
+  const theme = useTheme(propsTheme);
   const [isFirstChild, setIsFirstChild] = useState(false);
   const currentPosition = useRef(-1);
   const {
@@ -3536,11 +4287,16 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
     }
   };
   const sideNavigationVariant = sideNavigationMenuBarContext === null || sideNavigationMenuBarContext === void 0 ? void 0 : sideNavigationMenuBarContext.sideNavigationMenuBarVariant;
-  return /*#__PURE__*/React__default.createElement(StyledSideNavigationMenu, _extends$1({}, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledSideNavigationMenu, _extends$1({}, forwardedProps, {
     $isDisabled: isDisabled,
     $isExpanded: isExpanded,
-    $variant: sideNavigationVariant,
     $numberOfChildren: renderedMenuItems.length,
+    $theme: theme,
+    $variant: sideNavigationVariant,
     className: classNames(SideNavigationMenu.className, className),
     id: id,
     ref: ref,
@@ -3553,6 +4309,7 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${SideNavigationMenu.className}__current-indicator-container`
   }, currentPosition.current !== -1 ? /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuItemIndicator, {
+    $theme: theme,
     style: {
       position: 'relative',
       top: isExpanded ? `${38 + currentPosition.current * 38}px` : 0,
@@ -3588,7 +4345,7 @@ const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-orientation": "vertical",
     ref: menuRef,
     role: "menu"
-  }, menuItemListEventHandler), renderedMenuItems)))));
+  }, menuItemListEventHandler), renderedMenuItems))))));
 });
 SideNavigationMenu.className = CLASSNAME$D;
 SideNavigationMenu.defaultProps = DEFAULT_PROPS$D;
@@ -3598,23 +4355,28 @@ SideNavigationMenu.displayName = COMPONENT_NAME$D;
  * Component style.
  */
 const StyledSideNavigationMenuBar = styled.nav`
-  background-color: var(--redsift-side-navigation-color-background);
+  background-color: ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return `var(--redsift-color-${$theme}-components-side-navigation-background)`;
+}};
   box-sizing: content-box;
   overflow-x: hidden;
   overflow-y: auto;
   scrollbar-gutter: stable;
   transition: width 300ms ease-out;
-  width: ${_ref => {
+  width: ${_ref2 => {
   let {
     $variant
-  } = _ref;
+  } = _ref2;
   return $variant === SideNavigationMenuBarVariant.shrinked ? '64px' : '250px';
 }};
 
-  ${_ref2 => {
+  ${_ref3 => {
   let {
     $marginTop = 0
-  } = _ref2;
+  } = _ref3;
   return $marginTop ? css`
           height: calc(100% - ${$marginTop}px);
         ` : '';
@@ -3626,7 +4388,12 @@ const StyledSideNavigationMenuBar = styled.nav`
     padding: unset;
   }
 
-  scrollbar-color: var(--redsift-side-navigation-color-scrollbar-resting) transparent;
+  scrollbar-color: ${_ref4 => {
+  let {
+    $theme
+  } = _ref4;
+  return `var(--redsift-color-${$theme}-components-side-navigation-scrollbar-resting) transparent`;
+}};
   scrollbar-width: thin;
 
   &::-webkit-scrollbar {
@@ -3636,7 +4403,12 @@ const StyledSideNavigationMenuBar = styled.nav`
 
   &::-webkit-scrollbar-thumb {
     background-clip: padding-box;
-    background-color: var(--redsift-side-navigation-color-scrollbar-resting);
+    background-color: ${_ref5 => {
+  let {
+    $theme
+  } = _ref5;
+  return `var(--redsift-color-${$theme}-components-side-navigation-scrollbar-resting)`;
+}};
     border-radius: 0px;
     border-left: 2px solid transparent;
     border-right: 2px solid transparent;
@@ -3649,7 +4421,12 @@ const StyledSideNavigationMenuBar = styled.nav`
   &::-webkit-scrollbar-thumb:horizontal,
   &::-webkit-scrollbar-thumb:vertical {
     &:hover {
-      background-color: var(--redsift-side-navigation-color-scrollbar-hover);
+      background-color: ${_ref6 => {
+  let {
+    $theme
+  } = _ref6;
+  return `var(--redsift-color-${$theme}-components-side-navigation-scrollbar-hover)`;
+}};
     }
   }
 
@@ -3658,7 +4435,7 @@ const StyledSideNavigationMenuBar = styled.nav`
   }
 `;
 
-const _excluded$C = ["aria-label", "aria-labelledby", "canHaveMultipleMenuOpenAtOnce", "children", "className", "isDisabled", "menubarProps", "menubarRef", "variant"];
+const _excluded$C = ["aria-label", "aria-labelledby", "canHaveMultipleMenuOpenAtOnce", "children", "className", "isDisabled", "menubarProps", "menubarRef", "theme", "variant"];
 const COMPONENT_NAME$C = 'SideNavigationMenuBar';
 const CLASSNAME$C = 'redsift-side-navigation-menu-bar';
 const DEFAULT_PROPS$C = {
@@ -3690,11 +4467,13 @@ const SideNavigationMenuBar = /*#__PURE__*/forwardRef((props, ref) => {
       isDisabled,
       menubarProps = {},
       menubarRef = useRef(),
+      theme: propsTheme,
       variant: propsVariant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$C);
-  warnIfNoAccessibleLabelFound(props);
+  warnIfNoAccessibleLabelFound(props, undefined, 'SideNavigationMenuBar');
   const appContainerState = useContext(AppContainerContext);
+  const theme = useTheme(propsTheme);
   const {
     top
   } = useBoundingClientRect(navRef, [children]);
@@ -3831,9 +4610,14 @@ const SideNavigationMenuBar = /*#__PURE__*/forwardRef((props, ref) => {
       currentNode === null || currentNode === void 0 ? void 0 : currentNode.focus();
     }
   }, [currentIndex, previousIndex, menuItems]);
-  return /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuBar, _extends$1({}, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuBar, _extends$1({}, forwardedProps, {
     $isDisabled: isDisabled,
     $marginTop: top,
+    $theme: theme,
     $variant: variant,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
@@ -3848,7 +4632,7 @@ const SideNavigationMenuBar = /*#__PURE__*/forwardRef((props, ref) => {
     onKeyDown: keyDown,
     ref: menubarRef,
     role: "menubar"
-  }), navItems)));
+  }), navItems))));
 });
 SideNavigationMenuBar.className = CLASSNAME$C;
 SideNavigationMenuBar.defaultProps = DEFAULT_PROPS$C;
@@ -3954,11 +4738,11 @@ const StyledBreadcrumbItem = styled.a`
   } = _ref;
   return css`
     ${$isDisabled ? `
-        color: var(--redsift-color-neutral-midgrey);
+        color: var(--redsift-color-neutral-mid-grey);
       ` : $isCurrent ? `
-        color: var(--redsift-color-default-primary);
+        color: var(--redsift-color-primary-n);
       ` : `
-        color: var(--redsift-color-neutral-darkgrey);
+        color: var(--redsift-redsift-color-text-primary);
       `}
 
     ${!$isDisabled && !$isCurrent && css`
@@ -3973,11 +4757,11 @@ const StyledBreadcrumbItem = styled.a`
 }}
 
   &:focus-visible {
-    outline: 2px solid var(--redsift-color-neutral-darkgrey);
+    outline: 2px solid var(--redsift-redsift-color-text-primary);
   }
 `;
 
-const _excluded$A = ["as", "children", "className", "href", "isCurrent", "isDisabled"];
+const _excluded$A = ["as", "children", "className", "href", "isCurrent", "isDisabled", "theme"];
 const COMPONENT_NAME$B = 'BreadcrumbItem';
 const CLASSNAME$B = 'redsift-breadcrumb-item';
 const DEFAULT_PROPS$B = {};
@@ -3992,10 +4776,12 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       href,
       isCurrent,
-      isDisabled
+      isDisabled,
+      theme: propsTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$A);
-  warnIfNoAccessibleLabelFound(props, [children]);
+  warnIfNoAccessibleLabelFound(props, [children], 'BreadcrumbItem');
+  const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(StyledBreadcrumbItem, _extends$1({
     as: as || 'a',
     role: "link",
@@ -4003,6 +4789,7 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
   }, forwardedProps, {
     $isCurrent: isCurrent,
     $isDisabled: isDisabled,
+    $theme: theme,
     "aria-current": isCurrent ? 'page' : undefined,
     "aria-disabled": isDisabled || isCurrent,
     className: classNames(BreadcrumbItem.className, className),
@@ -4035,18 +4822,19 @@ const StyledBreadcrumbs = styled.nav`
 
     ${_ref => {
   let {
-    $isDisabled
+    $isDisabled,
+    $theme
   } = _ref;
   return $isDisabled ? css`
-            color: var(--redsift-color-neutral-midgrey);
+            color: var(--redsift-color-neutral-mid-grey);
           ` : css`
-            color: var(--redsift-color-neutral-black);
+            color: var(--redsift-color-${$theme}-components-text-primary);
           `;
 }}
   }
 `;
 
-const _excluded$z = ["children", "className", "isDisabled"];
+const _excluded$z = ["children", "className", "isDisabled", "theme"];
 const COMPONENT_NAME$A = 'Breadcrumbs';
 const CLASSNAME$A = 'redsift-breadcrumbs';
 const DEFAULT_PROPS$A = {};
@@ -4058,10 +4846,12 @@ const BaseBreadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
       className,
-      isDisabled
+      isDisabled,
+      theme: propsTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$z);
-  warnIfNoAccessibleLabelFound(props);
+  warnIfNoAccessibleLabelFound(props, undefined, 'Breadcrumbs');
+  const theme = useTheme(propsTheme);
   const childArray = filterComponents([Breadcrumbs.Item])(children);
   const breadcrumbItems = childArray.map((child, index) => {
     var _child$key;
@@ -4077,11 +4867,16 @@ const BaseBreadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
       className: `${BaseBreadcrumbs.className}__separator`
     }, '/') : null);
   });
-  return /*#__PURE__*/React__default.createElement(StyledBreadcrumbs, _extends$1({}, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledBreadcrumbs, _extends$1({}, forwardedProps, {
     $isDisabled: isDisabled,
+    $theme: theme,
     className: classNames(BaseBreadcrumbs.className, className),
     ref: ref
-  }), /*#__PURE__*/React__default.createElement("ol", null, breadcrumbItems));
+  }), /*#__PURE__*/React__default.createElement("ol", null, breadcrumbItems)));
 });
 BaseBreadcrumbs.className = CLASSNAME$A;
 BaseBreadcrumbs.defaultProps = DEFAULT_PROPS$A;
@@ -4090,7 +4885,7 @@ const Breadcrumbs = Object.assign(BaseBreadcrumbs, {
   Item: BreadcrumbItem
 });
 
-const _excluded$y = ["breadcrumbs", "children", "className", "iconButtonProps", "iconButtonRef", "fallbackTitle", "title"];
+const _excluded$y = ["breadcrumbs", "children", "className", "iconButtonProps", "iconButtonRef", "fallbackTitle", "theme", "title"];
 const COMPONENT_NAME$z = 'AppBar';
 const CLASSNAME$z = 'redsift-app-bar';
 const DEFAULT_PROPS$z = {};
@@ -4107,6 +4902,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
       iconButtonProps,
       iconButtonRef,
       fallbackTitle,
+      theme: propsTheme,
       title: propsTitle
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$y);
@@ -4120,11 +4916,13 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
     isLoaded
   } = useIsLoaded();
   const appContainerState = useContext(AppContainerContext);
+  const theme = useTheme(propsTheme);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$4);
   return /*#__PURE__*/React__default.createElement(StyledAppBar, _extends$1({}, forwardedProps, {
     $hasBorder: scroll,
     $isLoaded: isLoaded,
     $isSidePanelCollapsed: appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked : true,
+    $theme: theme,
     className: classNames(AppBar.className, className),
     ref: ref
   }), /*#__PURE__*/React__default.createElement("div", {
@@ -4142,7 +4940,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
     icon: mdiMenuOpen,
     onClick: appContainerState.collapseSidePanel,
     ref: iconButtonRef,
-    color: "question"
+    color: theme === Theme.dark ? 'light' : 'dark'
   }))) : null, propsTitle && typeof propsTitle !== 'string' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, propsTitle) : typeof propsTitle === 'string' ? /*#__PURE__*/React__default.createElement(Heading, {
     as: "h1"
   }, propsTitle) : breadcrumbs ? /*#__PURE__*/React__default.createElement(Breadcrumbs, {
@@ -4172,6 +4970,14 @@ const StyledAppContent = styled.main`
   padding: 16px 64px;
   ${baseContainer}
 
+  ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return $theme ? css`
+          backgroundcolor: var(--redsift-color-${$theme}-components-page-background);
+        ` : '';
+}}
   box-sizing: border-box;
   min-height: calc(100vh - 92px);
 
@@ -4179,10 +4985,10 @@ const StyledAppContent = styled.main`
     padding: 0px;
   }
 
-  ${_ref => {
+  ${_ref2 => {
   let {
     $isSidePanelCollapsed
-  } = _ref;
+  } = _ref2;
   return !$isSidePanelCollapsed ? css`
           transform: translate(254px);
           width: calc(100% - 254px);
@@ -4192,17 +4998,17 @@ const StyledAppContent = styled.main`
         `;
 }}
 
-  ${_ref2 => {
+  ${_ref3 => {
   let {
     $isLoaded
-  } = _ref2;
+  } = _ref3;
   return $isLoaded ? css`
           transition: transform 0.25s ease-out, width 0.25s ease-out;
         ` : '';
 }}
 `;
 
-const _excluded$x = ["children", "className"];
+const _excluded$x = ["children", "className", "theme"];
 const COMPONENT_NAME$y = 'AppContent';
 const CLASSNAME$y = 'redsift-app-content';
 const DEFAULT_PROPS$y = {};
@@ -4213,16 +5019,19 @@ const DEFAULT_PROPS$y = {};
 const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
-      className
+      className,
+      theme: propsTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$x);
   const {
     isLoaded
   } = useIsLoaded();
   const appContainerState = useContext(AppContainerContext);
+  const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(StyledAppContent, _extends$1({}, forwardedProps, {
     $isLoaded: isLoaded,
     $isSidePanelCollapsed: appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked : true,
+    $theme: theme,
     className: classNames(AppContent.className, className),
     ref: ref
   }), children);
@@ -4265,7 +5074,8 @@ const StyledButtonGroup = styled.div`
   ${_ref2 => {
   let {
     $color,
-    $variant
+    $variant,
+    $theme
   } = _ref2;
   return css`
     ${$variant === ButtonGroupVariant.secondary ? css`
@@ -4294,7 +5104,9 @@ const StyledButtonGroup = styled.div`
             border-top-right-radius: 0;
             border-bottom-right-radius: 0;
             border-right: 1px solid rgba(0, 0, 0, 0.23);
-            border-color: ${`var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-active)`};
+            border-color: ${`var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-default
+            )`};
           }
 
           .middle-button {
@@ -4303,7 +5115,9 @@ const StyledButtonGroup = styled.div`
             border-top-right-radius: 0;
             border-bottom-right-radius: 0;
             border-right: 1px solid rgba(0, 0, 0, 0.23);
-            border-color: ${`var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-active)`};
+            border-color: ${`var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-default
+            )`};
           }
 
           .last-button {
@@ -4315,7 +5129,9 @@ const StyledButtonGroup = styled.div`
             border-top-right-radius: 0;
             border-bottom-right-radius: 0;
             border-right: 1px solid #bdbdbd;
-            border-color: ${`var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-button-hover)`};
+            border-color: ${`var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-hover
+            )`};
           }
 
           .middle-button {
@@ -4324,7 +5140,9 @@ const StyledButtonGroup = styled.div`
             border-top-right-radius: 0;
             border-bottom-right-radius: 0;
             border-right: 1px solid #bdbdbd;
-            border-color: ${`var(--redsift-color-${Object.keys(CtasColorPalette).includes($color) ? 'ctas' : 'notifications'}-${$color}-button-hover)`};
+            border-color: ${`var(
+              --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-hover
+            )`};
           }
 
           .last-button {
@@ -4336,10 +5154,11 @@ const StyledButtonGroup = styled.div`
 }};
 `;
 
-const _excluded$w = ["children", "className", "color", "variant"];
+const _excluded$w = ["children", "className", "color", "theme", "variant"];
 const COMPONENT_NAME$x = 'ButtonGroup';
 const CLASSNAME$x = 'redsift-button-group';
 const DEFAULT_PROPS$x = {
+  color: 'primary',
   variant: 'primary'
 };
 
@@ -4351,9 +5170,11 @@ const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className,
       color,
+      theme: propsTheme,
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$w);
+  const theme = useTheme(propsTheme);
 
   /**
    * Create an array containing only valid children being either Button, IconButton, ButtonLink or MenuButton.
@@ -4365,6 +5186,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
       var _child$key;
       return /*#__PURE__*/React__default.cloneElement(child, {
         color,
+        theme,
         variant,
         key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index,
         triggerClassName: index === 0 ? 'first-button' : index === childArray.length - 1 ? 'last-button' : 'middle-button'
@@ -4372,6 +5194,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
     }
     return /*#__PURE__*/React__default.cloneElement(child, {
       color,
+      theme,
       variant,
       key: (_key = child.key) !== null && _key !== void 0 ? _key : index,
       className: index === 0 ? 'first-button' : index === childArray.length - 1 ? 'last-button' : 'middle-button'
@@ -4381,18 +5204,19 @@ const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
     className: classNames(ButtonGroup.className, className),
     ref: ref,
     $color: color,
-    $variant: variant
+    $variant: variant,
+    $theme: theme
   }), buttons);
 });
 ButtonGroup.className = CLASSNAME$x;
 ButtonGroup.defaultProps = DEFAULT_PROPS$x;
 ButtonGroup.displayName = COMPONENT_NAME$x;
 
-const _excluded$v = ["as", "children", "className", "color", "href", "isActive", "isDisabled", "leftIcon", "rightIcon", "target", "variant"];
+const _excluded$v = ["as", "children", "className", "color", "href", "isActive", "isDisabled", "leftIcon", "rightIcon", "target", "theme", "variant"];
 const COMPONENT_NAME$w = 'ButtonLink';
 const CLASSNAME$w = 'redsift-button-link';
 const DEFAULT_PROPS$w = {
-  color: CtasColorPalette.primary,
+  color: ButtonsColorPalette.primary,
   height: 'fit-content',
   variant: ButtonVariant.primary
 };
@@ -4416,9 +5240,11 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
       leftIcon,
       rightIcon,
       target,
+      theme: propsTheme,
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$v);
+  const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(StyledButton, _extends$1({
     as: as || 'a',
     role: "link",
@@ -4427,6 +5253,7 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
     $color: color,
     $isActive: isActive,
     $isDisabled: isDisabled,
+    $theme: theme,
     $variant: variant,
     className: classNames(ButtonLink.className, className),
     href: !isDisabled ? href : undefined,
@@ -4471,6 +5298,15 @@ var intlMessages$2 = {
 const StyledCard = styled.div`
   ${baseStyling}
 
+  ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return css`
+    color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
+  `;
+}}
+
   display: flex;
   flex-direction: column;
 
@@ -4492,22 +5328,22 @@ const StyledCard = styled.div`
   }
 
   .redsift-card__content {
-    visibility: ${_ref => {
+    visibility: ${_ref2 => {
   let {
     $isCollapsed
-  } = _ref;
+  } = _ref2;
   return !$isCollapsed ? 'visible' : 'hidden';
 }};
-    overflow: ${_ref2 => {
+    overflow: ${_ref3 => {
   let {
     $isCollapsed
-  } = _ref2;
+  } = _ref3;
   return !$isCollapsed ? 'visible' : 'hidden';
 }};
-    height: ${_ref3 => {
+    height: ${_ref4 => {
   let {
     $isCollapsed
-  } = _ref3;
+  } = _ref4;
   return !$isCollapsed ? 'auto' : '0px';
 }};
   }
@@ -4523,8 +5359,6 @@ const StyledCardHeader = styled.div`
   ${baseStyling}
   ${baseFlexbox}
 
-  color: var(--redsift-color-neutral-black);
-
   .redsift-card-header__header {
     align-items: center;
     display: flex;
@@ -4580,7 +5414,12 @@ const StyledSkeleton = styled.div`
   ${baseInternalSpacing}
 
   display: block;
-  background-color: rgba(0, 0, 0, 0.11);
+  background-color: ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return $theme === Theme.light ? css`rgba(0, 0, 0, 0.16)` : css`rgba(255, 255, 255, 0.16)`;
+}};
   border-radius: 4px;
   position: relative;
   overflow: hidden;
@@ -4589,7 +5428,17 @@ const StyledSkeleton = styled.div`
   &::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: linear-gradient(
+      90deg,
+      transparent,
+      ${_ref2 => {
+  let {
+    $theme
+  } = _ref2;
+  return $theme === Theme.light ? css`rgba(0, 0, 0, 0.04)` : css`rgba(255, 255, 255, 0.04)`;
+}},
+      transparent
+    );
     background-clip: content-box;
     content: '';
     position: absolute;
@@ -4625,7 +5474,7 @@ const StyledSkeletonCircle = styled(StyledSkeleton)`
 }}
 `;
 
-const _excluded$u = ["children", "className", "isLoaded"];
+const _excluded$u = ["children", "className", "isLoaded", "theme"];
 const COMPONENT_NAME$v = 'SkeletonCircle';
 const CLASSNAME$v = 'redsift-skeleton-circle';
 const DEFAULT_PROPS$v = {};
@@ -4637,13 +5486,16 @@ const SkeletonCircle = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
       className,
-      isLoaded
+      isLoaded,
+      theme: propsTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$u);
+  const theme = useTheme(propsTheme);
   if (isLoaded) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
   }
   return /*#__PURE__*/React__default.createElement(StyledSkeletonCircle, _extends$1({}, forwardedProps, {
+    $theme: theme,
     className: classNames(SkeletonCircle.className, className),
     ref: ref
   }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", null, children) : children);
@@ -4704,7 +5556,7 @@ const StyledSkeletonText = styled(StyledSkeleton)`
 }}}
 `;
 
-const _excluded$t = ["children", "className", "fontSize", "isLoaded", "lineHeight", "variant"];
+const _excluded$t = ["children", "className", "fontSize", "isLoaded", "lineHeight", "theme", "variant"];
 const COMPONENT_NAME$u = 'SkeletonText';
 const CLASSNAME$u = 'redsift-skeleton-text';
 const DEFAULT_PROPS$u = {
@@ -4721,9 +5573,11 @@ const SkeletonText = /*#__PURE__*/forwardRef((props, ref) => {
       fontSize,
       isLoaded,
       lineHeight,
+      theme: propsTheme,
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$t);
+  const theme = useTheme(propsTheme);
   if (isLoaded) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
   }
@@ -4732,6 +5586,7 @@ const SkeletonText = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref,
     $fontSize: fontSize,
     $lineHeight: lineHeight,
+    $theme: theme,
     $variant: variant
   }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", null, children) : children);
 });
@@ -4739,7 +5594,7 @@ SkeletonText.className = CLASSNAME$u;
 SkeletonText.defaultProps = DEFAULT_PROPS$u;
 SkeletonText.displayName = COMPONENT_NAME$u;
 
-const _excluded$s = ["children", "className", "isLoaded"];
+const _excluded$s = ["children", "className", "isLoaded", "theme"];
 const COMPONENT_NAME$t = 'Skeleton';
 const CLASSNAME$t = 'redsift-skeleton';
 const DEFAULT_PROPS$t = {};
@@ -4751,13 +5606,16 @@ const BaseSkeleton = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
       className,
-      isLoaded
+      isLoaded,
+      theme: propsTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$s);
+  const theme = useTheme(propsTheme);
   if (isLoaded) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
   }
   return /*#__PURE__*/React__default.createElement(StyledSkeleton, _extends$1({}, forwardedProps, {
+    $theme: theme,
     className: classNames(BaseSkeleton.className, className),
     ref: ref
   }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", null, children) : children);
@@ -4824,7 +5682,6 @@ CardHeader.displayName = COMPONENT_NAME$s;
 const StyledCardBody = styled.div`
   ${baseContainer}
 
-  color: var(--redsift-color-neutral-darkgrey);
   font-family: var(--redsift-typography-body-font-family);
   font-size: var(--redsift-typography-body-font-size);
   font-weight: var(--redsift-typography-body-font-weight);
@@ -4891,7 +5748,7 @@ CardActions.className = CLASSNAME$q;
 CardActions.defaultProps = DEFAULT_PROPS$q;
 CardActions.displayName = COMPONENT_NAME$q;
 
-const _excluded$o = ["children", "className", "defaultCollapsed", "isCollapsed", "isCollapsible", "onCollapse"];
+const _excluded$o = ["children", "className", "defaultCollapsed", "isCollapsed", "isCollapsible", "onCollapse", "theme"];
 const COMPONENT_NAME$p = 'Card';
 const CLASSNAME$p = 'redsift-card';
 const DEFAULT_PROPS$p = {};
@@ -4906,9 +5763,11 @@ const BaseCard = /*#__PURE__*/forwardRef((props, ref) => {
       defaultCollapsed,
       isCollapsed: propsIsCollapsed,
       isCollapsible,
-      onCollapse
+      onCollapse,
+      theme: propsTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$o);
+  const theme = useTheme(propsTheme);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$2);
   const [isCollapsed, setIsCollapsed] = useState(propsIsCollapsed !== null && propsIsCollapsed !== void 0 ? propsIsCollapsed : defaultCollapsed);
   useEffect(() => {
@@ -4923,21 +5782,27 @@ const BaseCard = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }, [onCollapse]);
   const [[header], [body], [actions]] = partitionComponents(React__default.Children.toArray(children), [isComponent('CardHeader'), isComponent('CardBody'), isComponent('CardActions')]);
-  return /*#__PURE__*/React__default.createElement(StyledCard, _extends$1({}, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledCard, _extends$1({}, forwardedProps, {
     className: classNames(BaseCard.className, className),
     ref: ref,
-    $isCollapsed: isCollapsed
+    $isCollapsed: isCollapsed,
+    $theme: theme
   }), header || isCollapsible ? /*#__PURE__*/React__default.createElement("div", {
     className: `${BaseCard.className}__header`
-  }, header ? header : null, isCollapsible ? /*#__PURE__*/React__default.createElement(IconButton, {
+  }, header && isComponent('CardHeader')(header) ? header : null, isCollapsible ? /*#__PURE__*/React__default.createElement(IconButton, {
+    theme: theme,
     "aria-label": stringFormatter.format(isCollapsed ? 'expand' : 'collapse'),
     className: `${BaseCard.className}-header__icon-button`,
-    color: "question",
+    color: "grey",
     icon: isCollapsed ? mdiChevronDown : mdiChevronUp,
     onClick: () => handleCollapse(!isCollapsed)
   }) : null) : null, body || actions ? /*#__PURE__*/React__default.createElement("div", {
     className: `${BaseCard.className}__content`
-  }, body, actions) : null);
+  }, body && isComponent('CardBody')(body) ? body : null, actions && isComponent('CardActions')(actions) ? actions : null) : null));
 });
 BaseCard.className = CLASSNAME$p;
 BaseCard.defaultProps = DEFAULT_PROPS$p;
@@ -4999,22 +5864,19 @@ const StyledCheckboxGroup = styled.div`
     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-notifications-error-primary);
-    ` : '';
+    $isDisabled,
+    $isInvalid,
+    $theme
+  } = _ref2;
+  return $isDisabled ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-default);
+          `;
 }}
   }
 
@@ -5024,31 +5886,28 @@ const StyledCheckboxGroup = styled.div`
     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 => {
+    ${_ref3 => {
   let {
-    $isInvalid
-  } = _ref5;
-  return $isInvalid ? `
-      color: var(--redsift-color-notifications-error-primary);
-    ` : '';
+    $isDisabled,
+    $isInvalid,
+    $theme
+  } = _ref3;
+  return $isDisabled ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-default);
+          `;
 }}
   }
 `;
 
-const _excluded$n = ["children", "className", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "value"];
+const _excluded$n = ["children", "className", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "theme", "value"];
 const COMPONENT_NAME$o = 'CheckboxGroup';
 const CLASSNAME$o = 'redsift-checkbox-group';
 const DEFAULT_PROPS$o = {
-  color: CtasColorPalette.primary,
+  color: ColorPalette.primary,
   orientation: CheckboxGroupOrientation.vertical
 };
 
@@ -5069,9 +5928,11 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
       label,
       onChange,
       orientation,
+      theme: propsTheme,
       value
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$n);
+  const theme = useTheme(propsTheme);
   const [selectedValues, setValue] = useState(value || defaultValues || []);
   useEffect(() => {
     if (value) {
@@ -5105,11 +5966,16 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   };
-  return /*#__PURE__*/React__default.createElement(StyledCheckboxGroup, _extends$1({}, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledCheckboxGroup, _extends$1({}, forwardedProps, {
     $isDisabled: isDisabled,
     $isInvalid: isInvalid || isRequired && selectedValues.length === 0,
     $isReadOnly: isReadOnly,
     $orientation: orientation,
+    $theme: theme,
     "aria-disabled": isDisabled,
     className: classNames(CheckboxGroup.className, className),
     ref: ref,
@@ -5122,7 +5988,7 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
     value: state
   }, children)), /*#__PURE__*/React__default.createElement("span", {
     className: `${CheckboxGroup.className}-description`
-  }, description));
+  }, description)));
 });
 CheckboxGroup.className = CLASSNAME$o;
 CheckboxGroup.defaultProps = DEFAULT_PROPS$o;
@@ -5156,14 +6022,15 @@ const StyledCheckbox = styled.label`
     ${_ref => {
   let {
     $isDisabled,
-    $isInvalid
+    $isInvalid,
+    $theme
   } = _ref;
   return $isDisabled ? css`
-            color: var(--redsift-color-neutral-lightgrey);
+            color: var(--redsift-color-${$theme}-components-checkbox-text-disabled);
           ` : $isInvalid ? css`
-            color: var(--redsift-color-notifications-error-primary);
+            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);
           ` : css`
-            color: var(--redsift-color-neutral-black);
+            color: var(--redsift-color-${$theme}-components-checkbox-text-default);
           `;
 }}
 
@@ -5191,19 +6058,20 @@ const StyledCheckbox = styled.label`
     $isColored,
     $isDisabled,
     $isInvalid,
-    $isFocusVisible
+    $isFocusVisible,
+    $theme
   } = _ref2;
   return css`
       ${$isDisabled ? css`
-            color: var(--redsift-color-neutral-lightgrey);
+            color: var(--redsift-color-${$theme}-components-checkbox-fill-disabled);
           ` : $isInvalid ? css`
-            color: var(--redsift-color-notifications-error-primary);
+            color: var(--redsift-color-${$theme}-components-checkbox-fill-invalid);
           ` : css`
-            color: ${$isColored ? 'var(--redsift-color-ctas-primary-primary)' : 'var(--redsift-color-notifications-question-primary)'};
+            color: ${$isColored ? `var(--redsift-color-${$theme}-components-checkbox-fill-default)` : `var(--redsift-color-${$theme}-components-checkbox-fill-uncolored)`};
           `}
 
       ${$isFocusVisible && !$isDisabled ? css`
-            background-color: ${$isColored ? 'var(--redsift-color-ctas-primary-hover)' : 'var(--redsift-color-notifications-question-hover)'};
+            background-color: ${$isColored ? `var(--redsift-color-${$theme}-components-checkbox-fill-default-hover)` : `var(--redsift-color-${$theme}-components-checkbox-fill-uncolored-hover)`};
           ` : ''}
     `;
 }}
@@ -5216,11 +6084,17 @@ const StyledCheckbox = styled.label`
     ${_ref3 => {
   let {
     $isColored,
-    $isDisabled
+    $isDisabled,
+    $isInvalid,
+    $theme
   } = _ref3;
   return !$isDisabled ? css`
             .redsift-icon {
-              background-color: ${$isColored ? 'var(--redsift-color-ctas-primary-hover)' : 'var(--redsift-color-notifications-question-hover)'};
+              ${$isInvalid ? css`
+                    background-color: var(--redsift-color-${$theme}-components-checkbox-fill-invalid-hover);
+                  ` : css`
+                    background-color: ${$isColored ? `var(--redsift-color-${$theme}-components-checkbox-fill-default-hover)` : `var(--redsift-color-${$theme}-components-checkbox-fill-uncolored-hover)`};
+                  `}
               border-radius: 4px;
             }
           ` : '';
@@ -5228,7 +6102,7 @@ const StyledCheckbox = styled.label`
   }
 `;
 
-const _excluded$m = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isIndeterminate", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
+const _excluded$m = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isIndeterminate", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "theme", "value"];
 const COMPONENT_NAME$n = 'Checkbox';
 const CLASSNAME$n = 'redsift-checkbox';
 const DEFAULT_PROPS$n = {
@@ -5261,9 +6135,11 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
       isSelected: propsIsSelected,
       name,
       onChange,
+      theme: propsTheme,
       value
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$m);
+  const theme = useTheme(propsTheme);
   const {
     isFocusVisible,
     focusProps
@@ -5282,7 +6158,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
       setSelected(groupState.value.includes(value));
     }
   }, [groupState === null || groupState === void 0 ? void 0 : groupState.value]);
-  warnIfNoAccessibleLabelFound(props, [children]);
+  warnIfNoAccessibleLabelFound(props, [children], 'Checkbox');
   if (groupState) {
     if (propsIsSelected != null) {
       console.warn('isSelected is unsupported on individual <Checkbox> elements within a <CheckboxGroup> unless the <Checkbox> is controlled. Please apply this prop to the group instead or pass isControlled to the component.');
@@ -5319,6 +6195,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     $isInvalid: isInvalid || isRequired && !(isSelected || isControlled && propsIsSelected),
     $isRequired: isRequired,
     $isSelected: isSelected || isControlled && propsIsSelected,
+    $theme: theme,
     className: classNames(Checkbox.className, className),
     ref: ref
   }), isSelected || isControlled && propsIsSelected ? /*#__PURE__*/React__default.createElement(Icon, {
@@ -5409,25 +6286,26 @@ const StyledShield = styled.div`
   let {
     $color,
     $isOutlined,
-    $isReversed
+    $isReversed,
+    $theme
   } = _ref;
   if ($isReversed && $isOutlined) {
     return css`
         & .shield {
           fill: var(--redsift-color-notifications-${$color}-primary);
-          stroke: #ffffff;
+          stroke: var(--redsift-color-${$theme}-components-page-background);
           stroke-width: 2;
         }
         & .icon {
           fill-rule: evenodd;
           clip-rule: evenodd;
-          fill: #ffffff;
+          fill: var(--redsift-color-${$theme}-components-page-background);
         }
       `;
   } else if ($isOutlined) {
     return css`
         & .shield {
-          fill: #ffffff;
+          fill: var(--redsift-color-${$theme}-components-page-background);
           stroke: var(--redsift-color-notifications-${$color}-primary);
           stroke-width: 2;
         }
@@ -5440,7 +6318,7 @@ const StyledShield = styled.div`
   } else if ($isReversed) {
     return css`
         & .shield {
-          fill: #ffffff;
+          fill: var(--redsift-color-${$theme}-components-page-background);
         }
         & .icon {
           fill-rule: evenodd;
@@ -5456,14 +6334,14 @@ const StyledShield = styled.div`
         & .icon {
           fill-rule: evenodd;
           clip-rule: evenodd;
-          fill: #ffffff;
+          fill: var(--redsift-color-${$theme}-components-page-background);
         }
       `;
   }
 }}
 `;
 
-const _excluded$l = ["aria-hidden", "aria-label", "className", "svgProps", "isOutlined", "isReversed", "variant"];
+const _excluded$l = ["aria-hidden", "aria-label", "className", "svgProps", "isOutlined", "isReversed", "theme", "variant"];
 const COMPONENT_NAME$m = 'Shield';
 const CLASSNAME$m = 'redsift-shield';
 const DEFAULT_PROPS$m = {
@@ -5550,9 +6428,11 @@ const Shield = /*#__PURE__*/forwardRef((props, ref) => {
       svgProps,
       isOutlined,
       isReversed,
+      theme: propsTheme,
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$l);
+  const theme = useTheme(propsTheme);
   const {
     color,
     icon
@@ -5565,6 +6445,7 @@ const Shield = /*#__PURE__*/forwardRef((props, ref) => {
     $color: color,
     $isOutlined: isOutlined,
     $isReversed: isReversed,
+    $theme: theme,
     $variant: variant
   }), /*#__PURE__*/React__default.createElement("svg", _extends$1({
     "aria-hidden": ariaLabel ? ariaHidden ? ariaHidden : undefined : true,
@@ -5620,14 +6501,14 @@ const StyledDetailedCardCollapsibleSectionItems = styled.div`
   return $hideBackground ? css`
           background: none;
         ` : css`
-          background-color: var(--redsift-color-neutral-xlightgrey);
+          background-color: var(--redsift-color-neutral-x-light-grey);
           margin: 8px -16px;
           padding: 8px 16px;
         `;
 }}
 
   .redsift-detailed-card-collapsible-section-items__caption {
-    color: var(--redsift-color-neutral-black);
+    color: var(--redsift-color-neutral-x-dark-grey);
     display: flex;
     font-family: var(--redsift-typography-font-family-poppins);
     font-size: 12px;
@@ -5636,7 +6517,7 @@ const StyledDetailedCardCollapsibleSectionItems = styled.div`
     line-height: 14px;
     margin: 8px 0px;
     padding-top: 8px;
-    border-top: 1px solid var(--redsift-color-neutral-midgrey);
+    border-top: 1px solid var(--redsift-color-neutral-mid-grey);
   }
 `;
 
@@ -5679,10 +6560,12 @@ const StyledDetailedCardSection = styled.div`
   let {
     $color
   } = _ref;
-  return $color && [...Object.keys(NotificationsColorPalette), ...Object.keys(ProductColorPalette)].indexOf($color) !== -1 ? css`
-            border-bottom: 1px solid var(--redsift-color-${$color}-primary);
+  return $color && Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
+            border-bottom: 1px solid var(--redsift-color-notifications-${$color}-primary);
+          ` : $color && Object.keys(ProductColorPalette).indexOf($color) !== -1 ? css`
+            border-bottom: 1px solid var(--redsift-color-product-${$color});
           ` : css`
-            border-bottom: 1px solid ${$color || css`var(--redsift-color-neutral-midgrey)`};
+            border-bottom: 1px solid ${$color || css`var(--redsift-color-neutral-mid-grey)`};
           `;
 }}
     margin-bottom: 8px;
@@ -5696,7 +6579,7 @@ const StyledDetailedCardSection = styled.div`
   }
 
   .redsift-detailed-card-section-header__collapse-button {
-    color: var(--redsift-color-neutral-black);
+    color: var(--redsift-color-neutral-x-dark-grey);
   }
 
   .redsift-detailed-card-collapsible-section-items {
@@ -5795,7 +6678,7 @@ const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
     marginLeft: "auto",
     "aria-label": stringFormatter.format(isCollapsed ? 'expand' : 'collapse'),
     className: `${DetailedCardSection.className}-header__collapse-button`,
-    color: "question",
+    color: "grey",
     icon: isCollapsed ? mdiChevronDown : mdiChevronUp,
     onClick: () => {
       setIsCollapsed(isCollapsed => !isCollapsed);
@@ -5812,19 +6695,36 @@ DetailedCardSection.displayName = COMPONENT_NAME$k;
 const StyledDetailedCard = styled.div`
   ${baseStyling}
 
-  background-color: var(--redsift-color-neutral-white);
+  color: var(--redsift-color-neutral-${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return $theme === Theme.light ? 'x-dark-grey' : 'white';
+}});
+  background-color: var(--redsift-color-neutral-${_ref2 => {
+  let {
+    $theme
+  } = _ref2;
+  return $theme === Theme.light ? 'white' : 'x-dark-grey';
+}});
   border-radius: 4px;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, ${_ref3 => {
+  let {
+    $theme
+  } = _ref3;
+  return $theme === Theme.light ? '0.5' : '1';
+}});
   box-sizing: content-box;
   padding: 16px;
 
   .redsift-detailed-card__banner {
-    background-color: ${_ref => {
+    background-color: ${_ref4 => {
   let {
     $color
-  } = _ref;
+  } = _ref4;
   return css`var(--redsift-color-notifications-${$color}-primary)`;
 }};
+    color: var(--redsift-color-neutral-white);
   }
 
   .redsift-detailed-card__collapse-buttons {
@@ -5839,6 +6739,12 @@ const StyledDetailedCardHeader = styled.div`
   margin: 8px 0;
 
   .redsift-detailed-card-header__header {
+    color: var(--redsift-color-neutral-${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return $theme === Theme.light ? 'x-dark-grey' : 'white';
+}});
     font-family: var(--redsift-typography-font-family-poppins);
     font-size: 32px;
     font-weight: 500;
@@ -5864,9 +6770,11 @@ const DetailedCardHeader = /*#__PURE__*/forwardRef((props, ref) => {
       isLoading
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$i);
+  const theme = useTheme();
   return /*#__PURE__*/React__default.createElement(StyledDetailedCardHeader, _extends$1({}, forwardedProps, {
     className: classNames(DetailedCardHeader.className, className),
-    ref: ref
+    ref: ref,
+    $theme: theme
   }), header ? /*#__PURE__*/React__default.createElement(Skeleton.Text, {
     variant: "h2",
     isLoaded: !isLoading,
@@ -5910,7 +6818,7 @@ const pickTextColorBasedOnBgColorAdvanced = (bgColor, lightColor, darkColor) =>
   return L > 0.179 ? darkColor : lightColor;
 };
 const nameToHex = color => {
-  return [...Object.keys(PresentationColorPalette), 'white', 'black', 'no-data', 'error', 'warning', 'success', 'error-dark', 'warning-dark', 'success-dark'].includes(color) ? {
+  return [...Object.keys(PresentationColorPalette), ...Object.keys(NeutralColorPalette), 'error', 'warning', 'success', 'error-dark', 'warning-dark', 'success-dark'].includes(color) ? {
     green: RedsiftColorPresentationGreenLight,
     pink: RedsiftColorPresentationPinkLight,
     aqua: RedsiftColorPresentationAquaLight,
@@ -5922,8 +6830,12 @@ const nameToHex = color => {
     blue: RedsiftColorPresentationBlueLight,
     grey: RedsiftColorPresentationGreyLight,
     white: RedsiftColorNeutralWhite,
+    'x-light-grey': RedsiftColorNeutralXLightGrey,
+    'light-grey': RedsiftColorNeutralLightGrey,
+    'mid-grey': RedsiftColorNeutralMidGrey,
+    'dark-grey': RedsiftColorNeutralDarkGrey,
+    'x-dark-grey': RedsiftColorNeutralXDarkGrey,
     black: RedsiftColorNeutralBlack,
-    'no-data': RedsiftColorNeutralMidgrey,
     error: RedsiftColorPresentationRedLighter,
     warning: RedsiftColorPresentationOrangeLighter,
     success: RedsiftColorPresentationGreenLighter,
@@ -5969,13 +6881,14 @@ const StyledPill = styled.div`
   let {
     $color,
     $hoverColor,
-    $size
+    $size,
+    $theme
   } = _ref2;
   return css`
     ${$color === 'black' ? 'background-color: var(--redsift-color-neutral-black);' : $color === 'white' ? css`
           background-color: var(--redsift-color-neutral-white);
           border: 1px solid #d6d6d6;
-        ` : $color === 'no-data' ? 'background-color: var(--redsift-color-neutral-midgrey);' : $color === 'error' ? 'background-color: var(--redsift-color-presentation-red-lighter);' : $color === 'warning' ? 'background-color: var(--redsift-color-presentation-orange-lighter);' : $color === 'success' ? 'background-color: var(--redsift-color-presentation-green-lighter);' : $color === 'error-dark' ? 'background-color: var(--redsift-color-presentation-red-default);' : $color === 'warning-dark' ? 'background-color: var(--redsift-color-presentation-orange-default);' : $color === 'success-dark' ? 'background-color: var(--redsift-color-presentation-green-default);' : Object.keys(PresentationColorPalette).includes($color) ? `background-color: var(--redsift-color-presentation-${$color}-light);` : `background-color: ${$color};`}
+        ` : $color === 'no-data' ? 'background-color: var(--redsift-color-neutral-mid-grey);' : $color === 'error' ? 'background-color: var(--redsift-color-presentation-red-lighter);' : $color === 'warning' ? 'background-color: var(--redsift-color-presentation-orange-lighter);' : $color === 'success' ? 'background-color: var(--redsift-color-presentation-green-lighter);' : $color === 'error-dark' ? 'background-color: var(--redsift-color-presentation-red-default);' : $color === 'warning-dark' ? 'background-color: var(--redsift-color-presentation-orange-default);' : $color === 'success-dark' ? 'background-color: var(--redsift-color-presentation-green-default);' : Object.keys(PresentationColorPalette).includes($color) ? `background-color: var(--redsift-color-presentation-${$color}-light);` : `background-color: ${$color};`}
 
     &,
     .redsift-icon {
@@ -5988,12 +6901,13 @@ const StyledPill = styled.div`
       border: none;
       border-radius: 0 2px 2px 0;
       margin: -2px -8px -2px 2px;
-      border-left: 1px solid ${$color === 'white' ? '#d6d6d6' : css`var(--redsift-color-neutral-white)`};
+      border-left: 1px solid
+        ${$color === 'white' ? '#d6d6d6' : css`var(--redsift-color-neutral-${$theme === Theme.light ? 'white' : 'x-dark-grey'})`};
       font-size: ${$size === PillSize.large ? css`15px` : css`14px`};
     }
 
     button:hover {
-      ${$color === 'black' ? 'background-color: var(--redsift-color-neutral-darkgrey);' : $color === 'white' ? 'background-color: var(--redsift-color-neutral-xlightgrey);' : $color === 'no-data' ? 'background-color: var(--redsift-color-neutral-darkgrey);' : $color === 'error' ? 'background-color: var(--redsift-color-presentation-red-light);' : $color === 'warning' ? 'background-color: var(--redsift-color-presentation-orange-light);' : $color === 'success' ? 'background-color: var(--redsift-color-presentation-green-light);' : $color === 'error-dark' ? 'background-color: var(--redsift-color-presentation-red-dark);' : $color === 'warning-dark' ? 'background-color: var(--redsift-color-presentation-orange-dark);' : $color === 'success-dark' ? 'background-color: var(--redsift-color-presentation-green-dark);' : Object.keys(PresentationColorPalette).includes($color) ? `background-color: var(--redsift-color-presentation-${$color}-default);` : ''}
+      ${$color === 'black' ? 'background-color: var(--redsift-color-neutral-x-dark-grey);' : $color === 'white' ? 'background-color: var(--redsift-color-neutral-x-light-grey);' : $color === 'no-data' ? 'background-color: var(--redsift-color-neutral-x-dark-grey);' : $color === 'error' ? 'background-color: var(--redsift-color-presentation-red-light);' : $color === 'warning' ? 'background-color: var(--redsift-color-presentation-orange-light);' : $color === 'success' ? 'background-color: var(--redsift-color-presentation-green-light);' : $color === 'error-dark' ? 'background-color: var(--redsift-color-presentation-red-dark);' : $color === 'warning-dark' ? 'background-color: var(--redsift-color-presentation-orange-dark);' : $color === 'success-dark' ? 'background-color: var(--redsift-color-presentation-green-dark);' : Object.keys(PresentationColorPalette).includes($color) ? `background-color: var(--redsift-color-presentation-${$color}-default);` : ''}
       background-color: ${$hoverColor};
     }
   `;
@@ -6033,7 +6947,7 @@ const StyledPill = styled.div`
   }
 `;
 
-const _excluded$h = ["autoBreak", "children", "className", "color", "hoverColor", "rightButton", "size"];
+const _excluded$h = ["autoBreak", "children", "className", "color", "hoverColor", "rightButton", "size", "theme"];
 const COMPONENT_NAME$i = 'Pill';
 const CLASSNAME$i = 'redsift-pill';
 const DEFAULT_PROPS$i = {
@@ -6053,21 +6967,24 @@ const Pill = /*#__PURE__*/forwardRef((props, ref) => {
       color,
       hoverColor,
       rightButton,
-      size
+      size,
+      theme: propsTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$h);
+  const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(StyledPill, _extends$1({}, forwardedProps, {
     $autoBreak: autoBreak,
     $color: color,
     $hoverColor: hoverColor,
     $size: size,
+    $theme: theme,
     className: classNames(Pill.className, className),
     ref: ref
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${Pill.className}-content`
   }, children), rightButton ? /*#__PURE__*/React__default.createElement("button", _extends$1({
     "aria-label": "Clear",
-    color: "question"
+    color: "grey"
   }, rightButton, {
     className: "right clear"
   }), /*#__PURE__*/React__default.createElement(Icon, {
@@ -6108,7 +7025,7 @@ const StyledDetailedCardSectionItem = styled.div`
   }
 `;
 
-const _excluded$g = ["children", "className", "description", "icon", "iconProps", "isLoading", "pill", "pillProps", "shield"];
+const _excluded$g = ["children", "className", "description", "descriptionProps", "icon", "iconProps", "isLoading", "pill", "pillProps", "shield"];
 const COMPONENT_NAME$h = 'DetailedCardSectionItem';
 const CLASSNAME$h = 'redsift-detailed-card-section-item';
 const DEFAULT_PROPS$h = {};
@@ -6121,6 +7038,7 @@ const DetailedCardSectionItem = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className,
       description,
+      descriptionProps,
       icon,
       iconProps,
       isLoading,
@@ -6154,7 +7072,7 @@ const DetailedCardSectionItem = /*#__PURE__*/forwardRef((props, ref) => {
     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, descriptionProps, description) : description)) : null), children);
 });
 DetailedCardSectionItem.className = CLASSNAME$h;
 DetailedCardSectionItem.defaultProps = DEFAULT_PROPS$h;
@@ -9761,12 +10679,19 @@ const TooltipPlacement = {
  */
 const StyledTooltipContent = styled.div`
   ${baseContainer}
+  ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return css`
+    color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
+    background-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'black' : 'white'});
+  `;
+}}
 
   align-items: center;
-  background-color: var(--redsift-color-neutral-white);
   border-radius: 4px;
   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);
@@ -9781,14 +10706,45 @@ const StyledTooltipContent = styled.div`
     position: absolute;
     width: 0;
     height: 0;
-    border-color: var(--redsift-color-neutral-white);
+    border-color: ${_ref2 => {
+  let {
+    $theme
+  } = _ref2;
+  return $theme === Theme.dark ? css`var(--redsift-color-neutral-black)` : css`var(--redsift-color-neutral-white)`;
+}};
     border-style: solid;
   }
 
-  ${_ref => {
+  ${_ref3 => {
   let {
     $placement
-  } = _ref;
+  } = _ref3;
+  switch ($placement) {
+    case TooltipPlacement['right-start']:
+      return css`
+          border-bottom-left-radius: 0;
+        `;
+    case TooltipPlacement['right-end']:
+      return css`
+          border-top-left-radius: 0;
+        `;
+    case TooltipPlacement['left-start']:
+      return css`
+          border-bottom-right-radius: 0;
+        `;
+    case TooltipPlacement['left-end']:
+      return css`
+          border-top-right-radius: 0;
+        `;
+    default:
+      return css``;
+  }
+}}
+
+  ${_ref4 => {
+  let {
+    $placement
+  } = _ref4;
   switch ($placement) {
     case TooltipPlacement.left:
     case TooltipPlacement['left-end']:
@@ -9850,7 +10806,8 @@ const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
     className,
-    style
+    style,
+    theme: propsTheme
   } = props;
   const {
     getFloatingProps,
@@ -9867,6 +10824,7 @@ const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
       } = {}
     }
   } = useTooltipContext();
+  const theme = useTheme ? useTheme(propsTheme) : undefined;
   const popoverRef = useMergeRefs([refs.setFloating, ref]);
   const {
     arrowRef
@@ -9882,6 +10840,7 @@ const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
   }, isOpen && /*#__PURE__*/React__default.createElement(StyledTooltipContent, _extends$1({
     className: classNames(TooltipContent.className, className),
     ref: popoverRef,
+    $theme: theme,
     style: _objectSpread2({
       position: strategy,
       top: y !== null && y !== void 0 ? y : 0,
@@ -10021,20 +10980,27 @@ const BaseTooltip = props => {
     isOpen,
     onOpen,
     placement,
-    tooltipId
+    tooltipId,
+    theme: propsTheme
   } = props;
+  const theme = useTheme ? useTheme(propsTheme) : undefined;
   const tooltip = useTooltip({
     defaultOpen,
     delay,
     placement,
     isOpen,
     onOpen,
-    tooltipId
+    tooltipId,
+    theme
   });
   const [[trigger], [content]] = partitionComponents(React__default.Children.toArray(children), [isComponent('TooltipTrigger'), isComponent('TooltipContent')]);
-  return /*#__PURE__*/React__default.createElement(TooltipContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(TooltipContext.Provider, {
     value: tooltip
-  }, trigger, content);
+  }, trigger && isComponent('TooltipTrigger')(trigger) ? trigger : null, content && isComponent('TooltipContent')(content) ? content : null));
 };
 BaseTooltip.className = CLASSNAME$e;
 BaseTooltip.defaultProps = DEFAULT_PROPS$e;
@@ -10052,7 +11018,7 @@ const useTooltipContext = () => {
   return context;
 };
 
-const _excluded$f = ["areAllCollapsed", "bannerVariant", "children", "className", "color", "defaultAllCollapsed", "icon", "isCollapsible", "isLoading", "onCollapseAll", "shield"];
+const _excluded$f = ["areAllCollapsed", "bannerVariant", "children", "className", "color", "defaultAllCollapsed", "icon", "isCollapsible", "isLoading", "onCollapseAll", "shield", "theme"];
 const COMPONENT_NAME$d = 'DetailedCard';
 const CLASSNAME$d = 'redsift-detailed-card';
 const DEFAULT_PROPS$d = {
@@ -10093,9 +11059,11 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
       isCollapsible: propsIsCollapsible,
       isLoading,
       onCollapseAll,
-      shield
+      shield,
+      theme: propsTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$f);
+  const theme = useTheme(propsTheme);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$1);
   const isCollapsible = propsIsCollapsible && hasMultipleCollapsibleChildren(children);
   const [allCollapsed, setAllCollapsed] = useState({
@@ -10117,11 +11085,17 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }, [onCollapseAll]);
   const [[header], content] = partitionComponents(React__default.Children.toArray(children), [isComponent('DetailedCardHeader')]);
-  return /*#__PURE__*/React__default.createElement(StyledDetailedCard, _extends$1({}, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledDetailedCard, _extends$1({}, forwardedProps, {
     className: classNames(BaseDetailedCard.className, className),
     ref: ref,
-    $color: color
+    $color: color,
+    $theme: theme
   }), color ? isLoading ? /*#__PURE__*/React__default.createElement(Skeleton, {
+    theme: theme,
     height: bannerVariant === 'condensed' ? '8px' : '80px',
     width: "calc(100% + 32px)",
     margin: "-16px -16px 16px -16px"
@@ -10148,7 +11122,7 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
     icon: icon,
     color: "white",
     size: "xlarge"
-  }) : null) : null, header ? /*#__PURE__*/React__default.createElement("div", {
+  }) : null) : null, header && isComponent('DetailedCardHeader')(header) ? /*#__PURE__*/React__default.createElement("div", {
     className: `${BaseDetailedCard.className}__header`
   }, header) : null, isCollapsible ? /*#__PURE__*/React__default.createElement(Flexbox, {
     justifyContent: "flex-end",
@@ -10161,7 +11135,7 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
     style: {
       transform: 'rotate(-90deg)'
     },
-    color: "question"
+    color: "grey"
   })), /*#__PURE__*/React__default.createElement(Tooltip.Content, null, stringFormatter.format('collapse-all'))), /*#__PURE__*/React__default.createElement(Tooltip, null, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, null, /*#__PURE__*/React__default.createElement(IconButton, {
     "aria-label": stringFormatter.format('expand-all'),
     "aria-describedby": undefined,
@@ -10170,16 +11144,17 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
     style: {
       transform: 'rotate(180deg)'
     },
-    color: "question"
+    color: "grey"
   })), /*#__PURE__*/React__default.createElement(Tooltip.Content, null, stringFormatter.format('expand-all')))) : null, React__default.Children.map(content, child => {
     if (isComponent(DetailedCardSection)(child)) {
       return /*#__PURE__*/React__default.cloneElement(child, {
+        theme,
         isCollapsed: allCollapsed.state,
         key: Math.random()
       });
     }
     return child;
-  }));
+  })));
 });
 BaseDetailedCard.className = CLASSNAME$d;
 BaseDetailedCard.defaultProps = DEFAULT_PROPS$d;
@@ -10950,7 +11925,7 @@ const StyledGrid = styled.div`
             ::before {
               content: '';
               position: absolute;
-              background-color: var(--redsift-color-neutral-lightgrey);
+              background-color: var(--redsift-color-neutral-light-grey);
               inline-size: 1px;
               block-size: 100%;
               inset-inline-start: calc(${Math.max(1, $divider.colGap / 2)}px * -1);
@@ -10959,7 +11934,7 @@ const StyledGrid = styled.div`
             ::after {
               content: '';
               position: absolute;
-              background-color: var(--redsift-color-neutral-lightgrey);
+              background-color: var(--redsift-color-neutral-light-grey);
               inline-size: 200vw;
               block-size: 1px;
               inset-inline-start: -100vw;
@@ -11004,7 +11979,7 @@ GridItem.className = CLASSNAME$c;
 GridItem.defaultProps = DEFAULT_PROPS$c;
 GridItem.displayName = COMPONENT_NAME$c;
 
-const _excluded$d = ["children", "className", "divider", "gap"];
+const _excluded$d = ["children", "className", "divider", "gap", "theme"];
 const COMPONENT_NAME$b = 'Grid';
 const CLASSNAME$b = 'redsift-grid';
 const DEFAULT_PROPS$b = {};
@@ -11017,15 +11992,22 @@ const BaseGrid = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className,
       divider,
-      gap
+      gap,
+      theme: propsTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$d);
-  return /*#__PURE__*/React__default.createElement(StyledGrid, _extends$1({}, forwardedProps, {
+  const theme = useTheme(propsTheme);
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledGrid, _extends$1({}, forwardedProps, {
     gap: divider ? `${divider.rowGap}px ${divider.colGap}px` : gap,
     className: classNames(BaseGrid.className, className),
     ref: ref,
-    $divider: divider
-  }), children);
+    $divider: divider,
+    $theme: theme
+  }), children));
 });
 BaseGrid.className = CLASSNAME$b;
 BaseGrid.defaultProps = DEFAULT_PROPS$b;
@@ -11057,10 +12039,11 @@ const StyledItem = styled.div`
     $isSelected,
     $isDisabled,
     $isHovered,
-    $isFocused
+    $isFocused,
+    $theme
   } = _ref;
   return css`
-    background-color: ${($isActive || $isSelected) && ($isHovered || $isFocused) ? 'var(--redsift-color-ctas-primary-active-hover)' : $isActive ? 'var(--redsift-color-ctas-primary-active)' : $isHovered ? 'var(--redsift-color-ctas-primary-hover)' : $isFocused ? 'var(--redsift-color-ctas-primary-hover)' : $isSelected && !$isDisabled ? 'var(--redsift-color-ctas-primary-active)' : $isSelected && $isDisabled ? 'var(--redsift-color-neutral-lightgrey)' : $isDisabled ? 'none' : 'none'};
+    background-color: ${($isActive || $isSelected) && ($isHovered || $isFocused) ? `var(--redsift-color-primary-${$theme === Theme.light ? 'l1' : 'd2'})` : $isActive ? `var(--redsift-color-primary-${$theme === Theme.light ? 'l1' : 'd2'})` : $isHovered ? `var(--redsift-color-primary-${$theme === Theme.light ? 'l2' : 'd1'})` : $isFocused ? `var(--redsift-color-primary-${$theme === Theme.light ? 'l2' : 'd1'})` : $isSelected && !$isDisabled ? `var(--redsift-color-primary-${$theme === Theme.light ? 'l1' : 'd2'})` : $isSelected && $isDisabled ? 'var(--redsift-color-neutral-light-grey)' : $isDisabled ? 'none' : 'none'};
   `;
 }}
 
@@ -11072,11 +12055,12 @@ const StyledItem = styled.div`
   let {
     $isActive,
     $isSelected,
-    $isDisabled
+    $isDisabled,
+    $theme
   } = _ref2;
   return css`
       cursor: ${$isDisabled ? 'default' : 'pointer'};
-      background-color: ${$isActive ? 'var(--redsift-color-ctas-primary-active-hover)' : $isSelected && !$isDisabled ? 'var(--redsift-color-ctas-primary-active-hover)' : $isDisabled ? 'none' : 'var(--redsift-color-ctas-primary-hover)'};
+      background-color: ${$isActive ? `var(--redsift-color-primary-${$theme === Theme.light ? 'l1' : 'd2'})` : $isSelected && !$isDisabled ? `var(--redsift-color-primary-${$theme === Theme.light ? 'l1' : 'd2'})` : $isDisabled ? 'none' : `var(--redsift-color-primary-${$theme === Theme.light ? 'l2' : 'd1'})`};
     `;
 }};
   }
@@ -11087,10 +12071,11 @@ const StyledItem = styled.div`
     ${_ref3 => {
   let {
     $isHovered,
-    $isDisabled
+    $isDisabled,
+    $theme
   } = _ref3;
   return css`
-      background-color: ${$isHovered ? 'var(--redsift-color-ctas-primary-active-hover)' : $isDisabled ? 'none' : 'var(--redsift-color-ctas-primary-active)'};
+      background-color: ${$isHovered ? `var(--redsift-color-primary-${$theme === Theme.light ? 'l1' : 'd2'})` : $isDisabled ? 'none' : `var(--redsift-color-primary-${$theme === Theme.light ? 'l1' : 'd2'})`};
     `;
 }};
   }
@@ -11252,8 +12237,8 @@ function useMenuItem(props) {
   };
 }
 
-const _excluded$c = ["children", "className", "defaultSelected", "id", "isActive", "isDisabled", "isHovered", "isSelected", "value"],
-  _excluded2 = ["children", "className", "id", "isActive", "isDisabled", "isHovered", "onClick"];
+const _excluded$c = ["children", "className", "defaultSelected", "id", "isActive", "isDisabled", "isHovered", "isSelected", "theme", "value"],
+  _excluded2 = ["children", "className", "id", "isActive", "isDisabled", "isHovered", "theme", "onClick"];
 const COMPONENT_NAME$a = 'Item';
 const CLASSNAME$a = 'redsift-item';
 const DEFAULT_PROPS$a = {};
@@ -11267,6 +12252,7 @@ const RenderedListboxItem = /*#__PURE__*/forwardRef((props, ref) => {
       isDisabled: propsIsDisabled,
       isHovered,
       isSelected: propsIsSelected,
+      theme: propsTheme,
       value
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$c);
@@ -11287,6 +12273,7 @@ const RenderedListboxItem = /*#__PURE__*/forwardRef((props, ref) => {
     isDisabled: propsIsDisabled,
     propsIsSelected: propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected
   });
+  const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(StyledItem, _extends$1({
     role: "option"
   }, forwardedProps, {
@@ -11296,6 +12283,7 @@ const RenderedListboxItem = /*#__PURE__*/forwardRef((props, ref) => {
     $isFocused: isFocused,
     $isHovered: isHovered,
     $isSelected: isSelected,
+    $theme: theme,
     "aria-selected": isSelected,
     className: classNames(Item.className, className),
     onClick: handleClick,
@@ -11312,6 +12300,7 @@ const RenderedMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
       isActive,
       isDisabled: propsIsDisabled,
       isHovered,
+      theme: propsTheme,
       onClick
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded2);
@@ -11331,6 +12320,7 @@ const RenderedMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
     isDisabled: propsIsDisabled,
     onClick: onClick
   });
+  const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(StyledItem, _extends$1({
     role: "option"
   }, forwardedProps, {
@@ -11340,6 +12330,7 @@ const RenderedMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
     $isFocused: isFocused,
     $isHovered: isHovered,
     $isSelected: false,
+    $theme: theme,
     className: classNames(Item.className, className),
     onClick: handleClick,
     ref: divRef,
@@ -11420,25 +12411,25 @@ const StyledLink = styled.a`
     $isDisabled
   } = _ref;
   return !$isDisabled ? css`
-          color: var(--redsift-color-ctas-primary-primary);
+          color: var(--redsift-color-primary-n);
           text-decoration: underline;
-          text-decoration-color: var(--redsift-color-ctas-primary-hover);
+          text-decoration-color: transparent;
           text-underline-offset: 2px;
 
           &:hover,
           &:focus-visible {
             cursor: pointer !important;
-            text-decoration-color: var(--redsift-color-ctas-primary-primary);
+            text-decoration-color: var(--redsift-color-primary-n);
           }
         ` : '';
 }}
 
   &:focus-visible {
-    outline: 2px solid var(--redsift-color-ctas-primary-primary);
+    outline: 2px solid var(--redsift-color-primary-n);
   }
 `;
 
-const _excluded$b = ["as", "children", "className", "href", "isDisabled"];
+const _excluded$b = ["as", "children", "className", "href", "isDisabled", "theme"];
 const COMPONENT_NAME$9 = 'Link';
 const CLASSNAME$9 = 'redsift-link';
 const DEFAULT_PROPS$9 = {};
@@ -11457,9 +12448,11 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className,
       href,
-      isDisabled
+      isDisabled,
+      theme: propsTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$b);
+  const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(StyledLink, _extends$1({
     as: as,
     "aria-disabled": isDisabled,
@@ -11467,6 +12460,7 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
     tabIndex: !isDisabled ? 0 : undefined
   }, forwardedProps, {
     $isDisabled: isDisabled,
+    $theme: theme,
     className: classNames(Link.className, className),
     href: !isDisabled ? href : undefined,
     ref: ref
@@ -11476,7 +12470,7 @@ Link.className = CLASSNAME$9;
 Link.defaultProps = DEFAULT_PROPS$9;
 Link.displayName = COMPONENT_NAME$9;
 
-const _excluded$a = ["children", "className", "disabled", "isDisabled"];
+const _excluded$a = ["children", "className", "disabled", "isDisabled", "theme"];
 const COMPONENT_NAME$8 = 'LinkButton';
 const CLASSNAME$8 = 'redsift-link-button';
 const DEFAULT_PROPS$8 = {};
@@ -11494,14 +12488,17 @@ const LinkButton = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className,
       disabled,
-      isDisabled: propsIsDisabled
+      isDisabled: propsIsDisabled,
+      theme: propsTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$a);
   const isDisabled = propsIsDisabled || disabled;
+  const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(StyledLink, _extends$1({
     as: "button"
   }, forwardedProps, {
     $isDisabled: isDisabled || disabled,
+    $theme: theme,
     "aria-disabled": isDisabled || disabled,
     className: classNames(LinkButton.className, className),
     disabled: isDisabled || disabled
@@ -11605,7 +12602,8 @@ const RovingTabindexListbox = /*#__PURE__*/forwardRef((props, ref) => {
 /**
  * Component style.
  */
-const StyledListbox = styled(Flexbox)`
+const StyledListbox = styled.div`
+  ${baseContainer}
   outline: none;
 
   ${_ref => {
@@ -11623,15 +12621,15 @@ const StyledListbox = styled(Flexbox)`
 
             color: var(--redsift-color-neutral-black);
             ${$isDisabled ? `
-          color: var(--redsift-color-neutral-midgrey);
+          color: var(--redsift-color-neutral-mid-grey);
         ` : ''}
             ${$isInvalid ? `
-          color: var(--redsift-color-notifications-error-primary);
+          color: var(--redsift-color-red-n);
         ` : ''}
           }
 
           .redsift-listbox-list {
-            border: 1px solid var(--redsift-color-neutral-midgrey);
+            border: 1px solid var(--redsift-color-neutral-mid-grey);
             padding: 4px;
             min-width: 200px;
           }
@@ -11786,7 +12784,7 @@ const StyledNumber = styled(StyledText)`
   font-family: var(--redsift-typography-font-family-poppins);
 `;
 
-const _excluded$6 = ["as", "className", "color", "compactDisplay", "currency", "currencyDisplay", "currencySign", "fontSize", "fontWeight", "lineHeight", "localeMatcher", "maximumFractionDigits", "maximumSignificantDigits", "minimumFractionDigits", "minimumIntegerDigits", "minimumSignificantDigits", "notation", "noWrap", "numberingSystem", "roundingIncrement", "roundingMode", "roundingPriority", "signDisplay", "trailingZeroDisplay", "type", "unit", "unitDisplay", "useGrouping", "value", "variant"];
+const _excluded$6 = ["as", "className", "color", "compactDisplay", "currency", "currencyDisplay", "currencySign", "fontSize", "fontWeight", "lineHeight", "localeMatcher", "maximumFractionDigits", "maximumSignificantDigits", "minimumFractionDigits", "minimumIntegerDigits", "minimumSignificantDigits", "notation", "noWrap", "numberingSystem", "roundingIncrement", "roundingMode", "roundingPriority", "signDisplay", "trailingZeroDisplay", "type", "unit", "unitDisplay", "useGrouping", "theme", "value", "variant"];
 const COMPONENT_NAME$6 = 'Number';
 const CLASSNAME$6 = 'redsift-number';
 const DEFAULT_PROPS$6 = {
@@ -11836,6 +12834,7 @@ const Number$1 = /*#__PURE__*/forwardRef((props, ref) => {
       unit,
       unitDisplay,
       useGrouping,
+      theme: propsTheme,
       value,
       variant
     } = props,
@@ -11873,6 +12872,7 @@ const Number$1 = /*#__PURE__*/forwardRef((props, ref) => {
     unitDisplay,
     useGrouping
   }));
+  const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(StyledNumber, _extends$1({
     as: as
   }, forwardedProps, {
@@ -11884,6 +12884,7 @@ const Number$1 = /*#__PURE__*/forwardRef((props, ref) => {
     $fontSize: fontSize,
     $fontWeight: fontWeight,
     $noWrap: noWrap,
+    $theme: theme,
     $variant: variant
   }), formatter.format(value));
 });
@@ -11895,7 +12896,7 @@ Number$1.displayName = COMPONENT_NAME$6;
  * Component style.
  */
 const StyledProgressBar = styled.progress`
-    ${_ref => {
+  ${_ref => {
   let {
     backgroundColor,
     height,
@@ -11903,29 +12904,29 @@ const StyledProgressBar = styled.progress`
     width
   } = _ref;
   return css`
+    &[value] {
+      // Target only state with a value
+      -webkit-appearance: none;
+      appearance: none;
+      height: ${height || '8px'};
+      width: ${width || '100%'};
+      color: var(--redsift-color-presentation-red-default);
 
-        &[value] { // Target only state with a value
-            -webkit-appearance: none;
-            appearance: none;
-            height: ${height || '8px'};
-            width: ${width || '100%'};
-            color: var(--redsift-color-presentation-red-default);
-
-            &::-webkit-progress-bar {
-                background-color: ${backgroundColor || 'var(--redsift-color-neutral-xlightgrey)'};
-                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) inset;
-            }
+      &::-webkit-progress-bar {
+        background-color: ${backgroundColor || 'var(--redsift-color-neutral-x-light-grey)'};
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) inset;
+      }
 
-            &::-webkit-progress-value {
-                background-color: ${progressColor || 'var(--redsift-color-ctas-primary-primary)'};
-                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) inset;
-            }
-        }
-    `;
+      &::-webkit-progress-value {
+        background-color: ${progressColor || 'var(--redsift-color-primary-n)'};
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) inset;
+      }
+    }
+  `;
 }}
 `;
 
-const _excluded$5 = ["className", "value"];
+const _excluded$5 = ["className", "theme", "value"];
 const COMPONENT_NAME$5 = 'ProgressBar';
 const CLASSNAME$5 = 'redsift-progress-bar';
 const DEFAULT_PROPS$5 = {};
@@ -11936,15 +12937,18 @@ const DEFAULT_PROPS$5 = {};
 const ProgressBar = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
+      theme: propsTheme,
       value
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$5);
+  const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(StyledProgressBar, _extends$1({}, forwardedProps, {
     className: classNames(ProgressBar.className, className),
     ref: ref,
     variant: "determinate",
     max: "100",
-    value: value || 0
+    value: value || 0,
+    theme: theme
   }));
 });
 ProgressBar.className = CLASSNAME$5;
@@ -12002,22 +13006,19 @@ const StyledRadioGroup = styled.div`
     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
+    $isDisabled,
+    $isInvalid,
+    $theme
   } = _ref2;
-  return $isDisabled ? `
-      color: var(--redsift-color-neutral-midgrey);
-    ` : '';
-}}
-    ${_ref3 => {
-  let {
-    $isInvalid
-  } = _ref3;
-  return $isInvalid ? `
-      color: var(--redsift-color-notifications-error-primary);
-    ` : '';
+  return $isDisabled ? css`
+            color: var(--redsift-color-${$theme}-components-radio-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-radio-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-radio-text-default);
+          `;
 }}
   }
 
@@ -12027,31 +13028,28 @@ const StyledRadioGroup = styled.div`
     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 => {
+    ${_ref3 => {
   let {
-    $isInvalid
-  } = _ref5;
-  return $isInvalid ? `
-      color: var(--redsift-color-notifications-error-primary);
-    ` : '';
+    $isDisabled,
+    $isInvalid,
+    $theme
+  } = _ref3;
+  return $isDisabled ? css`
+            color: var(--redsift-color-${$theme}-components-radio-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-radio-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-radio-text-default);
+          `;
 }}
   }
 `;
 
-const _excluded$4 = ["children", "className", "defaultValue", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "value"];
+const _excluded$4 = ["children", "className", "defaultValue", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "theme", "value"];
 const COMPONENT_NAME$4 = 'RadioGroup';
 const CLASSNAME$4 = 'redsift-radio-group';
 const DEFAULT_PROPS$4 = {
-  color: CtasColorPalette.primary,
+  color: ColorPalette.primary,
   orientation: RadioGroupOrientation.vertical
 };
 
@@ -12072,9 +13070,11 @@ const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
       label,
       onChange,
       orientation,
+      theme: propsTheme,
       value
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$4);
+  const theme = useTheme(propsTheme);
   const [selectedValue, setValue] = useState(value || defaultValue || '');
   useEffect(() => {
     if (value) {
@@ -12096,11 +13096,16 @@ const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   };
-  return /*#__PURE__*/React__default.createElement(StyledRadioGroup, _extends$1({}, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledRadioGroup, _extends$1({}, forwardedProps, {
     $isDisabled: isDisabled,
     $isInvalid: isInvalid || isRequired && selectedValue.length === 0,
     $isReadOnly: isReadOnly,
     $orientation: orientation,
+    $theme: theme,
     "aria-disabled": isDisabled,
     className: classNames(RadioGroup.className, className),
     ref: ref,
@@ -12113,7 +13118,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
     value: state
   }, children)), /*#__PURE__*/React__default.createElement("span", {
     className: `${RadioGroup.className}-description`
-  }, description));
+  }, description)));
 });
 RadioGroup.className = CLASSNAME$4;
 RadioGroup.defaultProps = DEFAULT_PROPS$4;
@@ -12147,14 +13152,15 @@ const StyledRadio = styled.label`
     ${_ref => {
   let {
     $isDisabled,
-    $isInvalid
+    $isInvalid,
+    $theme
   } = _ref;
   return $isDisabled ? css`
-            color: var(--redsift-color-neutral-midgrey);
+            color: var(--redsift-color-${$theme}-components-radio-text-disabled);
           ` : $isInvalid ? css`
-            color: var(--redsift-color-notifications-error-primary);
+            color: var(--redsift-color-${$theme}-components-radio-text-invalid);
           ` : css`
-            color: var(--redsift-color-neutral-black);
+            color: var(--redsift-color-${$theme}-components-radio-text-default);
           `;
 }}
 
@@ -12181,19 +13187,20 @@ const StyledRadio = styled.label`
     $isColored,
     $isDisabled,
     $isInvalid,
-    $isFocusVisible
+    $isFocusVisible,
+    $theme
   } = _ref2;
   return css`
       ${$isDisabled ? css`
-            color: var(--redsift-color-neutral-midgrey);
+            color: var(--redsift-color-${$theme}-components-radio-fill-disabled);
           ` : $isInvalid ? css`
-            color: var(--redsift-color-notifications-error-primary);
+            color: var(--redsift-color-${$theme}-components-radio-fill-invalid);
           ` : css`
-            color: ${$isColored ? 'var(--redsift-color-ctas-primary-primary)' : 'var(--redsift-color-notifications-question-primary)'};
+            color: ${$isColored ? `var(--redsift-color-${$theme}-components-radio-fill-default)` : `var(--redsift-color-${$theme}-components-radio-fill-uncolored)`};
           `}
 
       ${$isFocusVisible && !$isDisabled ? css`
-            background-color: ${$isColored ? 'var(--redsift-color-ctas-primary-hover)' : 'var(--redsift-color-notifications-question-hover)'};
+            background-color: ${$isColored ? `var(--redsift-color-${$theme}-components-radio-fill-default-hover)` : `var(--redsift-color-${$theme}-components-radio-fill-uncolored-hover)`};
             border-radius: 16px;
           ` : ''}
     `;
@@ -12207,11 +13214,17 @@ const StyledRadio = styled.label`
     ${_ref3 => {
   let {
     $isColored,
-    $isDisabled
+    $isDisabled,
+    $isInvalid,
+    $theme
   } = _ref3;
   return !$isDisabled ? css`
             .redsift-icon {
-              background-color: ${$isColored ? 'var(--redsift-color-ctas-primary-hover)' : 'var(--redsift-color-notifications-question-hover)'};
+              ${$isInvalid ? css`
+                    background-color: var(--redsift-color-${$theme}-components-radio-fill-invalid-hover);
+                  ` : css`
+                    background-color: ${$isColored ? `var(--redsift-color-${$theme}-components-radio-fill-default-hover)` : `var(--redsift-color-${$theme}-components-radio-fill-uncolored-hover)`};
+                  `}
               border-radius: 16px;
             }
           ` : '';
@@ -12219,7 +13232,7 @@ const StyledRadio = styled.label`
   }
 `;
 
-const _excluded$3 = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
+const _excluded$3 = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "theme", "value"];
 const COMPONENT_NAME$3 = 'Radio';
 const CLASSNAME$3 = 'redsift-radio';
 const DEFAULT_PROPS$3 = {
@@ -12251,9 +13264,11 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
       isSelected: propsIsSelected,
       name,
       onChange,
+      theme: propsTheme,
       value
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$3);
+  const theme = useTheme(propsTheme);
   const {
     isFocusVisible,
     focusProps
@@ -12272,7 +13287,7 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
       setSelected(groupState.value === value);
     }
   }, [groupState === null || groupState === void 0 ? void 0 : groupState.value]);
-  warnIfNoAccessibleLabelFound(props, [children]);
+  warnIfNoAccessibleLabelFound(props, [children], 'Radio');
   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.');
@@ -12305,6 +13320,7 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
     $isInvalid: isInvalid || isRequired && !(isSelected || isControlled && propsIsSelected),
     $isRequired: isRequired,
     $isSelected: isSelected || isControlled && propsIsSelected,
+    $theme: theme,
     className: classNames(Radio.className, className),
     ref: ref
   }), isSelected || isControlled && propsIsSelected ? /*#__PURE__*/React__default.createElement(Icon, {
@@ -12366,14 +13382,15 @@ const StyledSwitch = styled.label`
     ${_ref => {
   let {
     $isDisabled,
-    $isInvalid
+    $isInvalid,
+    $theme
   } = _ref;
   return $isDisabled ? css`
-            color: var(--redsift-color-neutral-midgrey);
+            color: var(--redsift-color-${$theme}-components-switch-text-disabled);
           ` : $isInvalid ? css`
-            color: var(--redsift-color-notifications-error-primary);
+            color: var(--redsift-color-${$theme}-components-switch-text-invalid);
           ` : css`
-            color: var(--redsift-color-neutral-black);
+            color: var(--redsift-color-${$theme}-components-switch-text-default);
           `;
 }}
 
@@ -12392,7 +13409,26 @@ const StyledSwitch = styled.label`
   }
 
   .redsift-switch-slide__inner {
-    background-color: var(--redsift-color-neutral-midgrey);
+    ${_ref2 => {
+  let {
+    $isColored,
+    $isDisabled,
+    $isInvalid,
+    $isSelected,
+    $theme
+  } = _ref2;
+  return $isDisabled ? css`
+            background-color: var(
+              --redsift-color-${$theme}-components-switch-background-disabled${$isSelected ? '-active' : ''}
+            );
+          ` : $isInvalid ? css`
+            background-color: var(
+              --redsift-color-${$theme}-components-switch-background-invalid${$isSelected ? '-active' : ''}
+            );
+          ` : css`
+            background-color: ${$isColored ? `var(--redsift-color-${$theme}-components-switch-background-default${$isSelected ? '-active' : ''})` : `var(--redsift-color-${$theme}-components-switch-background-uncolored${$isSelected ? '-active' : ''})`};
+          `;
+}}
     border-radius: 20px;
     height: 24px;
     position: absolute;
@@ -12404,10 +13440,10 @@ const StyledSwitch = styled.label`
   .redsift-switch-slide__knob-wrapper {
     border-radius: 50%;
     height: 20px;
-    margin-inline-start: ${_ref2 => {
+    margin-inline-start: ${_ref3 => {
   let {
     $isSelected
-  } = _ref2;
+  } = _ref3;
   return !$isSelected ? '2px' : '24px';
 }};
     position: absolute;
@@ -12416,23 +13452,27 @@ const StyledSwitch = styled.label`
   }
 
   .redsift-switch-slide-knob-wrapper__elevation {
-    ${_ref3 => {
+    ${_ref4 => {
   let {
-    $isColored,
-    $isInvalid
-  } = _ref3;
-  return css`
-      background-color: var(
-        --redsift-color-${$isInvalid ? 'notifications-error-hover' : $isColored ? 'ctas-primary-hover' : 'notifications-no-data-button-hover'}
-      );
-    `;
+    $isDisabled,
+    $isInvalid,
+    $theme
+  } = _ref4;
+  return $isDisabled ? css`
+            background-color: var(--redsift-color-${$theme}-components-switch-dot-disabled-hover);
+          ` : $isInvalid ? css`
+            background-color: var(--redsift-color-${$theme}-components-switch-dot-invalid-hover);
+          ` : css`
+            background-color: var(--redsift-color-${$theme}-components-switch-dot-default-hover);
+          `;
 }}
+
     border-radius: 50%;
     height: 32px;
-    margin-inline-start: ${_ref4 => {
+    margin-inline-start: ${_ref5 => {
   let {
     $isSelected
-  } = _ref4;
+  } = _ref5;
   return !$isSelected ? '-6px' : '-6px';
 }};
     opacity: 0;
@@ -12442,7 +13482,20 @@ const StyledSwitch = styled.label`
   }
 
   .redsift-switch-slide-knob-wrapper__knob {
-    background-color: var(--redsift-color-neutral-white);
+    ${_ref6 => {
+  let {
+    $isDisabled,
+    $isInvalid,
+    $theme
+  } = _ref6;
+  return $isDisabled ? css`
+            background-color: var(--redsift-color-${$theme}-components-switch-dot-disabled);
+          ` : $isInvalid ? css`
+            background-color: var(--redsift-color-${$theme}-components-switch-dot-invalid);
+          ` : css`
+            background-color: var(--redsift-color-${$theme}-components-switch-dot-default);
+          `;
+}}
     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;
@@ -12452,39 +13505,15 @@ const StyledSwitch = styled.label`
     z-index: 4;
   }
 
-  .redsift-switch-slide__inner {
-    ${_ref5 => {
-  let {
-    $isColored,
-    $isDisabled,
-    $isInvalid,
-    $isSelected
-  } = _ref5;
-  return css`
-      ${$isDisabled ? css`
-            background-color: var(--redsift-color-neutral-lightgrey);
-          ` : $isSelected ? css`
-            background-color: var(
-              --redsift-color-${$isInvalid ? 'notifications-error-primary' : $isColored ? 'ctas-primary-primary' : 'notifications-no-data-button-active'}
-            );
-          ` : css`
-            background-color: var(
-              --redsift-color-${$isInvalid ? 'notifications-error-hover' : $isColored ? 'ctas-primary-hover' : 'notifications-no-data-button-hover'}
-            );
-          `}
-    `;
-}}
-  }
-
   &:hover,
   &:focus-visible {
     outline: none;
     cursor: pointer;
 
-    ${_ref6 => {
+    ${_ref7 => {
   let {
     $isDisabled
-  } = _ref6;
+  } = _ref7;
   return !$isDisabled ? css`
             .redsift-switch-slide-knob-wrapper__elevation {
               opacity: 0.5;
@@ -12493,11 +13522,11 @@ const StyledSwitch = styled.label`
 }}
   }
 
-  ${_ref7 => {
+  ${_ref8 => {
   let {
     $isDisabled,
     $isFocusVisible
-  } = _ref7;
+  } = _ref8;
   return $isFocusVisible && !$isDisabled ? css`
           .redsift-switch-slide-knob-wrapper__elevation {
             opacity: 0.5;
@@ -12506,7 +13535,7 @@ const StyledSwitch = styled.label`
 }}
 `;
 
-const _excluded$2 = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
+const _excluded$2 = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "theme", "value"];
 const COMPONENT_NAME$2 = 'Switch';
 const CLASSNAME$2 = 'redsift-switch';
 const DEFAULT_PROPS$2 = {
@@ -12538,9 +13567,11 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
       isSelected: propsIsSelected,
       name,
       onChange,
+      theme: propsTheme,
       value
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$2);
+  const theme = useTheme(propsTheme);
   const {
     isFocusVisible,
     focusProps
@@ -12559,7 +13590,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
       setSelected(groupState.value.includes(value));
     }
   }, [groupState === null || groupState === void 0 ? void 0 : groupState.value]);
-  warnIfNoAccessibleLabelFound(props, [children]);
+  warnIfNoAccessibleLabelFound(props, [children], 'Switch');
   if (groupState) {
     if (propsIsSelected != null) {
       console.warn('isSelected is unsupported on individual <Switch> elements within a <SwitchGroup> unless the <Switch> is controlled. Please apply this prop to the group instead.');
@@ -12596,6 +13627,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
     $isInvalid: isInvalid || isRequired && !(isSelected || isControlled && propsIsSelected),
     $isRequired: isRequired,
     $isSelected: isSelected || isControlled && propsIsSelected,
+    $theme: theme,
     className: classNames(Switch.className, className),
     ref: ref
   }), /*#__PURE__*/React__default.createElement("div", {
@@ -12682,22 +13714,19 @@ const StyledSwitchGroup = styled.div`
     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
+    $isDisabled,
+    $isInvalid,
+    $theme
   } = _ref2;
-  return $isDisabled ? `
-      color: var(--redsift-color-neutral-midgrey);
-    ` : '';
-}}
-    ${_ref3 => {
-  let {
-    $isInvalid
-  } = _ref3;
-  return $isInvalid ? `
-      color: var(--redsift-color-notifications-error-primary);
-    ` : '';
+  return $isDisabled ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-default);
+          `;
 }}
   }
 
@@ -12707,31 +13736,28 @@ const StyledSwitchGroup = styled.div`
     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 => {
+    ${_ref3 => {
   let {
-    $isInvalid
-  } = _ref5;
-  return $isInvalid ? `
-      color: var(--redsift-color-notifications-error-primary);
-    ` : '';
+    $isDisabled,
+    $isInvalid,
+    $theme
+  } = _ref3;
+  return $isDisabled ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-default);
+          `;
 }}
   }
 `;
 
-const _excluded$1 = ["children", "className", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "value"];
+const _excluded$1 = ["children", "className", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "theme", "value"];
 const COMPONENT_NAME$1 = 'SwitchGroup';
 const CLASSNAME$1 = 'redsift-switch-group';
 const DEFAULT_PROPS$1 = {
-  color: CtasColorPalette.primary,
+  color: ColorPalette.primary,
   orientation: SwitchGroupOrientation.vertical
 };
 
@@ -12752,9 +13778,11 @@ const SwitchGroup = /*#__PURE__*/forwardRef((props, ref) => {
       label,
       onChange,
       orientation,
+      theme: propsTheme,
       value
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1);
+  const theme = useTheme(propsTheme);
   const [selectedValues, setValue] = useState(value || defaultValues || []);
   useEffect(() => {
     if (value) {
@@ -12788,11 +13816,16 @@ const SwitchGroup = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   };
-  return /*#__PURE__*/React__default.createElement(StyledSwitchGroup, _extends$1({}, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledSwitchGroup, _extends$1({}, forwardedProps, {
     $isDisabled: isDisabled,
     $isInvalid: isInvalid || isRequired && selectedValues.length === 0,
     $isReadOnly: isReadOnly,
     $orientation: orientation,
+    $theme: theme,
     "aria-disabled": isDisabled,
     className: classNames(SwitchGroup.className, className),
     ref: ref,
@@ -12805,7 +13838,7 @@ const SwitchGroup = /*#__PURE__*/forwardRef((props, ref) => {
     value: state
   }, children)), /*#__PURE__*/React__default.createElement("span", {
     className: `${SwitchGroup.className}-description`
-  }, description));
+  }, description)));
 });
 SwitchGroup.className = CLASSNAME$1;
 SwitchGroup.defaultProps = DEFAULT_PROPS$1;
@@ -12848,6 +13881,7 @@ const StyledTextField = styled.div`
     $isDisabled,
     $isInvalid,
     $isColored,
+    $theme,
     $variant
   } = _ref;
   return css`
@@ -12881,13 +13915,13 @@ const StyledTextField = styled.div`
           `}
 
       ${$isDisabled ? css`
-            color: var(--redsift-color-notifications-no-data-primary);
+            color: var(--redsift-color-neutral-light-grey);
           ` : $isInvalid ? css`
             color: var(--redsift-color-notifications-error-primary);
           ` : $isFocused ? css`
-            color: ${$isColored ? 'var(--redsift-color-ctas-primary-primary)' : 'var(--redsift-color-notifications-question-primary)'};
+            color: ${$isColored ? 'var(--redsift-color-primary-n)' : 'var(--redsift-color-notifications-question-primary)'};
           ` : css`
-            color: var(--redsift-color-neutral-darkgrey);
+            color: var(--redsift-color-neutral-${$theme === Theme.light ? 'x-dark-grey' : 'light-grey'});
           `}
     }
 
@@ -12896,7 +13930,7 @@ const StyledTextField = styled.div`
       box-sizing: border-box;
       cursor: text;
       display: inline-flex;
-      height: 42px;
+      min-height: 42px;
       position: relative;
     }
 
@@ -12933,14 +13967,14 @@ const StyledTextField = styled.div`
       width: auto;
 
       ${$isDisabled ? css`
-            color: var(--redsift-color-notifications-no-data-primary);
+            color: var(--redsift-color-neutral-light-grey);
           ` : css`
-            color: var(--redsift-color-neutral-black);
+            color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
           `}
     }
 
     .redsift-text-field-input-wrapper__input::placeholder {
-      color: var(--redsift-color-neutral-midgrey);
+      color: var(--redsift-color-neutral-mid-grey);
     }
 
     .redsift-text-field-input-wrapper__input:focus {
@@ -12969,13 +14003,13 @@ const StyledTextField = styled.div`
           `}
 
       ${$isDisabled ? css`
-            border-color: var(--redsift-color-notifications-no-data-primary);
+            border-color: var(--redsift-color-neutral-light-grey);
           ` : $isInvalid ? css`
             border-color: var(--redsift-color-notifications-error-primary);
           ` : $isFocused ? css`
-            border-color: ${$isColored ? 'var(--redsift-color-ctas-primary-primary)' : 'var(--redsift-color-notifications-question-primary)'};
+            border-color: ${$isColored ? 'var(--redsift-color-primary-n)' : 'var(--redsift-color-notifications-question-primary)'};
           ` : css`
-            border-color: var(--redsift-color-neutral-midgrey);
+            border-color: var(--redsift-color-neutral-mid-grey);
           `}
     }
 
@@ -13040,7 +14074,7 @@ const StyledTextField = styled.div`
 // Material Design Icons v7.2.96
 var mdiClose = "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z";
 
-const _excluded = ["aria-label", "aria-labelledby", "autoFocus", "className", "defaultValue", "hasClearButton", "after", "internal", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "leftIcon", "name", "onBlur", "onChange", "onClear", "onFocus", "pills", "placeholder", "type", "value", "variant"];
+const _excluded = ["aria-label", "aria-labelledby", "autoFocus", "className", "defaultValue", "hasClearButton", "after", "internal", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "leftIcon", "name", "onBlur", "onChange", "onClear", "onFocus", "pills", "placeholder", "theme", "type", "value", "variant"];
 const COMPONENT_NAME = 'TextField';
 const CLASSNAME = 'redsift-text-field';
 const DEFAULT_PROPS = {
@@ -13079,11 +14113,13 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       onFocus: onFocusProps,
       pills,
       placeholder,
+      theme: propsTheme,
       type,
       value: propsValue,
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
   const {
     isFocusVisible,
     isFocused,
@@ -13102,7 +14138,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const [value, setValue] = useState(defaultValue);
   const isControlled = propsValue !== null && propsValue !== undefined;
-  warnIfNoAccessibleLabelFound(props, [label]);
+  warnIfNoAccessibleLabelFound(props, [label], 'TextField');
   const handleChange = useCallback(event => {
     if (isDisabled || isReadOnly) {
       return;
@@ -13137,6 +14173,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     $isInvalid: isInvalid || isRequired && !(isControlled ? propsValue : value),
     $isRequired: isRequired,
     $isFocused: isFocused,
+    $theme: theme,
     $variant: variant,
     className: classNames(TextField.className, className),
     ref: ref
@@ -13152,6 +14189,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
   })) : null, /*#__PURE__*/React__default.createElement("div", {
     className: `${TextField.className}__pills`
   }, pills === null || pills === void 0 ? void 0 : pills.map(pill => /*#__PURE__*/React__default.createElement(Pill, {
+    theme: theme,
     key: pill.value,
     color: "blue",
     size: "small"
@@ -13183,8 +14221,9 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${TextField.className}-input-wrapper__toolbar`,
     gap: "8px"
   }, hasClearButton ? /*#__PURE__*/React__default.createElement(IconButton, _extends$1({
+    theme: theme,
     "aria-label": "Clear",
-    color: "question",
+    color: "grey",
     isDisabled: isDisabled,
     icon: mdiClose
   }, hasClearButton !== true && hasClearButton, {
@@ -13192,7 +14231,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     className: "right clear"
   })) : null, typeof internal === 'function' ? internal(isControlled ? propsValue : value, isDisabled, isInvalid || isRequired && !(isControlled ? propsValue : value), isRequired) : internal, (hasClearButton || internal) && after ? /*#__PURE__*/React__default.createElement("span", {
     style: {
-      borderLeft: '1px solid var(--redsift-color-neutral-midgrey)'
+      borderLeft: '1px solid var(--redsift-color-neutral-mid-grey)'
     }
   }) : null, typeof after === 'function' ? after(isControlled ? propsValue : value, isDisabled, isInvalid || isRequired && !(isControlled ? propsValue : value), isRequired) : after) : null, /*#__PURE__*/React__default.createElement("fieldset", {
     "aria-hidden": "true",
@@ -13205,5 +14244,5 @@ TextField.className = CLASSNAME;
 TextField.defaultProps = DEFAULT_PROPS;
 TextField.displayName = COMPONENT_NAME;
 
-export { ActiveDescendantListbox, Alert, AlertVariant, AlignContent, AlignItems, AlignSelf, AppBar, AppContainer, AppContainerContext, AppContent, AppSidePanel, AppSidePanelVariant, Badge, BadgeVariant, BaseBreadcrumbs, BaseGrid, BaseSkeleton, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, ButtonGroupVariant, ButtonLink, ButtonVariant, Card, CardActions, CardBody, CardHeader, Checkbox, CheckboxGroup, CheckboxGroupOrientation, ConditionalWrapper, CtasColorPalette, DetailedCard, DetailedCardCollapsibleSectionItems, DetailedCardHeader, DetailedCardSection, DetailedCardSectionItem, EventKey, FOCUS_WITHING_GROUP_INITIAL_STATE, FlexDirection, FlexWrap, Flexbox, FocusWithinGroup, FocusWithinGroupActionType, FocusWithinGroupContext, FocusWithinGroupReducer, FontFamily, Grid, GridItem, Heading, HeadingComponent, HeadingVariant, Icon, IconButton, IconButtonVariant, IconSize, Item, JustifyContent, JustifyItems, JustifySelf, LISTBOX_INITIAL_STATE, Link, LinkButton, Listbox, ListboxActionType, ListboxContext, ListboxReducer, ListboxVariant, Navigation, NeutralColorPalette, NotificationsColorPalette, Number$1 as Number, Pill, PillSize, PresentationColorPalette, Product, ProductColorPalette, ProductLogo, ProductName, ProgressBar, Radio, RadioGroup, RadioGroupOrientation, RedsiftAppBarColorBackground, RedsiftAppBarColorExpandIconBackgroundHover, RedsiftAppBarColorExpandIconHover, RedsiftAppBarColorExpandIconResting, RedsiftAppBarColorText, RedsiftColorCtasPrimaryActive, RedsiftColorCtasPrimaryActiveHover, RedsiftColorCtasPrimaryButtonActive, RedsiftColorCtasPrimaryButtonActiveHover, RedsiftColorCtasPrimaryButtonHover, RedsiftColorCtasPrimaryHover, RedsiftColorCtasPrimaryPrimary, RedsiftColorCtasSecondaryActive, RedsiftColorCtasSecondaryActiveHover, RedsiftColorCtasSecondaryButtonActive, RedsiftColorCtasSecondaryButtonActiveHover, RedsiftColorCtasSecondaryButtonHover, RedsiftColorCtasSecondaryHover, RedsiftColorCtasSecondaryPrimary, RedsiftColorNeutralBlack, RedsiftColorNeutralDarkgrey, RedsiftColorNeutralLightgrey, RedsiftColorNeutralMidgrey, RedsiftColorNeutralWhite, RedsiftColorNeutralXlightgrey, RedsiftColorNotificationsErrorActive, RedsiftColorNotificationsErrorActiveHover, RedsiftColorNotificationsErrorButtonActive, RedsiftColorNotificationsErrorButtonActiveHover, RedsiftColorNotificationsErrorButtonHover, RedsiftColorNotificationsErrorHover, RedsiftColorNotificationsErrorPrimary, RedsiftColorNotificationsInfoActive, RedsiftColorNotificationsInfoActiveHover, RedsiftColorNotificationsInfoButtonActive, RedsiftColorNotificationsInfoButtonActiveHover, RedsiftColorNotificationsInfoButtonHover, RedsiftColorNotificationsInfoHover, RedsiftColorNotificationsInfoPrimary, RedsiftColorNotificationsNoDataActive, RedsiftColorNotificationsNoDataActiveHover, RedsiftColorNotificationsNoDataButtonActive, RedsiftColorNotificationsNoDataButtonActiveHover, RedsiftColorNotificationsNoDataButtonHover, RedsiftColorNotificationsNoDataHover, RedsiftColorNotificationsNoDataPrimary, RedsiftColorNotificationsQuestionActive, RedsiftColorNotificationsQuestionActiveHover, RedsiftColorNotificationsQuestionButtonActive, RedsiftColorNotificationsQuestionButtonActiveHover, RedsiftColorNotificationsQuestionButtonHover, RedsiftColorNotificationsQuestionHover, RedsiftColorNotificationsQuestionPrimary, RedsiftColorNotificationsSuccessActive, RedsiftColorNotificationsSuccessActiveHover, RedsiftColorNotificationsSuccessButtonActive, RedsiftColorNotificationsSuccessButtonActiveHover, RedsiftColorNotificationsSuccessButtonHover, RedsiftColorNotificationsSuccessHover, RedsiftColorNotificationsSuccessPrimary, RedsiftColorNotificationsWarningActive, RedsiftColorNotificationsWarningActiveHover, RedsiftColorNotificationsWarningButtonActive, RedsiftColorNotificationsWarningButtonActiveHover, RedsiftColorNotificationsWarningButtonHover, RedsiftColorNotificationsWarningHover, RedsiftColorNotificationsWarningPrimary, RedsiftColorPresentationAquaDark, RedsiftColorPresentationAquaDarker, RedsiftColorPresentationAquaDarkerer, RedsiftColorPresentationAquaDefault, RedsiftColorPresentationAquaLight, RedsiftColorPresentationAquaLighter, RedsiftColorPresentationAquaLighterer, RedsiftColorPresentationBlueDark, RedsiftColorPresentationBlueDarker, RedsiftColorPresentationBlueDarkerer, RedsiftColorPresentationBlueDefault, RedsiftColorPresentationBlueLight, RedsiftColorPresentationBlueLighter, RedsiftColorPresentationBlueLighterer, RedsiftColorPresentationBrownDark, RedsiftColorPresentationBrownDarker, RedsiftColorPresentationBrownDarkerer, RedsiftColorPresentationBrownDefault, RedsiftColorPresentationBrownLight, RedsiftColorPresentationBrownLighter, RedsiftColorPresentationBrownLighterer, RedsiftColorPresentationGreenDark, RedsiftColorPresentationGreenDarker, RedsiftColorPresentationGreenDarkerer, RedsiftColorPresentationGreenDefault, RedsiftColorPresentationGreenLight, RedsiftColorPresentationGreenLighter, RedsiftColorPresentationGreenLighterer, RedsiftColorPresentationGreyDark, RedsiftColorPresentationGreyDarker, RedsiftColorPresentationGreyDarkerer, RedsiftColorPresentationGreyDefault, RedsiftColorPresentationGreyLight, RedsiftColorPresentationGreyLighter, RedsiftColorPresentationGreyLighterer, RedsiftColorPresentationOrangeDark, RedsiftColorPresentationOrangeDarker, RedsiftColorPresentationOrangeDarkerer, RedsiftColorPresentationOrangeDefault, RedsiftColorPresentationOrangeLight, RedsiftColorPresentationOrangeLighter, RedsiftColorPresentationOrangeLighterer, RedsiftColorPresentationPinkDark, RedsiftColorPresentationPinkDarker, RedsiftColorPresentationPinkDarkerer, RedsiftColorPresentationPinkDefault, RedsiftColorPresentationPinkLight, RedsiftColorPresentationPinkLighter, RedsiftColorPresentationPinkLighterer, RedsiftColorPresentationPurpleDark, RedsiftColorPresentationPurpleDarker, RedsiftColorPresentationPurpleDarkerer, RedsiftColorPresentationPurpleDefault, RedsiftColorPresentationPurpleLight, RedsiftColorPresentationPurpleLighter, RedsiftColorPresentationPurpleLighterer, RedsiftColorPresentationRedDark, RedsiftColorPresentationRedDarker, RedsiftColorPresentationRedDarkerer, RedsiftColorPresentationRedDefault, RedsiftColorPresentationRedLight, RedsiftColorPresentationRedLighter, RedsiftColorPresentationRedLighterer, RedsiftColorPresentationYellowDark, RedsiftColorPresentationYellowDarker, RedsiftColorPresentationYellowDarkerer, RedsiftColorPresentationYellowDefault, RedsiftColorPresentationYellowLight, RedsiftColorPresentationYellowLighter, RedsiftColorPresentationYellowLighterer, RedsiftColorProductAsm, RedsiftColorProductBrandTrust, RedsiftColorProductCertificates, RedsiftColorProductOndmarc, RedsiftColorProductRadar, RedsiftColorProductRojoDs, RedsiftColorProductVendorSecure, RedsiftColorProductWebsite, RedsiftColorRedsift, RedsiftLayoutZIndexDialog, RedsiftLayoutZIndexDropdown, RedsiftLayoutZIndexFooter, RedsiftLayoutZIndexHeader, RedsiftLayoutZIndexOverlay, RedsiftLayoutZIndexPopover, RedsiftLayoutZIndexSidePanel, RedsiftLayoutZIndexTooltip, RedsiftSideNavigationColorBackground, RedsiftSideNavigationColorMenuItemActive, RedsiftSideNavigationColorMenuItemBackgroundActive, RedsiftSideNavigationColorMenuItemBackgroundHover, RedsiftSideNavigationColorMenuItemBackgroundSecondary, RedsiftSideNavigationColorMenuItemTextDisabled, RedsiftSideNavigationColorMenuItemTextHover, RedsiftSideNavigationColorMenuItemTextResting, RedsiftSideNavigationColorScrollbarHover, RedsiftSideNavigationColorScrollbarResting, RedsiftTypographyBadgeFontFamily, RedsiftTypographyBadgeFontSize, RedsiftTypographyBadgeFontWeight, RedsiftTypographyBadgeLineHeight, RedsiftTypographyBodyFontFamily, RedsiftTypographyBodyFontSize, RedsiftTypographyBodyFontWeight, RedsiftTypographyBodyLineHeight, RedsiftTypographyBodyTextTransform, RedsiftTypographyButtonFontFamily, RedsiftTypographyButtonFontSize, RedsiftTypographyButtonFontWeight, RedsiftTypographyButtonLineHeight, RedsiftTypographyButtonTextTransform, RedsiftTypographyCaptionFontFamily, RedsiftTypographyCaptionFontSize, RedsiftTypographyCaptionFontWeight, RedsiftTypographyCaptionLineHeight, RedsiftTypographyCaptionTextTransform, RedsiftTypographyChipFontFamily, RedsiftTypographyChipFontSize, RedsiftTypographyChipFontWeight, RedsiftTypographyChipLineHeight, RedsiftTypographyDatagridCellFontFamily, RedsiftTypographyDatagridCellFontSize, RedsiftTypographyDatagridCellFontWeight, RedsiftTypographyDatagridCellLineHeight, RedsiftTypographyDatagridHeaderFontFamily, RedsiftTypographyDatagridHeaderFontSize, RedsiftTypographyDatagridHeaderFontWeight, RedsiftTypographyDatagridHeaderLineHeight, RedsiftTypographyFontFamilyPoppins, RedsiftTypographyFontFamilySourceCodePro, RedsiftTypographyFontWeightBlack, RedsiftTypographyFontWeightBold, RedsiftTypographyFontWeightExtraBold, RedsiftTypographyFontWeightExtraLight, RedsiftTypographyFontWeightLight, RedsiftTypographyFontWeightMedium, RedsiftTypographyFontWeightRegular, RedsiftTypographyFontWeightSemiBold, RedsiftTypographyFontWeightThin, 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, RedsiftTypographyHelperTextTransform, RedsiftTypographyInputTextFontFamily, RedsiftTypographyInputTextFontSize, RedsiftTypographyInputTextFontWeight, RedsiftTypographyInputTextLineHeight, RedsiftTypographyLinkFontFamily, RedsiftTypographyLinkFontSize, RedsiftTypographyLinkFontWeight, RedsiftTypographyLinkLineHeight, RedsiftTypographyPillFontFamily, RedsiftTypographyPillFontSize, RedsiftTypographyPillFontWeight, RedsiftTypographyPillLineHeight, RedsiftTypographyTooltipFontFamily, RedsiftTypographyTooltipFontSize, RedsiftTypographyTooltipFontWeight, RedsiftTypographyTooltipLineHeight, RovingTabindexListbox, Shield, ShieldVariant, SideNavigationMenu, SideNavigationMenuBar, SideNavigationMenuBarVariant, SideNavigationMenuItem, SideNavigationMenuReducerActionType, Skeleton, SkeletonCircle, SkeletonText, SkeletonTextVariant, Spinner, SpinnerSize, StyledButton, StyledLink, Switch, SwitchGroup, SwitchGroupOrientation, Text, TextComponent, TextField, TextFieldVariant, TextVariant, baseContainer, baseFlexbox, baseGrid, baseInternalSpacing, baseLayout, basePositioning, baseSizing, baseSpacing, baseStyling, filterComponents, focusRing, getCanvasFont, getContainerProps, getCssStyle, getMaxTextWidth, getTextWidth, isComponent, nextId, partitionComponents, resetId, setPrefix, sizeToDimension$1 as sizeToDimension, uniqueId, useAppSidePanel, useBoundingClientRect, useFocusOnList, useFocusOnListItem, useId$1 as useId, useSideNavigationMenuBar, useWindowSize, warnIfNoAccessibleLabelFound };
+export { ActiveDescendantListbox, Alert, AlertVariant, AlignContent, AlignItems, AlignSelf, AppBar, AppContainer, AppContainerContext, AppContent, AppSidePanel, AppSidePanelVariant, Badge, BadgeVariant, BaseBreadcrumbs, BaseGrid, BaseSkeleton, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, ButtonGroupVariant, ButtonLink, ButtonVariant, ButtonsColorPalette, Card, CardActions, CardBody, CardHeader, Checkbox, CheckboxGroup, CheckboxGroupOrientation, ColorPalette, ConditionalWrapper, DetailedCard, DetailedCardCollapsibleSectionItems, DetailedCardHeader, DetailedCardSection, DetailedCardSectionItem, EventKey, FOCUS_WITHING_GROUP_INITIAL_STATE, FlexDirection, FlexWrap, Flexbox, FocusWithinGroup, FocusWithinGroupActionType, FocusWithinGroupContext, FocusWithinGroupReducer, FontFamily, Grid, GridItem, Heading, HeadingComponent, HeadingVariant, Icon, IconButton, IconButtonVariant, IconSize, Item, JustifyContent, JustifyItems, JustifySelf, LISTBOX_INITIAL_STATE, Link, LinkButton, Listbox, ListboxActionType, ListboxContext, ListboxReducer, ListboxVariant, Navigation, NeutralColorPalette, NotificationsColorPalette, Number$1 as Number, Pill, PillSize, PresentationColorPalette, PrimaryButtonsColorPalette, PrimaryColorPalette, Product, ProductColorPalette, ProductLogo, ProductName, ProgressBar, Radio, RadioGroup, RadioGroupOrientation, RedsiftBorderRadius, RedsiftColorBlueD1, RedsiftColorBlueD2, RedsiftColorBlueD3, RedsiftColorBlueD4, RedsiftColorBlueL1, RedsiftColorBlueL2, RedsiftColorBlueL3, RedsiftColorBlueL4, RedsiftColorBlueN, RedsiftColorBordersBorderDefault, RedsiftColorBordersBorderDisabled, RedsiftColorBordersBorderDivider, RedsiftColorBordersBorderError, RedsiftColorBordersBorderPrimary, RedsiftColorBordersBorderSecondary, RedsiftColorBordersBorderSuccess, RedsiftColorDarkComponentsAiAiBorder, RedsiftColorDarkComponentsAiAiIcon, RedsiftColorDarkComponentsAlertErrorBackground, RedsiftColorDarkComponentsAlertErrorIcon, RedsiftColorDarkComponentsAlertInfoBackground, RedsiftColorDarkComponentsAlertInfoIcon, RedsiftColorDarkComponentsAlertSuccessBackground, RedsiftColorDarkComponentsAlertSuccessIcon, RedsiftColorDarkComponentsAlertText, RedsiftColorDarkComponentsAlertWarningBackground, RedsiftColorDarkComponentsAlertWarningIcon, RedsiftColorDarkComponentsAppBarBackground, RedsiftColorDarkComponentsAppBarBorder, RedsiftColorDarkComponentsAppBarBreadcrumbDefault, RedsiftColorDarkComponentsAppBarBreadcrumbDown, RedsiftColorDarkComponentsAppBarBreadcrumbHover, RedsiftColorDarkComponentsAppBarIconBackgroundActive, RedsiftColorDarkComponentsAppBarIconBackgroundActiveDown, RedsiftColorDarkComponentsAppBarIconBackgroundActiveHover, RedsiftColorDarkComponentsAppBarIconBackgroundDown, RedsiftColorDarkComponentsAppBarIconBackgroundHover, RedsiftColorDarkComponentsButtonsPrimaryButtonErrorBackgroundActive, RedsiftColorDarkComponentsButtonsPrimaryButtonErrorBackgroundDefault, RedsiftColorDarkComponentsButtonsPrimaryButtonErrorBackgroundDisabled, RedsiftColorDarkComponentsButtonsPrimaryButtonErrorBackgroundHover, RedsiftColorDarkComponentsButtonsPrimaryButtonErrorTextActive, RedsiftColorDarkComponentsButtonsPrimaryButtonErrorTextDefault, RedsiftColorDarkComponentsButtonsPrimaryButtonErrorTextDisabled, RedsiftColorDarkComponentsButtonsPrimaryButtonErrorTextHover, RedsiftColorDarkComponentsButtonsPrimaryButtonGreyBackgroundActive, RedsiftColorDarkComponentsButtonsPrimaryButtonGreyBackgroundDefault, RedsiftColorDarkComponentsButtonsPrimaryButtonGreyBackgroundDisabled, RedsiftColorDarkComponentsButtonsPrimaryButtonGreyBackgroundHover, RedsiftColorDarkComponentsButtonsPrimaryButtonGreyTextActive, RedsiftColorDarkComponentsButtonsPrimaryButtonGreyTextDefault, RedsiftColorDarkComponentsButtonsPrimaryButtonGreyTextDisabled, RedsiftColorDarkComponentsButtonsPrimaryButtonGreyTextHover, RedsiftColorDarkComponentsButtonsPrimaryButtonInfoBackgroundActive, RedsiftColorDarkComponentsButtonsPrimaryButtonInfoBackgroundDefault, RedsiftColorDarkComponentsButtonsPrimaryButtonInfoBackgroundDisabled, RedsiftColorDarkComponentsButtonsPrimaryButtonInfoBackgroundHover, RedsiftColorDarkComponentsButtonsPrimaryButtonInfoTextActive, RedsiftColorDarkComponentsButtonsPrimaryButtonInfoTextDefault, RedsiftColorDarkComponentsButtonsPrimaryButtonInfoTextDisabled, RedsiftColorDarkComponentsButtonsPrimaryButtonInfoTextHover, RedsiftColorDarkComponentsButtonsPrimaryButtonPrimaryBackgroundActive, RedsiftColorDarkComponentsButtonsPrimaryButtonPrimaryBackgroundDefault, RedsiftColorDarkComponentsButtonsPrimaryButtonPrimaryBackgroundDisabled, RedsiftColorDarkComponentsButtonsPrimaryButtonPrimaryBackgroundHover, RedsiftColorDarkComponentsButtonsPrimaryButtonPrimaryTextActive, RedsiftColorDarkComponentsButtonsPrimaryButtonPrimaryTextDefault, RedsiftColorDarkComponentsButtonsPrimaryButtonPrimaryTextDisabled, RedsiftColorDarkComponentsButtonsPrimaryButtonPrimaryTextHover, RedsiftColorDarkComponentsButtonsPrimaryButtonSecondaryBackgroundActive, RedsiftColorDarkComponentsButtonsPrimaryButtonSecondaryBackgroundDefault, RedsiftColorDarkComponentsButtonsPrimaryButtonSecondaryBackgroundDisabled, RedsiftColorDarkComponentsButtonsPrimaryButtonSecondaryBackgroundHover, RedsiftColorDarkComponentsButtonsPrimaryButtonSecondaryTextActive, RedsiftColorDarkComponentsButtonsPrimaryButtonSecondaryTextDefault, RedsiftColorDarkComponentsButtonsPrimaryButtonSecondaryTextDisabled, RedsiftColorDarkComponentsButtonsPrimaryButtonSecondaryTextHover, RedsiftColorDarkComponentsButtonsPrimaryButtonSuccessBackgroundActive, RedsiftColorDarkComponentsButtonsPrimaryButtonSuccessBackgroundDefault, RedsiftColorDarkComponentsButtonsPrimaryButtonSuccessBackgroundDisabled, RedsiftColorDarkComponentsButtonsPrimaryButtonSuccessBackgroundHover, RedsiftColorDarkComponentsButtonsPrimaryButtonSuccessTextActive, RedsiftColorDarkComponentsButtonsPrimaryButtonSuccessTextDefault, RedsiftColorDarkComponentsButtonsPrimaryButtonSuccessTextDisabled, RedsiftColorDarkComponentsButtonsPrimaryButtonSuccessTextHover, RedsiftColorDarkComponentsButtonsPrimaryButtonWarningBackgroundActive, RedsiftColorDarkComponentsButtonsPrimaryButtonWarningBackgroundDefault, RedsiftColorDarkComponentsButtonsPrimaryButtonWarningBackgroundDisabled, RedsiftColorDarkComponentsButtonsPrimaryButtonWarningBackgroundHover, RedsiftColorDarkComponentsButtonsPrimaryButtonWarningTextActive, RedsiftColorDarkComponentsButtonsPrimaryButtonWarningTextDefault, RedsiftColorDarkComponentsButtonsPrimaryButtonWarningTextDisabled, RedsiftColorDarkComponentsButtonsPrimaryButtonWarningTextHover, RedsiftColorDarkComponentsButtonsSecondaryButtonErrorBackgroundActive, RedsiftColorDarkComponentsButtonsSecondaryButtonErrorBackgroundDefault, RedsiftColorDarkComponentsButtonsSecondaryButtonErrorBackgroundDisabled, RedsiftColorDarkComponentsButtonsSecondaryButtonErrorBackgroundHover, RedsiftColorDarkComponentsButtonsSecondaryButtonErrorTextActive, RedsiftColorDarkComponentsButtonsSecondaryButtonErrorTextDefault, RedsiftColorDarkComponentsButtonsSecondaryButtonErrorTextDisabled, RedsiftColorDarkComponentsButtonsSecondaryButtonErrorTextHover, RedsiftColorDarkComponentsButtonsSecondaryButtonGreyBackgroundActive, RedsiftColorDarkComponentsButtonsSecondaryButtonGreyBackgroundDefault, RedsiftColorDarkComponentsButtonsSecondaryButtonGreyBackgroundDisabled, RedsiftColorDarkComponentsButtonsSecondaryButtonGreyBackgroundHover, RedsiftColorDarkComponentsButtonsSecondaryButtonGreyTextActive, RedsiftColorDarkComponentsButtonsSecondaryButtonGreyTextDefault, RedsiftColorDarkComponentsButtonsSecondaryButtonGreyTextDisabled, RedsiftColorDarkComponentsButtonsSecondaryButtonGreyTextHover, RedsiftColorDarkComponentsButtonsSecondaryButtonInfoBackgroundActive, RedsiftColorDarkComponentsButtonsSecondaryButtonInfoBackgroundDefault, RedsiftColorDarkComponentsButtonsSecondaryButtonInfoBackgroundDisabled, RedsiftColorDarkComponentsButtonsSecondaryButtonInfoBackgroundHover, RedsiftColorDarkComponentsButtonsSecondaryButtonInfoTextActive, RedsiftColorDarkComponentsButtonsSecondaryButtonInfoTextDefault, RedsiftColorDarkComponentsButtonsSecondaryButtonInfoTextDisabled, RedsiftColorDarkComponentsButtonsSecondaryButtonInfoTextHover, RedsiftColorDarkComponentsButtonsSecondaryButtonPrimaryBackgroundActive, RedsiftColorDarkComponentsButtonsSecondaryButtonPrimaryBackgroundDefault, RedsiftColorDarkComponentsButtonsSecondaryButtonPrimaryBackgroundDisabled, RedsiftColorDarkComponentsButtonsSecondaryButtonPrimaryBackgroundHover, RedsiftColorDarkComponentsButtonsSecondaryButtonPrimaryTextActive, RedsiftColorDarkComponentsButtonsSecondaryButtonPrimaryTextDefault, RedsiftColorDarkComponentsButtonsSecondaryButtonPrimaryTextDisabled, RedsiftColorDarkComponentsButtonsSecondaryButtonPrimaryTextHover, RedsiftColorDarkComponentsButtonsSecondaryButtonSecondaryBackgroundActive, RedsiftColorDarkComponentsButtonsSecondaryButtonSecondaryBackgroundDefault, RedsiftColorDarkComponentsButtonsSecondaryButtonSecondaryBackgroundDisabled, RedsiftColorDarkComponentsButtonsSecondaryButtonSecondaryBackgroundHover, RedsiftColorDarkComponentsButtonsSecondaryButtonSecondaryTextActive, RedsiftColorDarkComponentsButtonsSecondaryButtonSecondaryTextDefault, RedsiftColorDarkComponentsButtonsSecondaryButtonSecondaryTextDisabled, RedsiftColorDarkComponentsButtonsSecondaryButtonSecondaryTextHover, RedsiftColorDarkComponentsButtonsSecondaryButtonSuccessBackgroundActive, RedsiftColorDarkComponentsButtonsSecondaryButtonSuccessBackgroundDefault, RedsiftColorDarkComponentsButtonsSecondaryButtonSuccessBackgroundDisabled, RedsiftColorDarkComponentsButtonsSecondaryButtonSuccessBackgroundHover, RedsiftColorDarkComponentsButtonsSecondaryButtonSuccessTextActive, RedsiftColorDarkComponentsButtonsSecondaryButtonSuccessTextDefault, RedsiftColorDarkComponentsButtonsSecondaryButtonSuccessTextDisabled, RedsiftColorDarkComponentsButtonsSecondaryButtonSuccessTextHover, RedsiftColorDarkComponentsButtonsSecondaryButtonWarningBackgroundActive, RedsiftColorDarkComponentsButtonsSecondaryButtonWarningBackgroundDefault, RedsiftColorDarkComponentsButtonsSecondaryButtonWarningBackgroundDisabled, RedsiftColorDarkComponentsButtonsSecondaryButtonWarningBackgroundHover, RedsiftColorDarkComponentsButtonsSecondaryButtonWarningTextActive, RedsiftColorDarkComponentsButtonsSecondaryButtonWarningTextDefault, RedsiftColorDarkComponentsButtonsSecondaryButtonWarningTextDisabled, RedsiftColorDarkComponentsButtonsSecondaryButtonWarningTextHover, RedsiftColorDarkComponentsButtonsUnstyledButtonErrorBackgroundActive, RedsiftColorDarkComponentsButtonsUnstyledButtonErrorBackgroundDefault, RedsiftColorDarkComponentsButtonsUnstyledButtonErrorBackgroundDisabled, RedsiftColorDarkComponentsButtonsUnstyledButtonErrorBackgroundHover, RedsiftColorDarkComponentsButtonsUnstyledButtonErrorTextActive, RedsiftColorDarkComponentsButtonsUnstyledButtonErrorTextDefault, RedsiftColorDarkComponentsButtonsUnstyledButtonErrorTextDisabled, RedsiftColorDarkComponentsButtonsUnstyledButtonErrorTextHover, RedsiftColorDarkComponentsButtonsUnstyledButtonGreyBackgroundActive, RedsiftColorDarkComponentsButtonsUnstyledButtonGreyBackgroundDefault, RedsiftColorDarkComponentsButtonsUnstyledButtonGreyBackgroundDisabled, RedsiftColorDarkComponentsButtonsUnstyledButtonGreyBackgroundHover, RedsiftColorDarkComponentsButtonsUnstyledButtonGreyTextActive, RedsiftColorDarkComponentsButtonsUnstyledButtonGreyTextDefault, RedsiftColorDarkComponentsButtonsUnstyledButtonGreyTextDisabled, RedsiftColorDarkComponentsButtonsUnstyledButtonGreyTextHover, RedsiftColorDarkComponentsButtonsUnstyledButtonInfoBackgroundActive, RedsiftColorDarkComponentsButtonsUnstyledButtonInfoBackgroundDefault, RedsiftColorDarkComponentsButtonsUnstyledButtonInfoBackgroundDisabled, RedsiftColorDarkComponentsButtonsUnstyledButtonInfoBackgroundHover, RedsiftColorDarkComponentsButtonsUnstyledButtonInfoTextActive, RedsiftColorDarkComponentsButtonsUnstyledButtonInfoTextDefault, RedsiftColorDarkComponentsButtonsUnstyledButtonInfoTextDisabled, RedsiftColorDarkComponentsButtonsUnstyledButtonInfoTextHover, RedsiftColorDarkComponentsButtonsUnstyledButtonPrimaryBackgroundActive, RedsiftColorDarkComponentsButtonsUnstyledButtonPrimaryBackgroundDefault, RedsiftColorDarkComponentsButtonsUnstyledButtonPrimaryBackgroundDisabled, RedsiftColorDarkComponentsButtonsUnstyledButtonPrimaryBackgroundHover, RedsiftColorDarkComponentsButtonsUnstyledButtonPrimaryTextActive, RedsiftColorDarkComponentsButtonsUnstyledButtonPrimaryTextDefault, RedsiftColorDarkComponentsButtonsUnstyledButtonPrimaryTextDisabled, RedsiftColorDarkComponentsButtonsUnstyledButtonPrimaryTextHover, RedsiftColorDarkComponentsButtonsUnstyledButtonSecondaryBackgroundActive, RedsiftColorDarkComponentsButtonsUnstyledButtonSecondaryBackgroundDefault, RedsiftColorDarkComponentsButtonsUnstyledButtonSecondaryBackgroundDisabled, RedsiftColorDarkComponentsButtonsUnstyledButtonSecondaryBackgroundHover, RedsiftColorDarkComponentsButtonsUnstyledButtonSecondaryTextActive, RedsiftColorDarkComponentsButtonsUnstyledButtonSecondaryTextDefault, RedsiftColorDarkComponentsButtonsUnstyledButtonSecondaryTextDisabled, RedsiftColorDarkComponentsButtonsUnstyledButtonSecondaryTextHover, RedsiftColorDarkComponentsButtonsUnstyledButtonSuccessBackgroundActive, RedsiftColorDarkComponentsButtonsUnstyledButtonSuccessBackgroundDefault, RedsiftColorDarkComponentsButtonsUnstyledButtonSuccessBackgroundDisabled, RedsiftColorDarkComponentsButtonsUnstyledButtonSuccessBackgroundHover, RedsiftColorDarkComponentsButtonsUnstyledButtonSuccessTextActive, RedsiftColorDarkComponentsButtonsUnstyledButtonSuccessTextDefault, RedsiftColorDarkComponentsButtonsUnstyledButtonSuccessTextDisabled, RedsiftColorDarkComponentsButtonsUnstyledButtonSuccessTextHover, RedsiftColorDarkComponentsButtonsUnstyledButtonWarningBackgroundActive, RedsiftColorDarkComponentsButtonsUnstyledButtonWarningBackgroundDefault, RedsiftColorDarkComponentsButtonsUnstyledButtonWarningBackgroundDisabled, RedsiftColorDarkComponentsButtonsUnstyledButtonWarningBackgroundHover, RedsiftColorDarkComponentsButtonsUnstyledButtonWarningTextActive, RedsiftColorDarkComponentsButtonsUnstyledButtonWarningTextDefault, RedsiftColorDarkComponentsButtonsUnstyledButtonWarningTextDisabled, RedsiftColorDarkComponentsButtonsUnstyledButtonWarningTextHover, RedsiftColorDarkComponentsCheckboxFillDefault, RedsiftColorDarkComponentsCheckboxFillDefaultHover, RedsiftColorDarkComponentsCheckboxFillDisabled, RedsiftColorDarkComponentsCheckboxFillInvalid, RedsiftColorDarkComponentsCheckboxFillInvalidHover, RedsiftColorDarkComponentsCheckboxFillUncolored, RedsiftColorDarkComponentsCheckboxFillUncoloredHover, RedsiftColorDarkComponentsCheckboxTextDefault, RedsiftColorDarkComponentsCheckboxTextDisabled, RedsiftColorDarkComponentsCheckboxTextInvalid, RedsiftColorDarkComponentsDropdownsAndMenusClickBackground, RedsiftColorDarkComponentsDropdownsAndMenusClickText, RedsiftColorDarkComponentsDropdownsAndMenusDefaultBackground, RedsiftColorDarkComponentsDropdownsAndMenusDefaultText, RedsiftColorDarkComponentsDropdownsAndMenusDividers, RedsiftColorDarkComponentsDropdownsAndMenusHoverBackground, RedsiftColorDarkComponentsDropdownsAndMenusHoverText, RedsiftColorDarkComponentsDropdownsAndMenusToggleActiveBackground, RedsiftColorDarkComponentsDropdownsAndMenusToggleActiveClickBackground, RedsiftColorDarkComponentsDropdownsAndMenusToggleActiveClickText, RedsiftColorDarkComponentsDropdownsAndMenusToggleActiveHoverBackground, RedsiftColorDarkComponentsDropdownsAndMenusToggleActiveHoverText, RedsiftColorDarkComponentsDropdownsAndMenusToggleActiveText, RedsiftColorDarkComponentsIconsDefault, RedsiftColorDarkComponentsModalBackground, RedsiftColorDarkComponentsPageBackground, RedsiftColorDarkComponentsProductLogosIconGrey, RedsiftColorDarkComponentsProductLogosIconRed, RedsiftColorDarkComponentsProductLogosTextGrey, RedsiftColorDarkComponentsProductLogosTextRed, RedsiftColorDarkComponentsProductLogosTextWhite, RedsiftColorDarkComponentsRadioFillDefault, RedsiftColorDarkComponentsRadioFillDefaultHover, RedsiftColorDarkComponentsRadioFillDisabled, RedsiftColorDarkComponentsRadioFillInvalid, RedsiftColorDarkComponentsRadioFillInvalidHover, RedsiftColorDarkComponentsRadioFillUncolored, RedsiftColorDarkComponentsRadioFillUncoloredHover, RedsiftColorDarkComponentsRadioTextDefault, RedsiftColorDarkComponentsRadioTextDisabled, RedsiftColorDarkComponentsRadioTextInvalid, RedsiftColorDarkComponentsRedSiftLogoDiamondBottomLeft, RedsiftColorDarkComponentsRedSiftLogoDiamondBottomRight, RedsiftColorDarkComponentsRedSiftLogoDiamondDark, RedsiftColorDarkComponentsRedSiftLogoDiamondLight, RedsiftColorDarkComponentsRedSiftLogoDiamondMid, RedsiftColorDarkComponentsRedSiftLogoDiamondTopRight, RedsiftColorDarkComponentsRedSiftLogoIconBackground, RedsiftColorDarkComponentsRedSiftLogoIconR, RedsiftColorDarkComponentsRedSiftLogoTextGrey, RedsiftColorDarkComponentsRedSiftLogoTextRed, RedsiftColorDarkComponentsRedSiftLogoTextWhite, RedsiftColorDarkComponentsSideNavigationBackground, RedsiftColorDarkComponentsSideNavigationCurrentMarker, RedsiftColorDarkComponentsSideNavigationMenuItemActive, RedsiftColorDarkComponentsSideNavigationMenuItemBackgroundActive, RedsiftColorDarkComponentsSideNavigationMenuItemBackgroundHover, RedsiftColorDarkComponentsSideNavigationMenuItemBackgroundSecondary, RedsiftColorDarkComponentsSideNavigationMenuItemTextDisabled, RedsiftColorDarkComponentsSideNavigationMenuItemTextHover, RedsiftColorDarkComponentsSideNavigationMenuItemTextResting, RedsiftColorDarkComponentsSideNavigationRightLine, RedsiftColorDarkComponentsSideNavigationScrollbarHover, RedsiftColorDarkComponentsSideNavigationScrollbarResting, RedsiftColorDarkComponentsSpinnerSpinner, RedsiftColorDarkComponentsSwitchBackgroundDefault, RedsiftColorDarkComponentsSwitchBackgroundDefaultActive, RedsiftColorDarkComponentsSwitchBackgroundDisabled, RedsiftColorDarkComponentsSwitchBackgroundDisabledActive, RedsiftColorDarkComponentsSwitchBackgroundInvalid, RedsiftColorDarkComponentsSwitchBackgroundInvalidActive, RedsiftColorDarkComponentsSwitchBackgroundUncolored, RedsiftColorDarkComponentsSwitchBackgroundUncoloredActive, RedsiftColorDarkComponentsSwitchDotDefault, RedsiftColorDarkComponentsSwitchDotDefaultHover, RedsiftColorDarkComponentsSwitchDotDisabled, RedsiftColorDarkComponentsSwitchDotInvalid, RedsiftColorDarkComponentsSwitchDotInvalidHover, RedsiftColorDarkComponentsSwitchDotUncolored, RedsiftColorDarkComponentsSwitchDotUncoloredHover, RedsiftColorDarkComponentsSwitchTextDefault, RedsiftColorDarkComponentsSwitchTextDisabled, RedsiftColorDarkComponentsSwitchTextInvalid, RedsiftColorDarkComponentsTabsLine, RedsiftColorDarkComponentsTextPrimary, RedsiftColorDarkComponentsTextSecondary, RedsiftColorDarkComponentsTooltipBackground, RedsiftColorDarkComponentsTooltipText, RedsiftColorGreenD1, RedsiftColorGreenD2, RedsiftColorGreenD3, RedsiftColorGreenD4, RedsiftColorGreenL1, RedsiftColorGreenL2, RedsiftColorGreenL3, RedsiftColorGreenL4, RedsiftColorGreenN, RedsiftColorGreyD1, RedsiftColorGreyD2, RedsiftColorGreyD3, RedsiftColorGreyD4, RedsiftColorGreyD5, RedsiftColorGreyL1, RedsiftColorGreyL2, RedsiftColorGreyL3, RedsiftColorGreyL4, RedsiftColorGreyL5, RedsiftColorGreyN, RedsiftColorLightComponentsAiAiBorder, RedsiftColorLightComponentsAiAiIcon, RedsiftColorLightComponentsAlertErrorBackground, RedsiftColorLightComponentsAlertErrorIcon, RedsiftColorLightComponentsAlertInfoBackground, RedsiftColorLightComponentsAlertInfoIcon, RedsiftColorLightComponentsAlertSuccessBackground, RedsiftColorLightComponentsAlertSuccessIcon, RedsiftColorLightComponentsAlertText, RedsiftColorLightComponentsAlertWarningBackground, RedsiftColorLightComponentsAlertWarningIcon, RedsiftColorLightComponentsAppBarBackground, RedsiftColorLightComponentsAppBarBorder, RedsiftColorLightComponentsAppBarBreadcrumbDefault, RedsiftColorLightComponentsAppBarBreadcrumbDown, RedsiftColorLightComponentsAppBarBreadcrumbHover, RedsiftColorLightComponentsAppBarIconBackgroundActive, RedsiftColorLightComponentsAppBarIconBackgroundActiveDown, RedsiftColorLightComponentsAppBarIconBackgroundActiveHover, RedsiftColorLightComponentsAppBarIconBackgroundDown, RedsiftColorLightComponentsAppBarIconBackgroundHover, RedsiftColorLightComponentsButtonsPrimaryButtonErrorBackgroundActive, RedsiftColorLightComponentsButtonsPrimaryButtonErrorBackgroundDefault, RedsiftColorLightComponentsButtonsPrimaryButtonErrorBackgroundDisabled, RedsiftColorLightComponentsButtonsPrimaryButtonErrorBackgroundHover, RedsiftColorLightComponentsButtonsPrimaryButtonErrorTextActive, RedsiftColorLightComponentsButtonsPrimaryButtonErrorTextDefault, RedsiftColorLightComponentsButtonsPrimaryButtonErrorTextDisabled, RedsiftColorLightComponentsButtonsPrimaryButtonErrorTextHover, RedsiftColorLightComponentsButtonsPrimaryButtonGreyBackgroundActive, RedsiftColorLightComponentsButtonsPrimaryButtonGreyBackgroundDefault, RedsiftColorLightComponentsButtonsPrimaryButtonGreyBackgroundDisabled, RedsiftColorLightComponentsButtonsPrimaryButtonGreyBackgroundHover, RedsiftColorLightComponentsButtonsPrimaryButtonGreyTextActive, RedsiftColorLightComponentsButtonsPrimaryButtonGreyTextDefault, RedsiftColorLightComponentsButtonsPrimaryButtonGreyTextDisabled, RedsiftColorLightComponentsButtonsPrimaryButtonGreyTextHover, RedsiftColorLightComponentsButtonsPrimaryButtonInfoBackgroundActive, RedsiftColorLightComponentsButtonsPrimaryButtonInfoBackgroundDefault, RedsiftColorLightComponentsButtonsPrimaryButtonInfoBackgroundDisabled, RedsiftColorLightComponentsButtonsPrimaryButtonInfoBackgroundHover, RedsiftColorLightComponentsButtonsPrimaryButtonInfoTextActive, RedsiftColorLightComponentsButtonsPrimaryButtonInfoTextDefault, RedsiftColorLightComponentsButtonsPrimaryButtonInfoTextDisabled, RedsiftColorLightComponentsButtonsPrimaryButtonInfoTextHover, RedsiftColorLightComponentsButtonsPrimaryButtonPrimaryBackgroundActive, RedsiftColorLightComponentsButtonsPrimaryButtonPrimaryBackgroundDefault, RedsiftColorLightComponentsButtonsPrimaryButtonPrimaryBackgroundDisabled, RedsiftColorLightComponentsButtonsPrimaryButtonPrimaryBackgroundHover, RedsiftColorLightComponentsButtonsPrimaryButtonPrimaryTextActive, RedsiftColorLightComponentsButtonsPrimaryButtonPrimaryTextDefault, RedsiftColorLightComponentsButtonsPrimaryButtonPrimaryTextDisabled, RedsiftColorLightComponentsButtonsPrimaryButtonPrimaryTextHover, RedsiftColorLightComponentsButtonsPrimaryButtonSecondaryBackgroundActive, RedsiftColorLightComponentsButtonsPrimaryButtonSecondaryBackgroundDefault, RedsiftColorLightComponentsButtonsPrimaryButtonSecondaryBackgroundDisabled, RedsiftColorLightComponentsButtonsPrimaryButtonSecondaryBackgroundHover, RedsiftColorLightComponentsButtonsPrimaryButtonSecondaryTextActive, RedsiftColorLightComponentsButtonsPrimaryButtonSecondaryTextDefault, RedsiftColorLightComponentsButtonsPrimaryButtonSecondaryTextDisabled, RedsiftColorLightComponentsButtonsPrimaryButtonSecondaryTextHover, RedsiftColorLightComponentsButtonsPrimaryButtonSuccessBackgroundActive, RedsiftColorLightComponentsButtonsPrimaryButtonSuccessBackgroundDefault, RedsiftColorLightComponentsButtonsPrimaryButtonSuccessBackgroundDisabled, RedsiftColorLightComponentsButtonsPrimaryButtonSuccessBackgroundHover, RedsiftColorLightComponentsButtonsPrimaryButtonSuccessTextActive, RedsiftColorLightComponentsButtonsPrimaryButtonSuccessTextDefault, RedsiftColorLightComponentsButtonsPrimaryButtonSuccessTextDisabled, RedsiftColorLightComponentsButtonsPrimaryButtonSuccessTextHover, RedsiftColorLightComponentsButtonsPrimaryButtonWarningBackgroundActive, RedsiftColorLightComponentsButtonsPrimaryButtonWarningBackgroundDefault, RedsiftColorLightComponentsButtonsPrimaryButtonWarningBackgroundDisabled, RedsiftColorLightComponentsButtonsPrimaryButtonWarningBackgroundHover, RedsiftColorLightComponentsButtonsPrimaryButtonWarningTextActive, RedsiftColorLightComponentsButtonsPrimaryButtonWarningTextDefault, RedsiftColorLightComponentsButtonsPrimaryButtonWarningTextDisabled, RedsiftColorLightComponentsButtonsPrimaryButtonWarningTextHover, RedsiftColorLightComponentsButtonsSecondaryButtonErrorBackgroundActive, RedsiftColorLightComponentsButtonsSecondaryButtonErrorBackgroundDefault, RedsiftColorLightComponentsButtonsSecondaryButtonErrorBackgroundDisabled, RedsiftColorLightComponentsButtonsSecondaryButtonErrorBackgroundHover, RedsiftColorLightComponentsButtonsSecondaryButtonErrorTextActive, RedsiftColorLightComponentsButtonsSecondaryButtonErrorTextDefault, RedsiftColorLightComponentsButtonsSecondaryButtonErrorTextDisabled, RedsiftColorLightComponentsButtonsSecondaryButtonErrorTextHover, RedsiftColorLightComponentsButtonsSecondaryButtonGreyBackgroundActive, RedsiftColorLightComponentsButtonsSecondaryButtonGreyBackgroundDefault, RedsiftColorLightComponentsButtonsSecondaryButtonGreyBackgroundDisabled, RedsiftColorLightComponentsButtonsSecondaryButtonGreyBackgroundHover, RedsiftColorLightComponentsButtonsSecondaryButtonGreyTextActive, RedsiftColorLightComponentsButtonsSecondaryButtonGreyTextDefault, RedsiftColorLightComponentsButtonsSecondaryButtonGreyTextDisabled, RedsiftColorLightComponentsButtonsSecondaryButtonGreyTextHover, RedsiftColorLightComponentsButtonsSecondaryButtonInfoBackgroundActive, RedsiftColorLightComponentsButtonsSecondaryButtonInfoBackgroundDefault, RedsiftColorLightComponentsButtonsSecondaryButtonInfoBackgroundDisabled, RedsiftColorLightComponentsButtonsSecondaryButtonInfoBackgroundHover, RedsiftColorLightComponentsButtonsSecondaryButtonInfoTextActive, RedsiftColorLightComponentsButtonsSecondaryButtonInfoTextDefault, RedsiftColorLightComponentsButtonsSecondaryButtonInfoTextDisabled, RedsiftColorLightComponentsButtonsSecondaryButtonInfoTextHover, RedsiftColorLightComponentsButtonsSecondaryButtonPrimaryBackgroundActive, RedsiftColorLightComponentsButtonsSecondaryButtonPrimaryBackgroundDefault, RedsiftColorLightComponentsButtonsSecondaryButtonPrimaryBackgroundDisabled, RedsiftColorLightComponentsButtonsSecondaryButtonPrimaryBackgroundHover, RedsiftColorLightComponentsButtonsSecondaryButtonPrimaryTextActive, RedsiftColorLightComponentsButtonsSecondaryButtonPrimaryTextDefault, RedsiftColorLightComponentsButtonsSecondaryButtonPrimaryTextDisabled, RedsiftColorLightComponentsButtonsSecondaryButtonPrimaryTextHover, RedsiftColorLightComponentsButtonsSecondaryButtonSecondaryBackgroundActive, RedsiftColorLightComponentsButtonsSecondaryButtonSecondaryBackgroundDefault, RedsiftColorLightComponentsButtonsSecondaryButtonSecondaryBackgroundDisabled, RedsiftColorLightComponentsButtonsSecondaryButtonSecondaryBackgroundHover, RedsiftColorLightComponentsButtonsSecondaryButtonSecondaryTextActive, RedsiftColorLightComponentsButtonsSecondaryButtonSecondaryTextDefault, RedsiftColorLightComponentsButtonsSecondaryButtonSecondaryTextDisabled, RedsiftColorLightComponentsButtonsSecondaryButtonSecondaryTextHover, RedsiftColorLightComponentsButtonsSecondaryButtonSuccessBackgroundActive, RedsiftColorLightComponentsButtonsSecondaryButtonSuccessBackgroundDefault, RedsiftColorLightComponentsButtonsSecondaryButtonSuccessBackgroundDisabled, RedsiftColorLightComponentsButtonsSecondaryButtonSuccessBackgroundHover, RedsiftColorLightComponentsButtonsSecondaryButtonSuccessTextActive, RedsiftColorLightComponentsButtonsSecondaryButtonSuccessTextDefault, RedsiftColorLightComponentsButtonsSecondaryButtonSuccessTextDisabled, RedsiftColorLightComponentsButtonsSecondaryButtonSuccessTextHover, RedsiftColorLightComponentsButtonsSecondaryButtonWarningBackgroundActive, RedsiftColorLightComponentsButtonsSecondaryButtonWarningBackgroundDefault, RedsiftColorLightComponentsButtonsSecondaryButtonWarningBackgroundDisabled, RedsiftColorLightComponentsButtonsSecondaryButtonWarningBackgroundHover, RedsiftColorLightComponentsButtonsSecondaryButtonWarningTextActive, RedsiftColorLightComponentsButtonsSecondaryButtonWarningTextDefault, RedsiftColorLightComponentsButtonsSecondaryButtonWarningTextDisabled, RedsiftColorLightComponentsButtonsSecondaryButtonWarningTextHover, RedsiftColorLightComponentsButtonsUnstyledButtonErrorBackgroundActive, RedsiftColorLightComponentsButtonsUnstyledButtonErrorBackgroundDefault, RedsiftColorLightComponentsButtonsUnstyledButtonErrorBackgroundDisabled, RedsiftColorLightComponentsButtonsUnstyledButtonErrorBackgroundHover, RedsiftColorLightComponentsButtonsUnstyledButtonErrorTextActive, RedsiftColorLightComponentsButtonsUnstyledButtonErrorTextDefault, RedsiftColorLightComponentsButtonsUnstyledButtonErrorTextDisabled, RedsiftColorLightComponentsButtonsUnstyledButtonErrorTextHover, RedsiftColorLightComponentsButtonsUnstyledButtonGreyBackgroundActive, RedsiftColorLightComponentsButtonsUnstyledButtonGreyBackgroundDefault, RedsiftColorLightComponentsButtonsUnstyledButtonGreyBackgroundDisabled, RedsiftColorLightComponentsButtonsUnstyledButtonGreyBackgroundHover, RedsiftColorLightComponentsButtonsUnstyledButtonGreyTextActive, RedsiftColorLightComponentsButtonsUnstyledButtonGreyTextDefault, RedsiftColorLightComponentsButtonsUnstyledButtonGreyTextDisabled, RedsiftColorLightComponentsButtonsUnstyledButtonGreyTextHover, RedsiftColorLightComponentsButtonsUnstyledButtonInfoBackgroundActive, RedsiftColorLightComponentsButtonsUnstyledButtonInfoBackgroundDefault, RedsiftColorLightComponentsButtonsUnstyledButtonInfoBackgroundDisabled, RedsiftColorLightComponentsButtonsUnstyledButtonInfoBackgroundHover, RedsiftColorLightComponentsButtonsUnstyledButtonInfoTextActive, RedsiftColorLightComponentsButtonsUnstyledButtonInfoTextDefault, RedsiftColorLightComponentsButtonsUnstyledButtonInfoTextDisabled, RedsiftColorLightComponentsButtonsUnstyledButtonInfoTextHover, RedsiftColorLightComponentsButtonsUnstyledButtonPrimaryBackgroundActive, RedsiftColorLightComponentsButtonsUnstyledButtonPrimaryBackgroundDefault, RedsiftColorLightComponentsButtonsUnstyledButtonPrimaryBackgroundDisabled, RedsiftColorLightComponentsButtonsUnstyledButtonPrimaryBackgroundHover, RedsiftColorLightComponentsButtonsUnstyledButtonPrimaryTextActive, RedsiftColorLightComponentsButtonsUnstyledButtonPrimaryTextDefault, RedsiftColorLightComponentsButtonsUnstyledButtonPrimaryTextDisabled, RedsiftColorLightComponentsButtonsUnstyledButtonPrimaryTextHover, RedsiftColorLightComponentsButtonsUnstyledButtonSecondaryBackgroundActive, RedsiftColorLightComponentsButtonsUnstyledButtonSecondaryBackgroundDefault, RedsiftColorLightComponentsButtonsUnstyledButtonSecondaryBackgroundDisabled, RedsiftColorLightComponentsButtonsUnstyledButtonSecondaryBackgroundHover, RedsiftColorLightComponentsButtonsUnstyledButtonSecondaryTextActive, RedsiftColorLightComponentsButtonsUnstyledButtonSecondaryTextDefault, RedsiftColorLightComponentsButtonsUnstyledButtonSecondaryTextDisabled, RedsiftColorLightComponentsButtonsUnstyledButtonSecondaryTextHover, RedsiftColorLightComponentsButtonsUnstyledButtonSuccessBackgroundActive, RedsiftColorLightComponentsButtonsUnstyledButtonSuccessBackgroundDefault, RedsiftColorLightComponentsButtonsUnstyledButtonSuccessBackgroundDisabled, RedsiftColorLightComponentsButtonsUnstyledButtonSuccessBackgroundHover, RedsiftColorLightComponentsButtonsUnstyledButtonSuccessTextActive, RedsiftColorLightComponentsButtonsUnstyledButtonSuccessTextDefault, RedsiftColorLightComponentsButtonsUnstyledButtonSuccessTextDisabled, RedsiftColorLightComponentsButtonsUnstyledButtonSuccessTextHover, RedsiftColorLightComponentsButtonsUnstyledButtonWarningBackgroundActive, RedsiftColorLightComponentsButtonsUnstyledButtonWarningBackgroundDefault, RedsiftColorLightComponentsButtonsUnstyledButtonWarningBackgroundDisabled, RedsiftColorLightComponentsButtonsUnstyledButtonWarningBackgroundHover, RedsiftColorLightComponentsButtonsUnstyledButtonWarningTextActive, RedsiftColorLightComponentsButtonsUnstyledButtonWarningTextDefault, RedsiftColorLightComponentsButtonsUnstyledButtonWarningTextDisabled, RedsiftColorLightComponentsButtonsUnstyledButtonWarningTextHover, RedsiftColorLightComponentsCheckboxFillDefault, RedsiftColorLightComponentsCheckboxFillDefaultHover, RedsiftColorLightComponentsCheckboxFillDisabled, RedsiftColorLightComponentsCheckboxFillInvalid, RedsiftColorLightComponentsCheckboxFillInvalidHover, RedsiftColorLightComponentsCheckboxFillUncolored, RedsiftColorLightComponentsCheckboxFillUncoloredHover, RedsiftColorLightComponentsCheckboxTextDefault, RedsiftColorLightComponentsCheckboxTextDisabled, RedsiftColorLightComponentsCheckboxTextInvalid, RedsiftColorLightComponentsDropdownsAndMenusClickBackground, RedsiftColorLightComponentsDropdownsAndMenusClickText, RedsiftColorLightComponentsDropdownsAndMenusDefaultBackground, RedsiftColorLightComponentsDropdownsAndMenusDefaultText, RedsiftColorLightComponentsDropdownsAndMenusDividers, RedsiftColorLightComponentsDropdownsAndMenusHoverBackground, RedsiftColorLightComponentsDropdownsAndMenusHoverText, RedsiftColorLightComponentsDropdownsAndMenusToggleActiveBackground, RedsiftColorLightComponentsDropdownsAndMenusToggleActiveClickBackground, RedsiftColorLightComponentsDropdownsAndMenusToggleActiveClickText, RedsiftColorLightComponentsDropdownsAndMenusToggleActiveHoverBackground, RedsiftColorLightComponentsDropdownsAndMenusToggleActiveHoverText, RedsiftColorLightComponentsDropdownsAndMenusToggleActiveText, RedsiftColorLightComponentsIconsDefault, RedsiftColorLightComponentsModalBackground, RedsiftColorLightComponentsPageBackground, RedsiftColorLightComponentsProductLogosIconGrey, RedsiftColorLightComponentsProductLogosIconRed, RedsiftColorLightComponentsProductLogosTextGrey, RedsiftColorLightComponentsProductLogosTextRed, RedsiftColorLightComponentsProductLogosTextWhite, RedsiftColorLightComponentsRadioFillDefault, RedsiftColorLightComponentsRadioFillDefaultHover, RedsiftColorLightComponentsRadioFillDisabled, RedsiftColorLightComponentsRadioFillInvalid, RedsiftColorLightComponentsRadioFillInvalidHover, RedsiftColorLightComponentsRadioFillUncolored, RedsiftColorLightComponentsRadioFillUncoloredHover, RedsiftColorLightComponentsRadioTextDefault, RedsiftColorLightComponentsRadioTextDisabled, RedsiftColorLightComponentsRadioTextInvalid, RedsiftColorLightComponentsRedSiftLogoDiamondBottomLeft, RedsiftColorLightComponentsRedSiftLogoDiamondBottomRight, RedsiftColorLightComponentsRedSiftLogoDiamondDark, RedsiftColorLightComponentsRedSiftLogoDiamondLight, RedsiftColorLightComponentsRedSiftLogoDiamondMid, RedsiftColorLightComponentsRedSiftLogoDiamondTopRight, RedsiftColorLightComponentsRedSiftLogoIconBackground, RedsiftColorLightComponentsRedSiftLogoIconR, RedsiftColorLightComponentsRedSiftLogoTextGrey, RedsiftColorLightComponentsRedSiftLogoTextRed, RedsiftColorLightComponentsRedSiftLogoTextWhite, RedsiftColorLightComponentsSideNavigationBackground, RedsiftColorLightComponentsSideNavigationCurrentMarker, RedsiftColorLightComponentsSideNavigationMenuItemActive, RedsiftColorLightComponentsSideNavigationMenuItemBackgroundActive, RedsiftColorLightComponentsSideNavigationMenuItemBackgroundHover, RedsiftColorLightComponentsSideNavigationMenuItemBackgroundSecondary, RedsiftColorLightComponentsSideNavigationMenuItemTextDisabled, RedsiftColorLightComponentsSideNavigationMenuItemTextHover, RedsiftColorLightComponentsSideNavigationMenuItemTextResting, RedsiftColorLightComponentsSideNavigationRightLine, RedsiftColorLightComponentsSideNavigationScrollbarHover, RedsiftColorLightComponentsSideNavigationScrollbarResting, RedsiftColorLightComponentsSpinnerSpinner, RedsiftColorLightComponentsSwitchBackgroundDefault, RedsiftColorLightComponentsSwitchBackgroundDefaultActive, RedsiftColorLightComponentsSwitchBackgroundDisabled, RedsiftColorLightComponentsSwitchBackgroundDisabledActive, RedsiftColorLightComponentsSwitchBackgroundInvalid, RedsiftColorLightComponentsSwitchBackgroundInvalidActive, RedsiftColorLightComponentsSwitchBackgroundUncolored, RedsiftColorLightComponentsSwitchBackgroundUncoloredActive, RedsiftColorLightComponentsSwitchDotDefault, RedsiftColorLightComponentsSwitchDotDefaultHover, RedsiftColorLightComponentsSwitchDotDisabled, RedsiftColorLightComponentsSwitchDotInvalid, RedsiftColorLightComponentsSwitchDotInvalidHover, RedsiftColorLightComponentsSwitchDotUncolored, RedsiftColorLightComponentsSwitchDotUncoloredHover, RedsiftColorLightComponentsSwitchTextDefault, RedsiftColorLightComponentsSwitchTextDisabled, RedsiftColorLightComponentsSwitchTextInvalid, RedsiftColorLightComponentsTabsLine, RedsiftColorLightComponentsTextPrimary, RedsiftColorLightComponentsTextSecondary, RedsiftColorLightComponentsTooltipBackground, RedsiftColorLightComponentsTooltipText, RedsiftColorNeutralBlack, RedsiftColorNeutralDarkGrey, RedsiftColorNeutralLightGrey, RedsiftColorNeutralMidGrey, RedsiftColorNeutralWhite, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralXLightGrey, RedsiftColorNotificationsErrorActive, RedsiftColorNotificationsErrorHover, RedsiftColorNotificationsErrorPrimary, RedsiftColorNotificationsInfoActive, RedsiftColorNotificationsInfoHover, RedsiftColorNotificationsInfoPrimary, RedsiftColorNotificationsNoDataActive, RedsiftColorNotificationsNoDataHover, RedsiftColorNotificationsNoDataPrimary, RedsiftColorNotificationsPrimaryActive, RedsiftColorNotificationsPrimaryHover, RedsiftColorNotificationsPrimaryPrimary, RedsiftColorNotificationsQuestionActive, RedsiftColorNotificationsQuestionHover, RedsiftColorNotificationsQuestionPrimary, RedsiftColorNotificationsSecondaryActive, RedsiftColorNotificationsSecondaryHover, RedsiftColorNotificationsSecondaryPrimary, RedsiftColorNotificationsSuccessActive, RedsiftColorNotificationsSuccessHover, RedsiftColorNotificationsSuccessPrimary, RedsiftColorNotificationsWarningActive, RedsiftColorNotificationsWarningHover, RedsiftColorNotificationsWarningPrimary, RedsiftColorPresentationAquaDark, RedsiftColorPresentationAquaDarker, RedsiftColorPresentationAquaDarkerer, RedsiftColorPresentationAquaDefault, RedsiftColorPresentationAquaLight, RedsiftColorPresentationAquaLighter, RedsiftColorPresentationAquaLighterer, RedsiftColorPresentationBlueDark, RedsiftColorPresentationBlueDarker, RedsiftColorPresentationBlueDarkerer, RedsiftColorPresentationBlueDefault, RedsiftColorPresentationBlueLight, RedsiftColorPresentationBlueLighter, RedsiftColorPresentationBlueLighterer, RedsiftColorPresentationBrownDark, RedsiftColorPresentationBrownDarker, RedsiftColorPresentationBrownDarkerer, RedsiftColorPresentationBrownDefault, RedsiftColorPresentationBrownLight, RedsiftColorPresentationBrownLighter, RedsiftColorPresentationBrownLighterer, RedsiftColorPresentationGreenDark, RedsiftColorPresentationGreenDarker, RedsiftColorPresentationGreenDarkerer, RedsiftColorPresentationGreenDefault, RedsiftColorPresentationGreenLight, RedsiftColorPresentationGreenLighter, RedsiftColorPresentationGreenLighterer, RedsiftColorPresentationGreyDark, RedsiftColorPresentationGreyDarker, RedsiftColorPresentationGreyDarkerer, RedsiftColorPresentationGreyDefault, RedsiftColorPresentationGreyLight, RedsiftColorPresentationGreyLighter, RedsiftColorPresentationGreyLighterer, RedsiftColorPresentationOrangeDark, RedsiftColorPresentationOrangeDarker, RedsiftColorPresentationOrangeDarkerer, RedsiftColorPresentationOrangeDefault, RedsiftColorPresentationOrangeLight, RedsiftColorPresentationOrangeLighter, RedsiftColorPresentationOrangeLighterer, RedsiftColorPresentationPinkDark, RedsiftColorPresentationPinkDarker, RedsiftColorPresentationPinkDarkerer, RedsiftColorPresentationPinkDefault, RedsiftColorPresentationPinkLight, RedsiftColorPresentationPinkLighter, RedsiftColorPresentationPinkLighterer, RedsiftColorPresentationPurpleDark, RedsiftColorPresentationPurpleDarker, RedsiftColorPresentationPurpleDarkerer, RedsiftColorPresentationPurpleDefault, RedsiftColorPresentationPurpleLight, RedsiftColorPresentationPurpleLighter, RedsiftColorPresentationPurpleLighterer, RedsiftColorPresentationRedDark, RedsiftColorPresentationRedDarker, RedsiftColorPresentationRedDarkerer, RedsiftColorPresentationRedDefault, RedsiftColorPresentationRedLight, RedsiftColorPresentationRedLighter, RedsiftColorPresentationRedLighterer, RedsiftColorPresentationYellowDark, RedsiftColorPresentationYellowDarker, RedsiftColorPresentationYellowDarkerer, RedsiftColorPresentationYellowDefault, RedsiftColorPresentationYellowLight, RedsiftColorPresentationYellowLighter, RedsiftColorPresentationYellowLighterer, RedsiftColorPrimaryD1, RedsiftColorPrimaryD2, RedsiftColorPrimaryD3, RedsiftColorPrimaryD4, RedsiftColorPrimaryL1, RedsiftColorPrimaryL2, RedsiftColorPrimaryL3, RedsiftColorPrimaryL4, RedsiftColorPrimaryN, RedsiftColorProductAsm, RedsiftColorProductBrandTrust, RedsiftColorProductCertificates, RedsiftColorProductHardenize, RedsiftColorProductOnDmarc, RedsiftColorProductOnInbox, RedsiftColorProductRadar, RedsiftColorProductVendorSecure, RedsiftColorRedD1, RedsiftColorRedD2, RedsiftColorRedD3, RedsiftColorRedD4, RedsiftColorRedL1, RedsiftColorRedL2, RedsiftColorRedL3, RedsiftColorRedL4, RedsiftColorRedN, RedsiftColorSecondaryD1, RedsiftColorSecondaryD2, RedsiftColorSecondaryD3, RedsiftColorSecondaryD4, RedsiftColorSecondaryL1, RedsiftColorSecondaryL2, RedsiftColorSecondaryL3, RedsiftColorSecondaryL4, RedsiftColorSecondaryN, RedsiftColorTealD1, RedsiftColorTealD2, RedsiftColorTealD3, RedsiftColorTealD4, RedsiftColorTealL1, RedsiftColorTealL2, RedsiftColorTealL3, RedsiftColorTealL4, RedsiftColorTealN, RedsiftColorTextPrimary, RedsiftColorTextSecondary, RedsiftColorYellowD1, RedsiftColorYellowD2, RedsiftColorYellowD3, RedsiftColorYellowD4, RedsiftColorYellowL1, RedsiftColorYellowL2, RedsiftColorYellowL3, RedsiftColorYellowL4, RedsiftColorYellowN, RedsiftLayoutZIndexDialog, RedsiftLayoutZIndexDropdown, RedsiftLayoutZIndexFooter, RedsiftLayoutZIndexHeader, RedsiftLayoutZIndexOverlay, RedsiftLayoutZIndexPopover, RedsiftLayoutZIndexSidePanel, RedsiftLayoutZIndexTooltip, RedsiftTypographyBadgeFontFamily, RedsiftTypographyBadgeFontSize, RedsiftTypographyBadgeFontWeight, RedsiftTypographyBadgeLineHeight, RedsiftTypographyBodyFontFamily, RedsiftTypographyBodyFontSize, RedsiftTypographyBodyFontWeight, RedsiftTypographyBodyLineHeight, RedsiftTypographyBodyTextTransform, RedsiftTypographyButtonFontFamily, RedsiftTypographyButtonFontSize, RedsiftTypographyButtonFontWeight, RedsiftTypographyButtonLineHeight, RedsiftTypographyButtonTextTransform, RedsiftTypographyCaptionFontFamily, RedsiftTypographyCaptionFontSize, RedsiftTypographyCaptionFontWeight, RedsiftTypographyCaptionLineHeight, RedsiftTypographyCaptionTextTransform, RedsiftTypographyChipFontFamily, RedsiftTypographyChipFontSize, RedsiftTypographyChipFontWeight, RedsiftTypographyChipLineHeight, RedsiftTypographyDatagridCellFontFamily, RedsiftTypographyDatagridCellFontSize, RedsiftTypographyDatagridCellFontWeight, RedsiftTypographyDatagridCellLineHeight, RedsiftTypographyDatagridHeaderFontFamily, RedsiftTypographyDatagridHeaderFontSize, RedsiftTypographyDatagridHeaderFontWeight, RedsiftTypographyDatagridHeaderLineHeight, RedsiftTypographyFontFamilyPoppins, RedsiftTypographyFontFamilySourceCodePro, RedsiftTypographyFontWeightBlack, RedsiftTypographyFontWeightBold, RedsiftTypographyFontWeightExtraBold, RedsiftTypographyFontWeightExtraLight, RedsiftTypographyFontWeightLight, RedsiftTypographyFontWeightMedium, RedsiftTypographyFontWeightRegular, RedsiftTypographyFontWeightSemiBold, RedsiftTypographyFontWeightThin, 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, RedsiftTypographyHelperTextTransform, RedsiftTypographyInputTextFontFamily, RedsiftTypographyInputTextFontSize, RedsiftTypographyInputTextFontWeight, RedsiftTypographyInputTextLineHeight, RedsiftTypographyLinkFontFamily, RedsiftTypographyLinkFontSize, RedsiftTypographyLinkFontWeight, RedsiftTypographyLinkLineHeight, RedsiftTypographyPillFontFamily, RedsiftTypographyPillFontSize, RedsiftTypographyPillFontWeight, RedsiftTypographyPillLineHeight, RedsiftTypographyTooltipFontFamily, RedsiftTypographyTooltipFontSize, RedsiftTypographyTooltipFontWeight, RedsiftTypographyTooltipLineHeight, RovingTabindexListbox, SecondaryColorPalette, Shield, ShieldVariant, SideNavigationMenu, SideNavigationMenuBar, SideNavigationMenuBarVariant, SideNavigationMenuItem, SideNavigationMenuReducerActionType, Skeleton, SkeletonCircle, SkeletonText, SkeletonTextVariant, Spinner, SpinnerSize, StyledButton, StyledLink, Switch, SwitchGroup, SwitchGroupOrientation, Text, TextComponent, TextField, TextFieldVariant, TextVariant, Theme, ThemeContext, ThemeProvider, baseContainer, baseFlexbox, baseGrid, baseInternalSpacing, baseLayout, basePositioning, baseSizing, baseSpacing, baseStyling, filterComponents, focusRing, getCanvasFont, getContainerProps, getCssStyle, getMaxTextWidth, getTextWidth, isComponent, nextId, partitionComponents, resetId, setPrefix, sizeToDimension$1 as sizeToDimension, srOnly, uniqueId, useAppSidePanel, useBoundingClientRect, useFocusOnList, useFocusOnListItem, useId$1 as useId, useSideNavigationMenuBar, useTheme, useWindowSize, warnIfNoAccessibleLabelFound };
 //# sourceMappingURL=index.js.map